1. /*
    2.  * @Description : 对话框混淆
    3.  * @Author      : XH
    4.  * @Date
    5.  * @LastEditors
    6.  * @LastEditTime
    7.  */
    9. import { dialogForm } from '@/components/dialog';
    10. import _ from 'lodash';
    12. export default {
    13.     components: {
    14.         dialogForm
    15.     },
    16.   props: {
    17.       // 是否显示
    18.     visible: {
    19.         type: Boolean,
    20.       default: false
    21.     },
    22.     // 标题
    23.     title: {
    24.         type: String,
    25.       default: '弹窗'
    26.     },
    27.     // 初始化表单参数
    28.         data: {
    29.         type: Object,
    30.       default: () => ({})
    31.     },
    32.     // 配置传参，非表单参数
    33.     config: {
    34.         type: Object,
    35.       default: () => ({})
    36.     }
    37.   },
    38.   data() {
    39.       return {
    40.         // 自定义 可选值：[small/medium/large/custom]
    41.       'size': 'medium',
    42.       'sizeCustom': {},
    44.       // 弹窗配置
    45.       'custom-class': 'el-dialog',
    46.       'appendToBody': true,
    47.       'isFullScreen': false,
    48.       'hasScrollbar': true,    // 是否有滚动条
    49.       'labelWidth': '150px', // 表单的label
    50.       'hasFooterSlot': true, // 是否有底部插槽
    51.       'hasTablePadding': false, // 表格页弹窗 是否需要table的padding
    52.       'titleInfo': '', // 弹窗后的描述
    54.       // 表单相关
    55.       'modalData': {}, // 表单数据
    56.       'modalConfig': {}, // 配置传参
    58.       // 内部参数
    59.       'defaultModalData': {}, // 记录初始表单数据
    60.       'defaultModalConfig': {}, // 配置传参
    61.       'pvt_visible': false // 先请求数据再决定是否渲染
    62.     }
    63.   },
    64.   created() {
    65.       this.defaultModalData = _.cloneDeep(this.modalData);
    66.     this.defaultModalConfig = _.cloneDeep(this.modalConfig);
    67.   },
    68.   methods: {
    69.       /**
    70.      * 弹窗打开之前的回调
    71.      * !!! 说明：主要针对于请求数据之后再确定是否打开情况
    72.      * @return {boolean}
    73.      */
    74.     beforeOpenDialog() {
    75.         return true;
    76.     },
    78.     /**
    79.      * 弹窗打开动画之后的回调
    80.      * 主要解决 打开时获取弹窗内部的 refs
    81.      */
    82.     beforeOpenedDialog() {
    84.     },
    86.     /**
    87.      * 弹窗关闭动画之后的回调
    88.      */
    89.     beforeClosedDialog() {
    91.     },
    93.     /**
    94.      * 确定的回调事件
    95.      */
    96.     comfirmSet() {
    97.         console.log(this.modalData);
    98.     },
    101.     /****************        分割线    以下方法不可重写        ****************/
    103.     /**
    104.      * 关闭输入框    自动数据重置
    105.      */
    106.     cancelDialogShow() {
    107.         this.$emit('update:visible', false);
    108.     },
    110.     /**
    111.      * 触发父组件成功回调
    112.      * @param data
    113.      */
    114.     emitBtnSuccess(data = {}) {
    115.         this.$emit('btnSuccess', data);
    116.     },
    118.     /**
    119.      * 验证正则 确定按钮 无需外部调用
    120.      */
    121.     handleConfirmSet() {
    122.         if (!this.$refs.modalDataDialog) {
    123.           console.warn("el-dialog-form 需添加 ref='modalDataDialog'");
    124.       }
    125.       this.$refs.modalDataDialog && this.$refs.modalDataDialog.validate((valid) => {
    126.           if (valid) {
    127.             this.confirmSet();
    128.         }
    129.       });
    130.     },
    132.     /**
    133.      * 弹窗关闭动画结束时的回调
    134.      */
    135.     closed() {
    136.         this.beforeClosedDialog();
    137.       this.clearUploadFiles();
    138.     },
    140.     // 通过refs判断 如果是upload组件 则还原上传组件
    141.     clearUploadFiles() {
    142.         _.forEach(this.$refs, (item) => {
    143.           if (item && item.$options.name == 'el-upload') {
    144.             item.clearFiles();
    145.         }
    146.       });
    147.     }
    148.   },
    149.   watch: {
    150.       async visible(val) {
    151.         if (val) {
    152.           this.modalData = _.merge({}, this.defaultModalData, this.data);
    153.         this.modalConfig = _.merge({}, this.defaultModalConfig, this.config);
    154.         let res = await this.beforeOpenDialog();
    155.         if (res) {
    156.             this.pvt_visible = true;
    157.         } else {
    158.             this.cancelDialogShow();
    159.         }
    160.       } else {
    161.           this.pvt_visible = false;
    162.       }
    163.     }
    164.   }
    165. }