外部协议-协议授权打开一次之后打不开问题解决

src/views/externalAgreement/agreement/agreementDetails.vue

@@ -28,7 +28,7 @@
             <el-tag type="primary" style="margin-right: 20px;">{{
               getDict('is_enable').find(val => val.value == agreementInfo.isEnable)?.label}}</el-tag>
             <el-tag type="success">{{getDict('valid_status').find(val => val.value == agreementInfo.validStatus)?.label
-              }}</el-tag>
+            }}</el-tag>
           </div>
         </div>
         <el-descriptions :column="3" style="margin-top: 10px;">
@@ -50,13 +50,13 @@
         <el-tab-pane label="协议信息" name="agreementInfo">
           <el-descriptions title="基本信息" class="m-top-20" :column="3">
             <el-descriptions-item label="协议名称：">{{ agreementInfo.agreementTitle
-            }}</el-descriptions-item>
+              }}</el-descriptions-item>
             <el-descriptions-item label="协议简称：">{{ agreementInfo.agreementAbbreviation
-            }}</el-descriptions-item>
+              }}</el-descriptions-item>
             <el-descriptions-item label="协议生效时间：">{{ agreementInfo.startDate }}</el-descriptions-item>
             <el-descriptions-item label="协议失效时间：">{{ agreementInfo.endDate }}</el-descriptions-item>
             <el-descriptions-item label="是否含增值税结算：">
-              {{ getDict('with_tax').find(a => a.value == agreementInfo.withTax)?.label }}
+              {{getDict('with_tax').find(a => a.value == agreementInfo.withTax)?.label}}
             </el-descriptions-item>
             <el-descriptions-item label="结算周期：">T{{ agreementInfo.moneyTime }} </el-descriptions-item>
             <el-descriptions-item label="协议描述：">{{ agreementInfo.agreementName }}</el-descriptions-item>
@@ -64,7 +64,8 @@
           <el-descriptions title="其他信息" class="m-top-20" :column="3">
             <el-descriptions-item label="协议归属：">{{ agreementInfo.deptName }} </el-descriptions-item>
             <el-descriptions-item label="保险公司："> {{ agreementInfo.companyId }}</el-descriptions-item>
-            <el-descriptions-item label="协议类型：">{{ getDict('agreement_type').find(a => a.value == agreementInfo.agreementType)?.label }} </el-descriptions-item>
+            <el-descriptions-item label="协议类型：">{{getDict('agreement_type').find(a => a.value ==
+              agreementInfo.agreementType)?.label }} </el-descriptions-item>
             <el-descriptions-item label="管理人："> {{ agreementInfo.custodianId }}</el-descriptions-item>
           </el-descriptions>
         </el-tab-pane>
@@ -85,7 +86,7 @@
                   <div class="flex a-c">
                     <img src="../../../assets/images/fee.png" alt="">
                     <span class="strong m-left-10">{{ item.contactPerson
-                    }}</span>
+                      }}</span>
                     <span class="strong m-left-10">{{ item.contactMobile }}</span>
                   </div>
                   <div class="flex">
@@ -121,15 +122,15 @@
       </el-tabs>
     </PageMain>
     <!-- 协议授权弹窗 -->
-    <auth-Drawer :Drawer="agreementAuthDrawer" @cancel="agreementAuthDrawer = false" @save="DrawerSave"
-      @query="Drawerquery" :deptlist="deptauthList" :checkedKeys="checkedKeys" :checkedIds="checkedIds"></auth-Drawer>
+    <auth-Drawer ref="authDrawerRef" @save="DrawerSave" @query="Drawerquery" :deptlist="deptauthList"
+      :checkedKeys="checkedKeys" :checkedIds="checkedIds"></auth-Drawer>
     <!-- 规则费用抽屉组件 -->
     <contactPersonFeeDialog v-show="addcontactPersonShow" :ruleFeeVisible="addcontactPersonShow"
