299 lines
8.0 KiB
Vue
299 lines
8.0 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%"
|
|
height="55rem"
|
|
: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="black" 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.label }} {{ $t('admin.User') }}</div>
|
|
</div>
|
|
<div class="allUserPoeration_center admin_page">
|
|
<div class="admin_state_item">
|
|
<span>{{ $t('admin.UserName') }}: <span>*</span></span>
|
|
<input
|
|
v-model="userName"
|
|
:placeholder="$t('admin.enterUserName')"
|
|
type="text"
|
|
style="width: 250px"
|
|
/>
|
|
</div>
|
|
<div class="admin_state_item">
|
|
<span>{{ $t('admin.UserEmail') }}: <span>*</span></span>
|
|
<input
|
|
v-model="userEmail"
|
|
:placeholder="$t('admin.enterEmail')"
|
|
type="text"
|
|
style="width: 250px"
|
|
/>
|
|
</div>
|
|
<div class="admin_state_item">
|
|
<span>{{ $t('admin.Password') }}: <span>*</span></span>
|
|
<input
|
|
@focus="focus"
|
|
@blur="blur"
|
|
v-model="password"
|
|
:placeholder="$t('admin.enterPassword')"
|
|
type="password"
|
|
style="width: 250px"
|
|
/>
|
|
</div>
|
|
<div class="admin_state_item">
|
|
<span>{{ $t('admin.MaximumCredits') }}:</span>
|
|
<input
|
|
v-model="credits"
|
|
:placeholder="$t('admin.enterCredits')"
|
|
type="text"
|
|
style="width: 250px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="allUserPoeration_btn admin_page">
|
|
<div class="admin_search_item" @click="cancelDsign">{{ $t('admin.Close') }}</div>
|
|
<div class="admin_search_item" @click="setOk">{{ $t('admin.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, isEmail } from "@/tool/util";
|
|
import md5 from "md5";
|
|
export default defineComponent({
|
|
components: {},
|
|
emits: ["searchHistoryList"],
|
|
setup(props, { emit }) {
|
|
let operations = reactive({
|
|
operationsModal: false,
|
|
operationsEdit: false,
|
|
loadingShow: false,
|
|
title: null,
|
|
});
|
|
let operationsData = reactive({
|
|
accountId: -1,
|
|
userName: "",
|
|
userEmail: "",
|
|
password: "",
|
|
oldPassword: "",
|
|
credits: "",
|
|
});
|
|
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.value == "Add") operations.operationsEdit = false;
|
|
if (funStr.value == "Edit") {
|
|
operationsData.accountId = data.id;
|
|
operationsData.userName = data.userName;
|
|
operationsData.userEmail = data.userEmail;
|
|
operationsData.password = data.userPassword?data.userPassword:null;
|
|
operationsData.oldPassword = data.userPassword;
|
|
// operationsData.validStartTime='2024-08-05T00:00:06'
|
|
// operationsData.validEndTime='2024-08-05T00:00:06'
|
|
operationsData.credits = data.creditsUsageLimit;
|
|
// operationsData.accountId = data.accountId
|
|
// operationsData.userName = data.userName
|
|
// operationsData.userEmail = data.userEmail
|
|
// operationsData.validStartTime = formatTime(data.validStartTime)
|
|
// operationsData.validEndTime = formatTime(data.validEndTime)
|
|
}
|
|
};
|
|
let focus = (event) => {
|
|
if (operationsData.password == operationsData.oldPassword) {
|
|
operationsData.password = "";
|
|
}
|
|
};
|
|
let blur = (event) => {
|
|
console.log(operationsData.password == "" && operationsData.oldPassword);
|
|
if (operationsData.password == "" && operationsData.oldPassword) {
|
|
operationsData.password = operationsData.oldPassword;
|
|
}
|
|
};
|
|
let setAddData = () => {
|
|
return {
|
|
creditsUsageLimit: operationsData.credits,
|
|
userEmail: operationsData.userEmail,
|
|
userPassword: md5(operationsData.password + "abc"),
|
|
userName: operationsData.userName,
|
|
};
|
|
};
|
|
let setEditData = () => {
|
|
return {
|
|
id: operationsData.accountId,
|
|
creditsUsageLimit: operationsData.credits,
|
|
userName: operationsData.userName,
|
|
userEmail: operationsData.userEmail,
|
|
userPassword:
|
|
operationsData.password == operationsData.oldPassword
|
|
? null
|
|
: md5(operationsData.password + "abc"),
|
|
};
|
|
};
|
|
let cancelDsign = () => {
|
|
operationsData.accountId = -1;
|
|
operationsData.userName = "";
|
|
operationsData.userEmail = "";
|
|
operationsData.password = "";
|
|
operationsData.credits = "";
|
|
operations.operationsModal = false;
|
|
};
|
|
let setOk = () => {
|
|
let data;
|
|
if (operations.title?.value == "Add") {
|
|
data = setAddData();
|
|
if (!isEmail(data.userEmail)) {
|
|
message.info(t('admin.jsContent1'));
|
|
return;
|
|
}
|
|
if (
|
|
!data.userName ||
|
|
!data.userEmail ||
|
|
!data.userPassword
|
|
)
|
|
return message.warning(t('admin.jsContent2'));
|
|
Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
|
|
(rv) => {
|
|
if (rv) {
|
|
cancelDsign();
|
|
emit("searchHistoryList");
|
|
}
|
|
}
|
|
);
|
|
} else {
|
|
data = setEditData();
|
|
if (!isEmail(data.userEmail)) {
|
|
message.info("The email format is incorrect");
|
|
return;
|
|
}
|
|
if (!data.userName || !data.userEmail)
|
|
return message.warning("Please check the input box marked with *");
|
|
Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
|
|
(rv) => {
|
|
if (rv) {
|
|
cancelDsign();
|
|
emit("searchHistoryList");
|
|
}
|
|
}
|
|
);
|
|
}
|
|
};
|
|
return {
|
|
...toRefs(operations),
|
|
...toRefs(operationsData),
|
|
state,
|
|
cancelDsign,
|
|
init,
|
|
focus,
|
|
blur,
|
|
setOk,
|
|
};
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
mounted() {},
|
|
methods: {},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
:deep(.allUserPoeration_modal) {
|
|
.ant-modal-body {
|
|
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>
|