vue+ Element UI 動態生成表單及校驗

第一次寫博客,菜的一批,只想記錄本身成長道路的一路心血,畢竟快奔三的人轉行過來前端不容易啊.由於喜歡看掘金的博客,大咖不少,因此選擇這裏向前輩看齊. 歡迎吐槽和指正!!!

實現效果:

掘金支持的快捷鍵:

<el-dialog title="分配權益卡" :visible="equityVisible" width="60%" @close="$emit('close', false)" append-to-body>
        <div class="contentBox">
            <div class="content" v-for="(items, mainIndex) in allCardData" :key="mainIndex">
                <div class="close" @click="handleDel(mainIndex)" v-show="allCardData.length > 1">
                    <span class="el-icon-remove"></span>
                </div>
                <div>
                    <el-select
                        v-model="selectItem.organId"
                        @change="queryOrganDatainfo($event, mainIndex, index)"
                        v-for="(selectItem, index) in items.organDtoList"
                        :key="index"
                        :placeholder="'請選擇' + selectItem.name"
                    >
                        <el-option v-for="item in selectItem.list" :key="item.organId" :label="item.organName" :value="item.organId" clearable />
                    </el-select>
                </div>

                <el-form class="cardBox" :model="itemCard" v-for="(itemCard, cardIndex) in items.distributionDtoList" :key="cardIndex">
                    <div class="content_card">
                        <template class="destory">
                            <span class="el-icon-remove" @click="closeBtn(mainIndex, cardIndex)" v-if="items.distributionDtoList.length > 1"></span>
                        </template>
                        <el-form-item>
                            <el-select v-model="itemCard.packageId" @change="queryOrganChange(itemCard.packageId)" @focus="queryOrganCardData(itemCard.packageId)" placeholder="請選擇權益卡">
                                <el-option v-for="item in secondtypeOptions" :key="item.packageId" :label="item.packageName" :value="item.packageId" />
                            </el-select>
                        </el-form-item>

                        <el-form-item
                            prop="numbers"
                            :rules="[
                                { required: true, message: '輸入不能爲空', trigger: ['blur', 'change'] },
                                { validator: (rule, value, callback) => validateSku(rule, itemCard.numbers, callback), trigger: ['blur', 'change'] },
                                { type: 'number', message: '庫存必須爲數字' },
                            ]"
                        >
                            <span>庫存 {{ stock }}</span>
                            <el-input type="numbers" v-model.number="itemCard.numbers" placeholder="請輸入權益卡數量" />
                            <span>剩餘 {{ remain }}</span>
                        </el-form-item>
                    </div>
                    <em class="icon_bar"></em>
                    <el-link type="primary" v-if="items.distributionDtoList.length > 0" :disabled="items.distributionDtoList.length > 1" @click="addCard('cards', mainIndex)">
                        添加權益卡
                    </el-link>
                </el-form>
            </div>
            <div>
                <el-button type="primary" plain @click="addCard('items', allCardData.length)" class="assignBtn">添加分配對象 </el-button>
            </div>
        </div>
        <span slot="footer">
            <el-button @click="$emit('close', false)">取消</el-button>
            <el-button type="primary" @click="confirm">肯定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'DistributeEquityCard', // 分配權益卡
    props: {
        equityVisible: {
            type: Boolean,
            default: false,
        },
        agentData: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data: () => {
        return {
            organId: 1,
            secondOrgan: '',
            threeOrgan: '',
            secondtypeOptions: [],
            threetypeOptions: [],
            stock: '', // 庫存
            remain: '', // 剩餘
            showValidate: false, // 表單校驗
            allCardData: [
                {
                    organDtoList: [
                        {
                            organId: '',
                            name: '省',
                            list: [],
                        },
                        {
                            organId: '',
                            name: '市',
                            list: [],
                        },
                        {
                            organId: '',
                            name: '支公司',
                            list: [],
                        },
                        {
                            organId: '',
                            name: '職場',
                            list: [],
                        },
                    ],
                    distributionDtoList: [
                        {
                            packageId: '',
                            packageName: '',
                            numbers: '',
                        },
                    ],
                },
            ],
        };
    },
    created() {
        this.queryOrganDatainfo();
        this.queryOrganCardData();
    },
    methods: {
        // 獲取職場列表
        queryOrganDatainfo(val, mainIndex, index) {
            // console.log(val, mainIndex, index);
            if (val) {
                this.organId = val;
            }
            this.$store.dispatch('Organize/queryTreeList', { organId: this.organId }).then((res) => {
                if (res.code === 200) {
                    if (val && index < 3) {
                        this.cardData[mainIndex].organDtoList[index + 1].list = res.data;
                    } else {
                        this.cardData[0].organDtoList[0].list = res.data;
                    }
                }
            });
        },
        // 選擇權益卡內存
        queryOrganChange(val) {
            for (const i of this.secondtypeOptions) {
                if (i.packageId === val) {
                    this.stock = i.packageNumber;
                }
            }
        },
        // 獲取權益卡
        queryOrganCardData(val) {
            // console.log('權益卡', val);
            this.$store
                .dispatch('healthPack/queryDistributionType', {
                    organId: this.agentData.organId,
                })
                .then((res) => {
                    const { code, data } = res;
                    if (code === 200) {
                        this.secondtypeOptions = data;
                        // console.log(data.packageNumber);
                        this.stock = data.packageNumber;
                    }
                });
        },
        // 關閉單條權益卡
        closeBtn(mainIndex, cardIndex) {
            // console.log('mainIndex:', mainIndex, 'cardIndex:', cardIndex);
            this.allCardData[mainIndex].distributionDtoList.forEach((v, i) => {
                if (cardIndex === i) {
                    this.allCardData[mainIndex].distributionDtoList.splice(cardIndex, 1);
                }
            });
        },
        // 添加權益卡
        addCard(str, index) {
            // console.log(str, index);
            // 添加分配對象
            if (str === 'items') {
                this.allCardData.push({
                    organDtoList: [
                        {
                            organId: '',
                            name: '省',
                            list: [],
                        },
                        {
                            organId: '',
                            name: '市',
                            list: [],
                        },
                        {
                            organId: '',
                            name: '支公司',
                            list: [],
                        },
                        {
                            organId: '',
                            name: '職場',
                            list: [],
                        },
                    ],
                    distributionDtoList: [
                        {
                            packageId: '',
                            packageName: '',
                            numbers: '',
                        },
                    ],
                });
            } else if (str === 'cards') {
                // 添加權益卡
                this.allCardData[index].distributionDtoList.push({
                    distributionDtoList: {
                        packageId: '',
                        packageName: '',
                        numbers: '',
                    },
                });
            }
        },
        // 刪除分配對象盒子
        handleDel(index) {
            this.allCardData.splice(index, 1);
        },

        // 校驗庫存
        validateSku(rule, value, callback) {
            if (typeof value === 'string') {
                this.remain = Number(this.stock);
                callback(new Error('庫存必須爲數字'));
                return;
            }
            if (value > Number(this.stock)) {
                callback(new Error('數量不能大於庫存'));
                this.remain = Number(this.stock);
            } else {
                this.remain = Number(this.stock) - value;
                callback();
            }
        },
        // 確認按鈕邏輯
        confirm() {},
    },
};
</script>

