工艺路线绑定岗位资源更新

Ben Lin

2024-06-13 1b970c588245935181610e93e84a9a3a10d80ecd

 src/views/tigerprojects/mes/eng/route/components/PropsPanel.vue

@@ -1,19 +1,28 @@
<!--
 * @Description: file content
 * @Author: your name
 * @version: 
 * @Date: 2024-04-28 15:15:22
 * @LastEditors: your name
 * @LastEditTime: 2024-06-13 08:50:47
-->
<!--
 * @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" />
        <ActionItemProps v-if="!IsOper"  />
      </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 +32,56 @@
<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 { 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();
    }
  }
</script>

<style lang="less" scoped>