From 50b1b07bfa382c3f19c6b23f1cff4dfa50294f07 Mon Sep 17 00:00:00 2001
From: 石广澎 <shiguangpeng@163.com>
Date: 星期四, 30 十一月 2023 10:58:38 +0800
Subject: [PATCH] feat: 库存管理 增加加载状态
---
admin-web/src/views/stock/accessStock/outbound/edit.vue | 197 ++++++++++++++++++++++++------------------------
1 files changed, 99 insertions(+), 98 deletions(-)
diff --git a/admin-web/src/views/stock/accessStock/outbound/edit.vue b/admin-web/src/views/stock/accessStock/outbound/edit.vue
index fce80a0..e7d1cd4 100644
--- a/admin-web/src/views/stock/accessStock/outbound/edit.vue
+++ b/admin-web/src/views/stock/accessStock/outbound/edit.vue
@@ -1,12 +1,17 @@
<template>
- <win-md class="stock-edit" :title="`${setting.title}鍑哄簱鍑哄簱`" @close="close" :width="'800px'">
- <el-form class="form" ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
+ <win-md class="stock-edit" :title="`${setting.title}鍑哄簱`" @close="close" :width="'800px'">
+ <el-form v-loading="loading" class="form" ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
<div class="main-w">
<el-row :gutter="24" class="headerHeight">
<el-col :span="12">
<el-form-item label="鍑哄簱浠撳簱" prop="warehouseId">
<el-select v-model="formData.warehouseId" placeholder="璇烽�夋嫨" style="width: 100%">
- <el-option v-for="item in warehouseOptions" :key="item.id" :label="item.warehouseName" :value="item.id" />
+ <el-option
+ v-for="item in warehouseOptions"
+ :key="item.id"
+ :label="item.warehouseName"
+ :value="item.id"
+ />
</el-select>
</el-form-item>
</el-col>
@@ -56,11 +61,7 @@
<el-form-item
label="鐗╁搧鍚嶇О"
:prop="`goods[${goodsIndex}].baseGoodsTemplateId`"
- :rules="{
- required: true,
- message: '璇烽�夋嫨',
- trigger: 'change',
- }"
+ :rules="rules.baseGoodsTemplateId"
>
<el-select
v-model="goodsItem.baseGoodsTemplateId"
@@ -122,17 +123,24 @@
</template>
</el-table-column>
<el-table-column prop="price" label="鐜版湁搴撳瓨" align="center">
- <template slot-scope="scope">{{ }}
+ <template slot-scope="scope">
{{ scope.row.worehouseCount }}
</template>
</el-table-column>
<el-table-column prop="counts" label="鍑哄簱鏁伴噺" align="center">
<template slot-scope="scope">
- <el-input
- type="number"
- v-model="scope.row.counts"
- @change="countsChange($event, goodsIndex,scope.$index)"
- ></el-input>
+ <el-form-item
+ label-width="0"
+ style="margin-bottom: 0"
+ :prop="`goods[${goodsIndex}].models[${scope.$index}].counts`"
+ :rules="rules.counts"
+ >
+ <el-input
+ type="number"
+ v-model="scope.row.counts"
+ @change="countsChange($event, goodsIndex, scope.$index)"
+ ></el-input>
+ </el-form-item>
</template>
</el-table-column>
</el-table>
@@ -161,27 +169,19 @@
</el-form>
<div slot="footer" align="center" class="dialog-footer">
<my-button name="鍙栨秷" site="form" @click="close" />
- <my-button name="淇濆瓨" site="form" @click="handleSubmit" />
+ <el-button name="淇濆瓨" type="primary" size="medium" :loading="btnloading" @click="handleSubmit">淇濆瓨</el-button>
</div>
</win-md>
</template>
<script>
-import {
- goodsTemplate,
- goodsModel,
- selectTenantWarehouse,
-} from '@/api/baseSetting/finsystenant';
-import {
- outputAdd,
- outputSelectNumber
-} from '@/api/stock/accessStock';
-import { getTree } from '@/api/foudation/classification';
+import {goodsModel, goodsTemplate, selectTenantWarehouse, warehouseSelectNumber,} from '@/api/baseSetting/finsystenant';
+import {outputAdd} from '@/api/stock/accessStock';
+import {getTree} from '@/api/foudation/classification';
import MyButton from '@/components/myButton/myButton';
import winMd from '@/components/win/win-md';
import upload from '@/components/upload/index';
-import { getUploadUrl } from '@/utils/base';
-
-import SettingIplatform from '../../../../../public/static/config';
+import {getUploadUrl} from '@/utils/base';
+import {mapGetters} from 'vuex';
export default {
components: { MyButton, winMd, upload },
@@ -192,8 +192,21 @@
},
},
data() {
+ // 鑷畾涔夋牎楠�
+ // 鐗╁搧閲嶅鏍￠獙
+ var checkGoodsTemplateId = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error('璇烽�夋嫨'));
+ }
+ let temp = this.formData.goods.filter((v) => v.baseGoodsTemplateId == value);
+ if (!temp || temp.length != 1) {
+ return callback(new Error('宸查�夎繃姝ょ墿鍝�'));
+ }
+ callback();
+ };
return {
- loading: false,
+ loading: true,
+ btnloading: false,
warehouseOptions: [], // 鍑哄簱浠撳簱鍒楄〃
categoryOptions: [], // 鐗╁搧鍒嗙被鍒楄〃
modelList: [], //鍨嬪彿鍒楄〃
@@ -216,7 +229,7 @@
modelsItem: {
baseGoodsModelsId: '', // 瑙勬牸鍨嬪彿缂栧彿
worehouseCount: 0,
- counts: 0, // 鎿嶄綔鏁伴噺
+ counts: null, // 鎿嶄綔鏁伴噺
unit: null, //鍗曚綅
},
rules: {
@@ -224,10 +237,10 @@
dealTime: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' }],
buyType: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' }],
- procureDoc: [{ required: true, message: '璇蜂笂浼�', trigger: 'change' }],
baseCategoryIds: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' }],
- baseGoodsTemplateId: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' }],
+ baseGoodsTemplateId: [{ validator: checkGoodsTemplateId, trigger: ['blur', 'change'] }],
modelsIds: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' }],
+ counts: [{ required: true, message: '璇疯緭鍏�', trigger: 'change' }],
},
uploadSettings: {
@@ -243,25 +256,31 @@
},
};
},
+ computed: {
+ ...mapGetters(['userInfo']),
+ },
created() {
this.init();
},
methods: {
async init() {
- this.getWarehouseList();
- this.getgoodsTemplate();
- this.getgoodsModel();
+ await this.getWarehouseList();
+ await this.getgoodsTemplate();
+ await this.getgoodsModel();
// 鑾峰彇鐗╁搧鍒嗙被鍒楄〃
const treeRes = await getTree();
this.categoryOptions = this.removeEmptyChildren(treeRes);
- this.formData.goods.push(JSON.parse(JSON.stringify(this.goodsItem)));
+ this.loading = false
},
// 鑾峰彇鍑哄簱浠撳簱鍒楄〃
- getWarehouseList() {
- selectTenantWarehouse()
+ async getWarehouseList() {
+ await selectTenantWarehouse({ agencyId: this.userInfo.tenantId })
.then((res) => {
this.warehouseOptions = res;
+ if (res.length) {
+ this.formData.goods.push(JSON.parse(JSON.stringify(this.goodsItem)));
+ }
if (this.warehouseOptions.length && !this.formData.warehouseId) {
// 榛樿閫変腑绗竴涓粨搴�
this.formData.warehouseId = this.warehouseOptions[0].id;
@@ -284,8 +303,8 @@
},
// 鑾峰彇鐗╁搧鍚嶇О鍒楄〃
- getgoodsTemplate(id, index) {
- goodsTemplate({ categoryId: id || '' }).then((res) => {
+ async getgoodsTemplate(id, index) {
+ await goodsTemplate({ categoryId: id || '' }).then((res) => {
if (index || index == 0) {
this.$set(this.formData.goods[index], 'goodsOptions', res);
} else {
@@ -295,8 +314,8 @@
},
// 瑙勬牸鍨嬪彿
- getgoodsModel(id, index) {
- goodsModel({ goodsTemplatesId: id || '' }).then((res) => {
+ async getgoodsModel(id, index) {
+ await goodsModel({ goodsTemplatesId: id || '' }).then((res) => {
if (index || index == 0) {
this.$set(this.formData.goods[index], 'modelsOptions', res);
} else {
@@ -337,7 +356,7 @@
this.getgoodsTemplate(e[e.length - 1], index);
},
- // 鐗╁搧鍚嶇О鍒楄〃
+ // 鐗╁搧鍚嶇О鍒楄〃閫夋嫨
goodsTemplateChange(e, index) {
this.formData.goods[index].modelsOptions = [];
this.formData.goods[index].modelsIds = [];
@@ -352,12 +371,18 @@
async modelChange(e, index) {
let arr = [...this.formData.goods[index].models];
let str = JSON.stringify(arr);
- for(let item of e) {
+ for (let item of e) {
if (str.indexOf(item) == -1) {
let temp = this.goodsModelAll.find((v) => v.id == item);
// 鑾峰彇搴撳瓨
- let num = await outputSelectNumber({warehouseId:this.formData.warehouseId,baseGoodsModelsId:item})
- arr.push({ ...this.modelsItem, baseGoodsModelsId: item, unit: temp.unit,worehouseCount: num});
+ let num = await warehouseSelectNumber({
+ warehouseId: this.formData.warehouseId,
+ baseGoodsModelsId: item,
+ warehouseType: 0,
+ states: 1,
+ buyType: null,
+ });
+ arr.push({ ...this.modelsItem, baseGoodsModelsId: item, unit: temp.unit, worehouseCount: num });
}
}
this.formData.goods[index].models = arr;
@@ -372,8 +397,8 @@
// 涓婁紶
uploadChange() {
- let arr = this.$refs.uploadRef.fileList
- this.formData.procureDoc = JSON.stringify(arr)
+ let arr = this.$refs.uploadRef.fileList;
+ this.formData.procureDoc = JSON.stringify(arr);
},
// 鐐瑰嚮鏂板鐗╁搧
@@ -387,12 +412,16 @@
},
// 鍑哄簱鏁伴噺鏍￠獙
- countsChange(e, goodsIndex,index) {
- const curItem = this.formData.goods[goodsIndex].models[index]
- const worehouseCount = curItem.worehouseCount
+ countsChange(e, goodsIndex, index) {
+ const curItem = this.formData.goods[goodsIndex].models[index];
+ const worehouseCount = curItem.worehouseCount;
+ if (e == 0) {
+ this.$message.warning('鏁伴涓嶈兘涓�0');
+ curItem.counts = null;
+ }
if (e > worehouseCount) {
this.$message.warning('鏁伴瓒呰繃鐜版湁搴撳瓨');
- curItem.counts = worehouseCount
+ curItem.counts = worehouseCount > 0 ? worehouseCount : null;
}
},
@@ -400,19 +429,27 @@
handleSubmit() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
+ if (this.loading) return
+ this.loading = true;
+ this.btnloading = true;
console.log('this.formData', this.formData);
- outputAdd(this.formData)
- .then((res) => {
- this.$message.success('淇濆瓨鎴愬姛锛�');
- this.close();
- this.$emit('search');
- })
- .catch((err) => {
- console.log('edit err', err);
- this.$message.error('淇濆瓨澶辫触');
- });
+ outputAdd(this.formData)
+ .then((res) => {
+ this.$message.success('淇濆瓨鎴愬姛锛�');
+ this.btnloading = false;
+ this.loading = false;
+ this.close();
+ this.$emit('search');
+ })
+ .catch((err) => {
+ console.log('edit err', err);
+ this.btnloading = false;
+ this.loading = false;
+ this.$message.error('淇濆瓨澶辫触');
+ });
} else {
this.$message.error('鏍￠獙鏈�氳繃锛岃妫�鏌ャ��');
+ this.btnloading = false;
}
});
},
@@ -424,42 +461,6 @@
goods: [],
};
this.$emit('close');
- },
-
- // 閫氳繃瀛愰泦id鏌ュ埌鎵�浠ョ浉鍏崇埗绾d骞惰繑鍥炴暟缁�
- findParentIds(dataSource, nodeId) {
- const parentIds = []; // 鐢ㄤ簬瀛樺偍鎵�鏈夌埗鑺傜偣ID鐨勬暟缁�
-
- // 瀹氫箟涓�涓�掑綊鍑芥暟锛岀敤浜庨亶鍘嗘暣妫垫爲骞舵煡鎵惧瓙鑺傜偣鐨勬墍鏈夌埗鑺傜偣
- function traverse(node, nodeId) {
- if (node.id === nodeId) {
- // 濡傛灉褰撳墠鑺傜偣鐨処D绛変簬瀛愯妭鐐圭殑ID锛屽垯琛ㄧず宸茬粡鎵惧埌浜嗗瓙鑺傜偣锛屽彲浠ュ紑濮嬪悜涓婃煡鎵剧埗鑺傜偣
- return true; // 杩斿洖true琛ㄧず宸茬粡鎵惧埌浜嗗瓙鑺傜偣
- }
-
- if (node.children) {
- // 濡傛灉褰撳墠鑺傜偣鏈夊瓙鑺傜偣锛屽垯缁х画閬嶅巻瀛愯妭鐐�
- for (const childNode of node.children) {
- if (traverse(childNode, nodeId)) {
- // 濡傛灉鍦ㄥ瓙鑺傜偣涓壘鍒颁簡瀛愯妭鐐圭殑鐖惰妭鐐癸紝鍒欏皢褰撳墠鑺傜偣鐨処D娣诲姞鍒扮埗鑺傜偣ID鏁扮粍涓紝骞惰繑鍥瀟rue琛ㄧず宸茬粡鎵惧埌浜嗗瓙鑺傜偣
- parentIds.push(node.id);
- return true;
- }
- }
- }
-
- return false; // 濡傛灉褰撳墠鑺傜偣涓嶆槸瀛愯妭鐐圭殑鐖惰妭鐐癸紝鍒欒繑鍥瀎alse
- }
-
- // 浠庢牴鑺傜偣寮�濮嬮亶鍘嗘暣妫垫爲锛屽苟璋冪敤閫掑綊鍑芥暟鏌ユ壘瀛愯妭鐐圭殑鎵�鏈夌埗鑺傜偣
- for (const node of dataSource) {
- if (traverse(node, nodeId)) {
- // 濡傛灉鍦ㄥ綋鍓嶈妭鐐圭殑瀛愭爲涓壘鍒颁簡瀛愯妭鐐圭殑鐖惰妭鐐癸紝鍒欑洿鎺ラ��鍑哄惊鐜�
- break;
- }
- }
-
- return parentIds; // 杩斿洖鎵�鏈夌埗鑺傜偣ID鐨勬暟缁�
},
},
};
--
Gitblit v1.9.1