Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in
Toggle navigation
T
topsun-baoshen-excel
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
何远江
topsun-baoshen-excel
Commits
7cb1917c
Commit
7cb1917c
authored
Jan 09, 2024
by
何远江
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
添加设置数据区说明,添加排除区说明
parent
ad21da0c
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
383 additions
and
107 deletions
+383
-107
excelConfig.ts
src/constants/excelConfig.ts
+8
-7
excel.ts
src/utils/excel.ts
+58
-1
EditArea.vue
src/views/comment-excel/components/EditArea/EditArea.vue
+196
-89
ExcelOperate.vue
...ws/comment-excel/components/ExcelOperate/ExcelOperate.vue
+11
-3
SetAttch.vue
src/views/comment-excel/components/SetAttch/SetAttch.vue
+1
-1
SetDataArea.vue
...iews/comment-excel/components/SetDataArea/SetDataArea.vue
+107
-4
SetDataAreaTitle.vue
...nt-excel/components/SetDataAreaTitle/SetDataAreaTitle.vue
+2
-2
No files found.
src/constants/excelConfig.ts
View file @
7cb1917c
...
...
@@ -77,11 +77,12 @@ export const colors = [
]
export
const
areaMarksColor
=
{
data
:
'#65d0ea'
,
head
:
'#34718d'
,
default
:
'#ffffff'
,
attch
:
'#e6ccb2'
,
attch_title
:
'#e58e26'
,
attch_head
:
'#b08968'
,
filter
:
'#ff0000'
data
:
'#65d0ea'
,
// 数据区
head
:
'#34718d'
,
// 标题区
default
:
'#ffffff'
,
// 默认
attch
:
'#e6ccb2'
,
// 附加信息区
attch_title
:
'#e58e26'
,
// 附加区标题
attch_head
:
'#b08968'
,
// 附加区别称
caption
:
'#bc5090'
,
// 说明
exclude
:
'#ff6361'
// 排除
}
src/utils/excel.ts
View file @
7cb1917c
...
...
@@ -92,7 +92,7 @@ export function handleRangeTitle(range: any) {
isVertical
?
(
title
.
row
=
+
beginRow
+
c
)
:
(
title
.
colum
=
+
beginColum
+
c
)
// 如果获取值报错,那么断定单元格值为空,直接取上一个单元格的值
try
{
title
.
title
=
cell
.
v
||
cell
?.
ct
?.
s
.
map
((
itm
)
=>
itm
.
v
).
join
(
''
)
title
.
title
=
(
cell
.
v
||
cell
?.
ct
?.
s
.
map
((
itm
)
=>
itm
.
v
).
join
(
''
)).
replaceAll
(
/
(\s
+
)
/g
,
''
)
// 如果有值那么直接进入下一列或者下一行
if
(
title
.
title
)
{
// 如果有合并单元格,直接跳过合并的单元格
...
...
@@ -131,3 +131,60 @@ export function getRangePosition() {
return
}
}
/**
* 是否是当前sheet
* @param sheetNum 当前sheet order
* @returns
*/
export
function
isCurrentSheet
(
sheetNum
:
number
|
string
)
{
return
luckysheet
.
getSheet
().
order
==
sheetNum
}
/**
* 设置显示sheet页
* @param sheetNum 显示sheet的order值
* @returns
*/
export
function
setCurrentSheet
(
sheetNum
:
number
|
string
)
{
if
(
isCurrentSheet
(
sheetNum
))
{
return
}
luckysheet
.
setSheetActive
(
sheetNum
)
}
/**
* 设置单元格背景颜色
* @param range
* @param bg
*/
export
function
setRangeBackground
(
range
:
Recordable
,
bg
:
string
)
{
const
r
=
{
beginRow
:
''
,
endRow
:
''
,
beginColum
:
''
,
endColum
:
''
,
sheetNum
:
''
}
if
(
Reflect
.
has
(
range
,
'beginRow'
))
{
Object
.
assign
(
r
,
range
)
}
else
{
r
.
beginRow
=
range
.
row
r
.
endRow
=
range
.
row
r
.
beginColum
=
range
.
colum
r
.
endColum
=
range
.
colum
r
.
sheetNum
=
range
.
sheet
}
setCurrentSheet
(
r
.
sheetNum
)
luckysheet
.
menuButton
.
customUpdateFormat
(
null
,
'bg'
,
bg
,
r
.
beginRow
,
r
.
endRow
,
r
.
beginColum
,
r
.
endColum
,
false
)
}
src/views/comment-excel/components/EditArea/EditArea.vue
View file @
7cb1917c
<
template
>
<el-form
size=
"small"
inline
>
<el-row
:gutter=
"12"
>
<el-col>
<el-col
:span=
"6"
>
<el-form-item
label=
"数据区域"
>
<el-tag>
{{
getRangetxt
(
...
...
@@ -13,12 +13,12 @@
}}
</el-tag>
</el-form-item>
</el-col>
<el-col
:span=
"
12
"
>
<el-col
:span=
"
6
"
>
<el-form-item
label=
"区域别称"
prop=
"excelAreaNicname"
>
<el-input
v-model=
"currentForm.excelAreaNicname"
></el-input>
</el-form-item>
</el-col>
<el-col
:span=
"
12
"
>
<el-col
:span=
"
6
"
>
<el-form-item
label=
"区域类型"
prop=
"excelAreaType"
>
<el-select
v-model=
"currentForm.excelAreaType"
>
<template
v-for=
"item in areaTypeSelectOption"
:key=
"item.value"
>
...
...
@@ -27,18 +27,89 @@
</el-select>
</el-form-item>
</el-col>
<el-col
:span=
"
12
"
>
<el-col
:span=
"
6
"
>
<el-form-item
label=
"循环体间隔"
prop=
"checkNumber"
>
<el-input
type=
"number"
v-model=
"currentForm.checkNumber"
></el-input>
</el-form-item>
</el-col>
<el-col
:span=
"
12
"
>
<el-col
:span=
"
6
"
>
<el-form-item
label=
"标题作为数据"
prop=
"oneself"
>
<el-checkbox
v-model=
"currentForm.oneself"
true-label=
"Y"
false-label=
"N"
>
是
</el-checkbox>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row
:gutter=
"24"
style=
"margin-bottom: 12px"
>
<el-col
:span=
"12"
style=
"margin-bottom: 12px"
>
<!-- excludeArea -->
<p
class=
"table-des"
>
排除区:
</p>
<vxe-table
:row-config=
"{ isCurrent: true }"
border
:data=
"currentForm.excludeArea"
size=
"mini"
max-height=
"200"
:edit-config=
"{ trigger: 'click', mode: 'cell' }"
>
<vxe-column
title=
"单元格值"
field=
"title"
:edit-render=
"{}"
>
<
template
#
edit=
"{ row }"
>
<el-input
v-model=
"row.title"
size=
"small"
></el-input>
</
template
>
</vxe-column>
<vxe-column
title=
"单元格"
field=
"cell"
width=
"90"
>
<
template
#
default=
"{ row }"
>
{{
getRangetxt
(
row
.
row
,
row
.
row
,
row
.
colum
,
row
.
colum
)
}}
</
template
>
</vxe-column>
<vxe-column
title=
"操作"
field=
"action"
width=
"50"
>
<
template
#
default=
"{ row, $rowIndex }"
>
<el-link
style=
"font-size: 12px"
type=
"danger"
@
click=
"delCaptionAndExclude(row, $rowIndex, 2)"
>
删除
</el-link
>
</
template
>
</vxe-column>
</vxe-table>
</el-col>
<el-col
:span=
"12"
>
<!-- dataTitles -->
<p
class=
"table-des"
>
说明区:
</p>
<vxe-table
:row-config=
"{ isCurrent: true }"
border
:data=
"currentForm.dataTitles"
size=
"mini"
max-height=
"200"
:edit-config=
"{ trigger: 'click', mode: 'cell' }"
>
<vxe-column
title=
"单元格值"
field=
"title"
:edit-render=
"{}"
>
<
template
#
edit=
"{ row }"
>
<el-input
v-model=
"row.title"
size=
"small"
></el-input>
</
template
>
</vxe-column>
<vxe-column
title=
"单元格"
field=
"cell"
width=
"90"
>
<
template
#
default=
"{ row }"
>
{{
getRangetxt
(
row
.
row
,
row
.
row
,
row
.
colum
,
row
.
colum
)
}}
</
template
>
</vxe-column>
<vxe-column
title=
"操作"
field=
"action"
width=
"50"
>
<
template
#
default=
"{ row, $rowIndex }"
>
<el-link
style=
"font-size: 12px"
type=
"danger"
@
click=
"delCaptionAndExclude(row, $rowIndex, 1)"
>
删除
</el-link
>
</
template
>
</vxe-column>
</vxe-table>
</el-col>
<el-col
:span=
"12"
>
<!-- excelAreaTitle -->
<p
class=
"table-des"
>
标题区:
</p>
<vxe-table
:row-config=
"{ isCurrent: true }"
border
...
...
@@ -65,13 +136,18 @@
</
template
>
</vxe-column>
</vxe-table>
</el-form>
</el-col>
</el-row>
<p>
<p
class=
"table-tag"
>
附加信息:
<el-tag>
{{
getRangetxt(attchInfo.beginRow, attchInfo.endRow, attchInfo.beginColum, attchInfo.endColum)
}}
</el-tag>
</p>
<el-row
:gutter=
"24"
>
<el-col
:span=
"12"
>
<p
class=
"table-des"
>
附加别称
</p>
<vxe-table
style=
"margin-top: 8px"
:row-config=
"{ isCurrent: true }"
...
...
@@ -99,7 +175,10 @@
</
template
>
</vxe-column>
</vxe-table>
</el-col>
<el-col
:span=
"12"
>
<p
class=
"table-des"
>
附加标题
</p>
<vxe-table
style=
"margin-top: 8px"
:row-config=
"{ isCurrent: true }"
...
...
@@ -127,12 +206,14 @@
</
template
>
</vxe-column>
</vxe-table>
</el-col>
</el-row>
</template>
<
script
setup
lang=
"ts"
>
import
{
ref
,
reactive
,
watch
,
onMounted
}
from
'vue'
import
{
cloneDeep
}
from
'lodash-es'
import
{
getRangetxt
}
from
'@/utils/excel'
import
{
getRangetxt
,
setCurrentSheet
}
from
'@/utils/excel'
import
type
{
Recordable
}
from
'@/types/global'
import
{
apiDictList
}
from
'@/api/common'
import
{
ElMessage
}
from
'element-plus'
...
...
@@ -153,6 +234,7 @@ const currentForm = reactive<Recordable>({
sheetNum
:
0
,
excelAreaTitle
:
[]
})
const
delCapAndExc
=
ref
<
Recordable
[]
>
([])
const
attchInfo
=
reactive
<
Recordable
>
({
beginRow
:
''
,
endRow
:
''
,
...
...
@@ -177,6 +259,14 @@ watch(
const
delAreaTitle
=
(
index
:
number
)
=>
{
currentForm
.
excelAreaTitle
.
splice
(
index
,
1
)
}
// 删除说明单元格和排除单元格
const
delCaptionAndExclude
=
(
row
:
any
,
index
:
number
,
type
:
number
)
=>
{
delCapAndExc
.
value
.
push
(
row
);
// 删除本行
(
type
==
1
?
currentForm
.
dataTitles
:
currentForm
.
excludeArea
).
splice
(
index
,
1
)
}
const
delGroupAreaTitle
=
(
index
:
number
)
=>
{
attchInfo
.
areaTitles
.
splice
(
index
,
1
)
}
...
...
@@ -203,7 +293,24 @@ const getAreaData = () => {
desGroups
:
[{
...
attchInfo
}]
}
}
const
getDelCapAndExc
=
()
=>
{
return
[...
delCapAndExc
.
value
]
}
defineExpose
({
getAreaData
getAreaData
,
getDelCapAndExc
})
</
script
>
<
style
lang=
"scss"
scoped
>
.table-des
{
font-size
:
14px
;
font-weight
:
600
;
}
.table-tag
{
font-size
:
16px
;
border-top
:
2px
solid
#333
;
padding-top
:
10px
;
}
</
style
>
src/views/comment-excel/components/ExcelOperate/ExcelOperate.vue
View file @
7cb1917c
...
...
@@ -68,7 +68,7 @@
</div>
</el-scrollbar>
<vxe-modal
width=
"
600
"
height=
"600"
v-model=
"editVisible"
title=
"编辑区域"
show-footer
>
<vxe-modal
width=
"
80%
"
height=
"600"
v-model=
"editVisible"
title=
"编辑区域"
show-footer
>
<EditArea
ref=
"editAreaRef"
:current-area-mark=
"currentAreaMark"
/>
<
template
#
footer
>
<el-button
type=
"primary"
@
click=
"confirmEdit"
>
提交
</el-button>
...
...
@@ -199,7 +199,7 @@ import {
removeExcelAreaConnect
}
from
'@/api/excel'
import
type
{
Recordable
}
from
'@/types/global'
import
{
getRangetxt
}
from
'@/utils/excel'
import
{
getRangetxt
,
setRangeBackground
}
from
'@/utils/excel'
import
type
{
VxeTableInstance
}
from
'vxe-table'
import
EditArea
from
'../EditArea/EditArea.vue'
...
...
@@ -352,8 +352,14 @@ const toModify = (row) => {
}
const
confirmEdit
=
async
()
=>
{
const
areaData
=
editAreaRef
.
value
.
getAreaData
()
const
delCapAndExc
=
editAreaRef
.
value
.
getDelCapAndExc
()
const
{
data
}
=
await
editExcelArea
(
areaData
)
if
(
data
.
code
==
200
)
{
if
(
delCapAndExc
.
length
)
{
delCapAndExc
.
forEach
((
item
)
=>
{
setRangeBackground
(
item
,
areaMarksColor
[
'data'
])
})
}
ElMessage
.
success
(
'修改成功!'
)
editVisible
.
value
=
false
...
...
@@ -660,9 +666,11 @@ const toRun = async () => {
if
(
!
data
.
result
.
length
)
return
data
.
result
.
forEach
((
item
)
=>
{
item
.
expendData
=
{}
for
(
const
key
in
item
)
{
if
(
typeof
item
[
key
]
==
'object'
&&
key
!=
'expendData'
)
{
if
(
!
Reflect
.
has
(
item
,
'expendData'
))
{
item
.
expendData
=
{}
}
item
.
expendData
[
key
]
=
item
[
key
]
delete
item
[
key
]
}
...
...
src/views/comment-excel/components/SetAttch/SetAttch.vue
View file @
7cb1917c
...
...
@@ -61,7 +61,7 @@
</
template
>
</vxe-column>
</vxe-table>
<el-button
size=
"small"
@
click=
"back"
>
返回
</el-button>
<el-button
size=
"small"
@
click=
"back"
>
上一步
</el-button>
<el-button
type=
"primary"
size=
"small"
@
click=
"setAttch"
>
设置附加信息
</el-button>
<el-button
type=
"primary"
size=
"small"
@
click=
"setNickName"
>
设置别称
</el-button>
<el-button
type=
"primary"
size=
"small"
@
click=
"setAttchTitle"
>
设置标题
</el-button>
...
...
src/views/comment-excel/components/SetDataArea/SetDataArea.vue
View file @
7cb1917c
...
...
@@ -51,9 +51,46 @@
<el-checkbox true-label="Y" false-label="N" v-model="formState.checkSelf">是</el-checkbox>
</el-form-item>
</el-col> -->
<el-col>
<el-col
:span=
"24"
>
<p
class=
"table-title"
>
数据说明区
</p>
<vxe-table
border
max-height=
"200"
:data=
"captionArea"
size=
"mini"
>
<vxe-column
title=
"单元格值"
field=
"title"
></vxe-column>
<vxe-column
title=
"单元格"
width=
"90"
>
<
template
#
default=
"{ row }"
>
{{
getRangetxt
(
row
.
row
,
row
.
row
,
row
.
colum
,
row
.
colum
)
}}
</
template
>
</vxe-column>
<vxe-column
title=
"操作"
width=
"50"
>
<
template
#
default=
"{ row, $rowIndex }"
>
<el-link
type=
"danger"
style=
"font-size: 12px"
@
click=
"delCaptionAndExclude(row, $rowIndex, 1)"
>
删除
</el-link
>
</
template
>
</vxe-column>
</vxe-table>
<p
class=
"table-title mt-2"
>
排除区
</p>
<vxe-table
border
max-height=
"200"
:data=
"excludeArea"
size=
"mini"
>
<vxe-column
title=
"单元格值"
field=
"title"
></vxe-column>
<vxe-column
title=
"单元格"
width=
"90"
>
<
template
#
default=
"{ row }"
>
{{
getRangetxt
(
row
.
row
,
row
.
row
,
row
.
colum
,
row
.
colum
)
}}
</
template
>
</vxe-column>
<vxe-column
title=
"操作"
width=
"50"
>
<
template
#
default=
"{ row, $rowIndex }"
>
<el-link
type=
"danger"
style=
"font-size: 12px"
@
click=
"delCaptionAndExclude(row, $rowIndex, 2)"
>
删除
</el-link
>
</
template
>
</vxe-column>
</vxe-table>
</el-col>
<el-col
style=
"margin-top: 10px"
>
<el-form-item
label-width=
"0"
>
<el-button
type=
"primary"
@
click=
"setAreaMark('data')"
>
标记数据区
</el-button>
<el-button
type=
"primary"
@
click=
"setCaptionArea"
>
标记说明区
</el-button>
<el-button
type=
"primary"
@
click=
"setExcludeArea"
>
标记排除区
</el-button>
<el-button
type=
"success"
@
click=
"nextStep"
>
下一步
</el-button>
</el-form-item>
</el-col>
...
...
@@ -65,9 +102,9 @@
import
{
apiDictList
}
from
'@/api/common'
import
{
areaMarksColor
}
from
'@/constants/excelConfig'
import
type
{
Recordable
}
from
'@/types/global'
import
{
getRangePosition
,
getRangetxt
}
from
'@/utils/excel'
import
{
getRangePosition
,
getRangetxt
,
setRangeBackground
}
from
'@/utils/excel'
import
{
ElMessage
,
type
FormInstance
}
from
'element-plus'
import
{
onMounted
,
reactive
,
ref
,
watch
}
from
'vue'
import
{
onMounted
,
reactive
,
ref
,
unref
,
watch
}
from
'vue'
const
luckysheet
=
(
window
as
any
).
luckysheet
const
emits
=
defineEmits
([
'next'
])
...
...
@@ -94,6 +131,7 @@ watch(
}
)
const
tableData
=
ref
([])
const
form
=
ref
<
FormInstance
>
()
const
rules
=
reactive
({
excelAreaNicname
:
[{
required
:
true
,
message
:
'请输入区域别称!'
,
trigger
:
'change'
}],
...
...
@@ -122,6 +160,9 @@ const resetFormState = () => {
endRow
:
''
,
endColum
:
''
})
excludeArea
.
value
=
[]
captionArea
.
value
=
[]
}
const
setAreaMark
=
(
type
:
'data'
)
=>
{
...
...
@@ -145,6 +186,61 @@ const setAreaMark = (type: 'data') => {
Object
.
assign
(
formState
,
position
)
}
const
captionArea
=
ref
<
Recordable
[]
>
([])
const
excludeArea
=
ref
<
Recordable
[]
>
([])
// 设置说明区
const
setCaptionArea
=
()
=>
{
captionArea
.
value
=
getRangeCellValue
(
'exclude'
)
}
// 设置排除区
const
setExcludeArea
=
()
=>
{
excludeArea
.
value
=
getRangeCellValue
(
'caption'
)
}
const
delCaptionAndExclude
=
(
row
:
any
,
index
:
number
,
type
=
1
)
=>
{
;(
type
==
1
?
captionArea
:
excludeArea
).
value
.
splice
(
index
,
1
)
setRangeBackground
(
row
,
areaMarksColor
[
'data'
])
}
// 获取有值的单元格
const
getRangeCellValue
=
(
type
:
'caption'
|
'exclude'
)
=>
{
const
position
=
getRangePosition
()
const
sheet
=
luckysheet
.
getSheet
()
const
rangeValue
=
luckysheet
.
getRangeValue
()
const
cells
:
any
=
[]
rangeValue
.
forEach
((
row
:
any
,
r
:
number
)
=>
{
row
.
forEach
((
cell
:
any
,
c
:
number
)
=>
{
const
p
=
{
r
:
position
?.
beginRow
+
r
,
c
:
position
?.
beginColum
+
c
}
let
v
=
''
try
{
v
=
cell
.
v
||
cell
?.
ct
?.
s
.
map
((
itm
)
=>
itm
.
v
).
join
(
''
)
if
(
v
)
{
cells
.
push
({
title
:
v
,
row
:
p
.
r
,
colum
:
p
.
c
,
sheet
:
sheet
.
order
})
luckysheet
.
menuButton
.
customUpdateFormat
(
null
,
'bg'
,
areaMarksColor
[
type
],
p
.
r
,
p
.
r
,
p
.
c
,
p
.
c
,
false
)
}
}
catch
{}
})
})
return
cells
}
const
queryDict
=
async
(
code
:
string
)
=>
{
const
{
data
}
=
await
apiDictList
({
dictCodes
:
code
...
...
@@ -161,7 +257,11 @@ const nextStep = async () => {
await
form
.
value
?.
validateField
([
'excelAreaNicname'
,
'excelAreaType'
])
// 下一步去设置标题
emits
(
'next'
,
1
,
formState
)
emits
(
'next'
,
1
,
{
...
formState
,
excludeArea
:
unref
(
excludeArea
),
dataTitles
:
unref
(
captionArea
)
})
}
onMounted
(()
=>
{
...
...
@@ -177,4 +277,7 @@ defineExpose({
.set-area-form
{
padding
:
6px
;
}
.table-title
{
font-size
:
14px
;
}
</
style
>
src/views/comment-excel/components/SetDataAreaTitle/SetDataAreaTitle.vue
View file @
7cb1917c
...
...
@@ -26,7 +26,7 @@
</
template
>
</vxe-column>
</vxe-table>
<el-button
size=
"small"
@
click=
"nextStep(-1)"
>
返回
</el-button>
<el-button
size=
"small"
@
click=
"nextStep(-1)"
>
上一步
</el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"setAreaTitle"
>
标记标题
</el-button>
<el-button
size=
"small"
type=
"primary"
@
click=
"resetAreaTitle"
>
重置
</el-button>
<el-button
size=
"small"
type=
"success"
@
click=
"nextStep()"
>
下一步
</el-button>
...
...
@@ -60,7 +60,7 @@ const setAreaTitle = () => {
const
[
sr
,
er
]
=
sheet
.
luckysheet_select_save
[
0
].
row
const
[
sc
,
ec
]
=
sheet
.
luckysheet_select_save
[
0
].
column
const
rangeData
=
luckysheet
.
getRangeValue
()
const
titles
=
handleRangeTitle
(
rangeData
,
unref
(
props
.
currentAreaMark
)
)
const
titles
=
handleRangeTitle
(
rangeData
)
titleArea
.
value
.
push
({
excelAreaNicname
:
props
.
currentAreaMark
.
excelAreaNicname
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment