| 1 |
- {"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=style&index=0&id=e6ba7ef0&lang=scss&scoped=true&","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\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"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\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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",{"version":3,"sources":["form.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2NA;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"]}]}
|
