Skip to content

E
emport-web
Commit b63a9f74 by 刘泽志
Options

规则

parent 82bfff69
Showing with 560 additions and 48 deletions
src/api/emport/Emport.js
......@@ -208,3 +208,67 @@ export function deleteField(fieldId) {
params:{fieldId}
})
}
/**
* 规则查询
* @param params
* @returns {*}
*/
export function queryRule(params) {
return request({
url: `${prefix}/rule`,
method: 'get',
params
})
}
/**
* 规则字典
* @returns {*}
*/
export function queryRuleDict() {
return request({
url: `${prefix}/rule/dict`,
method: 'get'
})
}
/**
* 新增规则
* @param data
* @returns {*}
*/
export function addRule(data) {
return request({
url: `${prefix}/rule`,
method: 'post',
data
})
}
/**
* 修改规则
* @param data
* @returns {*}
*/
export function updateRule(data) {
return request({
url: `${prefix}/rule`,
method: 'put',
data
})
}
/**
* 删除规则
* @param ruleId
* @returns {*}
*/
export function deleteRule(ruleId) {
return request({
url: `${prefix}/rule`,
method: 'delete',
params:{ruleId}
})
}
\ No newline at end of file
src/api/system/dict/data.js
......@@ -20,7 +20,7 @@ export function getData(dictCode) {
// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
return request({
url: '/system/dict/data/dictType/' + dictType,
url: '/system/dict/data/type/' + dictType,
method: 'get'
})
}
......
src/views/emport/datasource/index.vue
......@@ -50,13 +50,6 @@
@click="handleDelete"
>删除</el-button
>
<el-button
icon="el-icon-download"
size="mini"
type="warning"
@click="handleExport"
>导出</el-button
>
</el-form-item>
</el-form>
......@@ -96,7 +89,7 @@
prop="url"
show-overflow-tooltip="true"
/>
<el-table-column align="center" label="适配器标识" prop="adapterFlag">
<el-table-column v-if="false" align="center" label="适配器标识" prop="adapterFlag">
<template slot-scope="scope">
<dict-tag
:options="dict.type.sys_datasource_adapter_flag"
......@@ -106,8 +99,9 @@
</el-table-column>
<!--<el-table-column label="用户名" align="center" prop="username" />-->
<!--<el-table-column label="密码" align="center" prop="password" />-->
<el-table-column align="center" label="机构代码" prop="orgCode" />
<el-table-column align="center" v-if="false" label="机构代码" prop="orgCode" />
<el-table-column
v-if="false"
align="center"
label="数据源组"
min-width="100px"
......@@ -128,7 +122,6 @@
>
<template slot-scope="scope">
<el-button
v-hasPermi="['system:datasource:edit']"
icon="el-icon-edit"
size="mini"
type="text"
......@@ -136,7 +129,6 @@
>修改</el-button
>
<el-button
v-hasPermi="['system:datasource:remove']"
icon="el-icon-delete"
size="mini"
type="text"
......@@ -158,22 +150,6 @@
<!-- 添加或修改数据源配置对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="机构代码" prop="orgCode">
<el-input v-model="form.orgCode" placeholder="请输入机构代码" />
</el-form-item>
<el-form-item label="数据源组" prop="datasourceGroup">
<el-select
v-model="form.datasourceGroup"
placeholder="请选择数据源组"
>
<el-option
v-for="dict in dict.type.datasource_group"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="名称" prop="datasourceName">
<el-input v-model="form.datasourceName" placeholder="请输入名称" />
</el-form-item>
......@@ -195,17 +171,6 @@
type="textarea"
/>
</el-form-item>
<el-form-item label="适配器标识" prop="adapterFlag">
<el-radio-group v-model="form.adapterFlag">
<el-radio
v-for="dict in dict.type.sys_datasource_adapter_flag"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名" />
</el-form-item>
......@@ -280,10 +245,7 @@ export default {
],
password: [
{ required: true, message: "密码不能为空", trigger: "blur" },
],
adapterFlag: [
{ required: true, message: "适配器标识不能为空", trigger: "change" },
],
]
},
};
},
......@@ -418,6 +380,8 @@ export default {
}
</script>
<style scoped>
<style lang="scss" scoped>
.app-container{
box-shadow: none;
}
</style>
src/views/emport/rule/ArrayInput.vue 0 → 100644
<template>
<div>
<i class="el-icon-circle-plus-outline" style="cursor: pointer" @click="add"></i>
<el-input v-for="(item,index) in arr"
style="margin-bottom: 4px"
:value="item"
@input="(v)=>{doInput(v,index)}"
:placeholder="placeholder">
<template slot="append">
<i class="el-icon-remove-outline" style="cursor: pointer" @click="remove(index)"></i>
</template>
</el-input>
</div>
</template>
<script>
export default {
name: "ArrayInput",
props: {
value: {
type: String,
default: ''
},
placeholder:{
type: String,
default: ''
}
},
model: {
prop: 'value',
event: 'changeValue'
},
computed: {
arr() {
return this.value.split(',')
}
},
methods: {
doInput(value, index) {
let arr = this.value.split(',')
arr[index] = value
this.$emit('changeValue', arr.join(","))
},
add() {
this.$emit('changeValue', this.value + ",")
},
remove(index) {
let arr = this.value.split(',')
arr.splice(index, 1)
this.$emit('changeValue', arr.join(","))
},
}
}
</script>
<style lang="scss" scoped>
</style>
src/views/emport/rule/SectionInput.vue 0 → 100644
<template>
<div>
<el-input :value="first"
@input="doInputFirst"
placeholder="请输入区间值"/>
<el-input :value="second"
@input="doInputSecond"
placeholder="请输入区间值"/>
</div>
</template>
<script>
export default {
name: "SectionInput",
props: {
value: {
type: String,
default: ''
}
},
model: {
prop: 'value',
event: 'changeValue'
},
computed: {
first() {
if (this.value) {
let arr = this.value.split(",")
if (arr.length > 0) {
return arr[0]
}
}
return ''
},
second() {
if (this.value) {
let arr = this.value.split(",")
if (arr.length > 1) {
return arr[1]
}
}
return ''
},
},
methods: {
doInputFirst(value) {
let arr = this.value.split(',')
if (arr.length > 0) {
arr[0] = value
} else {
arr = [value]
}
this.$emit('changeValue', arr.join(","))
},
doInputSecond(value) {
let arr = this.value.split(',')
if (arr.length > 1) {
arr[1] = value
} else if (arr.length === 0) {
arr = ['', value]
} else {
arr.push(value)
}
this.$emit('changeValue', arr.join(","))
},
}
}
</script>
<style scoped>
</style>
src/views/emport/rule/SectionSelect.vue 0 → 100644
<template>
<div>
<el-select size="small" :value="first" :value-key="config.value" filterable :placeholder="placeholder"
@change="doSelectFirst">
<el-option v-for="item in arr"
:value="item[config.value]+''"
:label="item[config.label]"
:key="item[config.value]"/>
</el-select>
<el-select size="small" :value="second" :value-key="config.value" filterable :placeholder="placeholder"
@change="doSelectSecond">
<el-option v-for="item in arr"
:value="item[config.value]+''"
:label="item[config.label]"
:key="item[config.value]"/>
</el-select>
</div>
</template>
<script>
export default {
name: "SectionSelect",
props: {
value: {
type: String,
default: ''
},
arr: {
type: Array,
default: () => []
},
config: {
type: Object,
default: () => {
return {
label: 'label',
value: 'value'
}
}
},
placeholder: {
type: String,
default: '请选择其它基础或组合规则'
}
},
model: {
prop: 'value',
event: 'changeValue'
},
computed: {
first() {
if (this.value) {
let temp = this.value.split(",")
if (temp.length > 0) {
return temp[0]
}
}
return ''
},
second() {
if (this.value) {
let temp = this.value.split(",")
if (temp.length > 1) {
return temp[1]
}
}
return ''
},
},
methods: {
doSelectFirst(value) {
let arr = this.value.split(',')
if (arr.length > 0) {
arr[0] = value
} else {
arr = [value]
}
this.$emit('changeValue', arr.join(","))
},
doSelectSecond(value) {
let arr = this.value.split(',')
if (arr.length > 1) {
arr[1] = value
} else if (arr.length === 0) {
arr = ['', value]
} else {
arr.push(value)
}
this.$emit('changeValue', arr.join(","))
},
}
}
</script>
<style scoped>
</style>
src/views/emport/rule/index.vue
<template>
<div class="app-container">
<div class="header-operator">
<el-form label-width="40px" inline>
<el-form-item>
<el-input placeholder="输入名称搜索" clearable size="small" prefix-icon="el-icon-search" class="mr input"
v-model="queryParam.ruleName" />
</el-form-item>
<el-form-item label="类型">
<el-select size="small" v-model="queryParam.ruleType" style="width: 160px">
<el-option value="" label="全部" />
<el-option v-for="item in queryTypeList" :key="item.value" :value="item.value"
:label="item.label" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" class="mr" icon="el-icon-search" size="mini" :loading="queryLoading"
@click="queryRuleList">
查询
</el-button>
<el-button type="success" class="mr" size="mini" @click="openAddruleDialog">
新增
</el-button>
</el-form-item>
</el-form>
</div>
<el-table v-loading="queryLoading" :data="ruleList" stripe border>
<el-table-column label="规则名称" align="center" prop="name" :show-overflow-tooltip="true" />
<el-table-column label="规则类型" align="center" prop="type" :show-overflow-tooltip="true" />
<el-table-column label="验证模式" align="center" prop="mode" :show-overflow-tooltip="true" />
<el-table-column label="验证内容" align="center" prop="content" :formatter="ruleContentFormatter"
:show-overflow-tooltip="true" />
<el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="150" show-overflow-tooltip>
<template slot-scope="scope">
<el-button plain size="small" @click="testRule(scope.row)">测试</el-button>
<el-button circle icon="el-icon-edit" plain size="small" type="primary"
@click.stop="editRuleDialog(scope.row)"></el-button>
<el-button circle icon="el-icon-delete" plain size="small" type="danger"
@click.stop="deleteRule(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="queryParam.total > 0" :total="queryParam.total" :page.sync="queryParam.pageNum"
:limit.sync="queryParam.pageSize" @pagination="queryRuleList" />
<!--规则增改-->
<el-dialog :title="dialogData.title" @open="openDialog" :visible.sync="dialogData.show" width="400px"
:close-on-click-modal="false" append-to-body>
<el-form ref="ruleForm" :model="dialogData.data" label-width="80px">
<el-form-item required prop="name" label="规则名称">
<el-input v-model="dialogData.data.name" size="small" />
</el-form-item>
<el-form-item required label="规则类型" prop="type">
<el-select @change="typeChange" size="small" v-model="dialogData.data.type" style="width: 160px">
<el-option v-for="item in typeDict" :key="item" :value="item" :label="item" />
</el-select>
</el-form-item>
<el-form-item required label="验证模式" prop="mode">
<el-select @change="modeChange" size="small" v-model="dialogData.data.mode" style="width: 160px">
<el-option v-for="item in modeDict" :key="item" :value="item" :label="item" />
</el-select>
</el-form-item>
<el-form-item required prop="content">
<!--正则1-->
<el-input v-model="dialogData.data.content" type="textarea" placeholder="请输入需要验证的正则表达式"
v-if="dialogData.data.mode === '正则'" />
<!--非空数组2-->
<ArrayInput v-model="dialogData.data.content" placeholder="请输入视为空的值"
v-if="dialogData.data.mode === '非空'" />
<!--区间配置3-->
<SectionInput v-model="dialogData.data.content" v-if="dialogData.data.mode === '区间'" />
<!--比较4-->
<el-input v-model="dialogData.data.content" placeholder="输入表达式,例如 >4 , <=4"
v-if="dialogData.data.mode === '比较'" />
<!--值域6-->
<ArrayInput v-model="dialogData.data.content" placeholder="请输入值域"
v-if="dialogData.data.mode === '值域'" />
<!--逻辑与11-->
<!--逻辑或12-->
<SectionSelect v-model="dialogData.data.content" :arr="ruleDict"
:config="{ value: 'value', label: 'label' }"
v-if="['逻辑与', '逻辑或'].includes(dialogData.data.mode)" />
</el-form-item>
<el-form-item prop="remarks" label="备注">
<el-input v-model="dialogData.data.remarks" type="textarea" placeholder="备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="testRule(dialogData.data)">规则测试</el-button>
<el-button type="primary" @click="submitRule">确 定</el-button>
<el-button @click="dialogData.show = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import * as Emport from '@/api/emport/Emport'
import ArrayInput from "@/views/emport/rule/ArrayInput.vue";
import SectionInput from "@/views/emport/rule/SectionInput.vue";
import SectionSelect from "@/views/emport/rule/SectionSelect.vue";
export default {
name: 'Rule'
name: 'Rule',
components: { ArrayInput, SectionInput, SectionSelect },
data() {
return {
typeDict: ['基础规则', '组合规则'],
modeDict: [],
queryParam: {
pageNum: 1,
pageSize: 20,
total: 0,
name: "",
type: ""
},
queryLoading: false,
ruleList: [],
dialogData: {
title: '',
show: false,
data: {}
},
ruleDict: [], // 规则下拉字典
}
},
created() {
this.initRuleDict()
this.queryRuleList()
},
methods: {
// 初始化规则字典
initRuleDict() {
Emport.queryRuleDict().then(res => {
this.ruleDict = res.data.map(item => {
return {
value: item.id,
label: item.name
}
})
})
},
// 打开dialog回调
openDialog() {
this.initRuleDict()
},
// 查询规则列表
queryRuleList() {
this.queryLoading = true;
Emport.queryRule(this.queryParam).then(res => {
if (res.code === 200) {
this.queryParam.total = res.total
this.ruleList = res.rows
}
}).finally(_ => {
this.queryLoading = false
})
},
// 打开添加规则dialog
openAddruleDialog() {
this.dialogData.title = "添加规则"
this.dialogData.data = {}
this.dialogData.show = true
},
// 打开编辑规则dialog
editRuleDialog(row) {
this.dialogData.title = "编辑规则"
this.dialogData.data = { ...row }
this.dialogData.show = true
},
// 规则类型修改触发事件
typeChange(value) {
this.$set(this.dialogData.data, 'mode', '')
if (value === '基础规则') {
this.modeDict = ['正则', '非空', '区间', '比较', '值域']
} else if (value === '组合规则') {
this.modeDict = ['逻辑与', '逻辑或']
}
},
// 验证模式修改触发事件
modeChange(value) {
this.$set(this.dialogData.data, 'content', '')
},
// 提交规则
submitRule() {
this.$refs.ruleForm.validate(validate => {
if (validate) {
if (this.dialogData.title === '添加规则') {
Emport.addRule(this.dialogData.data).then(res => {
this.dialogData.show = false
this.queryRuleList()
})
} else {
Emport.updateRule(this.dialogData.data).then(res => {
this.dialogData.show = false
this.queryRuleList()
})
}
}
})
},
// 删除规则
deleteRule(row) {
this.$confirm(`是否删除规则 ${row.name} ?`, '删除',
{
type: 'warning',
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
Emport.deleteRule(row.id).then(res => {
done()
this.queryRuleList()
})
} else {
done()
}
}
}
)
},
// 规则测试
testRule(data) {
if(data){
this.$prompt('请输入测试数据', '测试',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
Emport.queryRuleDict(data).then(res => {
if (res.code === 200) {
this.$message.success("校验通过");
}
})
} else {
done()
}
}
}
)
}
},
},
}
</script>
<style scoped>
<style lang="scss" scoped>
.app-container {
box-shadow: none;
}
.header-operator {
display: flex;
flex-wrap: wrap;
align-items: center;
.mr {
margin-right: 8px;
margin-left: 0;
margin-bottom: 8px;
}
.input {
width: 250px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment