SafetyAlertSystem-ui/src/views/base/person/index.vue

<template>
  <!-- 工程管理页面 -->
  <div class="app-container">
    <!-- 表格 -->
    <TableModel
      :formLabel="formLabel"
      :columnsList="columnsList"
      :request-api="queryPersonListApi"
      ref="tableRef"
      @transIdList="getIdList"
    >
      <template slot="btn" slot-scope="{ queryParams }">
        <el-button type="primary" @click="handleAddData()" icon="el-icon-plus" size="mini"
        >新增人员</el-button
        >
        <el-button
          @click="handleDownload(
                    'base/tbPeople/downLoad',
                    '人员模板',
                    queryParams
                  )"
          icon="el-icon-download"
          size="mini"
        >数据模板下载</el-button
        >

        <el-button
          @click="handleExportData(
                    exportList,
                    'base/tbPeople/export',
                    '人员清单',
                    queryParams
                  )"
          icon="el-icon-upload2"
          size="mini"
        >导出数据</el-button
        >
        <el-upload
          :http-request="(obj) => uploadData(obj)"
          action="#"
          :file-list="fileList"
          :on-exceed="fileExceed"
          accept=".xls, .xlsx"
          :limit="1"
        >
          <el-button
            style="margin-top: 10px"
            icon="el-icon-download"
            size="mini"
          >导入数据</el-button
          >
        </el-upload>
      </template>
      <template slot="handle" slot-scope="{ data }">
        <el-button
          type="primary"
          size="mini"
          @click="handleEditData(data)"
        >编辑</el-button
        >
        <el-button
          type="danger"
          size="mini"
          @click="handleDeleteData(data.id, deletePersonApi)"
        >删除</el-button
        >
      </template>
      <template slot="sex" slot-scope="{ data }">
        {{ data.sex === 1 ? '男' : '女' }}
      </template>
      <template slot="postCode" slot-scope="{ data }">
        {{ queryPostcode(data.postCode) }}
      </template>
      <template slot="idCard" slot-scope="{ data }">
        {{ idCardCrypto(data.idCard) }}
      </template>
      <template slot="relPhone" slot-scope="{ data }">
        {{ phoneCrypto(data.relPhone) }}
      </template>
    </TableModel>

    <!-- 新增以及修改时的弹框 -->
    <DialogModel
      :dialogConfig="dialogConfig"
      @closeDialogOuter="closeDialogOuter"
    >
      <template slot="outerContent">
        <!-- 新增以及修改数据的表单组件 -->
        <FormPerson
          :editParams="editParams"
          @closeDialog="closeDialog"
        />
      </template>
    </DialogModel>
  </div>
</template>

<script>
import { formLabel, columnsList, dialogConfig } from './config'
import { commonMixin } from '../mixins/common'
import {
  queryPersonListApi,
  deletePersonApi,
  personFileUpLoad
} from '@/api/base/person'
import FormPerson from './components/form-person.vue'
export default {
  name: 'person',
  methods: {
    queryPersonListApi,
    deletePersonApi,
    getIdList(idList) {
      this.exportList = []
      idList.forEach(item => {
        this.exportList.push(item.id)
      })
    },
    handleDownload(url, fileName, queryParams) {
      this.download(
        url,
        {
          ...queryParams
        },
        `${fileName}_${new Date().getTime()}.xlsx`,
      )
    },
    queryPostcode(val) {
      switch (val) {
        case '0900101':
          return '班组负责人'
        case '0900102':
          return '班组安全员'
        case '0900103':
          return '班组技术员'
        case '0900106':
          return '特种作业人员'
      }
    },
    /** 上传图片/文件 */
    uploadData(param) {
      console.log(param)
      const formData = new FormData()
      formData.append('file', param.file)
      personFileUpLoad(formData).then(res => {
        if(res.code === 200) {
          this.$modal.msgSuccess('上传成功')
          this.$refs.tableRef.getTableList()
        }
      }).catch(err => {})
    },
    fileExceed() {
      this.$modal.msgError('最多上传1个文件！')
    },
  },
  mixins: [commonMixin],
  components: {
    FormPerson
  },
  created() {

  },
  data() {
    return {
      // 搜索区表单配置项
      formLabel,
      // 表格导出id列表
      exportList: [],
      // 列表区配置项
      columnsList,
      // 弹框区配置项
      dialogConfig,
      // 新建时弹框标题
      addDialogTitle: '新增人员',
      // 修改时弹框标题
      editDialogTitle: '修改人员',
      fileList: []
    }
  },
}
</script>