一些更改

Ben Lin

2024-10-10 cf2389121671bc8d09f32175acae80b074e21fc3

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

@@ -1,138 +1,184 @@
<!--
 * @Description: 工艺路线添加页面
 * @Description: 导航页面
 * @Author: Ben Lin
 * @version: 
 * @Date: 2024-06-20 12:13:27
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-26 16:00:06
 * @LastEditTime: 2024-10-07 16:52:03
-->
<template>
  <Card title="添加工艺">
    <CardGrid v-for="item in navItems" :key="item.title" @click="changeItem(item.action)">
      <span class="flex flex-col items-center">
  <Card :title="GetTitle(props.configType)['navTitle']">
    <CardGrid
      v-for="item in GetNavItems(props.configType)"
      :key="item.title"
      @click="
        navChangeItem(
          item.action,
          !item.isCustEl ? useModalData[item.action][1].openModal : null,
          openRvModal,
          selectedNodes,
          keyCode,
        )
      "
    >
      <Form class="properties-body" label-align="left" layout="vertical" v-if="item.isCustEl">
        <FormItem label="是否默认" name="是否默认">
          <Switch
            v-model:checked="isDefault[selectedNodes[0]['code']]"
            @change="(e) => switchChange(e, selectedNodes[0])"
          />
        </FormItem>
      </Form>
      <span v-if="!item.isCustEl" class="flex flex-col items-center">
        <Icon :icon="item.icon" :color="item.color" size="20" />
        <span class="text-md mt-2 truncate">{{ item.title }}</span>
      </span>
      <GeneralModal
        v-if="!item.isStep && !item.isCustEl"
        @register="useModalData[item.action][0]"
        @success="(d, u) => handleSuccess(d, u, item.action, objParams, refreshPage)"
      ></GeneralModal>
      <StepModal
        v-if="item.isStep"
        @register="useModalData[item.action][0]"
        @success="(d, u) => handleSuccess(d, u, item.action, objParams, refreshPage)"
      />
    </CardGrid>
  </Card>
  <GeneralModal @register="register" @success="handleSuccess"></GeneralModal>
  <!-- 其他自定义卡片内容 -->
  <a-card
    :title="item.title"
    :bordered="false"
    class="!mt-2"
    v-for="(item, index) in otherSlots"
    :key="item.name"
  >
    <slot :name="item.name" :index="index"></slot>
  </a-card>
  <RouteViewModal @register="registerRv" @success="RvItemSuccess" />
