feat(): 增加规则引擎版本页面

src/views/ruleEngine/engineVersion/index.vue

@@ -1,23 +1,130 @@
 <template>
-  <div>
-    {{ruleEngineId}}
+  <div class="app-container">
+    <el-descriptions class="margin-top" :title="ruleEngineInfo.name" :column="3" border>
+      <template slot="extra">
+        <el-dropdown split-button type="primary" @command="handleClick">
+          更多操作
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="add">版本添加</el-dropdown-item>
+            <el-dropdown-item command="activate">{{(ruleEngineInfo.isActivate === 'no-activate' ? "激活": "禁用")+'引擎'}}</el-dropdown-item>
+            <el-dropdown-item command="status">{{(ruleEngineInfo.status === '0' ? "关闭": "开启")+'引擎'}}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+
+      </template>
+      <el-descriptions-item label="规则名称"> {{ruleEngineInfo.name}} </el-descriptions-item>
+      <el-descriptions-item label="规则类型">
+        <dict-tag :options="dict.type.rule_engine_type" :value="ruleEngineInfo.type"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="规则作用域">
+        <dict-tag :options="dict.type.rule_engine_level" :value="ruleEngineInfo.level"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="引擎编码"> {{ruleEngineInfo.code}} </el-descriptions-item>
+      <el-descriptions-item label="是否激活">
+        <dict-tag :options="dict.type.rule_engine_activate_status" :value="ruleEngineInfo.isActivate"/>
+      </el-descriptions-item>
+      <el-descriptions-item label="规则状态">
+        <dict-tag :options="dict.type.sys_normal_disable" :value="ruleEngineInfo.status"/>
+      </el-descriptions-item>
+    </el-descriptions>
+    <editor style="margin-top: 20px" :read-only="true" v-model="ruleEngineInfo.description"></editor>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>规则引擎版本</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="8" v-for="o in 4">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>规则引擎版本</span>
+              <el-dropdown style="float: right; padding: 3px 0">
+                <span class="el-dropdown-link">
+                  更多操作<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="info">查看详情</el-dropdown-item>
+                  <el-dropdown-item command="test">测试规则</el-dropdown-item>
+                  <el-dropdown-item command="status">禁用规则</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div v-for="o in 4" :key="o" class="text item">
+              {{'列表内容 ' + o }}
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
   </div>
 </template>
 
 <script>
 export default {
   name: "EngineVersion",
+  dicts: ['rule_engine_activate_status', 'rule_engine_type', 'sys_normal_disable', 'rule_engine_level'],
   data() {
     return {
       ruleEngineId: this.$route.params && this.$route.params.ruleEngineId,
+      ruleEngineInfo: {
+        "id": 1,
+        "name": "邮箱规则",
+        "type": "rule-custom",
+        "isActivate": "no-activate",
+        "status": "0",
+        "description": "<p>根据邮箱规则进行数据校验，内包含所有邮箱校验规则</p>",
+        "remark": "-",
+        "code": "email",
+        "level": "data-field"
+      }
     }
   },
   created() {
+    this.initRuleEngine();
   },
-  methods: {}
+  methods: {
+    handleClick(clickType){
+      if (clickType === "add"){
+
+      }else if(clickType === "activate"){
+        this.ruleEngineInfo.isActivate = 'no-activate' === this.ruleEngineInfo.isActivate ? 'activated' : 'no-activate'
+        this.$modal.msgSuccess("引擎激活状态修改成功");
+      }else if(clickType === "status"){
+        this.ruleEngineInfo.status = '0' === this.ruleEngineInfo.status ? '1' : '0'
+        this.$modal.msgSuccess("引擎状态操作成功");
+      }
+    },
+    initRuleEngine(){
+        let response = {
+          "code": 200,
+          "msg": "查询成功",
+          "data": {
+            "id": 1,
+            "name": "邮箱规则",
+            "type": "rule-custom",
+            "isActivate": "no-activate",
+            "status": "0",
+            "description": "<p>根据邮箱规则进行数据校验，内包含所有邮箱校验规则</p>",
+            "remark": "-",
+            "code": "email",
+            "level": "data-field"
+          }
+        }
+        this.ruleEngineInfo = response.data
+    }
+
+  }
 }
 </script>
 
 <style scoped>
-
+.box-card{
+  margin-top: 20px;
+}
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409EFF;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
 </style>