From 0b0f71c6ae522317dcb7a97ea6dc2afe343a1f38 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Mon, 16 Jun 2025 18:41:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8C=BB=E7=94=9F=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/index.js          |  12 +-
 src/style/theme/common.scss |   9 +
 src/views/HomeView.vue      | 458 ++++++++++++++++++++++++++++++++------------
 3 files changed, 359 insertions(+), 120 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index 6d90d26..a607877 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -132,9 +132,16 @@ export default new Vuex.Store({
           }
         ]
       }
-    ]
+    ],
+    pageName:'医生管理'
+
   },
   actions: {
+    SET_PAGENAME({
+      commit
+    }) {
+      commit('SET_PAGENAME');
+    },
     SET_HEADER({
       commit
     }) {
@@ -199,6 +206,9 @@ export default new Vuex.Store({
     SET_PAGETITLE(state, title) {
       state.pageTitle = title;
     },
+    SET_PAGENAME(state, name) {
+      state.pageName = name;
+    },
     SET_ADDSERVICELIST(state, list) {
       state.addServiceList = list;
     }
diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index 4449eaf..c33a5f6 100644
--- a/src/style/theme/common.scss
+++ b/src/style/theme/common.scss
@@ -13,6 +13,15 @@ body {
         padding: 0;
     }
 }
+.pageTitle{
+    font-family: Microsoft YaHei UI;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0.08em;
+    color: #1E2226;
+    text-align: left;
+}
 /* 隐藏全局滚动条 */
 ::-webkit-scrollbar {
     display: none;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e071484..16ab419 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,42 +3,89 @@
         <div class="doctor-list-wrap ">
             <p class="pageTitle">医生列表</p>
             <el-form>
-                <div class="selectAllTable-wrap flex-between">
+                <div class="selectAllTable-wrap flex-between  mt32">
                     <div class="left flex">
                         <div class="checkboxAll">
-                            <el-checkbox  @change="handleCheckAllChange"
-                                v-model="checked">全选</el-checkbox>
+                            <el-checkbox @change="handleTotalCheckAllChange" v-model="allChecked" :indeterminate="isIndeterminate">全选</el-checkbox>
                         </div>
                         <span class="totalCount">共{{ totalNum }}条，已选{{ selectNum }}条</span>
-                        <GuipButton type="ignore" :btnstyle="{width:'99px',height:'32px',margin:'0 26px'}" @click="batchOperate('1')">批量禁用</GuipButton>
-                        <GuipButton type="ignore" :btnstyle="{width:'99px',height:'32px'}" @click="batchOperate('2')">批量启用</GuipButton>
+                        <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }"
+                            @click="batchOperate('1')">批量禁用</GuipButton>
+                        <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
+                            @click="batchOperate('2')">
+                            批量启用</GuipButton>
                     </div>
-                    <div class="right flex mt32">
+                    <div class="right flex">
                         <span>搜索医生</span>
-                        <GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px" placeholder="输入姓名" />
+                        <GuipInput ref="GuipInput" style="margin:0 24px 0 12px" width="280px" height="32px"
+                            placeholder="输入姓名" />
                         <GuipButton @click="addDoctor" size="form">新增医生</GuipButton>
                     </div>
                 </div>
-                <div class="tableList mt32">
-                   <div class="top flex-between mb24">
-                    <div class="left left1 flex">
-                        <el-checkbox  @change="handleCheckAllChange(1)"
-                        v-model="checked1"></el-checkbox>
-                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
-                        <span class="name">张虎</span>
-                        <span>13788990987</span>
-                        <GuipSwitch :modelValue="switchValue" @change="onSwitchChange(1)">
-                        </GuipSwitch>
-                        <GuipButton type="text" @click="editDoctor(1)">编辑</GuipButton>
-                    </div>
-                    <div class="right">
-                        <GuipButton type="system" size="form" @click="addHospital(1)">添加医院</GuipButton>
+                <div class="tableList mt32" v-for="(item, index) in doctorList" :key="index">
+                    <div class="top flex-between mb24">
+                        <div class="left left1 flex">
+                            <el-checkbox @change="handleCheckAllChange(index)" v-model="item.checked"></el-checkbox>
+                            <el-avatar :src="item.avatar"></el-avatar>
+                            <span class="name">{{ item.name }}</span>
+                            <span>{{ item.phone }}</span>
+                            <GuipSwitch :modelValue="item.status" @change="onSwitchChange(index)">
+                            </GuipSwitch>
+                            <GuipButton type="text" @click="editDoctor(index)">编辑</GuipButton>
+                        </div>
+                        <div class="right">
+                            <GuipButton type="system" size="form" @click="addHospital(index)">添加医院</GuipButton>
+                        </div>
+
                     </div>
+                    <GuipTable :tableData="item.list" style="width: 100%" :ref="(el) => setPopoverRef(index, el)" @selection-change="handleSelectionChange(index,$event)"
+                        :show-header="false" :loading="loading" >
+                        <el-table-column type="selection" width="135">
+                        </el-table-column>
+                        <el-table-column prop="hos" label="出诊医院" min-width="295">
+                            <template slot-scope="scope">
+                                <div class="flex cell_render">
+                                    <span>{{ scope.row.hos[0] }}项</span>
+                                    <span v-if="scope.row.hos.length">（ 等{{ scope.row.hos.length }}个 ）</span>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="nums" label="项目个数" min-width="165">
+                            <template slot-scope="scope">
+                                <div class="flex cell_render">
+                                    <span>{{ scope.row.nums }}项</span>
+                                </div>
+                            </template>
+                        </el-table-column>
 
-                   </div>
-                    <GuipTable  :multiple="true" :tableData="tableData" style="width: 100%" ref="table_1" 
-                        :show-header="false" :loading="loading">
-                        <el-table-column fixed="left" prop="sort" label="排序" width="70"></el-table-column>
+                        <el-table-column prop="group" label="组别" min-width="165">
+                            <template slot-scope="scope">
+                                <div class="flex cell_render">
+                                    {{ scope.row.group }}分组
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="setMenu" label="套餐" min-width="165">
+                            <template slot-scope="scope">
+                                <div class="flex cell_render">
+                                    {{ scope.row.setMenu }}分组
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="time" label="时间" min-width="200"> </el-table-column>
+                        <el-table-column prop="stock" fixed="right" min-width="110">
+                            <template slot-scope="scope">
+                                <GuipSwitch :modelValue="scope.row.status" @change="onSwitchChange1(scope.row)">
+                                </GuipSwitch>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" fixed="right" min-width="120px">
+                            <template slot-scope="scope">
+                                <div class="flex">
+                                    <el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
+                                </div>
+                            </template>
+                        </el-table-column>
                     </GuipTable>
                 </div>
             </el-form>
@@ -46,7 +93,7 @@
     </div>
 </template>
 <script>
-const cityOptions = ['上海', '北京', '广州', '深圳'];
+// const cityOptions = ['上海', '北京', '广州', '深圳'];
 import store from '@/store';
 import GuipTable from '@/components/GuipTable.vue';
 // import SvgIcon from '@/components/SvgIcon.vue';
@@ -57,107 +104,102 @@ import GuipInput from '@/components/GuipInput.vue';
 export default {
     data() {
         return {
+            tableSelections:[],//已选中数据
             tableData: [
                 {
-                    sort:1
+                    sort: 1
                 }
             ],
-            loading:false,
-            switchValue:true,
-            checked:false,
-            checked1:false,
+            popoverRefs: {},
+            loading: false,
+            switchValue: true,
+            checked: false,
+            checked1: false,
             totalNum: 0,
             selectNum: 0,
-            isIndeterminate:true,
-            doctorList:[
+            isIndeterminate: false,
+            doctorList: [
                 {
-                    id:10,
-                    name:'一二',
-                    idcard:'532524198711223615',
-                    desc:'就哈哈哈哈，嗷跳舞',
-                    detail:'拉开是金德拉克撒娇了大数据连接拉萨。。。',
-                    tag:'专业',
-                    phone:'17785748373',
-                    avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
-                    status:true,
-                    list:[
+                    id: 10,
+                    checked: false,
+                    name: '一二',
+                    idcard: '532524198711223615',
+                    desc: '就哈哈哈哈，嗷跳舞',
+                    detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
+                    tag: '专业',
+                    phone: '17785748373',
+                    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                    status: true,
+                    list: [
                         {
-                            hos:[
+                            hos: [
                                 '第三人民医院 针灸科',
                                 '第一人民医院 中医科',
                             ],
-                            time:'2054 - 10 - 03',
-                            status:true,
-                            group:'2组',
-                            setMenu:'4套餐',
-                            nums:'88项',
-                            checked:false,
+                            time: '2054 - 10 - 03',
+                            status: true,
+                            group: '2',
+                            setMenu: '4',
+                            nums: '88',
+                            checked: false,
                         },
                     ]
                 },
                 {
-                    id:10,
-                    name:'一二',
-                    idcard:'532524198711223615',
-                    desc:'就哈哈哈哈，嗷跳舞',
-                    detail:'拉开是金德拉克撒娇了大数据连接拉萨。。。',
-                    tag:'专业',
-                    phone:'17785748373',
-                    avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
-                    status:false,
-                    list:[
+                    id: 10,
+                    checked: false,
+                    name: '一二',
+                    idcard: '532524198711223615',
+                    desc: '就哈哈哈哈，嗷跳舞',
+                    detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
+                    tag: '专业',
+                    phone: '17785748373',
+                    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                    status: false,
+                    list: [
                         {
-                            hos:[
+                            hos: [
                                 '第三人民医院 针灸科',
                                 '第一人民医院 中医科',
                             ],
-                            time:'2054 - 10 - 03',
-                            status:true,
-                            group:'2组',
-                            setMenu:'4套餐',
-                            nums:'88项',
-                            checked:false,
+                            time: '2054 - 10 - 03',
+                            status: true,
+                            group: '2',
+                            setMenu: '4',
+                            nums: '88',
+                            checked: false,
                         },
                         {
-                            hos:[
+                            hos: [
                                 '第三人民医院 针灸科',
                                 '第一人民医院 中医科',
                             ],
-                            time:'2054 - 10 - 03',
-                            status:true,
-                            group:'2组',
-                            setMenu:'4套餐',
-                            nums:'88项',
-                            checked:false,
+                            time: '2054 - 10 - 03',
+                            status: true,
+                            group: '2',
+                            setMenu: '4',
+                            nums: '88',
+                            checked: false,
                         },
                     ]
                 },
                 {
-                    id:10,
-                    name:'一二',
-                    idcard:'532524198711223615',
-                    desc:'就哈哈哈哈，嗷跳舞',
-                    detail:'拉开是金德拉克撒娇了大数据连接拉萨。。。',
-                    tag:'专业',
-                    phone:'17785748373',
-                    avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
-                    status:false,
-                    list:[
-                        {
-                            hos:[
-                                '第三人民医院 针灸科',
-                                '第一人民医院 中医科',
-                            ],
-                            time:'2054 - 10 - 03',
-                            status:true,
-                            group:'2组',
-                            setMenu:'4套餐',
-                            nums:'88项',
-                            checked:false,
-                        },
+                    id: 10,
+                    checked: false,
+                    name: '一二',
+                    idcard: '532524198711223615',
+                    desc: '就哈哈哈哈，嗷跳舞',
+                    detail: '拉开是金德拉克撒娇了大数据连接拉萨。。。',
+                    tag: '专业',
+                    phone: '17785748373',
+                    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                    status: false,
+                    list: [
+
                     ]
                 },
-            ]
+            ],
+            allChecked: false,
         }
     },
     components: {
@@ -171,55 +213,230 @@ export default {
     },
     created() {
         store.commit('SET_PAGENAME', '医生管理'); // 登录页面不显示侧边栏
+        this.calculateTotalNum()
     },
     computed: {
     },
     methods: {
-        handleCheckAllChange(val) {
-            this.checkedCities = val ? cityOptions : [];
-            this.isIndeterminate = false;
+         // 计算总条数
+         calculateTotalNum() {
+            this.totalNum = this.doctorList.reduce((total, doctor) => {
+                return total + (doctor.list ? doctor.list.length : 0);
+            }, 0);
+        },
+        handleClick(row){
+            console.log(row);
+            // 跳转编辑页面
+        },
+        setPopoverRef(index, el) {
+            if (el) {
+                this.popoverRefs[index] = el
+            }
+        },
+        //获取当前实例
+        getPopoverRef(index) {
+            return this.popoverRefs[index]
+        },
+        // 点击价格单元格时触发
+        handlePriceClick(row, index, type) {
+            // 关闭其他行的弹框
+            this.popoverFlag = true;
+            this.doctorList.forEach((item, i) => {
+                if (i !== index) {
+                    item[type + 'PopoverVisible'] = false;
+                }
+            });
+            // 打开当前行的弹框
+            row[type + 'PopoverVisible'] = true;
+            row['edit_' + type] = row[type]
+            // row.edit_price = row.price; // 初始化输入框的值
+        },
+
+        // 保存价格
+        savePrice(row, type) {
+            if (type == 'price' && row.edit_price === '') {
+                this.$message.warning('价格不能为空');
+                return;
+            }
+            if (type == 'word' && row.word && row.editWord === '') {
+                this.$message.warning('字符不能为空');
+                return;
+            }
+            if (row.edit_word) {
+                row.word = row.edit_word
+            }
+            row[type] = row['edit_' + type]; // 更新价格
+            row[type + 'PopoverVisible'] = false; // 关闭弹框
+            this.$message.success('保存成功');
+            this.$set(this.doctorList, row)
+            console.log('保存价格：', this.doctorList, row.price);
+            // 这里可以调用接口保存修改后的价格
+        },
+        // 取消编辑
+        cancelEdit(row, type) {
+            row[type + 'PopoverVisible'] = false;
+            this.popoverFlag = false
+            // row[type + '_popover'] = false; // 关闭弹框
+            this.$Message.info('已取消编辑');
         },
-        batchOperate(type){
-            if(type== '1'){
+        popshow() {
+            var ariaEls = document.querySelectorAll('.el-popover')
+            ariaEls.forEach((item) => {
+                item.removeAttribute('aria-hidden')
+            })
+
+            ariaEls = document.querySelectorAll('.el-radio__original')
+            ariaEls.forEach((item) => {
+                item.removeAttribute('aria-hidden')
+            })
+        },
+        onSwitchChange1(row) {
+            console.log(row, '------flag');
+            row.status = !row.status;
+            this.$set(this.doctorList, row)
+        },
+        // handleCheckAllChange(val) {
+        //     this.checkedCities = val ? cityOptions : [];
+        //     this.isIndeterminate = false;
+        // },
+        // handleCheckAllChange(val) {
+        //     if (val == 'all') {
+        //         console.log(this.allChecked, '-----allchecked');
+        //         var i = 0;
+        //         while (i < this.doctorList.length) {
+        //             this.doctorList[i].checked = this.allChecked;
+        //             this.getPopoverRef(i).$refs.guiptable.toggleAllSelection();
+        //             i++
+        //         }
+        //     } else {
+        //         this.getPopoverRef(val).$refs.guiptable.toggleAllSelection();
+
+        //     }
+        // },
+        batchOperate(type) {
+            if (type == '1') {
                 // 禁用
-                
-            }else{
+
+            } else {
                 // 启用
 
             }
         },
-        onSwitchChange(index){
-            console.log(index,'====');
+        onSwitchChange(index) {
+            console.log(index, '====');
         },
-        addDoctor(){
+        addDoctor() {
             console.log('添加医生');
         },
-        addHospital(index){
-            console.log(index,'====');
+        addHospital(index) {
+            console.log(index, '====');
+        },
+        editDoctor(index) {
+            console.log(index, '====');
         },
-        editDoctor(index){
-            console.log(index,'====');
+        // 单个表格的选择变化
+        handleSelectionChange(index, selection) {
+            // 更新当前表格的选中状态
+            this.doctorList[index].checked = selection.length === this.doctorList[index].list.length;
+            this.tableSelections[index] = selection;
+            
+            // 更新全局状态
+            this.updateGlobalSelection();
+        },
+        
+        // 单个表格的全选/取消
+        handleCheckAllChange(index) {
+            const table = this.doctorList[index];
+            const tableRef = this.getPopoverRef(index);
+            
+            if (table.checked) {
+                // 全选当前表格
+                tableRef.$refs.guiptable.toggleAllSelection();
+            } else {
+                // 取消当前表格全选
+                tableRef.$refs.guiptable.clearSelection();
+            }
+            
+            // 更新全局状态
+            this.updateGlobalSelection();
+        },
+        
+        // 总全选控制
+        handleTotalCheckAllChange() {
+            if (this.allChecked) {
+                // 总全选：只选中未全选的表格
+                this.doctorList.forEach((table, index) => {
+                    if (!table.checked) {
+                        this.doctorList[index].checked = true;
+                        this.getPopoverRef(index).$refs.guiptable.toggleAllSelection();
+                    }
+                });
+            } else {
+                // 取消总全选：只取消已全选的表格
+                this.doctorList.forEach((table, index) => {
+                    if (table.checked) {
+                        this.doctorList[index].checked = false;
+                        this.getPopoverRef(index).$refs.guiptable.clearSelection();
+                    }
+                });
+            }
+            
+            // 更新全局状态
+            this.updateGlobalSelection();
+        },
+        
+        // 更新全局选中状态
+        updateGlobalSelection() {
+            // 计算总选中数
+            this.selectNum = Object.values(this.tableSelections).reduce((total, selection) => {
+                return total + (selection ? selection.length : 0);
+            }, 0);
+            
+            // 计算总全选状态
+            const allTables = this.doctorList.length;
+            const checkedTables = this.doctorList.filter(table => table.checked).length;
+            
+            this.allChecked = checkedTables === allTables && allTables > 0;
+            this.isIndeterminate = checkedTables > 0 && checkedTables < allTables;
         },
     }
 }
 </script>
 <style lang="scss" scoped>
-::v-deep .el-avatar{
+::v-deep .el-avatar {
     width: 26px;
     height: 26px;
 }
+
+::v-deep .el-table {
+    min-height: auto;
+}
+
+::v-deep .custom-popover {
+    position: fixed !important;
+    max-height: 290px;
+    overflow-y: auto;
+    margin-top: 0 !important;
+    margin-left: 0 !important;
+    transform: none !important;
+}
+
 .doctor-list-wrap {
     margin: 12px;
     background: #fff;
     padding: 32px 36px;
     height: 100%;
     border-radius: 4px;
-    .left,.right{
+
+    .left,
+    .right {
         align-items: center;
     }
-    .selectAllTable-wrap{
+
+    .selectAllTable-wrap {
         align-items: center;
-        .totalCount{
+
+        .totalCount {
             font-size: 12px;
             font-weight: normal;
             line-height: 13px;
@@ -227,18 +444,21 @@ export default {
             color: #8A9099;
             margin-left: 12px;
         }
-        .right{
+
+        .right {
             letter-spacing: 0.08em;
             color: #626573;
         }
     }
-    .left1{
+
+    .left1 {
         gap: 12px;
     }
-    .el-form-item{
+
+    .el-form-item {
         margin-bottom: 0;
     }
-  
+
 
 }
 </style>
\ No newline at end of file