|
|
<template>
|
|
|
<div>
|
|
|
<div class="head">
|
|
|
<el-row>
|
|
|
<el-form-item>
|
|
|
<el-input v-model="searchInfo.name" />
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" style="margin-left: 10px;" @click="GetList()">搜索</el-button>
|
|
|
</el-form-item>
|
|
|
</el-row>
|
|
|
<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
|
|
|
<el-table-column prop="hospital_name" label="医院" />
|
|
|
<el-table-column prop="name" label="套餐名称" />
|
|
|
<el-table-column prop="combo_type_name" label="套餐类型" />
|
|
|
<el-table-column prop="combo_crowd_name" label="适用人群" />
|
|
|
<el-table-column prop="price" label="价格" />
|
|
|
<el-table-column prop="sex" label="性别">
|
|
|
<template #default="scope">
|
|
|
<el-tag v-if="scope.row.sex==0" class="ml-2">全部</el-tag>
|
|
|
<el-tag v-if="scope.row.sex==1" class="ml-2" type="danger">男</el-tag>
|
|
|
<el-tag v-if="scope.row.sex==2" class="ml-2" type="success">女</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="updated_at" label="更新时间" />
|
|
|
<el-table-column label="操作" width="100">
|
|
|
<template #default="scope">
|
|
|
<el-button type="primary" @click="EditFunc(scope.row)" :icon="Edit" circle />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<div class="page">
|
|
|
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
|
|
|
:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
|
|
|
@size-change="PageSizeChange" @current-change="PageCurrentChange" />
|
|
|
</div>
|
|
|
<el-dialog v-model="dialogVisible" title="套餐信息" width="60%">
|
|
|
<el-form :model="Info" label-width="100px" v-loading="loading">
|
|
|
<el-form-item label="名称">
|
|
|
{{Info.name}}
|
|
|
</el-form-item>
|
|
|
<el-form-item label="Logo">
|
|
|
<el-upload class="avatar-uploader" :action="upfileurl" :headers="headerObj"
|
|
|
:show-file-list="false" :on-success="upLoadSuccess">
|
|
|
<img v-if="logo" :src="logo" class="avatar" style="width: 60px;" />
|
|
|
<el-icon v-else class="avatar-uploader-icon">
|
|
|
<Plus />
|
|
|
</el-icon>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="体检类型">
|
|
|
<el-checkbox-group v-model="Info.checkup_type_id">
|
|
|
<el-select :filterable="true" clearable v-model="Info.checkup_type_id" placeholder="选择体检类型">
|
|
|
<el-option v-for="(item,index) in CheckUpTypeEnableList" :key="index" :label="item.name"
|
|
|
:value="item.id" />
|
|
|
</el-select>
|
|
|
</el-checkbox-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="套餐类型">
|
|
|
<el-select :filterable="true" clearable v-model="Info.type_id" placeholder="选择套餐类型">
|
|
|
<el-option v-for="(item,index) in ComboTypeList" :key="index" :label="item.name"
|
|
|
:value="item.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="适应人群">
|
|
|
<el-select :filterable="true" clearable v-model="Info.crowd_id" placeholder="选择适应人群">
|
|
|
<el-option v-for="(item,index) in ComboCrowdList" :key="index" :label="item.name"
|
|
|
:value="item.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="标签">
|
|
|
<el-input v-model="Info.tags" type="textarea" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="标签2">
|
|
|
<el-input v-model="Info.tags2" type="textarea" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="简介">
|
|
|
<el-input v-model="Info.intro" type="textarea" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="服务承诺">
|
|
|
<el-input v-model="Info.sub_intro" type="textarea" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="详情">
|
|
|
<div style="border: 1px solid #ccc">
|
|
|
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
|
|
|
:defaultConfig="toolbarConfig" :mode="mode" />
|
|
|
<Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml"
|
|
|
:defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
|
<el-button type="primary" @click="Save">
|
|
|
确定
|
|
|
</el-button>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
|
|
import {
|
|
|
onBeforeUnmount,
|
|
|
ref,
|
|
|
shallowRef,
|
|
|
onMounted
|
|
|
} from 'vue'
|
|
|
import {
|
|
|
Editor,
|
|
|
Toolbar
|
|
|
} from '@wangeditor/editor-for-vue'
|
|
|
import {
|
|
|
ElMessage
|
|
|
} from 'element-plus'
|
|
|
import {
|
|
|
UpFileUrl,
|
|
|
ComboGetList,
|
|
|
ComboGetDetail,
|
|
|
ComboSave,
|
|
|
ComboTypeGetList,
|
|
|
ComboCrowdGetList,
|
|
|
CheckUpTypeGetEnableList
|
|
|
} from '@/api/api.js'
|
|
|
import {
|
|
|
Edit
|
|
|
} from '@element-plus/icons-vue'
|
|
|
let loading = ref(false)
|
|
|
let tableData = ref([])
|
|
|
let currentPage = ref(1) //当前页码
|
|
|
let pageSize = ref(15) //每页数量
|
|
|
let total = 0 //总数量
|
|
|
let dialogVisible = ref(false)
|
|
|
const PageSizeChange = (e) => { // 修改每页数量
|
|
|
pageSize.value = e
|
|
|
GetList()
|
|
|
}
|
|
|
const PageCurrentChange = (e) => { //切换页码
|
|
|
currentPage.value = e
|
|
|
GetList()
|
|
|
}
|
|
|
let upfileurl = UpFileUrl()
|
|
|
let headerObj = {
|
|
|
Authorization: 'Bearer ' + sessionStorage.getItem("token")
|
|
|
}
|
|
|
let logo = ref('');
|
|
|
//上传成功钩子
|
|
|
let BaseUrl = ref(import.meta.env.VITE_APP_FILE)
|
|
|
const upLoadSuccess = (res) => {
|
|
|
logo.value = BaseUrl.value + res.data
|
|
|
Info.value.cover = res.data
|
|
|
}
|
|
|
let searchInfo = ref({});
|
|
|
let Info = ref({});
|
|
|
const GetList = () => {
|
|
|
loading.value = true
|
|
|
ComboGetList({
|
|
|
page: currentPage.value,
|
|
|
pageSize: pageSize.value,
|
|
|
searchInfo: searchInfo.value
|
|
|
}).then(res => {
|
|
|
loading.value = false
|
|
|
if (res.status) {
|
|
|
tableData.value = res.data.list
|
|
|
total = res.data.count
|
|
|
} else {
|
|
|
ElMessage.error(res.msg)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
const Save = () => {
|
|
|
Info.value.desc = editorRef.value.getHtml()
|
|
|
if (!Array.isArray(Info.value.tags)) {
|
|
|
Info.value.tags = toArray(Info.value.tags)
|
|
|
}
|
|
|
if (!Array.isArray(Info.value.tags2)) {
|
|
|
Info.value.tags2 = toArray(Info.value.tags2)
|
|
|
}
|
|
|
|
|
|
loading.value = true
|
|
|
ComboSave({
|
|
|
Info: Info.value
|
|
|
}).then(res => {
|
|
|
loading.value = false
|
|
|
if (res.status) {
|
|
|
dialogVisible.value = false
|
|
|
GetList()
|
|
|
} else {
|
|
|
ElMessage.error(res.msg)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
const EditFunc = (row) => {
|
|
|
dialogVisible.value = true
|
|
|
loading.value = true
|
|
|
GetComboType()
|
|
|
GetComboCrowd()
|
|
|
ComboGetDetail({
|
|
|
id: row.id
|
|
|
}).then(res => {
|
|
|
loading.value = false
|
|
|
if (res.status) {
|
|
|
Info.value = res.data
|
|
|
logo.value = BaseUrl.value + res.data.cover
|
|
|
editorRef.value.setHtml(Info.value.desc)
|
|
|
} else {
|
|
|
ElMessage.error(res.msg)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
const toArray = (str) => { //字符串转数组
|
|
|
console.log(str);
|
|
|
if (!str) return
|
|
|
str = str.replace(/，/g, ',')
|
|
|
if (str.endsWith(',')) {
|
|
|
// 如果以逗号结尾，则使用slice方法去掉最后一个字符
|
|
|
str = str.slice(0, -1);
|
|
|
}
|
|
|
return str.split(",")
|
|
|
}
|
|
|
|
|
|
//富文本编辑器
|
|
|
// 编辑器实例，必须用 shallowRef
|
|
|
const editorRef = shallowRef()
|
|
|
|
|
|
// 内容 HTML
|
|
|
const valueHtml = ref(null)
|
|
|
const toolbarConfig = {}
|
|
|
const editorConfig = {
|
|
|
placeholder: '请输入内容...',
|
|
|
MENU_CONF: {},
|
|
|
}
|
|
|
let mode = 'default' // 'simple\default'
|
|
|
|
|
|
|
|
|
// 修改 uploadImage 菜单配置
|
|
|
editorConfig.MENU_CONF['uploadImage'] = {
|
|
|
server: upfileurl,
|
|
|
fieldName: 'WangEditorImageFile',
|
|
|
headers: headerObj,
|
|
|
// 继续写其他配置...
|
|
|
|
|
|
//【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
|
|
|
}
|
|
|
|
|
|
// 组件销毁时，也及时销毁编辑器
|
|
|
onBeforeUnmount(() => {
|
|
|
const editor = editorRef.value
|
|
|
if (editor == null) return
|
|
|
editor.destroy()
|
|
|
})
|
|
|
|
|
|
const handleCreated = (editor) => {
|
|
|
editorRef.value = editor // 记录 editor 实例，重要！
|
|
|
}
|
|
|
//获取全部套餐类型
|
|
|
let ComboTypeList = ref([]);
|
|
|
const GetComboType = () => {
|
|
|
loading.value = true
|
|
|
ComboTypeGetList({}).then(res => {
|
|
|
loading.value = false
|
|
|
if (res.status) {
|
|
|
ComboTypeList.value = res.data.list
|
|
|
} else {
|
|
|
ElMessage.error(res.msg)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
//获取全部套餐适应人群
|
|
|
let ComboCrowdList = ref([]);
|
|
|
const GetComboCrowd = () => {
|
|
|
loading.value = true
|
|
|
ComboCrowdGetList({}).then(res => {
|
|
|
loading.value = false
|
|
|
if (res.status) {
|
|
|
ComboCrowdList.value = res.data.list
|
|
|
} else {
|
|
|
ElMessage.error(res.msg)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
//可用体检类型列表
|
|
|
let CheckUpTypeEnableList = ref([]);
|
|
|
const GetCheckUpTypeEnableList_Func = () => {
|
|
|
loading.value = true
|
|
|
CheckUpTypeGetEnableList().then(res => {
|
|
|
loading.value = false
|
|
|
if (res.status) {
|
|
|
CheckUpTypeEnableList.value = res.data.list
|
|
|
} else {
|
|
|
ElMessage.error(res.msg)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
GetList()
|
|
|
GetCheckUpTypeEnableList_Func()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
</style> |