2024-09-09 修改了大部分下拉组件为模糊筛选，减轻前端渲染压力

src/views/WarehouseManagement/OutsourcingAllocation/index.vue

@@ -0,0 +1,656 @@
+<template>
+  <div class="app-container">
+    <el-card style="height: 850px">
+      <el-row>
+        <el-col style="width: 1351px">
+          <div style="margin-top: 7px; margin-bottom: 7px">
+            <el-input
+              v-model="partsName"
+              clearable
+              placeholder="工件名称/图号"
+              size="small"
+              style="width:150px"
+              @keyup.enter.native="searchTable()"/>
+            <el-input
+              v-model="processName"
+              clearable
+              placeholder="工序"
+              size="small"
+              style="width:100px;margin-left: 10px"
+              @keyup.enter.native="searchTable()"/>
+            <el-button
+              icon="el-icon-plus"
+              size="small"
+              style="margin-left: 50px"
+              type="distribution"
+              @click="openOrder()">调拨
+            </el-button>
+            <el-button
+              icon="el-icon-bottom"
+              plain
+              size="small"
+              style="margin-left: 10px"
+              type="success"
+              @click="selectIn()">选入
+            </el-button>
+          </div>
+          <div>
+            <el-table
+              v-loading="loading"
+              :data="tableData"
+              border
+              height="300px"
+              highlight-current-row
+              show-summary
+              size="small"
+              stripe
+              style="width: 1311px"
+              @selection-change="handleSelectionChange">
+              <el-table-column :selectable="selectable" align="center" type="selection" width="50px"/>
+              <el-table-column align="center" label="订单编号" width="141px">
+                <template slot-scope="scope">
+                  {{ scope.row.订单编号 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="产品名称" width="150px">
+                <template slot-scope="scope">
+                  {{ scope.row.产品名称 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="工件名称">
+                <template slot-scope="scope">
+                  {{ scope.row.工件名称 }}
+                </template>
+              </el-table-column>
+              <el-table-column :width="setColumnWidth('图号或型号')" align="center" label="图号">
+                <template slot-scope="scope">
+                  {{ scope.row.图号 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="序号" show-overflow-tooltip width="63px">
+                <template slot-scope="scope">
+                  {{ scope.row.工序顺序 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="工序" show-overflow-tooltip width="63px">
+                <template slot-scope="scope">
+                  {{ scope.row.工序 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="单位" width="51px">
+                <template slot-scope="scope">
+                  {{ scope.row.单位 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="外协数量" prop="外协数量" width="75px">
+                <template slot-scope="scope">
+                  {{ scope.row.外协数量 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="已外协数" prop="已外协数" width="75px">
+                <template slot-scope="scope">
+                  {{ scope.row.已外协数 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="需外协数" prop="数量" width="143px">
+                <template slot-scope="scope">
+                  <!--                  {{ scope.row.外协数量 }}-->
+                  <el-input-number
+                    v-model="scope.row.需外协数"
+                    :max="Number(scope.row.最大值)"
+                    :min="0"
+                    size="mini"
+                    style="margin: 0;width: 100%"/>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="备料库存数" prop="累计库存" width="90px">
+                <template slot-scope="scope">
+                  {{ scope.row.累计库存 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="已领备料数" prop="已领数量" width="90px">
+                <template slot-scope="scope">
+                  {{ scope.row.已领数量 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="任务生成" width="85px">
+                <template slot-scope="scope">
+                  {{ scope.row.下达日期 }}
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col style="width: 501px">
+          <!--        <el-card>-->
+          <div style="margin-top: 10px">
+            <el-table
+              v-loading="loading"
+              :data="tableData1"
+              :header-cell-style="{background: '#2283D4',color: 'white'}"
+              border
+              height="350"
+              highlight-current-row
+              size="mini"
+              stripe
+              style="width: 501px;margin-top: 10px"
+              @row-click="searchTable2">
+              <el-table-column align="center" label="调拨单号" prop="" show-overflow-tooltip width="120px">
+                <template slot-scope="scope">
+                  {{ scope.row.调拨单号 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="外协厂家" show-overflow-tooltip width="120px">
+                <template slot-scope="scope">
+                  {{ scope.row.外协厂家 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="调拨备注" show-overflow-tooltip width="120px">
+                <template slot-scope="scope">
+                  {{ scope.row.调拨备注 }}
+                </template>
+              </el-table-column>
+              <el-table-column :width="setColumnWidth('日期时间')" align="center" label="操作">
+                <template slot-scope="scope">
+                  <el-tooltip :open-delay="700" content="提交" effect="dark" placement="top">
+                    <el-button icon="el-icon-check" size="mini" type="text" @click.native.stop="Submit(scope.row)">
+                      提交
+                    </el-button>
+                  </el-tooltip>
+                  <el-tooltip :open-delay="700" content="上传图片" effect="dark" placement="top">
+                    <el-button
+                      icon="el-icon-picture-outline"
+                      size="mini"
+                      style="margin-right: 5px"
+                      type="text"
+                      @click.native.stop="uploadPicture(scope.row)">上传
+                    </el-button>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <!--            </el-card>-->
+        </el-col>
+
+        <el-col style="margin-left: 10px;width: 821px">
+          <!--            <el-card>-->
+          <div style="margin-top: 10px">
+            <el-table
+              v-loading="loading"
+              :data="tableData2"
+              :header-cell-style="{background: '#19466E',color: 'white'}"
+              border
+              height="350"
+              highlight-current-row
+              show-summary
+              size="mini"
+              stripe
+              style="width: 801px;margin-top: 10px;margin-bottom: 500px">
+              <el-table-column align="center" label="工件名称" prop="">
+                <template slot-scope="scope">
+                  {{ scope.row.工件名称 }}
+                </template>
+              </el-table-column>
+              <el-table-column :width="setColumnWidth('图号')" align="center" label="图号" prop="">
+                <template slot-scope="scope">
+                  {{ scope.row.图号 }}
+                </template>
+              </el-table-column>
+              <el-table-column :width="setColumnWidth('工序')" align="center" label="工序" prop="">
+                <template slot-scope="scope">
+                  {{ scope.row.工序 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="数量" prop="调拨数量" width="75px">
+                <template slot-scope="scope">
+                  <!--                  <el-input-number v-model="scope.row.调拨数量" :max="Number(scope.row.调拨数量)" :min="1" size="mini" style="margin: 0;width: 100%"/>-->
+                  {{ scope.row.调拨数量 }}
+                </template>
+              </el-table-column>
+              <el-table-column :width="setColumnWidth('单位')" align="center" label="单位" prop="">
+                <template slot-scope="scope">
+                  {{ scope.row.单位 }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="备注" prop="">
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.备注" placeholder="请输入调拨备注" @change="addNotes(scope.row)"/>
+                  <!--                  {{ scope.row.单位 }}-->
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="操作" width="85px">
+                <template slot-scope="scope">
+                  <el-tooltip :open-delay="700" content="操作" effect="dark" placement="top">
+                    <el-button
+                      icon="el-icon-top"
+                      size="mini"
+                      style="margin-right: 10px"
+                      type="text"
+                      @click="handleDelete(scope.row)"/>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <!--            </el-card>-->
+        </el-col>
+      </el-row>
+    </el-card>
+    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" center title="调拨单" width="320px">
+      <el-form ref="form" :model="form" :rules="rules" class="demo-ruleForm" label-position="center" label-width="80px">
+        <el-form-item label="外协厂家" prop="外协厂家">
+          <el-select
+            v-model="form.外协厂家"
+            clearable
+            filterable
+            placeholder="外协厂家"
+            size="small"
+            style="width:150px;">
+            <el-option
+              v-for="item in selectTheOutsourcingManufacturers"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="调拨备注" prop="调拨备注">
+          <el-input v-model="form.调拨备注" clearable placeholder="备注" size="small" style="width:150px;"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="callOff('form')">取消</el-button>
+        <el-button size="small" type="distribution" @click="submitOrder('form')">确定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible1" center title="上传图片" width="320px">
+      <el-upload
+        id="invoiceScan"
+        ref="upload"
+        :action="upload"
+        :auto-upload="false"
+        :before-upload="beforeUpload"
+        :data="Data"
+        :limit="limit"
+        :multiple="true"
+        :on-exceed="warningExceed"
+        :on-success="uploadSuccess"
+        list-type="picture-card"
+        style="margin-left: 60px">
+        <i class="el-icon-plus"/>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogFormVisible1=false">取消</el-button>
+        <el-button size="small" type="distribution" @click="submit2('form')">确定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { url } from '@/utils/request'
+
+export default {
+  data() {
+    return {
+      PartType: '外协调拨',
+      selectTheOutsourcingManufacturersValue: '', // 选择外协厂家
+      selectTheOutsourcingManufacturers: [], // 选择外协厂家数组
+      transferNotesValue: '', // 调拨备注
+      transferNotes: [], // 调拨备注数组
+      selectTheDialListValue: '', // 选择调拨单
+      selectTheDialList: [], // 选择调拨单数组
+      listValue: '',
+      partsName: '',
+      processName: '',
+      orderValue: '',
+      upload: url,
+      limit: 5,
+      Data: {},
+      form: {
+        外协厂家: '',
+        调拨备注: ''
+      },
+      rules: {
+        外协厂家: [{ required: true, message: '请选择外协厂家', trigger: 'change' }]
+      },
+      multipleSelection: [],
+      multipleSelection_variable: [],
+      multipleSelection1: [],
+      multipleSelection_variable1: [],
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      loading: false, // 数据加载
+      tableData: [],
+      tableData1: [],
+      tableData2: [],
+      tableData3: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'id',
+      'token'
+    ])
+  },
+  created() {
+    this.searchTable()
+    this.getSelectTheOutsourcingManufacturers()
+    this.searchOrder()
+  },
+  methods: {
+    addNotes(row) {
+      var param = []
+      param[0] = ['外协调拨单明细流水号', row.外协调拨单明细流水号]
+      param[1] = ['备注', row.备注]
+      var Data = this.CreateData('12', '仓储管理_外协调拨明细_编辑备注', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data[0].result === '1') {
+          this.searchTable()
+          var param = []
+          param[0] = ['外协调拨单流水号', this.orderValue]
+          var Data = this.CreateData('11', '仓储管理_外协调拨单明细_查询', param)
+          this.ExecDatabase(Data).then(response => {
+            this.tableData2 = response.data
+          })
+        } else {
+          this.$message.error('备注编辑失败')
+        }
+      })
+    },
+    getSelectTheOutsourcingManufacturers() {
+      var param = []
+      var Data = this.CreateData('11', '外协厂家_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.selectTheOutsourcingManufacturers.push({
+            label: response.data[i].外协厂家简称,
+            value: response.data[i].外协厂家流水号
+          })
+        }
+      })
+    },
+    getTransferNotes() {
+      this.transferNotes = []
+      this.selectTheDialListValue = ''
+      if (this.selectTheOutsourcingManufacturersValue) {
+        var param = []
+        param[0] = ['外协厂家流水号', this.selectTheOutsourcingManufacturersValue]
+        var Data = this.CreateData('11', '仓储管理_外协调拨单列表_查询', param)
+        this.ExecDatabase(Data).then(response => {
+          for (let i = 0; i < response.data.length; i++) {
+            this.transferNotes.push({
+              label: response.data[i].调拨单号,
+              value: response.data[i].外协调拨单流水号
+            })
+          }
+        })
+      }
+    },
+    getData() {
+      if (this.PartType === '外协调拨') {
+        this.searchTable()
+      } else if (this.PartType === '外协到货') {
+        this.searchTable1()
+      }
+    },
+    selectable(row) {
+      return row.需外协数 > 0 && row.需外协数 !== undefined
+    },
+    submitInStorage() {
+      if (this.multipleSelection1.length !== 0) {
+        const numberGroup = []
+        const partGroup = []
+        this.multipleSelection_variable1 = this.multipleSelection1
+        this.multipleSelection1 = []
+        for (let i = 0; i < this.multipleSelection_variable1.length; i++) {
+          numberGroup[i] = this.multipleSelection_variable1[i].到货数量
+          partGroup[i] = this.multipleSelection_variable1[i].外协调拨单明细流水号
+        }
+        var param = []
+        param[0] = ['外协调拨单明细流水号组', partGroup]
+        param[1] = ['到货数量组', numberGroup]
+        var Data = this.CreateData('12', '仓储管理_外协调拨明细_到货', param)
+        this.ExecDatabase(Data).then(response => {
+          if (response.data[0].result === '1') {
+            this.$message.success('入库成功')
+            this.searchTable1()
+          } else {
+            this.$message.error('入库失败')
+          }
+        })
+      } else {
+        this.$message.warning('请选择工件')
+      }
+    },
+    searchTable() {
+      let partsName_check, processName_check
+      this.partsName ? partsName_check = 1 : partsName_check = 0
+      this.processName ? processName_check = 1 : processName_check = 0
+      var param = []
+      param[0] = ['工件名称_check', partsName_check]
+      param[1] = ['工件名称', this.partsName]
+      param[2] = ['工序_check', processName_check]
+      param[3] = ['工序', this.processName]
+      var Data = this.CreateData('11', '仓储管理_未外协零件_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        this.tableData = response.data
+      })
+    },
+    openOrder() {
+      this.form = {}
+      if (this.$refs['form'] !== undefined) {
+        this.$refs['form'].resetFields()
+      }
+      this.dialogFormVisible = true
+    },
+    searchOrder() {
+      var param = []
+      var Data = this.CreateData('11', '仓储管理_未提交外协调拨单_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        this.tableData1 = response.data
+      })
+    },
+    submitOrder(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          var param = []
+          param[0] = ['外协厂家流水号', this.form.外协厂家]
+          param[1] = ['调拨备注', this.form.调拨备注]
+          param[2] = ['操作者', this.id]
+          var Data = this.CreateData('12', '仓储管理_外协调拨_增加', param)
+          this.ExecDatabase(Data).then(response => {
+            if (response.data[0].result === '1') {
+              this.$message.success('添加成功')
+              this.searchOrder()
+              this.dialogFormVisible = false
+            } else {
+              this.$message.error('添加失败')
+            }
+          })
+        }
+      })
+    },
+    callOff(formName) {
+      this.form = {}
+      this.dialogFormVisible = false
+      this.$refs[formName].resetFields()
+    },
+    searchTable2(row) {
+      this.orderValue = row.外协调拨单流水号
+      var param = []
+      param[0] = ['外协调拨单流水号', row.外协调拨单流水号]
+      var Data = this.CreateData('11', '仓储管理_外协调拨单明细_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        this.tableData2 = response.data
+      })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleSelectionChange1(val) {
+      this.multipleSelection1 = val
+    },
+    selectIn() {
+      if (this.multipleSelection.length !== 0) {
+        if (!this.orderValue) {
+          this.$message.warning('请选中调拨单')
+          return
+        }
+        const processGroup = []
+        const numberGroup = []
+        const partGroup = []
+        const taskGroup = []
+        this.multipleSelection_variable = this.multipleSelection
+        this.multipleSelection = []
+        for (let i = 0; i < this.multipleSelection_variable.length; i++) {
+          processGroup[i] = this.multipleSelection_variable[i].工序流水号
+          numberGroup[i] = this.multipleSelection_variable[i].需外协数
+          partGroup[i] = this.multipleSelection_variable[i].工艺计划流水号
+          taskGroup[i] = this.multipleSelection_variable[i].工艺任务流水号
+        }
+        var param = []
+        param[0] = ['工序流水号组', processGroup]
+        param[1] = ['数量组', numberGroup]
+        param[2] = ['工艺计划流水号组', partGroup]
+        param[3] = ['外协调拨单流水号', this.orderValue]
+        param[4] = ['工艺任务流水号组', taskGroup]
+        param[5] = ['人员编号', this.id]
+        var Data = this.CreateData('12', '仓储管理_外协调拨明细_增加', param)
+        this.ExecDatabase(Data).then(response => {
+          if (response.data[0].result === '1') {
+            this.$message.success('选入成功')
+            this.searchTable()
+            var param = []
+            param[0] = ['外协调拨单流水号', this.orderValue]
+            var Data = this.CreateData('11', '仓储管理_外协调拨单明细_查询', param)
+            this.ExecDatabase(Data).then(response => {
+              this.tableData2 = response.data
+              console.log('调拨单明细', this.tableData2)
+            })
+          } else {
+            this.$message.success('选入失败')
+          }
+        })
+      } else {
+        this.$message.warning('请选择工件')
+      }
+    },
+    handleDelete(row) {
+      var param = []
+      param[0] = ['外协调拨单明细流水号', row.外协调拨单明细流水号]
+      var Data = this.CreateData('12', '仓储管理_外协调拨明细_删除', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data[0].result === '1') {
+          this.searchTable()
+          var param = []
+          param[0] = ['外协调拨单流水号', this.orderValue]
+          var Data = this.CreateData('11', '仓储管理_外协调拨单明细_查询', param)
+          this.ExecDatabase(Data).then(response => {
+            this.tableData2 = response.data
+          })
+          this.$message.success('移出成功')
+        } else {
+          this.$message.error('移出失败')
+        }
+      })
+    },
+    Submit(row) {
+      if (this.orderValue !== row.外协调拨单流水号) {
+        this.$message.warning('请提交当前选中的调拨单')
+        return
+      }
+      if (this.tableData2.length > 0) {
+        this.$confirm('是否提交?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          const processGroup = []
+          const numberGroup = []
+          for (let i = 0; i < this.tableData2.length; i++) {
+            processGroup[i] = this.tableData2[i].工序流水号
+            numberGroup[i] = this.tableData2[i].调拨数量
+          }
+          if (this.tableData2.length === numberGroup.length) {
+            var param = []
+            param[0] = ['外协调拨单流水号', row.外协调拨单流水号]
+            param[1] = ['已经外协数组', numberGroup]
+            param[2] = ['工序流水号组', processGroup]
+            var Data = this.CreateData('12', '仓储管理_外协调拨_提交新', param)
+            this.ExecDatabase(Data).then(response => {
+              if (response.data[0].result === '1') {
+                this.$message.success('提交成功')
+                this.searchOrder()
+                this.searchTable()
+                this.tableData2 = []
+              } else {
+                this.$message.error('提交失败')
+              }
+            })
+          } else {
+            this.$message.warning('数据提取不完整，请重新提交！')
+          }
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消提交'
+          })
+        })
+      } else {
+        this.$message.warning('调拨单不能为空')
+      }
+    },
+    uploadPicture(row) {
+      this.dialogFormVisible1 = true
+      this.listValue = row.外协调拨单流水号
+    },
+    submit2() {
+      var param = []
+      param[0] = ['外协调拨单流水号', this.listValue]
+      param[1] = ['文件名称', '']
+      param[2] = ['文件后缀', '']
+      param[3] = ['文件内容', null]
+      var Data1 = this.CreateData('15', '仓储管理_外协调拨单_上传图片', param)
+      this.Data.param = Data1
+      this.$refs.upload.submit()
+      this.dialogFormVisible1 = false
+      this.$nextTick(() => {
+        this.searchOrder()
+      })
+    },
+    uploadSuccess(res) { // 上传成功回调
+      this.dialogFormVisible1 = false
+      this.$refs.upload.clearFiles()
+    },
+    beforeUpload(file) { // 上传前检测
+      const isJPG = /^image\/.*/.test(file.type)
+      if (!isJPG) {
+        this.$message.error('只能上传图片。。')
+      }
+      return isJPG
+    },
+    warningExceed() {
+      this.$message.error('仅可上传五张照片')
+    },
+    searchTable1() {
+      let selectTheDialListValue_check
+      this.selectTheDialListValue ? selectTheDialListValue_check = 1 : selectTheDialListValue_check = 0
+      var param = []
+      param[0] = ['外协厂家流水号', this.selectTheOutsourcingManufacturersValue]
+      param[1] = ['外协调拨单流水号', this.selectTheDialListValue]
+      param[2] = ['外协调拨单_check', selectTheDialListValue_check]
+      var Data = this.CreateData('11', '仓储管理_外协到货_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        this.tableData3 = response.data
+      })
+    }
+  }
+}
+</script>
+