expertImport.vue

<template>
  <div class="app-content" style="height:75vh;overflow: auto;">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <div style="width:100%; height: 40px;">
        <up-load @beforeUpload="beforeUpload" :format="['xls', 'xlsx']" />
      </div>
      <div style="width:100%;height: calc(100% - 80px);overflow: auto;">
        <a-table :dataSource="tableData" :columns="columns" rowKey="index" :pagination="false" :loading="loading">
          <template slot="msg" slot-scope="record">
            <span v-if="!!record.msg " style="color: red;">
              {{ record.msg }}
            </span>
          </template>
          <template slot="stateSwitch" slot-scope="record">
            <a-switch checked-children="正常" un-checked-children="注销" :checked="checkedState(record)" @change="switchChange($event, record)" />
          </template>
          <template slot="option" slot-scope="record">
            <a-button type="primary" size="small" @click="recordClick(record, 'view')">查看</a-button>
            <a-button type="primary" size="small" @click="recordClick(record, 'edit')">修改</a-button>
            <a-button type="primary" size="small" @click="recordClick(record, 'reset')">重置密码</a-button>
          </template>
        </a-table>
      </div>
      <div style="text-align:center;width:100%; height: 36px;">
        <a :href="'/downloadFile/expertTemplate.xlsx'" download="expertTemplate.xlsx" style="margin-right: 30px;">
          <a-icon type="download"></a-icon>&nbsp;<span style="color:green;text-decoration:underline;">模板下载</span>
        </a>
        <a-button type="primary" @click="dataImport" :disabled="disabled">导入</a-button>
      </div>
    </a-spin>
  </div>
</template>
<script>
import { isEmptyParams, readExcelFile, personGender, personBirthday, checkIdentitytionId, checkEmail, checkPhone } from "@/views/utils/common"
import moment from "moment"
import { checkCertId } from "@/views/utils/validate"

export default {
  name: "expertImport",
  data () {
    return {
      columns: [
        { title: "姓名", dataIndex: "personName", align: 'center' },
        { title: "证件号", dataIndex: "certId", align: 'center' },
        { title: "手机号", dataIndex: "mobile", align: 'center' },
        { title: "邮箱", dataIndex: "email", align: 'center' },
        { title: "职称", dataIndex: "titleName", align: 'center' },
        { title: "学历", dataIndex: "educationName", align: 'center' },
        { title: "专业", dataIndex: "specName", align: 'center' },
        { title: '工作单位', dataIndex: 'unitName', align: 'center' },
        { title: '是否财务专家', dataIndex: 'isFinance', align: 'center' },
        { title: '验证结果', scopedSlots: { customRender: 'msg' }, align: 'center' },
      ],
      tableData: [],
      disabled: true,
      errorState: false,
      loading: false,
    };
  },
  created () {

  },
  methods: {
    beforeUpload (file) {
      this.errorState = false
      this.tableData = []
      let list = readExcelFile(file, 0)
      let certList = []
      let mobileList = []
      let exportList = []

      list.then((d) => {
        //读取文件数据
        d.forEach(e => {
          let msg = ''
          let certId = e.证件号
          let gender = null
          let birthday = null

          if (!!!e.姓名) {
            msg = ';姓名不能为空！'
          }
          if (!!!e.证件号) {
            msg += ';证件号不能为空！'
          }
          if (!!!e.手机号) {
            msg += ';手机号不能为空！'
          }
          if (!!!e.邮箱) {
            msg += ';邮箱不能为空！'
          }
          if (!!!e.专业) {
            msg += ';专业不能为空！'
          }
          if (!!!e.学历) {
            msg += ';学历不能为空！'
          }
          if (!!!e.职称) {
            msg += ';职称不能为空！'
          }
          if (!!!e.工作单位) {
            msg += ';工作单位不能为空！'
          }
          if (!!!e.是否财务专家) {
            msg += ';是否财务专家不能为空！'
          }
          if (!!msg) {
            this.errorState = true
          }

          if (checkCertId(certId)) {
            gender = personGender(certId)
            birthday = personBirthday(certId) + ' 00:00:00'
          }

          let expert = { personName: e.姓名, certId: certId, sex: gender, birthday: birthday, mobile: e.手机号, email: e.邮箱, specName: e.专业, educationName: e.学历, titleName: e.职称, unitName: e.工作单位, isFinance: e.是否财务专家 === '是' ? 1 : 0, msg: msg }
          exportList.push(expert)
          certList.push(e.证件号)
          mobileList.push(e.手机号)
        })

        let uniqueMobileList = [...new Set(mobileList)]
        if (uniqueMobileList.length != exportList.length) {
          this.$message.error('手机号出现重复！')
          return false
        }

        let uniqueCertList = [...new Set(certList)]
        if (uniqueCertList.length != exportList.length) {
          this.$message.error('证件号出现重复！')
          return false
        }

        if (exportList.length > 0) {
          this.tableData = exportList
          this.disabled = this.errorState ? true : false
        }
      })
      return false
    },
    dataImport () {
      if (this.tableData.length == 0) {
        this.$message.error('请选择Excel！')
        return
      }
      let pars = isEmptyParams(this.tableData)
      let par = { ...pars }
      this.$api.expert.expertImport(this.tableData).then(({ data = {} }) => {
        if (data) {
          this.$message.info(data)
          this.tableData = []
          this.$emit('save', true)
        }
      })
    }
  },
};
</script>
<style scoped lang="less">
::v-deep .ant-spin-container {
  width: 100%;
  height: 100%;
}
</style>