lanan-system-vue/src/views/company/staff/form/StaffChangeFormData.vue

<template>
  <div id="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
      <el-empty v-if="!formData" description="暂无数据"/>
      <div v-else>
        <el-descriptions class="margin-top" title="交出方员工信息" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              员工姓名
            </template>
            {{ formData.oldStaff.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-star-off"></i>
              员工工号
            </template>
            {{ formData.oldStaff.workNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              员工手机号
            </template>
            {{ formData.oldStaff.tel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i :class="formData.oldStaff.sex == '0' ? 'el-icon-female' : 'el-icon-male'"></i>
              性别
            </template>
            <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="formData.oldStaff.sex"/>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              家庭住址
            </template>
            {{ formData.oldStaff.address }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" title="接收方员工信息" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              员工姓名
            </template>
            {{ formData.newStaff.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-star-off"></i>
              员工工号
            </template>
            {{ formData.newStaff.workNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              员工手机号
            </template>
            {{ formData.newStaff.tel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i :class="formData.newStaff.sex == '0' ? 'el-icon-female' : 'el-icon-male'"></i>
              性别
            </template>
            <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="formData.newStaff.sex"/>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              家庭住址
            </template>
            {{ formData.newStaff.address }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" title="交接信息" :column="1" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-timer"></i>
              交接时间
            </template>
            {{ formData.changeTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-chat-dot-square"></i>
              交接备注
            </template>
            {{ formData.remark }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-star-off"></i>
              交接附件
            </template>
            <el-card v-for="(file, index) in formData.fileUrls" :key="index" style="margin-bottom: 10px">
              <div slot="header" class="clearfix">
                <i :class="getFileIcon(file.fileUrl)"></i>
                <span>{{ file.fileName }}</span>
              </div>
              <div>
                <a :href="file.fileUrl" download :title="file.fileName" target="_blank">
                  <el-button type="primary" size="small">
                    下载
                  </el-button>
                </a>
              </div>
            </el-card>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as StaffChangeApi from '@/api/company/staffChange'

export default {
  name: 'StaffChangeFormData',
  data() {
    return {
      // 弹出层标题
      dialogTitle: '员工交接记录',
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      formData: {
        oldStaff: {
          workNo: '',
          name: '',
          tel: '',
          sex: '',
          address: ''
        },
        newStaff: {
          workNo: '',
          name: '',
          tel: '',
          sex: '',
          address: ''
        },
        changeTime: '',
        fileUrls: [{
          fileName: '',
          fileUrl: ''
        }],
        remark: ''
      }
    }
  },
  methods: {
    /** 打开弹窗 */
    async open(id) {
      this.dialogVisible = true
      this.reset()
      const res = await StaffChangeApi.getChangeStaff(id)
      this.formData = res.data
      if (!!this.formData) {
        this.formData.fileUrls = this.formData.fileUrls.split(',').map(item => {
          return {
            fileName: item.split('/').pop(),
            fileUrl: item
          }
        })
      }
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        oldStaff: {
          workNo: '',
          name: '',
          tel: '',
          sex: '',
          address: ''
        },
        newStaff: {
          workNo: '',
          name: '',
          tel: '',
          sex: '',
          address: ''
        },
        changeTime: '',
        fileUrls: [{
          fileName: '',
          fileUrl: ''
        }],
        remark: ''
      }
      this.resetForm('formRef')
    },
    getFileIcon(url) {
      // 这个函数用于根据文件类型返回对应的图标类名
      const fileName = url.split('/').pop()
      const extension = fileName.split('.').pop().toLowerCase()
      switch (extension) {
        case 'doc':
        case 'docx':
          return 'el-icon-document'
        case 'xls':
        case 'xlsx':
          return 'el-icon-s-data'
        case 'pdf':
          return 'el-icon-document-checked'
        default:
          return 'el-icon-folder'
      }
    }
  }
}
</script>

<style scoped>

</style>