Chao
/
etl-cloud-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor() 重构引擎维护页面

chao
chao 2024-05-07 15:50:23 +08:00
parent 4fe601f397
commit 30bf28c2dd
2 changed files with 214 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
src/views/data/rule/engineMaintenance/index.vue
View File

@ -19,16 +19,6 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="规则作用域" prop="scope">
<el-select v-model="queryParams.scope" placeholder="请选择规则作用域" clearable>
<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-form-item label="是否激活" prop="activatedOrNot">
<el-select v-model="queryParams.activatedOrNot" placeholder="请选择是否激活" clearable> <el-select v-model="queryParams.activatedOrNot" placeholder="请选择是否激活" clearable>
<el-option <el-option
@ -183,63 +173,84 @@
/> />
<!-- 添加或修改引擎维护对话框 --> <!-- 添加或修改引擎维护对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="75%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="规则名称" prop="name"> <el-row>
<el-input v-model="form.name" placeholder="请输入规则名称"/> <el-col :span="12">
</el-form-item> <el-form-item label="规则名称" prop="name">
<el-form-item label="规则类型" prop="type"> <el-input v-model="form.name" placeholder="请输入规则名称"/>
<el-select v-model="form.type" placeholder="请选择规则类型"> </el-form-item>
<el-option </el-col>
v-for="dict in dict.type.type" <el-col :span="12">
:key="dict.value" <el-form-item label="引擎编码" prop="encoding">
:label="dict.label" <el-input v-model="form.encoding" placeholder="请输入引擎编码"/>
:value="dict.value" </el-form-item>
></el-option> </el-col>
</el-select> </el-row>
</el-form-item> <el-row>
<el-form-item label="规则作用域" prop="scope"> <el-col :span="12">
<el-select v-model="form.scope" placeholder="请选择规则作用域"> <el-form-item label="规则类型" prop="type">
<el-option <el-select v-model="form.type" placeholder="请选择规则类型" style="width: 100%">
v-for="dict in dict.type.scope" <el-option
:key="dict.value" v-for="dict in dict.type.type"
:label="dict.label" :key="dict.value"
:value="parseInt(dict.value)" :label="dict.label"
></el-option> :value="dict.value"
</el-select> ></el-option>
</el-form-item> </el-select>
<el-form-item label="引擎编码" prop="encoding"> </el-form-item>
<el-input v-model="form.encoding" placeholder="请输入引擎编码"/> </el-col>
</el-form-item> <el-col :span="12">
<el-form-item label="是否激活" prop="activatedOrNot"> <el-form-item label="规则级别" prop="scope">
<el-radio-group v-model="form.activatedOrNot"> <el-select v-model="form.scope" placeholder="请选择规则级别" style="width: 100%">
<el-radio <el-option
v-for="dict in dict.type.activated_or_not" v-for="dict in dict.type.scope"
:key="dict.value" :key="dict.value"
:label="dict.value" :label="dict.label"
>{{ dict.label }} :value="parseInt(dict.value)"
</el-radio> ></el-option>
</el-radio-group> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="规则状态" prop="status"> </el-col>
<el-select v-model="form.status" placeholder="请选择规则状态"> </el-row>
<el-option <el-row>
v-for="dict in dict.type.status" <el-col :span="12">
:key="dict.value" <el-form-item label="是否激活" prop="activatedOrNot">
:label="dict.label" <el-radio-group v-model="form.activatedOrNot">
:value="dict.value" <el-radio
></el-option> v-for="dict in dict.type.activated_or_not"
</el-select> :key="dict.value"
</el-form-item> :label="dict.value"
<el-form-item label="描述" prop="description"> >{{ dict.label }}
<el-input v-model="form.description" type="textarea" placeholder="请输入内容"/> </el-radio>
</el-form-item> </el-radio-group>
<el-form-item label="备注" prop="remark"> </el-form-item>
<el-input v-model="form.remark" placeholder="请输入备注"/> </el-col>
</el-form-item> <el-col :span="12">
<el-form-item label="编辑代码文本" prop="codeText"> <el-form-item label="规则状态" prop="status">
<el-input v-model="form.codeText" placeholder="请输入编辑代码文本"/> <el-radio-group v-model="form.status">
</el-form-item> <el-radio
v-for="dict in dict.type.status"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="规则描述">
<editor v-model="form.description" :min-height="192"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button type="primary" @click="submitForm">确 定</el-button>

182
src/views/data/rule/engineVersion/index.vue
View File

