fix

src/views/dashboard/monitor/CompanyDrawer.vue

@@ -1,15 +1,5 @@
 <template>
   <div>
-    <!-- <div style="position: absolute; top: 20px; left: 30px">
-      <el-button type="primary" @click="companyAdd">
-        <template #icon>
-          <el-icon>
-            <Plus />
-          </el-icon>
-        </template>
-        添加
-      </el-button></div
-    > -->
     <el-drawer
       ref="companyDrawerRef"
       class="test"
@@ -102,7 +92,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, reactive, ref, defineProps, defineEmits, watch, onMounted } from 'vue';
+  import { computed, reactive, ref, defineProps, defineEmits } from 'vue';
   import { sceneLabelType, templateType } from '@/api/scene/secene-templet';
   import { ENABLED } from './use-method';
   import type { FormInstance, FormRules } from 'element-plus';
@@ -120,12 +110,8 @@
     sceneList: sceneLabelType[];
     templateList: templateType[];
     ruleForm: RuleForm;
-    selectItems: SelectItemType[];
     addEnable: ENABLED;
     comEdit: boolean;
-    // resetDraw: () => unknown;
-    // addNewTypeCom: (formEl) => unknown;
-    // editedSub: () => unknown;
   }>();
 
   const addEnable = ref(ENABLED.TRUE);
@@ -200,36 +186,21 @@
     ],
   });
 
-  watch(
-    () => props.ruleForm,
-    (newRuleForm) => {
-      // console.log('111');
-      ruleForm1.name = newRuleForm.name;
-      ruleForm1.code = newRuleForm.code;
-      ruleForm1.seniorScene = '顶级场景';
-      addEnable.value;
-    },
-    { deep: true },
-  );
-
-  watch(
-    [() => props.addEnable, () => props.selectItems],
-    ([newAddEnable, newSelectItems]) => {
-      addEnable.value = newAddEnable;
-      selectItems.value = newSelectItems;
-    },
-    { deep: true },
-  );
-
   //增加空的场景&模板
   const addChange = () => {
     selectItems.value.push({
       tag: '',
       template: '',
     });
-    // add - change - enable;
-    // console.log(1231);
-    // emit('add-change-enable', addEnable);
+  };
+
+  //编辑时编辑时将父组件的数据传递给子组件
+  const receiveDataFromParent = (data, selectItemsParent) => {
+    ruleForm1.name = data.name;
+    ruleForm1.code = data.code;
+    ruleForm1.seniorScene = '顶级场景';
+    addEnable.value = data.status;
+    selectItems.value = selectItemsParent;
   };
 
   //删除场景&模板
@@ -249,14 +220,13 @@
 
   const handleClose = () => {
     emit('update-tab-com', false);
-    // ruleForm1.name = '';
-    // ruleForm1.code = '';
   };
-  // const formEl = ref<FormInstance>();
 
   //添加新公司的提交
   const newCompanyAdd = (formEl: FormInstance | undefined) => {
     if (!formEl) return;
+    console.log('addEnable22', addEnable.value);
+
     emit('upload-company-data', ruleForm1, selectItems, addEnable, () => {
       resetDrawCom();
     });
@@ -281,7 +251,7 @@
     ruleForm1.tagWorkshop = undefined;
   };
 
-  defineExpose({ resetDrawCom });
+  defineExpose({ resetDrawCom, receiveDataFromParent });
 </script>
 
 <style scoped></style>

src/views/dashboard/monitor/WorkShopSpaceDrawer.vue

@@ -42,13 +42,6 @@
               style="margin-right: 10px"
               >{{ item.name }}</el-radio-button
             >
-            <!-- <el-radio-button
-              v-for="item in tagList"
-              :label="item.name"
-              :key="item.id"
-              :value="item.id"
-              class="tag-select"
-            /> -->
           </el-radio-group>
         </el-form-item>
         <el-form-item v-if="props.levelFindWorkshop" label="车间模板" prop="templateWorkshop">
@@ -87,7 +80,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, reactive, ref, defineProps, defineEmits, watch } from 'vue';
+  import { computed, reactive, ref, defineProps, defineEmits } from 'vue';
   import { ENABLED } from './use-method';
   import type { FormInstance, FormRules } from 'element-plus';
   import { labelModuleListType } from '@/api/scene/sceneOperate';
