批记录管理列表功能完成、添加防抖节流工具函数、添加获取字典列表函数、修改seekPage公共组件和主数据项目统一

src/api/produce/workOrder.js

@@ -366,10 +366,11 @@ export async function fileReleaseAPI(data) {
 }
 
 // 获取工单内所有产品，产品编码和产品名称
-export async function getAllProductInWorkOrder(params) {
-  const res = await request.get(`/mes/workorder/getAllProductInWorkOrder`, {
-    params
-  });
+export async function getAllProductInWorkOrder(body) {
+  const res = await request.post(
+    `/mes/workorder/getProductInWorkOrder`,
+    body
+  );
   if (res.data.code == 0) {
     return res.data.data;
   }

src/api/workOrderList/index.js

@@ -174,3 +174,13 @@ export async function transferTasks(data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+// 批记录管理-生产工单分页列表，只需要展示单表少量几个字段
+export async function batchRecordPage(body) {
+  const res = await request.post('/mes/workorder/batchRecordPage', body);
+  console.log(res);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/components/common/seekPage.vue

@@ -14,17 +14,17 @@
                 clearable
                 v-model="defaultWhere[item.value]"
                 :placeholder="item.placeholder || '请输入内容'"
-                :style="{ width: item.width ? item.width + 'px' : '220px' }"
+                :style="{ width: item.width ? item.width + 'px' : '230px' }"
               />
             </div>
             <div v-if="item.type == 'select'">
               <el-select
                 clearable
-                :v-model="defaultWhere[item.value]"
-                :placeholder="item.placeholder || '请输入内容'"
+                v-model="defaultWhere[item.value]"
                 :multiple="item.multiple ? item.multiple : false"
                 :filterable="item.filterable ? item.filterable : true"
-                :style="{ width: item.width ? item.width + 'px' : '220px' }"
+                :placeholder="item.placeholder || '请选择'"
+                :style="{ width: item.width ? item.width + 'px' : '230px' }"
               >
                 <el-option
                   v-for="(op, i) in item.planList"
@@ -58,7 +58,7 @@
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 value-format="yyyy-MM-dd HH:mm:ss"
-                :style="{ width: item.width ? item.width + 'px' : '220px' }"
+                :style="{ width: item.width ? item.width + 'px' : '380px' }"
               >
               </el-date-picker>
             </div>
@@ -100,7 +100,7 @@
                           v-model="defaultWhere[item.value]"
                           :placeholder="item.placeholder || '请输入内容'"
                           :style="{
-                            width: item.width ? item.width + 'px' : '220px'
+                            width: item.width ? item.width + 'px' : '230px'
                           }"
                         />
                       </div>
@@ -110,9 +110,9 @@
                           v-model="defaultWhere[item.value]"
                           :multiple="item.multiple ? item.multiple : false"
                           :filterable="item.filterable ? item.filterable : true"
-                          :placeholder="item.placeholder || '请输入内容'"
+                          :placeholder="item.placeholder || '请选择'"
                           :style="{
-                            width: item.width ? item.width + 'px' : '220px'
+                            width: item.width ? item.width + 'px' : '230px'
                           }"
                           @visible-change="change"
                           @change="handerChange"
@@ -125,7 +125,23 @@
                           ></el-option>
                         </el-select>
                       </div>
-
+                      <div v-if="item.type == 'selectTree'">
+                        <ele-tree-select
+                          clearable
+                          ref="processTypeRef"
+                          filterable
+                          :data="item.planList"
+                          v-model="defaultWhere[item.value]"
+                          :childrenKey="item.childrenKey || 'children'"
+                          valueKey="id"
+                          labelKey="name"
+                          :placeholder="item.placeholder || '请选择'"
+                          default-expand-all
+                          :style="{
+                            width: item.width ? item.width + 'px' : '230px'
+                          }"
+                        />
+                      </div>
                       <div v-if="item.type == 'date'">
                         <el-date-picker
                           v-model="defaultWhere[item.value]"
@@ -136,7 +152,7 @@
                           end-placeholder="结束日期"
                           value-format="yyyy-MM-dd HH:mm:ss"
                           :style="{
-                            width: item.width ? item.width + 'px' : '220px'
+                            width: item.width ? item.width + 'px' : '230px'
                           }"
                         >
                         </el-date-picker>
