Files
micro-ui/src/views/quality/checkrule/CheckRuleAdd.vue
2024-01-08 09:34:39 +08:00

449 lines
15 KiB
Vue

<template>
<el-card class="box-card" shadow="always">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button v-if="active == 2" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
<el-button v-if="active == 1" size="mini" type="primary" @click="handleNextStep">下一步</el-button>
<el-button v-if="active == 2" size="mini" type="primary" @click="handleLastStep">上一步</el-button>
<el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
</el-button-group>
</div>
<div class="body-wrapper" style="padding-left: 20%">
<el-steps :active="active" finish-status="success" align-center style="width: 900px">
<el-step title="填写检测用例信息" />
<el-step title="选择检测数据源" />
</el-steps>
<el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="120px" style="width: 800px">
<div style="padding: 20px 100px">
<el-form-item label="用例名称" prop="ruleName">
<el-input v-model="form.ruleName" placeholder="请输入用例名称" />
</el-form-item>
<el-form-item label="检测类型" prop="ruleItemId">
<el-select v-model="form.ruleItemId" placeholder="请选择检测类型" style="width: 100%" @change="ruleItemSelectChanged">
<el-option
v-for="item in ruleItemOptions"
:key="item.id"
:label="item.itemExplain"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="用例级别" prop="ruleLevelId">-->
<!-- <el-select v-model="form.ruleLevelId" placeholder="请选择用例级别" style="width: 100%">-->
<!-- <el-option-->
<!-- v-for="item in ruleLevelOptions"-->
<!-- :key="item.id"-->
<!-- :label="item.name"-->
<!-- :value="item.id"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
</div>
</el-form>
<el-form v-if="active == 2" ref="form" :model="form" :rules="rules" label-width="80px" style="width: 800px">
<div style="padding: 20px 100px">
<el-form-item label="数据源" prop="ruleSourceId">
<el-select v-model="form.ruleSourceId" placeholder="请选择数据源" style="width: 100%" @change="sourceSelectChanged">
<el-option
v-for="source in sourceOptions"
:key="source.id"
:label="source.sourceName"
:value="source.id"
/>
</el-select>
</el-form-item>
<!--<el-transfer
v-model="form.transferValue"
filterable
:titles="['备选', '已选']"
:filter-method="filterMethod"
:format="formatTransfer"
filter-placeholder="请输入表名"
:data="transferData"
/>-->
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.id"
:label="dict.itemText"
>{{ dict.itemValue }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</div>
</el-form>
</div>
</el-card>
</template>
<script>
import { listRuleLevel, listRuleItem, addCheckRule, listSourceIdBytable } from '@/api/quality/checkrule'
import { listDataSource } from '@/api/metadata/datasource'
import { listDataTable } from '@/api/metadata/datatable'
import { listDataColumn } from '@/api/metadata/datacolumn'
import { Transfer } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default {
name: 'CheckRuleAdd',
components: {
ElTransfer: Transfer
},
props: {
data: {
type: Object,
default: function () {
return {}
}
}
},
data() {
return {
// eslint-disable-next-line vue/no-dupe-keys
transferData: [],
title: '检测用例新增',
active: 1,
// 展示切换
showOptions: {
data: {},
showList: true,
showAdd: false,
showEdit: false,
showDetail: false
},
// 保存按钮
loadingOptions: {
loading: false,
loadingText: '保存',
isDisabled: false
},
// 表单参数
form: {
qualityType: 'jg',
ruleName: undefined,
ruleTypeId: undefined,
ruleItemId: undefined,
ruleLevelId: undefined,
ruleDbType: undefined,
ruleSourceId: undefined,
ruleSource: undefined,
ruleTableId: undefined,
ruleTable: undefined,
ruleTableComment: undefined,
ruleColumnId: undefined,
ruleColumn: undefined,
ruleColumnComment: undefined,
ruleConfig: {
ruleItemCode: undefined,
consistent: {
gbTypeId: undefined,
bindGbColumn: undefined
},
relevance: {
relatedTableId: undefined,
relatedTable: undefined,
relatedTableComment: undefined,
relatedColumnId: undefined,
relatedColumn: undefined,
relatedColumnComment: undefined
},
timeliness: {
threshold: undefined
},
accuracy: {
maxLength: undefined
},
regular: {
regular: undefined
}
},
status: '1',
zzStatus: '0', // 状态正则
transferValue: [],
transferValueName: []
},
// 表单校验
rules: {
ruleName: [
{ required: true, message: '规则名称不能为空', trigger: 'blur' }
],
ruleItemId: [
{ required: true, message: '核查类型不能为空', trigger: 'change' }
],
ruleSourceId: [
{ required: true, message: '数据源不能为空', trigger: 'change' }
],
ruleTableId: [
{ required: true, message: '数据表不能为空', trigger: 'change' }
],
ruleColumnId: [
{ required: true, message: '核查字段不能为空', trigger: 'change' }
]
},
// 状态数据字典
statusOptions: [],
// 规则级别数据字典
ruleLevelOptions: [],
// 核查类型数据字典
ruleItemOptions: [],
sourceOptions: [],
tableOptions: [],
columnOptions: [],
dictTypeOptions: [],
gbColumnOptions: [
{ value: 'gb_code', label: '标准编码' },
{ value: 'gb_name', label: '标准名称' }
],
relatedColumnOptions: [],
tableNameOldList: []
}
},
created() {
this.form.ruleTypeId = this.data.ruleTypeId
this.getDicts('sys_common_status').then(response => {
if (response.success) {
this.statusOptions = response.data
}
})
this.getRuleLevelList()
this.getRuleItemList()
this.getDataSourceList()
},
methods: {
filterMethod(query, item) {
return item.tableNameStr.indexOf(query) > -1
},
formatTransfer(item) {
return item.label
},
generateData(tableData) {
const data = []
const tableName = tableData // 确保 tableData 是数组,包含有 label 属性的对象
tableName.forEach((tableItem) => {
data.push({
label: tableItem.label,
key: tableItem.key,
tableNameStr: tableItem.label // 直接使用 tableItem.label
})
})
this.transferData = data
console.log('this.transferData==', this.transferData)
},
showCard() {
this.$emit('showCard', this.showOptions)
},
/** 步骤条下一步 */
handleNextStep() {
this.$refs['form'].validate(valid => {
if (valid) {
this.active++
}
})
},
/** 步骤条上一步 */
handleLastStep() {
this.active--
},
getRuleLevelList() {
listRuleLevel().then(response => {
if (response.success) {
this.ruleLevelOptions = response.data
}
})
},
getRuleItemList() {
listRuleItem({ ruleTypeId: this.data.ruleTypeId }).then(response => {
if (response.success) {
this.ruleItemOptions = response.data
}
})
},
getDataSourceList() {
listDataSource().then(response => {
if (response.success) {
this.sourceOptions = response.data
}
})
},
ruleItemSelectChanged(val) {
const item = this.ruleItemOptions.find(function (item) {
return item.id === val
})
this.form.ruleConfig.ruleItemCode = item.itemCode
this.form.ruleConfig.id = item.id
},
async sourceSelectChanged(val) {
// this.inspectSourceId(val)
// const tableNameOldList = []
/* const tableNameOldList = await listSourceIdBytable(val, this.form.ruleConfig.id).then(response => {
const result = []
for (let i = 0; i < response.data.length; i++) {
const tableName = response.data[i].ruleTable
result.push(tableName)
}
return result
})
const response = await listDataTable({ sourceId: val })
if (response.success) {
// 处理过滤数据
const tableNameList = []
for (let i = 0; i < response.data.length; i++) {
const tableName = response.data[i].tableName
const tableId = response.data[i].id
const map = {}
if (!tableNameOldList.some((str) => str === tableName)) {
map.key = tableId
map.label = tableName
tableNameList.push(map)
}
}
await this.generateData(tableNameList)
// this.form.transferValue = ['robot_patient'] 暂时失效,初始化默认值
this.tableOptions = response.data
this.columnOptions = []
const source = this.sourceOptions.find(function (item) {
return item.id === val
})
this.form.ruleSource = source.sourceName
this.form.ruleDbType = source.dbType
this.form.ruleTableId = ''
this.form.ruleTable = ''
this.form.ruleTableComment = ''
this.form.ruleColumnId = ''
this.form.ruleColumn = ''
this.form.ruleColumnComment = ''
// console.log('tableNameOldList=', tableNameOldList)
// this.form.transferValue = tableNameOldList
}*/
const source = this.sourceOptions.find(function (item) {
return item.id === val
})
this.form.transferValue = ['全表']
this.form.ruleSource = source.sourceName
this.form.ruleDbType = source.dbType
this.form.ruleTableId = 'all'
this.form.ruleTable = '全表'
this.form.ruleTableComment = ''
this.form.ruleColumnId = ''
this.form.ruleColumn = ''
this.form.ruleColumnComment = ''
},
// 根据来源数据获取已有表
inspectSourceId(val) {
listSourceIdBytable(val).then(response => {
const tableNameOldList = []
for (let i = 0; i < response.data.length; i++) {
const tableName = response.data[i].ruleTable
tableNameOldList.push(tableName)
}
this.tableNameOldList = tableNameOldList
})
},
tableSelectChanged(val) {
listDataColumn({ sourceId: this.form.ruleSourceId, tableId: val }).then(response => {
if (response.success) {
this.columnOptions = response.data
const table = this.tableOptions.find(function (item) {
return item.id === val
})
this.form.ruleTable = table.tableName
this.form.ruleTableComment = table.tableComment
this.form.ruleColumnId = ''
this.form.ruleColumn = ''
this.form.ruleColumnComment = ''
}
})
},
columnSelectChanged(val) {
const column = this.columnOptions.find(function (item) {
return item.id === val
})
this.form.ruleColumn = column.columnName
this.form.ruleColumnComment = column.columnComment
this.$forceUpdate()
},
dictTypeSelectChanged(val) {
const item = this.dictTypeOptions.find(function (item) {
return item.id === val
})
this.form.ruleConfig.consistent.gbTypeCode = item.gbTypeCode
this.form.ruleConfig.consistent.gbTypeName = item.gbTypeName
},
relatedTableSelectChanged(val) {
listDataColumn({ sourceId: this.form.ruleSourceId, tableId: val }).then(response => {
if (response.success) {
this.relatedColumnOptions = response.data
const table = this.tableOptions.find(function (item) {
return item.id === val
})
this.form.ruleConfig.relevance.relatedTable = table.tableName
this.form.ruleConfig.relevance.relatedTableComment = table.tableComment
this.form.ruleConfig.relevance.relatedColumnId = ''
this.form.ruleConfig.relevance.relatedColumn = ''
this.form.ruleConfig.relevance.relatedColumnComment = ''
}
})
},
relatedColumnSelectChanged(val) {
const column = this.relatedColumnOptions.find(function (item) {
return item.id === val
})
this.form.ruleConfig.relevance.relatedColumn = column.columnName
this.form.ruleConfig.relevance.relatedColumnComment = column.columnComment
},
/** 提交按钮 */
submitForm: function () {
console.log('transferValue', this.form.transferValue)
this.$refs['form'].validate(valid => {
if (valid) {
this.loadingOptions.loading = true
this.loadingOptions.loadingText = '保存中...'
this.loadingOptions.isDisabled = true
addCheckRule(this.form).then(response => {
if (response.success) {
this.$message.success('保存成功')
setTimeout(() => {
// 2秒后跳转列表页
this.$emit('showCard', this.showOptions)
}, 2000)
} else {
this.$message.error('保存失败')
this.loadingOptions.loading = false
this.loadingOptions.loadingText = '保存'
this.loadingOptions.isDisabled = false
}
}).catch(() => {
this.loadingOptions.loading = false
this.loadingOptions.loadingText = '保存'
this.loadingOptions.isDisabled = false
})
}
})
},
handleZzStatusRadioChange(value) {
// 在这里执行其他需要的操作
if (value === '1') {
this.form.ruleConfig.regular.regular = '^[1-9][0-9]{10}$'
} else if (value === '2') {
this.form.ruleConfig.regular.regular = '^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$'
}
}
}
}
</script>
<style lang="scss" scoped>
.el-card ::v-deep .el-card__body {
height: calc(100vh - 230px);
overflow-y: auto;
}
</style>