udiwms-vue-frame/src/views/dev/DialogDeviceSelectAdd.vue

<template>
  <div>
    <el-card>
      <el-form :model="filterQuery" size="mini" label-width="100px" v-if="showSearch">
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备编码:">
              <el-input v-model="filterQuery.deviceCode" style="width: 90%" placeholder="请输入设备编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称:">
              <el-input v-model="filterQuery.productName" style="width: 90%" placeholder="请输入设备名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备状态">
              <el-select v-model="filterQuery.status"
                         style="width: 90%"
                         clearable>
                <el-option
                  v-for="item in deviceStatus"
                  :key="item.key"
                  :label="item.desc"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="最小销售标识:">
              <el-input v-model="filterQuery.nameCode" style="width: 90%" placeholder="请输入最小销售标识"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产企业:" >
              <el-input v-model="filterQuery.manufactory" style="width: 90%" placeholder="请输入生产企业"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册/备案号:" >
              <el-input v-model="filterQuery.zczbhhzbapzbh" style="width: 90%" placeholder="请输入注册/备案号"
              ></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

      <div class="top-right-btn">
        <el-button-group style="display:flex;">
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="confirmSelect">确定</el-button>
        </el-button-group>
      </div>

      <el-divider style="margin: 15px"></el-divider>


      <el-table v-loading="loading" :data="list" style="width: 100%" highlight-current-row="false" border
                @current-change="handleChange" @selection-change="handleSelectionChange"
                ref="multipleTable"
      >
        <el-table-column type="selection" width="55" ></el-table-column>
<!--        <el-table-column label="科室" width="150" prop="deptName"/>-->
        <el-table-column label="设备编码" width="150" prop="deviceCode"/>
        <el-table-column label="最小销售标识" width="150" prop="nameCode"/>
        <el-table-column label="名称" width="150" prop="productName"/>
        <el-table-column label="规格型号" width="160" prop="ggxh"/>
        <el-table-column label="状态" width="120" prop="statusName">
          <template slot-scope="scope">
            <el-tag :type="deviceStatus[scope.row.status].tagType">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="巡检锁定" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.checkLock?'primark':'info'">{{ scope.row.checkLock ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="变更次数" width="100" prop="changeCount"/>
        <el-table-column label="维修次数" width="100" prop="repairCount"/>
        <el-table-column label="巡检次数" width="100" prop="checkCount"/>
        <el-table-column label="计量单位" width="100" prop="measname"/>
        <el-table-column label="生产企业" width="180" prop="manufactory"/>
        <el-table-column label="批次号" width="100" prop="batchNo"/>
        <el-table-column label="序列号" width="100" prop="serialNo"/>
        <el-table-column label="生产日期" width="140" prop="productionDate"/>
        <el-table-column label="过期时间" width="140" prop="expireDate"/>
        <el-table-column label="供应商" width="100" prop="supName"/>
        <el-table-column label="udi码" width="150" prop="udi"/>
        <el-table-column label="注册/备案号" width="150" prop="zczbhhzbapzbh"/>
      </el-table>
    </el-card>

    <pagination
      v-show="total>0"
      :total="total"
      :limit.sync="filterQuery.limit"
      :page.sync="filterQuery.page"
      @pagination="handleCurrentChange"
    ></pagination>
  </div>
</template>

<script>
import { finProductSet } from '@/api/param/systemParamConfig'
import { detailByDeptCodePage } from '@/api/dev/deviceInfoApi'
import {deviceChangeStatus, deviceChangeType, deviceStatus} from "@/utils/enum";

