| | |
| | | :header-cell-style="{ background: '#f1f3f8', color: '#000009' }" |
| | | :row-class-name="tableRowClassName" |
| | | @row-click="tableRowClick" |
| | | @selection-change="selectProductArray" |
| | | > |
| | | <el-table-column v-if="tableList.selectBox" type="selection" width="40" align="center"> </el-table-column> |
| | | <el-table-column v-if="tableList.selectBox" type="selection" width="40" |
| | | align="center"></el-table-column> |
| | | <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"> </el-table-column> |
| | | <el-table-column |
| | | v-for="(item, i) in tableList.tableColumn" |
| | |
| | | <!-- 表头样式 --> |
| | | <template slot="header"> |
| | | <span v-if="item.isRequird" style="color: #f56c6c">*</span> |
| | | <span>{{ item.label }}</span> |
| | | <span> |
| | | {{ item.label }} |
| | | <span></span> |
| | | <el-popover |
| | | placement="top" |
| | | width="240" |
| | | trigger="click" |
| | | v-if="item.isScanCode" |
| | | @show="startScanCode" |
| | | :popper-append-to-body="false" |
| | | > |
| | | <el-input placeholder="请输入条码" |
| | | v-model="scanCode" ref="input" |
| | | @keyup.enter.native="handlerEnter" |
| | | /> |
| | | <span class="scan-code" slot="reference"> |
| | | <img src="@/assets/saoma.png" width="20px"> |
| | | <span style="color:lawngreen">扫码</span> |
| | | </span> |
| | | </el-popover> |
| | | </span> |
| | | </template> |
| | | <!-- column样式 --> |
| | | <template slot-scope="scope"> |
| | |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]" |
| | | > |
| | | <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span> |
| | | <el-date-picker v-else v-model="scope.row[item.prop]" type="date" size="mini" style="width: 100%"> |
| | | <el-date-picker v-else v-model="scope.row[item.prop]" type="date" size="mini" |
| | | style="width: 100%"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item |
| | |
| | | @change=" |
| | | (val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | " |
| | | }" |
| | | ></el-input-number> |
| | | </div> |
| | | </el-form-item> |
| | |
| | | ></el-input-number> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item v-else-if="item.select" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <el-form-item v-else-if="item.select" label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <el-select |
| | | v-model="scope.row[item.prop]" |
| | |
| | | style="width: 63%" |
| | | @change="selCommonClick" |
| | | > |
| | | <el-option v-for="(item, index) in selOptions" :key="index" :label="item.name" :value="item"> |
| | | <el-option v-for="(item, index) in selOptions" :key="index" :label="item.name" |
| | | :value="item"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 位置 --> |
| | | <el-form-item v-else-if="item.location" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <el-form-item v-else-if="item.location" label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit || scope.row.editable">{{ |
| | | scope.row[item.prop]?.label ?? scope.row[item.prop] |
| | |
| | | style="width: 80%" |
| | | @change=" |
| | | (val) => { |
| | | selLocationClick(val, item.prop,scope.row) |
| | | selLocationClick(val, item.prop,scope.row,1) |
| | | } |
| | | " |
| | | > |
| | |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 产品到达位置 --> |
| | | <el-form-item v-else-if="item.toLocation" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <el-form-item v-else-if="item.toLocation" label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit || scope.row.editable">{{ |
| | | scope.row[item.prop]?.label ?? scope.row[item.prop] |
| | |
| | | style="width: 80%" |
| | | @change=" |
| | | (val) => { |
| | | selLocationClick(val, item.prop, scope.row) |
| | | selLocationClick(val, item.prop, scope.row,scope.$index) |
| | | } |
| | | " |
| | | > |
| | |
| | | v-for="(item, index) in selToLocationOptions" |
| | | :key="index" |
| | | :label="item.jointName" |
| | | :value="{ value: item.id, label: item.jointName }" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | |
| | | v-for="(item, index) in selSonLocationOptions" |
| | | :key="index" |
| | | :label="item.jointName" |
| | | :value="{ value: item.id, label: item.jointName }" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | |
| | | style="width: 80%" |
| | | @change=" |
| | | (val) => { |
| | | selLocationClick(val, item.prop, scope.row) |
| | | selLocationClick(val, item.prop, scope.row,3) |
| | | } |
| | | " |
| | | > |
| | | "> |
| | | <el-option |
| | | v-for="(ite, index) in selLocationOptions" |
| | | :key="index" |
| | | :label="ite.name" |
| | | :value="{ value: ite.id, label: ite.name }" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 产品 --> |
| | | <el-form-item v-else-if="item.product" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <el-form-item v-else-if="item.product" label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row.productName }}</span> |
| | | <template v-else> |
| | |
| | | @select-user=" |
| | | (val) => { |
| | | selProductClick(val, scope.row) |
| | | } |
| | | " |
| | | > |
| | | }"> |
| | | </SimpleSearchInput> |
| | | </template> |
| | | </div> |
| | |
| | | style="width: 100%" |
| | | v-model="scope.row.productCategory" |
| | | @focus="productTypeFocus" |
| | | :fetch-suggestions=" |
| | | (queryString, callback) => { |
| | | :fetch-suggestions="(queryString, callback) => { |
| | | querySearchAsync(queryString, callback, 'formLocation') |
| | | } |
| | | " |
| | | }" |
| | | value-key="name" |
| | | @select="handleSelectClient('formLocation', $event)" |
| | | ></el-autocomplete> |
| | |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 用户 --> |
| | | <el-form-item v-else-if="item.user" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <el-form-item v-else-if="item.user" label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span>{{ "管理员" }}</span> |
| | | <!-- <el-select |
| | |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 路线 --> |
| | | <el-form-item v-else-if="item.route" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <el-form-item v-else-if="item.route" label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit">{{ scope.row[item.prop]?.label ?? scope.row[item.prop] }}</span> |
| | | <el-select |
| | |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 公司 --> |
| | | <el-form-item v-else-if="item.company" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <el-form-item v-else-if="item.company" label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span> |
| | | <el-select v-else v-model="scope.row[item.prop]" placeholder="请选择" size="mini" style="width: 80%"> |
| | | <el-option v-for="(item, index) in companyOptions" :key="index" :label="item.name" :value="item"> |
| | | <el-select v-else v-model="scope.row[item.prop]" placeholder="请选择" size="mini" |
| | | style="width: 80%"> |
| | | <el-option v-for="(item, index) in companyOptions" :key="index" |
| | | :label="item.name" :value="item"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 备注 --> |
| | | <el-form-item v-else-if="item.editInput" label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span> |
| | | <el-input v-else v-model="scope.row[item.prop]" placeholder="请输入" size="mini" |
| | | style="width: 80%"></el-input> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 产品名称 --> |
| | | <span v-else>{{ scope.row[item.prop] }}</span> |
| | | </template> |
| | | <span v-else>{{ scope.row[item.prop] }}</span> |
| | |
| | | <div v-if="!detailEnter && !isinventory && !isReorder&&isOperateAdd" 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" @click="deleteItems">删除</el-button> |
| | | </div> |
| | | <!-- 产品名称 --> |
| | | <SelectCommonDialog |
| | |
| | | :selectBoxList="tableList.tableData" |
| | | :quotationNumber="quotationNumber" |
| | | @selClient="selClient" |
| | | @getSelectArray="getSelectArray" |
| | | /> |
| | | :warehouseId="warehouseId" |
| | | @getSelectArray="getSelectArray"/> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { getProductList } from "@/api/product/product" |
| | | import {getProductList, getProductDetailsByBarCodeApi} from "@/api/product/product" |
| | | import { getLocationList } from "@/api/warehouseManage/warehouse" |
| | | import { getCompanyList } from "@/api/common/other" |
| | | import { getRuleList} from "@/api/operate/inventoryAdjustment" |
| | |
| | | name: "CommmonFormTableView", |
| | | components: { SimpleSearchInput, SelectCommonDialog }, |
| | | props: { |
| | | warehouseId:{ |
| | | type:Number, |
| | | default:0 |
| | | }, |
| | | detailEnter: { |
| | | type: Boolean, |
| | | default: false |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | scanCode: '', |
| | | total: 0, |
| | | productList: [], |
| | | tableList: [], |
| | |
| | | this.getRuleList() |
| | | } else if (this.isReorder) { |
| | | this.getProductList() |
| | | this.getLocationList() |
| | | //this.getLocationList() |
| | | } else { |
| | | this.getProductList() |
| | | this.getProductCategoryList() |
| | | } |
| | | if (this.islistingrules) { |
| | | /*if (this.islistingrules) { |
| | | this.getToLocationList() |
| | | // this.getCompanyList() |
| | | } |
| | | }*/ |
| | | this.tableList = this.productTableList |
| | | }, |
| | | computed: {}, |
| | |
| | | productTableList() { |
| | | // this.showcol = this.productTableList.showcol |
| | | this.getTableInfo() |
| | | }, |
| | | scanCode: { |
| | | handler(newValue, oldValue) { |
| | | //1.输入不会触发,需要扫入条形码触发 |
| | | if (newValue&&(newValue.length - oldValue.length > 1)) { |
| | | const codeNum=this.scanCode; |
| | | this.scanCode=""; |
| | | this.queryProduct(codeNum); |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | deleteItems(){ |
| | | this.$emit('deleteItems'); |
| | | }, |
| | | selectProductArray(val){ |
| | | this.$emit('selectProductArray',val); |
| | | }, |
| | | handlerEnter() { |
| | | if (this.scanCode.length > 0) { |
| | | const codeNum=this.scanCode; |
| | | this.scanCode=""; |
| | | this.queryProduct(codeNum); |
| | | } |
| | | }, |
| | | async queryProduct(codeNum) { |
| | | const {code, data, msg} = await getProductDetailsByBarCodeApi(codeNum); |
| | | if (code === 200) { |
| | | this.$emit("getSelectArray", [data]); |
| | | this.$message.success(`扫码成功,${data.name}数量加1`); |
| | | } else { |
| | | this.$message.error(msg); |
| | | } |
| | | // this.scanCode = ""; |
| | | }, |
| | | startScanCode() { |
| | | this.$nextTick(() => { |
| | | this.$refs.input[0].focus(); |
| | | }); |
| | | }, |
| | | getTableInfo(){ |
| | | this.tableList = this.productTableList |
| | | if (this.tableList.tableData.length === 1 && this.tableList.tableData[0].name === "") { |
| | |
| | | pageSize: 15 |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | const list = res.data ? res.data : [] |
| | | this.productTypeNameOptions = list |
| | | const list = res.data ? res.data : []; |
| | | this.productTypeNameOptions = list; |
| | | this.tableList.tableData[this.tableList.rowClickIndex].productCategory = list[0].name |
| | | } |
| | | }) |
| | |
| | | if (value === "product") { |
| | | restaurants = this.productNameOptions |
| | | } else if (value === "productType") { |
| | | restaurants = this.productTypeNameOptions |
| | | restaurants = this.productTypeNameOptions; |
| | | } else if (value === "formLocation") { |
| | | restaurants = this.selLocationOptions |
| | | } |
| | |
| | | // 设置子位置/源位置 |
| | | async setLocationList(jointName, tag) { |
| | | if (tag === "fromLocation") { |
| | | await getLocationList({ |
| | | jointName: jointName, |
| | | /*await getLocationList({ |
| | | warehouseId: jointName, |
| | | page: 1, |
| | | pageSize: 100 |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | this.selSonLocationOptions = res.data |
| | | this.selSonLocationOptions = res.data; |
| | | } |
| | | }) |
| | | })*/ |
| | | this.selSonLocationOptions = jointName; |
| | | } else if (tag === "toLocation") { |
| | | await getLocationList({ |
| | | jointName: jointName, |
| | | /*await getLocationList({ |
| | | page: 1, |
| | | pageSize: 100 |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | this.selToLocationOptions = res.data |
| | | } |
| | | }) |
| | | })*/ |
| | | this.selToLocationOptions = jointName; |
| | | } else { |
| | | await getLocationList({ |
| | | jointName: jointName, |
| | | /*await getLocationList({ |
| | | warehouseId: jointName, |
| | | page: 1, |
| | | pageSize: 100 |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | this.selSonLocationOptions = res.data |
| | | this.selSonLocationOptions = res.data; |
| | | } |
| | | }) |
| | | })*/ |
| | | this.selSonLocationOptions = jointName; |
| | | } |
| | | }, |
| | | // 获取公司列表 |
| | |
| | | }) |
| | | }, |
| | | // 选择位置 |
| | | selLocationClick(item, prop, row) { |
| | | console.log("位置选择",item,row) |
| | | selLocationClick(item, prop, row,index) { |
| | | console.log("位置选择1", item,prop ,row); |
| | | if (prop === "areaName") { |
| | | getLocationList({ |
| | | jointName: item.label, |
| | |
| | | } |
| | | }) |
| | | } |
| | | this.$emit("selLocationClick", item, prop) |
| | | this.$emit("selLocationClick", item, prop,index); |
| | | }, |
| | | // 选择子位置 |
| | | selSonLocationClick(item,prop,row,scope) { |
| | |
| | | }, |
| | | // 获取在库与预测数量 |
| | | getAmountAndPrediction(item, val, ite) { |
| | | let selIndex = 0 |
| | | let selIndex = 0; |
| | | getAmountAndPrediction({ |
| | | locationId: val === "product" ? this.locacionId : ite.value, |
| | | productId: val === "product" ? item.id : this.productId |
| | |
| | | return row._id ? row._id : row.id |
| | | }, |
| | | handleSelectionChange(val) { |
| | | this.productIndex = this.tableList.tableData.length; |
| | | this.$emit("getSelectArray", val) |
| | | }, |
| | | |
| | |
| | | }, |
| | | // 新增 |
| | | add() { |
| | | if(this.warehouseId||this.$route.query.workType){ |
| | | if(this.$route.query.workType==3&&!this.warehouseId){ |
| | | this.$message.warning('请先选择调拨地址'); |
| | | return ; |
| | | } |
| | | if (this.addTypeIdMultiple) { |
| | | this.productIndex = this.tableList.tableData.length |
| | | this.editSelCommonConfig.title = "产品名称" |
| | |
| | | this.editSelCommonConfig.editVisible = true |
| | | } else { |
| | | this.$emit("addProductClick") |
| | | } |
| | | }else{ |
| | | this.$message.warning('请先选择仓库') |
| | | } |
| | | }, |
| | | commonInputChange(val, prop, row) { |
| | |
| | | }, |
| | | // 清除已选择用户 |
| | | clearupClient(scope) { |
| | | this.productIndex = scope.$index |
| | | this.productIndex = scope.$index; |
| | | this.tableList.tableData.map((ite, index) => { |
| | | if (index === this.productIndex) { |
| | | ite.productName = "" |
| | |
| | | setFormItem(val) { |
| | | console.log(val) |
| | | }, |
| | | commoInput() {}, |
| | | commoInput() { |
| | | }, |
| | | selClient(item) { |
| | | let list = this.tableList.tableData.map((item) => item.id) |
| | | if (list.findIndex((v) => v == item.id) == -1) { |
| | |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .scan-code { |
| | | cursor: pointer; |
| | | margin-left: 10px; |
| | | img, span { |
| | | position: relative; |
| | | } |
| | | img { |
| | | top: 5px; |
| | | } |
| | | span: { |
| | | top: -10px; |
| | | } |
| | | } |
| | | |
| | | .setHeight { |
| | | height: 100%; |
| | | } |
| | | |
| | | .page-view { |
| | | min-width: 100px; |
| | | |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep { |
| | | .el-autocomplete { |
| | | height: 28px; |
| | |
| | | font-family: PingFangSC-Medium, sans-serif; |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-table .el-table__cell { |
| | | padding: 6px 0 !important; |
| | | height: 35px; |
| | | text-align: center; |
| | | } |
| | | |
| | | ::v-deep .el-table__body-wrapper { |
| | | height: unset !important; |
| | | } |