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

<template>
  <div>
    <el-dialog  title="配案人员" :visible.sync="visible" width="600px" :close-on-click-modal="false"  :before-close="handleClose" append-to-body>
      <div style="height:calc(100vh - 250px)">
        <el-table 
            ref="table"
            border
            :data="tableData"
            row-key="id"
            style="width: 100%"
            height="calc(100% - 0px)"
            v-loading="loading">
            <el-table-column prop="name" label="姓名" width="180">
                <template slot-scope="scope">
                    <div>
                        <div v-if="model == 'list'">
                            {{ scope.row.name }}
                        </div>
                        <div v-else>
                            <el-autocomplete
                                class="inline-input"
                                v-model="scope.row.name"
                                v-SelectLazyLoading="IPREmailLoad"
                                value-key="name"
                                :debounce="1500"
                                :fetch-suggestions="querySearchByName"
                                placeholder="请输入内容"
                                @select="(item)=>handleSelect(item,scope.row)"
                            >
                            <span slot="append">
                                <template slot-scope="{ item }">
                                    <span>{{ item.email }}</span>
                                </template>
                            </span>
                            </el-autocomplete>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="180">
                <template slot-scope="scope">
                    <div>
                        <div v-if="model == 'list'">
                            {{ scope.row.email }}
                        </div>
                        <div v-else>
                            <el-autocomplete
                                class="inline-input"
                                v-model="scope.row.email"
                                :debounce="1500"
                                v-SelectLazyLoading="IPREmailLoad"
                                value-key="email"
                                :fetch-suggestions="querySearchByEmail"
                                placeholder="请输入内容"
                                @select="(item)=>handleSelect(item,scope.row)"
                            >
                            <span slot="append">
                                <template slot-scope="{ item }">
                                    <span>{{ item.name }}</span>
                                </template>
                            </span>
                            </el-autocomplete>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div>
                        <div v-if="model == 'list'">
                            <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 v-if="model=='edit'" type="text" size="small" @click="cancel(scope.row)">取消</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.getList()
      this.visible = true
    },
    getList(){
      var params = {
        reportId:this.reportId
      }
      this.loading = true
      var api = 'matchCasePersonQuery'
      this.$api[api](params).then(response=>{
        if(response.code == 200){
          if(response.data.id){
            this.tableData = [response.data]
            this.model = 'list'
          }else{
            this.tableData = []
            this.model = 'add'
          }
          this.loading = false
        }
      }).catch(error=>{
          this.tableData = []
          this.model = 'list'
          this.loading = false
      })
    },
    handleClose(){
        this.visible = false
    },
    //编辑
    edit(row){
        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()
          }).catch(error => {
              this.loading = false
          })
      })
    },
    //取消编辑
    cancel(row){
        row = 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(this.model == 'edit'){
        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.personnelList.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>
</style>