</template>
<script lang="ts" setup>
  import { Card, CardGrid } from 'ant-design-vue';
  import { Card, CardGrid, Switch, Form, FormItem } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';
  import { RouteToCust, RouteToProd } from '/@/api/tigerapi/mes/router';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Ref, inject, ref, watch } from 'vue';
  import { isNullOrEmpty } from '/@/utils/is';
  import RouteViewModal from '/@/views/components/RouteViewModal.vue';
  import StepModal from '/@/views/components/StepModal.vue';
  import { Ref, inject, nextTick, onMounted, ref, watch } from 'vue';
  import { isNullOrUnDef } from '/@/utils/is';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel';
  import { useModal } from '/@/components/Modal';
  import { CustModalParams } from '/@/api/tigerapi/model/systemModel';

  const ACard = Card;
  const objParams = inject('objParams') as Ref<any>;
  const custImport = ref<any[]>(await import(`../entityts/${objParams.value['Name']}.ts`));
  const [{ EditeOperation, GetBaseColumns, GetSearchForm, GetCrudForm, OthersValues }] =
    custImport.value['default']();
  const selectedNodes = inject('selectedNodes') as Ref<any>;
  const props = defineProps({
    configType: { type: String },
    nodes: { type: Array as PropType<any[]> },
  });
  const keyCode = ref(objParams.value['CODE']);
  const isDefault = ref({});
  isDefault[selectedNodes.value[0]['code']] = false;
  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
    {
      GetTitle(type: string | undefined) {},
      GetNavItems(type: string) {},
      navChangeItem(action: any, ...args) {},
      GetUseModals() {},
      GetBaseCards(type: string | undefined) {},
      GetSelectSuccess(d, u, ...args) {},
      GenerateHtml(ype: string | null) {},
      CustFunc(param: CustModalParams) {},
    } as EntityCustFunctionType,
  ]);
  /* 动态import实体名.ts的自定义方法 */
  try {
    custImport.value = await import(`../entityts/${objParams.value['Name']}.ts`);
  } catch (e) {}
  const [
    {
      GetTitle,
      GetNavItems,
      navChangeItem,
      GetUseModals,
      GetSelectSuccess,
      GetBaseCards,
      GenerateHtml,
      CustFunc,
    },
  ] = isNullOrUnDef(custImport.value['default'])
    ? EntityCustFunction.value
    : custImport.value['default']();

  const useModalData = ref(GetUseModals());
  const otherSlots = ref<any[]>(GetBaseCards(props.configType));
  const { refreshPage } = useTabs();
  const { createErrorModal } = useMessage();
  const { t } = useI18n();
  const [register, { openModal }] = useModal();
  interface NavItem {
    title: string;
    icon: string;
    color: string;
    url: string;
    action: string;
  }
  const [registerRv, { openModal: openRvModal }] = useModal();

  // watch(
  //   () => Prod_Code,
  //   (v) => {
  //     if (v !== Prod_Code.value) {
  //       Prod_Code.value = isNullOrEmpty(v) ? Prod_Code.value : v;
  //     }
  //   },
  //   { deep: true },
  // );
  watch(
    [() => props.configType, () => props.nodes],
    (v) => {
      otherSlots.value = GetBaseCards(v[0]);
      nextTick(() => {
        // var div = document.getElementById('container') as HTMLElement;
        // div.innerHTML = '';
        // div.appendChild(GenerateHtml(v[0]));
        // setTimeout(() => {
        //   if (!isNullOrUnDef(v[1])) {
        //     CustFunc(v[0], v[1][0]['id'], '#lfContainer');
        //   }
        // }, 100);
      });
    },
    { deep: true },
  );

  // 快捷导航
  const navItems: NavItem[] = [
    {
      title: '添加产品工艺路线',
      icon: 'add_green|svg',
      color: '#1fdaca',
      url: '/addRoute',
      action: 'addRoute',
    },
    {
      title: '添加客户工艺路线',
      icon: 'add_customer|svg',
      color: '#bf0c2c',
      url: '/addCustomer',
      action: 'addCustomer',
    },
  ];
  function changeItem(action) {
    openModal(true, {
      title: '工艺路线列表',
      schemas: [
        {
          field: 'ROT_CODE',
          component: 'Input',
          label: '工艺路线编码',
          colProps: {
            span: 12,
          },
        },
      ],
      ItemColumns: [
        {
          title: t('工艺路线编码'),
          dataIndex: 'ROT_CODE',
          resizable: true,
          sorter: true,
          width: 200,
        },
        {
          title: t('工艺路线名称'),
          dataIndex: 'ROT_NAME',
          resizable: true,
          sorter: true,
          width: 180,
        },
      ],
      tableName: 'MES_ROUTE',
      rowKey: 'ROT_CODE',
      returnFieldName: 'ROUTE_CODE', //返回值要赋值的字段名称
      searchInfo: { TABLE_NAME: 'MES_ROUTE' },
      which: action,
  onMounted(() => {
    nextTick(() => {
      //   var div = document.getElementById('container') as HTMLElement;
      //   if (!isNullOrUnDef(div)) {
      //     div.innerHTML = '';
      //     div.appendChild(GenerateHtml(props.configType));
      //     setTimeout(() => {
      //       if (!isNullOrUnDef(props.nodes) && props.nodes.length > 0) {
      //         CustFunc(props.configType, props.nodes[0]['id'], '#lfContainer');
      //       }
      //     }, 100);
      //   }
    });
  }
  });

  /**
   * @description: 选择工艺路线成功返回方法
   * @description: 弹出选择框成功返回方法
   * @param {*} d
   * @param {*} u
   * @return {*}
   */
  async function handleSuccess(d, u) {
    if (isNullOrEmpty(objParams.value['CODE'])) {
      createErrorModal({
        title: t('sys.api.errorTip'),
        content: '产品为空，不能添加工艺路线，请点击左侧选择产品',
      });
      return;
    }
    let codes = d.values.id.split(',');
    var i;
    for (i = 0; i < codes.length; i++) {
      if (d.which == 'addRoute') {
        await RouteToProd({ rotId: codes[i], prodCode: objParams.value['CODE'] });
      } else {
        await RouteToCust({ rotId: codes[i], prodCode: objParams.value['CODE'], custCode: '' });
      }
    }
  async function handleSuccess(d, u, item, objParams, refreshPage) {
    GetSelectSuccess(d, u, item, objParams, refreshPage);
  }

    await refreshPage();
  function RvItemSuccess(d, u) {}

  /**
   * @description: 开关改变事件
   * @param {*} d
   * @return {*}
   */
  function switchChange(e, d) {
    CustFunc({
      ctype: 'isDefault',
      others: { ...d, ...{ isDefault: e } },
      keyCode: keyCode.value,
    }).then((res) => {
      console.log(res,isDefault);
      if(res.IsSuccessed){
        if(e){
          
        }
      }
    });
  }
</script>