| | |
| | | <!-- eslint-disable vue/no-use-v-if-with-v-for --> |
| | | <template> |
| | | <div class="table-view" v-loading="loading"> |
| | | <div :class="{ 'table-view': true, table_height: !showSummary }" v-loading="loading"> |
| | | <el-table |
| | | ref="table" |
| | | border |
| | |
| | | :default-expand-all="tableList.isDefaultExpandAll" |
| | | :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" |
| | | :span-method="objectSpanMethod" |
| | | :summary-method="getSummaries" |
| | | :show-summary="showSummary" |
| | | > |
| | | <el-table-column v-if="tableList.selectBox" type="selection" width="40"> </el-table-column> |
| | | <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"> </el-table-column> |
| | |
| | | <span |
| | | class="Badge" |
| | | :class="{ |
| | | greenSlot: scope.row.status == '4', |
| | | greenSlot: scope.row.status == '4'||scope.row.status == '完成', |
| | | redSlot: scope.row.status == '5', |
| | | blueSlot: scope.row.status == '3', |
| | | graySlot: scope.row.status == '1' |
| | | blueSlot: scope.row.status == '3'||scope.row.status == '就绪', |
| | | graySlot: scope.row.status == '1', |
| | | }" |
| | | >{{ |
| | | item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop] |
| | |
| | | <!-- 小于当前时间显示不同颜色 --> |
| | | <span |
| | | v-else-if="item.date" |
| | | :style="{ color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266' }" |
| | | :style="{ |
| | | color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266' |
| | | }" |
| | | >{{ timeAgo(scope.row[item.prop]) }}</span |
| | | > |
| | | <div v-else-if="item.conversion"> |
| | | <span>{{ item.getStatus(scope.row[item.prop]) }}</span> |
| | | </div> |
| | | <span |
| | | v-else-if="item.isClick && scope.row[item.prop]" |
| | | :class="item.className ? item.className : 'sel-name'" |
| | |
| | | showStyle: true, |
| | | tableInfomation: [], // 接口返回数据 |
| | | showcol: [], |
| | | countcol: [], |
| | | allcol: [], |
| | | highlight: false, |
| | | tableColumn: [ |
| | |
| | | showCheckcol: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | showSummary: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | }, |
| | | timeAgo(val) { |
| | | return timeago(val) |
| | | }, |
| | | //求和 |
| | | getSummaries(param) { |
| | | if (this.tableList.countcol && this.tableList.countcol.length > 0) { |
| | | const { columns, data } = param |
| | | const sums = [] |
| | | columns.forEach((column, index) => { |
| | | if (index === 0) { |
| | | sums[index] = " " |
| | | return |
| | | } |
| | | this.tableList.countcol.forEach((countcols) => { |
| | | if (column.label === countcols) { |
| | | const values = data.map((item) => Number(item[column.property])) |
| | | if (!values.every((value) => isNaN(value))) { |
| | | sums[index] = values.reduce((prev, curr) => { |
| | | const value = Number(curr) |
| | | if (!isNaN(value)) { |
| | | return prev + curr |
| | | } else { |
| | | return prev |
| | | } |
| | | }, 0) |
| | | sums[index] = this.tableList.tableColumn[index - 1].unit + "" + sums[index] |
| | | } else { |
| | | sums[index] = "" |
| | | } |
| | | } else { |
| | | return |
| | | } |
| | | }) |
| | | }) |
| | | return sums |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .table_height { |
| | | height: 100%; |
| | | } |
| | | .el-table__body-wrapper { |
| | | height: 100%; |
| | | } |
| | | .table-view { |
| | | position: relative; |
| | | height: 100%; |