钛格BS平台管理系统 2024 版
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
Ben Lin
2024-06-27 226ad601bb8326814c3e94efd6f476014f6a9e66 
 src/views/tigerprojects/system/lowcode/composition/index.vue


@@ -1,3 +1,11 @@


<!--


 * @Description: 通用组合页面，左边是树，右边是配置


 * @Author: Ben Lin


 * @version: 


 * @Date: 2024-06-18 23:30:30


 * @LastEditors: Ben Lin


 * @LastEditTime: 2024-06-27 22:31:13


-->


<template>


  <PageWrapper


    :dense="dense"


@@ -8,22 +16,15 @@


    :content="pageContent"


    @back="goBack"


  >


    <GeneralTree


      class="w-1/4 xl:w-1/5"


      v-if="isMounted"


      @select="handleSelect"


      @UnSelect="UnSelect"


      :title="title"


      :treeData="treeData"


      :create-icon="createIcon"


      :fieldNames="fieldNames"


    /><!--


      add


      @handle-add="handleAdd" -->


    <div class="w-3/4 xl:w-4/5 p-5">


      <AddRoute v-if="entityName == 'ProdRouteBinding' && rotType == 'Product'" />


      <ActionConfig v-if="entityName == 'ProdRouteBinding' && rotType == 'Action'" />


    </div>


    <Suspense class="w-1/4 xl:w-1/5">


      <LeftTree @select="NodeSelect"/>


    </Suspense>


    <Suspense>


      <div class="w-3/4 xl:w-4/5 p-5">


        <CarGridNav v-if="showNav" />


        <Config v-if="showConfig" :configType="configType" @success="configSuccess"/>


      </div>


    </Suspense>


    <!-- <BasicTable class="w-3/4 xl:w-4/5" @register="registerTable">


      <template #toolbar>


        <a-button type="primary" @click="handleCreate" preIcon="add_02|svg"> 新增 </a-button>


@@ -65,73 +66,49 @@


</template>


