mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:13:44 +09:00
com : VFlexTable 통합
This commit is contained in:
Kasi
@@ -224,6 +224,13 @@ const columns = computed(() => {
|
|||||||
:key="'row' + column.key"
|
:key="'row' + column.key"
|
||||||
>
|
>
|
||||||
<VFlexTableCell :column="column">
|
<VFlexTableCell :column="column">
|
||||||
|
<slot
|
||||||
|
:name="`body-cell-${column.key}`"
|
||||||
|
:row="row"
|
||||||
|
:column="column"
|
||||||
|
:index="index"
|
||||||
|
:value="column.format(row[column.key], row, index)"
|
||||||
|
>
|
||||||
<slot
|
<slot
|
||||||
:name="`body-cell`"
|
:name="`body-cell`"
|
||||||
:row="row"
|
:row="row"
|
||||||
@@ -266,6 +273,7 @@ const columns = computed(() => {
|
|||||||
{{ column.format(row[column.key], row, index) }}
|
{{ column.format(row[column.key], row, index) }}
|
||||||
</span>
|
</span>
|
||||||
</slot>
|
</slot>
|
||||||
|
</slot>
|
||||||
</VFlexTableCell>
|
</VFlexTableCell>
|
||||||
</template>
|
</template>
|
||||||
</slot>
|
</slot>
|
||||||
|
|||||||
@@ -1,632 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { type VNode } from 'vue'
|
|
||||||
import { flewTableWrapperSymbol } from '../base/VFlexTableWrapper.vue'
|
|
||||||
|
|
||||||
export interface VFlexTableColumn {
|
|
||||||
key: string
|
|
||||||
label: string
|
|
||||||
format: (value: any, row: any, index: number) => any
|
|
||||||
renderHeader?: () => VNode
|
|
||||||
renderRow?: (row: any, column: VFlexTableColumn, index: number) => VNode
|
|
||||||
align?: 'start' | 'center' | 'end'
|
|
||||||
bold?: boolean
|
|
||||||
inverted?: boolean
|
|
||||||
scrollX?: boolean
|
|
||||||
scrollY?: boolean
|
|
||||||
grow?: boolean | 'lg' | 'xl'
|
|
||||||
media?: boolean
|
|
||||||
cellClass?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface VFlexTableProps {
|
|
||||||
data?: any[]
|
|
||||||
columns?: Record<string, string | Partial<VFlexTableColumn>>
|
|
||||||
printObjects?: boolean
|
|
||||||
reactive?: boolean
|
|
||||||
compact?: boolean
|
|
||||||
rounded?: boolean
|
|
||||||
separators?: boolean
|
|
||||||
clickable?: boolean
|
|
||||||
subtable?: boolean
|
|
||||||
noHeader?: boolean
|
|
||||||
useContractHeader?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const emits = defineEmits<{
|
|
||||||
(e: 'rowClick', row: any, index: number): void
|
|
||||||
}>()
|
|
||||||
const props = withDefaults(defineProps<VFlexTableProps>(), {
|
|
||||||
columns: undefined,
|
|
||||||
useContractHeader: false,
|
|
||||||
data: () => [],
|
|
||||||
})
|
|
||||||
|
|
||||||
const wrapper = inject(flewTableWrapperSymbol, null)
|
|
||||||
|
|
||||||
const data = computed(() => {
|
|
||||||
if (wrapper?.data) return wrapper.data
|
|
||||||
|
|
||||||
if (props.reactive) {
|
|
||||||
if (isReactive(props.data)) {
|
|
||||||
return props.data
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return reactive(props.data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return toRaw(props.data)
|
|
||||||
})
|
|
||||||
|
|
||||||
const defaultFormatter = (value: any) => value
|
|
||||||
const columns = computed(() => {
|
|
||||||
const columnsSrc = wrapper?.columns ?? props.columns
|
|
||||||
let columns: VFlexTableColumn[] = []
|
|
||||||
|
|
||||||
if (columnsSrc) {
|
|
||||||
for (const [key, label] of Object.entries(columnsSrc)) {
|
|
||||||
if (typeof label === 'string') {
|
|
||||||
columns.push({
|
|
||||||
format: defaultFormatter,
|
|
||||||
label,
|
|
||||||
key,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
columns.push({
|
|
||||||
format: defaultFormatter,
|
|
||||||
label: key,
|
|
||||||
key,
|
|
||||||
...(label as any),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (data.value.length > 0) {
|
|
||||||
for (const [key] of Object.entries(data.value[0])) {
|
|
||||||
columns.push({
|
|
||||||
format: defaultFormatter,
|
|
||||||
label: key,
|
|
||||||
key,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return columns
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="flex-table"
|
|
||||||
:class="[
|
|
||||||
props.compact && 'is-compact',
|
|
||||||
props.rounded && 'is-rounded',
|
|
||||||
props.separators && 'with-separators',
|
|
||||||
props.noHeader && 'no-header',
|
|
||||||
props.clickable && 'is-table-clickable',
|
|
||||||
props.subtable && 'sub-table',
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<slot v-if="props.useContractHeader" name="contract-header">
|
|
||||||
<div
|
|
||||||
v-if="!props.noHeader"
|
|
||||||
class="flex-table-header"
|
|
||||||
>
|
|
||||||
<template
|
|
||||||
v-for="column in columns"
|
|
||||||
:key="'col' + column.key"
|
|
||||||
>
|
|
||||||
<slot
|
|
||||||
name="header-column"
|
|
||||||
:column="column"
|
|
||||||
>
|
|
||||||
<component
|
|
||||||
:is="{ render: column.renderHeader } as any"
|
|
||||||
v-if="column.renderHeader"
|
|
||||||
:class="[
|
|
||||||
column.grow === true && 'is-grow',
|
|
||||||
column.grow === 'lg' && 'is-grow-lg',
|
|
||||||
column.grow === 'xl' && 'is-grow-xl',
|
|
||||||
column.align === 'end' && 'cell-end',
|
|
||||||
column.align === 'center' && 'cell-center',
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
v-else
|
|
||||||
:class="[
|
|
||||||
column.grow === true && 'is-grow',
|
|
||||||
column.grow === 'lg' && 'is-grow-lg',
|
|
||||||
column.grow === 'xl' && 'is-grow-xl',
|
|
||||||
column.align === 'end' && 'cell-end',
|
|
||||||
column.align === 'center' && 'cell-center',
|
|
||||||
]"
|
|
||||||
>{{ column.label }}</span>
|
|
||||||
</slot>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</slot>
|
|
||||||
<slot v-else name="header">
|
|
||||||
<div
|
|
||||||
v-if="!props.noHeader"
|
|
||||||
class="flex-table-header"
|
|
||||||
>
|
|
||||||
<template
|
|
||||||
v-for="column in columns"
|
|
||||||
:key="'col' + column.key"
|
|
||||||
>
|
|
||||||
<slot
|
|
||||||
name="header-column"
|
|
||||||
:column="column"
|
|
||||||
>
|
|
||||||
<component
|
|
||||||
:is="{ render: column.renderHeader } as any"
|
|
||||||
v-if="column.renderHeader"
|
|
||||||
:class="[
|
|
||||||
column.grow === true && 'is-grow',
|
|
||||||
column.grow === 'lg' && 'is-grow-lg',
|
|
||||||
column.grow === 'xl' && 'is-grow-xl',
|
|
||||||
column.align === 'end' && 'cell-end',
|
|
||||||
column.align === 'center' && 'cell-center',
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
v-else
|
|
||||||
:class="[
|
|
||||||
column.grow === true && 'is-grow',
|
|
||||||
column.grow === 'lg' && 'is-grow-lg',
|
|
||||||
column.grow === 'xl' && 'is-grow-xl',
|
|
||||||
column.align === 'end' && 'cell-end',
|
|
||||||
column.align === 'center' && 'cell-center',
|
|
||||||
]"
|
|
||||||
>{{ column.label }}</span>
|
|
||||||
</slot>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</slot>
|
|
||||||
<slot name="body">
|
|
||||||
<template
|
|
||||||
v-for="(row, index) in data"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<slot
|
|
||||||
name="body-row-pre"
|
|
||||||
:row="row"
|
|
||||||
:columns="columns"
|
|
||||||
:index="index"
|
|
||||||
/>
|
|
||||||
<!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
|
|
||||||
<div
|
|
||||||
class="flex-table-item"
|
|
||||||
:class="[props.clickable && 'is-clickable']"
|
|
||||||
:tabindex="props.clickable ? 0 : undefined"
|
|
||||||
:role="props.clickable ? 'button' : undefined"
|
|
||||||
@keydown.enter.prevent="
|
|
||||||
() => {
|
|
||||||
props.clickable && emits('rowClick', row, index)
|
|
||||||
}
|
|
||||||
"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
props.clickable && emits('rowClick', row, index)
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<slot
|
|
||||||
name="body-row"
|
|
||||||
:row="row"
|
|
||||||
:columns="columns"
|
|
||||||
:index="index"
|
|
||||||
>
|
|
||||||
<template
|
|
||||||
v-for="column in columns"
|
|
||||||
:key="'row' + column.key"
|
|
||||||
>
|
|
||||||
<VFlexTableCell :column="column">
|
|
||||||
<slot
|
|
||||||
:name="`body-cell-${column.key}`"
|
|
||||||
:row="row"
|
|
||||||
:column="column"
|
|
||||||
:index="index"
|
|
||||||
:value="column.format(row[column.key], row, index)"
|
|
||||||
>
|
|
||||||
<component
|
|
||||||
:is="
|
|
||||||
{
|
|
||||||
render: () => column.renderRow?.(row, column, index),
|
|
||||||
} as any
|
|
||||||
"
|
|
||||||
v-if="column.renderRow"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
v-else-if="
|
|
||||||
typeof column.format(row[column.key], row, index) === 'object'
|
|
||||||
"
|
|
||||||
:class="[
|
|
||||||
column.cellClass,
|
|
||||||
column.inverted && 'dark-inverted',
|
|
||||||
// !column.inverted && (column.bold ? 'dark-text' : 'light-text'),
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<details v-if="printObjects">
|
|
||||||
<div class="language-json py-4">
|
|
||||||
<pre><code>{{ column.format(row[column.key], row, index) }}</code></pre>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-else
|
|
||||||
:class="[
|
|
||||||
column.cellClass,
|
|
||||||
column.inverted && 'dark-inverted',
|
|
||||||
// !column.inverted && (column.bold ? 'dark-text' : 'light-text'),
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
{{ column.format(row[column.key], row, index) }}
|
|
||||||
</span>
|
|
||||||
</slot>
|
|
||||||
</VFlexTableCell>
|
|
||||||
</template>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
<slot
|
|
||||||
name="body-row-post"
|
|
||||||
:row="row"
|
|
||||||
:columns="columns"
|
|
||||||
:index="index"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.flex-table {
|
|
||||||
.flex-table-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.5rem 10px;
|
|
||||||
background-color: var(--primary);
|
|
||||||
|
|
||||||
> span,
|
|
||||||
.text {
|
|
||||||
flex: 1 1 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 1.0rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--smoke-white);
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: 0 10px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&.is-checkbox {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 30px;
|
|
||||||
max-width: 30px;
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
> span {
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.cell-center {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.cell-end {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-grow {
|
|
||||||
flex-grow: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-grow-lg {
|
|
||||||
flex-grow: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-grow-xl {
|
|
||||||
flex-grow: 6;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--muted-grey);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
padding-top: 0;
|
|
||||||
|
|
||||||
> span {
|
|
||||||
min-height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.flex-table-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 60px;
|
|
||||||
background: var(--white);
|
|
||||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
|
||||||
padding: 4px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
|
|
||||||
&.is-row {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sub-table {
|
|
||||||
.flex-table-item {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
min-height: 40px;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
.table-label {
|
|
||||||
font-family: var(--font);
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: var(--light-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-total {
|
|
||||||
font-family: var(--font);
|
|
||||||
color: var(--dark-text);
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
&.is-bigger {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-compact {
|
|
||||||
.flex-table-item {
|
|
||||||
margin-bottom: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-rounded {
|
|
||||||
&:not(.no-header) {
|
|
||||||
.flex-table-item {
|
|
||||||
&:nth-of-type(2) {
|
|
||||||
border-radius: 8px 8px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 6px;
|
|
||||||
border-radius: 0 0 8px 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.no-header {
|
|
||||||
.flex-table-item {
|
|
||||||
&:first-child {
|
|
||||||
border-radius: 8px 8px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 6px;
|
|
||||||
border-radius: 0 0 8px 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.is-compact) {
|
|
||||||
&.is-rounded {
|
|
||||||
.flex-table-item {
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-table-clickable {
|
|
||||||
.flex-table-item {
|
|
||||||
&:hover,
|
|
||||||
&:focus-within {
|
|
||||||
background: var(--widget-grey) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.with-separators {
|
|
||||||
.flex-table-item {
|
|
||||||
.flex-table-cell {
|
|
||||||
&:not(:first-of-type) {
|
|
||||||
border-inline-start: solid 1px color-mix(in oklab, var(--fade-grey), black 3%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
2. Flex Table Dark mode
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.is-dark {
|
|
||||||
.flex-table {
|
|
||||||
&:not(.sub-table) {
|
|
||||||
.flex-table-item {
|
|
||||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
|
||||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.with-separators {
|
|
||||||
.flex-table-item {
|
|
||||||
.flex-table-cell {
|
|
||||||
&:not(:first-of-type) {
|
|
||||||
border-inline-start: dashed 1px color-mix(in oklab, var(--dark-sidebar), white 12%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-table-clickable {
|
|
||||||
.flex-table-item {
|
|
||||||
&:hover,
|
|
||||||
&:focus-within {
|
|
||||||
background: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
3. Media Queries
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@media (width <= 767px) {
|
|
||||||
.flex-table {
|
|
||||||
.flex-table-header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-table-item {
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100% !important;
|
|
||||||
padding: 20px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> div {
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.sub-table) {
|
|
||||||
.flex-table-item {
|
|
||||||
.flex-table-cell {
|
|
||||||
> span,
|
|
||||||
> small,
|
|
||||||
> strong,
|
|
||||||
> p,
|
|
||||||
> div,
|
|
||||||
> .is-pushed-mobile,
|
|
||||||
> .text {
|
|
||||||
margin-inline-start: auto;
|
|
||||||
|
|
||||||
&.no-push {
|
|
||||||
margin-inline-start: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
.flex-table-cell {
|
|
||||||
&[data-th] {
|
|
||||||
&::before {
|
|
||||||
content: attr(data-th);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--muted-grey);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (width <= 767px) {
|
|
||||||
.flex-table {
|
|
||||||
&.sub-table {
|
|
||||||
padding-top: 16px;
|
|
||||||
|
|
||||||
.is-vhidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-table-item:not(.is-vhidden) {
|
|
||||||
flex-direction: revert !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//.contractColumn1 {
|
|
||||||
// min-width: 5%;
|
|
||||||
//}
|
|
||||||
//.contractColumn2 {
|
|
||||||
// min-width: 20%;
|
|
||||||
// overflow: hidden;
|
|
||||||
// white-space: nowrap;
|
|
||||||
// text-overflow: ellipsis;
|
|
||||||
//}
|
|
||||||
//.contractColumn3 {
|
|
||||||
// min-width: 10%;
|
|
||||||
//}
|
|
||||||
//.contractColumn4 {
|
|
||||||
// min-width: 5%;
|
|
||||||
//}
|
|
||||||
//.contractColumn5 {
|
|
||||||
// min-width: 10%;
|
|
||||||
//}
|
|
||||||
//.contractColumn6 {
|
|
||||||
// min-width: 15%;
|
|
||||||
//}
|
|
||||||
//.contractColumn7 {
|
|
||||||
// min-width: 15%;
|
|
||||||
//}
|
|
||||||
//.contractColumn8 {
|
|
||||||
// min-width: 10%;
|
|
||||||
//}
|
|
||||||
//.contractColumn9 {
|
|
||||||
// min-width: 10%;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.flex-table-cell.is-relative.contractColumn1 {
|
|
||||||
// justify-content: center;
|
|
||||||
//}
|
|
||||||
//.flex-table-cell.is-relative.contractColumn3 {
|
|
||||||
// justify-content: center;
|
|
||||||
//}
|
|
||||||
//.flex-table-cell.is-relative.contractColumn4 {
|
|
||||||
// justify-content: center;
|
|
||||||
//}
|
|
||||||
//.flex-table-cell.is-relative.contractColumn5 {
|
|
||||||
// justify-content: flex-end;
|
|
||||||
//}
|
|
||||||
//.flex-table-cell.is-relative.contractColumn6 {
|
|
||||||
// justify-content: center;
|
|
||||||
//}
|
|
||||||
//.flex-table-cell.is-relative.contractColumn7 {
|
|
||||||
// justify-content: center;
|
|
||||||
//}
|
|
||||||
//.flex-table-cell.is-relative.contractColumn9 {
|
|
||||||
// justify-content: center;
|
|
||||||
//}
|
|
||||||
</style>
|
|
||||||
@@ -182,7 +182,7 @@ function getContractDetail(){
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="datatable-wrapper">
|
<div class="datatable-wrapper">
|
||||||
<VFlexTableCustomize
|
<ComVFlexTable
|
||||||
:data="data.contractData"
|
:data="data.contractData"
|
||||||
:columns="params.flexColumn"
|
:columns="params.flexColumn"
|
||||||
:separators="true"
|
:separators="true"
|
||||||
@@ -227,7 +227,7 @@ function getContractDetail(){
|
|||||||
<span v-else>{{ value }}</span>
|
<span v-else>{{ value }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</VFlexTableCustomize>
|
</ComVFlexTable>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<VButtons class="is-right">
|
<VButtons class="is-right">
|
||||||
|
|||||||
@@ -340,7 +340,7 @@ function minAmtCalc (est) {
|
|||||||
<td>견적서확인</td>
|
<td>견적서확인</td>
|
||||||
<td colspan="6">
|
<td colspan="6">
|
||||||
<div>
|
<div>
|
||||||
<VFlexTableCustomize
|
<ComVFlexTable
|
||||||
:key="params.prcsBizs.length"
|
:key="params.prcsBizs.length"
|
||||||
:data="params.prcsBizs"
|
:data="params.prcsBizs"
|
||||||
:columns="params.prcsBizsColumn"
|
:columns="params.prcsBizsColumn"
|
||||||
@@ -377,7 +377,7 @@ function minAmtCalc (est) {
|
|||||||
<span v-else>{{ value }}</span>
|
<span v-else>{{ value }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</VFlexTableCustomize>
|
</ComVFlexTable>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td colspan="3">
|
<td colspan="3">
|
||||||
|
|||||||
Reference in New Issue
Block a user