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

src/views/WarehouseManagement/MaterialLocation/index.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="app-container">
+    <el-card style="height: 850px">
+      <div style="margin-top: 7px; margin-bottom: 7px">
+        <el-input v-model="MaterialName" style="width: 200px " size="small" clearable placeholder="物料名称/规格"/>
+        <el-input v-model="DrawingNo" style="width: 200px " size="small" clearable placeholder="图号/型号"/>
+        <el-input v-model="locationWarehouseValue" style="width:200px" placeholder="库位" size="small" clearable/>
+        <el-button style="margin-left: 7px;width: 80px" type="primary" plain size="small" @click="searchTable()">查询</el-button>
+        <!--<el-button type="distribution" size="small" @click="addLocation()">增加库位</el-button>-->
+      </div>
+      <div>
+        <el-table v-loading="loading" :data="tableData" highlight-current-row show-summary border stripe size="small" style="width: 911px" height="740px" @row-dblclick="changeState">
+          <el-table-column :width="setColumnWidth('序号')" type="index" label="序号" align="center"/>
+          <el-table-column label="物料编号" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row.物料编号 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="物料名称" width="170px" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row.物料名称 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="图号或型号" width="170px" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row.图号或型号 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="库位" width="160px" align="center">
+            <template slot-scope="scope">
+              <template v-if="scope.row.edit">
+                <el-select v-model="scope.row.货位流水号" size="small" style="width: 100%" filterable clearable placeholder="请选择库位">
+                  <el-option
+                    v-for="item in storageLocation"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"/>
+                </el-select>
+              </template>
+              <span v-else>{{ scope.row.货位名称 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column width="180px" label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">确定</el-button>
+              <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit(scope.$index, scope.row)">取消</el-button>
+              <el-button v-if="!scope.row.edit" type="text" icon="el-icon-edit" size="mini" @click="scope.row.edit=!scope.row.edit">编辑</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="block" style="margin-top: 10px;">
+        <el-pagination
+          :current-page="pageCurrent"
+          :page-sizes="[10, 20, 30, 40, 100]"
+          :page-size="pageSize"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChanges"
+          @current-change="handleCurrentChanges"/>
+      </div>
+    </el-card>
+    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="增加库位" center width="390px">
+      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="100px" class="demo-ruleForm" style="margin: auto">
+        <el-row>
+          <el-form-item label="库位:" prop="库位">
+            <el-input v-model="form.库位" clearable size="small" style="width:200px" placeholder="请输入库位"/>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="callOff('form')">取消</el-button>
+        <el-button type="distribution" size="small" @click="submitLocation('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { ExecDatabase } from '@/main'
+import { mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      locationWarehouseValue: '', // 库位
+      dialogFormVisible: false,
+      storageLocation: [],
+      MaterialName: '',
+      DrawingNo: '',
+      LocationName: '',
+      form: {
+        库位: ''
+      },
+      materialName1: '',
+      productName: [],
+      editorialStaff: [],
+      rules: {
+        库位: [{ required: true, message: '请输入库位' }]
+      },
+      loading: false, // 数据加载
+      total: 0, // 分页总数
+      tableData: [], // 合同信息表
+      tableData10: [], // 合同信息表
+      pageCurrent: 1, // 分页当前页
+      pageSize: 20, // 分页每页显示条数
+      orderName: '', // 排序列名
+      order: '' // 排序方式
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'id',
+      'token'
+    ])
+  },
+  created() {
+    this.getLocateName()
+    this.searchTable()
+  },
+  methods: {
+    getLocateName() {
+      var param = []
+      param[0] = ['库位_check', 0]
+      param[1] = ['库位', '']
+      var Data = this.CreateData('11', '仓储管理_库位_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.storageLocation.push({
+            label: response.data[i].货位名称,
+            value: response.data[i].货位流水号
+          })
+        }
+      })
+    },
+    searchTable() {
+      this.loading = true
+      this.tableData10 = []
+      let MaterialName_check, DrawingNo_check, locationWarehouseValue_check
+      this.MaterialName ? MaterialName_check = 1 : MaterialName_check = 0
+      this.DrawingNo ? DrawingNo_check = 1 : DrawingNo_check = 0
+      this.locationWarehouseValue ? locationWarehouseValue_check = 1 : locationWarehouseValue_check = 0
+      var param = []
+      param[0] = ['物料名称_check', MaterialName_check]
+      param[1] = ['物料名称', this.MaterialName]
+      param[2] = ['图号或型号_check', DrawingNo_check]
+      param[3] = ['图号或型号', this.DrawingNo]
+      param[4] = ['库位_check', locationWarehouseValue_check]
+      param[5] = ['库位', this.locationWarehouseValue]
+      var Data = this.CreateData('11', '仓储管理_物料库位_查询数据', param, this.pageSize, this.pageCurrent)
+      ExecDatabase(Data).then(response => {
+        // console.log(response.data)
+        if (response.data.rows.length !== 0) {
+          for (let i = 0; i < response.data.rows.length; i++) {
+            this.tableData10.push({
+              // 表示将从数据库中查询到的数据，分别对应填充到表格中
+              货位流水号: Number(response.data.rows[i].货位流水号),
+              货位名称: response.data.rows[i].货位名称,
+              物料流水号: response.data.rows[i].物料流水号,
+              物料名称: response.data.rows[i].名称,
+              图号或型号: response.data.rows[i].代号,
+              物料编号: response.data.rows[i].物料编码,
+              货位名称_before: response.data.rows[i].货位名称,
+              edit: false
+            })
+          }
+        }
+        this.total = response.data.total
+        this.loading = false
+      }).then(() => {
+        this.tableData = this.tableData10
+      })
+    },
+    addLocation() {
+      if (this.$refs['form'] !== undefined) {
+        this.$refs['form'].resetFields()
+      }
+      this.form.库位 = ''
+      this.dialogFormVisible = true
+    },
+    callOff(formName) {
+      this.dialogFormVisible = false
+      this.$refs[formName].resetFields()
+    },
+    changeState(row) {
+      row.edit = !row.edit
+    },
+    submitLocation(formName) {
+      var param = []
+      param[0] = ['库位', this.form.库位]
+      var Data = this.CreateData('11', '仓储管理_库位_验证是否存在', param)
+      this.ExecDatabase(Data).then(response => {
+        if (Number(response.data[0].条数) > 0) {
+          this.$message.warning('增加的库位已存在列表中')
+        } else {
+          this.$refs[formName].validate((valid) => {
+            if (valid) {
+              var param = []
+              param[0] = ['库位', this.form.库位]
+              var Data = this.CreateData('12', '仓储管理_库位_增加数据', param)
+              this.ExecDatabase(Data).then(response => {
+                if (response.data[0].result === '1') {
+                  this.$message.success('添加成功')
+                  this.searchTable()
+                  this.dialogFormVisible = false
+                } else {
+                  this.$message.error('添加失败')
+                }
+              })
+            }
+          })
+        }
+      })
+    },
+    confirmEdit(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.$message.success('编辑成功')
+          this.searchTable()
+        } else {
+          this.$message.error('编辑失败')
+        }
+      })
+    },
+    // 取消编辑
+    cancelEdit(index, row) {
+      row.edit = false
+      row.货位名称 = row.货位名称_before
+      this.$message('取消修改')
+    },
+    handleSizeChanges(val) {
+      this.pageCurrent = 1
+      this.pageSize = val
+      this.searchTable()
+    },
+    handleCurrentChanges(val) {
+      this.pageCurrent = val
+      this.searchTable()
+    }
+  }
+}
+</script>
+