安装less
npm install less –save-dev
npm install less-loader –save-dev
模板代码
<template> <div class="statistics common-content"> <el-row class="searchForm"> <el-col :span="24"> <div class="grid-content"> <span class="label">查询条件：</span> <span class="label">过去</span> <el-input-number v-model="pastDays" controls-position="right" :min="0" :max="90"></el-input-number> <span class="label">天</span> <span class="attention">（注：0查询所有）</span> <el-button type="primary" @click="search">查询</el-button> </div> </el-col> </el-row> <el-table :data="statisticDatas" border style="width: 100%;" size="medium" :row-class-name="rowClassNameHandler"> <el-table-column label="分类名称" width="460" align="left" show-overflow-tooltip> <template slot-scope="scope"> <span :style="{marginLeft: scope.row.level * 23 + 'px'}"> </span> <i v-if="scope.row.showChildren" :class="{'fa fa-folder-open':scope.row.showChildren, 'fa fa-file-o':!scope.row.hasChildren}" @click="onExpand(scope.row)" :style="{cursor:scope.row.hasChildren ? 'pointer' : 'normal'}"></i> <i v-else :class="{'fa fa-folder':scope.row.hasChildren, 'fa fa-file-o':!scope.row.hasChildren}" @click="onExpand(scope.row)" :style="{cursor:scope.row.hasChildren ? 'pointer' : 'normal'}"></i> <span :data-level="scope.row.level" :style="{marginLeft: 4 + 'px'}">{{ scope.row.categoryName }}</span> </template> </el-table-column> <el-table-column prop="categoryid" label="分类ID" width="80" align="center"></el-table-column> <el-table-column prop="parentcategoryid" label="父类ID" width="80" align="center"></el-table-column> <el-table-column prop="undeployed" label="模板（未发布）" align="left"></el-table-column> <el-table-column prop="deployed" label="模板（已发布）" align="left"></el-table-column> <el-table-column prop="edit" label="合同实例（编辑中）" align="left"></el-table-column> <el-table-column prop="completed" label="合同实例（完成）" align="left"></el-table-column> </el-table> </div></template><script>//引用js代码</script><style lang="less">.statistics { padding: 10px; .hiddenRow { display: none; } .searchForm{ padding: 10px; span.label{ margin-right: 10px; } span.attention{ color: #e50021; } }}</style>
js代码
<script>export default { name: 'ContractStatistic', data() { return { statisticDatas: [], pastDays: 0 } }, mounted() { let self = this self.loadStatisticData() }, methods: { _processLevelStatisticData(dataArray) { let self = this let resultArray = [] // 一级栏目 let level = 1 for (let i = 0; i < dataArray.length; i++) { let item = dataArray[i] // 查找一级分类 if (item.parentcategoryid === 0) { item['level'] = level resultArray.push(item) self._loadChildrenData(resultArray, dataArray, item, level + 1) } } return resultArray }, _loadChildrenData(resultArray, originArray, item, level) { let self = this let deployed = 0 let undeployed = 0 let edit = 0 let completed = 0 for (let i = 0; i < originArray.length; i++) { let originItem = originArray[i] // 判断是否是item项的子项 if (originItem.parentcategoryid === item.categoryid) { item['hasChildren'] = true item['showChildren'] = false originItem['level'] = level originItem['visible'] = false // 子项默认隐藏 originItem['hiddenByCategory'] = false resultArray.push(originItem) self._loadChildrenData( resultArray, originArray, originItem, level + 1 ) // 应该放在统计完子类数据之后 deployed += originItem.deployed undeployed += originItem.undeployed edit += originItem.edit completed += originItem.completed } } // 计算子栏目统计合计 item.deployed += deployed item.undeployed += undeployed item.edit += edit item.completed += completed }, search() { console.log(this.pastDays) this.loadStatisticData() }, loadStatisticData() { let self = this let params = { pastDays: self.pastDays } let result = [ { "parentcategoryid": 0, "edit": 0, "undeployed": 1, "deployed": 0, "completed": 0, "categoryName": "商业管理类", "categoryid": 1105 }, { "parentcategoryid": 0, "edit": 0, "undeployed": 0, "deployed": 1, "completed": 0, "categoryName": "研发设计类", "categoryid": 1117 }, { "parentcategoryid": 0, "edit": 0, "undeployed": 3, "deployed": 0, "completed": 0, "categoryName": "行政管理类", "categoryid": 1901 }, { "parentcategoryid": 0, "edit": 0, "undeployed": 6, "deployed": 0, "completed": 0, "categoryName": "哈哈", "categoryid": 2402 }, { "parentcategoryid": 0, "edit": 10, "undeployed": 2, "deployed": 21, "completed": 5, "categoryName": "测试分类", "categoryid": 3201 }, { "parentcategoryid": 0, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "临时创建", "categoryid": 4901 }, { "parentcategoryid": 1, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "哈哈2", "categoryid": 3403 }, { "parentcategoryid": 1, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "lzk", "categoryid": 3739 }, { "parentcategoryid": 1, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "test", "categoryid": 3740 }, { "parentcategoryid": 1, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "122", "categoryid": 4201 }, { "parentcategoryid": 1, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "招标材设类（模板包）", "categoryid": 4602 }, { "parentcategoryid": 1101, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "111", "categoryid": 1102 }, { "parentcategoryid": 1101, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "11", "categoryid": 1103 }, { "parentcategoryid": 1103, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "111", "categoryid": 1104 }, { "parentcategoryid": 1105, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "财务", "categoryid": 1106 }, { "parentcategoryid": 1105, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "销售", "categoryid": 1109 }, { "parentcategoryid": 1105, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "信息", "categoryid": 1110 }, { "parentcategoryid": 1105, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "运营", "categoryid": 1111 }, { "parentcategoryid": 1105, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "合同", "categoryid": 1112 }, { "parentcategoryid": 1105, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "重庆", "categoryid": 1114 }, { "parentcategoryid": 1105, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "长沙", "categoryid": 1115 }, { "parentcategoryid": 1105, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "成都", "categoryid": 1121 }, { "parentcategoryid": 1105, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "武汉", "categoryid": 1122 }, { "parentcategoryid": 1105, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "合同模板管理", "categoryid": 1902 }, { "parentcategoryid": 1106, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "税务", "categoryid": 1107 }, { "parentcategoryid": 1114, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "222", "categoryid": 2801 }, { "parentcategoryid": 1114, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "555", "categoryid": 2902 }, { "parentcategoryid": 1114, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "111", "categoryid": 2903 }, { "parentcategoryid": 1114, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "不能没有名称啊", "categoryid": 2904 }, { "parentcategoryid": 1117, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "解决哈哈啥哈", "categoryid": 1601 }, { "parentcategoryid": 1117, "edit": 0, "undeployed": 0, "deployed": 1, "completed": 2, "categoryName": "主合同", "categoryid": 2701 }, { "parentcategoryid": 1601, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "测试", "categoryid": 2601 }, { "parentcategoryid": 1902, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "商业管理类", "categoryid": 1903 }, { "parentcategoryid": 1902, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "研发设计类", "categoryid": 1904 }, { "parentcategoryid": 1902, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "招标材设类", "categoryid": 1905 }, { "parentcategoryid": 2402, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "总包", "categoryid": 2403 }, { "parentcategoryid": 2403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "主合同", "categoryid": 2404 }, { "parentcategoryid": 2403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "合同附件", "categoryid": 2405 }, { "parentcategoryid": 2403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "工程标准", "categoryid": 2406 }, { "parentcategoryid": 2601, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "测试技术框架是否是", "categoryid": 3001 }, { "parentcategoryid": 2801, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "55555555555", "categoryid": 2802 }, { "parentcategoryid": 2801, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "222", "categoryid": 2901 }, { "parentcategoryid": 2802, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "6666666666", "categoryid": 2803 }, { "parentcategoryid": 3201, "edit": 7, "undeployed": 0, "deployed": 3, "completed": 3, "categoryName": "222", "categoryid": 3906 }, { "parentcategoryid": 3201, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "5", "categoryid": 3907 }, { "parentcategoryid": 3201, "edit": 0, "undeployed": 6, "deployed": 0, "completed": 0, "categoryName": "6", "categoryid": 3908 }, { "parentcategoryid": 3201, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "附件迁移测试", "categoryid": 4501 }, { "parentcategoryid": 3201, "edit": 6, "undeployed": 0, "deployed": 2, "completed": 1, "categoryName": "模板测试", "categoryid": 4601 }, { "parentcategoryid": 3201, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "11", "categoryid": 4702 }, { "parentcategoryid": 3201, "edit": 0, "undeployed": 1, "deployed": 0, "completed": 0, "categoryName": "测试1", "categoryid": 4802 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "11111", "categoryid": 3708 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "11113", "categoryid": 3711 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "test2", "categoryid": 3721 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "test2", "categoryid": 3732 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "test2", "categoryid": 3733 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "test2", "categoryid": 3734 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "test2", "categoryid": 3735 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "1", "categoryid": 3743 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "test99", "categoryid": 3747 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "test98", "categoryid": 3748 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "test97", "categoryid": 3749 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "test01", "categoryid": 3802 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "88", "categoryid": 3909 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "999", "categoryid": 4002 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "2", "categoryid": 4202 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "3", "categoryid": 4203 }, { "parentcategoryid": 3403, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "上升", "categoryid": 4701 }, { "parentcategoryid": 3740, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "222", "categoryid": 3746 }, { "parentcategoryid": 3743, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "1", "categoryid": 3744 }, { "parentcategoryid": 4201, "edit": 0, "undeployed": 0, "deployed": 0, "completed": 0, "categoryName": "77777", "categoryid": 4404 } ] let resultArray = self._processLevelStatisticData(result) self.statisticDatas = resultArray }, rowClassNameHandler({ row, rowIndex }) { // console.log(row['visible']) let className = 'pid-' + row.parentcategoryid if ( row.parentcategoryid !== 0 && (row['visible'] !== true || row['hiddenByCategory'] === true) ) { className += ' hiddenRow' } return className }, onExpand(row) { let self = this let isShowChildren = !row['showChildren'] row['showChildren'] = isShowChildren self._loadAllSubItems(row, true, isShowChildren) }, _loadAllSubItems(item, isFirstLevlChildren, isShowChilren) { let self = this let dataArray = [] for (let i = 0; i < self.statisticDatas.length; i++) { let tempItem = self.statisticDatas[i] if (tempItem.parentcategoryid === item.categoryid) { if (isFirstLevlChildren) { tempItem['visible'] = !tempItem['visible'] } tempItem['hiddenByCategory'] = !isShowChilren dataArray.push(tempItem) let subItemArray = self._loadAllSubItems( tempItem, false, isShowChilren ) dataArray = dataArray.concat(subItemArray) } } return dataArray } }}</script>
