增加关闭弹出框提示

src/views/HomeView.vue

@@ -81,7 +81,7 @@
                         <el-table-column prop="create" label="时间" min-width="250"> </el-table-column>
                         <el-table-column prop="stock" fixed="right" min-width="110">
                             <template slot-scope="scope">
-                                <GuipSwitch :value="scope.row.status" active-value="1" inactive-value="0" @change="onSwitchChange1(scope.row)"></GuipSwitch>
+                                <GuipSwitch :value="scope.row.status" active-value="1" inactive-value="0" @change="onSwitchChange1(scope.row,item.departs)"></GuipSwitch>
                             </template>
                         </el-table-column>
                         <el-table-column label="操作" fixed="right" min-width="120px">
@@ -96,6 +96,12 @@
                 </div>
             </el-form>
         </div>
+        <GuipDialog :dialogVisible="dialogVisible" :title='`确认禁用"${curTitle}"`' :show-close-button="true" width="599px"
+            :show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
+            confirmText="确认禁用">
+            <p class="diaDesc">1.该医院的出诊安排将被清空，再次开启需重新设置。</p>
+            <p class="diaDesc">2.该院在 “12月30日、1月8日、4月20日”共有8位已预约患者。禁用后，请务必做好线下协调。</p>
+        </GuipDialog>
     </div>
 </template>
 <script>
@@ -106,6 +112,7 @@ import GuipTable from '@/components/GuipTable.vue';
 import GuipButton from '@/components/GuipButton.vue';
 import GuipSwitch from '@/components/GuipSwitch.vue';
 import GuipInput from '@/components/GuipInput.vue';
+import GuipDialog from '@/components/GuipDialog.vue';
 import { mapState } from 'vuex';
 import PaymentMethod from '@/views/paymentMethod.vue';
 
@@ -113,6 +120,7 @@ export default {
     props:['onlyHosFlag'],
     data() {
         return {
+            dialogVisible: false,//去人尽用弹出框
             list: {
                 approver_phone: "",
                 code: "",
@@ -148,12 +156,15 @@ export default {
             pageShow:false,
             doctorIds:[],
             payList:false,
-            issuper:false
+            issuper:false,
+            curStatusInfo:{},
+            curTitle:''
         }
     },
     components: {
         // GuipToolTip,
         // SvgIcon,
+        GuipDialog,
         GuipInput,
         GuipButton,
         GuipSwitch,
@@ -229,6 +240,74 @@ export default {
                 console.error(error, 'error')
             })
         },
+        // 修改后的确认方法
+        handleConfirm() {
+            if (this.curStatusInfo) {
+                // 调用接口修改状态
+                this.changeDepartStatus(
+                    this.curStatusInfo.row, 
+                    this.curStatusInfo.departs, 
+                    this.curStatusInfo.originalStatus
+                );
+                this.dialogVisible = false;
+            }
+        },
+        // 修改后的取消方法
+        handleCancel() {
+            if (this.curStatusInfo) {
+                // 恢复开关到原始状态
+                this.curStatusInfo.row.status = this.curStatusInfo.originalStatus;
+                this.dialogVisible = false;
+                
+                // 清空临时信息
+                this.curStatusInfo = null;
+            }
+        },
+
+        // 修改后的关闭方法
+        handleClose() {
+            if (this.curStatusInfo) {
+                // 恢复开关到原始状态
+                this.curStatusInfo.row.status = this.curStatusInfo.originalStatus;
+                this.dialogVisible = false;
+                
+                // 清空临时信息
+                this.curStatusInfo = null;
+            }
+        },
+        changeDepartStatus(row, departs, originalStatus) {
+            console.log(
+                row, departs, originalStatus
+            );
+            const targetStatus = originalStatus == '1' ? '0' : '1';
+            
+            // 这里调用接口
+            this.$http('POST', '/api/admin/depart_mutil_option', {
+                depart_index_ids: row.id,
+                status: targetStatus
+            }).then(response => {
+                if (response.code == 0) {
+                    this.$message.success(response.msg);
+                    // 接口成功，更新为最新状态
+                    row.status = targetStatus;
+                } else {
+                    this.$message.error(response.msg);
+                    // 接口失败，恢复原始状态
+                    row.status = originalStatus;
+                }
+                // 如果需要重新获取数据
+                // this.getInitData();
+            }).catch(error => {
+                console.error(error, 'error');
+                this.$message.error('操作失败');
+                // 接口异常，恢复原始状态
+                row.status = originalStatus;
+            });
+            
+            // 清空临时信息
+            this.curStatusInfo = null;
+        },
+
         inputBlur(val) {
             console.log(val, '');
             this.getInitData()
@@ -308,26 +387,47 @@ export default {
                 item.removeAttribute('aria-hidden')
             })
         },
-        onSwitchChange1(row) {
+        onSwitchChange1(row, departs) {
-            // console.log(row, '------flag');
+            this.curTitle = row.hispital_name
-            row.status = row.status == 0 ? 1 : 0;
+            console.log(row.status, '------flag');
-            this.$http('POST', '/api/admin/depart_mutil_option', {
+            const originalStatus = row.status;
-                depart_index_ids:row.id,
+            // 如果是从启用(1)切换到禁用(0)，弹出确认对话框
-                status:row.status
+            if (originalStatus == '1') {
-            }).then(response => {
+                row.status = '0';
-                if (response.code == 0) {
+                this.curStatusInfo = {
-                    this.$message.success(response.msg);
+                    row: row,
+                    departs: departs,
+                    originalStatus: originalStatus,
+                    targetStatus: '0'
+                };
+                this.dialogVisible = true;
             } else {
-                    this.$message.error(response.msg);
+                // 其他情况（禁用→启用）直接调用接口
+                this.changeDepartStatus(row, departs, originalStatus);
             }
-                this.getInitData()
-            }).catch(error => {
-                console.error(error, 'error')
-                this.$message.error('操作失败');
-            })
-
-            this.$set(this.doctorList, row)
         },
+        // onSwitchChange1(row) {
+        //     this.dialogVisible = true;
+        //     row.status = row.status == 0 ? 1 : 0;
+        //     console.log(row, '------flag');
+        //     this.curStatusInfo = row;
+        //     // this.$http('POST', '/api/admin/depart_mutil_option', {
+        //     //     depart_index_ids:row.id,
+        //     //     status:row.status
+        //     // }).then(response => {
+        //     //     if (response.code == 0) {
+        //     //         this.$message.success(response.msg);
+        //     //     }else{
+        //     //         this.$message.error(response.msg);
+        //     //     }
+        //     //     this.getInitData()
+        //     // }).catch(error => {
+        //     //     console.error(error, 'error')
+        //     //     this.$message.error('操作失败');
+        //     // })
+
+        //     // this.$set(this.doctorList, row)
+        // },
         batchOperate(status) {
             // console.log(this.tableSelections,'this.tableSelections----');
             if(!this.tableSelections || this.tableSelections.length <= 0) {
@@ -511,7 +611,14 @@ export default {
     margin-left: 0 !important;
     transform: none !important;
 }
-
+.diaDesc{
+    margin-top: 12px;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0.08em;
+    color: #23242B;
+}
 .doctor-list-wrap {
     background: #fff;
     padding: 32px 36px;