| 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\\newsearch.vue?vue&type=style&index=0&lang=scss&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\newsearch.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\r\n.zz-search {\r\n position:relative;\r\n\t\r\n .col {\r\n display:inline-block;\r\n vertical-align:middle;\r\n .el-input,.el-select,.el-calendar,.el-cascader {\r\n width: 180px;\r\n input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n input[type=\"number\"] {\r\n -moz-appearance: textfield;\r\n }\r\n }\r\n .inherit-css {\r\n width: 140px !important;\r\n .el-input {\r\n width: 100% !important;\r\n }\r\n }\r\n .min-css{\r\n width: 110px !important;\r\n .el-input {\r\n width: 100% !important;\r\n }\r\n }\r\n }\r\n .search-box {\r\n display: flex;\r\n align-items:center;\r\n .search-label {\r\n margin-right: 0.520833333333333vw;\r\n color: #3b4045;\r\n font-size: 0.729166666666667vw;\r\n vertical-align: middle;\r\n display: inline-block;\r\n //min-width vw(60)\r\n text-align: justify;\r\n text-align-last: justify;\r\n }\r\n }\r\n .search-normal {\r\n \r\n // margin: 20px 0;\r\n .col, .el-button {\r\n margin-right: 20px;\r\n }\r\n .el-button {\r\n vertical-align: middle;\r\n margin-right: 15px;\r\n }\r\n .el-button +.el-button {\r\n margin-left: 0;\r\n }\r\n &:before {\r\n content:' ';\r\n width: 0;\r\n height: 100%;\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n .button-has-icon {\r\n padding-right: 5px;\r\n .el-icon-caret-bottom {\r\n transition: all .3s;\r\n &.top {\r\n transform: scale(0.8) rotate(180deg);\r\n }\r\n }\r\n }\r\n }\r\n .search-more {\r\n padding: 0 15px;\r\n font-size: 0;\r\n width: 100%;\r\n .el-input, .el-select {\r\n width: 100%;\r\n }\r\n .col {\r\n margin-right: 20px;\r\n margin-bottom: 20px;\r\n .el-input,.el-select,.el-calendar,.el-cascader {\r\n width: 180px;\r\n }\r\n }\r\n \r\n .el-button {\r\n min-width: 68px;\t\r\n }\r\n\t\t.reset_button{\r\n\t\t\tborder: 1px solid #0D87F9;\r\n\t\t\topacity: 1;\r\n\t\t\tborder-radius: 4px;\r\n\t\t}\r\n .el-button--default {\r\n margin-left: 20px;\r\n }\r\n .dmp-date-picker .el-input__inner {\r\n border: none;\r\n padding: 0 15px;\r\n }\r\n }\r\n .opt {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n img{\r\n width:30px;\r\n height:30px;\r\n margin-right: 10px;\r\n }\r\n &>.dmp-icon-big, &>.dmp-icon-big .dmp-icon-big{\r\n width: 32px;\r\n height: 32px;\r\n margin-left: 20px;\r\n font-size: 14px !important;\r\n justify-content: center;\r\n display: flex;\r\n align-items: center;\r\n padding: 0;\r\n }\r\n &>.dmp-icon-big .dmp-icon-big {\r\n margin: 0;\r\n }\r\n }\r\n}\r\n@media screen and (min-width: 1600px) {\r\n .zz-search {\r\n .search-normal .col {\r\n .el-input,.el-select,.el-calendar,.el-cascader {\r\n width: 180px;\r\n }\r\n }\r\n }\r\n}\r\n@media screen and (max-width: 1599px) {\r\n .zz-search {\r\n .search-normal .col {\r\n .el-input,.el-select,.el-calendar,.el-cascader {\r\n width: 125px !important\r\n }\r\n }\r\n }\r\n}\r\n",{"version":3,"sources":["newsearch.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqKA;AACA;;AAEA;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;;AAEA;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;;AAEA;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":"newsearch.vue","sourceRoot":"src/components/common","sourcesContent":["<!--\r\n * @Author: zZ(zzy6937@qq.com)\r\n * @Date: 2019-11-01 11:11:28\r\n * @LastEditors: zwy\r\n * @LastEditTime: 2021-02-02 18:22:13\r\n * @Description: 通用搜索\r\n-->\r\n<template>\r\n <form class=\"zz-search\" ref=\"searchForm\" @submit.prevent=\"search\" action=\"\">\r\n <div class=\"search-normal\">\r\n <div class=\"col\" v-for='(item, index) in normal' :key='index'>\r\n <span class=\"search-box\">\r\n\t\t\t\t\t<span v-if=\"item.label\" class='search-label'>{{item.label}}</span>\r\n <span class=\"search-content\">\r\n <el-select v-if='item.options' :class=\"item.class\" v-model=\"query[item.prop]\" :placeholder=\"item.placeholder\" clearable>\r\n <el-option v-for='(o, ot) in item.options' :key='ot' :label=\"o.label\" :value=\"o.value || o.id\"></el-option>\r\n </el-select>\r\n <slot v-else-if='item.slot' :name=\"item.slot\"></slot>\r\n <el-input v-else :type=\"item.type\" @input=\"(val)=> inputChange(val, item)\" :class=\"item.class\" :placeholder=\"item.placeholder\" v-model.trim=\"query[item.prop]\" clearable></el-input>\r\n </span>\r\n\t\t\t\t</span>\r\n </div>\r\n <el-button plain v-if='more.length' @click=\"showMore = !showMore\" class=\"more-search el-mgRight-md\">\r\n\t\t\t\t\t高级搜索<i :class=\"showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'\" class=\"el-icon--right\"></i></el-button>\t\r\n <el-button v-if=\"normal.length && !showMore\" native-type=\"submit\" :disabled=\"btnDisabled\" type='primary' class='search-btn' icon=\"el-icon-search\">搜索</el-button>\r\n\r\n <!-- <el-button class=\"button-has-icon\" v-if='more.length' @click=\"showMore = !showMore\">\r\n 高级搜索<i class=\"el-icon-caret-bottom el-icon--right\" :class=\"{'top': showMore}\"></i></el-button>\r\n <el-button type=\"primary\" native-type=\"submit\" v-if='normal.length && !showMore'>搜索</el-button> -->\r\n </div>\r\n <el-collapse-transition>\r\n <div class='search-more' v-show=\"showMore\">\r\n <div v-for=\"(item, index) in more\" :key='index' class=\"col\" :class=\"{'margin0': (index+1) % 6 === 0}\">\r\n <span class=\"search-box\">\r\n <span v-if=\"item.label\" class='search-label'>{{item.label}}</span>\r\n <span class=\"search-content\">\r\n <el-select v-if='item.options' :class=\"item.class\" v-model=\"query[item.prop]\" :placeholder=\"item.placeholder\" clearable>\r\n <el-option v-for='(o, ot) in item.options' :key='ot' :label=\"o.label\" :value=\"o.value || o.id\"></el-option>\r\n </el-select>\r\n <slot v-else-if='item.slot' :name=\"item.slot\"></slot>\r\n <el-input v-else :type=\"item.type\" @input=\"(val)=> inputChange(val, item)\" :class=\"item.class\" :placeholder=\"item.placeholder\" v-model.trim=\"query[item.prop]\" clearable></el-input>\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"col\">\r\n <el-button type=\"primary\" native-type=\"submit\" icon=\"el-icon-search\">搜索</el-button>\r\n <el-button class=\"reset_button\" @click=\"reset\">重置</el-button>\r\n </div>\r\n </div>\r\n </el-collapse-transition>\r\n <slot name='right-opt'></slot>\r\n </form>\r\n</template>\r\n<script>\r\n/**\r\n * @description: 搜索控件\r\n * @param {Object} normal: 基本搜索条件\r\n * @param {Object} more: 更多搜索条件\r\n * @param {Object} query: 绑定的数据对象\r\n * @return {type}: null\r\n * @author: zZ(zzy6937@qq.com)\r\n */\r\nexport default {\r\n name: 'dmp-newsearch',\r\n props: {\r\n normal: {\r\n type: Array,\r\n default() {\r\n return []\r\n }\r\n },\r\n more: {\r\n type: Array,\r\n default() {\r\n return []\r\n }\r\n },\r\n query: {\r\n type: Object,\r\n default() {\r\n return {}\r\n }\r\n },\r\n resetQuery: {\r\n type: Object,\r\n default() {\r\n return {}\r\n }\r\n },\r\n // 不重置的字段集合\r\n noSetKeys: {\r\n type: Array,\r\n default() {\r\n return []\r\n }\r\n },\r\n btnDisabled: {\r\n type: Boolean,\r\n default() {\r\n return false\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n showMore: false\r\n }\r\n },\r\n methods: {\r\n search() {\r\n //this.showMore = false;\r\n this.$emit('search');\r\n },\r\n reset() {\r\n const set = new Set(this.noSetKeys)\r\n if (_.isEmpty(this.resetQuery)) {\r\n Object.keys(this.query).forEach((item) => {\r\n if (!set.has(item)) {\r\n this.query[item] = ''\r\n }\r\n })\r\n } else {\r\n const obj = {}\r\n Object.keys(this.resetQuery).forEach((item) => {\r\n if (!set.has(item)) {\r\n obj[item] = ''\r\n }\r\n })\r\n Object.assign(this.query, obj);\r\n }\r\n this.$emit(\"reset\");\r\n },\r\n inputChange(val, item) {\r\n const {type, maxlength} = item;\r\n if(type == 'number' && maxlength) {\r\n if(val.toString().length > maxlength) {\r\n this.query[item.prop] = Number(val.toString().slice(0, maxlength));\r\n }\r\n }\r\n }\r\n },\r\n /* mounted() {\r\n this.$refs.searchForm.onkeydown = (event) => {\r\n const e = event || window.event;\r\n if (e && e.keyCode == 13) {\r\n this.search();\r\n }\r\n };\r\n }, */\r\n created() {\r\n const data = {}\r\n this.more.forEach((item) => {\r\n data[item.prop] = ''\r\n })\r\n this.normal.forEach((item) => {\r\n data[item.prop] = ''\r\n })\r\n this.data = data;\r\n }\r\n /* beforeDestroy() {\r\n this.$refs.searchForm.onkeydown = undefined;\r\n } */\r\n}\r\n</script>\r\n<style lang=\"scss\">\r\n.zz-search {\r\n position:relative;\r\n\t\r\n .col {\r\n display:inline-block;\r\n vertical-align:middle;\r\n .el-input,.el-select,.el-calendar,.el-cascader {\r\n width: 180px;\r\n input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n input[type=\"number\"] {\r\n -moz-appearance: textfield;\r\n }\r\n }\r\n .inherit-css {\r\n width: 140px !important;\r\n .el-input {\r\n width: 100% !important;\r\n }\r\n }\r\n .min-css{\r\n width: 110px !important;\r\n .el-input {\r\n width: 100% !important;\r\n }\r\n }\r\n }\r\n .search-box {\r\n display: flex;\r\n align-items:center;\r\n .search-label {\r\n margin-right: 0.520833333333333vw;\r\n color: #3b4045;\r\n font-size: 0.729166666666667vw;\r\n vertical-align: middle;\r\n display: inline-block;\r\n //min-width vw(60)\r\n text-align: justify;\r\n text-align-last: justify;\r\n }\r\n }\r\n .search-normal {\r\n \r\n // margin: 20px 0;\r\n .col, .el-button {\r\n margin-right: 20px;\r\n }\r\n .el-button {\r\n vertical-align: middle;\r\n margin-right: 15px;\r\n }\r\n .el-button +.el-button {\r\n margin-left: 0;\r\n }\r\n &:before {\r\n content:' ';\r\n width: 0;\r\n height: 100%;\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n .button-has-icon {\r\n padding-right: 5px;\r\n .el-icon-caret-bottom {\r\n transition: all .3s;\r\n &.top {\r\n transform: scale(0.8) rotate(180deg);\r\n }\r\n }\r\n }\r\n }\r\n .search-more {\r\n padding: 0 15px;\r\n font-size: 0;\r\n width: 100%;\r\n .el-input, .el-select {\r\n width: 100%;\r\n }\r\n .col {\r\n margin-right: 20px;\r\n margin-bottom: 20px;\r\n .el-input,.el-select,.el-calendar,.el-cascader {\r\n width: 180px;\r\n }\r\n }\r\n \r\n .el-button {\r\n min-width: 68px;\t\r\n }\r\n\t\t.reset_button{\r\n\t\t\tborder: 1px solid #0D87F9;\r\n\t\t\topacity: 1;\r\n\t\t\tborder-radius: 4px;\r\n\t\t}\r\n .el-button--default {\r\n margin-left: 20px;\r\n }\r\n .dmp-date-picker .el-input__inner {\r\n border: none;\r\n padding: 0 15px;\r\n }\r\n }\r\n .opt {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n img{\r\n width:30px;\r\n height:30px;\r\n margin-right: 10px;\r\n }\r\n &>.dmp-icon-big, &>.dmp-icon-big .dmp-icon-big{\r\n width: 32px;\r\n height: 32px;\r\n margin-left: 20px;\r\n font-size: 14px !important;\r\n justify-content: center;\r\n display: flex;\r\n align-items: center;\r\n padding: 0;\r\n }\r\n &>.dmp-icon-big .dmp-icon-big {\r\n margin: 0;\r\n }\r\n }\r\n}\r\n@media screen and (min-width: 1600px) {\r\n .zz-search {\r\n .search-normal .col {\r\n .el-input,.el-select,.el-calendar,.el-cascader {\r\n width: 180px;\r\n }\r\n }\r\n }\r\n}\r\n@media screen and (max-width: 1599px) {\r\n .zz-search {\r\n .search-normal .col {\r\n .el-input,.el-select,.el-calendar,.el-cascader {\r\n width: 125px !important\r\n }\r\n }\r\n }\r\n}\r\n</style>"]}]}
|
