|
|
@@ -0,0 +1,131 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 300px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 60px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div style="color: red; font-size: 12px">
|
|
|
+ <span style="display: inline-block; width: 35px"> </span>
|
|
|
+ 1、标签用于对不同用户群体的区别定价
|
|
|
+ </div>
|
|
|
+ <div style="color: red; font-size: 12px">
|
|
|
+ <span style="display: inline-block; width: 35px"> </span>
|
|
|
+ 2、标签的优先级高于营销方案，所以将用户加入标签后，此用户将优先执行标签的优惠规则，不会再执行营销方案的优惠规则
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ :model="labelForm"
|
|
|
+ ref="labelForm"
|
|
|
+ label-width="80px"
|
|
|
+ size="mini"
|
|
|
+ style="width: 300px; margin: 0 auto"
|
|
|
+ >
|
|
|
+ <el-form-item label="启用标签" prop="labelFlag">
|
|
|
+ <el-radio-group v-model="labelForm.labelFlag">
|
|
|
+ <el-radio label="0">关闭</el-radio>
|
|
|
+ <el-radio label="1">开启</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <div v-if="labelForm.labelFlag==1">
|
|
|
+ <el-form-item
|
|
|
+ v-for="(label, index) in labelForm.labelArr"
|
|
|
+ :label="'标签' + (index + 1)"
|
|
|
+ :key="index"
|
|
|
+ :prop="'labelArr.' + index + '.labelName'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '标签不能为空,不需要请删除此项',
|
|
|
+ trigger: 'blur',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-input v-model="label.labelName" :disabled="editable"></el-input>
|
|
|
+ <el-button @click.prevent="removeLabel(label)" :disabled="editable">删除</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="submitForm('labelForm')"
|
|
|
+ :disabled="editable"
|
|
|
+ >提交</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="addLabel" :disabled="editable">新增</el-button>
|
|
|
+ <el-button type="danger" @click="editLabel">{{editable?'修改标签':'取消'}}</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "Label_AddLabel",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ labelForm: {
|
|
|
+ labelFlag: true,
|
|
|
+ labelArr: [
|
|
|
+ {
|
|
|
+ id: "",
|
|
|
+ labelName: "hah",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "",
|
|
|
+ labelName: "ha151115155h",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "",
|
|
|
+ labelName: "ha151115155h",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ editable: false,
|
|
|
+ tempForm:undefined,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert("submit!");
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ removeLabel(item) {
|
|
|
+ var index = this.labelForm.labelArr.indexOf(item);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.labelForm.labelArr.splice(index, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addLabel() {
|
|
|
+ this.labelForm.labelArr.push({
|
|
|
+ labelName: "",
|
|
|
+ key: Date.now(),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ editLabel(){
|
|
|
+ if(!this.editable){
|
|
|
+ if(this.tempForm !== undefined){
|
|
|
+ console.log('2',this.labelForm)
|
|
|
+ this.labelForm = {...this.tempForm}
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ console.log('2',this.labelForm)
|
|
|
+ this.tempForm = {...this.labelForm};
|
|
|
+ }
|
|
|
+ this.editable = !this.editable;
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+</style>
|
Joe