Browse Source

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

admin_version1.0_2025_06_26
zq 2 weeks ago
parent
commit
f2411a59bb
  1. 458
      src/views/AddNewTreatment.vue

458
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' : '']"
v-for="item in Object.values(projectTagData)" :key="item.name">{{ item.name }}</div>
<div :class="['tab-item point', projectSearchId == 'all' ? 'active' : '']"
@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"
@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" min="1"
@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"
@change="changeClassify(scope.row)" prop="classify_id" :options="projectTagData"
valueKey="id" labelKey="name" />
{{ projectTagData[scope.row.classify_id].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">
<span v-for="item in selectedRows" :key="item.id">{{ item.name }} {{ item.nums }}</span>
<div class="column gap10 project_list">
<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",
depart_id: "1",
doctor_id: "1",
id: "1",
name: "调理套餐",
price: "1500.00",
status: "1"
create_time: "",
depart_id: "",
doctor_id: "",
id: "",
name: "",
price: "",
status: ""
},
siteFormrules: {
name: [
@ -172,7 +168,6 @@ export default {
{ required: true, message: '请输入套餐价格', trigger: 'blur' }
],
},
projectTagData: [],
package_id: '',
doctor_id: '',
depart_id: '',
@ -182,17 +177,42 @@ export default {
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;
// sortsort
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.projectList = Object.values(response.data.list).map(item => {
return {
this.projectTagData = response.data.classify;
this.projectList = Object.values(response.data.list).map(item => ({
...item,
checked: false
}
});//
if (this.package_id) {//
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();
// }
// });
//
if (this.package_id && this.selectedRows.length === 0) {
this.initSelectedItems();
}
}
}).catch(error => {
console.error(error, 'error')
})
},
changeChecked() {
});
},
inputBlur(val) {
//
this.$http('POST', '/supernew/ajax_get_type_batch_list', {
projectSearchId: this.projectSearchId,
search: this.projectSearchName
}).then(response => {
if (response.code == 0) {
this.dialogVisible = false;
}
// this.$http('POST', '/supernew/ajax_get_type_batch_list', {
// projectSearchId: this.projectSearchId,
// search: this.projectSearchName
// }).then(response => {
// if (response.code == 0) {
// this.dialogVisible = false;
// }
}).catch(error => {
console.error(error, 'error')
})
// }).catch(error => {
// console.error(error, 'error')
// })
console.log(val, '----搜索');
},
updateSelectionState() {
const allSelected = this.selectedRows.length === this.projectList.length;
const noneSelected = this.selectedRows.length === 0;
const currentViewSelected = this.sortedProjectList.filter(row =>
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(
row => !this.selectedRows1.includes(row)
);
unselectedRows.forEach(row => {
this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, true);
//
currentViewRows.forEach(row => {
// selectedRows
if (!this.selectedRows.some(r => r.id === row.id)) {
this.selectedRows.push(row);
}
// sortedProjectRows
if (!this.sortedProjectRows.some(r => r.id === row.id)) {
this.sortedProjectRows.push(row);
}
});
} else {
//
this.selectedRows.forEach(row => {
this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, false);
//
currentViewRows.forEach(row => {
// 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.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) {
//
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() {
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;

Loading…
Cancel
Save