| | |
| | | <!-- 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> |
| | |
| | | > |
| | | <template slot-scope="scope"> |
| | | <span v-if="item.price">{{ "¥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span> |
| | | <!-- 带点的功能 --> |
| | | <!-- 状态显示 --> |
| | | <div v-else-if="item.status"> |
| | | <!-- <span v-if="scope.row.status == '完成'" class="Badge greenSlot"></span> |
| | | <span v-else-if="scope.row.status == '草稿'" class="Badge redSlot"></span> |
| | | <span v-else-if="scope.row.status == '就绪'" class="Badge redSlot"></span> |
| | | <span v-else-if="scope.row.status == '已取消'" class="Badge yellowSlot"></span> --> |
| | | <span |
| | | class="Badge" |
| | | :class="{ |
| | | greenSlot: scope.row.status == '完成', |
| | | redSlot: scope.row.status == '已取消', |
| | | blueSlot: scope.row.status == '就绪', |
| | | graySlot: scope.row.status == '草稿' |
| | | greenSlot: scope.row.status == '4'||scope.row.status == '完成', |
| | | redSlot: scope.row.status == '5', |
| | | blueSlot: scope.row.status == '3'||scope.row.status == '就绪', |
| | | graySlot: scope.row.status == '1', |
| | | }" |
| | | >{{ scope.row[item.prop] }}</span |
| | | >{{ |
| | | item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop] |
| | | }}</span |
| | | > |
| | | </div> |
| | | <!-- 调用方法显示文字 --> |
| | |
| | | <!-- 小于当前时间显示不同颜色 --> |
| | | <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'" |
| | | @click="selCommonClick(scope.row)" |
| | | >{{ scope.row[item.prop] }}</span |
| | | > |
| | | <span v-else-if="item.propType=='mulitple'"> |
| | | {{ scope.row[item.prop][item.propTwo]?scope.row[item.prop][item.propTwo]:'--' }} |
| | | <span v-else-if="item.propType == 'mulitple'"> |
| | | {{ scope.row[item.prop][item.propTwo] ? scope.row[item.prop][item.propTwo] : "--" }} |
| | | </span> |
| | | <span :class="item.className ? item.className : ''" v-else>{{ |
| | | scope.row[item.prop] ? scope.row[item.prop] : scope.row[item.prop] === 0 ? scope.row[item.prop] : "--" |
| | | }}</span> |
| | | |
| | | </template> |
| | | </el-table-column> |
| | | <slot name="tableButton" /> |
| | |
| | | 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%; |