mt-fe-group/pms-aomei
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update btnLoading

Browse Source
This commit is contained in:
lb 2023-03-03 16:52:19 +08:00
parent 29afed30aa
commit 00016a948b
2 changed files with 57 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/DialogWithMenu.vue
View File

@ -140,7 +140,6 @@
class="" class=""
style="text-align: left" style="text-align: left"
background background
hide-on-single-page
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handlePageChange" @current-change="handlePageChange"
:current-page.sync="attrPage" :current-page.sync="attrPage"
@ -198,9 +197,14 @@
<!-- footer --> <!-- footer -->
<div slot="footer"> <div slot="footer">
<template v-for="(operate, index) in configs.form.operations"> <template v-for="(operate, index) in configs.form.operations">
<el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{ <el-button
operate.label v-if="showButton(operate)"
}}</el-button> :key="'operation_' + index"
:type="operate.type"
@click="handleBtnClick(operate)"
:loading="(operate.name === 'add' || operate.name === 'update') && btnLoading"
>{{ operate.label }}</el-button
>
</template> </template>
<el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button> <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
</div> </div>
@ -324,6 +328,7 @@ export default {
return { return {
// configs, // configs,
btnLoading: false,
loadingStatus: false, loadingStatus: false,
activeMenu: this.configs.menu[0].name, activeMenu: this.configs.menu[0].name,
dataForm, dataForm,
@ -366,6 +371,14 @@ export default {
currentImgUrl: "", currentImgUrl: "",
}; };
}, },
watch: {
dialogVisible: function (val) {
if (!!val) {
this.attrPage = 1
this.attrSize = 5
}
},
},
computed: { computed: {
actualMenus() { actualMenus() {
return this.configs.menu.filter((m) => { return this.configs.menu.filter((m) => {
@ -502,7 +515,7 @@ export default {
}); });
} else { } else {
// 如果不是编辑 // 如果不是编辑
this.updateOptions() this.updateOptions();
} }
}); });
}, },
@ -683,6 +696,7 @@ export default {
this.$refs.dataForm[0].validate((passed, result) => { this.$refs.dataForm[0].validate((passed, result) => {
if (passed) { if (passed) {
// 如果通过验证 // 如果通过验证
this.btnLoading = true
this.loadingStatus = true; this.loadingStatus = true;
const method = payload.name === "add" ? "POST" : "PUT"; const method = payload.name === "add" ? "POST" : "PUT";
@ -712,11 +726,12 @@ export default {
}, },
}) })
.then(({ data: res }) => { .then(({ data: res }) => {
this.btnLoading = true
this.loadingStatus = false;
console.log("[add&update] res is: ", res); console.log("[add&update] res is: ", res);
if (res.code === 0) { if (res.code === 0) {
this.$message.success(payload.name === "add" ? "添加成功" : "更新成功"); this.$message.success(payload.name === "add" ? "添加成功" : "更新成功");
this.$emit("refreshDataList"); this.$emit("refreshDataList");
this.loadingStatus = false;
// 如果 watingToRefreshQueue 队列里有数据 // 如果 watingToRefreshQueue 队列里有数据
// if (this.watingToRefreshQueue.length) { // if (this.watingToRefreshQueue.length) {
@ -746,7 +761,6 @@ export default {
type: "error", type: "error",
duration: 2000, duration: 2000,
}); });
this.loadingStatus = false;
} }
}) })
.catch((errMsg) => { .catch((errMsg) => {
@ -774,6 +788,7 @@ export default {
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.attrPage = 1; this.attrPage = 1;
this.attrSize = val
this.getSubList(1, val); this.getSubList(1, val);
}, },

58
src/components/SmallDialog.vue
View File

@ -48,9 +48,14 @@
<!-- footer --> <!-- footer -->
<div slot="footer"> <div slot="footer">
<template v-for="(operate, index) in configs.operations"> <template v-for="(operate, index) in configs.operations">
<el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{ <el-button
operate.label v-if="showButton(operate)"
}}</el-button> :key="'operation_' + index"
:type="operate.type"
@click="handleBtnClick(operate)"
:loading="(operate.name === 'add' || operate.name === 'update') && btnLoading"
>{{ operate.label }}</el-button
>
</template> </template>
<el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button> <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
</div> </div>
@ -100,6 +105,7 @@ export default {
}); });
return { return {
btnLoading: false,
visible: false, visible: false,
detailMode: false, detailMode: false,
dataForm, dataForm,
@ -167,28 +173,34 @@ export default {
break; break;
case "add": case "add":
case "update": { case "update": {
console.log("update extraParam: ", this.configs.extraParam); this.$refs.dataForm.validate((passed, result) => {
const method = payload.name === "add" ? "POST" : "PUT"; if (passed) {
this.btnLoading = true;
console.log("update extraParam: ", this.configs.extraParam);
const method = payload.name === "add" ? "POST" : "PUT";
const fields = {}; const fields = {};
fields[this.configs.extraParam] = this.relatedId; fields[this.configs.extraParam] = this.relatedId;
// [this.configs.extraParam]: this.relatedId, // this.configs.extraParam 只能是字符串 // [this.configs.extraParam]: this.relatedId, // this.configs.extraParam 只能是字符串
if (this.configs.forceAttachCode) fields["code"] = ""; if (this.configs.forceAttachCode) fields["code"] = "";
this.$http({ this.$http({
url: this.urls.subase, url: this.urls.subase,
method, method,
data: { data: {
...this.dataForm, ...this.dataForm,
...fields, ...fields,
}, },
}).then(({ data: res }) => { }).then(({ data: res }) => {
console.log("[add&update] res is: ", res); console.log("[add&update] res is: ", res);
if (res.code === 0) { this.btnLoading = false;
this.$message.success(payload.name === "add" ? "添加成功" : "更新成功"); if (res.code === 0) {
this.$emit("refreshDataList"); this.$message.success(payload.name === "add" ? "添加成功" : "更新成功");
this.handleClose(); this.$emit("refreshDataList");
} else this.$message.error(res.msg); this.handleClose();
} else this.$message.error(res.msg);
});
}
}); });
} }
} }