提交 9f6b5ec7 authored 作者: lidongxu's avatar lidongxu

Merge branch 'ap' into dev

......@@ -34,14 +34,14 @@
"lib-flexible": "^0.3.2",
"mitt": "^3.0.1",
"nprogress": "0.2.0",
"pinia": "2.1.7",
"pinia": "^3.0.4",
"splitpanes": "3.1.5",
"uuid": "^11.0.5",
"vant": "^4.9.18",
"vue": "^3.5.13",
"vue": "^3.5.25",
"vue-count-to": "^1.0.13",
"vue-cropper": "1.1.1",
"vue-router": "4.4.0",
"vue-router": "^4.6.3",
"vue3-count-to": "^1.1.2",
"vuedraggable": "^4.1.0"
},
......
<template>
<div class="search" v-show="showSearch">
<div class="search"
v-show="showSearch">
<el-form :inline="true"
:model="queryParams"
class="demo-form-inline">
......@@ -28,7 +29,8 @@
@input="handleChange"
clearable />
</el-form-item>
<el-form-item label="门店编码/名称" v-if="showStoreSearch">
<el-form-item label="门店编码/名称"
v-if="showStoreSearch">
<el-input v-model="queryParams.storeCN"
placeholder="请输入门店编码/名称"
@input="handleChange"
......@@ -47,20 +49,17 @@ const props = defineProps({
showStoreSearch: {
type: Boolean,
default: true
},
queryParams: {
type: Object,
default: () => ({})
}
})
const queryParams = reactive({
// 当月
salesMonth: new Date(),
deptName: '',
dealerCN: '',
lineNameLike: '',
storeCN: ''
})
const emits = defineEmits(['change'])
const handleChange = () => {
emits('change', queryParams)
emits('change')
}
</script>
......
......@@ -3,8 +3,7 @@
<!-- 操作类型 -->
<el-row>
<el-form-item>
<el-radio-group v-model="operation"
@change="checkTableColumns">
<el-radio-group v-model="operation">
<el-radio-button label="展示模式"
value="展示模式" />
<el-radio-button label="填报模式"
......@@ -77,13 +76,11 @@
</div>
<!-- 公式计算 -->
<div v-else-if="col.type === 'formula'">
{{ col.func(row) }}
{{ row[col.prop] || '-' }}
</div>
<!-- 其他类型内容 -->
<div cllass="fill-span-wrap"
v-else>
<!-- 正常显示 -->
<span class="fill-span">{{ row[col.prop] || '-' }}</span>
<!-- 其他类型内容(正常显示文字) -->
<div class="fill-span-wrap"
v-else>{{ row[col.prop] || '-' }}
</div>
</div>
<!-- 展示模式 -->
......@@ -97,10 +94,10 @@
<pagination :total="total"
v-model:page="params.pageNum"
v-model:limit="params.pageSize"
:pageSizes="[10, 20, 50, 100]"
@pagination="getTableList" />
</div>
</div>
<!-- 表格弹窗 - 使用DOM移动而非复制 -->
<el-dialog v-model="showTableInDialog"
title="表格详情"
......@@ -115,27 +112,16 @@
<script setup>
import { h } from 'vue'
import userStore from '@/store/modules/user'
const props = defineProps({
tableColumns: { // 表格列
type: Array,
default: () => []
},
chooseColumns: { // 显隐列数据结构
type: Array,
default: () => []
},
visibleProps: { // 显隐列数据,默认勾选的列
tableData: { // 数据源
type: Array,
default: () => []
},
tableData: { // 数据源
baseColumns: { // 表格列
type: Array,
default: () => []
},
isLoading: { // 表格加载状态
type: Boolean,
default: false
},
total: { // 总条数
type: Number,
default: 0
......@@ -147,7 +133,7 @@ const props = defineProps({
pageSize: 10,
})
},
showFill: { // 是否显示填报模式
isLoading: { // 表格加载状态
type: Boolean,
default: false
},
......@@ -156,27 +142,60 @@ const props = defineProps({
default: (row, col, cellValue) => cellValue
}
})
const emit = defineEmits(['updateColumns', 'getTableList', 'updateShowSearch'])
const emit = defineEmits(['getTableList', 'updateShowSearch'])
/*************** 工具栏 ***************/
// 切换平铺/填报模式
const operation = ref('展示模式');
// const operation = ref('填报模式');
const showFill = userStore().hasQcMarketEmpInfo // 是否启用填报模式
// const operation = ref('展示模式'); // 切换平铺/填报模式
const operation = ref('填报模式'); // 切换平铺/填报模式
const tableRef = ref(null)
const checkTableColumns = async () => {
// 通知外面传入 tableColumns / chooseColumns 数据源
await emit('updateColumns', operation.value)
const chooseColumns = ref([]) // 右上角工具显隐列选择
// 使用computed缓存展示列,避免重复创建
const displayModeColumns = computed(() => {
return props.baseColumns.flatMap(item => {
if (item.children) {
return item.children.filter(child => !child.onlyFill);
}
return [];
});
});
// 使用computed缓存填报列,避免重复创建
const fillModeColumns = computed(() => {
return props.baseColumns.flatMap(item => {
if (item.children) {
return item.children.filter(child => child.fill === true)
}
return [];
});
});
// 使用computed动态返回当前模式的列
const tableColumns = computed(() => {
return operation.value === '展示模式' ? displayModeColumns.value : fillModeColumns.value;
});
// 强制表格立即应用所有宽度设置,避免先自适应再调整
// 监听operation变化,更新chooseColumns并触发布局调整
watch(operation, () => {
chooseColumns.value = operation.value === '展示模式' ? props.baseColumns : fillModeColumns.value;
// 强制表格立即应用所有宽度设置
nextTick(() => {
if (tableRef.value) {
tableRef.value.doLayout()
}
})
}
onMounted(() => {
checkTableColumns()
})
});
}, { immediate: true });
const visibleProps = computed(() => {
return props.baseColumns.flatMap(item => {
if (item.children) {
return item.children.filter(child => child.visible).map(child => child.prop);
}
return item.prop;
});
});
// 控制搜索框显隐
const showSearch = ref(true)
......@@ -285,9 +304,8 @@ const handleDialogClose = () => {
display: flex;
flex-direction: column;
min-height: 0;
/* 解决flex子项内容溢出问题 */
/* overflow-y: scroll; */
/* 解决flex子项内容溢出问题 */
.auto-fit-header-table {
flex: 1;
......@@ -326,6 +344,7 @@ const handleDialogClose = () => {
white-space: nowrap;
}
/* 自定义单元格样式(仅填充模式生效) */
.cell-style {
>div {
display: flex;
......@@ -383,17 +402,12 @@ const handleDialogClose = () => {
}
}
/* 填充模式下的普通战士文字 */
/* 普通文字单元格(仅填充模式生效) */
.fill-span-wrap {
/* line-height: 1; */
.fill-span {
display: inline-block;
width: 80% !important;
/* 超出省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 超出省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
......@@ -404,7 +418,8 @@ const handleDialogClose = () => {
/* 无上下内边距 */
::v-deep(.el-table__row) {
.el-table__cell {
padding: 0;
padding-top: 0;
padding-bottom: 0;
.cell {
padding: 0 !important;
......@@ -419,6 +434,8 @@ const handleDialogClose = () => {
margin: 10px;
}
}
</style>
<style lang="scss">
......@@ -440,6 +457,7 @@ const handleDialogClose = () => {
display: flex;
flex-direction: column;
overflow: hidden !important;
padding-bottom: 5px;
.dialog-table-container {
flex: 1;
......@@ -457,8 +475,24 @@ const handleDialogClose = () => {
}
}
}
}
}
// 不显示数字输入框的 spinner
.no-spinner input::-webkit-inner-spin-button,
.no-spinner input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.no-spinner {
-moz-appearance: textfield;
}
// 填入数字超过计划值时,红色文字提示
.red-text {
input {
color: red !important;
}
}
</style>
\ No newline at end of file
......@@ -42,10 +42,10 @@ import ThreeTwoSeconds from './tabs/three_two_seconds.vue'
import SixLittleDiamonds from './tabs/six_little_diamonds.vue'
const activeName = ref('常规陈列');
// const activeName = ref('档期计划');
const handleClickTabs = (tab) => {
activeName.value = tab.name;
}
</script>
<style scoped
......@@ -71,24 +71,8 @@ const handleClickTabs = (tab) => {
display: flex;
flex-direction: column;
}
.formula-column {
display: flex;
justify-content: center;
align-items: center;
.el-icon {
margin-left: 2px;
}
}
}
}
.el-form-item {
align-items: center;
}
}
}
</style>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论