You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

768 lines
30 KiB

<template>
<div class="site-setting-wrap pagePadding min-flex-right">
<p class="pageTitle bold">基础信息</p>
<div class="siteMessage flex-common" id="siteMessage1">
<p class="littleTitle mb32">基础信息</p>
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="出诊医院省市" :required="true">
<div class="flex-between" slot="formDom">
<div class="short-width">
<GuipSelect width="100%" v-model="form.tags" multiple :options="options_payword"
placeholder="选择省份">
</GuipSelect>
</div>
<div class="short-width">
<GuipSelect width="100%" v-model="form.tags" multiple :options="options_payword"
placeholder="选择城市">
</GuipSelect>
</div>
</div>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="出诊医院名称" :required="true">
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.company_name"
prop="company_name" placeholder="请输入">
<img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" />
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="医院简称">
<span slot="formRight" class="desc">方便患者记忆,非必填</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.company_address"
prop="company_address" placeholder="请输入" />
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="所在科室" :required="true">
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.company_address"
prop="company_address" placeholder="请输入" />
</GuipFormItem>
</div>
<div class="flex-line"></div>
<div class="flex-right">
<GuipFormItem column="column" class="mb24">
<div slot="formLeft" class="form-top-icon">医保定点</div>
<div class="flex" slot="formDom" style="padding: 9px 0px;">
<GuipSwitch :modelValue="yibao" @change="onSwitchChange" activeText="非医保定点"
inactiveText="非医保定点">
</GuipSwitch>
</div>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="使用功能">
<el-checkbox-group slot="formDom" v-model="checkList" class="checkboxGroup">
<div class="flex">
<el-checkbox label="医生名片(基础功能不可取消)"></el-checkbox>
<el-checkbox label="患者预约"></el-checkbox>
</div>
<el-checkbox label="项目计数"></el-checkbox>
</el-checkbox-group>
</GuipFormItem>
<GuipFormItem column="column" class="" label="就诊提醒">
<div slot="formRight" class="desc">就诊前的注意事项,非必填</div>
<GuipTextarea slot="formDom" v-model="form.detailDesc" prop="description" width="100%"
height="84px" autosize placeholder="输入" />
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" />
</div>
<div class="siteMessage flex-common" id="siteMessage2">
<p class="littleTitle mb32">出诊时间</p>
<el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="工作时间( 上午 )" :required="true">
<el-time-picker slot="formDom" style="width:100%" is-range v-model="time1"
range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
@change="ChangeTime('time1')">
</el-time-picker>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="工作时间( 下午 )" :required="true">
<el-time-picker slot="formDom" style="width:100%" is-range v-model="time2"
range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
@change="ChangeTime('time1')">
</el-time-picker>
</GuipFormItem>
</div>
<div class="flex-line"></div>
<div class="flex-right">
<GuipFormItem column="column" label="每周出诊安排" :required="true">
<div class="flex weekPlan" slot="formDom">
<GuipSelect v-for="[key] in Object.entries(weekPlan)" :key="key" v-model="weekPlan[key]"
:options="options_weekPlan" @change="weekChange()" :label="key" placeholder="休息">
</GuipSelect>
</div>
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
</div>
<div class="siteMessage flex-common" id="siteMessage3">
<p class="littleTitle mb32">放号设置</p>
<el-form :model="numSettingForm" :rules="numSettingFormRule" ref="numSettingForm">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="号源单位时段" :required="true">
<span class="desc" slot="formRight">如30分钟,放号时9:00-9:30;9:30-10:00来划分</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.times"
prop="times" placeholder="请输入" unit="分钟/时段" />
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="放号量" :required="true">
<span class="desc" slot="formRight">放号量可少于实际数量,以便为现场约号患者预留</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.nums"
prop="nums" placeholder="请输入" unit="个号/时段" />
</GuipFormItem>
</div>
<div class="flex-line"></div>
<div class="flex-right">
<GuipFormItem column="column" class="mb24" label="开放预约" :required="true">
<span class="desc" slot="formRight">患者可提前多久约号</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.hours"
prop="hours" placeholder="请输入" unit="小时">
<span slot="prependshow">提前</span>
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="超时未就诊提醒">
<span class="desc" slot="formRight">不输入即无期限</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.days"
prop="days" placeholder="请输入" unit="天" />
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('numSettingForm')" />
</div>
<p class="pageTitle bold">项目管理</p>
<div class="siteMessage flex-common" id="siteMessage4">
<el-form>
<div class=" mb32 flex-between">
<span class="littleTitle">项目列表</span>
<div class="flex-between" style="gap:10px">
<GuipButton size="table" type="ignore">新增分组</GuipButton>
<GuipButton size="table" type="primary">新增项目</GuipButton>
</div>
</div>
<div class="selectAllTable-wrap flex-between mt32">
<div class="left flex">
<div class="checkboxAll">
<el-checkbox @change="handleSelectAllChange" v-model="selectAll"
:indeterminate="isIndeterminate">全选</el-checkbox>
</div>
<span class="totalCount">共{{ projectList.length }}条,已选{{ selectedCount }}条</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>
</div>
</div>
<div class="flex-between mb32 mt32">
<div class="tabProject flex">
<div :class="['tab-item ', projectSearchId == item.id ? 'active' : '']"
v-for="item in projectTagData" :key="item.name">{{ item.name }}</div>
</div>
<div class="right flex">
<span>搜索项目</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="projectSearchName"
prop="company_name" placeholder="请输入">
<img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" />
</GuipInput>
</div>
</div>
<GuipTable :tableData="projectList" style="width: 100%" ref="multipleTable"
@selection-change="handleSelectionChange" :loading="loading">
<el-table-column type="selection" label="选择" width="80"></el-table-column>
<el-table-column prop="name" label="项目名称" min-width="225"></el-table-column>
<el-table-column prop="price" label="项目价格" min-width="125"></el-table-column>
<el-table-column prop="group" label="分组" min-width="125"></el-table-column>
<el-table-column prop="time" label="添加时间" min-width="225"></el-table-column>
<el-table-column prop="status" label="状态" min-width="125">
<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="100px">
<template slot-scope="scope">
<div class="flex">
<el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
</div>
</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="projectList.length">
</el-pagination>
</el-form>
</div>
<div class="siteMessage flex-common mt12" id="siteMessage5">
<el-form>
<div class=" mb32 flex-between">
<span class="littleTitle">疗程套餐</span>
<div class="flex-between" style="gap:10px">
<GuipButton size="table" type="primary" @click="addNewSetMenu">新增套餐</GuipButton>
</div>
</div>
<div class="selectAllTable-wrap flex-between mt32 mb32">
<div class="left flex">
<div class="checkboxAll">
<el-checkbox @change="handleSelectAllChange1" v-model="selectAll"
:indeterminate="isIndeterminate">全选</el-checkbox>
</div>
<span class="totalCount">共{{ courseList.length }}条,已选{{ selectedCount }}条</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>
</div>
</div>
<GuipTable :tableData="courseList" style="width: 100%" ref="multipleTable1"
@selection-change="handleSelectionChange1" :loading="loading1">
<el-table-column type="selection" label="选择" width="80"></el-table-column>
<el-table-column prop="name" label="项目名称" min-width="225"></el-table-column>
<el-table-column prop="price" label="项目价格" min-width="125"></el-table-column>
<el-table-column prop="group" label="分组" min-width="125"></el-table-column>
<el-table-column prop="time" label="添加时间" min-width="225"></el-table-column>
<el-table-column prop="status" label="状态" min-width="125">
<template slot-scope="scope">
<GuipSwitch :modelValue="scope.row.status" @change="onSwitchChange2(scope.row)">
</GuipSwitch>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" min-width="100px">
<template slot-scope="scope">
<div class="flex">
<el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
</div>
</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="courseList.length">
</el-pagination>
</el-form>
</div>
</div>
</template>
<script>
import store from '../store';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipButton from '@/components/GuipButton.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipTextarea from '@/components/GuipTextarea.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipTable from '@/components/GuipTable.vue';
// import {setHighActive} from '@/utils/common';
export default {
// 站点设置
name: '',
props: [''],
components: {
GuipFormItem,
GuipButton,
GuipInput,
GuipTable,
GuipSwitch,
GuipSelect,
GuipTextarea,
GroupFormBtns
},
data() {
return {
currentPage:1,
pageSize:10,
currentPage1:1,
pageSize1:10,
loading: false,
loading1: false,
selectedRows: [],//已选中数据
selectedRows1: [],//已选中数据
isIndeterminate: false,
isIndeterminate1: false,
projectSearchId: '',
projectSearchName: '',
projectList: [
{
name: '针灸',
price: '88',
group: '针灸1',
time: '2077 - 12 - 20',
status: true,
id: '1'
},
{
name: '拔罐',
price: '188',
group: '针灸2',
time: '2077 - 12 - 20',
status: true,
id: '2'
},
{
name: '火刺',
price: '55',
group: '针灸1',
time: '2077 - 12 - 20',
status: true,
id: '3'
},
],
projectTagData: [
{
name: '全部分类',
id: '0'
},
{
name: '针灸1',
id: '1'
},
{
name: '针灸2',
id: '11'
},
{
name: '针灸3',
id: '12'
},
{
name: '针灸4',
id: '13'
},
],
courseList: [
{
name: '针灸',
price: '88',
group: '针灸1',
time: '2077 - 12 - 20',
status: true,
id: '1'
},
{
name: '拔罐',
price: '188',
group: '针灸2',
time: '2077 - 12 - 20',
status: true,
id: '2'
},
{
name: '火刺',
price: '55',
group: '针灸1',
time: '2077 - 12 - 20',
status: true,
id: '3'
},
],
selectAll: false,
selectAll1: false,
numSettingForm: {
times: '',
hours: '',
nums: '',
days: ''
},
numSettingFormRule: {
times: [
{ required: true, message: '请输入', trigger: 'blur' }
],
hours: [
{ required: true, message: '请输入', trigger: 'blur' }
],
nums: [
{ required: true, message: '请输入', trigger: 'blur' }
],
days: [
{ required: true, message: '请输入', trigger: 'blur' }
],
},
options_payword: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
weekPlan: {
'周一': '',
'周二': '',
'周三': '',
'周四': '',
'周五': '',
'周六': '',
'周日': '',
},
time1: '',
time2: '',
checkList: ['医生名片(基础功能不可取消)'],
fileList: [
{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
],
yibao: '',
options_weekPlan: [{
value: '1',
label: '上午班'
}, {
value: '2',
label: '下午班'
}, {
value: '3',
label: '全天'
}, {
value: '4',
label: '休息'
},],
siteForm: {
company_name: '',
company_address: '',
company_phone: '',
site_alias: '',
},
form: {
description: '',
detailDesc: '',
tags: ''
},
siteFormrules: {
site_alias: [
{ required: true, message: '请输入站点简称', trigger: 'blur' }
]
},
siteForm1: {
domain_set: '',
domain_source: '平台免费域名',
},
siteForm2: {
zhifubao_pay: '',
weixin_pay: '',
},
siteFormrules1: {
domain_source: [
{ required: true, message: '请输入站点简称', trigger: 'blur' }
]
},
domain_source: [
{ label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
{ label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
],
options_weixin_null: {
label: '暂无收款账号',
value: '暂时没有收款账号,我想稍后配置',
desc: '暂无收款账号,稍后配置'
},
select_placeholder_weixin: '暂无收款账号,稍后配置',
selectedItemWeixin: {},//微信收款方式
options_weixin: [],
options_zhifubao: [],
}
},
computed: {
selectedCount() {
return this.selectedRows.length;
} // 从Vuex映射showSidebar状态到组件的计算属性中
},
mounted() {
store.commit('SET_PAGETITLE', '基本设置');
},
methods: {
onSwitchChange1(row) {
row.status = !row.status;
this.$set(this.projectList, row)
},
onSwitchChange2(row) {
row.status = !row.status;
this.$set(this.courseList, row)
},
handleClick(row) {
console.log(row);
// 跳转编辑页面
},
// 处理全选按钮变化
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.projectList.length;
const noneSelected = rows.length === 0;
this.selectAll = allSelected;
this.isIndeterminate = !noneSelected && !allSelected;
},
handleSelectAllChange1(val) {
console.log(this.$refs.multipleTable,'multipleTable-');
if (val) {
// 只选中未选中的行
const unselectedRows = this.courseList.filter(
row => !this.selectedRows1.includes(row)
);
unselectedRows.forEach(row => {
this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, true);
});
} else {
// 只取消已选中的行
this.selectedRows.forEach(row => {
this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, false);
});
}
},
// 处理选择变化
handleSelectionChange1(rows) {
this.selectedRows = rows;
// 更新全选按钮状态
const allSelected = rows.length === this.courseList.length;
const noneSelected = rows.length === 0;
this.selectAll1 = allSelected;
this.isIndeterminate1 = !noneSelected && !allSelected;
},
// 批量操作
batchOperate(type) {
if (type == '1') {
// 禁用
} else {
// 启用
}
},
ChangeTime(type) {
console.log(type, '===');
},
btnClick() {
},
handleClear(value) {
// this.handleInput('')
console.log(value, 'value===qinghcu');
},
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) {
console.log(this.$refs[form], '-----');
this.$refs[form].validate((valid) => {
console.log(this[form], '======formxinxi');
if (valid) {
alert('提交成功!');
} else {
return false;
}
});
},
cancelClick() {
console.log('quxiao');
},
confirmClick(type) {
console.log(type, '确认');
}
}
}
</script>
<style lang="scss">
.weekPlan {
display: grid;
grid-gap: 12px 44px;
grid-template-columns: repeat(2, 1fr);
}
.totalCount {
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
color: #8A9099;
margin-left: 12px;
}
.tabProject {
gap: 12px;
.tab-item {
/* 自动布局子元素 */
height: 28px;
min-width: 74px;
/* 自动布局 */
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 4px 12px;
gap: 4px;
align-self: stretch;
z-index: 2;
border-radius: 14px;
background: #FFFFFF;
box-sizing: border-box;
/* middle/middle_line_1 */
border: 1px solid #DFE2E6;
/* body/body 2_regular */
font-family: Microsoft YaHei UI;
font-size: 14px;
text-align: justify;
/* 浏览器可能不支持 */
letter-spacing: 0.08em;
/* text/text_4 */
color: #8A9099;
}
.active {
color: #006AFF;
background: #F2F3F5;
}
}
.el-form-item {
margin-bottom: 0;
}
.siteMessage {
border-radius: 4px;
transition: all .5s;
border: 1px solid transparent;
}
.checkboxGroup {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 24px;
height: 72px;
padding: 10px 0;
}
.addStore {
margin-top: 12px;
}
.qqCode-wrap {
margin-bottom: 14px;
.labelImg {
opacity: .7;
margin-left: 8px;
}
.avatar-uploader {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin: 12px 0 8px;
}
.avatar-desc {
text-align: left;
}
}
.site-setting-wrap {
width: 100%;
}
#siteMessage2 {
margin: 12px 0;
}
.domain-wrap {
.domain-item {
margin-bottom: 10px;
}
.domain-item p:last-child {
padding-left: 23px;
color: #8A9099;
}
p {
text-align: left;
line-height: 18px;
margin-bottom: 8px;
}
.domain-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
}
</style>