refactor() 重构引擎维护页面

src/views/data/rule/engineMaintenance/index.vue

@@ -2,31 +2,51 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="规则名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入规则名称" clearable @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入规则名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="规则类型" prop="type">
         <el-select v-model="queryParams.type" placeholder="请选择规则类型" clearable>
-          <el-option :key="1" label="规则模板" :value="1"/>
-          <el-option :key="2" label="自定义模板" :value="2"/>
+          <el-option
+            v-for="dict in dict.type.type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="规则作用域" prop="scope">
         <el-select v-model="queryParams.scope" placeholder="请选择规则作用域" clearable>
-          <el-option :key="1" label="数据字段" :value="1"/>
-          <el-option :key="2" label="数据集" :value="2"/>
-          <el-option :key="3" label="记录" :value="3"/>
+          <el-option
+            v-for="dict in dict.type.scope"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="是否激活" prop="activatedOrNot">
         <el-select v-model="queryParams.activatedOrNot" placeholder="请选择是否激活" clearable>
-          <el-option key="Y" label="激活" value="Y"/>
-          <el-option key="N" label="未激活" value="N"/>
+          <el-option
+            v-for="dict in dict.type.activated_or_not"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="规则状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择规则状态" clearable>
-          <el-option key="Y" label="正常" value="Y"/>
-          <el-option key="N" label="停用" value="N"/>
+          <el-option
+            v-for="dict in dict.type.status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -43,7 +63,7 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-          v-hasPermi="['data:engine:add']"
+          v-hasPermi="['rule:engine:add']"
         >新增
         </el-button>
       </el-col>
@@ -55,7 +75,7 @@
           size="mini"
           :disabled="single"
           @click="handleUpdate"
-          v-hasPermi="['data:engine:edit']"
+          v-hasPermi="['rule:engine:edit']"
         >修改
         </el-button>
       </el-col>
@@ -67,7 +87,7 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-          v-hasPermi="['data:engine:remove']"
+          v-hasPermi="['rule:engine:remove']"
         >删除
         </el-button>
       </el-col>
@@ -78,7 +98,7 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-          v-hasPermi="['data:engine:export']"
+          v-hasPermi="['rule:engine:export']"
         >导出
         </el-button>
       </el-col>
@@ -87,26 +107,27 @@
 
     <el-table v-loading="loading" :data="engineList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="ID" align="center" prop="id"/>
       <el-table-column label="规则名称" align="center" prop="name"/>
       <el-table-column label="规则类型" align="center" prop="type">
         <template slot-scope="scope">
-          <el-tag type="success">{{ scope.row.type }}</el-tag>
+          <dict-tag :options="dict.type.type" :value="scope.row.type"/>
         </template>
       </el-table-column>
       <el-table-column label="规则作用域" align="center" prop="scope">
         <template slot-scope="scope">
-          <el-tag>{{ scope.row.scope }}</el-tag>
+          <dict-tag :options="dict.type.scope" :value="scope.row.scope"/>
         </template>
       </el-table-column>
       <el-table-column label="引擎编码" align="center" prop="encoding"/>
       <el-table-column label="是否激活" align="center" prop="activatedOrNot">
         <template slot-scope="scope">
-          <el-tag type="danger">{{ scope.row.activatedOrNot }}</el-tag>
+          <dict-tag :options="dict.type.activated_or_not" :value="scope.row.activatedOrNot"/>
         </template>
       </el-table-column>
       <el-table-column label="规则状态" align="center" prop="status">
         <template slot-scope="scope">
-          <el-tag>{{ scope.row.status }}</el-tag>
+          <dict-tag :options="dict.type.status" :value="scope.row.status"/>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -138,7 +159,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['data:engine:edit']"
+            v-hasPermi="['rule:engine:edit']"
           >修改
           </el-button>
           <el-button
@@ -146,7 +167,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['data:engine:remove']"
+            v-hasPermi="['rule:engine:remove']"
           >删除
           </el-button>
         </template>
@@ -162,69 +183,63 @@
     />
 
     <!-- 添加或修改引擎维护对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="75%" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-row>
-          <el-col :span="12">
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="规则名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入规则名称"/>
         </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="规则编码" prop="code">
-              <el-input v-model="form.encoding" placeholder="请输入规则编码"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
         <el-form-item label="规则类型" prop="type">
-              <el-select v-model="form.type" placeholder="请选择规则类型" clearable>
-                <el-option :key="1" label="规则模板" value="1"/>
-                <el-option :key="2" label="自定义模板" value="2"/>
+          <el-select v-model="form.type" placeholder="请选择规则类型">
+            <el-option
+              v-for="dict in dict.type.type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
           </el-select>
         </el-form-item>
-          </el-col>
-          <el-col :span="12">
         <el-form-item label="规则作用域" prop="scope">
-              <el-select v-model="form.scope" placeholder="请选择规则作用域" clearable>
-                <el-option :key="1" label="数据字段" :value="1"/>
-                <el-option :key="2" label="数据集" :value="2"/>
-                <el-option :key="3" label="记录" :value="3"/>
+          <el-select v-model="form.scope" placeholder="请选择规则作用域">
+            <el-option
+              v-for="dict in dict.type.scope"
+              :key="dict.value"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            ></el-option>
           </el-select>
         </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
