{"remainingRequest":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js??ref--0-2!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\form.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\form.vue","mtime":1663828782925},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js","mtime":1540864632000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nexport default {\r\n    name: 'zz-form',\r\n    props: {\r\n        /*\r\n\t\t字段设置:二维数组，包括label名字设置，字段绑定设置，第二维有多少个集合就有多少列\r\n\t\t[\r\n\t\t\t[\r\n\t\t\t\t{\r\n\t\t\t\t\tlable: 'label名，必须'，\r\n\t\t\t\t\tprop: '绑定字段,必须'，\r\n\t\t\t\t\tfilter: 'vue过滤器名,',\r\n\t\t\t\t\tfilterParams: '过滤的参数',\r\n\t\t\t\t\tformat: '过滤方法，'，\r\n\t\t\t\t\tclick: '绑定的click事件'，\r\n\t\t\t\t\tdate: '日期输入控件'，\r\n\t\t\t\t\tdateFormat: '日期控件的返回值格式化字符串，默认为\"yyyy-MM-dd\"'\r\n\t\t\t\t\tchange: 'date改变时触发的事件'\r\n\t\t\t\t\tinput: 'input输入框',\r\n\t\t\t\t\ttextarea: '内容输入框',\r\n\t\t\t\t\trows: '内容输入框的行数，默认4行'，\r\n\t\t\t\t\tslot: '插槽名'，\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t\t.\r\n\t\t\t.\r\n\t\t\t.\r\n\t\t]\r\n\t\t*/\r\n        cols: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        // 绑定数据\r\n        data: {\r\n            type: Object,\r\n            default() {\r\n                return {};\r\n            }\r\n        },\r\n        // 表单校验\r\n        rules: {\r\n            type: Object,\r\n            default() {\r\n                return {};\r\n            }\r\n        },\r\n        // 表单标签宽度\r\n        labelWidth: {\r\n            type: String,\r\n            default() {\r\n                return '80px';\r\n            }\r\n        },\r\n        // 错误的项目字段消息对象{prop: '错误消息'}\r\n        errors: {\r\n            type: Object,\r\n            default() {\r\n                return {};\r\n            }\r\n        },\r\n        disabled: {\r\n            type: Boolean,\r\n            default() {\r\n                return false;\r\n            }\r\n        }\r\n    },\r\n    data() {\r\n        let self = this;\r\n        return {\r\n            ft: self.$root.$options.filters\r\n        };\r\n    },\r\n    methods: {\r\n        validate(resolve, reject) {\r\n            this.$parent.errors = {};\r\n            this.$refs.form.validate((valid) => {\r\n                if (valid) {\r\n                    resolve && resolve();\r\n                } else {\r\n                    this.$nextTick(() => {\r\n                        const isError = this.$el.querySelectorAll('.is-error');\r\n                        if (isError && isError[0]) {\r\n                            isError[0].querySelector('input').focus();\r\n                        }\r\n                    });\r\n                    reject && reject();\r\n                }\r\n            });\r\n        },\r\n        resetFields() {\r\n            this.$refs.form.resetFields();\r\n        },\r\n        clearValidate() {\r\n            this.$refs.form.clearValidate();\r\n        }\r\n    },\r\n    computed: {\r\n        width() {\r\n            return 100 / this.cols.length + '%';\r\n        }\r\n    },\r\n    watch: {\r\n        errors(n) {\r\n            const len = Object.keys(n).length;\r\n            if (len) {\r\n                this.$nextTick(() => {\r\n                    const isError = this.$el.querySelectorAll('.is-error');\r\n                    if (isError && isError[0]) {\r\n                        isError[0].querySelector('input').focus();\r\n                    }\r\n                });\r\n            }\r\n        }\r\n    }\r\n};\r\n",{"version":3,"sources":["form.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"form.vue","sourceRoot":"src/components/common","sourcesContent":["<!-- 通用表单组件 -->\r\n<template>\r\n    <el-form\r\n        class=\"no-scrollbar\"\r\n        :disabled=\"disabled\"\r\n        label-position=\"right\"\r\n        :label-width=\"labelWidth.replace(/[^0-9]/g, '') + 'px'\"\r\n        :rules=\"rules\"\r\n        :model=\"data\"\r\n        ref=\"form\"\r\n        status-icon\r\n    >\r\n        <div class=\"row\">\r\n            <div class=\"col\" v-for=\"(item, index) in cols\" :key=\"index\" :style=\"'width:' + width\">\r\n                <template v-for=\"(row, index) in item\">\r\n                    <el-form-item\r\n                        v-if=\"row.offShow ? false : true\"\r\n                        :key=\"index\"\r\n                        :label=\"row.label\"\r\n                        :prop=\"row.prop || row.slot\"\r\n                        :class=\"{ 'show-required-icon': row.showRequired }\"\r\n                        :error=\"errors[row.prop || row.slot]\"\r\n                    >\r\n                        <!-- 过滤器 -->\r\n                        <p v-if=\"row.filter\">{{ ft[row.filter](data[row.prop], row.filterParams) }}</p>\r\n                        <!-- 过滤方法 -->\r\n                        <p v-else-if=\"row.format\">{{ row.format(data[row.prop], data) }}</p>\r\n                        <!-- 绑定事件 -->\r\n                        <a v-else-if=\"row.click\" href=\"javascript:;\" @click=\"row.click\"\r\n                            ><span>{{ data[row.prop] }}</span></a\r\n                        >\r\n                        <!-- 日期控件 -->\r\n                        <el-date-picker\r\n                            v-else-if=\"row.date\"\r\n                            v-model=\"data[row.prop]\"\r\n                            :value-format=\"row.dateFormat || 'yyyy-MM-dd'\"\r\n                            type=\"date\"\r\n                            :editable=\"row.editable || false\"\r\n                            placeholder=\"选择日期\"\r\n                            :class=\"row.widt ? 'width100':''\"\r\n                            @change=\"(obj) => (row.change ? row.change(obj) : {})\"\r\n                        ></el-date-picker>\r\n                        <!-- input输入框 -->\r\n                        <el-input\r\n                            v-else-if=\"row.input\"\r\n                            clearable\r\n                            v-trim\r\n                            :disabled=\"row.disabled\"\r\n                            v-model.trim=\"data[row.prop]\"\r\n                            :placeholder=\"row.placeholder || '请输入' + row.label.replace('：', '').replace(':', '')\"\r\n                            :maxlength=\"row.maxlength\"\r\n                        ></el-input>\r\n                        <!-- textarea输入框 -->\r\n                        <el-input\r\n                            v-else-if=\"row.textarea\"\r\n                            v-trim\r\n                            v-model.trim=\"data[row.prop]\"\r\n                            type=\"textarea\"\r\n                            resize=\"none\"\r\n                            :rows=\"row.rows || 3\"\r\n                            :placeholder=\"'请输入' + row.label.replace('：', '').replace(':', '')\"\r\n                            :maxlength=\"row.maxlength\"\r\n                            :show-word-limit=\"row.maxlength\"\r\n                        ></el-input>\r\n                        <!-- 插槽 -->\r\n                        <slot v-else-if=\"row.slot\" :name=\"row.slot\"></slot>\r\n                        <!-- zz-select -->\r\n                        <zz-select\r\n                            v-else-if=\"row.options\"\r\n                            :disabled=\"row.disabled\"\r\n                            v-model=\"data[row.prop]\"\r\n                            :options=\"row.options\"\r\n                            :placeholder=\"'请选择' + row.label.replace('：', '').replace(':', '')\"\r\n                            @change=\"(val) => row.change && row.change(val)\"\r\n                        ></zz-select>\r\n                        <!-- zz-cache -->\r\n                        <zz-cache\r\n                            v-else-if=\"row.cache\"\r\n                            :getter=\"row.cache\"\r\n                            v-model=\"data[row.prop]\"\r\n                            @change=\"(val) => row.change && row.change(val)\"\r\n                            :labelValue=\"row.labelValue\"\r\n                        ></zz-cache>\r\n                        <!-- 默认输出绑定的值 -->\r\n                        <p v-else class=\"ellipsis\" v-tip :data-txt=\"data[row.prop]\">{{ data[row.prop] || '-' }}</p>\r\n                    </el-form-item>\r\n                </template>\r\n            </div>\r\n        </div>\r\n        <!-- 表单按钮插槽 -->\r\n        <div v-if=\"$slots.btns\">\r\n            <el-form-item>\r\n                <slot name=\"btns\"></slot>\r\n            </el-form-item>\r\n        </div>\r\n        <slot name=\"row\" class=\"slot-row\"></slot>\r\n    </el-form>\r\n</template>\r\n<script>\r\nexport default {\r\n    name: 'zz-form',\r\n    props: {\r\n        /*\r\n\t\t字段设置:二维数组，包括label名字设置，字段绑定设置，第二维有多少个集合就有多少列\r\n\t\t[\r\n\t\t\t[\r\n\t\t\t\t{\r\n\t\t\t\t\tlable: 'label名，必须'，\r\n\t\t\t\t\tprop: '绑定字段,必须'，\r\n\t\t\t\t\tfilter: 'vue过滤器名,',\r\n\t\t\t\t\tfilterParams: '过滤的参数',\r\n\t\t\t\t\tformat: '过滤方法，'，\r\n\t\t\t\t\tclick: '绑定的click事件'，\r\n\t\t\t\t\tdate: '日期输入控件'，\r\n\t\t\t\t\tdateFormat: '日期控件的返回值格式化字符串，默认为\"yyyy-MM-dd\"'\r\n\t\t\t\t\tchange: 'date改变时触发的事件'\r\n\t\t\t\t\tinput: 'input输入框',\r\n\t\t\t\t\ttextarea: '内容输入框',\r\n\t\t\t\t\trows: '内容输入框的行数，默认4行'，\r\n\t\t\t\t\tslot: '插槽名'，\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t\t.\r\n\t\t\t.\r\n\t\t\t.\r\n\t\t]\r\n\t\t*/\r\n        cols: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        // 绑定数据\r\n        data: {\r\n            type: Object,\r\n            default() {\r\n                return {};\r\n            }\r\n        },\r\n        // 表单校验\r\n        rules: {\r\n            type: Object,\r\n            default() {\r\n                return {};\r\n            }\r\n        },\r\n        // 表单标签宽度\r\n        labelWidth: {\r\n            type: String,\r\n            default() {\r\n                return '80px';\r\n            }\r\n        },\r\n        // 错误的项目字段消息对象{prop: '错误消息'}\r\n        errors: {\r\n            type: Object,\r\n            default() {\r\n                return {};\r\n            }\r\n        },\r\n        disabled: {\r\n            type: Boolean,\r\n            default() {\r\n                return false;\r\n            }\r\n        }\r\n    },\r\n    data() {\r\n        let self = this;\r\n        return {\r\n            ft: self.$root.$options.filters\r\n        };\r\n    },\r\n    methods: {\r\n        validate(resolve, reject) {\r\n            this.$parent.errors = {};\r\n            this.$refs.form.validate((valid) => {\r\n                if (valid) {\r\n                    resolve && resolve();\r\n                } else {\r\n                    this.$nextTick(() => {\r\n                        const isError = this.$el.querySelectorAll('.is-error');\r\n                        if (isError && isError[0]) {\r\n                            isError[0].querySelector('input').focus();\r\n                        }\r\n                    });\r\n                    reject && reject();\r\n                }\r\n            });\r\n        },\r\n        resetFields() {\r\n            this.$refs.form.resetFields();\r\n        },\r\n        clearValidate() {\r\n            this.$refs.form.clearValidate();\r\n        }\r\n    },\r\n    computed: {\r\n        width() {\r\n            return 100 / this.cols.length + '%';\r\n        }\r\n    },\r\n    watch: {\r\n        errors(n) {\r\n            const len = Object.keys(n).length;\r\n            if (len) {\r\n                this.$nextTick(() => {\r\n                    const isError = this.$el.querySelectorAll('.is-error');\r\n                    if (isError && isError[0]) {\r\n                        isError[0].querySelector('input').focus();\r\n                    }\r\n                });\r\n            }\r\n        }\r\n    }\r\n};\r\n</script>\r\n<style lang='scss' scoped>\r\n.row {\r\n    &:after {\r\n        content: '';\r\n        width: 0;\r\n        height: 0;\r\n        visibility: hidden;\r\n        clear: both;\r\n        display: block;\r\n        .col {\r\n            float: left;\r\n        }\r\n    }\r\n}\r\n.slot-row {\r\n    margin-top: -22px;\r\n}\r\n.show-required-icon /deep/ .el-form-item__label {\r\n    &:before {\r\n        content: '*';\r\n        color: #f56c6c;\r\n        margin-right: 4px;\r\n    }\r\n}\r\n</style>\r\n"]}]}