@@ -168,17 +184,16 @@
 </template>
 
 <script>
-  let defaultWhere = {};
   export default {
     props: {
-      seekList: {
-        type: Array,
-        default: () => []
-      },
-      // 展示几个选择项，其余收起到更多
+      // 默认显示多少个搜索项
       maxLength: {
         type: Number,
         default: 3
+      },
+      seekList: {
+        type: Array,
+        default: () => []
       }
     },
 
@@ -186,10 +201,6 @@
     watch: {
       seekList: {
         handler(val) {
-          val.forEach((item) => {
-            defaultWhere[item.value] = null;
-          });
-
           this.$nextTick(() => {
             if (Array.isArray(val) && val.length <= this.maxLength) {
               this.seekListRow = val;
@@ -201,6 +212,18 @@
         },
         deep: true,
         immediate: true
+      },
+      defaultWhere: {
+        handler(val) {
+          if (this.keyValue) {
+            sessionStorage[this.keyValue] = JSON.stringify(val);
+            if (Object.keys(val).length === 0) {
+              sessionStorage.removeItem(this.keyValue);
+            }
+          }
+        },
+        deep: true
+        // immediate: true
       }
     },
 
@@ -220,7 +243,13 @@
       }
     },
 
-    created() {},
+    mounted() {
+      let whereObj = sessionStorage[this.keyValue];
+      if (whereObj) {
+        this.defaultWhere = JSON.parse(whereObj);
+        this.search();
+      }
+    },
     methods: {
       change(visible) {
         this.dropdownVisible = visible;
@@ -231,6 +260,18 @@
       },
 
       search() {
+        let valueAr = this.seekList.filter((item) => item.valueAr);
+        valueAr.forEach((item) => {
+          let data = this.defaultWhere[item.value];
+          if (data) {
+            this.defaultWhere[item.valueAr[0]] = data[0];
+            this.defaultWhere[item.valueAr[1]] = data[1];
+          } else {
+            delete this.defaultWhere[item.valueAr[0]];
+            delete this.defaultWhere[item.valueAr[1]];
+          }
+          delete this.defaultWhere[item.value];
+        });
         this.$emit('search', this.defaultWhere);
       },
       // 重置

src/enum/dict.js

@@ -28,7 +28,10 @@ export default {
   处置状态: 'dispose_status',
   紧急程度: 'urgent_type',
   记录规则类型: 'record_sheet',
-  检查有效期单位: 'validity_unit'
+  检查有效期单位: 'validity_unit',
+  事项类型: 'record_rules_item_type',
+  报工类型: 'record_rules_report_work_type',
+  执行方式: 'record_rules_execute_method'
 };
 export const numberList = ['date_method'];
 

src/mixins/dictMixins.js

@@ -8,7 +8,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['getDictValue', 'dict', 'getDict'])
+    ...mapGetters(['getDictValue', 'dict', 'getDict', 'getDictList'])
   },
   methods: {
     ...mapActions('dict', ['requestDict'])

src/store/getters.js

@@ -19,5 +19,16 @@ export default {
     });
 
     return obj && obj.dictValue;
+  },
+  // 根据字典enumName 获取字典列表 label value 格式
+  getDictList: (sate) => (enumName) => {
+    const dList = sate.dict[dictEnum[enumName]] || [];
+    return dList.map((i) => {
+      return {
+        ...i,
+        label: i.dictValue,
+        value: i.dictCode
+      };
+    });
   }
 };

src/utils/util.js

@@ -102,3 +102,46 @@ export function deepCopy(obj, hash = new WeakMap()) {
     return acc;
   }, result);
 }
+
+/**
+ * 防抖函数
+ * @param {Function} func - 需要执行的函数
+ * @param {number} wait - 延迟时间 (ms)
+ * @param {boolean} immediate - 是否立即执行
+ * @returns {Function}
+ */
+export function debounce(func, wait = 300, immediate = false) {
+  let timer = null;
+  return function (...args) {
+    const context = this;
+
+    if (timer) clearTimeout(timer);
+
+    if (immediate && !timer) {
+      func.apply(context, args);
+    }
+
+    timer = setTimeout(() => {
+      func.apply(context, args);
+      timer = null;
+    }, wait);
+  };
+}
+
+/**
+ * 节流函数
+ * @param {Function} func - 需要执行的函数
+ * @param {number} wait - 间隔时间 (ms)
+ * @returns {Function}
+ */
+export function throttle(func, wait = 300) {
+  let lastTime = 0;
+  return function (...args) {
+    const context = this;
+    const now = Date.now();
+    if (now - lastTime >= wait) {
+      func.apply(context, args);
+      lastTime = now;
+    }
+  };
+}

