| 1 |
- {"remainingRequest":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\boman-framwork\\ruoyi-ui\\src\\components\\FormItemComponent\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\boman-framwork\\ruoyi-ui\\src\\components\\FormItemComponent\\index.vue","mtime":1619607677260},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\boman-framwork\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgVnVlIGZyb20gInZ1ZSI7DQppbXBvcnQgbGF5b3V0QWxnb3JpdGhtIGZyb20gIkAvYXBpL2xheW91dEFsZ29yaXRobSI7DQpleHBvcnQgZGVmYXVsdCB7DQogIG5hbWU6ICJGb3JtSXRlbUNvbXBvbmVudCIsDQogIHByb3BzOiB7DQogICAgZm9ybUl0ZW1MaXN0czogew0KICAgICAgdHlwZTogQXJyYXksDQogICAgICBkZWZhdWx0KCkgew0KICAgICAgICByZXR1cm4gW107DQogICAgICB9DQogICAgfSwNCiAgICBidXR0b25UeXBlOiB7DQogICAgICB0eXBlOiBCb29sZWFuLA0KICAgICAgZGVmYXVsdCgpIHsNCiAgICAgICAgcmV0dXJuIHRydWU7DQogICAgICB9DQogICAgfSwNCiAgICBkZWZhdWx0Q29sdW1uOiB7DQogICAgICB0eXBlOiBOdW1iZXIsDQogICAgICBkZWZhdWx0OiA0DQogICAgfSwNCiAgICByZWFkb25seTogew0KICAgICAgdHlwZTogQm9vbGVhbiwNCiAgICAgIGRlZmF1bHQ6IGZhbHNlDQogICAgfQ0KICB9LA0KICBjb21wdXRlZDogew0KICAgIC8vIOmAmui/h2xheW91dEFsZ29yaXRobeeul+azleW+l+WIsOWvueW6lOeahOS9jee9ruWdkOaghw0KICAgIGRhdGFDb2xSb2woKSB7DQogICAgICBjb25zdCBsaXN0ID0gbGF5b3V0QWxnb3JpdGhtKHRoaXMuZGVmYXVsdENvbHVtbiwgdGhpcy5jdXJyZW50Rm9ybUxpc3QpOw0KICAgICAgcmV0dXJuIE9iamVjdC5rZXlzKGxpc3QpLnJlZHVjZSgodGVtcCwgY3VycmVudCkgPT4gew0KICAgICAgICAvLyDorqHnrpfmmL7npLrooYzmlbANCiAgICAgICAgbGlzdFtjdXJyZW50XS5jb21wb25lbnQgPSBWdWUuZXh0ZW5kKGxpc3RbY3VycmVudF0uY29tcG9uZW50KTsNCiAgICAgICAgdGVtcC5wdXNoKGxpc3RbY3VycmVudF0pOw0KICAgICAgICByZXR1cm4gdGVtcDsNCiAgICAgIH0sIFtdKTsNCiAgICB9LA0KICAgIC8vIOiuoeeul+WxnuaAp+eahCBkaXYg55qE5Z2Q5qCH6LW35aeL54K5DQogICAgc2V0RGl2KCkgew0KICAgICAgcmV0dXJuIGl0ZW0gPT4NCiAgICAgICAgYCBncmlkLWNvbHVtbjoke2l0ZW0ueH0vJHtpdGVtLmNvbCArIGl0ZW0ueH07Z3JpZC1yb3c6JHsNCiAgICAgICAgICBpdGVtLnkNCiAgICAgICAgfS8ke2l0ZW0ueSArIGl0ZW0ucm93fTtgOw0KICAgIH0sDQogICAgLy8g6K6h566X5bGe5oCn55qEIGRpdueahOaOkuWIl+agvOW8jw0KICAgIHNldFdpZHRoKCkgew0KICAgICAgLy8gYHRoaXNgIOaMh+WQkSB2bSDlrp7kvosNCiAgICAgIGNvbnN0IGNvbHVtbnMgPSBOdW1iZXIodGhpcy5kZWZhdWx0Q29sdW1uKSB8fCA0Ow0KICAgICAgcmV0dXJuIGBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgke2NvbHVtbnN9LCR7MTAwIC8gY29sdW1uc30lYDsNCiAgICB9DQogIH0sDQogIHdhdGNoOiB7DQogICAgZm9ybUl0ZW1MaXN0cygpIHsNCiAgICAgIHRoaXMuY3VycmVudEZvcm1MaXN0ID0gdGhpcy5mb3JtSXRlbUxpc3RzLmNvbmNhdChbXSk7DQogICAgfQ0KICB9LA0KICBkYXRhKCkgew0KICAgIHJldHVybiB7DQogICAgICAvLyBkZWZhdWx0Q29sdW1uOjQsICAvL+m7mOiupOS4gOihjDTliJcNCiAgICAgIGZvcm1EYXRhOiB7fSwgLy/kv53lrZhmb3Jt5Lit6L6T5YWl5pWw5o2uDQogICAgICBjdXJyZW50Rm9ybUxpc3Q6IFtdDQogICAgfTsNCiAgfSwNCiAgY3JlYXRlZCgpIHsNCiAgICB0aGlzLmN1cnJlbnRGb3JtTGlzdCA9IHRoaXMuZm9ybUl0ZW1MaXN0cy5jb25jYXQoW10pOw0KICB9LA0KICBtZXRob2RzOiB7DQogICAgaW5wdXRDaGFuZ2UodmFsdWUsIGl0ZW1zLCB0eXBlKSB7DQogICAgICAvL+acieaVsOaNruaUueWPmOaXtg0KICAgICAgLy8gaWYoT2JqZWN0LnByb3RvdHlwZS50b1N0cmluZy5jYWxsKHZhbHVlKSA9PT0gJ1tvYmplY3QgQXJyYXldJyAmJiAoIXZhbHVlWzBdIHx8ICF2YWx1ZVsxXSkpew0KICAgICAgLy8gICBkZWxldGUgdGhpcy5mb3JtRGF0YVtpdGVtcy5maWxlZF0NCiAgICAgIC8vIH1lbHNlew0KICAgICAgLy8gICB0aGlzLmZvcm1EYXRhW2l0ZW1zLmZpbGVkXSA9IHZhbHVlDQogICAgICAvLyB9DQogICAgICBpZiAodHlwZSAmJiB0eXBlID09PSAic2VsZWN0Iikgew0KICAgICAgICB0aGlzLmZvcm1EYXRhW2l0ZW1zLnNsb3RmaWxlZF0gPSB2YWx1ZTsNCiAgICAgIH0gZWxzZSB7DQogICAgICAgIHRoaXMuZm9ybURhdGFbaXRlbXMuZmlsZWRdID0gdmFsdWU7DQogICAgICB9DQogICAgICB0aGlzLiRlbWl0KCJmb3JtQ2hhbmdlIiwgdGhpcy5mb3JtRGF0YSk7DQogICAgfSwNCiAgICBzZWFyY2goKSB7DQogICAgICB0aGlzLiRlbWl0KCJzZWFyY2giLCB0aGlzLmZvcm1EYXRhKTsNCiAgICB9LA0KICAgIHJlc2V0KCkgew0KICAgICAgdGhpcy5mb3JtRGF0YSA9IHt9Ow0KICAgICAgdGhpcy5jdXJyZW50Rm9ybUxpc3QgPSB0aGlzLmN1cnJlbnRGb3JtTGlzdC5jb25jYXQoW10pOw0KICAgICAgdGhpcy4kZW1pdCgic2VhcmNoIiwgdGhpcy5mb3JtRGF0YSk7DQogICAgfQ0KICB9DQp9Ow0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;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":"index.vue","sourceRoot":"src/components/FormItemComponent","sourcesContent":["<template>\r\n <div class=\"FormComponent\">\r\n <div\r\n class=\"FormItemComponent\"\r\n :style=\"setWidth\"\r\n >\r\n <div\r\n v-for=\"(item,index) in dataColRol\"\r\n :key=\"index\"\r\n class=\"FormItemComponent-item\"\r\n :style=\"setDiv(item)\"\r\n >\r\n <component\r\n :is=\"item.component\"\r\n :ref=\"'component_'+index\"\r\n :index=\"index\"\r\n :items=\"item.item\"\r\n :readonly=\"readonly\"\r\n @inputChange=\"inputChange\"\r\n />\r\n </div>\r\n </div>\r\n <p v-if=\"buttonType\">\r\n <el-button type=\"primary\" plain icon=\"el-icon-search\" @click=\"search\">搜索</el-button>\r\n <el-button icon=\"el-icon-refresh\" size=\"mini\" @click=\"reset\">重置</el-button>\r\n </p>\r\n </div>\r\n</template>\r\n<script>\r\nimport Vue from \"vue\";\r\nimport layoutAlgorithm from \"@/api/layoutAlgorithm\";\r\nexport default {\r\n name: \"FormItemComponent\",\r\n props: {\r\n formItemLists: {\r\n type: Array,\r\n default() {\r\n return [];\r\n }\r\n },\r\n buttonType: {\r\n type: Boolean,\r\n default() {\r\n return true;\r\n }\r\n },\r\n defaultColumn: {\r\n type: Number,\r\n default: 4\r\n },\r\n readonly: {\r\n type: Boolean,\r\n default: false\r\n }\r\n },\r\n computed: {\r\n // 通过layoutAlgorithm算法得到对应的位置坐标\r\n dataColRol() {\r\n const list = layoutAlgorithm(this.defaultColumn, this.currentFormList);\r\n return Object.keys(list).reduce((temp, current) => {\r\n // 计算显示行数\r\n list[current].component = Vue.extend(list[current].component);\r\n temp.push(list[current]);\r\n return temp;\r\n }, []);\r\n },\r\n // 计算属性的 div 的坐标起始点\r\n setDiv() {\r\n return item =>\r\n ` grid-column:${item.x}/${item.col + item.x};grid-row:${\r\n item.y\r\n }/${item.y + item.row};`;\r\n },\r\n // 计算属性的 div的排列格式\r\n setWidth() {\r\n // `this` 指向 vm 实例\r\n const columns = Number(this.defaultColumn) || 4;\r\n return `grid-template-columns: repeat(${columns},${100 / columns}%`;\r\n }\r\n },\r\n watch: {\r\n formItemLists() {\r\n this.currentFormList = this.formItemLists.concat([]);\r\n }\r\n },\r\n data() {\r\n return {\r\n // defaultColumn:4, //默认一行4列\r\n formData: {}, //保存form中输入数据\r\n currentFormList: []\r\n };\r\n },\r\n created() {\r\n this.currentFormList = this.formItemLists.concat([]);\r\n },\r\n methods: {\r\n inputChange(value, items, type) {\r\n //有数据改变时\r\n // if(Object.prototype.toString.call(value) === '[object Array]' && (!value[0] || !value[1])){\r\n // delete this.formData[items.filed]\r\n // }else{\r\n // this.formData[items.filed] = value\r\n // }\r\n if (type && type === \"select\") {\r\n this.formData[items.slotfiled] = value;\r\n } else {\r\n this.formData[items.filed] = value;\r\n }\r\n this.$emit(\"formChange\", this.formData);\r\n },\r\n search() {\r\n this.$emit(\"search\", this.formData);\r\n },\r\n reset() {\r\n this.formData = {};\r\n this.currentFormList = this.currentFormList.concat([]);\r\n this.$emit(\"search\", this.formData);\r\n }\r\n }\r\n};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.FormComponent {\r\n padding: 2px 10px 10px 10px;\r\n // border: 1px solid rgba(228, 228, 228, 1);\r\n}\r\n\r\n.FormComponent > p {\r\n padding-left: 108px;\r\n margin-top: 10px;\r\n display: flex;\r\n width: 300px;\r\n\r\n > button {\r\n margin-right: 10px;\r\n }\r\n}\r\n.FormItemComponent > div {\r\n /*border:1px solid #fff;*/\r\n box-sizing: border-box;\r\n}\r\n.FormItemComponent {\r\n display: grid;\r\n grid-template-columns: repeat(4, 25%);\r\n grid-auto-rows: minmax(auto);\r\n}\r\n</style>\r\n"]}]}
|
