mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 06:53:29 +09:00
618 lines
19 KiB
Vue
618 lines
19 KiB
Vue
<script setup lang="ts">
|
|
import {savePrice} from '/src/service/priceApi'
|
|
import {type iPbAtt, Person} from '/@src/utils/types'
|
|
import {formatBizNum,formatDatefromString} from "/@src/utils/common/comfunc.ts";
|
|
|
|
const notyf = useNotyf()
|
|
const showTable = ref(false)
|
|
const detailActionsOpen = ref(false)
|
|
const apprLine = defineModel<Person[]>()
|
|
const today = new Date()
|
|
const loading = ref(false)
|
|
//포커스 설정 변수 정리
|
|
const cateSelectRef = ref()
|
|
const titleRef = ref()
|
|
const contentRef = ref()
|
|
const prcsBizsRef = ref()
|
|
const router = useRouter()
|
|
|
|
const generalParams = reactive({
|
|
title: "",
|
|
content: "",
|
|
regSdat: "",
|
|
regEdat: "",
|
|
prvYn: true,
|
|
prvRsn : "",
|
|
prvPwd : "",
|
|
aiYn: true,
|
|
})
|
|
const params = reactive({
|
|
cateSelect: '',
|
|
prcsAttsColumn:[ //첨부파일 입력
|
|
{ key: 'logiFnm', label: '구분'},
|
|
{ key: 'data', label: '데이터'}
|
|
],
|
|
prcsAtts: [], //첨부파일 데이터
|
|
felxColumn: [
|
|
{ key: 'gubunCd', label: '구분'},
|
|
{ key: 'deptNm', label: '부서' },
|
|
{ key: 'sabun', label: '사번' },
|
|
{ key: 'name', label: '이름' },
|
|
{ key: 'attendCd', label: '비고' },
|
|
{ key: 'actions', label: '동작'}
|
|
],
|
|
priceData:[],
|
|
prcsBizsColumn: [ //견적사 입력
|
|
{ key: 'num', label: '구분', width: '10%' },
|
|
{ key: 'email', label: '이메일', editable: true, width: '50px' },
|
|
{ key: 'bizNo', label: '사업자번호', editable: true, width: '50px'},
|
|
{ key: 'actions', label: '동작', width: '100px'}
|
|
],
|
|
prcsBizs: [], //견적사 입력 데이터
|
|
dtlSpecsColumn: [
|
|
{ key: 'num', label: '번호', editable: false },
|
|
{ key: 'itemNm', label: '품명', editable: true },
|
|
{ key: 'spec', label: '규격', editable: true },
|
|
{ key: 'unit', label: '단위', editable: true },
|
|
{ key: 'qty', label: '수량', editable: true },
|
|
{ key: '', label: '단가(VAT별도)', editable: false },
|
|
{ key: '', label: '금액(VAT별도)', editable: false },
|
|
{ key: 'delete', label: '삭제', editable: false },
|
|
],
|
|
dtlSpecs: [], //상세 규격 입력 데이터
|
|
})
|
|
|
|
const validation = () => {
|
|
if(!params.cateSelect){
|
|
notyf.error("필수값 입니다.")
|
|
cateSelectRef.value.focus() //todo 선택박스 필수값 체크하기
|
|
console.log(params.cateSelect)
|
|
return false
|
|
}
|
|
|
|
if(!generalParams.title){
|
|
notyf.error("필수값 입니다.")
|
|
titleRef.value.focus()
|
|
return false
|
|
}
|
|
|
|
if(!generalParams.content){
|
|
notyf.error("필수값 입니다.")
|
|
contentRef.value.focus()
|
|
return false
|
|
}
|
|
|
|
if(params.prcsBizs==[]){
|
|
notyf.error("견적요청을 입력해주세요")
|
|
prcsBizsRef.value.focus()
|
|
return false
|
|
}
|
|
|
|
if(apprLine.value.length < 2){
|
|
notyf.error("결재선은 두 명이상 입력해주세요.")
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
const savePriceOne = async () => {
|
|
let res = null
|
|
try{
|
|
loading.value = true
|
|
// if (!validation()) {
|
|
// return;
|
|
// }
|
|
const paramsPrice ={
|
|
cateCd : params.cateSelect,
|
|
title: generalParams.title,
|
|
content: generalParams.content,
|
|
regSdat: formatDatefromString(generalParams.regSdat),
|
|
regEdat: formatDatefromString(generalParams.regEdat),
|
|
prvYn: true,
|
|
prvRsn : "",
|
|
prvPwd : "",
|
|
aiYn: true,
|
|
prcsBizs: params.prcsBizs.map(({ num, ...rest }) => rest), //견적사 입력 데이터
|
|
dtlSpecs: params.dtlSpecs.map(({ num, ...rest }) => rest), //상세 규격 입력 데이터
|
|
prcsAtts: params.prcsAtts, //첨부파일 데이터
|
|
apprReqs: apprLine.value.map(({ deptNm, ...rest }) => rest), //결재선 데이터
|
|
}
|
|
|
|
res = await savePrice(paramsPrice)
|
|
|
|
if(res.request.status == '200'){
|
|
notyf.primary('등록 되었습니다.')
|
|
router.push({path: '/app/priceManagement'})
|
|
}
|
|
}catch(e){
|
|
notyf.error(e.message)
|
|
}finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const pbAtts = ref<iPbAtt[]>(params.prcsAtts)
|
|
|
|
const addNewEstimateRow = () => {
|
|
const newRow = {}
|
|
params.prcsBizsColumn.forEach(col => {
|
|
if (col.key && col.key !== 'actions') {
|
|
newRow[col.key] = ''
|
|
}
|
|
})
|
|
params.prcsBizs.push(newRow)
|
|
}
|
|
|
|
const onDelete = (index: number) => {
|
|
|
|
if(params.prcsBizs.length-1 !== params.prcsBizsColumn.length
|
|
|| (params.prcsBizsColumn.length == 4 && params.prcsBizs.length-1 == params.prcsBizsColumn.length))
|
|
{
|
|
params.prcsBizs.splice(index, 1)
|
|
}
|
|
}
|
|
|
|
const addNewDetailRow = () => {
|
|
const newRow = {}
|
|
params.dtlSpecsColumn.forEach(col => {
|
|
if (col.key) {
|
|
newRow[col.key] = ''
|
|
}
|
|
})
|
|
params.dtlSpecs.push(newRow)
|
|
console.log(params.dtlSpecs.length)
|
|
}
|
|
|
|
const onDetailDelete = (index: number) => {
|
|
|
|
if(params.dtlSpecs.length-1 !== params.dtlSpecsColumn.length
|
|
|| (params.dtlSpecsColumn.length == 8 && params.dtlSpecs.length-1 == params.dtlSpecsColumn.length))
|
|
{
|
|
params.dtlSpecs.splice(index, 1)
|
|
}
|
|
}
|
|
|
|
const onPayDelete = (index: number) => {
|
|
if(apprLine.value.length-1 !== params.felxColumn.length
|
|
|| (params.felxColumn.length == 6 && apprLine.value.length-1 == params.felxColumn.length))
|
|
{
|
|
apprLine.value.splice(index, 1)
|
|
}
|
|
}
|
|
|
|
|
|
const onFileClick = () => {
|
|
const input = <any> document.querySelector('.file-input')
|
|
input.click()
|
|
}
|
|
|
|
const onFileChange = (e: any) => {
|
|
Array.from(e.target.files).forEach((file: any) => {
|
|
const reader = new FileReader()
|
|
reader.onload = () => {
|
|
const result = <string>reader.result
|
|
const pbAtt = <iPbAtt>{
|
|
logiFnm: file.name,
|
|
size: file.size,
|
|
data: result.split(',')[1],
|
|
}
|
|
notyf.dismissAll()
|
|
if(pbAtt.logiFnm.includes('.pdf')) {
|
|
pbAtts.value.push(pbAtt)
|
|
}else{
|
|
notyf.error("pdf 파일만 업로드 가능합니다.")
|
|
}
|
|
}
|
|
|
|
reader.readAsDataURL(file)
|
|
})
|
|
}
|
|
|
|
const onFilDelete = async ( index: number, fileOrd: number) => {
|
|
const confirmed = confirm('삭제하시겠습니까?')
|
|
if (index) {
|
|
if (confirmed){
|
|
pbAtts.value.splice(index, 1)
|
|
}
|
|
}
|
|
}
|
|
|
|
function onInput(row, column){
|
|
if (column.key === 'bizNo') {
|
|
const raw =row[column.key].replace(/\D/g, '')
|
|
row[column.key] = formatBizNum(raw) // 실시간 포맷 적용
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-content is-navbar-lg">
|
|
<div class="datatable-wrapper">
|
|
<div class="table-container">
|
|
<table class="table datatable-table is-fullwidth">
|
|
<colgroup>
|
|
<col style="width: 10%;">
|
|
<col style="width: 10%;">
|
|
<col style="width: 10%;">
|
|
<col style="width: 10%;">
|
|
<col style="width: 10%;">
|
|
<col style="width: 10%;">
|
|
<col style="width: 10%;">
|
|
<col style="width: 10%;">
|
|
<col style="width: 10%;">
|
|
<col style="width: 10%;">
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<td>분야<span style="color: red">*</span></td>
|
|
<td colspan="2">
|
|
<span class="column is-7">
|
|
<VField class="pr-2">
|
|
<VCodeSelect
|
|
cd_grp=5
|
|
v-model="params.cateSelect"
|
|
ref="cateSelectRef"/>
|
|
</VField>
|
|
</span>
|
|
</td>
|
|
<td>제목<span style="color: red">*</span></td>
|
|
<td colspan="6">
|
|
<div class="column is-fullhd">
|
|
<VField class="pr-2">
|
|
<VControl>
|
|
<input
|
|
v-model="generalParams.title"
|
|
class="input custom-text-filter"
|
|
placeholder="제목"
|
|
ref="titleRef"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>내용<span style="color: red">*</span></td>
|
|
<td colspan="10">
|
|
<div class="column is-fullhd">
|
|
<VField class="pr-2">
|
|
<VControl>
|
|
<textarea
|
|
v-model="generalParams.content"
|
|
class="input custom-text-filter"
|
|
style="height: 100px;"
|
|
placeholder="내용"
|
|
ref="contentRef"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>견적요청<span style="color: red">*</span></td>
|
|
<td colspan="9">
|
|
<VButton
|
|
color="primary"
|
|
icon="fas fa-plus"
|
|
elevated
|
|
@click="showTable = !showTable"
|
|
style="width: 21.4%;"
|
|
>
|
|
견적사 입력
|
|
</VButton>
|
|
<div v-if="showTable" class="mt-2">
|
|
<ComVFlexTable
|
|
:key="params.prcsBizs.length"
|
|
:data="params.prcsBizs"
|
|
:columns="params.prcsBizsColumn"
|
|
:compact="true"
|
|
:separators="true"
|
|
:clickable="true"
|
|
>
|
|
<template #body-cell="{ row, column, index, value }">
|
|
<div>
|
|
<VField class="pr-3" v-if="column.editable">
|
|
<VControl>
|
|
<input
|
|
v-model="row[column.key]"
|
|
class="input custom-text-filter"
|
|
ref="prcsBizsRef"
|
|
@blur="onInput(row, column)"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
<span v-else-if="column.key=='num'">{{index + 1}}</span>
|
|
<!-- readonly 출력 -->
|
|
<span v-else class="lnil lnil-close"
|
|
@click="onDelete(index)">{{ value }}</span>
|
|
</div>
|
|
</template>
|
|
</ComVFlexTable>
|
|
<div class="mt-2">
|
|
<VButton
|
|
color="primary"
|
|
icon="fas fa-plus"
|
|
@click="addNewEstimateRow"
|
|
>
|
|
행 추가
|
|
</VButton>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>규격입력<span style="color: red">*</span></td>
|
|
<td colspan="2">
|
|
<VButton
|
|
color="primary"
|
|
icon="fas fa-plus"
|
|
elevated
|
|
@click="detailActionsOpen = true"
|
|
style="width: 100%;"
|
|
>
|
|
상세 규격 입력
|
|
</VButton>
|
|
<VModal
|
|
:open="detailActionsOpen"
|
|
actions="center"
|
|
title="상세 규격 입력"
|
|
size="contract-big"
|
|
@close="detailActionsOpen = false"
|
|
>
|
|
<template #content>
|
|
<div class="form-label">
|
|
<VButton color="success">일괄업로드</VButton>
|
|
</div>
|
|
<ComVFlexTable
|
|
:key="params.dtlSpecs.length"
|
|
:data="params.dtlSpecs"
|
|
:columns="params.dtlSpecsColumn"
|
|
:separators="true"
|
|
:clickable="true"
|
|
:compact="true"
|
|
>
|
|
<template #body-cell="{ row, column, index, value }">
|
|
<!-- 예: 특정 컬럼이면 input, 아니면 그냥 값 출력 -->
|
|
<div class="control w-100" :class="column.key === 'delete'? 'text-center': ''">
|
|
<input
|
|
v-if="column.editable"
|
|
v-model="row[column.key]"
|
|
class="input custom-text-filter"
|
|
/>
|
|
<span v-else-if="column.key=='num'">{{index+1}}</span>
|
|
<span v-else-if="column.key=='delete'" class="lnil lnil-close"
|
|
@click="onDetailDelete(index)">{{ value }}</span>
|
|
</div>
|
|
</template>
|
|
</ComVFlexTable>
|
|
<div class="mt-2">
|
|
<VButton
|
|
color="primary"
|
|
icon="fas fa-plus"
|
|
@click="addNewDetailRow"
|
|
>
|
|
행 추가
|
|
</VButton>
|
|
</div>
|
|
</template>
|
|
<template #action="{ close }">
|
|
<VButton color="primary" @click="close">
|
|
등록
|
|
</VButton>
|
|
</template>
|
|
</VModal>
|
|
</td>
|
|
<td>등록기간<span style="color: red">*</span></td>
|
|
<td colspan="6">
|
|
<div class="columns">
|
|
<div class="column is-4">
|
|
<VDatePicker
|
|
v-model="generalParams.regSdat"
|
|
color="green"
|
|
trim-weeks
|
|
>
|
|
<template #default="{ inputValue, inputEvents }">
|
|
<VField>
|
|
<VControl icon="lucide:calendar">
|
|
<input
|
|
class="input v-input"
|
|
type="text"
|
|
:value="inputValue"
|
|
v-on="inputEvents"
|
|
placeholder="시작일"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
</VDatePicker>
|
|
</div>
|
|
<div class="column is-1" style="text-align: center; line-height: 2rem;">~</div>
|
|
<div class="column is-4">
|
|
<VDatePicker
|
|
v-model="generalParams.regEdat"
|
|
color="green"
|
|
trim-weeks
|
|
:minDate="today"
|
|
>
|
|
<template #default="{ inputValue, inputEvents }">
|
|
<VField>
|
|
<VControl icon="lucide:calendar">
|
|
<input
|
|
class="input v-input"
|
|
type="text"
|
|
:value="inputValue"
|
|
v-on="inputEvents"
|
|
placeholder="종료일"
|
|
>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
</VDatePicker>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>첨부파일</td>
|
|
<td colspan="3">
|
|
<VField>
|
|
<div class="form-label">
|
|
<div class="file has-name is-fullwidth">
|
|
<input
|
|
class="file-input hide"
|
|
type="file"
|
|
multiple
|
|
@change="(e) => onFileChange(e)"
|
|
>
|
|
<VLabel>
|
|
<VButton icon="fas fa-plus" color="info" class="file-trigger" @click="onFileClick" >
|
|
<span>파일업로드</span>
|
|
</VButton>
|
|
</VLabel>
|
|
</div>
|
|
</div>
|
|
<VControl>
|
|
<div
|
|
v-for="(f, i) in pbAtts"
|
|
:key="f.logiFnm"
|
|
class="content estimate-file-wrapper"
|
|
>
|
|
<div class="estimate-file-name">
|
|
{{ f.logiFnm }}{{" ("}}{{Math.ceil(f.size / 1024)}}kb{{")"}}
|
|
</div>
|
|
<div>
|
|
<i class="fa fa-trash estimate-file-delete" @click="onFilDelete( i, f.fileOrd)" />
|
|
</div>
|
|
</div>
|
|
</VControl>
|
|
</VField>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="column is-12">
|
|
<VUser v-model="apprLine"/>
|
|
</div>
|
|
<div class="column is-12">
|
|
<VField class="pr-2">
|
|
<VLabel class="has-fullwidth">
|
|
결재선
|
|
</VLabel>
|
|
</VField>
|
|
<ComVFlexTable
|
|
:data="apprLine"
|
|
:columns="params.felxColumn"
|
|
:separators="true"
|
|
:clickable="true"
|
|
:compact="true">
|
|
<template #body-cell="{ row, column, index, value }">
|
|
<!-- 예: 특정 컬럼이면 input, 아니면 그냥 값 출력 -->
|
|
<div>
|
|
<!-- <span v-if="column.key=='gubunCd' && index == 0" class="column">-->
|
|
<!-- {{row.gubunNm}}-->
|
|
<!-- </span>-->
|
|
<span v-if="column.key=='gubunCd'" class="column">
|
|
<VField class="pr-1">
|
|
<VCodeSelect
|
|
cd_grp=7
|
|
v-model="row.gubunCd"
|
|
/>
|
|
<!-- :disabled="index === 0"-->
|
|
</VField>
|
|
</span>
|
|
<span v-else-if="column.key=='attendCd' && index != 0" class="column">
|
|
<VField class="pr-1">
|
|
<VCodeSelect
|
|
placeholder="재중"
|
|
cd_grp=6
|
|
v-model="row.attendCd"/>
|
|
</VField>
|
|
</span>
|
|
<span v-else-if="column.key=='actions'" class="lnil lnil-close"
|
|
@click="onPayDelete(index)"/>
|
|
<span v-else>{{value}}</span>
|
|
</div>
|
|
</template>
|
|
</ComVFlexTable>
|
|
</div>
|
|
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px;">
|
|
<VButton
|
|
color="primary"
|
|
@click.stop="savePriceOne"
|
|
raised>
|
|
등록
|
|
</VButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
/*css 추가 start*/
|
|
.flex-table {
|
|
.flex-table-header {
|
|
padding: 0.1rem !important;
|
|
min-height: 40px;
|
|
border-top-left-radius: .75rem;
|
|
border-top-right-radius: .75rem;
|
|
}
|
|
|
|
.flex-table-cell {
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.flex-table-item {
|
|
padding: 0.1rem !important;
|
|
min-height: 40px;
|
|
|
|
.column {
|
|
min-height: 40px;
|
|
padding: 0.1rem !important;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom-left-radius: .75rem;
|
|
border-bottom-right-radius: .75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-container {
|
|
overflow:hidden;
|
|
.control {
|
|
width: 100%;
|
|
}
|
|
td {
|
|
padding: 10px 10px !important;
|
|
.columns {
|
|
margin-left: 10px !important;
|
|
padding-top: 10px;
|
|
}
|
|
.column {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-center {
|
|
text-align:center;
|
|
}
|
|
.table tbody td {
|
|
color: var(--smoke-white);
|
|
}
|
|
|
|
.datatable-table {
|
|
padding: 12px 12px;
|
|
|
|
td:nth-child(1) {
|
|
background-color: var(--primary);
|
|
}
|
|
td:nth-child(3) {
|
|
background-color: var(--primary);
|
|
}
|
|
}
|
|
|
|
</style> |