fix: 绑定企业的对话框抽成了组件

src/views/system-config/scene-manage/AddCompanyInfo.vue

@@ -0,0 +1,110 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="添加企业信息" width="500" @close="() => emit('close')">
+    <div>
+      <div class="relate-select">
+        <div class="select-title">企业分类</div>
+        <el-select v-model="companyType" placeholder="请选择企业类型" style="width: 180px">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="relate-select">
+        <div class="select-title">企业名称</div>
+        <el-select
+          v-model="tenantName"
+          placeholder="请选择企业租户信息"
+          style="width: 180px"
+          @change="changeCom"
+        >
+          <el-option
+            v-for="item in companyList"
+            :key="item.tenantCode"
+            :label="item.tenantName"
+            :value="item.tenantCode"
+          />
+        </el-select>
+      </div>
+      <div v-if="tenantCode" class="relate-select">
+        <div class="select-title">企业租户信息</div>
+        <el-input v-model="tenantCode" style="width: 180px" disabled />
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="() => emit('close')">取消</el-button>
+        <el-button type="primary" @click="confirm"> 确定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import { options } from './use-method.tsx';
+  import { getCompanyList, CompanyType, changeRelate } from '@/api/scene/scene-relate';
+import { ElMessage } from 'element-plus';
+
+
+const emit = defineEmits(['close']);
+  onMounted(() => {
+    getCompanyList().then((res) => {
+      companyList.value = res;
+    });
+  });
+  const dialogVisible = true;
+  const companyType = ref('');
+  const tenantName = ref('');
+  const companyList = ref<CompanyType[]>([]);
+  const tenantCode = ref('');
+  const tenantId = ref();
+
+  const changeCom = (val: any) => {
+    const item = companyList.value.find((item) => item.tenantCode === val);
+    tenantName.value = item?.tenantName!;
+    tenantId.value = item?.tenantId!;
+    tenantCode.value = val;
+  };
+
+  const confirm = () => {
+    const subData = {
+      tenantCode: tenantCode.value,
+      tenantId: tenantId.value,
+      type: companyType.value,
+    };
+    changeRelate(subData).then(() => {
+      ElMessage({
+        message: '绑定成功',
+        type: 'success',
+      });
+      reset();
+      emit('close')
+    });
+  };
+
+  const reset=()=>{
+  tenantName.value = '';
+  tenantCode.value = '';
+  tenantId.value = null;
+  companyType.value =''
+  }
+
+</script>
+
+<style lang="scss" scoped>
+
+.relate-select {
+    display: flex;
+
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .select-title {
+    width: 100px;
+    margin-right: 20px;
+  }
+</style>

src/views/system-config/scene-manage/SceneManage.vue

@@ -73,47 +73,7 @@
       @on-close="handleUpdataWorkspaceTab"
       @on-ok="subWorkspace"
     />
-
-    <el-dialog
-    v-model="dialogVisible"
-    title="添加企业信息"
-    width="500"
-    
-  >
-    <!-- <span>This is a message</span> -->
-     <div >
-      <div class="relate-select">
-        <div class='select-title'>企业分类</div>
-        <el-select  v-model="companyType" placeholder="请选择企业类型" style="width:180px" >
-           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-         </el-select>
-      </div>
-      <div class="relate-select">
-        <div class='select-title'>企业名称</div>
-        <el-select  v-model="tenantName" placeholder="请选择企业租户信息" style="width:180px" @change="changeCom" >
-           <el-option v-for="item in companyList" :key="item.tenantCode" :label="item.tenantName" :value="item.tenantCode"   />
-         </el-select>
-      </div>
-      <div v-if="tenantCode" class="relate-select">
-        <div class='select-title'>企业租户信息</div>
-          <el-input
-            v-model="tenantCode"
-            style="width: 180px"
-            disabled
-          />
-      </div>
-
-     </div>
-    <template #footer>
-    
-      <div class="dialog-footer">
-        <el-button @click="dialogVisible =false">取消</el-button>
-        <el-button type="primary" @click="close">
-          确定
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
+    <AddCompanyInfo v-if="dialogVisible" @close="closeAddInfo" />
   </page-wrapper>
 </template>
 
@@ -121,11 +81,12 @@
   import { ref, onMounted, reactive, h, computed } from 'vue';
   import { Plus } from '@element-plus/icons-vue';
   import { BasicTable, BasicColumn } from '@/components/Table';
-  import { ElMessage, ElMessageBox } from 'element-plus';
+  import { ElMessageBox } from 'element-plus';
   import ActionColomn from './actionColomns.vue';
   import CompanyDrawer from './CompanyDrawer.vue';
   import WorkshopDrawer from './WorkshopDrawer.vue';
   import WorkspaceDrawer from './WorkspaceDrawer.vue';
+  import AddCompanyInfo from './AddCompanyInfo.vue';
   import { DATA_LEVEL, DrawerType, ENABLED } from './constant';
   import {
     colomns,
@@ -134,7 +95,6 @@
     removeParent,
     flattenCodes,
     getParent,
-    options,
   } from './use-method.tsx';
   import {
     ComAddDatas,
@@ -145,19 +105,12 @@
     delWorkspace,
     sortSceneList,
   } from '@/api/scene/sceneOperate';
-  import {
-    getCompanyList,
-    CompanyType,
-    changeRelate,
-  } from '@/api/scene/scene-relate';
   import useScene from './use-scene';
   import useSceneTemplete from './use-sence-templete';
   import { useRouter } from 'vue-router';
   import { storeToRefs } from 'pinia';
   import { cloneDeep } from 'lodash-es';
 
-  
-
   const router = useRouter();
 
   const useSceneList = useScene();
@@ -176,48 +129,11 @@
   const page = ref(1);
   const size = ref(10);
   const total = computed(() => tableData.value.length);
-  const dialogVisible =ref<boolean>(false)
-  const companyType = ref('')
-  // const companyId = ref('')
-  const tenantName = ref('')
-  const tenantCode = ref('')
-  const tenantId = ref()
-  const  companyList = ref<CompanyType[]>([])
-
-  const reset=()=>{
-    dialogVisible.value = false;
-  tenantName.value = '';
-  tenantCode.value = '';
-  tenantId.value = null;
-  companyType.value =''
-  }
-
-const close = ()=>{
+  const dialogVisible = ref<boolean>(false);
 
-  const subData = {
-      tenantCode:  tenantCode.value,
-      tenantId: tenantId.value,
-      type:companyType.value,
-    }
-    changeRelate(subData).then(()=>{
-      ElMessage({
-    message: '绑定成功',
-    type: 'success',
-  })
-      reset();
-    })
-
-}
-  const changeCom = (val:any)=>{
-    console.log(val);
-    const item = companyList.value.find((item)=>item.tenantCode===val)
-    console.log('item',item);
-    tenantName.value = item?.tenantName!
-    tenantId.value = item?.tenantId!
-    tenantCode.value = val
-    // tenantCode.value = item.tenantCode
-    // tenantId.value = item.tenantId
-  }
+  const closeAddInfo = () => {
+    dialogVisible.value = false;
+  };
 
   //改变el-drawer公司的状态
   const handleUpdateTableCom = () => {
@@ -245,9 +161,9 @@ const close = ()=>{
 
     //获取tableData数据
     getSceneDetail();
-    getCompanyList().then((res)=>{
-      companyList.value = res
-    })
+    // getCompanyList().then((res)=>{
+    //   companyList.value = res
+    // })
   });
 
   function onCheckedRow(rowKeys) {
@@ -315,12 +231,11 @@ const close = ()=>{
     },
   });
 
-
   //绑定
-  const handleRelate=(row)=>{
-    console.log('row',row);
-    dialogVisible.value = true
-  }
+  const handleRelate = (row) => {
+    console.log('row', row);
+    dialogVisible.value = true;
+  };
 
   //页面设置函数
   const handleConfig = (row) => {
@@ -537,15 +452,15 @@ const close = ()=>{
     border: 1px solid rgba(0, 0, 0, 0.15);
   }
 
-  .relate-select{
+  .relate-select {
     display: flex;
 
     align-items: center;
-    margin-bottom: 20px
+    margin-bottom: 20px;
   }
 
-  .select-title{
-    width:100px;
-    margin-right: 20px
+  .select-title {
+    width: 100px;
+    margin-right: 20px;
   }
 </style>