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

src/views/DeviceManagement/EquipmentSpotCheck/index.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="app-container">
+    <el-card style="height: 850px">
+      <el-col :span="4.5" style="margin: 7px 0">
+        <el-button type="shengcheng" size="small" icon="el-icon-circle-plus-outline" @click="editType('form')">新增</el-button>
+        <el-button type="warning" size="small" icon="el-icon-edit-outline" style="margin-left: 10px" @click="editType1('form')">编辑</el-button>
+        <el-button type="danger" size="small" icon="el-icon-delete" style="margin-left: 10px" @click="deleteCheckType()">删除</el-button>
+        <el-table v-loading="loading" :data="tableData" height="760" highlight-current-row style="margin-top: 5px;width: 100%;" border element-loading-text="拼命加载中" @row-click="rowClick">
+          <el-table-column label="维护检点类型" align="center" min-width="200px" fixed="left">
+            <template slot-scope="scope">
+              <span>{{ scope.row.点检表类型名称 }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+      <el-col :span="8" style="margin: 7px 0 7px 20px">
+        <el-button type="success" size="small" plain @click="dailyCheck()">日检</el-button>
+        <el-button type="primary" size="small" plain @click="monthlyCheck()">月检</el-button>
+        <el-button type="warning" size="small" plain @click="yearlyCheck()">年检</el-button>
+        <el-button type="shengcheng" size="small" icon="el-icon-circle-plus-outline" @click="addContent()">新增内容</el-button>
+        <el-table v-loading="loading1" :data="tableData1" :header-cell-style="{background: '#2283D4',color: 'white'}" height="760" highlight-current-row style="margin-top: 5px;width: 100%;" border element-loading-text="拼命加载中">
+          <el-table-column label="序号" type="index" align="center" width="60px"/>
+          <el-table-column label="检测内容" align="center" min-width="150px">
+            <template slot-scope="scope">
+              <template v-if="scope.row.edit">
+                <el-input v-model="scope.row.保养项目" style="width:97%;margin-right:3px" clearable size="mini" />
+              </template>
+              <span v-else>{{ scope.row.保养项目 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" min-width="50px">
+            <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-else type="text" size="mini" icon="el-icon-edit-outline" @click="scope.row.edit=!scope.row.edit"/>
+              <el-button v-if="!scope.row.edit" type="text" size="mini" icon="el-icon-delete" @click="detectionContentDeletion(scope.row)"/>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+      <el-dialog :title="title" :visible.sync="dialogFormVisible" center width="20%">
+        <el-form ref="form" :model="form" :rules="rules" label-position="left" class="demo-ruleForm" label-width="120px" style="width: 90%;margin: auto">
+          <el-form-item label="维护检点类型" prop="production">
+            <el-input v-model="form.production" size="small" style="width: 90%" clearable placeholder="请输入维护检点类型"/>
+          </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="primary" @click="submit('form')">确 定</el-button>
+        </div>
+      </el-dialog>
+      <el-dialog :title="title1" :visible.sync="dialogFormVisible1" center width="20%">
+        <el-form ref="form1" :model="form1" :rules="rules1" label-position="left" class="demo-ruleForm" label-width="120px" style="width: 90%;margin: auto">
+          <!--        <el-form-item label="供应商代码" prop="supplierId">-->
+          <!--          <el-input v-model="form.supplierId" size="small" style="width: 75%" clearable placeholder="请输入供应商代码"/>-->
+          <!--        </el-form-item>-->
+          <el-form-item label="维护检点类型" prop="production">
+            <el-input v-model="form1.production" size="small" style="width: 90%" clearable placeholder="请输入维护检点类型"/>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="small" @click="callOff1('form1')">取消</el-button>
+          <el-button size="small" type="primary" @click="submit1('form1')">确 定</el-button>
+        </div>
+      </el-dialog>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      radio: '0',
+      title: '',
+      maintenanceCycle: '',
+      dialogFormVisible: false,
+      form: {
+        production: ''
+      },
+      rules: {
+        production: [{ required: true, message: '请输入维护检点类型', trigger: 'blur' }]
+        //  这里面写的是表单验证 即 可以规定 输入框不可以为空或者其输入框的输入类型的格式要求
+      },
+      title1: '',
+      dialogFormVisible1: false,
+      form1: {
+        production: ''
+      },
+      rules1: {
+        production: [{ required: true, message: '请输入维护检点类型', trigger: 'blur' }]
+        //  这里面写的是表单验证 即 可以规定 输入框不可以为空或者其输入框的输入类型的格式要求
+      },
+      selectRow: '',
+      selectRow1: '',
+      loading: false, // 数据加载
+      loading1: false, // 数据加载
+      tableData: [], // 合同信息表
+      tableData1: [], // 合同信息表
+      pageCurrent: 1, // 分页当前页
+      pageSize: 100 // 分页每页显示条数
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'id',
+      'token'
+    ])
+  },
+  created() {
+    this.searchTable()
+  },
+  methods: {
+    searchTable() {
+      this.tableData = []
+      const param = []
+      const Data = this.CreateData('11', '基础数据_点检类型名称_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data.length !== 0) {
+          this.tableData = response.data
+        }
+        this.loading = false
+      })
+    },
+    rowClick(row) {
+      this.selectRow = row.点检表类型流水号
+      this.selectRow1 = row.点检表类型名称
+      console.log('lixina12', this.selectRow1)
+      this.radio = '1'
+      this.dailyCheck()
+    },
+    addContent() {
+      if (!this.selectRow) {
+        this.$message.warning('请先选择点检类型')
+        return
+      }
+      if (!this.maintenanceCycle) {
+        this.$message.warning('请先选择保养周期')
+        return
+      }
+      const param = []
+      param[0] = ['点检表类型流水号', this.selectRow]
+      param[1] = ['保养周期', this.maintenanceCycle]
+      const Data = this.CreateData('12', '基础数据_保养项目_新增', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data[0].result === '1') {
+          this.$message.success('新增成功')
+          this.testContent()
+        } else {
+          this.$message.error('新增失败')
+        }
+      })
+    },
+    testContent() {
+      this.tableData1 = []
+      const param = []
+      param[0] = ['点检表类型流水号', this.selectRow]
+      param[1] = ['保养周期', this.maintenanceCycle]
+      const Data = this.CreateData('11', '基础数据_保养项目_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data.length !== 0) {
+          // this.tableData1 = response.data
+          for (let i = 0; i < response.data.length; i++) {
+            this.tableData1.push({
+              // 表示将从数据库中查询到的数据，分别对应填充到表格中
+              保养项目: response.data[i].保养项目,
+              保养周期: response.data[i].保养周期,
+              点检任务编号: response.data[i].点检任务编号,
+              保养项目_before: response.data[i].保养项目,
+              edit: false
+            })
+          }
+        }
+        this.loading = false
+      })
+    },
+    dailyCheck() {
+      this.maintenanceCycle = 1
+      this.tableData1 = []
+      const param = []
+      param[0] = ['点检表类型流水号', this.selectRow]
+      const Data = this.CreateData('11', '基础数据_保养项目_日检查询', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data.length !== 0) {
+          for (let i = 0; i < response.data.length; i++) {
+            this.tableData1.push({
+              // 表示将从数据库中查询到的数据，分别对应填充到表格中
+              保养项目: response.data[i].保养项目,
+              保养周期: response.data[i].保养周期,
+              点检任务编号: response.data[i].点检任务编号,
+              保养项目_before: response.data[i].保养项目,
+              edit: false
+            })
+          }
+        }
+        this.loading = false
+      })
+    },
+    monthlyCheck() {
+      this.maintenanceCycle = 30
+      this.tableData1 = []
+      const param = []
+      param[0] = ['点检表类型流水号', this.selectRow]
+      const Data = this.CreateData('11', '基础数据_保养项目_月检查询', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data.length !== 0) {
+          for (let i = 0; i < response.data.length; i++) {
+            this.tableData1.push({
+              // 表示将从数据库中查询到的数据，分别对应填充到表格中
+              保养项目: response.data[i].保养项目,
+              保养周期: response.data[i].保养周期,
+              点检任务编号: response.data[i].点检任务编号,
+              保养项目_before: response.data[i].保养项目,
+              edit: false
+            })
+          }
+        }
+        this.loading = false
+      })
+    },
+    yearlyCheck() {
+      this.maintenanceCycle = 365
+      this.tableData1 = []
+      const param = []
+      param[0] = ['点检表类型流水号', this.selectRow]
+      const Data = this.CreateData('11', '基础数据_保养项目_年检查询', param)
+      this.ExecDatabase(Data).then(response => {
+        if (response.data.length !== 0) {
+          for (let i = 0; i < response.data.length; i++) {
+            this.tableData1.push({
+              // 表示将从数据库中查询到的数据，分别对应填充到表格中
+              保养项目: response.data[i].保养项目,
+              保养周期: response.data[i].保养周期,
+              点检任务编号: response.data[i].点检任务编号,
+              保养项目_before: response.data[i].保养项目,
+              edit: false
+            })
+          }
+        }
+        this.loading = false
+      })
+    },
+    cancelEdit(index, row) {
+      row.edit = false
+      row.保养项目 = this.tableData1[index].保养项目_before
+      this.$message('取消修改')
+    },
+    // 确定编辑
+    confirmEdit(row) {
+      this.tableData1 = []
+      var param = []
+      param[0] = ['保养项目', row.保养项目]
+      param[1] = ['点检任务编号', row.点检任务编号]
+      if (row.保养项目 === '' || row.保养项目 === null) {
+        this.$message.error('请输入保养项目')
+      } else {
+        var Data = this.CreateData('12', '基础数据_保养项目_编辑', param)
+        this.ExecDatabase(Data).then(response => {
+          if (response.data[0].result === '1') {
+            this.$message({
+              message: '信息编辑成功',
+              type: 'success'
+            })
+            this.testContent()
+          } else {
+            this.$message.error('信息编辑失败')
+          }
+        })
+      }
+    },
+    detectionContentDeletion(row) {
+      this.$confirm('此操作将永久删除该检测内容, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.tableData1 = []
+        var param = []
+        param[0] = ['点检任务编号', row.点检任务编号]
+        var Data = this.CreateData('12', '基础数据_保养项目_删除', param)
+        this.ExecDatabase(Data).then(response => {
+          if (response.data[0].result === '1') {
+            this.$message.success('删除成功')
+            this.testContent()
+          } else {
+            this.$message.error('删除失败')
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    // 增加取消
+    callOff(formName) {
+      this.dialogFormVisible = false
+      this.$refs[formName].resetFields()
+    },
+    submit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          var param = []
+          // param[0] = ['供应商代码', this.form.supplierId]
+          param[0] = ['点检表类型名称', this.form.production]
+          var Data = this.CreateData('12', '基础数据_点检类型名称_新增', param)
+          this.ExecDatabase(Data).then(response => {
+            if (response.data[0].result === '1') {
+              this.$message({
+                message: '信息增加成功',
+                type: 'success'
+              })
+              this.searchTable()
+            } else {
+              this.$message.error('信息增加失败')
+            }
+          })
+          this.dialogFormVisible = false
+        } else {
+          return false
+        }
+      })
+    },
+    editType(formName) {
+      if (this.$refs['form'] !== undefined) {
+        this.$refs['form'].resetFields()
+      }
+      this.title = '新增维护检点类型'
+      this.dialogFormVisible = true
+    },
+    editType1() {
+      if (this.selectRow1 !== '' && this.selectRow1 !== null) {
+        this.title1 = '修改维护检点类型'
+        this.dialogFormVisible1 = true
+        this.form1.production = this.selectRow1
+      } else {
+        this.$message.error('请点击想要修改的维护检点类型')
+      }
+    },
+    callOff1(formName) {
+      this.dialogFormVisible1 = false
+      this.$refs[formName].resetFields()
+    },
+    deleteCheckType(row) {
+      this.$confirm('此操作将永久删除该维护检点类型, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        var param = []
+        param[0] = ['点检表类型流水号', this.selectRow]
+        var Data = this.CreateData('12', '基础数据_点检类型名称_删除', param)
+        this.ExecDatabase(Data).then(response => {
+          console.log(response.data)
+          if (response.data[0].result === '1') {
+            this.$message.success('删除成功')
+            this.searchTable()
+          } else if (response.data[0].结果 === 2) {
+            this.$message.error('删除失败!请先删除该维护检点类型的检测内容！')
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    submit1(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          var param = []
+          // param[0] = ['供应商代码', this.form.supplierId]
+          param[0] = ['点检表类型名称', this.form1.production]
+          param[1] = ['点检表类型流水号', this.selectRow]
+          var Data = this.CreateData('12', '基础数据_点检类型名称_修改', param)
+          this.ExecDatabase(Data).then(response => {
+            if (response.data[0].result === '1') {
+              this.$message({
+                message: '信息修改成功',
+                type: 'success'
+              })
+              this.searchTable()
+            } else {
+              this.$message.error('信息修改失败')
+            }
+          })
+          this.dialogFormVisible1 = false
+        } else {
+          return false
+        }
+      })
+    },
+    handleSizeChanges(val) {
+      this.pageCurrent = 1
+      this.pageSize = val
+      this.searchTable()
+    },
+    handleCurrentChanges(val) {
+      this.pageCurrent = val
+      this.searchTable()
+    }
+  }
+}
+</script>
+