anrui/yxt-as-ui/src/views/client/customermanagement/relation/person.vue

<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <div class="tab-header webtop">
        <div>{{ viewTitle }}</div>
        <div>
          <el-button v-show="isDesignatedEnterprise == '1'" type="danger" size="small" @click="handleDisableState">禁用</el-button>
          <el-button v-show="isDesignatedEnterprise == '1'" type="primary" size="small" @click="handleEnable">启用</el-button>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="listconadd">
        <el-form ref="form_obj" :model="formobj" class="formaddcopy02">
          <div class="title ">对接人列表</div>
          <el-table :key="tableKey" :data="formobj.list" :index="index" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="50"/>
            <el-table-column fixed width="60" label="序号" type="index" :index="index + 1" align="center"/>
            <el-table-column prop="name" label="姓名" align="center" width="120" />
            <el-table-column prop="mobile" label="手机号" align="center" width="130" />
            <el-table-column prop="isEnable" label="是否已禁用" align="center" width="130" />
            <el-table-column prop="remarks" label="备注" align="center" min-width="200" />
          </el-table>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import req from '@/api/client/customermanagement'

export default {
  name: 'Person',
  data() {
    return {
      isDesignatedEnterprise: '0', // 是否为欠款月结客户
      viewTitle: '',
      viewState: 1,
      tableKey: 1,
      index: 0,
      sids: [],
      formobj: {
        sid: '',
        list: []
      }
    }
  },
  methods: {
    showInfo(row) {
      this.viewTitle = '对接人信息'
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      this.formobj.sid = row.sid
      this.isDesignatedEnterprise = row.isDesignatedEnterprise
      req.getListByCustomerSid({ sid: row.sid }).then((res) => {
        if (res.success) {
          this.formobj.list = res.data
        }
      })
    },
    // 信息条数 获取点击时当前的sid
    handleSelectionChange(row) {
      const aa = []
      row.forEach(element => {
        aa.push(element.customerVehSid)
      })
      this.sids = aa
    },
    handleDisableState() {
      if (this.sids.length === 0) {
        this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行禁用操作' })
        return
      }
      const tip = '请确认是否禁用所选 ' + this.sids.length + ' 条记录?'
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        req.disableStateByPerson(this.sids).then((resp) => {
          if (resp.success) {
            this.$message({ type: 'success', message: resp.msg, showClose: true })
          }
          this.reload()
          loading.close()
        }).catch(e => {
          loading.close()
        })
      }).catch(() => {
      })
    },
    handleEnable() {
      if (this.sids.length === 0) {
        this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行启用操作' })
        return
      }
      const tip = '请确认是否启用所选 ' + this.sids.length + ' 条记录?'
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        req.enableByPerson(this.sids).then((resp) => {
          if (resp.success) {
            this.$message({ type: 'success', message: resp.msg, showClose: true })
          }
          this.reload()
          loading.close()
        }).catch(e => {
          loading.close()
        })
      }).catch(() => {
      })
    },
    reload() {
      req.personList({ sid: this.formobj.sid }).then((res) => {
        if (res.success) {
          this.formobj.list = res.data
        }
      })
    },
    handleReturn() {
      this.formobj = {
        sid: '',
        list: []
      }
      this.isDesignatedEnterprise = '0'
      this.$emit('doback')
    }
  }
}
</script>

<style scoped></style>