<template>
|
<div class="add-common">
|
<el-dialog title="编辑产品属性" :before-close="handleClose" width="40%" :visible.sync="modelObj.update">
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini">
|
<div class="basic-info">
|
<el-form-item label="属性名称" prop="name">
|
<el-input placeholder="请填写属性名称" v-model="ruleForm.name" style="width: 100%"></el-input>
|
</el-form-item>
|
<el-form-item label="值类型" prop="dataType">
|
<el-select v-model="ruleForm.dataType" placeholder="请选择值类型" @change="OptionChange" style="width: 100%">
|
<el-option label="字符串" :value="1"></el-option>
|
<el-option label="int" :value="2"></el-option>
|
<el-option label="下拉框" :value="3"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="使用者" prop="entityType">
|
<el-select v-model="ruleForm.entityType" placeholder="请选择使用者" style="width: 100%">
|
<el-option label="物料" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-show="showSelect">
|
<el-button @click="addDomain" size="small">新增select-option</el-button>
|
</el-form-item>
|
<div v-show="showSelect">
|
<el-form-item
|
v-for="(selectValue, index) in ruleForm.selectValues"
|
:key="selectValue.key"
|
:label="'option' + index"
|
:prop="'selectValues.' + index + '.value'"
|
:rules="{
|
required: true,
|
message: 'option不能为空',
|
trigger: 'blur',
|
}"
|
>
|
<div style="display: flex">
|
<el-input v-model="selectValue.value"></el-input>
|
<el-button @click.prevent="removeDomain(selectValue)">删除</el-button>
|
</div>
|
</el-form-item>
|
</div>
|
</div>
|
</el-form>
|
<!-- 尾 -->
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" size="small" @click="saveClick('ruleForm')">保存</el-button>
|
<el-button size="small" @click="modelObj.update = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { updateAttribut } from '@/api/product/attributeManage'
|
export default {
|
name: 'UpdatePage',
|
props: {
|
modelObj: {
|
type: Object,
|
default: () => {
|
return {
|
add: false,
|
update: false,
|
}
|
},
|
},
|
ruleForm: {
|
require: true,
|
type: Object,
|
},
|
},
|
components: {},
|
computed: {},
|
|
data() {
|
return {
|
showSelect: false,
|
rules: {
|
name: [
|
{
|
required: true,
|
message: '属性名称不能为空',
|
trigger: 'blur',
|
},
|
],
|
dataType: [
|
{
|
required: true,
|
message: '值类型不能为空',
|
trigger: 'blur',
|
},
|
],
|
entityType: [
|
{
|
required: true,
|
message: '使用者不能为空',
|
trigger: 'blur',
|
},
|
],
|
},
|
}
|
},
|
created() {
|
if (this.ruleForm.dataType == 3) {
|
this.showSelect = true
|
}
|
},
|
methods: {
|
// 关闭
|
handleClose() {
|
this.modelObj.update = false
|
},
|
|
//数据处理
|
saveParams() {
|
let params = {
|
id:this.ruleForm.ID,
|
name: this.ruleForm.name,
|
dataType: this.ruleForm.dataType,
|
entityType: this.ruleForm.entityType,
|
}
|
let arr = []
|
if (this.ruleForm.dataType == 3) {
|
this.ruleForm.selectValues.forEach(function (value, index, array) {
|
arr.push(value.value)
|
})
|
}
|
|
params.selectValues = arr
|
return params
|
},
|
//保存
|
saveClick(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
const params = this.saveParams()
|
updateAttribut(params).then((res) => {
|
if (res.code === 200) {
|
this.modelObj.update = false
|
this.$message.success('编辑成功!')
|
this.$emit('refresh')
|
} else {
|
this.$message.warning(res.msg ? res.msg : '编辑失败!')
|
}
|
})
|
}
|
})
|
},
|
|
OptionChange(value) {
|
if (value == 3) {
|
this.ruleForm.selectValues = [
|
{
|
value: '',
|
key: Date.now(),
|
},
|
]
|
this.showSelect = true
|
} else {
|
this.ruleForm.selectValues = []
|
this.showSelect = false
|
|
}
|
},
|
addDomain() {
|
this.ruleForm.selectValues.push({
|
value: '',
|
key: Date.now(),
|
})
|
},
|
|
removeDomain(item) {
|
var index = this.ruleForm.selectValues.indexOf(item)
|
if (index !== -1) {
|
this.ruleForm.selectValues.splice(index, 1)
|
}
|
},
|
},
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.dialog-header {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
color: #333;
|
.header_btns {
|
margin-left: auto;
|
margin-right: 60px;
|
.btn {
|
cursor: no-drop;
|
}
|
}
|
}
|
.content-btn {
|
height: 37px;
|
line-height: 37px;
|
padding-left: 20px;
|
border-bottom: 1px solid #e9e9e9;
|
}
|
.basic-info {
|
height: calc(100% - 80px);
|
margin: 20px;
|
.pre-item {
|
display: flex;
|
justify-content: space-between;
|
}
|
}
|
</style>
|
|