src/views/batchRecord/after.vue

@@ -1,27 +1,14 @@
 <template>
-  <div class="ele-body">
-    <el-card shadow="never" v-loading="loading"> 产后检查 </el-card>
-  </div>
+  <div class="ele-body"> <list :reportWorkType="3"></list> </div>
 </template>
 
 <script>
-  import dictMixins from '@/mixins/dictMixins';
-  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
+  import list from './components/list.vue';
 
   export default {
-    name: 'batchRecord',
-    mixins: [dictMixins, tableColumnsMixin],
+    components: { list },
     data() {
-      return {
-        loading: true
-      };
-    },
-    created() {},
-    methods: {
-      /* 表格数据源 */
-      datasource({ page, limit, where, order }) {
-        return pageUsers({ ...where, ...order, page, limit });
-      }
+      return {};
     }
   };
 </script>

src/views/batchRecord/before.vue

@@ -1,94 +1,14 @@
 <template>
-  <div class="ele-body">
-    <el-card shadow="never">
-      <seekPage :seekList="seekList" :maxLength="3" @search="search"></seekPage>
-
-      <ele-pro-table
-        ref="table"
-        row-key="id"
-        :columns="columns"
-        :datasource="datasource"
-      >
-      </ele-pro-table>
-    </el-card>
-  </div>
+  <div class="ele-body"> <list :reportWorkType="1"></list> </div>
 </template>
 
 <script>
-  import dictMixins from '@/mixins/dictMixins';
-  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
+  import list from './components/list.vue';
 
   export default {
-    name: 'batchRecord',
-    mixins: [dictMixins, tableColumnsMixin],
+    components: { list },
     data() {
-      return {
-        // 搜索字段
-        seekList: [
-          {
-            label: '记录编码:',
-            value: 'name',
-            type: 'input',
-            placeholder: '请输入'
-          },
-          {
-            label: '类型:',
-            value: 'classify',
-            type: 'select',
-            placeholder: '请选择',
-            planList: []
-          },
-          {
-            label: '产品名称:',
-            value: 'name',
-            type: 'input',
-            placeholder: '请输入'
-          },
-          {
-            label: '状态:',
-            value: 'classify',
-            type: 'select',
-            placeholder: '请选择',
-            planList: []
-          }
-        ],
-        // 表格字段
-        columns: [
-          {
-            width: 45,
-            type: 'index',
-            columnKey: 'index',
-            align: 'center'
-          },
-          {
-            prop: 'username',
-            label: '用户账号'
-          },
-          {
-            label: '用户名',
-            prop: 'nickname'
-          },
-          {
-            label: '手机号',
-            prop: 'phone'
-          },
-          {
-            label: '创建时间',
-            prop: 'createTime'
-          }
-        ]
-      };
-    },
-    created() {},
-    methods: {
-      // 刷新表格
-      reload(where) {
-        this.$refs.table.reload({ page: 1, where });
-      },
-      /* 表格数据源 */
-      datasource({ page, limit, where, order }) {
-        return pageUsers({ ...where, ...order, page, limit });
-      }
+      return {};
     }
   };
 </script>

src/views/batchRecord/components/list.vue

