表单日期转换

Ben Lin

2025-03-07 42cf9e613a4c24b1e0ca40b961ebbfe91d0d4122

 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-07-03 21:57:32
 * @LastEditTime: 2024-08-01 10:40:57
-->
<template>
  <a-card
@@ -13,15 +13,32 @@
    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 },
  });
@@ -29,21 +46,19 @@
  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/${props.entityName}.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,
@@ -59,11 +74,105 @@
    getEntity({
      sqlcmd: ` ID = '${objParams.value['ID']}'`,
      entityName: _baseCards.value[0]['entityName'],
      order: ''
      order: '',
    }).then((res) => {
      if (!isNullOrEmpty(res.Data.Items)) {
        /* 循环字段名，判断如果是时间的就转换成dayjs格式，否则时间选择器会出错 */
        const Keys = Object.getOwnPropertyNames(res.Data.Items[0]);
        for (const k in Keys) {
          if (
            !isNullOrUnDef(res.Data.Items[0][Keys[k]]) &&
            isTimeViaRegExp8601(res.Data.Items[0][Keys[k]])
          ) {
            res.Data.Items[0][Keys[k]] = dateUtil(res.Data.Items[0][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>