|
@@ -1,98 +1,123 @@
|
|
|
<template>
|
|
|
- <el-dialog
|
|
|
- v-if="modal.show"
|
|
|
- :visible.sync="modal.show"
|
|
|
- class="alert-modalWork"
|
|
|
- :width="modal.width"
|
|
|
- :fullscreen="modal.fullscreen"
|
|
|
- :custom-class="modal.customClass || 'alert-el-modal'"
|
|
|
- :class="{ 'is-modal': !modal.fullscreen, newpop: modal.class }"
|
|
|
- :append-to-body="true"
|
|
|
- :lock-scroll="true"
|
|
|
- @closed="close"
|
|
|
- ref="alertModal"
|
|
|
- top="0"
|
|
|
- :close-on-click-modal="false"
|
|
|
- :close-on-press-escape="false"
|
|
|
+ <el-dialog
|
|
|
+ v-if="modal.show"
|
|
|
+ :visible.sync="modal.show"
|
|
|
+ class="alert-modalWork"
|
|
|
+ :width="modal.width"
|
|
|
+ :fullscreen="modal.fullscreen"
|
|
|
+ :custom-class="modal.customClass || 'alert-el-modal'"
|
|
|
+ :class="{ 'is-modal': !modal.fullscreen, newpop: modal.class }"
|
|
|
+ :append-to-body="true"
|
|
|
+ :lock-scroll="true"
|
|
|
+ @closed="close"
|
|
|
+ ref="alertModal"
|
|
|
+ top="0"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ >
|
|
|
+ <div slot="title">
|
|
|
+ <div class="title_row">
|
|
|
+ <strong class="title">{{ modal.title }}</strong>
|
|
|
+ {{ modal.star }}
|
|
|
+ <span v-if="modal.hideStar"></span>
|
|
|
+ <span v-else-if="modal.title && !modal.notip"> (<span class="color-danger">*为必填项</span>) </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="content"
|
|
|
+ v-scroll
|
|
|
>
|
|
|
- <div slot="title">
|
|
|
- <div class="title_row">
|
|
|
- <strong class="title">{{ modal.title }}</strong>
|
|
|
- {{ modal.star }}
|
|
|
- <span v-if="modal.hideStar"></span>
|
|
|
- <span v-else-if="modal.title && !modal.notip"> (<span class="color-danger">*为必填项</span>) </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content" v-scroll>
|
|
|
- <component :id="modal.id" :is="modal.component" :params="modal.props" :ref="modal.id" @close="close"></component>
|
|
|
- </div>
|
|
|
- <span slot="footer" class="dialog-footer" v-if="!modal.fullscreen || modal.showFooter">
|
|
|
- <el-button @click="alertReset(modal.id)" class="reset" v-if="modal.showResetButton">重置</el-button>
|
|
|
- <el-button @click="close" class="reset" v-if="!modal.showCancelButton">{{ modal.cancelButtonText || '取消' }}</el-button>
|
|
|
- <el-button type="primary" v-if="!modal.showConfirmButton" @click="submit(modal.id)">{{
|
|
|
+ <component
|
|
|
+ :id="modal.id"
|
|
|
+ :is="modal.component"
|
|
|
+ :params="modal.props"
|
|
|
+ :ref="modal.id"
|
|
|
+ @close="close"
|
|
|
+ ></component>
|
|
|
+ </div>
|
|
|
+ <span
|
|
|
+ slot="footer"
|
|
|
+ class="dialog-footer"
|
|
|
+ v-if="!modal.fullscreen || modal.showFooter"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="alertReset(modal.id)"
|
|
|
+ class="reset"
|
|
|
+ v-if="modal.showResetButton"
|
|
|
+ >重置</el-button>
|
|
|
+ <el-button
|
|
|
+ @click="close"
|
|
|
+ class="reset"
|
|
|
+ v-if="!modal.showCancelButton"
|
|
|
+ >{{ modal.cancelButtonText || '取消' }}</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-if="!modal.showConfirmButton"
|
|
|
+ @click="submit(modal.id)"
|
|
|
+ >{{
|
|
|
modal.confirmButtonText || '保存'
|
|
|
}}</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
const preventBrowserBack = () => {
|
|
|
- history.pushState(null, null, document.URL);
|
|
|
+ history.pushState(null, null, document.URL);
|
|
|
};
|
|
|
export default {
|
|
|
- name: 'work-modal',
|
|
|
- props: {
|
|
|
- params: {
|
|
|
- type: Object,
|
|
|
- default() {
|
|
|
- return {};
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // modal:{}
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- modal() {
|
|
|
- let obj = this.params;
|
|
|
- if (obj && obj.height) {
|
|
|
- this.$nextTick(() => {
|
|
|
- if (this.$refs.alertModal && this.$refs.alertModal.$el && this.$refs.alertModal.$el.childNodes) {
|
|
|
- this.$refs.alertModal.$el.childNodes[0].style.height = obj.height;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- if (obj.show) {
|
|
|
- history.pushState(null, null, document.URL);
|
|
|
- window.addEventListener('popstate', preventBrowserBack, false);
|
|
|
- } else {
|
|
|
- window.removeEventListener('popstate', preventBrowserBack);
|
|
|
- }
|
|
|
- return obj;
|
|
|
- }
|
|
|
+ name: 'work-modal',
|
|
|
+ props: {
|
|
|
+ params: {
|
|
|
+ type: Object,
|
|
|
+ default () {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // modal:{}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ modal () {
|
|
|
+ let obj = this.params;
|
|
|
+ if (obj && obj.height) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.alertModal && this.$refs.alertModal.$el && this.$refs.alertModal.$el.childNodes) {
|
|
|
+ this.$refs.alertModal.$el.childNodes[0].style.height = obj.height;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (obj.show) {
|
|
|
+ history.pushState(null, null, document.URL);
|
|
|
+ window.addEventListener('popstate', preventBrowserBack, false);
|
|
|
+ } else {
|
|
|
+ window.removeEventListener('popstate', preventBrowserBack);
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ close () {
|
|
|
+ this.$store.dispatch('delPopupWork', this.modal.id);
|
|
|
},
|
|
|
- watch: {},
|
|
|
- methods: {
|
|
|
- close() {
|
|
|
- this.$store.dispatch('delPopupWork', this.modal.id);
|
|
|
- },
|
|
|
- // 弹窗重置,执行弹出组件的reset方法
|
|
|
- alertReset(id) {
|
|
|
- const component = this.$refs[id];
|
|
|
- component.reset && component.reset();
|
|
|
- },
|
|
|
- submit(id) {
|
|
|
- const component = this.$refs[id];
|
|
|
- component.submit && component.submit();
|
|
|
- }
|
|
|
+ // 弹窗重置,执行弹出组件的reset方法
|
|
|
+ alertReset (id) {
|
|
|
+ const component = this.$refs[id];
|
|
|
+ component.reset && component.reset();
|
|
|
},
|
|
|
- created() {
|
|
|
- // debugger
|
|
|
- // this.modal=this.params;
|
|
|
+ submit (id) {
|
|
|
+ const component = this.$refs[id];
|
|
|
+ component.submit && component.submit();
|
|
|
}
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ // debugger
|
|
|
+ // this.modal=this.params;
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|