278 lines
8.2 KiB
Vue
278 lines
8.2 KiB
Vue
<template>
|
||
<div>
|
||
<el-form ref="formDynamic" size="small" :model="formDynamic" v-loading="loading" :rules="rules" class="attrFrom mb20" label-width="100px" @submit.native.prevent>
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<el-form-item label="规格名称：" prop="ruleName">
|
||
<el-input maxlength="20" v-model="formDynamic.ruleName" placeholder="请输入标题名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col v-for="(item, index) in formDynamic.ruleValue" :key="index" :span="24" class="noForm">
|
||
<el-form-item>
|
||
<div class="acea-row row-middle"><span class="mr5">{{ item.value }}</span><i class="el-icon-circle-close" @click="handleRemove(index)" /></div>
|
||
<div class="rulesBox">
|
||
<el-tag
|
||
v-for="(j, indexn) in item.detail"
|
||
:key="indexn"
|
||
closable
|
||
size="medium"
|
||
:disable-transitions="false"
|
||
class="mb5 mr10"
|
||
@close="handleClose(item.detail,indexn)"
|
||
>
|
||
{{ j }}
|
||
</el-tag>
|
||
<el-input
|
||
v-if="item.inputVisible"
|
||
ref="saveTagInput"
|
||
v-model="item.detail.attrsVal"
|
||
class="input-new-tag"
|
||
size="small"
|
||
@keyup.enter.native="createAttr(item.detail.attrsVal,index)"
|
||
@blur="createAttr(item.detail.attrsVal,index)"
|
||
/>
|
||
<el-button v-else class="button-new-tag" size="small" @click="showInput(item)">+ 添加</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col v-if="isBtn" :span="24" class="mt10" style="padding-left: 0;padding-right: 0;">
|
||
<el-col :span="8">
|
||
<el-form-item label="规格：">
|
||
<el-input v-model="attrsName" placeholder="请输入规格" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="规格值：">
|
||
<el-input v-model="attrsVal" placeholder="请输入规格值" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-button type="primary" class="mr10" @click="createAttrName">确定</el-button>
|
||
<el-button @click="offAttrName">取消</el-button>
|
||
</el-col>
|
||
</el-col>
|
||
<Spin v-if="spinShow" size="large" fix />
|
||
</el-row>
|
||
<el-button v-if="!isBtn" type="primary" icon="md-add" class="ml40 mt10" @click="addBtn">添加新规格</el-button>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||
</div>
|
||
</el-form>
|
||
<span class="footer acea-row">
|
||
<el-button @click="resetForm('formDynamic')">取消</el-button>
|
||
<el-button type="primary" :loading="loadingBtn" @click="handleSubmit('formDynamic')">确 定</el-button>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { attrCreatApi, attrEditApi } from '@/api/store'
|
||
export default {
|
||
name: 'CreatAttr',
|
||
props: {
|
||
currentRow: {
|
||
type: Object,
|
||
default: null
|
||
},
|
||
keyNum: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loadingBtn: false,
|
||
loading: false,
|
||
dialogVisible: false,
|
||
inputVisible: false,
|
||
inputValue: '',
|
||
spinShow: false,
|
||
grid: {
|
||
xl: 3,
|
||
lg: 3,
|
||
md: 12,
|
||
sm: 24,
|
||
xs: 24
|
||
},
|
||
modal: false,
|
||
index: 1,
|
||
rules: {
|
||
ruleName: [
|
||
{ required: true, message: '请输入规格名称', trigger: 'blur' }
|
||
]
|
||
},
|
||
formDynamic: {
|
||
ruleName: '',
|
||
ruleValue: []
|
||
},
|
||
attrsName: '',
|
||
attrsVal: '',
|
||
isBtn: false,
|
||
results: [],
|
||
result: [],
|
||
ids: 0
|
||
}
|
||
},
|
||
watch: {
|
||
currentRow: {
|
||
handler: function(val, oldVal) {
|
||
this.formDynamic = val
|
||
},
|
||
immediate: true
|
||
},
|
||
keyNum: {
|
||
deep: true,
|
||
handler(val) {
|
||
if( val>0 ) this.clear()
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.formDynamic.ruleValue.map(item => {
|
||
this.$set(item, 'inputVisible', false)
|
||
})
|
||
},
|
||
methods: {
|
||
resetForm(formName) {
|
||
this.$msgbox.close()
|
||
this.clear()
|
||
this.$refs[formName].resetFields()
|
||
},
|
||
// 添加按钮
|
||
addBtn() {
|
||
this.isBtn = true
|
||
},
|
||
handleClose(item, index) {
|
||
item.splice(index, 1)
|
||
},
|
||
// 取消
|
||
offAttrName() {
|
||
this.isBtn = false
|
||
},
|
||
// 删除
|
||
handleRemove(index) {
|
||
this.formDynamic.ruleValue.splice(index, 1)
|
||
},
|
||
// 添加规则名称
|
||
createAttrName() {
|
||
if (this.attrsName && this.attrsVal) {
|
||
const data = {
|
||
value: this.attrsName,
|
||
detail: [
|
||
this.attrsVal
|
||
]
|
||
}
|
||
this.formDynamic.ruleValue.push(data)
|
||
var hash = {}
|
||
this.formDynamic.ruleValue = this.formDynamic.ruleValue.reduce(function(item, next) {
|
||
/* eslint-disable */
|
||
hash[next.value] ? '' : hash[next.value] = true && item.push(next);
|
||
return item
|
||
}, [])
|
||
this.attrsName = '';
|
||
this.attrsVal = '';
|
||
this.isBtn = false;
|
||
} else {
|
||
this.$message.warning('请添加规格名称');
|
||
}
|
||
},
|
||
// 添加属性
|
||
createAttr (num, idx) {
|
||
if (num) {
|
||
this.formDynamic.ruleValue[idx].detail.push(num);
|
||
var hash = {};
|
||
this.formDynamic.ruleValue[idx].detail = this.formDynamic.ruleValue[idx].detail.reduce(function (item, next) {
|
||
/* eslint-disable */
|
||
hash[next] ? '' : hash[next] = true && item.push(next);
|
||
return item
|
||
}, [])
|
||
this.formDynamic.ruleValue[idx].inputVisible = false
|
||
} else {
|
||
this.$message.warning('请添加属性');
|
||
}
|
||
},
|
||
showInput(item) {
|
||
this.$set(item, 'inputVisible', true)
|
||
},
|
||
// 提交
|
||
handleSubmit (name) {
|
||
const data={
|
||
"id": this.currentRow.id || 0,
|
||
"ruleName": this.formDynamic.ruleName,
|
||
"ruleValue": JSON.stringify(this.formDynamic.ruleValue)
|
||
}
|
||
this.$refs[name].validate((valid) => {
|
||
if (valid) {
|
||
if (this.formDynamic.ruleValue.length === 0) {
|
||
return this.$message.warning('请至少添加一条属性规格！');
|
||
}
|
||
this.loadingBtn = true
|
||
this.loading = true
|
||
setTimeout(() => {
|
||
this.currentRow.id? attrEditApi(data).then(res => {
|
||
this.$message.success('提交成功');
|
||
this.$msgbox.close()
|
||
this.clear();
|
||
this.$emit('getList');
|
||
this.loading = false
|
||
this.loadingBtn = false
|
||
}).catch(() => {
|
||
this.loading = false
|
||
this.loadingBtn = false
|
||
}):attrCreatApi(data).then(res => {
|
||
this.$message.success('提交成功');
|
||
this.$msgbox.close()
|
||
this.$emit('getList');
|
||
this.clear();
|
||
this.loading = false
|
||
this.loadingBtn = false
|
||
}).catch(() => {
|
||
this.loading = false
|
||
this.loadingBtn = false
|
||
})
|
||
}, 1200);
|
||
} else {
|
||
this.loading = false
|
||
this.loadingBtn = false
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
clear () {
|
||
this.$refs['formDynamic'].resetFields();
|
||
this.formDynamic.ruleValue = [];
|
||
this.formDynamic.ruleName=''
|
||
this.isBtn = false;
|
||
this.attrsName = '';
|
||
this.attrsVal = '';
|
||
},
|
||
handleInputConfirm() {
|
||
const inputValue = this.inputValue
|
||
if (inputValue) {
|
||
this.dynamicTags.push(inputValue)
|
||
}
|
||
this.inputVisible = false
|
||
this.inputValue = ''
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.button-new-tag {
|
||
height: 28px;
|
||
line-height: 26px;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
.input-new-tag {
|
||
width: 90px;
|
||
margin-left: 10px;
|
||
vertical-align: bottom;
|
||
}
|
||
.footer{
|
||
justify-content: flex-end;
|
||
}
|
||
</style>
|