feat: 页面调整组件属性升级
This commit is contained in:
@@ -3,10 +3,11 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
import { getLocalColor, changePrimaryColor } from '@/hooks/useTheme';
|
||||
import { reactive, ref, onMounted, toRaw } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { Form, message, Modal } 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 { Form, message, Modal } 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 {
|
||||
exportData,
|
||||
listData,
|
||||
@@ -231,9 +232,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
|
||||
/**对话框对象信息状态类型 */
|
||||
type ModalStateType = {
|
||||
/**详情框是否显示 */
|
||||
visibleByView: boolean;
|
||||
openByView: boolean;
|
||||
/**新增框或修改框是否显示 */
|
||||
visibleByEdit: boolean;
|
||||
openByEdit: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**表单数据 */
|
||||
@@ -244,8 +245,8 @@ type ModalStateType = {
|
||||
|
||||
/**对话框对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
visibleByView: false,
|
||||
visibleByEdit: false,
|
||||
openByView: false,
|
||||
openByEdit: false,
|
||||
title: '字典数据',
|
||||
from: {
|
||||
dictCode: undefined,
|
||||
@@ -293,7 +294,7 @@ const modalStateFrom = Form.useForm(
|
||||
function fnModalVisibleByVive(row: Record<string, string>) {
|
||||
modalState.from = Object.assign(modalState.from, row);
|
||||
modalState.title = t('views.system.dictData.viewInfo');
|
||||
modalState.visibleByView = true;
|
||||
modalState.openByView = true;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -305,7 +306,7 @@ function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
|
||||
modalStateFrom.resetFields();
|
||||
modalState.from.dictType = queryParams.dictType;
|
||||
modalState.title = t('views.system.dictData.addInfo');
|
||||
modalState.visibleByEdit = true;
|
||||
modalState.openByEdit = true;
|
||||
} else {
|
||||
if (modalState.confirmLoading) return;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
@@ -316,7 +317,7 @@ function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
modalState.from = Object.assign(modalState.from, res.data);
|
||||
modalState.title = t('views.system.dictData.editInfo');
|
||||
modalState.visibleByEdit = true;
|
||||
modalState.openByEdit = true;
|
||||
} else {
|
||||
message.error(t('views.system.dictData.viewInfoErr'), 2);
|
||||
}
|
||||
@@ -345,7 +346,7 @@ function fnModalOk() {
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
modalState.visibleByEdit = false;
|
||||
modalState.openByEdit = false;
|
||||
modalStateFrom.resetFields();
|
||||
fnGetList();
|
||||
} else {
|
||||
@@ -370,8 +371,8 @@ function fnModalOk() {
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalCancel() {
|
||||
modalState.visibleByEdit = false;
|
||||
modalState.visibleByView = false;
|
||||
modalState.openByEdit = false;
|
||||
modalState.openByView = false;
|
||||
modalStateFrom.resetFields();
|
||||
}
|
||||
|
||||
@@ -579,7 +580,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="default" @click.prevent="fnClose()">
|
||||
<template #icon><CloseOutlined /></template>
|
||||
{{ t('common.close') }}
|
||||
@@ -610,12 +611,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
|
||||
@@ -655,7 +656,7 @@ onMounted(() => {
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 表格列表 -->
|
||||
@@ -720,12 +721,12 @@ onMounted(() => {
|
||||
<ProModal
|
||||
:drag="true"
|
||||
:width="800"
|
||||
: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.dictData.dictType')"
|
||||
@@ -749,7 +750,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.dictData.dictCode')"
|
||||
@@ -770,7 +771,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.dictData.dictLabel')"
|
||||
@@ -788,7 +789,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.dictData.tagType')"
|
||||
@@ -809,7 +810,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.dictData.tagTypeShow')"
|
||||
@@ -857,7 +858,7 @@ onMounted(() => {
|
||||
:destroyOnClose="true"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:visible="modalState.visibleByEdit"
|
||||
:open="modalState.openByEdit"
|
||||
:title="modalState.title"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnModalOk"
|
||||
@@ -869,7 +870,7 @@ onMounted(() => {
|
||||
: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.dictData.dictType')"
|
||||
@@ -900,7 +901,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.dictData.dictLabel')"
|
||||
@@ -929,7 +930,7 @@ onMounted(() => {
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 首页状态取色器 -->
|
||||
<a-row :gutter="16">
|
||||
<a-row>
|
||||
<a-col
|
||||
:lg="12"
|
||||
:md="12"
|
||||
@@ -977,7 +978,7 @@ onMounted(() => {
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 非首页状态取色器 -->
|
||||
<a-row :gutter="16" v-if="modalState.from.dictType !== 'index_status'">
|
||||
<a-row v-if="modalState.from.dictType !== 'index_status'">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.system.dictData.tagClass')"
|
||||
|
||||
@@ -2,10 +2,11 @@
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
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 {
|
||||
exportType,
|
||||
listType,
|
||||
@@ -181,9 +182,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
|
||||
/**对话框对象信息状态类型 */
|
||||
type ModalStateType = {
|
||||
/**详情框是否显示 */
|
||||
visibleByView: boolean;
|
||||
openByView: boolean;
|
||||
/**新增框或修改框是否显示 */
|
||||
visibleByEdit: boolean;
|
||||
openByEdit: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**表单数据 */
|
||||
@@ -194,8 +195,8 @@ type ModalStateType = {
|
||||
|
||||
/**对话框对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
visibleByView: false,
|
||||
visibleByEdit: false,
|
||||
openByView: false,
|
||||
openByEdit: false,
|
||||
title: '字典类型',
|
||||
from: {
|
||||
dictId: undefined,
|
||||
@@ -248,7 +249,7 @@ function fnModalVisibleByVive(dictId: string | number) {
|
||||
if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||
modalState.from = Object.assign(modalState.from, res.data);
|
||||
modalState.title = t('views.system.dict.dictInfo');
|
||||
modalState.visibleByView = true;
|
||||
modalState.openByView = true;
|
||||
} else {
|
||||
message.error(t('common.getInfoFail'), 2);
|
||||
}
|
||||
@@ -263,7 +264,7 @@ function fnModalVisibleByEdit(dictId?: string | number) {
|
||||
if (!dictId) {
|
||||
modalStateFrom.resetFields();
|
||||
modalState.title = t('common.addText') + t('views.system.dict.dictType');
|
||||
modalState.visibleByEdit = true;
|
||||
modalState.openByEdit = true;
|
||||
} else {
|
||||
if (modalState.confirmLoading) return;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
@@ -275,7 +276,7 @@ function fnModalVisibleByEdit(dictId?: string | number) {
|
||||
modalState.from = Object.assign(modalState.from, res.data);
|
||||
modalState.title =
|
||||
t('common.editText') + t('views.system.dict.dictType');
|
||||
modalState.visibleByEdit = true;
|
||||
modalState.openByEdit = true;
|
||||
} else {
|
||||
message.error(t('common.getInfoFail'), 2);
|
||||
}
|
||||
@@ -304,7 +305,7 @@ function fnModalOk() {
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
modalState.visibleByEdit = false;
|
||||
modalState.openByEdit = false;
|
||||
modalStateFrom.resetFields();
|
||||
fnGetList(1);
|
||||
} else {
|
||||
@@ -329,8 +330,8 @@ function fnModalOk() {
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalCancel() {
|
||||
modalState.visibleByEdit = false;
|
||||
modalState.visibleByView = false;
|
||||
modalState.openByEdit = false;
|
||||
modalState.openByView = false;
|
||||
modalStateFrom.resetFields();
|
||||
}
|
||||
|
||||
@@ -559,7 +560,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()"
|
||||
@@ -603,12 +604,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
|
||||
@@ -648,7 +649,7 @@ onMounted(() => {
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 表格列表 -->
|
||||
@@ -725,7 +726,7 @@ onMounted(() => {
|
||||
<ProModal
|
||||
:drag="true"
|
||||
:width="800"
|
||||
:visible="modalState.visibleByView"
|
||||
:open="modalState.openByView"
|
||||
:title="modalState.title"
|
||||
@cancel="fnModalCancel"
|
||||
>
|
||||
@@ -767,7 +768,7 @@ onMounted(() => {
|
||||
:destroyOnClose="true"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:visible="modalState.visibleByEdit"
|
||||
:open="modalState.openByEdit"
|
||||
:title="modalState.title"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnModalOk"
|
||||
|
||||
Reference in New Issue
Block a user