refactor(brand-materials):重构品牌物料页面
- 优化页面布局和样式，使用 flex布局 - 重新组织组件结构，提高可维护性- 改进搜索和分页功能，提升用户体验 - 统一按钮和输入框样式，增强一致性 - 移除冗余代码，提高代码可读性
This commit is contained in:
林志军
@ -1,112 +1,126 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="view-body">
|
<div class="brand-wrap">
|
||||||
<div class="part-div">
|
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
|
||||||
<div class="part-div-header">
|
<div class="top flex h-64px px-24px py-10px justify-between items-center">
|
||||||
<span class="part-div-header-title">品牌物料</span>
|
<p class="text-18px font-400 lh-26px color-#211F24 title">品牌物料</p>
|
||||||
<a-button class="add-btn" type="primary" @click="handleAdd">+ 添加品牌</a-button>
|
<div class="flex items-center">
|
||||||
|
<a-button class="add-btn" type="primary" @click="handleAdd">+ 添加品牌</a-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a-space direction="vertical">
|
<div class="container px-24px pt-12px pb-24px">
|
||||||
<a-space size="medium" direction="content" style="margin-left: 24px; margin-bottom: 20px">
|
<div class="filter-row flex mb-20px">
|
||||||
<a-space>
|
<div class="filter-row-item flex items-center">
|
||||||
<span>品牌名称</span>
|
<span class="label">品牌名称</span>
|
||||||
<a-input v-model="listQuery.name" placeholder="请搜索..." size="medium" allow-clear>
|
<a-space size="medium">
|
||||||
<template #prefix>
|
<a-input v-model="query.name" class="w-240px" placeholder="请搜索..." size="medium" allow-clear>
|
||||||
<icon-search />
|
<template #prefix>
|
||||||
</template>
|
<icon-search />
|
||||||
</a-input>
|
</template>
|
||||||
</a-space>
|
</a-input>
|
||||||
|
</a-space>
|
||||||
<a-space style="margin-left: 20px">
|
</div>
|
||||||
<a-button type="outline" size="medium" class="search-btn" @click="handleSearch">
|
<div class="filter-row flex">
|
||||||
|
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-search />
|
<icon-search />
|
||||||
</template>
|
</template>
|
||||||
<template #default>搜索</template>
|
<template #default>搜索</template>
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button type="outline" size="medium" class="reset-btn" @click="handleReset">
|
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-refresh />
|
<icon-refresh />
|
||||||
</template>
|
</template>
|
||||||
<template #default>重置</template>
|
<template #default>重置</template>
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-space>
|
</div>
|
||||||
</a-space>
|
|
||||||
|
|
||||||
<!-- 表格 -->
|
|
||||||
<a-table :data="listResult.data" class="a-table" :pagination="false">
|
|
||||||
<template #columns>
|
|
||||||
<a-table-column title="品牌名称" data-index="name" />
|
|
||||||
<a-table-column title="品牌logo" data-index="logo">
|
|
||||||
<template #cell="{ record }">
|
|
||||||
<img :src="record.logo" style="width: 50px; height: 50px" />
|
|
||||||
</template>
|
|
||||||
</a-table-column>
|
|
||||||
<a-table-column title="Slogan" data-index="slogan" />
|
|
||||||
<a-table-column title="操作" data-index="optional">
|
|
||||||
<template #cell="{ record }">
|
|
||||||
<a-space size="medium">
|
|
||||||
<a-space>
|
|
||||||
<a-popconfirm
|
|
||||||
content="确定删除吗?"
|
|
||||||
type="warning"
|
|
||||||
ok-text="确认删除"
|
|
||||||
cancel-text="取消"
|
|
||||||
@ok="deleteBrand(record.id)"
|
|
||||||
>
|
|
||||||
<icon-delete></icon-delete>
|
|
||||||
</a-popconfirm>
|
|
||||||
</a-space>
|
|
||||||
<a-space>
|
|
||||||
<a-button type="outline" @click="handleEdit(record.id)">编辑</a-button>
|
|
||||||
</a-space>
|
|
||||||
</a-space>
|
|
||||||
</template>
|
|
||||||
</a-table-column>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
|
|
||||||
<div style="float: right; margin-right: 10px">
|
|
||||||
<a-pagination :total="listResult.total" :size="listQuery.page_size" show-total show-jumper show-page-size />
|
|
||||||
</div>
|
</div>
|
||||||
</a-space>
|
<a-modal
|
||||||
<!-- 新增/编辑品牌弹窗 -->
|
v-model:visible="modalVisible"
|
||||||
<a-modal
|
:mask-closable="false"
|
||||||
v-model:visible="modalVisible"
|
:esc-to-close="false"
|
||||||
:mask-closable="false"
|
width="510px"
|
||||||
:esc-to-close="false"
|
@cancel="handleModalCancel"
|
||||||
width="510px"
|
>
|
||||||
@cancel="handleModalCancel"
|
<template #title>
|
||||||
>
|
<span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
|
||||||
<template #title>
|
</template>
|
||||||
<span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
|
<a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
|
||||||
</template>
|
<a-form-item field="name" label="品牌名称">
|
||||||
<a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
|
<a-input v-model="form.name" class="h-36px" placeholder="请输入..." />
|
||||||
<a-form-item field="name" label="品牌名称">
|
</a-form-item>
|
||||||
<a-input v-model="form.name" placeholder="请输入..." />
|
<a-form-item field="logo" class="form-item-logo" label="标准版Logo">
|
||||||
</a-form-item>
|
<a-space>
|
||||||
<a-form-item field="logo" class="form-item-logo" label="标准版Logo">
|
<ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
|
||||||
<a-space>
|
</a-space>
|
||||||
<ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
|
<a-space>
|
||||||
</a-space>
|
<span class="form-tip">（品牌常规展示使用，支持PNG，JPG格式）</span>
|
||||||
<a-space>
|
</a-space>
|
||||||
<span class="form-tip">（品牌常规展示使用，支持PNG，JPG格式）</span>
|
</a-form-item>
|
||||||
</a-space>
|
<a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
|
||||||
</a-form-item>
|
<ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
|
||||||
<a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
|
</a-form-item>
|
||||||
<ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
|
<a-form-item field="slogan" label="Slogan">
|
||||||
</a-form-item>
|
<a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
|
||||||
<a-form-item field="slogan" label="Slogan">
|
</a-form-item>
|
||||||
<a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
|
</a-form>
|
||||||
</a-form-item>
|
<template #footer>
|
||||||
</a-form>
|
<a-button @click="handleModalCancel">取消</a-button>
|
||||||
<template #footer>
|
<a-button type="primary" @click="handleModalOk">{{ btn_str }}</a-button>
|
||||||
<a-button @click="handleModalCancel">取消</a-button>
|
</template>
|
||||||
<a-button type="primary" @click="handleModalOk">{{ btn_str }}</a-button>
|
</a-modal>
|
||||||
</template>
|
</div>
|
||||||
</a-modal>
|
|
||||||
</div>
|
</div>
|
||||||
</view>
|
<div
|
||||||
|
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
|
||||||
|
>
|
||||||
|
<a-table :data="tableData" ref="tableRef" :pagination="false">
|
||||||
|
<template #columns>
|
||||||
|
<a-table-column title="品牌名称" data-index="name" />
|
||||||
|
<a-table-column title="品牌logo" data-index="logo">
|
||||||
|
<template #cell="{ record }">
|
||||||
|
<img :src="record.logo" style="width: 50px; height: 50px" />
|
||||||
|
</template>
|
||||||
|
</a-table-column>
|
||||||
|
<a-table-column title="Slogan" data-index="slogan" />
|
||||||
|
<a-table-column title="操作" data-index="optional">
|
||||||
|
<template #cell="{ record }">
|
||||||
|
<a-space size="medium">
|
||||||
|
<a-space>
|
||||||
|
<a-popconfirm
|
||||||
|
content="确定删除吗?"
|
||||||
|
type="warning"
|
||||||
|
ok-text="确认删除"
|
||||||
|
cancel-text="取消"
|
||||||
|
@ok="deleteBrand(record.id)"
|
||||||
|
>
|
||||||
|
<icon-delete></icon-delete>
|
||||||
|
</a-popconfirm>
|
||||||
|
</a-space>
|
||||||
|
<a-space>
|
||||||
|
<a-button class="edit-btn" type="outline" @click="handleEdit(record.id)">编辑</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</a-table-column>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
|
||||||
|
<div class="pagination-box">
|
||||||
|
<a-pagination
|
||||||
|
:total="pageInfo.total"
|
||||||
|
size="mini"
|
||||||
|
show-total
|
||||||
|
show-jumper
|
||||||
|
show-page-size
|
||||||
|
:current="pageInfo.page"
|
||||||
|
:page-size="pageInfo.pageSize"
|
||||||
|
@change="onPageChange"
|
||||||
|
@page-size-change="onPageSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -123,15 +137,17 @@ import {
|
|||||||
} from '@/api/all/enterpriseKnowledge';
|
} from '@/api/all/enterpriseKnowledge';
|
||||||
import ImageUpload from '@/components/upload/ImageUpload.vue';
|
import ImageUpload from '@/components/upload/ImageUpload.vue';
|
||||||
|
|
||||||
const searchName = ref('');
|
const tableRef = ref(null);
|
||||||
const current = ref(1);
|
|
||||||
|
|
||||||
const listResult = reactive({
|
const tableData = ref([]);
|
||||||
data: ref([]),
|
|
||||||
total: ref(0),
|
const pageInfo = reactive({
|
||||||
|
page: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total: 100,
|
||||||
});
|
});
|
||||||
|
|
||||||
const listQuery = reactive({
|
const query = reactive({
|
||||||
page: ref(1),
|
page: ref(1),
|
||||||
name: ref(''),
|
name: ref(''),
|
||||||
page_size: ref('10'),
|
page_size: ref('10'),
|
||||||
@ -158,12 +174,38 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
getMaterialsList(listQuery).then((response) => {
|
//将query 和pageInfo 合并成query
|
||||||
listResult.data = response.data.data;
|
query.page = pageInfo.page;
|
||||||
listResult.total = response.data.total;
|
query.page_size = pageInfo.pageSize;
|
||||||
|
getMaterialsList(query).then((response) => {
|
||||||
|
tableData.value = response.data.data;
|
||||||
|
pageInfo.total = response.data.total;
|
||||||
|
console.log(tableData.value, 'tableData.value');
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const reload = () => {
|
||||||
|
pageInfo.page = 1;
|
||||||
|
handleSearch();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
pageInfo.page = 1;
|
||||||
|
pageInfo.pageSize = 20;
|
||||||
|
pageInfo.total = 0;
|
||||||
|
query.name = '';
|
||||||
|
reload();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onPageChange = (current) => {
|
||||||
|
pageInfo.page = current;
|
||||||
|
handleSearch();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onPageSizeChange = (pageSize) => {
|
||||||
|
pageInfo.pageSize = pageSize;
|
||||||
|
reload();
|
||||||
|
};
|
||||||
const deleteBrand = (id) => {
|
const deleteBrand = (id) => {
|
||||||
console.log(id, 'id');
|
console.log(id, 'id');
|
||||||
deleteMaterials(id).then(() => {
|
deleteMaterials(id).then(() => {
|
||||||
@ -172,11 +214,6 @@ const deleteBrand = (id) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
function handleReset() {
|
|
||||||
listQuery.name = '';
|
|
||||||
listQuery.page = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleAdd() {
|
function handleAdd() {
|
||||||
btn_str.value = '确认添加';
|
btn_str.value = '确认添加';
|
||||||
form.id = 0;
|
form.id = 0;
|
||||||
|
|||||||
@ -1,210 +1,82 @@
|
|||||||
@import "@/views/property-marketing/component.scss";
|
.brand-wrap {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
.view-body {
|
:deep(.search-btn) {
|
||||||
//每块div布局
|
|
||||||
.part-div {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--BG-white, white);
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 8px;
|
|
||||||
outline: 1px var(--BG-300, #E6E6E8) solid;
|
|
||||||
outline-offset: -1px;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
display: inline-flex;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
//每块div 头部
|
|
||||||
.part-div-header {
|
|
||||||
align-self: stretch;
|
|
||||||
height: 64px;
|
|
||||||
padding: 10px 24px 10px 24px;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
display: inline-flex
|
|
||||||
}
|
|
||||||
|
|
||||||
//每块div 标题
|
|
||||||
.part-div-header-title {
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
color: var(--Text-1, #211F24);
|
|
||||||
font-size: 18px;
|
|
||||||
font-family: Alibaba PuHuiTi;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 26px;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
//无数据样式
|
|
||||||
.non-data {
|
|
||||||
display: flex;
|
|
||||||
align-items: center; /* 垂直居中 */
|
|
||||||
justify-content: center; /* 水平居中，如果需要的话 */
|
|
||||||
height: 50%; /* 示例：父容器高度为视口高度 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.non-data-str {
|
|
||||||
// 暂无品牌
|
|
||||||
color: var(--Text-3, #737478);
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: Alibaba PuHuiTi;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 22px;
|
|
||||||
word-wrap: break-word;
|
|
||||||
margin: 20px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
//添加按钮
|
|
||||||
.add-btn {
|
|
||||||
font-size: 15px;
|
|
||||||
padding: 0 24px;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
float: right;
|
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||||
width: 110px;
|
color: #6d4cfe;
|
||||||
height: 35px;
|
|
||||||
position: absolute;
|
|
||||||
line-height: 110px;
|
|
||||||
right: 35px;
|
|
||||||
margin-top: 10px
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//分页
|
:deep(.edit-btn) {
|
||||||
.materials-page {
|
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||||
background: #fff;
|
color: #6d4cfe;
|
||||||
border-radius: 8px;
|
|
||||||
padding: 32px 24px 24px 24px;
|
|
||||||
min-height: 600px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-row {
|
:deep(.reset-btn) {
|
||||||
display: flex;
|
border-radius: 4px;
|
||||||
justify-content: space-between;
|
border: 1px solid var(--BG-500, #b1b2b5);
|
||||||
align-items: center;
|
background: var(--BG-white, #fff);
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.table-wrap {
|
||||||
font-size: 20px;
|
width: 100%;
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
.pagination-box {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 24px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-row {
|
.container {
|
||||||
display: flex;
|
.filter-row {
|
||||||
align-items: center;
|
.filter-row-item {
|
||||||
gap: 12px;
|
&:not(:last-child) {
|
||||||
margin-bottom: 20px;
|
margin-right: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.label {
|
||||||
width: 240px;
|
margin-right: 8px;
|
||||||
}
|
color: #211f24;
|
||||||
|
font-family: 'Alibaba PuHuiTi';
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
flex-shrink: 0;
|
||||||
|
line-height: 22px; /* 157.143% */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.reset-btn {
|
|
||||||
min-width: 72px;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-btn,
|
|
||||||
{
|
|
||||||
min-width: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-table {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-cell {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-emoji {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-text {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-size-select {
|
|
||||||
width: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-card {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
border: 1px dashed #d9d9d9;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #999;
|
|
||||||
font-size: 24px;
|
|
||||||
background: #fafafa;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-tip {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-tip {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item-logo .logo-upload-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-upload-card {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.a-form .a-form-item {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-modal .a-modal-footer {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a-table {
|
|
||||||
margin-left: 24px;
|
|
||||||
margin-right: 24px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-title {
|
:deep(.arco-input-wrapper),
|
||||||
position: absolute;
|
:deep(.arco-select-view-single),
|
||||||
left: 10px;
|
:deep(.arco-textarea-wrapper),
|
||||||
}
|
:deep(.arco-select-view-multiple) {
|
||||||
|
border-radius: 4px;
|
||||||
|
border-color: #d7d7d9;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
&:focus-within,
|
||||||
|
&.arco-input-focus {
|
||||||
|
background-color: var(--color-bg-2);
|
||||||
|
border-color: rgb(var(--primary-6));
|
||||||
|
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.form-tip {
|
.form-tip {
|
||||||
|
font-size: 12px;
|
||||||
color: #999;
|
color: #999;
|
||||||
font-size: 13px;
|
margin-top: 4px;
|
||||||
margin-left: 8px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user