Skip to content

T
topsun-baoshen-excel
Commit 23677c39 authored by 何远江's avatar 何远江
Browse files
Options

添加区域标记修改

parent 8131d776
Show whitespace changes
Inline Side-by-side
Showing with 84 additions and 44 deletions
src/api/excel.ts
View file @ 23677c39
......@@ -171,6 +171,9 @@ export const apiClearMark = (fileId: any) => {
export const addExcelArea = (data: any) => {
return axios.post('/api/excelMark/addExcelArea', data)
}
export const editExcelArea = (data: any) => {
return axios.post('/api/excelMark/editExcelArea', data)
}
export const getExcelAreaByFileId = (orderFileId: string) => {
return axios.get('/api/excelMark/getExcelAreaByFileID', {
......
src/views/comment-excel/components/ExcelOperate/ExcelOperate.vue
View file @ 23677c39
......@@ -30,20 +30,20 @@
<p class="text-slate-600">
选择区域：{{
getRangetxt(
cachAreaMark.beginRow,
cachAreaMark.endRow,
cachAreaMark.beginColum,
cachAreaMark.endColum
currentAreaMark.beginRow,
currentAreaMark.endRow,
currentAreaMark.beginColum,
currentAreaMark.endColum
)
}}
</p>
<p class="text-slate-600">区域类型：{{ cachAreaMark.excelAreaType || '--' }}</p>
<p class="text-slate-600">区域别称：{{ cachAreaMark.excelAreaNicname || '--' }}</p>
<p class="text-slate-600">区域类型：{{ currentAreaMark.excelAreaType || '--' }}</p>
<p class="text-slate-600">区域别称：{{ currentAreaMark.excelAreaNicname || '--' }}</p>
<vxe-table
class="mb-2"
:row-config="{ isCurrent: true }"
border
:data="cachHeadAreaData"
:data="currentHeadAreaData"
size="mini"
height="200"
>
......@@ -55,8 +55,17 @@
</vxe-column>
</vxe-table>
<el-button type="primary" size="small" @click="saveAreaMark">保存</el-button>
<el-button type="default" size="small" @click="resetCachArea()">重置选区</el-button>
<el-button type="default" size="small" @click="resetCachHeadArea">重置标题区</el-button>
<el-button
v-if="currentAreaMark.excelAreaId"
type="default"
size="small"
@click="resetCurrentAreaState(true)"
>取消修改</el-button
>
<el-button type="default" size="small" @click="resetCurrentArea()">重置选区</el-button>
<el-button type="default" size="small" @click="resetCurrentHeadArea"
>重置标题区</el-button
>
</div>
<div class="mt-6 pl-2 pr-2 pb-2 text-sm border-b-2">
......@@ -71,12 +80,12 @@
>
<vxe-column title="sheet" field="sheetNum" width="60"></vxe-column>
<vxe-column title="别称" field="excelAreaNicname"></vxe-column>
<vxe-column title="区域" field="area" width="90">
<vxe-column title="区域" field="area" width="80">
<template #default="{ row }">
{{ getRangetxt(row.beginRow, row.endRow, row.beginColum, row.endColum) }}
</template>
</vxe-column>
<vxe-column title="操作" field="action" width="90">
<vxe-column title="操作" field="action" width="110">
<template #default="{ row }">
<el-link
class="mr-1"
......@@ -85,6 +94,9 @@
@click.stop="chooseConnect(row)"
>关联</el-link
>
<el-link class="mr-1" style="font-size: 12px" type="primary" @click="toModify(row)"
>修改</el-link
>
<el-link style="font-size: 12px" type="danger" @click="delAreaMark(row)"
>删除</el-link
>
......@@ -98,8 +110,9 @@
<vxe-table border :data="connectList" size="mini" height="200">
<vxe-column title="关联名称" field="excelAreaId_dictText"></vxe-column>
<vxe-column title="别关联名称" field="excelAreaBeId_dictText"></vxe-column>
<vxe-column title="操作" field="action" width="60">
<vxe-column title="操作" field="action" width="80">
<template #default="{ row, $rowIndex }">
<el-link style="font-size: 12px" type="primary">修改</el-link>
<el-link style="font-size: 12px" type="danger" @click="delConnect(row, $rowIndex)"
>删除</el-link
>
......@@ -177,7 +190,7 @@ import {
showsheetbarConfig,
showstatisticBarConfig
} from '@/constants/excelConfig'
import { flatten } from 'lodash-es'
import { flatten, cloneDeep } from 'lodash-es'
import { useCommentExcel } from '@/stores/commentExcel'
import { storeToRefs } from 'pinia'
import { isFunction } from '@/utils/is'
......@@ -185,6 +198,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import {
addExcelArea,
addExcelAreaConnect,
editExcelArea,
excelMarkRun,
getExcelAreaByFileId,
getExcelConnectByFileId,
......@@ -215,7 +229,7 @@ const beConnectData = computed(() =>
areaList.value.filter((v: any) => v.excelAreaId != currentConnectInfo.excelAreaId)
)
const formState = reactive({
excelAreaId: '',
// excelAreaId: '',
fileId: '',
sheetNum: 0,
beginRow: '',
......@@ -275,20 +289,20 @@ const cellClick = ({ row }) => {
}, 100)
}
const cachAreaMark = reactive<Recordable>({})
const cachHeadAreaData = computed(() => cachAreaMark?.excelAreaTitle || [])
const currentAreaMark = reactive<Recordable>({})
const currentHeadAreaData = computed(() => currentAreaMark?.excelAreaTitle || [])
const setAreaMark = async (type: 'data' | 'head' = 'data') => {
if (type === 'data') {
/**
* 判断是否有未保存的区域
* 如果有未保存的标记 -> 提示用户，是否覆盖
*/
if (cachAreaMark.beginRow !== '' && cachAreaMark.beginRow !== undefined) {
if (currentAreaMark.beginRow !== '' && currentAreaMark.beginRow !== undefined) {
await ElMessageBox.confirm('检测到未保存的标记，是否在覆盖当前标记区域？', '提示消息', {
confirmButtonText: '覆盖',
cancelButtonText: '取消'
})
resetCachArea(() => {
resetCurrentArea(() => {
// 设置当前选区
luckysheet.setRangeShow({
row: [formState.beginRow, formState.endRow],
......@@ -297,7 +311,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
})
}
Object.assign(cachAreaMark, unref(formState))
Object.assign(currentAreaMark, unref(formState))
// 设置完成之后重置表单
Object.assign(formState, {
excelAreaType: '',
......@@ -305,7 +319,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
})
} else {
// 判断是否在同一sheet
if (formState.sheetNum !== cachAreaMark.sheetNum) {
if (formState.sheetNum !== currentAreaMark.sheetNum) {
return ElMessage.error('请在同一sheet页中选择数据！')
}
......@@ -332,9 +346,9 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
}
// 合并组装的表头区域数据
cachAreaMark.excelAreaTitle
? cachAreaMark.excelAreaTitle.push(...result)
: (cachAreaMark.excelAreaTitle = result)
currentAreaMark.excelAreaTitle
? currentAreaMark.excelAreaTitle.push(...result)
: (currentAreaMark.excelAreaTitle = result)
}
setTimeout(() => {
......@@ -342,13 +356,11 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
luckysheet.setRangeFormat('bg', areaMarksColor[type])
}, 100)
}
const resetCachAreaState = () => {
const resetCurrentAreaState = (isedit: boolean = false) => {
// 删除 excelAreaTitle 属性
delete cachAreaMark.excelAreaTitle
delete currentAreaMark.excelAreaTitle
// 重置 其他属性
Object.assign(cachAreaMark, {
excelAreaId: '',
fileId: '',
const tmp: Recordable = {
sheetNum: 0,
beginRow: '',
beginColum: '',
......@@ -356,51 +368,65 @@ const resetCachAreaState = () => {
endColum: '',
excelAreaType: '',
excelAreaNicname: ''
})
}
isedit && (tmp.excelAreaId = '')
Object.assign(currentAreaMark, tmp)
}
const resetCachArea = (fn?: Function) => {
const resetCurrentArea = (fn?: Function) => {
// 清除区域颜色
luckysheet.setRangeShow(
{
row: [cachAreaMark.beginRow, cachAreaMark.endRow],
column: [cachAreaMark.beginColum, cachAreaMark.endColum]
row: [currentAreaMark.beginRow, currentAreaMark.endRow],
column: [currentAreaMark.beginColum, currentAreaMark.endColum]
},
{
show: false,
success: () => {
luckysheet.setRangeFormat('bg', areaMarksColor['default'])
resetCachAreaState()
resetCurrentAreaState()
fn && fn()
}
}
)
}
const resetCachHeadArea = () => {
const resetCurrentHeadArea = () => {
// 清除标题区域颜色 -> 设置成数据区域颜色
luckysheet.setRangeShow(
{
row: [cachAreaMark.beginRow, cachAreaMark.endRow],
column: [cachAreaMark.beginColum, cachAreaMark.endColum]
row: [currentAreaMark.beginRow, currentAreaMark.endRow],
column: [currentAreaMark.beginColum, currentAreaMark.endColum]
},
{
show: false,
success: () => {
luckysheet.setRangeFormat('bg', areaMarksColor['data'])
// 删除 excelAreaTitle 属性
delete cachAreaMark.excelAreaTitle
delete currentAreaMark.excelAreaTitle
}
}
)
}
const saveAreaMark = async () => {
cachAreaMark.fileId = getFileInfo.value.orderFileId
const { data } = await addExcelArea(cachAreaMark)
// 接口保存成功之后，保存一份在本地 locaExcelAreaMarks
locaExcelAreaMarks[cachAreaMark.sheetNum].push(data.result)
resetCachAreaState()
currentAreaMark.fileId = getFileInfo.value.orderFileId
// 如果有id 调用修改，否则调用新增
const isEdit = !!currentAreaMark.excelAreaId
const { data } = isEdit
? await editExcelArea(currentAreaMark)
: await addExcelArea(currentAreaMark)
// 接口保存成功之后，保存/更新 locaExcelAreaMarks
if (isEdit) {
const idx = locaExcelAreaMarks[cachAreaMark.sheetNum].findIndex(
(v) => v.excelAreaId == cachAreaMark.excelAreaId
)
locaExcelAreaMarks[cachAreaMark.sheetNum].splice(idx, 1, cloneDeep(currentAreaMark))
} else {
locaExcelAreaMarks[currentAreaMark.sheetNum].push(data.result)
}
resetCurrentAreaState(true)
}
const cachAreaMark = reactive<Recordable>({})
const cachDelOtherSheetArea = reactive<Recordable>({})
const delAreaMark = async (row: any) => {
// 调用接口删除
......@@ -433,7 +459,19 @@ const delAreaMark = async (row: any) => {
)
locaExcelAreaMarks[row.sheetNum].splice(index, 1)
}
const toModify = (row) => {
// 判断当前区域是否关联了其他区域
if (
connectList.value.find(
(v) => row.excelAreaId == v.excelAreaId || row.excelAreaId == v.excelAreaBeId
)
) {
return ElMessage.warning('当前区域绑定与其他区域绑定了关联信息，请先删除关联信息之后再做修改！')
}
Object.assign(cachAreaMark, cloneDeep(row))
Object.assign(currentAreaMark, row)
}
const queryArea = async () => {
const { data } = await getExcelAreaByFileId(getFileInfo.value.orderFileId)
data.result.forEach((item: any) => locaExcelAreaMarks[item.sheetNum || 0].push(item))
......@@ -464,7 +502,6 @@ const confirmConnect = () => {
addConnect(list)
}
const addConnect = async (list: any) => {
list.forEach((item: any) => {
currentConnectInfo.connectFiled.push({
title: item.title,
......@@ -547,7 +584,7 @@ const chooseConnectOnHide = () => {
// excelAreaId: '',
// excelAreaBeId: '',
connectFiled: [],
beConnectFiled: [],
beConnectFiled: []
// fileId: ''
})
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment