补全了设备库的空缺页面

Signed-off-by: AiNoeLiYa <jzbcxy@gmail.com>

src/api/processLibrary/InventoryRecord.js

 import request from '@/utils/request'
 
-export function listLog() {
+export function listLog(queryParams) {
   return request({
-    url: '/wbwarehouselog/queryWbWarehouseLogs',
-    method: 'get'
+    url: '/wbwarehouselog/queryWbWarehouseLogByPagination',
+    method: 'get',
+    params: queryParams
   })
 }

src/views/equipment/boundinout.vue

@@ -2,56 +2,49 @@
   <div class="app-container">
     <el-form v-show="showSearch" ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true" label-width="68px">
 
-      <el-form-item label="设备名称" prop="userName">
+      <el-form-item label="设备编码" prop="pn">
         <el-input
-          v-model="queryParams.username"
-          placeholder="请输入设备名称"
-          clearable
-          :maxlength="30"
-          style="width: 240px;"
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-
-      <el-form-item label="Pn" prop="userName">
-        <el-input
-          v-model="queryParams.username"
-          placeholder="Pn"
+          v-model="queryParams.pn"
+          placeholder="请输入设备编码"
           clearable
           :maxlength="30"
-          style="width: 240px;"
+          style="width: 150px;"
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
 
-      <el-form-item label="设备编码" prop="">
+      <el-form-item label="操作人" prop="updateBy">
         <el-input
-          v-model="queryParams.username"
-          placeholder="请输入设备编码"
+          v-model="queryParams.updateBy"
+          placeholder="请输入操作人"
           clearable
           :maxlength="30"
-          style="width: 240px;"
+          style="width: 150px;"
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
 
       <el-form-item>
-        <el-select v-model="selectValue" filterable placeholder="请选择库类型">
+        <el-select v-model="queryParams.selectValue" filterable placeholder="请选择库类型">
           <el-option
             v-for="option in selectOptions"
             :key="option.value"
             :label="option.label"
-            :value="option.value">
-          </el-option>
+            :value="option.value"
+          />
         </el-select>
       </el-form-item>
 
       <el-form-item>
         <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
       </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" size="small" icon="el-icon-search" @click="resetQuery">重置</el-button>
+      </el-form-item>
+
       <div style="float: right">
         <el-form-item>
           <el-button
@@ -70,13 +63,14 @@
         </el-form-item>
       </div>
     </el-form>
-    <div class="placeholder" />
 
+    <!--  TODO: 分隔符-->
+    <div class="placeholder" />
 
     <transition name="fade-transform" mode="out-in">
       <component
         :is="BaseTable"
-        :key="queryParams.pageNum"
+        :key="queryParams.rows"
         :all-table-arguments="allTableArguments"
         @handle-detail="handleDetail"
         @handle-update="handleUpdate"
@@ -199,21 +193,7 @@ export default {
       },
       // 表格数据
       list: [],
-      // 状态数据字典
-      statusOptions: [
-        {
-          dictLabel: '启用',
-          dictValue: '1'
-        },
-        {
-          dictLabel: '停用',
-          dictValue: '0'
-        }
-      ],
-      // 日期范围
-      dateRange: [],
 
-      selectValue: '',
       selectOptions: [
         {
           value: '1',
@@ -227,10 +207,9 @@ export default {
       queryParams: {
         page: 1,
         rows: 10,
-        ipaddr: undefined,
-        username: undefined,
-        status: undefined,
-        loginTime: ''
+        pn: '',
+        updateBy: '',
+        selectValue: ''
       },
 
       // TODO: 用来说明每一列的类型
@@ -261,11 +240,16 @@ export default {
             }
           }
         },
+        {
+          text: true,
+          prop: 'pn',
+          label: '设备编码'
+        },
         {
           ownDefined: true,
           prop: 'poperate',
           label: 'poperate',
-          width: '',
+          width: '180px',
           ownDefinedReturn: (row, $index) => {
             switch (row.poperate) {
               case '1':
@@ -281,11 +265,6 @@ export default {
             }
           }
         },
-        {
-          text: true,
-          prop: 'pn',
-          label: 'pn'
-        },
         {
           time: true,
           prop: 'updateDate',
@@ -294,7 +273,7 @@ export default {
         },
         {
           text: true,
-          prop: 'createBy',
+          prop: 'updateBy',
           label: '操作人',
           sortable: false,
           width: '210px'
@@ -312,7 +291,9 @@ export default {
             icon: '',
             color: '',
             size: this.size,
-            buttonClick: this.handleDetail,
+            buttonClick: () => {
+              return 'this.handleDetail'
+            },
             isShow: (row, $index) => {
               return true
             }
@@ -322,7 +303,9 @@ export default {
             icon: '',
             color: '',
             size: this.size,
-            buttonClick: this.handleUpdate,
+            buttonClick: () => {
+              return 'this.handleUpdate'
+            },
             isShow: (row, $index) => {
               return true
             }
@@ -332,7 +315,9 @@ export default {
             icon: '',
             color: '',
             size: this.size,
-            buttonClick: this.handleDelete,
+            buttonClick: () => {
+              return 'this.handleDelete'
+            },
             isShow: (row, $index) => {
               return true
             }
@@ -402,25 +387,15 @@ export default {
     /** 查询登录日志列表 */
     getList() {
       this.loading = true
-      // const query = Object.assign({}, this.queryParams)
-      // query.loginTime = query.loginTime ? this.$parseDate(new Date(query.loginTime), 'YYYY-MM-DD HH:mm:ss') : ''
-      // list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-      //   this.list = response.rows
-      //   this.total = response.total
-      //   this.loading = false
-      // })
-
-      listLog().then(response => {
-        this.processList = response.data
+      listLog(this.queryParams).then(response => {
+        this.total = response.rows.length
+        this.processList = response.rows
         this.loading = false
       })
     },
     handleClose() {
       this.clearVisible = false
       this.exportVisible = false
-    },
-    timechange(e) {
-
     },
     // 登录状态字典翻译
     // statusFormat(row, column) {
@@ -433,7 +408,6 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.dateRange = ''
       this.resetForm('queryForm')
       this.handleQuery()
     },
@@ -442,51 +416,6 @@ export default {
       this.ids = selection.map(item => item.businessId)
       this.multiple = !selection.length
     },
-    /** 删除按钮操作 */
-    handleDelete(data) {
-      this.$confirm('是否确认操作？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        // const id = this.ids.join(',')
-        const id = data
-        const query = {
-          deleteIds: id
-        }
-        return delLogininfo(query)
-      }).then(() => {
-        this.getList()
-        this.$message.success('删除成功')
-        this.ids = []
-        this.multiple = true
-      }).catch(function() {})
-    },
-    clear() {
-      this.$refs['clear'].validate((valid) => {
-        if (valid) {
-          const that = this
-          const query = {
-            beginTime: that.clearFrom.month[0],
-            endTime: that.clearFrom.month[1]
-          }
-          cleanLogininfo(query).then(res => {
-            if (res.code === 200) {
-              that.getList()
-              that.$message.success('清空成功')
-              this.clearVisible = false
-            } else {
-              that.$message.error(res.message)
-            }
-          })
-        }
-      })
-    },
-    /** 清空按钮操作 */
-    handleClean() {
-      this.clearVisible = true
-      this.clearFrom = {}
-    },
     exportSubmit() {
       this.$refs['export'].validate((valid) => {
         if (valid) {
@@ -515,14 +444,6 @@ export default {
     handleExport() {
       this.exportVisible = true
       this.exportFrom = {}
-      // const queryParams = Object.assign({}, this.queryParams)
-      // // queryParams.loginTime = queryParams.loginTime ? this.$parseDate(new Date(queryParams.loginTime), 'YYYY-MM-DD HH:mm:ss') : ''
-      // delete queryParams.page
-      // delete queryParams.rows
-      // queryParams.ids = this.ids.join(',') || null
-      // exportLogininfo(queryParams).then(response => {
-      //   this.download(response.msg)
-      // }).catch(function() {})
     }
   }
 }

src/views/processManagement/basicProcessManagement/index.vue

@@ -435,40 +435,7 @@ export default {
         }
       })
     },
-    /** TODO: 关于模拟数据的 删除list数组所调用的删除方法,封装的函数如下 */
-    delProcess(delProcessName) {
-      let tip = false
-      for (const pd0 of this.simulateProcessList) {
-        console.log('This is pd0:', pd0)
-        if (pd0.processName === delProcessName) {
-          this.simulateProcessList = this.simulateProcessList.filter(item => item.processName !== delProcessName)
-          tip = true
-          break
-        }
-      }
-      return tip
-    },
-    /** TODO:删除按钮操作 */
-    handleDelete(row, $index) {
-      this.$confirm('是否确认操作？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        return this.delProcess(row.processName)
-      }).then(() => {
-        this.getList()
-        this.$message({
-          message: '删除成功',
-          type: 'success'
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        })
-      })
-    }
+
 
   }
 }

src/views/processManagement/deviceReuse/index.vue

+<template>
+  <div class="app-container">
+    <!-- TODO: 基础工序管理-->
+    <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
+      <el-form-item label="工序名称" prop="roleName">
+        <el-input
+          v-model="queryParams.processName"
+          placeholder="请输入工序名称"
+          clearable
+          :maxlength="30"
+          size="small"
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="生产车间" prop="roleKey">
+        <el-input
+          v-model="queryParams.workshop"
+          placeholder="请输入生产车间"
+          clearable
+          size="small"
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
+      </el-form-item>
+      <div style="float: right">
+        <el-form-item>
+          <el-button style="padding: 8px 7px;" :type="typePrimary" :size="smallSize" :icon="addIcon" @click="handleAdd">
+            {{ addName }}
+          </el-button>
+        </el-form-item>
+      </div>
+    </el-form>
+    <!-- TODO: 中间的分隔符号   -->
+    <div class="placeholder" />
+    <div class="main" style="padding:5px 10px">
+      <!-- TODO: 以下为基础工序管理列表 -->
+      <transition name="fade-transform" mode="out-in">
+        <component
+          :is="BaseTable"
+          :key="queryParams.pageNum"
+          :all-table-arguments="allTableArguments"
+          @handle-detail="handleDetail"
+          @handle-update="handleUpdate"
+          @handle-delete="handleDelete"
+        />
+      </transition>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- TODO: 添加或修改工序配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="名称" prop="processName">
+          <el-input v-model.trim="form.processName" show-word-limit :maxlength="30" placeholder="请输入工序名称" />
+        </el-form-item>
+        <el-form-item label="工厂车间" prop="workshop">
+          <el-input v-model.trim="form.workshop" show-word-limit :maxlength="30" placeholder="请输入工厂车间" />
+        </el-form-item>
+        <el-form-item label="操作人" prop="createBy">
+          <el-input v-model.trim="form.createBy" :maxlength="30" show-word-limit placeholder="请输入操作人" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- TODO: 单项详情信息表单配置 -->
+    <el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body>
+      <el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
+        <el-form-item label="名称：" prop="processName">
+          <el-input v-model.trim="singleDetails.processName" :readonly="isReadOnly" />
+        </el-form-item>
+        <el-form-item label="工厂车间：" prop="workshop">
+          <el-input v-model.trim="singleDetails.workshop" :readonly="isReadOnly" />
+        </el-form-item>
+        <el-form-item label="操作时间：" prop="createTime">
+          <!--
+            TODO: el-input 里不能调用全局日期过滤器  transformDateByFormat('YYYY-MM-DD HH:mm')
+            <el-input v-model.trim="singleDetails.createTime" :readonly="isReadOnly" />
+          -->
+           &nbsp;
+          {{ singleDetails.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}
+        </el-form-item>
+        <el-form-item label="操作人：" prop="createBy">
+          <el-input v-model.trim="singleDetails.createBy" :readonly="isReadOnly" />
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+// TODO: 引入封装好的通用table组件
+import BaseTable from '@/components/Table/BaseTable/index.vue'
+
+// TODO: 通过json的形式，优化导入模拟数据，并增加模拟数据的数量
+const simulateDataList = require('../basicProcessManagement/simulateDataList/simulateProcessList.json')
+export default {
+  name: 'Role',
+  components: { BaseTable },
+  data() {
+    return {
+      // TODO: 动态按钮类型
+      typeParent: 'text',
+      typePrimary: 'primary',
+      typeSuccess: 'success',
+      // TODO: 动态按钮名称
+      nameParent: '删除',
+      resetName: '重置',
+      addName: '新增',
+      updataName: '修改',
+      // TODO: 动态按钮尺寸
+      size: 'mini',
+      smallSize: 'small',
+      // TODO: 图标名
+      delicon: 'el-icon-delete',
+      addIcon: 'el-icon-plus',
+      exportIcon: 'el-icon-download',
+      resetIcon: '',
+      // TODO: 控制只读
+      isReadOnly: true,
+      // TODO: 遮罩层 (加载进度条)
+      loading: true,
+      // TODO: 分页的总条数
+      total: 0,
+
+      // TODO: 是否显示弹出层
+      open: false,
+      // TODO: 是否显示弹出层（数据详情的）
+      openDetails: false,
+
+      /* 以下为所有table的基本数据 */
+      // TODO: 模拟测试数据的数据库
+      simulateProcessList: [],
+      // TODO: 模拟数据中转表 (为了解决模拟数据的查询问题)
+      toList: [],
+      // TODO: 工序表格数据
+      processList: [],
+
+      // TODO: 表单初始化专用参数
+      formReset: {
+        processName: '',
+        workshop: '',
+        flag: '1',
+        createTime: new Date(),
+        updataTime: new Date(),
+        createBy: ''
+      },
+      // TODO: 弹出框层标题
+      title: '',
+      // TODO: 表单校验参数
+      rules: {
+        processName: [
+          { required: true, message: '请输入工序名称', trigger: 'blur' },
+          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
+        ],
+        workshop: [
+          { required: true, message: '请输入车间名称', trigger: 'blur' }
+        ],
+        createBy: [
+          { required: true, message: '请输入创建人姓名', trigger: 'blur' }
+        ]
+      },
+      // TODO: 新增+修改的 表单参数
+      form: {
+        processName: '',
+        workshop: '',
+        flag: '1',
+        remark: '',
+        createTime: new Date(),
+        updataTime: new Date(),
+        createBy: ''
+      },
+      // TODO: 表单里的单项详情的参数
+      singleDetails: {
+        processName: '',
+        workshop: '',
+        flag: '1',
+        createTime: new Date(),
+        updataTime: new Date(),
+        createBy: ''
+      },
+
+      // TODO: 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        processName: '',
+        workshop: ''
+      },
+
+      // TODO: 用来说明每一列的类型
+      columObj: {
+        // 选择框
+        selection: false,
+        // 选择框根据条件是否可选
+        selectable: (row, index) => {
+          if (row.switchs) {
+            return true
+          }
+        },
+        lazy: 'true',
+        // column列,columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
+        // prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
+        columnData: [{
+          text: true,
+          prop: 'processName',
+          label: '工序名称'
+        }, {
+          text: true,
+          prop: 'workshop',
+          label: '生产车间'
+        },
+        {
+          time: true,
+          prop: 'createTime',
+          label: '操作时间',
+          align: 'center'
+        },
+        {
+          text: true,
+          editRow: null,
+          prop: 'createBy',
+          label: '操作人',
+          sortable: false,
+          width: '210px'
+        },
+        // 如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
+        {
+          isOperation: true,
+          label: '操作',
+          width: '180px',
+          align: 'center',
+          sortable: false,
+          operation: [{
+            type: this.typeParent,
+            label: '详情',
+            icon: '',
+            color: '',
+            size: this.size,
+            buttonClick: this.handleDetail,
+            isShow: (row, $index) => {
+              return true
+            }
+          }, {
+            type: this.typeParent,
+            label: '修改',
+            icon: '',
+            color: '',
+            size: this.size,
+            buttonClick: this.handleUpdate,
+            isShow: (row, $index) => {
+              return true
+            }
+          }, {
+            type: this.typeParent,
+            label: '删除',
+            icon: '',
+            color: '',
+            size: this.size,
+            buttonClick: this.handleDelete,
+            isShow: (row, $index) => {
+              return true
+            }
+          }]
+        }
+
+        ]
+      }
+      //   DONE:
+
+    }
+  },
+  computed: {
+    BaseTable() {
+      return BaseTable
+    },
+
+    // TODO: 用来汇总Table组件所需要的全部数据并一次性传输给子组件
+    allTableArguments() {
+      return {
+        listName: '基础工序列表',
+        loading: this.loading,
+        processList: this.processList,
+        queryParams: this.queryParams,
+        columObj: this.columObj
+      }
+    }
+  },
+  /** TODO: 路由离开前存储筛选条件*/
+  beforeRouteLeave(to, from, next) {
+    this.$store.dispatch('searchSave/searchParamsSet', {
+      path: this.$route.path,
+      param: {
+        ...this.queryParams
+      }
+    })
+    next()
+  },
+  created() {
+    // TODO: 获取大量模拟数据！ require用于将 JSON 数据转换为 JavaScript 对象数组
+    // 测试用 console.log('this is json', simulateDataList)
+    this.simulateProcessList = simulateDataList
+    this.getList()
+  },
+  methods: {
+
+    // TODO:自定义分页索引，实现索引继承
+    nIndex(index) {
+      // TODO: 当前页数 - 1 * 每页数据条数 + 1
+      const page = this.queryParams.pageNum // TODO: 当前页码
+      const pageSize = this.queryParams.pageSize // TODO: 每页条数
+      return index + 1 + (page - 1) * pageSize
+    },
+    /** TODO: 查询列表 */
+    getList() {
+      this.loading = true
+      this.reset()
+      // TODO: 此处为模拟数据的，根据不同条件去查询的过滤方法，可以删除！
+      if (this.queryParams.workshop === '' && this.queryParams.processName !== '') {
+        for (const ps of this.simulateProcessList) {
+          if (ps.processName === this.queryParams.processName) {
+            this.toList.push(ps)
+          }
+        }
+      } else if (this.queryParams.workshop !== '' && this.queryParams.processName === '') {
+        for (const ps of this.simulateProcessList) {
+          if (ps.workshop === this.queryParams.workshop) {
+            this.toList.push(ps)
+          }
+        }
+      } else if (this.queryParams.workshop !== '' && this.queryParams.processName !== '') {
+        for (const ps of this.simulateProcessList) {
+          if (ps.workshop === this.queryParams.workshop && ps.processName === this.queryParams.processName) {
+            this.toList.push(ps)
+          }
+        }
+      } else {
+        // 测试用 console.log('this is simulate: ', this.simulateProcessList)
+        // TODO:
+        this.toList = [...this.simulateProcessList]
+      }
+      // DONE: 此上为模拟数据的，根据不同条件去查询的过滤方法，可以删除！
+
+      this.processList = [...this.toList]
+      this.total = this.toList.length
+      console.log(this.processList)
+      this.loading = false
+    },
+    // TODO: 表单的取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // TODO: 表单+数据列表+中转数据的重置
+    reset() {
+      // TODO: 将模拟数据的空对象赋值给表单对象，达成清空填写表单的效果
+      this.processList = null
+      this.toList = null
+      this.form = { ...this.formReset }
+    },
+    /** TODO: 查询按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+      console.log('this is queryParams', this.queryParams)
+    },
+    /** TODO: 重置按钮操作 */
+    resetQuery() {},
+    // 多选框选中数据
+    handleSelectionChange(selection) {},
+    /** TODO: 新增按钮操作 */
+    handleAdd() {
+      // TODO: 初始化新增对话框的状态
+      this.reset()
+      this.title = '添加工序'
+      this.open = !this.open
+    },
+    // TODO: 获取所选行详情信息操作
+    handleDetail(row, $index) {
+      this.singleDetails = this.formReset
+      this.singleDetails = row
+      this.title = '详情信息'
+      this.openDetails = !this.openDetails
+    },
+    /** TODO: 修改按钮操作 */
+    handleUpdate(row, $index) {
+      this.form = { ...this.formReset }
+      this.title = '修改工序'
+      const updProcessName = row.processName
+      for (const pd of this.simulateProcessList) {
+        if (pd.processName === updProcessName) {
+          this.form = pd
+        }
+      }
+      this.open = true
+    },
+    /** TODO: 修改或增加list列表里的数据 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          // TODO: 模拟测试数据的修改，可删除
+          for (const p of this.simulateProcessList) {
+            if (p.processName === this.form.processName) {
+              this.simulateProcessList = this.simulateProcessList.map(obj =>
+                obj.processName === this.form.processName ? this.form : obj
+              )
+              this.msgSuccess('修改成功')
+              this.reset()
+              this.getList()
+              this.open = !this.open
+              break
+            } else {
+              this.simulateProcessList.push(this.form)
+              this.msgSuccess('新增成功')
+              this.reset()
+              this.getList()
+              this.open = !this.open
+              return
+            }
+          }
+        }
+      })
+    },
+
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.app-container {
+  font-size: 18px;
+  padding: 0;
+
+  .placeholder {
+    height: 1.3vh;
+    background-color: #F4F4F4;
+    margin-bottom: 10px
+  }
+
+  .table-drop {
+    vertical-align: 2px;
+    line-height: 20px;
+    margin-left: 15px
+  }
+
+  .el-switch {
+    margin-left: 15px;
+  }
+}
+
+.el-divider--vertical {
+  height: 12em;
+  width: 4px;
+}
+
+//.ProcessTable{
+//  padding: 5px;
+//  margin: 0 auto;
+//  height: 495px;
+//}
+
+//TODO: readOnly里去删除el-input的边框样式
+.aboutSingleDetails {
+  .el-form-item {
+    .el-input > > > .el-input__inner {
+      -webkit-appearance: none;
+      background-color: #FFF;
+      background-image: none;
+      border-radius: 4px;
+      border: 0;
+      width: 100%;
+    }
+  }
+}
+</style>
+

src/views/processManagement/deviceReuse/simulateDataList/simulateProcessList.json

+[
+    {
+      "processName": "打磨",
+      "workshop": "车间1",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "张三"
+    },
+    {
+      "processName": "焊接",
+      "workshop": "车间2",
+      "flag": 2,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "李四"
+    },
+    {
+      "processName": "组装",
+      "workshop": "车间3",
+      "flag": 3,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "王五"
+    },
+    {
+      "processName": "涂装",
+      "workshop": "车间1",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "赵六"
+    },
+    {
+      "processName": "包装",
+      "workshop": "车间4",
+      "flag": 2,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "钱七"
+    },
+    {
+      "processName": "质检",
+      "workshop": "车间2",
+      "flag": 3,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "孙八"
+    },
+    {
+      "processName": "喷漆",
+      "workshop": "车间3",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "刘九"
+    },
+    {
+      "processName": "检修",
+      "workshop": "车间4",
+      "flag": 2,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "周十"
+    },
+    {
+      "processName": "组装",
+      "workshop": "车间1",
+      "flag": 3,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "张三"
+    },
+    {
+      "processName": "打磨",
+      "workshop": "车间2",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "李四"
+    },
+    {
+      "processName": "焊接",
+      "workshop": "车间3",
+      "flag": 2,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "王五"
+    },
+    {
+      "processName": "涂装",
+      "workshop": "车间4",
+      "flag": 3,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "赵六"
+    },
+    {
+      "processName": "包装",
+      "workshop": "车间1",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "钱七"
+    },
+    {
+      "processName": "质检",
+      "workshop": "车间2",
+      "flag": 2,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "孙八"
+    },
+    {
+      "processName": "喷漆",
+      "workshop": "车间3",
+      "flag": 3,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "刘九"
+    },
+    {
+      "processName": "检修",
+      "workshop": "车间4",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "周十"
+    },
+  {
+    "processName": "喷漆",
+    "workshop": "车间3",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "刘九"
+  },
+  {
+    "processName": "检修",
+    "workshop": "车间4",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "周十"
+  },
+  {
+    "processName": "组装",
+    "workshop": "车间1",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "李四"
+  },
+  {
+    "processName": "包装",
+    "workshop": "车间2",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "王五"
+  },
+  {
+    "processName": "焊接",
+    "workshop": "车间3",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "张三"
+  },
+  {
+    "processName": "装配",
+    "workshop": "车间1",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "陈二"
+  },
+  {
+    "processName": "打磨",
+    "workshop": "车间4",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "杨六"
+  },
+  {
+    "processName": "检验",
+    "workshop": "车间2",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "赵七"
+  },
+  {
+    "processName": "涂层",
+    "workshop": "车间3",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "吴八"
+  },
+  {
+    "processName": "质量控制",
+    "workshop": "车间1",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "孙九"
+  },
+  {
+    "processName": "喷涂",
+    "workshop": "车间4",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "刘十"
+  },
+  {
+    "processName": "装箱",
+    "workshop": "车间2",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "周一"
+  },
+  {
+    "processName": "组织调度",
+    "workshop": "车间3",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "李二"
+  },
+  {
+    "processName": "精确测量",
+    "workshop": "车间1",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "王三"
+  },
+  {
+    "processName": "抛光",
+    "workshop": "车间4",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "张四"
+  },
+  {
+    "processName": "品质检查",
+    "workshop": "车间2",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "赵五"
+  },
+  {
+    "processName": "喷塑",
+    "workshop": "车间3",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "吴六"
+  },
+  {
+    "processName": "装配调试",
+    "workshop": "车间1",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "孙七"
+  },
+  {
+    "processName": "清洗",
+    "workshop": "车间4",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "刘八"
+  },
+  {
+    "processName": "包装检验",
+    "workshop": "车间2",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "周九"
+  },
+  {
+    "processName": "组装检查",
+    "workshop": "车间3",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "李十"
+  },
+  {
+    "processName": "涂装调整",
+    "workshop": "车间1",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "王一"
+  },
+  {
+    "processName": "打磨抛光",
+    "workshop": "车间4",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "张二"
+  },
+  {
+    "processName": "品质审查",
+    "workshop": "车间2",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "赵三"
+  },
+  {
+    "processName": "打包",
+    "workshop": "车间3",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "吴四"
+  },
+  {
+    "processName": "总装",
+    "workshop": "车间1",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "孙五"
+  },
+  {
+    "processName": "喷漆调试",
+    "workshop": "车间4",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "刘六"
+  },
+  {
+    "processName": "组织物料",
+    "workshop": "车间2",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "周七"
+  },
+  {
+    "processName": "质量测试",
+    "workshop": "车间3",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "李八"
+  },
+  {
+    "processName": "喷漆检验",
+    "workshop": "车间1",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "王九"
+  },
+  {
+    "processName": "焊接调整",
+    "workshop": "车间4",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "张十"
+  },
+  {
+    "processName": "产品检查",
+    "workshop": "车间2",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "赵一"
+  },
+  {
+    "processName": "喷涂调试",
+    "workshop": "车间3",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "吴二"
+  },
+  {
+    "processName": "装配测试",
+    "workshop": "车间1",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "孙三"
+  },
+  {
+    "processName": "研磨",
+    "workshop": "车间4",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "刘四"
+  },
+  {
+    "processName": "装配调整",
+    "workshop": "车间2",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "周五"
+  }
+]
+

src/views/processManagement/equipmentRequisition/index.vue

+<template>
+  <div class="app-container">
+    <!-- TODO: 基础工序管理-->
+    <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
+      <el-form-item label="工序名称" prop="roleName">
+        <el-input
+          v-model="queryParams.processName"
+          placeholder="请输入工序名称"
+          clearable
+          :maxlength="30"
+          size="small"
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="生产车间" prop="roleKey">
+        <el-input
+          v-model="queryParams.workshop"
+          placeholder="请输入生产车间"
+          clearable
+          size="small"
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
+      </el-form-item>
+      <div style="float: right">
+        <el-form-item>
+          <el-button style="padding: 8px 7px;" :type="typePrimary" :size="smallSize" :icon="addIcon" @click="handleAdd">
+            {{ addName }}
+          </el-button>
+        </el-form-item>
+      </div>
+    </el-form>
+    <!-- TODO: 中间的分隔符号   -->
+    <div class="placeholder" />
+    <div class="main" style="padding:5px 10px">
+      <!-- TODO: 以下为基础工序管理列表 -->
+      <transition name="fade-transform" mode="out-in">
+        <component
+          :is="BaseTable"
+          :key="queryParams.pageNum"
+          :all-table-arguments="allTableArguments"
+          @handle-detail="handleDetail"
+          @handle-update="handleUpdate"
+          @handle-delete="handleDelete"
+        />
+      </transition>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- TODO: 添加或修改工序配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="名称" prop="processName">
+          <el-input v-model.trim="form.processName" show-word-limit :maxlength="30" placeholder="请输入工序名称" />
+        </el-form-item>
+        <el-form-item label="工厂车间" prop="workshop">
+          <el-input v-model.trim="form.workshop" show-word-limit :maxlength="30" placeholder="请输入工厂车间" />
+        </el-form-item>
+        <el-form-item label="操作人" prop="createBy">
+          <el-input v-model.trim="form.createBy" :maxlength="30" show-word-limit placeholder="请输入操作人" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- TODO: 单项详情信息表单配置 -->
+    <el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body>
+      <el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
+        <el-form-item label="名称：" prop="processName">
+          <el-input v-model.trim="singleDetails.processName" :readonly="isReadOnly" />
+        </el-form-item>
+        <el-form-item label="工厂车间：" prop="workshop">
+          <el-input v-model.trim="singleDetails.workshop" :readonly="isReadOnly" />
+        </el-form-item>
+        <el-form-item label="操作时间：" prop="createTime">
+          <!--
+            TODO: el-input 里不能调用全局日期过滤器  transformDateByFormat('YYYY-MM-DD HH:mm')
+            <el-input v-model.trim="singleDetails.createTime" :readonly="isReadOnly" />
+          -->
+           &nbsp;
+          {{ singleDetails.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}
+        </el-form-item>
+        <el-form-item label="操作人：" prop="createBy">
+          <el-input v-model.trim="singleDetails.createBy" :readonly="isReadOnly" />
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+// TODO: 引入封装好的通用table组件
+import BaseTable from '@/components/Table/BaseTable/index.vue'
+
+// TODO: 通过json的形式，优化导入模拟数据，并增加模拟数据的数量
+const simulateDataList = require('../basicProcessManagement/simulateDataList/simulateProcessList.json')
+export default {
+  name: 'Role',
+  components: { BaseTable },
+  data() {
+    return {
+      // TODO: 动态按钮类型
+      typeParent: 'text',
+      typePrimary: 'primary',
+      typeSuccess: 'success',
+      // TODO: 动态按钮名称
+      nameParent: '删除',
+      resetName: '重置',
+      addName: '新增',
+      updataName: '修改',
+      // TODO: 动态按钮尺寸
+      size: 'mini',
+      smallSize: 'small',
+      // TODO: 图标名
+      delicon: 'el-icon-delete',
+      addIcon: 'el-icon-plus',
+      exportIcon: 'el-icon-download',
+      resetIcon: '',
+      // TODO: 控制只读
+      isReadOnly: true,
+      // TODO: 遮罩层 (加载进度条)
+      loading: true,
+      // TODO: 分页的总条数
+      total: 0,
+
+      // TODO: 是否显示弹出层
+      open: false,
+      // TODO: 是否显示弹出层（数据详情的）
+      openDetails: false,
+
+      /* 以下为所有table的基本数据 */
+      // TODO: 模拟测试数据的数据库
+      simulateProcessList: [],
+      // TODO: 模拟数据中转表 (为了解决模拟数据的查询问题)
+      toList: [],
+      // TODO: 工序表格数据
+      processList: [],
+
+      // TODO: 表单初始化专用参数
+      formReset: {
+        processName: '',
+        workshop: '',
+        flag: '1',
+        createTime: new Date(),
+        updataTime: new Date(),
+        createBy: ''
+      },
+      // TODO: 弹出框层标题
+      title: '',
+      // TODO: 表单校验参数
+      rules: {
+        processName: [
+          { required: true, message: '请输入工序名称', trigger: 'blur' },
+          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
+        ],
+        workshop: [
+          { required: true, message: '请输入车间名称', trigger: 'blur' }
+        ],
+        createBy: [
+          { required: true, message: '请输入创建人姓名', trigger: 'blur' }
+        ]
+      },
+      // TODO: 新增+修改的 表单参数
+      form: {
+        processName: '',
+        workshop: '',
+        flag: '1',
+        remark: '',
+        createTime: new Date(),
+        updataTime: new Date(),
+        createBy: ''
+      },
+      // TODO: 表单里的单项详情的参数
+      singleDetails: {
+        processName: '',
+        workshop: '',
+        flag: '1',
+        createTime: new Date(),
+        updataTime: new Date(),
+        createBy: ''
+      },
+
+      // TODO: 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        processName: '',
+        workshop: ''
+      },
+
+      // TODO: 用来说明每一列的类型
+      columObj: {
+        // 选择框
+        selection: false,
+        // 选择框根据条件是否可选
+        selectable: (row, index) => {
+          if (row.switchs) {
+            return true
+          }
+        },
+        lazy: 'true',
+        // column列,columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
+        // prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
+        columnData: [{
+          text: true,
+          prop: 'processName',
+          label: '工序名称'
+        }, {
+          text: true,
+          prop: 'workshop',
+          label: '生产车间'
+        },
+        {
+          time: true,
+          prop: 'createTime',
+          label: '操作时间',
+          align: 'center'
+        },
+        {
+          text: true,
+          editRow: null,
+          prop: 'createBy',
+          label: '操作人',
+          sortable: false,
+          width: '210px'
+        },
+        // 如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
+        {
+          isOperation: true,
+          label: '操作',
+          width: '180px',
+          align: 'center',
+          sortable: false,
+          operation: [{
+            type: this.typeParent,
+            label: '详情',
+            icon: '',
+            color: '',
+            size: this.size,
+            buttonClick: this.handleDetail,
+            isShow: (row, $index) => {
+              return true
+            }
+          }, {
+            type: this.typeParent,
+            label: '修改',
+            icon: '',
+            color: '',
+            size: this.size,
+            buttonClick: this.handleUpdate,
+            isShow: (row, $index) => {
+              return true
+            }
+          }, {
+            type: this.typeParent,
+            label: '删除',
+            icon: '',
+            color: '',
+            size: this.size,
+            buttonClick: this.handleDelete,
+            isShow: (row, $index) => {
+              return true
+            }
+          }]
+        }
+
+        ]
+      }
+      //   DONE:
+
+    }
+  },
+  computed: {
+    BaseTable() {
+      return BaseTable
+    },
+
+    // TODO: 用来汇总Table组件所需要的全部数据并一次性传输给子组件
+    allTableArguments() {
+      return {
+        listName: '基础工序列表',
+        loading: this.loading,
+        processList: this.processList,
+        queryParams: this.queryParams,
+        columObj: this.columObj
+      }
+    }
+  },
+  /** TODO: 路由离开前存储筛选条件*/
+  beforeRouteLeave(to, from, next) {
+    this.$store.dispatch('searchSave/searchParamsSet', {
+      path: this.$route.path,
+      param: {
+        ...this.queryParams
+      }
+    })
+    next()
+  },
+  created() {
+    // TODO: 获取大量模拟数据！ require用于将 JSON 数据转换为 JavaScript 对象数组
+    // 测试用 console.log('this is json', simulateDataList)
+    this.simulateProcessList = simulateDataList
+    this.getList()
+  },
+  methods: {
+
+    // TODO:自定义分页索引，实现索引继承
+    nIndex(index) {
+      // TODO: 当前页数 - 1 * 每页数据条数 + 1
+      const page = this.queryParams.pageNum // TODO: 当前页码
+      const pageSize = this.queryParams.pageSize // TODO: 每页条数
+      return index + 1 + (page - 1) * pageSize
+    },
+    /** TODO: 查询列表 */
+    getList() {
+      this.loading = true
+      this.reset()
+      // TODO: 此处为模拟数据的，根据不同条件去查询的过滤方法，可以删除！
+      if (this.queryParams.workshop === '' && this.queryParams.processName !== '') {
+        for (const ps of this.simulateProcessList) {
+          if (ps.processName === this.queryParams.processName) {
+            this.toList.push(ps)
+          }
+        }
+      } else if (this.queryParams.workshop !== '' && this.queryParams.processName === '') {
+        for (const ps of this.simulateProcessList) {
+          if (ps.workshop === this.queryParams.workshop) {
+            this.toList.push(ps)
+          }
+        }
+      } else if (this.queryParams.workshop !== '' && this.queryParams.processName !== '') {
+        for (const ps of this.simulateProcessList) {
+          if (ps.workshop === this.queryParams.workshop && ps.processName === this.queryParams.processName) {
+            this.toList.push(ps)
+          }
+        }
+      } else {
+        // 测试用 console.log('this is simulate: ', this.simulateProcessList)
+        // TODO:
+        this.toList = [...this.simulateProcessList]
+      }
+      // DONE: 此上为模拟数据的，根据不同条件去查询的过滤方法，可以删除！
+
+      this.processList = [...this.toList]
+      this.total = this.toList.length
+      console.log(this.processList)
+      this.loading = false
+    },
+    // TODO: 表单的取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // TODO: 表单+数据列表+中转数据的重置
+    reset() {
+      // TODO: 将模拟数据的空对象赋值给表单对象，达成清空填写表单的效果
+      this.processList = null
+      this.toList = null
+      this.form = { ...this.formReset }
+    },
+    /** TODO: 查询按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+      console.log('this is queryParams', this.queryParams)
+    },
+    /** TODO: 重置按钮操作 */
+    resetQuery() {},
+    // 多选框选中数据
+    handleSelectionChange(selection) {},
+    /** TODO: 新增按钮操作 */
+    handleAdd() {
+      // TODO: 初始化新增对话框的状态
+      this.reset()
+      this.title = '添加工序'
+      this.open = !this.open
+    },
+    // TODO: 获取所选行详情信息操作
+    handleDetail(row, $index) {
+      this.singleDetails = this.formReset
+      this.singleDetails = row
+      this.title = '详情信息'
+      this.openDetails = !this.openDetails
+    },
+    /** TODO: 修改按钮操作 */
+    handleUpdate(row, $index) {
+      this.form = { ...this.formReset }
+      this.title = '修改工序'
+      const updProcessName = row.processName
+      for (const pd of this.simulateProcessList) {
+        if (pd.processName === updProcessName) {
+          this.form = pd
+        }
+      }
+      this.open = true
+    },
+    /** TODO: 修改或增加list列表里的数据 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          // TODO: 模拟测试数据的修改，可删除
+          for (const p of this.simulateProcessList) {
+            if (p.processName === this.form.processName) {
+              this.simulateProcessList = this.simulateProcessList.map(obj =>
+                obj.processName === this.form.processName ? this.form : obj
+              )
+              this.msgSuccess('修改成功')
+              this.reset()
+              this.getList()
+              this.open = !this.open
+              break
+            } else {
+              this.simulateProcessList.push(this.form)
+              this.msgSuccess('新增成功')
+              this.reset()
+              this.getList()
+              this.open = !this.open
+              return
+            }
+          }
+        }
+      })
+    },
+
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.app-container {
+  font-size: 18px;
+  padding: 0;
+
+  .placeholder {
+    height: 1.3vh;
+    background-color: #F4F4F4;
+    margin-bottom: 10px
+  }
+
+  .table-drop {
+    vertical-align: 2px;
+    line-height: 20px;
+    margin-left: 15px
+  }
+
+  .el-switch {
+    margin-left: 15px;
+  }
+}
+
+.el-divider--vertical {
+  height: 12em;
+  width: 4px;
+}
+
+//.ProcessTable{
+//  padding: 5px;
+//  margin: 0 auto;
+//  height: 495px;
+//}
+
+//TODO: readOnly里去删除el-input的边框样式
+.aboutSingleDetails {
+  .el-form-item {
+    .el-input > > > .el-input__inner {
+      -webkit-appearance: none;
+      background-color: #FFF;
+      background-image: none;
+      border-radius: 4px;
+      border: 0;
+      width: 100%;
+    }
+  }
+}
+</style>
+

src/views/processManagement/equipmentRequisition/simulateDataList/simulateProcessList.json

+[
+    {
+      "processName": "打磨",
+      "workshop": "车间1",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "张三"
+    },
+    {
+      "processName": "焊接",
+      "workshop": "车间2",
+      "flag": 2,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "李四"
+    },
+    {
+      "processName": "组装",
+      "workshop": "车间3",
+      "flag": 3,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "王五"
+    },
+    {
+      "processName": "涂装",
+      "workshop": "车间1",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "赵六"
+    },
+    {
+      "processName": "包装",
+      "workshop": "车间4",
+      "flag": 2,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "钱七"
+    },
+    {
+      "processName": "质检",
+      "workshop": "车间2",
+      "flag": 3,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "孙八"
+    },
+    {
+      "processName": "喷漆",
+      "workshop": "车间3",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "刘九"
+    },
+    {
+      "processName": "检修",
+      "workshop": "车间4",
+      "flag": 2,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "周十"
+    },
+    {
+      "processName": "组装",
+      "workshop": "车间1",
+      "flag": 3,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "张三"
+    },
+    {
+      "processName": "打磨",
+      "workshop": "车间2",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "李四"
+    },
+    {
+      "processName": "焊接",
+      "workshop": "车间3",
+      "flag": 2,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "王五"
+    },
+    {
+      "processName": "涂装",
+      "workshop": "车间4",
+      "flag": 3,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "赵六"
+    },
+    {
+      "processName": "包装",
+      "workshop": "车间1",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "钱七"
+    },
+    {
+      "processName": "质检",
+      "workshop": "车间2",
+      "flag": 2,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "孙八"
+    },
+    {
+      "processName": "喷漆",
+      "workshop": "车间3",
+      "flag": 3,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "刘九"
+    },
+    {
+      "processName": "检修",
+      "workshop": "车间4",
+      "flag": 1,
+      "createTime": "2023-07-25T12:00:00.000Z",
+      "updataTime": "2023-07-25T12:00:00.000Z",
+      "createBy": "周十"
+    },
+  {
+    "processName": "喷漆",
+    "workshop": "车间3",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "刘九"
+  },
+  {
+    "processName": "检修",
+    "workshop": "车间4",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "周十"
+  },
+  {
+    "processName": "组装",
+    "workshop": "车间1",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "李四"
+  },
+  {
+    "processName": "包装",
+    "workshop": "车间2",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "王五"
+  },
+  {
+    "processName": "焊接",
+    "workshop": "车间3",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "张三"
+  },
+  {
+    "processName": "装配",
+    "workshop": "车间1",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "陈二"
+  },
+  {
+    "processName": "打磨",
+    "workshop": "车间4",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "杨六"
+  },
+  {
+    "processName": "检验",
+    "workshop": "车间2",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "赵七"
+  },
+  {
+    "processName": "涂层",
+    "workshop": "车间3",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "吴八"
+  },
+  {
+    "processName": "质量控制",
+    "workshop": "车间1",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "孙九"
+  },
+  {
+    "processName": "喷涂",
+    "workshop": "车间4",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "刘十"
+  },
+  {
+    "processName": "装箱",
+    "workshop": "车间2",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "周一"
+  },
+  {
+    "processName": "组织调度",
+    "workshop": "车间3",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "李二"
+  },
+  {
+    "processName": "精确测量",
+    "workshop": "车间1",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "王三"
+  },
+  {
+    "processName": "抛光",
+    "workshop": "车间4",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "张四"
+  },
+  {
+    "processName": "品质检查",
+    "workshop": "车间2",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "赵五"
+  },
+  {
+    "processName": "喷塑",
+    "workshop": "车间3",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "吴六"
+  },
+  {
+    "processName": "装配调试",
+    "workshop": "车间1",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "孙七"
+  },
+  {
+    "processName": "清洗",
+    "workshop": "车间4",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "刘八"
+  },
+  {
+    "processName": "包装检验",
+    "workshop": "车间2",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "周九"
+  },
+  {
+    "processName": "组装检查",
+    "workshop": "车间3",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "李十"
+  },
+  {
+    "processName": "涂装调整",
+    "workshop": "车间1",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "王一"
+  },
+  {
+    "processName": "打磨抛光",
+    "workshop": "车间4",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "张二"
+  },
+  {
+    "processName": "品质审查",
+    "workshop": "车间2",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "赵三"
+  },
+  {
+    "processName": "打包",
+    "workshop": "车间3",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "吴四"
+  },
+  {
+    "processName": "总装",
+    "workshop": "车间1",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "孙五"
+  },
+  {
+    "processName": "喷漆调试",
+    "workshop": "车间4",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "刘六"
+  },
+  {
+    "processName": "组织物料",
+    "workshop": "车间2",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "周七"
+  },
+  {
+    "processName": "质量测试",
+    "workshop": "车间3",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "李八"
+  },
+  {
+    "processName": "喷漆检验",
+    "workshop": "车间1",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "王九"
+  },
+  {
+    "processName": "焊接调整",
+    "workshop": "车间4",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "张十"
+  },
+  {
+    "processName": "产品检查",
+    "workshop": "车间2",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "赵一"
+  },
+  {
+    "processName": "喷涂调试",
+    "workshop": "车间3",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "吴二"
+  },
+  {
+    "processName": "装配测试",
+    "workshop": "车间1",
+    "flag": 2,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "孙三"
+  },
+  {
+    "processName": "研磨",
+    "workshop": "车间4",
+    "flag": 3,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "刘四"
+  },
+  {
+    "processName": "装配调整",
+    "workshop": "车间2",
+    "flag": 1,
+    "createTime": "2023-07-25T12:00:00.000Z",
+    "updataTime": "2023-07-25T12:00:00.000Z",
+    "createBy": "周五"
+  }
+]
+

src/views/system/role/index.vue

@@ -267,8 +267,8 @@ import {
   listRole,
   updateRole
 } from '@/api/system/role'
-import { roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect } from '@/api/system/menu'
-import { roleDeptTreeselect, treeselect as deptTreeselect } from '@/api/system/dept'
+import {roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect} from '@/api/system/menu'
+import {roleDeptTreeselect, treeselect as deptTreeselect} from '@/api/system/dept'
 // import { getRolesByInsId } from '../../../api/businessManage/template'
 export default {
   name: 'Role',
@@ -340,8 +340,8 @@ export default {
       tOptions: [],
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
+        page: 1,
+        rows: 10,
         roleName: undefined,
         roleKey: undefined,
         flag: undefined