@@ -177,30 +170,20 @@
     ],
   });
 
-  watch(
-    () => props.ruleForm,
-    (newRuleForm) => {
-      // console.log('111');
-      ruleForm.seniorScene = newRuleForm.seniorScene!;
-      ruleForm.name = newRuleForm.name;
-      ruleForm.code = newRuleForm.code;
-      ruleForm.tagWorkshop = newRuleForm.tagWorkshop;
-      ruleForm.templateWorkshop = newRuleForm.templateWorkshop;
-      ruleForm.principal = newRuleForm.principal;
-      // ruleForm.code = newRuleForm.code;
-      // ruleForm.seniorScene = '顶级场景';
-      // addEnable.value;
-    },
-    { deep: true },
-  );
+  //编辑时需要传入子组件的数据
+  const receiveDataFromParent = (data: RuleForm, addEnableParent) => {
+    ruleForm.name = data.name;
+    ruleForm.seniorScene = data.seniorScene;
+    ruleForm.code = data.code;
+    ruleForm.tagWorkshop = data.tagWorkshop;
+    ruleForm.templateWorkshop = data.templateWorkshop;
+    ruleForm.principal = data.principal;
+    addEnable.value = addEnableParent;
+  };
 
-  watch(
-    [() => props.addEnable],
-    ([newAddEnable]) => {
-      addEnable.value = newAddEnable;
-    },
-    { deep: true },
-  );
+  const receiveSeniorScene = (seniorScene) => {
+    ruleForm.seniorScene = seniorScene;
+  };
 
   //添加新公司的提交
   const addNewType = (formEl: FormInstance | undefined) => {
@@ -228,6 +211,7 @@
     ruleForm.templateWorkshop = undefined;
     ruleForm.tagWorkshop = undefined;
   };
+  defineExpose({ resetDraw, receiveDataFromParent, receiveSeniorScene });
 </script>
 
 <style scoped>

src/views/dashboard/monitor/monitor.vue

@@ -14,7 +14,6 @@
           fullscreen: false,
           striped: false,
           setting: false,
-          order: false,
         }"
         ref="tableRef"
         @checked-row-change="onCheckedRow"
@@ -40,101 +39,12 @@
           </div>
         </template>
       </BasicTable>
-      <!-- <div v-if="tableData.length === 0" class="data-none"
-        ><img src="../../../assets/icons/no-content.png" alt="" />
-        <div class="data-none-word">目前无内容，请先添加场景</div></div
-      > -->
     </el-card>
 
     <!-- 添加的抽屉内容 -->
 
     <!-- 公司 -->
