From b823a11d74b6623fadcfab27150cdbb0ad9766f5 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期五, 15 九月 2023 17:50:07 +0800 Subject: [PATCH] 调拨列表页面、报废列表、新建页面开发 --- src/views/overview/AddOverviewDialog.vue | 275 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 223 insertions(+), 52 deletions(-) diff --git a/src/views/overview/AddOverviewDialog.vue b/src/views/overview/AddOverviewDialog.vue index 7a35712..abf3d6d 100644 --- a/src/views/overview/AddOverviewDialog.vue +++ b/src/views/overview/AddOverviewDialog.vue @@ -8,7 +8,7 @@ > <!-- 澶� --> <div slot="title" class="dialog-header"> - <span>{{ editCommonConfig.title + "閲囪喘鍏ュ簱" }}</span> + <span>{{ editCommonConfig.title + addName }}</span> <div class="header_btns"> <span class="btn"> <i class="el-icon-printer"></i> @@ -39,7 +39,7 @@ <div class="basic-info-view"> <el-row> <el-col :span="12"> - <el-form-item label="鎺ユ敹" prop="client_name"> + <el-form-item v-if="workType === '鏀惰揣'" label="瀹㈡埛" prop="client_name"> <el-select v-model="editConfig.infomation.memberId" placeholder="璇烽�夋嫨" @@ -53,7 +53,35 @@ </el-form-item> </el-col> <el-col :span="12"> - <el-form-item label="瀹夋帓鐨勬棩鏈�" prop="refundDate"> + <el-form-item v-if="workType === '鍐呴儴璋冩嫧'" label="鑱旂郴浜�" prop="client_name"> + <el-select + v-model="editConfig.infomation.memberId" + placeholder="璇烽�夋嫨" + size="mini" + style="width: 63%" + :disabled="!showFooter" + > + <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item v-if="workType === '鍙戣揣'" label="閫佽揣鍦板潃" prop="client_name"> + <el-select + v-model="editConfig.infomation.memberId" + placeholder="璇烽�夋嫨" + size="mini" + style="width: 63%" + :disabled="!showFooter" + > + <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鏃ユ湡" prop="refundDate"> <el-date-picker v-model="editConfig.infomation.refundDate" value-format="yyyy-MM-dd" @@ -66,7 +94,7 @@ </el-form-item> </el-col> <el-col :span="12"> - <el-form-item label="浣滀笟绫诲瀷" prop="client_name"> + <el-form-item label="鍏ュ簱绫诲瀷" prop="client_name"> <el-select v-model="editConfig.infomation.memberId" placeholder="璇烽�夋嫨" @@ -80,7 +108,7 @@ </el-form-item> </el-col> <el-col :span="12"> - <el-form-item label="婧愬崟鎹�" prop="memberId"> + <el-form-item label="鏉ユ簮鍗曟嵁" prop="memberId"> <el-input v-model="editConfig.infomation.memberId" placeholder="渚嬪:PO0032" @@ -90,7 +118,21 @@ </el-form-item> </el-col> <el-col :span="12"> - <el-form-item label="鐩殑浣嶇疆" prop="client_name"> + <el-form-item v-if="workType !== '鏀惰揣'" label="婧愪綅缃�" prop="client_name"> + <el-select + v-model="editConfig.infomation.memberId" + placeholder="璇烽�夋嫨" + size="mini" + style="width: 63%" + :disabled="!showFooter" + > + <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item v-if="workType !== '鍙戣揣'" label="浠撳簱浣嶇疆" prop="client_name"> <el-select v-model="editConfig.infomation.memberId" placeholder="璇烽�夋嫨" @@ -107,22 +149,39 @@ </div> <div class="bottom"> <el-tabs v-model="activeName" type="card"> + <el-tab-pane v-if="workType !== '鏀惰揣'" label="璇︽儏" name="detail"> </el-tab-pane> <el-tab-pane label="鎿嶄綔" name="first"> </el-tab-pane> <el-tab-pane label="鍏朵粬淇℃伅" name="second"> - <el-col :span="12"> - <el-form-item label="璐熻矗浜�" prop="client_name"> - <el-select - v-model="editConfig.infomation.memberId" - placeholder="璇烽�夋嫨" - size="mini" - style="width: 63%" - :disabled="!showFooter" - > - <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id"> - </el-option> - </el-select> - </el-form-item> - </el-col> + <div class="purchase-view"> + <div class="left"> + <div class="second-label">鍏朵粬淇℃伅</div> + <el-form-item v-if="workType !== '鏀惰揣'" label="閫佽揣绛栫暐" prop="client_name"> + <el-select + v-model="editConfig.infomation.memberId" + placeholder="璇烽�夋嫨" + size="mini" + style="width: 63%" + :disabled="!showFooter" + > + <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="璐熻矗浜�" prop="client_name"> + <el-select + v-model="editConfig.infomation.memberId" + placeholder="璇烽�夋嫨" + size="mini" + style="width: 63%" + :disabled="!showFooter" + > + <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + </div> + <div class="right"></div> + </div> </el-tab-pane> <el-tab-pane label="澶囨敞" name="third"> <el-form-item label="澶囨敞" prop="desc"> @@ -137,17 +196,37 @@ </el-form-item> </el-tab-pane> </el-tabs> + <!-- 鎿嶄綔 --> <div v-if="activeName === 'first'"> <CommonFormTableView :product-table-list="productTableList" :detail-enter="!showFooter" @inputContent="inputContent" - @addProductClick="addProductClick" + @addProductClick="addProductClick('鎿嶄綔')" > <template v-if="showFooter" slot="tableButton"> <el-table-column label="鎿嶄綔" width="60" fixed="right" align="center"> <template slot-scope="scope"> - <div @click="handleDelClick(scope)"> + <div @click="handleDelClick(scope, '鎿嶄綔')"> + <i class="el-icon-delete"></i> + </div> + </template> + </el-table-column> + </template> + </CommonFormTableView> + </div> + <!-- 璇︽儏 --> + <div v-if="activeName === 'detail'"> + <CommonFormTableView + :product-table-list="detailTableList" + :detail-enter="!showFooter" + @inputContent="inputDetail" + @addProductClick="addProductClick('璇︽儏')" + > + <template v-if="showFooter" slot="tableButton"> + <el-table-column label="鎿嶄綔" width="60" fixed="right" align="center"> + <template slot-scope="scope"> + <div @click="handleDelClick(scope, '璇︽儏')"> <i class="el-icon-delete"></i> </div> </template> @@ -182,6 +261,14 @@ infomation: {} } } + }, + workType: { + type: String, + default: "鏀惰揣" + }, + addName: { + type: String, + default: "璋冩嫧" } }, components: { CommonFormTableView }, @@ -209,16 +296,24 @@ activeName: "first", productTableList: {}, tableData: [{ name: "ssss" }], + productId: 0, isNoProduct: false, // 娣诲姞鏄庣粏琛屾椂鏄惁鏈変骇鍝佹湭閫夋嫨 showEdit: false, // 鏄惁鏄剧ず缂栬緫鎸夐挳 isDelClick: false, // 鍒犻櫎鎸夐挳鏄惁鍙偣鍑� showFooter: false, // 鏄惁鏄剧ず鍙栨秷淇濆瓨 - currentState: "todo" // 褰撳墠鐘舵�� + currentState: "todo", // 褰撳墠鐘舵�� + detailTableList: {}, + detailTableData: [{ name: "ssss" }], + detailId: 0, + isNoDetail: false, // 娣诲姞璇︽儏鏄庣粏琛屾椂鏄惁鏈�夋嫨 + tableColumn: [] } }, created() { this.setTableForm() this.setBottonView() + this.setDetailTableForm() + this.activeName = this.workType === "鏀惰揣" ? "first" : "detail" }, methods: { // 璁剧疆鍒犻櫎/鎵撳嵃/缂栬緫鏄惁鏄剧ず @@ -268,6 +363,7 @@ saveClick() {}, // 鍒犻櫎 delClick() {}, + // 鎿嶄綔鍒楄〃 setTableForm() { this.productTableList = { tableData: this.tableData, @@ -281,7 +377,7 @@ ] } }, - // 浜у搧鍒楄〃杈撳叆 + // 鎿嶄綔杈撳叆 inputContent(val, prop, row) { this.productId = row.productId this.tableData.map((item) => { @@ -290,35 +386,99 @@ } }) }, - // 浜у搧鏂板 - addProductClick() { - console.log(this.tableData) - for (let i = 0; i < this.tableData.length; i++) { - if (this.tableData[i].name.length === 0) { - this.isNoProduct = true - break - } else { - this.isNoProduct = false + // 鏂板 + addProductClick(value) { + if (value === "鎿嶄綔") { + console.log(this.tableData) + for (let i = 0; i < this.tableData.length; i++) { + if (this.tableData[i].name.length === 0) { + this.isNoProduct = true + break + } else { + this.isNoProduct = false + } + } + if (!this.isNoProduct) { + this.productId++ + this.tableData.push({ + productId: this.productId, + id: 0, + amount: 0, + desc: "", + name: "", + number: "", + price: 0, + total: 0 + }) + } + } else { + console.log(this.detailTableData) + for (let i = 0; i < this.detailTableData.length; i++) { + if (this.detailTableData[i].name.length === 0) { + this.isNoDetail = true + break + } else { + this.isNoDetail = false + } + } + if (!this.isNoDetail) { + this.detailId++ + this.detailTableData.push({ + detailId: this.detailId, + id: 0, + amount: 0, + desc: "", + name: "", + number: "", + price: 0, + total: 0 + }) } } - if (!this.isNoProduct) { - this.productId++ - this.tableData.push({ - productId: this.productId, - id: 0, - amount: 0, - desc: "", - name: "", - number: "", - price: 0, - total: 0 - }) + }, + // 鍒犻櫎 + handleDelClick(scope, value) { + console.log(scope) + if (value === "鎿嶄綔") { + this.tableData.splice(scope.$index, 1) + } else { + this.detailTableData.splice(scope.$index, 1) } }, - // 浜у搧鍒犻櫎 - handleDelClick(scope) { - console.log(scope) - this.tableData.splice(scope.$index, 1) + // 璇︽儏鍒楄〃 + setDetailTableForm() { + this.setTableColumn() + this.detailTableList = { + tableData: this.detailTableData, + tableColumn: this.tableColumn + } + }, + setTableColumn() { + if (this.workType === "鍐呴儴璋冩嫧") { + this.tableColumn = [ + { label: "浜у搧", prop: "name", productName: true, isRequird: true }, + { label: "浠�", prop: "number", select: true }, + { label: "鑷�", prop: "amount", select: true }, + { label: "瀹屾垚", prop: "total", inputFloat: true }, + { label: "璁¢噺鍗曚綅", prop: "total", select: true } + ] + } else { + this.tableColumn = [ + { label: "浜у搧", prop: "name", productName: true, isRequird: true }, + { label: "浠�", prop: "number", select: true }, + { label: "瀹屾垚", prop: "total", inputFloat: true }, + { label: "璁¢噺鍗曚綅", prop: "total", select: true } + ] + } + }, + // 璇︽儏杈撳叆 + inputDetail(val, prop, row) { + this.detailId = row.detailId + this.detailTableData.map((item) => { + if (item.detailId === row.detailId) { + item[prop] = val + } + }) } } } @@ -353,9 +513,20 @@ .basic-info-view { margin-top: 20px; } - // .bottom { - // margin-left: 20px; - // } +} +.purchase-view { + display: flex; + .left { + width: 50%; + } + .right { + width: 50%; + } +} +.second-label { + margin-left: 20px; + border-bottom: 1px solid #d9d9d9; + margin-bottom: 10px; } ::v-deep { .el-dialog__headerbtn { -- Gitblit v1.8.0