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

src/views/SalesManagement/OrderTraceability/index.vue

@@ -0,0 +1,467 @@
+<template>
+  <div class="app-container">
+    <el-card style="height: 850px">
+      <div style="margin-top: 7px; margin-bottom: 7px">
+        <el-select
+          v-model="customerNameValue"
+          :remote-method="getCustomer"
+          style="width:200px"
+          placeholder="买方名称"
+          size="small"
+          filterable
+          clearable
+          remote
+          @change="pageCurrent = 1;pageSize = 100;searchTable()">
+          <el-option
+            v-for="item in customerName"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+        </el-select>
+        <el-select
+          v-model="orderValue"
+          :remote-method="getOrder"
+          style="width:200px"
+          placeholder="订单编号"
+          size="small"
+          filterable
+          clearable
+          remote
+          @change="pageCurrent = 1;pageSize = 100;searchTable()">
+          <el-option
+            v-for="item in orderArray"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+        </el-select>
+        <span style="font-size: 13px;color: black">下单日期</span>
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          type="daterange"
+          align="center"
+          style="width: 240px;"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+          range-separator="～"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="pageCurrent = 1;pageSize = 100;searchTable()"/>
+        <span style="font-size: 13px;color: black">完成期限</span>
+        <el-date-picker
+          v-model="dateRange1"
+          size="small"
+          type="daterange"
+          align="center"
+          style="width: 240px;"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+          range-separator="～"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="pageCurrent = 1;pageSize = 100;searchTable()"/>
+        <el-select
+          v-model="orderStateValue"
+          style="width:100px;margin-left: 10px"
+          placeholder="订单状态"
+          size="small"
+          filterable
+          clearable
+          @change="pageCurrent = 1;pageSize = 100;searchTable()">
+          <el-option
+            v-for="item in orderState"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+        </el-select>
+        <el-button
+          icon="el-icon-search"
+          type="primary"
+          plain
+          size="small"
+          style="margin-left: 10px"
+          @click="pageCurrent = 1;pageSize = 100;searchTable()">查询
+        </el-button>
+      </div>
+      <el-col style="margin-top: 10px;width: 731px">
+        <el-table
+          v-loading="loading"
+          :data="tableData"
+          highlight-current-row
+          border
+          stripe
+          size="small"
+          style="width: 731px"
+          height="740px"
+          @row-click="searchTable1">
+          <el-table-column :width="setColumnWidth('状态')" label="订单状态" align="center" prop="订单状态">
+            <template slot-scope="scope">
+              {{ scope.row.订单状态 }}
+            </template>
+          </el-table-column>
+          <el-table-column :width="setColumnWidth('订单编号')" label="订单编号" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row.订单编号 }}
+            </template>
+          </el-table-column>
+          <el-table-column :width="setColumnWidth('姓名')" label="收货人" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row.收货人 }}
+            </template>
+          </el-table-column>
+          <el-table-column :width="setColumnWidth('买方名称')" label="买方" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row.买方 }}
+            </template>
+          </el-table-column>
+          <el-table-column width="93px" label="完成期限" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.交货日期 }}
+            </template>
+          </el-table-column>
+          <el-table-column :width="setColumnWidth('日期')" label="下单日期" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.创建日期 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="下单人" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.创建人 }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="block" style="margin-top: 10px;">
+          <el-pagination
+            :current-page="pageCurrent"
+            :page-sizes="[10, 20, 30, 40, 100]"
+            :page-size="pageSize"
+            :total="total"
+            :pager-count="5"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChanges"
+            @current-change="handleCurrentChanges"/>
+        </div>
+      </el-col>
+      <el-col style="margin-top: 10px;margin-left: 30px;width: 801px">
+        <div style="color: black;margin-top: 5px;font-size: 20px">&nbsp;&nbsp;&nbsp;&nbsp;{{ 订单编号 }}</div>
+        <div style="margin: 10px 0 0 20px;height: 650px;overflow: auto">
+          <el-tree
+            :data="departmentData"
+            :props="defaultProps"
+            :indent="50"
+            :expand-on-click-node="false"
+            :render-content="renderContent"
+            node-key="订单流水号"
+            class="selectTree"
+            @node-click="onClick"/>
+        </div>
+      </el-col>
+      <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="工序加工情况" width="831px">
+        <div style="width: 100%;display: inline-block">
+          <el-table
+            :data="tableData1"
+            :header-cell-style="{background: '#383E4B',color: 'white'}"
+            height="328px"
+            highlight-current-row
+            border>
+            <el-table-column :width="setColumnWidth('序号')" align="center" label="序号" type="index"/>
+            <el-table-column :width="setColumnWidth('工序')" align="center" label="工序" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.工序 }}
+              </template>
+            </el-table-column>
+            <el-table-column :width="setColumnWidth('数量')" align="center" label="订单数" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.订单数 }}
+              </template>
+            </el-table-column>
+            <el-table-column :width="setColumnWidth('数量')" align="center" label="完成数" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.完成数 }}
+              </template>
+            </el-table-column>
+            <el-table-column :width="setColumnWidth('姓名')" align="center" label="加工人" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.加工人 }}
+              </template>
+            </el-table-column>
+            <el-table-column :width="setColumnWidth('加工设备')" align="center" label="加工设备" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.加工设备 }}
+              </template>
+            </el-table-column>
+            <el-table-column :width="setColumnWidth('日期时间')" align="center" label="加工开始" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.加工开始 }}
+              </template>
+            </el-table-column>
+            <el-table-column :width="setColumnWidth('日期时间')" align="center" label="加工完成" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.加工完成 }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-dialog>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  data() {
+    return {
+      customerNameValue: '', // 买方名称
+      customerName: [], // 买方名称数组
+      orderValue: '', // 订单编号
+      orderArray: [], // 订单编号数组
+      dateRange: '', // 下单日期
+      dateRange1: '', // 完成期限
+      orderStateValue: '', // 订单状态
+      orderState: [], // 合同状态数组
+      loading: false, // 数据加载
+      dialogFormVisible: false,
+      total: 0, // 分页总数
+      tableData: [], // 订单信息表
+      tableData1: [], // 产品信息表
+      pageCurrent: 1, // 分页当前页
+      pageSize: 100, // 分页每页显示条数
+      orderName: '', // 排序列名
+      order: '', // 排序方式
+      订单编号: '',
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      departmentData: [] // 树状数据
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'id',
+      'token'
+    ])
+  },
+  created() {
+    this.fetchData()
+    this.searchTable()
+  },
+  methods: {
+    fetchData() {
+      this.getCustomer()
+      this.getOrder('')
+      this.getOrderState()
+    },
+    getCustomer(query) {
+      this.customerName = []
+      var param = []
+      param[0] = ['客户名称', query]
+      var Data = this.CreateData('11', '合同管理_客户信息_查询数据_bak', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.customerName.push({
+            label: response.data[i].客户名称,
+            value: response.data[i].客户流水号
+          })
+        }
+      })
+    },
+    getOrder(query) {
+      this.orderArray = []
+      var param = []
+      param[0] = ['订单编号', query]
+      var Data = this.CreateData('11', '订单信息_列表_查询数据_bak', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.orderArray.push({
+            label: response.data[i].订单编号,
+            value: response.data[i].订单流水号
+          })
+        }
+      })
+    },
+    getOrderState() {
+      var param = []
+      var Data = this.CreateData('11', '订单状态_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.orderState.push({
+            label: response.data[i].订单状态,
+            value: response.data[i].订单状态流水号
+          })
+        }
+      })
+    },
+    searchTable() {
+      this.departmentData = []
+      this.订单编号 = ''
+      let customerNameValue_check, orderValue_check, dateRange_check, dateRange1_check, orderStateValue_check
+      this.customerNameValue ? customerNameValue_check = 1 : customerNameValue_check = 0
+      this.orderValue ? orderValue_check = 1 : orderValue_check = 0
+      this.dateRange ? dateRange_check = 1 : (dateRange_check = 0, this.dateRange = '')
+      this.dateRange1 ? dateRange1_check = 1 : (dateRange1_check = 0, this.dateRange1 = '')
+      if (this.orderStateValue === 0) {
+        orderStateValue_check = 1
+      } else if (this.orderStateValue) {
+        orderStateValue_check = 1
+      } else {
+        orderStateValue_check = 0
+      }
+      var param = []
+      param[0] = ['买方名称_check', customerNameValue_check]
+      param[1] = ['客户流水号', this.customerNameValue]
+      param[2] = ['订单编号_check', orderValue_check]
+      param[3] = ['订单流水号', this.orderValue]
+      param[4] = ['下单日期_check', dateRange_check]
+      param[5] = ['开始时间', this.dateRange[0]]
+      param[6] = ['结束时间', this.dateRange[1]]
+      param[7] = ['订单状态_check', orderStateValue_check]
+      param[8] = ['订单状态', this.orderStateValue]
+      param[9] = ['完成期限_check', dateRange1_check]
+      param[10] = ['完成期限开始时间', this.dateRange1[0]]
+      param[11] = ['完成期限结束时间', this.dateRange1[1]]
+      var Data = this.CreateData('11', '订单信息_查询数据', param, this.pageSize, this.pageCurrent)
+      this.ExecDatabase(Data).then(response => {
+        this.tableData = response.data.rows
+        this.total = response.data.total
+      })
+    },
+    searchTable1(row) {
+      this.订单编号 = row.订单编号
+      this.option = []
+      var param = []
+      param[0] = ['订单流水号', row.订单流水号]
+      var Data = this.CreateData('11', '车间生产管理工艺_组件状态查询_查询所有组', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.option.push({
+            isLeaf: false,
+            label: response.data[i].产品名称 + '\xa0\xa0\xa0数量:' + response.data[i].数量 + (response.data[i].是否滑台 === 1 || response.data[i].是否滑台 === 2 ? '\xa0\xa0\xa0装配完成:' + response.data[i].完成数量 : '\xa0\xa0\xa0采购到货:' + (response.data[i].外购件入库率 ? response.data[i].外购件入库率 : '') + '\xa0\xa0\xa0加工完成:' + (response.data[i].自制件入库率 ? response.data[i].自制件入库率 : '')) + '\xa0\xa0\xa0' + response.data[i].组件完成状态,
+            value: response.data[i].组件流水号,
+            组件完成状态: response.data[i].组件完成状态,
+            father: true,
+            children: []
+          })
+        }
+      }).then(() => {
+        this.option.map(firstLevel => {
+          var param1 = []
+          param1[0] = ['组件流水号', firstLevel.value]
+          var Data1 = this.CreateData('11', '车间生产管理工艺_车间组件完成情况_查询数据', param1)
+          this.ExecDatabase(Data1).then(response => {
+            firstLevel.children = []
+            for (let j = 0; j < response.data.length; j++) {
+              firstLevel.children.push({
+                label: (response.data[j].零件图号 ? response.data[j].零件图号 : '无零件图号') + '\xa0\xa0\xa0\xa0\xa0\xa0' + (response.data[j].零件名称 ? response.data[j].零件名称 : '无零件名称') + '.........' + (response.data[j].批次数量 ? response.data[j].批次数量 : '') + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0库存：' + response.data[j].累计库存 + (response.data[j].零件类型 === 1 ? '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0自制：' + response.data[j].状态 : (response.data[j].零件类型 === 2 ? '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0外购：' + response.data[j].采购状态 : '')),
+                value: response.data[j].工艺计划流水号,
+                考核状态: response.data[j].考核状态,
+                采购状态: response.data[j].采购状态,
+                零件类型: response.data[j].零件类型,
+                father: false
+              })
+            }
+          })
+        })
+      }).then(() => {
+        this.departmentData = this.option
+      })
+    },
+    onClick(num) {
+      this.tableData1 = []
+      console.log(num, 12344)
+      if (num.value > 0 && num.father === false) {
+        this.dialogFormVisible = true
+        if (num.零件类型 === 1) {
+          var param = []
+          param[0] = ['工艺计划流水号', num.value]
+          var Data = this.CreateData('11', '车间生产管理工艺_追溯加工_查询工序', param)
+          this.ExecDatabase(Data).then(response => {
+            this.tableData1 = response.data
+          })
+        }
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      if (node.data.father === false) {
+        if (node.data.零件类型 === 1) { // 自制
+          if (parseInt(node.data.考核状态) > 2) {
+            return (<span class='treeNotesComplate'>{node.label}</span>)
+          } else {
+            return (<span class='treeNotesUnComplate'>{node.label}</span>)
+          }
+        } else { // 外购
+          if (node.data.采购状态 === '已到') {
+            return (<span class='treeNotesComplate'>{node.label}</span>)
+          } else {
+            return (<span class='treeNotesUnComplate'>{node.label}</span>)
+          }
+        }
+      } else {
+        if (node.data.组件完成状态 === '完成') {
+          return (<span class='treeNotesComplate'>{node.label}</span>)
+        } else {
+          return (<span class='treeNotesUnComplate'>{node.label}</span>)
+        }
+      }
+    },
+    handleSizeChanges(val) {
+      this.pageCurrent = 1
+      this.pageSize = val
+      this.searchTable()
+    },
+    handleCurrentChanges(val) {
+      this.pageCurrent = val
+      this.searchTable()
+    }
+  }
+}
+</script>
+<style scoped>
+.el-form--label-left >>> .el-form-item__label {
+  text-align: right;
+}
+
+>>> .el-dialog--center .el-dialog__body {
+  text-align: initial;
+  padding: 20px 30px 20px
+}
+
+>>> .el-dialog__header {
+  padding: 20px 20px 0px;
+}
+
+>>> .el-dialog__footer {
+  padding: 0px 20px 20px;
+  /*text-align: right;*/
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+>>> .el-form-item {
+  margin-bottom: 13px;
+}
+</style>
+<style lang="scss">
+.selectTree {
+  .el-tree-node__content > .el-tree-node__expand-icon {
+    display: inline !important;
+  }
+
+  .el-tree-node:focus > .el-tree-node__content {
+    background-color: #ccc !important;
+  }
+}
+
+.treeNotesComplate {
+  color: black;
+  font-size: 17px;
+  background-color: #9bd7fc !important;
+}
+
+.treeNotesUnComplate {
+  color: black;
+  font-size: 17px;
+}
+</style>