|
|
@@ -1,104 +1,102 @@
|
|
|
<template>
|
|
|
<el-form
|
|
|
class="save-form"
|
|
|
- v-bind="{...$attrs, ...$props}"
|
|
|
-
|
|
|
+ v-bind="{ ...$attrs, ...$props }"
|
|
|
v-on="$listeners"
|
|
|
@submit.stop.native="submit"
|
|
|
@reset.stop.native="reset"
|
|
|
ref="form"
|
|
|
>
|
|
|
- <slot/>
|
|
|
+ <slot />
|
|
|
</el-form>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { Searchs } from '@/helpers'
|
|
|
+import { Searchs } from "@/helpers";
|
|
|
export default {
|
|
|
- name: 'save-form',
|
|
|
- props: ['model', 'save-key', 'noclear'],
|
|
|
+ name: "save-form",
|
|
|
+ props: ["model", "save-key", "noclear"],
|
|
|
data() {
|
|
|
return {
|
|
|
- searchs: null
|
|
|
- }
|
|
|
+ searchs: null,
|
|
|
+ };
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
- this.setFormValue()
|
|
|
+ this.setFormValue();
|
|
|
},
|
|
|
methods: {
|
|
|
setFormValue() {
|
|
|
-
|
|
|
- const searchs = new Searchs(this.saveKey || this.$route.path)
|
|
|
- this.searchs = searchs
|
|
|
- const active = searchs.get()
|
|
|
+ const searchs = new Searchs(this.saveKey || this.$route.path);
|
|
|
+ this.searchs = searchs;
|
|
|
+ const active = searchs.get();
|
|
|
for (const key in active.form) {
|
|
|
if (active.form.hasOwnProperty(key)) {
|
|
|
- const item = active.form[key]
|
|
|
- this.model[key] = item
|
|
|
+ const item = active.form[key];
|
|
|
+ this.model[key] = item;
|
|
|
}
|
|
|
}
|
|
|
if (this.saveKey) {
|
|
|
- this.searchs.update(this.$route.path, undefined, 'bind')
|
|
|
+ this.searchs.update(this.$route.path, undefined, "bind");
|
|
|
}
|
|
|
},
|
|
|
submit(evt) {
|
|
|
- evt.stopPropagation()
|
|
|
- evt.stopImmediatePropagation()
|
|
|
- evt.preventDefault()
|
|
|
+ evt.stopPropagation();
|
|
|
+ evt.stopImmediatePropagation();
|
|
|
+ evt.preventDefault();
|
|
|
if (this.saveKey) {
|
|
|
- this.searchs.update(this.$route.path, undefined, 'bind')
|
|
|
+ this.searchs.update(this.$route.path, undefined, "bind");
|
|
|
}
|
|
|
- this.searchs.update(this.model, undefined, 'form')
|
|
|
- // ( new Searchs().searchs)
|
|
|
+ this.searchs.update(this.model, undefined, "form");
|
|
|
+ // ( new Searchs().searchs)
|
|
|
if (this.$listeners.submit) {
|
|
|
- this.$listeners.submit(evt)
|
|
|
+ this.$listeners.submit(evt);
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
reset(evt) {
|
|
|
- evt.stopPropagation()
|
|
|
- evt.stopImmediatePropagation()
|
|
|
- evt.preventDefault()
|
|
|
- let setItemEvent = new Event('watchStorage')
|
|
|
- window.dispatchEvent(setItemEvent)
|
|
|
+ evt.stopPropagation();
|
|
|
+ evt.stopImmediatePropagation();
|
|
|
+ evt.preventDefault();
|
|
|
+ let setItemEvent = new Event("watchStorage");
|
|
|
+ window.dispatchEvent(setItemEvent);
|
|
|
|
|
|
if (this.$listeners.reset) {
|
|
|
if (this.noclear == undefined) {
|
|
|
this.$nextTick(() => {
|
|
|
- this.resetFields()
|
|
|
+ this.resetFields();
|
|
|
// this.setFormValue()
|
|
|
- })
|
|
|
+ });
|
|
|
} else {
|
|
|
- this.resetFields()
|
|
|
+ this.resetFields();
|
|
|
}
|
|
|
- this.$listeners.reset()
|
|
|
+ this.$listeners.reset();
|
|
|
} else {
|
|
|
- this.resetFields()
|
|
|
+ this.resetFields();
|
|
|
}
|
|
|
},
|
|
|
- save(search = null, type = 'form') {
|
|
|
- search = search ? search : this.model
|
|
|
- this.searchs.update(search, undefined, type)
|
|
|
+ save(search = null, type = "form") {
|
|
|
+ search = search ? search : this.model;
|
|
|
+
|
|
|
+ this.searchs.update(search, undefined, type);
|
|
|
},
|
|
|
validate(FC) {
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- FC(valid)
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ FC(valid);
|
|
|
if (valid) {
|
|
|
- this.searchs.update(this.model, undefined, 'form')
|
|
|
+ this.searchs.update(this.model, undefined, "form");
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
resetFields() {
|
|
|
- this.$refs.form.resetFields()
|
|
|
- this.searchs.update(this.model, undefined, 'form')
|
|
|
- this.searchs.update({}, undefined, 'page')
|
|
|
- }
|
|
|
+ this.$refs.form.resetFields();
|
|
|
+ this.searchs.update(this.model, undefined, "form");
|
|
|
+ this.searchs.update({}, undefined, "page");
|
|
|
+ },
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-.save-form{
|
|
|
- ::v-deep .el-input__inner{
|
|
|
+.save-form {
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
width: 180px;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
@@ -106,22 +104,21 @@ export default {
|
|
|
::v-deep .el-select {
|
|
|
width: 100%;
|
|
|
}
|
|
|
- ::v-deep .el-date-editor.el-input{
|
|
|
+ ::v-deep .el-date-editor.el-input {
|
|
|
width: 180px;
|
|
|
}
|
|
|
- ::v-deep .el-form-item__content .el-col {
|
|
|
+ ::v-deep .el-form-item__content .el-col {
|
|
|
width: 180px;
|
|
|
}
|
|
|
- ::v-deep .el-col.line{
|
|
|
- width: 15px!important;
|
|
|
+ ::v-deep .el-col.line {
|
|
|
+ width: 15px !important;
|
|
|
text-align: center;
|
|
|
}
|
|
|
- ::v-deep .el-date-editor--daterange{
|
|
|
+ ::v-deep .el-date-editor--daterange {
|
|
|
width: 375px;
|
|
|
}
|
|
|
- ::v-deep .el-form-item__content .el-col:last-child .el-form-item{
|
|
|
+ ::v-deep .el-form-item__content .el-col:last-child .el-form-item {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
</style>
|
mo