-    <!-- <el-drawer class="test" v-model="tableCom" with-header="true" size="35%">
-      <template #header="{ titleId }">
-        <p :id="titleId">{{ companyAddTitle }}</p>
-      </template>
-      <el-form
-        ref="ruleFormRef"
-        :model="ruleForm"
-        :rules="rules"
-        label-width="90px"
-        class="demo-ruleForm"
-        size="default"
-        status-icon
-      >
-        <el-form-item label="公司名称" prop="name">
-          <el-input v-model="ruleForm.name" style="width: 200px" />
-        </el-form-item>
-        <el-form-item label="上级场景" prop="seniorScene">
-          <el-input v-model="ruleForm.seniorScene" style="width: 200px" disabled />
-        </el-form-item>
-        <el-form-item label="公司代码" prop="code">
-          <el-input v-model="ruleForm.code" style="width: 200px" />
-        </el-form-item>
-        <el-form-item label="标签&模板" prop="sceneCode">
-          <div style="width: 200px; height: 30px"></div>
-          <div
-            v-for="(item, index) in selectItems"
-            :key="index"
-            style="margin-bottom: 16px; display: flex"
-          >
-            <el-select v-model="item.tag" placeholder="请选择标签" style="width: 126px">
-              <el-option
-                v-for="item1 in sceneList"
-                :key="item1.id"
-                :label="item1.name"
-                :value="item1.id"
-              />
-            </el-select>
-            <img
-              src="@/assets/icons/link.png"
-              alt=""
-              style="width: 16px; margin-left: 2px; margin-right: 2px" />
-            <el-select v-model="item.template" placeholder="请选择模板" style="width: 126px">
-              <el-option
-                v-for="item2 in templateList"
-                :key="item2.id"
-                :label="item2.name"
-                :value="item2.id"
-              />
-            </el-select>
-            <img
-              src="@/assets/icons/close.png"
-              @click="deleScene(index)"
-              alt=""
-              style="
-                width: 13px;
-                height: 13px;
-                margin-top: 10px;
-                margin-left: 3px;
-                cursor: pointer;
-              "
-          /></div>
-          <div style="width: 200px">
-            <el-icon size="28px" @click="addChange" style="cursor: pointer"><CirclePlus /></el-icon
-          ></div>
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-switch
-            v-model="addEnable"
-            :active-value="ENABLED.TRUE"
-            :inactive-value="ENABLED.FALSE"
-            class="switchUse"
-          />
-        </el-form-item>
-      </el-form>
-      <div style="position: absolute; left: 108px; bottom: 67px">
-        <el-button v-if="companyAddTitle === '添加公司'" type="warning" @click="resetDraw"
-          >重置</el-button
-        >
-        <el-button type="primary" v-if="companyAddTitle === '添加公司'" @click="addNewTypeCom">
-          提交
-        </el-button>
-        <el-button type="primary" v-if="companyAddTitle !== '添加公司'" @click="editedSub">
-          提交
-        </el-button>
-      </div>
-    </el-drawer> -->
+
     <CompanyDrawer
       ref="companyDrawerChild"
       :table-com="tableCom"
@@ -152,89 +62,8 @@
 
     <!-- 车间和工位 -->
 
-    <!-- <el-drawer class="test" v-model="table" with-header="true" size="35%">
-      <template #header="{ titleId }">
-        <p :id="titleId">{{ addTitle }}</p>
-      </template>
-      <el-form
-        ref="ruleFormRef"
-        :model="ruleForm"
-        :rules="rules"
-        label-width="120px"
-        class="demo-ruleForm"
-        size="default"
-        status-icon
-      >
-        <el-form-item :label="`${addName}`" prop="name">
-          <el-input v-model="ruleForm.name" />
-        </el-form-item>
-        <el-form-item label="上级场景" prop="seniorScene">
-          <el-input v-model="ruleForm.seniorScene" disabled />
-        </el-form-item>
-        <el-form-item label="车间代码" prop="code">
-          <el-input v-model="ruleForm.code" />
-        </el-form-item>
-        <el-form-item v-if="level === 0" label="场景标签" prop="tagWorkshop">
-          <el-radio-group
-            v-model="ruleForm.tagWorkshop"
-            size="10px"
-            style="display: flex; justify-content: space-between"
-          >
-            <el-radio-button v-for="item in tagList" :label="item.id!" class="tag-select">{{
-              item.name
-            }}</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="level === 0" label="车间模板" prop="templateWorkshop">
-          <el-radio-group
-            v-model="ruleForm.templateWorkshop"
-            size="10px"
-            style="display: flex; justify-content: space-between"
-          >
-            <el-radio-button
-              v-for="item in workshopTemplateList"
-              :label="item.id!"
-              class="tag-select"
-              >{{ item.name }}</el-radio-button
-            >
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="level === 1" label="负责人" prop="principal">
-          <el-input v-model="ruleForm.principal" />
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-switch
-            v-model="addEnable"
-            :active-value="ENABLED.TRUE"
-            :inactive-value="ENABLED.FALSE"
-            class="switchUse"
-          />
-        </el-form-item>
-      </el-form>
-      <div style="position: absolute; left: 108px; bottom: 67px">
-        <el-button
-          v-if="addTitle === '添加车间' || addTitle === '添加工位'"
-          type="warning"
-          @click="resetDraw"
-          >重置</el-button
-        >
-        <el-button
-          v-if="addTitle === '添加车间' || addTitle === '添加工位'"
-          type="primary"
-          @click="addNewType"
-        >
-          提交
-        </el-button>
-        <el-button
-          v-if="addTitle === '编辑车间' || addTitle === '编辑工位'"
-          type="primary"
-          @click="editedSub"
-        >
-          提交
-        </el-button>
-      </div>
-    </el-drawer> -->
     <WorkshopAndWorkspace
