zq
3 days ago
14 changed files with 278 additions and 3821 deletions
@ -1,71 +0,0 @@ |
|||
<template> |
|||
<el-button |
|||
:type="type" |
|||
v-bind="$attrs" |
|||
:plain="plain" |
|||
:loading="loading" |
|||
:size="size" |
|||
:disabled="disabled" |
|||
@click="$emit('click')" |
|||
:style="{...btnstyle}" |
|||
> |
|||
<slot></slot> |
|||
</el-button> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipButton', |
|||
props:{ |
|||
type:{ |
|||
type:String, |
|||
default:'primary' |
|||
}, |
|||
size:{ |
|||
type:String, |
|||
default:'normal' |
|||
}, |
|||
// 为false 的可以不需要传参 |
|||
plain:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
loading:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
disabled:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
btnstyle:Object |
|||
}, |
|||
data() { |
|||
return { |
|||
radio: '' |
|||
} |
|||
}, |
|||
mounted(){ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
button span{ |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.rotating-svg { |
|||
animation: rotate 2s linear infinite; |
|||
} |
|||
|
|||
@keyframes rotate { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,136 +0,0 @@ |
|||
<template> |
|||
<el-form-item :style="{ ...styleObject }" :required="required" |
|||
:class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label" |
|||
:prop="prop" :rules="rules"> |
|||
<p v-if="desc" class="desc_right">{{ desc }}</p> |
|||
<el-input :type="type" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1" |
|||
:style="{ width: width, height: height }" :minLength="minLength1" :show-word-limit="showWordLimit" |
|||
@input="$emit('input', $event)" @keydown="handleKeydown" @change="$emit('change', $event)" |
|||
@blur="$emit('blur', inputValue)" @focus="$emit('focus', inputValue)" v-model="inputValue"> |
|||
<!-- 自定义前面小图标 --> |
|||
<template v-slot:prepend> |
|||
<slot name="prependshow"></slot> |
|||
</template> |
|||
<template v-slot:prefix> |
|||
<slot name="prefix"></slot> |
|||
</template> |
|||
<!-- 清除小图标 --> |
|||
<template v-slot:suffix> |
|||
<slot name="suffix"></slot> |
|||
</template> |
|||
<template v-slot:append> |
|||
<slot name="appendshow"></slot> |
|||
</template> |
|||
|
|||
<!-- :error="errorMessage" show-message --> |
|||
|
|||
<!-- <i slot="suffix" v-if="empty" class="el-icon-close" @click="handleClear">h</i> --> |
|||
<!-- <el-button slot="append" v-if="hasBtn" type="primary" @click="$emit('enter',value)">搜索</el-button> --> |
|||
</el-input> |
|||
<!-- 单位 --> |
|||
<span class="unit" v-if="unit">{{ unit }}</span> |
|||
</el-form-item> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipInput', |
|||
props: ['value', 'styleObject', 'disabled', 'defaultValue', 'placeholder','required', |
|||
'maxlength', 'minLength', 'clear', 'width', 'height', 'showWordLimit', |
|||
'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc', 'unit'], |
|||
data() { |
|||
return { |
|||
inputValue: this.value || this.defaultValue, |
|||
maxlength1: '', |
|||
minLength1: 0, |
|||
style: { |
|||
width: '510px', |
|||
height: '38px' |
|||
}, |
|||
placeholder1: '' |
|||
} |
|||
}, |
|||
watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选） |
|||
value(newVal) { |
|||
this.inputValue = newVal; |
|||
} |
|||
}, |
|||
created() { |
|||
// 默认提示语 |
|||
if (this.placeholder) { |
|||
this.placeholder1 = this.placeholder; |
|||
} |
|||
// 默认提示语 |
|||
if (this.maxlength) { |
|||
this.maxlength1 = this.maxlength; |
|||
} |
|||
// 默认提示语 |
|||
if (this.minLength) { |
|||
this.minLength1 = this.minLength; |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
let els = document.querySelectorAll('.el-input'); |
|||
els.forEach(item => { |
|||
item.onmouseover = function () { |
|||
item.classList.add("hoverclass") |
|||
} |
|||
item.onmouseout = function () { |
|||
item.classList.remove("hoverclass") |
|||
} |
|||
// item.addEventListener('mouseover',function(){ |
|||
// console.log('滑过'); |
|||
// item.classList.add("hoverclass") |
|||
// }) |
|||
// item.addEventListener('mouseoout',function(){ |
|||
// console.log('滑出'); |
|||
// item.classList.remove("hoverclass") |
|||
// }) |
|||
// item.addEventListener('mouseoenter',function(){ |
|||
// console.log('滑---'); |
|||
// item.classList.add("hoverclass") |
|||
// }) |
|||
// item.addEventListener('mouseoleave',function(){ |
|||
// console.log('滑出'); |
|||
// item.classList.remove("hoverclass") |
|||
// }) |
|||
}) |
|||
// console.log(el,'====9999'); |
|||
// if(els&& this.styleObject){ |
|||
// for(var key in this.styleObject){ |
|||
// els.style[key] = this.styleObject[key] |
|||
// } |
|||
// } |
|||
}) |
|||
}, |
|||
methods: { |
|||
// input 事件 |
|||
// changeInput(event){ |
|||
// this.$emit('input', event); |
|||
// } |
|||
// handleClear(){ |
|||
// console.log('清除---'); |
|||
// this.$emit('clear', '清楚逻辑') |
|||
// } |
|||
handleKeydown(e) { |
|||
console.log(e); |
|||
// if (e.key === '1') { |
|||
e.preventDefault(); // 阻止默认行为 |
|||
// } |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.unit { |
|||
position: absolute; |
|||
right: 12px; |
|||
/* 根据需要调整位置 */ |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
pointer-events: none; |
|||
/* 防止单位文本影响输入框的点击事件 */ |
|||
} |
|||
</style> |
|||
@ -1,143 +0,0 @@ |
|||
<template> |
|||
<el-form-item :prop="prop" :label="label" :rules="rules"> |
|||
<div class="switchWrap"> |
|||
<span :class="['switchDesc', { 'fl': float == 'left' }, { 'fr': float == 'right' }]" |
|||
v-if="activeText || inactiveText"> |
|||
{{ internalValue === activeValue ? activeText : inactiveText}}</span> |
|||
|
|||
<el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor" |
|||
v-bind="$attrs" :disabled="disabled" :active-value="activeValue" :inactive-value="inactiveValue" |
|||
@change="handleChange"> |
|||
<!-- 自定义开启时的图标 --> |
|||
<template #active-icon> |
|||
</template> |
|||
<!-- 自定义关闭时的图标 --> |
|||
<template #inactive-icon> |
|||
</template> |
|||
</el-switch> |
|||
|
|||
</div> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipSwitch', |
|||
inheritAttrs: false, |
|||
props: { |
|||
// modelValue: { type: [Boolean, String, Number], default: undefined }, |
|||
value: { type: [Boolean, String, Number], default: undefined }, |
|||
prop: String, |
|||
label: String, |
|||
rules: Array, |
|||
labelWidth: String, |
|||
|
|||
activeText: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
inactiveText: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
activeValue: { |
|||
type: [Boolean, String, Number], |
|||
default: true, |
|||
}, |
|||
inactiveValue: { |
|||
type: [Boolean, String, Number], |
|||
default: false, |
|||
}, |
|||
activeColor: { |
|||
type: String, |
|||
default: '#00C261', |
|||
}, |
|||
inactiveColor: { |
|||
type: String, |
|||
default: '#BABDC2', |
|||
}, |
|||
float: { |
|||
type: String, |
|||
default: 'left', |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
internalValue: this.value, |
|||
errorMsg: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
// internalValue: { |
|||
// get() { |
|||
// return this.modelValue !== undefined ? this.modelValue : this.value |
|||
// }, |
|||
// set(val) { |
|||
// this.$emit('update:modelValue', val) |
|||
// this.$emit('input', val) |
|||
// } |
|||
// } |
|||
}, |
|||
watch: { |
|||
value(newVal) { |
|||
this.internalValue = newVal |
|||
console.log(this.internalValue, 88888) |
|||
}, |
|||
// modelValue(newVal) { |
|||
// this.internalValue = newVal |
|||
// }, |
|||
}, |
|||
methods: { |
|||
handleChange(val) { |
|||
// this.$emit('update:modelValue', val) |
|||
this.$emit('input', val) |
|||
this.$emit('change', val) |
|||
this.validateField() |
|||
}, |
|||
validateField() { |
|||
if (this.prop && this.$parent.validateField) { |
|||
this.$parent.validateField(this.prop, (error) => { |
|||
this.errorMsg = error || '' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.switchWrap { |
|||
/* align-items: center; */ |
|||
} |
|||
|
|||
.fl { |
|||
float: left; |
|||
margin-right: 12px; |
|||
} |
|||
|
|||
.fr { |
|||
float: right; |
|||
margin-left: 12px; |
|||
} |
|||
|
|||
.switchDesc { |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 20px; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz" auto; |
|||
/* text/text_3 */ |
|||
color: #626573; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.error-msg { |
|||
color: #f56c6c; |
|||
font-size: 12px; |
|||
margin-left: 10px; |
|||
} |
|||
</style> |
|||
@ -1,661 +0,0 @@ |
|||
<template> |
|||
<div class="site-setting-wrap min-flex-right"> |
|||
<div class="pagePadding main-wrap"> |
|||
<p class="pageTitle bold">新增套餐</p> |
|||
<div class="siteMessage flex-common" id="siteMessage2"> |
|||
<p class="littleTitle mb32">套餐信息</p> |
|||
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm1"> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<GuipFormItem column="column" class="mb24" label="套餐名称" :required="true"> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.name" |
|||
prop="name" placeholder="输入" /> |
|||
</GuipFormItem> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<GuipFormItem column="column" class="mb24" label="套餐价格" :required="true"> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.price" |
|||
prop="price" placeholder="输入" unit="元" /> |
|||
</GuipFormItem> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="siteMessage flex-common" id="siteMessage2"> |
|||
<p class="littleTitle mb32">套餐项目</p> |
|||
<el-form> |
|||
<div class="flex"> |
|||
<div class="checkboxAll"> |
|||
<el-checkbox @change="handleSelectAllChange1" v-model="selectAll" |
|||
:indeterminate="isIndeterminate">全选</el-checkbox> |
|||
</div> |
|||
<span class="totalCount">共{{ displayedProjectCount }}条，已选{{ selectedCount }}条</span> |
|||
</div> |
|||
|
|||
<div class="flex-between mb32 mt32"> |
|||
<div class="tabProject flex"> |
|||
<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" v-show="false"> |
|||
<GuipFormItem label="搜索项目"> |
|||
<GuipInput slot="formDom" ref="GuipInput" width="280px" v-model="projectSearchName" |
|||
placeholder="请输入" @blur="inputBlur"> |
|||
<img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" /> |
|||
</GuipInput> |
|||
</GuipFormItem> |
|||
</div> |
|||
</div> |
|||
<GuipTable :tableData="sortedProjectList" style="width: 100%" ref="multipleTable" max-height="600px" |
|||
@selection-change="handleSelectionChange" :loading="loading" @select="handleSelect"> |
|||
<!-- <el-table-column type="selection" label="选择" width="150"></el-table-column> --> |
|||
<el-table-column type="selection" width="150"> |
|||
<template slot="header"> |
|||
<span class="selection-header-text">选择</span> |
|||
</template> |
|||
</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)" /> |
|||
</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"> |
|||
{{ projectTagData[scope.row.classify_id].name }} |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<div class="register-btns"> |
|||
<GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="cancelClick">取消 |
|||
</GuipButton> |
|||
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="confirmClick">保存套餐 |
|||
</GuipButton> |
|||
</div> |
|||
<GuipDialog :dialogVisible="dialogVisible" :title="'新增套餐确认'" :show-close-button="true" width="599px" |
|||
:show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose" |
|||
confirmText="确定新增"> |
|||
<div class="flex content"> |
|||
<span>套餐名称：</span> |
|||
<span>{{ siteForm.name }}套餐</span> |
|||
</div> |
|||
<div class="flex content"> |
|||
<span>套餐价格：</span> |
|||
<span>{{ siteForm.price }}元</span> |
|||
</div> |
|||
<div class="flex content"> |
|||
<span>套餐项目：</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> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import store from '../store'; |
|||
import { mapState } from 'vuex'; |
|||
import GuipFormItem from '@/components/GuipFormItem.vue'; |
|||
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'; |
|||
export default { |
|||
// 站点设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
GuipFormItem, |
|||
GuipInput, |
|||
GuipDialog, |
|||
GuipButton, |
|||
// GuipSelect, |
|||
GuipTable |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
selectAll: false, |
|||
selectedCount: 0, |
|||
currentPage: 1, |
|||
pageSize: 10, |
|||
isIndeterminate: false, |
|||
projectSearchName: '', |
|||
projectSearchId: 'all', |
|||
loading: false, |
|||
treatMentList: [],//疗程套餐项目 |
|||
projectList: [],//项目列表 |
|||
projectTagData: [], |
|||
selectedRows: [], |
|||
sortedProjectRows: [], |
|||
siteForm: { |
|||
create_time: "", |
|||
depart_id: "", |
|||
doctor_id: "", |
|||
id: "", |
|||
name: "", |
|||
price: "", |
|||
status: "" |
|||
}, |
|||
siteFormrules: { |
|||
name: [ |
|||
{ required: true, message: '请输入套餐名称', trigger: 'blur' } |
|||
], |
|||
price: [ |
|||
{ required: true, message: '请输入套餐价格', trigger: 'blur' } |
|||
], |
|||
}, |
|||
package_id: '', |
|||
doctor_id: '', |
|||
depart_id: '', |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState(['pageTitle']), |
|||
sortedProjectList() { |
|||
// 先根据 sort 属性排序 |
|||
let sortedList = [...this.projectList].sort((a, b) => { |
|||
if (a.sort && !b.sort) return -1; |
|||
if (!a.sort && b.sort) return 1; |
|||
if (a.sort && b.sort) return a.sort - b.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; |
|||
this.depart_id = depart_id; |
|||
this.doctor_id = doctor_id; |
|||
store.commit('SET_PAGETITLE', '基本设置'); |
|||
// 编辑 |
|||
if (package_id) { |
|||
this.getInitData() |
|||
return |
|||
} |
|||
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 = [];//当前表格选中项 |
|||
// 设置当前视图中应该选中的项 |
|||
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, |
|||
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') |
|||
}) |
|||
}, |
|||
// 在 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 && response.data.list) { |
|||
this.projectTagData = response.data.classify; |
|||
this.projectList = Object.values(response.data.list).map(item => ({ |
|||
...item, |
|||
checked: false |
|||
})); |
|||
|
|||
// 只在第一次加载时初始化选中项 |
|||
if (this.package_id && this.selectedRows.length === 0) { |
|||
this.initSelectedItems(); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
inputBlur(val) { |
|||
// 搜索项目 |
|||
console.log(val, '----搜索'); |
|||
}, |
|||
updateSelectionState() { |
|||
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; |
|||
// console.log(this.sortedProjectRows,'sortedProjectRows=='); |
|||
this.selectedCount = this.sortedProjectRows.length; |
|||
}, |
|||
|
|||
handleSelect(selection, row) { |
|||
// console.log('操作的行:', row); |
|||
// console.log('当前所有选中行:', selection); |
|||
if (this.sortedProjectRows.includes(row)) { |
|||
let index = this.sortedProjectRows.findIndex((item) => item.id === row.id); |
|||
if (index > -1) { |
|||
this.sortedProjectRows.splice(index, 1) |
|||
} |
|||
} else { |
|||
this.sortedProjectRows.push(row) |
|||
} |
|||
this.updateSelectionState() |
|||
}, |
|||
handleSelectAll(selection) { |
|||
console.log('全选/取消全选:', selection); |
|||
}, |
|||
// 处理选择变化 |
|||
handleSelectionChange(rows) { |
|||
// console.log(rows, '=======---handleSelectionChange'); |
|||
// 获取当前视图的所有行ID |
|||
const currentViewIds = this.sortedProjectList.map(r => r.id); |
|||
|
|||
// 保留不在当前视图的选中项 |
|||
const preservedSelections = this.selectedRows.filter( |
|||
row => !currentViewIds.includes(row.id) |
|||
); |
|||
|
|||
// 合并新旧选择 |
|||
this.selectedRows = [...preservedSelections, ...rows]; |
|||
this.updateSelectionState(); |
|||
}, |
|||
|
|||
handleSelectAllChange1(val) { |
|||
const currentViewRows = this.sortedProjectList; |
|||
|
|||
if (val) { |
|||
// 全选操作 |
|||
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 { |
|||
// 取消全选操作 |
|||
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); |
|||
}); |
|||
} |
|||
// 更新表格选中状态 |
|||
this.$nextTick(() => { |
|||
this.setSelectedRows(); |
|||
this.updateSelectionState(); |
|||
}); |
|||
}, |
|||
|
|||
// 筛选标签切换 |
|||
selectTag(id) { |
|||
this.projectSearchId = id === 'all' ? 'all' : id; |
|||
this.updateSelectionState(); |
|||
}, |
|||
// 只有在原本套餐内的直接修改有效/ 否则无效； |
|||
// 选中项目，进行保存套餐的时候，修改的项目信息才会有效； |
|||
// 修改某一项就将此项默认成为选中 |
|||
// 修改次数 |
|||
changeNums(row) { |
|||
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)) { |
|||
this.selectedRows.push(row); |
|||
} |
|||
if (!this.sortedProjectRows.includes(row)) { |
|||
this.sortedProjectRows.push(row); |
|||
} |
|||
// 更新选择状态 |
|||
this.updateSelectionState(); |
|||
}, |
|||
// 修改项目信息 |
|||
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, |
|||
doctor_id: this.doctor_id, |
|||
}).then(response => { |
|||
if (response.code == 0) { |
|||
this.$Message.success('修改成功') |
|||
// 请求之后会刷新列表状态 暂时不重新请求 |
|||
// if(this.package_id){ |
|||
// this.getInitData() |
|||
// }else{ |
|||
// this.fetchProjectData() |
|||
// } |
|||
} |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
handleClose() { |
|||
this.handleCancel() |
|||
}, |
|||
handleCancel() { |
|||
this.dialogVisible = false; |
|||
}, |
|||
handleConfirm() { |
|||
let project_infos = []; |
|||
this.sortedProjectRows.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', '/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.projectSearchName = '' |
|||
console.log(value, 'value===qinghcu'); |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val |
|||
this.getData() |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.currentPage = val |
|||
this.getData() |
|||
}, |
|||
cancelClick() { |
|||
this.$router.push({ |
|||
name: '医院信息', |
|||
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; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-table__header-wrapper .el-checkbox { |
|||
display: none; |
|||
} |
|||
|
|||
/* 隐藏表头的复选框 */ |
|||
::v-deep .el-table__header-wrapper .el-checkbox { |
|||
display: none !important; |
|||
} |
|||
|
|||
/* 确保选择文字可见 */ |
|||
::v-deep .selection-header-text { |
|||
display: inline-block; |
|||
margin-left: 8px; |
|||
/* 调整位置 */ |
|||
font-size: 14px; |
|||
color: #606266; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 调整表头单元格的padding */ |
|||
::v-deep .el-table .el-table__header th { |
|||
padding: 8px 0; |
|||
/* 根据需要调整 */ |
|||
} |
|||
.siteMessage { |
|||
border-radius: 4px; |
|||
transition: all .5s; |
|||
border: 1px solid transparent; |
|||
} |
|||
|
|||
.content { |
|||
margin-top: 16px; |
|||
color: #626573; |
|||
letter-spacing: 0.08em; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.register-btns { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
background: #FFFFFF; |
|||
padding: 16px 0px; |
|||
/* 蓝色阴影_常规 */ |
|||
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12); |
|||
|
|||
button:nth-child(1) { |
|||
margin-right: 56px; |
|||
} |
|||
} |
|||
|
|||
.project_list { |
|||
max-height: 200px; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.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; |
|||
border-radius: 14px; |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
border: 1px solid #DFE2E6; |
|||
text-align: justify; |
|||
letter-spacing: 0.08em; |
|||
/* text/text_4 */ |
|||
color: #8A9099; |
|||
} |
|||
|
|||
.active { |
|||
color: #006AFF; |
|||
border: none; |
|||
background: #F2F3F5; |
|||
} |
|||
} |
|||
|
|||
|
|||
.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%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.main-wrap { |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
#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> |
|||
@ -1,489 +0,0 @@ |
|||
<template> |
|||
<div class="site-setting-wrap pagePadding min-flex-right doctor-information"> |
|||
<div class="siteMessage flex-common" id="siteMessage1"> |
|||
<h3>基础信息</h3> |
|||
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm"> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left special-form-item"> |
|||
<el-form-item prop="avator" label="" class="special-form-item"> |
|||
<template #label> |
|||
<div class="custom-label flex"> |
|||
医生照片 |
|||
<img class="labelImg" src="@/assets/require.svg" alt=""> |
|||
<el-tooltip content="这是提示信息"> |
|||
<img class="labelImg" src="@/assets/form_qua_ic.svg" alt=""> |
|||
</el-tooltip> |
|||
</div> |
|||
</template> |
|||
<div class="qqCode-wrap right"> |
|||
<div class="avator-wrapper flex"> |
|||
<img v-if="doctorAvatorUrl" :src="doctorAvatorUrl" alt="" class="uploadImg"> |
|||
<hover-button :button-text="doctorAvatorUrl?'重新上传':'开始上传'" :default-icon="require('../assets/upLoad_grey.svg')" |
|||
:hover-icon="require('../assets/upLoad_active.svg')" |
|||
default-text-color="#23242B" hover-text-color="#006AFF"> |
|||
</hover-button> |
|||
|
|||
<div class="info-upload-wrapper" @click="clearDocotorAvatorFiles"> |
|||
<el-upload |
|||
:on-change="handleAvatarChange" |
|||
action="#" |
|||
list-type="picture-card" |
|||
:multiple="false" |
|||
:http-request="setDoctorBaseInfoUpload" |
|||
:limit="Number(1)" |
|||
ref="avatorUpload" |
|||
:auto-upload="false" |
|||
> |
|||
<i slot="default" class="el-icon-plus"></i> |
|||
</el-upload> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="qqCode-wrap right"> |
|||
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div> |
|||
</div> |
|||
|
|||
</el-form-item> |
|||
|
|||
<GuipInput ref="GuipInput" column="column" :required="true" label="医生姓名" |
|||
v-model="siteForm.name" prop="name" placeholder="请输入" /> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<GuipInput ref="GuipInput" column="column" :required="true" label="身份证号码" |
|||
v-model="siteForm.idcard" prop="idcard" placeholder="请输入" /> |
|||
<GuipInput ref="GuipInput" column="column" :required="true" label="手机号码" |
|||
v-model="siteForm.phone" prop="phone" placeholder="常用手机号" /> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<GroupFormBtns @cancel="cancelClick('siteForm')" @confirm="submitDoctorBaseInfo" /> |
|||
|
|||
</div> |
|||
<div class="siteMessage flex-common" id="siteMessage2"> |
|||
<p class="littleTitle mb32">初诊审批</p> |
|||
<el-form :model="siteForm" :rules="siteFormrules2" ref="siteForm2"> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<GuipRadio v-model="siteForm.first_visit_audit" class="mb12" column="column" |
|||
:options="groupOptions" label="初诊是否审批" required prop="first_visit_audit" |
|||
@change="radioChange" /> |
|||
<GuipInput ref="GuipInput" column="column" label="审批人电话" desc="审批人电话、微信，至少填写一项" |
|||
v-model="siteForm.approver_phone" prop="approver_phone" placeholder="请输入" /> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<GuipFormItem column="column" label="审批人微信"> |
|||
<span class="desc" slot="formRight">审批人电话、微信，至少填写一项</span> |
|||
<div class="qqCode-wrap right" slot="formDom"> |
|||
<div class="avator-wrapper"> |
|||
<div class="flex" style="position: relative;"> |
|||
<img v-if="approverWechatUrl" :src="approverWechatUrl" class="uploadImg"> |
|||
<hover-button :button-text="(approverWechatUrl ? '重新上传':'微信二维码')" :default-icon="require('../assets/upLoad_grey.svg')" |
|||
:hover-icon="require('../assets/upLoad_active.svg')" |
|||
default-text-color="#23242B" hover-text-color="#006AFF" /> |
|||
|
|||
<div class="info-upload-wrapper" @click="clearApproverWechatFiles" style="width: 177px;left: 0;display: flex;justify-content: flex-start;overflow: hidden;"> |
|||
<el-upload |
|||
:on-change="handleApproverWechatChange" |
|||
action="#" |
|||
list-type="picture-card" |
|||
:multiple="false" |
|||
:http-request="setApproverWechatUpload" |
|||
:limit="Number(1)" |
|||
ref="approverWechatUpload" |
|||
:auto-upload="false" |
|||
> |
|||
<i slot="default" class="el-icon-plus"></i> |
|||
</el-upload> |
|||
</div> |
|||
</div> |
|||
|
|||
<div slot="tip" class="el-upload__tip desc" style="margin-top:8px;">批人微信二维码，大小2M以内</div> |
|||
</div> |
|||
</div> |
|||
</GuipFormItem> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<GroupFormBtns @cancel="cancelClick" @confirm="submitApproverWechat" /> |
|||
</div> |
|||
<div class="siteMessage flex-common" id="siteMessage2"> |
|||
<h3>个人介绍</h3> |
|||
<el-form :model="siteForm" ref="siteForm1"> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<GuipInput column="column" v-model="siteForm.doctor_desc" prop="doctor_desc" label="一句话介绍" |
|||
width="100%" height="56px" placeholder="请输入描述内容" maxlength="14" show-word-limit /> |
|||
<GuipTextarea label="详细介绍" column="column" v-model="siteForm.doctor_detail" prop="doctor_detail" |
|||
width="100%" autosize placeholder="请输入描述内容" maxlength="不限" show-word-limit /> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<GuipInput ref="GuipInput" column="column" label="个人标签" |
|||
v-model="siteForm.label" prop="name" placeholder="请输入" /> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<GroupFormBtns @cancel="cancelClick('siteForm1')" @confirm="setDoctorDesc" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
import HoverButton from '@/components/HoverButton.vue'; |
|||
import GuipFormItem from '@/components/GuipFormItem.vue'; |
|||
import GuipInput from '@/components/GuipInput.vue'; |
|||
import GuipTextarea from '@/components/GuipTextarea.vue'; |
|||
import GroupFormBtns from '@/components/GroupFormBtns.vue'; |
|||
import GuipRadio from '@/components/GuipRadio.vue'; |
|||
export default { |
|||
// 站点设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
HoverButton, |
|||
GuipFormItem, |
|||
GuipRadio, |
|||
GuipInput, |
|||
GuipTextarea, |
|||
GroupFormBtns |
|||
}, |
|||
data() { |
|||
return { |
|||
doctorId: '', |
|||
fileList: [ |
|||
// { name: 'image.jpeg', url: 'http://jasonyizherenxin.checkcopy.com/user_avatar/1.png?v=93940df0b596961c42de23ef1f2d3257' } |
|||
], |
|||
fileList1:[], |
|||
doctorAvatoFile:[], |
|||
doctorAvatorUrl: '', |
|||
approverWechatUrl:'', |
|||
approverWechatFile:[], |
|||
options_payword: [], |
|||
groupOptions: [ |
|||
{ label: '需审批', value: '1' }, |
|||
{ label: '不需审批', value: '0' }, |
|||
], |
|||
formData: null, |
|||
siteForm: { |
|||
did:0, |
|||
name: '', |
|||
idcard: ' ', |
|||
phone: '', |
|||
avator: '', |
|||
doctor_desc: '', |
|||
doctor_detail: '', |
|||
label: '', |
|||
approver_phone:'', |
|||
approver_wechat:'', |
|||
first_visit_audit: '', |
|||
}, |
|||
oldForm: {}, |
|||
siteFormrules2: { |
|||
first_visit_audit: [ |
|||
{ required: true, message: '请选择初诊审批设置', trigger: 'change' } |
|||
] |
|||
}, |
|||
siteFormrules: { |
|||
name: [ |
|||
{ required: true, message: '请输入姓名', trigger: 'blur' } |
|||
], |
|||
phone: [ |
|||
{ required: true, message: '请输入手机号', trigger: 'blur' }, |
|||
{ |
|||
pattern: /^1[3-9]\d{9}$/, |
|||
message: '请输入正确的手机号码', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
idcard: [ |
|||
{ required: true, message: '请输入身份证号', trigger: 'blur' }, |
|||
{ |
|||
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, |
|||
message: '请输入正确的身份证号码', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
avator: [ |
|||
{ |
|||
validator: (rule, value, callback) => { |
|||
if (!this.fileList.length && !this.siteForm.avator) { |
|||
callback(new Error('请上传医生照片')); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}, |
|||
trigger: 'change' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['pageTitle']) |
|||
}, |
|||
mounted() { |
|||
const doctor_id = this.$route.query.doctor_id; |
|||
this.doctorId = doctor_id; |
|||
if (doctor_id) this.getDoctorData(doctor_id); |
|||
}, |
|||
methods: { |
|||
setDoctorDesc() { |
|||
if(!this.doctorId) { |
|||
this.$message.error('请先设置医生基础信息') |
|||
return; |
|||
} |
|||
|
|||
var obj = new Object() |
|||
obj.did = this.doctorId |
|||
obj.desc = this.siteForm.doctor_desc |
|||
obj.detail = this.siteForm.doctor_detail |
|||
obj.label = this.siteForm.label |
|||
this.$http('POST', '/api/admin/set_doctor_desc', obj).then(response => { |
|||
if (response.code != 0) { |
|||
this.$message.error(response.msg) |
|||
return; |
|||
} |
|||
this.$message.success(response.msg) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
this.$message.error('设置失败') |
|||
}) |
|||
}, |
|||
getDoctorData(doctor_id) { |
|||
this.$http('POST', '/api/admin/get_doctor_baseinfo', {did:doctor_id}).then(response => { |
|||
if (response.code != 0) { |
|||
this.$message.error(response.msg) |
|||
return; |
|||
} |
|||
this.siteForm = response.data |
|||
this.siteForm.did = doctor_id; |
|||
this.siteForm.name = this.siteForm.doctor_name |
|||
this.doctorAvatorUrl = this.siteForm.avator |
|||
this.approverWechatUrl = this.siteForm.approver_wechat |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
this.$message.error('设置失败') |
|||
}) |
|||
}, |
|||
setDoctorInfo(param) { |
|||
this.$http('POST', '/api/admin/set_doctor_baseinfo', param).then(response => { |
|||
if (response.code != 0) { |
|||
this.$message.error(response.msg) |
|||
return; |
|||
} |
|||
|
|||
this.$message.success(response.msg) |
|||
var data = response.data |
|||
if(this.doctorId) return; |
|||
setTimeout(() => { |
|||
location.href = location.href+'?doctor_id='+data.doctor_id |
|||
}, 800); |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
this.$message.error('设置失败') |
|||
}) |
|||
}, |
|||
setDoctorBaseInfoUpload(param) { |
|||
let fileObj = param.file |
|||
let fd = new FormData() |
|||
fd.append('avatar_file', fileObj) |
|||
|
|||
var siteForm = this.siteForm |
|||
fd.append('did', this.doctorId) |
|||
fd.append('name', siteForm.name) |
|||
fd.append('phone', siteForm.phone) |
|||
fd.append('idcard', siteForm.idcard) |
|||
this.setDoctorInfo(fd) |
|||
}, |
|||
submitDoctorBaseInfo() { |
|||
if(this.doctorAvatoFile.length == 0) { |
|||
if(this.doctorId) { |
|||
this.setDoctorInfo(this.siteForm) |
|||
return; |
|||
} |
|||
this.$message.error('请上传医生照片') |
|||
return; |
|||
} |
|||
|
|||
this.$refs.avatorUpload.submit(); |
|||
}, |
|||
clearDocotorAvatorFiles(){ |
|||
this.doctorAvatorUrl = ''; |
|||
this.doctorAvatoFile = [] |
|||
this.$refs.avatorUpload.clearFiles(); |
|||
}, |
|||
clearApproverWechatFiles(){ |
|||
this.approverWechatUrl = ''; |
|||
this.approverWechatFile = [] |
|||
this.$refs.approverWechatUpload.clearFiles(); |
|||
}, |
|||
setApproverWechatUpload(param) { |
|||
let fileObj = param.file |
|||
let fd = new FormData() |
|||
|
|||
fd.append('approver_wechat', fileObj) |
|||
var siteForm = this.siteForm |
|||
fd.append('did', this.doctorId) |
|||
fd.append('first_visit_audit', siteForm.first_visit_audit) |
|||
fd.append('approver_phone', siteForm.approver_phone) |
|||
this.setApproverWechat(fd) |
|||
}, |
|||
setApproverWechat(param) { |
|||
this.$http('POST', '/api/admin/set_doctor_approver', param).then(response => { |
|||
if (response.code != 0) { |
|||
this.$message.error(response.msg) |
|||
return; |
|||
} |
|||
|
|||
this.$message.success(response.msg) |
|||
var data = response.data |
|||
if(this.doctorId) return; |
|||
setTimeout(() => { |
|||
location.href = location.href+'?doctor_id='+data.doctor_id |
|||
}, 800); |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
this.$message.error('设置失败') |
|||
}) |
|||
}, |
|||
submitApproverWechat() { |
|||
if(!this.doctorId) { |
|||
this.$message.error('请先设置医生基础信息') |
|||
return; |
|||
} |
|||
|
|||
if(this.approverWechatFile.length == 0) { |
|||
this.setApproverWechat(this.siteForm) |
|||
return; |
|||
} |
|||
|
|||
this.$refs.approverWechatUpload.submit(); |
|||
}, |
|||
handleApproverWechatChange(file, fileList) { |
|||
console.log(file, fileList) |
|||
this.approverWechatFile = file |
|||
this.approverWechatUrl = URL.createObjectURL(file.raw); |
|||
}, |
|||
handleAvatarChange(file, fileList) { |
|||
console.log(file, fileList) |
|||
this.doctorAvatoFile = file |
|||
this.doctorAvatorUrl = URL.createObjectURL(file.raw); |
|||
}, |
|||
radioChange(data) { |
|||
console.log(data, 'radio--data'); |
|||
}, |
|||
cancelClick(type) { |
|||
console.log(type) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
|
|||
.info-upload-wrapper ::v-deep .el-upload-list.el-upload-list--picture-card{ |
|||
display: none; |
|||
} |
|||
|
|||
.siteMessage { |
|||
border-radius: 4px; |
|||
transition: all .5s; |
|||
border: 1px solid transparent; |
|||
} |
|||
|
|||
.uploadImg{ |
|||
width: 150px; |
|||
margin-right: 20px; |
|||
} |
|||
.special-form-item ::v-deep .el-form-item__label{ |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.special-form-item { |
|||
.el-form-item__label { |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.custom-label { |
|||
gap: 6px; |
|||
} |
|||
} |
|||
|
|||
.addStore { |
|||
margin-top: 12px; |
|||
} |
|||
|
|||
.qqCode-wrap { |
|||
margin-top: 12px; |
|||
margin-bottom: 14px; |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: flex-start; |
|||
.avator-wrapper{ |
|||
position: relative; |
|||
.info-upload-wrapper{ |
|||
position: absolute; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
top: 50%; |
|||
margin-top: -19px; |
|||
right: 0; |
|||
height: 38px; |
|||
width: 118px; |
|||
overflow: hidden; |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
.labelImg { |
|||
opacity: .7; |
|||
margin-left: 8px; |
|||
} |
|||
|
|||
.avatar-uploader { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.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> |
|||
File diff suppressed because it is too large
@ -1,342 +0,0 @@ |
|||
<template> |
|||
<div class="site-setting-wrap pagePadding"> |
|||
|
|||
<div class="siteMessage flex-common" id="siteMessage1"> |
|||
<p class="littleTitle mb32">微信收款</p> |
|||
<div class="weixinpay"> |
|||
<div class="beforeNotice"> |
|||
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> |
|||
<div class="flex-between"> |
|||
<p class="mt12 flex">1.申请公司微信支付。<a class="guide" href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3" |
|||
target="_blank"><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a> </p> |
|||
|
|||
<span class=" flex"> |
|||
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank"> |
|||
<img src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a> |
|||
</span> |
|||
</div> |
|||
<p class="mt12">2.登录微信商户平台，在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。</p> |
|||
</div> |
|||
<el-form> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<GuipFormItem column="column" class="mb24" label="公司简称" :required="true"> |
|||
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name" |
|||
prop="company_short_name" placeholder="请输入"> |
|||
</GuipInput> |
|||
</GuipFormItem> |
|||
<GuipFormItem column="column" class="mb24" label="微信支付商户号" :required="true"> |
|||
<span class="desc" slot="formRight"> |
|||
<a href='https://pay.weixin.qq.com/' class="guide" |
|||
target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a> |
|||
</span> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="mch_id" prop="mch_id" |
|||
placeholder="请输入"> |
|||
</GuipInput> |
|||
</GuipFormItem> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<GuipFormItem column="column" class="mb24" label="微信支付秘钥" :required="true"> |
|||
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' class="guide" |
|||
target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a> |
|||
</span> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="apiv2" prop="apiv2" |
|||
placeholder="不能设为纯数字"> |
|||
</GuipInput> |
|||
</GuipFormItem> |
|||
<GuipFormItem column="column" class="mb24" label="公众号APPID" :required="true"> |
|||
<span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' class="guide" |
|||
target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a></span> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="appid" prop="appid" |
|||
placeholder="不能设为纯数字"> |
|||
</GuipInput> |
|||
</GuipFormItem> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<div class="siteMessage flex-common mt12" id="siteMessage2"> |
|||
<h3 class="mb12">管理证书</h3> |
|||
<div class="beforeNotice"> |
|||
<span class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt="" style="margin-right: 5px;"> |
|||
API证书获取： |
|||
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img style="margin-right: 5px;" |
|||
src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>＞账户中心＞账户设置＞API安全 |
|||
</span> |
|||
</div> |
|||
<el-form> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<div class="uploadwrap"> |
|||
<label class="flex upload-title gap8">上传 apiclient_cert.pem 证书<img class="ml-4" |
|||
src="@/assets/require.svg" /></label> |
|||
<el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false" |
|||
:limit="Number(1)" ref="avatorUpload" :auto-upload="false"> |
|||
<GuipButton class="upload-button" slot="trigger" type="ignore" |
|||
:btnstyle="{ width: '118px' }"> |
|||
<i class="bgImg"></i>选择文件 |
|||
</GuipButton> |
|||
</el-upload> |
|||
<p class="uploaded" v-if="payinfo.cert_uploaded">已上传</p> |
|||
<p class="normalUpload notuploaded" v-else>未上传任何文件</p> |
|||
</div> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<div class="uploadwrap"> |
|||
<label class="flex upload-title gap8">上传 apiclient_key.pem 证书<img class="ml-4" |
|||
src="@/assets/require.svg" /></label> |
|||
<el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false" |
|||
:limit="Number(1)" ref="avatorUpload" :auto-upload="false"> |
|||
<GuipButton class="upload-button" slot="trigger" type="ignore" |
|||
:btnstyle="{ width: '118px' }"> |
|||
<i class="bgImg"></i>选择文件 |
|||
</GuipButton> |
|||
|
|||
</el-upload> |
|||
<p class="uploaded" v-if="payinfo.key_uploaded">已上传</p> |
|||
<p class="normalUpload" v-else>未上传任何文件</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="save-button"> |
|||
<GuipButton type="primary" ref="saveRef" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import GuipInput from '@/components/GuipInput.vue'; |
|||
import GuipButton from '@/components/GuipButton.vue'; |
|||
import GuipFormItem from '@/components/GuipFormItem.vue'; |
|||
export default { |
|||
// 站点设置 |
|||
name: 'addPay', |
|||
props: {}, |
|||
components: { |
|||
GuipInput, |
|||
GuipButton, |
|||
GuipFormItem, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 公司简称 |
|||
company_short_name: '', |
|||
// 商户号 |
|||
mch_id: '', |
|||
// 微信支付秘钥 |
|||
apiv2: '', |
|||
// 公众号APPID |
|||
appid: '', |
|||
payinfo: [], |
|||
saveBtnStyleObj: { |
|||
width: '144px', |
|||
height: '46px', |
|||
borderRadius: '4px', |
|||
background: '#006AFF', |
|||
}, |
|||
} |
|||
}, |
|||
created() { |
|||
// 初始化反显 |
|||
// this.getPayment() |
|||
}, |
|||
methods: { |
|||
getPayment() { |
|||
this.$http('POST', '/agentnew/ajax_get_payinfo', { |
|||
payid: this.$route.query.payid, |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.payinfo = response.data |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
handleAvatarChange(file, fileList) { |
|||
console.log(file, fileList) |
|||
let fileObj = file.raw |
|||
this.formData.set('apiclient_cert', fileObj) |
|||
}, |
|||
handleAvatarChange1(file, fileList) { |
|||
console.log(file, fileList) |
|||
let fileObj = file.raw |
|||
this.formData.set('apiclient_key', fileObj) |
|||
}, |
|||
saveConfirm() { |
|||
// |
|||
// this.$positionMessage({ |
|||
// type: 'error', |
|||
// message: '请先上传证书', |
|||
// target: this.$refs['saveRef'], // 可以是DOM元素或选择器 |
|||
// position: 'top' |
|||
// }) |
|||
// let obj = {} |
|||
// obj.uid = this.serviceInfo.uid |
|||
// obj.type = this.serviceInfo.type |
|||
// obj.info = "" |
|||
// const that = this |
|||
// this.$http('POST', '/agentnew/ajax_payment_switch', obj).then(response => { |
|||
// if(response.status){ |
|||
// that.$message.success('保存成功'); |
|||
// that.payList = response.data.paylist |
|||
// that.$emit('saveEvent', that.payList) |
|||
// return true; |
|||
// } |
|||
// that.$message.error(response.info); |
|||
// }).catch(error => { |
|||
// console.error(error, 'error') |
|||
// }) |
|||
}, |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.guide{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 6px; |
|||
color: #8A9099 !important; |
|||
font-size: 12px; |
|||
} |
|||
.site-setting-wrap{ |
|||
height: calc(100% - 80px); |
|||
overflow-y: auto; |
|||
} |
|||
.notuploaded,.uploaded,.normalUpload{ |
|||
margin-top: 8px; |
|||
font-size: 12px; |
|||
color: #606266; |
|||
} |
|||
.normalUpload{ |
|||
color:#606266; |
|||
} |
|||
.notuploaded{ |
|||
color: #FD3B3B; |
|||
} |
|||
.save-button { |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background: #fff; |
|||
box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 16px 0; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.uploadwrap { |
|||
text-align: left; |
|||
} |
|||
|
|||
.upload-title { |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #23242B; |
|||
} |
|||
|
|||
.upload-button { |
|||
border-radius: 4px; |
|||
background: #F2F3F5; |
|||
box-sizing: border-box; |
|||
border: 1px solid #BABDC2; |
|||
|
|||
.bgImg { |
|||
width: 20px; |
|||
height: 16px; |
|||
margin-right: 6px; |
|||
background-image: url(@/assets/site/uploadIcon.svg); |
|||
} |
|||
|
|||
&:hover { |
|||
.bgImg { |
|||
background-image: url(@/assets/site/uploadIcon_light.svg); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.upload-demo { |
|||
margin-top: 12px; |
|||
} |
|||
|
|||
.beforeNotice { |
|||
|
|||
h4 { |
|||
margin: 0; |
|||
gap: 8px; |
|||
} |
|||
|
|||
margin-bottom: 18px; |
|||
text-align: left; |
|||
box-sizing: border-box; |
|||
padding: 20px 14px; |
|||
border-radius: 4px; |
|||
/* middle/middle_blue_1 */ |
|||
background: #F2F7FF; |
|||
/* middle/middle_blue_3 */ |
|||
border: 1px solid #BFDAFF; |
|||
|
|||
div { |
|||
// margin-top: 2px; |
|||
// padding-left: 23px; |
|||
|
|||
p { |
|||
// color: #8A9099; |
|||
} |
|||
|
|||
} |
|||
|
|||
p { |
|||
color: #1E2226; |
|||
|
|||
i { |
|||
font-style: normal; |
|||
} |
|||
|
|||
&:last-child { |
|||
display: flex; |
|||
align-items: stretch; |
|||
|
|||
b { |
|||
font-weight: normal; |
|||
color: #8A9099; |
|||
display: inline-flex; |
|||
|
|||
img { |
|||
margin-left: 4px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
margin-right: 10px; |
|||
|
|||
img { |
|||
margin-left: 5px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
a { |
|||
color: #006AFF; |
|||
text-decoration: none; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue