wangyifang
/
yikangyang-web
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
lion 7 months ago
parent 7646be348d
commit febd50e4ee
3 changed files with 371 additions and 273 deletions
Show Stats Download Patch File Download Diff File

4
.env.development
Unescape View File

@ -2,6 +2,6 @@
ENV='development'
# base api
VUE_APP_BASE_API=https://yikangyang.ali251.langye.net
VUE_APP_UPLOAD_API=https://yikangyang.ali251.langye.net/api/admin/upload-file
VUE_APP_BASE_API=https://yikangyang-test.ali251.langye.net
VUE_APP_UPLOAD_API=https://yikangyangyikangyang-test.ali251.langye.net/api/admin/upload-file
VUE_APP_PREVIEW_API=http://view.ali251.langye.net:8012/onlinePreview

34
src/views/Accompany/Accompany.vue
Unescape View File

@ -45,7 +45,19 @@
<vxe-column align="center" field="can_multi_num" width="120" title="数量显示"
:edit-render="{ name: 'VxeSelect', options: [{ label: '不显示', value: 0 },{ label: '显示', value: 1 }] }" />
<vxe-column
<vxe-column field="accompany_product_site" min-width="180" title="站点产品价格" header-align="center" align="left" :edit-render="{}">
<template #default="{ row }">
<div v-for="(item, index) in row['accompany_product_site']" :key="index">
<div v-for="value in siteType" :key="value.id">
<div v-if="value.id === item.site_id">
{{ value.name }}：{{ item.price }}
</div>
</div>
</div>
</template>
</vxe-column>
<vxe-column
align="center"
field="site_id"
width="160"
@ -68,7 +80,7 @@
<vxe-column field="images_ids" min-width="180" title="产品图集" header-align="center" align="left" :edit-render="{}">
<template #default="{ row }">
<vxe-upload mode='image' :image-config="{width:40,height:40}" v-model="row['images']" name-field="original_name" readonly progress-text="{percent}%"
:more-config="{ maxCount:1,layout: 'horizontal' }" :show-button-text="false" />
:more-config="{maxCount:1,layout: 'horizontal' }" :show-button-text="false" />
</template>
<template #edit="{ row }">
<vxe-upload multiple mode='image' :image-config="{width:40,height:40}" v-model="row['images']" name-field="original_name" progress-text="{percent}%"
@ -218,7 +230,7 @@
page_size: 20,
keyword: '',
type:1,
show_relation: ['cover']
show_relation: ['cover','accompanyProductSite']
},
total: 0,
allAlign: null,
@ -349,8 +361,17 @@
},
editRowEvent(row) {
if (this.$refs['table']) {
this.$refs['table'].setEditRow(row)
// if (this.$refs['table']) {
// this.$refs['table'].setEditRow(row);
// }
this.isShowAdd = true;
if (row && row.id) {
// Editing existing entry
this.$refs.AddAccompany.setType(this.select.type);
this.$refs.AddAccompany.getDetail(row.id);
} else {
// Adding new entry
this.$refs.AddAccompany.resetForm();
}
},
cancelRowEvent(row) {
@ -377,6 +398,7 @@
try {
const res = await index({
...this.select,
filter:[{
key:'type',
op:'eq',
@ -384,7 +406,7 @@
}]
}, false)
res.data.map(item=>{
item.site_id = item.site_id.split(",")
item.site_id = item.site_id?item.site_id.split(",") : []
})
this.tableData = res.data
this.total = res.total

606
src/views/Accompany/components/AddAccompany.vue
Unescape View File

@ -1,305 +1,381 @@
<template>
<div>
<el-drawer :title="$route.meta.title" direction="rtl" size="68%" :visible.sync="visible" append-to-body
:before-close="handleClose" @close="$emit('update:isShow',false)">
<section class="drawer-container">
<el-form ref="elForm" class="drawer-container__form" :model="form" :rules="rules" label-position="top"
label-width="120px" size="small">
<div class="form-layout">
<el-form-item label="产品名称" prop="name">
<el-input v-model="form['name']" clearable placeholder="请填写产品名称" style="width: 100%;" />
</el-form-item>
<el-form-item label="产品定价" prop="price">
<el-input v-model="form['price']" clearable placeholder="请填写产品定价" style="width: 100%;" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-switch v-model="form['status']" :active-value="1" :inactive-value="0" active-text="启用"
inactive-text="禁用" />
</el-form-item>
<el-form-item label="关联站点" prop="site_id">
<vxe-tree-select v-model="form['site_id']" placeholder="请选择关联站点" :options="siteType" clearable
:multiple="true" :option-props="{ value: 'id', label: 'name' }" style="width: 100%;" />
</el-form-item>
<el-form-item label="标题图片" prop="cover_id">
<el-upload :action="action" :file-list="coverList"
:headers="{ Authorization: `Bearer ${getToken()}`}"
accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
multiple :limit="1" :before-upload="uploadBefore"
:on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 'cover_id')"
:on-remove="(file, fileList) => uploadRemove(file, fileList, 'cover_id')"
:on-error="(err, file, fileList) => uploadError(err, file, fileList, 'cover_id')">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div>
</el-upload>
</el-form-item>
<el-form-item label="产品图集" prop="images_ids">
<el-upload :action="action" :file-list="imageList"
:headers="{ Authorization: `Bearer ${getToken()}`}"
accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
multiple :before-upload="uploadBefore"
:on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 'images_ids')"
:on-remove="(file, fileList) => uploadRemove(file, fileList, 'images_ids')"
:on-error="(err, file, fileList) => uploadError(err, file, fileList, 'images_ids')">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div>
</el-upload>
</el-form-item>
<el-form-item label="产品简介" prop="">
<el-input v-model="form['introduce']" type="textarea" clearable placeholder="请填写产品简介"
style="width: 100%;" />
</el-form-item>
<el-form-item label="适用人群" prop="content">
<my-tinymce v-model="form['content']" clearable placeholder="请填写适用人群" style="width: 100%;" />
</el-form-item>
<el-form-item label="服务流程" prop="flow_content">
<my-tinymce v-model="form['flow_content']" clearable placeholder="请填写服务流程" style="width: 100%;" />
</el-form-item>
<el-form-item label="费用说明" prop="price_content">
<my-tinymce v-model="form['price_content']" clearable placeholder="请填写费用说明" style="width: 100%;" />
</el-form-item>
<el-form-item label="预约须知" prop="appoint_content">
<my-tinymce v-model="form['appoint_content']" clearable placeholder="请填写预约须知" style="width: 100%;" />
</el-form-item>
</div>
</el-form>
<div class="drawer-container__footer">
<el-button @click="reset">重 置</el-button>
<el-button type="primary" :loading="loading" @click="submit">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
</div>
</section>
</el-drawer>
</div>
</template>
<script>
import {
save
} from '@/api/accompany/accompany'
import {
getToken
} from '@/utils/auth'
import {
uploadSize
} from '@/settings'
import {
formatFileSize
} from '@/utils'
export default {
name: 'AccompanyDrawer',
props: {
isShow: {
type: Boolean,
default: false,
required: true
},
siteType: {
type: Array,
default: () => []
}
},
data() {
return {
uploadSize,
action: process.env.VUE_APP_UPLOAD_API,
loading: false,
<template>
<div>
<el-drawer :title="$route.meta.title" direction="rtl" size="68%" :visible.sync="visible" append-to-body
:before-close="handleClose" @close="$emit('update:isShow',false)">
<section class="drawer-container">
<el-form ref="elForm" class="drawer-container__form" :model="form" :rules="rules" label-position="top"
label-width="120px" size="small">
<div class="form-layout">
<el-form-item label="产品名称" prop="name">
<el-input v-model="form['name']" clearable placeholder="请填写产品名称" style="width: 100%;" />
</el-form-item>
<el-form-item label="产品定价" prop="price">
<el-input v-model="form['price']" clearable placeholder="请填写产品定价" style="width: 100%;" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-switch v-model="form['status']" :active-value="1" :inactive-value="0" active-text="启用"
inactive-text="禁用" />
</el-form-item>
<el-form-item label="站点产品价格" prop="accompany_product_site">
<div v-for="(item, index) in accompany_product_site" :key="index" style="display: flex; align-items: center;">
<vxe-tree-select v-model="item.site_id" placeholder="请选择站点" :options="siteType" clearable
:multiple="false" :option-props="{ value: 'id', label: 'name' }" style="width: 45%;" />
<el-input v-model="item.price" placeholder="请输入价格" style="width: 45%; margin-left: 10px;" />
<el-button type="danger" icon="el-icon-delete" @click="removeProductSite(index)" style="margin-left: 10px;"></el-button>
</div>
<el-button type="primary" @click="addProductSite">添加站点产品价格</el-button>
</el-form-item>
<el-form-item label="关联站点" prop="site_id">
<vxe-tree-select v-model="form['site_id']" placeholder="请选择关联站点" :options="siteType" clearable
:multiple="true" :option-props="{ value: 'id', label: 'name' }" style="width: 100%;" disabled />
</el-form-item>
<el-form-item label="标题图片" prop="cover_id">
<el-upload :action="action" :file-list="coverList"
:headers="{ Authorization: `Bearer ${getToken()}`}"
accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
multiple :limit="1" :before-upload="uploadBefore"
:on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 'cover_id')"
:on-remove="(file, fileList) => uploadRemove(file, fileList, 'cover_id')"
:on-error="(err, file, fileList) => uploadError(err, file, fileList, 'cover_id')">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div>
</el-upload>
</el-form-item>
<el-form-item label="产品图集" prop="images_ids">
<el-upload :action="action" :file-list="imageList"
:headers="{ Authorization: `Bearer ${getToken()}`}"
accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
multiple :before-upload="uploadBefore"
:on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 'images_ids')"
:on-remove="(file, fileList) => uploadRemove(file, fileList, 'images_ids')"
:on-error="(err, file, fileList) => uploadError(err, file, fileList, 'images_ids')">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div>
</el-upload>
</el-form-item>
<el-form-item label="产品简介" prop="">
<el-input v-model="form['introduce']" type="textarea" clearable placeholder="请填写产品简介"
style="width: 100%;" />
</el-form-item>
<el-form-item label="适用人群" prop="content">
<my-tinymce v-model="form['content']" clearable placeholder="请填写适用人群" style="width: 100%;" />
</el-form-item>
<el-form-item label="服务流程" prop="flow_content">
<my-tinymce v-model="form['flow_content']" clearable placeholder="请填写服务流程" style="width: 100%;" />
</el-form-item>
<el-form-item label="费用说明" prop="price_content">
<my-tinymce v-model="form['price_content']" clearable placeholder="请填写费用说明" style="width: 100%;" />
</el-form-item>
<el-form-item label="预约须知" prop="appoint_content">
<my-tinymce v-model="form['appoint_content']" clearable placeholder="请填写预约须知" style="width: 100%;" />
</el-form-item>
</div>
</el-form>
<div class="drawer-container__footer">
<el-button @click="reset">重 置</el-button>
<el-button type="primary" :loading="loading" @click="submit">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
</div>
</section>
</el-drawer>
</div>
</template>
<script>
import {
save,
show
} from '@/api/accompany/accompany'
import {
getToken
} from '@/utils/auth'
import {
uploadSize
} from '@/settings'
import {
formatFileSize
} from '@/utils'
export default {
name: 'AccompanyDrawer',
props: {
isShow: {
type: Boolean,
default: false,
required: true
},
siteType: {
type: Array,
default: () => []
}
},
data() {
return {
uploadSize,
action: process.env.VUE_APP_UPLOAD_API,
loading: false,
visible: false,
coverList:[],
imageList:[],
imageList:[],
accompany_product_site:[],
form: {
type: 1,
name: '',
price: '',
status: 1,
site_id: '',
cover_id: '',
images_ids: [],
introduce: '',
content: '',
flow_content: '',
price_content: '',
appoint_content: '',
},
rules: {
name: [{
'required': true,
'message': '产品名称必填'
}]
}
}
},
watch: {
isShow(newVal) {
id:'',
type: 1,
name: '',
price: '',
status: 1,
site_id: '',
cover_id: '',
images_ids: [],
introduce: '',
content: '',
flow_content: '',
price_content: '',
appoint_content: '',
accompany_product_site: [],
},
rules: {
name: [{
'required': true,
'message': '产品名称必填'
}],
accompany_product_site: [{
'required': true,
'message': '站点产品价格必填'
}]
}
}
},
watch: {
isShow(newVal) {
this.visible = newVal
if(!newVal){
this.coverList = []
this.imageList = []
}
},
visible(newVal) {
this.$emit('update:isShow', newVal)
}
},
this.accompany_product_site = []
}
},
visible(newVal) {
this.$emit('update:isShow', newVal)
}
},
methods: {
setType(e){
console.log("type",e)
this.form.type=e?e:1
},
uploadBefore(file) {
if (file.size > uploadSize) {
this.$message({
type: 'warning',
message: `上传图片大小超过${formatFileSize(uploadSize)}！`
})
return false
}
window.$_uploading = true
},
uploadSuccess(response, file, fileList, fieldName) {
window.$_uploading = false
fileList.forEach((file) => {
if (file.response?.data && !file.response?.code) {
file.response = file.response.data
}
},
uploadBefore(file) {
if (file.size > uploadSize) {
this.$message({
type: 'warning',
message: `上传图片大小超过${formatFileSize(uploadSize)}！`
})
return false
}
window.$_uploading = true
},
uploadSuccess(response, file, fileList, fieldName) {
window.$_uploading = false
fileList.forEach((file) => {
if (file.response?.data && !file.response?.code) {
file.response = file.response.data
}
})
if(fieldName==='cover_id'){
this.coverList = fileList
}
if(fieldName==='images_ids'){
this.imageList = fileList
}
},
uploadRemove(file, fileList, fieldName) {
}
},
uploadRemove(file, fileList, fieldName) {
if(fieldName==='cover_id'){
this.coverList = fileList
}
if(fieldName==='images_ids'){
this.imageList = fileList
}
},
uploadError(err, file, fileList, fieldName) {
window.$_uploading = false
}
},
uploadError(err, file, fileList, fieldName) {
window.$_uploading = false
if(fieldName==='cover_id'){
this.coverList = fileList
}
if(fieldName==='images_ids'){
this.imageList = fileList
}
this.$message({
type: 'warning',
message: err
})
},
formatFileSize,
getToken,
handleClose(done) {
this.$confirm('确定关闭窗口？')
.then(_ => {
done()
})
.catch(_ => {})
},
}
this.$message({
type: 'warning',
message: err
})
},
formatFileSize,
getToken,
handleClose(done) {
this.$confirm('确定关闭窗口？')
.then(_ => {
done()
})
.catch(_ => {})
},
reset() {
this.coverList = []
this.imageList = []
this.form = {
name: '',
site_id: '',
cover_id: '',
images_ids: [],
introduce: '',
status: 1,
content: '',
flow_content: '',
price_content: '',
appoint_content: '',
price: '',
}
this.$refs['elForm'].resetFields()
},
submit() {
if (window.$_uploading) {
this.$message.warning('文件正在上传中')
return
}
this.imageList = []
this.accompany_product_site = []
this.form = {
id:'',
name: '',
site_id: '',
cover_id: '',
images_ids: [],
introduce: '',
status: 1,
content: '',
flow_content: '',
price_content: '',
appoint_content: '',
accompany_product_site: [],
price: '',
}
this.$refs['elForm'].resetFields()
},
async getDetail(id) {
try {
const detail = await show({
id,
show_relation: ['cover', 'accompanyProductSite']
});
console.log('Detail fetched:', detail); // Log the response
for (const key in this.form) {
if (detail.hasOwnProperty(key)) {
this.form[key] = detail[key];
}
}
this.form.id = id;
// Handle specific fields like images if necessary
if (detail['images']) {
this.imageList = detail['images'];
}
if(detail['cover']){
this.coverList = [detail['cover']]
}
this.accompany_product_site = detail['accompany_product_site'] || [];
this.form.site_id = this.form.site_id?this.form.site_id.split(",") : [];
} catch (err) {
console.error(err);
}
},
submit() {
if (window.$_uploading) {
this.$message.warning('文件正在上传中');
return;
}
if (this.accompany_product_site.some(item => !item.site_id || !item.price)) {
this.$message.error('站点和价格不能为空');
return;
}
const siteIds = this.accompany_product_site.map(item => item.site_id);
const hasDuplicateSiteId = siteIds.some((id, index) => siteIds.indexOf(id) !== index);
if (hasDuplicateSiteId) {
this.$message.error('站点ID不能重复');
return;
}
this.form.site_id = siteIds.join(",");
this.form.accompany_product_site = this.accompany_product_site;
// Ensure ID is included
if (this.form.id) {
this.form.id = this.form.id;
}
this.form['cover_id'] = ''
if(this.coverList.length>0){
this.form['cover_id'] = this.coverList[0]?.response?.id ?? ''
if(this.coverList[0]?.response?.id){
this.form['cover_id'] = this.coverList[0]?.response?.id
}else{
this.form['cover_id'] = this.coverList[0].id
}
}else{
this.form['cover_id'] = ''
}
}
this.form['images_ids'] = []
if(this.imageList.length>0){
this.imageList.map(item=>{
this.form.images_ids.push(item?.response?.id ?? '')
if(item.response?.id){
this.form['images_ids'].push(item.response.id)
}else{
this.form['images_ids'].push(item.id)
}
})
}else{
this.form['images_ids'] = []
}
if(this.form.site_id.length>0){
this.form.site_id = this.form.site_id.join(",")
}
console.log("this.form", this.form,this.imageList,this.coverList);
// return
this.$refs['elForm'].validate(async valid => {
if (valid) {
this.loading = true;
try {
await save(this.form);
this.$message.success('新增成功');
this.$emit('refresh');
this.$emit('update:isShow', false);
this.loading = false;
this.reset();
} catch (err) {
this.loading = false;
}
}
});
},
addProductSite() {
const price = this.form['price'] || '';
this.accompany_product_site.push({ site_id: '', price });
},
removeProductSite(index) {
this.accompany_product_site.splice(index, 1);
}
}
}
</script>
<style scoped lang="scss">
.span2 {
grid-column: span 2;
}
::v-deep .el-form-item>* {
max-width: 100%;
}
.form-layout {
display: grid;
grid-gap: 2%;
grid-template-columns: repeat(2, 1fr);
}
.drawer-container {
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
&__form {
flex: 1;
overflow-y: scroll;
}
console.log("this.form",this.form)
// return
this.$refs['elForm'].validate(async valid => {
if (valid) {
this.loading = true
try {
await save(this.form)
this.$message.success('新增成功')
this.$emit('refresh')
this.$emit('update:isShow', false)
this.loading = false
this.reset()
} catch (err) {
this.loading = false
}
}
})
}
}
}
</script>
<style scoped lang="scss">
.span2 {
grid-column: span 2;
}
::v-deep .el-form-item>* {
max-width: 100%;
}
.form-layout {
display: grid;
grid-gap: 2%;
grid-template-columns: repeat(2, 1fr);
}
.drawer-container {
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
&__form {
flex: 1;
overflow-y: scroll;
}
&__footer {
margin-top: 20px;
display: flex;
}
}
&__footer {
margin-top: 20px;
display: flex;
}
}
</style>

Write Preview
Loading…
Cancel
Save