-      :title='contactPersontitle' :agreementInfo="agreementInfo"  @save="contactPersonSave"
-      :contactPersonEditInfo="contactPersonEditInfo" addMethod="details" @cancel="addcontactPersonShow = false"  />
+      :title='contactPersontitle' :agreementInfo="agreementInfo" @save="contactPersonSave"
+      :contactPersonEditInfo="contactPersonEditInfo" addMethod="details" @cancel="addcontactPersonShow = false" />
     <!-- 规则费用编辑组件 -->
     <contactPersonFeeDialogEdit :ruleFeeVisible="ruleFeeEditVisible" :headerTitle="ruleFeeHeaderTitle"
-      :agreementInfo="agreementInfo"  :costitemEditInfo="costitemEditInfo" @save="ruleFeeEditSave"
+      :agreementInfo="agreementInfo" :costitemEditInfo="costitemEditInfo" @save="ruleFeeEditSave"
       @cancel="ruleFeeEditVisible = false" />
   </div>
 </template>
@@ -187,7 +188,7 @@ const agreementEdit = () => {
 //协议授权
 //检索事件
 const imageUrl = ref('');//协议文件
-const agreementAuthDrawer = ref(false)//授权弹窗
+const authDrawerRef = ref(null)//授权弹窗
 const deptauthList = ref([]);//授权机构列表
 const checkedKeys = ref<string[]>([])//授权机构回显数据
 const checkedIds = ref<string[]>([])//授权机构回显id
@@ -203,7 +204,6 @@ const DrawerSave = (list: any) => {
         message: res.msg,
         plain: true,
       })
-      agreementAuthDrawer.value = false;
     } else {
     }
   });
