| | |
| | | <!-- |
| | | * @Description: file content |
| | | * @Author: your name |
| | | * @version: |
| | | * @Date: 2024-04-28 15:15:22 |
| | | * @LastEditors: your name |
| | | * @LastEditTime: 2024-06-18 01:17:30 |
| | | --> |
| | | <!-- |
| | | * @Description: 右侧属性配置面板 |
| | | --> |
| | | <template> |
| | | <div> |
| | | <Tabs v-model:activeKey="routeConfig.activeKey" :tabBarStyle="{ margin: 0 }"> |
| | | <Tabs |
| | | v-model:activeKey="routeConfig.activeKey" |
| | | :tabBarStyle="{ margin: 0 }" |
| | | @tabClick="tabclkCallback" |
| | | > |
| | | <TabPane :key="1" tab="工艺路线"> |
| | | <FormProps /> |
| | | </TabPane> |
| | | <TabPane :key="2" tab="工序"> |
| | | <FormItemProps /> |
| | | <TabPane :key="2" :tab="title"> |
| | | <FormItemProps v-if="IsOper" @changeNodeName="changeNodeName" /> |
| | | <ActionItemProps v-if="!IsOper" @changeName="changeName" /> |
| | | </TabPane> |
| | | <!-- <TabPane :key="3" tab="栅格"> |
| | | <ComponentColumnProps /> |
| | | <TabPane :key="3" :tab="posttitle"> |
| | | <PostProps ref="postProps" v-if="IsOper" /> |
| | | </TabPane> |
| | | <TabPane :key="4" tab="组件"> |
| | | <!-- <TabPane :key="4" tab="组件"> |
| | | <slot v-if="slotProps" :name="slotProps.component + 'Props'"></slot> |
| | | <ComponentProps v-else /> |
| | | </TabPane> --> |
| | |
| | | <script lang="ts" setup> |
| | | import FormProps from './FormProps.vue'; |
| | | import FormItemProps from './FormItemProps.vue'; |
| | | import ActionItemProps from './ActionItemProps.vue'; |
| | | import PostProps from './PostProps.vue'; |
| | | import { useRouteDesignState } from '../hooks/useRouteDesignState'; |
| | | import { TabPane, Tabs } from 'ant-design-vue'; |
| | | import { TabPane, Tabs, Form, FormItem, Select, Input, InputNumber } from 'ant-design-vue'; |
| | | import { ref, watch } from 'vue'; |
| | | |
| | | type ChangeTabKey = 1 | 2; |
| | | export interface IPropsPanel { |
| | | changeTab: (key: ChangeTabKey) => void; |
| | | } |
| | | const emit = defineEmits(['changeName', 'changeNodeName']); |
| | | const { routeConfig } = useRouteDesignState(); |
| | | const props = defineProps({ |
| | | IsOperation: Boolean, |
| | | title: String, |
| | | posttitle: String, |
| | | colSlots: Array, |
| | | crudColSlots: Array, |
| | | entityName: String, |
| | | }); |
| | | const postProps = ref(null); |
| | | const IsOper = ref(false); |
| | | const IsReload = ref(false); |
| | | const title = ref(''); |
| | | const posttitle = ref(''); |
| | | const entityName = ref('MES_POSITION'); |
| | | watch( |
| | | [ |
| | | () => props.IsOperation, |
| | | () => props.title, |
| | | () => props.entityName, |
| | | () => props.posttitle, |
| | | ], |
| | | (v) => { |
| | | IsOper.value = v[0]; |
| | | title.value = v[1] as string; |
| | | entityName.value = v[2] as string; |
| | | posttitle.value = v[3] as string; |
| | | }, |
| | | { deep: true }, |
| | | ); |
| | | |
| | | /** |
| | | * @description: 点击tab回调方法 |
| | | * @param {*} val |
| | | * @return {*} |
| | | */ |
| | | function tabclkCallback(val) { |
| | | if (val == '3') { |
| | | postProps.value?.reload(); |
| | | } |
| | | } |
| | | |
| | | function changeName(e) { |
| | | emit('changeName', e); |
| | | } |
| | | |
| | | function changeNodeName(e) { |
| | | emit('changeNodeName', e); |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | |
| | | box-sizing: border-box; |
| | | |
| | | form { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: calc(100% - 50px); |
| | | height: 85vh; |
| | | margin-right: 10px; |
| | | overflow-x: hidden; |
| | | overflow-y: auto; |
| | | overflow: hidden auto; |
| | | } |
| | | |
| | | .hint-box { |