From 7f5306d896fa0c541a83c4b62d0c533a604dd184 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期日, 28 四月 2024 18:23:23 +0800 Subject: [PATCH] 供应商管理模块 添加新产品的时候供应商对应的产品和已增加的产品都不可选的逻辑处理 --- src/components/makepager/CommonFormTableView.vue | 581 ++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 382 insertions(+), 199 deletions(-) diff --git a/src/components/makepager/CommonFormTableView.vue b/src/components/makepager/CommonFormTableView.vue index 41cbeef..cfbb18b 100644 --- a/src/components/makepager/CommonFormTableView.vue +++ b/src/components/makepager/CommonFormTableView.vue @@ -2,19 +2,20 @@ <div class="page-view"> <el-form ref="form" :model="tableList" :show-message="false" label-position="right"> <el-table + ref="fromTable" + :border="isBoder" :data="tableList.tableData" - style="width: 100%" :show-summary="showSummary.show" :summary-method="getSummaries" :span-method="arraySpanMethod" + style="width: 100%" + @selection-change="handleSelectionChange" + :row-key="getRowKeys" > - <el-table-column - type="index" - v-if="tableList.tableColumn.length > 0" - label="缂栧彿" - width="50" - align="center" - ></el-table-column> + <el-table-column v-if="selectBox" type="selection" :selectable="isDisabled" :reserve-selection="true" width="40" align="center"> + + </el-table-column> + <el-table-column v-if="tableList.isReturn" type="index" label="#" width="50" align="center"></el-table-column> <el-table-column v-for="(item, i) in tableList.tableColumn" :key="i" @@ -28,64 +29,143 @@ <template slot="header"> <span v-if="item.isRequird" style="color: #f56c6c">*</span> <span>{{ item.label }}</span> + <FilterPopover @toFiltering="toFiltering" class="margin_left_3px" v-if="item.isFilter" + :layout="item.prop" :isFilterList="item.isFilterList" + :selectedListDefault="item.selectedListDefault"></FilterPopover> </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" - 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)" + <template v-if="!detailEnter || isOperate"> + <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" - @select=" + :disabled="!isOperate" + @change=" (val) => { - handleSelectClient(val, item.prop, scope.row) + commonInputChange(val, item.prop, scope.row, scope) } " - ></el-autocomplete> - <div class="common-select-btn" @click="selClientClick(scope.row, item.prop, scope)"> - <i class="el-icon-circle-plus-outline" title="閫夋嫨"></i> - </div> - <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> + ></el-input> + </el-form-item> + <span v-else-if="item.compute">{{ calculateDifference(scope.row) }}</span> + <!-- 璋冪敤鏂规硶鏄剧ず鏂囧瓧 --> + <div v-else-if="item.isCallMethod"> + <span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">{{ + item.getCallMethod(scope.row[item.prop], scope.row) + }}</span> </div> - </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" + :disabled="!isOperate" + size="mini" + @select=" + (val) => { + handleSelectClient(val, item.prop, scope.row) + } + " + ></el-autocomplete> + + <div + v-if="scope.row[item.prop] && scope.row[item.prop].length > 0 && isOperate" + class="common-select-btn" + @click="handleEditClient(scope, item.prop)" + > + <i class="el-icon-edit" title="缂栬緫"></i> + </div> + <div + v-if="scope.row[item.prop] && scope.row[item.prop].length > 0 && isOperate" + class="common-select-btn" + @click="clearupClient(scope)" + > + <i class="el-icon-remove-outline" title="娓呴櫎"></i> + </div> + <div class="common-select-btn" v-else @click="selClientClick(scope, item.prop)"> + <i class="el-icon-circle-plus-outline" 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 + :disabled="!isOperate" + 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" + :disabled="!isOperate" + size="mini" + style="width: 100%; margin-right: 5px" + @change=" + (val) => { + commonInputChange(val, item.prop, scope.row, scope) + } + " + ></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="" + :min="0" + :precision="2" + :disabled="!isOperate" + :controls="false" + size="mini" + style="width: 100%; margin-right: 5px" + @change=" + (val) => { + commonInputChange(val, item.prop, scope.row, scope) + } + " + ></el-input-number> + </el-form-item> + <span v-else> + <template> + {{ scope.row[item.prop] }} + </template> + </span> + </template> <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" + v-else-if="item.inputNumber && selectBox" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop" :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]" @@ -95,72 +175,58 @@ placeholder="" :min="0" :controls="false" + :disabled="!isOperate" size="mini" style="width: 100%; margin-right: 5px" @change=" (val) => { - commonInputChange(val, item.prop, scope.row) + commonInputChange(val, item.prop, scope.row, scope) } " ></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 - :value="scope.row[showSummary.multiply[0]] * scope.row[showSummary.multiply[1]]" - placeholder="" - :disabled="item.disabled" - :min="0" - :precision="2" - :controls="false" - size="mini" - style="width: 100%; margin-right: 5px" - @input=" - (val) => { - commonInputChange(val, item.prop, scope.row) - } - " - ></el-input-number> - </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> --> + <span v-else style="text-align: right">{{ scope.row[item.prop] }}</span> + + </template> + <!-- <template slot-scope="scope" v-if="item.compute"> + </template> --> + </el-table-column> + <!-- <el-table-column label="鍓╀綑鏀惰揣鏁伴噺"> + </el-table-column> --> + <el-table-column label="鎿嶄綔" width="40" v-if="!detailEnter" align="center"> + <template slot-scope="scope"> + <el-button type="text" size="small" :disabled="!isOperate" @click="deleteClick(scope)">鍒犻櫎</el-button> </template> </el-table-column> + <slot name="tableButton" /> </el-table> </el-form> <div v-if="!detailEnter" style="margin: 10px"> - <el-button size="small" type="primary" @click="add">鏂板</el-button> - <el-button size="small" type="primary" @click="empty">娓呯┖</el-button> + <el-button size="small" type="primary" :disabled="!isOperate" @click="add">鏂板</el-button> + <!-- <el-button size="small" type="primary" disabled>瀵煎叆鏄庣粏</el-button> --> + <el-button size="small" type="primary" :disabled="!isOperate" @click="empty">娓呯┖</el-button> </div> - <!-- 浜у搧鍚嶇О --> + <div v-if="false && (showSummary.total || showSummary.refundable)" style="height: 42px; line-height: 42px"> + <el-row :gutter="10"> + <el-col v-if="showSummary.total" :span="3" :offset="21"> + <span style="font-weight: bold">鍚堣</span> + <span style="margin-left: 10px">{{ total }}</span> + </el-col> + <el-col v-if="showSummary.refundable" :span="3" :offset="21"> + <span style="font-weight: bold">搴旈��娆�</span> + <span style="margin-left: 10px">0.00</span> + </el-col> + </el-row> + </div> + <!-- 鍚堝悓璁㈠崟 --> <SelectCommonDialog v-if="editSelCommonConfig.editVisible" :edit-common-config="editSelCommonConfig" :sign="sign" + :selectBoxList="arrDisabledList" + :quotationNumber="quotationNumber" @selClient="selClient" + @getSelectArray="getSelectArray" /> </div> </template> @@ -168,11 +234,21 @@ <script> import { getProductListFromGrpc, getProductList } from "@/api/productManage/product" import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog" +import FilterPopover from "@/components/makepager/FilterPopover"; export default { name: "CommmonFormTableView", - components: { SelectCommonDialog }, + components: { SelectCommonDialog ,FilterPopover}, props: { detailEnter: { + type: Boolean, + default: false + }, + // selection 閫夋嫨鐘舵�� 椤甸潰 + name: { + type: String, + default: "", + }, + isBoder:{ type: Boolean, default: false }, @@ -180,11 +256,36 @@ type: String, default: "" }, + selectBox: { + type: Boolean, + default: false + }, + // 閭d釜椤甸潰 鐢ㄦ潵鍒ゆ柇璁$畻鏂瑰紡 + pageName: { + type: String, + default: "" + }, + // 鍒楄〃鏂板鏄惁澶氶�� + addTypeIdMultiple: { + type: Boolean, + default: false + }, + // 鏍规嵁鎶ヤ环鍗曟煡璇骇鍝� + quotationNumber: { + type: [String, Number], + default: "" + }, + // 鏄惁鍙互鎿嶄綔 娣诲姞绛� + isOperate: { + type: Boolean, + default: true + }, productTableList: { type: Object, default: () => { return { tableData: [], // 鎺ュ彛杩斿洖鏁版嵁 + isReturn: false, tableColumn: [ // table琛ㄥ崟 { label: "", prop: "", min: 200, tooltip: true } @@ -200,52 +301,102 @@ total: false, refundable: false, sumProp: [], - multiply: [], - titleProp: ["#", "浜у搧鍚嶇О"], mergeNumber: 1 } } }, - recalculateShow: { - type: [Boolean], - defalut: true + disabledList:{ + type:[Array], + default: () => { + return [] + } } }, data() { return { total: 0, productList: [], - tableList: [], + tableList: { + tableData:[] + }, editSelCommonConfig: { editVisible: false, + isSelectBox: false, title: "", - infomation: {} + infomation: {}, + supplierId:null, }, - productIndex: 0 + productIndex: 0, + supplierId:null, + arrDisabledList:[] } }, created() { - this.getProductList() - this.tableList = this.productTableList + if (!this.selectBox) { + this.getProductList() + } + this.getTableInfo() }, - computed: {}, watch: { - productTableList() { - this.tableList = this.productTableList + productTableList: { + handler() { + this.getTableInfo() + }, + immediate: true + }, + supplierId(n,o) { + this.editSelCommonConfig.supplierId=n + console.log(n,o,"鐪嬬湅閭�") + } , + 'tableList.tableData':function () { + this.arrDisabledList=this.disabledList.concat(this.tableList.tableData) } }, + computed: {}, methods: { + // 鑾峰彇row鐨刱ey鍊� + getRowKeys(row) { + let string; + string = row[this.productTableList.key?this.productTableList.key:this.productTableList.productId]; + return string; + }, + isDisabled(row){ + if (this.name == "rework") { + if (row.status == 1) { + return true; + } else { + return false; + } + }else { + return true; + } + }, + calculateDifference(row) { + if (row.notReceiveAmount !== null && row.nowReceiveAmount !== null) { + row.surplusReceiveAmount=row.notReceiveAmount - row.nowReceiveAmount; + return row.surplusReceiveAmount + } else { + return 0; + } + }, + toFiltering(event){ + this.$emit("toFiltering", event); + }, + getTableInfo() { + this.tableList = this.productTableList + this.arrDisabledList=this.disabledList.concat(this.tableList.tableData) + }, // 浜у搧鍚嶇О async getProductList() { let fn = this.sign == "purchase" ? getProductList : getProductListFromGrpc await fn({ - page: 1, - pageSize: 100 - }).then((res) => { - console.log(res.data) - if (res.data.code === 200) { - if (res.data.data.list && res.data.data.list.length > 0) { - this.productList = res.data.data.list + page: 1, + pageSize: 100, + }).then((res) => { + if (res.code === 200) { + if (res.data.list && res.data.list.length > 0) { + this.productList = res.data.list + this.tableProductLists = res.data.list } } }) @@ -253,6 +404,7 @@ handleReserve(row) { return row._id ? row._id : row.id }, + // 澶氶�� handleSelectionChange(val) { this.$emit("getSelectArray", val) }, @@ -282,9 +434,13 @@ sums[index] = "灏忚:" return } - const title = this.showSummary.titleProp + const title = ["#", "浜у搧鍚嶇О", "浜у搧缂栧彿", "鍗曚綅", "閿�鍞崟浠�", "鎴愭湰鍗曚环"] // 鍘婚櫎鏌愪簺涓嶉渶瑕佽绠楃殑鏁版嵁 if (title.includes(column.label)) { + sums[index] = "" + return + } + if (this.pageName == "quotation" && column.label == "姣涘埄") { sums[index] = "" return } @@ -311,7 +467,6 @@ }) return sums }, - // 鏁板瓧鎹㈣涓洪噾棰濇樉绀烘牸寮� number_format(number, decimals, dec_point, thousands_sep) { decimals = 2 //杩欓噷榛樿璁剧疆淇濈暀涓や綅灏忔暟锛屼篃鍙互娉ㄩ噴杩欏彞閲囩敤浼犲叆鐨勫弬鏁� @@ -342,16 +497,57 @@ }, // 鏂板 add() { - this.$emit("addProductClick") + if (this.addTypeIdMultiple) { + this.productIndex = this.tableList.tableData.length + this.editSelCommonConfig.title = "浜у搧鍚嶇О" + this.editSelCommonConfig.isSelectBox = true + this.editSelCommonConfig.editVisible = true + } else { + this.$emit("addProductClick") + } }, - commonInputChange(val, prop, row) { - console.log(val, prop) - console.log(row) - this.$emit("inputContent", val, prop, row) + commonInputChange(val, prop, row, scope) { + if (prop === "amount"||prop=='purchasePrice') { + this.tableList.tableData.map((ite) => { + if (ite.name === row.name) { + ite.total = row.amount * row.purchasePrice + } + }) + } + if (this.pageName == "quotation" && prop == "cost" && scope.row.cost) { + let value = scope.row.cost + let reg2 = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/ + if (!reg2.test(value) || value == 0) { + this.$message.error("鎴愭湰鍗曚环闇�瑕佸~鍐欏ぇ浜�0鐨�2浣嶅皬鏁帮紒") + return true + } + this.$forceUpdate() + } + if (this.pageName == "quotation") { + if (prop == "purchasePrice" || prop == "cost") { + if (scope.row.purchasePrice && scope.row.cost) { + let profit = Number(scope.row.purchasePrice) - Number(scope.row.cost) + scope.row.profit = profit + "" + let margin = ( + ((Number(scope.row.purchasePrice) - Number(scope.row.cost)) * 100) / + Number(scope.row.cost) + ).toFixed(2) + scope.row.margin = margin + "" + } + } + } + this.$emit("inputContent", val, prop, row, scope) }, // 娓呯┖ empty() { this.$emit("emptyProductClick") + }, + // 鍒犻櫎 + deleteClick(scope) { + this.tableList.tableData.splice(scope.$index, 1) + this.$forceUpdate() + this.$message.success("鍒犻櫎鎴愬姛锛�") + this.$emit("deleteClick", scope) }, // 閫夋嫨浜у搧鍚嶇О鐩稿叧鏂规硶 querySearchAsync(queryString, cb) { @@ -369,95 +565,78 @@ 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.productId = item.id ite.number = item.number ite.purchasePrice = item.purchasePrice + ite.price = item.purchasePrice + ite.total = item.amount ? item.amount * item.purchasePrice : 1 * 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) - } }, - 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) + // 鏂板 + selClientClick(scope) { this.productIndex = scope.$index this.editSelCommonConfig.title = "浜у搧鍚嶇О" + this.editSelCommonConfig.isSelectBox = true + this.editSelCommonConfig.editVisible = true + }, + // 缂栬緫 + handleEditClient(scope, prop) { + console.log(scope, prop) + this.productIndex = scope.$index + this.editSelCommonConfig.title = "浜у搧鍚嶇О" + this.editSelCommonConfig.isSelectBox = false this.editSelCommonConfig.editVisible = true }, selClient(item) { - console.log(item) - console.log(this.tableList.tableData) - if (this.detailEnter) { - this.tableList.tableData.map((ite) => { - ite.ID - ite.name = item.name - 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.setEditName(item, this.tableList.tableData[0].ID) - } else { + let list = this.tableList.tableData.map((item) => item.number) + if (list.findIndex((v) => v == item.number) == -1) { + // this.editConfig.infomation.client_name = row.name this.tableList.tableData.map((ite, index) => { if (index === this.productIndex) { ite.name = item.name - ite.productId = item.ID + ite.productId = item.id ite.amount = item.amount || 1 ite.number = item.number ite.purchasePrice = item.purchasePrice + ite.price = item.purchasePrice + ite.total = item.amount ? item.amount * item.purchasePrice : 1 * item.purchasePrice ite.unit = item.unit ite.deliveryTime = item.deliveryTime ite.shippingDuration = item.shippingDuration - this.$set(this.tableList.tableData, index, ite) - this.$forceUpdate() + // this.$set(this.tableList.tableData, index, ite) + // this.$forceUpdate() } }) - - console.log(this.tableList.tableData, "=====chanp") + } else { + this.$message.error("涓嶈兘閫夋嫨閲嶅鐨勪骇鍝侊紝 璇烽噸鏂伴�夋嫨") } }, + getSelectArray(val) { + let list = val.map((item) => { + let productId = item.id + this.$delete(item, "id") + return { + ...item, + productId: productId, + amount: 1, + price: item.purchasePrice, + total: 1 * item.purchasePrice + } + }) + this.$emit("getSelectArray", list, this.productIndex) + }, // 娓呴櫎宸查�夋嫨鐢ㄦ埛 - clearupClient(row, scope) { + clearupClient(scope) { this.productIndex = scope.$index this.tableList.tableData.map((ite, index) => { - 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 { + if (index === this.productIndex) { + ite.productId = "" ite.name = "" ite.amount = 1 ite.number = "" @@ -468,14 +647,18 @@ } }) this.$emit("clearupProduct", this.tableList.tableData) - }, - deleteClient(row, scope) { - if (this.tableList.tableData.length == 1) { - this.$message.error("鑷冲皯淇濈暀涓�鏉★紝涓嶈兘鍒櫎浜嗭紒") - return true - } - this.tableList.tableData.splice(scope.$index, 1) } + // 澶氶�夎缃凡閫変腑 + // toggleSelection(rows) { + // console.log("88888888888888888888888888888888888888888") + // console.log(rows) + // if (rows) { + // rows.forEach((row) => { + // this.$refs.fromTable.toggleRowSelection(row, true) + // console.log(row) + // }) + // } + // } } } </script> @@ -483,7 +666,6 @@ <!-- 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 { @@ -513,7 +695,8 @@ padding: 0 5px; } .el-input__inner { - text-align: left; + // text-align: left; + text-align: center !important; } } </style> -- Gitblit v1.8.0