feat: 页面调整组件属性升级
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted, toRaw } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { message, Modal, Form } from 'ant-design-vue/lib';
|
||||
import { SizeType } from 'ant-design-vue/lib/config-provider';
|
||||
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
|
||||
import { ColumnsType } from 'ant-design-vue/lib/table';
|
||||
import { ProModal } from 'antdv-pro-modal';
|
||||
import { message, Modal, Form } from 'ant-design-vue/es';
|
||||
import { SizeType } from 'ant-design-vue/es/config-provider';
|
||||
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
|
||||
import { ColumnsType } from 'ant-design-vue/es/table';
|
||||
import UploadModal from '@/components/UploadModal/index.vue';
|
||||
import {
|
||||
importData,
|
||||
@@ -31,7 +32,7 @@ import {
|
||||
} from '@/utils/regular-utils';
|
||||
import useDictStore from '@/store/modules/dict';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import { DataNode } from 'ant-design-vue/lib/tree';
|
||||
import { DataNode } from 'ant-design-vue/es/tree';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
const { getDict } = useDictStore();
|
||||
const userStore = useUserStore();
|
||||
@@ -225,11 +226,11 @@ type OptionsType = {
|
||||
/**对话框对象信息状态类型 */
|
||||
type ModalStateType = {
|
||||
/**详情框是否显示 */
|
||||
visibleByView: boolean;
|
||||
openByView: boolean;
|
||||
/**新增框或修改框是否显示 */
|
||||
visibleByEdit: boolean;
|
||||
openByEdit: boolean;
|
||||
/**重置密码框是否显示 */
|
||||
visibleByResetPwd: boolean;
|
||||
openByResetPwd: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**表单数据 */
|
||||
@@ -242,9 +243,9 @@ type ModalStateType = {
|
||||
|
||||
/**对话框对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
visibleByView: false,
|
||||
visibleByEdit: false,
|
||||
visibleByResetPwd: false,
|
||||
openByView: false,
|
||||
openByEdit: false,
|
||||
openByResetPwd: false,
|
||||
title: '用户',
|
||||
from: {
|
||||
userId: undefined,
|
||||
@@ -347,7 +348,7 @@ function fnModalVisibleByVive(userId: string | number) {
|
||||
// 头像解析
|
||||
modalState.from.avatar = userStore.fnAvatar(modalState.from.avatar);
|
||||
modalState.title = t('views.system.user.userInfo');
|
||||
modalState.visibleByView = true;
|
||||
modalState.openByView = true;
|
||||
} else {
|
||||
message.error(t('views.system.user.tipRowErr'), 2);
|
||||
}
|
||||
@@ -388,7 +389,7 @@ function fnModalVisibleByEdit(userId?: string | number) {
|
||||
modalState.from.deptId = deptTreeData.value[0].id;
|
||||
modalState.title =
|
||||
t('common.addText') + t('views.system.user.userInfo');
|
||||
modalState.visibleByEdit = true;
|
||||
modalState.openByEdit = true;
|
||||
} else {
|
||||
message.error(t('views.system.user.tipRowErr'), 2);
|
||||
}
|
||||
@@ -419,7 +420,7 @@ function fnModalVisibleByEdit(userId?: string | number) {
|
||||
modalState.from.postIds = postIds;
|
||||
modalState.title =
|
||||
t('common.editText') + t('views.system.user.userInfo');
|
||||
modalState.visibleByEdit = true;
|
||||
modalState.openByEdit = true;
|
||||
} else {
|
||||
message.error(t('views.system.user.tipRowErr'), 2);
|
||||
}
|
||||
@@ -452,7 +453,7 @@ function fnModalOk() {
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
modalState.visibleByEdit = false;
|
||||
modalState.openByEdit = false;
|
||||
modalStateFrom.resetFields();
|
||||
fnGetList(1);
|
||||
} else {
|
||||
@@ -477,9 +478,9 @@ function fnModalOk() {
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalCancel() {
|
||||
modalState.visibleByEdit = false;
|
||||
modalState.visibleByView = false;
|
||||
modalState.visibleByResetPwd = false;
|
||||
modalState.openByEdit = false;
|
||||
modalState.openByView = false;
|
||||
modalState.openByResetPwd = false;
|
||||
modalStateFrom.resetFields();
|
||||
modalState.options.roles = [];
|
||||
modalState.options.posts = [];
|
||||
@@ -504,7 +505,7 @@ function fnModalOkResetPwd() {
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
modalState.visibleByResetPwd = false;
|
||||
modalState.openByResetPwd = false;
|
||||
modalStateFrom.resetFields();
|
||||
} else {
|
||||
message.error({
|
||||
@@ -532,7 +533,7 @@ function fnRecordResetPwd(row: Record<string, string>) {
|
||||
modalState.from.userId = row.userId;
|
||||
modalState.from.userName = row.userName;
|
||||
modalState.title = t('views.system.user.resetPwd');
|
||||
modalState.visibleByResetPwd = true;
|
||||
modalState.openByResetPwd = true;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -643,7 +644,7 @@ function fnExportList() {
|
||||
/**对话框表格信息导入对象信息状态类型 */
|
||||
type ModalUploadImportStateType = {
|
||||
/**是否显示 */
|
||||
visible: boolean;
|
||||
open: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**是否上传中 */
|
||||
@@ -658,7 +659,7 @@ type ModalUploadImportStateType = {
|
||||
|
||||
/**对话框表格信息导入对象信息状态 */
|
||||
let uploadImportState: ModalUploadImportStateType = reactive({
|
||||
visible: false,
|
||||
open: false,
|
||||
title: t('views.system.user.importTitle'),
|
||||
loading: false,
|
||||
updateSupport: false,
|
||||
@@ -670,12 +671,12 @@ let uploadImportState: ModalUploadImportStateType = reactive({
|
||||
function fnModalUploadImportOpen() {
|
||||
uploadImportState.updateSupport = false;
|
||||
uploadImportState.msg = '';
|
||||
uploadImportState.visible = true;
|
||||
uploadImportState.open = true;
|
||||
}
|
||||
|
||||
/**对话框表格信息导入关闭窗口 */
|
||||
function fnModalUploadImportClose() {
|
||||
uploadImportState.visible = false;
|
||||
uploadImportState.open = false;
|
||||
}
|
||||
|
||||
/**对话框表格信息导入上传 */
|
||||
@@ -892,7 +893,7 @@ onMounted(() => {
|
||||
<a-card :bordered="false" :body-style="{ padding: '0px' }">
|
||||
<!-- 插槽-卡片左侧侧 -->
|
||||
<template #title>
|
||||
<div class="button-container">
|
||||
<a-space :size="8" align="center">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click.prevent="fnModalVisibleByEdit()"
|
||||
@@ -927,12 +928,12 @@ onMounted(() => {
|
||||
<template #icon><ExportOutlined /></template>
|
||||
{{ t('common.export') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
<div class="button-container">
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.searchBarText') }}</template>
|
||||
<a-switch
|
||||
@@ -972,7 +973,7 @@ onMounted(() => {
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 表格列表 -->
|
||||
@@ -1075,12 +1076,12 @@ onMounted(() => {
|
||||
:drag="true"
|
||||
:width="800"
|
||||
:destroyOnClose="false"
|
||||
:visible="modalState.visibleByView"
|
||||
:open="modalState.openByView"
|
||||
:title="modalState.title"
|
||||
@cancel="fnModalCancel"
|
||||
>
|
||||
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
|
||||
<a-row :gutter="16">
|
||||
<a-row>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item :label="t('views.system.user.userNum')" name="userId">
|
||||
{{ modalState.from.userId }}
|
||||
@@ -1097,7 +1098,7 @@ onMounted(() => {
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-row>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item :label="t('views.system.user.loginIp')" name="loginIp">
|
||||
{{ modalState.from.loginIp }}
|
||||
@@ -1114,7 +1115,7 @@ onMounted(() => {
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-row>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item :label="t('views.system.user.userTop')" name="avatar">
|
||||
<a-avatar
|
||||
@@ -1143,7 +1144,7 @@ onMounted(() => {
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-row>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item :label="t('views.system.user.sex')" name="sex">
|
||||
<DictTag
|
||||
@@ -1162,7 +1163,7 @@ onMounted(() => {
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-row>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.system.user.phone')"
|
||||
@@ -1201,7 +1202,7 @@ onMounted(() => {
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-row>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.system.user.userWork')"
|
||||
@@ -1265,7 +1266,7 @@ onMounted(() => {
|
||||
:destroyOnClose="true"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:visible="modalState.visibleByEdit"
|
||||
:open="modalState.openByEdit"
|
||||
:title="modalState.title"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnModalOk"
|
||||
@@ -1277,7 +1278,7 @@ onMounted(() => {
|
||||
:label-col="{ span: 6 }"
|
||||
:labelWrap="true"
|
||||
>
|
||||
<a-row :gutter="16" v-if="!modalState.from.userId">
|
||||
<a-row v-if="!modalState.from.userId">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.system.user.account')"
|
||||
@@ -1315,7 +1316,7 @@ onMounted(() => {
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-row>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.system.user.userName')"
|
||||
@@ -1356,7 +1357,7 @@ onMounted(() => {
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-row>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.system.user.phone')"
|
||||
@@ -1387,7 +1388,7 @@ onMounted(() => {
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-row>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item :label="t('views.system.user.sex')" name="sex">
|
||||
<a-select
|
||||
@@ -1486,7 +1487,7 @@ onMounted(() => {
|
||||
:destroyOnClose="true"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:visible="modalState.visibleByResetPwd"
|
||||
:open="modalState.openByResetPwd"
|
||||
:title="modalState.title"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnModalOkResetPwd"
|
||||
@@ -1527,12 +1528,12 @@ onMounted(() => {
|
||||
:loading="uploadImportState.loading"
|
||||
@upload="fnModalUploadImportUpload"
|
||||
@close="fnModalUploadImportClose"
|
||||
v-model:visible="uploadImportState.visible"
|
||||
v-model:open="uploadImportState.open"
|
||||
:ext="['.xls', '.xlsx']"
|
||||
:size="10"
|
||||
>
|
||||
<template #default>
|
||||
<a-row :gutter="18" justify="space-between" align="middle">
|
||||
<a-row justify="space-between" align="middle">
|
||||
<a-col :span="12">
|
||||
<a-checkbox v-model:checked="uploadImportState.updateSupport">
|
||||
{{ t('views.system.user.updateSure') }}
|
||||
|
||||
Reference in New Issue
Block a user