chore(config): 添加项目配置文件和隐私协议
- 添加 .editorconfig 文件统一代码风格 - 添加 .env.development 和 .env.example 环境配置文件 - 添加 .eslintignore 和 .eslintrc.js 代码检查配置 - 添加 .gitignore 版本控制忽略文件配置 - 添加 .prettierignore 格式化忽略配置 - 添加隐私协议HTML文件 - 添加API密钥管理组件基础结构
This commit is contained in:
165
src/views/system/cache/components/cache-edit.vue
vendored
Normal file
165
src/views/system/cache/components/cache-edit.vue
vendored
Normal file
@@ -0,0 +1,165 @@
|
||||
<!-- 缓存编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改缓存' : '添加缓存'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="KEY" name="key">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入缓存名称"
|
||||
v-model:value="form.key"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="CONTENT" name="content">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入KEY的值"
|
||||
v-model:value="form.content"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="过期时间" name="expireTime">
|
||||
<a-input-number
|
||||
placeholder="默认永不过期"
|
||||
style="width: 200px"
|
||||
v-model:value="form.expireTime"
|
||||
/>
|
||||
<span class="ml-10">分钟</span>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { getCache, updateCache } from '@/api/system/cache';
|
||||
import type { Cache } from '@/api/system/cache/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Cache | null;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<Cache>({
|
||||
key: undefined,
|
||||
content: '',
|
||||
expireTime: undefined
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
key: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入KEY',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入KEY的值',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
updateCache(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
.ml-10 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
233
src/views/system/cache/components/send-sms.vue
vendored
Normal file
233
src/views/system/cache/components/send-sms.vue
vendored
Normal file
@@ -0,0 +1,233 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="400px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="'手机验证'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:maskClosable="false"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form class="login-form">
|
||||
<a-form-item label="绑定的手机号码" name="phone">
|
||||
{{ getMobile(form.phone) }}
|
||||
</a-form-item>
|
||||
<a-form-item label="校验码" name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
allow-clear
|
||||
type="text"
|
||||
:maxlength="6"
|
||||
v-model:value="form.code"
|
||||
>
|
||||
</a-input>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch, computed, onBeforeUnmount } from "vue";
|
||||
import { Form, message, Modal, SelectProps } from "ant-design-vue";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import type { AccessKey } from "@/api/system/access-key/model";
|
||||
import { addAccessKey, updateAccessKey } from "@/api/system/access-key";
|
||||
import { FILE_SERVER } from "@/config/setting";
|
||||
import { uploadFile } from "@/api/system/file";
|
||||
import { RuleObject } from "ant-design-vue/es/form";
|
||||
import { isImage } from "@/utils/common";
|
||||
import { listUsers } from '@/api/system/user';
|
||||
import { getMobile } from '@/utils/common';
|
||||
import { sendSmsCaptcha } from '@/api/passport/login';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: AccessKey | null;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前登录用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const disabled = ref(false);
|
||||
// 选项卡位置
|
||||
const activeKey = ref("1");
|
||||
const promoter = ref<any>(undefined);
|
||||
const commander = ref(undefined);
|
||||
const appid = ref(undefined);
|
||||
|
||||
/* 打开选择弹窗 */
|
||||
const content = ref("");
|
||||
// 图形验证码地址
|
||||
const captcha = ref("");
|
||||
// 验证码倒计时定时器
|
||||
let countdownTimer: number | null = null;
|
||||
// 验证码倒计时时间
|
||||
const countdownTime = ref(0);
|
||||
// 图形验证码
|
||||
const imgCode = ref("");
|
||||
// 发送验证码按钮loading
|
||||
const codeLoading = ref(false);
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "done", form: AccessKey): void;
|
||||
(e: "update:visible", value: boolean): void;
|
||||
}>();
|
||||
// 已上传数据, 可赋初始值用于回显
|
||||
const avatar = ref(<any>[]);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 用户信息
|
||||
const form = reactive<AccessKey>({
|
||||
id: 0,
|
||||
phone: "",
|
||||
accessKey: "",
|
||||
accessSecret: "",
|
||||
code: undefined,
|
||||
createTime: ""
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit("update:visible", value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请输入工单名称",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
taskType: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请选择工单类型",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请输入工单内容",
|
||||
trigger: "blur",
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == "") {
|
||||
return Promise.reject("请输入文字内容");
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error("手机号码有误");
|
||||
return;
|
||||
}
|
||||
// imgCode.value = "";
|
||||
sendCode();
|
||||
// visible.value = true;
|
||||
};
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone }).then((res) => {
|
||||
console.log(res);
|
||||
message.success("短信验证码发送成功, 请注意查收!");
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 30;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
});
|
||||
|
||||
const { validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
updateVisible(false);
|
||||
const { code,phone } = form;
|
||||
emit("done", { code,phone });
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
};
|
||||
|
||||
const query = () => {
|
||||
listUsers({username: 'admin'}).then(res => {
|
||||
form.phone = res[0].phone;
|
||||
})
|
||||
}
|
||||
query();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-form{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.login-form-right .login-form {
|
||||
margin: 0 15% 0 auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
margin: 0 auto 0 15%;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
margin-left: 10px;
|
||||
padding: 0 10px;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user