yangchunlong/orico-officialWebsite-ts-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 提示框层级调整

Browse Source
This commit is contained in:
yangchunlong
2025-04-16 16:18:24 +08:00
parent bbf953f47a
commit 186bfcdcd7
16 changed files with 201 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/modules/downloadClass.ts
View File

@@ -27,5 +27,5 @@ export const getCategorySortApi = (params: any) => {
};
//下载分类下拉列表
export const getCategorysApi = (params?: any) => {
return http.get<any>(`/attachment/categorys`, params);
return http.get<any>(`/attachment/tree`, params);
};

6
src/components/Upload/UploadImgs.vue
View File

@@ -75,7 +75,11 @@ const $router = useRouter();
const routerValueName: string = $router.currentRoute.value.name as string;
const routerObj: any = {
articleEditIndex: "article",
productEditIndex: "product"
productEditIndex: "product",
bannerListIndex: "banner",
downloadListIndex: "download",
videoListIndex: "video",
QAListIndex: "QA"
};
const routerName = ref(routerObj[routerValueName]);
// 获取 el-form 组件上下文

5
src/components/Upload/UploadVideo.vue
View File

@@ -60,7 +60,10 @@ const routerValueName: string = $router.currentRoute.value.name as string;
const routerObj: any = {
articleEditIndex: "article",
productEditIndex: "product",
videoListIndex: "video"
bannerListIndex: "banner",
downloadListIndex: "download",
videoListIndex: "video",
QAListIndex: "QA"
};
const routerName = ref(routerObj[routerValueName]);

11
src/components/WangEditor/index.vue
View File