<script lang="ts" setup>


  import { PageWrapper } from '@/components/Page';


  import GeneralTree from '/@/views/components/GeneralTree.vue';


  import { useModal } from '@/components/Modal';


  import GeneralModal from '/@/views/components/GeneralModal.vue';


  import AddRoute from './AddRoute.vue';


  import ActionConfig from './ActionConfig.vue';


  import CarGridNav from './CarGridNav.vue';


  import Config from './Config.vue';


  import LeftTree from './LeftTree.vue';


  import CustModal from '/@/views/components/CustModal.vue';


  import { OpenCustModal } from '../data';


  import { Ref, onMounted, provide, reactive, ref } from 'vue';


  import { Ref, onMounted, provide, ref } from 'vue';


  import { useRoute } from 'vue-router';


  import { useDrawer } from '/@/components/Drawer';


  import { BasicForm, useForm } from '/@/components/Form/index';


  import { TreeItem } from '/@/components/TigerTree';


  import { useTabs } from '/@/hooks/web/useTabs';


  import { isNullOrUnDef } from '/@/utils/is';


  import { useGo } from '/@/hooks/web/usePage';


  import { useMessage } from '/@/hooks/web/useMessage';




  defineOptions({ name: 'DeptManagement' });




  const { notification, createErrorModal } = useMessage();


  const go = useGo();


  const route = useRoute();


  const { setTitle } = useTabs();


  const objParams = ref(JSON.parse(decodeURI(route.params?.id as string))); //ref(JSON.parse(history.state.obj))


  const entityName = ref(objParams.value.Name);


  const formSchemas = ref({}); //弹出框或高级页面多表单结构


  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法


  const useFormData = ref({});


  const colSlots = ref<any>(objParams.value.colSlots); //按钮插槽


  const crudColSlots = ref<any>(objParams.value.crudColSlots);


  const cType = ref('');


  const dtlSlots = ref([] as any[]);


  const selectVals = ref({});


  const baseCards = ref([] as any[]);


  const otherCards = ref([] as any[]);


  const searchInfo = reactive<Recordable>({});


  const treeData = ref<TreeItem[]>([]);


  const title = ref('');


  const fieldNames = ref({});


  const dense = isNullOrUnDef(objParams.value.dense) ? ref(false) : ref(objParams.value.dense);


  const pageTitle = ref(objParams.value.pageTitle);


  const pageContent = ref(objParams.value.pageContent);


  const prodCode = ref('');


  const actionCode = ref('');


  const rotType = ref('');


  const nodeType = ref('');


  const selectedNodes = ref([]);


  const isMounted = ref(false);


  const showNav = ref(false);


  const showConfig = ref(false);


  const configType = ref('');


  const custImport = ref<any>(null);


  const [registerCust, { openModal: openCustomModal, closeModal }] = useModal();


  const [registerItemAdd, { openModal: openItemModal }] = useModal();


  const [registerDrawer, { openDrawer }] = useDrawer();


  provide<Ref<string>>('prodCode', prodCode);


  provide<Ref<string>>('actionCode', actionCode);


  provide<Ref<string>>('nodeType', nodeType);


  provide<Ref<any>>('objParams', objParams);


  provide<Ref<any>>('selectedNodes', selectedNodes);


  setTitle(objParams.value.Title); //设置标签页标题




  /**


   * @description: 获取树形数据


   * @param {*} type


   * @return {*}


   */


  async function fetch(type: string) {


    if (!isNullOrUnDef(custImport.value)) {


      const [{ fetchTreeData }] = custImport.value['default']();


      //根据type获取树形数据


      const data = await fetchTreeData(type, objParams.value.CODE);


      title.value = data.title;


      treeData.value = data.treeData;


      fieldNames.value = data.fieldNames;


    }


  }




  /**


   * @description: 页面左侧点击返回链接时的操作


@@ -149,48 +126,32 @@


  //   console.log('handleAdd');


  // }




  /**


   * @description: 树形节点图标


   * @param {*} params


   * @param {*} type


   * @return {*}


   */


  function createIcon(params: Recordable<any>) {


    if (isNullOrUnDef(custImport.value)) {


      return '';


    } else {


      const [{ CreateIcon }] = custImport.value['default']();


      return CreateIcon(params);


    }


  }




  onMounted(async () => {


    isMounted.value = false;


    /* 动态import实体名.ts的自定义方法 */


    try {


      custImport.value = await import(/* @vite-ignore */ `../entityts/${entityName.value}`);


      await fetch(entityName.value);


      custImport.value = await import(`../entityts/${entityName.value}.ts`);


      isMounted.value = true;


    } catch (e) {}


  });




  function handleSelect(deptId = '', info) {


    searchInfo.deptId = deptId;


    rotType.value = info.selectedNodes[0].type;


    prodCode.value =rotType.value=='Product'? info.selectedNodes[0].code: prodCode.value;


    actionCode.value =rotType.value=='Action'? info.selectedNodes[0].code: actionCode.value;


    // reload();


  /**


   * @description: 选择节点时根据返回的事件参数显示隐藏相应组件


   * @param {*} e


   * @return {*}


   */  


  function NodeSelect(e) {


    showConfig.value = e.showConfig;


    showNav.value = e.showNav;


    configType.value = e.type


  }




  /**


   * @description: 取消选择时事件返回方法


   * @param {*} node


   * @description: 保存配置成功返回方法


   * @return {*}


   */


  function UnSelect(node) {


    prodCode.value = '';


    rotType.value = '';


    // reload();


   */  


  function configSuccess() {


    notification.success({ message: '成功保存行为配置数据' });


  }




  /**


@@ -212,7 +173,7 @@


  function handleEntSuccess(d, u, item) {


    /* 动态import实体名.ts的自定义方法 */


    try {


      import(/* @vite-ignore */ `../entityts/${cType.value}`).then((m) => {


      import(`../entityts/${cType.value}.ts`).then((m) => {


        const [{ GetSelectSuccess }] = m.default();


        var values = GetSelectSuccess(d, u);


        selectVals.value = values; //保存弹出框选择的结果