Ben Lin
2024-09-11 08f1b081e006f0f3b83bcbdf47f4ef494e18450b
src/views/tigerprojects/system/lowcode/composition/Config.vue
@@ -4,7 +4,7 @@
 * @version: 
 * @Date: 2024-06-24 23:44:31
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-08-04 01:21:43
 * @LastEditTime: 2024-08-09 16:49:10
-->
<template>
  <Card :title="GetTitle(props.configType)['configTitle']">
@@ -20,29 +20,31 @@
          v-if="field"
          class="mt-1 ml-1"
          size="small"
          @click="handleSelectItem(item)"
          @click="SelectItemInForm(item)"
          preIcon="search|svg"
        />
        <GeneralModal
          @register="useModalData[item][0]"
          @success="(d, u) => handleItemSuccess(d, u, item)"
          @success="(d, u) => SelectInFormSuccess(d, u, item)"
        />
      </template>
    </BasicForm>
  </Card>
  <Card
    :title="GetTitle(props.configType)['tableTitle']"
    :title="GetTitle(props.configType, item)['tableTitle']"
    :bordered="false"
    class="!mt-5"
    v-if="showOtherTable"
  >
    <BasicTable @register="useTables['Table']">
    v-for="item in OtherTables"
    :key="item"
    v-show="showOtherTable[item]">
    <BasicTable @register="useTables[item][0]"
    v-if="showOtherTable[item]">
      <template #action="{ record }">
        <TableAction :actions="createActions(record)" />
        <TableAction :actions="createActions(record, item)" />
      </template>
    </BasicTable>
    <normalDrawer @register="useDrawers[item][0]" @success="(d,u) => EditSuccess(d, u, item)" />
  </Card>
  <normalDrawer @register="registerDrawer" @success="handleSuccess" />
</template>
<script lang="ts" setup>
  import { Ref, inject, nextTick, onMounted, ref, unref, watch } from 'vue';
@@ -61,9 +63,8 @@
  const emit = defineEmits(['success', 'register']);
  const props = defineProps({
    configType: { type: String },
    OtherTableName: { type: String },
  });
  const showOtherTable = ref(false);
  const showOtherTable = ref<any>({}); //显示表格布尔对象
  const objParams = inject('objParams') as Ref<any>;
  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
@@ -106,11 +107,17 @@
    ? EntityCustFunction.value
    : custImport.value['default']();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const useModalData = ref(GetUseModals());
  const data = ref({});
  const useTables = ref(GetUseTables(data, emit));
  const useForms = ref(GetUseForm());
  const useDrawers = ref({});
  const OtherTables = ref(objParams.value['OtherTableName']);
  /* 循环自定义表格名列表,初始化显示表格布尔对象 */
  objParams.value['OtherTableName'].forEach((x) => {
    showOtherTable.value[x] = false;
    useDrawers.value[x] = useDrawer();
  });
  /* 注入选中节点数据 */
  const selectedNodes = inject('selectedNodes') as Ref<any>;
@@ -129,24 +136,27 @@
            setProps({
              schemas: GetCrudForm(newVal[0].type),
            });
            showOtherTable.value = result.isShow;
            /* 显示其他表格 */
            if (showOtherTable.value) {
              showOtherTable.value = false;
              data.value['Table'] = result['Table'];
              setTimeout(() => {
                showOtherTable.value = true;
              }, 10);
            const name = result['name'];
            if (showOtherTable.value[name]) {
              showOtherTable.value[name] = false;
              data.value[name] = result[name];
              data.value['Action'] = result['Action'];
              useTables.value = GetUseTables(data, emit);
              setTimeout(() => {
                // useTables.value['Table'][1].setProps({
                showOtherTable.value[name] = true;
              }, 10);
              setTimeout(() => {
                if (!isNullOrUnDef(name)) {
                // useTables.value[name][1].setProps({
                //   dataSource: [],
                // });
                // useTables.value['Table'][1].setProps({
                //   dataSource: data.value['Table'],
                // useTables.value[name][1].setProps({
                //   dataSource: data.value[name],
                // });
                useTables.value['Table'][1].reload();
              }, 10);
                  useTables.value[name][1].reload();
                }
              }, 1000);
            }
          });
        }
@@ -160,18 +170,28 @@
    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['Action'] = result['Action'];
      useTables.value = GetUseTables(data, emit);
      if (showOtherTable.value[result['name']]) {
        data.value[result['name']] = result[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);
@@ -185,30 +205,31 @@
      // });
    } 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],
    };
    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,
      },
    ];
@@ -221,30 +242,29 @@
   * @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: data,
      }).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);
          setTimeout(() => {
            useTables.value['Table'][1].reload();
            useTables.value[item][1].reload();
            useForms.value['Action'][1].resetFields();
            useForms.value['Action'][1].setFieldsValue(data.value['Action'][0]);
          }, 10);
        }
      });
    }
    useTables.value['Table'][1].reload();
    useTables.value[item][1].reload();
  }
  /**
@@ -252,7 +272,7 @@
   * @param {*} item
   * @return {*}
   */
  function handleSelectItem(item) {
  function SelectItemInForm(item) {
    OpenSelectItem(useModalData.value[item][1].openModal, item);
  }
@@ -263,18 +283,24 @@
   * @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']);
      data.value[props.configType 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();
      data.value[result.name] = result['data']
      /* 重新useTable,否则数据不刷新 */
      useTables.value = GetUseTables(data, emit);
      if (showOtherTable.value[result.name]) {
          showOtherTable.value[result.name] = false;
          setTimeout(() => {
            showOtherTable.value[result.name] = true;
          }, 10);
        useTables.value[result.name][1].reload();
      }
    });
  }