@@ -3,7 +3,7 @@
<Toolbar v-if="!hideToolBar" class="editor-toolbar" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
<Editor
v-model="valueHtml"
class="editor-content'"
class="editor-content"
:style="{ height }"
:mode="mode"
:default-config="editorConfig"
@@ -32,7 +32,11 @@ const $router = useRouter();
const routerValueName: string = $router.currentRoute.value.name as string;
const routerObj: any = {
articleEditIndex: "article",
productEditIndex: "product"
productEditIndex: "product",
bannerListIndex: "banner",
downloadListIndex: "download",
videoListIndex: "video",
QAListIndex: "QA"
};
const routerName = ref(routerObj[routerValueName]);
// 接收父组件参数，并设置默认值
@@ -108,7 +112,8 @@ props.editorConfig.MENU_CONF!["uploadImage"] = {
const result = await uploadImg(formData, routerName.value);
if (result?.code === 0) {
const { data } = result;
insertFn(import.meta.env.VITE_APP_API_BASE_UPLOAD_URL + data.url);
console.log(data, "==============data====================");
insertFn(import.meta.env.VITE_APP_API_BASE_UPLOAD_URL + data.path);
}
} catch (error) {
console.log(error);

3
src/components/rulesForm/index.vue
View File

@@ -176,6 +176,9 @@
<template v-if="item.type === 'treeSelectInput'">
<slot />
</template>
<template v-if="item.type === 'WangEditor'">
<WangEditor v-model:value="_ruleForm[`${item.prop}`]" />
</template>
</el-form-item>
</template>
</el-form>

3
src/styles/element.scss
View File

@@ -268,3 +268,6 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.el-message__wrapper {
z-index: 9999; /* 一个较大的值，确保在抽屉之上 */
}

2
src/views/articleManagement/list/index.vue
View File

@@ -13,7 +13,7 @@
:init-param="dataStore.initParam"
>
<template #image="scope">
<el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
<el-image :src="scope.row.image ? h + scope.row.image : '--'" style="width: 60px; height: 60px" />
</template>
<template #enabled="scope">
<el-tag type="success" effect="dark">{{ scope.row.enabled === 1 ? "启用" : "禁用" }}</el-tag>

2
src/views/bannerManagement/list/constant/edit.ts
View File

@@ -97,7 +97,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
{
prop: "desc",
placeholder: "请输入",
type: "textarea",
type: "WangEditor",
label: "Banner描述: "
},
{

2
src/views/bannerManagement/list/index.vue
View File

@@ -30,7 +30,7 @@
<el-drawer
v-model="dataStore.visible"
:show-close="true"
:size="640"
:size="980"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleBeforeClone"

9
src/views/downloadManagement/class/constant/edit.ts
View File

@@ -22,7 +22,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
prop: "name",
placeholder: "请输入",
type: "input",
label: "文章分类名称: "
label: "下载分类名称: "
},
{
@@ -46,6 +46,13 @@ export const EDIT_FORM_DATA: FormItem[] = [
value: 0
}
]
},
{
prop: "pid",
placeholder: "请选择",
type: "treeSelect",
label: "所属分类: ",
options: []
}
];
export const EDIT_RULE_FORM = {

3
src/views/downloadManagement/class/constant/rules.ts
View File

@@ -1,4 +1,5 @@
export const RULES = {
name: [{ required: true, message: "文章分类名称不能为空 ! ", trigger: "blur" }],
sort: [{ required: true, message: "下载分类排序不能为空 ! ", trigger: "blur" }]
sort: [{ required: true, message: "下载分类排序不能为空 ! ", trigger: "blur" }],
pid: [{ required: true, message: "所属分类不能为空 ! ", trigger: "change" }]
};

175
src/views/downloadManagement/class/index.vue
View File

@@ -4,65 +4,78 @@
<div style="padding-bottom: 16px">
<el-button type="primary" @click="handleAdd"> 添加分类 </el-button>
</div>
<ProTable
ref="proTableRef"
:formData="dataStore.formData"
:columns="dataStore.columns"
:request-api="getCategoryListApi"
:init-param="dataStore.initParam"
>
<template #image="scope">
<el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
</template>
<template #status="scope">
<el-tag type="success" effect="dark">{{ scope.row.status }}</el-tag>
</template>
<template #sort="scope">
<el-input v-model="scope.row.sort" @blur="handleBlur(scope.row)" @input="handleInput(scope.row)"></el-input>
</template>
<template #operation="scope">
<el-button size="small" type="primary" @click="handleBtnClick('编辑', scope.row)">编辑</el-button>
<el-button size="small" type="primary" @click="handleBtnClick('添加', scope.row)">添加下载</el-button>
<el-button size="small" type="danger" @click="handleBtnClick('删除', scope.row)">删除</el-button>
</template>
</ProTable>
<el-drawer
v-model="dataStore.visible"
:show-close="true"
:size="600"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleBeforeClone"
destroy-on-close
>
<template #header="{ titleId, titleClass }">
<h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
</template>
<div>
<rulesForm
:ruleForm="dataStore.editRuleForm"
:formData="dataStore.editFormData"
:rules="dataStore.rules"
ref="formRef"
/>
</div>
<template #footer>
<div style="flex: auto">
<el-button @click="handleResetClick">重置</el-button>
<el-button type="primary" @click="handleConfirmClick">确认</el-button>
<div class="card table-main">
<SearchForm :search="search" :reset="reset" :formData="dataStore.formData" :search-param="dataStore.ruleForm" />
<el-table
:data="dataStore.tableData"
style="width: 100%; margin-bottom: 20px; font-size: 14px"
row-key="id"
border
default-expand-all
>
<el-table-column prop="id" label="id" />
<el-table-column prop="name" label="下载分类名称" />
<el-table-column prop="sort" label="下载分类排序">
<template #default="{ row }">
<div @click.stop="">
<el-input v-model="row.sort" @blur="handleBlur(row)" @input="handleInput(row)" />
</div>
</template>
</el-table-column>
<el-table-column prop="is_show" label="是否显示">
<template #default="{ row }">
{{ row.is_show === 1 ? "✔️" : "❌" }}
</template>
</el-table-column>
<el-table-column label="操作" :width="350">
<template #default="scope">
<el-button size="small" type="primary" @click="handleBtnClick('编辑', scope.row)">编辑</el-button>
<el-button size="small" type="primary" @click="handleBtnClick('添加', scope.row)">添加下载</el-button>
<el-button size="small" type="danger" @click="handleBtnClick('删除', scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-drawer
v-model="dataStore.visible"
:show-close="true"
:size="600"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleBeforeClone"
destroy-on-close
>
<template #header="{ titleId, titleClass }">
<h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
</template>
<div>
<rulesForm
:ruleForm="dataStore.editRuleForm"
:formData="dataStore.editFormData"
:rules="dataStore.rules"
ref="formRef"
@handleSelectChangeEmits="handleSelectChangeEmits"
/>
</div>
</template>
</el-drawer>
<template #footer>
<div style="flex: auto">
<el-button @click="handleResetClick">重置</el-button>
<el-button type="primary" @click="handleConfirmClick">确认</el-button>
</div>
</template>
</el-drawer>
</div>
</div>
</template>
<script setup lang="ts" name="downloadClassListIndex">
import ProTable from "@/components/ProTable/index.vue";
// import ProTable from "@/components/ProTable/index.vue";
import rulesForm from "@/components/rulesForm/index.vue";
import { messageBox } from "@/utils/messageBox";
import { useMsg } from "@/hooks/useMsg";
import { integerRexg } from "@/utils/regexp/index";
import { h } from "@/utils/url";
// import { h } from "@/utils/url";
//列表接口
import {
getCategoryListApi,
@@ -70,14 +83,14 @@ import {
getCategorySortApi,
getCategorySaveApi,
getCategoryReadApi,
getCategoryUpdateApi
getCategoryUpdateApi,
getCategorysApi
} from "@/api/modules/downloadClass";
//深拷贝方法
import { cloneDeep } from "lodash-es";
//表格和搜索條件
import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref<any>(null);
const formRef: any = ref(null);
const $router = useRouter();
// 数据源
@@ -89,11 +102,57 @@ const dataStore = reactive<any>({
editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
ruleForm: cloneDeep(RULE_FORM), // 搜索參數
formData: FORM_DATA, //搜索配置项
formData: FORM_DATA, //搜索配置项 ruleForm formData
visible: false,
tableData: [],
selectRow: {} //当前选择的row
});
const getCategoryList = async () => {
const result = await getCategoryListApi(dataStore.ruleForm);
if (result?.code === 0) {
dataStore.tableData = result?.data;
}
};
getCategoryList();
//search reset
const search = () => {
getCategoryList();
};
const reset = () => {
for (let key in dataStore.ruleForm) {
dataStore.ruleForm[key] = "";
}
getCategoryList();
};
const handleSelectChangeEmits = (params: any) => {
const { id } = params;
dataStore.editRuleForm.pid = id;
};
const addLabelValue = (arr: any) => {
return arr.map((item: any) => {
// 为当前对象添加 label 和 value 属性
const newItem = { ...item };
newItem.label = newItem.name;
newItem.value = newItem.id;
// 如果有子对象，递归调用 addLabelValue 处理子对象
if (newItem.children && Array.isArray(newItem.children)) {
newItem.children = addLabelValue(newItem.children);
}
return newItem;
});
};
//分类下拉
const getCategorys = async () => {
const result = await getCategorysApi();
if (result?.code === 0) {
dataStore.editFormData[3].options = addLabelValue(result?.data);
dataStore.editFormData[3].options.unshift({ value: 0, label: "无" });
}
};
getCategorys();
//抽屉确认
const handleConfirmClick = () => {
if (!formRef.value!.ruleFormRef) return;
@@ -156,7 +215,7 @@ const getCategoryUpdate = async () => {
useMsg("success", result?.msg);
dataStore.visible = false;
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
proTableRef?.value?.getTableList();
getCategoryList();
}
};
//详情
@@ -173,7 +232,7 @@ const getCategorySave = async () => {
useMsg("success", result?.msg);
dataStore.visible = false;
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
proTableRef?.value?.getTableList();
getCategoryList();
}
};
//删除
@@ -183,7 +242,7 @@ const getCategoryDel = (id: any) => {
if (result?.code === 0) {
const { msg } = result;
useMsg("success", msg);
proTableRef?.value?.getTableList();
getCategoryList();
}
});
};
@@ -200,7 +259,7 @@ const getCategorySort = async (row: any) => {
const result = await getCategorySortApi({ id: row.id, sort: row.sort });
useMsg("success", result?.msg);
if (result?.code === 0) {
proTableRef?.value?.getTableList();
getCategoryList();
}
};
</script>

