delete-modal

介绍

该组件是对本项目中资源删除时选择删除原因的封装，注册为全局组件，任何页面都可使用。传入资源类型与删除接口，即可进行删除操作。

目录结构

└─ src
   └─ components
      └─ DeleteModal          # 删除原因
         ├─ index.js          # 组件注册入口
         └─ index.vue         # 删除模态框组件

组件效果图

源码解析

delete-modal 是使用 el-dialog 弹窗的形式展现，其中删除原因在 /config/delete.js 中配置，与后端对应上；el-dialog 使用了项目中的 mixins 中的 modal.js 混入，以复用一些默认值与方法；
注意，与后端接口约定，当删除原因为 9 时，删除原因值必填。

<!-- append-to-body 属性在删除一些弹窗中的数据时需要设置为 true，如奖项类型设置 -->
<el-dialog
    title="删除原因"
    width="460px"
    custom-class="delete-dialog"
    top="50vh"
    :visible.sync="visible"
    :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody"
    :close-on-click-modal="false"
    :modal="modal"
    @close="close"
  >
</el-dialog>

删除原因表单校验

<el-form-item prop="mark">
   <el-input
   ref="brief"
   type="textarea"
   v-model.trim="form.mark"
   :autosize="{ minRows: 4, maxRows: 5 }"
   maxlength="100"
   show-word-limit
   clearable
   :placeholder="
      form.reason === 9 || !isShowRadio
         ? '删除原因 (必填)'
         : '删除原因 (选填)'
   "
   ></el-input>
</el-form-item>

data() {
	// 自定义表单校验方法
	let checkMark = (rule, value, callback) => {
		// 删除原因为9或者无删除原因选项是，未填写删除原因，则校验失败
		if ((this.form.reason === 9 || !this.isShowRadio) && value === "") {
			callback(new Error("请填写删除原因"));
		} else {
			callback();
		}
	};

	return {
		rules: {
			mark: [
				// 自定义表单校验
				{ validator: checkMark, trigger: "blur" },
			],
		},
	}
}