zhangqi
/
acupuncture_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

疗程套餐修改交互逻辑

master
zq 3 weeks ago
parent
33b48520d6
commit
ab6b007b45
5 changed files with 316 additions and 209 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      src/components/GlobalLoading1.vue
  2. 2
      src/components/GuipSelect.vue
  3. 5
      src/router/index.js
  4. 314
      src/views/AddNewTreatment.vue
  5. 55
      src/views/HosInformation.vue

31
src/components/GlobalLoading1.vue
View File

@ -1,12 +1,13 @@
<template> <template>
<div> <div style="height:100%">
<div class="content-loading-overlay" v-show="isLoading"> <div class="content-loading-overlay" v-show="isLoading">
<div class="loading-content"> <div class="loading-content">
<div ref="animationContainer" class="animation-container"></div> <div ref="animationContainer" class="animation-container"></div>
</div> </div>
</div> </div>
<div v-show="!isLoading"> <div style="height:100%" v-show="!isLoading">
<slot></slot> <slot></slot>
<!-- <Footer v-if="showFooter"></Footer> -->
</div> </div>
</div> </div>
</template> </template>
@ -16,16 +17,18 @@ import { mapState } from 'vuex'
import defaultAnimation from '@/assets/loadingAni.json' import defaultAnimation from '@/assets/loadingAni.json'
export default { export default {
name: 'Loading', name: 'Loading',
data() { data() {
return { return {
anim: null anim: null
} }
}, },
computed: { components: {
...mapState(['isLoading', 'loadingText']) },
}, computed: {
watch: { ...mapState(['isLoading','showFooter', 'loadingText'])
},
watch: {
isLoading(newVal) { isLoading(newVal) {
this.$nextTick(() => { this.$nextTick(() => {
if (newVal) { if (newVal) {
@ -35,8 +38,8 @@ export default {
} }
}) })
} }
}, },
methods: { methods: {
playAnimation() { playAnimation() {
// 销毁旧实例（可选，根据需求） // 销毁旧实例（可选，根据需求）
if (this.anim) { if (this.anim) {
@ -58,12 +61,12 @@ export default {
this.anim.stop() this.anim.stop()
} }
} }
}, },
beforeDestroy() { beforeDestroy() {
if (this.anim) { if (this.anim) {
this.anim.destroy() // 组件销毁时彻底清理 this.anim.destroy() // 组件销毁时彻底清理
} }
} }
} }
</script> </script>

2
src/components/GuipSelect.vue
View File

@ -18,7 +18,7 @@ export default {
props: { props: {
value: [String, Number, Array], value: [String, Number, Array],
options: { options: {
type: Array, type: [Array,Object],
default: () => [] default: () => []
}, },
// 新增配置字段 // 新增配置字段

5
src/router/index.js
View File

@ -45,8 +45,9 @@ const routes = [
path: '/addNewTreatment', path: '/addNewTreatment',
component: () => import( /* webpackChunkName: "addNewTreatment" */ '../views/AddNewTreatment.vue'), component: () => import( /* webpackChunkName: "addNewTreatment" */ '../views/AddNewTreatment.vue'),
name: '新增套餐', name: '新增套餐',
children: [ meta: {
] hideBreadcrumb: true // 首页不显示面包屑
}
}, },
{ {
path: '/ui', path: '/ui',

314
src/views/AddNewTreatment.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="site-setting-wrap min-flex-right"> <div class="site-setting-wrap min-flex-right">
<div class="pagePadding"> <div class="pagePadding main-wrap">
<p class="pageTitle bold">新增套餐</p> <p class="pageTitle bold">新增套餐</p>
<div class="siteMessage flex-common" id="siteMessage2"> <div class="siteMessage flex-common" id="siteMessage2">
<p class="littleTitle mb32">套餐信息</p> <p class="littleTitle mb32">套餐信息</p>
@ -30,13 +30,13 @@
<el-checkbox @change="handleSelectAllChange1" v-model="selectAll" <el-checkbox @change="handleSelectAllChange1" v-model="selectAll"
:indeterminate="isIndeterminate">全选</el-checkbox> :indeterminate="isIndeterminate">全选</el-checkbox>
</div> </div>
<span class="totalCount">共{{ treatMentList.length }}条，已选{{ selectedCount }}条</span> <span class="totalCount">共{{ projectList.length }}条，已选{{ selectedCount }}条</span>
</div> </div>
<div class="flex-between mb32 mt32"> <div class="flex-between mb32 mt32">
<div class="tabProject flex"> <div class="tabProject flex">
<div :class="['tab-item ', projectSearchId == item.id ? 'active' : '']" <div :class="['tab-item ', projectSearchId == item.id ? 'active' : '']"
v-for="item in projectTagData" :key="item.name">{{ item.name }}</div> v-for="item in Object.values(projectTagData)" :key="item.name">{{ item.name }}</div>
</div> </div>
<div class="right flex"> <div class="right flex">
<GuipFormItem label="搜索项目"> <GuipFormItem label="搜索项目">
@ -47,22 +47,35 @@
</GuipFormItem> </GuipFormItem>
</div> </div>
</div> </div>
<GuipTable :tableData="treatMentList" style="width: 100%" ref="multipleTable" <GuipTable :tableData="sortedProjectList" style="width: 100%" ref="multipleTable"
@selection-change="handleSelectionChange" :loading="loading"> @selection-change="handleSelectionChange" :loading="loading">
<el-table-column type="selection" label="选择" width="150"></el-table-column> <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 prop="name" label="项目名称" min-width="150"></el-table-column>
<el-table-column label="次数" min-width="150px"> <el-table-column label="次数" min-width="150px" prop="num">
<template slot-scope="scope"> <template slot-scope="scope">
<GuipInput width="120px" v-model="scope.row.nums" @change="changeNums(scope.row)" /> <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"
@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="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" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="price" label="项目价格" min-width="150"></el-table-column>
<el-table-column prop="group" label="分类" min-width="150"></el-table-column>
</GuipTable> </GuipTable>
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' <!-- <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
:total="treatMentList.length"> :total="treatMentList.length">
</el-pagination> </el-pagination> -->
</el-form> </el-form>
</div> </div>
</div> </div>
@ -73,8 +86,8 @@
</GuipButton> </GuipButton>
</div> </div>
<GuipDialog :dialogVisible="dialogVisible" :title="'新增套餐确认'" :show-close-button="true" width="599px" <GuipDialog :dialogVisible="dialogVisible" :title="'新增套餐确认'" :show-close-button="true" width="599px"
:show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel" :show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
@close="handleClose" confirmText="确定新增"> confirmText="确定新增">
<div class="flex content"> <div class="flex content">
<span>套餐名称：</span> <span>套餐名称：</span>
<span>{{ siteForm.name }}套餐</span> <span>{{ siteForm.name }}套餐</span>
@ -100,6 +113,7 @@ import GuipTable from '@/components/GuipTable.vue';
import GuipDialog from '@/components/GuipDialog.vue'; import GuipDialog from '@/components/GuipDialog.vue';
import GuipInput from '@/components/GuipInput.vue'; import GuipInput from '@/components/GuipInput.vue';
import GuipButton from '@/components/GuipButton.vue'; import GuipButton from '@/components/GuipButton.vue';
import GuipSelect from '@/components/GuipSelect.vue';
export default { export default {
// 站点设置 // 站点设置
name: '', name: '',
@ -109,12 +123,13 @@ export default {
GuipInput, GuipInput,
GuipDialog, GuipDialog,
GuipButton, GuipButton,
GuipSelect,
GuipTable GuipTable
}, },
data() { data() {
return { return {
dialogVisible: true, dialogVisible: false,
selectAll: false, selectAll: false,
selectedCount: 0, selectedCount: 0,
currentPage: 1, currentPage: 1,
@ -123,96 +138,152 @@ export default {
projectSearchName: '', projectSearchName: '',
projectSearchId: '0', projectSearchId: '0',
loading: false, loading: false,
treatMentList: [ treatMentList: [],//疗程套餐项目
{ projectList: [],//项目列表
name: '针灸1', // {
nums: 1, // 27:{
checked: true, // classify_name:"针类",
group: '针灸1', // create_time:"2025-05-29 17:09:43",
price: 9939, // id:"1",
id: '11' // name:"针刺",
}, // num:"2",
{ // pid:"1",
name: '针灸2', // price:"200.00",
nums: 1, // project_id:"27",
checked: false, // sort:"1",
group: '针灸1', // status:"1",
price: 199, // }
id: '12' // },
},
{
name: '针灸1',
nums: 1,
checked: true,
group: '针灸1',
price: 9939,
id: '111'
},
{
name: '针灸2',
nums: 1,
checked: false,
group: '针灸1',
price: 199,
id: '122'
},
],
selectedRows: [], selectedRows: [],
siteForm: { siteForm: {
name: '青春永驻套餐', create_time: "2025-05-29 17:08:29",
price: '99999' depart_id: "1",
doctor_id: "1",
id: "1",
name: "调理套餐",
price: "1500.00",
status: "1"
}, },
siteFormrules: { siteFormrules: {
name: [ name: [
{ required: true, message: '请输入站点简称', trigger: 'blur' } { required: true, message: '请输入套餐名称', trigger: 'blur' }
], ],
price: [ price: [
{ required: true, message: '请输入站点简称', trigger: 'blur' } { required: true, message: '请输入套餐价格', trigger: 'blur' }
], ],
}, },
projectTagData: [ projectTagData: [],
{ package_id: '',
name: '针灸1', doctor_id: '',
id: '1' depart_id: '',
},
{
name: '针灸2',
id: '11'
},
{
name: '针灸3',
id: '12'
},
{
name: '针灸4',
id: '13'
},
],
} }
}, },
computed: { computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 ...mapState(['pageTitle']),
sortedProjectList() {
return [...this.projectList].sort((a, b) => {
// 有sort属性的排在前面
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;
});
}
}, },
mounted() { mounted() {
const { package_id, doctor_id, depart_id } = this.$route.query; // 获取 doctorId 参数
this.package_id = package_id;
this.depart_id = depart_id;
this.doctor_id = doctor_id;
store.commit('SET_PAGETITLE', '基本设置'); store.commit('SET_PAGETITLE', '基本设置');
// 编辑的时候默认选中 // 编辑
if (package_id) {
this.getInitData()
return
}
this.fetchProjectData();
},
methods: {
//
getInitData() {
this.$http('POST', '/api/admin/get_project_package_info', {
depart_id: this.depart_id,
doctor_id: this.doctor_id,
package_id: this.package_id
}).then(response => {
if (response.code == 0) {
this.siteForm = { ...response.data }
if (response.data?.project_list) {
this.treatMentList = Object.values(response.data.project_list)
this.fetchProjectData()
}
}
}).catch(error => {
console.error(error, 'error')
})
},
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 {
...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.$nextTick(() => {
if (this.treatMentList.length >= 2) { this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(item1, true);
const defaultSelected = this.treatMentList.filter(item => item.checked === true); this.selectedRows.push(item1)
defaultSelected.forEach(row => {
this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
});
this.selectedRows = defaultSelected;
this.updateSelectionState(); 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')
})
}, },
methods: { changeChecked() {
inputBlur(val){
},
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;
@ -221,10 +292,10 @@ export default {
}).catch(error => { }).catch(error => {
console.error(error, 'error') console.error(error, 'error')
}) })
console.log(val,'----搜索'); console.log(val, '----搜索');
}, },
updateSelectionState() { updateSelectionState() {
const allSelected = this.selectedRows.length === this.treatMentList.length; const allSelected = this.selectedRows.length === this.projectList.length;
const noneSelected = this.selectedRows.length === 0; const noneSelected = this.selectedRows.length === 0;
this.selectAll = allSelected; this.selectAll = allSelected;
this.isIndeterminate = !noneSelected && !allSelected; this.isIndeterminate = !noneSelected && !allSelected;
@ -239,7 +310,7 @@ export default {
handleSelectAllChange1(val) { handleSelectAllChange1(val) {
if (val) { if (val) {
// 只选中未选中的行 // 只选中未选中的行
const unselectedRows = this.treatMentList.filter( const unselectedRows = this.projectList.filter(
row => !this.selectedRows1.includes(row) row => !this.selectedRows1.includes(row)
); );
unselectedRows.forEach(row => { unselectedRows.forEach(row => {
@ -252,8 +323,60 @@ export default {
}); });
} }
}, },
// 只有在原本套餐内的直接修改有效/ 否则无效；
// 选中项目，进行保存套餐的时候，修改的项目信息才会有效；
// 修改某一项就将此项默认成为选中
// 修改次数
changeNums(row) { changeNums(row) {
console.log(row.nums, '====row.nums'); 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) {
this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true);
row.checked = true
// 确保行被添加到 selectedRows 中
if (!this.selectedRows.includes(row)) {
this.selectedRows.push(row);
}
// 更新选择状态
this.updateSelectionState();
},
// 修改项目信息
editorProjectInfo(props) {
//
this.$http('POST', '/api/admin/edit_project', {
...props,
depart_id: this.depart_id,
doctor_id: this.doctor_id,
}).then(response => {
if (response.code == 0) {
this.$Message.success('修改成功')
this.getInitData()
}
}).catch(error => {
console.error(error, 'error')
})
}, },
handleClose() { handleClose() {
this.handleCancel() this.handleCancel()
@ -282,7 +405,7 @@ export default {
console.log(this.$refs.multipleTable, 'multipleTable-'); console.log(this.$refs.multipleTable, 'multipleTable-');
if (val) { if (val) {
// 只选中未选中的行 // 只选中未选中的行
const unselectedRows = this.treatMentList.filter( const unselectedRows = this.projectList.filter(
row => !this.selectedRows.includes(row) row => !this.selectedRows.includes(row)
); );
unselectedRows.forEach(row => { unselectedRows.forEach(row => {
@ -372,7 +495,10 @@ export default {
}); });
}, },
cancelClick() { cancelClick() {
this.$router.push('/hosInformation') this.$router.push({
name: '医院信息',
query: { doctor_id: this.doctor_id,depart_id:this.depart_id }
})
}, },
confirmClick() { confirmClick() {
this.dialogVisible = true; this.dialogVisible = true;
@ -381,13 +507,14 @@ export default {
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.siteMessage { .siteMessage {
border-radius: 4px; border-radius: 4px;
transition: all .5s; transition: all .5s;
border: 1px solid transparent; border: 1px solid transparent;
} }
.content{
.content {
margin-top: 16px; margin-top: 16px;
color: #626573; color: #626573;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@ -476,6 +603,13 @@ export default {
.site-setting-wrap { .site-setting-wrap {
width: 100%; width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.main-wrap {
flex: 1;
}
} }
#siteMessage2 { #siteMessage2 {

55
src/views/HosInformation.vue
View File

@ -90,9 +90,9 @@
<div class="flex-right"> <div class="flex-right">
<GuipFormItem column="column" label="每周出诊安排" :required="true"> <GuipFormItem column="column" label="每周出诊安排" :required="true">
<div class="flex weekPlan" slot="formDom"> <div class="flex weekPlan" slot="formDom">
<!-- <GuipSelect v-for="day in weekDays" :key="day.id" v-model="form.worktimes[day.id].plan" <GuipSelect v-for="day in weekDays" :key="day.id" v-model="form.worktimes[day.id].plan"
:options="options_weekPlan" @change="weekChange()" :label="day.name" placeholder="休息"> :options="options_weekPlan" @change="weekChange()" :label="day.name" placeholder="休息">
</GuipSelect> --> </GuipSelect>
</div> </div>
</GuipFormItem> </GuipFormItem>
</div> </div>
@ -184,7 +184,7 @@
<el-table-column prop="create_time" label="添加时间" min-width="225"></el-table-column> <el-table-column prop="create_time" label="添加时间" min-width="225"></el-table-column>
<el-table-column prop="status" label="状态" min-width="125"> <el-table-column prop="status" label="状态" min-width="125">
<template slot-scope="scope"> <template slot-scope="scope">
<GuipSwitch :modelValue="scope.row.status" @change="onSwitchChange1(scope.row)"> <GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="onSwitchChange1(scope.row)">
</GuipSwitch> </GuipSwitch>
</template> </template>
</el-table-column> </el-table-column>
@ -238,14 +238,14 @@
<el-table-column prop="create_time" label="添加时间" min-width="225"></el-table-column> <el-table-column prop="create_time" label="添加时间" min-width="225"></el-table-column>
<el-table-column prop="status" label="状态" min-width="125"> <el-table-column prop="status" label="状态" min-width="125">
<template slot-scope="scope"> <template slot-scope="scope">
<GuipSwitch :modelValue="scope.row.status" @change="onSwitchChange2(scope.row)"> <GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="onSwitchChange2(scope.row)">
</GuipSwitch> </GuipSwitch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" min-width="100px"> <el-table-column label="操作" fixed="right" min-width="100px">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="flex"> <div class="flex">
<el-button type="text" @click="handleClick(scope.row)">编辑</el-button> <el-button type="text" @click="handleClick1(scope.row)">编辑</el-button>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -358,38 +358,7 @@ export default {
name: '全部分类', name: '全部分类',
id: '0' id: '0'
}, },
{
name: '针灸1',
id: '1'
},
{
name: '针灸2',
id: '11'
},
{
name: '针灸3',
id: '12'
},
{
name: '针灸4',
id: '13'
},
{
name: '针灸12',
id: '21'
},
{
name: '针灸22',
id: '211'
},
{
name: '针灸32',
id: '212'
},
{
name: '针灸42',
id: '213'
},
], ],
courseList: [], courseList: [],
selectAll: false, selectAll: false,
@ -533,6 +502,7 @@ export default {
this.doctor_id = doctor_id; this.doctor_id = doctor_id;
this.fetchDoctorData() this.fetchDoctorData()
this.fetchPackData() this.fetchPackData()
this.fetchProjectData()
this.geHosAdress() this.geHosAdress()
} }
}, },
@ -567,7 +537,6 @@ export default {
if(response.code == 0){ if(response.code == 0){
this.courseList = response.data.list this.courseList = response.data.list
} }
console.log(this.courseList,'courseList=');
}).catch(error => { }).catch(error => {
console.error(error, 'error') console.error(error, 'error')
@ -575,14 +544,14 @@ export default {
}, },
// 项目列表 // 项目列表
fetchProjectData() { fetchProjectData() {
this.$http('POST', '/api/admin/get_project_packagelist', { this.$http('POST', '/api/admin/get_project_list', {
depart_id: this.depart_id, depart_id: this.depart_id,
doctor_id: this.doctor_id doctor_id: this.doctor_id
}).then(response => { }).then(response => {
if(response.code == 0){ if(response.code == 0){
this.courseList = response.data this.projectTagData = Object.values(response.data.classify);//项目分类
this.projectList = Object.values(response.data.list);//项目列表
} }
}).catch(error => { }).catch(error => {
console.error(error, 'error') console.error(error, 'error')
}) })
@ -637,7 +606,7 @@ export default {
}) })
}, },
addNewSetMenu() { addNewSetMenu() {
this.$router.push('/addNewTreatment') this.$router.push(`/addNewTreatment?doctor_id=${this.doctor_id}&depart_id${this.depart_id}`)
}, },
addNewGroup(){ addNewGroup(){
this.dialogVisible1 = true this.dialogVisible1 = true
@ -695,7 +664,7 @@ export default {
}, },
handleClick1(row) { handleClick1(row) {
console.log(row); console.log(row);
this.$router.push(`/addNewTreatment?id=${row.id}`) this.$router.push(`/addNewTreatment?package_id=${row.id}&doctor_id=${this.doctor_id}&depart_id=${this.depart_id}`)
// 跳转编辑页面 // 跳转编辑页面
}, },
handleClick(row) { handleClick(row) {

Write Preview
Loading…
Cancel
Save