sk_fems_ui/components/common/modal/ChangeUserPswdPopPage.vue

<template>
	<v-row class="search-box" align="center" no-gutters>
		<v-col v-if="item.label" :cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4">
			<label for="" class="search-box-label">
				<v-icon
					v-if="item.iconShow"
					small
					:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
					>$icoBulletPoint</v-icon
				>
				{{ item.label }}
				<span v-if="item.essential">*</span>
			</label>
			<!-- <label for="" class="search-box-label ft-size_14 ft-clr_g-c">
        {{ item.label }}
      </label> -->
		</v-col>
		<v-col :cols="item.label ? 7 : ''">
			<template v-if="myBindingData && myBindingData.rowStat === 'I'">
				<v-text-field
					v-model.trim="InputValue"
					class="v-input__custom"
					type="password"
					outlined
					@focus="isFocused = true"
					@blur="isFocused = false"
					@input="modifyValue($event, item.valueNm)"
					:hide-details="true"
				></v-text-field>
			</template>
			<template v-else>
				<!-- <v-icon>mdi-content-save</v-icon> -->
				<!-- <v-btn :ripple="false" @click="dialog = !dialog">
					<span>비밀번호 {{ isPassword }}</span>
				</v-btn> -->
				<a-button :ripple="false" @click="dialog = !dialog" class="ant-btn-outlined">
					<!-- <v-icon>mdi-content-save</v-icon> -->
					비밀번호 {{ isPassword }} 
				</a-button>
			</template>
		</v-col>

		<v-dialog v-model="dialog" scrollable width="504px">
			<v-card style="height: 100%">
				<v-card-title class="px-4">
					<span class="custom-title-4" style="padding-left: 1px;">비밀번호 {{ isPassword }}</span>
				</v-card-title>
				<v-card-text class="pb-4 px-3">
					<v-col>
						<label for="" class="search-box-label">
							{{ isPassword }}할 비밀번호를 입력하세요
						</label>
						<v-text-field
							v-model.trim="firstPswd"
							class="v-input-popup__custom"
							type="password"
							:readonly="!isFocused"
							@focus="isFocused = true"
							@blur="isFocused = false"
						></v-text-field>
					</v-col>
					<v-col>
						<label for="" class="search-box-label">
							{{ isPassword }}할 비밀번호를 다시 입력하세요
						</label>
						<v-text-field
							v-model.trim="secondPswd"
							class="v-input-popup__custom"
							type="password"
							:readonly="!isFocused"
							@focus="isFocused = true"
							@blur="isFocused = false"
						></v-text-field>
					</v-col>
				</v-card-text>
				<v-card-actions class="pb-4">
					<v-spacer></v-spacer>
					<!-- <v-btn color="primary" dark @click="setUpdate()">확인</v-btn> -->
					<div class="d-flex" style="gap: 8px">
						 <a-button @click="close()" class="ant-btn-popup-default">닫기</a-button>
						 <a-button type="primary" @click="setUpdate()" class="v-btn-add-text">
							 확인
						 </a-button>
					</div>
					<!-- <v-btn color="primary" dark @click="close()">닫기</v-btn> -->

				</v-card-actions>
			</v-card>
		</v-dialog>
	</v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		item: {
			type: Object,
			require: true,
		},
	},
	data() {
		return {
			dialog: false,
			firstPswd: null,
			secondPswd: null,
			isFocused: false,
			changeRow: false,
		};
	},
	computed: {
		...mapState({
			myBindingData(state) {
				return state.pageData[this.parentPrgmId]['rowGridSelectData'];
			},
			myRowGridSelectKey(state) {
				return state.pageData[this.parentPrgmId]['rowGridSelectKey'];
			},
		}),
		isPassword() {
			return this.myBindingData && this.myBindingData.pwBk ? '변경' : '등록';
		},
		chkRowGridSelectKey() {
			return this.myRowGridSelectKey;
		},
		InputValue: {
			get() {
				let value = null;
				if (this.myBindingData) {
					if (this.myBindingData[this.item.valueNm] !== null)
						value = this.myBindingData[this.item.valueNm];
				}
				if (
					this.myBindingData &&
					this.myBindingData.rowStat === 'I' &&
					this.changeRow
				) {
					this.changeRow = false;
					return this.isFocused || value !== null ? value : '';
				} else {
					return '';
				}
				console.log(value)
			},
			set(value) {
				console.log(value)
				return value;
			},
		},
	},
	watch: {
		chkRowGridSelectKey(val, oldVal) {
			// if (val) this.search();
			if (oldVal !== '' && val !== oldVal) this.changeRow = true;
			else this.changeRow = false;
		},
	},

	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		...mapActions({ postUpdateApi: 'modules/list/postUpdateApi' }),
		modifyValue(v, n) {
			const dt = {
				columnName: n,
				value: v,
			};
			this.$emit('gridEditingFinish', dt);
		},

		async setUpdate() {
			if (!this.firstPswd || !this.secondPswd) {
				alert('비밀번호를 입력해주세요.');
			} else if (this.firstPswd !== this.secondPswd) {
				alert('입력한 비밀번호가 다릅니다.');
				this.firstPswd = null;
				this.secondPswd = null;
			} else {
				var encryptedPassword = await sha512(this.firstPswd);
				const sendParam = {
					datas: {
						dsUser: [
							{
								userNo: this.myBindingData.userNo,
								userPswd: encryptedPassword,
								// userPswd: this.firstPswd,
								rowStat: 'U',
							},
						],
					},
					params: {},
				};
				// console.log(sendParam);
				await this.postUpdateApi({
					apiKey: 'saveUser',
					sendParam: sendParam,
				});
				alert('저장되었습니다.');
				this.dialog = false;
				this.setPageData({ isFind: true });
				this.firstPswd = null;
				this.secondPswd = null;
			}
		},
		async close() {
			this.dialog = false;
			this.firstPswd = null;
			this.secondPswd = null;
		},
	},
};

function sha512(str) {
	// return crypto.subtle.digest("SHA-512", new TextEncoder("utf-8").encode(str)).then(buf => {
	//   return Array.prototype.map.call(new Uint8Array(buf), x=>(('00'+x.toString(16)).slice(-2))).join('');
	// });
	const crypto = require('crypto');
	return crypto
		.createHash('sha512')
		.update(str)
		.digest('hex');
}
</script>

<style scoped>
.v-input {
	font-size: 12px;
}
.v-label {
	font-size: 10px;
}
</style>