aida_front/src/component/Administrator/allUserPoerations.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%"
        :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="100%" height="100%" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="#000" 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
					:readonly="title != 'Add'"
					:class="{active:title != 'Add'}"
					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
					:readonly="title != 'Add'"
					:class="{active:title != 'Add'}"
					v-model="userEmail"
					placeholder="Please enter email"
					type="text"
					style="width: 250px"
				/>
			</div>
			<div class="admin_state_item">
				<span>Create Time: <span>*</span></span>
				<a-date-picker :disabled="title != 'Add'" style="width: 250px" valueFormat="YYYY-MM-DDTHH:mm:ss" class="range_picker" show-time placeholder="Create Time" v-model:value="validStartTime">
					<template #suffixIcon>
						<span
							class="icon iconfont range_picker_icon icon-rili"
						></span>
					</template>
				</a-date-picker>
			</div>
			<div class="admin_state_item">
				<span>End Time: <span>*</span></span>
				<a-date-picker style="width: 250px" valueFormat="YYYY-MM-DDTHH:mm:ss" class="range_picker" show-time placeholder="End Time" v-model:value="validEndTime">
					<template #suffixIcon>
						<span
							class="icon iconfont range_picker_icon icon-rili"
						></span>
					</template>
				</a-date-picker>
			</div>
			<div class="admin_state_item">
				<span>User Type:<span>*</span></span>
				<a-select
					v-model:value="systemUser"
					size="large"
					style="width: 250px"
					optionFilterProp="label"
					:options="state"
					placeholder="Please select"
					allowClear
					show-search
				></a-select>
			</div>
			<div class="admin_state_item">
				<span>Credits:</span>
				<input
					v-model="credits"
					placeholder="Please enter credits"
					type="text"
					style="width: 250px"
				/>
			</div>
			
			<div class="admin_state_item">
				<span>Country:</span>
				<input
					:readonly="title != 'Add'"
					:class="{active:title != 'Add'}"
					v-model="country"
					placeholder="Please enter country"
					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 } from "@/tool/util";
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:'',
			validStartTime:'',
			validEndTime:'',
			systemUser:'',
			credits:'',
			country:'',
		})
		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'){
				let startTime = data.validStartTime?formatTime(data.validStartTime / 1000,"YYYY-MM-DDThh:mm:ss"):''
				let endTime = data.validEndTime?formatTime(data.validEndTime / 1000,"YYYY-MM-DDThh:mm:ss"):''
				operationsData.accountId=data.id
				operationsData.userName=data.userName
				operationsData.userEmail=data.userEmail 
				// operationsData.validStartTime='2024-08-05T00:00:06'
				// operationsData.validEndTime='2024-08-05T00:00:06'
				operationsData.validStartTime=startTime
				operationsData.validEndTime=endTime
				operationsData.systemUser=String(data.systemUser)
				operationsData.credits=data.credits
				operationsData.country=data.country
				// operationsData.accountId = data.accountId
				// operationsData.userName = data.userName
				// operationsData.userEmail = data.userEmail
				// operationsData.validStartTime = formatTime(data.validStartTime)
				// operationsData.validEndTime = formatTime(data.validEndTime)
			}

		}
		let setTime = (time) =>{
			if(time){
				const date = new Date(time);
				const timestamp = date.getTime(); // 转换为秒数
				return timestamp
			}else{
				return ''
			}
			
		}
		let setAddData = ()=>{
			return {
				"country": operationsData.country,
				"credits": operationsData.credits,
				"systemUser": operationsData.systemUser,
				"userEmail": operationsData.userEmail,
				"userName": operationsData.userName,
				"validEndTime": setTime(operationsData.validEndTime),
				"validStartTime": setTime(operationsData.validStartTime)
			}
		}
		let setEditData = ()=>{
			return {
				"accountId": operationsData.accountId,
				"credits": operationsData.credits,
				"systemUser": operationsData.systemUser,
				"validEndTime": setTime(operationsData.validEndTime),
				"userName": operationsData.userName,
				"userEmail": operationsData.userEmail,
			}
		}
		let cancelDsign = ()=>{
			operationsData.accountId=-1
			operationsData.userName=''
			operationsData.userEmail=''
			operationsData.validStartTime=''
			operationsData.validEndTime=''
			operationsData.systemUser=''
			operationsData.credits=''
			operationsData.country=''
			operations.operationsModal = false
		}
		let setOk = ()=>{
			let data 
			if(operations.title == 'Add'){
				data = setAddData()
				if(!data.userName || !data.userEmail || !data.validStartTime || !data.validEndTime || !data.systemUser)return message.warning('Please check the input box marked with *')
				Https.axiosPost(Https.httpUrls.adminAddUser, data).then(
				(rv) => {
					if (rv) {
						cancelDsign()
						emit('searchHistoryList')
					}
				}
			);
			}else{
				data = setEditData()
				if(!data.userName || !data.userEmail || !data.validEndTime || !data.systemUser)return message.warning('Please check the input box marked with *')
				Https.axiosPost(Https.httpUrls.modifyUser,{},{params:data}).then(
				(rv) => {
					if (rv) {
						cancelDsign()
						emit('searchHistoryList')
					}
				}
			);
			}
			
		}
        return {
            ...toRefs(operations),
            ...toRefs(operationsData),
			state,
			cancelDsign,
			init,
			setOk,
        };
    },
    data() {
        return {
        };
    },
    mounted() {},
    methods: {
       
    },
});
</script>
<style lang="less" scoped>
:deep(.allUserPoeration_modal){
	.ant-modal-body{
		height: auto;
		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>