保存勾选状态的同时勾选、取消勾选交互修改

src/views/AddNewTreatment.vue

@@ -30,15 +30,18 @@
                             <el-checkbox @change="handleSelectAllChange1" v-model="selectAll"
                                 :indeterminate="isIndeterminate">全选</el-checkbox>
                         </div>
-                        <span class="totalCount">共{{ projectList.length }}条，已选{{ selectedCount }}条</span>
+                        <span class="totalCount">共{{ displayedProjectCount }}条，已选{{ selectedCount }}条</span>
                     </div>
 
                     <div class="flex-between mb32 mt32">
                         <div class="tabProject flex">
-                            <div :class="['tab-item ', projectSearchId == item.id ? 'active' : '']"
+                            <div :class="['tab-item point', projectSearchId == 'all' ? 'active' : '']"
-                                v-for="item in Object.values(projectTagData)" :key="item.name">{{ item.name }}</div>
+                                @click="selectTag('all')">全部分类</div>
+                            <div :class="['tab-item point', projectSearchId == item.id ? 'active' : '']"
+                                @click="selectTag(item.id)" v-for="item in Object.values(projectTagData)"
+                                :key="item.name">{{ item.name }}</div>
                         </div>
-                        <div class="right flex">
+                        <div class="right flex" v-show="false">
                             <GuipFormItem label="搜索项目">
                                 <GuipInput slot="formDom" ref="GuipInput" width="280px" v-model="projectSearchName"
                                     placeholder="请输入" @blur="inputBlur">
@@ -48,34 +51,24 @@
                         </div>
                     </div>
                     <GuipTable :tableData="sortedProjectList" style="width: 100%" ref="multipleTable" max-height="600px"
-                        @selection-change="handleSelectionChange" :loading="loading">
+                        @selection-change="handleSelectionChange" :loading="loading" @select="handleSelect">
                         <el-table-column type="selection" label="选择" width="150"></el-table-column>
                         <el-table-column prop="name" label="项目名称" min-width="150"></el-table-column>
                         <el-table-column label="次数" min-width="150px" prop="num">
                             <template slot-scope="scope">
                                 <GuipInput width="90%" v-if="package_id && scope.row.num" v-model="scope.row.num"
+                                    min="1" @change="changeNums(scope.row)" />
+                                <GuipInput width="90%" v-else v-model="scope.row.unit_num" min="1"
                                     @change="changeNums(scope.row)" />
-                                <GuipInput width="90%" v-else v-model="scope.row.unit_num"
-                                    @change="changeNums(scope.row)" />
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="price" label="项目价格" min-width="150">
-                            <template slot-scope="scope">
-                                <GuipInput width="90%" v-model="scope.row.price" @change="changePrice(scope.row)" />
                             </template>
                         </el-table-column>
+                        <el-table-column prop="price" label="项目价格" min-width="150"></el-table-column>
                         <el-table-column prop="classify_id" label="分类" min-width="150">
                             <template slot-scope="scope">
-                                <GuipSelect width="90%" v-model="scope.row.classify_id"
+                                {{ projectTagData[scope.row.classify_id].name }}
-                                    @change="changeClassify(scope.row)" prop="classify_id" :options="projectTagData"
-                                    valueKey="id" labelKey="name" />
                             </template>
                         </el-table-column>
                     </GuipTable>
-                    <!-- <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
-                        :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
-                        :total="treatMentList.length">
-                    </el-pagination> -->
                 </el-form>
             </div>
         </div>
@@ -98,8 +91,9 @@
             </div>
             <div class="flex content">
                 <span>套餐项目：</span>
-                <div class="column">
+                <div class="column gap10 project_list">
-                    <span v-for="item in selectedRows" :key="item.id">{{ item.name }} {{ item.nums }}次</span>
+                    <span v-for="item in sortedProjectRows" :key="item.id">{{ item.name }} {{ item.num || item.unit_num
+                        }}次</span>
                 </div>
             </div>
         </GuipDialog>
@@ -113,7 +107,7 @@ import GuipTable from '@/components/GuipTable.vue';
 import GuipDialog from '@/components/GuipDialog.vue';
 import GuipInput from '@/components/GuipInput.vue';
 import GuipButton from '@/components/GuipButton.vue';
