Ben Lin
2024-07-19 a41c87a94a0b52688420a7af3b242bc771628e28
src/views/tigerprojects/mes/eng/route/components/PropsPanel.vue
@@ -1,19 +1,32 @@
<!--
 * @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> -->
@@ -23,14 +36,66 @@
<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>
@@ -40,12 +105,10 @@
    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 {