云查询管理、新登陆页面
parent
f2b0837ead
commit
445ecde28f
Binary file not shown.
|
After Width: | Height: | Size: 415 B |
Binary file not shown.
|
After Width: | Height: | Size: 888 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 311 B |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 439 B |
Binary file not shown.
|
After Width: | Height: | Size: 695 B |
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { defHttp } from '@/utils/http/axios';
|
||||||
|
enum Api{
|
||||||
|
getLeftTree = '/api/SysDataItemDetail/Load',
|
||||||
|
addLeftItem = '/api/SysDataItemDetail/Add',
|
||||||
|
delLeftItem = '/api/SysDataItemDetail/Delete',
|
||||||
|
editLeftItem = '/api/SysDataItemDetail/Update',
|
||||||
|
LoadPage = '/api/DroneCloudQueryContent/LoadPage',
|
||||||
|
Get = '/api/DroneCloudQueryContent/Get',
|
||||||
|
Add = '/api/DroneCloudQueryContent/Add',
|
||||||
|
Update = '/api/DroneCloudQueryContent/Update',
|
||||||
|
Delete = '/api/DroneCloudQueryContent/Delete',
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分类
|
||||||
|
export function getLeftTree(params) {
|
||||||
|
return defHttp.get({ url: Api.getLeftTree, params });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addLeftItem(params){
|
||||||
|
return defHttp.post({ url: Api.addLeftItem + '?code=' + params.itemCode, params });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function delLeftItem(params){
|
||||||
|
return defHttp.post({ url: Api.delLeftItem + '?id=' + params.id });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 云查询管理
|
||||||
|
export function LoadPage(params) {
|
||||||
|
return defHttp.get({ url: Api.LoadPage, params });
|
||||||
|
}
|
||||||
|
export function Get(params) {
|
||||||
|
return defHttp.get({ url: Api.Get, params });
|
||||||
|
}
|
||||||
|
export function Add(params) {
|
||||||
|
return defHttp.post({ url: Api.Add, params });
|
||||||
|
}
|
||||||
|
export function Update(params) {
|
||||||
|
return defHttp.post({ url: Api.Update, params });
|
||||||
|
}
|
||||||
|
export function Delete(params) {
|
||||||
|
return defHttp.post({ url: Api.Delete + '?id=' + params.id , params });
|
||||||
|
}
|
||||||
|
|
@ -36,7 +36,8 @@ export const RootRoute: AppRouteRecordRaw = {
|
||||||
export const LoginRoute: AppRouteRecordRaw = {
|
export const LoginRoute: AppRouteRecordRaw = {
|
||||||
path: '/login',
|
path: '/login',
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
component: () => import('@/views/sys/login/Login.vue'),
|
// component: () => import('@/views/sys/login/Login.vue'),
|
||||||
|
component: () => import('@/views/sys/login_lindidiaocha/Login.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: t('routes.basic.login'),
|
title: t('routes.basic.login'),
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
<template>
|
||||||
|
<div class="categories-modal-container">
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="props.modalData.data"
|
||||||
|
:rules="props.modalData.type.indexOf('tree') > -1 ? treeRules : rightRules"
|
||||||
|
labelAlign="right"
|
||||||
|
:label-col="{ span: 6 }"
|
||||||
|
>
|
||||||
|
<template v-if="props.modalData.type.indexOf('tree') > -1">
|
||||||
|
<a-form-item label="名称" name="itemName">
|
||||||
|
<a-input v-model:value="props.modalData.data.itemName" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="类型" name="itemValue">
|
||||||
|
<a-select v-model:value="props.modalData.data.itemValue">
|
||||||
|
<a-select-option value="vector_data">矢量数据</a-select-option>
|
||||||
|
<a-select-option value="imgage_data">影像数据</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<a-form-item label="ID" name="id" v-if="false">
|
||||||
|
<a-input v-model:value="props.modalData.data.id" disabled />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="名称" name="name">
|
||||||
|
<a-input v-model:value="props.modalData.data.name" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="图层" name="layer">
|
||||||
|
<a-select v-model:value="props.modalData.data.layer">
|
||||||
|
<a-select-option value="1">图层1</a-select-option>
|
||||||
|
<a-select-option value="2">图层2</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="数据表" name="tableName">
|
||||||
|
<a-select v-model:value="props.modalData.data.tableName">
|
||||||
|
<a-select-option value="1">数据表1</a-select-option>
|
||||||
|
<a-select-option value="2">数据表2</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="叠加图层" name="overlayList">
|
||||||
|
<a-select v-model:value="props.modalData.data.overlayList" mode="multiple">
|
||||||
|
<a-select-option value="1" checked>天地图</a-select-option>
|
||||||
|
<a-select-option value="2">图层2</a-select-option>
|
||||||
|
<a-select-option value="3">图层3</a-select-option>
|
||||||
|
<a-select-option value="4">图层4</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="是否分类" name="isClass">
|
||||||
|
<a-switch
|
||||||
|
v-model:checked="props.modalData.data.isClass"
|
||||||
|
checked-children="是"
|
||||||
|
un-checked-children="否"
|
||||||
|
checked-value="1"
|
||||||
|
un-checked-value="0"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="分类字段" name="classField" v-if="props.modalData.data.isClass">
|
||||||
|
<a-select v-model:value="props.modalData.data.classField">
|
||||||
|
<a-select-option value="1">字段1</a-select-option>
|
||||||
|
<a-select-option value="2">字段2</a-select-option>
|
||||||
|
<a-select-option value="3">字段3</a-select-option>
|
||||||
|
<a-select-option value="4">字段4</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="分类名称" name="className" v-if="props.modalData.data.isClass">
|
||||||
|
<a-input v-model:value="props.modalData.data.className" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="选择面积计算字段" name="areaField">
|
||||||
|
<a-select v-model:value="props.modalData.data.areaField">
|
||||||
|
<a-select-option value="1">面积1</a-select-option>
|
||||||
|
<a-select-option value="2">面积2</a-select-option>
|
||||||
|
<a-select-option value="3">面积3</a-select-option>
|
||||||
|
<a-select-option value="4">面积4</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="是否合计" name="isSum">
|
||||||
|
<a-switch
|
||||||
|
v-model:checked="props.modalData.data.isSum"
|
||||||
|
checked-children="是"
|
||||||
|
un-checked-children="否"
|
||||||
|
checked-value="1"
|
||||||
|
un-checked-value="0"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</template>
|
||||||
|
</a-form>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<a-button style="margin-right: 10px" @click="closeModal">取消</a-button>
|
||||||
|
<a-button type="primary" @click="submit">确定</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { defineProps, defineEmits, ref } from 'vue';
|
||||||
|
const props = defineProps(['modalData', 'modalForm']);
|
||||||
|
const emit = defineEmits(['closeModal', 'submit']);
|
||||||
|
const formRef = ref();
|
||||||
|
const treeRules = {
|
||||||
|
itemName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
||||||
|
itemValue: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
|
||||||
|
};
|
||||||
|
const rightRules = {
|
||||||
|
itemName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
|
||||||
|
itemCode: [{ required: true, message: '所属分类不能为空', trigger: 'blur' }],
|
||||||
|
};
|
||||||
|
const submit = () => {
|
||||||
|
formRef.value
|
||||||
|
.validate()
|
||||||
|
.then(() => {
|
||||||
|
emit('submit');
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log('error', error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const closeModal = () => {
|
||||||
|
emit('closeModal');
|
||||||
|
formRef.value.resetFields();
|
||||||
|
};
|
||||||
|
const clearModalData = () => {
|
||||||
|
formRef.value.resetFields();
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
clearModalData,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.categories-modal-container {
|
||||||
|
padding: 10px 25px;
|
||||||
|
.modal-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,360 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-div categories-page">
|
||||||
|
<div class="tree-div w-1/5 xl:w-1/6 m-4 mr-0">
|
||||||
|
<div class="header">
|
||||||
|
<div class="buttons-div">
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
color="info"
|
||||||
|
style="margin-right: 10px"
|
||||||
|
@click="buttonClick('treeAdd')"
|
||||||
|
>
|
||||||
|
添加分类
|
||||||
|
</a-button>
|
||||||
|
<a-button type="primary" color="error" @click="buttonClick('treeDel')">
|
||||||
|
删除分类
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="showTree">
|
||||||
|
<BasicTree
|
||||||
|
ref="treeRef"
|
||||||
|
:treeData="showLTree"
|
||||||
|
:loading="lLoading"
|
||||||
|
:fieldNames="{ key: 'itemValue', title: 'itemName' }"
|
||||||
|
@select="
|
||||||
|
(selectedKeys, { node }) => {
|
||||||
|
getLeftSelectId(node.itemDetailId);
|
||||||
|
changeTypeId(node.key);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-div w-4/5 xl:w-5/6">
|
||||||
|
<BasicTable @register="registerTable">
|
||||||
|
<template #toolbar>
|
||||||
|
<PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
|
||||||
|
</template>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'enabledMark'">
|
||||||
|
<a-tag v-if="record.enabledMark" color="success">正常</a-tag>
|
||||||
|
<a-tag v-else color="error">停用</a-tag>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</div>
|
||||||
|
<a-modal
|
||||||
|
class="categories-modal"
|
||||||
|
v-model:open="openModal"
|
||||||
|
:title="modalData.title"
|
||||||
|
:afterClose="clearModal"
|
||||||
|
>
|
||||||
|
<UseModal ref="modalForm" :modalData="modalData" @closeModal="closeModal" @submit="submit" />
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import UseModal from './Modal/index.vue';
|
||||||
|
import { BasicTree } from '@/components/Tree';
|
||||||
|
import { BasicTable, useTable } from '@/components/Table';
|
||||||
|
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||||
|
import { ref, onMounted, reactive, watch, createVNode, unref } from 'vue';
|
||||||
|
import {
|
||||||
|
getLeftTree,
|
||||||
|
addLeftItem,
|
||||||
|
delLeftItem,
|
||||||
|
LoadPage,
|
||||||
|
Add,
|
||||||
|
Update,
|
||||||
|
Delete,
|
||||||
|
} from '@/api/sys/cloud';
|
||||||
|
import { columns, emptyRightItem, emptyLeftItem, searchFormSchema } from './util';
|
||||||
|
import { Modal, message } from 'ant-design-vue';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
const modalForm = ref();
|
||||||
|
let lLoading = ref(false);
|
||||||
|
let typeId = ref('');
|
||||||
|
let selectTreeId = ref('');
|
||||||
|
let showLTree = ref([]);
|
||||||
|
let openModal = ref(false);
|
||||||
|
const modalData = reactive({
|
||||||
|
title: '',
|
||||||
|
data: {},
|
||||||
|
type: '',
|
||||||
|
});
|
||||||
|
const treeRef = ref();
|
||||||
|
const firstRequestCode = ref('');
|
||||||
|
|
||||||
|
const [registerTable, { reload, getSelectRows }] = useTable({
|
||||||
|
// beforeFetch: (params) => {
|
||||||
|
// console.log(firstRequestCode.value, 'before');
|
||||||
|
// if (firstRequestCode.value !== '') {
|
||||||
|
// params = { ...params, code: firstRequestCode.value };
|
||||||
|
// } else {
|
||||||
|
// params = { ...params, code: typeId.value };
|
||||||
|
// }
|
||||||
|
// return params;
|
||||||
|
// },
|
||||||
|
api: LoadPage,
|
||||||
|
columns,
|
||||||
|
formConfig: {
|
||||||
|
labelWidth: 120,
|
||||||
|
schemas: searchFormSchema,
|
||||||
|
},
|
||||||
|
showIndexColumn: false,
|
||||||
|
rowSelection: {
|
||||||
|
type: 'radio',
|
||||||
|
},
|
||||||
|
useSearchForm: true,
|
||||||
|
bordered: true,
|
||||||
|
showTableSetting: true,
|
||||||
|
handleSearchInfoFn(info) {
|
||||||
|
return info;
|
||||||
|
},
|
||||||
|
immediate: false,
|
||||||
|
afterFetch(res) {
|
||||||
|
firstRequestCode.value = '';
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const getLeftTreeData = (isMounted) => {
|
||||||
|
lLoading.value = true;
|
||||||
|
getLeftTree({ code: 'cloudQueryManagement' })
|
||||||
|
.then((res) => {
|
||||||
|
showLTree.value = res;
|
||||||
|
lLoading.value = false;
|
||||||
|
if (isMounted && res.length > 0) {
|
||||||
|
firstRequestCode.value = res[0].key;
|
||||||
|
typeId.value = res[0].key;
|
||||||
|
unref(treeRef).setSelectedKeys([res[0].key]);
|
||||||
|
}
|
||||||
|
reload();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
lLoading.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
getLeftTreeData(true);
|
||||||
|
});
|
||||||
|
const changeTypeId = (value) => {
|
||||||
|
typeId.value = value;
|
||||||
|
reload();
|
||||||
|
};
|
||||||
|
const getLeftSelectId = (value) => {
|
||||||
|
selectTreeId.value = value;
|
||||||
|
};
|
||||||
|
const submit = () => {
|
||||||
|
let userName = localStorage.getItem('fireUserLoginName');
|
||||||
|
switch (modalData.type) {
|
||||||
|
case 'treeAdd':
|
||||||
|
addLeftItem({
|
||||||
|
...modalData.data,
|
||||||
|
createUserName: userName,
|
||||||
|
modifyUserName: userName,
|
||||||
|
createDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
modifyDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
enabledMark: 1,
|
||||||
|
sortCode: showLTree.value.length,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
getLeftTreeData(false);
|
||||||
|
openModal.value = false;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'btnAdd':
|
||||||
|
Add({
|
||||||
|
...modalData.data,
|
||||||
|
createUserName: userName,
|
||||||
|
modifyUserName: userName,
|
||||||
|
createDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
modifyDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
reload();
|
||||||
|
openModal.value = false;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'btnEdit':
|
||||||
|
Update({
|
||||||
|
...modalData.data,
|
||||||
|
modifyUserName: userName,
|
||||||
|
modifyDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
reload();
|
||||||
|
openModal.value = false;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const buttonClick = (diffType) => {
|
||||||
|
let check = false;
|
||||||
|
switch (diffType) {
|
||||||
|
case 'treeAdd':
|
||||||
|
openModal.value = true;
|
||||||
|
modalData.title = '添加分组';
|
||||||
|
modalData.data = emptyLeftItem;
|
||||||
|
modalData.type = diffType;
|
||||||
|
break;
|
||||||
|
case 'treeDel':
|
||||||
|
check = selectTreeId.value === '' ? true : false;
|
||||||
|
if (check) {
|
||||||
|
message.warning('请选择一条分组数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Modal.confirm({
|
||||||
|
title: '是否确认删除?',
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
onCancel() {},
|
||||||
|
onOk() {
|
||||||
|
return delLeftItem({ id: selectTreeId.value })
|
||||||
|
.then((res) => {
|
||||||
|
getLeftTreeData(false);
|
||||||
|
typeId.value = '';
|
||||||
|
reload();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'btnAdd':
|
||||||
|
openModal.value = true;
|
||||||
|
modalData.title = '添加';
|
||||||
|
modalData.data = emptyRightItem;
|
||||||
|
modalData.type = diffType;
|
||||||
|
break;
|
||||||
|
case 'btnDelete':
|
||||||
|
check = getSelectRows().length !== 1 ? true : false;
|
||||||
|
if (check) {
|
||||||
|
message.warning('请选择一条数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Modal.confirm({
|
||||||
|
title: '是否确认删除?',
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
onCancel() {},
|
||||||
|
onOk() {
|
||||||
|
console.log(getSelectRows()[0]);
|
||||||
|
|
||||||
|
let id = getSelectRows()[0].id;
|
||||||
|
return Delete({ id: id })
|
||||||
|
.then((res) => {
|
||||||
|
reload();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'btnEdit':
|
||||||
|
if (getSelectRows().length !== 1) {
|
||||||
|
message.warning('请选择一条数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let editData = getSelectRows()[0];
|
||||||
|
console.log(editData);
|
||||||
|
modalData.title = '编辑';
|
||||||
|
modalData.data = { ...editData };
|
||||||
|
modalData.type = diffType;
|
||||||
|
openModal.value = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const closeModal = () => {
|
||||||
|
openModal.value = false;
|
||||||
|
};
|
||||||
|
const clearModal = () => {
|
||||||
|
modalForm.value.clearModalData();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-div {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
height: calc(100% - 20px);
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.tree-div {
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
.buttons-div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
}
|
||||||
|
.search-div {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
border-radius: 5px;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
.showTree {
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-div {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.categories-page {
|
||||||
|
.tree-div {
|
||||||
|
.h-full {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.search-div {
|
||||||
|
.ant-btn-primary {
|
||||||
|
background-color: #2a7dc9;
|
||||||
|
}
|
||||||
|
.ant-input-search-button {
|
||||||
|
width: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.categories-modal {
|
||||||
|
.ant-modal-footer > button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ant-modal-footer {
|
||||||
|
margin-top: 0px;
|
||||||
|
border-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// ant-table-header
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: 'ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
resizable: true,
|
||||||
|
ifShow: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '图层',
|
||||||
|
dataIndex: 'layer',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据表',
|
||||||
|
dataIndex: 'tableName',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '叠加图层',
|
||||||
|
dataIndex: 'overlayList',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否分类',
|
||||||
|
dataIndex: 'isClass',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '分类字段',
|
||||||
|
dataIndex: 'classField',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '分类名称',
|
||||||
|
dataIndex: 'className',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '选择面积计算字段',
|
||||||
|
dataIndex: 'areaField',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否合计',
|
||||||
|
dataIndex: 'isSum',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
export const emptyLeftItem = {
|
||||||
|
itemName: '',
|
||||||
|
itemValue: '',
|
||||||
|
};
|
||||||
|
export const emptyRightItem = {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
layer: '',
|
||||||
|
tableName: '',
|
||||||
|
overlayList: ['1'],
|
||||||
|
isClass: 0,
|
||||||
|
classField: '',
|
||||||
|
className: '',
|
||||||
|
areaField:'',
|
||||||
|
isSum: 0,
|
||||||
|
};
|
||||||
|
export const searchFormSchema = [
|
||||||
|
{
|
||||||
|
field: 'key',
|
||||||
|
label: '关键字',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 8 },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -0,0 +1,405 @@
|
||||||
|
<template>
|
||||||
|
<div style="padding: 24px; overflow-y: hidden">
|
||||||
|
<a-tabs v-model:activeKey="activeKey">
|
||||||
|
<a-tab-pane key="imageBoundary" tab="影像边界shp">
|
||||||
|
<div class="flex-column">
|
||||||
|
<a-row style="overflow-y: hidden">
|
||||||
|
<a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
|
||||||
|
<a-form
|
||||||
|
ref="form"
|
||||||
|
v-modal:model="currentAppForm"
|
||||||
|
labelAlign="right"
|
||||||
|
label-width="80px"
|
||||||
|
:label-col="labelCol"
|
||||||
|
:wrapper-col="wrapperCol"
|
||||||
|
size="mini"
|
||||||
|
>
|
||||||
|
<a-form-item label="当前版本">
|
||||||
|
<span style="font-size: 15px; font-weight: bold; color: #000">
|
||||||
|
<a-input v-model:value="currentAppInfo.edition" :bordered="false" />
|
||||||
|
</span>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="版本号">
|
||||||
|
<a-input-number v-model:value="currentAppForm.edition" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="项目名称">
|
||||||
|
<a-input
|
||||||
|
v-model:value="currentAppForm.project_name"
|
||||||
|
defaultValue="drone_enforcement"
|
||||||
|
disabled="true"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="上传">
|
||||||
|
<a-upload
|
||||||
|
v-model:file-list="fileList"
|
||||||
|
:name="imageBoundary_name"
|
||||||
|
:multiple="true"
|
||||||
|
:customRequest="handleCustomRequest"
|
||||||
|
:headers="headers"
|
||||||
|
:progress="progress"
|
||||||
|
:beforeUpload="beforeUpload"
|
||||||
|
>
|
||||||
|
<a-button :loading="imageBoundary_loading"> 点击上传 </a-button>
|
||||||
|
</a-upload>
|
||||||
|
{{ fileName }}
|
||||||
|
<DeleteOutlined v-if="fileName != ''" @click="deleteFileName" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="描述信息">
|
||||||
|
<a-textarea
|
||||||
|
type="textarea"
|
||||||
|
v-model:value="currentAppForm.description"
|
||||||
|
:rows="4"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="是否必须更新" label-width="120px">
|
||||||
|
<a-radio-group v-model:value="currentAppForm.must_update" size="medium">
|
||||||
|
<a-radio :bordered="false" :value="1">是</a-radio>
|
||||||
|
<a-radio :bordered="false" :value="0">否</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item :wrapper-col="{ offset: 10, span: 14 }">
|
||||||
|
<a-button type="primary" @click="onSubmit">立即创建</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="imageRelease" tab="影像发布事件">
|
||||||
|
<div class="flex-column">
|
||||||
|
<a-row style="overflow-y: hidden">
|
||||||
|
<a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
|
||||||
|
<a-form
|
||||||
|
ref="fly_form"
|
||||||
|
v-model:model="fly_currentAppForm"
|
||||||
|
labelAlign="right"
|
||||||
|
label-width="80px"
|
||||||
|
:label-col="labelCol"
|
||||||
|
:wrapper-col="wrapperCol"
|
||||||
|
size="mini"
|
||||||
|
>
|
||||||
|
<a-form-item label="当前版本">
|
||||||
|
<span style="font-size: 15px; font-weight: bold; color: #000">
|
||||||
|
<a-input :bordered="false" />
|
||||||
|
</span>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="版本号">
|
||||||
|
<a-input-number v-model:value="fly_currentAppForm.edition" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="项目名称">
|
||||||
|
<a-input v-model:value="fly_currentAppForm.project_name" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="上传">
|
||||||
|
<a-upload
|
||||||
|
v-model:file-list="fly_fileList"
|
||||||
|
:name="imageRelease_name"
|
||||||
|
:multiple="true"
|
||||||
|
:customRequest="handleCustomRequest"
|
||||||
|
:headers="headers"
|
||||||
|
:progress="progress"
|
||||||
|
:beforeUpload="beforeUpload"
|
||||||
|
>
|
||||||
|
<a-button :loading="imageRelease_loading"> 点击上传 </a-button>
|
||||||
|
</a-upload>
|
||||||
|
{{ fly_fileName }}
|
||||||
|
<DeleteOutlined v-if="fileName != ''" @click="deleteFileName" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="描述信息">
|
||||||
|
<a-textarea
|
||||||
|
type="textarea"
|
||||||
|
v-model:value="fly_currentAppForm.description"
|
||||||
|
:rows="4"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="是否必须更新" label-width="120px">
|
||||||
|
<a-radio-group v-model:value="fly_currentAppForm.must_update" size="medium">
|
||||||
|
<a-radio :bordered="false" :value="1">是</a-radio>
|
||||||
|
<a-radio :bordered="false" :value="0">否</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item :wrapper-col="{ offset: 10, span: 14 }">
|
||||||
|
<a-button type="primary" @click="onFlyControlSubmit">立即创建</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="history" tab="历史记录">
|
||||||
|
<div>
|
||||||
|
<BasicTable @register="registerTable">
|
||||||
|
<template #toolbar>
|
||||||
|
<a-button type="primary" @click="updateimage">更新最新影像</a-button>
|
||||||
|
</template>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'enabledMark'">
|
||||||
|
<a-tag v-if="record.enabledMark" color="success">正常</a-tag>
|
||||||
|
<a-tag v-else color="error">停用</a-tag>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// vue
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
// vben
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
import { DeleteOutlined, UploadOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { message, Upload } from 'ant-design-vue';
|
||||||
|
import type { UploadProps } from 'ant-design-vue';
|
||||||
|
import { BasicTable, useTable } from '@/components/Table';
|
||||||
|
import { useGlobSetting } from '@/hooks/setting';
|
||||||
|
import { columns, searchFormSchema } from './util';
|
||||||
|
// api
|
||||||
|
import { fun_GetUpdateFiles, fun_AddAppFiles } from '@/api/demo/version';
|
||||||
|
import { fun_Load, fun_Upload } from '@/api/demo/files';
|
||||||
|
|
||||||
|
const { createMessage } = useMessage();
|
||||||
|
const { apiUrl } = useGlobSetting();
|
||||||
|
|
||||||
|
// 表单栅格
|
||||||
|
const labelCol = { span: 6 };
|
||||||
|
const wrapperCol = { span: 18 };
|
||||||
|
// 影像边界shp-当前版本信息
|
||||||
|
let currentAppInfo = ref({});
|
||||||
|
// 标签页
|
||||||
|
let activeKey = ref('imageBoundary');
|
||||||
|
// 上传文件列表
|
||||||
|
let fileList: any = ref([]);
|
||||||
|
let fly_fileList: any = ref([]);
|
||||||
|
const imageBoundary_loading = ref<boolean>(false);
|
||||||
|
const imageRelease_loading = ref<boolean>(false);
|
||||||
|
|
||||||
|
const imageBoundary_name = ref<string>('');
|
||||||
|
const imageRelease_name = ref<string>('');
|
||||||
|
// 上传的文件
|
||||||
|
const fileName = ref('');
|
||||||
|
const fly_fileName = ref('');
|
||||||
|
let filePath = '';
|
||||||
|
let fly_filePath = '';
|
||||||
|
|
||||||
|
// 影像边界shp
|
||||||
|
const currentAppForm = ref({
|
||||||
|
edition: '',
|
||||||
|
description: '',
|
||||||
|
filepath: '',
|
||||||
|
must_update: '',
|
||||||
|
project_name: '',
|
||||||
|
createuser: '',
|
||||||
|
createtime: '',
|
||||||
|
});
|
||||||
|
// 影像发布事件
|
||||||
|
const fly_currentAppForm = ref({
|
||||||
|
edition: '',
|
||||||
|
description: '',
|
||||||
|
filepath: '',
|
||||||
|
must_update: '',
|
||||||
|
project_name: '',
|
||||||
|
createuser: '',
|
||||||
|
createtime: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 版本
|
||||||
|
async function getAppInfo() {
|
||||||
|
fun_GetUpdateFiles({ project: 'drone_enforcement' }).then(async (res) => {
|
||||||
|
if (res) {
|
||||||
|
currentAppForm.value.project_name = res.project_name;
|
||||||
|
currentAppForm.value.description = res.description;
|
||||||
|
currentAppInfo.value = res;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
deleteFileName();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传文件接口
|
||||||
|
const handleCustomRequest = (file, progress) => {
|
||||||
|
if (activeKey.value === 'imageBoundary') {
|
||||||
|
fileList.value = [];
|
||||||
|
fun_Upload(file, progress)
|
||||||
|
.then((res: any) => {
|
||||||
|
if (res.data.result.length > 0) {
|
||||||
|
fileName.value = res.data.result[0].fileName;
|
||||||
|
filePath = res.data.result[0].filePath;
|
||||||
|
imageBoundary_loading.value = false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
imageBoundary_loading.value = false;
|
||||||
|
file.onError(err);
|
||||||
|
createMessage.error(err.message);
|
||||||
|
});
|
||||||
|
} else if (activeKey.value === 'imageRelease') {
|
||||||
|
fly_fileList.value = [];
|
||||||
|
fun_Upload(file, progress)
|
||||||
|
.then((res: any) => {
|
||||||
|
if (res.data.result.length > 0) {
|
||||||
|
fly_fileName.value = res.data.result[0].fileName;
|
||||||
|
fly_filePath = res.data.result[0].filePath;
|
||||||
|
imageRelease_loading.value = false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
imageRelease_loading.value = false;
|
||||||
|
file.onError(err);
|
||||||
|
createMessage.error(err.message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 上传之前
|
||||||
|
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||||
|
let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
||||||
|
let size = file.size / 1024 / 1024;
|
||||||
|
const isApk = extension === 'apk';
|
||||||
|
const suitableSize = size < 100;
|
||||||
|
|
||||||
|
if (activeKey.value === 'imageBoundary') {
|
||||||
|
imageBoundary_name.value = file.name;
|
||||||
|
} else {
|
||||||
|
imageRelease_name.value = file.name;
|
||||||
|
}
|
||||||
|
if (!isApk) {
|
||||||
|
createMessage.error('只能上传后缀是.apk的文件');
|
||||||
|
}
|
||||||
|
if (!suitableSize) {
|
||||||
|
createMessage.error('文件大小不得超过100M');
|
||||||
|
}
|
||||||
|
if (isApk && suitableSize) {
|
||||||
|
if (activeKey.value === 'imageBoundary') {
|
||||||
|
imageBoundary_loading.value = true;
|
||||||
|
} else {
|
||||||
|
imageRelease_loading.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (isApk && suitableSize) || Upload.LIST_IGNORE;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除文件
|
||||||
|
function deleteFileName() {
|
||||||
|
// 影像边界shp-删除文件
|
||||||
|
if (activeKey.value === 'imageBoundary') {
|
||||||
|
fileName.value = '';
|
||||||
|
filePath = '';
|
||||||
|
fileList.value = [];
|
||||||
|
} else {
|
||||||
|
// 影像发布事件-删除文件
|
||||||
|
fly_fileName.value = '';
|
||||||
|
fly_filePath = '';
|
||||||
|
fly_fileList.value = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 影像边界shp-立即创建
|
||||||
|
function onSubmit() {
|
||||||
|
if (fileName.value == '' || filePath == '') {
|
||||||
|
createMessage.warn(`请选择上传文件!`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (currentAppForm.value.edition == '') {
|
||||||
|
createMessage.warn(`请先填写版本号!`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (currentAppForm.value.project_name != 'drone_enforcement') {
|
||||||
|
createMessage.warn(`请不要修改项目名称!`);
|
||||||
|
currentAppForm.value.project_name = 'drone_enforcement';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
fun_Load({ key: fileName.value }).then((res) => {
|
||||||
|
if (res.items.length > 0) {
|
||||||
|
currentAppForm.value.filepath = res.items[0].filePath;
|
||||||
|
fun_AddAppFiles(currentAppForm.value).then((res2) => {
|
||||||
|
if (res2) {
|
||||||
|
createMessage.success(`上传成功!`);
|
||||||
|
currentAppForm.value = {
|
||||||
|
createtime: '',
|
||||||
|
createuser: '',
|
||||||
|
edition: '',
|
||||||
|
description: '',
|
||||||
|
filepath: '',
|
||||||
|
must_update: '',
|
||||||
|
project_name: '',
|
||||||
|
};
|
||||||
|
fileList.value = [];
|
||||||
|
getAppInfo();
|
||||||
|
} else {
|
||||||
|
createMessage.warn(`接口错误!`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
createMessage.warn(`上传文件出现错误!`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 影像发布事件-立即创建
|
||||||
|
function onFlyControlSubmit() {
|
||||||
|
if (fly_fileName.value == '' || fly_filePath == '') {
|
||||||
|
createMessage.warn(`请选择上传文件!`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (fly_currentAppForm.value.edition == '') {
|
||||||
|
createMessage.warn(`请先填写版本号!`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (fly_currentAppForm.value.project_name == '') {
|
||||||
|
createMessage.warn(`请先填写项目名称!`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
fun_Load({ key: fly_fileName.value }).then((res) => {
|
||||||
|
if (res.items.length > 0) {
|
||||||
|
fly_currentAppForm.value.filepath = res.items[0].filePath;
|
||||||
|
fun_AddAppFiles(fly_currentAppForm.value).then((res2) => {
|
||||||
|
if (res2) {
|
||||||
|
createMessage.success(`上传成功!`);
|
||||||
|
fly_currentAppForm.value = {
|
||||||
|
createtime: '',
|
||||||
|
createuser: '',
|
||||||
|
edition: '',
|
||||||
|
description: '',
|
||||||
|
filepath: '',
|
||||||
|
must_update: '',
|
||||||
|
project_name: '',
|
||||||
|
};
|
||||||
|
fly_fileList.value = [];
|
||||||
|
getAppInfo();
|
||||||
|
} else {
|
||||||
|
createMessage.warn(`接口错误!`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
createMessage.warn(`上传文件出现错误!`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 历史记录
|
||||||
|
const [registerTable, { reload, getSelectRows }] = useTable({
|
||||||
|
// api: getRightTable,
|
||||||
|
columns,
|
||||||
|
formConfig: {
|
||||||
|
labelWidth: 120,
|
||||||
|
schemas: searchFormSchema,
|
||||||
|
},
|
||||||
|
showIndexColumn: false,
|
||||||
|
rowSelection: {
|
||||||
|
type: 'radio',
|
||||||
|
},
|
||||||
|
useSearchForm: true,
|
||||||
|
bordered: true,
|
||||||
|
showTableSetting: true,
|
||||||
|
handleSearchInfoFn(info) {
|
||||||
|
return info;
|
||||||
|
},
|
||||||
|
immediate: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 版本
|
||||||
|
getAppInfo();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: 'ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
resizable: true,
|
||||||
|
ifShow: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '时间',
|
||||||
|
dataIndex: 'time',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '地址',
|
||||||
|
dataIndex: 'geoserver',
|
||||||
|
resizable: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const searchFormSchema = [
|
||||||
|
{
|
||||||
|
field: '[startTime, endTime]',
|
||||||
|
label: '日期范围',
|
||||||
|
component: 'RangePicker',
|
||||||
|
colProps: { span: 8 },
|
||||||
|
componentProps: {
|
||||||
|
format: 'YYYY-MM',
|
||||||
|
picker: 'month',
|
||||||
|
placeholder: ['开始日期', '结束日期'],
|
||||||
|
defaultValue: [dayjs(dayjs(), 'YYYY-MM-DD'), dayjs(dayjs(), 'YYYY-MM-DD')]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
<template>
|
||||||
|
<template v-if="getShow">
|
||||||
|
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
|
||||||
|
<FormItem name="account" class="enter-x">
|
||||||
|
<Input
|
||||||
|
size="large"
|
||||||
|
v-model:value="formData.account"
|
||||||
|
:placeholder="t('sys.login.userName')"
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<FormItem name="mobile" class="enter-x">
|
||||||
|
<Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem name="sms" class="enter-x">
|
||||||
|
<CountdownInput
|
||||||
|
size="large"
|
||||||
|
v-model:value="formData.sms"
|
||||||
|
:placeholder="t('sys.login.smsCode')"
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<FormItem>
|
||||||
|
<Button class="logon" size="large" block @click="handleReset" :loading="loading">
|
||||||
|
{{ t('common.resetText') }}
|
||||||
|
</Button>
|
||||||
|
<Button size="large" block class="mt-4" @click="handleBackLogin">
|
||||||
|
{{ t('sys.login.backSignIn') }}
|
||||||
|
</Button>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive, ref, computed, unref } from 'vue';
|
||||||
|
import LoginFormTitle from './LoginFormTitle.vue';
|
||||||
|
import { Form, Input, Button } from 'ant-design-vue';
|
||||||
|
import { CountdownInput } from '@/components/CountDown';
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n';
|
||||||
|
import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { handleBackLogin, getLoginState } = useLoginState();
|
||||||
|
const { getFormRules } = useFormRules();
|
||||||
|
|
||||||
|
const formRef = ref();
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const formData = reactive({
|
||||||
|
account: '',
|
||||||
|
mobile: '',
|
||||||
|
sms: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);
|
||||||
|
|
||||||
|
async function handleReset() {
|
||||||
|
const form = unref(formRef);
|
||||||
|
if (!form) return;
|
||||||
|
await form.resetFields();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.logon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background: #0f915f;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
font-family: Alibaba PuHuiTi;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 21px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<template>
|
||||||
|
<div class="login" style="background-color: #f0f0f0; width: 100%; height: 100%">
|
||||||
|
<div class="title">
|
||||||
|
<img src="/login_lindidiaocha/logo.png" />
|
||||||
|
<div class="title_span">
|
||||||
|
<a-col>
|
||||||
|
<a-row><span class="title_CN">临沂市自然资源综合监管平台</span></a-row>
|
||||||
|
<a-row>
|
||||||
|
<span class="title_EN">
|
||||||
|
Linyi City Natural Resources Comprehensive Supervision Platform
|
||||||
|
</span>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg">
|
||||||
|
<div
|
||||||
|
class="bg_login"
|
||||||
|
:style="{
|
||||||
|
height: `${isRegister ? 600 : 400}px`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<LoginForm />
|
||||||
|
<ForgetPasswordForm />
|
||||||
|
<RegisterForm />
|
||||||
|
<MobileForm />
|
||||||
|
<QrCodeForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
版权所有：临沂市自然资源和规划局 技术支持：山东慧创信息科技有限公司
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { unref } from 'vue';
|
||||||
|
import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
|
||||||
|
import { useGlobSetting } from '@/hooks/setting';
|
||||||
|
import { useDesign } from '@/hooks/web/useDesign';
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n';
|
||||||
|
import { useLocaleStore } from '@/store/modules/locale';
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import ForgetPasswordForm from './ForgetPasswordForm.vue';
|
||||||
|
import LoginForm from './LoginForm.vue';
|
||||||
|
import MobileForm from './MobileForm.vue';
|
||||||
|
import QrCodeForm from './QrCodeForm.vue';
|
||||||
|
import RegisterForm from './RegisterForm.vue';
|
||||||
|
import { LoginStateEnum, useLoginState } from './useLogin';
|
||||||
|
const { getLoginState } = useLoginState();
|
||||||
|
|
||||||
|
const isRegister = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
sessionTimeout: {
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const globSetting = useGlobSetting();
|
||||||
|
const { prefixCls } = useDesign('login');
|
||||||
|
const { t } = useI18n();
|
||||||
|
const localeStore = useLocaleStore();
|
||||||
|
const showLocale = localeStore.getShowPicker;
|
||||||
|
const title = computed(() => globSetting?.title ?? '');
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.login {
|
||||||
|
// 页面不能被选中
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* IE/Edge */
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
top: calc((25% - 230px));
|
||||||
|
left: 143px;
|
||||||
|
height: 99px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 99px;
|
||||||
|
margin-right: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_span {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
top: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_CN {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
font-family: Alibaba PuHuiTi;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 50px;
|
||||||
|
color: #131313;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
&_EN {
|
||||||
|
position: relative;
|
||||||
|
top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 22px;
|
||||||
|
font-family: Alibaba PuHuiTi;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #131313;
|
||||||
|
text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
position: relative;
|
||||||
|
top: 50px;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 280px);
|
||||||
|
background-image: url('/login_lindidiaocha/bg.png');
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&_login {
|
||||||
|
position: relative;
|
||||||
|
left: 1170px;
|
||||||
|
width: 294.1px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
width: 628px;
|
||||||
|
height: 18px;
|
||||||
|
font-family: Alibaba PuHuiTi;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
bottom: 26px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
left: calc(50% - 628px / 2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,203 @@
|
||||||
|
<template>
|
||||||
|
<LoginFormTitle class="login_title" />
|
||||||
|
<Form
|
||||||
|
class="p-4 enter-x"
|
||||||
|
:model="formData"
|
||||||
|
:rules="getFormRules"
|
||||||
|
ref="formRef"
|
||||||
|
v-show="getShow"
|
||||||
|
@keypress.enter="handleLogin"
|
||||||
|
>
|
||||||
|
<FormItem name="account">
|
||||||
|
<Input
|
||||||
|
size="large"
|
||||||
|
v-model:value="formData.account"
|
||||||
|
placeholder="请输入账户名"
|
||||||
|
class="fix-auto-fill"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<img src="/public/login_lindidiaocha/account.png" />
|
||||||
|
</template>
|
||||||
|
</Input>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem name="password">
|
||||||
|
<InputPassword
|
||||||
|
size="large"
|
||||||
|
visibilityToggle
|
||||||
|
v-model:value="formData.password"
|
||||||
|
placeholder="密码"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<img src="/public/login_lindidiaocha/password.png" />
|
||||||
|
</template>
|
||||||
|
</InputPassword>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<ARow>
|
||||||
|
<ACol :span="12">
|
||||||
|
<FormItem>
|
||||||
|
<Checkbox v-model:checked="rememberMe" size="small">
|
||||||
|
{{ t('sys.login.rememberMe') }}
|
||||||
|
</Checkbox>
|
||||||
|
</FormItem>
|
||||||
|
</ACol>
|
||||||
|
<ACol :span="12">
|
||||||
|
<FormItem
|
||||||
|
:style="{
|
||||||
|
'text-align': 'right',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
|
||||||
|
{{ t('sys.login.forgetPassword') }}
|
||||||
|
</Button>
|
||||||
|
</FormItem>
|
||||||
|
</ACol>
|
||||||
|
</ARow>
|
||||||
|
|
||||||
|
<FormItem>
|
||||||
|
<Button size="large" block @click="handleLogin" :loading="loading" class="logon">
|
||||||
|
立即登录
|
||||||
|
</Button>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
<div class="bottom" v-if="getShow">
|
||||||
|
<Button type="link" block size="small" @click="setLoginState(LoginStateEnum.REGISTER)">
|
||||||
|
<template #icon>
|
||||||
|
<img src="/public/login_lindidiaocha/register.png" />
|
||||||
|
</template>
|
||||||
|
<span> 用户注册</span>
|
||||||
|
</Button>
|
||||||
|
|
|
||||||
|
<Button type="link" block size="small">
|
||||||
|
<template #icon>
|
||||||
|
<img src="/public/login_lindidiaocha/download.png" />
|
||||||
|
</template>
|
||||||
|
<span> 下载APP</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive, ref, unref, computed } from 'vue';
|
||||||
|
|
||||||
|
import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
|
||||||
|
// import {
|
||||||
|
// GithubFilled,
|
||||||
|
// WechatFilled,
|
||||||
|
// AlipayCircleFilled,
|
||||||
|
// GoogleCircleFilled,
|
||||||
|
// TwitterCircleFilled,
|
||||||
|
// } from '@ant-design/icons-vue';
|
||||||
|
import LoginFormTitle from './LoginFormTitle.vue';
|
||||||
|
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n';
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
|
||||||
|
import { useDesign } from '@/hooks/web/useDesign';
|
||||||
|
//import { onKeyStroke } from '@vueuse/core';
|
||||||
|
|
||||||
|
const ACol = Col;
|
||||||
|
const ARow = Row;
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const InputPassword = Input.Password;
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { notification, createErrorModal } = useMessage();
|
||||||
|
const { prefixCls } = useDesign('login');
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
const { setLoginState, getLoginState } = useLoginState();
|
||||||
|
const { getFormRules } = useFormRules();
|
||||||
|
|
||||||
|
const formRef = ref();
|
||||||
|
const loading = ref(false);
|
||||||
|
const rememberMe = ref(false);
|
||||||
|
|
||||||
|
const formData = reactive({
|
||||||
|
// account: 'vben',
|
||||||
|
// password: '123456',
|
||||||
|
account: '',
|
||||||
|
password: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const { validForm } = useFormValid(formRef);
|
||||||
|
|
||||||
|
//onKeyStroke('Enter', handleLogin);
|
||||||
|
|
||||||
|
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
|
||||||
|
|
||||||
|
async function handleLogin() {
|
||||||
|
const data = await validForm();
|
||||||
|
if (!data) return;
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const userInfo = await userStore.login({
|
||||||
|
password: data.password,
|
||||||
|
account: data.account,
|
||||||
|
mode: 'none', //不要默认的错误提示
|
||||||
|
});
|
||||||
|
console.log(userInfo);
|
||||||
|
localStorage.setItem('fireUserLoginName', userInfo.name);
|
||||||
|
if (userInfo) {
|
||||||
|
notification.success({
|
||||||
|
message: t('sys.login.loginSuccessTitle'),
|
||||||
|
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.name}`,
|
||||||
|
duration: 3,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
createErrorModal({
|
||||||
|
title: t('sys.api.errorTip'),
|
||||||
|
content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
|
||||||
|
getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.login_title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
height: 68px;
|
||||||
|
font-family: Alibaba PuHuiTi;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #131313;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background: #0f915f;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
font-family: Alibaba PuHuiTi;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 21px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: 50px;
|
||||||
|
width: 100%;
|
||||||
|
background: #ebf3f1;
|
||||||
|
|
||||||
|
Button {
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<div class="login_title">
|
||||||
|
{{ getFormTitle }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, unref } from 'vue';
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n';
|
||||||
|
import { LoginStateEnum, useLoginState } from './useLogin';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const { getLoginState } = useLoginState();
|
||||||
|
|
||||||
|
const getFormTitle = computed(() => {
|
||||||
|
const titleObj = {
|
||||||
|
[LoginStateEnum.RESET_PASSWORD]: '重置密码',
|
||||||
|
[LoginStateEnum.LOGIN]: '用户登录',
|
||||||
|
[LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
|
||||||
|
[LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
|
||||||
|
[LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
|
||||||
|
};
|
||||||
|
return titleObj[unref(getLoginState)];
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.login_title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
height: 68px;
|
||||||
|
font-family: Alibaba PuHuiTi;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #131313;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="getShow">
|
||||||
|
<LoginFormTitle class="enter-x" />
|
||||||
|
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
|
||||||
|
<FormItem name="mobile" class="enter-x">
|
||||||
|
<Input
|
||||||
|
size="large"
|
||||||
|
v-model:value="formData.mobile"
|
||||||
|
:placeholder="t('sys.login.mobile')"
|
||||||
|
class="fix-auto-fill"
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem name="sms" class="enter-x">
|
||||||
|
<CountdownInput
|
||||||
|
size="large"
|
||||||
|
class="fix-auto-fill"
|
||||||
|
v-model:value="formData.sms"
|
||||||
|
:placeholder="t('sys.login.smsCode')"
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<FormItem class="enter-x">
|
||||||
|
<Button type="primary" size="large" block @click="handleLogin" :loading="loading">
|
||||||
|
{{ t('sys.login.loginButton') }}
|
||||||
|
</Button>
|
||||||
|
<Button size="large" block class="mt-4" @click="handleBackLogin">
|
||||||
|
{{ t('sys.login.backSignIn') }}
|
||||||
|
</Button>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive, ref, computed, unref } from 'vue';
|
||||||
|
import { Form, Input, Button } from 'ant-design-vue';
|
||||||
|
import { CountdownInput } from '@/components/CountDown';
|
||||||
|
import LoginFormTitle from './LoginFormTitle.vue';
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n';
|
||||||
|
import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { handleBackLogin, getLoginState } = useLoginState();
|
||||||
|
const { getFormRules } = useFormRules();
|
||||||
|
|
||||||
|
const formRef = ref();
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const formData = reactive({
|
||||||
|
mobile: '',
|
||||||
|
sms: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const { validForm } = useFormValid(formRef);
|
||||||
|
|
||||||
|
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE);
|
||||||
|
|
||||||
|
async function handleLogin() {
|
||||||
|
const data = await validForm();
|
||||||
|
if (!data) return;
|
||||||
|
console.log(data);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="getShow">
|
||||||
|
<LoginFormTitle class="enter-x" />
|
||||||
|
<div class="enter-x min-w-64 min-h-64">
|
||||||
|
<QrCode
|
||||||
|
:value="qrCodeUrl"
|
||||||
|
class="enter-x flex justify-center xl:justify-start"
|
||||||
|
:width="280"
|
||||||
|
/>
|
||||||
|
<Divider class="enter-x">{{ t('sys.login.scanSign') }}</Divider>
|
||||||
|
<Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
|
||||||
|
{{ t('sys.login.backSignIn') }}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, unref } from 'vue';
|
||||||
|
import LoginFormTitle from './LoginFormTitle.vue';
|
||||||
|
import { Button, Divider } from 'ant-design-vue';
|
||||||
|
import { QrCode } from '@/components/Qrcode';
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n';
|
||||||
|
import { useLoginState, LoginStateEnum } from './useLogin';
|
||||||
|
|
||||||
|
const qrCodeUrl = 'https://vben.vvbin.cn/login';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { handleBackLogin, getLoginState } = useLoginState();
|
||||||
|
|
||||||
|
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE);
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="getShow">
|
||||||
|
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
|
||||||
|
<FormItem name="account" class="enter-x">
|
||||||
|
<Input
|
||||||
|
class="fix-auto-fill"
|
||||||
|
size="large"
|
||||||
|
v-model:value="formData.account"
|
||||||
|
:placeholder="t('sys.login.userName')"
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem name="mobile" class="enter-x">
|
||||||
|
<Input
|
||||||
|
size="large"
|
||||||
|
v-model:value="formData.mobile"
|
||||||
|
:placeholder="t('sys.login.mobile')"
|
||||||
|
class="fix-auto-fill"
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem name="sms" class="enter-x">
|
||||||
|
<CountdownInput
|
||||||
|
size="large"
|
||||||
|
class="fix-auto-fill"
|
||||||
|
v-model:value="formData.sms"
|
||||||
|
:placeholder="t('sys.login.smsCode')"
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem name="password" class="enter-x">
|
||||||
|
<StrengthMeter
|
||||||
|
size="large"
|
||||||
|
v-model:value="formData.password"
|
||||||
|
:placeholder="t('sys.login.password')"
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem name="confirmPassword" class="enter-x">
|
||||||
|
<InputPassword
|
||||||
|
size="large"
|
||||||
|
visibilityToggle
|
||||||
|
v-model:value="formData.confirmPassword"
|
||||||
|
:placeholder="t('sys.login.confirmPassword')"
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<FormItem class="enter-x" name="policy">
|
||||||
|
<!-- No logic, you need to deal with it yourself -->
|
||||||
|
<Checkbox v-model:checked="formData.policy" size="small">
|
||||||
|
{{ t('sys.login.policy') }}
|
||||||
|
</Checkbox>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<Button class="logon" size="large" block @click="handleRegister" :loading="loading">
|
||||||
|
{{ t('sys.login.registerButton') }}
|
||||||
|
</Button>
|
||||||
|
<Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
|
||||||
|
{{ t('sys.login.backSignIn') }}
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive, ref, unref, computed } from 'vue';
|
||||||
|
import LoginFormTitle from './LoginFormTitle.vue';
|
||||||
|
import { Form, Input, Button, Checkbox } from 'ant-design-vue';
|
||||||
|
import { StrengthMeter } from '@/components/StrengthMeter';
|
||||||
|
import { CountdownInput } from '@/components/CountDown';
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n';
|
||||||
|
import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const InputPassword = Input.Password;
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { handleBackLogin, getLoginState } = useLoginState();
|
||||||
|
|
||||||
|
const formRef = ref();
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const formData = reactive({
|
||||||
|
account: '',
|
||||||
|
password: '',
|
||||||
|
confirmPassword: '',
|
||||||
|
mobile: '',
|
||||||
|
sms: '',
|
||||||
|
policy: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { getFormRules } = useFormRules(formData);
|
||||||
|
const { validForm } = useFormValid(formRef);
|
||||||
|
|
||||||
|
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
|
||||||
|
|
||||||
|
async function handleRegister() {
|
||||||
|
const data = await validForm();
|
||||||
|
if (!data) return;
|
||||||
|
console.log(data);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.logon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background: #0f915f;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
font-family: Alibaba PuHuiTi;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 21px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<template>
|
||||||
|
<transition>
|
||||||
|
<div :class="prefixCls" v-if="true">
|
||||||
|
<Login sessionTimeout />
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||||
|
import Login from './Login.vue';
|
||||||
|
import { useDesign } from '@/hooks/web/useDesign';
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
import { usePermissionStore } from '@/store/modules/permission';
|
||||||
|
import { useAppStore } from '@/store/modules/app';
|
||||||
|
import { PermissionModeEnum } from '@/enums/appEnum';
|
||||||
|
import { type Nullable } from '@vben/types';
|
||||||
|
|
||||||
|
const { prefixCls } = useDesign('st-login');
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const permissionStore = usePermissionStore();
|
||||||
|
const appStore = useAppStore();
|
||||||
|
const userId = ref<Nullable<number | string>>(0);
|
||||||
|
|
||||||
|
const isBackMode = () => {
|
||||||
|
return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 记录当前的UserId
|
||||||
|
userId.value = userStore.getUserInfo?.userId;
|
||||||
|
console.log('Mounted', userStore.getUserInfo);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (userId.value && userId.value !== userStore.getUserInfo.userId) {
|
||||||
|
// 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态
|
||||||
|
document.location.reload();
|
||||||
|
} else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) {
|
||||||
|
// 后台权限模式下，没有成功加载过菜单，就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景
|
||||||
|
document.location.reload();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@prefix-cls: ~'@{namespace}-st-login';
|
||||||
|
|
||||||
|
.@{prefix-cls} {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999999;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: @component-background;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
import type { FormInstance } from 'ant-design-vue/lib/form/Form';
|
||||||
|
import type {
|
||||||
|
RuleObject,
|
||||||
|
NamePath,
|
||||||
|
Rule as ValidationRule,
|
||||||
|
} from 'ant-design-vue/lib/form/interface';
|
||||||
|
import { ref, computed, unref, Ref } from 'vue';
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n';
|
||||||
|
|
||||||
|
export enum LoginStateEnum {
|
||||||
|
LOGIN,
|
||||||
|
REGISTER,
|
||||||
|
RESET_PASSWORD,
|
||||||
|
MOBILE,
|
||||||
|
QR_CODE,
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentState = ref(LoginStateEnum.LOGIN);
|
||||||
|
|
||||||
|
// 这里也可以优化
|
||||||
|
// import { createGlobalState } from '@vueuse/core'
|
||||||
|
|
||||||
|
export function useLoginState() {
|
||||||
|
function setLoginState(state: LoginStateEnum) {
|
||||||
|
currentState.value = state;
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLoginState = computed(() => currentState.value);
|
||||||
|
|
||||||
|
function handleBackLogin() {
|
||||||
|
setLoginState(LoginStateEnum.LOGIN);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { setLoginState, getLoginState, handleBackLogin };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useFormValid<T extends Object = any>(formRef: Ref<FormInstance>) {
|
||||||
|
const validate = computed(() => {
|
||||||
|
const form = unref(formRef);
|
||||||
|
return form?.validate ?? ((_nameList?: NamePath) => Promise.resolve());
|
||||||
|
});
|
||||||
|
|
||||||
|
async function validForm() {
|
||||||
|
const form = unref(formRef);
|
||||||
|
if (!form) return;
|
||||||
|
const data = await form.validate();
|
||||||
|
return data as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { validate, validForm };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useFormRules(formData?: Recordable) {
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder')));
|
||||||
|
const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder')));
|
||||||
|
const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')));
|
||||||
|
const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')));
|
||||||
|
|
||||||
|
const validatePolicy = async (_: RuleObject, value: boolean) => {
|
||||||
|
return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve();
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateConfirmPassword = (password: string) => {
|
||||||
|
return async (_: RuleObject, value: string) => {
|
||||||
|
if (!value) {
|
||||||
|
return Promise.reject(t('sys.login.passwordPlaceholder'));
|
||||||
|
}
|
||||||
|
if (value !== password) {
|
||||||
|
return Promise.reject(t('sys.login.diffPwd'));
|
||||||
|
}
|
||||||
|
return Promise.resolve();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const getFormRules = computed((): { [k: string]: ValidationRule | ValidationRule[] } => {
|
||||||
|
const accountFormRule = unref(getAccountFormRule);
|
||||||
|
const passwordFormRule = unref(getPasswordFormRule);
|
||||||
|
const smsFormRule = unref(getSmsFormRule);
|
||||||
|
const mobileFormRule = unref(getMobileFormRule);
|
||||||
|
|
||||||
|
const mobileRule = {
|
||||||
|
sms: smsFormRule,
|
||||||
|
mobile: mobileFormRule,
|
||||||
|
};
|
||||||
|
switch (unref(currentState)) {
|
||||||
|
// register form rules
|
||||||
|
case LoginStateEnum.REGISTER:
|
||||||
|
return {
|
||||||
|
account: accountFormRule,
|
||||||
|
password: passwordFormRule,
|
||||||
|
confirmPassword: [
|
||||||
|
{ validator: validateConfirmPassword(formData?.password), trigger: 'change' },
|
||||||
|
],
|
||||||
|
policy: [{ validator: validatePolicy, trigger: 'change' }],
|
||||||
|
...mobileRule,
|
||||||
|
};
|
||||||
|
|
||||||
|
// reset password form rules
|
||||||
|
case LoginStateEnum.RESET_PASSWORD:
|
||||||
|
return {
|
||||||
|
account: accountFormRule,
|
||||||
|
...mobileRule,
|
||||||
|
};
|
||||||
|
|
||||||
|
// mobile form rules
|
||||||
|
case LoginStateEnum.MOBILE:
|
||||||
|
return mobileRule;
|
||||||
|
|
||||||
|
// login form rules
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
account: accountFormRule,
|
||||||
|
password: passwordFormRule,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return { getFormRules };
|
||||||
|
}
|
||||||
|
|
||||||
|
function createRule(message: string): ValidationRule[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message,
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue