aida_front/src/component/Administrator/SE/allUser/addAllUser.vue

<template>
	<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
    <a-modal
        class="allUserPoeration_modal generalModel"
        v-model:visible="operationsModal"
        :footer="null"
		:get-container="() => $refs.allUserPoerationModal"
        width="50%"
		height="55rem"
        :maskClosable="false"
        :centered="true"
        :closable="false"
		:mask="true"
        wrapClassName="#app"
        :keyboard="false"
    >
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
					</svg>

			</div>
		</div>
		<div class="modal_title_text">
			<div>{{ title }} User</div>
		</div>
		<div class="allUserPoeration_center admin_page">
			<div class="admin_state_item">
				<span>User Name: <span>*</span></span>
				<input
					v-model="userName"
					placeholder="Please enter user name"
					type="text"
					style="width: 250px"
				/>
			</div>
			<div class="admin_state_item">
				<span>User Email: <span>*</span></span>
				<input
					v-model="userEmail"
					placeholder="Please enter email"
					type="text"
					style="width: 250px"
				/>
			</div>
			<div class="admin_state_item">
				<span>Password: <span>*</span></span>
				<input
					@focus="focus"
					@blur="blur"
					v-model="password"
					placeholder="Please enter password"
					type="password"
					style="width: 250px"
				/>
			</div>
			<div class="admin_state_item">
				<span>Maximum Credits:</span>
				<input
					v-model="credits"
					placeholder="Please enter credits"
					type="text"
					style="width: 250px"
				/>
			</div>
			
			
		</div>
		<div class="allUserPoeration_btn admin_page">
			<div class="admin_search_item" @click="cancelDsign">
				Close
			</div>
			<div class="admin_search_item" @click="setOk">
				OK
			</div>
		
		</div>
    </a-modal>
	<div class="mark_loading" v-show="loadingShow">
		<a-spin size="large" />
	</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { formatTime,isEmail } from "@/tool/util";
const md5 = require("md5");
export default defineComponent({
    components: {
    },
	emits: ['searchHistoryList'],
    setup(props,{emit}) {
		let operations = reactive({
			operationsModal:false,
			operationsEdit:false,
			loadingShow:false,
			title:''
		})
		let operationsData = reactive({
			accountId:-1,
			userName:'',
			userEmail:'',
			password:'',
			oldPassword:'',
			credits:'',
		})
		let state = ref([
			{
				label:'visitor',
				value:'0',
			},
			{
				label:'yearly',
				value:'1',
			},
			{
				label:'monthly',
				value:'2',
			},
			{
				label:'trial',
				value:'3',
			},
        ]);
		let init = (funStr,data)=>{
			operations.operationsModal = true
			operations.operationsEdit = true
			operations.title = funStr
			if(funStr == 'Add') operations.operationsEdit = false 
			if(funStr == 'Edit'){
				operationsData.accountId=data.id
				operationsData.userName=data.userName
				operationsData.userEmail=data.userEmail 
				operationsData.password=data.userPassword 
				operationsData.oldPassword=data.userPassword 
				// operationsData.validStartTime='2024-08-05T00:00:06'
				// operationsData.validEndTime='2024-08-05T00:00:06'
				operationsData.credits=data.creditsUsageLimit
				// operationsData.accountId = data.accountId
				// operationsData.userName = data.userName
				// operationsData.userEmail = data.userEmail
				// operationsData.validStartTime = formatTime(data.validStartTime)
				// operationsData.validEndTime = formatTime(data.validEndTime)
			}

		}
		let focus = (event) =>{
			if(operationsData.password == operationsData.oldPassword){
				operationsData.password = ''
			}
		}
		let blur = (event) =>{
			console.log((operationsData.password == '' && operationsData.oldPassword))
			if(operationsData.password == '' && operationsData.oldPassword){
				operationsData.password = operationsData.oldPassword
			}
		}
		let setAddData = ()=>{
			return {
				"creditsUsageLimit": operationsData.credits,
				"userEmail": operationsData.userEmail,
				"userPassword": md5(operationsData.password + 'abc'),
				"userName": operationsData.userName,
			}
		}
		let setEditData = ()=>{
			return {
				"id": operationsData.accountId,
				"creditsUsageLimit": operationsData.credits,
				"userName": operationsData.userName,
				"userEmail": operationsData.userEmail,
				"userPassword": (operationsData.password == operationsData.oldPassword)?'':md5(operationsData.password + 'abc'),
			}
		}
		let cancelDsign = ()=>{
			operationsData.accountId=-1
			operationsData.userName=''
			operationsData.userEmail=''
			operationsData.password=''
			operationsData.credits=''
			operations.operationsModal = false
		}
		let setOk = ()=>{
			let data 
			if(operations.title == 'Add'){
				data = setAddData()
				if (!isEmail(data.userEmail)) {
					message.info("The email format is incorrect");
					return;
				}
				if(!data.userName || !data.userEmail || !data.userPassword || !data.creditsUsageLimit)return message.warning('Please check the input box marked with *')
				Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
				(rv) => {
					if (rv) {
						cancelDsign()
						emit('searchHistoryList')
					}
				}
			);
			}else{
				data = setEditData()
				if (!isEmail(data.userEmail)) {
					message.info("The email format is incorrect");
					return;
				}
				if(!data.userName || !data.userEmail || !data.creditsUsageLimit)return message.warning('Please check the input box marked with *')
				Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount,data).then(
				(rv) => {
					if (rv) {
						cancelDsign()
						emit('searchHistoryList')
					}
				}
			);
			}
			
		}
        return {
            ...toRefs(operations),
            ...toRefs(operationsData),
			state,
			cancelDsign,
			init,
			focus,
			blur,
			setOk,
        };
    },
    data() {
        return {
        };
    },
    mounted() {},
    methods: {
       
    },
});
</script>
<style lang="less" scoped>
:deep(.allUserPoeration_modal){
	.ant-modal-body{
		display: flex;
		flex-direction: column;
	}
}

</style>
<style lang="less" scoped>

.allUserPoeration_modal {
    .closeIcon {
        z-index: 2;
    }
	.allUserPoeration_btn{
		display: flex;
		flex-direction: row;
		height: auto;
		justify-content: flex-end;
		padding: 1rem 0;
		.admin_search_item{
			margin-bottom: 0;
		}
	}
	.allUserPoeration_center{
		flex: 1;
		overflow-y: auto;
		flex-direction: row;
		flex-wrap: wrap;
	}
}
</style>