| | |
| | | <!-- eslint-disable vue/no-use-v-if-with-v-for --> |
| | | <template> |
| | | <div class="table-view"> |
| | | <div class="table-view" v-loading="loading"> |
| | | <el-table |
| | | ref="table" |
| | | border |
| | | :data="tableList.tableInfomation" |
| | | tooltip-effect="dark" |
| | | :height="'calc(100% - 0px)'" |
| | | :max-height="tableList.maxHeight" |
| | | style="width: 100%" |
| | | :lazy="tableList.lazy" |
| | | :show-summary="showSummary.show" |
| | |
| | | @selection-change="handleSelectionChange" |
| | | :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '12px', 'font-family': 'PingFangSC' }" |
| | | size="mini" |
| | | @row-click="tableRowClick" |
| | | :row-class-name="tableRowClassName" |
| | | > |
| | | <el-table-column v-if="selectBox" type="selection" width="40" :selectable="selectable"> </el-table-column> |
| | | <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"></el-table-column> |
| | | <el-table-column v-if="selectBox" type="selection" width="40"> </el-table-column> |
| | | <el-table-column |
| | | v-for="(item, i) in tableList.tableColumn" |
| | | :key="i" |
| | |
| | | <div v-else-if="item.isProductName" class="product-view"> |
| | | <ul v-if="scope.row.products && scope.row.products.length > 0"> |
| | | <li v-for="(item, index) in scope.row.products" :key="index"> |
| | | <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> |
| | | <div class="name-view"> |
| | | {{ item.name }} |
| | | </div> |
| | | </li> |
| | |
| | | <div v-else-if="item.isProductAmount" class="product-view"> |
| | | <ul v-if="scope.row.products && scope.row.products.length > 0"> |
| | | <li v-for="(item, index) in scope.row.products" :key="index"> |
| | | <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> |
| | | <div class="name-view"> |
| | | {{ item.amount }} |
| | | </div> |
| | | </li> |
| | |
| | | <div v-else-if="item.isProductPrice" class="product-view"> |
| | | <ul v-if="scope.row.products && scope.row.products.length > 0"> |
| | | <li v-for="(item, index) in scope.row.products" :key="index"> |
| | | <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> |
| | | <div class="name-view"> |
| | | {{ item.price }} |
| | | </div> |
| | | </li> |
| | |
| | | <div v-else-if="item.isProductTotal" class="product-view"> |
| | | <ul v-if="scope.row.products && scope.row.products.length > 0"> |
| | | <li v-for="(item, index) in scope.row.products" :key="index"> |
| | | <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'"> |
| | | <div class="name-view"> |
| | | {{ item.total }} |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | <div v-else class="no-product">{{ "--" }}</div> |
| | | </div> |
| | | <!-- 调用方法显示文字 --> |
| | | <div v-else-if="item.isCallMethod"> |
| | | <span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">{{ |
| | | item.getCallMethod(scope.row[item.prop], scope.row) |
| | | }}</span> |
| | | </div> |
| | | <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span> |
| | | </template> |
| | |
| | | mergeNumber: 1 |
| | | } |
| | | } |
| | | }, |
| | | // 选中的样式 |
| | | selectClassRow: { |
| | | type: Object, |
| | | default: () => { |
| | | return {} |
| | | } |
| | | }, |
| | | loading: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | selectBoxList: { |
| | | type: Array, |
| | | default: () => [] |
| | | } |
| | | }, |
| | | |
| | | data() { |
| | | return { |
| | | iscolopen: false, |
| | |
| | | // 公共(销售机会、报价单、销售总单、销售子单。。。) |
| | | selCommonClick(row) { |
| | | this.$emit("selCommonClick", row) |
| | | }, |
| | | // 行点击 |
| | | tableRowClick(row, column, event) { |
| | | this.$emit("tableRowClick", row, column, event) |
| | | }, |
| | | // 单选行相关 |
| | | tableRowClassName({ row }) { |
| | | if (Object.keys(this.selectClassRow).length > 0) { |
| | | if (row.id == this.selectClassRow.id) { |
| | | return "onSelect" |
| | | } |
| | | } |
| | | this.$emit("tableRowClassName", row) |
| | | }, |
| | | selectable(row) { |
| | | let list = this.selectBoxList.map((item) => item.number) |
| | | if (list.findIndex((v) => v == row.number) == -1) { |
| | | return true |
| | | } else { |
| | | return false |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | margin-left: -10px; |
| | | margin-right: -11px; |
| | | li { |
| | | height: 57px; |
| | | line-height: 57px; |
| | | height: 22px; |
| | | line-height: 22px; |
| | | .name-view { |
| | | padding-left: 10px; |
| | | border-bottom: 1px solid #ebeef5; |
| | |
| | | border-bottom: 0; |
| | | } |
| | | } |
| | | li:last-child .name-view { |
| | | border-bottom: none; |
| | | } |
| | | .no-product { |
| | | height: 57px; |
| | | line-height: 57px; |
| | | height: 22px; |
| | | line-height: 22px; |
| | | } |
| | | } |
| | | } |