@ -1,71 +1,163 @@
<template> <template>
<div> <div class="app-container">
<el-card style="height: 90%"> <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 + " ("+ruleEngineInfo.engineCode+")"}} </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"> <div slot="header" class="clearfix">
<span>{{ ruleEngineInfo.name }}</span> <span>规则引擎版本</span>
<el-button @click="dialogVisible = true" style="float: right;" type="primary">保 存</el-button>
</div>
<div class="text item">
<encoding ref="encoding" style="height: 800px" :modification="modification"
:value="ruleEngineInfo.codeText"></encoding>
</div> </div>
<el-row :gutter="20">
<el-col :span="12" v-for="ruleEngineVersion in ruleEngineInfo.ruleEngineVersionList">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>{{ruleEngineVersion.name + "-" + ruleEngineVersion.code}}</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>
<el-descriptions class="margin-top" :column="2" border>
<el-descriptions-item label="版本类" :span="2"> {{ruleEngineVersion.versionCode}} </el-descriptions-item>
<el-descriptions-item label="版本名称"> {{ruleEngineVersion.name}} </el-descriptions-item>
<el-descriptions-item label="版本CODE"> {{ruleEngineVersion.code}} </el-descriptions-item>
<el-descriptions-item label="是否激活">
<dict-tag :options="dict.type.rule_engine_activate_status" :value="ruleEngineVersion.isActivate"/>
</el-descriptions-item>
<el-descriptions-item label="版本状态">
<dict-tag :options="dict.type.rule_engine_version_status" :value="ruleEngineVersion.status"/>
</el-descriptions-item>
</el-descriptions>
<editor style="margin-top: 10px" :read-only="true" v-model="ruleEngineInfo.description"></editor>
</el-card>
</el-col>
</el-row>
</el-card> </el-card>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="20%">
<span style="font-size: 16px;align-content: center">确认保存吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="updRuleEngine">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import Encoding from "@/components/Encoding/index.vue";
import {getEngine} from "@/api/data/engine";
import path from "path";
export default { export default {
name: "EngineVersion", name: "EngineVersion",
components: {Encoding}, dicts: ['rule_engine_activate_status', 'rule_engine_type', 'sys_normal_disable', 'rule_engine_level', 'rule_engine_version_status'],
data() { data() {
return { return {
dialogVisible: false,
ruleEngineId: this.$route.query.id, ruleEngineId: this.$route.query.id,
ruleEngineInfo: {}, ruleEngineInfo: {
modification: null "id": 1,
"name": "邮箱规则",
"type": "rule-custom",
"isActivate": "no-activate",
"status": "0",
"description": "<p>根据邮箱规则进行数据校验，内包含所有邮箱校验规则</p>",
"remark": "-",
"code": "email",
"engineCode": "engine_custom_email",
"level": "data-field",
}
} }
}, },
created() { created() {
this.getInfo() this.initRuleEngine();
}, },
methods: { methods: {
updRuleEngine() { handleClick(clickType){
this.modification = parseInt(this.ruleEngineId) if (clickType === "add"){
setTimeout(() => {
this.modification = null }else if(clickType === "activate"){
this.dialogVisible = false this.ruleEngineInfo.isActivate = 'no-activate' === this.ruleEngineInfo.isActivate ? 'activated' : 'no-activate'
}, 50) this.$modal.msgSuccess("引擎激活状态修改成功");
}, }else if(clickType === "status"){
getInfo() { this.ruleEngineInfo.status = '0' === this.ruleEngineInfo.status ? '1' : '0'
if (this.$route.query.id === undefined) { this.$modal.msgSuccess("引擎状态操作成功");
this.$router.push({path: this.path})
return
} }
getEngine(this.$route.query.id).then(res => { },
this.ruleEngineInfo = res.data initRuleEngine(){
console.log(this.ruleEngineInfo) let response = {
}) "code": 200,
"msg": "查询成功",
"data": {
"id": 1,
"name": "邮箱规则",
"type": "rule-custom",
"isActivate": "no-activate",
"status": "0",
"description": "<p>根据邮箱规则进行数据校验，内包含所有邮箱校验规则</p>",
"remark": "-",
"code": "email",
"engineCode": "engine_custom_email",
"level": "data-field",
"ruleEngineVersionList": [
{
"name": "163剔除", "code": "IAW3S02", "status": "0",
"versionCode": "engine_custom_email_IAW3S02", "isActivate": "no-activate",
"description": "<p>根据邮箱规则进行数据校验，内包含所有邮箱校验规则</p>"
},
{
"name": "筛选不合规邮箱", "code": "JISID8S", "status": "2",
"versionCode": "engine_custom_email_JISID8S", "isActivate": "activated",
"description": "<p>根据邮箱规则进行数据校验，内包含所有邮箱校验规则</p>"
},
{
"name": "剔除自定义邮箱", "code": "DJ8S9EA", "status": "2",
"versionCode": "engine_custom_email_DJ8S9EA", "isActivate": "no-activate",
"description": "<p>根据邮箱规则进行数据校验，内包含所有邮箱校验规则</p>"
},
{
"name": "邮箱默认值操作", "code": "XJS9E0S", "status": "1",
"versionCode": "engine_custom_email_XJS9E0S", "isActivate": "no-activate",
"description": "<p>根据邮箱规则进行数据校验，内包含所有邮箱校验规则</p>"
}
]
}
}
this.ruleEngineInfo = response.data
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.box-card{
margin-top: 20px;
}
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style> </style>