mirror of
https://gitee.com/ZhongBangKeJi/crmeb_java.git
synced 2026-04-30 22:11:25 +08:00
我们发布啦
This commit is contained in:
张乐
269
admin/src/components/attrFrom/index.vue
Normal file
269
admin/src/components/attrFrom/index.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<!--<el-dialog-->
|
||||
<!--title="属性规则"-->
|
||||
<!--:visible.sync="dialogVisible"-->
|
||||
<!--width="800px"-->
|
||||
<!--:before-close="handleCloseModel"-->
|
||||
<!-->-->
|
||||
<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
|
||||
}
|
||||
},
|
||||
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: '',
|
||||
formDynamicNameData: [],
|
||||
isBtn: false,
|
||||
formDynamicName: [],
|
||||
results: [],
|
||||
result: [],
|
||||
ids: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentRow: {
|
||||
handler: function(val, oldVal) {
|
||||
this.formDynamic = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
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
|
||||
}):attrCreatApi(data).then(res => {
|
||||
this.$message.success('提交成功');
|
||||
this.$msgbox.close()
|
||||
this.$emit('getList');
|
||||
this.clear();
|
||||
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>
|
||||
Reference in New Issue
Block a user