| | |
| | | <!-- |
| | | * @Description: 工艺路线添加页面 |
| | | * @Description: 导航页面 |
| | | * @Author: Ben Lin |
| | | * @version: |
| | | * @Date: 2024-06-20 12:13:27 |
| | | * @LastEditors: Ben Lin |
| | | * @LastEditTime: 2024-06-25 00:07:08 |
| | | * @LastEditTime: 2024-07-22 03:45:38 |
| | | --> |
| | | <template> |
| | | <Card title="添加工艺"> |
| | | <CardGrid v-for="item in navItems" :key="item.title" @click="changeItem(item.action)"> |
| | | <Card :title="GetTitle(props.configType)['navTitle']"> |
| | | <CardGrid |
| | | v-for="item in GetNavItems(props.configType)" |
| | | :key="item.title" |
| | | @click=" |
| | | navChangeItem(item.action, useModalData[item.action][1].openModal, openRvModal, selectedNodes) |
| | | " |
| | | > |
| | | <span 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" |
| | | @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 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 selectedNodes = inject('selectedNodes') as Ref<any>; |
| | | const props = defineProps({ |
| | | configType: { type: String }, |
| | | nodes: { type: Array as PropType<any[]> }, |
| | | }); |
| | | 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 props = defineProps({ |
| | | // prodCode: { type: String }, |
| | | // }); |
| | | const { t } = useI18n(); |
| | | const [register, { openModal }] = useModal(); |
| | | interface NavItem { |
| | | title: string; |
| | | icon: string; |
| | | color: string; |
| | | url: string; |
| | | action: string; |
| | | } |
| | | const Prod_Code = inject('prodCode') as Ref<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', |
| | | }, |
| | | // { |
| | | // title: '销售出库单', |
| | | // icon: 'Out|svg', |
| | | // color: '#e18525', |
| | | // url: '/saleoutorder', |
| | | // }, |
| | | // { |
| | | // title: '完工入库单', |
| | | // icon: 'In|svg', |
| | | // color: '#3fb27f', |
| | | // url: '/finishedwarehouse', |
| | | // }, |
| | | // { |
| | | // title: '生产退料单', |
| | | // icon: 'materialret|svg', |
| | | // color: '#4daf1bc9', |
| | | // url: '/materialret', |
| | | // }, |
| | | // { |
| | | // title: '盘点单', |
| | | // icon: 'inventory|svg', |
| | | // color: '#00d8ff', |
| | | // url: '/inventory', |
| | | // }, |
| | | // { |
| | | // title: '调拨单', |
| | | // icon: 'transfer|svg', |
| | | // color: '#00d8ff', |
| | | // url: '/transfer', |
| | | // }, |
| | | // { |
| | | // title: '实时库存', |
| | | // icon: 'WmsItem|svg', |
| | | // color: '#00d8ff', |
| | | // url: '/WmsItem', |
| | | // }, |
| | | ]; |
| | | 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(Prod_Code.value)) { |
| | | 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: Prod_Code.value }); |
| | | } else { |
| | | await RouteToCust({ rotId: codes[i], prodCode: Prod_Code.value, custCode: '' }); |
| | | } |
| | | } |
| | | |
| | | await refreshPage(); |
| | | async function handleSuccess(d, u, item, objParams, refreshPage) { |
| | | GetSelectSuccess(d, u, item, objParams, refreshPage); |
| | | } |
| | | |
| | | function RvItemSuccess(d, u) {} |
| | | </script> |