From 4eec87aecfa3c7aa9a1ef8d268aeecda037b98d0 Mon Sep 17 00:00:00 2001 From: zuozhengqing <a13193816592@163.com> Date: 星期六, 23 三月 2024 15:32:42 +0800 Subject: [PATCH] 采购订单,修改top行点击 --- src/views/supplierManage/supplier/index.vue | 539 ++++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 360 insertions(+), 179 deletions(-) diff --git a/src/views/supplierManage/supplier/index.vue b/src/views/supplierManage/supplier/index.vue index 00e1117..5a2ed24 100644 --- a/src/views/supplierManage/supplier/index.vue +++ b/src/views/supplierManage/supplier/index.vue @@ -1,85 +1,107 @@ <template> - <div class="rightContent"> + <div class="supplier"> <div class="top"> - <div class="supplier-search"> - <SearchCommonView - ref="searchCommonView" - :search-options="searchOptions" - @searchClick="searchClick" - @resetClick="resetClick" - /> - <div class="add-view"> - <el-button type="primary" size="mini" @click="addBtnClick">鏂板缓</el-button> + <div class="filter"> + <div class="filter-card"> + <CommonSearch + :show-add="true" + add-title="鏂板缓" + @addCommonClick="addBtnClick" + :show-download="true" + :amount-view="false" + :show-action-btn="false" + :placeholder="'璇疯緭鍏ヤ緵搴斿晢鍚嶇О'" + @searchClick="onFilterSearch" + /> </div> </div> - <template> - <TableCommonView - ref="tableListRef" - :table-list="tableList" - @selCommonClick="selCommonClick" - @getSelectArray="getSelectArray" - > - <template slot="tableButton"> - <el-table-column label="鎿嶄綔" width="120"> - <template slot-scope="scope"> - <el-button - v-if="scope.row.status === 0" - @click="enableClick(scope.row, '鍚敤')" - type="text" - size="small" - >鍚敤</el-button - > - <el-button v-else @click="enableClick(scope.row, '鍋滅敤')" type="text" size="small">鍋滅敤</el-button> - <el-button @click="modifyClick(scope.row)" type="text" size="small">淇敼</el-button> - <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">鍒犻櫎</el-button> --> + <div class="body"> + <div class="body-card"> + <div class="list-view"> + <TableCommonView + ref="tableSupplier" + :table-list="tableList" + @selCommonClick="selCommonClick" + @selTableCol="selTableCol" + @tableRowClick="tableRowClick" + :selectClassRow="selectRow" + > + <template slot="tableButton"> + <el-table-column label="鎿嶄綔" width="100"> + <template slot-scope="scope"> + <el-button + v-if="scope.row.status === 0" + @click="enableClick(scope.row, '鍚敤')" + type="text" + size="small" + >鍚敤</el-button + > + <el-button v-else @click="enableClick(scope.row, '鍋滅敤')" type="text" size="small">鍋滅敤</el-button> + <el-button @click="modifyClick(scope.row)" type="text" size="small">淇敼</el-button> + </template> + </el-table-column> </template> - </el-table-column> - </template> - </TableCommonView> - <div class="btn-pager"> - <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + </TableCommonView> + </div> + <div class="btn-pager"> + <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + </div> </div> - </template> + </div> </div> <div class="bottom"> - <div class="product-search"> - <div style="margin-left: 10px">鍙彁渚涚殑浜у搧</div> - <div style="margin-left: 20px"> - <el-button type="primary" size="mini">鍒涘缓閲囪喘鍗�</el-button> - </div> - <SearchCommonView - class="search" - ref="searchCommonView" - :search-options="searchProductOptions" - @searchClick="searchProductClick" - @resetClick="resetProductClick" - /> - <div class="add-view"> - <el-button type="primary" size="mini" @click="addNewProductClick">娣诲姞鏂颁骇鍝�</el-button> + <div class="simple-filter"> + <div class="simple-filter-card"> + <CommonSearch + :show-add="false" + :show-download="false" + :amount-view="false" + :show-screen="false" + :show-action-btn="false" + :placeholder="'璇疯緭鍏ヤ骇鍝佸悕绉�'" + @searchClick="onProductFilterSearch" + > + <template slot="leftButton"> + <div class="sub-title"><span class="sub-title-decorator"></span>鍙彁渚涚殑浜у搧</div> + <el-button type="primary" size="mini" @click="creatPurchase">鍒涘缓閲囪喘鍗�</el-button> + </template> + <template slot="rightButton"> + <el-button type="primary" size="mini" @click="addNewProductClick">娣诲姞鏂颁骇鍝�</el-button> + </template> + </CommonSearch> </div> </div> - <template> - <TableCommonView - ref="tableListRef" - :table-list="productTableList" - @selCommonClick="selCommonClick" - @getSelectArray="getSelectArray" - > - <template slot="tableButton"> - <el-table-column label="鎿嶄綔" width="170"> - <template slot-scope="scope"> - <el-button @click="raleteClick(scope.row)" type="text" size="small">鐩稿叧渚涘簲鍟�</el-button> - <el-button @click="editClick(scope.row)" type="text" size="small">淇敼</el-button> - <el-button @click="delClick(scope.row)" type="text" size="small">鍒犻櫎</el-button> - <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">鍒犻櫎</el-button> --> + <div class="body"> + <div class="body-card"> + <div class="list-view"> + <TableCommonView + ref="tableListProduct" + :table-list="productTableList" + @selCommonClick="selCommonClick" + @getSelectArray="getSelectArray" + @selTableCol="selProductTableCol" + > + <template slot="tableButton"> + <el-table-column label="鎿嶄綔" width="170"> + <template slot-scope="scope"> + <el-button @click="raleteClick(scope.row)" type="text" size="small">鐩稿叧渚涘簲鍟�</el-button> + <el-button @click="editClick(scope.row)" type="text" size="small">淇敼</el-button> + <el-button @click="delClick(scope.row)" type="text" size="small">鍒犻櫎</el-button> + </template> + </el-table-column> </template> - </el-table-column> - </template> - </TableCommonView> - <div class="btn-pager"> - <PagerView class="page" :pager-options="productPagerOptions" v-on="pagerEvents" /> + </TableCommonView> + </div> + <div class="btn-pager"> + <PagerView + class="page" + :pager-options="productPagerOptions" + @size-change="productChangeHandler" + @current-change="currentProductHandler" + /> + </div> </div> - </template> + </div> </div> <!-- 鏂板缓/缂栬緫閿�鍞嚎绱� --> <AddSupplier v-if="editConfig.visible" :add-common-config="editConfig" /> @@ -89,25 +111,31 @@ <RaleteSupplierList v-if="raleteSupplierConfig.visible" :common-config="raleteSupplierConfig" /> <!-- 娣诲姞鏂颁骇鍝� --> <AddNewProduct v-if="newProductConfig.visible" :add-common-config="newProductConfig" /> + <!-- 鏂板缓/缂栬緫 --> + <AddPurchase v-if="editPurchaseConfig.visible" :edit-common-config="editPurchaseConfig" /> </div> </template> <script> import pageMixin from "@/components/makepager/pager/mixin/pageMixin" import { getSupplierList, changeSupplierStatus } from "@/api/supplierManage/supplier" +import { getPurchaseList } from "@/api/purchaseManage/purchase" import DetailSupplier from "@/views/supplierManage/supplier/DetailSupplier" import AddSupplier from "@/views/supplierManage/supplier/AddSupplier" import RaleteSupplierList from "@/views/supplierManage/supplier/RaleteSupplierList" import AddNewProduct from "@/views/supplierManage/supplier/AddNewProduct" +import { getProductList, deleteProduct } from "@/api/productManage/product" +import AddPurchase from "@/views/purchaseManage/purchase/components/AddPurchase" export default { name: "SupplierManage", props: {}, - components: { DetailSupplier, AddSupplier, RaleteSupplierList, AddNewProduct }, + components: { DetailSupplier, AddSupplier, RaleteSupplierList, AddNewProduct, AddPurchase }, mixins: [pageMixin], computed: {}, data() { return { + searchSupplierName: "", tableList: {}, // 渚涘簲鍟嗗垪琛� productTableList: {}, // 浜у搧鍒楄〃 selValueList: [], @@ -115,7 +143,8 @@ searchProductOptions: [], // 浜у搧鏌ヨ commonDetail: { visible: false, - infomation: {} + infomation: {}, + productListInfo: [] }, editConfig: { visible: false, @@ -135,7 +164,38 @@ currPage: 1, pageSize: 10, totalCount: 0 - } + }, + supplierId: 0, + showCol: ["渚涘簲鍟嗙紪鍙�", "渚涘簲鍟嗗悕绉�", "渚涘簲鍟嗙被鍨�", "鎵�灞炶涓�", "鑱旂郴浜�", "鑱旂郴鐢佃瘽", "鐘舵��"], + tableColumn: [ + { label: "渚涘簲鍟嗙紪鍙�", prop: "number", min: 190, isCommonClick: true }, + { label: "渚涘簲鍟嗗悕绉�", prop: "name", min: 130, default: true }, + { label: "渚涘簲鍟嗙被鍨�", prop: "supplierType", min: 130 }, + { label: "鎵�灞炶涓�", prop: "industry", min: 130 }, + { label: "鑱旂郴浜�", prop: "contact", min: 130 }, + { label: "鑱旂郴鐢佃瘽", prop: "phone", min: 130 }, + { label: "鐘舵��", prop: "status_name", min: 130 }, + { label: "鍒涘缓鏃堕棿", prop: "created_at", min: 130 } + ], + showProductCol: ["浜у搧缂栫爜", "浜у搧鍚嶇О", "浜у搧瑙勬牸", "鍗曚綅", "閲囪喘浠锋牸", "渚涜揣鏃堕暱(澶�)", "鐗╂祦鏃堕暱(澶�)"], + productColumn: [ + { label: "浜у搧缂栫爜", prop: "number", min: 190 }, + { label: "浜у搧鍚嶇О", prop: "name", min: 130, default: true }, + { label: "浜у搧瑙勬牸", prop: "specifications", min: 130 }, + { label: "鍗曚綅", prop: "unit", min: 130 }, + { label: "閲囪喘浠锋牸", prop: "purchasePrice", min: 130 }, + { label: "渚涜揣鏃堕暱(澶�)", prop: "deliveryTime", min: 130 }, + { label: "鐗╂祦鏃堕暱(澶�)", prop: "shippingDuration", min: 130 } + ], + editPurchaseConfig: { + // 鍒涘缓閲囪喘 + visible: false, + title: "鍒涘缓", + infomation: { + supplierName: "" + } + }, + selectRow: {} } }, created() { @@ -144,21 +204,34 @@ this.getData() }, methods: { + setColumnVisible(showCol) { + return this.tableColumn.map((ele) => { + return { + ...ele, + isShowColumn: showCol.includes(ele.label) + } + }) + }, + setProductColumnVisible(showCol) { + return this.productColumn.map((ele) => { + return { + ...ele, + isShowColumn: showCol.includes(ele.label) + } + }) + }, setTable() { this.tableList = { tableInfomation: [], selectIndex: true, - tableColumn: [ - { label: "渚涘簲鍟嗙紪鍙�", prop: "number", min: 190, isCommonClick: true }, - { label: "渚涘簲鍟嗗悕绉�", prop: "name", min: 130 }, - { label: "渚涘簲鍟嗙被鍨�", prop: "supplierType", min: 130 }, - { label: "鎵�灞炶涓�", prop: "industry", min: 130 }, - { label: "鑱旂郴浜�", prop: "contact", min: 130 }, - { label: "鑱旂郴鐢佃瘽", prop: "phone", min: 130 }, - { label: "鐘舵��", prop: "status_name", min: 130 }, - { label: "鍒涘缓鏃堕棿", prop: "member_name", min: 130 } - ] + highlight: true, + ref: "tableListRef", + showcol: this.showCol, + allcol: [], + 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 @@ -166,24 +239,18 @@ this.searchOptions.push({ value: value, label: label }) } }, + selTableCol(val) { + this.showcol = val + this.tableList.tableColumn = this.setColumnVisible(val) + }, setProductTable() { this.productTableList = { - tableInfomation: [ - { - number: "aaaaa" - } - ], + tableInfomation: [], selectBox: true, selectIndex: true, - tableColumn: [ - { label: "浜у搧缂栫爜", prop: "number", min: 190 }, - { label: "浜у搧鍚嶇О", prop: "name", min: 130 }, - { label: "浜у搧瑙勬牸", prop: "contact_name", min: 130 }, - { label: "鍗曚綅", prop: "contact_phone", min: 130 }, - { label: "閲囪喘浠锋牸", prop: "sales_resources", min: 130 }, - { label: "渚涜揣鏃堕暱(澶�)", prop: "province", min: 130 }, - { label: "鐗╂祦鏃堕暱(澶�)", prop: "city", min: 130 } - ] + showcol: this.showProductCol, + allcol: [], + tableColumn: this.setProductColumnVisible(this.showProductCol) } this.searchProductOptions = [] for (let i = 0; i < this.productTableList.tableColumn.length; i++) { @@ -191,75 +258,105 @@ const value = this.productTableList.tableColumn[i].prop this.searchProductOptions.push({ value: value, label: label }) } + + this.productTableList.allcol = this.productTableList.tableColumn + .filter((ele) => !ele.default) + .map((ele) => ele.label) + console.log("this.productTableList", this.productTableList) + }, + selProductTableCol(val) { + this.showProductCol = val + this.productTableList.tableColumn = this.setProductColumnVisible(val) }, // 璇锋眰鏁版嵁 - async getData(val, content, searchName) { - if (searchName === "渚涘簲鍟�") { - this.getSupplierList(val, content) - } else if (searchName === "浜у搧") { - this.getProductList(val, content) - } else { - this.getSupplierList() - this.getProductList() - } + getData() { + this.getSupplierList() }, // 渚涘簲鍟嗗垪琛� - async getSupplierList(val, content) { + async getSupplierList() { await getSupplierList({ - [val]: content, + name: this.searchSupplierName, page: this.pagerOptions.currPage, pageSize: this.pagerOptions.pageSize }).then((res) => { - console.log(res.data) - if (res.data.code === 200) { - const list = res.data.data.list.map((item) => { + console.log(res) + if (res.code === 200) { + const list = res.data.list.map((item) => { return { ...item, + id: item.id, status_name: item.status === 0 ? "鏈惎鐢�" : "鍚敤" } }) + console.log(list) this.tableList.tableInfomation = list || [] - this.pagerOptions.totalCount = res.data.data.total + this.pagerOptions.totalCount = res.data.total + if (list && list.length > 0) { + this.supplierId = this.tableList.tableInfomation[0].id + this.selectRow = this.tableList.tableInfomation.length > 0 ? this.tableList.tableInfomation[0] : {} + } else { + this.supplierId = 0 + } + // this.$nextTick(() => { + // this.$refs.tableSupplier.$refs.table.setCurrentRow(this.tableList.tableInfomation[0]) + // }) + + // 閲嶆柊鑾峰彇渚涘簲鍟嗗垪琛ㄥ悗搴旇閲嶇疆浜у搧鍒楄〃椤电爜 + this.productPagerOptions.currPage = 1 + // 濡傛灉渚涘簲鍟嗗垪琛ㄤ负绌�,鍒欏彲鎻愪緵浜у搧鍒楄〃涔熷簲涓虹┖ + if (list.length) { + this.getProductList() + } else { + this.productTableList.tableInfomation = [] + this.productPagerOptions.currPage = 1 + this.productPagerOptions.totalCount = 0 + } } }) }, // 浜у搧鍒楄〃 async getProductList(val, content) { console.log(val, content) - // await getProductList({ - // [val]: content, - // page: this.productPagerOptions.currPage, - // pageSize: this.productPagerOptions.pageSize - // }).then((res) => { - // console.log(res.data) - // }) + await getProductList({ + [val]: content, + supplierId: this.supplierId, + page: this.productPagerOptions.currPage, + pageSize: this.productPagerOptions.pageSize + }).then((res) => { + let list = res.data.list.map((item) => { + return { + ...item + } + }) + this.productTableList.tableInfomation = list || [] + this.productPagerOptions.totalCount = res.data.total + }) }, // 鎼滅储渚涘簲鍟� - searchClick(val, content) { - console.log(val, content) - this.getData(val.value, content, "渚涘簲鍟�") - }, - resetClick() { - this.getData("", "", "渚涘簲鍟�") + onFilterSearch(searchText) { + this.searchSupplierName = searchText ?? "" + this.pagerOptions.currPage = 1 + this.getSupplierList() }, // 鎼滅储浜у搧 - searchProductClick(val, content) { - console.log(val, content) - this.getData(val.value, content, "浜у搧") - }, - resetProductClick() { - this.getData("", "", "浜у搧") + onProductFilterSearch(searchText) { + this.productPagerOptions.currPage = 1 + this.getProductList("name", searchText) }, // 鏂板缓渚涘簲鍟� addBtnClick() { this.editConfig.visible = true this.editConfig.title = "鏂板缓" + this.editConfig.infomation = { + fileId: 0, + responsiblePersonName: document.cookie.replace(/(?:(?:^|.*;\s*)username\s*=\s*([^;]*).*$)|^.*$/, "$1") + } }, // 鍚敤渚涘簲鍟� async enableClick(row, value) { let status = value === "鍚敤" ? 1 : 0 await changeSupplierStatus({ - id: row.ID, + id:Number(row.id), status: status }).then((res) => { if (res.code === 200) { @@ -270,10 +367,9 @@ }, // 淇敼渚涘簲鍟� modifyClick(row) { - console.log(row) this.editConfig.visible = true this.editConfig.title = "淇敼" - this.editConfig.infomation = { ...row } + this.editConfig.infomation = { ...row, file_name: row.contract.fileName } }, // 鐩稿叧渚涘簲鍟� raleteClick(row) { @@ -285,36 +381,32 @@ addNewProductClick() { this.newProductConfig.visible = true this.newProductConfig.title = "娣诲姞" + this.newProductConfig.infomation = { supplierId: this.supplierId } }, // 淇敼浜у搧 editClick(row) { - console.log(row) this.newProductConfig.visible = true - // this.newProductConfig.title = "淇敼" + this.newProductConfig.title = "淇敼" + this.newProductConfig.infomation = { ...row } }, // 鍒犻櫎 - delClick() { - if (this.selValueList && this.selValueList.length > 0) { - this.$confirm("鏄惁纭鍒犻櫎?", "璀﹀憡", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning" - }) - .then(() => { - console.log("dddd") - // deleteSupplier({ id: this.selValueList }).then((response) => { - // if (response.code === 200) { - // this.$message.success("鍒犻櫎鎴愬姛") - // this.getData() - // } else { - // this.$message.warning("鍒犻櫎澶辫触") - // } - // }) + delClick(row) { + this.$confirm("鏄惁纭鍒犻櫎?", "璀﹀憡", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning" + }) + .then(() => { + deleteProduct({ id: row.id }).then((response) => { + if (response.code === 200) { + this.$message.success("鍒犻櫎鎴愬姛") + this.getProductList() + } else { + this.$message.warning("鍒犻櫎澶辫触") + } }) - .catch(() => {}) - } else { - this.$message.warning("璇疯嚦灏戦�夋嫨涓�鏉¤褰�") - } + }) + .catch(() => {}) }, getSelectArray(val) { console.log(val) @@ -324,11 +416,39 @@ }) this.selValueList = list }, + tableRowClick(row) { + this.productPagerOptions.currPage = 1 + this.selectRow = row + this.supplierId = row.id + this.getProductList() + }, // 璇︽儏 - selCommonClick(row) { - console.log(row) + async selCommonClick(row) { + await getPurchaseList({ pageSize: 10, page: 1, supplierId: Number(row.id) }).then((res) => { + this.commonDetail.productListInfo = res.data.list + }) this.commonDetail.visible = true this.commonDetail.infomation = { ...row } + }, + // 浜у搧鍒楄〃缈婚〉 + productChangeHandler(val) { + this.productPagerOptions.currPage = 1 + this.productPagerOptions.pageSize = val + this.getProductList() + }, + currentProductHandler(val) { + this.productPagerOptions.currPage = val + this.getProductList() + }, + // 鍒涘缓閲囪喘鍗� + creatPurchase() { + this.editPurchaseConfig.visible = true + this.editPurchaseConfig.title = "鏂板缓" + this.editPurchaseConfig.infomation = { + supplierId: this.selectRow.id, + purchaseTypeId:"2", + supplierName: this.selectRow.name + } } } } @@ -336,9 +456,67 @@ <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> -.rightContent { +.supplier { + height: 100%; + overflow: hidden; .top { - margin-bottom: 20px; + position: relative; + height: 55%; + .body { + position: relative; + height: calc(100% - 92px); + } + } + .bottom { + position: relative; + height: 45%; + .body { + position: relative; + height: calc(100% - 40px); + padding-top: 0; + } + } + .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; + } + } + .simple-filter { + height: 40px; + box-sizing: border-box; + display: flex; + align-items: center; + padding: 0 20px; + &-card { + height: 80px; + display: flex; + align-items: center; + box-sizing: border-box; + flex: 1; + } + } + .body { + box-sizing: border-box; + padding: 10px 20px; + border-radius: 12px; + .body-card { + background-color: #fff; + border-radius: 12px; + height: 100%; + overflow: hidden; + } + .supplier-search { display: flex; align-items: center; @@ -347,6 +525,10 @@ margin-right: 20px; } } + .list-view { + height: calc(100% - 60px); + overflow: hidden; + } .btn-pager { display: flex; .page { @@ -354,24 +536,23 @@ } } } - .bottom { - .product-search { - display: flex; - align-items: center; - .search { - margin-left: auto; - } - .add-view { - margin-left: 20px; - margin-right: 20px; - } - } - .btn-pager { - display: flex; - .page { - margin-left: auto; - } - } +} +.sub-title { + flex-shrink: 0; + margin-right: 20px; + font-size: 16px; + font-weight: bold; + height: 28px; + line-height: 28px; + position: relative; + padding-left: 12px; + &-decorator { + position: absolute; + height: 100%; + width: 4px; + background-color: #2a78fb; + top: 0; + left: 0; } } </style> -- Gitblit v1.8.0