一些更改

Ben Lin

2024-10-10 cf2389121671bc8d09f32175acae80b074e21fc3

 src/views/tigerprojects/bas/checkrule/ruleDetail.vue

@@ -5,39 +5,29 @@
    </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>
@@ -54,299 +44,302 @@
  </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>