<!--
|
* @Description: file content
|
* @Author: your name
|
* @version:
|
* @Date: 2024-04-28 15:15:22
|
* @LastEditors: your name
|
* @LastEditTime: 2024-06-15 20:26:08
|
-->
|
<!--
|
* @Description: 右侧属性配置面板
|
-->
|
<template>
|
<div>
|
<Tabs v-model:activeKey="routeConfig.activeKey" :tabBarStyle="{ margin: 0 }" @tabClick="tabclkCallback">
|
<TabPane :key="1" tab="工艺路线">
|
<FormProps />
|
</TabPane>
|
<TabPane :key="2" :tab="title">
|
<FormItemProps v-if="IsOper" @changeNodeName="changeNodeName"/>
|
<ActionItemProps v-if="!IsOper" @changeName="changeName"/>
|
</TabPane>
|
<TabPane :key="3" :tab="posttitle" >
|
<PostProps ref="postProps" v-if="IsOper" />
|
</TabPane>
|
<!-- <TabPane :key="4" tab="组件">
|
<slot v-if="slotProps" :name="slotProps.component + 'Props'"></slot>
|
<ComponentProps v-else />
|
</TabPane> -->
|
</Tabs>
|
</div>
|
</template>
|
<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 { 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: [],
|
crudColSlots: [],
|
entityName: String,
|
});
|
const postProps = ref(null);
|
const IsOper = ref(false);
|
const IsReload = ref(false);
|
const title = ref('');
|
const posttitle = ref('');
|
const colSlots = ref<any>([]);
|
const crudColSlots = ref<any>([]);
|
const entityName = ref('MES_POSITION');
|
watch(
|
[() => props.IsOperation, () => props.title, () => props.colSlots, () => props.crudColSlots, () => props.entityName, () => props.posttitle],
|
(v) => {
|
IsOper.value = v[0];
|
title.value = v[1] as string;
|
colSlots.value = v[2];
|
crudColSlots.value = v[3];
|
entityName.value = v[4] as string;
|
posttitle.value = v[5] 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>
|
@import url('../styles/variable.less');
|
|
:deep(.ant-tabs) {
|
box-sizing: border-box;
|
|
form {
|
position: absolute;
|
width: 100%;
|
height: calc(100% - 50px);
|
margin-right: 10px;
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
|
.hint-box {
|
margin-top: 200px;
|
}
|
|
.ant-form-item,
|
.ant-slider-with-marks {
|
margin-right: 20px;
|
margin-bottom: 0;
|
margin-left: 10px;
|
}
|
|
.ant-form-item {
|
// width: 100%;
|
margin-bottom: 0;
|
|
.ant-form-item-label {
|
line-height: 2;
|
vertical-align: text-top;
|
}
|
}
|
|
.ant-input-number {
|
width: 100%;
|
}
|
}
|
</style>
|
