refactor(brand-materials):重构品牌物料页面
- 优化页面布局和样式，使用 flex布局 - 重新组织组件结构，提高可维护性- 改进搜索和分页功能，提升用户体验 - 统一按钮和输入框样式，增强一致性 - 移除冗余代码，提高代码可读性
This commit is contained in:
林志军
@ -1,112 +1,126 @@
|
||||
<template>
|
||||
<view class="view-body">
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">品牌物料</span>
|
||||
<a-button class="add-btn" type="primary" @click="handleAdd">+ 添加品牌</a-button>
|
||||
<div class="brand-wrap">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
|
||||
<div class="top flex h-64px px-24px py-10px justify-between items-center">
|
||||
<p class="text-18px font-400 lh-26px color-#211F24 title">品牌物料</p>
|
||||
<div class="flex items-center">
|
||||
<a-button class="add-btn" type="primary" @click="handleAdd">+ 添加品牌</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-space direction="vertical">
|
||||
<a-space size="medium" direction="content" style="margin-left: 24px; margin-bottom: 20px">
|
||||
<a-space>
|
||||
<span>品牌名称</span>
|
||||
<a-input v-model="listQuery.name" placeholder="请搜索..." size="medium" allow-clear>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
|
||||
<a-space style="margin-left: 20px">
|
||||
<a-button type="outline" size="medium" class="search-btn" @click="handleSearch">
|
||||
<div class="container px-24px pt-12px pb-24px">
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">品牌名称</span>
|
||||
<a-space size="medium">
|
||||
<a-input v-model="query.name" class="w-240px" placeholder="请搜索..." size="medium" allow-clear>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row flex">
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</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>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</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"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
width="510px"
|
||||
@cancel="handleModalCancel"
|
||||
>
|
||||
<template #title>
|
||||
<span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
|
||||
</template>
|
||||
<a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
|
||||
<a-form-item field="name" label="品牌名称">
|
||||
<a-input v-model="form.name" placeholder="请输入..." />
|
||||
</a-form-item>
|
||||
<a-form-item field="logo" class="form-item-logo" label="标准版Logo">
|
||||
<a-space>
|
||||
<ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span class="form-tip">（品牌常规展示使用，支持PNG，JPG格式）</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
|
||||
<ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
|
||||
</a-form-item>
|
||||
<a-form-item field="slogan" label="Slogan">
|
||||
<a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleModalCancel">取消</a-button>
|
||||
<a-button type="primary" @click="handleModalOk">{{ btn_str }}</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
v-model:visible="modalVisible"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
width="510px"
|
||||
@cancel="handleModalCancel"
|
||||
>
|
||||
<template #title>
|
||||
<span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
|
||||
</template>
|
||||
<a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
|
||||
<a-form-item field="name" label="品牌名称">
|
||||
<a-input v-model="form.name" class="h-36px" placeholder="请输入..." />
|
||||
</a-form-item>
|
||||
<a-form-item field="logo" class="form-item-logo" label="标准版Logo">
|
||||
<a-space>
|
||||
<ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span class="form-tip">（品牌常规展示使用，支持PNG，JPG格式）</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
|
||||
<ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
|
||||
</a-form-item>
|
||||
<a-form-item field="slogan" label="Slogan">
|
||||
<a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleModalCancel">取消</a-button>
|
||||
<a-button type="primary" @click="handleModalOk">{{ btn_str }}</a-button>
|
||||
</template>
|
||||
</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>
|
||||
|
||||
<script setup>
|
||||
@ -123,15 +137,17 @@ import {
|
||||
} from '@/api/all/enterpriseKnowledge';
|
||||
import ImageUpload from '@/components/upload/ImageUpload.vue';
|
||||
|
||||
const searchName = ref('');
|
||||
const current = ref(1);
|
||||
const tableRef = ref(null);
|
||||
|
||||
const listResult = reactive({
|
||||
data: ref([]),
|
||||
total: ref(0),
|
||||
const tableData = ref([]);
|
||||
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 100,
|
||||
});
|
||||
|
||||
const listQuery = reactive({
|
||||
const query = reactive({
|
||||
page: ref(1),
|
||||
name: ref(''),
|
||||
page_size: ref('10'),
|
||||
@ -158,12 +174,38 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
getMaterialsList(listQuery).then((response) => {
|
||||
listResult.data = response.data.data;
|
||||
listResult.total = response.data.total;
|
||||
//将query 和pageInfo 合并成query
|
||||
query.page = pageInfo.page;
|
||||
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) => {
|
||||
console.log(id, 'id');
|
||||
deleteMaterials(id).then(() => {
|
||||
@ -172,11 +214,6 @@ const deleteBrand = (id) => {
|
||||
});
|
||||
};
|
||||
|
||||
function handleReset() {
|
||||
listQuery.name = '';
|
||||
listQuery.page = 1;
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
btn_str.value = '确认添加';
|
||||
form.id = 0;
|
||||
|
||||
@ -1,210 +1,82 @@
|
||||
@import "@/views/property-marketing/component.scss";
|
||||
.brand-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.view-body {
|
||||
//每块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;
|
||||
:deep(.search-btn) {
|
||||
border-radius: 4px;
|
||||
float: right;
|
||||
width: 110px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
line-height: 110px;
|
||||
right: 35px;
|
||||
margin-top: 10px
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
color: #6d4cfe;
|
||||
}
|
||||
|
||||
//分页
|
||||
.materials-page {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 32px 24px 24px 24px;
|
||||
min-height: 600px;
|
||||
:deep(.edit-btn) {
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
color: #6d4cfe;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
:deep(.reset-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
background: var(--BG-white, #fff);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.container {
|
||||
.filter-row {
|
||||
.filter-row-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 240px;
|
||||
}
|
||||
.label {
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-select-view-single),
|
||||
: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 {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
margin-left: 8px;
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user