feat: 文案修改&订阅计划字段修改

This commit is contained in:
2026-01-06 17:33:00 +08:00
parent 6fa5ade5b1
commit 38c0b88abf
4 changed files with 747 additions and 528 deletions

View File

@@ -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>