feat: 文案修改&订阅计划字段修改
This commit is contained in:
@@ -1,352 +1,392 @@
|
||||
<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
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Organization Name:</span>
|
||||
<input
|
||||
:disabled="title != 'Add'"
|
||||
:class="{active:title != 'Add'}"
|
||||
v-model="organizationName"
|
||||
placeholder="Please enter Organization Name"
|
||||
type="text"
|
||||
style="width: 250px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>Sub Account Num:</span>
|
||||
<input
|
||||
:disabled="title != 'Add'"
|
||||
:class="{active:title != 'Add'}"
|
||||
v-model="subAccountNum"
|
||||
placeholder="Please enter Sub Account Num"
|
||||
type="number"
|
||||
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>
|
||||
/> -->
|
||||
<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";
|
||||
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:'',
|
||||
organizationName:'',
|
||||
subAccountNum:0,
|
||||
})
|
||||
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)
|
||||
}
|
||||
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')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
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')
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
...toRefs(operations),
|
||||
...toRefs(operationsData),
|
||||
state,
|
||||
cancelDsign,
|
||||
init,
|
||||
setOk,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
});
|
||||
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;
|
||||
}
|
||||
:deep(.allUserPoeration_modal) {
|
||||
.ant-modal-body {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.allUserPoeration_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
> .admin_state_item {
|
||||
> span {
|
||||
width: 15rem;
|
||||
}
|
||||
> .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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
</style>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Admin Account">
|
||||
<a-select
|
||||
<!-- <a-select
|
||||
v-model:value="searchForm.adminAccId"
|
||||
allow-clear
|
||||
show-search
|
||||
@@ -56,7 +56,8 @@
|
||||
placeholder="Select Account"
|
||||
style="width: 180px"
|
||||
:options="allUserList"
|
||||
></a-select>
|
||||
></a-select> -->
|
||||
<SelectUser v-model="testuser" />
|
||||
</a-form-item>
|
||||
<a-form-item label="Status">
|
||||
<a-select
|
||||
@@ -68,6 +69,18 @@
|
||||
:options="statusOption"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Country or Region">
|
||||
<a-select
|
||||
v-model:value="searchForm.country"
|
||||
:allowClear="true"
|
||||
show-search
|
||||
style="width: 250px"
|
||||
:filter-option="filterOption"
|
||||
placeholder="Select Item..."
|
||||
max-tag-count="responsive"
|
||||
:options="countryList"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">Search</a-button>
|
||||
@@ -279,7 +292,7 @@
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>
|
||||
Account Num:
|
||||
Sub-Account Num:
|
||||
<span>*</span>
|
||||
</span>
|
||||
<a-input-number
|
||||
@@ -386,6 +399,7 @@ import {
|
||||
nextTick,
|
||||
useTemplateRef
|
||||
} from 'vue'
|
||||
import SelectUser from '@/component/common/SelectUser.vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { Https } from '@/tool/https'
|
||||
import { formatTime } from '@/tool/util'
|
||||
@@ -394,6 +408,8 @@ import type { FormInstance, Rule } from 'ant-design-vue/es/form'
|
||||
import { debounce } from 'lodash-es'
|
||||
import dayjs, { Dayjs } from 'dayjs'
|
||||
|
||||
const testuser = ref('')
|
||||
|
||||
type PlanStatus = 'PENDING' | 'ACTIVE' | 'EXPIRED'
|
||||
interface SubscriptionPlan {
|
||||
id: number
|
||||
@@ -413,6 +429,8 @@ const disabledDate = (current: Dayjs) => {
|
||||
return current && current < dayjs().subtract(1, 'days').endOf('day')
|
||||
}
|
||||
|
||||
const countryList = ref([])
|
||||
|
||||
const searchForm = reactive({
|
||||
name: '',
|
||||
startTime: '',
|
||||
@@ -498,17 +516,19 @@ const columns = [
|
||||
},
|
||||
{
|
||||
title: 'Admin Account',
|
||||
dataIndex: 'adminAccId',
|
||||
key: 'adminAccId',
|
||||
dataIndex: 'adminAccEmail',
|
||||
key: 'adminAccEmail',
|
||||
align: 'center',
|
||||
width: 180
|
||||
width: 180,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: 'Account Num',
|
||||
title: 'Sub-Account Num',
|
||||
dataIndex: 'accountNum',
|
||||
key: 'accountNum',
|
||||
align: 'center',
|
||||
width: 120
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: 'Start Time',
|
||||
@@ -558,6 +578,8 @@ onMounted(async () => {
|
||||
await handleSearch()
|
||||
calculateTableHeight()
|
||||
window.addEventListener('resize', handleResize)
|
||||
const list = sessionStorage.getItem('allCountry')
|
||||
countryList.value = list ? JSON.parse(list) : []
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@@ -949,9 +971,15 @@ const filterOption = (input: string, option: any) => {
|
||||
}
|
||||
|
||||
.subscriptionPlan_modal {
|
||||
> .admin_state_item {
|
||||
.form_content{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 2rem;
|
||||
}
|
||||
.admin_state_item {
|
||||
> span {
|
||||
width: 15rem;
|
||||
width: 17rem !important;
|
||||
}
|
||||
}
|
||||
.modal_title_text {
|
||||
|
||||
135
src/component/common/SelectUser.vue
Normal file
135
src/component/common/SelectUser.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<a-select
|
||||
v-model:value="value"
|
||||
:allowClear="true"
|
||||
show-search
|
||||
style="width: 250px"
|
||||
:filter-option="false"
|
||||
placeholder="Select Item..."
|
||||
max-tag-count="responsive"
|
||||
:options="options"
|
||||
:loading="fetching"
|
||||
@popupScroll="handleScrollUserList"
|
||||
@search="onSearch"
|
||||
@focus="handleFocus"
|
||||
@change="onChange"
|
||||
></a-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, reactive } from 'vue'
|
||||
import { debounce } from 'lodash-es'
|
||||
|
||||
type OptionItem = { [k: string]: any }
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue?: any
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change', 'search'])
|
||||
|
||||
const pager = reactive<{ page: number; size: number; total: number | null }>({
|
||||
page: 1,
|
||||
size: 20,
|
||||
total: null
|
||||
})
|
||||
const fetching = ref(false)
|
||||
const keyword = ref('')
|
||||
const internalList = ref<OptionItem[]>([])
|
||||
|
||||
// page size is stored in pager.size
|
||||
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: v => emit('update:modelValue', v)
|
||||
})
|
||||
|
||||
const getLabel = (it: OptionItem) => {
|
||||
return String(it['label'] ?? '')
|
||||
}
|
||||
|
||||
const getValue = (it: OptionItem, idx: number) => {
|
||||
return it['value'] ?? String(idx)
|
||||
}
|
||||
|
||||
const options = computed(() => {
|
||||
return internalList.value.map((it, idx) => ({
|
||||
label: getLabel(it),
|
||||
value: getValue(it, idx),
|
||||
raw: it
|
||||
}))
|
||||
})
|
||||
|
||||
const defaultFetch = async ({
|
||||
page: p,
|
||||
pageSize: ps,
|
||||
keyword: kw
|
||||
}: {
|
||||
page: number
|
||||
pageSize: number
|
||||
keyword: string
|
||||
}) => {
|
||||
const raw = sessionStorage.getItem('allCountry') || '[]'
|
||||
let list: OptionItem[] = []
|
||||
try {
|
||||
list = JSON.parse(raw)
|
||||
if (!Array.isArray(list)) list = []
|
||||
} catch (e) {
|
||||
list = []
|
||||
}
|
||||
|
||||
// Return the raw list from sessionStorage exactly as-is (no slicing/filtering/delay)
|
||||
return { data: list, total: list.length }
|
||||
}
|
||||
|
||||
const doFetch = async (reset = false) => {
|
||||
if (reset) pager.page = 1
|
||||
if (pager.total !== null && (pager.page - 1) * pager.size >= (pager.total ?? 0)) return
|
||||
fetching.value = true
|
||||
try {
|
||||
const res = await defaultFetch({
|
||||
page: pager.page,
|
||||
pageSize: pager.size,
|
||||
keyword: keyword.value
|
||||
})
|
||||
const data = res?.data ?? []
|
||||
pager.total = res?.total ?? null
|
||||
if (pager.page === 1) internalList.value = data
|
||||
else internalList.value = internalList.value.concat(data)
|
||||
pager.page += 1
|
||||
} finally {
|
||||
fetching.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const debouncedSearch = debounce((val: string) => {
|
||||
keyword.value = val
|
||||
emit('search', val)
|
||||
doFetch(true)
|
||||
}, 300)
|
||||
|
||||
const onSearch = (val: string) => {
|
||||
debouncedSearch(val)
|
||||
}
|
||||
|
||||
const handleScrollUserList = (e: Event) => {
|
||||
const target = e?.target as HTMLElement | null
|
||||
if (!target) return
|
||||
const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 40
|
||||
if (nearBottom && !fetching.value) {
|
||||
doFetch(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleFocus = () => {
|
||||
// When focused, load first page (or reload with current keyword)
|
||||
doFetch(true)
|
||||
}
|
||||
|
||||
const onChange = (val: any) => {
|
||||
emit('change', val)
|
||||
console.log('change---------', val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -1,189 +1,205 @@
|
||||
const all = (t)=>{
|
||||
return[{
|
||||
name:'All User',
|
||||
route:'/administrator/allUser',
|
||||
icon:'yonghu',
|
||||
expandIcon:'icon-xiala',
|
||||
key:'sub1',
|
||||
isShow:true,
|
||||
// children: [
|
||||
// {
|
||||
// name:'User Management',
|
||||
// route:'/home/excil1',
|
||||
// icon:'',
|
||||
// key:'/home/excil22',
|
||||
// isShow:true,
|
||||
// },
|
||||
// {
|
||||
// code:'ROLE_MANAGER',
|
||||
// name:'Access Permission',
|
||||
// route:'/home/excil2',
|
||||
// icon:'',
|
||||
// key:'/home/excil33',
|
||||
// isShow:true,
|
||||
// },
|
||||
// ],
|
||||
},{
|
||||
name:'Design Frequency',
|
||||
route:'/administrator/testClickData',
|
||||
icon:'shenpi',
|
||||
expandIcon:'icon-xiala',
|
||||
key:'sub2',
|
||||
isShow:true,
|
||||
},{
|
||||
name:'Trial User',
|
||||
icon:'usetime',
|
||||
expandIcon:'icon-xiala',
|
||||
key:'sub3',
|
||||
isShow:true,
|
||||
children:[
|
||||
{
|
||||
name:'All Trial User',
|
||||
route:'/administrator/trialAllUser',
|
||||
icon:'usetime',
|
||||
key:'sub3-1',
|
||||
isShow:true,
|
||||
},{
|
||||
name:'Trial User Approval',
|
||||
route:'/administrator/trialApproval',
|
||||
icon:'usetime',
|
||||
key:'sub3-2',
|
||||
isShow:true,
|
||||
},{
|
||||
name:'Trial User CHART',
|
||||
route:'/administrator/trialUserCountry',
|
||||
icon:'',
|
||||
key:'sub3-3',
|
||||
isShow:true,
|
||||
},{
|
||||
name:'Conversion Rate',
|
||||
route:'/administrator/trialUserConversionRateChart',
|
||||
icon:'',
|
||||
key:'sub3-4',
|
||||
isShow:true,
|
||||
},
|
||||
]
|
||||
},{
|
||||
name:'Function Use CHART',
|
||||
route:'/administrator/recentActiveChart',
|
||||
icon:'usetime',
|
||||
key:'sub4',
|
||||
isShow:true,
|
||||
},{
|
||||
name:'Active User',
|
||||
icon:'usetime',
|
||||
route:'/administrator/recentActiveUser',
|
||||
key:'sub5',
|
||||
isShow:true,
|
||||
},{
|
||||
name:'New User',
|
||||
icon:'usetime',
|
||||
expandIcon:'icon-xiala',
|
||||
key:'sub6',
|
||||
isShow:true,
|
||||
children:[
|
||||
{
|
||||
name:'New User List',
|
||||
route:'/administrator/recentNewUser',
|
||||
icon:'',
|
||||
key:'sub6-1',
|
||||
isShow:true,
|
||||
},{
|
||||
name:'New User CHART',
|
||||
route:'/administrator/recentNewUserChart',
|
||||
icon:'',
|
||||
key:'sub6-2',
|
||||
isShow:true,
|
||||
},
|
||||
]
|
||||
},{
|
||||
name:'Events',
|
||||
icon:'usetime',
|
||||
key:'sub9',
|
||||
expandIcon:'icon-xiala',
|
||||
isShow:true,
|
||||
children: [
|
||||
{
|
||||
name:'Questionnaire Survey',
|
||||
route:'/administrator/questionnaire',
|
||||
icon:'',
|
||||
key:'sub9-1',
|
||||
isShow:true,
|
||||
},
|
||||
// {
|
||||
// code:'ROLE_MANAGER',
|
||||
// name:'Access Permission',
|
||||
// route:'/home/excil2',
|
||||
// icon:'',
|
||||
// key:'/home/excil33',
|
||||
// isShow:true,
|
||||
// },
|
||||
],
|
||||
},{
|
||||
name:'Affiliate',
|
||||
icon:'usetime',
|
||||
expandIcon:'icon-xiala',
|
||||
key:'sub10',
|
||||
isShow:true,
|
||||
children: [
|
||||
{
|
||||
name:'Approval Affiliate',
|
||||
route:'/administrator/affiliateAudit',
|
||||
icon:'',
|
||||
key:'sub10-1',
|
||||
isShow:true,
|
||||
},
|
||||
{
|
||||
name:'Affiliate Referral',
|
||||
route:'/administrator/affiliateReferral',
|
||||
icon:'',
|
||||
key:'sub10-2',
|
||||
isShow:true,
|
||||
},
|
||||
],
|
||||
},{
|
||||
name:'Transaction',
|
||||
icon:'usetime',
|
||||
expandIcon:'icon-xiala',
|
||||
key:'sub11',
|
||||
isShow:true,
|
||||
children: [
|
||||
{
|
||||
name:'Transaction Record',
|
||||
route:'/administrator/TransactionTable',
|
||||
icon:'',
|
||||
key:'sub11-1',
|
||||
isShow:true,
|
||||
},
|
||||
// {
|
||||
// code:'ROLE_MANAGER',
|
||||
// name:'Access Permission',
|
||||
// route:'/home/excil2',
|
||||
// icon:'',
|
||||
// key:'/home/excil33',
|
||||
// isShow:true,
|
||||
// },
|
||||
],
|
||||
},{
|
||||
name:'Promotion Code',
|
||||
icon:'usetime',
|
||||
route:'/administrator/coupons',
|
||||
key:'sub12',
|
||||
isShow:true,
|
||||
},{
|
||||
|
||||
name:'Organization',
|
||||
icon:'usetime',
|
||||
route:'/administrator/organization',
|
||||
key:'sub13',
|
||||
isShow:true,
|
||||
},{
|
||||
name:'Subscription Plan',
|
||||
icon:'usetime',
|
||||
route:'/administrator/subscriptionPlan',
|
||||
key:'sub14',
|
||||
isShow:true,
|
||||
}]
|
||||
return [
|
||||
{
|
||||
name: 'All User',
|
||||
route: '/administrator/allUser',
|
||||
icon: 'yonghu',
|
||||
expandIcon: 'icon-xiala',
|
||||
key: 'sub1',
|
||||
isShow: true
|
||||
// children: [
|
||||
// {
|
||||
// name:'User Management',
|
||||
// route:'/home/excil1',
|
||||
// icon:'',
|
||||
// key:'/home/excil22',
|
||||
// isShow:true,
|
||||
// },
|
||||
// {
|
||||
// code:'ROLE_MANAGER',
|
||||
// name:'Access Permission',
|
||||
// route:'/home/excil2',
|
||||
// icon:'',
|
||||
// key:'/home/excil33',
|
||||
// isShow:true,
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
{
|
||||
name: 'Design Frequency',
|
||||
route: '/administrator/testClickData',
|
||||
icon: 'shenpi',
|
||||
expandIcon: 'icon-xiala',
|
||||
key: 'sub2',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
name: 'Trial User',
|
||||
icon: 'usetime',
|
||||
expandIcon: 'icon-xiala',
|
||||
key: 'sub3',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
name: 'All Trial User',
|
||||
route: '/administrator/trialAllUser',
|
||||
icon: 'usetime',
|
||||
key: 'sub3-1',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
name: 'Trial User Approval',
|
||||
route: '/administrator/trialApproval',
|
||||
icon: 'usetime',
|
||||
key: 'sub3-2',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
name: 'Trial User CHART',
|
||||
route: '/administrator/trialUserCountry',
|
||||
icon: '',
|
||||
key: 'sub3-3',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
name: 'Conversion Rate',
|
||||
route: '/administrator/trialUserConversionRateChart',
|
||||
icon: '',
|
||||
key: 'sub3-4',
|
||||
isShow: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Function Use CHART',
|
||||
route: '/administrator/recentActiveChart',
|
||||
icon: 'usetime',
|
||||
key: 'sub4',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
name: 'Active User',
|
||||
icon: 'usetime',
|
||||
route: '/administrator/recentActiveUser',
|
||||
key: 'sub5',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
name: 'New User',
|
||||
icon: 'usetime',
|
||||
expandIcon: 'icon-xiala',
|
||||
key: 'sub6',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
name: 'New User List',
|
||||
route: '/administrator/recentNewUser',
|
||||
icon: '',
|
||||
key: 'sub6-1',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
name: 'New User CHART',
|
||||
route: '/administrator/recentNewUserChart',
|
||||
icon: '',
|
||||
key: 'sub6-2',
|
||||
isShow: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Events',
|
||||
icon: 'usetime',
|
||||
key: 'sub9',
|
||||
expandIcon: 'icon-xiala',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
name: 'Questionnaire Survey',
|
||||
route: '/administrator/questionnaire',
|
||||
icon: '',
|
||||
key: 'sub9-1',
|
||||
isShow: true
|
||||
}
|
||||
// {
|
||||
// code:'ROLE_MANAGER',
|
||||
// name:'Access Permission',
|
||||
// route:'/home/excil2',
|
||||
// icon:'',
|
||||
// key:'/home/excil33',
|
||||
// isShow:true,
|
||||
// },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Affiliate',
|
||||
icon: 'usetime',
|
||||
expandIcon: 'icon-xiala',
|
||||
key: 'sub10',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
name: 'Approval Affiliate',
|
||||
route: '/administrator/affiliateAudit',
|
||||
icon: '',
|
||||
key: 'sub10-1',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
name: 'Affiliate Referral',
|
||||
route: '/administrator/affiliateReferral',
|
||||
icon: '',
|
||||
key: 'sub10-2',
|
||||
isShow: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Transaction',
|
||||
icon: 'usetime',
|
||||
expandIcon: 'icon-xiala',
|
||||
key: 'sub11',
|
||||
isShow: true,
|
||||
children: [
|
||||
{
|
||||
name: 'Transaction Record',
|
||||
route: '/administrator/TransactionTable',
|
||||
icon: '',
|
||||
key: 'sub11-1',
|
||||
isShow: true
|
||||
}
|
||||
// {
|
||||
// code:'ROLE_MANAGER',
|
||||
// name:'Access Permission',
|
||||
// route:'/home/excil2',
|
||||
// icon:'',
|
||||
// key:'/home/excil33',
|
||||
// isShow:true,
|
||||
// },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Promotion Code',
|
||||
icon: 'usetime',
|
||||
route: '/administrator/coupons',
|
||||
key: 'sub12',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
name: 'Organization',
|
||||
icon: 'usetime',
|
||||
route: '/administrator/organization',
|
||||
key: 'sub13',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
name: 'Organization Plan',
|
||||
icon: 'usetime',
|
||||
route: '/administrator/subscriptionPlan',
|
||||
key: 'sub14',
|
||||
isShow: true
|
||||
}
|
||||
]
|
||||
}
|
||||
const schoolOrEnterprise = (t) =>{
|
||||
return[
|
||||
|
||||
Reference in New Issue
Block a user