高级页面主Form日期字段转换格式，否则出错

Ben Lin

2025-03-07 ce374a9f4920a2d0e5ebe81a9872436088db6d55

 src/views/tigerprojects/system/lowcode/high/baseForm.vue

@@ -4,7 +4,7 @@
 * @version: 
 * @Date: 2024-06-23 17:21:29
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-23 18:08:08
 * @LastEditTime: 2024-08-01 10:40:57
-->
<template>
  <a-card
@@ -13,35 +13,52 @@
    v-for="(item, index) in _baseCards"
    :key="item.name"
  >
    <BasicForm @register="useFormData[item.name][0]" />
    <BasicForm @register="useFormData[item.name][0]">
      <template #[l]="{ field }" v-for="l in colSlots" :key="l">
        <a-button
          v-if="field"
          class="mt-1 ml-1"
          size="small"
          @click="handleSelectItem(l)"
          preIcon="search|svg"
        />
        <GeneralModal @register="useModals[l]" @success="(d, u) => handleItemSuccess(d, u, l)" />
      </template>
    </BasicForm>
  </a-card>
</template>
<script lang="ts" setup>
  import { Ref, inject, nextTick, onMounted, ref, watch } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import { Card } from 'ant-design-vue';
  import { getEntity } from '/@/api/tigerapi/system';
  import { isNullOrEmpty } from '/@/utils/is';
  import { isNullOrEmpty, isNullOrUnDef, isTimeViaRegExp8601 } from '/@/utils/is';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { isFunction } from 'xe-utils';
import { dateUtil } from '/@/utils/dateUtil';

  const { t } = useI18n();
  const props = defineProps({
    entityName: { type: String },
  });
  const ACard = Card;
  const objParams = inject('objParams') as Ref<any>;
  const useFormData = inject('useFormData') as Ref<{}>;
  const baseCards = inject('baseCards') as Ref<any>;
  const custImport = ref<any[]>(
    await import(`../entityts/${objParams['Name']}.ts`),
  );
  const [
    {
      GetBaseForm,
      GetBaseCards,
    },
  ] = custImport.value['default']();
  const custImport = ref<any[]>(await import(`../entityts/${props.entityName}.ts`));
  const [{ GetBaseForm, GetBaseCards, GetUseModals }] = custImport.value['default']();
  const formSchemas = ref({
    BaseForm: GetBaseForm(),
  }); //弹出框或高级页面多表单结构
    BaseForm: GetBaseForm(props.entityName, objParams.value['IsEdit']),
  });
  const colSlots = ref<any[]>(objParams.value['colSlotsInHigh']);
  const useModals =
    GetUseModals && isFunction(GetUseModals) ? ref<any>(GetUseModals()) : ref<any>({});

  //弹出框或高级页面多表单结构
  useFormData.value = {
    BaseForm: useForm({
      labelWidth: 120,
      labelWidth: 160,
      schemas: formSchemas.value['BaseForm'],
      actionColOptions: {
        span: 24,
@@ -55,12 +72,104 @@
  onMounted(() => {
    useFormData.value[_baseCards.value[0]['name']][1].resetFields();
    getEntity({
      sqlcmd: ` ID = '${objParams['ID']}'`,
      sqlcmd: ` ID = '${objParams.value['ID']}'`,
      entityName: _baseCards.value[0]['entityName'],
      order: '',
    }).then((res) => {
      if (!isNullOrEmpty(res.Data.Items)) {
        /* 循环字段名，判断如果是时间的就转换成dayjs格式，否则时间选择器会出错 */
      const Keys = Object.getOwnPropertyNames(res.Data.Items);
      for (const k in Keys) {
        if (!isNullOrUnDef(res.Data.Items[Keys[k]]) && isTimeViaRegExp8601(res.Data.Items[Keys[k]])) {
          res.Data.Items[Keys[k]] = dateUtil(res.Data.Items[Keys[k]]); //转换成dayjs格式
        }
      }
        useFormData.value[_baseCards.value[0]['name']][1].setFieldsValue(res.Data.Items[0]);
      } else {
        useFormData.value[_baseCards.value[0]['name']][1].setFieldsValue({
          ID: objParams.value['ID'],
        });
      }
    });
  });

  /**
   * @description: 弹出选择框选择成功后事件
   * @param {*} d
   * @param {*} u
   * @param {*} item 页面上循环抽屉列表传入的实体名字，作为各表格相关方法的key，从而调用各表格相关的方法，如：useFormData.value[_baseCards.value[0]['name']][1].getForm()
   * @return {*}
   */
  function handleItemSuccess(d, u, item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(
        `../entityts/${useFormData.value[_baseCards.value[0]['name']][1].getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}.ts`
      )
        .then((m) => {
          const [{ GetSelectSuccess }] = m.default();
          useFormData.value[_baseCards.value[0]['name']][1].setFieldsValue(GetSelectSuccess(d, u));
        })
        .catch(() => {
          useFormData.value[_baseCards.value[0]['name']][1].setFieldsValue({
            ITEM_CODE: d.values['val'],
          });
        });
    } catch (e) {}
  }

  /**
   * @description: 弹出选择框
   * @param {*} item
   * @return {*}
   */
  function handleSelectItem(item) {
    /* 动态import实体名.ts的自定义方法 */
    const name =
      useFormData.value[_baseCards.value[0]['name']][1].getFieldsValue()[
        `${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`
      ];
    const openModal = useModals.value[item][1].openModal;
    try {
      import(`../entityts/${name}.ts`)
        .then((m) => {
          const [{ OpenSelectItem }] = m.default();
          OpenSelectItem(openModal);
        })
        .catch(() => {
          openModal(true, {
            title: '物料列表',
            schemas: [
              {
                field: 'ITEM_CODE',
                component: 'Input',
                label: '物料编码',
                colProps: {
                  span: 12,
                },
              },
            ],
            ItemColumns: [
              {
                title: t('物料编码'),
                dataIndex: 'ITEM_CODE',
                resizable: true,
                sorter: true,
                width: 200,
              },
              {
                title: t('物料名称'),
                dataIndex: 'ITEM_NAME',
                resizable: true,
                sorter: true,
                width: 180,
              },
            ],
            tableName: 'BAS_ITEM',
            rowKey: 'ITEM_CODE',
            searchInfo: { TABLE_NAME: 'BAS_ITEM' },
          });
        });
    } catch (e) {}
  }
</script>