finish init again
This commit is contained in:
856
src/view/project/promotionCode.vue
Normal file
856
src/view/project/promotionCode.vue
Normal file
@ -0,0 +1,856 @@
|
||||
<script setup lang="ts">
|
||||
import {ref, onMounted,reactive} from "vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import myAxios from "../../api/myAxios";
|
||||
import {message} from "ant-design-vue";
|
||||
import {downLoadImage} from "../../api/ImageUrl.ts";
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '推广码ID',
|
||||
dataIndex: 'id',
|
||||
width: 80,
|
||||
key: 'id',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '信息Key',
|
||||
dataIndex: 'promoCodeInfoKey',
|
||||
key: 'promoCodeInfoKey',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '推广链接',
|
||||
dataIndex: 'promoCodeLink',
|
||||
key: 'promoCodeLink',
|
||||
width: 200,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '推广码图片',
|
||||
dataIndex: 'promoCodeImage',
|
||||
key: 'promoCodeImage',
|
||||
width: 150,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '项目ID',
|
||||
dataIndex: 'projectId',
|
||||
key: 'projectId',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'promoCodeStatus',
|
||||
key: 'promoCodeStatus',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
// 接口数据类型
|
||||
interface PromoCode {
|
||||
id: number;
|
||||
promoCodeInfoKey: string;
|
||||
promoCodeLink: string;
|
||||
promoCodeImage: string;
|
||||
projectId: number;
|
||||
promoCodeStatus: boolean;
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const projectId = ref<string | number>("");
|
||||
const originalTableData = ref<PromoCode[]>([]); // 存储所有原始数据
|
||||
const displayData = ref<PromoCode[]>([]); // 实际显示的数据
|
||||
const loading = ref(false);
|
||||
const searchId = ref("");
|
||||
const previewVisible = ref(false);
|
||||
const previewImage = ref("");
|
||||
|
||||
// 主查询方法 - 获取项目所有推广码
|
||||
const getPromoCodes = async (id: string | number) => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
loading.value = true;
|
||||
const response: any = await myAxios.post(
|
||||
"/promoCode/queryByPid",
|
||||
{ id },
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}
|
||||
);
|
||||
console.log(response);
|
||||
|
||||
if (response.code === 1) {
|
||||
// 确保data是数组，即使为null也转为空数组
|
||||
const data = Array.isArray(response.data) ? response.data : [];
|
||||
originalTableData.value = data;
|
||||
displayData.value = data; // 初始显示所有数据
|
||||
} else {
|
||||
message.error(response.message || "获取数据失败");
|
||||
originalTableData.value = [];
|
||||
displayData.value = [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("查询错误:", err);
|
||||
message.error("数据加载失败，请重试");
|
||||
originalTableData.value = [];
|
||||
displayData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化逻辑
|
||||
if (typeof route.query.id === "string") {
|
||||
projectId.value = route.query.id;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (projectId.value) {
|
||||
getPromoCodes(projectId.value);
|
||||
}
|
||||
});
|
||||
|
||||
// 修改搜索处理 - 前端过滤
|
||||
const handleIdSearch = () => {
|
||||
const value = searchId.value.trim();
|
||||
|
||||
if (!value) {
|
||||
message.warning("请输入有效的推广码ID");
|
||||
return;
|
||||
}
|
||||
|
||||
const id = Number(value);
|
||||
if (isNaN(id)) {
|
||||
message.warning("ID必须为数字");
|
||||
return;
|
||||
}
|
||||
|
||||
// 在前端原始数据中过滤
|
||||
const result = originalTableData.value.filter(item => item.id === id);
|
||||
|
||||
if (result.length === 0) {
|
||||
message.warning("未找到匹配的推广码ID");
|
||||
}
|
||||
|
||||
// 更新显示数据
|
||||
displayData.value = result;
|
||||
};
|
||||
|
||||
// 重置搜索 - 显示所有数据
|
||||
const reset = () => {
|
||||
searchId.value = "";
|
||||
displayData.value = originalTableData.value;
|
||||
};
|
||||
|
||||
// 预览图片
|
||||
const handlePreview = (imageUrl: string) => {
|
||||
previewImage.value = imageUrl;
|
||||
previewVisible.value = true;
|
||||
};
|
||||
|
||||
// 新增推广码表单相关状态
|
||||
const addDrawerVisible = ref(false);
|
||||
const addFormState = reactive({
|
||||
promoCodeInfoKey: '',
|
||||
promoCodeLink: '',
|
||||
promoCodeImage: '',
|
||||
projectId: 0,
|
||||
promoCodeStatus: false
|
||||
});
|
||||
|
||||
// 打开新增表单
|
||||
const openAddDrawer = () => {
|
||||
addFormState.projectId = Number(projectId.value); // 自动关联当前项目
|
||||
addDrawerVisible.value = true;
|
||||
};
|
||||
|
||||
// 提交新增请求
|
||||
const handleAddSubmit = async () => {
|
||||
// 如果有文件需要上传
|
||||
if (fileList.value.length > 0) {
|
||||
const imageUrl = await handleUpload();
|
||||
if (!imageUrl) {
|
||||
message.error('图片上传失败，无法提交');
|
||||
return;
|
||||
}
|
||||
// 更新表单中的图片URL
|
||||
addFormState.promoCodeImage = imageUrl;
|
||||
}
|
||||
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
"/promoCode/add",
|
||||
{
|
||||
promoCodeInfoKey: addFormState.promoCodeInfoKey,
|
||||
promoCodeLink: addFormState.promoCodeLink,
|
||||
promoCodeImage: addFormState.promoCodeImage,
|
||||
projectId: addFormState.projectId,
|
||||
promoCodeStatus: addFormState.promoCodeStatus
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (res.code === 1) {
|
||||
message.success('新增成功');
|
||||
addDrawerVisible.value = false;
|
||||
await getPromoCodes(projectId.value);
|
||||
// 重置表单和文件列表
|
||||
Object.assign(addFormState, {
|
||||
promoCodeInfoKey: '',
|
||||
promoCodeLink: '',
|
||||
promoCodeImage: '',
|
||||
promoCodeStatus: false,
|
||||
projectId: Number(projectId.value)
|
||||
});
|
||||
fileList.value = [];
|
||||
} else {
|
||||
message.error(res.message || '新增失败');
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('新增请求失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 绑定新增按钮点击事件
|
||||
const goAddCode = () => {
|
||||
openAddDrawer();
|
||||
};
|
||||
|
||||
//删除操作
|
||||
const deletePromoCode = async (id: number) => {
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
"/promoCode/delete",
|
||||
{ id },
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功');
|
||||
// 刷新数据
|
||||
await getPromoCodes(projectId.value);
|
||||
} else {
|
||||
message.error(res.message || '删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('删除操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
//编辑
|
||||
// 编辑相关状态
|
||||
const editDrawerVisible = ref(false);
|
||||
const editFormState = reactive({
|
||||
id: 0,
|
||||
promoCodeInfoKey: '',
|
||||
promoCodeLink: '',
|
||||
promoCodeImage: '',
|
||||
projectId: 0,
|
||||
promoCodeStatus: false
|
||||
});
|
||||
const getPromoCodeDetail = async (id: number) => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
const response:any = await myAxios.post(
|
||||
"/promoCode/queryById",
|
||||
{ id },
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}
|
||||
);
|
||||
if (response.code === 1) {
|
||||
editFormState.id = response.data.id;
|
||||
editFormState.promoCodeInfoKey = response.data.promoCodeInfoKey;
|
||||
editFormState.promoCodeLink = response.data.promoCodeLink;
|
||||
editFormState.promoCodeImage = response.data.promoCodeImage;
|
||||
editFormState.projectId = response.data.projectId;
|
||||
editFormState.promoCodeStatus = response.data.promoCodeStatus;
|
||||
} else {
|
||||
message.error(response.message || "获取编辑数据失败");
|
||||
}
|
||||
} catch (err) {
|
||||
message.error("获取编辑数据失败，请重试");
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = async (id: number) => {
|
||||
await getPromoCodeDetail(id);
|
||||
editDrawerVisible.value = true;
|
||||
};
|
||||
|
||||
const handleEditSubmit = async () => {
|
||||
// 如果有文件需要上传
|
||||
if (fileList.value.length > 0) {
|
||||
const imageUrl = await handleUpload();
|
||||
if (!imageUrl) {
|
||||
message.error('图片上传失败，无法提交');
|
||||
return;
|
||||
}
|
||||
// 更新表单中的图片URL
|
||||
editFormState.promoCodeImage = imageUrl;
|
||||
}
|
||||
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
"/promoCode/update",
|
||||
{
|
||||
id: editFormState.id,
|
||||
promoCodeInfoKey: editFormState.promoCodeInfoKey,
|
||||
promoCodeLink: editFormState.promoCodeLink,
|
||||
promoCodeImage: editFormState.promoCodeImage,
|
||||
projectId: editFormState.projectId,
|
||||
promoCodeStatus: editFormState.promoCodeStatus
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}
|
||||
);
|
||||
if (res.code === 1) {
|
||||
message.success('编辑成功');
|
||||
editDrawerVisible.value = false;
|
||||
await getPromoCodes(projectId.value);
|
||||
// 重置文件列表
|
||||
fileList.value = [];
|
||||
} else {
|
||||
message.error(res.message || '编辑失败');
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('编辑请求失败');
|
||||
}
|
||||
};
|
||||
|
||||
//返回上一级
|
||||
const router = useRouter();
|
||||
|
||||
// 返回上一级方法
|
||||
const goBack = () => {
|
||||
router.go(-1); // 返回上一页
|
||||
};
|
||||
|
||||
// 添加文件上传相关状态
|
||||
const fileList = ref<any[]>([]);
|
||||
const uploading = ref(false);
|
||||
|
||||
// 图片上传处理
|
||||
const handleUpload = async () => {
|
||||
const formData = new FormData();
|
||||
fileList.value.forEach(file => {
|
||||
formData.append('file', file);
|
||||
});
|
||||
formData.append('biz', 'project'); // 添加biz参数
|
||||
|
||||
try {
|
||||
uploading.value = true;
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
"/file/upload",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
'Authorization': storedToken,
|
||||
'AflatScript': 'required', // 添加AflatScript头部
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (res.code === 1) {
|
||||
message.success('上传成功');
|
||||
// 将返回的文件路径保存到表单中
|
||||
addFormState.promoCodeImage = res.data;
|
||||
return res.data;
|
||||
} else {
|
||||
message.error(res.message || '上传失败');
|
||||
return null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传失败:', error);
|
||||
message.error('上传失败');
|
||||
return null;
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
};
|
||||
// 文件上传前的处理
|
||||
const beforeUpload = (file: any) => {
|
||||
// 检查文件类型
|
||||
const isImage = file.type.includes('image');
|
||||
if (!isImage) {
|
||||
message.error('只能上传图片文件!');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查文件大小 (限制为5MB)
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt5M) {
|
||||
message.error('图片大小不能超过5MB!');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 添加到文件列表
|
||||
fileList.value = [file];
|
||||
return false; // 手动上传
|
||||
};
|
||||
|
||||
// 清除文件
|
||||
const clearFile = () => {
|
||||
fileList.value = [];
|
||||
};
|
||||
|
||||
// 添加批量选择相关状态
|
||||
const selectedRowKeys = ref<number[]>([]); // 存储选中的行ID
|
||||
const batchDeleteLoading = ref(false); // 批量删除加载状态
|
||||
|
||||
// 行选择配置
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
onChange: (selectedKeys: number[]) => {
|
||||
selectedRowKeys.value = selectedKeys;
|
||||
},
|
||||
};
|
||||
|
||||
// 批量删除方法
|
||||
const batchDelete = async () => {
|
||||
if (selectedRowKeys.value.length === 0) {
|
||||
message.warning('请至少选择一条记录');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
batchDeleteLoading.value = true;
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res:any = await myAxios.post(
|
||||
"/promoCode/delBatch",
|
||||
{ ids: selectedRowKeys.value }, // 发送选中ID数组
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (res.code === 1) {
|
||||
message.success(`成功删除 ${selectedRowKeys.value.length} 条记录`);
|
||||
// 刷新数据
|
||||
await getPromoCodes(projectId.value);
|
||||
// 清空选择
|
||||
selectedRowKeys.value = [];
|
||||
} else {
|
||||
message.error(res.message || '批量删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('批量删除操作失败');
|
||||
} finally {
|
||||
batchDeleteLoading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-box">
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
<a-form-item label="推广码ID">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
placeholder="输入推广码ID进行查询"
|
||||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
type="number"
|
||||
class="custom-search"
|
||||
min="0"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
<a-button class="custom-button" @click="goAddCode">新增推广码</a-button>
|
||||
<a-button @click="goBack" class="custom-button">返回</a-button>
|
||||
|
||||
<!-- 添加批量删除按钮 -->
|
||||
<a-popconfirm
|
||||
title="确定要删除选中的推广码吗？"
|
||||
@confirm="batchDelete"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
>
|
||||
<a-button
|
||||
class="custom-button"
|
||||
type="danger"
|
||||
:disabled="selectedRowKeys.length === 0"
|
||||
:loading="batchDeleteLoading"
|
||||
>
|
||||
批量删除 ({{ selectedRowKeys.length }})
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
|
||||
<a-form-item label="当前项目ID">
|
||||
<a-tag color="blue">{{ projectId }}</a-tag>
|
||||
</a-form-item>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="displayData"
|
||||
:scroll="{ x: 1000, y: 550 }"
|
||||
:loading="loading"
|
||||
bordered
|
||||
rowKey="id"
|
||||
locale="{ emptyText: '暂无数据' }"
|
||||
:row-selection="rowSelection"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'promoCodeStatus'">
|
||||
<a-tag :color="record.promoCodeStatus ? 'red' : 'green'">
|
||||
{{ record.promoCodeStatus ? '占用' : '空闲' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'promoCodeImage'">
|
||||
<a-image
|
||||
v-if="record.promoCodeImage"
|
||||
:width="80"
|
||||
:src="downLoadImage+record.promoCodeImage"
|
||||
:preview="false"
|
||||
@click="handlePreview(record.promoCodeImage)"
|
||||
/>
|
||||
<span v-else>无图片</span>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space :size="8">
|
||||
<a-button
|
||||
size="small"
|
||||
danger
|
||||
@click="deletePromoCode(record.id)"
|
||||
:loading="loading"
|
||||
>
|
||||
删除
|
||||
</a-button>
|
||||
<a-button size="small" @click="handleEdit(record.id)">
|
||||
编辑
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 图片预览模态框 -->
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
|
||||
<img alt="预览图片" style="width: 100%" :src="downLoadImage+previewImage" />
|
||||
</a-modal>
|
||||
|
||||
<!-- 新增推广码抽屉 -->
|
||||
<a-drawer
|
||||
title="新增推广码"
|
||||
placement="right"
|
||||
:visible="addDrawerVisible"
|
||||
@close="addDrawerVisible = false"
|
||||
width="600"
|
||||
>
|
||||
<a-form
|
||||
:model="addFormState"
|
||||
layout="vertical"
|
||||
@finish="handleAddSubmit"
|
||||
>
|
||||
<a-form-item label="信息Key" required>
|
||||
<a-input v-model:value="addFormState.promoCodeInfoKey" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="推广链接" required>
|
||||
<a-input v-model:value="addFormState.promoCodeLink" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="推广码图片" required>
|
||||
<a-upload
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
:remove="clearFile"
|
||||
list-type="picture-card"
|
||||
accept="image/*"
|
||||
:max-count="1"
|
||||
>
|
||||
<div v-if="fileList.length < 1">
|
||||
<plus-outlined />
|
||||
<div class="ant-upload-text">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<div v-if="addFormState.promoCodeImage">
|
||||
已上传图片:
|
||||
<a :href="addFormState.promoCodeImage" target="_blank">查看</a>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="状态">
|
||||
<a-input-number
|
||||
value="空闲"
|
||||
:disabled="true"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="项目ID">
|
||||
<a-input-number
|
||||
v-model:value="addFormState.projectId"
|
||||
:disabled="true"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
class="custom-button"
|
||||
html-type="submit"
|
||||
:loading="uploading"
|
||||
>
|
||||
提交
|
||||
</a-button>
|
||||
<a-button style="margin-left: 10px" @click="addDrawerVisible = false">
|
||||
取消
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
<!-- 编辑推广码抽屉 -->
|
||||
<a-drawer
|
||||
title="编辑推广码"
|
||||
placement="right"
|
||||
:visible="editDrawerVisible"
|
||||
@close="editDrawerVisible = false"
|
||||
width="600"
|
||||
>
|
||||
<a-form
|
||||
:model="editFormState"
|
||||
layout="vertical"
|
||||
@finish="handleEditSubmit"
|
||||
>
|
||||
<a-form-item label="ID">
|
||||
<a-input v-model:value="editFormState.id" :disabled="true" />
|
||||
</a-form-item>
|
||||
<a-form-item label="信息Key" required>
|
||||
<a-input v-model:value="editFormState.promoCodeInfoKey" />
|
||||
</a-form-item>
|
||||
<a-form-item label="推广链接" required>
|
||||
<a-input v-model:value="editFormState.promoCodeLink" />
|
||||
</a-form-item>
|
||||
<a-form-item label="推广码图片" required>
|
||||
<a-upload
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
:remove="clearFile"
|
||||
list-type="picture-card"
|
||||
accept="image/*"
|
||||
:max-count="1"
|
||||
>
|
||||
<div v-if="fileList.length < 1">
|
||||
<plus-outlined />
|
||||
<div class="ant-upload-text">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<div v-if="editFormState.promoCodeImage">
|
||||
当前图片:
|
||||
<a :href="editFormState.promoCodeImage" target="_blank">查看</a>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-tag>
|
||||
{{ editFormState.promoCodeStatus ? '占用' : '空闲' }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="项目ID">
|
||||
<a-input-number
|
||||
v-model:value="editFormState.projectId"
|
||||
:disabled="true"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
class="custom-button"
|
||||
html-type="submit"
|
||||
:loading="uploading"
|
||||
>
|
||||
提交
|
||||
</a-button>
|
||||
<a-button style="margin-left: 10px" @click="editDrawerVisible = false">
|
||||
取消
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) {
|
||||
background-color: #fafafa !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) {
|
||||
background-color: #fafafa !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
/* 新增表格页脚样式 */
|
||||
.table-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
/* 调整分页器位置 */
|
||||
:deep(.ant-table-pagination.ant-pagination) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*橙色按钮*/
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button[disabled] {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
.custom-button.ant-btn-dangerous {
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.custom-button.ant-btn-dangerous:hover,
|
||||
.custom-button.ant-btn-dangerous:focus {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 保持原有的其他样式不变 */
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
/* 保持输入框原有样式不变 */
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-select-picture-card i) {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-select-picture-card .ant-upload-text) {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/*批量删除按钮操作*/
|
||||
.batch-delete-button {
|
||||
margin-left: 10px;
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.batch-delete-button:hover {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 添加选择计数样式 */
|
||||
.selection-count {
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user