zq
1 month ago
13 changed files with 1884 additions and 451 deletions
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
@ -1,26 +1,77 @@ |
|||||
<template> |
<template> |
||||
|
<el-form-item :label="label" :prop="prop" :rules="rules"> |
||||
<el-input |
<el-input |
||||
type="textarea" |
type="textarea" |
||||
v-bind="$attrs" |
v-bind="$attrs" |
||||
:style="{...styleObject}" |
v-model="innerValue" |
||||
|
:style="{ width: width, height: height }" |
||||
:rows="rows" |
:rows="rows" |
||||
:placeholder="placeholder" |
@input="handleInput" |
||||
v-model="textarea"> |
@change="handleChange" |
||||
</el-input> |
></el-input> |
||||
|
</el-form-item> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
// autosize 自适应高度 |
|
||||
export default { |
export default { |
||||
name: 'GuipTextarea', |
name: 'MyTextarea', |
||||
props:['styleObject','rows','placeholder'], |
inheritAttrs: false, |
||||
|
props: { |
||||
|
// v-model 绑定的值 |
||||
|
value: { |
||||
|
type: [String, Number], |
||||
|
default: '' |
||||
|
}, |
||||
|
// 宽度，可以是 '100px' 或 '100%' 等形式 |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
// 高度，可以是 '100px' 或 '100%' 等形式 |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: 'auto' |
||||
|
}, |
||||
|
// 默认行数 |
||||
|
rows: { |
||||
|
type: Number, |
||||
|
default: 4 |
||||
|
}, |
||||
|
// 表单标签 |
||||
|
label: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 表单校验的 prop |
||||
|
prop: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 表单校验规则 |
||||
|
rules: { |
||||
|
type: [Object, Array], |
||||
|
default: () => [] |
||||
|
} |
||||
|
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
textarea: '' |
innerValue: this.value |
||||
} |
} |
||||
}, |
}, |
||||
mounted(){ |
watch: { |
||||
|
value(newVal) { |
||||
|
if (newVal !== this.innerValue) { |
||||
|
this.innerValue = newVal |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleInput(value) { |
||||
|
this.$emit('input', value) |
||||
|
}, |
||||
|
handleChange(value) { |
||||
|
this.$emit('change', value) |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
@ -0,0 +1,268 @@ |
|||||
|
<template> |
||||
|
<div class="site-setting-wrap pagePadding min-flex-right"> |
||||
|
<p class="pageTitle bold">新增套餐</p> |
||||
|
<div class="siteMessage flex-common" id="siteMessage2"> |
||||
|
<p class="littleTitle mb32">套餐信息</p> |
||||
|
<el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1"> |
||||
|
<div class="flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<GuipFormItem column="column" class="mb24" label="套餐名称" :required="true"> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.times" |
||||
|
prop="times" 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="numSettingForm.times" |
||||
|
prop="times" placeholder="输入" unit="元" /> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import store from '../store'; |
||||
|
import { mapState } from 'vuex'; |
||||
|
import GuipFormItem from '@/components/GuipFormItem.vue'; |
||||
|
import GuipInput from '@/components/GuipInput.vue'; |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
props: [''], |
||||
|
components: { |
||||
|
GuipFormItem, |
||||
|
GuipInput, |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
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' } |
||||
|
], |
||||
|
}, |
||||
|
fileList: [ |
||||
|
{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' } |
||||
|
], |
||||
|
options_payword: [{ |
||||
|
value: '选项1', |
||||
|
name:'hhahhaa', |
||||
|
id:'11', |
||||
|
label: '黄金糕' |
||||
|
}, { |
||||
|
value: '选项2', |
||||
|
label: '双皮奶', |
||||
|
name:'hha222hhaa', |
||||
|
id:'1111', |
||||
|
}, { |
||||
|
value: '选项3', |
||||
|
name:'hha333haa', |
||||
|
id:'1331', |
||||
|
label: '蚵仔煎' |
||||
|
}, { |
||||
|
value: '选项4', |
||||
|
label: '龙须面' |
||||
|
}, { |
||||
|
value: '选项5', |
||||
|
label: '北京烤鸭' |
||||
|
}], |
||||
|
siteForm: { |
||||
|
company_name: '', |
||||
|
company_address: '', |
||||
|
company_phone: '', |
||||
|
site_alias: '', |
||||
|
}, |
||||
|
form: { |
||||
|
description: '', |
||||
|
detailDesc: '', |
||||
|
tags:'1331' |
||||
|
}, |
||||
|
siteFormrules: { |
||||
|
site_alias: [ |
||||
|
{ required: true, message: '请输入站点简称', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
siteForm1: { |
||||
|
domain_set: '', |
||||
|
domain_source: '平台免费域名', |
||||
|
}, |
||||
|
siteForm2: { |
||||
|
zhifubao_pay: '', |
||||
|
weixin_pay: '', |
||||
|
}, |
||||
|
siteFormrules1: { |
||||
|
domain_source: [ |
||||
|
{ required: true, message: '请输入站点简称', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
domain_source: [ |
||||
|
{ label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" }, |
||||
|
{ label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" }, |
||||
|
], |
||||
|
options_weixin_null: { |
||||
|
label: '暂无收款账号', |
||||
|
value: '暂时没有收款账号，我想稍后配置', |
||||
|
desc: '暂无收款账号，稍后配置' |
||||
|
}, |
||||
|
select_placeholder_weixin: '暂无收款账号，稍后配置', |
||||
|
selectedItemWeixin: {},//微信收款方式 |
||||
|
options_weixin: [], |
||||
|
options_zhifubao: [], |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
||||
|
}, |
||||
|
mounted() { |
||||
|
store.commit('SET_PAGETITLE', '基本设置'); |
||||
|
}, |
||||
|
methods: { |
||||
|
changeSelect(value){ |
||||
|
console.log(value,'--'); |
||||
|
}, |
||||
|
btnClick() { |
||||
|
}, |
||||
|
handleRemove(file, fileList) { |
||||
|
console.log(file, fileList); |
||||
|
}, |
||||
|
handlePreview(file) { |
||||
|
console.log(file); |
||||
|
}, |
||||
|
// 上传图片 |
||||
|
handleAvatarSuccess(res, file) { |
||||
|
this.imageUrl1 = URL.createObjectURL(file.raw); |
||||
|
}, |
||||
|
beforeAvatarUpload(file) { |
||||
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2; |
||||
|
|
||||
|
if (!isJPG) { |
||||
|
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); |
||||
|
} |
||||
|
if (!isLt2M) { |
||||
|
this.$message.error('上传头像图片大小不能超过 2MB!'); |
||||
|
} |
||||
|
return isJPG && isLt2M; |
||||
|
}, |
||||
|
changeNormalWeixin() { |
||||
|
|
||||
|
}, |
||||
|
changeSelectWeixin(item, flag) { |
||||
|
if (flag) { |
||||
|
this.select_placeholder_weixin = this.options_weixin_null.desc; |
||||
|
return |
||||
|
} |
||||
|
this.selectedItem = { ...item }; |
||||
|
console.log(this.selectedItem, 'this.selectedItem===='); |
||||
|
}, |
||||
|
// 销售渠道 |
||||
|
domain_radioChange(type) { |
||||
|
console.log(type, '--'); |
||||
|
}, |
||||
|
onSwitchChange(data) { |
||||
|
console.log(data, '---'); |
||||
|
}, |
||||
|
submitForm(form) { |
||||
|
console.log(this.$refs[form], '-----'); |
||||
|
this.$refs[form].validate((valid) => { |
||||
|
console.log(this[form], '======formxinxi'); |
||||
|
if (valid) { |
||||
|
alert('提交成功!'); |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
cancelClick() { |
||||
|
console.log('quxiao'); |
||||
|
}, |
||||
|
confirmClick(type) { |
||||
|
console.log(type, '确认'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.siteMessage { |
||||
|
border-radius: 4px; |
||||
|
transition: all .5s; |
||||
|
border: 1px solid transparent; |
||||
|
} |
||||
|
|
||||
|
.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> |
||||
@ -0,0 +1,290 @@ |
|||||
|
<template> |
||||
|
<div class="site-setting-wrap pagePadding min-flex-right"> |
||||
|
<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"> |
||||
|
<div class="qqCode-wrap right"> |
||||
|
<div class="flex">医生照片 |
||||
|
<img class="labelImg" src="@/assets/form_qua_ic.svg" alt=""> |
||||
|
</div> |
||||
|
<el-upload class="avatar-uploader upload-demo" accept=".jpg,.png" |
||||
|
action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" |
||||
|
:on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess" |
||||
|
:before-upload="beforeAvatarUpload"> |
||||
|
<hover-button button-text="重新上传" :default-icon="require('../assets/upLoad_grey.svg')" |
||||
|
:hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B" |
||||
|
hover-text-color="#006AFF" @click="btnClick" /> |
||||
|
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
<GuipInput ref="GuipInput" column="column" label="医生姓名" v-model="siteForm.company_name" |
||||
|
prop="company_name" placeholder="请输入" /> |
||||
|
</div> |
||||
|
<div class="flex-line"></div> |
||||
|
<div class="flex-right"> |
||||
|
<GuipInput ref="GuipInput" column="column" label="身份证号码" v-model="siteForm.company_address" |
||||
|
prop="company_address" placeholder="请输入" /> |
||||
|
<GuipInput ref="GuipInput" column="column" label="手机号码" v-model="siteForm.phone" |
||||
|
prop="company_phone" placeholder="常用手机号" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" /> |
||||
|
|
||||
|
</div> |
||||
|
<div class="siteMessage flex-common" id="siteMessage2"> |
||||
|
<h3>个人介绍</h3> |
||||
|
<el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1"> |
||||
|
<div class="flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<GuipFormItem column="column" class="" label="一句话介绍"> |
||||
|
<GuipTextarea slot="formDom" v-model="form.description" prop="description" width="100%" |
||||
|
height="56px" placeholder="请输入描述内容" maxlength="14" show-word-limit /> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="" label="详细介绍"> |
||||
|
<GuipTextarea slot="formDom" v-model="form.detailDesc" prop="description" width="100%" |
||||
|
height="86px" autosize placeholder="请输入描述内容" maxlength="不限" show-word-limit /> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
<div class="flex-line"></div> |
||||
|
<div class="flex-right"> |
||||
|
<GuipFormItem column="column" label="个人标签"> |
||||
|
<div slot="formLeft" class="form-top-icon"> </div> |
||||
|
<span slot="formRight" class="desc">展示给患者，体现您的专业性</span> |
||||
|
<GuipSelect slot="formDom" v-model="form.tags" multiple :options="options_payword" |
||||
|
placeholder="点击选择"> |
||||
|
</GuipSelect> |
||||
|
|
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import store from '../store'; |
||||
|
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 GuipSelect from '@/components/GuipSelect.vue'; |
||||
|
// import {setHighActive} from '@/utils/common'; |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
props: [''], |
||||
|
components: { |
||||
|
GuipFormItem, |
||||
|
HoverButton, |
||||
|
GuipInput, |
||||
|
GuipSelect, |
||||
|
GuipTextarea, |
||||
|
GroupFormBtns |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
fileList: [ |
||||
|
{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' } |
||||
|
], |
||||
|
options_payword: [{ |
||||
|
value: '选项1', |
||||
|
label: '黄金糕' |
||||
|
}, { |
||||
|
value: '选项2', |
||||
|
label: '双皮奶' |
||||
|
}, { |
||||
|
value: '选项3', |
||||
|
label: '蚵仔煎' |
||||
|
}, { |
||||
|
value: '选项4', |
||||
|
label: '龙须面' |
||||
|
}, { |
||||
|
value: '选项5', |
||||
|
label: '北京烤鸭' |
||||
|
}], |
||||
|
siteForm: { |
||||
|
company_name: '', |
||||
|
company_address: '', |
||||
|
company_phone: '', |
||||
|
site_alias: '', |
||||
|
}, |
||||
|
form: { |
||||
|
description: '', |
||||
|
detailDesc: '', |
||||
|
tags:'' |
||||
|
}, |
||||
|
siteFormrules: { |
||||
|
site_alias: [ |
||||
|
{ required: true, message: '请输入站点简称', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
siteForm1: { |
||||
|
domain_set: '', |
||||
|
domain_source: '平台免费域名', |
||||
|
}, |
||||
|
siteForm2: { |
||||
|
zhifubao_pay: '', |
||||
|
weixin_pay: '', |
||||
|
}, |
||||
|
siteFormrules1: { |
||||
|
domain_source: [ |
||||
|
{ required: true, message: '请输入站点简称', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
domain_source: [ |
||||
|
{ label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" }, |
||||
|
{ label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" }, |
||||
|
], |
||||
|
options_weixin_null: { |
||||
|
label: '暂无收款账号', |
||||
|
value: '暂时没有收款账号，我想稍后配置', |
||||
|
desc: '暂无收款账号，稍后配置' |
||||
|
}, |
||||
|
select_placeholder_weixin: '暂无收款账号，稍后配置', |
||||
|
selectedItemWeixin: {},//微信收款方式 |
||||
|
options_weixin: [], |
||||
|
options_zhifubao: [], |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
||||
|
}, |
||||
|
mounted() { |
||||
|
store.commit('SET_PAGETITLE', '基本设置'); |
||||
|
}, |
||||
|
methods: { |
||||
|
btnClick() { |
||||
|
}, |
||||
|
handleRemove(file, fileList) { |
||||
|
console.log(file, fileList); |
||||
|
}, |
||||
|
handlePreview(file) { |
||||
|
console.log(file); |
||||
|
}, |
||||
|
// 上传图片 |
||||
|
handleAvatarSuccess(res, file) { |
||||
|
this.imageUrl1 = URL.createObjectURL(file.raw); |
||||
|
}, |
||||
|
beforeAvatarUpload(file) { |
||||
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2; |
||||
|
|
||||
|
if (!isJPG) { |
||||
|
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); |
||||
|
} |
||||
|
if (!isLt2M) { |
||||
|
this.$message.error('上传头像图片大小不能超过 2MB!'); |
||||
|
} |
||||
|
return isJPG && isLt2M; |
||||
|
}, |
||||
|
changeNormalWeixin() { |
||||
|
|
||||
|
}, |
||||
|
changeSelectWeixin(item, flag) { |
||||
|
if (flag) { |
||||
|
this.select_placeholder_weixin = this.options_weixin_null.desc; |
||||
|
return |
||||
|
} |
||||
|
this.selectedItem = { ...item }; |
||||
|
console.log(this.selectedItem, 'this.selectedItem===='); |
||||
|
}, |
||||
|
// 销售渠道 |
||||
|
domain_radioChange(type) { |
||||
|
console.log(type, '--'); |
||||
|
}, |
||||
|
onSwitchChange(data) { |
||||
|
console.log(data, '---'); |
||||
|
}, |
||||
|
submitForm(form) { |
||||
|
console.log(this.$refs[form], '-----'); |
||||
|
this.$refs[form].validate((valid) => { |
||||
|
console.log(this[form], '======formxinxi'); |
||||
|
if (valid) { |
||||
|
alert('提交成功!'); |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
cancelClick() { |
||||
|
console.log('quxiao'); |
||||
|
}, |
||||
|
confirmClick(type) { |
||||
|
console.log(type, '确认'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.siteMessage { |
||||
|
border-radius: 4px; |
||||
|
transition: all .5s; |
||||
|
border: 1px solid transparent; |
||||
|
} |
||||
|
|
||||
|
.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> |
||||
@ -0,0 +1,768 @@ |
|||||
|
<template> |
||||
|
<div class="site-setting-wrap pagePadding min-flex-right"> |
||||
|
<p class="pageTitle bold">基础信息</p> |
||||
|
<div class="siteMessage flex-common" id="siteMessage1"> |
||||
|
<p class="littleTitle mb32">基础信息</p> |
||||
|
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm"> |
||||
|
<div class="flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<GuipFormItem column="column" class="mb24" label="出诊医院省市" :required="true"> |
||||
|
<div class="flex-between" slot="formDom"> |
||||
|
<div class="short-width"> |
||||
|
<GuipSelect width="100%" v-model="form.tags" multiple :options="options_payword" |
||||
|
placeholder="选择省份"> |
||||
|
</GuipSelect> |
||||
|
</div> |
||||
|
<div class="short-width"> |
||||
|
<GuipSelect width="100%" v-model="form.tags" multiple :options="options_payword" |
||||
|
placeholder="选择城市"> |
||||
|
</GuipSelect> |
||||
|
</div> |
||||
|
</div> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="出诊医院名称" :required="true"> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.company_name" |
||||
|
prop="company_name" placeholder="请输入"> |
||||
|
<img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" /> |
||||
|
</GuipInput> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="医院简称"> |
||||
|
<span slot="formRight" class="desc">方便患者记忆，非必填</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.company_address" |
||||
|
prop="company_address" placeholder="请输入" /> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="所在科室" :required="true"> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="siteForm.company_address" |
||||
|
prop="company_address" placeholder="请输入" /> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
<div class="flex-line"></div> |
||||
|
<div class="flex-right"> |
||||
|
<GuipFormItem column="column" class="mb24"> |
||||
|
<div slot="formLeft" class="form-top-icon">医保定点</div> |
||||
|
<div class="flex" slot="formDom" style="padding: 9px 0px;"> |
||||
|
<GuipSwitch :modelValue="yibao" @change="onSwitchChange" activeText="非医保定点" |
||||
|
inactiveText="非医保定点"> |
||||
|
</GuipSwitch> |
||||
|
</div> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="使用功能"> |
||||
|
<el-checkbox-group slot="formDom" v-model="checkList" class="checkboxGroup"> |
||||
|
<div class="flex"> |
||||
|
<el-checkbox label="医生名片（基础功能不可取消）"></el-checkbox> |
||||
|
<el-checkbox label="患者预约"></el-checkbox> |
||||
|
</div> |
||||
|
<el-checkbox label="项目计数"></el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="" label="就诊提醒"> |
||||
|
<div slot="formRight" class="desc">就诊前的注意事项，非必填</div> |
||||
|
<GuipTextarea slot="formDom" v-model="form.detailDesc" prop="description" width="100%" |
||||
|
height="84px" autosize placeholder="输入" /> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" /> |
||||
|
</div> |
||||
|
<div class="siteMessage flex-common" id="siteMessage2"> |
||||
|
<p class="littleTitle mb32">出诊时间</p> |
||||
|
<el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1"> |
||||
|
<div class="flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<GuipFormItem column="column" class="mb24" label="工作时间（ 上午 ）" :required="true"> |
||||
|
<el-time-picker slot="formDom" style="width:100%" is-range v-model="time1" |
||||
|
range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" |
||||
|
@change="ChangeTime('time1')"> |
||||
|
</el-time-picker> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="工作时间（ 下午 ）" :required="true"> |
||||
|
<el-time-picker slot="formDom" style="width:100%" is-range v-model="time2" |
||||
|
range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" |
||||
|
@change="ChangeTime('time1')"> |
||||
|
</el-time-picker> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
<div class="flex-line"></div> |
||||
|
<div class="flex-right"> |
||||
|
<GuipFormItem column="column" label="每周出诊安排" :required="true"> |
||||
|
<div class="flex weekPlan" slot="formDom"> |
||||
|
<GuipSelect v-for="[key] in Object.entries(weekPlan)" :key="key" v-model="weekPlan[key]" |
||||
|
:options="options_weekPlan" @change="weekChange()" :label="key" placeholder="休息"> |
||||
|
</GuipSelect> |
||||
|
</div> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" /> |
||||
|
</div> |
||||
|
<div class="siteMessage flex-common" id="siteMessage3"> |
||||
|
<p class="littleTitle mb32">放号设置</p> |
||||
|
<el-form :model="numSettingForm" :rules="numSettingFormRule" ref="numSettingForm"> |
||||
|
<div class="flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<GuipFormItem column="column" class="mb24" label="号源单位时段" :required="true"> |
||||
|
<span class="desc" slot="formRight">如30分钟，放号时9:00-9:30；9:30-10:00来划分</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.times" |
||||
|
prop="times" placeholder="请输入" unit="分钟/时段" /> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="放号量" :required="true"> |
||||
|
<span class="desc" slot="formRight">放号量可少于实际数量，以便为现场约号患者预留</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.nums" |
||||
|
prop="nums" placeholder="请输入" unit="个号/时段" /> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
<div class="flex-line"></div> |
||||
|
<div class="flex-right"> |
||||
|
<GuipFormItem column="column" class="mb24" label="开放预约" :required="true"> |
||||
|
<span class="desc" slot="formRight">患者可提前多久约号</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.hours" |
||||
|
prop="hours" placeholder="请输入" unit="小时"> |
||||
|
<span slot="prependshow">提前</span> |
||||
|
</GuipInput> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="超时未就诊提醒"> |
||||
|
<span class="desc" slot="formRight">不输入即无期限</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.days" |
||||
|
prop="days" placeholder="请输入" unit="天" /> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('numSettingForm')" /> |
||||
|
</div> |
||||
|
<p class="pageTitle bold">项目管理</p> |
||||
|
<div class="siteMessage flex-common" id="siteMessage4"> |
||||
|
<el-form> |
||||
|
|
||||
|
<div class=" mb32 flex-between"> |
||||
|
<span class="littleTitle">项目列表</span> |
||||
|
<div class="flex-between" style="gap:10px"> |
||||
|
<GuipButton size="table" type="ignore">新增分组</GuipButton> |
||||
|
<GuipButton size="table" type="primary">新增项目</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="selectAllTable-wrap flex-between mt32"> |
||||
|
<div class="left flex"> |
||||
|
<div class="checkboxAll"> |
||||
|
<el-checkbox @change="handleSelectAllChange" v-model="selectAll" |
||||
|
:indeterminate="isIndeterminate">全选</el-checkbox> |
||||
|
</div> |
||||
|
<span class="totalCount">共{{ projectList.length }}条，已选{{ selectedCount }}条</span> |
||||
|
<GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }" |
||||
|
@click="batchOperate('1')">批量禁用</GuipButton> |
||||
|
<GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }" |
||||
|
@click="batchOperate('2')"> |
||||
|
批量启用</GuipButton> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="flex-between mb32 mt32"> |
||||
|
<div class="tabProject flex"> |
||||
|
<div :class="['tab-item ', projectSearchId == item.id ? 'active' : '']" |
||||
|
v-for="item in projectTagData" :key="item.name">{{ item.name }}</div> |
||||
|
</div> |
||||
|
<div class="right flex"> |
||||
|
<span>搜索项目</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="projectSearchName" |
||||
|
prop="company_name" placeholder="请输入"> |
||||
|
<img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" /> |
||||
|
</GuipInput> |
||||
|
</div> |
||||
|
</div> |
||||
|
<GuipTable :tableData="projectList" style="width: 100%" ref="multipleTable" |
||||
|
@selection-change="handleSelectionChange" :loading="loading"> |
||||
|
<el-table-column type="selection" label="选择" width="80"></el-table-column> |
||||
|
<el-table-column prop="name" label="项目名称" min-width="225"></el-table-column> |
||||
|
<el-table-column prop="price" label="项目价格" min-width="125"></el-table-column> |
||||
|
<el-table-column prop="group" label="分组" min-width="125"></el-table-column> |
||||
|
<el-table-column prop="time" label="添加时间" min-width="225"></el-table-column> |
||||
|
<el-table-column prop="status" label="状态" min-width="125"> |
||||
|
<template slot-scope="scope"> |
||||
|
<GuipSwitch :modelValue="scope.row.status" @change="onSwitchChange1(scope.row)"> |
||||
|
</GuipSwitch> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" fixed="right" min-width="100px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
<el-button type="text" @click="handleClick(scope.row)">编辑</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</GuipTable> |
||||
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
||||
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
||||
|
:total="projectList.length"> |
||||
|
</el-pagination> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="siteMessage flex-common mt12" id="siteMessage5"> |
||||
|
<el-form> |
||||
|
<div class=" mb32 flex-between"> |
||||
|
<span class="littleTitle">疗程套餐</span> |
||||
|
<div class="flex-between" style="gap:10px"> |
||||
|
<GuipButton size="table" type="primary" @click="addNewSetMenu">新增套餐</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="selectAllTable-wrap flex-between mt32 mb32"> |
||||
|
<div class="left flex"> |
||||
|
<div class="checkboxAll"> |
||||
|
<el-checkbox @change="handleSelectAllChange1" v-model="selectAll" |
||||
|
:indeterminate="isIndeterminate">全选</el-checkbox> |
||||
|
</div> |
||||
|
<span class="totalCount">共{{ courseList.length }}条，已选{{ selectedCount }}条</span> |
||||
|
<GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }" |
||||
|
@click="batchOperate('1')">批量禁用</GuipButton> |
||||
|
<GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }" |
||||
|
@click="batchOperate('2')"> |
||||
|
批量启用</GuipButton> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<GuipTable :tableData="courseList" style="width: 100%" ref="multipleTable1" |
||||
|
@selection-change="handleSelectionChange1" :loading="loading1"> |
||||
|
<el-table-column type="selection" label="选择" width="80"></el-table-column> |
||||
|
<el-table-column prop="name" label="项目名称" min-width="225"></el-table-column> |
||||
|
<el-table-column prop="price" label="项目价格" min-width="125"></el-table-column> |
||||
|
<el-table-column prop="group" label="分组" min-width="125"></el-table-column> |
||||
|
<el-table-column prop="time" label="添加时间" min-width="225"></el-table-column> |
||||
|
<el-table-column prop="status" label="状态" min-width="125"> |
||||
|
<template slot-scope="scope"> |
||||
|
<GuipSwitch :modelValue="scope.row.status" @change="onSwitchChange2(scope.row)"> |
||||
|
</GuipSwitch> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" fixed="right" min-width="100px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
<el-button type="text" @click="handleClick(scope.row)">编辑</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</GuipTable> |
||||
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
||||
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
||||
|
:total="courseList.length"> |
||||
|
</el-pagination> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import store from '../store'; |
||||
|
import GuipFormItem from '@/components/GuipFormItem.vue'; |
||||
|
import GuipButton from '@/components/GuipButton.vue'; |
||||
|
import GuipInput from '@/components/GuipInput.vue'; |
||||
|
import GuipTextarea from '@/components/GuipTextarea.vue'; |
||||
|
import GroupFormBtns from '@/components/GroupFormBtns.vue'; |
||||
|
import GuipSelect from '@/components/GuipSelect.vue'; |
||||
|
import GuipSwitch from '@/components/GuipSwitch.vue'; |
||||
|
import GuipTable from '@/components/GuipTable.vue'; |
||||
|
// import {setHighActive} from '@/utils/common'; |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
props: [''], |
||||
|
|
||||
|
components: { |
||||
|
GuipFormItem, |
||||
|
GuipButton, |
||||
|
GuipInput, |
||||
|
GuipTable, |
||||
|
GuipSwitch, |
||||
|
GuipSelect, |
||||
|
GuipTextarea, |
||||
|
GroupFormBtns |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currentPage:1, |
||||
|
pageSize:10, |
||||
|
currentPage1:1, |
||||
|
pageSize1:10, |
||||
|
loading: false, |
||||
|
loading1: false, |
||||
|
selectedRows: [],//已选中数据 |
||||
|
selectedRows1: [],//已选中数据 |
||||
|
isIndeterminate: false, |
||||
|
isIndeterminate1: false, |
||||
|
projectSearchId: '', |
||||
|
projectSearchName: '', |
||||
|
projectList: [ |
||||
|
{ |
||||
|
name: '针灸', |
||||
|
price: '88', |
||||
|
group: '针灸1', |
||||
|
time: '2077 - 12 - 20', |
||||
|
status: true, |
||||
|
id: '1' |
||||
|
}, |
||||
|
{ |
||||
|
name: '拔罐', |
||||
|
price: '188', |
||||
|
group: '针灸2', |
||||
|
time: '2077 - 12 - 20', |
||||
|
status: true, |
||||
|
id: '2' |
||||
|
}, |
||||
|
{ |
||||
|
name: '火刺', |
||||
|
price: '55', |
||||
|
group: '针灸1', |
||||
|
time: '2077 - 12 - 20', |
||||
|
status: true, |
||||
|
id: '3' |
||||
|
}, |
||||
|
], |
||||
|
projectTagData: [ |
||||
|
{ |
||||
|
name: '全部分类', |
||||
|
id: '0' |
||||
|
}, |
||||
|
{ |
||||
|
name: '针灸1', |
||||
|
id: '1' |
||||
|
}, |
||||
|
{ |
||||
|
name: '针灸2', |
||||
|
id: '11' |
||||
|
}, |
||||
|
{ |
||||
|
name: '针灸3', |
||||
|
id: '12' |
||||
|
}, |
||||
|
{ |
||||
|
name: '针灸4', |
||||
|
id: '13' |
||||
|
}, |
||||
|
], |
||||
|
courseList: [ |
||||
|
{ |
||||
|
name: '针灸', |
||||
|
price: '88', |
||||
|
group: '针灸1', |
||||
|
time: '2077 - 12 - 20', |
||||
|
status: true, |
||||
|
id: '1' |
||||
|
}, |
||||
|
{ |
||||
|
name: '拔罐', |
||||
|
price: '188', |
||||
|
group: '针灸2', |
||||
|
time: '2077 - 12 - 20', |
||||
|
status: true, |
||||
|
id: '2' |
||||
|
}, |
||||
|
{ |
||||
|
name: '火刺', |
||||
|
price: '55', |
||||
|
group: '针灸1', |
||||
|
time: '2077 - 12 - 20', |
||||
|
status: true, |
||||
|
id: '3' |
||||
|
}, |
||||
|
], |
||||
|
selectAll: false, |
||||
|
selectAll1: false, |
||||
|
numSettingForm: { |
||||
|
times: '', |
||||
|
hours: '', |
||||
|
nums: '', |
||||
|
days: '' |
||||
|
}, |
||||
|
numSettingFormRule: { |
||||
|
times: [ |
||||
|
{ required: true, message: '请输入', trigger: 'blur' } |
||||
|
], |
||||
|
hours: [ |
||||
|
{ required: true, message: '请输入', trigger: 'blur' } |
||||
|
], |
||||
|
nums: [ |
||||
|
{ required: true, message: '请输入', trigger: 'blur' } |
||||
|
], |
||||
|
days: [ |
||||
|
{ required: true, message: '请输入', trigger: 'blur' } |
||||
|
], |
||||
|
}, |
||||
|
options_payword: [{ |
||||
|
value: '选项1', |
||||
|
label: '黄金糕' |
||||
|
}, { |
||||
|
value: '选项2', |
||||
|
label: '双皮奶' |
||||
|
}, { |
||||
|
value: '选项3', |
||||
|
label: '蚵仔煎' |
||||
|
}, { |
||||
|
value: '选项4', |
||||
|
label: '龙须面' |
||||
|
}, { |
||||
|
value: '选项5', |
||||
|
label: '北京烤鸭' |
||||
|
}], |
||||
|
weekPlan: { |
||||
|
'周一': '', |
||||
|
'周二': '', |
||||
|
'周三': '', |
||||
|
'周四': '', |
||||
|
'周五': '', |
||||
|
'周六': '', |
||||
|
'周日': '', |
||||
|
}, |
||||
|
time1: '', |
||||
|
time2: '', |
||||
|
checkList: ['医生名片（基础功能不可取消）'], |
||||
|
fileList: [ |
||||
|
{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' } |
||||
|
], |
||||
|
yibao: '', |
||||
|
options_weekPlan: [{ |
||||
|
value: '1', |
||||
|
label: '上午班' |
||||
|
}, { |
||||
|
value: '2', |
||||
|
label: '下午班' |
||||
|
}, { |
||||
|
value: '3', |
||||
|
label: '全天' |
||||
|
}, { |
||||
|
value: '4', |
||||
|
label: '休息' |
||||
|
},], |
||||
|
siteForm: { |
||||
|
company_name: '', |
||||
|
company_address: '', |
||||
|
company_phone: '', |
||||
|
site_alias: '', |
||||
|
}, |
||||
|
form: { |
||||
|
description: '', |
||||
|
detailDesc: '', |
||||
|
tags: '' |
||||
|
}, |
||||
|
siteFormrules: { |
||||
|
site_alias: [ |
||||
|
{ required: true, message: '请输入站点简称', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
siteForm1: { |
||||
|
domain_set: '', |
||||
|
domain_source: '平台免费域名', |
||||
|
}, |
||||
|
siteForm2: { |
||||
|
zhifubao_pay: '', |
||||
|
weixin_pay: '', |
||||
|
}, |
||||
|
siteFormrules1: { |
||||
|
domain_source: [ |
||||
|
{ required: true, message: '请输入站点简称', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
domain_source: [ |
||||
|
{ label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" }, |
||||
|
{ label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" }, |
||||
|
], |
||||
|
options_weixin_null: { |
||||
|
label: '暂无收款账号', |
||||
|
value: '暂时没有收款账号，我想稍后配置', |
||||
|
desc: '暂无收款账号，稍后配置' |
||||
|
}, |
||||
|
select_placeholder_weixin: '暂无收款账号，稍后配置', |
||||
|
selectedItemWeixin: {},//微信收款方式 |
||||
|
options_weixin: [], |
||||
|
options_zhifubao: [], |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
selectedCount() { |
||||
|
return this.selectedRows.length; |
||||
|
} // 从Vuex映射showSidebar状态到组件的计算属性中 |
||||
|
}, |
||||
|
mounted() { |
||||
|
store.commit('SET_PAGETITLE', '基本设置'); |
||||
|
}, |
||||
|
methods: { |
||||
|
onSwitchChange1(row) { |
||||
|
row.status = !row.status; |
||||
|
this.$set(this.projectList, row) |
||||
|
}, |
||||
|
onSwitchChange2(row) { |
||||
|
row.status = !row.status; |
||||
|
this.$set(this.courseList, row) |
||||
|
}, |
||||
|
handleClick(row) { |
||||
|
console.log(row); |
||||
|
// 跳转编辑页面 |
||||
|
}, |
||||
|
// 处理全选按钮变化 |
||||
|
handleSelectAllChange(val) { |
||||
|
console.log(this.$refs.multipleTable,'multipleTable-'); |
||||
|
if (val) { |
||||
|
// 只选中未选中的行 |
||||
|
const unselectedRows = this.projectList.filter( |
||||
|
row => !this.selectedRows.includes(row) |
||||
|
); |
||||
|
unselectedRows.forEach(row => { |
||||
|
this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, true); |
||||
|
}); |
||||
|
} else { |
||||
|
// 只取消已选中的行 |
||||
|
this.selectedRows.forEach(row => { |
||||
|
this.$refs.multipleTable.$refs.guiptable.toggleRowSelection(row, false); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 处理选择变化 |
||||
|
handleSelectionChange(rows) { |
||||
|
this.selectedRows = rows; |
||||
|
|
||||
|
// 更新全选按钮状态 |
||||
|
const allSelected = rows.length === this.projectList.length; |
||||
|
const noneSelected = rows.length === 0; |
||||
|
|
||||
|
this.selectAll = allSelected; |
||||
|
this.isIndeterminate = !noneSelected && !allSelected; |
||||
|
}, |
||||
|
handleSelectAllChange1(val) { |
||||
|
console.log(this.$refs.multipleTable,'multipleTable-'); |
||||
|
if (val) { |
||||
|
// 只选中未选中的行 |
||||
|
const unselectedRows = this.courseList.filter( |
||||
|
row => !this.selectedRows1.includes(row) |
||||
|
); |
||||
|
unselectedRows.forEach(row => { |
||||
|
this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, true); |
||||
|
}); |
||||
|
} else { |
||||
|
// 只取消已选中的行 |
||||
|
this.selectedRows.forEach(row => { |
||||
|
this.$refs.multipleTable1.$refs.guiptable.toggleRowSelection(row, false); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 处理选择变化 |
||||
|
handleSelectionChange1(rows) { |
||||
|
this.selectedRows = rows; |
||||
|
// 更新全选按钮状态 |
||||
|
const allSelected = rows.length === this.courseList.length; |
||||
|
const noneSelected = rows.length === 0; |
||||
|
|
||||
|
this.selectAll1 = allSelected; |
||||
|
this.isIndeterminate1 = !noneSelected && !allSelected; |
||||
|
}, |
||||
|
// 批量操作 |
||||
|
batchOperate(type) { |
||||
|
if (type == '1') { |
||||
|
// 禁用 |
||||
|
|
||||
|
} else { |
||||
|
// 启用 |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
ChangeTime(type) { |
||||
|
console.log(type, '==='); |
||||
|
}, |
||||
|
btnClick() { |
||||
|
}, |
||||
|
handleClear(value) { |
||||
|
// this.handleInput('') |
||||
|
console.log(value, 'value===qinghcu'); |
||||
|
}, |
||||
|
handleRemove(file, fileList) { |
||||
|
console.log(file, fileList); |
||||
|
}, |
||||
|
handlePreview(file) { |
||||
|
console.log(file); |
||||
|
}, |
||||
|
// 上传图片 |
||||
|
handleAvatarSuccess(res, file) { |
||||
|
this.imageUrl1 = URL.createObjectURL(file.raw); |
||||
|
}, |
||||
|
beforeAvatarUpload(file) { |
||||
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2; |
||||
|
|
||||
|
if (!isJPG) { |
||||
|
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); |
||||
|
} |
||||
|
if (!isLt2M) { |
||||
|
this.$message.error('上传头像图片大小不能超过 2MB!'); |
||||
|
} |
||||
|
return isJPG && isLt2M; |
||||
|
}, |
||||
|
changeNormalWeixin() { |
||||
|
|
||||
|
}, |
||||
|
changeSelectWeixin(item, flag) { |
||||
|
if (flag) { |
||||
|
this.select_placeholder_weixin = this.options_weixin_null.desc; |
||||
|
return |
||||
|
} |
||||
|
this.selectedItem = { ...item }; |
||||
|
console.log(this.selectedItem, 'this.selectedItem===='); |
||||
|
}, |
||||
|
// 销售渠道 |
||||
|
domain_radioChange(type) { |
||||
|
console.log(type, '--'); |
||||
|
}, |
||||
|
onSwitchChange(data) { |
||||
|
console.log(data, '---'); |
||||
|
}, |
||||
|
submitForm(form) { |
||||
|
console.log(this.$refs[form], '-----'); |
||||
|
this.$refs[form].validate((valid) => { |
||||
|
console.log(this[form], '======formxinxi'); |
||||
|
if (valid) { |
||||
|
alert('提交成功!'); |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
cancelClick() { |
||||
|
console.log('quxiao'); |
||||
|
}, |
||||
|
confirmClick(type) { |
||||
|
console.log(type, '确认'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.weekPlan { |
||||
|
display: grid; |
||||
|
grid-gap: 12px 44px; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.totalCount { |
||||
|
font-size: 12px; |
||||
|
font-weight: normal; |
||||
|
line-height: 13px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #8A9099; |
||||
|
margin-left: 12px; |
||||
|
} |
||||
|
|
||||
|
.tabProject { |
||||
|
gap: 12px; |
||||
|
|
||||
|
.tab-item { |
||||
|
/* 自动布局子元素 */ |
||||
|
height: 28px; |
||||
|
min-width: 74px; |
||||
|
/* 自动布局 */ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
padding: 4px 12px; |
||||
|
gap: 4px; |
||||
|
align-self: stretch; |
||||
|
z-index: 2; |
||||
|
border-radius: 14px; |
||||
|
background: #FFFFFF; |
||||
|
box-sizing: border-box; |
||||
|
/* middle/middle_line_1 */ |
||||
|
border: 1px solid #DFE2E6; |
||||
|
/* body/body 2_regular */ |
||||
|
font-family: Microsoft YaHei UI; |
||||
|
font-size: 14px; |
||||
|
text-align: justify; |
||||
|
/* 浏览器可能不支持 */ |
||||
|
letter-spacing: 0.08em; |
||||
|
/* text/text_4 */ |
||||
|
color: #8A9099; |
||||
|
} |
||||
|
|
||||
|
.active { |
||||
|
color: #006AFF; |
||||
|
background: #F2F3F5; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-form-item { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.siteMessage { |
||||
|
border-radius: 4px; |
||||
|
transition: all .5s; |
||||
|
border: 1px solid transparent; |
||||
|
} |
||||
|
|
||||
|
.checkboxGroup { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
flex-direction: column; |
||||
|
gap: 24px; |
||||
|
height: 72px; |
||||
|
padding: 10px 0; |
||||
|
} |
||||
|
|
||||
|
.addStore { |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
|
||||
|
.qqCode-wrap { |
||||
|
margin-bottom: 14px; |
||||
|
|
||||
|
.labelImg { |
||||
|
opacity: .7; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
|
||||
|
.avatar-uploader { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
justify-content: flex-start; |
||||
|
margin: 12px 0 8px; |
||||
|
} |
||||
|
|
||||
|
.avatar-desc { |
||||
|
text-align: left; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.site-setting-wrap { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
#siteMessage2 { |
||||
|
margin: 12px 0; |
||||
|
} |
||||
|
|
||||
|
.domain-wrap { |
||||
|
.domain-item { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.domain-item p:last-child { |
||||
|
padding-left: 23px; |
||||
|
color: #8A9099; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
text-align: left; |
||||
|
line-height: 18px; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.domain-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue