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

src/views/SeikoWorkshop/ProcessInquiry/index.vue

@@ -0,0 +1,586 @@
+<template>
+  <div class="app-container">
+    <el-card style="height: 850px">
+      <div style="margin-top: 7px; margin-bottom: 7px">
+        <el-select
+          :disabled="checked"
+          v-model="orderNumberTypeValue"
+          :remote-method="getOrderNumberType"
+          style="width:200px"
+          placeholder="订单号"
+          size="small"
+          filterable
+          clearable
+          remote
+          @change="searchTable();getproductpartName()">
+          <el-option
+            v-for="item in orderNumberType"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+        </el-select>
+        <el-select
+          v-model="productpartNameValue"
+          style="width:200px;"
+          placeholder="产品/部件名称"
+          size="small"
+          filterable
+          clearable
+          @change="searchTable()">
+          <el-option
+            v-for="item in productpartName"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+        </el-select>
+        <el-input v-model="partNameValue" style="width:150px" placeholder="名称或图号" size="small" clearable/>
+        <el-button
+          icon="el-icon-search"
+          type="primary"
+          plain
+          size="small"
+          style="margin-left: 10px"
+          @click="pageCurrent = 1;pageSize = 100;searchTable()">查询
+        </el-button>
+        <el-checkbox v-model="checked" style="margin-left: 60px" @change="updateCheck">按产品</el-checkbox>
+      </div>
+      <el-table
+        v-show="!checked"
+        :data="tableData"
+        :row-class-name="tableRowClassName"
+        highlight-current-row
+        border
+        size="small"
+        style="width: 1031px; margin-top: 10px"
+        height="740px">
+        <el-table-column :width="setColumnWidth('序号')" label="序号" type="index" align="center"/>
+        <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 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="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 label="操作" align="center" width="155px">
+          <template slot-scope="scope">
+            <el-button
+              :disabled="scope.row.工艺单数量 === '0'"
+              type="text"
+              icon="el-icon-search"
+              size="mini"
+              style="margin-right: 5px"
+              @click="getProcess(scope.row)">工艺单
+            </el-button>
+            <el-button
+              :disabled="Number(scope.row.有图纸)===0"
+              type="text"
+              icon="el-icon-search"
+              size="mini"
+              @click="getNum(scope.row)">图纸
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-show="!checked" 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-table
+        v-show="checked"
+        :data="tableData"
+        highlight-current-row
+        border
+        stripe
+        size="small"
+        style="width: 1031px; margin-top: 10px"
+        height="740px">
+        <el-table-column :width="setColumnWidth('序号')" label="序号" type="index" align="center"/>
+        <el-table-column width="200px" label="产品名称" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.产品名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="零件名称" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column width="200px" 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 label="操作" align="center" width="155px">
+          <template slot-scope="scope">
+            <el-button
+              :disabled="scope.row.工艺单数量 === '0'"
+              type="text"
+              icon="el-icon-search"
+              size="mini"
+              style="margin-right: 5px"
+              @click="getProcess(scope.row)">工艺单
+            </el-button>
+            <el-button type="text" icon="el-icon-search" size="mini" @click="getNum1(scope.row)">图纸</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-show="checked" 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="dialogVisible" width="350px">
+      <div v-for="(file, key) in hadFile" :key="key">
+        <div class="wrapper">
+          <div class="content">
+            <div v-if="file.suffix==='pdf'" class="icon">
+              <svg-icon icon-class="pdf"/>
+            </div>
+            <div v-else-if="file.suffix==='docx'||file.suffix === 'doc'" class="icon">
+              <svg-icon icon-class="doc"/>
+            </div>
+            <div v-else-if="file.suffix==='xlsx' || file.suffix === 'xls'" class="icon">
+              <svg-icon icon-class="excel"/>
+            </div>
+            <div v-else-if="file.suffix==='pptx' || file.suffix === 'ppt'" class="icon">
+              <svg-icon icon-class="ppt"/>
+            </div>
+            <div v-else-if="file.suffix==='jpg' || file.suffix === 'jpeg'|| file.suffix === 'png'" class="icon">
+              <svg-icon icon-class="pic"/>
+            </div>
+            <div v-else class="icon">
+              <svg-icon icon-class="file"/>
+            </div>
+            <a id="appUrl" :href="file.url" target="view_window">
+              <div class="info">{{ file.name }}</div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible1" center width="831px">
+      <el-table :data="tableData1" highlight-current-row border stripe size="small" style="width: 771px;">
+        <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" 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">
+          <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">
+            <el-button
+              :disabled="!scope.row.工艺名称"
+              type="text"
+              size="mini"
+              style="margin-right: 5px"
+              @click="getProcessTool(scope.row)">查看工艺指导
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    <el-dialog
+      v-el-drag-dialog
+      :visible.sync="dialogVisible1"
+      :center="dialogName"
+      title="工艺指导"
+      width="20%">
+      <div v-for="(file, key) in hadFile1" :key="key">
+        <div class="wrapper">
+          <div class="content">
+            <div v-if="file.suffix==='pdf'" class="icon">
+              <svg-icon icon-class="pdf"/>
+            </div>
+            <div v-else-if="file.suffix==='docx'||file.suffix === 'doc'" class="icon">
+              <svg-icon icon-class="doc"/>
+            </div>
+            <div v-else-if="file.suffix==='xlsx' || file.suffix === 'xls'" class="icon">
+              <svg-icon icon-class="excel"/>
+            </div>
+            <div v-else-if="file.suffix==='pptx' || file.suffix === 'ppt'" class="icon">
+              <svg-icon icon-class="ppt"/>
+            </div>
+            <div v-else-if="file.suffix==='jpg' || file.suffix === 'jpeg'|| file.suffix === 'png'" class="icon">
+              <svg-icon icon-class="pic"/>
+            </div>
+            <div v-else class="icon">
+              <svg-icon icon-class="file"/>
+            </div>
+            <a id="appUrl1" :href="file.url" target="view_window">
+              <div class="info">{{ file.name }}</div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import request, { MESDownloadFile } from '@/utils/request'
+
+export default {
+  data() {
+    return {
+      dialogVisible1: false,
+      hadFile1: [],
+      processValue: '',
+      dialogName: true,
+      orderNumberTypeValue: '', // 订单号
+      orderNumberType: [], // 订单号数组
+      productpartNameValue: '', // 产品部件名称
+      productpartName: [], // 产品部件名称数组
+      partNameValue: '', // 零件名称
+      partName: '',
+      hadFile: [],
+      fileList: [],
+      tableData1: [],
+      dialogVisible: false,
+      dialogFormVisible1: false,
+      checked: false,
+      loading: false, // 数据加载
+      total: 0, // 分页总数
+      tableData: [], // 合同信息表
+      tableData2: [],
+      pageCurrent: 1, // 分页当前页
+      pageSize: 100, // 分页每页显示条数
+      orderName: '', // 排序列名
+      order: '' // 排序方式
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'id',
+      'token'
+    ])
+  },
+  created() {
+    this.searchTable()
+    this.getOrderNumberType('')
+  },
+  methods: {
+    getOrderNumberType(query) {
+      this.orderNumberType = []
+      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.orderNumberType.push({
+            label: response.data[i].订单编号,
+            value: response.data[i].订单流水号
+          })
+        }
+      })
+    },
+    getproductpartName() {
+      this.productpartNameValue = ''
+      this.productpartName = []
+      if (this.orderNumberTypeValue) {
+        var param = []
+        param[0] = ['订单流水号', this.orderNumberTypeValue]
+        var Data = this.CreateData('11', '订单信息_产品信息_查询数据', param)
+        this.ExecDatabase(Data).then(response => {
+          for (let i = 0; i < response.data.length; i++) {
+            this.productpartName.push({
+              label: response.data[i].产品名称,
+              value: response.data[i].组件流水号
+            })
+          }
+        })
+      }
+    },
+    getProductName() {
+      this.productpartNameValue = ''
+      this.productpartName = []
+      var param = []
+      var Data = this.CreateData('11', '产品信息_基础表_查询数据', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.productpartName.push({
+            label: response.data[i].产品名称,
+            value: response.data[i].产品流水号
+          })
+        }
+      })
+    },
+    searchTable() {
+      let orderNumberTypeValue_check, productpartNameValue_check, partNameValue_check
+      this.orderNumberTypeValue ? orderNumberTypeValue_check = 1 : orderNumberTypeValue_check = 0
+      console.log(this.contractStateValue, 123)
+      this.productpartNameValue ? productpartNameValue_check = 1 : productpartNameValue_check = 0
+      this.partNameValue ? partNameValue_check = 1 : partNameValue_check = 0
+      console.log(this.contractStateValue, 123)
+      if (this.checked) {
+        var param = []
+        param[0] = ['产品流水号', this.productpartNameValue]
+        param[1] = ['产品流水号_check', productpartNameValue_check]
+        param[2] = ['零件名称_check', partNameValue_check]
+        param[3] = ['零件名称', this.partNameValue]
+        // 参数数量与名称要与存储过程对应
+        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
+        })
+      } else {
+        var param1 = []
+        param1[0] = ['订单流水号', this.orderNumberTypeValue]
+        param1[1] = ['订单流水号_check', orderNumberTypeValue_check]
+        param1[2] = ['组件流水号', this.productpartNameValue]
+        param1[3] = ['组件流水号_check', productpartNameValue_check]
+        param1[4] = ['零件名称_check', partNameValue_check]
+        param1[5] = ['零件名称', this.partNameValue]
+        // 参数数量与名称要与存储过程对应
+        var Data1 = this.CreateData('11', '工艺_查询新', param1, this.pageSize, this.pageCurrent)
+        this.ExecDatabase(Data1).then(response => {
+          this.tableData = response.data.rows
+          this.total = response.data.total
+        })
+      }
+    },
+    // 查看零件图
+    getNum(row) {
+      this.dialogVisible = true
+      this.getFileList(row.零件图号)
+    },
+    // 查看零件图
+    getNum1(row) {
+      this.dialogVisible = true
+      this.getFileList(row.代号)
+    },
+    async getFileList(value) {
+      this.hadFile = []
+      if (value) {
+        await request({
+          url: '',
+          method: 'post',
+          data: {
+            type: '3',
+            name: `select * from 机加工MES_零件图PDF表 where 是否启用 = 1 and name = '${value}'`
+          }
+        }).then(data => {
+          this.suffix = data.data
+          if (data.data.length > 0) {
+            const server = `${MESDownloadFile}`.split('/')
+            data.data.map(item => {
+              this.hadFile.push({
+                url: `http://${server[2]}/webpage/part/${item.uid}.${item.suffix}`,
+                name: `${item.name}.${item.suffix}`,
+                suffix: item.suffix,
+                id: item.uid
+              })
+            })
+          }
+        })
+      }
+    },
+    updateCheck() {
+      this.getProductName()
+      this.searchTable()
+    },
+    getProcess(row) {
+      this.partName = row.零件图号
+      var param = []
+      param[0] = ['工艺计划流水号', row.工艺计划流水号]
+      // 参数数量与名称要与存储过程对应
+      var Data = this.CreateData('11', '车间生产管理工艺_零件工序_查询数据', param)
+      this.ExecDatabase(Data).then(response => {
+        this.tableData1 = response.data
+      })
+      this.dialogFormVisible1 = true
+    },
+    getProcessTool(row) {
+      this.processValue = this.partName + '-' + row.工序顺序 + '-' + row.工艺名称
+      this.hadFile1 = []
+      var param = []
+      param[0] = ['name', this.processValue]
+      var Data = this.CreateData('11', '车间生产管理工艺_零件工序_指导图_查询数据', param)
+      this.ExecDatabase(Data).then(res => {
+        this.suffix = res.data
+        if (res.data.length > 0) {
+          const server = `${MESDownloadFile}`.split('/')
+          res.data.map(item => {
+            this.hadFile1.push({
+              url: `http://${server[2]}/webpage/part/${item.uid}.${item.suffix}`,
+              name: `${item.name}.${item.suffix}`,
+              suffix: item.suffix,
+              id: item.num
+            })
+          })
+        }
+      })
+      this.dialogVisible1 = true
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (Number(row.是否加急) === 1) {
+        return 'Urgent'
+      }
+    },
+    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;
+}
+
+.wrapper {
+  width: 90%;
+  height: 50px;
+  overflow: hidden;
+  border: 1px solid #b8c7d9;
+  /*float: left;*/
+  margin: 10px;
+}
+
+.content {
+  position: relative;
+  padding: 8px 8px 0 8px;
+}
+
+.action {
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+
+.delete {
+  padding: 0 5px;
+  border-radius: 3px;
+  color: #0f84b0;
+  font-size: 12px;
+}
+
+.delete:hover {
+  background: -webkit-linear-gradient(top, #0ba9e3, #0099d3);
+  color: #fff;
+}
+
+a {
+  text-decoration: none;
+}
+
+.icon {
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  margin-right: 7px;
+  margin-top: 2px;
+  font-size: 26px;
+}
+
+.info {
+  width: 160px;
+  height: 50px;
+  position: absolute;
+  left: 44px;
+  line-height: 30px;
+  display: inline-block;
+  color: #999;
+}
+</style>
+<style>
+.el-table .Urgent {
+  background: #ff7575 !important;
+}
+</style>