+        <el-form-item label="引擎编码" prop="encoding">
+          <el-input v-model="form.encoding" placeholder="请输入引擎编码"/>
+        </el-form-item>
         <el-form-item label="是否激活" prop="activatedOrNot">
-              <el-select v-model="form.activatedOrNot" placeholder="请选择是否激活" clearable>
-                <el-option key="Y" label="激活" value="Y"/>
-                <el-option key="N" label="未激活" value="N"/>
-              </el-select>
+          <el-radio-group v-model="form.activatedOrNot">
+            <el-radio
+              v-for="dict in dict.type.activated_or_not"
+              :key="dict.value"
+              :label="dict.value"
+            >{{ dict.label }}
+            </el-radio>
+          </el-radio-group>
         </el-form-item>
-          </el-col>
-          <el-col :span="12">
         <el-form-item label="规则状态" prop="status">
-              <el-select v-model="form.status" placeholder="请选择规则状态" clearable>
-                <el-option key="Y" label="正常" value="Y"/>
-                <el-option key="N" label="停用" value="N"/>
+          <el-select v-model="form.status" placeholder="请选择规则状态">
+            <el-option
+              v-for="dict in dict.type.status"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
           </el-select>
         </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
         <el-form-item label="描述" prop="description">
           <el-input v-model="form.description" type="textarea" placeholder="请输入内容"/>
         </el-form-item>
-          </el-col>
-          <el-col :span="24">
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注"/>
         </el-form-item>
-          </el-col>
-        </el-row>
+        <el-form-item label="编辑代码文本" prop="codeText">
+          <el-input v-model="form.codeText" placeholder="请输入编辑代码文本"/>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -235,10 +250,19 @@
 </template>
 
 <script>
-import { listEngine, getEngine, delEngine, addEngine, updateEngine, initializeRuleEngine, testMethod } from "@/api/data/engine";
+import {
+  listEngine,
+  getEngine,
+  delEngine,
+  addEngine,
+  updateEngine,
+  initializeRuleEngine,
+  testMethod
+} from "@/api/data/engine";
 
 export default {
   name: "Engine",
+  dicts: ['activated_or_not', 'status', 'scope', 'type'],
   data() {
     return {
       // 遮罩层
@@ -267,6 +291,7 @@ export default {
         type: null,
         scope: null,
         activatedOrNot: null,
+        status: null,
       },
       // 表单参数
       form: {},
@@ -288,35 +313,12 @@ export default {
       })
     },
     initializeRuleEngine(row) {
-      if (row.type === "规则模板") {
-        row.type = 1
-      } else if (item.type === "自定义模板") {
-        row.type = 2
-      }
-      if (row.scope === "数据字段") {
-        row.scope = 1
-      } else if (row.scope === '数据集') {
-        row.scope = 2
-      } else if (row.scope === '记录') {
-        row.scope = 3
-      }
-      if (row.activatedOrNot === '激活') {
-        row.activatedOrNot = "Y"
-      } else if (row.activatedOrNot === '未激活') {
-        row.activatedOrNot = "N"
-      }
-      if (row.status === '正常') {
-        row.status = "Y"
-      } else if (row.status === '停用') {
-        row.status = "N"
-      }
       initializeRuleEngine(row).then(response => {
         if (response.code === 200) {
           this.$message.success(response.msg)
         } else {
           this.$message.error(response.msg)
         }
-        this.getList()
       })
     },
     toEngineVersion(row) {
@@ -328,30 +330,6 @@ export default {
       this.loading = true;
       listEngine(this.queryParams).then(response => {
         this.engineList = response.data.rows;
-        this.engineList.forEach(item => {
-          if (item.type === "1") {
-            item.type = "规则模板"
-          } else if (item.type === "2") {
-            item.type = "自定义模板"
-          }
-          if (item.scope === 1) {
-            item.scope = "数据字段"
-          } else if (item.scope === 2) {
-            item.scope = "数据集"
-          } else if (item.scope === 3) {
-            item.scope = "记录"
-          }
-          if (item.activatedOrNot === 'Y') {
-            item.activatedOrNot = "激活"
-          } else if (item.activatedOrNot === 'N') {
-            item.activatedOrNot = "未激活"
-          }
-          if (item.status === 'Y') {
-            item.status = "正常"
-          } else if (item.status === 'N') {
-            item.status = "停用"
-          }
-        })
         this.total = response.data.total;
         this.loading = false;
       });
@@ -368,6 +346,7 @@ export default {
         name: null,
         type: null,
         scope: null,
+        encoding: null,
         activatedOrNot: null,
         status: null,
         description: null,
@@ -375,7 +354,8 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
+        codeText: null
       };
       this.resetForm("form");
     },
@@ -406,7 +386,6 @@ export default {
       this.reset();
       const id = row.id || this.ids
       getEngine(id).then(response => {
-        console.log(response)
         this.form = response.data;
         this.open = true;
         this.title = "修改引擎维护";