一些更新

Ben Lin

2025-02-25 fee83fc57f553595cc3a4891b8a692fa66cd77fe

 src/views/tigerprojects/system/lowcode/composition/Config.vue

@@ -4,66 +4,76 @@
 * @version: 
 * @Date: 2024-06-24 23:44:31
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-08-04 01:21:43
 * @LastEditTime: 2024-10-17 20:28:47
-->
<template>
  <Card :title="GetTitle(props.configType)['configTitle']">
  <Card :title="GetTitle(configType)['configTitle']">
    <BasicForm
      @register="useForms[d]"
      @submit="customSubmitFunc"
      v-for="d in Object.keys(useForms)"
      :key="d"
      v-show="d == props.configType"
      v-show="d == configType"
    >
      <template #[item]="{ field }" v-for="item in GetCrudColSlots()" :key="item">
      <template #[item.name]="{ field }" v-for="item in GetCrudColSlots()" :key="item.name">
        <a-button
          v-if="field"
          class="mt-1 ml-1"
          size="small"
          @click="handleSelectItem(item)"
          preIcon="search|svg"
          @click="SelectItemInForm(item.name)"
          :preIcon="item.icon"
        />
        <GeneralModal
          @register="useModalData[item][0]"
          @success="(d, u) => handleItemSuccess(d, u, item)"
          @register="useModalData[item.name][0]"
          @success="(d, u) => SelectInFormSuccess(d, u, item.name)"
        />
        <GeneralCrudModal @register="useModalsCrudInForm[item.name][0]"></GeneralCrudModal>
      </template>
    </BasicForm>
  </Card>
  <Card
    :title="GetTitle(props.configType)['tableTitle']"
    :title="GetTitle(configType, item)['tableTitle']"
    :bordered="false"
    class="!mt-5"
    v-if="showOtherTable"
    v-for="item in OtherTables"
    :key="item"
    v-show="showOtherTable[item]"
    class="mt-1"
  >
    <BasicTable @register="useTables['Table']">
      <template #action="{ record }">
        <TableAction :actions="createActions(record)" />
      </template>
    </BasicTable>
    <div :style="custTableStyle">
      <BasicTable @register="useTables[item][0]" v-if="showOtherTable[item]">
        <template #action="{ record }">
          <TableAction :actions="createActions(record, item)" />
        </template>
      </BasicTable>
    </div>
    <normalDrawer @register="useDrawers[item][0]" @success="(d, u) => EditSuccess(d, u, item)" />
    <GeneralCrudModal @register="useModalsCrud[item][0]"></GeneralCrudModal>
  </Card>
  <normalDrawer @register="registerDrawer" @success="handleSuccess" />
</template>
<script lang="ts" setup>
  import { Ref, inject, nextTick, onMounted, ref, unref, watch } from 'vue';
  import { Ref, inject, nextTick, onMounted, ref, toRef, toRefs, unref, watch } from 'vue';
  import { BasicForm } from '/@/components/Form/index';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { Card } from 'ant-design-vue';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import GeneralCrudModal from '/@/views/components/GeneralCrudModal.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { isFunction, isNullOrUnDef } from '/@/utils/is';
  import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel';
  import { editRecord } from '../data';
  import { useDrawer } from '/@/components/Drawer';
  import normalDrawer from '../normalDrawer.vue';
  import { useModal } from '/@/components/Modal';
  import { useProdRouteStore } from '/@/store/modules/prodRoute';
  import { storeToRefs } from 'pinia';

  const { t } = useI18n();
  const emit = defineEmits(['success', 'register']);
  const props = defineProps({
    configType: { type: String },
    OtherTableName: { type: String },
  });
  const showOtherTable = ref(false);
  const configType = toRef(props, 'configType');
  const showOtherTable = ref<any>({}); //显示表格布尔对象
  const objParams = inject('objParams') as Ref<any>;
  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
