mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 03:12:27 +09:00
Merge branch 'refs/heads/main' into feature/temp
This commit is contained in:
@@ -47,12 +47,13 @@ const classes = computed(() => {
|
||||
return ['select', props.multiple && 'is-multiple']
|
||||
})
|
||||
|
||||
const cdItems = ref<Array<{ cd: string; nm: string }>>([])
|
||||
const cdItems = computed(() => {
|
||||
return detailCode.getCodeList(props.cd_grp)
|
||||
})
|
||||
|
||||
watch(() => props.cd_grp, async (newVal) => {
|
||||
if (newVal) {
|
||||
await detailCode.setDetailCode(newVal)
|
||||
cdItems.value = detailCode.getCodeList(newVal)
|
||||
}
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
648
src/components/app-vuero/VCustomButton.vue
Normal file
648
src/components/app-vuero/VCustomButton.vue
Normal file
@@ -0,0 +1,648 @@
|
||||
<script lang="ts">
|
||||
import type { RouteLocationAsString } from 'unplugin-vue-router'
|
||||
import type { SlotsType, PropType } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
|
||||
import VPlaceload from '/@src/components/base/VPlaceload.vue'
|
||||
|
||||
export type VButtonSize = 'medium' | 'big' | 'huge'
|
||||
export type VButtonColor =
|
||||
| 'primary'
|
||||
| 'info'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'danger'
|
||||
| 'white'
|
||||
| 'dark'
|
||||
| 'light'
|
||||
| 'validation'
|
||||
export type VButtonDark = '1' | '2' | '3' | '4' | '5' | '6'
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
to: {
|
||||
type: [Object, String] as PropType<RouteLocationAsString>,
|
||||
default: undefined,
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
iconCaret: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
placeload: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
validator: (value: string) => {
|
||||
if (value.match(CssUnitRe) === null) {
|
||||
console.warn(
|
||||
`VButton: invalid "${value}" placeload. Should be a valid css unit value.`,
|
||||
)
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
},
|
||||
color: {
|
||||
type: String as PropType<VButtonColor>,
|
||||
default: undefined,
|
||||
validator: (value: VButtonColor) => {
|
||||
// The value must match one of these strings
|
||||
if (
|
||||
[
|
||||
undefined,
|
||||
'primary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'danger',
|
||||
'white',
|
||||
'dark',
|
||||
'light',
|
||||
'validation',
|
||||
].indexOf(value) === -1
|
||||
) {
|
||||
console.warn(
|
||||
`VButton: invalid "${value}" color. Should be primary, info, success, warning, danger, dark, light, validation, white or undefined`,
|
||||
)
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
},
|
||||
size: {
|
||||
type: String as PropType<VButtonSize>,
|
||||
default: undefined,
|
||||
validator: (value: VButtonSize) => {
|
||||
// The value must match one of these strings
|
||||
if ([undefined, 'medium', 'big', 'huge'].indexOf(value) === -1) {
|
||||
console.warn(
|
||||
`VButton: invalid "${value}" size. Should be big, huge, medium or undefined`,
|
||||
)
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
type: String as PropType<VButtonDark>,
|
||||
default: undefined,
|
||||
validator: (value: VButtonDark) => {
|
||||
// The value must match one of these strings
|
||||
if ([undefined, '1', '2', '3', '4', '5', '6'].indexOf(value) === -1) {
|
||||
console.warn(
|
||||
`VButton: invalid "${value}" dark. Should be 1, 2, 3, 4, 5, 6 or undefined`,
|
||||
)
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
},
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
fullwidth: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
light: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
raised: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
elevated: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
outlined: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
darkOutlined: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
lower: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
static: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
slots: Object as SlotsType<{
|
||||
default: void
|
||||
}>,
|
||||
setup(props, { slots, attrs }) {
|
||||
const classes = computed(() => {
|
||||
const defaultClasses = (attrs?.class || []) as string[] | string
|
||||
return [
|
||||
defaultClasses,
|
||||
]
|
||||
})
|
||||
const isIconify = computed(() => props.icon && props.icon.indexOf(':') !== -1)
|
||||
const isCaretIconify = computed(
|
||||
() => props.iconCaret && props.iconCaret.indexOf(':') !== -1,
|
||||
)
|
||||
|
||||
const getChildrens = () => {
|
||||
const childrens = []
|
||||
|
||||
let iconWrapper
|
||||
if (isIconify.value) {
|
||||
const icon = h('iconify-icon', {
|
||||
class: 'iconify',
|
||||
icon: props.icon,
|
||||
})
|
||||
iconWrapper = h('span', { class: 'icon' }, icon)
|
||||
}
|
||||
else if (props.icon) {
|
||||
const icon = h('i', { 'aria-hidden': true, 'class': props.icon })
|
||||
iconWrapper = h('span', { class: 'icon rtl-reflect' }, icon)
|
||||
}
|
||||
|
||||
let caretWrapper
|
||||
if (isCaretIconify.value) {
|
||||
const caret = h('iconify-icon', {
|
||||
class: 'iconify',
|
||||
icon: props.iconCaret,
|
||||
})
|
||||
caretWrapper = h('span', { class: 'caret' }, caret)
|
||||
}
|
||||
else if (props.iconCaret) {
|
||||
const caret = h('i', { 'aria-hidden': true, 'class': props.iconCaret })
|
||||
caretWrapper = h('span', { class: 'caret' }, caret)
|
||||
}
|
||||
|
||||
if (iconWrapper) {
|
||||
childrens.push(iconWrapper)
|
||||
}
|
||||
if (props.placeload) {
|
||||
childrens.push(
|
||||
h(VPlaceload, {
|
||||
width: props.placeload,
|
||||
}),
|
||||
)
|
||||
}
|
||||
else {
|
||||
childrens.push(h('span', slots.default?.()))
|
||||
}
|
||||
if (caretWrapper) {
|
||||
childrens.push(caretWrapper)
|
||||
}
|
||||
|
||||
return childrens
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (props.to) {
|
||||
return h(
|
||||
RouterLink,
|
||||
{
|
||||
...attrs,
|
||||
'aria-hidden': !!props.placeload,
|
||||
'to': props.to,
|
||||
'class': ['button', ...classes.value],
|
||||
},
|
||||
{
|
||||
default: getChildrens,
|
||||
},
|
||||
)
|
||||
}
|
||||
else if (props.href) {
|
||||
return h(
|
||||
'a',
|
||||
{
|
||||
...attrs,
|
||||
'aria-hidden': !!props.placeload,
|
||||
'href': props.href,
|
||||
'class': classes.value,
|
||||
},
|
||||
{
|
||||
default: getChildrens,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
return h(
|
||||
'button',
|
||||
{
|
||||
'type': 'button',
|
||||
...attrs,
|
||||
'aria-hidden': !!props.placeload,
|
||||
'disabled': props.disabled,
|
||||
'class': ['button', ...classes.value],
|
||||
},
|
||||
{
|
||||
default: getChildrens,
|
||||
},
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.button {
|
||||
&.is-circle {
|
||||
border-radius: var(--radius-rounded);
|
||||
}
|
||||
|
||||
&.v-button {
|
||||
padding: 8px 22px;
|
||||
height: 38px;
|
||||
line-height: 1.1;
|
||||
font-size: 0.95rem;
|
||||
font-family: var(--font);
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:not([disabled]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
border-color: color-mix(in oklab, var(--fade-grey), black 2%);
|
||||
}
|
||||
|
||||
&:not(
|
||||
.is-primary,
|
||||
.is-success,
|
||||
.is-info,
|
||||
.is-warning,
|
||||
.is-danger,
|
||||
.is-light,
|
||||
.is-white,
|
||||
.is-validation
|
||||
) {
|
||||
&.is-active {
|
||||
background: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
color: var(--white) !important;
|
||||
box-shadow: var(--primary-box-shadow) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
}
|
||||
|
||||
&.is-bold {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
&.is-raised:hover {
|
||||
opacity: 0.9;
|
||||
box-shadow: var(--primary-box-shadow);
|
||||
}
|
||||
|
||||
&.is-elevated {
|
||||
box-shadow: var(--primary-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
&.is-raised:hover {
|
||||
opacity: 0.9;
|
||||
box-shadow: var(--success-box-shadow);
|
||||
}
|
||||
|
||||
&.is-elevated {
|
||||
box-shadow: var(--success-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-info {
|
||||
&.is-raised:hover {
|
||||
opacity: 0.9;
|
||||
box-shadow: var(--info-box-shadow);
|
||||
}
|
||||
|
||||
&.is-elevated {
|
||||
box-shadow: var(--info-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
&.is-raised:hover {
|
||||
opacity: 0.9;
|
||||
box-shadow: var(--warning-box-shadow);
|
||||
}
|
||||
|
||||
&.is-elevated {
|
||||
box-shadow: var(--warning-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-validation {
|
||||
&.is-raised:hover {
|
||||
opacity: 0.9;
|
||||
box-shadow: var(--warning-box-shadow);
|
||||
}
|
||||
|
||||
&.is-elevated {
|
||||
box-shadow: var(--warning-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
&.is-raised:hover {
|
||||
opacity: 0.9;
|
||||
box-shadow: var(--danger-box-shadow);
|
||||
}
|
||||
|
||||
&.is-elevated {
|
||||
box-shadow: var(--danger-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-lower {
|
||||
text-transform: none !important;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
&.is-big {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
height: 2.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.is-huge {
|
||||
height: 50px;
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
&.simple-action {
|
||||
height: 32px;
|
||||
padding: 0 24px;
|
||||
line-height: 0;
|
||||
border-radius: 100px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&.is-purple {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--smoke-white);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 0.95;
|
||||
box-shadow: var(--primary-box-shadow);
|
||||
color: var(--smoke-white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-icon {
|
||||
.iconify {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.iconify {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
.iconify {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.v-button {
|
||||
&:not(
|
||||
.is-primary,
|
||||
.is-success,
|
||||
.is-info,
|
||||
.is-warning,
|
||||
.is-danger,
|
||||
.is-light,
|
||||
.is-white,
|
||||
.is-validation
|
||||
) {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
color: var(--dark-dark-text);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 18%);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-light {
|
||||
border: none;
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
|
||||
color: var(--smoke-white) !important;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary);
|
||||
|
||||
&.is-raised:hover {
|
||||
box-shadow: var(--primary-box-shadow) !important;
|
||||
}
|
||||
|
||||
&.is-elevated {
|
||||
box-shadow: var(--primary-box-shadow) !important;
|
||||
}
|
||||
|
||||
&.is-outlined {
|
||||
background: transparent;
|
||||
border-color: var(--primary) !important;
|
||||
color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-light {
|
||||
border: none;
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
|
||||
color: color-mix(in oklab, var(--primary), white 20%) !important;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-info {
|
||||
&.is-light {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
|
||||
color: color-mix(in oklab, var(--info), white 20%) !important;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
&.is-light {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
|
||||
color: color-mix(in oklab, var(--success), white 20%) !important;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
&.is-light {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
|
||||
color: color-mix(in oklab, var(--warning), white 20%) !important;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-validation {
|
||||
&.is-light {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
|
||||
color: color-mix(in oklab, var(--warning), white 20%) !important;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
&.is-light {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
|
||||
color: color-mix(in oklab, var(--danger), white 20%) !important;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 16%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-white {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
border-color: var(--muted-grey) !important;
|
||||
color: var(--muted-grey) !important;
|
||||
}
|
||||
|
||||
&.is-dark-outlined {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
color: var(--dark-dark-text);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: var(--primary) !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
&:not(
|
||||
.is-primary,
|
||||
.is-success,
|
||||
.is-info,
|
||||
.is-warning,
|
||||
.is-danger,
|
||||
.is-light,
|
||||
.is-white,
|
||||
.is-validation
|
||||
) {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
color: var(--dark-dark-text);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 18%);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
&.is-white {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
border-color: var(--muted-grey) !important;
|
||||
color: var(--muted-grey) !important;
|
||||
}
|
||||
|
||||
&.is-dark-outlined {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
color: var(--dark-dark-text);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: var(--primary) !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -69,6 +69,7 @@ watch(() => props.cd_grp, async (newVal) => {
|
||||
@blur="field?.handleBlur"
|
||||
>
|
||||
<option value="null">{{ props.placeholder || '선택하세요' }}</option>
|
||||
<option value="">{{ props.placeholder || '선택하세요' }}</option>
|
||||
<option
|
||||
v-for="item in cdItems"
|
||||
:key="item.cd"
|
||||
|
||||
@@ -69,6 +69,23 @@ const onKeyup = async (e: any) => {
|
||||
const res = await getUserList({params:{name : e.target.value}})
|
||||
|
||||
if (res.length > 0) {
|
||||
res.forEach(u => {
|
||||
if (model.value?.length > 0) {
|
||||
const ignore = model.value.reduce((a: Person, b: Person) => {
|
||||
return a.sabun + '|' + b.sabun
|
||||
})
|
||||
|
||||
if (typeof ignore !== 'object') {
|
||||
if (ignore.includes(u.sabun)) {
|
||||
u['disabled'] = true
|
||||
}
|
||||
} else {
|
||||
if (ignore.sabun.includes(u.sabun)) {
|
||||
u['disabled'] = true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
// res.forEach(u => { 2명으로 제한 로직 풀기 25.05.29
|
||||
// if (model.value?.length > 0) {
|
||||
// const ignore = model.value.reduce((a: Person, b: Person) => {
|
||||
@@ -110,16 +127,16 @@ const onKeyup = async (e: any) => {
|
||||
</VLabel>
|
||||
<VControl icon="lucide:search">
|
||||
<Multiselect
|
||||
v-model="approvers"
|
||||
:attrs="{ id }"
|
||||
:searchable="true"
|
||||
:disabled="props.disabled"
|
||||
:options="tagsOptions"
|
||||
mode="multiple"
|
||||
noResultsText="조회된 결과가 없습니다."
|
||||
noOptionsText="검색된 결과가 없습니다."
|
||||
:placeholder="props.placeholder"
|
||||
@keyup="onKeyup"
|
||||
v-model="approvers"
|
||||
:attrs="{ id }"
|
||||
:searchable="true"
|
||||
:disabled="props.disabled"
|
||||
:options="tagsOptions"
|
||||
mode="multiple"
|
||||
noResultsText="조회된 결과가 없습니다."
|
||||
noOptionsText="검색된 결과가 없습니다."
|
||||
:placeholder="props.placeholder"
|
||||
@keyup="onKeyup"
|
||||
>
|
||||
<template #multiplelabel="{ values }">
|
||||
<div class="multiselect-multiple-label pl-6">
|
||||
@@ -139,4 +156,4 @@ const onKeyup = async (e: any) => {
|
||||
color: var(--modal-text) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
130
src/components/app-vuero/VUserTemp.vue
Normal file
130
src/components/app-vuero/VUserTemp.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<script setup lang="ts">
|
||||
import { type Person } from '/@src/utils/types'
|
||||
import { getUserList } from '/src/service/UserApi'
|
||||
|
||||
const model = defineModel<Person[]>()
|
||||
const userSession = useUserSession()
|
||||
const dataUser = reactive({
|
||||
userSession: null,
|
||||
})
|
||||
|
||||
// onBeforeMount(() => {
|
||||
// dataUser.userSession = userSession.user.data
|
||||
// const sessioinData = [{
|
||||
// gubunCd: '0000', //구분
|
||||
// gubunNm: '입안',
|
||||
// deptNm: dataUser.userSession.dept.deptNm,
|
||||
// sabun: dataUser.userSession.sabun,
|
||||
// name: dataUser.userSession.name,
|
||||
// attendCd: '', // 비고
|
||||
//
|
||||
// }]
|
||||
// model.value = sessioinData
|
||||
// })
|
||||
const initiator = ref<Person | null>(null)
|
||||
|
||||
onBeforeMount(() => {
|
||||
dataUser.userSession = userSession.user.data
|
||||
initiator.value = {
|
||||
gubunCd: '0000',
|
||||
gubunNm: '입안',
|
||||
deptNm: dataUser.userSession.dept.deptNm,
|
||||
sabun: dataUser.userSession.sabun,
|
||||
name: dataUser.userSession.name,
|
||||
attendCd: '',
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: '직원검색',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
export interface VUserEmits {
|
||||
(e: 'update:modelValue', value: any): void
|
||||
}
|
||||
const emits = defineEmits<VUserEmits>()
|
||||
const tagsOptions = ref([])
|
||||
|
||||
const approvers = ref()
|
||||
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
if (newVal.length > 0) {
|
||||
emits('update:modelValue', approvers)
|
||||
approvers.value = []
|
||||
}
|
||||
})
|
||||
const onKeyup = async (e: any) => {
|
||||
const regex_jaeum = /[ㄱ-ㅎ]/g
|
||||
if (e.key === 'Enter') {
|
||||
if (e.target.value.match(regex_jaeum) === null) {
|
||||
try {
|
||||
const res = await getUserList({params:{name : e.target.value}})
|
||||
|
||||
if (res.length > 0) {
|
||||
tagsOptions.value = res
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error fetching user list:', e)
|
||||
}
|
||||
}
|
||||
if (e.target.value === '') {
|
||||
tagsOptions.value = []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VField v-slot="{ id }" class="pr-2 is-autocomplete-select">
|
||||
<VLabel class="has-fullwidth">
|
||||
{{props.label}}
|
||||
</VLabel>
|
||||
<VControl icon="lucide:search">
|
||||
<Multiselect
|
||||
v-model="approvers"
|
||||
:attrs="{ id }"
|
||||
:searchable="true"
|
||||
:disabled="props.disabled"
|
||||
:options="tagsOptions"
|
||||
mode="multiple"
|
||||
noResultsText="조회된 결과가 없습니다."
|
||||
noOptionsText="검색된 결과가 없습니다."
|
||||
:placeholder="props.placeholder"
|
||||
@keyup="onKeyup"
|
||||
@update:modelValue="(val) => {
|
||||
emits('update:modelValue', val)
|
||||
}"
|
||||
>
|
||||
<template #multiplelabel="{ values }">
|
||||
<div class="multiselect-multiple-label pl-6">
|
||||
{{props.placeholder}}
|
||||
</div>
|
||||
</template>
|
||||
</Multiselect>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.field {
|
||||
padding-bottom: 10px !important;
|
||||
.label {
|
||||
font-size: 1.3em;
|
||||
color: var(--modal-text) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -41,8 +41,8 @@ const params = reactive({
|
||||
prcsNo: '', // 키값
|
||||
stCdFalg: false, // 버튼 컴포넌트화
|
||||
svyYn: false,
|
||||
stCd:'',//결재상태 코드{ 등록중:0100[회수버튼],
|
||||
// 회수: 0300, 반려: 0400, 등록 완료: 0200 }
|
||||
stCd:'',//결재상태 코드{ 등록중:0100[회수버튼]
|
||||
// 회수: 0300, 반려: 0400, 등록 완료: 0200[가격조사 완료], }
|
||||
prcsAttsColumn:[ //첨부파일 입력
|
||||
{ key: 'logiFnm', label: '구분'},
|
||||
{ key: 'data', label: '데이터'}
|
||||
|
||||
@@ -14,7 +14,6 @@ onBeforeMount(async ()=>{
|
||||
|
||||
const showTable = ref(false)
|
||||
const detailActionsOpen = ref(false)
|
||||
const apprLine = defineModel<Person[]>()
|
||||
|
||||
const generalParams = reactive({
|
||||
title: "",
|
||||
@@ -30,6 +29,7 @@ const params = reactive({
|
||||
cateSelect: '',
|
||||
prcsNo: '',
|
||||
stCd: '', //상태코드 등록 전 : 0000
|
||||
defaultPricePerson:[],
|
||||
prcsAttsColumn:[ //첨부파일 입력
|
||||
{ key: 'logiFnm', label: '구분'},
|
||||
{ key: 'data', label: '데이터'}
|
||||
@@ -40,9 +40,10 @@ const params = reactive({
|
||||
{ key: 'deptNm', label: '부서' },
|
||||
{ key: 'sabun', label: '사번' },
|
||||
{ key: 'name', label: '이름' },
|
||||
{ key: 'attendCd', label: '비고'},
|
||||
{ key: 'attendCd', label: '근태'},
|
||||
{ key: 'apprStat', label: '결재상태'},
|
||||
{ key: 'apprDt', label: '승인일자'},
|
||||
{key:'actions', label: '동작'},
|
||||
],
|
||||
priceData:[],
|
||||
prcsBizsColumn: [ //견적사 입력
|
||||
@@ -90,10 +91,9 @@ function getDetailList(arg){
|
||||
apprNo: req.apprNo,
|
||||
apprOrd: req.apprOrd,
|
||||
apprStat: req.apprStat,
|
||||
apprDt: req.apprDt,
|
||||
apprDt: req.apprDt ? req.apprDt : '-',
|
||||
attendCd: req.attendCd
|
||||
})) //비고 데이터 없음, 승인일자 없음 todo
|
||||
console.log("apprLine.value",apprLine.value)
|
||||
}))
|
||||
params.prcsAtts = arg.prcsAtts
|
||||
}
|
||||
|
||||
@@ -104,47 +104,83 @@ const changeButton = () => {
|
||||
}
|
||||
|
||||
const validation = () => {
|
||||
notyf.dismissAll() //todo
|
||||
notyf.dismissAll()
|
||||
if(generalParams.regSdat > generalParams.regEdat){
|
||||
notyf.error("등록 종료일은 등록 시작일보다 빠를 수 없습니다.")
|
||||
return
|
||||
return false
|
||||
}
|
||||
|
||||
const resultGu = apprLine.value.filter((item)=> !item.gubunCd)
|
||||
|
||||
if(resultGu.length > 0){
|
||||
notyf.error("결재선 구분값을 입력해주세요")
|
||||
return false
|
||||
}
|
||||
|
||||
if(apprLine.value.length < 2){
|
||||
notyf.error("결재선은 두 명이상 입력해주세요.")
|
||||
return
|
||||
return false
|
||||
}
|
||||
const result = apprLine.value.filter((item)=> item.gubunCd === '0200' )
|
||||
|
||||
if(result.length > 1){
|
||||
notyf.error("결재는 한 명입니다.")
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const selectUser = ref<Person[]>([])
|
||||
const apprLine = ref<Person[]>([])
|
||||
|
||||
const isDuplicate = (person: Person) =>
|
||||
apprLine.value.some((p) => p.sabun === person.sabun)
|
||||
|
||||
watch(
|
||||
selectUser,
|
||||
(newPersons) => {
|
||||
if (Array.isArray(newPersons) && newPersons.length > 0) {
|
||||
const filtered = newPersons.filter((p) => !isDuplicate(p))
|
||||
apprLine.value = [...apprLine.value, ...filtered]
|
||||
selectUser.value = []
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const updatePriceOne = async () => {
|
||||
let res = null
|
||||
try{
|
||||
loading.value = true
|
||||
validation()
|
||||
const paramsPrice ={
|
||||
prcsNo : params.prcsNo,
|
||||
cateCd : params.cateSelect,
|
||||
title: generalParams.title,
|
||||
content: generalParams.content,
|
||||
regSdat: formatDatefromString(generalParams.regSdat),
|
||||
regEdat: formatDatefromString(generalParams.regEdat),
|
||||
prvYn: false,
|
||||
prvRsn : "",
|
||||
prvPwd : "",
|
||||
aiYn: false,
|
||||
prcsBizs: params.prcsBizs.map(({ num, ...rest }) => rest), //견적사 입력 데이터
|
||||
dtlSpecs: [], //todo
|
||||
// params.dtlSpecs.map(({ num, ...rest }) => rest), //상세 규격 입력 데이터
|
||||
prcsAtts: pbAtts.value.map(req => ({
|
||||
logiFnm: req.logiFnm,
|
||||
data: req.data})),//첨부파일 데이터,
|
||||
apprReqs: apprLine.value.map(({ deptNm, ...rest }) => rest), //결재선 데이터
|
||||
}
|
||||
res = await updatePrice(paramsPrice)
|
||||
notyf.dismissAll()
|
||||
if(res.request.status == '200'){
|
||||
notyf.primary('수정 되었습니다.')
|
||||
router.push({path: '/app/priceManagement'})
|
||||
if (validation()){
|
||||
const paramsPrice ={
|
||||
prcsNo : params.prcsNo,
|
||||
cateCd : params.cateSelect,
|
||||
title: generalParams.title,
|
||||
content: generalParams.content,
|
||||
regSdat: formatDatefromString(generalParams.regSdat),
|
||||
regEdat: formatDatefromString(generalParams.regEdat),
|
||||
prvYn: false,
|
||||
prvRsn : "",
|
||||
prvPwd : "",
|
||||
aiYn: false,
|
||||
prcsBizs: params.prcsBizs.map(({ num, ...rest }) => rest), //견적사 입력 데이터
|
||||
dtlSpecs: [], //todo
|
||||
// params.dtlSpecs.map(({ num, ...rest }) => rest), //상세 규격 입력 데이터
|
||||
prcsAtts: pbAtts.value.map(req => ({
|
||||
logiFnm: req.logiFnm,
|
||||
data: req.data})),//첨부파일 데이터,
|
||||
apprReqs: apprLine.value.map(({ deptNm, ...rest }, index) => ({
|
||||
...rest,
|
||||
apprOrd: index + 1, // 결재 순서 1부터 시작
|
||||
})), //결재선 데이터
|
||||
}
|
||||
res = await updatePrice(paramsPrice)
|
||||
notyf.dismissAll()
|
||||
if(res.request.status == '200'){
|
||||
notyf.primary('수정 되었습니다.')
|
||||
router.push({path: '/app/priceManagement'})
|
||||
}
|
||||
}
|
||||
}catch(e){
|
||||
notyf.error(e.message)
|
||||
@@ -191,6 +227,15 @@ const onDetailDelete = (index: number) => {
|
||||
}
|
||||
}
|
||||
|
||||
const onPriceDelete = (index: number) => {
|
||||
|
||||
if(apprLine.value.length-1 !== params.felxColumn.length
|
||||
|| (params.felxColumn.length == 8 && apprLine.value.length-1 == params.felxColumn.length))
|
||||
{
|
||||
console.log("index",index)
|
||||
apprLine.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function onInput(row, column){
|
||||
if (column.key === 'bizNo') {
|
||||
@@ -251,6 +296,20 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
|
||||
link.click()
|
||||
}
|
||||
|
||||
const moveUp = (index: number) => {
|
||||
if (index <= 0) return
|
||||
let temp = apprLine.value[index]
|
||||
apprLine.value[index] = apprLine.value[index - 1]
|
||||
apprLine.value[index - 1] = temp
|
||||
}
|
||||
|
||||
const moveDown = (index: number) => {
|
||||
if (index >= apprLine.value.length - 1) return
|
||||
let temp = apprLine.value[index]
|
||||
apprLine.value[index] = apprLine.value[index + 1]
|
||||
apprLine.value[index + 1] = temp
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -539,7 +598,7 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
|
||||
</table>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<VUser v-model="apprLine"/>
|
||||
<VUserTemp v-model="selectUser"/>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<VField class="pr-2">
|
||||
@@ -548,6 +607,7 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
|
||||
</VLabel>
|
||||
</VField>
|
||||
<ComVFlexTable
|
||||
:key="apprLine.map(item => item.sabun).join(',')"
|
||||
:data="apprLine"
|
||||
:columns="params.felxColumn"
|
||||
:separators="true"
|
||||
@@ -569,14 +629,15 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
|
||||
placeholder="재중"
|
||||
cd_grp=6
|
||||
v-model="row.attendCd">
|
||||
<!-- <template #code>-->
|
||||
<!-- <span v-if="!row.attendCd">{{"재중"}}</span>-->
|
||||
<!-- </template>-->
|
||||
</VDefaultCodeSelect>
|
||||
</VField>
|
||||
</span>
|
||||
<span v-else
|
||||
@click="onDetailDelete(index)">{{value}}</span>
|
||||
<span v-else-if="column.key === 'actions'" class="flex gap-1">
|
||||
<VCustomButton @click="moveUp(index)" icon="lucide:chevron-up" />
|
||||
<VCustomButton @click="moveDown(index)" icon="lucide:chevron-down" />
|
||||
<VCustomButton @click="onPriceDelete(index)" icon="lucide:x" />
|
||||
</span>
|
||||
<span v-else>{{value}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</ComVFlexTable>
|
||||
@@ -584,7 +645,7 @@ const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: stri
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px;">
|
||||
<VButton
|
||||
color="primary"
|
||||
@click.stop="updatePriceOne"
|
||||
@click.stop="updatePriceOne()"
|
||||
raised>
|
||||
수정
|
||||
</VButton>
|
||||
|
||||
@@ -1,17 +1,27 @@
|
||||
import { acceptHMRUpdate, defineStore } from 'pinia'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { getDetailCode } from '/@src/service/code'
|
||||
|
||||
export const useCodes = defineStore('codeStore', () => {
|
||||
// 🟡 상태
|
||||
const codes = ref<Record<number, Array<{ cd: string; nm: string }>>>({})
|
||||
|
||||
// 🔵 액션: 코드 불러오기
|
||||
const loadingPromises = new Map<number, Promise<void>>()
|
||||
|
||||
const setDetailCode = async (cd_grp: number) => {
|
||||
if (!codes.value[cd_grp]) {
|
||||
const res = await getDetailCode(cd_grp)
|
||||
codes.value[cd_grp] = res
|
||||
if (codes.value[cd_grp] && codes.value[cd_grp].length > 0) return
|
||||
|
||||
if (loadingPromises.has(cd_grp)) {
|
||||
return loadingPromises.get(cd_grp)
|
||||
}
|
||||
|
||||
const p = getDetailCode(cd_grp).then((res) => {
|
||||
codes.value[cd_grp] = res
|
||||
}).finally(() => {
|
||||
loadingPromises.delete(cd_grp)
|
||||
})
|
||||
|
||||
loadingPromises.set(cd_grp, p)
|
||||
return p
|
||||
}
|
||||
|
||||
// 🟢 코드 목록 가져오기
|
||||
|
||||
3
types/components.d.ts
vendored
3
types/components.d.ts
vendored
@@ -483,6 +483,7 @@ declare module 'vue' {
|
||||
VCreditCard: typeof import('./../src/components/base-addons/VCreditCard.vue')['default']
|
||||
VCreditCardDocumentation: typeof import('./../documentation/plugins/credit-card/v-credit-card-documentation.md')['default']
|
||||
VCreditCardPropsDocumentation: typeof import('./../documentation/plugins/credit-card/v-credit-card-props-documentation.md')['default']
|
||||
VCustomButton: typeof import('./../src/components/app-vuero/VCustomButton.vue')['default']
|
||||
VDarkmodeSwitch: typeof import('./../src/components/base/VDarkmodeSwitch.vue')['default']
|
||||
VDarkmodeToggle: typeof import('./../src/components/base/VDarkmodeToggle.vue')['default']
|
||||
VDefaultCodeSelect: typeof import('./../src/components/app-vuero/VDefaultCodeSelect.vue')['default']
|
||||
@@ -507,6 +508,7 @@ declare module 'vue' {
|
||||
VFlexTableBaseDocumentation: typeof import('./../documentation/flex-table/v-flex-table-base-documentation.md')['default']
|
||||
VFlexTableCell: typeof import('./../src/components/base/VFlexTableCell.vue')['default']
|
||||
VFlexTableColumnsDocumentation: typeof import('./../documentation/flex-table/v-flex-table-columns-documentation.md')['default']
|
||||
VFlexTableCustomize: typeof import('./../src/components/app-vuero/VFlexTableCustomize.vue')['default']
|
||||
VFlexTableMediaDocumentation: typeof import('./../documentation/flex-table/v-flex-table-media-documentation.md')['default']
|
||||
VFlexTablePrintObjectsDocumentation: typeof import('./../documentation/flex-table/v-flex-table-print-objects-documentation.md')['default']
|
||||
VFlexTableScrollableDocumentation: typeof import('./../documentation/flex-table/v-flex-table-scrollable-documentation.md')['default']
|
||||
@@ -603,6 +605,7 @@ declare module 'vue' {
|
||||
VTextarea: typeof import('./../src/components/base/VTextarea.vue')['default']
|
||||
VTextEllipsis: typeof import('./../src/components/base/VTextEllipsis.vue')['default']
|
||||
VUser: typeof import('./../src/components/app-vuero/VUser.vue')['default']
|
||||
VUserTemp: typeof import('./../src/components/app-vuero/VUserTemp.vue')['default']
|
||||
VVivus: typeof import('./../src/components/base-addons/VVivus.vue')['default']
|
||||
WebappConversation1: typeof import('./../src/components/partials/messaging/WebappConversation1.vue')['default']
|
||||
WebappConversation10: typeof import('./../src/components/partials/messaging/WebappConversation10.vue')['default']
|
||||
|
||||
Reference in New Issue
Block a user