<template>
|
<!--
|
作者：yj
|
后台发布供应
|
-->
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="800px">
|
<el-form size="small" :model="form" ref="form" :rules="rules" label-width="120px">
|
<el-form-item label="发布用户" prop="user_id">
|
<el-input v-model="selectedUserName" placeholder="请选择用户" disabled style="width: 200px;"></el-input>
|
<el-button type="primary" @click="openUserSelect">选择用户</el-button>
|
<span v-if="selectedUser" class="ml10 gray9">连盟币: {{ selectedUser.points }}</span>
|
</el-form-item>
|
|
<el-form-item label="标题" prop="name">
|
<el-input v-model="form.name" placeholder="请输入标题" style="width: 400px;"></el-input>
|
</el-form-item>
|
|
<el-form-item label="分类" prop="category_id">
|
<el-select v-model="form.category_id" placeholder="请选择分类" style="width: 200px;">
|
<el-option v-for="item in categoryList" :key="item.category_id" :label="item.name" :value="item.category_id"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="价格(元)" prop="price">
|
<el-input v-model="form.price" placeholder="请输入价格" style="width: 200px;"></el-input>
|
</el-form-item>
|
|
<el-form-item label="详细描述" prop="content">
|
<el-input type="textarea" :rows="3" v-model="form.content" placeholder="请输入详细描述" style="width: 400px;"></el-input>
|
</el-form-item>
|
|
<el-form-item label="图片">
|
<div class="upload-list d-s-c">
|
<div class="item" v-for="(imgs, img_num) in form.image_list" :key="img_num">
|
<img :src="imgs.file_path" style="width: 60px; height: 60px; margin-right: 10px;" />
|
<el-button type="text" size="mini" @click="deleteImg(img_num)">删除</el-button>
|
</div>
|
<div class="item img-select" @click="openUpload"><i class="el-icon-plus"></i></div>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="标签">
|
<el-checkbox-group v-model="form.tag_list">
|
<el-checkbox v-for="item in tagList" :key="item.tag_id" :label="item.tag_id">{{ item.name }}</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
|
<el-form-item label="交付时间">
|
<el-date-picker v-model="form.finish_time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
|
</el-form-item>
|
|
<el-form-item label="服务地区">
|
<el-input v-model="form.detail" placeholder="请输入服务地区" style="width: 400px;"></el-input>
|
</el-form-item>
|
|
<el-form-item label="产品介绍">
|
<el-input type="textarea" :rows="3" v-model="form.product_content" placeholder="请输入产品介绍" style="width: 400px;"></el-input>
|
</el-form-item>
|
|
<el-form-item label="产品应用案例">
|
<el-input type="textarea" :rows="3" v-model="form.product_case" placeholder="请输入产品应用案例" style="width: 400px;"></el-input>
|
</el-form-item>
|
|
<el-form-item label="是否展示">
|
<el-radio-group v-model="form.is_show">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item label="支付连盟币" v-if="!isEdit">
|
<el-radio-group v-model="payPoints">
|
<el-radio :label="0">不支付</el-radio>
|
<el-radio :label="1">支付 ({{ supplyPrice }} 连盟币)</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible">取 消</el-button>
|
<el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
|
</div>
|
|
<!-- 供应方用户选择器 -->
|
<GetSupplyUser :is_open="showUserSelector" @close="handleUserSelect"></GetSupplyUser>
|
<!-- 图片上传组件 -->
|
<Upload v-if="isUpload" :config="uploadConfig" :isupload="isUpload" @returnImgs="returnImgsFunc">上传图片</Upload>
|
</el-dialog>
|
</template>
|
|
<script>
|
import PlusApi from '@/api/plus/release.js';
|
import GetSupplyUser from '@/components/release/GetSupplyUser.vue';
|
import Upload from '@/components/file/Upload';
|
import { deepClone } from '@/utils/base.js';
|
|
export default {
|
components: {
|
GetSupplyUser,
|
Upload
|
},
|
data() {
|
return {
|
/*是否显示*/
|
dialogVisible: false,
|
loading: false,
|
formLabelWidth: '120px',
|
/*是否编辑模式*/
|
isEdit: false,
|
/*编辑的项目ID*/
|
editProjectId: null,
|
/*表单数据*/
|
form: {
|
user_id: '',
|
name: '',
|
category_id: '',
|
price: '',
|
content: '',
|
image_list: [],
|
tag_list: [],
|
finish_time: '',
|
detail: '',
|
product_content: '',
|
product_case: '',
|
is_show: 1
|
},
|
/*验证规则*/
|
rules: {
|
user_id: [{ required: true, message: '请选择发布用户', trigger: 'change' }],
|
name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
category_id: [{ required: true, message: '请选择分类', trigger: 'change' }],
|
price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
|
content: [{ required: true, message: '请输入详细描述', trigger: 'blur' }]
|
},
|
/*分类列表*/
|
categoryList: [],
|
/*标签列表*/
|
tagList: [],
|
/*选中的用户*/
|
selectedUser: null,
|
selectedUserName: '',
|
/*是否显示用户选择器*/
|
showUserSelector: false,
|
/*是否支付连盟币*/
|
payPoints: 0,
|
/*支付连盟币金额（从设置获取）*/
|
supplyPrice: 0,
|
/*是否显示上传组件*/
|
isUpload: false,
|
/*上传配置*/
|
uploadConfig: {
|
total: 9,
|
file_type: 'image'
|
}
|
};
|
},
|
props: ['open_add', 'edit_data'],
|
created() {
|
this.dialogVisible = this.open_add;
|
this.getDefaultData();
|
// 判断是否为编辑模式
|
if (this.edit_data && this.edit_data.project_id) {
|
this.isEdit = true;
|
this.editProjectId = this.edit_data.project_id;
|
this.initEditData();
|
}
|
},
|
methods: {
|
/*获取默认数据*/
|
getDefaultData() {
|
let self = this;
|
PlusApi.supplyProjectDefaultData({}, true).then(data => {
|
self.categoryList = data.data.data.category_list || [];
|
self.tagList = data.data.data.tag_list || [];
|
self.supplyPrice = data.data.data.supply_price || 0;
|
}).catch(error => {});
|
},
|
|
/*初始化编辑数据*/
|
initEditData() {
|
const data = this.edit_data;
|
this.selectedUser = {
|
user_id: data.user_id,
|
nickName: data.nickName || (data.user && data.user.nickName),
|
points: data.points || (data.user && data.user.points)
|
};
|
this.selectedUserName = this.selectedUser.nickName || ('用户ID:' + data.user_id);
|
this.form.user_id = data.user_id;
|
this.form.name = data.name;
|
this.form.category_id = data.category_id;
|
this.form.price = data.price;
|
this.form.content = data.content;
|
this.form.image_list = data.image_list || [];
|
// 提取tag_id数组
|
this.form.tag_list = (data.tag_list && data.tag_list.map) ? data.tag_list.map(item => item.tag_id) : [];
|
this.form.finish_time = data.finish_time || '';
|
this.form.detail = data.detail || '';
|
this.form.product_content = data.product_content || '';
|
this.form.product_case = data.product_case || '';
|
this.form.is_show = data.is_show;
|
},
|
|
/*打开用户选择器*/
|
openUserSelect() {
|
this.showUserSelector = true;
|
},
|
|
/*打开上传组件*/
|
openUpload() {
|
this.isUpload = true;
|
},
|
|
/*处理用户选择*/
|
handleUserSelect(result) {
|
this.showUserSelector = false;
|
if (result && result.type === 'success' && result.params) {
|
const user = result.params;
|
this.selectedUser = user;
|
this.selectedUserName = user.nickName || user.real_name || ('用户ID:' + user.user_id);
|
this.form.user_id = user.user_id;
|
}
|
},
|
|
/*处理上传图片返回*/
|
returnImgsFunc(e) {
|
if (e != null) {
|
this.form.image_list = this.form.image_list.concat(e);
|
}
|
this.isUpload = false;
|
},
|
|
/*删除图片*/
|
deleteImg(index) {
|
this.form.image_list.splice(index, 1);
|
},
|
|
/*提交表单*/
|
submitForm() {
|
let self = this;
|
self.$refs.form.validate(valid => {
|
if (valid) {
|
if (!self.selectedUser || !self.selectedUser.user_id) {
|
self.$message.error('请选择发布用户');
|
return;
|
}
|
|
self.loading = true;
|
let params = {
|
user_id: self.selectedUser.user_id,
|
formData: JSON.stringify(self.form)
|
};
|
|
if (self.isEdit) {
|
// 编辑模式
|
params.project_id = self.editProjectId;
|
PlusApi.supplyProjectEdit(params, true).then(data => {
|
self.loading = false;
|
self.$message.success('编辑成功');
|
self.$emit('closeDialog', {
|
type: 'success',
|
openDialog: false
|
});
|
}).catch(error => {
|
self.loading = false;
|
});
|
} else {
|
// 新增模式
|
params.pay_points = self.payPoints;
|
PlusApi.supplyProjectAdd(params, true).then(data => {
|
self.loading = false;
|
self.$message.success('发布成功');
|
self.$emit('closeDialog', {
|
type: 'success',
|
openDialog: false
|
});
|
}).catch(error => {
|
self.loading = false;
|
});
|
}
|
}
|
});
|
},
|
|
/*关闭弹窗*/
|
dialogFormVisible() {
|
this.$emit('closeDialog', {
|
type: 'error',
|
openDialog: false
|
});
|
}
|
},
|
computed: {
|
dialogTitle() {
|
return this.isEdit ? '编辑供应' : '发布供应';
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.ml10 { margin-left: 10px; }
|
.gray9 { color: #999; }
|
|
.upload-list {
|
border: 1px solid #e5e5e5;
|
border-radius: 2px;
|
padding: 10px;
|
min-height: 80px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
|
.upload-list .item {
|
width: 60px;
|
height: 60px;
|
border: 1px solid #e5e5e5;
|
border-radius: 2px;
|
overflow: hidden;
|
position: relative;
|
}
|
|
.upload-list .item img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.upload-list .item .el-button {
|
position: absolute;
|
top: 2px;
|
right: 2px;
|
padding: 2px 6px;
|
background: rgba(0, 0, 0, 0.6);
|
border: none;
|
color: #fff;
|
border-radius: 2px;
|
}
|
|
.upload-list .img-select {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border: 1px dashed #d9d9d9;
|
background: #fafafa;
|
cursor: pointer;
|
}
|
|
.upload-list .img-select i {
|
font-size: 24px;
|
color: #c0c4cc;
|
}
|
|
.upload-list .img-select:hover {
|
border-color: #c0c4cc;
|
background: #ecf5ff;
|
}
|
</style>
|
