xiaoshi_system/src/views/report/components/dialog/handlePerson.vue

<template>
  <div>
    <el-dialog  title="配案人员" :visible.sync="visible" width="800px" :close-on-click-modal="false"  :before-close="handleClose" append-to-body>
      <div style="height:calc(100vh - 250px)">
        <div class="header">
          <el-button type="primary" size="small" @click="add">添加</el-button>
        </div>
        <el-table 
            ref="table"
            border
            :data="tableData"
            row-key="id"
            style="width: 100%"
            height="calc(100% - 50px)"
            v-loading="loading">
            <el-table-column prop="name" label="姓名" min-width="220">
                <template slot-scope="scope">
                    <div>
                        <div v-if="scope.row.id  && editMessage.id!=scope.row.id">
                            {{ scope.row.name }}
                        </div>
                        <div v-else>
                            <el-autocomplete
                              style="width: 100%;"
                                class="inline-input"
                                v-model="scope.row.name"
                                v-SelectLazyLoading="IPREmailLoad"
                                :fetch-suggestions="querySearchByName"
                                placeholder="请输入内容"
                                @select="(item)=>handleSelect(item,scope.row)"
                            >
                            <template slot-scope="{ item }">
                                <div style="padding: 5px 0;">
                                  <div style="text-overflow: ellipsis;overflow: hidden;line-height: normal;">{{ item.name }}</div>
                                  <div style="font-size: 12px;color: #b4b4b4;line-height: normal;">{{ item.email }}</div>
                                </div>
                              </template>
                            </el-autocomplete>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" min-width="220">
                <template slot-scope="scope">
                    <div>
                        <div v-if="scope.row.id  && editMessage.id!=scope.row.id">
                            {{ scope.row.email }}
                        </div>
                        <div v-else>
                            <el-autocomplete
                              style="width: 100%;"
                                class="inline-input"
                                v-model="scope.row.email"
                                v-SelectLazyLoading="IPREmailLoad"
                                :fetch-suggestions="querySearchByEmail"
                                placeholder="请输入内容"
                                @select="(item)=>handleSelect(item,scope.row)"
                            >
                              <template slot-scope="{ item }">
                                <div style="padding: 5px 0;">
                                  <div style="text-overflow: ellipsis;overflow: hidden;line-height: normal;">{{ item.email }}</div>
                                  <div style="font-size: 12px;color: #b4b4b4;line-height: normal;">{{ item.name }}</div>
                                </div>
                              </template>
                            </el-autocomplete>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px">
                <template slot-scope="scope">
                    <div>
                        <div v-if="scope.row.id  && editMessage.id!=scope.row.id">
                            <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
                            <el-button type="text" size="small" @click="remove(scope.row)">移除</el-button>
                        </div>
                        <div v-else>
                            <el-button type="text" size="small" @click="save(scope.row)">保存</el-button>
                            <el-button type="text" size="small" @click="cancel(scope.row,scope.$index)">取消</el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  components: {
    
  },
  props: {},
  data() {
    return {
        visible:false,
        tableData:[],
        loading:false,
        model:'list',
        IPREmailList:{
            queryParams:{
                current:0,
                size:10,
                total:1,
                name:null,
                email:null
            },
            data:[]
        },
        editMessage:{},
        reportId:null
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open(reportId){
      this.reportId =reportId
      this.editMessage = {}
      this.getList()
      this.visible = true
    },
    getList(){
      var params = {
        reportId:this.reportId
      }
      this.model = 'list'
      this.loading = true
      var api = 'matchCasePersonQuery'
      this.$api[api](params).then(response=>{
        if(response.code == 200){
          this.tableData = response.data
          this.loading = false
        }
      }).catch(error=>{
          this.tableData = []
          this.loading = false
      })
    },
    handleClose(){
        this.visible = false
    },
    //添加
    add(){
      this.tableData.push({})
      this.model = 'add'
    },
    //编辑
    edit(row){
      if(this.model != 'list' ){
        this.$message.warning('已有数据正在编辑，请先保存修改的数据')
        return
      }
        this.model = 'edit'
        this.editMessage = JSON.parse(JSON.stringify(row))
    },
    //移除配案人员
    remove(row){
      this.$confirm('确认删除选择的数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
          this.loading = true
          this.$api.matchCasePersonDelete([row.id]).then(response => {
              this.$message.success('移除成功')
              this.loading = false
              this.getList()
              this.IPREmailList={
                queryParams:{
                  current:0,
                  size:10,
                  total:1,
                  name:null,
                  email:null
                },
                data:[]
              }
          }).catch(error => {
              this.loading = false
          })
      })
    },
    //取消编辑
    cancel(row,index){
      if(this.model == 'add'){
        this.tableData.splice(index,1)
        return
      }else{
        row = JSON.parse(JSON.stringify(this.editMessage))
        this.editMessage = {}
      }
      this.model = 'list'
        
    },
    //保存
    save(row){
      if(!row.name){
        this.$message.warning('姓名不能为空')
        return
      }
      if(!row.email){
        this.$message.warning('邮箱不能为空')
        return
      }
      var regx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9_\.\-])+\.)+([a-zA-Z0-9]{2,4})+$/
      if(!regx.test(row.email)){
        this.$message.warning('邮箱格式不正确')
        return
      }
      var a = '添加'
      if(row.id){
        a = '修改'
      }
      this.loading = true
      row.reportId = this.reportId
      this.$api.matchCasePersonUpdate(row).then(response=>{
        if(response.code == 200){
          this.$message.success(a+'成功')
          this.loading = false
          this.getList()
        }
      }).catch(error=>{
        this.loading = false
      })
    },

     /**
    * IPR邮箱
    */
    // 懒加载IPR邮箱方法
    IPREmailLoad() {
      if (this.IPREmailList.queryParams.current * this.IPREmailList.queryParams.size >= this.IPREmailList.queryParams.total) {
        return false
      }
      this.IPREmailList.queryParams.current++
      this.getIPREmailList()
    },
    // 查询IPR邮箱
    async getIPREmailList() {
      let params = {
        ...this.IPREmailList.queryParams,
      }
      await this.$api.iprPersonQuery(params).then(res => {
        if (res.code == 200) {
          this.IPREmailList.data.push(...res.data.data)
          this.IPREmailList.queryParams.total = res.data.total
          this.IPREmailList.cb(this.IPREmailList.data);
        }
      })
    },
    //获取下拉建议IPR邮箱数据
    async querySearchByEmail(queryString, cb) {
      this.IPREmailList.queryParams.current = 1
      this.IPREmailList.queryParams.email = queryString
      this.IPREmailList.data = []
      this.IPREmailList.cb = cb
      await this.getIPREmailList()
    },
    async querySearchByName(queryString, cb) {
      this.IPREmailList.queryParams.current = 1
      this.IPREmailList.queryParams.name = queryString
      this.IPREmailList.data = []
      this.IPREmailList.cb = cb
      await this.getIPREmailList()
    },
    handleSelect(item,row){
        this.$set(row,'name',item.name)
        this.$set(row,'email',item.email)
        this.$set(row,'iprPersonId',item.id)
    }
  },
};
</script>
<style lang="scss" scoped>
.header{
  height: 50px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
</style>