202 lines
4.8 KiB
Vue
202 lines
4.8 KiB
Vue
<template>
|
||
<div>
|
||
<obj-modal
|
||
ref="modal"
|
||
labelWidth="150px"
|
||
:modalConfig="modalConfig"
|
||
:modalData="modalData"
|
||
:modalHandles="modalHandles"
|
||
>
|
||
<div slot="dialog__content">
|
||
<el-alert class="Example" title="需要注意的事项" type="info">
|
||
<template slot="title">
|
||
<el-form label-width="80px">
|
||
<el-form-item label="示例：">
|
||
<div class="iconSize">属性名称：温度</div>
|
||
<div class="iconSize">属性内容：常温；冷饮</div>
|
||
<div class="iconSize">顾客下单时可选择【常温】 或 【冷饮】</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
</el-alert>
|
||
<el-form
|
||
:model="ruleForm"
|
||
:rules="rules"
|
||
ref="ruleForm"
|
||
label-width="100px"
|
||
class="demo-ruleForm"
|
||
>
|
||
<el-form-item label="属性名称：" prop="name">
|
||
<el-input
|
||
style="width: 80%"
|
||
placeholder="请输入属性名称"
|
||
v-model="ruleForm.name"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="属性内容：" prop="value">
|
||
<el-tag
|
||
:key="tag"
|
||
v-for="tag in ruleForm.value"
|
||
closable
|
||
:disable-transitions="false"
|
||
@close="handleClose(tag)"
|
||
>
|
||
{{ tag }}
|
||
</el-tag>
|
||
<el-input
|
||
class="input-new-tag"
|
||
v-if="inputVisible"
|
||
v-model="inputValue"
|
||
ref="saveTagInput"
|
||
size="small"
|
||
@keyup.enter.native="handleInputConfirm"
|
||
@blur="handleInputConfirm"
|
||
>
|
||
</el-input>
|
||
<el-button
|
||
v-else
|
||
class="button-new-tag"
|
||
size="small"
|
||
@click="showInput"
|
||
>+添加内容</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</obj-modal>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { debounce, cloneDeep } from "lodash";
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
isAdd: true,
|
||
//表格属性
|
||
modalConfig: {
|
||
title: "属性",
|
||
show: false,
|
||
width: "80%",
|
||
},
|
||
modalData: {},
|
||
inputValue: "",
|
||
inputVisible: false,
|
||
ruleForm: {
|
||
name: "",
|
||
value: [],
|
||
},
|
||
rules: {
|
||
name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
|
||
value: [
|
||
{
|
||
required: true,
|
||
message: "请输入属性内容",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
queryTableData(pageNo, pageSize) {},
|
||
toggle(e) {
|
||
if (this.modalConfig.show == false) {
|
||
this.modalConfig.show = true;
|
||
} else {
|
||
this.modalConfig.show = false;
|
||
}
|
||
if (e) {
|
||
this.init(cloneDeep(e.row));
|
||
}
|
||
return {
|
||
add: () => {
|
||
this.modalConfig.title = "添加属性";
|
||
this.$nextTick(() => {
|
||
this.modalData = {};
|
||
this.$refs.ruleForm.resetFields();
|
||
});
|
||
this.isAdd = true;
|
||
},
|
||
update: () => {
|
||
this.isAdd = false;
|
||
},
|
||
};
|
||
},
|
||
init(row) {
|
||
this.modalData = row;
|
||
},
|
||
handleClose(tag) {
|
||
this.ruleForm.value.splice(this.ruleForm.value.indexOf(tag), 1);
|
||
},
|
||
//聚焦
|
||
showInput() {
|
||
this.inputVisible = true;
|
||
this.$nextTick((_) => {
|
||
this.$refs.saveTagInput.$refs.input.focus();
|
||
});
|
||
},
|
||
handleInputConfirm() {
|
||
let inputValue = this.inputValue;
|
||
if (inputValue) {
|
||
this.ruleForm.value.push(inputValue);
|
||
}
|
||
this.inputVisible = false;
|
||
this.inputValue = "";
|
||
},
|
||
},
|
||
computed: {
|
||
modalHandles() {
|
||
return [
|
||
{
|
||
label: "取消",
|
||
handle: () => {
|
||
this.toggle();
|
||
},
|
||
},
|
||
{
|
||
label: this.isAdd ? "确认添加" : "确认修改",
|
||
type: "primary",
|
||
loading: this.isLoading,
|
||
// submit: true,
|
||
handle: () => {
|
||
this.$refs.ruleForm.validate((valid) => {
|
||
if (valid) {
|
||
this.$emit("getAttribute", this.ruleForm);
|
||
this.toggle();
|
||
}
|
||
});
|
||
},
|
||
},
|
||
];
|
||
},
|
||
},
|
||
asyncComputed: {},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.Example {
|
||
margin: 0 0 20px 20px;
|
||
width: 80%;
|
||
}
|
||
.iconSize {
|
||
font-size: 15px;
|
||
// padding: 3px;
|
||
}
|
||
.el-tag + .el-tag {
|
||
margin-left: 10px;
|
||
}
|
||
.button-new-tag {
|
||
margin-left: 10px;
|
||
height: 32px;
|
||
line-height: 30px;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
.input-new-tag {
|
||
width: 90px;
|
||
margin-left: 10px;
|
||
vertical-align: bottom;
|
||
}
|
||
</style> |