equipment/src/views/archive/archive_scan.vue

<template>
  <el-dialog :visible.sync="dialog" append-to-body :title="isAppend ? '追加归档' : '扫码归档'" width="50%" @close="closeDialog">
    <el-form ref="archive" :model="archive" size="small" label-width="100px">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="扫码框">
            <el-input v-model="baogaobianhao" style="width: 300px;" @keyup.enter.native="handleKeyUpEnter" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="归档架号" required>
            <AutoComplete ref="autoComplete" :frame-nums="frameNums" :frame-num="archive.frameNum" :is-edit="isAppend" @getFrameNum="setValMethod" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="列" prop="columnNum" required>
            <el-input v-model="archive.columnNum" :disabled="isAppend" style="width: 150px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="归档盒号" prop="boxNum" required>
            <el-input v-model="archive.boxNum" :disabled="isAppend" style="width: 150px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--表格渲染-->
      <el-table :data="paramList" size="mini" height="400px" border fit highlight-current-row stripe width="100%">
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column align="center" label="报告编号" prop="baogaobianhao" />
        <el-table-column align="center" label="设备种类" prop="shebeizhonglei" />
        <el-table-column align="center" label="使用单位" prop="shiyongdanwei" />
        <el-table-column align="center" label="注册代码" prop="zhucedaima" />
        <el-table-column align="center" label="使用登记证编号" prop="shiyongdengjibianhao" />
        <el-table-column align="center" label="产品编号" prop="chanpinbianhao" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.archiveId" type="danger" size="small" icon="el-icon-delete" @click="removeInfo(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="dialog = false">
        取消
      </el-button>
      <el-button type="primary" @click="doSubmit">
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import Utils from '../../utils/contact.js'
import AutoComplete from './components/AutoComplete/index'
export default {
  components: { AutoComplete },
  props: {
    frameNums: {
      type: Array,
      required: true
    },
    isAppend: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      paramList: [],
      dialog: false,
      archive: {},
      baogaobianhao: '',
      isJd: false,
      isCy: false,
      jianyijiahao: [] // 建议输入框里的归档架号
    }
  },
  methods: {
    doInit() {
      this.$nextTick(() => {
        this.jianyijiahao = this.frameNums
        if (this.isAppend) {
          this.api({
            url: '/archive',
            params: {
              id: this.id
            },
            method: 'get'
          }).then(data => {
            this.archive = data.archive
            this.paramList = data.paramList
          })
        }
      })
    },
    // 扫码
    handleKeyUpEnter() {
      // 判断新录入的报告编号是否存在
      if (this.paramList.every(param => param.baogaobianhao !== this.baogaobianhao)) {
        // 进行查询
        this.getYsjlByBgbh()
      } else {
        this.baogaobianhao = ''
      }
    },
    /**
     * 查询报告
     */
    getYsjlByBgbh() {
      // 先去18版承压类进行查询
      this.api({
        url: '/archive/getYsjlByBgbh?bgbh=' + this.baogaobianhao,
        method: 'get'
      }).then(data => {
        if (data != null && data !== '') {
          this.paramList.unshift({
            id: data.id,
            baogaobianhao: data.baogaobianhao,
            shebeizhonglei: data.shebeizhonglei,
            shiyongdanwei: data.shiyongdanwei,
            zhucedaima: data.zhucedaima,
            shiyongdengjibianhao: data.shiyongdengjibianhao,
            chanpinbianhao: data.chanpinbianhao
          })
        }
      }).catch(() => {
      })
      this.baogaobianhao = ''
    },
    // 禁止扫码框粘贴
    handlePaste() {
      return false
    },
    // 执行归档报告
    doSubmit() {
      let archiveParamList = Object.assign([], this.paramList)
      if (this.isAppend) {
        archiveParamList = archiveParamList.filter(archiveParam => !archiveParam.archiveId)
      }
      if (!this.archive.frameNum) {
        this.$message.warning('请填写归档架号')
        return false
      }
      if (archiveParamList.length === 0) {
        this.$message.warning('请添加要归档的报告数据')
        return false
      }
      this.$refs['archive'].validate(valid => {
        if (valid) {
          this.archive.archiveUser = this.$store.getters.nickname
          this.archive.archiveCount = this.paramList.length

          this.api({
            url: '/archive',
            method: this.isAppend ? 'put' : 'post',
            data: {
              archive: this.archive,
              params: archiveParamList
            }
          }).then(() => {
            this.$message.success('添加成功。')
            Utils.$emit('archive-list')
            this.dialog = false
          })
        } else {
          return false
        }
      })
    },
    // 清空单条已归档数据
    removeInfo($index) {
      if ($index === 0) {
        this.paramList.splice($index, $index + 1)
      } else {
        this.paramList.splice($index, 1)
      }
    },
    // 关闭归档报告窗口触发事件
    closeDialog() {
      this.$refs['archive'].resetFields()
      this.$refs.autoComplete.cleanNum()
      this.archive = {}
      this.baogaobianhao = ''
      this.paramList = []
      this.isCy = false
      this.isJd = false
    },
    // AutoComplete组件通信
    setValMethod(data) {
      this.archive.frameNum = data
    }
  }
}

</script>