标签模板维护变量更新

Ben Lin

2024-07-30 cc88111d61a350a4d24cf339b526d4357f934ddf

 src/views/tigerprojects/system/lowcode/detail/detail.vue

@@ -4,9 +4,9 @@
      <template #toolbar>
        <a-button
          type="primary"
          v-for="item in buttons.filter((m) => m['BUTTON_TYPE'] == 0)"
          @click="handleCreate(item['DO_METHOD'])"
          :preIcon="item['ICON_URL']"
          v-for="item in buttons.filter((m) => m['BUTTON_TYPE'] == 0)"
          :key="item"
        >
          {{ item['FUNC_NAME'] }}
@@ -30,16 +30,47 @@
        />
      </template>
    </BasicTable>
    <Suspense>
      <CustModal
        @register="registerCust"
        @success="custSuccess"
        @cancel="custCancel"
        :type="cType"
        :entityName="entityName"
        @modalInner="getdtlSlots"
      >
        <!-- 用插槽自定义多表单 -->
        <template #[item.name] v-for="item in dtlSlots" :key="item.name">
          <BasicForm @register="useFormData[item.name][0]" v-if="useFormData[item.name]">
            <!-- 用插槽自定义弹出选择框 -->
            <template #[name]="{ field }" v-for="name in item.slots" :key="name">
              <a-button
                class="mt-1 ml-1"
                size="small"
                @click="handleCustClick(field)"
                :preIcon="item.preIcons[name]"
              />
              <GeneralModal
                @register="useModalData[name][0]"
                @success="(d, u) => handleEntSuccess(d, u, item.name)"
              />
            </template>
          </BasicForm>
          <!-- 自定义内容 -->
        </template>
      </CustModal>
    </Suspense>
    <normalDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { Ref, inject, onMounted, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useForm } from '/@/components/Form/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { useDrawer } from '/@/components/Drawer';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import normalDrawer from '../normalDrawer.vue';
  import CustModal from '/@/views/components/CustModal.vue';
  import { isFunction, isNullOrUnDef } from '/@/utils/is';
  import { useModal } from '/@/components/Modal';
  import { useGo } from '/@/hooks/web/usePage';
@@ -62,11 +93,11 @@
  const go = useGo();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const [registerCust, { openModal: openCustModal }] = useModal();
  const cType = ref('');
  const selectVals = ref({});
  const colSlots = ref<any>(objParams['colSlots']); //按钮插槽
  const dtlSlots = ref([] as any[]);
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const useFormData = ref({});
  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
    {
@@ -94,6 +125,8 @@
      KeyFieldValues,
      GetSelectSuccess,
      OpenSelectItem,
      GetUseForm,
      GetUseModals,
    },
  ] = isNullOrUnDef(custImport.value['default'])
    ? EntityCustFunction.value
@@ -103,6 +136,11 @@
    KeyFieldValues && isFunction(KeyFieldValues)
      ? KeyFieldValues(objParams['CODE'], objParams['ID'])
      : [];
  const useformdata = GetUseForm && isFunction(GetUseForm) ? GetUseForm() : {};
  const useFormData = ref<any>(useformdata);
  /* 表单中插槽渲染按钮打开模态框useModal方法 */
  const modals = GetUseModals && isFunction(GetUseModals) ? GetUseModals() : { useModalData: {} };
  const useModalData = ref(modals['useModalData']);
  const [registerTable, { getForm, reload, setProps }] = useTable({
    title: `${objParams['firstTitle']}列表`,
    api: getListByPage,
@@ -146,6 +184,8 @@
      useFormData,
      crudColSlots: colSlots.value,
      data,
      selectVals,
      colSlots,
    };
    const actionItem = GenerateActionButton(params, buttons, openDrawer, reload);
    if (isNullOrUnDef(custImport.value['default'])) {
@@ -161,6 +201,7 @@
      useModal,
      go,
      setProps,
      openCustModal,
    );
  }

@@ -185,16 +226,17 @@
      });
    } else {
      const [{ CreateAction }] = custImport.value['default']();
      const result = CreateAction(fnName);
      const result = CreateAction(props.entityName);
      switch (result.action) {
        case 'go':
          sessionStorage.removeItem(`${result.params.Name}_update_params`);
          // 将对象转换为JSON字符串并保存到sessionStorage
          sessionStorage.setItem(
            `${result.params.Name}_params`,
            `${result.params.Name}_update_params`,
            encodeURI(JSON.stringify(result.params)),
          );
          go(
            `/${result.url}/${encodeURI(JSON.stringify({ sName: result.params.Name, Name: result.params.Name }))}`,
            `/${result.url}/${encodeURI(JSON.stringify({ sName: `${result.params.Name}_update`, Name: result.params.Name }))}`,
          );
          break;
        case 'drawer':
@@ -241,4 +283,69 @@
  function handleSelectItem(item) {
    OpenSelectItem(openItemModal);
  }

  /**
   * @description: 弹出框确定返回
   * @param {*} d
   * @return {*}
   */
  function custSuccess(d) {
    reload();
  }

  /**
   * @description: 弹出框取消返回
   * @param {*} reload
   * @return {*}
   */
  function custCancel() {
    reload();
  }

  /**
   * @description: 各表单内弹出选择框选择成功后方法
   * @param {*} d
   * @param {*} u
   * @param {*} item
   * @return {*}
   */
  function handleEntSuccess(d, u, item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      var values = GetSelectSuccess(d, u);
      selectVals.value = values; //保存弹出框选择的结果
      let _val = {};
      d.returnFieldName.map((x) => {
        _val[x] = values[x];
      });
      useFormData.value[item][1].setFieldsValue(_val);
    } catch (e) {}
  }

  /**
   * @description: 打开表单中的模态框
   * @param {*} item
   * @return {*}
   */
  function handleCustClick(item) {
    OpenSelectItem(
      useModalData.value[item][1].openModal, //带入openModal方法
      item,
      null,
      selectVals,
    );
  }

  /**
   * @description: 获取多表单插槽列表
   * @param {*} d
   * @return {*}
   */
  function getdtlSlots(d, callback) {
    dtlSlots.value = d;
    callback();
    // setTimeout(() => {
    //   callback();
    // }, 100);
  }
</script>