export default {
  name: 'DialogDeviceInvProduct',
  computed: {
    deviceChangeType() {
      return deviceChangeType
    },
    deviceStatus() {
      return deviceStatus
    },
    deviceChangeStatus() {
      return deviceChangeStatus
    }
  },
  props: {
    deptCode: {
      type: Object,
      required: true
    },
    closeDialog: {
      type: Function,
      required: true
    },
    invQueryData: {
      type: Object,
      required: true
    },
    codeArray: {
      type: Object,
      required: true
    },
    orderQuery: {},
    type: {     //1.领用选入，2：业务单据选入
      type: Object,
      required: true
    },
    listType: {     //null:申购单产品选入；1：定量设置产品选入；2：设备入库产品选入
      type: Object,
      required: true,
    },
    chooseFunc: {
      required: false, type: Function
    }
  },
  data() {
    return {
      showSearch: true,
      filterQuery: {
        page: 1,
        limit: 10,
        deptCode: this.deptCode,
        deviceCode: null,
        nameCode: null,
        productName: null,
        status: deviceStatus.NORMAL.key,
        manufactory: null,
        zczbhhzbapzbh: null,
      },
      detailQuery: {
        code: null,
        productIdFk: null,
        page: 1,
        limit: 20
      },
      list: [],
      lists: [],
      total: 0,
      loading: true,
      index: null,
      dialogTableVisible: false,
      formLoading: false,
      dialogVisible: false,
      deleteLoading: false,
      busTypes: [],
      idQuery: null,
      showSup: false,
      fromOptions: [],
      productRemarkSet: {},
      tQuery: {},
      currentRow: null,
      radioCheck: null

    }
  },
  components: {},
  methods: {
    deviceAdd() {
      this.chooseFunc(this.lists)
    },
    confirmSelect() {
      if (this.lists == null) {
        this.$message.error('未选择产品')
        return
      }
      if (this.listType == null) {
        this.puApplayAdd()
      } else if (this.listType == 1) {
        this.invRationAdd()
      } else if (this.listType == 2) {
        this.deviceAdd()
      }
    },
    handleSelectionChange(val) {
      this.lists = []
      console.log(val)
        for (var i = 0; i < val.length; i++) {
          this.tQuery = val[i]
          this.tQuery.cpmctymc = val[i].productName
          this.tQuery.id = val[i].productId
          this.lists.push(this.tQuery)
        }
      // console.log(this.lists)
    },
    onReset() {

      this.$router.push({
        path: ''
      })
      this.filterQuery = {
        page: 1,
        limit: 10,
        deptCode: this.deptCode,
        deviceCode: null,
        nameCode: null,
        productName: null,
        status: deviceStatus.NORMAL.key,
        manufactory: null,
        zczbhhzbapzbh: null,
      }
      this.getList()
    },
    onSubmit() {
      this.loading = true
      this.filterQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.filterQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val.page
      this.getList()
    },
    closeDetailDialog(val) {
      this.codeDetailVisible = false
    },

    getList() {
      this.loading = true
      detailByDeptCodePage(this.filterQuery)
          .then((response) => {
            this.showSup = response.data.showSup
            this.loading = false
            this.list = response.data.list || []
            this.total = response.data.total || 0
          })
          .catch(() => {
            this.loading = false
            this.list = []
            this.total = 0
          })
    },
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    combine() {

      if (this.type == 3) {
        let nameCode = this.currentRow.nameCode ?? ''
        let productionDate = this.currentRow.productionDate ?? ''
        let expireDate = this.currentRow.expireDate ?? ''
        let batchNo = this.currentRow.batchNo ?? ''
        let udiCode = '#' + nameCode
          + '#' + productionDate
          + '#' + expireDate +
          '#' + batchNo + '#' + '#' + '#'
        this.closeDialog(udiCode)
      } else {
        let selection = this.$refs.multipleTable.selection
        if (selection.length < 1) {
          this.$message.error('未选择产品')
          return
        }
        var idster = []
        if (this.codeArray != null || this.codeArray != undefined) {
          if (this.codeArray.length > 0) {
            for (var i = 0; i < this.codeArray.length; i++) {
              idster.push(this.codeArray[i].relIdFk)
            }
          }
          if (idster.length > 0) {
            for (var i = 0; i < idster.length; i++) {
              for (var j = 0; j < selection.length; j++) {
                if (idster[i] == selection[j].relIdFk) {
                  this.$message.error('该产品已录入！')
                  return
                }
              }
            }
          }
        }

        var ids = []
        selection.forEach((obj, index) => {
          let data = {
            relId: obj.relIdFk,
            batchNo: obj.batchNo,
            productDate: obj.productionDate,
            expireDate: obj.expireDate,
            supId: obj.supId,
            price: obj.price,
            nameCode: obj.nameCode
          }
          ids.push(data)
        })

        this.chooseFunc(this.lists)

      }
    },

    findBasicProductSet() {
      finProductSet().then((response) => {
        if (response.code == 20000) {
          this.productRemarkSet = response.data
        }
      })
    },

    handleChange(val) {
      this.currentRow = val
      this.radioCheck = val.id
    }
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        false: 'success',
        true: 'danger'
      }
      return statusMap[status]
    }

  }
  ,
  mounted() {
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
  }
  ,
  created() {
    // 加载表格数据
    this.getList()
  }

}

</script>

<style type="text/scss" lang="scss">
</style>