@@ -101,19 +111,35 @@
      GetUseTables,
      GetUseForm,
      CustFunc,
      GetUseCrudModals,
      ActionItem,
    },
  ] = isNullOrUnDef(custImport.value['default'])
    ? EntityCustFunction.value
    : custImport.value['default']();

  const [registerDrawer, { openDrawer }] = useDrawer();
  const useProdRoute = useProdRouteStore();
  const { curDtl } = storeToRefs(useProdRoute);
  const useModalData = ref(GetUseModals());
  const data = ref({});
  const useTables = ref(GetUseTables(data, emit));
  // const data = ref({});
  const useTables = ref(GetUseTables(curDtl, emit));
  const useForms = ref(GetUseForm());
  const useDrawers = ref({});
  const useModalsCrud = ref({});
  const useModalsCrudInForm = ref(GetUseCrudModals());
  const OtherTables = ref(objParams.value['OtherTableName']);
  /* 循环自定义表格名列表，初始化显示表格布尔对象 */
  objParams.value['OtherTableName'].forEach((x) => {
    showOtherTable.value[x] = false;
    useDrawers.value[x] = useDrawer();
    useModalsCrud.value[x] = useModal();
  });
  const custTableStyle = ref({
    height: window.screen.width == 1366 ? '350px' : '450px',
  });

  /* 注入选中节点数据 */
  const selectedNodes = inject('selectedNodes') as Ref<any>;
  const mainRecord = ref(objParams.value.record);
  watch(
    () => selectedNodes.value,
    (newVal, oldVal) => {
@@ -129,24 +155,27 @@
            setProps({
              schemas: GetCrudForm(newVal[0].type),
            });
            showOtherTable.value = result.isShow;
            /* 显示其他表格 */
            if (showOtherTable.value) {
              showOtherTable.value = false;
              data.value['Table'] = result['Table'];
            const name = result['name'];
            if (showOtherTable.value[name]) {
              showOtherTable.value[name] = false;
              // data.value[name] = curDtl.value[name]; //result[name];
              // data.value['Action'] = curDtl.value['Action']; //result['Action'];
              useTables.value = GetUseTables(curDtl, emit);
              setTimeout(() => {
                showOtherTable.value = true;
                showOtherTable.value[name] = true;
              }, 10);
              useTables.value = GetUseTables(data, emit);
              setTimeout(() => {
                // useTables.value['Table'][1].setProps({
                //   dataSource: [],
                // });
                // useTables.value['Table'][1].setProps({
                //   dataSource: data.value['Table'],
                // });
                useTables.value['Table'][1].reload();
              }, 10);
                if (!isNullOrUnDef(name)) {
                  // useTables.value[name][1].setProps({
                  //   dataSource: [],
                  // });
                  // useTables.value[name][1].setProps({
                  //   dataSource: data.value[name],
                  // });
                  useTables.value[name][1].reload();
                }
              }, 1000);
            }
          });
        }