<style lang="scss" scoped>
.contentBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .content {
        width: 720px;
        // height: 216px;
        margin-bottom: 16px;
        border: 1px dashed #c7ccd9;
        border-radius: 4px;
        padding: 24px 40px;
        position: relative;
        .cardBox {
            margin-top: 16px;
            display: flex;
            flex-direction: row;
            align-items: center;
            .content_card {
                position: relative;
                // width: 458px;
                height: 56px;
                border: 1px dashed #c7ccd9;
                border-radius: 4px;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                padding: 0 10px;
                padding-top: 20px;
            }
            .icon_bar {
                height: 20px;
                width: 1px;
                margin-left: 22px;
                margin-right: 22px;
                background-color: #c7ccd9;
            }
        }
    }
}

.el-icon-remove {
    position: absolute;
    top: 0;
    right: -2px;
    color: #2b6fff;
}
.close {
    position: absolute;
    top: 0;
    right: 0;
}
.el-select {
    width: 148px;
    margin-left: 8px;
}
.el-input {
    width: 148px;
}
/deep/.el-form-item__error {
    left: 33px;
}
複製代碼

關鍵代碼:

參考連接:

推薦 juejin.im/post/5d4932… blog.csdn.net/weixin_4327… blog.csdn.net/weixin_4104… blog.csdn.net/Beamon__/ar… 自定義校驗element官網:element.eleme.io/#/zh-CN/com…