格式优化

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

src/views/processManagement/basicProcessManagement/componets/processTable.vue

+<template>
+  <div>
+    <el-table
+      v-loading="loading"
+      class="processList"
+      border
+      :data="processList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
+      height="495"
+      style="width: 100%"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="index" label="序号" width="50" :index="nIndex" />
+      <el-table-column label="工序名称" prop="processName" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{ scope.row.processName || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="生产车间" prop="workshop">
+        <template slot-scope="scope">
+          {{ scope.row.workshop || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createTime">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作人" prop="createBy" width="210px">
+        <template slot-scope="scope">
+          {{ scope.row.createBy || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        class-name="small-padding fixed-width"
+        width="180px"
+      >
+        <template slot-scope="scope">
+          <div class="processListBtns">
+            <el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
+              详情
+            </el-button>
+            <el-button :type="typeParent" :size="size" @click="handleUpdate(scope.row)">
+              修改
+            </el-button>
+            <el-button :type="typeParent" :size="size" @click="handleDelete(scope.row)">
+              删除
+            </el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProcessTable',
+  props: {
+    processList: {
+      required: true,
+      type: Array,
+      default: null
+    },
+    queryParams: {
+      required: true,
+      type: Object,
+      default: null
+    },
+    nIndex: {
+      required: true,
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      typeParent: 'text',
+      size: 'mini'
+
+    }
+  },
+  methods: {
+    handleDetail(row) {
+      this.$emit('handle-detail', row)
+    },
+    handleUpdate(row) {
+      this.$emit('handle-update', row)
+    },
+    handleDelete(row) {
+      this.$emit('handle-delete', row)
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+//TODO: 这里是控制内容列表的样式
+.processListBtns {
+  .el-button {
+    margin: 0 7px;
+  }
+}
+
+// TODO: 滚动条样式  此为设置背景颜色
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+  width: 0;
+  background-color: white;
+}
+
+// 设置宽度
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 3px;
+  opacity: 0.5;
+}
+// 此为设置滚动条内部颜色
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  border-radius: 15px;
+  background-color: #b3b3b3;
+}
+</style>

src/views/processManagement/basicProcessManagement/index.vue

@@ -37,69 +37,37 @@
     <div class="placeholder" />
 
     <!-- TODO: 中间的分隔符号   -->
-    <div style="padding:5px 10px">
+    <div class="main" style="padding:5px 10px">
 
       <!-- TODO: 以下为基础工序管理列表 -->
-      <div class="mb12 font-small-bold">基础工序管理列表</div>
-      <el-table
-        v-loading="loading"
-        class="processList"
-        border
-        :data="processList"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="index" label="序号" width="50" />
-        <el-table-column label="工序名称" prop="processName" :show-overflow-tooltip="true">
-          <template slot-scope="scope">
-            {{ scope.row.processName || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="生产车间" prop="workshop">
-          <template slot-scope="scope">
-            {{ scope.row.workshop || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createTime">
-          <template slot-scope="scope">
-            <span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作人" prop="createBy">
-          <template slot-scope="scope">
-            {{ scope.row.createBy || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
-          class-name="small-padding fixed-width"
-          width="180px"
-        >
-          <template slot-scope="scope">
-            <div class="processListBtns">
-              <el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
-                详情
-              </el-button>
-              <el-button :type="typeParent" :size="size" @click="handleUpdate(scope.row)">
-                {{ updataName }}
-              </el-button>
-              <el-button
-                size="mini"
-                type="text"
-                @click="handleDelete(scope.row)"
-              >删除
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="mb12 font-small-bold">基础工序列表</div>
+
+      <div class="ProcessTable">
+        <transition name="fade-transform" mode="out-in">
+          <component
+            :is="ProcessTable"
+            :key="queryParams.pageNum"
+            :query-params="queryParams"
+            :process-list="processList"
+            :n-index="nIndex"
+            @handle-detail="handleDetail"
+            @handle-update="handleUpdate"
+            @handle-delete="handleDelete"
+          />
+        </transition>
+      </div>
+      <div class="Pagination">
+        <pagination
+          v-show="total>0"
+          :key="queryParams.pageNum"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+
     </div>
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- TODO: 添加或修改工序配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -134,6 +102,7 @@
             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">
@@ -148,10 +117,14 @@
 <script>
 // TODO: 导入外部已经封装好的button组件
 import Coolbutton from '@/components/coolbutton'
+// TODO: 引入封装好的通用table组件
+import ProcessTable from '@/views/processManagement/basicProcessManagement/componets/processTable.vue'
 
+// TODO: 通过json的形式，优化导入模拟数据，并增加模拟数据的数量
+const simulateDataList = require('../basicProcessManagement/simulateDataList/simulateProcessList.json')
 export default {
   name: 'Role',
-  components: { Coolbutton },
+  components: { Coolbutton, ProcessTable },
   data() {
     return {
       typeParent: 'text',
@@ -178,7 +151,7 @@ export default {
       // 总条数
       total: 0,
       // TODO: 工序表格数据
-      processList: [],
+      processList: null,
       // TODO: 模拟数据中转表 (为了解决模拟数据的查询问题)
       toList: [],
       // 弹出层标题
@@ -232,24 +205,7 @@ export default {
         createBy: ''
       },
       // TODO: 模拟测试数据
-      simulateProcessList: [
-        {
-          processName: '打磨',
-          workshop: '车间1',
-          flag: 1,
-          createTime: new Date(),
-          updataTime: new Date(),
-          createBy: '张三'
-        },
-        {
-          processName: '焊接',
-          workshop: '车间2',
-          flag: 2,
-          createTime: new Date(),
-          updataTime: new Date(),
-          createBy: '李四'
-        }
-      ],
+      simulateProcessList: [],
 
       // TODO: 表单校验
       rules: {
@@ -267,6 +223,11 @@ export default {
       deptOptions: []
     }
   },
+  computed: {
+    ProcessTable() {
+      return ProcessTable
+    }
+  },
   /** 路由离开前存储筛选条件*/
   beforeRouteLeave(to, from, next) {
     this.$store.dispatch('searchSave/searchParamsSet', {
@@ -283,9 +244,21 @@ export default {
       const param = JSON.parse(searchParams[path]) // 保留着的查询条件
       this.queryParams = { ...param }
     }
+    // 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
@@ -310,11 +283,13 @@ export default {
           }
         }
       } else {
-        this.toList = this.simulateProcessList
+        // 测试用 console.log('this is simulate: ', this.simulateProcessList)
+        // TODO:
+        this.toList = [...this.simulateProcessList]
       }
       // DONE: 此上为模拟数据的，根据不同条件去查询的过滤方法，可以删除！
 
-      this.processList = this.toList
+      this.processList = [...this.toList]
       this.total = this.toList.length
       console.log(this.processList)
       this.loading = false
@@ -327,7 +302,8 @@ export default {
     // 表单重置
     reset() {
       // TODO: 将模拟数据的空对象赋值给表单对象，达成清空填写表单的效果
-      this.toList = []
+      this.processList = null
+      this.toList = null
       this.form = {
         processName: '',
         workshop: '',
@@ -469,11 +445,10 @@ export default {
   width: 4px;
 }
 
-//TODO: 这里是控制内容列表的样式
-.processListBtns {
-  .el-button {
-    margin: 0 7px;
-  }
+.ProcessTable{
+  padding: 5px;
+  margin: 0 auto;
+  height: 495px;
 }
 
 //TODO: readOnly里去删除el-input的边框样式
@@ -488,8 +463,6 @@ export default {
       width: 100%;
     }
   }
-
 }
-
 </style>