351 lines
8.6 KiB
Vue
351 lines
8.6 KiB
Vue
<template>
|
|
<view>
|
|
<!-- <view class="product-title">{{title}}</view> -->
|
|
<vk-data-form v-if="attributesLoaded" 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" :footer-show="false"
|
|
@success="onFormSuccess">
|
|
</vk-data-form>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
baseAttributes: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
productIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
title: '商品',
|
|
attributesLoaded: false,
|
|
attributes: [],
|
|
// 表单相关开始-----------------------------------------------------------
|
|
form1: {
|
|
// 表单请求数据，此处可以设置默认值
|
|
data: {
|
|
extraAttributes: {},
|
|
attributes: {},
|
|
addressRegion: undefined
|
|
},
|
|
// 表单属性
|
|
props: {
|
|
// 表单请求地址
|
|
action: "client/enquiry/kh/add",
|
|
// 表单字段显示规则
|
|
columns: [
|
|
{key: "", title: "商品1", type: "bar-title", component: 'custom-form-section'},
|
|
{
|
|
key: "name",
|
|
title: "模板",
|
|
type: "remote-select",
|
|
action: "client/enquiry/template/pub/getList",
|
|
showAll: true,
|
|
actionData: {
|
|
pageSize: 1000
|
|
},
|
|
props: {
|
|
list: "rows",
|
|
value: "name",
|
|
label: "name"
|
|
},
|
|
watch: (res) => {
|
|
const {
|
|
option
|
|
} = res
|
|
console.log(option);
|
|
if(option.extraAttributes) {
|
|
let groupIndex = -1
|
|
option.extraAttributes.forEach((item, index) => {
|
|
if(index%4 == 0) {
|
|
this.form1.props.columns[2].columns.push({
|
|
key: "",
|
|
title: "",
|
|
type: "group",
|
|
justify: "start",
|
|
showLabel: false,
|
|
columns: []
|
|
})
|
|
groupIndex ++
|
|
}
|
|
|
|
this.form1.props.columns[2].columns[0].columns.push({
|
|
key: index,
|
|
title: item.label,
|
|
type: "select",
|
|
allowCreate: true,
|
|
filterable: true,
|
|
data: item.values.map(citem => {
|
|
return {
|
|
value: JSON.stringify({keyName: item.lable,keyValue: citem}),
|
|
label: citem
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
}else {
|
|
this.form1.props.columns[2].columns = []
|
|
}
|
|
|
|
|
|
}
|
|
},
|
|
{
|
|
key: "extraAttributes",
|
|
title: "额外属性",
|
|
type: "object",
|
|
justify: "start",
|
|
showLabel: false,
|
|
columns: [
|
|
|
|
],
|
|
},
|
|
{
|
|
key: "",
|
|
title: "",
|
|
type: "group",
|
|
justify: "start",
|
|
showLabel: false,
|
|
columns: [
|
|
{
|
|
key: "brand",
|
|
title: "品牌厂家",
|
|
type: "select",
|
|
showAll: true,
|
|
allowCreate: true,
|
|
filterable: true,
|
|
data: () => {
|
|
const row = this.attributes.find(item => item.label == '品牌厂家')
|
|
if(row) {
|
|
return row.options
|
|
}
|
|
return [];
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
key: "materialQuality",
|
|
title: "材质",
|
|
type: "select",
|
|
showAll: true,
|
|
allowCreate: true,
|
|
filterable: true,
|
|
data: () => {
|
|
const row = this.attributes.find(item => item.label == '材质')
|
|
if(row) {
|
|
return row.options
|
|
}
|
|
return [];
|
|
}
|
|
|
|
},
|
|
{
|
|
key: "singleLength",
|
|
title: "单件长度",
|
|
type: "select",
|
|
showAll: true,
|
|
allowCreate: true,
|
|
filterable: true,
|
|
data: () => {
|
|
const row = this.attributes.find(item => item.label == '单件长度')
|
|
if(row) {
|
|
return row.options
|
|
}
|
|
return [];
|
|
}
|
|
|
|
},
|
|
{
|
|
key: "productStandard",
|
|
title: "产品标准",
|
|
type: "select",
|
|
showAll: true,
|
|
allowCreate: true,
|
|
filterable: true,
|
|
data: () => {
|
|
const row = this.attributes.find(item => item.label == '产品标准')
|
|
if(row) {
|
|
return row.options
|
|
}
|
|
return [];
|
|
}
|
|
|
|
},
|
|
],
|
|
},
|
|
|
|
{
|
|
key: "",
|
|
title: "",
|
|
type: "group",
|
|
justify: "start",
|
|
showLabel: false,
|
|
columns: [
|
|
|
|
{
|
|
key: "pricingForm",
|
|
title: "计价形式",
|
|
type: "select",
|
|
showAll: true,
|
|
allowCreate: true,
|
|
filterable: true,
|
|
data: () => {
|
|
const row = this.attributes.find(item => item.label == '计价形式')
|
|
if(row) {
|
|
return row.options
|
|
}
|
|
return [];
|
|
}
|
|
|
|
},
|
|
{
|
|
key: "processStandard",
|
|
title: "加工标准",
|
|
type: "select",
|
|
showAll: true,
|
|
allowCreate: true,
|
|
filterable: true,
|
|
data: () => {
|
|
const row = this.attributes.find(item => item.label == '加工标准')
|
|
if(row) {
|
|
return row.options
|
|
}
|
|
return [];
|
|
}
|
|
|
|
},
|
|
{
|
|
key: "deliveryService",
|
|
title: "交货服务",
|
|
type: "select",
|
|
showAll: true,
|
|
allowCreate: true,
|
|
filterable: true,
|
|
data: () => {
|
|
const row = this.attributes.find(item => item.label == '交货服务')
|
|
if(row) {
|
|
return row.options
|
|
}
|
|
return [];
|
|
}
|
|
|
|
},
|
|
{key: "deliveryTime", title: "交货时限", type: "date",},
|
|
],
|
|
},
|
|
|
|
|
|
|
|
{
|
|
key: "",title: "",type: 'group',showLabel: false, justify: "start",columns:
|
|
[
|
|
{key: "procureNumber", title: "采购数量", type: "number",},
|
|
{
|
|
key: "procureUnit",
|
|
title: "单位",
|
|
type: "select",
|
|
showAll: true,
|
|
allowCreate: true,
|
|
filterable: true,
|
|
data: () => {
|
|
const row = this.attributes.find(item => item.label == '单位')
|
|
if(row) {
|
|
return row.options
|
|
}
|
|
return [];
|
|
}
|
|
|
|
},
|
|
{key: "addressRegion", title: "交货地点", type: "address",},
|
|
{key: "addressDetail", title: "详细地址", type: "textarea",},
|
|
]
|
|
},
|
|
],
|
|
// 表单验证规则
|
|
rules: {
|
|
name:[
|
|
{ required:true, message:'商品不能为空', trigger: ["change","blur"] }
|
|
],
|
|
addressRegion:[
|
|
{ required:true, message:'交货地点不能为空', trigger: ["change","blur"] }
|
|
],
|
|
procureNumber:[
|
|
{ required:true, message:'采购数量不能为空', trigger: ["change","blur"] },
|
|
{ min: 1,type: 'number', message:'采购数量不能小于1', trigger: ["change","blur"] }
|
|
],
|
|
procureUnit:[
|
|
{ required:true, message:'采购数量不能为空', trigger: ["change","blur"] },
|
|
],
|
|
|
|
},
|
|
// add 代表添加 update 代表修改
|
|
formType: "add",
|
|
// 表单是否在请求中
|
|
loading: false,
|
|
// 是否显示表单1 的弹窗
|
|
show: false,
|
|
beforeAction: (formData)=> {
|
|
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
// 表单相关结束-----------------------------------------------------------
|
|
}
|
|
},
|
|
created() {
|
|
this.form1.props.columns[0].title = '商品' + (this.productIndex + 1)
|
|
|
|
vk.callFunction({
|
|
url: 'client/enquiry/attributes/pub/getList',
|
|
title: '请求中...',
|
|
data: {
|
|
|
|
},
|
|
success: (data) => {
|
|
this.attributes = data.rows
|
|
this.attributesLoaded = true
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
watch: {
|
|
"form1.data"(val){
|
|
this.$emit('input', val)
|
|
console.log("this.$emit('input', val.data)");
|
|
},
|
|
value(val) {
|
|
this.form1.data = val
|
|
console.log("this.form1.data = val", val);
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.product-title {
|
|
margin: 10px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
</style> |