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

up

Browse Source
master
lion 8 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' ENV='development'
# base api # base api
VUE_APP_BASE_API=https://yikangyang.ali251.langye.net VUE_APP_BASE_API=https://yikangyang-test.ali251.langye.net
VUE_APP_UPLOAD_API=https://yikangyang.ali251.langye.net/api/admin/upload-file 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 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="数量显示" <vxe-column align="center" field="can_multi_num" width="120" title="数量显示"
:edit-render="{ name: 'VxeSelect', options: [{ label: '不显示', value: 0 },{ label: '显示', value: 1 }] }" /> :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" align="center"
field="site_id" field="site_id"
width="160" width="160"
@ -68,7 +80,7 @@
<vxe-column field="images_ids" min-width="180" title="产品图集" header-align="center" align="left" :edit-render="{}"> <vxe-column field="images_ids" min-width="180" title="产品图集" header-align="center" align="left" :edit-render="{}">
<template #default="{ row }"> <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}%" <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>
<template #edit="{ row }"> <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}%" <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, page_size: 20,
keyword: '', keyword: '',
type:1, type:1,
show_relation: ['cover'] show_relation: ['cover','accompanyProductSite']
}, },
total: 0, total: 0,
allAlign: null, allAlign: null,
@ -349,8 +361,17 @@
}, },
editRowEvent(row) { editRowEvent(row) {
if (this.$refs['table']) { // if (this.$refs['table']) {
this.$refs['table'].setEditRow(row) // 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) { cancelRowEvent(row) {
@ -377,6 +398,7 @@
try { try {
const res = await index({ const res = await index({
...this.select, ...this.select,
filter:[{ filter:[{
key:'type', key:'type',
op:'eq', op:'eq',
@ -384,7 +406,7 @@
}] }]
}, false) }, false)
res.data.map(item=>{ 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.tableData = res.data
this.total = res.total this.total = res.total

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

@ -1,305 +1,381 @@
<template> <template>
<div> <div>
<el-drawer :title="$route.meta.title" direction="rtl" size="68%" :visible.sync="visible" append-to-body <el-drawer :title="$route.meta.title" direction="rtl" size="68%" :visible.sync="visible" append-to-body
:before-close="handleClose" @close="$emit('update:isShow',false)"> :before-close="handleClose" @close="$emit('update:isShow',false)">
<section class="drawer-container"> <section class="drawer-container">
<el-form ref="elForm" class="drawer-container__form" :model="form" :rules="rules" label-position="top" <el-form ref="elForm" class="drawer-container__form" :model="form" :rules="rules" label-position="top"
label-width="120px" size="small"> label-width="120px" size="small">
<div class="form-layout"> <div class="form-layout">
<el-form-item label="产品名称" prop="name"> <el-form-item label="产品名称" prop="name">
<el-input v-model="form['name']" clearable placeholder="请填写产品名称" style="width: 100%;" /> <el-input v-model="form['name']" clearable placeholder="请填写产品名称" style="width: 100%;" />
</el-form-item> </el-form-item>
<el-form-item label="产品定价" prop="price"> <el-form-item label="产品定价" prop="price">
<el-input v-model="form['price']" clearable placeholder="请填写产品定价" style="width: 100%;" /> <el-input v-model="form['price']" clearable placeholder="请填写产品定价" style="width: 100%;" />
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-switch v-model="form['status']" :active-value="1" :inactive-value="0" active-text="启用" <el-switch v-model="form['status']" :active-value="1" :inactive-value="0" active-text="启用"
inactive-text="禁用" /> inactive-text="禁用" />
</el-form-item> </el-form-item>
<el-form-item label="关联站点" prop="site_id">
<vxe-tree-select v-model="form['site_id']" placeholder="请选择关联站点" :options="siteType" clearable <el-form-item label="站点产品价格" prop="accompany_product_site">
:multiple="true" :option-props="{ value: 'id', label: 'name' }" style="width: 100%;" /> <div v-for="(item, index) in accompany_product_site" :key="index" style="display: flex; align-items: center;">
</el-form-item> <vxe-tree-select v-model="item.site_id" placeholder="请选择站点" :options="siteType" clearable
<el-form-item label="标题图片" prop="cover_id"> :multiple="false" :option-props="{ value: 'id', label: 'name' }" style="width: 45%;" />
<el-upload :action="action" :file-list="coverList" <el-input v-model="item.price" placeholder="请输入价格" style="width: 45%; margin-left: 10px;" />
:headers="{ Authorization: `Bearer ${getToken()}`}" <el-button type="danger" icon="el-icon-delete" @click="removeProductSite(index)" style="margin-left: 10px;"></el-button>
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" </div>
multiple :limit="1" :before-upload="uploadBefore" <el-button type="primary" @click="addProductSite">添加站点产品价格</el-button>
:on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 'cover_id')" </el-form-item>
:on-remove="(file, fileList) => uploadRemove(file, fileList, 'cover_id')" <el-form-item label="关联站点" prop="site_id">
:on-error="(err, file, fileList) => uploadError(err, file, fileList, 'cover_id')"> <vxe-tree-select v-model="form['site_id']" placeholder="请选择关联站点" :options="siteType" clearable
<el-button size="small" type="primary">点击上传</el-button> :multiple="true" :option-props="{ value: 'id', label: 'name' }" style="width: 100%;" disabled />
<div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div> </el-form-item>
</el-upload> <el-form-item label="标题图片" prop="cover_id">
</el-form-item> <el-upload :action="action" :file-list="coverList"
<el-form-item label="产品图集" prop="images_ids"> :headers="{ Authorization: `Bearer ${getToken()}`}"
<el-upload :action="action" :file-list="imageList" 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"
:headers="{ Authorization: `Bearer ${getToken()}`}" multiple :limit="1" :before-upload="uploadBefore"
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" :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 'cover_id')"
multiple :before-upload="uploadBefore" :on-remove="(file, fileList) => uploadRemove(file, fileList, 'cover_id')"
:on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 'images_ids')" :on-error="(err, file, fileList) => uploadError(err, file, fileList, 'cover_id')">
:on-remove="(file, fileList) => uploadRemove(file, fileList, 'images_ids')" <el-button size="small" type="primary">点击上传</el-button>
:on-error="(err, file, fileList) => uploadError(err, file, fileList, 'images_ids')"> <div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div>
<el-button size="small" type="primary">点击上传</el-button> </el-upload>
<div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div> </el-form-item>
</el-upload> <el-form-item label="产品图集" prop="images_ids">
</el-form-item> <el-upload :action="action" :file-list="imageList"
<el-form-item label="产品简介" prop=""> :headers="{ Authorization: `Bearer ${getToken()}`}"
<el-input v-model="form['introduce']" type="textarea" clearable placeholder="请填写产品简介" 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"
style="width: 100%;" /> multiple :before-upload="uploadBefore"
</el-form-item> :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-form-item label="适用人群" prop="content"> <el-button size="small" type="primary">点击上传</el-button>
<my-tinymce v-model="form['content']" clearable placeholder="请填写适用人群" style="width: 100%;" /> <div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div>
</el-form-item> </el-upload>
<el-form-item label="服务流程" prop="flow_content"> </el-form-item>
<my-tinymce v-model="form['flow_content']" clearable placeholder="请填写服务流程" style="width: 100%;" /> <el-form-item label="产品简介" prop="">
</el-form-item> <el-input v-model="form['introduce']" type="textarea" clearable placeholder="请填写产品简介"
<el-form-item label="费用说明" prop="price_content"> style="width: 100%;" />
<my-tinymce v-model="form['price_content']" clearable placeholder="请填写费用说明" style="width: 100%;" /> </el-form-item>
</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 label="适用人群" prop="content">
</el-form-item> <my-tinymce v-model="form['content']" clearable placeholder="请填写适用人群" style="width: 100%;" />
</el-form-item>
</div> <el-form-item label="服务流程" prop="flow_content">
</el-form> <my-tinymce v-model="form['flow_content']" clearable placeholder="请填写服务流程" style="width: 100%;" />
</el-form-item>
<div class="drawer-container__footer"> <el-form-item label="费用说明" prop="price_content">
<el-button @click="reset">重 置</el-button> <my-tinymce v-model="form['price_content']" clearable placeholder="请填写费用说明" style="width: 100%;" />
<el-button type="primary" :loading="loading" @click="submit">{{ loading ? '提交中 ...' : '确 定' }}</el-button> </el-form-item>
</div> <el-form-item label="预约须知" prop="appoint_content">
</section> <my-tinymce v-model="form['appoint_content']" clearable placeholder="请填写预约须知" style="width: 100%;" />
</el-drawer> </el-form-item>
</div>
</template> </div>
</el-form>
<script>
import { <div class="drawer-container__footer">
save <el-button @click="reset">重 置</el-button>
} from '@/api/accompany/accompany' <el-button type="primary" :loading="loading" @click="submit">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
import { </div>
getToken </section>
} from '@/utils/auth' </el-drawer>
import { </div>
uploadSize </template>
} from '@/settings'
import { <script>
formatFileSize import {
} from '@/utils' save,
show
export default { } from '@/api/accompany/accompany'
name: 'AccompanyDrawer', import {
props: { getToken
isShow: { } from '@/utils/auth'
type: Boolean, import {
default: false, uploadSize
required: true } from '@/settings'
}, import {
formatFileSize
siteType: { } from '@/utils'
type: Array,
default: () => [] export default {
} name: 'AccompanyDrawer',
props: {
}, isShow: {
data() { type: Boolean,
return { default: false,
uploadSize, required: true
action: process.env.VUE_APP_UPLOAD_API, },
loading: false,
siteType: {
type: Array,
default: () => []
}
},
data() {
return {
uploadSize,
action: process.env.VUE_APP_UPLOAD_API,
loading: false,
visible: false, visible: false,
coverList:[], coverList:[],
imageList:[], imageList:[],
accompany_product_site:[],
form: { form: {
type: 1, id:'',
name: '', type: 1,
price: '', name: '',
status: 1, price: '',
site_id: '', status: 1,
cover_id: '', site_id: '',
images_ids: [], cover_id: '',
introduce: '', images_ids: [],
content: '', introduce: '',
flow_content: '', content: '',
price_content: '', flow_content: '',
appoint_content: '', price_content: '',
appoint_content: '',
}, accompany_product_site: [],
rules: { },
rules: {
name: [{
'required': true, name: [{
'message': '产品名称必填' 'required': true,
}] 'message': '产品名称必填'
}],
} accompany_product_site: [{
} 'required': true,
}, 'message': '站点产品价格必填'
watch: { }]
isShow(newVal) {
}
}
},
watch: {
isShow(newVal) {
this.visible = newVal this.visible = newVal
if(!newVal){ if(!newVal){
this.coverList = [] this.coverList = []
this.imageList = [] this.imageList = []
} this.accompany_product_site = []
}, }
visible(newVal) { },
this.$emit('update:isShow', newVal) visible(newVal) {
} this.$emit('update:isShow', newVal)
}, }
},
methods: { methods: {
setType(e){ setType(e){
console.log("type",e) console.log("type",e)
this.form.type=e?e:1 this.form.type=e?e:1
}, },
uploadBefore(file) { uploadBefore(file) {
if (file.size > uploadSize) { if (file.size > uploadSize) {
this.$message({ this.$message({
type: 'warning', type: 'warning',
message: `上传图片大小超过${formatFileSize(uploadSize)}！` message: `上传图片大小超过${formatFileSize(uploadSize)}！`
}) })
return false return false
} }
window.$_uploading = true window.$_uploading = true
}, },
uploadSuccess(response, file, fileList, fieldName) { uploadSuccess(response, file, fileList, fieldName) {
window.$_uploading = false window.$_uploading = false
fileList.forEach((file) => { fileList.forEach((file) => {
if (file.response?.data && !file.response?.code) { if (file.response?.data && !file.response?.code) {
file.response = file.response.data file.response = file.response.data
} }
}) })
if(fieldName==='cover_id'){ if(fieldName==='cover_id'){
this.coverList = fileList this.coverList = fileList
} }
if(fieldName==='images_ids'){ if(fieldName==='images_ids'){
this.imageList = fileList this.imageList = fileList
} }
}, },
uploadRemove(file, fileList, fieldName) { uploadRemove(file, fileList, fieldName) {
if(fieldName==='cover_id'){ if(fieldName==='cover_id'){
this.coverList = fileList this.coverList = fileList
} }
if(fieldName==='images_ids'){ if(fieldName==='images_ids'){
this.imageList = fileList this.imageList = fileList
} }
}, },
uploadError(err, file, fileList, fieldName) { uploadError(err, file, fileList, fieldName) {
window.$_uploading = false window.$_uploading = false
if(fieldName==='cover_id'){ if(fieldName==='cover_id'){
this.coverList = fileList this.coverList = fileList
} }
if(fieldName==='images_ids'){ if(fieldName==='images_ids'){
this.imageList = fileList this.imageList = fileList
} }
this.$message({ this.$message({
type: 'warning', type: 'warning',
message: err message: err
}) })
}, },
formatFileSize, formatFileSize,
getToken, getToken,
handleClose(done) { handleClose(done) {
this.$confirm('确定关闭窗口？') this.$confirm('确定关闭窗口？')
.then(_ => { .then(_ => {
done() done()
}) })
.catch(_ => {}) .catch(_ => {})
}, },
reset() { reset() {
this.coverList = [] this.coverList = []
this.imageList = [] this.imageList = []
this.form = { this.accompany_product_site = []
name: '', this.form = {
site_id: '', id:'',
cover_id: '', name: '',
images_ids: [], site_id: '',
introduce: '', cover_id: '',
status: 1, images_ids: [],
content: '', introduce: '',
flow_content: '', status: 1,
price_content: '', content: '',
appoint_content: '', flow_content: '',
price: '', price_content: '',
} appoint_content: '',
this.$refs['elForm'].resetFields() accompany_product_site: [],
}, price: '',
submit() { }
if (window.$_uploading) { this.$refs['elForm'].resetFields()
this.$message.warning('文件正在上传中') },
return 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){ 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{ }else{
this.form['cover_id'] = '' this.form['cover_id'] = ''
} }
this.form['images_ids'] = []
if(this.imageList.length>0){ if(this.imageList.length>0){
this.imageList.map(item=>{ 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{ }else{
this.form['images_ids'] = [] this.form['images_ids'] = []
} }
if(this.form.site_id.length>0){ console.log("this.form", this.form,this.imageList,this.coverList);
this.form.site_id = this.form.site_id.join(",") // 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) &__footer {
// return margin-top: 20px;
this.$refs['elForm'].validate(async valid => { display: flex;
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;
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save