@@ -0,0 +1,276 @@
+<template>
+  <el-card shadow="never">
+    <seekPage :seekList="seekList" :maxLength="4" @search="reload"></seekPage>
+    <ele-pro-table
+      ref="table"
+      row-key="id"
+      :columns="columns"
+      :datasource="datasource"
+      cacheKey="batchRecordBefore"
+      :cache-key="'batchRecordTable' + 'rules'"
+      autoAmendPage
+    >
+      <!-- 操作列 -->
+      <!-- 表头工具栏 -->
+      <template v-slot:toolbar>
+        <el-button
+          size="small"
+          type="primary"
+          icon="el-icon-plus"
+          class="ele-btn-icon"
+          @click="open('add')"
+        >
+          新建
+        </el-button>
+      </template>
+      <template v-slot:action="{ row }">
+        <el-link
+          v-if="row.executeStatus == 0"
+          type="primary"
+          :underline="false"
+        >
+          编辑
+        </el-link>
+
+        <el-link
+          v-if="row.executeStatus != 0"
+          type="primary"
+          :underline="false"
+        >
+          详情
+        </el-link>
+        <el-link
+          v-if="row.executeStatus != 2"
+          type="primary"
+          :underline="false"
+        >
+          执行
+        </el-link>
+        <el-link
+          v-if="row.executeStatus == 2"
+          type="primary"
+          :underline="false"
+        >
+          处理
+        </el-link>
+        <el-popconfirm
+          v-if="row.executeStatus == 0"
+          title="确定要删除此用户吗？"
+          class="ele-action"
+        >
+          <template v-slot:reference>
+            <el-link type="danger" :underline="false"> 删除 </el-link>
+          </template>
+        </el-popconfirm>
+      </template>
+    </ele-pro-table>
+  </el-card>
+</template>
+
+<script>
+  import dictMixins from '@/mixins/dictMixins';
+  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
+  import { producetaskrulerecordPage } from '@/api/producetaskrulerecord/index';
+
+  export default {
+    name: 'batchRecordTable',
+    mixins: [dictMixins, tableColumnsMixin],
+    props: {
+      // 1-产前准备，2-过程监测，3-产后检查
+      reportWorkType: {
+        type: Number,
+        default: 1
+      }
+    },
+    data() {
+      return {
+        // 表格字段
+        columns: [
+          {
+            width: 50,
+            type: 'index',
+            columnKey: 'index',
+            label: '序号',
+            align: 'center'
+          },
+          {
+            label: '记录编码',
+            prop: 'code',
+            minWidth: 180
+          },
+          {
+            label: '产品编码',
+            prop: 'productCode',
+            minWidth: 180
+          },
+          {
+            label: '产品名称',
+            prop: 'productName',
+            minWidth: 180
+          },
+          {
+            label: '批次号',
+            prop: 'batchNo',
+            minWidth: 180
+          },
+          {
+            label: '生产工单号',
+            prop: 'workOrderCode',
+            minWidth: 180
+          },
+          {
+            label: '类型',
+            formatter: (row) => {
+              return this.getDictValue('事项类型', row.itemType + '');
+            }
+          },
+          {
+            label: '执行方式',
+            prop: 'executeMethod',
+            minWidth: 180,
+            formatter: (row) => {
+              return this.getDictValue('执行方式', row.executeMethod + '');
+            }
+          },
+          {
+            label: '事项名称',
+            prop: 'ruleName',
+            minWidth: 180
+          },
+          {
+            label: '状态',
+            minWidth: 180,
+            formatter: (row) => {
+              switch (row.executeStatus) {
+                case 0:
+                  return '未执行';
+                case 1:
+                  return '执行中';
+                default:
+                  return '已执行';
+              }
+            }
+          },
+          {
+            label: '审核状态',
+            prop: 'approvalStatus',
+            minWidth: 180,
+            formatter: (row) => {
+              switch (row.approvalStatus) {
+                case 0:
+                  return '未提交';
+                case 1:
+                  return '审核中';
+                case 2:
+                  return '审核通过';
+                case 3:
+                  return '审核不通过';
+                case 4:
+                  return '终止审核中';
+                case 5:
+                  return '终止审核通过';
+                case 7:
+                  return '流程废止';
+                default:
+                  return '';
+              }
+            }
+          },
+          {
+            label: '创建人',
+            prop: 'createUserName',
+            minWidth: 180
+          },
+          {
+            label: '创建时间',
+            prop: 'createTime',
+            minWidth: 180
+          },
+          {
+            label: '操作',
+            columnKey: 'action',
+            slot: 'action',
+            showOverflowTooltip: true,
+            minWidth: 180,
+            align: 'center',
+            fixed: 'right'
+          }
+        ]
+      };
+    },
+    computed: {
+      seekList() {
+        return [
+          {
+            label: '记录编码:',
+            value: 'code',
+            type: 'input',
+            placeholder: '请输入'
+          },
+          {
+            label: '类型:',
+            value: 'itemType',
+            type: 'select',
+            placeholder: '请选择',
+            planList: this.getDictList('事项类型')
+          },
+          {
+            label: '产品名称:',
+            value: 'productName',
+            type: 'input',
+            placeholder: '请输入'
+          },
+          {
+            label: '状态:',
+            value: 'executeStatus',
+            type: 'select',
+            placeholder: '请选择',
+            planList: [
+              {
+                label: '未执行',
+                value: 0
+              },
+              {
+                label: '执行中',
+                value: 1
+              },
+              {
+                label: '已执行',
+                value: 2
+              }
+            ]
+          }
+        ];
+      }
+    },
+    created() {
+      this.requestDict('事项类型');
+      this.requestDict('报工类型');
+      this.requestDict('执行方式');
+    },
+    methods: {
+      // 刷新表格
+      reload(where) {
+        this.$nextTick(() => {
+          this.$refs.table.reload({
+            page: 1,
+            where,
+            reportWorkType: this.reportWorkType
+          });
+        });
+      },
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return producetaskrulerecordPage({
+          ...where,
+          ...order,
+          page,
+          limit,
+          reportWorkType: this.reportWorkType
+        });
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped></style>

src/views/batchRecord/index.vue

@@ -12,22 +12,34 @@
 
             <el-input
               placeholder="搜索"
-              suffix-icon="el-icon-search"
-              v-model="queryParam"
-              @change="debounce(getAllProductInWorkOrder(), 500)"
+              :suffix-icon="productBody.param ? '' : 'el-icon-search'"
+              v-model="productBody.param"
+              @input="handleInput"
+              clearable
             ></el-input>
 
             <div class="list-box">
-              <div class="list-item" v-for="i in 10" :key="i">
-                产品{{ i }}
+              <div
+                class="list-item"
+                v-for="i in productList"
+                :key="i.productName + i.productCode"
+                :class="{ active: i.productName == tableQuery.param }"
+                @click="changeProductName(i)"
+              >
+                {{ i.productName }}
               </div>
             </div>
           </div>
           <div class="left-item">
             <div class="title">批次号</div>
-            <div class="list-box">
-              <div class="list-item" v-for="i in 10" :key="i">
-                产品{{ i }}
+            <div v-if="batchNos.length > 0" class="list-box">
+              <div class="list-item" v-for="i in batchNos" :key="i">
+                <div> {{ i ? i : '暂无批次号' }}</div>
+              </div>
+            </div>
+            <div v-else class="list-box">
+              <div class="list-item" style="text-align: center; color: #888">
+                请先选择产品
               </div>
             </div>
           </div>
@@ -39,6 +51,7 @@
                 v-for="i in types"
                 :key="i.name"
                 :class="{ active: activeType == i.name }"
+                @click="changeActiveType(i)"
               >
                 {{ i.name }}
               </div>
@@ -51,9 +64,11 @@
             <seek-page :seekList="seekList" @search="search"></seek-page>
             <ele-pro-table
               ref="table"
-              row-key="id"
+              row-key="workOrderId"
               :columns="columns"
               :datasource="datasource"
+              cache-key="batch-record-list"
+              autoAmendPage
             >
             </ele-pro-table>
           </div>
@@ -66,9 +81,10 @@
 <script>
   import dictMixins from '@/mixins/dictMixins';
   import tableColumnsMixin from '@/mixins/tableColumnsMixin';
-  import { producetaskrulerecordPage } from '@/api/producetaskrulerecord/index';
   import seekPage from '@/components/common/seekPage.vue';
   import { getAllProductInWorkOrder } from '@/api/produce/workOrder';
+  import { debounce } from '@/utils/util.js';
+  import { batchRecordPage } from '@/api/workOrderList';
 
   export default {
     components: { seekPage },
@@ -76,52 +92,32 @@
     mixins: [dictMixins, tableColumnsMixin],
     data() {
       return {
-        seekList: [
-          {
-            label: '单据编码：',
-            value: 'keyWord',
-            type: 'input',
-            placeholder: ''
-          },
-          {
-            label: '单据名称：',
-            value: 'name',
-            type: 'input',
-            placeholder: ''
-          }
-        ],
         columns: [
           {
-            width: 45,
+            width: 50,
             type: 'index',
             columnKey: 'index',
-            align: 'center'
+            align: 'center',
+            label: '序号'
+          },
+          {
+            prop: 'workOrderName',
+            label: '单据名称'
+          },
+          {
+            prop: '',
+            label: '单据编码'
+          },
+          {
+            prop: 'status',
+            label: '单据状态'
+          },
+          {
+            prop: 'approveStatus',
+            label: '审核状态'
           }
-          // {
-          //   prop: 'username',
-          //   label: '批记录类型'
-          // },
-          // {
-          //   prop: '',
-          //   label: '单据名称'
-          // },
-          // {
-          //   prop: '',
-          //   label: '单据编码'
-          // },
-          // {
-          //   prop: '',
-          //   label: '单据状态'
-          // },
-          // {
-          //   prop: '',
-          //   label: '审核状态'
-          // }
         ],
         types: [
-          {
-            name: '全部'
-          },
           {
             name: '生产工单'
           },
@@ -150,28 +146,93 @@
             name: '工艺文件'
           }
         ],
-        activeType: '全部',
+        activeType: '生产工单',
         // 产品搜索条件
-        queryParam: ''
+        productBody: {
+          param: '',
+          pageNum: 1,
+          size: 999
+        },
+        // 批次号
+        batchNos: [],
+        // 产品列表
+        productList: [],
+        tableQuery: {
+          param: '',
+          batchNo: '',
+          type: ''
+        }
       };
     },
+    computed: {
+      seekList() {
+        return [
+          {
+            label: '单据编码：',
+            value: 'workOrderCode',
+            type: 'input',
+            placeholder: '请输入'
+          },
+          {
+            label: '单据名称：',
+            value: 'workOrderName',
+            type: 'input',
+            placeholder: '请输入'
+          }
+        ];
+      },
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return () => {
+          const body = { ...where, ...order, page, limit, ...this.tableQuery };
+
+          // 根据类型查询不同的api
+          switch (this.activeType) {
+            case '生产工单':
+              return batchRecordPage(body);
+
+            default:
+              return [];
+          }
+        };
+      }
+    },
     created() {
-      // this.getAllProductInWorkOrder();
+      this.getAllProductInWorkOrder();
     },
     methods: {
-      /* 表格数据源 */
-      datasource({ page, limit, where, order }) {
-        // return pageUsers({ ...where, ...order, page, limit });
-        return [];
+      reload(where) {
+        this.$refs.table.reload({
+          where,
+          ...this.tableQuery
+        });
       },
+      // 刷新表格数据
       search(where) {
-        this.$refs.table.reload(where);
+        this.reload(where);
       },
       // 获取产品和批次号
       async getAllProductInWorkOrder() {
-        const data = await getAllProductInWorkOrder({
-          queryParam: this.queryParam
-        });
+        const { list } = await getAllProductInWorkOrder(this.productBody);
+        this.productList = list;
+        console.log('this.productList', this.productList);
+      },
+      // 搜索产品
+      handleInput: debounce(function (e) {
+        this.getAllProductInWorkOrder();
+      }, 500),
+      // 选择产品
+      changeProductName(i) {
+        this.tableQuery.param = i.productName;
+        // 设置批次号
+        this.batchNos = i.batchNos;
+        // 刷新表格
+        this.reload();
+      },
+      // 选择批记录类型
+      changeActiveType(i) {
+        this.activeType = i.name;
+        this.reload();
       }
     }
   };
@@ -197,12 +258,16 @@
 
       .list-box {
         margin-top: 10px;
+        max-height: 80vh;
+        overflow-y: auto;
+        box-sizing: border-box;
 
         .list-item {
           padding: 15px 10px;
           border-bottom: 1px solid #ededed;
           font-size: 14px;
           cursor: pointer;
+          word-break: break-all;
         }
 
         .active {

src/views/batchRecord/process.vue

@@ -1,23 +1,15 @@
 <template>
-  <div class="ele-body">
-    <el-card shadow="never" v-loading="loading"> 过程监测 </el-card>
-  </div>
+  <div class="ele-body"> <list :reportWorkType="2"></list> </div>
 </template>
 
 <script>
-  import dictMixins from '@/mixins/dictMixins';
-  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
+  import list from './components/list.vue';
 
   export default {
-    name: 'batchRecord',
-    mixins: [dictMixins, tableColumnsMixin],
+    components: { list },
     data() {
-      return {
-        loading: true
-      };
-    },
-    created() {},
-    methods: {}
+      return {};
+    }
   };
 </script>