312 lines
8.2 KiB
Vue
312 lines
8.2 KiB
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="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
|
|
: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>
|
|
.allUserPoeration_modal{
|
|
.ant-modal-body{
|
|
height: auto;
|
|
|
|
}
|
|
}
|
|
|
|
</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{
|
|
height: 85%;
|
|
overflow-y: auto;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style> |