| | |
| | | <template> |
| | | <div class="page-view" :class="{ setHeight: isinventory || islistingrules }"> |
| | | <div class="page-view" :class="{ setHeight: isinventory || islistingrules || isReorder }"> |
| | | <el-form |
| | | ref="form" |
| | | :model="tableList" |
| | | :show-message="false" |
| | | label-position="right" |
| | | :class="{ setHeight: isinventory || islistingrules }" |
| | | :class="{ setHeight: isinventory || islistingrules || isReorder }" |
| | | > |
| | | <el-table |
| | | :data="tableList.tableData" |
| | | border |
| | | style="width: 100%" |
| | | :height="'calc(100% - 0px)'" |
| | | :class="{ setHeight: isinventory || islistingrules }" |
| | | :class="{ setHeight: isinventory || islistingrules || isReorder }" |
| | | :header-cell-style="{ background: '#f1f3f8', color: '#000009' }" |
| | | :row-class-name="tableRowClassName" |
| | | @row-click="tableRowClick" |
| | |
| | | :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> |
| | | <div @click.stop="commoInput"> |
| | | <el-input |
| | | v-model.trim="scope.row[item.prop]" |
| | | maxlength="50" |
| | | size="mini" |
| | | @change=" |
| | | (val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | " |
| | | ></el-input> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item |
| | | v-else-if="item.productName" |
| | |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | > |
| | | <div class="custom-name"> |
| | | <el-select |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 80%" |
| | | @change=" |
| | | (val) => { |
| | | selProductNameClick(val) |
| | | } |
| | | " |
| | | <SimpleSearchInput |
| | | :echoValue="scope.row[item.prop]" |
| | | :echoName="scope.row[item.prop]" |
| | | checkedNum="1" |
| | | :clearable="true" |
| | | @select-user="selProductNameClick" |
| | | > |
| | | <el-option |
| | | v-for="item in productNameOptions" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="{ value: item.id, label: item.name, amount: item.amount, unit: item.unit }" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </SimpleSearchInput> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item |
| | |
| | | :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> |
| | | <div @click.stop="commoInput"> |
| | | <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> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item |
| | | v-else-if="item.inputFloat" |
| | |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]" |
| | | > |
| | | <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span> |
| | | <el-input-number |
| | | v-else |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="" |
| | | :precision="2" |
| | | :controls="false" |
| | | size="mini" |
| | | style="width: 100%; margin-right: 5px" |
| | | @change=" |
| | | (val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | " |
| | | ></el-input-number> |
| | | <div v-else @click.stop="commoInput"> |
| | | <el-input-number |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="" |
| | | :precision="2" |
| | | :controls="false" |
| | | size="mini" |
| | | style="width: 100%; margin-right: 5px" |
| | | @change=" |
| | | (val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | " |
| | | ></el-input-number> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item v-else-if="item.select" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | |
| | | style="width: 63%" |
| | | @change="selCommonClick" |
| | | > |
| | | <el-option v-for="item in selOptions" :key="item.id" :label="item.name" :value="item"> </el-option> |
| | | <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"> |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row[item.prop].label }}</span> |
| | | <span v-if="scope.row.isEdit || scope.row.editable">{{ |
| | | scope.row[item.prop]?.label ?? scope.row[item.prop] |
| | | }}</span> |
| | | <el-select |
| | | v-else |
| | | v-model="scope.row[item.prop]" |
| | |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 重订货规则-位置 --> |
| | | <el-form-item |
| | | v-else-if="item.defaultLocation" |
| | | label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | > |
| | | <div class="custom-name"> |
| | | <el-select |
| | | v-if="!scope.row.isEdit && scope.row.isOrder" |
| | | v-model="locacionName" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 80%" |
| | | @change=" |
| | | (val) => { |
| | | selLocationClick(val, item.prop, scope.row) |
| | | } |
| | | " |
| | | > |
| | | <el-option |
| | | v-for="(ite, index) in selLocationOptions" |
| | | :key="index" |
| | | :label="ite.name" |
| | | :value="{ value: ite.id, label: ite.name }" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <span v-else-if="scope.row.isEdit || scope.row.editable">{{ |
| | | scope.row[item.prop]?.label ?? scope.row[item.prop] |
| | | }}</span> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 产品 --> |
| | | <el-form-item v-else-if="item.product" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | |
| | | " |
| | | > |
| | | <el-option |
| | | v-for="item in productNameOptions" |
| | | :key="item.id" |
| | | v-for="(item, index) in productNameOptions" |
| | | :key="index" |
| | | :label="item.name" |
| | | :value="{ |
| | | value: item.id, |
| | |
| | | unit: item.unit, |
| | | categoryId: item.categoryId, |
| | | categoryName: item.categoryName |
| | | }" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 产品类型 --> |
| | | <el-form-item |
| | | v-else-if="item.productType" |
| | | label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | > |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row[item.prop] }}</span> |
| | | <el-select |
| | | v-else |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 80%" |
| | | @change=" |
| | | (val) => { |
| | | selProductTypeClick(val) |
| | | } |
| | | " |
| | | > |
| | | <el-option |
| | | v-for="item in productTypeNameOptions" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="{ |
| | | value: item.id, |
| | | label: item.name |
| | | }" |
| | | > |
| | | </el-option> |
| | |
| | | </el-select> --> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 路线 --> |
| | | <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 |
| | | v-else |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 80%" |
| | | @change=" |
| | | (val) => { |
| | | selRouteClick(val, item.prop) |
| | | } |
| | | " |
| | | > |
| | | <el-option |
| | | v-for="(item, index) in selRouteOptions" |
| | | :key="index" |
| | | :label="item.name" |
| | | :value="{ value: item.id, label: item.name }" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 公司 --> |
| | | <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 in companyOptions" :key="item.id" :label="item.name" :value="item"> |
| | | <el-option v-for="(item, index) in companyOptions" :key="index" :label="item.name" :value="item"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | |
| | | <slot name="tableButton" /> |
| | | </el-table> |
| | | </el-form> |
| | | <div v-if="!detailEnter && !isinventory && !islistingrules" style="margin: 10px"> |
| | | <div v-if="!detailEnter && !isinventory && !islistingrules && !isReorder" style="margin: 10px"> |
| | | <el-button size="small" type="primary" @click="add">添加明细行</el-button> |
| | | <!-- <el-button size="small" type="primary" @click="empty">清空</el-button> --> |
| | | </div> |
| | |
| | | import { getLocationList } from "@/api/warehouseManage/warehouse" |
| | | import { getCompanyList } from "@/api/common/other" |
| | | import { getRuleList } from "@/api/operate/inventoryAdjustment" |
| | | import { getProductCategoryList } from "@/api/product/productCategory" |
| | | import SimpleSearchInput from "@/components/makepager/SimpleSearchInput" |
| | | import { getAmountAndPrediction } from "@/api/product/reorderRules" |
| | | // import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog" |
| | | export default { |
| | | name: "CommmonFormTableView", |
| | | components: {}, |
| | | components: { SimpleSearchInput }, |
| | | props: { |
| | | detailEnter: { |
| | | type: Boolean, |
| | |
| | | islistingrules: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | isReorder: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | }, |
| | | productIndex: 0, |
| | | productNameOptions: [], |
| | | productTypeNameOptions: [], |
| | | memberOptions: [{ id: 1, name: "管理员" }], |
| | | selOptions: [ |
| | | { id: 1, name: "件" }, |
| | | { id: 2, name: "打" } |
| | | ], |
| | | selLocationOptions: [], // 位置 |
| | | companyOptions: [] // 公司 |
| | | companyOptions: [], // 公司 |
| | | selRouteOptions: [{ id: 1, name: "制造" }], // 路线 |
| | | locacionName: "", |
| | | locacionId: 0, |
| | | productName: "", |
| | | productId: "" |
| | | } |
| | | }, |
| | | created() { |
| | | if (this.isinventory) { |
| | | this.getRuleList() |
| | | } else if (this.isReorder) { |
| | | this.getProductList() |
| | | this.getLocationList() |
| | | } else { |
| | | this.getProductList() |
| | | this.getProductCategoryList() |
| | | } |
| | | if (this.islistingrules) { |
| | | this.getLocationList() |
| | |
| | | } |
| | | }) |
| | | }, |
| | | // 获取产品类型列表 |
| | | async getProductCategoryList() { |
| | | await getProductCategoryList({ |
| | | categoryId: 0, |
| | | keyWord: "", |
| | | page: 1, |
| | | pageSize: 15 |
| | | }).then((res) => { |
| | | console.log(res, "看看产品类型列表") |
| | | if (res.code === 200) { |
| | | const list = res.data ? res.data : [] |
| | | this.productTypeNameOptions = list |
| | | } |
| | | }) |
| | | }, |
| | | // 位置 |
| | | async getLocationList() { |
| | | await getLocationList({ |
| | |
| | | if (res.code === 200) { |
| | | const list = res.data ? res.data : [] |
| | | this.selLocationOptions = list |
| | | if (this.isReorder) { |
| | | this.locacionName = list[0]?.name |
| | | this.locacionId = list[0]?.id |
| | | this.$emit("selLocationClick", list[0], "locacionName") |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | |
| | | async getCompanyList() { |
| | | await getCompanyList().then((res) => { |
| | | console.log(res) |
| | | if (res.data.code === 200) { |
| | | this.companyOptions = res.data.data |
| | | if (res.code === 200) { |
| | | this.companyOptions = res.data |
| | | } |
| | | }) |
| | | }, |
| | | selProductNameClick(item) { |
| | | console.log(item) |
| | | this.tableList.tableData.map((ite) => { |
| | | if (ite.productName.label === item.label) { |
| | | ite.productId = item.value |
| | | ite.productName = item.label |
| | | ite.amount = item.amount |
| | | ite.unit = item.unit |
| | | } |
| | | console.log(ite) |
| | | // if (ite.productName === item.name) { |
| | | ite.productId = item.id |
| | | ite.productName = item.name |
| | | ite.amount = item.amount |
| | | ite.unit = item.unit |
| | | // } |
| | | }) |
| | | console.log(this.tableList.tableData) |
| | | }, |
| | | // 选择产品 |
| | | selProductClick(item) { |
| | | console.log(item) |
| | | this.tableList.tableData.map((ite) => { |
| | | if (ite.productName.label === item.label) { |
| | | ite.productId = item.value |
| | | ite.productName = item.label |
| | | ite.categoryId = item.categoryId |
| | | ite.productCategory = item.categoryName |
| | | ite.amount = item.amount |
| | | ite.unit = item.unit |
| | | } |
| | | }) |
| | | if (this.isReorder) { |
| | | this.productId = item.value |
| | | this.productName = item.label |
| | | this.getAmountAndPrediction(item, "product") |
| | | } else { |
| | | this.tableList.tableData.map((ite) => { |
| | | if (ite.productName.label === item.label) { |
| | | ite.productId = item.value |
| | | ite.productName = item.label |
| | | ite.categoryId = item.categoryId |
| | | ite.productCategory = item.categoryName |
| | | ite.amount = item.amount |
| | | ite.unit = item.unit |
| | | } |
| | | }) |
| | | } |
| | | |
| | | if (this.isinventory) { |
| | | getRuleList({ |
| | | locationId: 0, |
| | |
| | | console.log(this.tableList.tableData) |
| | | this.$emit("selProductClick", item) |
| | | }, |
| | | // 选择产品类型 |
| | | selProductTypeClick(item) { |
| | | this.tableList.tableData.map((ite) => { |
| | | if (ite.productCategory.label === item.label) { |
| | | ite.productCategoryId = item.value |
| | | ite.productCategory = item.label |
| | | } |
| | | }) |
| | | if (this.isinventory) { |
| | | this.getProductCategoryList() |
| | | } |
| | | this.$emit("selProductTypeClick", item) |
| | | }, |
| | | // 选择位置 |
| | | selLocationClick(item, prop) { |
| | | console.log(item) |
| | | console.log(this.tableList.tableData) |
| | | selLocationClick(item, prop, row) { |
| | | if (this.isReorder) { |
| | | if (this.productId !== 0) { |
| | | this.getAmountAndPrediction(row, "location", item) |
| | | } |
| | | } |
| | | if (this.isinventory) { |
| | | getRuleList({ |
| | | locationId: item.value, |
| | |
| | | console.log(res) |
| | | if (res.code === 200) { |
| | | const list = res.data ? res.data : [] |
| | | // this.selLocationOptions = list.locationList |
| | | this.productNameOptions = list.productList |
| | | } |
| | | }) |
| | | } |
| | | this.$emit("selLocationClick", item, prop) |
| | | }, |
| | | // 获取在库与预测数量 |
| | | getAmountAndPrediction(item, val, ite) { |
| | | console.log(item, val, ite) |
| | | console.log(this.productName) |
| | | console.log(this.tableList.tableData) |
| | | if (this.productName.length > 0) { |
| | | getAmountAndPrediction({ |
| | | locationId: val === "product" ? this.locacionId : ite.value, |
| | | productId: val === "product" ? item.value : this.productId |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | this.tableList.tableData.map((ite) => { |
| | | if (ite.productName.label === this.productName) { |
| | | ite.amount = res.data.amount |
| | | ite.prediction = res.data.prediction |
| | | ite.unit = item.unit |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | // 选择路线 |
| | | selRouteClick(item, prop) { |
| | | console.log("33333333333333") |
| | | this.$emit("selRouteClick", item, prop) |
| | | }, |
| | | // 选择单位/用户 |
| | | selCommonClick(item) { |
| | |
| | | // 单选行相关 |
| | | tableRowClassName({ row, rowIndex }) { |
| | | row.index = rowIndex |
| | | } |
| | | }, |
| | | setFormItem(val) { |
| | | console.log(val) |
| | | }, |
| | | commoInput() {} |
| | | } |
| | | } |
| | | </script> |