Skip to content

W
wangxiaolu-sfa-ui
提交 c723ba1b authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

refactor(prd_tag): 商品标签_样式重写

同上
上级 3dfe7d6d
隐藏空白字符变更
内嵌 并排
正在显示 包含 135 行增加 和 111 行删除
src/assets/styles/index.scss
浏览文件 @ c723ba1b
......@@ -131,6 +131,7 @@ aside {
padding: 20px;
>div{
width: 100%;
padding: 20px;
}
}
......
src/components/CategoryTree/index.vue
浏览文件 @ c723ba1b
......@@ -15,7 +15,7 @@
<div class="scroll"
:class="{ 'row_gap': customOptions.rowGap }">
<el-tree :data="options"
v-loading="loading"
v-loading="customOptions.loading"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
......@@ -35,10 +35,14 @@
<span v-if="customOptions.showTool"
class="edit_del">
<span style="margin-right: 10px;">创建人：{{ data.createBy }}</span>
<i class="el-icon-edit"
@click.stop="$emit('flodEdit', data)"></i>
<i class="el-icon-delete"
@click.stop="$emit('flodDel', data)"></i>
<el-icon class="el-icon-edit"
@click.stop="$emit('flodEdit', data)">
<Edit />
</el-icon>
<el-icon class="el-icon-delete"
@click.stop="$emit('flodDel', data)">
<Delete />
</el-icon>
</span>
</template>
</el-tree>
......@@ -92,13 +96,9 @@ const props = defineProps({
type: String,
default: '搜索关键字'
},
// 加载状态
loading: {
type: Boolean,
default: false
},
// 选中某行数据对象
value: {
modelValue: {
type: [Number, String],
default: ''
},
......@@ -120,7 +120,9 @@ const props = defineProps({
// 底部分页是否显示
showPagination: false,
// 分页数据总条数
total: 0
total: 0,
// 加载状态
loading: false
})
}
})
......@@ -153,7 +155,7 @@ watch(searchValue, (val) => {
})
// 如果有 v-model 则设置默认选中值
watch(() => props.value, (val) => {
watch(() => props.modelValue, (val) => {
if (val) {
nextTick(() => {
treeRef.value.setCurrentKey(val)
......@@ -203,61 +205,71 @@ const getPageList = () => {
.el-col {
padding: 0 !important;
height: 100%;
display: flex;
flex-direction: column;
transition: all .3s;
position: relative;
.content {
height: 100%;
display: flex;
flex-direction: column;
border-right: 1px solid rgb(208, 208, 208);
/* 按钮集合 */
.buttons_wrap {
padding-right: 10px;
display: flex;
gap: 50px;
margin-bottom: 20px;
}
}
}
.el-tree{
font-size: var(--xl-fontsize);
}
.scroll {
flex: 1;
overflow-y: scroll;
::v-deep(.custom-tree-node) {
width: 100%;
padding-right: 20px;
font-size: 14px;
/* 灰色滚动条背景 */
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
.edit_del {
float: right;
/* 向左折叠的箭头 */
.arrow {
right: -5px;
}
i {
margin-right: 5px;
font-size: 13px;
.buttons_wrap {
padding-right: 20px;
}
}
}
/* 间距放大 */
::v-deep(.row_gap .el-tree-node .el-tree-node__content) {
padding: 10px 0;
height: auto;
}
.edit_del {
padding-right: 10px;
margin-left: auto;
font-size: calc(var(--xl-fontsize));
display: flex;
align-items: center;
/* el-tree 取消选中时背景还有个颜色去掉 */
::v-deep(.el-tree-node:focus>.el-tree-node__content) {
background-color: transparent;
}
i {
margin-right: 10px;
}
}
/* el-tree 选中时的背景色设置 */
::v-deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
background-color: #edf6ff !important;
}
.scroll {
display: flex;
flex-direction: column;
::v-deep .el-input--small {
padding-right: 10px;
}
.el-tree {
flex: 1;
font-size: var(--xl-fontsize);
}
.el-col {
display: flex;
flex-direction: column;
transition: all .3s;
position: relative;
.pagination-container {
position: sticky;
bottom: 10px;
margin-top: auto;
}
}
}
.arrow {
position: absolute;
......@@ -273,39 +285,34 @@ const getPageList = () => {
background-color: white;
z-index: 2;
}
}
.content {
height: 100%;
display: flex;
flex-direction: column;
/* 按钮集合 */
.buttons_wrap {
display: flex;
gap: 50px;
margin-bottom: 20px;
}
.scroll {
flex: 1;
overflow-y: scroll;
::v-deep(.custom-tree-node) {
width: 100%;
padding-right: 20px;
font-size: 14px;
}
/* 灰色滚动条背景 */
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
/* 间距放大 */
::v-deep(.row_gap .el-tree-node .el-tree-node__content) {
padding: 10px 0;
height: auto;
}
/* 向左折叠的箭头 */
.arrow {
right: -5px;
}
/* el-tree 取消选中时背景还有个颜色去掉 */
::v-deep(.el-tree-node:focus>.el-tree-node__content) {
background-color: transparent;
}
& {
border-right: 1px solid rgb(208, 208, 208);
}
}
/* el-tree 选中时的背景色设置 */
::v-deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
background-color: #edf6ff !important;
}
::v-deep(.el-input--small) {
padding-right: 10px;
}
::v-deep(.el-input__suffix:last-of-type) {
......
src/views/bi/competitor/index.vue
浏览文件 @ c723ba1b
......@@ -33,7 +33,6 @@ provide('activeName', activeName);
.tabs {
background: var(--el-bg-color-overlay);
padding: 20px;
display: flex;
flex-direction: column;
width: 100%;
......
src/views/bi/prd_tag/index.vue
浏览文件 @ c723ba1b
<template>
<div class="app-container">
<el-row :gutter="20"
class="row">
<el-row :gutter="20" class="client-fix-height">
<!--商品分类-->
<category-tree :options="tagsOptions"
:defaultProps="defaultProps"
:nodeKey="nodeKey"
placeholder="搜索商品集合标签"
v-model="queryParams.prdTagId"
@search="handleQuery"
:colSpan="14"
:rowGap="true"
showEditDel
:customOptions="{
showTool: true,
showIcon: true,
rowGap: 10,
showPagination: true,
total: tagTotal,
loading: flodLoading
}"
@flodEdit="handleFlodEdit"
@flodDel="handleFlodDel"
:loading="flodLoading"
:showIcon="true"
:isPagination="true"
:total="tagTotal"
@search="handleQuery"
@pageChange="getSeriesGoodsTagList">
<template #buttons>
<el-button type="primary"
plain
icon="el-icon-plus"
size="mini"
icon="Plus"
@click="handleAdd"
v-hasPermi="['gen:info:add']">新增</el-button>
</template>
......@@ -36,13 +36,14 @@
<el-table-column label="商品编码"
prop="prdCode" />
<el-table-column label="商品名称"
width="300"
prop="prdName" />
<el-table-column label="系列名称"
prop="series" />
</el-table>
<!-- 添加或修改商品-标签详情对话框 -->
<el-dialog :title="title"
v-model:visible="open"
v-model="open"
append-to-body>
<el-form ref="formRef"
:model="form"
......@@ -92,7 +93,7 @@ const defaultProps = reactive({
});
const nodeKey = 'prdTagId';
// 查询参数
const queryParams = ref({
const queryParams = reactive({
prdTagId: null
});
// 右侧-商品列表
......@@ -160,15 +161,16 @@ const getSeriesList = async () => {
};
// 获取商品-标签集合列表
const getSeriesGoodsTagList = async (queryParams = { pageNum: 1, pageSize: 10 }) => {
const getSeriesGoodsTagList = async (params = { pageNum: 1, pageSize: 10 }) => {
const { data: { total, rows } } = await getSeriesGoodsTagListAPI({
...queryParams,
tagNameLike: queryParams.searchKey
...params,
tagNameLike: params.searchKey
});
tagTotal.value = total;
tagsOptions.value = rows;
// 获取商品-标签指定第一个详情
queryParams.prdTagId = rows[0]?.prdTagId;
queryParams.prdTagId = rows[0].prdTagId;
getTagDetailsList();
};
......@@ -176,7 +178,7 @@ const getSeriesGoodsTagList = async (queryParams = { pageNum: 1, pageSize: 10 })
const getTagDetailsList = async () => {
loading.value = true;
const response = await getPrdTagDetailAPI({
prdTagId: queryParams.value.prdTagId
prdTagId: queryParams.prdTagId
});
prdList.value = response.data;
loading.value = false;
......@@ -247,7 +249,7 @@ const reset = () => {
}
/** 商品集合标签点击-搜索右侧商品列表 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
queryParams.pageNum = 1;
getTagDetailsList();
}
/** 新增按钮操作 */
......@@ -296,21 +298,34 @@ getSeriesGoodsTagList()
<style scoped
lang="scss">
::v-deep .row {
height: 100%;
display: flex;
.app-container {
.el-row {
background-color: var(--el-bg-color-overlay);
}
.right_col {
flex: 1;
overflow: scroll;
flex: 1 !important;
transition: all .5s;
display: flex;
flex-direction: column;
height: 100%;
&::-webkit-scrollbar {
height: 0;
.el-form-item {
margin-bottom: 0;
}
}
}
.pagination {
/* 没办法设置某个子元素单独在主轴排列方式，使用此方式可以 */
margin-top: auto;
}
&.el-col-10 {
width: 41.666666%;
max-width: none;
}
}
}
</style>
<style lang="scss">
.my_popper {
......
src/views/bi/product/index.vue
浏览文件 @ c723ba1b
......@@ -180,7 +180,6 @@ getProductList()
>.el-row {
/* flex: 1; */
display: flex;
padding: 20px;
background-color: var(--el-bg-color-overlay);
.right_col {
......
src/views/bi/sale/index.vue
浏览文件 @ c723ba1b
......@@ -609,7 +609,6 @@ init()
background-color: var(--el-bg-color-overlay);
margin-top: 20px;
width: 100%;
padding: 20px;
/* 图容器 */
.echarts_wrap {
......
src/views/index.vue
浏览文件 @ c723ba1b
<template>
<div class="dashboard-editor-container app-container">
<div class="app-container">
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<common-menu />
<el-row :gutter="20"
......@@ -69,8 +69,12 @@ const handleSetLineChartData = (type) => {
<style lang="scss"
scoped>
.dashboard-editor-container {
.app-container {
padding: 20px;
>div {
padding: 0;
}
.chart-wrapper {
background: var(--el-bg-color-overlay);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论