refactor(智能柜卡片): 优化智能柜卡片表单模态框的显示方式
将智能柜卡片表单模态框从`el-dialog`改为`el-drawer`，提升用户体验。同时修复了重复显示登录提示的问题，并优化了代码格式。
This commit is contained in:
dzq
parent
a742b56413
commit
9fb6bb0ed6
|
|
@ -49,6 +49,9 @@ class PureHttp {
|
|||
/** 防止重复刷新token */
|
||||
private static isRefreshing = false;
|
||||
|
||||
/** 防止重复显示登录提示 */
|
||||
private static isShowingLogin = false;
|
||||
|
||||
/** 初始化配置对象 */
|
||||
private static initConfig: PureHttpRequestConfig = {};
|
||||
|
||||
|
|
@ -90,10 +93,10 @@ class PureHttp {
|
|||
return whiteList.some(v => config.url.endsWith(v))
|
||||
? config
|
||||
: new Promise(resolve => {
|
||||
const data = getToken();
|
||||
config.headers["Authorization"] = formatToken(data.token);
|
||||
resolve(config);
|
||||
});
|
||||
const data = getToken();
|
||||
config.headers["Authorization"] = formatToken(data.token);
|
||||
resolve(config);
|
||||
});
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error);
|
||||
|
|
@ -137,22 +140,25 @@ class PureHttp {
|
|||
if (response.data.code !== 0) {
|
||||
// token失效时弹出过期提示
|
||||
if (response.data.code === 106) {
|
||||
ElMessageBox.confirm(
|
||||
"登录状态已过期，您可以继续留在该页面，或者重新登录",
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "重新登录",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
if (!PureHttp.isShowingLogin) {
|
||||
PureHttp.isShowingLogin = true;
|
||||
ElMessageBox.confirm(
|
||||
"登录状态已过期，您可以继续留在该页面，或者重新登录",
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "重新登录",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}
|
||||
).then(() => {
|
||||
removeToken();
|
||||
router.push("/login");
|
||||
})
|
||||
.catch(() => {
|
||||
}).catch(() => {
|
||||
message("取消重新登录", { type: "info" });
|
||||
}).finally(() => {
|
||||
PureHttp.isShowingLogin = false;
|
||||
});
|
||||
}
|
||||
NProgress.done();
|
||||
return Promise.reject(msg);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -125,8 +125,7 @@ onMounted(() => {
|
|||
<el-col v-for="(item, index) in dataList" :key="item.cabinetId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
|
||||
<el-card class="cabinet-card" :body-style="{ padding: '8px 20px' }">
|
||||
<div class="card-content">
|
||||
<img
|
||||
:src="`${IMG_PATH}img/cabinet/${CabinetImgMap[item.templateNo]?.img || 'default.jpg'}`"
|
||||
<img :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[item.templateNo]?.img || 'default.jpg'}`"
|
||||
class="cabinet-image" />
|
||||
<el-descriptions class="cabinet-info" :column="2">
|
||||
<el-descriptions-item class="name" :span="2">柜体名称：{{ item.cabinetName }}
|
||||
|
|
@ -150,7 +149,9 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<smart-cabinet-card-form-modal v-model:visible="modalVisible" @refresh="getList" />
|
||||
<el-drawer v-model="modalVisible" title="新增智能柜" size="30%" direction="rtl">
|
||||
<smart-cabinet-card-form-modal v-model="modalVisible" @refresh="getList" />
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const props = defineProps({
|
|||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:visible", "refresh"]);
|
||||
const emit = defineEmits(["update:modelValue", "refresh"]);
|
||||
|
||||
const formRef = ref();
|
||||
const formData = reactive<FormDTO>({
|
||||
|
|
@ -60,7 +60,7 @@ const handleConfirm = async () => {
|
|||
|
||||
const closeDialog = () => {
|
||||
formRef.value.resetFields();
|
||||
emit("update:visible", false);
|
||||
emit("update:modelValue", false);
|
||||
};
|
||||
|
||||
const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
|
||||
|
|
@ -70,32 +70,27 @@ const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog title="新增智能柜" :model-value="visible" width="600px" @close="closeDialog">
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
|
||||
<el-form-item label="柜体名称" prop="cabinetName">
|
||||
<el-input v-model="formData.cabinetName" placeholder="请输入柜体名称" />
|
||||
</el-form-item>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
|
||||
<el-form-item label="柜体名称" prop="cabinetName">
|
||||
<el-input v-model="formData.cabinetName" placeholder="请输入柜体名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="柜体类型" prop="cabinetType">
|
||||
<el-select v-model="formData.cabinetType" placeholder="请选择类型">
|
||||
<el-option label="主柜" :value="0" />
|
||||
<el-option label="副柜" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="柜体类型" prop="cabinetType">
|
||||
<el-select v-model="formData.cabinetType" placeholder="请选择类型">
|
||||
<el-option label="主柜" :value="0" />
|
||||
<el-option label="副柜" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="模板编号" prop="templateNo">
|
||||
<el-select v-model="formData.templateNo" placeholder="请选择模板编号">
|
||||
<el-option v-for="option in templateOptions" :key="option.value" :label="option.label"
|
||||
:value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-form-item label="模板编号" prop="templateNo">
|
||||
<el-select v-model="formData.templateNo" placeholder="请选择模板编号">
|
||||
<el-option v-for="option in templateOptions" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
|
||||
确认
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
Loading…
Reference in New Issue