编辑和新增共用弹框

编辑和新增共用一个弹框,下拉框中的选项不可以重复添加

<el-dialog :title="dialogTitle" center :visible.sync="addVisible" width="30%" :before-close="addClose">
    <el-form ref="addForm" label-width="80px" :model="addLedgerData">
        <el-form-item label="名称" prop="name" :rules="rules.name">
            <el-input v-model="addLedgerData.name" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
            <el-radio-group v-model="addLedgerData.type">
                <el-radio :label="1">分钟</el-radio>
                <el-radio :label="2">小时</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="规则" prop="rules">
            <template v-for="(rule, index) in addLedgerData.rules">
                <div id="rules-box" :key="index" style="margin-bottom: 10px">
                    <el-select v-model="rule.type" style="width: 120px" :disabled="index == 0 ? true : false">
                        <el-option v-for="item in ruleUserType" :key="item.code" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                    <el-input v-model.number="rule.amount" style="width: 90px; margin-left: 10px"></el-input> 元/{{
                    addLedgerData.type == 2 ? '小时' : '分钟'
                    }}
            <el-button v-if="!index == 0" @click="deleteDiv(index)" size="mini" icon="el-icon-delete"></el-button>
                </div>
            </template>
        </el-form-item>
        <el-form-item>
            <el-button type="text" @click="addPartPerson" v-if="addPartPersonBtn === true">添加</el-button>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitHourField">确 定</el-button>
    </span>
</el-dialog>

data(){
    return{
        addVisible: false,
        dialogTitle: '新增',
        addLedgerData: {
            name: '',
            type: 2,
            rules: [
                { type: 99, amount: 0 },
                { type: 1, amount: 0 },
                { type: 3, amount: 0 },
                { type: 6, amount:0 },
            ],
        },
        ruleUserType:{
            {
            code:1,
            name:'草莓'
        },{
            code:2,
            name:'菠萝'
        },{
            code:3,
            name:'香蕉'
        },{
            code:4,
            name:'西瓜'
        }
    }
    hourId:''//记录获取到当前这一行的id
	typeList:[]
}
}

method:{
    //新增
    addRules() {
        this.addLedgerData = {
            name: '',
            type: 1,
            rules: [
                { type: 99, amount: undefined },
                { type: 3, amount: undefined },
            ],
        };
        this.addVisible = true;
        this.dialogTitle = '新建';
    },
        //修改
        modifyHourField(row) {
            //点击弹框中的添加时，最多只能添加八个
            let divLength = this.addLedgerData.rules.length;
            if (divLength === 7) {
                this.addPartPersonBtn = false;
            } else {
                this.addPartPersonBtn = true;
            }
            this.addVisible = true;
            this.dialogTitle = '编辑';
            this.hourId = row.id;

            this.api({
                url: '',
                method: 'post',
                data: {  },
            }).then((res) => {
                this.addLedgerData = res;
                res.rules =  JSON.parse(res.rules)
                res.rules =  res.rules.map(item=>{
                    item.amount = item.amount/100
                    return item
                })
                this.addLedgerData.rules = res.rules;

                // 香蕉放置第一位 select框中固定一个为默认值，不可更改
                let index =this.addLedgerData.rules.indexOf(3) 
                if(index){
                    let first = this.addLedgerData.rules.splice(index,1)[0]
                    this.addLedgerData.rules.unshift(first);
                }
            });
        },
            //确定
            submitHourField(){
                //初始化数组
                this.typeList=[]
                if(this.dialogTitle = '新建'){//新增
                	this.hourId = null
                    //判断下拉框中的值不能出现重复的
                    this.addLedgerData.rules.forEach((element) => {
                        this.typeList.push(element.type);
                    });
                    // 验证重复元素，有重复返回true；否则返回false,有重复则提示不能重复
                    function mm(a) {
                        return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test('\x0f' + a.join('\x0f\x0f') + '\x0f');
                    }
                    mm(this.typeList)
                    let isMM=mm(this.typeList)
                    if(isMM){
                        //提示有重复类目，新增失败
                    }else{
                        //调用后端接口
                    }
                }else{//编辑
                    //重复新增操作
                    this.addLedgerData.rules.forEach((element) => {
                        this.typeList.push(element.type);
                    });
                    function mm(a) {
                        return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test('\x0f' + a.join('\x0f\x0f') + '\x0f');
                    }
                    let isMM = mm(this.typeList);
                    if (isMM === true) {
                        this.$message({
                            type: 'error',
                            message: '类目重复,修改失败',
                        });

                    }else{
                        //
                    }
                }

效果图