收款计划、销售发票样式调整及公共组件no-product清空下行高调整
| | |
| | | border-bottom: none; |
| | | } |
| | | .no-product { |
| | | height: 57px; |
| | | line-height: 57px; |
| | | height: 22px; |
| | | line-height: 22px; |
| | | } |
| | | } |
| | | } |
| | |
| | | <div class="collectionPlan"> |
| | | <div v-if="isDetail" class="detail-top"> |
| | | <DetailListCommonBtn :query-class-options="queryClassOptions" /> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | </div> |
| | | <div v-else class="top"> |
| | | <SearchCommonView |
| | | <div v-else class="filter"> |
| | | <div class="filter-card"> |
| | | <CommonSearch |
| | | ref="searchCommonView" |
| | | :query-class-options="queryClassOptions" |
| | | :search-options="searchOptions" |
| | | :search-sel="searchSel" |
| | | @searchClick="searchClick" |
| | | @resetClick="resetClick" |
| | | /> |
| | | <div class="btn-pager"> |
| | | <PublicFunctionBtnView :statistics="true" :operates-list="operatesList" @batchDelete="delClick" /> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | > |
| | | <template slot="leftButton"> |
| | | <el-button size="small" type="primary" @click="addBtnClick">新建</el-button> |
| | | <!-- <el-button size="small" @click="delClick">删除</el-button>--> |
| | | </template> |
| | | </CommonSearch> |
| | | </div> |
| | | </div> |
| | | <div class="body"> |
| | | <div class="body-card"> |
| | | <div class="list-view"> |
| | | <TableCommonView |
| | | ref="tableListRef" |
| | | v-loading="loading" |
| | | :table-list="tableList" |
| | | :select-box="!isDetail" |
| | | @getSelectArray="getSelectArray" |
| | | > |
| | | <!-- <template slot="tableButton"> |
| | |
| | | </el-table-column> |
| | | </template> --> |
| | | </TableCommonView> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 新建/编辑 --> |
| | | <AddCollectionPlan v-if="editConfig.visible" :edit-common-config="editConfig" /> |
| | | </div> |
| | |
| | | label: "" |
| | | }, |
| | | search_map: {}, |
| | | serviceContractId: 0 |
| | | serviceContractId: 0, |
| | | tableColumn: [ |
| | | { label: "收款计划编号", prop: "number", default: true }, |
| | | { label: "客户名称", prop: "client_name" }, |
| | | { label: "期次", prop: "term" }, |
| | | { label: "计划收款日期", prop: "collectionDate" }, |
| | | { label: "金额", prop: "amount" }, |
| | | { label: "已收金额", prop: "amountReceived" }, |
| | | { label: "应收金额", prop: "amountReceivable" }, |
| | | { label: "负责人", prop: "member_name" } |
| | | ], |
| | | showCol: ["收款计划编号", "客户名称", "期次", "计划收款日期", "金额", "已收金额", "应收金额", "负责人"] |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | } else { |
| | | this.serviceContractId = this.addConfig.id |
| | | } |
| | | this.getData() |
| | | // this.getData() |
| | | }, |
| | | methods: { |
| | | setTable() { |
| | | this.tableList = { |
| | | tableInfomation: [], |
| | | tableColumn: [ |
| | | { label: "收款计划编号", prop: "number" }, |
| | | { label: "客户名称", prop: "client_name" }, |
| | | { label: "期次", prop: "term" }, |
| | | { label: "计划收款日期", prop: "collectionDate" }, |
| | | { label: "金额", prop: "amount" }, |
| | | { label: "已收金额", prop: "amountReceived" }, |
| | | { label: "应收金额", prop: "amountReceivable" }, |
| | | { label: "负责人", prop: "member_name" } |
| | | ] |
| | | allcol: [], |
| | | showcol: this.showCol, |
| | | tableColumn: this.setColumnVisible(this.showCol) |
| | | } |
| | | this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label) |
| | | this.searchOptions = [] |
| | | for (let i = 0; i < this.tableList.tableColumn.length; i++) { |
| | | const label = this.tableList.tableColumn[i].label |
| | | const value = this.tableList.tableColumn[i].prop |
| | | this.searchOptions.push({ value: value, label: label }) |
| | | } |
| | | }, |
| | | setColumnVisible(showCol) { |
| | | return this.tableColumn.map((ele) => { |
| | | return { |
| | | ...ele, |
| | | isShowColumn: showCol.includes(ele.label) |
| | | } |
| | | }) |
| | | }, |
| | | selTableCol(val) { |
| | | this.showcol = val |
| | | this.tableList.tableColumn = this.setColumnVisible(val) |
| | | }, |
| | | // 请求数据 |
| | | async getData() { |
| | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .collectionPlan { |
| | | .top { |
| | | margin-bottom: 20px; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | .filter { |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 12px 20px 0 20px; |
| | | &-card { |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | box-sizing: border-box; |
| | | padding: 10px 20px; |
| | | flex: 1; |
| | | border-radius: 12px; |
| | | background-color: #fff; |
| | | } |
| | | } |
| | | .body { |
| | | box-sizing: border-box; |
| | | padding: 10px 20px; |
| | | border-radius: 12px; |
| | | height: calc(100% - 92px); |
| | | .body-card { |
| | | background-color: #fff; |
| | | border-radius: 12px; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | } |
| | | .list-view { |
| | | height: calc(100% - 60px); |
| | | overflow: hidden; |
| | | } |
| | | .btn-pager { |
| | | display: flex; |
| | | margin-top: 10px; |
| | | .page { |
| | | margin-left: auto; |
| | | } |
| | | } |
| | | } |
| | | .detail-top { |
| | | display: flex; |
| | | .page { |
| | | margin-left: auto; |
| | | } |
| | | } |
| | | } |
| | |
| | | <div class="saleInvoice"> |
| | | <div v-if="isDetail" class="detail-top"> |
| | | <DetailListCommonBtn :query-class-options="queryClassOptions" /> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | </div> |
| | | <div v-else class="top"> |
| | | <SearchCommonView |
| | | ref="searchCommonView" |
| | | :query-class-options="queryClassOptions" |
| | | :search-options="searchOptions" |
| | | :search-sel="searchSel" |
| | | @searchClick="searchClick" |
| | | @resetClick="resetClick" |
| | | /> |
| | | <div class="btn-pager"> |
| | | <PublicFunctionBtnView :statistics="true" :operates-list="operatesList" @batchDelete="delClick" /> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | </div> |
| | | </div> |
| | | <TableCommonView |
| | | ref="tableListRef" |
| | | :table-list="tableList" |
| | | @selClientClick="selClientClick" |
| | | @selCommonClick="selCommonClick" |
| | | @getSelectArray="getSelectArray" |
| | | @selTableCol="selTableCol" |
| | | <div v-else class="filter"> |
| | | <div class="filter-card"> |
| | | <CommonSearch |
| | | :show-add="false" |
| | | :show-download="false" |
| | | :amount-view="false" |
| | | :show-action-btn="false" |
| | | placeholder="请输入销售发票编号" |
| | | @searchClick="onFilterSearch" |
| | | > |
| | | <!-- <template slot="tableButton"> |
| | | <el-table-column label="操作" width="60" fixed="right"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> |
| | | <template slot="leftButton"> |
| | | <el-button size="small" type="primary" @click="addBtnClick">新建</el-button> |
| | | <!-- <el-button size="small" @click="delClick">删除</el-button>--> |
| | | </template> |
| | | </el-table-column> |
| | | </template> --> |
| | | </TableCommonView> |
| | | </CommonSearch> |
| | | </div> |
| | | </div> |
| | | <div class="body"> |
| | | <div class="body-card"> |
| | | <div class="list-view"> |
| | | <TableCommonView ref="tableListRef" :table-list="tableList" @selTableCol="selTableCol"> </TableCommonView> |
| | | </div> |
| | | <div class="btn-pager"> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 新建/编辑 --> |
| | | <AddSaleInvoice v-if="editConfig.visible" :edit-common-config="editConfig" /> |
| | | <!-- 客户详情 --> |
| | | <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | } |
| | | }, |
| | | mixins: [pageMixin], |
| | | components: { AddSaleInvoice }, |
| | | components: { AddSaleInvoice, DetailClientManage: () => import("@/views/client/client/DetailClientManage") }, |
| | | computed: {}, |
| | | data() { |
| | | return { |
| | |
| | | infomation: {} |
| | | }, |
| | | saleChanceName: "", |
| | | contactsDeail: { |
| | | visible: false, |
| | | infomation: {} |
| | | }, |
| | | clientDeail: { |
| | | visible: false, |
| | | infomation: {} |
| | | }, |
| | | selValueList: [], |
| | | searchSel: { |
| | | value: "topic", |
| | | label: "" |
| | | }, |
| | | search_map: {}, |
| | | keyword: "", |
| | | keywordType: "", |
| | |
| | | this.editConfig.title = "新建" |
| | | this.editConfig.sourceType = this.sourceType |
| | | this.editConfig.infomation = { ...this.addConfig, number: "" } |
| | | }, |
| | | // 客户名称详情 |
| | | selClientClick(row) { |
| | | console.log(row) |
| | | this.clientDeail.visible = true |
| | | this.clientDeail.infomation = { |
| | | ...row.Client, |
| | | client_name: row.Client.name, |
| | | client_level: row.Client.client_level.name, |
| | | client_status: row.Client.client_status.name, |
| | | contact_name: row.contact.name |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .saleInvoice { |
| | | .top { |
| | | margin-bottom: 20px; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | .filter { |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 12px 20px 0 20px; |
| | | &-card { |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | box-sizing: border-box; |
| | | padding: 10px 20px; |
| | | flex: 1; |
| | | border-radius: 12px; |
| | | background-color: #fff; |
| | | } |
| | | } |
| | | .body { |
| | | box-sizing: border-box; |
| | | padding: 10px 20px; |
| | | border-radius: 12px; |
| | | height: calc(100% - 92px); |
| | | .body-card { |
| | | background-color: #fff; |
| | | border-radius: 12px; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | } |
| | | .list-view { |
| | | height: calc(100% - 60px); |
| | | overflow: hidden; |
| | | } |
| | | .btn-pager { |
| | | display: flex; |
| | | margin-top: 10px; |
| | | .page { |
| | | margin-left: auto; |
| | | } |
| | | } |
| | | } |
| | | .detail-top { |
| | | display: flex; |
| | | .page { |
| | | margin-left: auto; |
| | | } |
| | | } |
| | | ::v-deep .el-table__body-wrapper .el-table .el-table__cell { |
| | | padding: 6px 0 !important; |
| | | height: 35px; |
| | | text-align: center; |
| | | } |
| | | </style> |