<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>