177 lines
4.2 KiB
Vue
177 lines
4.2 KiB
Vue
<template>
|
|
<view>
|
|
<top-bar></top-bar>
|
|
<common-header></common-header>
|
|
<category-bar></category-bar>
|
|
|
|
<view class="page-nav">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
<el-breadcrumb-item><navigator style="display: inline-block;" url="/pages/spot/goods/goods">现货市场</navigator></el-breadcrumb-item>
|
|
<el-breadcrumb-item>发布现货</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</view>
|
|
|
|
<view class="form-view">
|
|
<vk-data-form ref="form1" v-model="form1.data" :action="form1.props.action" :columns="form1.props.columns"
|
|
:rules="form1.props.rules" :form-type="form1.props.formType" :loading.sync="form1.props.loading"
|
|
:before-action="form1.props.beforeAction" :auto-close="true" label-width="140px"
|
|
@success="onFormSuccess">
|
|
<template v-slot:name="{ form, keyName }">
|
|
<el-input v-model="productName" readonly placeholder="请添加现货分类"></el-input>
|
|
</template>
|
|
</vk-data-form>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 表单相关开始-----------------------------------------------------------
|
|
form1: {
|
|
// 表单请求数据，此处可以设置默认值
|
|
data: {
|
|
|
|
},
|
|
// 表单属性
|
|
props: {
|
|
// 表单请求地址
|
|
action: "client/spot/goods/kh/addUpdate",
|
|
// 表单字段显示规则
|
|
columns: [{
|
|
key: "name",
|
|
title: "现货名称",
|
|
type: "text",
|
|
},
|
|
{
|
|
key: "categoryIds",
|
|
title: "现货分类",
|
|
type: "checkbox",
|
|
action: "client/spot/category/pub/getList",
|
|
actionData: {
|
|
whereJson: {
|
|
level: 2
|
|
}
|
|
},
|
|
props: {
|
|
list: "data",
|
|
value: "_id",
|
|
label: "name"
|
|
},
|
|
watch: ({
|
|
option
|
|
}) => {
|
|
console.log('res: ', option)
|
|
|
|
this.form1.data.name = option.map(item => item.name).join('、')
|
|
this.productName = option.map(item => item.name).join('、')
|
|
console.log(this.form1);
|
|
}
|
|
|
|
},
|
|
{
|
|
key: "stock",
|
|
title: "库存（吨）",
|
|
type: "number"
|
|
},
|
|
{
|
|
key: "address",
|
|
title: "供货地",
|
|
type: "address"
|
|
},
|
|
{
|
|
key: "files",
|
|
title: "附件文档",
|
|
type: "file",
|
|
buttonText: "点击上传",
|
|
limit: 9,
|
|
accept: ".jpg,.png,.xlsx,.doc,.docx",
|
|
tips: '上传自有采购单图片或文档,支持jpg/png/word/excel'
|
|
},
|
|
|
|
|
|
],
|
|
// 表单验证规则
|
|
rules: {
|
|
categoryIds: [
|
|
{
|
|
required: true,
|
|
message: "现货名称不能为空",
|
|
trigger: ['blur', 'change']
|
|
},
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
if (value.length > 5) {
|
|
callback(new Error('最多选择五个分类'));
|
|
} else {
|
|
callback()
|
|
}
|
|
},
|
|
trigger: ['blur', 'change']
|
|
},
|
|
],
|
|
stock: [
|
|
{
|
|
required: true,
|
|
message: "请填写库存",
|
|
trigger: ['blur', 'change']
|
|
},
|
|
{
|
|
min: 0,
|
|
type: 'number',
|
|
message: "库存不能小于0",
|
|
trigger: ['blur', 'change']
|
|
},
|
|
],
|
|
address: [
|
|
{
|
|
required: true,
|
|
message: "请填写地址",
|
|
trigger: ['blur', 'change']
|
|
}
|
|
]
|
|
|
|
},
|
|
// add 代表添加 update 代表修改
|
|
formType: "add",
|
|
// 表单是否在请求中
|
|
loading: false,
|
|
// 是否显示表单1 的弹窗
|
|
show: false
|
|
}
|
|
},
|
|
productName: ''
|
|
// 表单相关结束-----------------------------------------------------------
|
|
};
|
|
},
|
|
onLoad() {
|
|
vk.callFunction({
|
|
url: 'client/spot/goods/kh/getSelfOne',
|
|
success: (res) => {
|
|
if(res.data) {
|
|
this.$refs.form1.setResetFormData(res.data);
|
|
this.$refs.form1.resetForm();
|
|
this.productName = res.data.name
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
onFormSuccess() {
|
|
vk.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.form-view {
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
background-color: #FFFFFF;
|
|
padding: 20rpx;
|
|
}
|
|
</style> |