@@ -160,21 +189,31 @@
    const nodes = selectedNodes.value;
    nodeChange({ useForms, objParams, selectedNodes: nodes }).then((result) => {
      showOtherTable.value = result.isShow;
      if (showOtherTable.value) {
        useTables.value['Table'][1].setProps({
          dataSource: [],
        });
        useTables.value['Table'][1].setProps({
          dataSource: result['Table'],
        });
        useTables.value['Table'][1].reload();
      // data.value[configType.value as string] = curDtl.value[configType.value as string]; //result[configType.value as string];
      useTables.value = GetUseTables(curDtl, emit);
      if (showOtherTable.value[curDtl.value['name']]) {
        // curDtl.value[result['name']] = curDtl.value[result['name']];
        // useTables.value[result['name']][1].setProps({
        //   dataSource: [],
        // });
        // useTables.value[result['name']][1].setProps({
        //   dataSource: result[result['name']],
        // });
        if (!isNullOrUnDef(result['name'])) {
          useTables.value[result['name']][1].reload();
        }
      }
    });
  });

  /**
   * @description: 自定义提交方法
   * @param {*} values
   * @return {*}
   */
  async function customSubmitFunc(values) {
    try {
      SubmitFunc(values, props.configType, emit);
      SubmitFunc(values, configType.value, emit);
      // values.AUTH_PROD = useUserStore().getUserInfo.prodCode;
      // values.FACTORY = useUserStore().getUserInfo.prodCode;
      // const apiAction = SaveEntity(values, true, 'MES_PROD_ACTION');
@@ -185,34 +224,42 @@
      // });
    } catch (e) {}
  }

  /**
   * @description: 生成列表中操作项的按钮
   * @param {*} record
   * @return {*}
   */
  function createActions(record) {
  function createActions(record, name) {
    const params = {
      record,
      isUpdate: true,
      entityName: objParams.value['OtherTableName'],
      formJson: GetCrudForm(props.OtherTableName),
      ifSave: true,
      entityName: name,
      formJson: GetCrudForm(name),
      ifSave: objParams.value['ifSave'],
      // cType,
      // dtlSlots,
      // formSchemas,
      // useModalData,
      // useFormData,
      crudColSlots: objParams.value['crudColSlots'],
      crudColSlots: objParams.value['crudColSlots'][name],
      mainRecord: mainRecord.value,
    };

    const actionItem = [
      {
        icon: 'clarity:note-edit-line',
        onClick: editRecord.bind(null, openDrawer, params),
        onClick: editRecord.bind(null, useDrawers.value[name][1].openDrawer, params),
        name: undefined,
      },
    ];
    return actionItem;
    return ActionItem(
      params,
      actionItem,
      useModalsCrud.value[name][1].openModal,
      useTables.value[name][1].reload(),
      objParams.value['CODE'],
    );
  }

  /**
@@ -221,39 +268,48 @@
   * @param {*} u
   * @return {*}
   */
  function handleSuccess(d, u) {
  function EditSuccess(d, u, item) {
    if (CustFunc && isFunction(CustFunc)) {
      CustFunc(
        {
          ctype: objParams.value['OtherTableName'],
          values: d,
          data: data,
        },
        useTables,
      ).then(() => {
      CustFunc({
        ctype: item,
        values: d,
        data: curDtl,
      }).then(() => {
        /* 显示其他表格 */
        if (showOtherTable.value) {
          showOtherTable.value = false;
        if (showOtherTable.value[item]) {
          showOtherTable.value[item] = false;
          setTimeout(() => {
            showOtherTable.value = true;
            showOtherTable.value[item] = true;
          }, 10);
          useTables.value = GetUseTables(data, emit);
          useTables.value = GetUseTables(curDtl, emit);
          setTimeout(() => {
            useTables.value['Table'][1].reload();
            useTables.value[item][1].reload();
            useForms.value[configType.value as string][1].resetFields();
            useForms.value[configType.value as string][1].setFieldsValue(
              curDtl.value[configType.value as string][0],
            );
          }, 10);
        }
      });
    }
    useTables.value['Table'][1].reload();
    useTables.value[item][1].reload();
  }

  /**
   * @description: 点击打开弹出选择列表框
   * @param {*} item
   * @param {*} item slot名字
   * @return {*}
   */
  function handleSelectItem(item) {
    OpenSelectItem(useModalData.value[item][1].openModal, item);
  function SelectItemInForm(item) {
    const record = useForms.value[configType.value][1].getFieldsValue();
    OpenSelectItem(
      useModalData.value[item][1].openModal,
      item,
      useModalsCrudInForm.value[item][1].openModal,
      record,
      objParams.value['CODE'],
      mainRecord.value,
    );
  }

  /**
@@ -263,18 +319,26 @@
   * @param {*} item
   * @return {*}
   */
  function handleItemSuccess(d, u, item) {
  function SelectInFormSuccess(d, u, item) {
    GetSelectSuccess(d, u, item).then((result) => {
      useForms.value[props.configType][1].setFieldsValue(result['value']);
      useForms.value[configType.value][1].setFieldsValue(result['value']);
      if (!isNullOrUnDef(curDtl.value[configType.value as string])) {
        curDtl.value[configType.value as string].map((x) => {
          Object.getOwnPropertyNames(result['value']).forEach((key) => {
            x[key] = result['value'][key];
          });
        });
      }
      showOtherTable.value = result['isShow'];
      if (showOtherTable.value) {
        useTables.value['Table'][1].setProps({
          dataSource: [],
        });
        useTables.value['Table'][1].setProps({
          dataSource: result['data'],
        });
        useTables.value['Table'][1].reload();
      curDtl.value[result.name] = result['data'];
      /* 重新useTable，否则数据不刷新 */
      useTables.value = GetUseTables(curDtl, emit);
      if (showOtherTable.value[result.name]) {
        showOtherTable.value[result.name] = false;
        setTimeout(() => {
          showOtherTable.value[result.name] = true;
        }, 10);
        useTables.value[result.name][1].reload();
      }
    });
  }