<template> <el-dialog title="申请新性能" :visible.sync="applyItemVisible" :before-close="hideApplyItem" width="750px" v-if="applyItemVisible" > <el-form label-width="100px" :ref="pageName" :rules="rules" :model="applyItem" :validate-on-rule-change="false" > <el-form-item label="申请新性能" prop="items"> <el-checkbox-group v-model="applyItem.items"> <el-checkbox v-for="(item, key) in options.webConfigKV.item" :label="key" :key="key" :disabled="buyItems.includes(key)" >{{ item }}</el-checkbox > </el-checkbox-group> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="hideApplyItem">取 消</el-button> <el-button type="primary" @click="save" :disabled="btnDisabled" >确 定</el-button > </div> </el-dialog></template><script>import { ProductApi } from "@product/api/index";import { Rules } from "@product/mixin/rules";export default { name: "ApplyItem", mixins: [Rules], props: { applyItemVisible: { type: Boolean, }, options: {}, buyItems: { type: Array, }, }, data() { return { pageName: "applyItem", tips: false, btnDisabled: false, applyItem: { items: [], }, rulesInfo: { items: "请抉择须要申请的性能", }, }; }, methods: { hideApplyItem() { this.$emit("hide"); }, save() { if (!this.checkRules()) return false; ProductApi.applyItem .apply({ ...this.applyItem }) .then((res) => { if (res.status == "200") { let result = res.result; this.$message.success("申请胜利！"); this.hideApplyItem(); } }) .finally(() => { this.btnDisabled = false; }); }, }, mounted() { this.setRules(); },};</script>