6
src/views/downloadManagement/list/constant/edit.ts
View File

@@ -29,7 +29,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
{
prop: "category_id1",
placeholder: "请选择",
type: "select",
type: "treeSelect",
label: "下载分类: ",
options: []
},
@@ -122,6 +122,8 @@ export const EDIT_TABLE_DATA = [
file_ext: "" //文件格式
}
];
export const EDIT_RULE_FORM = {};
export const EDIT_RULE_FORM = {
sort: 1
};
// editRuleForm: {},
//editFormData: [],

2
src/views/downloadManagement/list/constant/search.ts
View File

@@ -27,7 +27,7 @@ export const FORM_DATA: FormItem[] = [
{
prop: "category_id",
placeholder: "请选择",
type: "select",
type: "treeSelect",
isArray: true,
label: "下载分类: ",
options: []

27
src/views/downloadManagement/list/edit.vue
View File

@@ -240,25 +240,32 @@ const getAttachmentRead = async () => {
};
getAttachmentRead();
const handleSelectChangeEmits = (value: any) => {
console.log(value, "========value=========");
if (value.prop === "category_id1") {
dataStore.editRuleForm.category_id = value.id;
}
};
const addLabelValue = (arr: any) => {
return arr.map((item: any) => {
// 为当前对象添加 label 和 value 属性
const newItem = { ...item };
newItem.label = newItem.name;
newItem.value = newItem.id;
// 如果有子对象，递归调用 addLabelValue 处理子对象
if (newItem.children && Array.isArray(newItem.children)) {
newItem.children = addLabelValue(newItem.children);
}
return newItem;
});
};
//分类
const getCategorys = async () => {
const result = await getCategorysApi({ is_show: 1 });
if (result?.code === 0) {
let arr: any[] = [];
result?.data?.forEach((item: any) => {
let obj = {
value: item.id,
label: item.name
};
arr.push(obj);
});
dataStore.editFormData[1].options = arr;
dataStore.editFormData[1].options = addLabelValue(result?.data);
}
};
getCategorys();

34
src/views/downloadManagement/list/index.vue
View File

@@ -150,20 +150,36 @@ const handleBlur = (row: any) => {
const handleInput = (row: any) => {
row.sort = integerRexg(row.sort);
};
const addLabelValue = (arr: any) => {
return arr.map((item: any) => {
// 为当前对象添加 label 和 value 属性
const newItem = { ...item };
newItem.label = newItem.name;
newItem.value = newItem.id;
// 如果有子对象，递归调用 addLabelValue 处理子对象
if (newItem.children && Array.isArray(newItem.children)) {
newItem.children = addLabelValue(newItem.children);
}
return newItem;
});
};
const getCategorys = async () => {
const result = await getCategorysApi();
if (result?.code === 0) {
let arr: any[] = [];
result?.data?.forEach((item: any) => {
let obj = {
value: item.id,
label: item.name
};
arr.push(obj);
});
// let arr: any[] = [];
// result?.data?.forEach((item: any) => {
// let obj = {
// value: item.id,
// label: item.name
// };
// arr.push(obj);
// });
dataStore.formData[1].options = arr;
dataStore.formData[1].options = addLabelValue(result?.data);
}
};
getCategorys();