-import GuipSelect from '@/components/GuipSelect.vue';
+// import GuipSelect from '@/components/GuipSelect.vue';
 export default {
     // 站点设置
     name: '',
@@ -123,7 +117,7 @@ export default {
         GuipInput,
         GuipDialog,
         GuipButton,
-        GuipSelect,
+        // GuipSelect,
         GuipTable
 
     },
@@ -136,10 +130,11 @@ export default {
             pageSize: 10,
             isIndeterminate: false,
             projectSearchName: '',
-            projectSearchId: '0',
+            projectSearchId: 'all',
             loading: false,
             treatMentList: [],//疗程套餐项目
             projectList: [],//项目列表
+            projectTagData: [],
             // {
             //     27:{
             //         classify_name:"针类",
@@ -155,14 +150,15 @@ export default {
             //     }
             // },
             selectedRows: [],
+            sortedProjectRows: [],
             siteForm: {
-                create_time: "2025-05-29 17:08:29",
+                create_time: "",
-                depart_id: "1",
+                depart_id: "",
-                doctor_id: "1",
+                doctor_id: "",
-                id: "1",
+                id: "",
-                name: "调理套餐",
+                name: "",
-                price: "1500.00",
+                price: "",
-                status: "1"
+                status: ""
             },
             siteFormrules: {
                 name: [
@@ -172,27 +168,51 @@ export default {
                     { required: true, message: '请输入套餐价格', trigger: 'blur' }
                 ],
             },
-            projectTagData: [],
             package_id: '',
             doctor_id: '',
             depart_id: '',
         }
     },
-   
+
     computed: {
         ...mapState(['pageTitle']),
         sortedProjectList() {
-            return [...this.projectList].sort((a, b) => {
+            // 先根据 sort 属性排序
-                // 有sort属性的排在前面
+            let sortedList = [...this.projectList].sort((a, b) => {
                 if (a.sort && !b.sort) return -1;
                 if (!a.sort && b.sort) return 1;
-                // 如果都有sort属性，按sort值排序
                 if (a.sort && b.sort) return a.sort - b.sort;
-                // 都没有sort属性，保持原顺序
                 return 0;
             });
+            // 然后根据 projectSearchId 筛选
+            if (this.projectSearchId === 'all') {
+                return sortedList;
+            } else {
+                return sortedList.filter(item => item.classify_id == this.projectSearchId);
+            }
+        },
+        // 更新显示的总项目数
+        displayedProjectCount() {
+            return this.sortedProjectList.length;
+        },
+    },
+    watch: {
+        projectSearchId() {
+            this.$nextTick(() => {
+                this.setSelectedRows();
+            });
+        },
+
+        projectList: {
+            deep: true,
+            handler() {
+                this.$nextTick(() => {
+                    this.setSelectedRows();
+                });
+            }
         }
     },
+
     mounted() {
         const { package_id, doctor_id, depart_id } = this.$route.query; // 获取 doctorId 参数
         this.package_id = package_id;
@@ -207,8 +227,45 @@ export default {
         this.fetchProjectData();
     },
     methods: {
-      
+        // 初始化选中项
-        // 
+        initSelectedItems() {
+            if (!this.package_id) {
+                this.selectedRows = [];
+                this.sortedProjectRows = []
+                return;
+            }
+
+            // 编辑状态下，初始选中treatMentList中的项目
+            this.treatMentList.forEach(treatment => {
+                const foundItem = this.projectList.find(item => item.id == treatment.project_id);
+                if (foundItem && !this.selectedRows.some(r => r.id === foundItem.id)) {
+                    foundItem.num = treatment.num;
+                    foundItem.sort = treatment.sort;
+                    this.selectedRows.push(foundItem);
+                }
+            });
+            this.sortedProjectRows = [...this.selectedRows]
+
+            this.setSelectedRows();
+        },
+
+        // // 设置表格选中状态
+        setSelectedRows() {
+            this.$nextTick(() => {
+                if (!this.$refs.multipleTable?.$refs.guiptable) return;
+
+                // 清除当前视图的选中状态
+                this.$refs.multipleTable.$refs.guiptable.clearSelection();
+                this.selectedRows = [];//当前表格选中项
+                // console.log(this.selectedRows, this.sortedProjectRows, 'sortedProjectList==');
+                // 设置当前视图中应该选中的项
+                this.sortedProjectList.forEach(row => {
+                    if (this.sortedProjectRows.some(selected => selected.id === row.id)) {
+                        this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
+                    }
+                });
+            });
+        },
         getInitData() {
             this.$http('POST', '/api/admin/get_project_package_info', {
                 depart_id: this.depart_id,
@@ -226,134 +283,151 @@ export default {
                 console.error(error, 'error')
             })
         },
+        // 在 mounted 或 fetchProjectData 中初始化
         fetchProjectData() {
             this.$http('POST', '/api/admin/get_project_list', {
                 depart_id: this.depart_id,
                 doctor_id: this.doctor_id
             }).then(response => {
                 if (response.code == 0) {
-                    this.projectTagData = response.data.classify;//项目分类
+                    this.projectTagData = response.data.classify;
-                    this.projectList = Object.values(response.data.list).map(item => {
+                    this.projectList = Object.values(response.data.list).map(item => ({
-                        return {
+                        ...item,
-                            ...item,
+                        checked: false
-                            checked: false
+                    }));
-                        }
+
-                    });//项目列表
+                    // 只在第一次加载时初始化选中项
-
+                    if (this.package_id && this.selectedRows.length === 0) {
-                    if (this.package_id) {//编辑状态
+                        this.initSelectedItems();
-                        this.treatMentList.forEach(item => {
-                            this.projectList.forEach(item1 => {
-                                if (item.project_id == item1.id) {
-                                    item1.checked = true;
-                                    item1.num = item.num;
-                                    item1.sort = item.sort;
-                                    // 编辑的时候初始默认选中
-                                    this.$nextTick(() => {
-                                        this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(item1, true);
-                                        this.selectedRows.push(item1)
-                                        this.updateSelectionState();
-                                    });
-
-
-                                }
-                            })
-                        })
-                        // this.$nextTick(() => {
-                        //     if (this.projectList.length >= 2) {
-                        //         const defaultSelected = this.projectList.filter(item => item.checked === true);
-                        //         defaultSelected.forEach(row => {
-                        //             this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
-                        //         });
-                        //         this.selectedRows = defaultSelected;
-                        //         this.updateSelectionState();
-                        //     }
-                        // });
                     }
-
-
                 }
-            }).catch(error => {
+            });
-                console.error(error, 'error')
-            })
-        },
-        changeChecked() {
-
         },
         inputBlur(val) {
             // 搜索项目
-            this.$http('POST', '/supernew/ajax_get_type_batch_list', {
+            // this.$http('POST', '/supernew/ajax_get_type_batch_list', {
-                projectSearchId: this.projectSearchId,
+            //     projectSearchId: this.projectSearchId,
-                search: this.projectSearchName
+            //     search: this.projectSearchName
-            }).then(response => {
+            // }).then(response => {
-                if (response.code == 0) {
+            //     if (response.code == 0) {
-                    this.dialogVisible = false;
+            //         this.dialogVisible = false;
-                }
+            //     }
 
-            }).catch(error => {
+            // }).catch(error => {
-                console.error(error, 'error')
+            //     console.error(error, 'error')
-            })
+            // })
             console.log(val, '----搜索');
         },
         updateSelectionState() {
-            const allSelected = this.selectedRows.length === this.projectList.length;
+            const currentViewSelected = this.sortedProjectList.filter(row =>
-            const noneSelected = this.selectedRows.length === 0;
+                this.selectedRows.some(selected => selected.id === row.id)
+            );
+
+            const allSelected = currentViewSelected.length === this.sortedProjectList.length;
+            const noneSelected = currentViewSelected.length === 0;
+
             this.selectAll = allSelected;
             this.isIndeterminate = !noneSelected && !allSelected;
-            this.selectedCount = this.selectedRows.length;
+            this.selectedCount = this.sortedProjectRows.length;
         },
 
+        handleSelect(selection, row) {
+            // console.log('操作的行:', row);
+            // console.log('当前所有选中行:', selection);
+            if (this.sortedProjectRows.includes(row)) {
+                // console.log('删除当前选中项',this.sortedProjectRows);
+                let index = this.sortedProjectRows.findIndex((item) => item.id === row.id);
+                if (index > -1) {
+                    this.sortedProjectRows.splice(index, 1)
+                }
+            } else {
+                this.sortedProjectRows.push(row)
+            }
+        },
+        handleSelectAll(selection) {
+            console.log('全选/取消全选:', selection);
+        },
         // 处理选择变化
         handleSelectionChange(rows) {
-            this.selectedRows = rows;
+            // console.log(rows, '=======---handleSelectionChange');
+            // 获取当前视图的所有行ID
+            const currentViewIds = this.sortedProjectList.map(r => r.id);
+
+            // 保留不在当前视图的选中项
+            const preservedSelections = this.selectedRows.filter(
+                row => !currentViewIds.includes(row.id)
+            );
+
+            // 合并新旧选择
+            // console.log(preservedSelections,currentViewIds,rows,'=currentViewIds===');
+            this.selectedRows = [...preservedSelections, ...rows];
+            // console.log(this.selectedRows, 'selectedRows===');
+            // let arr = [...new Set([...this.selectedRows, ...this.sortedProjectRows])]
+            // console.log(arr,'arr,走了这里22');
+            // this.selectedRows.forEach(row => {
+            //         if (!this.sortedProjectRows.some(selected => selected.id === row.id)) {
+            //             this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
+            //         }
+            //     });
+            // if(this.)
             this.updateSelectionState();
         },
+
         handleSelectAllChange1(val) {
+            const currentViewRows = this.sortedProjectList;
+
             if (val) {
-                // 只选中未选中的行
+                // 全选操作
-                const unselectedRows = this.projectList.filter(
+                currentViewRows.forEach(row => {
-                    row => !this.selectedRows1.includes(row)
+                    // 如果当前行不在selectedRows中，则添加
-                );
+                    if (!this.selectedRows.some(r => r.id === row.id)) {
-                unselectedRows.forEach(row => {
+                        this.selectedRows.push(row);
-                    this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, true);
+                    }
+                    // 如果当前行不在sortedProjectRows中，则添加
+                    if (!this.sortedProjectRows.some(r => r.id === row.id)) {
+                        this.sortedProjectRows.push(row);
+                    }
                 });
             } else {
-                // 只取消已选中的行
+                // 取消全选操作
-                this.selectedRows.forEach(row => {
+                currentViewRows.forEach(row => {
-                    this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, false);
+                    // 从selectedRows中移除当前视图的行
+                    this.selectedRows = this.selectedRows.filter(r => r.id !== row.id);
+                    // 从sortedProjectRows中移除当前视图的行
+                    this.sortedProjectRows = this.sortedProjectRows.filter(r => r.id !== row.id);
                 });
             }
+
+            // console.log('全选操作后:', {
+            //     selectedRows: this.selectedRows,
+            //     sortedProjectRows: this.sortedProjectRows
+            // });
+
+            // 更新表格选中状态
+            this.$nextTick(() => {
+                this.setSelectedRows();
+                this.updateSelectionState();
+            });
+        },
+
+        // 筛选标签切换
+        selectTag(id) {
+            this.projectSearchId = id === 'all' ? 'all' : id;
+            // this.setSelectedRows();
+            this.updateSelectionState();
         },
         // 只有在原本套餐内的直接修改有效/ 否则无效；
         //  选中项目，进行保存套餐的时候，修改的项目信息才会有效；
         //  修改某一项就将此项默认成为选中
         // 修改次数
         changeNums(row) {
-            if (row.sort) {
+            this.changeSelectStatus(row)
-                this.editorProjectInfo({ num: row.num, project_id: row.id })
-            } else {
-                this.changeSelectStatus(row)
-            }
-        },
-        // 修改分类
-        changeClassify(row) {
-            if (row.sort) {
-                this.editorProjectInfo({ classify_id: row.classify_id, project_id: row.id })
-            } else {
-                this.changeSelectStatus(row)
-
-            }
-        },
-        // 修改价格
-        changePrice(row) {
-            if (row.sort) {
-                this.editorProjectInfo({ price: row.price, project_id: row.id })
-            } else {
-                this.changeSelectStatus(row)
-
-            }
         },
         changeSelectStatus(row) {
-            this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
+            // 不在选中列表中，修改当前项状态
+            if (!this.selectedRows.includes(row)) {
+                this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
+            }
             row.checked = true
             // 确保行被添加到 selectedRows 中
             if (!this.selectedRows.includes(row)) {
@@ -364,7 +438,8 @@ export default {
         },
         // 修改项目信息
         editorProjectInfo(props) {
-            // 
+            console.log(props, '====---');
+            if (this.package_id) props.package_id = this.package_id
             this.$http('POST', '/api/admin/edit_project', {
                 ...props,
                 depart_id: this.depart_id,
@@ -372,7 +447,12 @@ export default {
             }).then(response => {
                 if (response.code == 0) {
                     this.$Message.success('修改成功')
-                    this.getInitData()
+                    // 请求之后会刷新列表状态 暂时不重新请求
+                    // if(this.package_id){
+                    //     this.getInitData()
+                    // }else{
+                    //     this.fetchProjectData()
+                    // }
                 }
             }).catch(error => {
                 console.error(error, 'error')
@@ -385,51 +465,38 @@ export default {
             this.dialogVisible = false;
         },
         handleConfirm() {
+            let project_infos = [];
+            this.selectedRows.forEach(item => {
+                project_infos.push({ project_id: item.id, num: item.num || item.unit_num })
+            })
+            let props = {
+                name: this.siteForm.name,
+                price: this.siteForm.price,
+                project_infos: JSON.stringify(project_infos)
+            }
+            if (this.package_id) props.package_id = this.package_id
             // 确认增加套餐接口
-            this.$http('POST', '/supernew/ajax_get_type_batch_list', {
+            this.$http('POST', '/api/admin/set_project_package', {
-
+                depart_id: this.depart_id,
+                doctor_id: this.doctor_id,
+                ...props
             }).then(response => {
                 if (response.code == 0) {
+                    this.$Message.success('保存成功')
                     this.dialogVisible = false;
+                    this.$router.push({
+                        name: '医院信息',
+                        query: { doctor_id: this.doctor_id, depart_id: this.depart_id }
+                    })
                 }
-
             }).catch(error => {
                 console.error(error, 'error')
             })
         },
         handleClear(value) {
-            // this.handleInput('')
+            this.projectSearchName = ''
             console.log(value, 'value===qinghcu');
         },
-        handleSelectAllChange(val) {
-            console.log(this.$refs.multipleTable, 'multipleTable-');
-            if (val) {
-                // 只选中未选中的行
-                const unselectedRows = this.projectList.filter(
-                    row => !this.selectedRows.includes(row)
-                );
-                unselectedRows.forEach(row => {
-                    this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
-                });
-            } else {
-                // 只取消已选中的行
-                this.selectedRows.forEach(row => {
-                    this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, false);
-                });
-            }
-        },
-
-        // // 处理选择变化
-        // handleSelectionChange(rows) {
-        //     this.selectedRows = rows;
-
-        //     // 更新全选按钮状态
-        //     const allSelected = rows.length === this.treatMentList.length;
-        //     const noneSelected = rows.length === 0;
-
-        //     this.selectAll = allSelected;
-        //     this.isIndeterminate = !noneSelected && !allSelected;
-        // },
         handleSizeChange(val) {
             this.pageSize = val
             this.getData()
@@ -438,69 +505,27 @@ export default {
             this.currentPage = val
             this.getData()
         },
-        changeSelect(value) {
-            console.log(value, '--');
-        },
-        btnClick() {
-        },
-        handleRemove(file, fileList) {
-            console.log(file, fileList);
-        },
-        handlePreview(file) {
-            console.log(file);
-        },
-        // 上传图片
-        handleAvatarSuccess(res, file) {
-            this.imageUrl1 = URL.createObjectURL(file.raw);
-        },
-        beforeAvatarUpload(file) {
-            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
-            const isLt2M = file.size / 1024 / 1024 < 2;
-
-            if (!isJPG) {
-                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
-            }
-            if (!isLt2M) {
-                this.$message.error('上传头像图片大小不能超过 2MB!');
-            }
-            return isJPG && isLt2M;
-        },
-        changeNormalWeixin() {
-
-        },
-        changeSelectWeixin(item, flag) {
-            if (flag) {
-                this.select_placeholder_weixin = this.options_weixin_null.desc;
-                return
-            }
-            this.selectedItem = { ...item };
-            console.log(this.selectedItem, 'this.selectedItem====');
-        },
-        //  销售渠道
-        domain_radioChange(type) {
-            console.log(type, '--');
-        },
-        onSwitchChange(data) {
-            console.log(data, '---');
-        },
-        submitForm(form) {
-            this.$refs[form].validate((valid) => {
-                console.log(this[form], '======formxinxi');
-                if (valid) {
-                    alert('提交成功!');
-                } else {
-                    return false;
-                }
-            });
-        },
         cancelClick() {
             this.$router.push({
                 name: '医院信息',
-                query: { doctor_id: this.doctor_id,depart_id:this.depart_id }
+                query: { doctor_id: this.doctor_id, depart_id: this.depart_id }
             })
         },
         confirmClick() {
-            this.dialogVisible = true;
+            console.log(this.sortedProjectList, 'sortedProjectList==');
+            console.log(this.sortedProjectRows, 'sortedProjectRows==');
+            // // 校验必输
+            this.$refs['siteForm1'].validate((valid) => {
+                if (valid) {
+                    if (this.selectedRows.length == 0) {
+                        this.$Message('请选择套餐项目')
+                        return
+                    }
+                    this.dialogVisible = true;
+                } else {
+                    return false;
+                }
+            });
         }
 
     }
@@ -534,6 +559,11 @@ export default {
     }
 }
 
+.project_list {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
 .totalCount {
     font-size: 12px;
     font-weight: normal;