<template>
|
<div>
|
<el-dialog :visible.sync="dialogVisible" inline :title="title" v-if="dialogVisible" :close-on-click-modal="false" :modal-append-to-body="false">
|
<el-form size="mini" :model="form" label-width="140px" ref="form" :rules="formRules" class="propMeta">
|
<el-form-item label="属性名称：" prop="propName">
|
<el-input v-model="form.propName" placeholder="请输入属性名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="属性值类型：" prop="propValueType">
|
<el-select placeholder="请选择属性值类型" :disabled="form.propId ? true : false" v-model="form.propValueType" clearable @change="changeType">
|
<el-option v-for="item in propValueTypeArray" :key="item.value" :value="item.value" :label="item.name"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="属性值校验类型：" prop="propValueCheckType" v-show="typeof form.propValueType === 'number' && !isNaN(form.propValueType)">
|
<el-select placeholder="请选择属性值校验类型" :disabled="form.propId ? true : false" v-model="form.propValueCheckType" @change="getCheckExplain" clearable>
|
<el-option v-for="item in checkTypeArray" v-show="item.checkType !== 99" :key="item.checkType" :value="item.checkType" :label="item.checkTypeName"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-show="form.propValueCheckExplain">
|
<el-tag class="propValueCheckExplain" type="warning">{{form.propValueCheckExplain}}</el-tag>
|
</el-form-item>
|
<el-form-item label="默认属性值：" v-if="!form.propId" prop="defaultPropValue">
|
<el-input v-model="form.defaultPropValue" placeholder="请输入默认属性值" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="属性值：" v-if="form.propId">
|
{{getPropValue()}}
|
</el-form-item>
|
<el-form-item label="属性值单位：" prop="propUnit">
|
<el-input v-model="form.propUnit" placeholder="请输入属性值单位" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="属性描述：" prop="propDesc">
|
<el-input v-model="form.propDesc" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入属性描述" clearable></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="submit" type="primary" :loading="loading">保存</el-button>
|
<el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import productPropMetaApi from '@/api/productmanagement/productPropMeta'
|
import { objectCopy } from '@/utils/objectCopyHelper'
|
import { getStrLength } from '@/utils/getStrLength'
|
|
export default {
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: '添加属性'
|
},
|
row: {
|
type: Object,
|
default: function () {
|
return {}
|
}
|
}
|
},
|
data () {
|
return {
|
dialogVisible: false,
|
checkTypeArray: [], // 校验类型数组
|
loading: false,
|
form: {
|
propName: null,
|
propValueType: null,
|
propValueCheckType: null,
|
propUnit: null,
|
propDesc: null,
|
propValueCheckExplain: null
|
},
|
propValueTypeArray: [
|
{
|
name: '字符类型',
|
value: 0
|
},
|
{
|
name: '数字类型',
|
value: 1
|
},
|
{
|
name: '时间类型',
|
value: 2
|
},
|
{
|
name: '日期类型',
|
value: 3
|
},
|
{
|
name: '日期时间型',
|
value: 4
|
}
|
],
|
formRules: {
|
propName: [
|
{ required: true, message: '请输入属性名称', trigger: 'change' }, {
|
validator: (rule, value, callback) => {
|
callback(getStrLength(rule, value, callback, 128, '属性名称'))
|
}
|
}],
|
propValueType: [{ required: true, message: '请选择属性值类型', trigger: 'change' }],
|
propValueCheckType: [{ required: true, message: '请选择属性值校验类型', trigger: 'change' }],
|
propUnit: {
|
validator: (rule, value, callback) => {
|
callback(getStrLength(rule, value, callback, 8, '属性值单位'))
|
}
|
},
|
propDesc: {
|
validator: (rule, value, callback) => {
|
callback(getStrLength(rule, value, callback, 1024, '属性描述'))
|
}
|
},
|
defaultPropValue: [
|
{ required: true, message: '请输入默认属性值', trigger: 'change' },
|
{ max: 128, message: '默认属性值最多只能输入 128 字', trigger: 'change' }
|
]
|
}
|
}
|
},
|
watch: {
|
row: {
|
handler (newValue, oldValue) {
|
if (newValue.propId) {
|
this.form = objectCopy(this.row)
|
if (typeof this.form.propValueType === 'number' && !isNaN(this.form.propValueType)) {
|
this.changeType(this.form.propValueType)
|
this.form.propValueCheckType = this.row.propValueCheckType
|
this.form.propValueCheckExplain = this.row.propValueCheckExplain
|
}
|
}
|
},
|
deep: true
|
},
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
show: function (newShow, oldShow) {
|
this.dialogVisible = newShow
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
dialogVisible: function (newDialogShow, oldDialogShow) {
|
if (!newDialogShow) {
|
for (const i in this.form) {
|
this.form[i] = null
|
}
|
this.$emit('update:show', newDialogShow)
|
}
|
}
|
},
|
methods: {
|
/**
|
* 获取属性值
|
*/
|
getPropValue () {
|
let str = null
|
str = this.form.ecProductPropMetaValueList.map(item => { return item.propValue }).join('，')
|
return str
|
},
|
/**
|
* 获取校验说明
|
*/
|
getCheckExplain (val) {
|
if (typeof val === 'number' && !isNaN(val)) {
|
this.checkTypeArray.forEach(item => {
|
if (item.checkType === val) {
|
this.form.propValueCheckExplain = item.explain
|
}
|
})
|
} else {
|
this.form.propValueCheckExplain = null
|
}
|
},
|
/**
|
*选择属性值类型时if
|
*/
|
changeType (val) {
|
this.form.propValueCheckType = null
|
this.form.propValueCheckExplain = null
|
if (typeof val === 'number' && !isNaN(val)) {
|
productPropMetaApi.getValueCheckTypes({ valueType: val }).then(res => {
|
this.checkTypeArray = res.data
|
})
|
}
|
},
|
/**
|
* 提交
|
*/
|
submit () {
|
this.$refs.form.validate().then(res => {
|
this.loading = true
|
let resDate = null
|
if (this.form.propId) {
|
resDate = productPropMetaApi.updateInfo(this.form)
|
} else {
|
resDate = productPropMetaApi.addInfo(this.form)
|
}
|
resDate.then(res => {
|
if (res && res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.loading = false
|
this.$parent.queryData()
|
this.dialogVisible = false
|
} else {
|
this.loading = false
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.propMeta {
|
.el-select{
|
width: 100%;
|
}
|
.propValueCheckExplain {
|
word-break: break-all;
|
word-wrap: break-word;
|
white-space: normal;
|
height: auto;
|
}
|
}
|
|
</style>
|
