| | |
| | | <div class="sales-details"> |
| | | <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" |
| | | /> |
| | | <div class="btn-pager"> |
| | | <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" /> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | |
| | | <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="leftButton"> |
| | | <el-button size="small" type="primary" @click="addBtnClick">新建</el-button> |
| | | <!-- <el-button size="small" @click="delClick">删除</el-button> --> |
| | | </template> |
| | | </CommonSearch> |
| | | </div> |
| | | </div> |
| | | <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList" :select-box="!isDetail"> |
| | | <template slot="tableButton"> |
| | | <el-table-column label="操作" width="90"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> |
| | | <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | | </TableCommonView> |
| | | |
| | | <div class="body"> |
| | | <div class="body-card"> |
| | | <div class="list-view"> |
| | | <TableCommonView |
| | | ref="tableListRef" |
| | | :show-summary="showSummary" |
| | | :table-list="tableList" |
| | | @selClientClick="selClientClick" |
| | | @selCommonClick="selCommonClick" |
| | | @getSelectArray="getSelectArray" |
| | | @selTableCol="selTableCol" |
| | | > |
| | | <template slot="tableButton"> |
| | | <el-table-column label="操作" width="90"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> |
| | | <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | | </TableCommonView> |
| | | </div> |
| | | |
| | | <div class="btn-pager"> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 新建/编辑 --> |
| | | <AddSalesDetailsDialog v-if="editConfig.visible" :edit-common-config="editConfig" /> |
| | | <AddSalesDetailsDialog |
| | | v-if="editConfig.visible" |
| | | :edit-common-config="editConfig" |
| | | @addCollectionPlanClick="addCollectionPlanClick" |
| | | /> |
| | | <!-- 销售明细详情 --> |
| | | <DetailSpecification v-if="specificationDetail.visible" :specification-detail="specificationDetail" /> |
| | | <!-- 客户详情 --> |
| | | <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" /> |
| | | <!-- 新建 收款计划 --> |
| | | <AddCollectionPlan v-if="addCollectionConfig.visible" :edit-common-config="addCollectionConfig" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import AddSalesDetailsDialog from "@/views/sales/salesDetails/AddSalesDetailsDialog" |
| | | import { getSalesDetailsList, getDelSalesDetails } from "@/api/sales/salesDetails" |
| | | import pageMixin from "@/components/makepager/pager/mixin/pageMixin" |
| | | import DetailSpecification from "@/views/sales/salesDetails/DetailSpecification" |
| | | import AddCollectionPlan from "@/views/other/payment/collectionPlan/AddCollectionPlan" |
| | | |
| | | export default { |
| | | name: "SalesDetails", |
| | |
| | | isDetail: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | addConfig: { |
| | | type: Object, |
| | | default: () => { |
| | | return {} |
| | | } |
| | | } |
| | | }, |
| | | mixins: [pageMixin], |
| | | components: { |
| | | AddSalesDetailsDialog |
| | | AddSalesDetailsDialog, |
| | | DetailSpecification, |
| | | DetailClientManage: () => import("@/views/client/client/DetailClientManage"), |
| | | AddCollectionPlan |
| | | }, |
| | | computed: { |
| | | searchCommonHeight() { |
| | |
| | | infomation: {} |
| | | }, |
| | | showSummary: { |
| | | show: true, |
| | | show: false, |
| | | sumProp: [ |
| | | "receiveTotalAmount", |
| | | "total", |
| | |
| | | "uninvoicedAmount", |
| | | "number", |
| | | "unOutoundNo", |
| | | "taxUnitPrice", |
| | | "priceTax" |
| | | ], |
| | | mergeNumber: 6 |
| | | } |
| | | }, |
| | | specificationDetail: { |
| | | visible: false, |
| | | infomation: {} |
| | | }, |
| | | clientDeail: { |
| | | visible: false, |
| | | infomation: {} |
| | | }, |
| | | selValueList: [], |
| | | search_map: {}, |
| | | searchSel: { |
| | | value: "number", |
| | | label: "订单编号" |
| | | }, |
| | | keyword: "", |
| | | keywordType: "", |
| | | addCollectionConfig: { |
| | | visible: false, |
| | | title: "新建", |
| | | infomation: {} |
| | | }, |
| | | tableColumn: [ |
| | | { label: "订单编号", prop: "number", isCommonClick: true, default: true }, |
| | | { label: "客户名称", prop: "client_name", isClientClick: true }, |
| | | { label: "签约日期", prop: "signTime", width: 150 }, |
| | | { label: "销售负责人", prop: "member_name" }, |
| | | // { label: "出库状态", prop: "outboundStatus" }, |
| | | { label: "已收总额", prop: "receiveTotalAmount", price: true }, |
| | | { label: "合计", prop: "total", price: true }, |
| | | { label: "应收余额", prop: "amountReceivable", price: true }, |
| | | { label: "已开票金额", prop: "invoicedAmount", price: true }, |
| | | { label: "未开票金额", prop: "uninvoicedAmount", price: true }, |
| | | { label: "产品名称", prop: "productName", isProductName: true }, |
| | | { label: "数量", prop: "productNumber", isProductAmount: true }, |
| | | { label: "销售单价", prop: "taxUnitPrice", isProductPrice: true }, |
| | | { label: "价税合计", prop: "priceTax", isProductTotal: true } |
| | | ], |
| | | showCol: [ |
| | | "订单编号", |
| | | "客户名称", |
| | | "签约日期", |
| | | "销售负责人", |
| | | "已收总额", |
| | | "合计", |
| | | "应收余额", |
| | | "已开票金额", |
| | | "未开票金额", |
| | | "产品名称", |
| | | "数量", |
| | | "销售单价", |
| | | "价税合计" |
| | | ] |
| | | } |
| | | }, |
| | | created() { |
| | | this.setTable() |
| | | if (!this.isDetail) { |
| | | this.keyword = "" |
| | | this.keywordType = "" |
| | | } else { |
| | | this.keyword = this.addConfig.keyword |
| | | this.keywordType = this.addConfig.keywordType |
| | | } |
| | | this.getData() |
| | | }, |
| | | methods: { |
| | | setTable() { |
| | | this.tableList = { |
| | | selectIndex: true, |
| | | tableInfomation: [], |
| | | tableColumn: [ |
| | | { label: "订单编号", prop: "number" }, |
| | | { label: "客户名称", prop: "client_name" }, |
| | | { label: "签约日期", prop: "signTime", isTime: true, width: 150 }, |
| | | { label: "销售负责人", prop: "memberId" }, |
| | | { label: "出库状态", prop: "outboundStatus" }, |
| | | { label: "已收总额", prop: "receiveTotalAmount", price: true }, |
| | | { label: "合计", prop: "total", price: true }, |
| | | { label: "应收余额", prop: "amountReceivable", price: true }, |
| | | { label: "已开票金额", prop: "invoicedAmount", price: true }, |
| | | { label: "未开票金额", prop: "uninvoicedAmount", price: true }, |
| | | { label: "产品名称", prop: "productName" }, |
| | | { label: "数量", prop: "number1" }, |
| | | { label: "含税单价", prop: "taxUnitPrice", price: true }, |
| | | { label: "未出库数量", prop: "unOutoundNo" }, |
| | | { label: "价税合计", prop: "priceTax", price: true } |
| | | ] |
| | | 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 |
| | | this.searchOptions.push({ value: (i + 1).toString(), label: 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() { |
| | | this.loading = true |
| | | await getSalesDetailsList({ |
| | | keyword: "", |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | }) |
| | | let params = {} |
| | | console.log("ssssssssssss") |
| | | console.log(this.addConfig) |
| | | if (this.addConfig.keywordType === "客户名称") { |
| | | params = { |
| | | clientId: this.addConfig.client_id, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | } |
| | | } else if (this.addConfig.keywordType === "销售机会") { |
| | | params = { |
| | | saleChanceId: this.addConfig.sale_chance_id, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | } |
| | | } else if (this.addConfig.keywordType === "销售子单") { |
| | | params = { |
| | | number: this.addConfig.subbill_name, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | } |
| | | } else { |
| | | params = { |
| | | keyword: this.keyword, |
| | | keywordType: this.keywordType, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | } |
| | | } |
| | | await getSalesDetailsList(params) |
| | | .then((res) => { |
| | | console.log(res) |
| | | if (res.code === 200) { |
| | |
| | | const list = res.data.list.map((item) => { |
| | | return { |
| | | ...item, |
| | | client_name: item.client.name |
| | | client_name: item.client.name, |
| | | member_name: item.Member.username |
| | | } |
| | | }) |
| | | this.tableList.tableInfomation = list || [] |
| | |
| | | this.loading = false |
| | | }) |
| | | }, |
| | | // 搜索 |
| | | onFilterSearch(searchText) { |
| | | this.keyword = searchText ?? "" |
| | | this.keywordType = "订单编号" |
| | | this.pagerOptions.currPage = 1 |
| | | this.getData() |
| | | }, |
| | | // 新建 |
| | | addBtnClick() { |
| | | this.editConfig.visible = true |
| | | this.editConfig.title = "新建" |
| | | this.editConfig.infomation = {} |
| | | console.log(this.addConfig) |
| | | this.editConfig.infomation = { |
| | | ...this.addConfig, |
| | | currency: "人民币", |
| | | sale_chance_name:"", |
| | | subbill_name:"", |
| | | client_name: Object.keys(this.addConfig).length === 0 ? "" : this.addConfig.client_name |
| | | } |
| | | }, |
| | | // 编辑 |
| | | handleClick(row) { |
| | | console.log(row) |
| | | this.editConfig.visible = true |
| | | this.editConfig.title = "编辑" |
| | | this.editConfig.infomation = { ...row, sale_chance_name: "" } |
| | | this.editConfig.infomation = { ...row, sale_chance_name: "", currency: "人民币" } |
| | | }, |
| | | // 删除 |
| | | delClick(id) { |
| | | delClick(rowID) { |
| | | console.log(rowID, "xxxxshanchu") |
| | | // if (this.selValueList && this.selValueList.length > 0) { |
| | | this.$confirm("是否确认删除?", "警告", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(function () { |
| | | return getDelSalesDetails({ id: id }) |
| | | .then(() => { |
| | | getDelSalesDetails({ ids: [rowID] }).then((response) => { |
| | | if (response.code === 200) { |
| | | this.$message.success("删除成功") |
| | | this.getData() |
| | | } else { |
| | | this.$message.warning("删除失败") |
| | | } |
| | | }) |
| | | }) |
| | | .then((response) => { |
| | | if (response.code === 200) { |
| | | this.$message.success("删除成功") |
| | | this.getData() |
| | | } else { |
| | | this.$message.warning("删除失败") |
| | | } |
| | | }) |
| | | .catch(function () {}) |
| | | .catch(() => {}) |
| | | // } else { |
| | | // this.$message.warning("请至少选择一条记录") |
| | | // } |
| | | }, |
| | | getSelectArray(val) { |
| | | console.log(val) |
| | | this.selValueList = [] |
| | | const list = val.map((item) => { |
| | | return item.id |
| | | }) |
| | | this.selValueList = list |
| | | }, |
| | | // 客户名称详情 |
| | | selClientClick(row) { |
| | | console.log(row) |
| | | this.clientDeail.visible = true |
| | | this.clientDeail.infomation = { |
| | | ...row.client, |
| | | member: row.Member, |
| | | client_name: row.client.name, |
| | | client_level: row.client.client_level.name, |
| | | client_status: row.client.client_status.name |
| | | } |
| | | }, |
| | | // 联系人详情 |
| | | selCommonClick(row) { |
| | | console.log(row) |
| | | this.specificationDetail.visible = true |
| | | this.specificationDetail.infomation = { ...row } |
| | | }, |
| | | addCollectionPlanClick(row) { |
| | | this.addCollectionConfig.visible = true |
| | | this.addCollectionConfig.title = "新建" |
| | | this.addCollectionConfig.sourceType = 1 |
| | | this.addCollectionConfig.infomation = { ...row } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | ::v-deep { |
| | | .el-table .el-table__cell { |
| | | padding: 0; |
| | | } |
| | | .el-table__footer-wrapper tbody td.el-table__cell { |
| | | height: 48px; |
| | | } |
| | | } |
| | | |
| | | .sales-details { |
| | | .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 .cell, |
| | | .el-table th.el-table__cell > .cell { |
| | | padding: 0 2px; |
| | | } |
| | | } |
| | | </style> |