Browse Source

面包屑及路由配置修改

pull/54/head
zq 1 week ago
parent
commit
31eaff5d18
  1. 18
      src/App.vue
  2. 1
      src/assets/menu/home-bread.svg
  3. 35
      src/components/Breadcrumb.vue
  4. 263
      src/components/SetLeftMenu.vue
  5. 3
      src/components/SliderMenu.vue
  6. 121
      src/router/index.js
  7. 113
      src/store/index.js
  8. 22
      src/utils/request.js
  9. 974
      src/views/DemoTable1.vue
  10. 61
      src/views/SiteBaseSetting.vue
  11. 4
      src/views/SitePersonalization.vue
  12. 2
      src/views/agent/siteList.vue

18
src/App.vue

@ -8,8 +8,9 @@
<div class="bg"></div>
</el-header>
<el-container :class="(showHeader ? 'short-container' : '')">
<SliderMenu v-if="showSidebar" :menuData="menuData"></SliderMenu>
<el-container>
<SliderMenu v-if="showSidebar" :menuData="slidermenu" :customize="customize"></SliderMenu>
<!-- <SliderMenu v-if="showSidebar" :menuData="menuData"></SliderMenu> -->
<el-container class="main-right-content">
<!-- 面包屑导航 -->
<Breadcrumb />
<el-main class="app-content">
@ -17,9 +18,9 @@
<router-view />
</global-loading>
</el-main>
<!-- <el-footer v-if="showFooter">
<Footer></Footer>
</el-footer> -->
<!-- <el-footer v-if="showFooter"> -->
<Footer v-if="showFooter"></Footer>
<!-- </el-footer> -->
</el-container>
</el-container>
@ -70,7 +71,7 @@ export default {
Breadcrumb
},
computed: {
...mapState(['menuData','showSidebar', 'showFooter', 'showHeader']) // VuexshowSidebar
...mapState(['showSidebar', 'showFooter', 'showHeader','slidermenu','customize']) // VuexshowSidebar
},
mounted() {
window.addEventListener('beforeunload', this.clearStorage);
@ -110,6 +111,11 @@ export default {
.short-container {
height: calc(100vh - 62px);
}
.main-right-content{
display: flex;
flex-direction: column;
}
::v-deep .el-container .el-main {
// padding: 12px;

1
src/assets/menu/home-bread.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

35
src/components/Breadcrumb.vue

@ -2,15 +2,14 @@
<div v-if="breadcrumbs.length > 0" class="breadcrumb-container">
<nav>
<ol class="breadcrumb">
<li
v-for="(item, index) in breadcrumbs"
:key="index"
class="breadcrumb-item"
:class="{ active: index === breadcrumbs.length - 1 }"
>
<li v-for="(item, index) in breadcrumbs" :key="index" class="breadcrumb-item"
:class="{ active: index === breadcrumbs.length - 1 }">
<template v-if="index !== breadcrumbs.length - 1">
<router-link :to="item.path">{{ item.title }}</router-link>
<!-- <span class="separator">/</span> -->
<router-link to="/" v-if="item.title == '首页'">
<img class="home-icon" src="@/assets/menu/home-bread.svg" alt="首页">
</router-link>
<router-link v-else :to="item.path">{{ item.title }}</router-link>
<img class="separator" src="@/assets/separator.png" alt="">
</template>
<template v-else>
@ -62,16 +61,20 @@ export default {
}
</script>
<style scoped>
/* 保持之前的样式不变 */
.breadcrumb-container {
padding: 16px 12px;
background-color: #f5f5f5;
border-radius: 4px;
}
.home-icon{
width: 16px;
height: 16px;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
height: 22px;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
@ -80,21 +83,25 @@ export default {
.breadcrumb-item {
display: flex;
align-items: center;
height: 100%;
}
.router-link-active{
height: 100%;
display: flex;
align-items: center;
}
.breadcrumb-item a {
color: #626573;
text-decoration: none;
}
.breadcrumb-item.active span {
color: #1E2226;;
color: #1E2226;
;
}
.separator {
/* margin: 0 5px;
color: #6c757d;; */
width: 12px;
height: 12px;
}

263
src/components/SetLeftMenu.vue

@ -1,15 +1,16 @@
<template>
<aside class="sidebar">
<ul>
<li v-for="(item, index) in menuList" :key="item.path">
<div :class="[$route.path == item.path ? 'active' : '', 'flex', $route.path == item.path ? curIndex = index : '']"
@click="gotoPath(item.path,index)">
<SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16"
activeColor="#006AFF" :isActive="$route.path == item.path" />
<span class="title_text" >{{ item.name }}</span>
<li v-for="(item, index) in menuList" :key="item.path + random()">
<div
:class="[($route.path == item.path) || (item.noToPath && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']">
<!-- @click="gotoPath(item, index)" 暂时先注释 -->
<SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
:isActive="($route.path == item.path || (item.noToPath && curIndex == index))" />
<span class="title_text">{{ item.name }}</span>
</div>
<p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']"
v-for="(item1) in item.list" @click="setActiveCur(item1.desc,item)" :key="item1.name">{{ item1.name }}</p>
<p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']" v-for="(item1) in item.list"
@click="setActiveCur(item1.desc, item)" :key="item1.name">{{ item1.name }}</p>
</li>
</ul>
</aside>
@ -42,149 +43,117 @@ export default {
activeFloor: null,
curIndex: 0,
scrollLock: false,
// menuList: [
// {
// name: '',
// path: '/siteSetting/siteBaseSetting',
// img: require('@/assets/site/sitebase.svg'),
// imgActive: require('@/assets/site/sitebase_active.svg'),
// list: [
// {
// name: '',
// desc: 'siteMessage1'
// },
// {
// name: '',
// desc: 'siteMessage2'
// },
// {
// name: '',
// desc: 'siteMessage3'
// },
// ]
// },
// {
// name: '',
// path: '/siteSetting/sitePersonalization',
// img: require('@/assets/site/gexinghua.svg'),
// imgActive: require('@/assets/site/sitebase_active.svg'),
// list: [
// {
// name: '',
// desc: 'siteMessage4'
// },
// {
// name: '',
// desc: 'siteMessage5'
// },
// {
// name: '',
// desc: 'siteMessage6'
// },
// {
// name: '',
// desc: 'siteMessage7'
// },
// {
// name: '',
// desc: 'siteMessage8'
// },
// ]
// },
// {
// name: '',
// path: '/siteSetting/siteH5',
// img: require('@/assets/site/siteh5.svg'),
// imgActive: require('@/assets/site/sitebase_active.svg'),
// list: [
// {
// name: 'H5',
// desc: 'siteMessage9'
// },
// {
// name: '',
// desc: 'siteMessage10'
// },
// ]
// },
// {
// name: '广',
// path: '/siteSetting/siteSem',
// img: require('@/assets/site/sitesem.svg'),
// imgActive: require('@/assets/site/sitebase_active.svg'),
// list: [
// {
// name: 'SEO',
// desc: 'siteMessage11'
// },
// {
// name: 'SEM',
// desc: 'siteMessage12'
// },
// {
// name: '访',
// desc: 'siteMessage13'
// },
// ]
// }
// ]
}
},
watch: {
'$route'(to, from) {
console.log(to, from);
//
this.$nextTick(() => {
this.calculateFloorOffsets();
this.handleScroll(); //
});
}
},
mounted() {
// console.log(this.curIndex,'this.curIndex');
this.activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
this.calculateFloorOffsets();
this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc;
this.$nextTick(() => {
// console.log(this.$parent.$refs.scrollContainer, 'this.$refs.scrollContainer--');
this.$parent.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
})
//
this.scrollContainer = document.querySelector('.main-content') ||
document.getElementById('main-content') ||
window;
if (this.scrollContainer) {
this.scrollContainer.addEventListener('scroll', this.handleScroll);
this.calculateFloorOffsets();
} else {
console.error('未找到滚动容器');
}
});
},
beforeDestroy() {
if (this.scrollContainer) {
this.scrollContainer.removeEventListener('scroll', this.handleScroll);
}
},
created() {
// console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--');
},
computed: {
...mapState(['pageTitle']) // VuexshowSidebar
},
beforeDestroy() {
this.$parent.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll);
...mapState(['pageTitle']) // VuexshowSidebar
},
methods: {
random() {
var randomNumber = Math.random();
return randomNumber
},
calculateFloorOffsets() {
this.menuList.forEach(item => {
item.list.forEach(every => {
item.list?.forEach(every => {
const el = document.getElementById(every.desc);
if (el) {
every.offsetTop = el.offsetTop;
//
every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
}
})
});
});
},
handleScroll() {
if (this.scrollLock) return
const scrollContainer = this.$parent.$refs.scrollContainer;
const scrollHeight = scrollContainer.scrollTop;
let activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
this.menuList[this.curIndex]['list'].forEach(item => {
if (scrollHeight + 72 >= item.offsetTop) {
activeFloor = item.desc; // ID
} else {
return false; //
if (this.scrollLock || !this.menuList[this.curIndex]?.list) return;
const scrollPosition = this.getScrollPosition();
let activeFloor = null;
//
for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
const item = this.menuList[this.curIndex].list[i];
if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100
activeFloor = item.desc;
break;
}
});
this.activeFloor = activeFloor; //
}
if (activeFloor && this.activeFloor !== activeFloor) {
this.activeFloor = activeFloor;
}
},
setActiveCur(dom,item) {
if(this.$route.path != item.path){
this.$router.push(item.path)
store.commit('SET_PAGETITLE', item.name);
getScrollPosition() {
if (this.scrollContainer === window) {
return window.pageYOffset || document.documentElement.scrollTop;
}
setTimeout(()=>{
this.activeFloor = dom;
this.setHighActive(dom)
},500)
return this.scrollContainer.scrollTop;
},
gotoPath(path,index) {
if(this.$route.path != path){
// setActiveCur(dom, item) {
// if (this.$route.path != item.path) {
// this.$router.push(item.path)
// store.commit('SET_PAGETITLE', item.name);
// }
// setTimeout(() => {
// this.activeFloor = dom;
// this.setHighActive(dom)
// }, 500)
// },
// setHighActive(dom) {
// this.scrollLock = true;
// const ele = document.getElementById(dom)
// if (!ele) return
// ele.classList.add('ceshi')
// ele.scrollIntoView({ behavior: 'smooth', block: 'start' })
// setTimeout(() => {
// ele.classList.remove('ceshi')
// }, 1000)
// }
gotoPath(item, index) {
let path = item.path;
if (!path) {
this.curIndex = index;
return
}
if (this.$route.path != path) {
this.curIndex = index
this.scrollLock = false;
this.handleScroll()
@ -197,15 +166,32 @@ export default {
activeArea(type) {
console.log(type);
},
setHighActive(dom) {
setActiveCur(dom, item) {
debugger
if (this.$route.path !== item.path) {
this.$router.push(item.path);
store.commit('SET_PAGETITLE', item.name);
}
this.scrollLock = true;
const ele = document.getElementById(dom)
if(!ele)return
ele.classList.add('ceshi')
ele.scrollIntoView({ behavior: 'smooth', block: 'start' })
setTimeout(() => {
ele.classList.remove('ceshi')
}, 1000)
this.activeFloor = dom;
this.$nextTick(() => {
this.setHighActive(dom);
setTimeout(() => {
this.scrollLock = false;
}, 1000);
});
},
setHighActive(dom) {
const ele = document.getElementById(dom);
if (ele) {
ele.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
}
}
@ -213,7 +199,7 @@ export default {
<style scoped lang="scss">
.sidebar {
width: 158px;
min-width: 158px;
padding: 21px;
box-sizing: border-box;
background: #FFFFFF;
@ -223,7 +209,8 @@ export default {
.ceshi {
// animation: fadeInOut 2s infinite;
}
.title_text{
.title_text {
margin-left: 6px;
}

3
src/components/SliderMenu.vue

@ -73,6 +73,7 @@ export default {
},
watch: {
"$route.path"() {
if(this.customize)return
this.updateCurrentMenu();
},
},
@ -130,6 +131,8 @@ export default {
// console.log(this.$route.path, this.$router.options.router, 'this.$route.path===');
// //
// this.activeMenu = this.$route.path;
console.log(this.customize,'customize---');
this.updateCurrentMenu();
}
}

121
src/router/index.js

@ -6,11 +6,19 @@ import HomeView from '../views/HomeView.vue';
// import Franchise from '../views/Franchise.vue'
Vue.use(VueRouter)
const whiteSlideList = ['/', '/ui',
'/agent/siteList',
'/agent/siteBaseSetting',
'/agent/siteSemSetting',
]; //侧边导航白名单
const blackSliderList = [
'/register'
];
const first_child_router = [
'/','/agent/siteList'
]
// const whiteSlideList = ['/', '/ui',
// '/agent/siteList',
// '/agent/siteBaseSetting',
// '/agent/siteSemSetting',
// '/siteBaseSetting',
// '/sitePersonalization'
// ]; //侧边导航白名单
// const whiteHeaderList = ['/', '/ui', '/agent/siteList', '/register', '/configureServicePrices', '/siteList','/siteSetting/siteBaseSetting','/siteSetting/sitePersonalization'
// ,'/siteSetting/siteH5','/siteSetting/siteSem','/pageTemplete','/demo',
// '/super/ranking/yearProfit', '/super/ranking/monthProfit', '/super/ranking/checkProfit', '/super/ranking/checkOrdernum',
@ -26,6 +34,9 @@ const blackHeaderList = [
// '/super/ranking/checkRefund', '/super/ranking/agentProfit', '/super/ranking/agentRecharge', '/super/ranking/agentNew',
// '/super/ranking/purchase','/super/ranking/stagePurchase','/super/ranking/loss'
// ];
const blackFooterList = [
'/'
];
const routes = [{
path: '/',
name: '首页',
@ -48,7 +59,12 @@ const routes = [{
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import( /* webpackChunkName: "ui" */ '../views/elementGroups.vue')
component: () => import( /* webpackChunkName: "ui" */ '../views/elementGroups.vue'),
meta: {
title: '公共组件示例',
hideBreadcrumb: true, // 一级页面不显示面包屑
// breadcrumbParent:'首页'
}
},
{
path: '/agent/siteList',
@ -56,7 +72,33 @@ const routes = [{
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteList.vue')
component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteList.vue'),
meta: {
title: '站点列表',
breadcrumbParent:'首页',
hideBreadcrumb: true // 一级页面不显示面包屑
}
},
{
path: '/siteBaseSetting',
name: '站点基础设置',
component: () => import( /* webpackChunkName: "siteBaseSetting" */ '../views/SiteBaseSetting.vue'),
meta: {
title: '站点设置',
breadcrumbParent: '站点列表' // 手动指定父级
// r如果想隐藏中间层级
// breadcrumbParent: '首页', // 跳过医生信息
// hideInBreadcrumb: true // 可选:隐藏当前项
}
},
{
path: '/sitePersonalization',
name: '个性化设置',
component: () => import( /* webpackChunkName: "sitePersonalization" */ '../views/SitePersonalization.vue'),
meta: {
title: '站点设置',
breadcrumbParent: '站点列表' // 手动指定父级
}
},
// {
// path: '/agent/siteBaseSetting',
@ -85,12 +127,6 @@ const routes = [{
component: () => import( /* webpackChunkName: "configureServicePrices" */ '../views/ConfigureServicePrices.vue')
},
{
path: '/siteList',
name: '站点列表',
component: () => import( /* webpackChunkName: "siteList" */ '../views/SiteList.vue')
},
{
path: '/siteSetting',
name: '站点设置',
component: () => import( /* webpackChunkName: "SiteSetting" */ '../views/SiteSetting.vue'),
@ -99,16 +135,16 @@ const routes = [{
path: '', // 默认子路由
redirect: () => import( /* webpackChunkName: "siteBaseSetting" */ '../views/SiteBaseSetting.vue') // 重定向到第一个页面
},
{
path: 'siteBaseSetting',
name: '站点基础设置',
component: () => import( /* webpackChunkName: "siteBaseSetting" */ '../views/SiteBaseSetting.vue'),
},
{
path: 'sitePersonalization',
name: '个性化设置',
component: () => import( /* webpackChunkName: "sitePersonalization" */ '../views/SitePersonalization.vue')
},
// {
// path: 'siteBaseSetting',
// name: '站点基础设置',
// component: () => import( /* webpackChunkName: "siteBaseSetting" */ '../views/SiteBaseSetting.vue'),
// },
// {
// path: 'sitePersonalization',
// name: '个性化设置',
// component: () => import( /* webpackChunkName: "sitePersonalization" */ '../views/SitePersonalization.vue')
// },
{
path: 'siteH5',
name: '移动端设置',
@ -119,11 +155,11 @@ const routes = [{
name: '营销推广',
component: () => import( /* webpackChunkName: "siteSem" */ '../views/SiteSem.vue')
},
// {
// path: 'demoTable', // 默认子路由
// name: '测试页面',
// redirect: () => import( /* webpackChunkName: "demoTable" */ '../views/DemoTable.vue') // 重定向到第一个页面
// },
{
path: 'demoTable', // 默认子路由
name: '测试页面',
redirect: () => import( /* webpackChunkName: "demoTable" */ '../views/DemoTable.vue') // 重定向到第一个页面
},
]
},
{
@ -246,23 +282,34 @@ const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
console.log(to.path, 'to.path-----');
if (whiteSlideList.includes(to.path)) {
store.commit('SET_SIDEBAR', true); // 登录页面显示侧边栏
if (blackSliderList.includes(to.path)) {
store.commit('SET_SIDEBAR', false); // 登录页面显示侧边栏
} else {
store.commit('SET_SIDEBAR', false); // 其他页面显示侧边栏
if(first_child_router.includes(to.path)){//所有一级路由都为非自定义侧边栏
store.commit('SET_CUSTOMIZE', false);
store.commit('SET_SLIDER_MENU','menuData');
}
store.commit('SET_SIDEBAR', true); // 其他页面不显示侧边栏
}
if (blackFooterList.includes(to.path)) {
store.commit('SET_FOOTER', false); // 页面不显示底部
} else {
store.commit('SET_FOOTER', true); // 其他页面显示底部
}
// if (whiteFooterList.includes(to.path)) {
// store.commit('SET_FOOTER', true); // 登录页面不显示侧边栏
// } else {
// store.commit('SET_FOOTER', false); // 其他页面显示侧边栏
// }
if (blackHeaderList.includes(to.path)) {
store.commit('SET_HEADER', false); // 不显示顶部
} else {
store.commit('SET_HEADER', true); // 其他页面显示顶部
}
store.dispatch('showLoading')
next();
});
router.afterEach(() => {
// 添加延迟确保过渡效果
setTimeout(() => {
store.dispatch('hideLoading')
}, 300)
})
export default router

113
src/store/index.js

@ -13,6 +13,8 @@ export default new Vuex.Store({
pageTitle: '一般新文献', //页面标题
addServiceList: [], //选中的服务
isLoading: false, //页面loading
customize: false, //页面loading
slidermenu:[],
rankMenuData: [{
index: '1',
title: '总利润',
@ -133,7 +135,7 @@ export default new Vuex.Store({
]
}
],
siteSettingData:[
siteSettingData1:[
{
name: '基本设置',
path: '/siteSetting/siteBaseSetting',
@ -218,6 +220,92 @@ export default new Vuex.Store({
},
]
}
],
siteSettingData:[
{
name: '基本设置',
path: '/siteBaseSetting',
img:'site/sitebase.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: '站点信息',
desc: 'siteMessage1'
},
{
name: '域名设置',
desc: 'siteMessage2'
},
{
name: '收款方式',
desc: 'siteMessage3'
},
]
},
{
name: '个性化设置',
path: '/sitePersonalization',
img: 'site/gexinghua.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: '网页模板',
desc: 'siteMessage4'
},
{
name: '客服设置',
desc: 'siteMessage5'
},
{
name: '功能显隐',
desc: 'siteMessage6'
},
{
name: '安全提交',
desc: 'siteMessage7'
},
{
name: '初始订单数',
desc: 'siteMessage8'
},
]
},
{
name: '移动端设置',
path: '/siteSetting/siteH5',
img: 'site/siteh5.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: '微信H5',
desc: 'siteMessage9'
},
{
name: '小程序',
desc: 'siteMessage10'
},
]
},
{
name: '营销推广',
path: '/siteSetting/siteSem',
img: 'site/sitesem.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: 'SEO设置',
desc: 'siteMessage11'
},
{
name: 'SEM设置',
desc: 'siteMessage12'
},
{
name: '访问统计',
desc: 'siteMessage13'
},
]
}
]
},
actions: {
@ -261,8 +349,27 @@ export default new Vuex.Store({
}) {
commit('HIDE_LOADING')
},
SET_CUSTOMIZE({
commit
}) {
commit('SET_CUSTOMIZE');
},
SET_SLIDER_MENU({
commit
}) {
commit('SET_SLIDER_MENU')
},
},
mutations: {
SET_SLIDER_MENU(state,type){
console.log(type,'111=====');
console.log(state.slidermenu ,'222=====');
state.slidermenu = state[type]
console.log(state.slidermenu ,'333=====');
},
SET_CUSTOMIZE(state,show) {
state.customize = show
},
SHOW_LOADING(state) {
state.isLoading = true
// state.loadingText = text || '加载中...'
@ -289,7 +396,9 @@ export default new Vuex.Store({
state.addServiceList = list;
}
},
getters: {},
getters: {
menuData: state => state.menuData
},
modules: {}
})

22
src/utils/request.js

@ -1,12 +1,14 @@
// src/utils/request.js
import axios from "axios";
// import store from '@/store'
// let loadingTimer = null
// 创建 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 从环境变量中读取 API 基础地址
timeout: 60000, // 请求超时时间
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
'Content-Type': 'application/x-www-form-urlencoded',
'AUTH': '3c901fa4a19a7ad9d01238890863d499'
},
});
@ -16,11 +18,20 @@ service.interceptors.request.use(
// 在发送请求之前做一些处理,例如添加 token
const token = localStorage.getItem("token");
if (token) {
config.headers["Auth"] = `${token}`;
config.headers["AUTH"] = `${token}`;
}
// 如果配置里传了 loading: false,则不显示 loading
// if (config.loading !== false) {
// loadingTimer = setTimeout(() => {
// store.dispatch('showLoading')
// }, 300)
// }
return config;
},
(error) => {
// clearTimeout(loadingTimer)
// // 请求错误时也要关闭 loading
// store.dispatch('hideLoading')
// 对请求错误做些什么
return Promise.reject(error);
}
@ -32,9 +43,12 @@ service.interceptors.response.use(
// 对响应数据做一些处理
const res = response.data;
if (!res.status) {
// 如果返回的 status 不是 true,则视为错误
// return Promise.reject(new Error(res.info || "请求失败"));
}
// clearTimeout(loadingTimer)
// store.dispatch('hideLoading')
return res;
},
(error) => {
@ -57,6 +71,8 @@ service.interceptors.response.use(
console.error("请求失败", error.message);
}
}
// clearTimeout(loadingTimer)
// store.dispatch('hideLoading')
return Promise.reject(error);
}
);

974
src/views/DemoTable1.vue

@ -0,0 +1,974 @@
<template>
<div class="site-setting-wrap pagePadding min-flex-right">
<p class="pageTitle bold mt24 mb24">基础信息</p>
<div class="siteMessage flex-common" id="siteMessage1">
<p class="littleTitle mb32">基础信息</p>
<el-form :model="form" :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.province" multiple :options="options_payword"
placeholder="选择省份">
</GuipSelect>
</div>
<div class="short-width">
<GuipSelect width="100%" v-model="form.city" 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="form.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="form.h_name"
prop="h_name" placeholder="请输入" />
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="所在科室" :required="true">
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.depart_name"
prop="depart_name" 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="Boolean(form.is_fixed)" @change="onSwitchChange" activeText="非医保定点"
inactiveText="非医保定点">
</GuipSwitch>
</div>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="使用功能">
<el-checkbox-group slot="formDom" v-model="form.type" @change="validateSelection" class="checkboxGroup">
<div class="flex">
<el-checkbox :label="2" >医生名片基础功能不可取消</el-checkbox>
<el-checkbox :label="0">患者预约</el-checkbox>
</div>
<el-checkbox :label="1">项目计数</el-checkbox>
</el-checkbox-group>
</GuipFormItem>
<GuipFormItem column="column" class="" label="就诊提醒">
<div slot="formRight" class="desc">就诊前的注意事项非必填</div>
<GuipTextarea slot="formDom" v-model="form.notice" prop="notice" width="100%"
height="84px" autosize placeholder="输入" />
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" />
</div>
<div class="siteMessage flex-common mt12" id="siteMessage2">
<p class="littleTitle mb32">出诊时间</p>
<el-form :model="form" :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="form.morning_worktime"
range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
@change="ChangeTime('time1')" format="HH:mm"
value-format="HH:mm">
</el-time-picker>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="工作时间( 下午 )" :required="true">
<el-time-picker slot="formDom" style="width:100%" is-range v-model="form.afternoon_worktime"
range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
@change="ChangeTime('time1')" format="HH:mm"
value-format="HH:mm">
</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="day in weekDays" :key="day.id" v-model="form.worktimes[day.id].plan"
:options="options_weekPlan" @change="weekChange()" :label="day.name" placeholder="休息">
</GuipSelect>
</div>
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
</div>
<div class="siteMessage flex-common mt12" id="siteMessage3">
<p class="littleTitle mb32">放号设置</p>
<el-form :model="form" :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:309:30-10:00来划分</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.time_unit"
prop="time_unit" 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="form.time_unit_num"
prop="time_unit_num" 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="form.visit_day"
prop="visit_day" 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="form.treat_expire"
prop="treat_expire" placeholder="请输入" unit="天" />
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('numSettingForm')" />
</div>
<!-- <p class="pageTitle bold">项目管理</p> -->
<div class="siteMessage flex-common mt12" 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' : '']" @click="selectTag(item)"
v-for="item in projectTagData" :key="item.name">{{ item.name }}</div>
</div>
<div class="right flex">
<span style="margin-right: 16px;">搜索项目</span>
<GuipInput ref="GuipInput" column="column" width="280px" 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="selectAll1"
:indeterminate="isIndeterminate1">全选</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>
<GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="true" width="762"
type="center" :show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel"
@close="handleClose" @dialogVisibleChange="dialogVisibleChange">
<!-- <BatchProject v-if="dialogType == '1'" :projectTagData="projectTagData" @getproTag="getProTagData" /> -->
</GuipDialog>
<GuipDialog :dialogVisible="dialogVisible1" :title="'新增项目分组'" :show-close-button="true" width="599px"
type="center" :show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel"
@close="handleClose" confirmText="确定新增" @dialogVisibleChange="dialogVisibleChange">
<el-form :model="form1" @submit.native.prevent ref="projectNameForm">
<GuipFormItem column="column" class="" label="分组名称">
<GuipInput slot="formDom" ref="GuipInput" v-model="form1.projectName" :rules="nameRules"
prop="projectName" placeholder="请填写新增分组名称" />
</GuipFormItem>
</el-form>
</GuipDialog>
</div>
</template>
<script>
import GuipFormItem from '@/components/GuipFormItem.vue';
import BatchProject from '@/components/BatchProject.vue';
import store from '@/store';
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 GuipDialog from '@/components/GuipDialog.vue';
// import GuipRadio from '@/components/GuipRadio.vue';
// import HoverButton from '@/components/HoverButton.vue';
import { mapState } from 'vuex';
export default {
//
name: '',
props: [''],
components: {
GuipFormItem,
BatchProject,
GuipButton,
GuipDialog,
// GuipRadio,
GuipInput,
GuipTable,
GuipSwitch,
GuipSelect,
GuipTextarea,
GroupFormBtns,
// HoverButton
},
data() {
return {
doctorId: '',
dialogType: '1',
dialogVisible: false,
dialogVisible1: false,
form1: {
projectName: ''
},
nameRules: [{ required: true, message: '分组名称不得为空', trigger: 'blur' }],
dialogTitle: '批量录入项目',
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'
},
{
name: '针灸1',
id: '21'
},
{
name: '针灸2',
id: '211'
},
{
name: '针灸3',
id: '212'
},
{
name: '针灸4',
id: '213'
},
],
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: {
'周一': '',
'周二': '',
'周三': '',
'周四': '',
'周五': '',
'周六': '',
'周日': '',
},
weekDays: [
{ id: 1, name: '周一' },
{ id: 2, name: '周二' },
{ id: 3, name: '周三' },
{ id: 4, name: '周四' },
{ id: 5, name: '周五' },
{ id: 6, name: '周六' },
{ id: 7, name: '周日' }
],
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: '0',
label: '休息'
},],
siteForm: {
company_name: '',
company_address: '',
company_phone: '',
site_alias: '',
},
oldForm: {
description: '',
detailDesc: '',
tags: ''
},
form: {
province: '',
city: '',
depart_name: '',
address:"万柏林区 晋祠路一段56号凯旋门小区2幢4005",
afternoon_worktime:"14:00-22:00",
depart_id:"1",
h_name:"武丽娜中医针灸",
h_pos:"37.850249,112.53111",
hid:"1",
is_fixed:"1",
morning_worktime:"8:00-11:00",
notice:"周六上午门诊最后一轮扎针到10点50分,11点后到患者的,只开药,不扎针。\r\n初诊患者请先将挂号条交给医助、在门外静坐等待叫号\r\n为了节约大家排号时间,请全部挂号,按挂号顺序治疗\r\n针灸治疗单缴费完毕后请交还医助\r\n药费缴费完毕后交方给药房等待拿药(可办理快递)\r\n请准备一次性医用床单(可现场购买)和户外保温毯(推荐),户外保温毯购买链接:<a href=\"https://m.tb.cn/h.UJglv3C?tk=5KMnd9XFr3D\" target=\"_blank\">https://m.tb.cn/h.UJglv3C?tk=5KMnd9XFr3D</a>",
time_unit:"15",
time_unit_num:"10",
treat_expire:"365",
visit_day:"7"
},
siteFormrules: {
depart_name: [
{ required: true, message: '请输入科室信息', trigger: 'blur' }
],
h_name: [
{ required: true, message: '请输入出诊医院信息', trigger: 'blur' }
],
},
siteForm1: {
domain_set: '',
domain_source: '平台免费域名',
},
siteForm2: {
isApprove: '',
phone: ''
},
siteFormrules1: {
domain_source: [
{ required: true, message: '请输入站点简称', trigger: 'blur' }
]
},
}
},
created(){
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU','hosMenuData');
},
mounted() {
const { depart_id, doctor_id } = this.$route.query; // doctorId
if (doctor_id && depart_id) {
//
this.depart_id = depart_id;
this.doctor_id = doctor_id;
// this.fetchDoctorData()
}
},
computed: {
selectedCount() {
return this.selectedRows.length;
},
...mapState(['hosMenuData']) // VuexshowSidebar
},
methods: {
fetchDoctorData() {
this.$http('POST', '/api/admin/get_depart_info', {
depart_id: this.depart_id,
doctor_id: this.doctor_id
}).then(response => {
this.form = { ...this.form, ...response.data,
type:response.type ? [Number(response.type)] : [2],
'morning_worktime':response.data.morning_worktime.split('-'),
'afternoon_worktime':response.data.afternoon_worktime.split('-')
}
}).catch(error => {
console.error(error, 'error')
})
},
validateSelection(val) {
//
if (!val.includes(2)) {
this.$nextTick(() => {
this.form.type = [...val, 2];
this.$message.warning('基础功能不可取消');
});
}
},
selectTag(item) {
this.projectSearchId = item.id
},
getProTagData() {
this.$http('POST', '/supernew/ajax_get_type_batch_list', {
}).then(response => {
this.projectTagData = response.data
}).catch(error => {
console.error(error, 'error')
})
},
addNewSetMenu() {
this.$router.push('/addNewTreatment')
},
handleClose() {
this.$Message.info('弹框已关闭');
this.dialogVisible = false;
},
handleSizeChange(val) {
this.pageSize = val
this.getData()
},
handleCurrentChange(val) {
this.currentPage = val
this.getData()
},
//
handleConfirm() {
if (this.dialogVisible1) {
this.$refs['projectNameForm'].validate((valid) => {
if (valid) {
alert('submit!');
this.dialogVisible1 = false;
} else {
console.log('error submit!!');
return false;
}
});
} else if (this.dialogVisible) {
this.$Message.success('点击了确认按钮');
this.dialogVisible = false;
}
},
//
handleCancel() {
this.$Message.warning('点击了取消按钮');
this.dialogVisible = false;
this.dialogVisible1 = false;
},
dialogVisibleChange(data) {
console.log(data, 'data098908090');
},
onSwitchChange1(row) {
row.status = !row.status;
this.$set(this.projectList, row)
},
onSwitchChange2(row) {
row.status = !row.status;
this.$set(this.courseList, row)
},
handleClick1(row) {
console.log(row);
this.$router.push(`/addNewTreatment?id=${row.id}`)
//
},
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(this.form.morning_worktime, 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, '---');
},
updateHosInfo(props){
this.$http('POST', '/api/admin/set_hospital_depart', {
...props
}).then(response => {
if(response.code == 0){
this.$Message.success('更新成功')
}
}).catch(error => {
console.error(error, 'error')
})
},
submitForm(form) {
console.log(this.$refs[form], '-----');
this.$refs[form].validate((valid) => {
console.log(this[form], '======formxinxi');
if (valid) {
alert('提交成功!');
let props = {}
switch(form){
case 'siteForm1':
props={
morning_worktime:form.morning_worktime.join('-'),
afternoon_worktime:form.afternoon_worktime.join('-')
}
break;
case 'siteForm':
props={
is_fixed:this.form.is_fixed,
type:form.type,
notice:form.notice
}
break;
case 'numSettingForm':
props={
time_unit:form.time_unit,
time_unit_num:form.time_unit_num,
visit_day:form.visit_day,
treat_expire:form.treat_expire,
}
break;
}
this.updateHosInfo(props)
} 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);
}
.pageTitle{
// padding: 12px 0;
}
.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;
border: none;
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>

61
src/views/SiteBaseSetting.vue

@ -37,7 +37,17 @@
<div class="flex-right">
<GuipFormItem column="column" label="域名设置" required="true">
<GuipInput slot="formDom" v-model="siteForm1.domain_set" placeholder="仅支持数字、字母">
<span slot="appendshow">.chachongz.com</span>
<span slot="appendshow" style="width: 200px;">
<GuipSelect width="200px" v-model="domainSuffix" placeholder="选择后缀"
:filterable="true" allow-create :options="domainOptions">
<!-- <el-option
v-for="item in domainOptions"
:key="item"
:label="item"
:value="item"
/> -->
</GuipSelect>
</span>
</GuipInput>
</GuipFormItem>
</div>
@ -56,9 +66,9 @@
<img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;"
alt=""><span>微信收款</span>
</div>
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.weixin_pay" :options="options_weixin"
@change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null"
@changeNormal="changeNormalWeixin">
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.weixin_pay"
:options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
:options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
<!-- 自定义触发按钮 -->
<template #trigger>
<span v-if="selectedItemWeixin"
@ -102,9 +112,9 @@
</div>
<!-- <GuipSelect slot="formDom" v-model="siteForm2.zhifubao_pay" prop="zhifubao_pay"
:options="options_zhifubao" placeholder="未绑定支付宝收款" /> -->
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.zhifubao_pay" :options="options_weixin"
@change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null"
@changeNormal="changeNormalWeixin">
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.zhifubao_pay"
:options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
:options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
<!-- 自定义触发按钮 -->
<template #trigger>
<span v-if="selectedItemWeixin"
@ -166,6 +176,7 @@ import GuipRadio from '@/components/GuipRadio.vue';
import CustomDropdown from '@/components/CustomDropdown.vue';
import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipSelect from '@/components/GuipSelect.vue';
// import {setHighActive} from '@/utils/common';
export default {
//
@ -177,11 +188,28 @@ export default {
GuipInput,
CustomDropdown,
GuipButton,
GroupFormBtns
GroupFormBtns,
GuipSelect
},
data() {
return {
domainInput: '',
domainSuffix: '.chachongz.com',
domainOptions: [
{
value: '1',
label: '.chachongz.com'
},
{
value: '2',
label: '.turnitin.org.cn'
},
{
value: '3',
label: '.jishu.chachongz.com'
},
],
siteForm: {
company_name: '',
company_address: '',
@ -222,7 +250,11 @@ export default {
}
},
computed: {
...mapState(['pageTitle']) // VuexshowSidebar
...mapState(['pageTitle','siteSettingData']) // VuexshowSidebar
},
created(){
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU','siteSettingData');
},
mounted() {
store.commit('SET_PAGETITLE', '基本设置');
@ -268,11 +300,12 @@ export default {
}
</script>
<style lang="scss">
.siteMessage{
.siteMessage {
border-radius: 4px;
transition: all .5s;
border: 1px solid transparent;
}
.addStore {
margin-top: 12px;
// border-radius: 4px;
@ -289,12 +322,16 @@ export default {
}
.site-setting-wrap{
.site-setting-wrap {
width: 100%;
padding: 12px ;
box-sizing: border-box;
}
#siteMessage2{
#siteMessage2 {
margin: 12px 0;
}
.domain-wrap {
.domain-item {
margin-bottom: 10px;

4
src/views/SitePersonalization.vue

@ -300,6 +300,10 @@ export default {
computed: {
...mapState(['pageTitle']) // VuexshowSidebar
},
created(){
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU','siteSettingData');
},
mounted() {
store.commit('SET_PAGETITLE', '个性化设置');
},

2
src/views/agent/siteList.vue

@ -142,7 +142,7 @@ export default {
// url
serviceListUrl: '/ui',
// url
siteSettingUrl: '/siteSetting/siteBaseSetting',
siteSettingUrl: '/siteBaseSetting',
// url
addNewSiteUrl: '/ui',
popoverFlag:false,

Loading…
Cancel
Save