@@ -213,7 +213,7 @@ const agreementAuth = (deptName: any) => {
   let name = typeof deptName === 'string' ? deptName : '';
   api.agreementApi.agreementdeptTree(id.value, name).then((res: any) => {
     if (res.code == 200) {
-      agreementAuthDrawer.value = true;
+      authDrawerRef.value.DrawerOpen()
       deptauthList.value = res.data;
       checkedKeys.value = getUncheckedIds(res.data);
       checkedIds.value = getUncheckedIds(res.data);
@@ -335,7 +335,7 @@ const costExternalList = () => {
   });
 }
 //修改对接人所有费用
-interface contactPersonEditInfo{
+interface contactPersonEditInfo {
   ptlAgreementId: string,
   contactPerson: string,
   contactMobile: string,
@@ -352,11 +352,11 @@ const contactPersonEdit = (item: any) => {
     if (res.code == '200') {
       const dict = getDict('insurance_type');//获取险种字典
       const difference = getObjectArrayDifference(dict, res.data, "label", 'productName');//获取编辑数据和字典数组差集
-      const differenceArray:any = dataCompletion(difference);//差集对象赋值
+      const differenceArray: any = dataCompletion(difference);//差集对象赋值
       contactPersonEditInfo.ptlAgreementId = id.value;
       contactPersonEditInfo.contactPerson = item.contactPerson;
       contactPersonEditInfo.contactMobile = item.contactMobile;
-      contactPersonEditInfo.ptlAgreementCostExternalAddList =[...res.data,...differenceArray];
+      contactPersonEditInfo.ptlAgreementCostExternalAddList = [...res.data, ...differenceArray];
       contactPersontitle.value = '编辑';
       addcontactPersonShow.value = true;
     } else {
@@ -480,8 +480,8 @@ const columns = [
     prop: "costExternalTypeAdds", label: "交强险费用", width: '300', formatter: (row: any) => {
       let info = row.costExternalTypeAdds.find((val: any) => val.costType == '交强险');
       if (info) {
-        return `入口：${info.inlet?.toFixed(2) ?? '--' }% 出口：${info.export?.toFixed(2) ?? '--'}%\n加投：${info.addThrow?.toFixed(2) ?? '--'}% 留点：${info.keepPointRatio?.toFixed(2) ?? '--'}%`
-      }else {
+        return `入口：${info.inlet?.toFixed(2) ?? '--'}% 出口：${info.export?.toFixed(2) ?? '--'}%\n加投：${info.addThrow?.toFixed(2) ?? '--'}% 留点：${info.keepPointRatio?.toFixed(2) ?? '--'}%`
+      } else {
         return '-'
       }
     }
@@ -491,7 +491,7 @@ const columns = [
       let info = row.costExternalTypeAdds.find((val: any) => val.costType == '商业险');
       if (info) {
         return `入口：${info.inlet?.toFixed(2) ?? '--'}% 出口：${info.export?.toFixed(2) ?? '--'}%\n加投：${info.addThrow?.toFixed(2) ?? '--'}% 留点：${info.keepPointRatio?.toFixed(2) ?? '--'}%`
-      }else {
+      } else {
         return '-'
       }
     }
@@ -501,7 +501,7 @@ const columns = [
       let info = row.costExternalTypeAdds.find((val: any) => val.costType == '驾意险');
       if (info) {
         return `入口：${info.inlet?.toFixed(2) ?? '--'}% 出口：${info.export?.toFixed(2) ?? '--'}%\n加投：${info.addThrow?.toFixed(2) ?? '--'}% 留点：${info.keepPointRatio?.toFixed(2) ?? '--'}%`
-      }else {
+      } else {
         return '-'
       }
     }
@@ -567,7 +567,7 @@ const ruleFeeEditSave = (data: object) => {
         message: res.msg,
         plain: true,
       })
-      ruleFeeEditVisible.value=false;
+      ruleFeeEditVisible.value = false;
       costExternalList();
     } else {
     }

src/views/externalAgreement/agreement/components/agreementAuth.vue

@@ -1,7 +1,7 @@
 <!-- 模板区域 -->
 <template>
   <div>
-    <el-drawer v-model="props.Drawer" :direction="direction" @open="DrawerOpen" >
+    <el-drawer v-model="drawer" :direction="direction">
       <template #header>
         <h4>参与机构</h4>
       </template>
@@ -34,12 +34,11 @@ import { defineProps, defineEmits } from "vue";
 import { DrawerProps } from 'element-plus';
 import { Search } from '@element-plus/icons-vue'
 const props = defineProps<{
-  Drawer: boolean,
   deptlist: string[]
   checkedKeys: string[]
   checkedIds: string[]
 }>();
-const emits = defineEmits(["cancel", 'save', 'DrawerOpen', 'query']);
+const emits = defineEmits(["cancel", 'save', 'query']);
 const defaultProps = {
   children: 'children',
   label: 'name',
@@ -51,41 +50,37 @@ const direction = ref<DrawerProps['direction']>('rtl')
 const deptName = ref('');
 
 
+const drawer = ref(false)
 const checkedALL = ref(false)
 // 递归获取所有节点的key
 const getAllKeys = (data) => {
-    let keys = [];
-    data.forEach(node => {
-        keys.push(node.id);
-        if (node.children && node.children.length > 0) {
-            keys = keys.concat(getAllKeys(node.children));
-        }
-    });
-    return keys;
+  let keys = [];
+  data.forEach(node => {
+    keys.push(node.id);
+    if (node.children && node.children.length > 0) {
+      keys = keys.concat(getAllKeys(node.children));
+    }
+  });
+  return keys;
 };
 const selectChange = (e) => {
-    if(e) {
-        const allKeys = getAllKeys(props.deptlist);
-        treeRef.value.setCheckedKeys(allKeys);
-    } else {
-        treeRef.value.setCheckedKeys([]);
-    }
+  if (e) {
+    const allKeys = getAllKeys(props.deptlist);
+    treeRef.value.setCheckedKeys(allKeys);
+  } else {
+    treeRef.value.setCheckedKeys([]);
+  }
 }
 const ids = ref()//id集合
 const DrawerOpen = () => {
-
+  drawer.value = true
+  ids.value = props.checkedIds;
 }
-watch(props, () => {
-  if (props.Drawer) {
-    ids.value = props.checkedIds;
-  }
-
-})
 const cancel = () => {
   emits('cancel')
 }
 const save = () => {
-    emits('save', ids.value)
+  emits('save', ids.value)
 }
 const query = () => {
   emits('query', deptName.value)
@@ -102,4 +97,8 @@ const handleCheck = (
 ) => {
   ids.value = checkedInfo.checkedKeys;
 };
+// 使用 defineExpose 暴露方法
+defineExpose({
+  DrawerOpen,
+});
 </script>