| | |
| | | <!-- eslint-disable vue/no-use-v-if-with-v-for --> |
| | | <template> |
| | | <div |
| | | :class="{ 'table-view': true, table_height: !showSummary }" |
| | | v-loading="loading" |
| | | > |
| | | <div :class="{ 'table-view': true, table_height: !showSummary }" v-loading="loading"> |
| | | <el-table |
| | | ref="table" |
| | | border |
| | |
| | | :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> |
| | | <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> |
| | | <el-table-column |
| | | v-for="(item, i) in tableList.tableColumn" |
| | | :key="i" |
| | |
| | | v-if="item.isShowColumn" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <span v-if="item.price">{{ |
| | | "¥" + number_format(scope.row[item.prop], 2, ".", ",") |
| | | }}</span> |
| | | <span v-if="item.price">{{ "¥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span> |
| | | <!-- 状态显示 --> |
| | | <div v-else-if="item.status"> |
| | | <span |
| | |
| | | graySlot: scope.row.status == '1', |
| | | }" |
| | | >{{ |
| | | item.isCallMethod |
| | | ? item.getCallMethod(scope.row[item.prop], scope.row) |
| | | : scope.row[item.prop] |
| | | item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop] |
| | | }}</span |
| | | > |
| | | </div> |
| | | <!-- 调用方法显示文字 --> |
| | | <div v-else-if="item.isCallMethod"> |
| | | <span>{{ |
| | | item.getCallMethod(scope.row[item.prop], scope.row) |
| | | }}</span> |
| | | <span>{{ item.getCallMethod(scope.row[item.prop], scope.row) }}</span> |
| | | </div> |
| | | <!-- 小于当前时间显示不同颜色 --> |
| | | <span |
| | | v-else-if="item.date" |
| | | :style="{ |
| | | color: |
| | | new Date().getTime() > new Date(scope.row[item.prop]).getTime() |
| | | ? '#D23F3A' |
| | | : '#606266', |
| | | color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266' |
| | | }" |
| | | >{{ timeAgo(scope.row[item.prop]) }}</span |
| | | > |
| | |
| | | >{{ scope.row[item.prop] }}</span |
| | | > |
| | | <span v-else-if="item.propType == 'mulitple'"> |
| | | {{ |
| | | scope.row[item.prop][item.propTwo] |
| | | ? scope.row[item.prop][item.propTwo] |
| | | : "--" |
| | | }} |
| | | {{ 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] |
| | | : "--" |
| | | scope.row[item.prop] ? scope.row[item.prop] : scope.row[item.prop] === 0 ? scope.row[item.prop] : "--" |
| | | }}</span> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div> |
| | | <div v-if="showCheckcol" class="styleBtn"> |
| | | <i @click="checkcol()" class="label">...</i> |
| | | <el-checkbox-group |
| | | v-model="showcolList" |
| | | v-show="iscolopen" |
| | | class="checkbox-group" |
| | | @change="selCeckBoxList" |
| | | > |
| | | <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item" |
| | | >{{ item }} |
| | | </el-checkbox> |
| | | <el-checkbox-group v-model="showcolList" v-show="iscolopen" class="checkbox-group" @change="selCeckBoxList"> |
| | | <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox> |
| | | </el-checkbox-group> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { timeago } from "@/common/config/index"; |
| | | import { timeago } from "@/common/config/index" |
| | | export default { |
| | | name: "TableCommonView", |
| | | props: { |
| | |
| | | highlight: false, |
| | | tableColumn: [ |
| | | // table表单 |
| | | { label: "", prop: "", min: 200, tooltip: true }, |
| | | ], |
| | | }; |
| | | { label: "", prop: "", min: 200, tooltip: true } |
| | | ] |
| | | } |
| | | }, |
| | | showcol: { |
| | | typeof: Array, |
| | | default: () => [], |
| | | }, |
| | | default: () => [] |
| | | } |
| | | }, |
| | | // 合并单元格 |
| | | rowData: { |
| | | type: Array, |
| | | default: () => { |
| | | return []; |
| | | }, |
| | | return [] |
| | | } |
| | | }, |
| | | // 加载的loading |
| | | loading: { |
| | | type: Boolean, |
| | | default: false, |
| | | default: false |
| | | }, |
| | | // 选中的样式 |
| | | selectClassRow: { |
| | | type: Object, |
| | | default: () => { |
| | | return {}; |
| | | }, |
| | | return {} |
| | | } |
| | | }, |
| | | showCheckcol: { |
| | | type: Boolean, |
| | | default: true, |
| | | default: true |
| | | }, |
| | | showSummary: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | default: false |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | iscolopen: false, |
| | | showcolList: this.tableList.showcol, |
| | | }; |
| | | showcolList: this.tableList.showcol |
| | | } |
| | | }, |
| | | watch: {}, |
| | | computed: {}, |
| | | beforeUpdate() {}, |
| | | methods: { |
| | | onMaskClick() { |
| | | this.iscolopen = false; |
| | | this.iscolopen = false |
| | | }, |
| | | // 合并单元格 |
| | | objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
| | | row; |
| | | column; |
| | | row |
| | | column |
| | | if (this.rowData && this.rowData.length > 0) { |
| | | // 产品BOM 表格特殊处理 合并单元格 |
| | | if (columnIndex < 5 || columnIndex == 9) { |
| | | const _row = this.rowData[rowIndex]; |
| | | const _col = _row > 0 ? 1 : 0; |
| | | const _row = this.rowData[rowIndex] |
| | | const _col = _row > 0 ? 1 : 0 |
| | | return { |
| | | rowspan: _row, |
| | | colspan: _col, |
| | | }; |
| | | colspan: _col |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | tableRowClick(row) { |
| | | this.$emit("tableRowClick", row); |
| | | this.$emit("tableRowClick", row) |
| | | }, |
| | | handleReserve(row) { |
| | | return row._id ? row._id : row.id; |
| | | return row._id ? row._id : row.id |
| | | }, |
| | | handleSelectionChange(val) { |
| | | this.$emit("getSelectArray", val); |
| | | this.$emit("getSelectArray", val) |
| | | }, |
| | | // 公共详情 |
| | | selCommonClick(row) { |
| | | this.$emit("selCommonClick", row); |
| | | this.$emit("selCommonClick", row) |
| | | }, |
| | | // 选择列 |
| | | checkcol() { |
| | | this.iscolopen = !this.iscolopen; |
| | | this.iscolopen = !this.iscolopen |
| | | }, |
| | | closeCheckbox() { |
| | | let label = document.querySelector(".label"); |
| | | let label = document.querySelector(".label") |
| | | if (label) { |
| | | this.iscolopen = false; |
| | | this.iscolopen = false |
| | | } |
| | | }, |
| | | selCeckBoxList(val) { |
| | | this.$emit("selTableCol", val); |
| | | this.$emit("selTableCol", val) |
| | | }, |
| | | // 单选行相关 |
| | | tableRowClassName({ row }) { |
| | | if (Object.keys(this.selectClassRow).length > 0) { |
| | | if (row.id == this.selectClassRow.id) { |
| | | return "onSelect"; |
| | | return "onSelect" |
| | | } |
| | | } |
| | | this.$emit("tableRowClassName", row); |
| | | this.$emit("tableRowClassName", row) |
| | | }, |
| | | timeAgo(val) { |
| | | return timeago(val); |
| | | return timeago(val) |
| | | }, |
| | | //求和 |
| | | getSummaries(param) { |
| | | if (this.tableList.countcol && this.tableList.countcol.length > 0) { |
| | | const { columns, data } = param; |
| | | const sums = []; |
| | | const { columns, data } = param |
| | | const sums = [] |
| | | columns.forEach((column, index) => { |
| | | if (index === 0) { |
| | | sums[index] = " "; |
| | | return; |
| | | sums[index] = " " |
| | | return |
| | | } |
| | | this.tableList.countcol.forEach((countcols) => { |
| | | if (column.label === countcols) { |
| | | const values = data.map((item) => Number(item[column.property])); |
| | | 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); |
| | | const value = Number(curr) |
| | | if (!isNaN(value)) { |
| | | return prev + curr; |
| | | return prev + curr |
| | | } else { |
| | | return prev; |
| | | return prev |
| | | } |
| | | }, 0); |
| | | sums[index] = |
| | | this.tableList.tableColumn[index - 1].unit + "" + sums[index]; |
| | | }, 0) |
| | | sums[index] = this.tableList.tableColumn[index - 1].unit + "" + sums[index] |
| | | } else { |
| | | sums[index] = ""; |
| | | sums[index] = "" |
| | | } |
| | | } else { |
| | | return; |
| | | return |
| | | } |
| | | }); |
| | | }); |
| | | return sums; |
| | | }) |
| | | }) |
| | | return sums |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | |
| | | .table_height { |
| | | height: 100%; |
| | | } |
| | | .el-table__body-wrapper{ |
| | | .el-table__body-wrapper { |
| | | height: 100%; |
| | | } |
| | | .table-view { |
| | |
| | | border-top-left-radius: 12px; |
| | | border-top-right-radius: 12px; |
| | | overflow: auto; |
| | | } |
| | | .el-table__body-wrapper { |
| | | // height: ; |
| | | } |
| | | } |
| | | </style> |