| | |
| | | <!-- eslint-disable vue/no-use-v-if-with-v-for --> |
| | | <template> |
| | | <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" |
| | | :summary-method="getSummaries" |
| | | :span-method="arraySpanMethod" |
| | | @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 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" |
| | | :summary-method="getSummaries" :span-method="arraySpanMethod" |
| | | :class="tableList.headerHeight ? 'table-height-47px' : ''" @selection-change="handleSelectionChange" |
| | | :header-cell-style="{ background: '#f1f3f8', height: tableList.headerHeight ? tableList.headerHeight : '37px', 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" |
| | | :fixed="tableList.isFixed" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | v-for="(item, i) in tableList.tableColumn" |
| | | :key="i" |
| | | :prop="item.prop" |
| | | :label="item.label" |
| | | :width="item.width" |
| | | :min-width="item.min" |
| | | show-overflow-tooltip |
| | | :sortable="item.sortable" |
| | | :fixed="item.fixed" |
| | | v-if="item.isShowColumn" |
| | | > |
| | | |
| | | <template slot="header"> |
| | | <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50" |
| | | :fixed="tableList.isFixed"></el-table-column> |
| | | <el-table-column v-for="(item, i) in tableColumn" :key="i" :prop="item.prop" :label="item.label" |
| | | :width="item.width" :min-width="item.min" show-overflow-tooltip :sortable="item.sortable" :fixed="item.fixed" |
| | | v-if="item.isShowColumn"> |
| | | |
| | | <template slot="header"> |
| | | {{ item.label }} |
| | | <span v-if="item.weekDay"> - {{item.weekDay}}</span> |
| | | <div v-if="item.weekDay">{{ item.weekDay }}</div> |
| | | <span v-if="item.iconRight"> |
| | | <i |
| | | :class="item.iconRight" |
| | | style="font-size: 16px; margin-left: 5px; cursor: pointer" |
| | | @click="handleShow(item)" |
| | | ></i> |
| | | <i :class="item.iconRight" style="font-size: 16px; margin-left: 5px; cursor: pointer" |
| | | @click="handleShow(item)"></i> |
| | | </span> |
| | | </template> |
| | | <template slot-scope="scope"> |
| | |
| | | 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,item.prop,item)" |
| | | > |
| | | <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, item.prop, item)"> |
| | | <div v-if="item.isCallMethod"> |
| | | <span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''"> |
| | | |
| | | <span v-if="item.isIcon" v-html="item.getCallMethod(scope.row[item.prop], scope.row)"></span> |
| | | <span v-else>{{ item.getCallMethod(scope.row[item.prop], scope.row) }}</span> |
| | | |
| | | <span v-if="item.isIcon" v-html="item.getCallMethod(scope.row[item.prop], scope.row)"></span> |
| | | <span v-else>{{ item.getCallMethod(scope.row[item.prop], scope.row) }}</span> |
| | | </span> |
| | | </div> |
| | | <span v-else>{{ scope.row[item.prop] }}</span> |
| | | </span |
| | | > |
| | | <span v-else>{{ scope.row[item.prop] }}</span> |
| | | </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"> |
| | |
| | | <span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">{{ |
| | | item.getCallMethod(scope.row[item.prop], scope.row) |
| | | }}</span> |
| | | </div> |
| | | <div v-else-if="item.isEditTd"> |
| | | <template v-if="scope.row[item.prop + 'editType'] == 'inputFloat'"> |
| | | <el-input-number v-model="scope.row[item.prop]" placeholder="请输入" :min="0" :precision="2" |
| | | :controls="false" size="mini" style="width: calc(100% - 80px); margin-right: 5px"></el-input-number> |
| | | <el-button type="text" @click="saveEditShow(item.prop, scope.row, scope)">保存</el-button> |
| | | </template> |
| | | <span v-else> |
| | | {{ scope.row[item.prop] }} |
| | | <i class="el-icon-edit" style="font-size: 16px; margin-left: 5px; cursor: pointer" |
| | | @click="handleEditShow(scope.row, scope, item)"></i> |
| | | </span> |
| | | </div> |
| | | <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span> |
| | | </template> |
| | |
| | | data() { |
| | | return { |
| | | iscolopen: false, |
| | | tableColumn: [], |
| | | showcol: [] |
| | | } |
| | | }, |
| | |
| | | this.showcol = newVal |
| | | }, |
| | | immediate: true |
| | | } |
| | | }, |
| | | "tableList.tableColumn": { |
| | | handler(newVal) { |
| | | this.tableColumn = newVal |
| | | }, |
| | | immediate: true |
| | | }, |
| | | }, |
| | | methods: { |
| | | // 表格编辑 |
| | | handleEditShow(row, scope, item) { |
| | | console.log('item', item) |
| | | scope.row[item.prop + 'editType'] == 'inputFloat' |
| | | this.$set(this.tableList.tableInfomation[scope.$index], item.prop + 'editType', 'inputFloat') |
| | | this.$forceUpdate() |
| | | }, |
| | | saveEditShow(prop, row, scope) { |
| | | if (row.editType == 'inputFloat') { |
| | | let value = scope.row[prop] |
| | | let reg2 = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/ |
| | | if (!reg2.test(value) || value == 0) { |
| | | this.$message.error("需要填写大于0的2位小数!") |
| | | return true |
| | | } |
| | | this.$forceUpdate() |
| | | } |
| | | this.$set(this.tableList.tableInfomation[scope.$index], prop + 'editType', '') |
| | | this.$emit("inputContent", prop, row, scope) |
| | | }, |
| | | onMaskClick() { |
| | | this.iscolopen = false |
| | | }, |
| | |
| | | this.$emit("selServiceOrderClick", row) |
| | | }, |
| | | // 公共(销售机会、报价单、销售总单、销售子单。。。) |
| | | selCommonClick(row,prop,item) { |
| | | this.$emit("selCommonClick", row,prop,item) |
| | | selCommonClick(row, prop, item) { |
| | | this.$emit("selCommonClick", row, prop, item) |
| | | }, |
| | | // 行点击 |
| | | tableRowClick(row, column, event) { |
| | |
| | | .table-view { |
| | | position: relative; |
| | | height: 100%; |
| | | |
| | | .blue { |
| | | width: 70px; |
| | | text-align: center; |
| | |
| | | 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: 22px; |
| | | line-height: 22px; |
| | | |
| | | .name-view { |
| | | padding-left: 10px; |
| | | border-bottom: 1px solid #ebeef5; |
| | | } |
| | | |
| | | .no-bottom { |
| | | border-bottom: 0; |
| | | } |
| | | } |
| | | |
| | | li:last-child .name-view { |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .no-product { |
| | | height: 22px; |
| | | line-height: 22px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep { |
| | | .el-table__footer-wrapper { |
| | | tbody td.el-table__cell { |
| | |
| | | font-weight: bold; |
| | | } |
| | | } |
| | | .el-table__fixed-body-wrapper{ |
| | | top:37px!important; |
| | | |
| | | .el-table__fixed { |
| | | height: calc(100% - 8px) !important; |
| | | } |
| | | |
| | | .el-table__fixed-body-wrapper { |
| | | top: 37px !important; |
| | | } |
| | | |
| | | .table-height-47px .el-table__fixed-body-wrapper { |
| | | top: 47px !important; |
| | | } |
| | | |
| | | .el-table__body-wrapper { |
| | | height: calc(100% - 38px) !important; |
| | | } |
| | | |
| | | .table-height-47px .el-table__body-wrapper { |
| | | height: calc(100% - 48px) !important; |
| | | } |
| | | } |
| | | |
| | |
| | | line-height: 17px; |
| | | font-family: PingFangSC; |
| | | color: rgba(0, 0, 0, 0.9); |
| | | |
| | | .el-button--text { |
| | | width: auto; |
| | | height: auto; |
| | | font-family: PingFangSC-Medium, sans-serif; |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-table .el-table__cell { |
| | | padding: 6px 0 !important; |
| | | height: 35px; |
| | |
| | | top: 0; |
| | | right: -6px; |
| | | z-index: 11; |
| | | |
| | | .label { |
| | | position: absolute; |
| | | top: 6px; |
| | |
| | | color: #000; |
| | | transform: rotate(-90deg); |
| | | } |
| | | |
| | | .checkbox-group { |
| | | width: 160px; |
| | | height: 300px; |