equipment/src/views/bggl/8000/jj/component/SjdwWsjc.vue

<template>
  <el-form ref="ysjl" :model="ysjl" class="el-form" label-position="right" label-width="130px">
    <fieldset>
      <legend>基本信息</legend>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="无损检测单位" prop="jiancedanwei">
            <el-input v-model="ysjl.jiancedanwei" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="height: 100px;">
        <el-col :span="18">
          <el-form-item label="备注" prop="beizhu">
            <el-input v-model="ysjl.beizhu" type="textarea" :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>
    </fieldset>
    <fieldset>
      <legend>现场作业无损检测人员一览表</legend>
      <el-row :gutter="10">
        <el-col :span="3" style="width: 158px;">
          <el-button type="success" size="medium" icon="el-icon-download" @click="downloadTemplate2">
            下载导入模板
          </el-button>
        </el-col>
        <el-col :span="10">
          <el-upload
            :show-file-list="false"
            :before-upload="beforeUpload2"
            style="float: left; margin-right: 15px;"
            accept=".xlsx"
            action=""
          >
            <el-button type="primary" size="medium" icon="el-icon-upload">
              导入数据
            </el-button>
          </el-upload>
          <el-button type="success" size="medium" icon="el-icon-circle-plus-outline" @click="addRow2">
            添加
          </el-button>
          <el-button type="danger" size="medium" :disabled="multipleSelection2.length === 0" icon="el-icon-remove-outline" @click="delRow2">
            删除
          </el-button>
        </el-col>
      </el-row>
      <el-table ref="wsjcrys" :data="wsjcrys" border style="margin-bottom: 20px" @row-click="onRowClick2" @selection-change="handleSelectionChange2">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="C1" label="无损检测人员" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.C1" :disabled="edit" align="center" />
          </template>
        </el-table-column>
        <el-table-column prop="C2" label="人员证号" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.C2" :disabled="edit" align="center" />
          </template>
        </el-table-column>
        <el-table-column prop="C3" label="合格项目" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.C3" :disabled="edit" align="center" />
          </template>
        </el-table-column>
        <el-table-column prop="C4" label="有效期" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.C4" :disabled="edit" align="center" />
          </template>
        </el-table-column>
        <el-table-column prop="C5" label="执业注册证" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.C5" :disabled="edit" align="center" />
          </template>
        </el-table-column>
      </el-table>
    </fieldset>
  </el-form>
</template>

<script>
export default {
  props: {
    ysjl: {
      type: Object,
      required: true
    },
    wsjcrys: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      edit: false,
      multipleSelection2: []
    }
  },
  methods: {
    getTableData() {
      const data = {
        wsjcYsjl: this.ysjl,
        wsjcrys: this.wsjcrys
      }
      this.$emit('syncWsjcData', data)
    },
    onRowClick(row) {
      this.$refs.hgs.toggleRowSelection(row)
    },
    onRowClick2(row) {
      this.$refs.wsjcrys.toggleRowSelection(row)
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val
    },
    addRow2() {
      this.wsjcrys.push({})
      const transData = {
        wsjcYsjl: this.ysjl,
        wsjcrys: this.wsjcrys
      }
      this.$emit('syncWsjcData', transData)
    },
    delRow2() {
      for (let i = 0; i < this.multipleSelection2.length; i++) {
        for (let y = 0; y < this.wsjcrys.length; y++) {
          if (JSON.stringify(this.multipleSelection2[i]) === JSON.stringify(this.wsjcrys[y])) {
            this.wsjcrys.splice(y, 1)
          }
        }
      }
      const transData = {
        wsjcYsjl: this.ysjl,
        wsjcrys: this.wsjcrys
      }
      this.$emit('syncWsjcData', transData)
    },
    downloadTemplate2() {
      this.api({
        url: '/upload/downloadTemplate',
        method: 'post',
        params: {
          templateName: '现场作业无损检测人员一览表模板.xlsx'
        }
      }).then(data => {
        window.open(data)
      })
    },
    // 上传数据
    beforeUpload2(file) {
      // 判断文件后缀名
      var index = file.name.lastIndexOf('.')
      var ext = file.name.substr(index + 1).toLocaleLowerCase()
      if (ext !== 'xls' && ext !== 'xlsx') {
        this.$message.error('只能上传xls/xlsx格式的文件')
        return false
      }
      const fd = new FormData()
      fd.append('file', file)
      fd.append('paramData', JSON.stringify(this.wsjcrys))
      this.api({
        url: '/upload/uploadSchedule',
        method: 'post',
        data: fd
      }).then(data => {
        this.wsjcrys = data
        const transData = {
          wsjcYsjl: this.ysjl,
          wsjcrys: this.wsjcrys
        }
        this.$emit('syncWsjcData', transData)
        this.$message({ message: '上传成功！', type: 'success' })
      })
    },
    getWsjcData() {
      const transData = {
        wsjcYsjl: this.ysjl,
        wsjcrys: this.wsjcrys
      }
      this.$emit('syncWsjcData', transData)
    }
  }
}
</script>