| 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\\table.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\table.vue","mtime":1663828782926},{"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//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\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-table',\r\n props: {\r\n /*\r\n\t\ttable例设置\r\n\t\t[{\r\n\t\t\tlabel: 例名. 必须. String\r\n\t\t\tprop: 数据字段. 必须. String\r\n\t\t\tfixed: 当前例是否固定. 值有left,right。 String\r\n\t\t\twidth: 例宽. Number\r\n\t\t\tslot: 插槽方式, String\r\n\t\t\tformat: 数据过滤方法, Function\r\n\t\t\tclick: 当前内容的点击事件, Function\r\n\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\t\ttable数据\r\n\t\t*/\r\n data: {\r\n type: Array,\r\n default() {\r\n return [];\r\n }\r\n },\r\n /*\r\n\t\ttable表格设置\r\n\t\t*/\r\n settings: {\r\n type: Object,\r\n default() {\r\n return {\r\n // 是否显示表头\r\n showHeader: true,\r\n // 是否显示序号\r\n showIndex: false,\r\n // 是否显示序列号大写\r\n showNUmber: false,\r\n // 序列号宽度\r\n showNumberWidth: '70',\r\n // 是否显示多选框\r\n showCheckbox: false,\r\n hideAllCheckbox: false,\r\n // 是否显示单选框\r\n showRadio: false,\r\n // 需要统计列的prop集合，从0开始\r\n summaryCol: [],\r\n // 是否显示边框\r\n tableBorder: false\r\n };\r\n }\r\n },\r\n /*\r\n\t\t分页设置\r\n\t\t*/\r\n pageset: {\r\n type: Object,\r\n default() {\r\n return {\r\n total: 0,\r\n pageSize: 10,\r\n pageNum: 1,\r\n pageSizes: [15, 30, 60, 120]\r\n };\r\n }\r\n },\r\n loading: {\r\n type: Boolean,\r\n default() {\r\n return false;\r\n }\r\n },\r\n height: 0,\r\n updateFlag: false, //触发表格重绘\r\n // 统计数据.传入统计数据则显示该统计数据，否则显示现有列表数据\r\n summaryData: {},\r\n // 判断多选框是否可以勾选\r\n selectable: {\r\n type: Function,\r\n default() {\r\n return (row, index) => {\r\n return true;\r\n };\r\n }\r\n },\r\n expands: {\r\n type: Array,\r\n default() {\r\n return [];\r\n }\r\n },\r\n treeProps: {\r\n type: Object,\r\n default() {\r\n return {};\r\n }\r\n },\r\n load: {\r\n type: Function,\r\n default() {\r\n return () => {};\r\n }\r\n },\r\n emptyText: {\r\n type: String,\r\n default() {\r\n return '暂无相关结果';\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n isIE: false,\r\n radioSelect: '',\r\n boxHeight: null,\r\n currentPage: 1,\r\n isSelectAll: false,\r\n isScroll: false,\r\n hideornot: true\r\n };\r\n },\r\n methods: {\r\n checkHide() {\r\n if (this.settings.showCheckbox && this.hideornot) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n },\r\n hideordisplay() {\r\n this.hideornot = !this.hideornot;\r\n },\r\n setRadioIndex(index) {\r\n this.radioSelect = index;\r\n },\r\n sortChange(column, prop, order) {\r\n //点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据\r\n // console.log(column + '---' + column.prop + '---' + column.order)\r\n const data = JSON.parse(JSON.stringify(column));\r\n data.prop = (data.prop && data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()) || null;\r\n if (this.settings.defaultSort && this.settings.defaultSort.propExtend) {\r\n data.prop = `${data.prop}${this.settings.defaultSort.propExtend}`;\r\n }\r\n data.order = data.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : null;\r\n this.$emit('sort-change', data);\r\n },\r\n toggleRow(row, expandedRows) {\r\n // this.expands = [];\r\n const index = _.findIndex(expandedRows, (v) => v.id == row.id);\r\n if (index != -1) {\r\n this.expands.push(row.id);\r\n this.$emit('toggle-change', row);\r\n } else {\r\n this.expands = _.filter(this.expands, (v) => v != row.id);\r\n }\r\n },\r\n // 多选派发事件selection-change\r\n selectionChange(val) {\r\n this.isSelectAll = val.length == this.data.length;\r\n this.$emit('selection-change', val);\r\n },\r\n /*\r\n\t\t页数改变时，派发pageChange事件，并传递当前分页参数；\r\n\t\t其中pageSize为每页显示多少条数据，page为当前显示多少页\r\n\t\t*/\r\n sizeChange(pageSize) {\r\n this.$emit('page-change', {\r\n pageSize: pageSize\r\n });\r\n },\r\n currentChange(page) {\r\n this.currentPage = page;\r\n this.$emit('page-change', {\r\n page: page\r\n });\r\n },\r\n // 合计\r\n getSummaries(params) {\r\n let { data } = params;\r\n if ('{}' != JSON.stringify(this.summaryData)) {\r\n data = [this.summaryData];\r\n }\r\n let sums = [];\r\n sums[0] = '合计';\r\n let cols = JSON.parse(JSON.stringify(this.settings.summaryCol));\r\n let i = cols.length;\r\n while (i--) {\r\n // 计算当前列的prop字段\r\n let index = cols[i];\r\n if (this.settings.showIndex) {\r\n index -= 1;\r\n }\r\n if (this.settings.showCheckbox) {\r\n index -= 1;\r\n }\r\n if (this.settings.showRadio) {\r\n index -= 1;\r\n }\r\n let prop = this.cols[index].prop;\r\n const values = data.map((item) => Number(item[prop]));\r\n if (!values.every((value) => isNaN(value))) {\r\n sums[cols[i]] = values.reduce((prev, curr) => {\r\n const value = Number(curr);\r\n if (!isNaN(value)) {\r\n let sumVa = Number(prev) + curr;\r\n return sumVa.toFixed(2);\r\n } else {\r\n return Number(prev.toFixed(2));\r\n }\r\n }, 0);\r\n sums[cols[i]];\r\n }\r\n }\r\n\r\n return sums;\r\n },\r\n checkAllChange(val) {\r\n if (val) {\r\n this.$refs.table.toggleAllSelection();\r\n } else {\r\n this.$refs.table.clearSelection();\r\n }\r\n },\r\n //自定义表头斑马线\r\n setRowClassName({ row, rowIndex }) {\r\n let index = rowIndex;\r\n if (index % 2 == 0) {\r\n return 'warning-row';\r\n }\r\n }\r\n },\r\n watch: {\r\n radioSelect(n) {\r\n this.$emit('radio-change', this.data[n]);\r\n },\r\n pageset: {\r\n deep: true,\r\n handler(n) {\r\n this.currentPage = n.pageNum;\r\n }\r\n }\r\n },\r\n components: {\r\n slotItem: {\r\n props: ['slots', 'row', 'index'],\r\n render(h) {\r\n let vnode = this.slots({\r\n row: this.row,\r\n index: this.index\r\n });\r\n return h('div', vnode);\r\n }\r\n }\r\n },\r\n created() {\r\n const userAgent = window.navigator.userAgent;\r\n const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; //判断是否IE<11浏览器\r\n const isEdge = userAgent.indexOf('Edge') > -1 && !isIE; //判断是否IE的Edge浏览器\r\n const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;\r\n this.isIE = isIE11 || isEdge || isIE;\r\n }\r\n};\r\n",{"version":3,"sources":["table.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0KA;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;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;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","file":"table.vue","sourceRoot":"src/components/common","sourcesContent":["<!--\r\n * @Author: zzy6937@qq.com\r\n * @Date: 2019-07-01 09:14:32\r\n * @LastEditors: wf\r\n * @LastEditTime: 2021-09-22 21:24:17\r\n * @Description:\r\n -->\r\n<template>\r\n <div class=\"zz-table\">\r\n <!-- :height='isScroll ? boxHeight : null' -->\r\n <el-table\r\n :border=\"settings.tableBorder\"\r\n :height=\"height\"\r\n style=\"width: 100%\"\r\n ref=\"table\"\r\n v-loading=\"loading\"\r\n :data=\"data\"\r\n :summary-method=\"getSummaries\"\r\n :show-summary=\"!!(settings.summaryCol && settings.summaryCol.length)\"\r\n tooltip-effect=\"light\"\r\n size=\"small\"\r\n :key=\"updateFlag\"\r\n @selection-change=\"selectionChange\"\r\n row-key=\"id\"\r\n :expand-row-keys=\"expands\"\r\n @expand-change=\"toggleRow\"\r\n @sort-change=\"sortChange\"\r\n :default-sort=\"settings.defaultSort\"\r\n :empty-text=\"emptyText\"\r\n :show-header=\"settings.showHeader\"\r\n :row-class-name=\"setRowClassName\"\r\n lazy\r\n :load=\"load\"\r\n :tree-props=\"treeProps\"\r\n class=\"customer-table\"\r\n >\r\n <!-- 显示多选框 -->\r\n <el-table-column\r\n type=\"selection\"\r\n width=\"60\"\r\n align=\"center\"\r\n v-if=\"settings.showCheckbox\"\r\n :selectable=\"selectable\"\r\n ></el-table-column>\r\n <!-- 显示单选框 -->\r\n <el-table-column width=\"50\" align=\"left\" v-if=\"settings.showRadio\">\r\n <template slot-scope=\"scope\">\r\n <el-radio-group v-model=\"radioSelect\">\r\n <el-radio :label=\"scope.$index\"></el-radio>\r\n </el-radio-group>\r\n </template>\r\n </el-table-column>\r\n <!-- 显示序号 -->\r\n <el-table-column label=\"No.\" type=\"index\" :width=\"70\" align=\"left\" v-if=\"settings.showIndex\"></el-table-column>\r\n <el-table-column\r\n label=\"NO.\"\r\n type=\"index\"\r\n :width=\"settings.showNumberWidth\"\r\n align=\"left\"\r\n v-if=\"settings.showNumber\"\r\n ></el-table-column>\r\n <!-- 显示具体行 -->\r\n <el-table-column\r\n v-for=\"(item, index) in cols\"\r\n :fixed=\"item.fixed\"\r\n :width=\"item.width\"\r\n :min-width=\"item.minWidth\"\r\n :prop=\"item.prop\"\r\n :label=\"item.label\"\r\n :key=\"index\"\r\n :type=\"item.type\"\r\n align=\"left\"\r\n :sortable=\"item.sort || false\"\r\n filter-placement=\"bottom\"\r\n :show-overflow-tooltip=\"!isIE\"\r\n >\r\n <template slot=\"header\" slot-scope=\"scope\">\r\n <slot v-if=\"item.headerSlot\" :name=\"item.headerSlot\" :data=\"scope\"></slot>\r\n <span v-else>{{ item.label }}</span>\r\n </template>\r\n <template slot-scope=\"scope\">\r\n <!-- 插槽 -->\r\n <slotItem v-if=\"item.slot\" :row=\"scope.row\" :index=\"scope.$index\" :slots=\"$scopedSlots[item.slot]\"></slotItem>\r\n <!-- 过滤方法 -->\r\n <el-tooltip\r\n v-else-if=\"item.format && isIE\"\r\n class=\"item\"\r\n effect=\"light\"\r\n placement=\"bottom\"\r\n :disabled=\"item.format(scope.row[item.prop]).length < 2\"\r\n :content=\"item.format(scope.row[item.prop])\"\r\n >\r\n <p\r\n @click=\"item.click ? item.click() : null\"\r\n v-html=\"\r\n item.format(scope.row[item.prop], scope.row) ||\r\n (item.format(scope.row[item.prop], scope.row) === 0 ? 0 : item.empty ? '' : '-')\r\n \"\r\n ></p>\r\n </el-tooltip>\r\n <p\r\n v-else-if=\"item.format && !isIE\"\r\n @click=\"item.click ? item.click() : null\"\r\n v-html=\"item.format(scope.row[item.prop]) || (item.format(scope.row[item.prop]) == 0 ? 0 : '-')\"\r\n ></p>\r\n <!-- <p\r\n v-else-if=\"item.format && isIE\" \r\n class=\"item\" effect=\"light\" placement=\"top-start\" \r\n @click=\"item.click ? item.click() : null\"\r\n >\r\n {{\r\n item.format(scope.row[item.prop], scope.row) ||\r\n (item.format(scope.row[item.prop], scope.row) === 0 ? 0 : item.empty ? '' : '-')\r\n }}\r\n </p> -->\r\n <!-- <p v-else-if=\"item.format\" @click='item.click?item.click():null'>{{item.format(scope.row[item.prop]) || (item.format(scope.row[item.prop]) == 0 ? 0 : '-')}}</p> -->\r\n <!-- 默认显示 -->\r\n <el-tooltip\r\n v-else-if=\"!item.slot && !item.format && isIE\"\r\n class=\"item\"\r\n effect=\"light\"\r\n placement=\"bottom\"\r\n :disabled=\"scope.row[item.prop] && scope.row[item.prop].length < 2\"\r\n :content=\"scope.row[item.prop]\"\r\n >\r\n <p\r\n @click=\"item.click ? item.click() : null\"\r\n v-html=\"scope.row[item.prop] || (scope.row[item.prop] === 0 ? 0 : item.empty ? '' : '-')\"\r\n ></p>\r\n </el-tooltip>\r\n <p\r\n v-else\r\n @click=\"item.click ? item.click() : null\"\r\n v-html=\"scope.row[item.prop] || (scope.row[item.prop] === 0 ? 0 : item.empty ? '' : '-')\"\r\n ></p>\r\n <!-- <p v-else-if=\"item.fixToolTip\" v-tip.same :data-txt=\"scope.row[item.prop]\" @click=\"item.click ? item.click() : null\">\r\n {{ scope.row[item.prop] || (scope.row[item.prop] === 0 ? 0 : item.empty ? '' : '-') }}\r\n </p> -->\r\n <!-- <p v-else v-tip :data-txt=\"scope.row[item.prop]\" @click=\"item.click ? item.click() : null\">\r\n {{ scope.row[item.prop] || (scope.row[item.prop] === 0 ? 0 : item.empty ? '' : '-') }}\r\n </p> -->\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n <div class=\"foot\" v-if=\"!settings.hideFoot\">\r\n <!-- 手动全选及操作 -->\r\n <!-- <div v-if=\"false\" class=\"selectAll\" :class=\"{ hasIndex: settings.showIndex }\">\r\n <el-checkbox v-if=\"checkHide()\" v-model=\"isSelectAll\" @change=\"checkAllChange\"></el-checkbox>\r\n <el-tooltip class=\"item\" effect=\"light\" content=\"展示/隐藏\" placement=\"bottom\">\r\n <span :class=\"checkHide()?'batch_display':'batch_collapse'\" class=\"batch_button\" @click=\"hideordisplay\"></span>\r\n </el-tooltip>\r\n <slot v-if=\"checkHide()\" name=\"batchtodo\"></slot>\r\n </div> -->\r\n <el-pagination\r\n v-if=\"pageset.hasOwnProperty('total') && !settings.hidePagination\"\r\n class=\"pagination\"\r\n background\r\n @size-change=\"sizeChange\"\r\n @current-change=\"currentChange\"\r\n :current-page=\"currentPage\"\r\n :page-sizes=\"pageset.pageSizes || [15, 30, 60, 120]\"\r\n :page-size=\"pageset.pageSize || 15\"\r\n :total=\"pageset.total || 0\"\r\n layout=\"total, sizes, prev, pager, next, jumper\"\r\n >\r\n </el-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n name: 'zz-table',\r\n props: {\r\n /*\r\n\t\ttable例设置\r\n\t\t[{\r\n\t\t\tlabel: 例名. 必须. String\r\n\t\t\tprop: 数据字段. 必须. String\r\n\t\t\tfixed: 当前例是否固定. 值有left,right。 String\r\n\t\t\twidth: 例宽. Number\r\n\t\t\tslot: 插槽方式, String\r\n\t\t\tformat: 数据过滤方法, Function\r\n\t\t\tclick: 当前内容的点击事件, Function\r\n\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\t\ttable数据\r\n\t\t*/\r\n data: {\r\n type: Array,\r\n default() {\r\n return [];\r\n }\r\n },\r\n /*\r\n\t\ttable表格设置\r\n\t\t*/\r\n settings: {\r\n type: Object,\r\n default() {\r\n return {\r\n // 是否显示表头\r\n showHeader: true,\r\n // 是否显示序号\r\n showIndex: false,\r\n // 是否显示序列号大写\r\n showNUmber: false,\r\n // 序列号宽度\r\n showNumberWidth: '70',\r\n // 是否显示多选框\r\n showCheckbox: false,\r\n hideAllCheckbox: false,\r\n // 是否显示单选框\r\n showRadio: false,\r\n // 需要统计列的prop集合，从0开始\r\n summaryCol: [],\r\n // 是否显示边框\r\n tableBorder: false\r\n };\r\n }\r\n },\r\n /*\r\n\t\t分页设置\r\n\t\t*/\r\n pageset: {\r\n type: Object,\r\n default() {\r\n return {\r\n total: 0,\r\n pageSize: 10,\r\n pageNum: 1,\r\n pageSizes: [15, 30, 60, 120]\r\n };\r\n }\r\n },\r\n loading: {\r\n type: Boolean,\r\n default() {\r\n return false;\r\n }\r\n },\r\n height: 0,\r\n updateFlag: false, //触发表格重绘\r\n // 统计数据.传入统计数据则显示该统计数据，否则显示现有列表数据\r\n summaryData: {},\r\n // 判断多选框是否可以勾选\r\n selectable: {\r\n type: Function,\r\n default() {\r\n return (row, index) => {\r\n return true;\r\n };\r\n }\r\n },\r\n expands: {\r\n type: Array,\r\n default() {\r\n return [];\r\n }\r\n },\r\n treeProps: {\r\n type: Object,\r\n default() {\r\n return {};\r\n }\r\n },\r\n load: {\r\n type: Function,\r\n default() {\r\n return () => {};\r\n }\r\n },\r\n emptyText: {\r\n type: String,\r\n default() {\r\n return '暂无相关结果';\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n isIE: false,\r\n radioSelect: '',\r\n boxHeight: null,\r\n currentPage: 1,\r\n isSelectAll: false,\r\n isScroll: false,\r\n hideornot: true\r\n };\r\n },\r\n methods: {\r\n checkHide() {\r\n if (this.settings.showCheckbox && this.hideornot) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n },\r\n hideordisplay() {\r\n this.hideornot = !this.hideornot;\r\n },\r\n setRadioIndex(index) {\r\n this.radioSelect = index;\r\n },\r\n sortChange(column, prop, order) {\r\n //点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据\r\n // console.log(column + '---' + column.prop + '---' + column.order)\r\n const data = JSON.parse(JSON.stringify(column));\r\n data.prop = (data.prop && data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()) || null;\r\n if (this.settings.defaultSort && this.settings.defaultSort.propExtend) {\r\n data.prop = `${data.prop}${this.settings.defaultSort.propExtend}`;\r\n }\r\n data.order = data.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : null;\r\n this.$emit('sort-change', data);\r\n },\r\n toggleRow(row, expandedRows) {\r\n // this.expands = [];\r\n const index = _.findIndex(expandedRows, (v) => v.id == row.id);\r\n if (index != -1) {\r\n this.expands.push(row.id);\r\n this.$emit('toggle-change', row);\r\n } else {\r\n this.expands = _.filter(this.expands, (v) => v != row.id);\r\n }\r\n },\r\n // 多选派发事件selection-change\r\n selectionChange(val) {\r\n this.isSelectAll = val.length == this.data.length;\r\n this.$emit('selection-change', val);\r\n },\r\n /*\r\n\t\t页数改变时，派发pageChange事件，并传递当前分页参数；\r\n\t\t其中pageSize为每页显示多少条数据，page为当前显示多少页\r\n\t\t*/\r\n sizeChange(pageSize) {\r\n this.$emit('page-change', {\r\n pageSize: pageSize\r\n });\r\n },\r\n currentChange(page) {\r\n this.currentPage = page;\r\n this.$emit('page-change', {\r\n page: page\r\n });\r\n },\r\n // 合计\r\n getSummaries(params) {\r\n let { data } = params;\r\n if ('{}' != JSON.stringify(this.summaryData)) {\r\n data = [this.summaryData];\r\n }\r\n let sums = [];\r\n sums[0] = '合计';\r\n let cols = JSON.parse(JSON.stringify(this.settings.summaryCol));\r\n let i = cols.length;\r\n while (i--) {\r\n // 计算当前列的prop字段\r\n let index = cols[i];\r\n if (this.settings.showIndex) {\r\n index -= 1;\r\n }\r\n if (this.settings.showCheckbox) {\r\n index -= 1;\r\n }\r\n if (this.settings.showRadio) {\r\n index -= 1;\r\n }\r\n let prop = this.cols[index].prop;\r\n const values = data.map((item) => Number(item[prop]));\r\n if (!values.every((value) => isNaN(value))) {\r\n sums[cols[i]] = values.reduce((prev, curr) => {\r\n const value = Number(curr);\r\n if (!isNaN(value)) {\r\n let sumVa = Number(prev) + curr;\r\n return sumVa.toFixed(2);\r\n } else {\r\n return Number(prev.toFixed(2));\r\n }\r\n }, 0);\r\n sums[cols[i]];\r\n }\r\n }\r\n\r\n return sums;\r\n },\r\n checkAllChange(val) {\r\n if (val) {\r\n this.$refs.table.toggleAllSelection();\r\n } else {\r\n this.$refs.table.clearSelection();\r\n }\r\n },\r\n //自定义表头斑马线\r\n setRowClassName({ row, rowIndex }) {\r\n let index = rowIndex;\r\n if (index % 2 == 0) {\r\n return 'warning-row';\r\n }\r\n }\r\n },\r\n watch: {\r\n radioSelect(n) {\r\n this.$emit('radio-change', this.data[n]);\r\n },\r\n pageset: {\r\n deep: true,\r\n handler(n) {\r\n this.currentPage = n.pageNum;\r\n }\r\n }\r\n },\r\n components: {\r\n slotItem: {\r\n props: ['slots', 'row', 'index'],\r\n render(h) {\r\n let vnode = this.slots({\r\n row: this.row,\r\n index: this.index\r\n });\r\n return h('div', vnode);\r\n }\r\n }\r\n },\r\n created() {\r\n const userAgent = window.navigator.userAgent;\r\n const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; //判断是否IE<11浏览器\r\n const isEdge = userAgent.indexOf('Edge') > -1 && !isIE; //判断是否IE的Edge浏览器\r\n const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;\r\n this.isIE = isIE11 || isEdge || isIE;\r\n }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@import '@assets/css/public-style.scss';\r\n.zz-table .el-table {\r\n border-radius: 6px;\r\n /deep/ td {\r\n .opt {\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n i {\r\n margin-right: 20px;\r\n width: 14px;\r\n height: 14px;\r\n line-height: 14px;\r\n &:last-child {\r\n margin-right: 0;\r\n }\r\n }\r\n }\r\n }\r\n /deep/ .el-table-column--selection .cell {\r\n padding-left: 0 !important;\r\n padding-right: 10px !important;\r\n }\r\n /deep/ .el-table__header .el-table-column--selection {\r\n .cell {\r\n padding-left: 0;\r\n }\r\n }\r\n}\r\n.foot {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: flex-end;\r\n .selectAll {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n .el-checkbox {\r\n text-align: center;\r\n width: 40px;\r\n margin-right: 10px;\r\n }\r\n //table下面foot的按钮样式\r\n .el-button.is-disabled {\r\n border: none;\r\n background: #ffffff !important;\r\n border: 1px solid #a6abb6;\r\n opacity: 0.5;\r\n border-radius: 4px;\r\n & span {\r\n font-size: 12px;\r\n font-family: Microsoft YaHei;\r\n font-weight: 400;\r\n line-height: 16px;\r\n color: #b6b1b1 !important;\r\n opacity: 1;\r\n }\r\n }\r\n .el-button--primary.batch_btn {\r\n background-color: #ffffff;\r\n border: 1px solid #a6abb6;\r\n opacity: 1;\r\n border-radius: 4px;\r\n color: #7b7f86;\r\n &:hover {\r\n border-color: $mainTextColor !important;\r\n span {\r\n color: $mainTextColor !important;\r\n }\r\n }\r\n &.is-disabled {\r\n color: #7b7f86ad;\r\n border: 0.01rem solid #a6abb66b;\r\n &:hover {\r\n color: #7b7f86ad;\r\n border-color: #a6abb66b !important;\r\n }\r\n }\r\n span {\r\n font-size: 12px;\r\n font-family: Microsoft YaHei;\r\n font-weight: 400;\r\n line-height: 16px;\r\n color: #7b7f86 !important;\r\n opacity: 1;\r\n }\r\n }\r\n .batch_button {\r\n display: inline-block;\r\n width: 30px;\r\n height: 30px;\r\n background-size: 100% 100%;\r\n cursor: pointer;\r\n margin-right: 10px;\r\n }\r\n .batch_display {\r\n background: url('~@/assets/img/btn_shou.png') center no-repeat;\r\n background-size: 100% 100%;\r\n }\r\n .batch_collapse {\r\n background: url('~@/assets/img/btn_collapse.png') center no-repeat;\r\n background-size: 100% 100%;\r\n }\r\n }\r\n}\r\n</style>\r\n"]}]}
|
