| | |
| | | <template> |
| | | <div class="page-view"> |
| | | <div class="table-view"> |
| | | <el-table |
| | | ref="table" |
| | | border |
| | |
| | | @selection-change="handleSelectionChange" |
| | | :header-cell-style="{ background: '#ECF4FF', color: '#666' }" |
| | | > |
| | | <el-table-column type="selection" width="40"> </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" |
| | |
| | | :label="item.label" |
| | | :width="item.width" |
| | | :min-width="item.min" |
| | | sortable |
| | | show-overflow-tooltip |
| | | :sortable="item.sortable" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <span v-if="item.price">{{ "¥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span> |
| | | <span v-else>{{ scope.row[item.prop] }}</span> |
| | | <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div> |
| | | <span v-else-if="item.isTime">{{ |
| | | dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26" |
| | | ? "--" |
| | | : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) |
| | | }}</span> |
| | | <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selNameClick(scope.row)">{{ |
| | | scope.row[item.prop] |
| | | }}</span> |
| | | <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "是" : "否" }}</span> |
| | | <span |
| | | v-else-if="item.isSalesLeadClick && scope.row[item.prop]" |
| | | class="sel-name" |
| | | @click="selSalesLeadClick(scope.row)" |
| | | >{{ scope.row[item.prop] }}</span |
| | | > |
| | | <span |
| | | v-else-if="item.isClientClick && scope.row[item.prop]" |
| | | class="sel-name" |
| | | @click="selClientClick(scope.row)" |
| | | >{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span |
| | | > |
| | | <span |
| | | v-else-if="item.isContactClick && scope.row[item.prop]" |
| | | class="sel-name" |
| | | @click="selContactsClick(scope.row)" |
| | | >{{ scope.row[item.prop] }}</span |
| | | > |
| | | <span |
| | | v-else-if="item.isMasterClick && scope.row[item.prop]" |
| | | class="sel-name" |
| | | @click="selMasterClick(scope.row)" |
| | | >{{ scope.row[item.prop] }}</span |
| | | > |
| | | <span |
| | | v-else-if="item.isServiceOrder && scope.row[item.prop]" |
| | | class="sel-name" |
| | | @click="selServiceOrderClick(scope.row)" |
| | | >{{ scope.row[item.prop] }}</span |
| | | > |
| | | <span |
| | | v-else-if="item.isCommonClick && scope.row[item.prop]" |
| | | class="sel-name" |
| | | @click="selCommonClick(scope.row)" |
| | | >{{ scope.row[item.prop] }}</span |
| | | > |
| | | <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'"> |
| | | {{ item.name }} |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | <div v-else class="no-product">{{ "--" }}</div> |
| | | </div> |
| | | <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'"> |
| | | {{ item.amount }} |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | <div v-else class="no-product">{{ "--" }}</div> |
| | | </div> |
| | | <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <slot name="tableButton" /> |
| | | <div slot="empty"> |
| | | <el-empty description="暂无数据"></el-empty> |
| | | </div> |
| | | </el-table> |
| | | </div> |
| | | </template> |
| | |
| | | export default { |
| | | name: "TableCommonView", |
| | | props: { |
| | | selectBox: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | tableList: { |
| | | type: Object, |
| | | default: () => { |
| | | return { |
| | | selectBox: true, |
| | | tableInfomation: [], // 接口返回数据 |
| | | tableColumn: [ |
| | | // table表单 |
| | |
| | | getSummaries(param) { |
| | | if (this.showSummary.show) { |
| | | const { columns, data } = param |
| | | console.log(param) |
| | | const sums = [] |
| | | columns.forEach((column, index) => { |
| | | if (index === this.showSummary.mergeNumber) { |
| | | sums[index] = "本页总计" |
| | | } |
| | | const values = data.map((item) => Number(item[column.property])) |
| | | // if (column.property === this.showSummary.sumProp) { |
| | | if (this.showSummary.sumProp.includes(column.property)) { |
| | | sums[index + 1] = values.reduce((prev, curr) => { |
| | | const value = Number(curr) |
| | | if (!isNaN(value)) { |
| | | return this.number_format(prev + curr, 2, ".", ",") |
| | | return prev + curr |
| | | } else { |
| | | return this.number_format(prev, 2, ".", ",") |
| | | return prev |
| | | } |
| | | }, 0) |
| | | sums[index + 1] |
| | | } |
| | | }) |
| | | // console.log(sums) |
| | | return sums |
| | | } |
| | | }, |
| | | //定义number_format方法 |
| | | // 数字换行为金额显示格式 |
| | | number_format(number, decimals, dec_point, thousands_sep) { |
| | | decimals = 2 //这里默认设置保留两位小数,也可以注释这句采用传入的参数 |
| | | /* |
| | |
| | | s[1] = s[1].substring(0, prec) //小数点位数超出长度时截取前面的位数 |
| | | } |
| | | return s.join(dec) |
| | | }, |
| | | // 时间显示 |
| | | dateFormat(fmt, date) { |
| | | let ret = "" |
| | | date = new Date(date) |
| | | const opt = { |
| | | "Y+": date.getFullYear().toString(), // 年 |
| | | "m+": (date.getMonth() + 1).toString(), // 月 |
| | | "d+": date.getDate().toString(), // 日 |
| | | "H+": date.getHours().toString(), // 时 |
| | | "M+": date.getMinutes().toString(), // 分 |
| | | "S+": date.getSeconds().toString() // 秒 |
| | | // 有其他格式化字符需求可以继续添加,必须转化成字符串 |
| | | } |
| | | for (let k in opt) { |
| | | ret = new RegExp("(" + k + ")").exec(fmt) |
| | | if (ret) { |
| | | fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")) |
| | | } |
| | | } |
| | | return fmt |
| | | }, |
| | | // 新建编辑选择弹窗 |
| | | selNameClick(row) { |
| | | this.$emit("selCommonClick", row) |
| | | }, |
| | | // 销售线索 |
| | | selSalesLeadClick(row) { |
| | | this.$emit("selSalesLeadClick", row) |
| | | }, |
| | | // 客户名称 |
| | | selClientClick(row) { |
| | | this.$emit("selClientClick", row) |
| | | }, |
| | | // 联系人姓名 |
| | | selContactsClick(row) { |
| | | this.$emit("selContactsClick", row) |
| | | }, |
| | | // 销售总单 |
| | | selMasterClick(row) { |
| | | this.$emit("selMasterClick", row) |
| | | }, |
| | | // 客户服务单 |
| | | selServiceOrderClick(row) { |
| | | this.$emit("selServiceOrderClick", row) |
| | | }, |
| | | // 公共(销售机会、报价单、销售总单、销售子单。。。) |
| | | selCommonClick(row) { |
| | | this.$emit("selCommonClick", row) |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .page-view { |
| | | margin-top: 20px; |
| | | .table-view { |
| | | // margin-top: 20px; |
| | | margin-right: 10px; |
| | | margin-bottom: 40px; |
| | | // margin-bottom: 40px; |
| | | .blue { |
| | | width: 70px; |
| | | text-align: center; |
| | | color: #fff; |
| | | background-color: $color-primary; |
| | | border-radius: 4px; |
| | | } |
| | | .sel-name { |
| | | color: $color-primary; |
| | | cursor: pointer; |
| | | } |
| | | .product-view { |
| | | // background: #cc7d7d; |
| | | margin-left: -10px; |
| | | margin-right: -11px; |
| | | li { |
| | | height: 57px; |
| | | line-height: 57px; |
| | | .name-view { |
| | | padding-left: 10px; |
| | | border-bottom: 1px solid #ebeef5; |
| | | } |
| | | .no-bottom { |
| | | border-bottom: 0px; |
| | | } |
| | | } |
| | | .no-product { |
| | | height: 57px; |
| | | line-height: 57px; |
| | | } |
| | | } |
| | | } |
| | | ::v-deep { |
| | | .el-table__footer-wrapper tbody td.el-table__cell { |