Commit 7cb1917c authored by 何远江's avatar 何远江

添加设置数据区说明,添加排除区说明

parent ad21da0c
......@@ -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' // 排除
}
......@@ -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
)
}
<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>
......@@ -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]
}
......
......@@ -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>
......
......@@ -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>
......@@ -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,
......
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