+      ref="workDrawerChild"
       :table="table"
       :add-title="addTitle"
       :add-name="addName"
@@ -267,7 +96,6 @@
     dataSourceWithParent,
     updateSerials,
     findItemLevel,
-    findIndexByItem,
     removeParent,
   } from './use-method';
   import {
@@ -353,7 +181,6 @@
   const level = ref<number>();
 
   onMounted(() => {
-    console.log('Company Drawer Child Ref:', companyDrawerChild.value);
     //添加父级，主要用于排序功能
     dataSourceWithParent(tableData.value, null);
     //获取tableData数据
@@ -375,19 +202,13 @@
   const handlePageSizeChange = () => {};
 
   const companyDrawerChild = ref();
+  const workDrawerChild = ref();
 
   const companyAdd = () => {
     tableCom.value = true;
-    // emit;
-
-    // const childComponent = refs.companyDrawerChild;
     if (companyDrawerChild.value) {
       companyDrawerChild.value.resetDrawCom(); // 这里假设resetDraw是子组件中用于重置的方法
     }
-
-    // resetDraw();
-    // console.log('ruleForm', ruleForm);
-
     addEnable.value = ENABLED.TRUE;
     ruleForm.seniorScene = '顶级场景';
     companyAddTitle.value = '添加公司';
@@ -426,6 +247,7 @@
   const addNewTypeCom = (ruleFormCom, selectItemsCom, addEnableCom) => {
     //取出数据中所有的code数据
     const allCodes = flattenCodes(tableData.value);
+    console.log('addEnableCom', addEnableCom.value);
 
     //新接口中用的newdata
     const newComData = {
@@ -607,7 +429,9 @@
     resetDraw();
 
     table.value = true;
-    ruleForm.seniorScene = row.name;
+    // ruleForm.seniorScene = row.name;
+    workDrawerChild.value.receiveSeniorScene(row.name);
+    workDrawerChild.value.resetDraw();
     tagList.value = row?.labelList;
   };
 
@@ -661,14 +485,10 @@
     editedItem.value = { ...row }; // 将当前行的内容拷贝到 editedItem 中，以便编辑
     editWork.value = true;
     level.value = findItemLevel(tableData.value, row.id, row.name);
-    console.log('level.value', level.value);
-    console.log('editedItem.value ', editedItem.value);
-
     if (level.value === 0) {
       tableCom.value = true;
       companyAddTitle.value = '编辑公司';
       comEdit.value = true;
-      selectItems.value = [];
       //复原公司选择的场景集合
       if (row.labelList && Array.isArray(row.labelList)) {
         selectItems.value = row.labelList.map((item, index) => ({
@@ -676,10 +496,9 @@
           template: row.moduleList[index].id,
         }));
       }
-      ruleForm.name = editedItem.value.name!;
-      ruleForm.seniorScene = '顶级场景';
-      ruleForm.code = editedItem.value.code!;
-      addEnable.value = editedItem.value.status!;
+      console.log('312addEnable.value', addEnable.value);
+
+      companyDrawerChild.value.receiveDataFromParent(editedItem.value, selectItems.value);
     } else if (level.value === 1) {
       levelFindWorkshop.value = true;
       addTitle.value = '编辑车间';
@@ -693,6 +512,9 @@
       tagList.value = editedItem.value.parent.labelList;
       ruleForm.tagWorkshop = editedItem.value.sceneLabelId;
       ruleForm.templateWorkshop = editedItem.value.workshopModule.id;
+      // console.log('ruleForm.seniorScene', ruleForm.seniorScene);
+
+      workDrawerChild.value.receiveDataFromParent(ruleForm, addEnable.value);
     } else if (level.value === 2) {
       levelFindWorkshop.value = false;
       addTitle.value = '编辑工位';
@@ -704,6 +526,7 @@
       ruleForm.code = editedItem.value.code!;
       addEnable.value = editedItem.value.status!;
       ruleForm.principal = editedItem.value.principal!;
+      workDrawerChild.value.receiveDataFromParent(ruleForm, addEnable.value);
     }
   };