优化代码
This commit is contained in:
parent
593dc6c0c1
commit
d0093d7b86
|
@ -7,11 +7,11 @@
|
|||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="h-full" v-if="activeName=='examine'">
|
||||
<rate-work :rate-serve="rateServe"/>
|
||||
<div class="h-full" v-if="activeName=='examine'">
|
||||
<examine-work :rate-serve="rateServe"/>
|
||||
</div>
|
||||
<div class="h-full" v-if="activeName=='rate'">
|
||||
<examine-work :rate-serve="rateServe"/>
|
||||
<rate-work :rate-serve="rateServe"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -10,12 +10,15 @@
|
|||
{{ scope.row }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" v-for="item in columnIndexArray" :label="item">
|
||||
<el-table-column align="center"
|
||||
v-for="item in sheet.hiddeCols?columnIndexArray.filter(key=>sheet.hiddeCols?.indexOf(key)===-1):columnIndexArray"
|
||||
:label="item">
|
||||
<template #default="scope : {row:number}">
|
||||
<div>
|
||||
<div v-if="cellMap[item + scope.row]?.config&& editEnable">
|
||||
<span class="require-item-sign" v-if="cellMap[item + scope.row]?.config?.required"></span>
|
||||
<input-column :size="'small'" :ctx="{}" :column="cellMap[item + scope.row].config"
|
||||
<input-column :prop="{style:{width:'100%'},placeholder:''}" :size="'small'" :ctx="{}"
|
||||
:column="cellMap[item + scope.row].config"
|
||||
:model-value="cellMap[item + scope.row].value"
|
||||
@update:model-value="(val)=>cellMap[item+scope.row].value=val"></input-column>
|
||||
</div>
|
||||
|
@ -33,14 +36,14 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
import {Cell, CellMap, CellSpan, Sheet} from "../types";
|
||||
import {Cell, CellMap, CellSpan, Letter, Sheet} from "../types";
|
||||
import InputColumn from "@/wcq-components/TablePlus/components/InputColumn/index.vue";
|
||||
//表格现在只考虑A到Z
|
||||
const props = defineProps<{ sheet: Sheet, editEnable?: boolean }>()
|
||||
|
||||
const cellMap = ref<CellMap>({})
|
||||
const cellSpan = ref<CellSpan>({})
|
||||
const columnIndexArray = ref(['A', "B", "C", "D", "E"])
|
||||
const columnIndexArray = ref<Letter[]>(['A', "B", "C", "D", "E"])
|
||||
const rowIndexArray = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
|
||||
const A2Z = Array(26).fill(0).map((_, i) => String.fromCharCode(65 + i))
|
||||
|
||||
|
@ -51,7 +54,7 @@ watch(() => props.sheet, (newVal) => {
|
|||
function parseSheetConfig(sheet: Sheet) {
|
||||
const cellSpanTemp = parseCellSpan(sheet.cellMap)
|
||||
const {start, end} = sheet
|
||||
const columnIndexArrayTemp = A2Z.slice(A2Z.indexOf(start[0]), A2Z.indexOf(end[0]) + 1)
|
||||
const columnIndexArrayTemp = A2Z.slice(A2Z.indexOf(start[0]), A2Z.indexOf(end[0]) + 1) as unknown as Letter[]
|
||||
const rowIndexArrayTemp = new Array(1 + Number(end.slice(1)) - Number(start.slice(1))).fill(0).map((_, i) => Number(Number(start.slice(1))) + i)
|
||||
cellSpan.value = cellSpanTemp
|
||||
columnIndexArray.value = columnIndexArrayTemp
|
||||
|
@ -61,7 +64,6 @@ function parseSheetConfig(sheet: Sheet) {
|
|||
}
|
||||
|
||||
function getCellStateClass(cell: Cell) {
|
||||
console.log((cell?.config?.required === true) && (['', null, undefined].indexOf(cell?.value) !== -1) ? 'bg-opacity-30 bg-red-500' : '')
|
||||
return (cell?.config?.required === true) && (['', null, undefined].indexOf(cell?.value) !== -1) ? 'bg-opacity-30 bg-red-500' : ''
|
||||
}
|
||||
|
||||
|
@ -69,10 +71,18 @@ function getCellState(cell: Cell) {
|
|||
if (cell?.config?.required === true) {
|
||||
return (['', null, undefined].indexOf(cell?.value) == -1)
|
||||
} else {
|
||||
} return true
|
||||
}
|
||||
return true
|
||||
|
||||
}
|
||||
|
||||
function cellStyle({column, columnIndex, row, rowIndex}) {
|
||||
const key = column.label + row
|
||||
const state = getCellState(cellMap.value[key])
|
||||
if(!props.editEnable){
|
||||
return state ? {} : ({background: '#ff000063'})
|
||||
}
|
||||
}
|
||||
|
||||
function parseCellSpan(cellMap: CellMap) {
|
||||
const cellSpan = {}
|
||||
|
|
|
@ -1373,7 +1373,7 @@ export const workBookTestData:WorkBook={
|
|||
}
|
||||
},
|
||||
},
|
||||
|
||||
hiddeCols:['B','C'],
|
||||
"start": "A1",
|
||||
"end": "D49"
|
||||
},
|
||||
|
|
|
@ -1,71 +1,72 @@
|
|||
import {Column} from "@/wcq-components/TablePlus/types";
|
||||
|
||||
type Letter =
|
||||
'A'
|
||||
| 'B'
|
||||
| 'C'
|
||||
| 'D'
|
||||
| 'E'
|
||||
| 'F'
|
||||
| 'G'
|
||||
| 'H'
|
||||
| 'I'
|
||||
| 'J'
|
||||
| 'K'
|
||||
| 'L'
|
||||
| 'M'
|
||||
| 'N'
|
||||
| 'O'
|
||||
| 'P'
|
||||
| 'Q'
|
||||
| 'R'
|
||||
| 'S'
|
||||
| 'T'
|
||||
| 'U'
|
||||
| 'V'
|
||||
| 'W'
|
||||
| 'X'
|
||||
| 'Y'
|
||||
| 'Z';
|
||||
'A'
|
||||
| 'B'
|
||||
| 'C'
|
||||
| 'D'
|
||||
| 'E'
|
||||
| 'F'
|
||||
| 'G'
|
||||
| 'H'
|
||||
| 'I'
|
||||
| 'J'
|
||||
| 'K'
|
||||
| 'L'
|
||||
| 'M'
|
||||
| 'N'
|
||||
| 'O'
|
||||
| 'P'
|
||||
| 'Q'
|
||||
| 'R'
|
||||
| 'S'
|
||||
| 'T'
|
||||
| 'U'
|
||||
| 'V'
|
||||
| 'W'
|
||||
| 'X'
|
||||
| 'Y'
|
||||
| 'Z';
|
||||
type SheetKey = `${Letter}${number}`
|
||||
|
||||
interface Cell {
|
||||
type: string | 'value' | 'label'
|
||||
value: any
|
||||
config?: Column
|
||||
rowSpan?: number
|
||||
colSpan?: number
|
||||
type: string | 'value' | 'label'
|
||||
value: any
|
||||
config?: Column
|
||||
rowSpan?: number
|
||||
colSpan?: number
|
||||
}
|
||||
|
||||
interface CellSpan {
|
||||
[key: SheetKey]: {
|
||||
rowSpan: number
|
||||
colSpan: number
|
||||
}
|
||||
[key: SheetKey]: {
|
||||
rowSpan: number
|
||||
colSpan: number
|
||||
}
|
||||
}
|
||||
|
||||
interface CellMap {
|
||||
[key: SheetKey]: Cell
|
||||
[key: SheetKey]: Cell
|
||||
}
|
||||
|
||||
interface Sheet {
|
||||
name?: string
|
||||
cellMap: CellMap
|
||||
start: SheetKey
|
||||
end: SheetKey
|
||||
name?: string
|
||||
cellMap: CellMap
|
||||
start: SheetKey
|
||||
end: SheetKey
|
||||
hiddeCols?: Letter[]
|
||||
}
|
||||
|
||||
interface WorkBook {
|
||||
sheets: Sheet[]
|
||||
sheets: Sheet[]
|
||||
}
|
||||
|
||||
export type {
|
||||
Letter,
|
||||
SheetKey,
|
||||
Cell,
|
||||
Sheet,
|
||||
WorkBook,
|
||||
CellMap,
|
||||
CellSpan
|
||||
Letter,
|
||||
SheetKey,
|
||||
Cell,
|
||||
Sheet,
|
||||
WorkBook,
|
||||
CellMap,
|
||||
CellSpan
|
||||
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:default-value="new Date()"
|
||||
|
||||
v-bind="prop"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
@ -15,7 +15,7 @@
|
|||
import {computed, defineProps, defineEmits} from "vue";
|
||||
import type {DateColumn} from "../../types";
|
||||
|
||||
const props = defineProps<{ column: DateColumn; modelValue: any, size?: "small" | "default" | 'large' }>();
|
||||
const props = defineProps<{ column: DateColumn; modelValue: any, size?: "small" | "default" | 'large', prop?: any }>();
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const value = computed({
|
||||
get() {
|
||||
|
|
|
@ -6,14 +6,20 @@
|
|||
placeholder="选择时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-value="new Date()"
|
||||
|
||||
v-bind="prop"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
import type { DatetimeColumn } from "../../types";
|
||||
const props = defineProps<{ column: DatetimeColumn; modelValue:any ,size?:"small"|"default"|'large'}>();
|
||||
import {computed, defineProps, defineEmits} from "vue";
|
||||
import type {DatetimeColumn} from "../../types";
|
||||
|
||||
const props = defineProps<{
|
||||
column: DatetimeColumn;
|
||||
modelValue: any,
|
||||
size?: "small" | "default" | 'large',
|
||||
prop?: any
|
||||
}>();
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const value = computed({
|
||||
get() {
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<el-input-number :controls="false" v-model="value" placeholder="请输入" :size="size" />
|
||||
<el-input-number :controls="false" v-model="value" placeholder="请输入" :size="size" v-bind="prop" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
import type {IntegerColumn} from "../../types";
|
||||
const props = defineProps<{ column: IntegerColumn; modelValue: any ,size?:"small"|"default"|'large'}>();
|
||||
const props = defineProps<{ column: IntegerColumn; modelValue: any ,size?:"small"|"default"|'large',prop?:any}>();
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const value = computed({
|
||||
get() {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-select v-model="value" filterable :size="size" >
|
||||
<el-select v-model="value" filterable :size="size" v-bind="prop">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:value="item.value"
|
||||
|
@ -12,7 +12,7 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
import type { EnumColumn } from "../../types";
|
||||
const props = defineProps<{ column: EnumColumn; modelValue:any ,size?:"small"|"default"|'large'}>();
|
||||
const props = defineProps<{ column: EnumColumn; modelValue:any ,size?:"small"|"default"|'large',prop?:any}>();
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const value = computed({
|
||||
get() {
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<el-input-number :size="size" :controls="false" v-model="value" placeholder="请输入" />
|
||||
<el-input-number :size="size" :controls="false" v-model="value" placeholder="请输入" v-bind="prop" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
import type {IntegerColumn} from "../../types";
|
||||
|
||||
const props = defineProps<{ column: IntegerColumn; modelValue: any ,size?:"small"|"default"|'large'}>();
|
||||
const props = defineProps<{ column: IntegerColumn; modelValue: any ,size?:"small"|"default"|'large',prop?:any}>();
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const value = computed({
|
||||
get() {
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
v-model="value"
|
||||
:size="size"
|
||||
placeholder="请输入"
|
||||
v-bind="prop"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
@ -12,7 +13,7 @@
|
|||
import {computed, defineEmits, defineProps} from "vue";
|
||||
import type {IntegerColumn} from "../../types";
|
||||
|
||||
const props = defineProps<{ column: IntegerColumn; modelValue: any,size?:"small"|"default"|'large' }>();
|
||||
const props = defineProps<{ column: IntegerColumn; modelValue: any,size?:"small"|"default"|'large',prop?:any }>();
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const value = computed({
|
||||
get() {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-select multiple v-model="value" :size="size" >
|
||||
<el-select multiple v-model="value" :size="size" v-bind="prop">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:value="item.value"
|
||||
|
@ -21,7 +21,7 @@ const value = computed({
|
|||
}
|
||||
});
|
||||
|
||||
const props = defineProps<{ column: SetColumn; modelValue:any ,size?:"small"|"default"|'large'}>();
|
||||
const props = defineProps<{ column: SetColumn; modelValue:any ,size?:"small"|"default"|'large',prop?:any}>();
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
|
||||
const options = computed(() => {
|
||||
|
|
|
@ -1,17 +1,18 @@
|
|||
<template>
|
||||
<el-input v-model="value" placeholder="请输入" :size="size" />
|
||||
<el-input v-model="value" placeholder="请输入" :size="size" v-bind="prop"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
import type { StringColumn } from "../../types";
|
||||
const props = defineProps<{ column: StringColumn; modelValue:any,size?:"small"|"default"|'large' }>();
|
||||
const props = defineProps<{ column: StringColumn; modelValue:any,size?:"small"|"default"|'large' ,prop?:any}>();
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const value = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(newVal) {
|
||||
console.log(props.prop)
|
||||
emit("update:modelValue", newVal);
|
||||
emit("change", newVal);
|
||||
}
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<el-input type="textarea" v-model="value" placeholder="请输入" :size="size" />
|
||||
<el-input type="textarea" v-model="value" placeholder="请输入" :size="size" v-bind="prop"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
import type { TextColumn } from "../../types";
|
||||
const props = defineProps<{ column: TextColumn; modelValue:any,size?:"small"|"default"|'large' }>();
|
||||
import {computed, defineProps, defineEmits} from "vue";
|
||||
import type {TextColumn} from "../../types";
|
||||
|
||||
const props = defineProps<{ column: TextColumn; modelValue: any, size?: "small" | "default" | 'large', prop: any }>();
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const value = computed({
|
||||
get() {
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
v-if="componentUser?.component"
|
||||
:is="componentUser?.component"
|
||||
v-bind="{ ...componentUser?.props, column,ctx }"
|
||||
:prop="prop"
|
||||
v-model="value"
|
||||
></component>
|
||||
<component
|
||||
|
@ -14,6 +15,7 @@
|
|||
"
|
||||
:size="size"
|
||||
:column="column"
|
||||
:prop="prop"
|
||||
v-model="value"
|
||||
></component>
|
||||
</template>
|
||||
|
@ -34,7 +36,7 @@ import O2OInput from "./O2OInput.vue";
|
|||
import {computed, defineEmits, defineProps} from "vue";
|
||||
import type {Column} from "../../types";
|
||||
|
||||
const props = defineProps<{ column: Column; modelValue: any; ctx: any,size?:"small"|"default"|'large' }>();
|
||||
const props = defineProps<{ column: Column; modelValue: any; ctx: any,size?:"small"|"default"|'large',prop?:any }>();
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const value = computed({
|
||||
get() {
|
||||
|
|
Loading…
Reference in New Issue