<template> <div class="form-wrap" v-if="visible" :style="style" ref="formWrap"> <slot name="header">编辑</slot> <el-form ref="resetForm" :model="resetForm" :inline="isInline" :rules="rules" class="demo-form-inline edit-form" :label-position="labelPosition" label-width="120px" > <el-form-item v-for="(item,key,index) in form" :label="item.label" :key="key+index" :prop="key" :class="{'item-oneline':item.oneline,'item-inline-50': isInline}" > <el-input v-if="item.filed=='input'" v-model="resetForm[key]" :disabled="item.isDisable" :placeholder="item.placeholder" :show-password="item.pwd" label="left" ></el-input> <el-select v-else-if="item.filed=='select'" v-model="resetForm[key]" :multiple="item.multiple" > <el-option v-for="(items) in item.options " :key="items.inputValue" v-model="items.inputValue" :label="items.label" ></el-option> </el-select> <el-date-picker v-else-if="item.filed=='date'" type="date" v-model="resetForm[key]" :label="item.label" placeholder="抉择工夫" :key="item.inputValue" style="width: 80%;" ></el-date-picker> <el-date-picker v-else-if="item.filed=='datetime'" type="datetime" v-model="resetForm[key]" :label="item.label" placeholder="抉择日期" :key="item.inputValue" style="width: 80%;" ></el-date-picker> <el-switch v-else-if="item.filed=='switch'" v-model="resetForm[key]" :active-value="item.active" :inactive-value="item.inactive" ></el-switch> <el-radio-group v-else-if="item.filed=='radio'" v-model="resetForm[key]"> <el-radio v-for="(item) in item.options" :label="item.inputValue" :key="item.inputValue" >{{item.label}}</el-radio> </el-radio-group> <el-checkbox-group v-else-if="item.filed=='checkbox'" v-model="resetForm[key]"> <el-checkbox v-for="(items) in item.options" :label="items.label" :name="item.type" :key="items.label+items.inputValue" ></el-checkbox> </el-checkbox-group> <el-input v-else-if="item.filed=='textarea'" type="textarea" v-model="resetForm[key]" :rows="item.rows" :placeholder="item.placeholder" style="width:100%" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="close">{{cancelText}}</el-button> <el-button type="primary" @click="send('resetForm')">{{submitText}}</el-button> </div> </div></template><script>export default { props: { visible: { type: Boolean, default: false }, form: {}, query: {} }, data() { return { resetForm: {}, rules: {}, style: "", isInline: false, labelPosition: "right", submitText: "确 定", cancelText: "取 消" }; }, created() {}, methods: { initForm() { let data = this.form; let objForm = {}; let objRules = {}; let _this = this; let { style, isInline, labelPosition, submitText, cancelText } = this.query; this.style = style || ""; this.labelPosition = labelPosition || "top"; this.isInline = isInline || false; this.submitText = submitText || "确 定"; this.cancelText = cancelText || "取 消"; Object.keys(data).map((item, index, key) => { objForm[item] = data[item]["inputValue"]; let rules = data[item]["rules"]; if (rules) { if (rules == "required") { if (data[item]["filed"] == "checkbox") { objRules[item] = [ { type: "array", required: true, message: `请至多抉择一个${data[item]["label"]}`, trigger: "change" } ]; } else if (data[item]["filed"] == "date") { objRules[item] = [ { required: true, message: `请抉择${data[item]["label"]}`, trigger: "change" } ]; } else { objRules[item] = [ { required: true, message: `请输出${data[item]["label"]}`, trigger: "blur" } ]; } } else if (rules == "phone") { objRules[item] = [ { required: true, message: "请输出手机号码", trigger: "blur" }, { validator: function(rule, value, callback) { if ( /^1[34578]\d{9}$|(^5\d{2,3}-\d{3,9}$)/.test(value) == false ) { callback(new Error("请输出正确的手机号")); } else { callback(); } }, trigger: "blur" } ]; } else if (rules == "num") { objRules[item] = [ { required: true, message: "请输出数字", trigger: "blur" }, { validator: function(rule, value, callback) { if (/^\d+$|^\d+[.]?\d+$/.test(value) == false) { callback(new Error("请输出数字")); } else { callback(); } }, trigger: "blur" } ]; } else if (rules == "pwd") { objRules[item] = [ { required: true, message: "请输出明码", trigger: "blur" }, { validator: function(rule, value, callback) { if ( !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,20}$/.test( value ) ) { callback( new Error( "请输出8-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至多蕴含两种" ) ); } else { callback(); } }, trigger: "blur" } ]; } else if (rules == "checkpwd") { objRules[item] = [ { required: true, message: "请输出明码", trigger: "blur" }, { validator: function(rule, value, callback) { if (value !== _this.resetForm[data[item]["compare"]]) { callback(new Error("两次输出明码不统一!")); } else { callback(); } }, trigger: "blur" } ]; } else { objRules[item] = rules; } } }); this.resetForm = { ...objForm }; this.rules = { ...objRules }; }, destoryForm() { this.resetForm = {}; this.rules = {}; }, createdOverBg() { let div = document.createElement("div"); let overClass = document.createAttribute("class"); overClass.value = "over-bg"; div.setAttributeNode(overClass); document .getElementsByTagName("body") .item(0) .appendChild(div); }, close() { this.closeDailog(); this.$emit("close-edit-form", ""); }, closeDailog() { let overDiv = document.getElementsByClassName("over-bg")[0]; if (overDiv) { overDiv.parentNode.removeChild(overDiv); } this.destoryForm(); }, send(formName) { this.$refs.resetForm.validate((valid) => { if (valid) { this.$emit("close-edit-form", this.resetForm); this.closeDailog(); } else { return false; } }); } }, watch: { form: { immediate: true, handler(val) { //this.form=val; } }, visible: { handler(val) { if (val) { this.createdOverBg(); this.initForm(); } else { } } } }};</script><style scoped>.item-inline-50 { width: 50%; box-sizing: border-box; padding: 0px 0px 0px 8px; margin-right: 0px !important ;}.item-oneline { display: block; width: 90%;}.dialog-footer { text-align: center;}.form-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 50%; overflow: auto; margin-top: 12vh; padding: 16px; z-index: 2001; width: 50vw; max-height: 85vh; height: fit-content; box-sizing: border-box; border-radius: 16px; background: white;}.edit-form { height: fit-content; overflow: auto; /* padding-bottom: 44px; */ max-height: 70vh;}.form-wrap::-webkit-scrollbar,.edit-form::-webkit-scrollbar { /*滚动条整体款式*/ width: 1px; /*高宽别离对应横竖滚动条的尺寸*/ height: 1px;}</style>