完善了基础工序管理里模拟数据的增删改查功能

src/views/processManagement/basicProcessManagement/index.vue

@@ -45,12 +45,7 @@
       </el-form-item>
       <div style="float: right">
         <el-form-item>
-          <coolbutton style="padding: 8px 7px;" :type="typePrimary" :name="addName" :size="smallSize" :icon="addIcon" :haspermi="addHaspermi" @btn-click="handleAdd" />
-          <!-- TODO:导入 -->
-          <coolbutton style="padding: 8px 7px;" :type="typeSuccess" :name="channelName" :size="smallSize" :icon="exportIcon" :haspermi="exportHaspermi" @btn-click="handleExport" />
-          <!-- 导出 -->
-          <coolbutton style="padding: 8px 7px;" :type="typeSuccess" :name="exportName" :size="smallSize" :icon="exportIcon" :haspermi="exportHaspermi" @btn-click="handleExport" />
-
+          <coolbutton style="padding: 8px 7px;" :type="typePrimary" :name="addName" :size="smallSize" :icon="addIcon" @btn-click="handleAdd" />
         </el-form-item>
       </div>
     </el-form>
@@ -101,7 +96,9 @@
         </el-table-column>
         <el-table-column label="操作" class-name="small-padding fixed-width" width="240px">
           <template slot-scope="scope">
-            <coolbutton style="color: #49cec9" :type="typeParent" :name="updataName" :size="size" :haspermi="updateHaspermi" @btn-click="handleUpdate(scope.row)" />
+            <el-button style="color: #49cec9" :type="typeParent" :size="size" @click="handleUpdate(scope.row)">
+              {{ updataName }}
+            </el-button>
             <el-button
               size="mini"
               type="text"
@@ -122,10 +119,10 @@
     <!-- 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="roleName">
+        <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="roleKey">
+        <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="状态">
@@ -138,7 +135,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancel">取 消</el-button>
-        <el-button type="primary" @click="submitForm(form)">确 定</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
       </div>
     </el-dialog>
 
@@ -146,6 +143,7 @@
 </template>
 
 <script>
+// TODO: 导入外部已经封装好的button组件
 import Coolbutton from '@/components/coolbutton'
 export default {
   name: 'Role',
@@ -158,8 +156,6 @@ export default {
       nameParent: '删除',
       resetName: '重置',
       addName: '新增',
-      channelName: '导入',
-      exportName: '导出',
       updataName: '修改',
       size: 'mini',
       smallSize: 'small',
@@ -235,33 +231,42 @@ export default {
         workshop: undefined,
         flag: undefined
       },
-      formReset: {
+      defaultProps: {},
+      // 表单参数
+      form: {
         processName: '',
         workshop: '',
-        flag: 0,
+        flag: '1',
+        remark: '',
         createTime: new Date(),
         updataTime: new Date(),
         createBy: ''
       },
-      // 表单参数
-      form: {
+      formReset: {
         processName: '',
         workshop: '',
-        flag: 0,
+        flag: '1',
         createTime: new Date(),
         updataTime: new Date(),
         createBy: ''
       },
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-      // 表单校验
-      rules: {},
-      deptOptions: [],
-
       // 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: [{ processName: '打磨', workshop: '车间1', flag: 1, createTime: new Date(), updataTime: new Date(), createBy: '张三' }, { processName: '焊接', workshop: '车间2', flag: 2, createTime: new Date(), updataTime: new Date(), createBy: '李四' }],
+
+      // 表单校验
+      rules: {
+        processName: [
+          { required: true, message: '请输入工序名称', trigger: 'blur' },
+          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
+        ],
+        workshop: [
+          { required: true, message: '请输入车间名称', trigger: 'blur' }
+        ],
+        flag: [
+          { required: true, trigger: 'blur' }
+        ]
+      },
+      deptOptions: []
     }
   },
   /** 路由离开前存储筛选条件*/
@@ -291,7 +296,21 @@ export default {
       this.loading = false
     },
     // 角色状态修改
-    handleStatusChange(row) {},
+    handleStatusChange(row) {
+      const text = row.flag === '1' ? '启用' : '停用'
+      this.$confirm('是否确认操作?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          message: text + '成功',
+          type: 'success'
+        })
+      }).catch(function() {
+        row.flag = row.flag === '0' ? '1' : '0'
+      })
+    },
     // 取消按钮
     cancel() {
       this.open = false
@@ -299,6 +318,7 @@ export default {
     },
     // 表单重置
     reset() {
+      // TODO: 将模拟数据的空对象赋值给表单对象，达成清空填写表单的效果
       this.form = this.formReset
     },
     /** TODO: 查询按钮操作 */
@@ -312,25 +332,88 @@ export default {
     handleSelectionChange(selection) {},
     /** 新增按钮操作 */
     handleAdd() {
+      // TODO: 初始化新增对话框的状态
+      this.form = this.formReset
+      this.title = '添加工序'
       this.open = !this.open
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {},
-    /** 提交按钮 */
-    submitForm: function(form) {
-      if (form !== undefined && form !== null) {
-        this.roleList.push(form)
-        this.getList()
-        this.reset()
-        this.open = !this.open
+    handleUpdate(row) {
+      this.reset()
+      this.title = '修改工序'
+      const updProcessName = row.processName
+      for (const pd of this.simulateProcessList) {
+        if (pd.processName === updProcessName) {
+          this.form = pd
+        }
       }
+      this.open = true
     },
-    /** 提交按钮 */
-    submitDataScope: function() {},
-    /** 删除按钮操作 */
-    handleDelete(row) {},
-    /** 导出按钮操作 */
-    handleExport() {}
+    /** 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.getList()
+              this.reset()
+              this.open = !this.open
+              return
+            } else {
+              if (this.form !== undefined && this.form !== null) {
+                this.simulateProcessList.push(this.form)
+                this.msgSuccess('新增成功')
+                this.getList()
+                this.reset()
+                this.open = !this.open
+                return
+              }
+            }
+          }
+        }
+      })
+    },
+
+    /** 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) {
+      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: '已取消删除'
+        })
+      })
+    }
+
   }
 }
 </script>