393 lines
11 KiB
Vue
393 lines
11 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="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
|
|
:disabled="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
|
|
:disabled="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 or Region:</span>
|
|
<!-- <input
|
|
:disabled="title != 'Add'"
|
|
:class="{active:title != 'Add'}"
|
|
v-model="country"
|
|
placeholder="Please enter country"
|
|
type="text"
|
|
style="width: 250px"
|
|
/> -->
|
|
<a-select
|
|
v-model:value="country"
|
|
:disabled="title != 'Add'"
|
|
:class="{ active: title != 'Add' }"
|
|
:allowClear="true"
|
|
show-search
|
|
style="width: 250px"
|
|
:filter-option="filterOption"
|
|
placeholder="Select Country or Region"
|
|
max-tag-count="responsive"
|
|
:options="allCountry"
|
|
/>
|
|
</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'
|
|
},
|
|
{
|
|
label: 'userInEvent',
|
|
value: '4'
|
|
},
|
|
{
|
|
label: 'Edu Admin',
|
|
value: '7'
|
|
}
|
|
])
|
|
let init = (funStr, data) => {
|
|
operations.operationsModal = true
|
|
operations.operationsEdit = true
|
|
operations.title = funStr
|
|
if (funStr == 'Add') operations.operationsEdit = false
|
|
if (funStr == 'Edit') {
|
|
operationsData.organizationName = data.organizationName
|
|
operationsData.subAccountNum = data.subAccountNum ? data.subAccountNum : 0
|
|
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),
|
|
organizationName: operationsData.organizationName
|
|
? operationsData.organizationName
|
|
: null,
|
|
subAccountNum: operationsData.subAccountNum
|
|
}
|
|
}
|
|
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')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const allCountry = ref([])
|
|
const filterOption = (input, option) => {
|
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}
|
|
onMounted(() => {
|
|
const countryList = sessionStorage.getItem('allCountry')
|
|
if (countryList) {
|
|
allCountry.value = JSON.parse(countryList)
|
|
}
|
|
})
|
|
return {
|
|
...toRefs(operations),
|
|
...toRefs(operationsData),
|
|
state,
|
|
cancelDsign,
|
|
init,
|
|
setOk,
|
|
allCountry,
|
|
filterOption
|
|
}
|
|
}
|
|
})
|
|
</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;
|
|
}
|
|
> .admin_state_item {
|
|
> span {
|
|
width: 15rem;
|
|
}
|
|
}
|
|
.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>
|