From c35ccb51c02c8852e345b831ef5d2dd96c2cf500 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期三, 30 八月 2023 16:39:33 +0800 Subject: [PATCH] Merge branch 'master' of ssh://192.168.5.5:29418/web/SRM --- src/components/makepager/CommonFormTableView.vue | 392 ++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 271 insertions(+), 121 deletions(-) diff --git a/src/components/makepager/CommonFormTableView.vue b/src/components/makepager/CommonFormTableView.vue index aa3b08e..348fce9 100644 --- a/src/components/makepager/CommonFormTableView.vue +++ b/src/components/makepager/CommonFormTableView.vue @@ -1,8 +1,12 @@ <template> <div class="page-view"> - <el-form ref="form" :model="tableList" :show-message="false" label-position="right"> - <el-table :data="tableList.tableData" style="width: 100%"> - <el-table-column type="index" label="缂栧彿" width="50" align="center"></el-table-column> + <el-form ref="form" :model="tableList" :show-message="false" label-position="right" + > + <el-table :data="tableList.tableData" style="width: 100%" + :show-summary="showSummary.show" + :summary-method="getSummaries" + :span-method="arraySpanMethod"> + <el-table-column type="index" v-if="tableList.tableColumn.length>0" label="缂栧彿" width="50" align="center"></el-table-column> <el-table-column v-for="(item, i) in tableList.tableColumn" :key="i" @@ -19,103 +23,122 @@ </template> <!-- column鏍峰紡 --> <template slot-scope="scope"> - <template v-if="!detailEnter"> - <el-form-item - v-if="item.input" - label=" " - :prop="'tableData.' + scope.$index + '.' + item.prop" - :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]" - > - <el-input - v-model.trim="scope.row[item.prop]" - maxlength="50" + <!-- <template v-if="!detailEnter"> --> + <el-form-item + v-if="item.input" + label=" " + :prop="'tableData.' + scope.$index + '.' + item.prop" + :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]" + > + <el-input + v-model.trim="scope.row[item.prop]" + maxlength="50" + size="mini" + @change=" + (val) => { + commonInputChange(val, item.prop, scope.row) + } + " + ></el-input> + </el-form-item> + <el-form-item v-else-if="item.productName" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> + <div class="custom-name"> + <el-autocomplete + v-model="scope.row[item.prop]" + :fetch-suggestions="querySearchAsync" + value-key="name" + style='width:calc(100% - 70px)' size="mini" - @change=" + @select=" (val) => { - commonInputChange(val, item.prop, scope.row) + handleSelectClient(val, item.prop, scope.row) } " - ></el-input> - </el-form-item> - <el-form-item - v-else-if="item.productName" - label=" " - :prop="'tableData.' + scope.$index + '.' + item.prop" - > - <div class="custom-name"> - <el-autocomplete - v-model="scope.row[item.prop]" - :fetch-suggestions="querySearchAsync" - value-key="name" - size="mini" - @select=" - (val) => { - handleSelectClient(val, item.prop, scope.row) - } - " - ></el-autocomplete> - <div class="common-select-btn" @click="selClientClick(scope.row, item.prop)"> - <i class="el-icon-circle-plus-outline" title="閫夋嫨"></i> - </div> - <div class="common-select-btn" @click="clearupClient(scope.row)"> - <i class="el-icon-edit-outline" title="娓呴櫎"></i> - </div> + ></el-autocomplete> + <div class="common-select-btn" @click="selClientClick(scope.row, item.prop,scope)"> + <i class="el-icon-circle-plus-outline" title="閫夋嫨"></i> </div> - </el-form-item> - <el-form-item - v-else-if="item.date" - label=" " - :prop="'tableData.' + scope.$index + '.' + item.prop" - :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]" - > - <!-- <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></el-input> --> - <el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px"> - </el-date-picker> - </el-form-item> - <el-form-item - v-else-if="item.inputNumber" - label=" " - :prop="'tableData.' + scope.$index + '.' + item.prop" - :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]" - > + <div class="common-select-btn" @click="clearupClient(scope.row,scope)"> + <i class="el-icon-remove-outline" title="娓呴櫎"></i> + </div> + <div class="common-select-btn" v-if="scope.$index!=0" @click="deleteClient(scope.row,scope)"> + <i class="el-icon-delete" title="鍒犻櫎"></i> + </div> + </div> + </el-form-item> + <el-form-item + v-else-if="item.date" + label=" " + :prop="'tableData.' + scope.$index + '.' + item.prop" + :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]" + > + <!-- <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></el-input> --> + <el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px"> + </el-date-picker> + </el-form-item> + <el-form-item + v-else-if="item.inputNumber" + label=" " + :prop="'tableData.' + scope.$index + '.' + item.prop" + :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]" + > + <el-input-number + v-model="scope.row[item.prop]" + placeholder="" + :min="0" + :controls="false" + size="mini" + style="width: 100%; margin-right: 5px" + @change=" + (val) => { + commonInputChange(val, item.prop, scope.row) + } + " + ></el-input-number> + </el-form-item> + <el-form-item + v-else-if="item.inputFloat" + label=" " + :prop="'tableData.' + scope.$index + '.' + item.prop" + :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]" + > + <template v-if="item.multiply"> <el-input-number - v-model="scope.row[item.prop]" + :value="scope.row[showSummary.multiply[0]]*scope.row[showSummary.multiply[1]]" placeholder="" - :min="0" - :controls="false" - size="mini" - style="width: 100%; margin-right: 5px" - @change=" - (val) => { - commonInputChange(val, item.prop, scope.row) - } - " - ></el-input-number> - </el-form-item> - <el-form-item - v-else-if="item.inputFloat" - label=" " - :prop="'tableData.' + scope.$index + '.' + item.prop" - :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]" - > - <el-input-number - v-model="scope.row[item.prop]" - placeholder="" + :disabled="item.disabled" :min="0" :precision="2" :controls="false" size="mini" style="width: 100%; margin-right: 5px" - @change=" + @input=" (val) => { commonInputChange(val, item.prop, scope.row) } " ></el-input-number> - </el-form-item> - <span v-else>{{ scope.row[item.prop] }}</span> - </template> + </template> + <template v-else> + <el-input-number + v-model="scope.row[item.prop]" + placeholder="" + :min="0" + :precision="2" + :controls="false" + size="mini" + style="width: 100%; margin-right: 5px" + @change=" + (val) => { + commonInputChange(val, item.prop, scope.row) + } + " + ></el-input-number> + </template> + </el-form-item> <span v-else>{{ scope.row[item.prop] }}</span> + <!-- </template> --> + <!-- <span v-else>{{ scope.row[item.prop] }}</span> --> </template> </el-table-column> </el-table> @@ -128,13 +151,14 @@ <SelectCommonDialog v-if="editSelCommonConfig.editVisible" :edit-common-config="editSelCommonConfig" + :sign="sign" @selClient="selClient" /> </div> </template> <script> -import { getProductList } from "@/api/common/other" +import { getProductListFromGrpc,getProductList } from "@/api/productManage/product" import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog" export default { name: "CommmonFormTableView", @@ -143,6 +167,10 @@ detailEnter: { type: Boolean, default: false + }, + sign:{ + type:String, + default:'' }, productTableList: { type: Object, @@ -164,10 +192,16 @@ total: false, refundable: false, sumProp: [], + multiply:[], + titleProp: ["#", "浜у搧鍚嶇О"], mergeNumber: 1 } } - } + }, + recalculateShow: { + type: [Boolean], + defalut: true + }, }, data() { return { @@ -179,33 +213,31 @@ title: "", infomation: {} }, - productIndex: 0, - isRecalculate: true + productIndex: 0 } }, created() { this.getProductList() this.tableList = this.productTableList - if (this.tableList.tableData.length === 1 && this.tableList.tableData[0].name === "") { - this.isRecalculate = false - } else { - this.isRecalculate = true - } }, computed: {}, + watch:{ + productTableList(){ + this.tableList = this.productTableList + } + }, methods: { // 浜у搧鍚嶇О async getProductList() { - await getProductList({ - productName: "", - productNumber: "", + let fn = this.sign == "purchase" ? getProductList : getProductListFromGrpc; + await fn({ page: 1, - pageSize: 5 + pageSize: 100 }).then((res) => { console.log(res.data) if (res.data.code === 200) { - if (res.data.data.data && res.data.data.data.length > 0) { - this.productList = res.data.data.data + if (res.data.data.list && res.data.data.list.length > 0) { + this.productList = res.data.data.list } } }) @@ -216,6 +248,62 @@ handleSelectionChange(val) { this.$emit("getSelectArray", val) }, + // 琛屽悎骞� + arraySpanMethod() { + if (this.showSummary.show) { + this.$nextTick(() => { + if (this.$refs.table) { + var current = this.$refs.table.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer") + var cell = current.rows[0].cells + for (let i = 0; i < this.showSummary.mergeNumber; i++) { + cell[i].style.display = "none" + } + cell[this.showSummary.mergeNumber].classList.remove("is-left") + cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString() + } + }) + } + }, + // 鍚堣 + getSummaries(param) { + const { columns, data } = param + const sums = [] + columns.forEach((column, index) => { + // // 鏇存敼琛屽悕绉� + if (index === this.showSummary.mergeNumber) { + sums[index] = "灏忚:" + return + } + const title = this.showSummary.titleProp + // 鍘婚櫎鏌愪簺涓嶉渶瑕佽绠楃殑鏁版嵁 + if (title.includes(column.label)) { + sums[index] = "" + return + } + // 鎶婂綋鍓嶈〃鏍兼暟鎹腑鍚屼釜鍒嗙被鐨勬暟鎹敹闆嗚捣鏉� + const values = data.map((item) => Number(item[column.property])) + // 杩囨护鎺� + if (!values.every((value) => Number.isNaN(value))) { + sums[index] = ` ${values.reduce((prev, curr) => { + const value = Number(curr) + if (!Number.isNaN(value)) { + const num = prev + curr + return Number(num.toFixed(2)) + } else { + return Number(prev.toFixed(2)) + } + }, 0)}` + } else { + sums[index] = "" + } + if (column.property === "total") { + this.total = sums[index] + this.$emit('getSummaries',this.total) + } + }) + return sums + }, + // 鏁板瓧鎹㈣涓洪噾棰濇樉绀烘牸寮� number_format(number, decimals, dec_point, thousands_sep) { decimals = 2 //杩欓噷榛樿璁剧疆淇濈暀涓や綅灏忔暟锛屼篃鍙互娉ㄩ噴杩欏彞閲囩敤浼犲叆鐨勫弬鏁� @@ -255,7 +343,6 @@ }, // 娓呯┖ empty() { - this.isRecalculate = false this.$emit("emptyProductClick") }, // 閫夋嫨浜у搧鍚嶇О鐩稿叧鏂规硶 @@ -271,56 +358,118 @@ }, handleSelectClient(item, prop, row) { // this.clientId = item.id - this.isRecalculate = true console.log(item, prop, row) this.tableList.tableData.map((ite) => { if (ite.name === item.name) { + ite.ID = row.ID ite.amount = item.amount || 1 ite.number = item.number - ite.price = item.price - ite.total = item.amount ? item.amount * item.price : 1 * item.price + ite.purchasePrice = item.purchasePrice + ite.unit = item.unit + ite.deliveryTime = item.deliveryTime + ite.shippingDuration = item.shippingDuration + ite.modelNumber = item.modelNumber } }) + if (this.detailEnter) { + this.setEditName(item, row.ID) + } }, - selClientClick(row, prop) { + setEditName(item, ID) { + let selRow = { + ID: ID, + deliveryTime: item.deliveryTime, + maximumStock: item.maximumStock, + minimumStock: item.minimumStock, + modelNumber: item.modelNumber, + name: item.name, + number: item.number, + productType: item.productType, + purchasePrice: item.purchasePrice, + remark: item.remark, + shippingDuration: item.shippingDuration, + specifications: item.specifications, + supplierId: item.supplierId, + unit: item.unit + } + this.$emit("selCommonName", selRow) + }, + selClientClick(row, prop,scope) { console.log(row, prop) - this.productIndex = row.productId - 1 + this.productIndex = scope.$index this.editSelCommonConfig.title = "浜у搧鍚嶇О" this.editSelCommonConfig.editVisible = true }, selClient(item) { console.log(item) console.log(this.tableList.tableData) - this.isRecalculate = true - // this.editConfig.infomation.client_name = row.name - this.tableList.tableData.map((ite, index) => { - if (index === this.productIndex) { + if (this.detailEnter) { + this.tableList.tableData.map((ite) => { + ite.ID ite.name = item.name ite.amount = item.amount || 1 ite.number = item.number - ite.price = item.price - ite.total = item.amount ? item.amount * item.price : 1 * item.price - } - }) + ite.purchasePrice = item.purchasePrice + ite.unit = item.unit + ite.deliveryTime = item.deliveryTime + ite.shippingDuration = item.shippingDuration + }) + this.setEditName(item, this.tableList.tableData[0].ID) + } else { + this.tableList.tableData.map((ite, index) => { + if (index === this.productIndex) { + ite.name = item.name + ite.productId = item.ID + ite.amount = item.amount || 1 + ite.number = item.number + ite.purchasePrice = item.purchasePrice + ite.unit = item.unit + ite.deliveryTime = item.deliveryTime + ite.shippingDuration = item.shippingDuration + this.$set(this.tableList.tableData,index,ite) + this.$forceUpdate() + } + }) + + + console.log(this.tableList.tableData,'=====chanp') + } }, // 娓呴櫎宸查�夋嫨鐢ㄦ埛 - clearupClient(row) { - this.productIndex = row.productId - 1 + clearupClient(row,scope) { + this.productIndex = scope.$index this.tableList.tableData.map((ite, index) => { - if (index === this.productIndex) { + console.log(scope.$index) + if (scope.$index && scope.$index >= 0) { + if (index === this.productIndex) { + ite.name = "" + ite.amount = 1 + ite.number = "" + ite.purchasePrice = 0 + ite.unit = "" + ite.deliveryTime = 0 + ite.shippingDuration = 0 + } + } else { ite.name = "" ite.amount = 1 ite.number = "" - ite.price = 0 - ite.total = 0 + ite.purchasePrice = 0 + ite.unit = "" + ite.deliveryTime = 0 + ite.shippingDuration = 0 } }) this.$emit("clearupProduct", this.tableList.tableData) }, - // 鍒犻櫎 - deleteClient(row) { - this.$emit("deleteProduct", row) - } + deleteClient(row,scope){ + if(this.tableList.tableData.length==1){ + this.$message.error('鑷冲皯淇濈暀涓�鏉★紝涓嶈兘鍒櫎浜嗭紒') + return true; + } + this.tableList.tableData.splice(scope.$index,1) + }, + } } </script> @@ -328,6 +477,7 @@ <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> .page-view { + min-width:100px; .el-form-item { margin-bottom: 0; .custom-name { @@ -346,7 +496,7 @@ } .el-table__footer-wrapper tbody td.el-table__cell { background-color: #fff; - text-align: right; + // text-align: right; font-weight: bold; } .el-input--suffix .el-input__inner { -- Gitblit v1.8.0