内容上传修改
This commit is contained in:
parent
4520ea7bda
commit
d83cf2432c
@ -6,4 +6,5 @@ VITE_APP_ENV = 'development'
|
||||
|
||||
# 开发环境
|
||||
VITE_APP_BASE_API = 'http://192.168.18.99:8080'
|
||||
# VITE_APP_BASE_API = 'http://192.168.18.151:8080'
|
||||
VITE_APP_PLATFORM = 'http://localhost:9000/platform'
|
||||
@ -19,6 +19,7 @@
|
||||
"@element-plus/icons-vue": "2.3.1",
|
||||
"@vueup/vue-quill": "1.2.0",
|
||||
"@vueuse/core": "10.11.0",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"address": "^2.0.3",
|
||||
"address-parse": "^1.2.19",
|
||||
"axios": "0.28.1",
|
||||
@ -37,7 +38,8 @@
|
||||
"vue": "3.4.31",
|
||||
"vue-cropper": "1.1.1",
|
||||
"vue-router": "4.4.0",
|
||||
"vuedraggable": "^4.1.0"
|
||||
"vuedraggable": "^4.1.0",
|
||||
"wangeditor": "^4.7.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "5.0.5",
|
||||
|
||||
49
src/api/content/index.js
Normal file
49
src/api/content/index.js
Normal file
@ -0,0 +1,49 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 获取内容列表
|
||||
export function getInformation(query) {
|
||||
return request({
|
||||
url: "/contentManage/information/informationPage",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
//新增内容
|
||||
export function addConten(data) {
|
||||
return request({
|
||||
url: "/contentManage/information/informationAdd",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
//编辑内容
|
||||
export function updateInformation(data) {
|
||||
return request({
|
||||
url: "/contentManage/information/informationEdit",
|
||||
method: "PUT",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 删除内容
|
||||
export function deleteInformation(id) {
|
||||
return request({
|
||||
url: '/contentManage/information/informationDelete?id=' + id,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
//内容启用停用
|
||||
export function updateInformationEnable(data) {
|
||||
return request({
|
||||
url: "/contentManage/information/informationEnable",
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取内容信息（id）
|
||||
export function getInfo(id) {
|
||||
return request({
|
||||
url: `/contentManage/information/informationInfo/${id}`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
@ -540,30 +540,30 @@ export const constantRoutes = [
|
||||
|
||||
],
|
||||
},
|
||||
//内容管理，没有子菜单
|
||||
// {
|
||||
// path: '/content',
|
||||
// name: "content",
|
||||
// meta: {
|
||||
// title: "内容管理",
|
||||
// icon: "education",
|
||||
// },
|
||||
// component: Layout,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'content/index',
|
||||
// component: () => import('@/views/content/index'),
|
||||
// name: 'content',
|
||||
// hidden: false,
|
||||
// meta: {
|
||||
// title: "内容管理",
|
||||
// icon: "",
|
||||
// noCache: false,
|
||||
// link: null,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// }
|
||||
// 内容管理，没有子菜单
|
||||
{
|
||||
path: '/content',
|
||||
name: "content",
|
||||
meta: {
|
||||
title: "内容管理",
|
||||
icon: "education",
|
||||
},
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'content/index',
|
||||
component: () => import('@/views/content/index'),
|
||||
name: 'content',
|
||||
hidden: false,
|
||||
meta: {
|
||||
title: "内容管理",
|
||||
icon: "",
|
||||
noCache: false,
|
||||
link: null,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
|
||||
@ -1,5 +1,618 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
待开发
|
||||
<div class="app-container customer-control">
|
||||
<div class="container-custom">
|
||||
<!-- 搜索栏 -->
|
||||
<div ref="searchBarRef" class="search-box">
|
||||
<div class="search-bar">
|
||||
<div class="search-bar-left">
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
:label-width="'auto'"
|
||||
>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input
|
||||
v-model="formInline.title"
|
||||
placeholder="请输入品牌名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资讯分类" prop="category">
|
||||
<el-select v-model="formInline.category" placeholder="请选择资讯分类" clearable>
|
||||
<el-option
|
||||
v-for="dict in sys_good_category"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="formInline.status" placeholder="请选择" clearable>
|
||||
<el-option v-for="item in statusList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="添加时间"
|
||||
prop="startDate"
|
||||
style="margin-right: 0"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="formInline.startDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择起始日期"
|
||||
clearable
|
||||
:disabled-date="disableStartDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<span
|
||||
style="width: 30px; text-align: center; display: inline-block"
|
||||
>
|
||||
-
|
||||
</span>
|
||||
<el-date-picker
|
||||
v-model="formInline.endDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择截止日期"
|
||||
clearable
|
||||
:disabled-date="disableEndDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-bar-right">
|
||||
<el-button class="el-button-gry" type="primary" icon="Search" @click="onSubmit"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="Refresh"
|
||||
style="margin: 16px 0 0 0"
|
||||
@click="resetForm"
|
||||
>重置</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
||||
<div class="table-toolbar">
|
||||
<el-button
|
||||
icon="delete"
|
||||
@click="batchDelete"
|
||||
:disabled="btnStatus"
|
||||
style="margin-right: 10px"
|
||||
>批量删除</el-button
|
||||
>
|
||||
<el-button type="primary" class="el-button-gry" icon="plus" @click="handleAdd"
|
||||
>添加内容</el-button
|
||||
>
|
||||
</div>
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-border="false"
|
||||
:show-selection="true"
|
||||
:header-cell-class-name="getHeaderClass"
|
||||
@page-change="handlePaginationChange"
|
||||
:loading="tableLoading"
|
||||
@selection-change="handleSelectionChange"
|
||||
:total="tableTotal"
|
||||
:current-page="formInline.current"
|
||||
:page-size="formInline.size"
|
||||
:showSort="true"
|
||||
:rowkey="'id'"
|
||||
>
|
||||
<!-- 自定义-图片 -->
|
||||
<template #imgPath="slotProps">
|
||||
<div class="table-cell-img-box">
|
||||
<img :src="slotProps.row.imgPath" class="table-cell-img" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
<!-- 自定义-资讯分类 -->
|
||||
<template #category="slotProps">
|
||||
<span>{{ sys_good_category[parseInt(slotProps.row.category)]?.label}}</span>
|
||||
</template>
|
||||
<!-- 自定义-发布位置 -->
|
||||
<template #publishLocation="slotProps">
|
||||
<span>{{ sys_good_content[parseInt(slotProps.row.publishLocation)]?.label}}</span>
|
||||
</template>
|
||||
<!-- 自定义-状态 -->
|
||||
<template #status="slotProps">
|
||||
<span v-if="slotProps.row.status == 1" class="color-green"
|
||||
>使用中</span
|
||||
>
|
||||
<span v-else-if="slotProps.row.status == 0" class="color-red"
|
||||
>已停用</span
|
||||
>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-button v-if="slotProps.row.status == 0" text class="el-button-custom" @click="startStop(slotProps.row)">启用</el-button>
|
||||
<el-button v-if="slotProps.row.status == 1" text class="el-button-custom" @click="startStop(slotProps.row)">停用</el-button>
|
||||
<el-button text class="el-button-custom" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||
<el-button text class="el-button-custom" @click="handleView(slotProps.row)">查看</el-button>
|
||||
<el-button text class="el-button-delete" @click="handleDelete(slotProps.row)">删除</el-button>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加/编辑 -->
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500" :close-on-click-modal="false">
|
||||
<el-form :disabled="disabled" :model="dialogForm" :label-width="'80'" :rules="dialogFormRules" ref="dialogRef">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="dialogForm.title" autocomplete="off" placeholder="请输入内容标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="资讯分类" prop="category">
|
||||
<el-select v-model="dialogForm.category" placeholder="请选择资讯分类">
|
||||
<el-option
|
||||
v-for="dict in sys_good_category"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="发布位置" prop="publishLocation">
|
||||
<el-select v-model="dialogForm.publishLocation" placeholder="请选择发布位置">
|
||||
<el-option
|
||||
v-for="dict in sys_good_content"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="content">
|
||||
<div style="border: 1px solid #ccc; margin-top: 10px">
|
||||
<Toolbar
|
||||
:editor="editorRef"
|
||||
:defaultConfig="toolbarConfig"
|
||||
:mode="mode"
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
/>
|
||||
<Editor
|
||||
:defaultConfig="editorConfig"
|
||||
:mode="mode"
|
||||
:disabled="disabled"
|
||||
v-model="dialogForm.content"
|
||||
style="height: 300px; overflow-y: scroll"
|
||||
@onCreated="handleCreated"
|
||||
@onChange="handleChange"
|
||||
@onDestroyed="handleDestroyed"
|
||||
@onFocus="handleFocus"
|
||||
@onBlur="handleBlur"
|
||||
@customAlert="customAlert"
|
||||
@customPaste="customPaste"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="onSaveCategory">
|
||||
保存
|
||||
</el-button>
|
||||
<el-button @click="cancelDialog">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import tableComponent from "@/components/tableComponent.vue";
|
||||
import myUploadImage from "@/components/myUploadImage.vue";
|
||||
import Mock from "mockjs";
|
||||
import {getInformation,addConten,updateInformation,deleteInformation,getInfo,updateInformationEnable} from "@/api/content/index";
|
||||
// import { getDicts } from "@/api/system/dict/data";
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { sys_good_category,sys_good_content} = proxy.useDict("sys_good_category","sys_good_content")
|
||||
// console.log('sys_good_category资讯分类',sys_good_category);
|
||||
// console.log('sys_good_content发布位置',sys_good_content);
|
||||
|
||||
import { id } from "element-plus/es/locales.mjs";
|
||||
import { ElMessage,ElMessageBox } from "element-plus";
|
||||
|
||||
import '@wangeditor/editor/dist/css/style.css';
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||
import { getToken } from "@/utils/auth"
|
||||
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
const editorRef = shallowRef()
|
||||
|
||||
const toolbarConfig = {}
|
||||
const editorConfig = reactive({
|
||||
placeholder: '请输入内容...',
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
server: import.meta.env.VITE_APP_BASE_API + "/uploadApis/upload",
|
||||
fieldName: 'file',
|
||||
maxFileSize: 10 * 1024 * 1024,
|
||||
maxNumberOfFiles: 1,
|
||||
allowedFileTypes: ['image/*'],
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken(),
|
||||
},
|
||||
// 自定义上传结果处理
|
||||
customInsert(res, insertFn) {
|
||||
console.log('customInsert 被调用:', res) // 检查是否执行
|
||||
if (res.code === 200) {
|
||||
insertFn("http://gov-cloud.oss-cn-chengdu.aliyuncs.com/"+res.data.url, '', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
const mode = 'default' // 或 'simple'
|
||||
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return
|
||||
editor.destroy()
|
||||
})
|
||||
|
||||
const handleCreated = (editor) => {
|
||||
editorRef.value = editor // 记录 editor 实例，重要！
|
||||
}
|
||||
|
||||
// 自动暴露所有顶层绑定
|
||||
defineExpose({
|
||||
editorRef,
|
||||
mode,
|
||||
toolbarConfig,
|
||||
editorConfig,
|
||||
handleCreated
|
||||
})
|
||||
|
||||
const formInline = reactive({
|
||||
id: "",
|
||||
title: "",//商品名称
|
||||
useNum:'',//使用数量
|
||||
status: "",//状态
|
||||
startDate: "",//开始时间
|
||||
endDate: "",//结束时间
|
||||
category: "",//分类
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
let isADD = ref(true);
|
||||
const dialogFormVisible = ref(false);
|
||||
const dialogRef = ref(null);
|
||||
const dialogTitle = ref("添加品牌");
|
||||
const categoryList = ref([]);
|
||||
const disabled = ref(false);
|
||||
let dialogForm = reactive({
|
||||
id: "",
|
||||
title: "",
|
||||
content:"",
|
||||
category:"",
|
||||
publishLocation:'',
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
title: [
|
||||
{ required: true, message: "请输入品牌名称", trigger: "blur" },
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: "请输入内容", trigger: "blur" },
|
||||
],
|
||||
category: [
|
||||
{ required: true, message: "请选择分类", trigger: "blur" },
|
||||
],
|
||||
publishLocation: [
|
||||
{ required: true, message: "请选择发布位置", trigger: "blur" },
|
||||
],
|
||||
});
|
||||
|
||||
const statusList = ref([
|
||||
{ name: "使用中", id: "1" },
|
||||
{ name: "已停用", id: "0" },
|
||||
]);
|
||||
|
||||
// 禁用开始日期的逻辑（不能晚于已选的结束日期）
|
||||
const disableStartDate = (time) => {
|
||||
if (!formInline.endDate) return false;
|
||||
const endDate = new Date(formInline.endDate);
|
||||
return time.getTime() > endDate.getTime();
|
||||
};
|
||||
|
||||
// 禁用结束日期的逻辑（不能早于已选的开始日期）
|
||||
const disableEndDate = (time) => {
|
||||
if (!formInline.startDate) return false;
|
||||
const startDate = new Date(formInline.startDate).setHours(0, 0, 0, 0);
|
||||
const currentDate = new Date(time).setHours(0, 0, 0, 0);
|
||||
return currentDate < startDate;
|
||||
};
|
||||
|
||||
const searchForm = ref(null);
|
||||
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
|
||||
tableLoading.value = true;
|
||||
let prams = { ...formInline };
|
||||
|
||||
try {
|
||||
prams.startDate = formInline.startDate ? formInline.startDate + " 00:00:00" : "";
|
||||
prams.endDate = formInline.endDate ? formInline.endDate + " 23:59:59" : "";
|
||||
let response = await getInformation(prams);
|
||||
if (response.code == 200) {
|
||||
tableData.value = response.data.records;
|
||||
tableTotal.value = response.data.total;
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
tableLoading.value = false;
|
||||
};
|
||||
|
||||
const onSubmit = () => {
|
||||
formInline.current = 1;
|
||||
loadData();
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
formInline.endDate = "";
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const selectedIds = ref([]);
|
||||
const btnStatus = computed(() => {
|
||||
return selectedIds.value.length <= 0;
|
||||
});
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
let nowClickRow = ref({});
|
||||
// 列配置
|
||||
const columns = ref([
|
||||
{ prop: "title", label: "标题" },
|
||||
{ prop: "category", label: "资讯分类", slotName: "category",},
|
||||
{ prop: "publishLocation", label: "发布位置", slotName: "publishLocation",},
|
||||
{ prop: "createTime", label: "发布日期",},
|
||||
{ prop: "views", label: "浏览量",},
|
||||
{ prop: "status", label: "状态", slotName: "status",},
|
||||
{ prop: "action", label: "操作", slotName: "action",width: "180",align: "center" },
|
||||
]);
|
||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
||||
const getHeaderClass = ({ column }) => {
|
||||
return "custom-header";
|
||||
};
|
||||
// 分页变化
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
console.log("分页变化:", page, pageSize);
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
// 这里可以调用API获取新数据
|
||||
loadData();
|
||||
};
|
||||
// 多选框变化
|
||||
const handleSelectionChange = (selection) => {
|
||||
console.log("选中项:", selection);
|
||||
selectedIds.value = [];
|
||||
selection.forEach(element => {
|
||||
selectedIds.value.push(element.id);
|
||||
});
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const batchDelete = async () => {
|
||||
// deleteGoods(selectedIds.value.join(","));
|
||||
ElMessageBox.confirm("确定要删除选中的数据吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
deleteGoods(selectedIds.value);
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.info("已取消删除");
|
||||
})
|
||||
|
||||
};
|
||||
const deleteGoods = async (param) => {
|
||||
console.log("批量删除参数:", param);
|
||||
|
||||
try {
|
||||
tableLoading.value = true;
|
||||
let res = await deleteInformation(param);
|
||||
tableLoading.value = false;
|
||||
if (res.code == 200) {
|
||||
ElMessage.success("删除成功");
|
||||
loadData();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
tableLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 添加商品
|
||||
const handleAdd = () => {
|
||||
disabled.value = false;
|
||||
nextTick(() => {
|
||||
if (editorRef.value) {
|
||||
editorRef.value.enable(); // 重新启用编辑器
|
||||
}
|
||||
});
|
||||
resetDlg();
|
||||
dialogTitle.value = "添加品牌";
|
||||
isADD.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
// console.log(formInline);
|
||||
};
|
||||
//提交保存
|
||||
const onSaveCategory = async () => {
|
||||
console.log('dialogForm',dialogForm);
|
||||
|
||||
dialogRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if(isADD.value){
|
||||
let response = await addConten(dialogForm);
|
||||
if (response.code === 200) {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("新增成功！");
|
||||
dialogRef.value.resetFields();
|
||||
loadData();
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
}else{
|
||||
let response = await updateInformation(dialogForm);
|
||||
if (response.code === 200) {
|
||||
dialogFormVisible.value = false;
|
||||
ElMessage.success("编辑成功！");
|
||||
dialogRef.value.resetFields();
|
||||
loadData();
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//启用停用
|
||||
const startStop = async (row) => {
|
||||
let status = row.status == 1 ? 0 : 1;
|
||||
let params = { id: row.id, status: status };
|
||||
let response = await updateInformationEnable(params);
|
||||
if (response.code === 200) {
|
||||
ElMessage.success("操作成功！");
|
||||
loadData();
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 编辑操作
|
||||
const handleEdit = async(row) => {
|
||||
disabled.value = false;
|
||||
nextTick(() => {
|
||||
if (editorRef.value) {
|
||||
editorRef.value.enable(); // 重新启用编辑器
|
||||
}
|
||||
});
|
||||
resetDlg();
|
||||
isADD.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
let response = await getInfo(row.id);
|
||||
if (response.code === 200) {
|
||||
Object.assign(dialogForm, response.data); // 保持响应性
|
||||
dialogTitle.value = "编辑品牌";
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
};
|
||||
// 查看操作
|
||||
const handleView = async(row) => {
|
||||
disabled.value = true;
|
||||
resetDlg();
|
||||
isADD.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
let response = await getInfo(row.id);
|
||||
if (response.code === 200) {
|
||||
Object.assign(dialogForm, response.data); // 保持响应性
|
||||
dialogTitle.value = "查看品牌";
|
||||
nextTick(() => {
|
||||
if (editorRef.value) {
|
||||
editorRef.value.disable(); // 调用编辑器禁用API
|
||||
}
|
||||
});
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
};
|
||||
// 删除操作
|
||||
const handleDelete = async(row) => {
|
||||
//提示一下是否确定删除
|
||||
ElMessageBox.confirm("确定要删除吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
let response = await deleteInformation(row.id);
|
||||
if (response.code === 200) {
|
||||
ElMessage.success("品牌删除成功！");
|
||||
loadData();
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.info("已取消删除");
|
||||
})
|
||||
|
||||
};
|
||||
//取消弹框
|
||||
const cancelDialog = () => {
|
||||
resetDlg();
|
||||
};
|
||||
|
||||
const resetDlg= () => {
|
||||
dialogRef.value?.resetFields(); // 重置表单验证状态
|
||||
Object.assign(dialogForm, { // 保持响应性，手动清空字段
|
||||
id: "",
|
||||
title: "",
|
||||
imgPath: "",
|
||||
code: ""
|
||||
});
|
||||
dialogFormVisible.value = false;
|
||||
}
|
||||
|
||||
const titleRef = ref(null);
|
||||
const searchBarRef = ref(null);
|
||||
const tableViewportHeight = ref(0);
|
||||
// 精确计算可用高度
|
||||
const calculateTableHeight = () => {
|
||||
// 获取窗口总高度
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
// 获取各组件高度
|
||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
||||
|
||||
// 计算容器内边距补偿（根据实际样式调整）
|
||||
const paddingCompensation = 130;
|
||||
|
||||
// 最终计算
|
||||
tableViewportHeight.value =
|
||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
||||
// console.log(tableViewportHeight.value);
|
||||
};
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
|
||||
calculateTableHeight();
|
||||
|
||||
// 添加响应式监听
|
||||
window.addEventListener("resize", calculateTableHeight);
|
||||
|
||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
||||
const observer = new ResizeObserver(calculateTableHeight);
|
||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", calculateTableHeight);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table-toolbar {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
padding: 14px 16px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user