{"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\\alramform.vue?vue&type=style&index=0&id=3db7cac3&lang=scss&scoped=true&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\alramform.vue","mtime":1663828782924},{"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\r\n.dmp-form .el-form-item{\r\n  /deep/ .el-form-item__content{\r\n\t\t\theight:auto;\r\n\t\t\t.el-textarea__inner{\r\n\t\t\t\tfont-family: Microsoft YaHei;\r\n        font-weight: 400;\r\n\t\t\t}\r\n\t\t} \r\n} \r\n",{"version":3,"sources":["alramform.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8LA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"alramform.vue","sourceRoot":"src/components/common","sourcesContent":["<!--\r\n * @Author: wf\r\n * @Date: 2021-08-11 16:29:00\r\n * @LastEditors: wf\r\n * @LastEditTime: 2021-08-12 18:12:29\r\n * @Description: 通用表单组件\r\n-->\r\n<template>\r\n<el-form class=\"dmp-form\" ref='form' status-icon  :class=\"{'inline-add': inlineAdd}\" :model='data'\r\n  :inline=\"inline\" :label-position=\"labelPosition\" :label-width=\"labelWidth\" :rules='rules' :disabled=\"disabled\">\r\n  <!-- <div class='row'>\r\n    <div class='col' v-for='(item,index) in cols' :key='index'> -->\r\n      <el-form-item :id='row.prop || row.slot' v-for='(row,index) in cols[0]' :label=\"row.label\" :key='index' :error=\"errors[row.prop||row.slot]\"\r\n        :prop='row.prop||row.slot' :class=\"[{'show-required-icon': row.showRequired}, {'line2': row.line2}]\">\r\n        <!-- 过滤器 -->\r\n        <span v-if='row.filter'>{{ft[row.filter](data[row.prop], row.filterParams)}}</span>\r\n        <!-- 过滤方法 -->\r\n        <span v-else-if='row.format'>{{row.format(data[row.prop])}}</span>\r\n        <!-- 绑定事件 -->\r\n        <a v-else-if='row.click' href='javascript:;' @click='row.click'><span >{{data[row.prop]}}</span></a>\r\n        <!-- 日期控件 -->\r\n        <el-date-picker v-else-if='row.date' v-model=\"data[row.prop]\"\r\n        :value-format='row.dateFormat||\"yyyy-MM-dd\"' type=\"date\"\r\n        :editable='row.editable||false' placeholder=\"选择日期\"\r\n        @change='(obj) => row.change?row.change(obj):{}'></el-date-picker>\r\n        <!-- input输入框 -->\r\n        <el-input v-else-if='row.input' clearable :disabled=\"row.disabled\"\r\n        v-trim v-model.trim=\"data[row.prop]\" :maxlength='row.maxlength'\r\n        :placeholder=\"row.placeholder || ''\"\r\n        ></el-input>\r\n        <!-- textarea输入框 -->\r\n        <el-input class=\"textarea_class\" v-else-if='row.textarea' v-trim v-model.trim=\"data[row.prop]\"\r\n        type='textarea' :placeholder=\"row.placeholder || ''\"\r\n        resize=\"none\" show-word-limit :maxlength='row.maxlength' :rows='row.rows || 3'></el-input>\r\n        <!-- 插槽 -->\r\n        <slot v-else-if='row.slot' :name='row.slot'></slot>\r\n        <!-- 默认输出绑定的值 -->\r\n        <span v-else :data-txt='data[row.prop]'>{{data[row.prop]}}</span>\r\n        <slot v-if='inlineAdd' :name='row.inlineAddSlot'></slot>\r\n      </el-form-item>\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    <!-- </div>\r\n  </div> -->\r\n</el-form>\r\n</template>\r\n<script>\r\n/* eslint-disable */\r\nexport default {\r\n  name: 'dmp-form',\r\n  props: {\r\n    /*\r\n    字段设置:数组，包括label名字设置，字段绑定设置\r\n      [\r\n        {\r\n          lable: 'label名，必须'，\r\n          prop: '绑定字段,必须'，\r\n          filter: 'vue过滤器名,',\r\n          filterParams: '过滤的参数',\r\n          format: '过滤方法，'，\r\n          click: '绑定的click事件'，\r\n          date: '日期输入控件'，\r\n          dateFormat: '日期控件的返回值格式化字符串，默认为\"yyyy-MM-dd\"'\r\n          change: 'date改变时触发的事件'\r\n          input: 'input输入框',\r\n          textarea: '内容输入框',\r\n          rows: '内容输入框的行数，默认4行'，\r\n          slot: '插槽名'，\r\n          inlineAddSlot: 行内快速添加按钮插槽名\r\n        }\r\n      ]\r\n    */\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 '74px'\r\n      }\r\n    },\r\n    // 是否行内有快捷添加按钮\r\n    inlineAdd: {\r\n      type: Boolean,\r\n      default() { return false }\r\n    },\r\n    // 错误的项目字段消息对象{prop: '错误消息'}\r\n    errors: {\r\n      type: Object,\r\n      default() {\r\n        return {}\r\n      }\r\n    },\r\n    labelPosition: {\r\n      type: String,\r\n      default() {\r\n        return 'left'\r\n      }\r\n    },\r\n    inline: {\r\n      type: Boolean,\r\n      default() {\r\n        return false\r\n      }\r\n    },\r\n    disabled: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault() {\r\n\t\t\t\treturn false\r\n\t\t\t}\r\n\t\t}\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    // 强制校验key字段\r\n    validateField(key) {\r\n      this.$refs.form.validateField(key)\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.dmp-form .el-form-item{\r\n  /deep/ .el-form-item__content{\r\n\t\t\theight:auto;\r\n\t\t\t.el-textarea__inner{\r\n\t\t\t\tfont-family: Microsoft YaHei;\r\n        font-weight: 400;\r\n\t\t\t}\r\n\t\t} \r\n} \r\n</style>"]}]}