<template>
|
<PageWrapper class="high-form" title="规则管理" content="这是规则管理页面。" @back="goBack">
|
<a-card title="规则信息" :bordered="false">
|
<BasicForm @register="register" />
|
</a-card>
|
<a-card title="规则明细" :bordered="false" class="!mt-5">
|
<div>
|
<BasicTable :columns="dtlColumns" ref="tableRef" :dataSource="data" :canResize="canResize" :loading="loading"
|
:striped="striped" :bordered="border" :actionColumn="actionColumn" :pagination="pagination" showTableSetting>
|
<template #toolbar>
|
<a-button type="primary" @click="handleCreate"> 新增规则 </a-button>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="[
|
{
|
icon: 'clarity:note-edit-line',
|
onClick: handleEdit.bind(null, record),
|
name: ''
|
},
|
{
|
icon: 'ant-design:delete-outlined',
|
color: 'error',
|
popConfirm: {
|
title: '是否确认删除?',
|
placement: 'left',
|
confirm: handleDelete.bind(null, record),
|
},
|
name: ''
|
},
|
]" />
|
</template>
|
</BasicTable>
|
</div>
|
</a-card>
|
<a-card title="校验测试" :bordered="false" class="!mt-5">
|
<BasicForm @register="registerTest" />
|
</a-card>
|
|
<template #rightFooter>
|
<a-button class="mr-4" type="info" @click="cancel"> 取消 </a-button>
|
<a-button type="primary" @click="submitAll"> 提交 </a-button>
|
</template>
|
<CheckruleDrawer @register="registerDrawer" @success="handleSuccess" />
|
</PageWrapper>
|
</template>
|
<script lang="ts">
|
import { BasicForm, useForm } from '/@/components/Form';
|
import { defineComponent, onMounted, ref, unref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
import { PageWrapper } from '/@/components/Page';
|
import { Card } from 'ant-design-vue';
|
import { useGo } from '/@/hooks/web/usePage';
|
import { useDrawer } from '/@/components/Drawer';
|
import { BasicTable, TableAction, TableActionType } from '/@/components/Table';
|
import { columns, dtlColumns, newFormSchema, testSchemas } from './checkrule.data';
|
import CheckruleDrawer from './CheckruleDrawer.vue';
|
import { useTabs } from '/@/hooks/web/useTabs';
|
import {
|
DeleteRuleDtl,
|
getRuleById,
|
getRuleDtl,
|
SaveRule,
|
SaveRuleDtl,
|
} from '/@/api/tigerapi/bas/checkrule';
|
import {
|
CheckRuleDtlParams,
|
CheckRuleListItem,
|
iBAS_CODE_DTL,
|
} from '/@/api/tigerapi/model/mesModel';
|
import { useUserStore } from '/@/store/modules/user';
|
import { buildUUID } from '/@/utils/uuid';
|
import { formatToDateTime } from '/@/utils/dateUtil';
|
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
import { isEmpty, isNullOrEmpty } from '/@/utils/is';
|
|
export default defineComponent({
|
name: 'RuleDetail',
|
components: {
|
BasicForm,
|
BasicTable,
|
PageWrapper,
|
CheckruleDrawer,
|
[Card.name]: Card,
|
TableAction,
|
},
|
setup(props) {
|
const route = useRoute();
|
const go = useGo();
|
const tableRef = ref<Nullable<TableActionType>>(null);
|
const RuleObj = ref(JSON.parse(decodeURI(route.params?.id as string)));
|
const { setTitle } = useTabs();
|
const isUpdate = ref(true);
|
const canResize = ref(false);
|
const loading = ref(false);
|
const striped = ref(true);
|
const border = ref(true);
|
const pagination = ref<any>(false);
|
const actionColumn = ref({
|
width: 80,
|
title: '操作',
|
dataIndex: 'action',
|
slots: { customRender: 'action' },
|
});
|
const tabStore = useMultipleTabStore();
|
const router = useRouter();
|
|
const { currentRoute } = router;
|
function getCurrentTab() {
|
const route = unref(currentRoute);
|
return tabStore.getTabList.find((item) => item.fullPath === route.fullPath)!;
|
}
|
const currentTab = getCurrentTab();
|
var _title =
|
RuleObj.value.RULE_CODE == '0' ? '新增规则' : '编辑规则：' + RuleObj.value.RULE_CODE;
|
setTitle(_title);
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
const [register, { resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
|
labelWidth: 120,
|
baseColProps: {
|
span: 24,
|
},
|
schemas: newFormSchema,
|
showActionButtonGroup: false,
|
});
|
const [
|
registerTest,
|
{
|
setFieldsValue: setFieldsValueTest,
|
getFieldsValue: getFieldsValueTest,
|
validate: validateTestForm,
|
},
|
] = useForm({
|
labelWidth: 120,
|
baseColProps: {
|
span: 24,
|
},
|
schemas: testSchemas,
|
showActionButtonGroup: false,
|
});
|
const params: CheckRuleDtlParams = {
|
RULE_ID: RuleObj.value.RULE_CODE == '0' ? buildUUID() : (RuleObj.value.ID as string),
|
};
|
const data = ref([] as iBAS_CODE_DTL[]);
|
onMounted(async () => {
|
resetFields();
|
pagination.value = { pageSize: 6 };
|
data.value = (await getRuleDtl(params)).Items;
|
const ruleData = (await getRuleById(params)).Items as CheckRuleListItem[];
|
if (!isNullOrEmpty(ruleData)) {
|
setFieldsValue(ruleData[0]);
|
setFieldsValueTest({
|
CHECK_REGEX: ruleData[0]?.CHECK_REGEX,
|
});
|
} else {
|
// setFieldsValue({
|
// ID: buildUUID(),
|
// CHECK_TYPE:0,
|
// CODE_LENGTH:0,
|
// });
|
// setFieldsValueTest({});
|
}
|
});
|
|
function getTableAction() {
|
const tableAction = unref(tableRef);
|
if (!tableAction) {
|
throw new Error('tableAction is null');
|
}
|
return tableAction;
|
}
|
|
async function submitAll() {
|
try {
|
const [values, testValues] = await Promise.all([validate(), validateTestForm()]);
|
values.ID = params.RULE_ID;
|
const action = await SaveRule({ ...values, ...testValues });
|
if (action.IsSuccessed) {
|
await DeleteRuleDtl(params.RULE_ID);
|
const dtlAction = await SaveRuleDtl(data.value);
|
if (dtlAction.IsSuccessed) {
|
cancel();
|
}
|
}
|
} catch (error) { }
|
}
|
async function cancel() {
|
try {
|
tabStore.closeTab(currentTab, router);
|
} catch (error) { }
|
}
|
async function handleCreate() {
|
await validate();
|
openDrawer(true, {
|
RULE_ID: params.RULE_ID,
|
isUpdate: false,
|
});
|
}
|
|
function handleEdit(record: Recordable) {
|
openDrawer(true, {
|
record,
|
isUpdate: true,
|
});
|
}
|
|
function handleDelete(record: Recordable) {
|
var _data = data.value.map((item) => {
|
return item;
|
});
|
let index = _data.indexOf(record);
|
_data.splice(index, 1);
|
data.value = _data;
|
getTableAction().setProps({
|
dataSource: [],
|
});
|
getTableAction().setProps({
|
dataSource: data,
|
});
|
getTableAction().reload();
|
setData();
|
}
|
|
//新增规则明细
|
function handleSuccess(d, u) {
|
var Id = buildUUID();
|
isUpdate.value = u.isUpdate;
|
if (u.isUpdate) {
|
//更新
|
var _data = data.value.map((item) => {
|
if (item.ID == d.ID)
|
return {
|
...item,
|
CHECK_LENGTH: d.CHECK_LENGTH,
|
DATA_CASE: d.DATA_CASE,
|
DATA_TYPE: d.DATA_TYPE,
|
DATA_REGEX: d.DATA_REGEX,
|
SERIAL_MAX: d.SERIAL_MAX,
|
SERIAL_MIN: d.SERIAL_MIN,
|
DATA_VALUE: d.DATA_VALUE,
|
REPEAT_TIMES: d.REPEAT_TIMES,
|
DESCRIPTION: d.DESCRIPTION,
|
CHECK_TABLE: d.CHECK_TABLE,
|
CHECK_FIELD: d.CHECK_FIELD,
|
FIXED_NOTLIKE: d.FIXED_NOTLIKE,
|
SERIAL_INTERVAL: d.SERIAL_INTERVAL,
|
SERIAL_IGNORE: d.SERIAL_IGNORE,
|
};
|
return item;
|
});
|
data.value = _data;
|
} else {
|
//新增
|
d.ID = Id;
|
d.CREATE_USER = useUserStore().getUserInfo.userId as string;
|
d.UPDATE_TIME = formatToDateTime(new Date());
|
d.UPDATE_USER = useUserStore().getUserInfo.userId as string;
|
var _data2: any[] = [];
|
if (!isEmpty(data.value)) {
|
_data2 = data.value.map((item) => {
|
return item;
|
});
|
d.RULE_SEQ =
|
data.value.reduce((maxLength, item) => {
|
return Math.max(maxLength, item.RULE_SEQ);
|
}, 0) + 1;
|
} else {
|
d.RULE_SEQ = 1;
|
}
|
// _data2.splice(0, 0, d);
|
_data2.push(d);
|
data.value = _data2;
|
}
|
|
//重新修改数据源
|
|
getTableAction().setProps({
|
dataSource: [],
|
});
|
getTableAction().setProps({
|
dataSource: data,
|
});
|
getTableAction().reload();
|
setData();
|
}
|
function setData() {
|
var CHECK_TYPE = 0;
|
var CHECK_REGEX = '^';
|
const total = data.value.reduce((length, item) => {
|
if (item.DATA_TYPE == 6) {
|
CHECK_TYPE = 1;
|
}
|
CHECK_REGEX += item.DATA_REGEX;
|
return (length += Number(item.CHECK_LENGTH) * Number(item.REPEAT_TIMES));
|
}, 0);
|
|
setFieldsValue({
|
...getFieldsValue(),
|
...{
|
CODE_LENGTH: total,
|
CHECK_TYPE: CHECK_TYPE,
|
},
|
});
|
setFieldsValueTest({
|
CHECK_REGEX: CHECK_REGEX + '$',
|
});
|
}
|
function goBack() {
|
// 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
|
go('/CheckRule');
|
}
|
return {
|
columns,
|
dtlColumns,
|
register,
|
registerTest,
|
resetFields,
|
setFieldsValue,
|
getFieldsValue,
|
validate,
|
data,
|
canResize,
|
loading,
|
striped,
|
border,
|
pagination,
|
actionColumn,
|
registerDrawer,
|
submitAll,
|
cancel,
|
tableRef,
|
goBack,
|
setData,
|
handleCreate,
|
handleEdit,
|
handleDelete,
|
handleSuccess,
|
};
|
},
|
});
|
</script>
|
<style lang="less" scoped>
|
.high-form {
|
padding-bottom: 48px;
|
}
|
</style>
|
