| | |
| | | </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 |
| | | > |
| | | <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), |
| | | <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), |
| | | }, |
| | | { |
| | | icon: 'ant-design:delete-outlined', |
| | | color: 'error', |
| | | popConfirm: { |
| | | title: '是否确认删除?', |
| | | placement: 'left', |
| | | confirm: handleDelete.bind(null, record), |
| | | }, |
| | | }, |
| | | ]" |
| | | /> |
| | | name: '' |
| | | }, |
| | | ]" /> |
| | | </template> |
| | | </BasicTable> |
| | | </div> |
| | |
| | | </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'; |
| | | 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(); |
| | | 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 { 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({}); |
| | | } |
| | | 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; |
| | | 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(); |
| | | } |
| | | 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, |
| | | }); |
| | | } |
| | | } |
| | | } 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 handleEdit(record: Recordable) { |
| | | openDrawer(true, { |
| | | record, |
| | | isUpdate: true, |
| | | }); |
| | | } |
| | | |
| | | function handleDelete(record: Recordable) { |
| | | 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; |
| | | }); |
| | | 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, |
| | | }; |
| | | } 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; |
| | | }); |
| | | data.value = _data; |
| | | d.RULE_SEQ = |
| | | data.value.reduce((maxLength, item) => { |
| | | return Math.max(maxLength, item.RULE_SEQ); |
| | | }, 0) + 1; |
| | | } 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; |
| | | d.RULE_SEQ = 1; |
| | | } |
| | | |
| | | //重新修改数据源 |
| | | |
| | | getTableAction().setProps({ |
| | | dataSource: [], |
| | | }); |
| | | getTableAction().setProps({ |
| | | dataSource: data, |
| | | }); |
| | | getTableAction().reload(); |
| | | setData(); |
| | | // _data2.splice(0, 0, d); |
| | | _data2.push(d); |
| | | data.value = _data2; |
| | | } |
| | | function setData() { |
| | | var CHECK_TYPE = 0; |
| | | var CHECK_REGEX = '^'; |
| | | const total = data.value.reduce((length, item) => { |
| | | if (item.DATA_TYPE == 5) { |
| | | 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, |
| | | }; |
| | | }, |
| | | }); |
| | | //重新修改数据源 |
| | | |
| | | 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; |
| | | } |
| | | .high-form { |
| | | padding-bottom: 48px; |
| | | } |
| | | </style> |