Merge remote-tracking branch 'origin/main'
This commit is contained in:
commit
3447e1bc0a
|
|
@ -24,30 +24,25 @@
|
|||
</a-menu> -->
|
||||
<!-- 动态生成菜单项 -->
|
||||
<a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
|
||||
<template v-for="route in menuRoutes">
|
||||
<!-- -->
|
||||
<a-menu-item v-if="route.name === 'dashboard'">
|
||||
<template v-for="route in staticRouter">
|
||||
<a-menu-item v-if="route.meta?.title === undefined && route.children">
|
||||
<router-link :to="`${route.children[0].path}`">
|
||||
<pie-chart-outlined />
|
||||
<span>{{ route.meta?.title }}</span>
|
||||
<HomeOutlined v-if="route.name === 'dashboard'" />
|
||||
<InsuranceOutlined v-if="route.name === 'police'" />
|
||||
<SoundOutlined v-if="route.name === 'law'" />
|
||||
<ApartmentOutlined v-if="route.name === 'warning'" />
|
||||
<span>{{ route?.children[0]?.meta?.title }}</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-sub-menu v-if="route.children && route.children.length && route?.name !== 'dashboard'" :key="route.path">
|
||||
<a-sub-menu v-if="route.children && route.children.length && route?.meta?.title" :key="route.path">
|
||||
<template #title>
|
||||
<pie-chart-outlined />
|
||||
<MailOutlined />
|
||||
<span>{{ route.meta?.title }}</span>
|
||||
</template>
|
||||
<a-menu-item v-for="child in route.children" :key="child.path">
|
||||
<router-link :to="`${route.path}${child.path}`">{{ child.meta?.title }}</router-link>
|
||||
<router-link :to="`${route.path}/${child.path}`">{{ child.meta?.title }}</router-link>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<!-- -->
|
||||
<a-menu-item v-if="!route.children">
|
||||
<router-link :to="route.path">
|
||||
<pie-chart-outlined />
|
||||
<span>{{ route.meta?.title }}</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
|
|
@ -56,10 +51,14 @@
|
|||
<layout-header v-model:collapsed="collapsed" />
|
||||
</a-layout-header>
|
||||
<a-layout-content class="layout-content">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<!-- <keep-alive> 会缓存已经访问过的组件，当你再次访问同一个页面时，它会直接从缓存中加载，而不会触发重新渲染 -->
|
||||
<!-- router-view 必须绑定一个key 否则就会出现 路由切换白屏的问题（路由切换后，页面不显示内容，刷新后正常显示），但是这样也会导致一个问题就是 会导致keep-alive失效、因为这种方式会强制刷新路由-->
|
||||
|
||||
<router-view v-slot="{ Component, route }" :key="route.path">
|
||||
<!-- <router-view v-slot="{ Component, route }"> -->
|
||||
<transition appear name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="keepAliveNames">
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
<component :is="Component" :key="route.path" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
|
|
@ -69,9 +68,9 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { InsuranceOutlined, HomeOutlined, SoundOutlined, MailOutlined, ApartmentOutlined, InboxOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
|
||||
import LayoutHeader from '@/components/layout/header/LayoutHeader.vue'
|
||||
import { computed } from 'vue'
|
||||
// import Sliber from '@/components/layout/sliber/sliber.vue'
|
||||
import { staticRouter } from '@/router/staticRouters'
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
|
|
@ -81,7 +80,10 @@ const route = useRoute()
|
|||
|
||||
const selectedKeys = computed(() => [route.path])
|
||||
// 过滤出需要在菜单中显示的路由
|
||||
const menuRoutes = computed(() => staticRouter.filter((route) => route.meta && route.meta.title))
|
||||
// const menuRoutes = computed(() => staticRouter.filter((route) => route.meta && route.meta.title))
|
||||
// staticRouter.forEach((element) => {
|
||||
// console.log(element.meta?.title)
|
||||
// })
|
||||
|
||||
// 示例：动态控制缓存页面的名称
|
||||
// const keepAliveNames = ref(['index'])
|
||||
|
|
@ -90,7 +92,8 @@ import { ref } from 'vue'
|
|||
// 控制菜单折叠
|
||||
const collapsed = ref<boolean>(false)
|
||||
|
||||
const keepAliveNames = ref<string[]>([])
|
||||
// const keepAliveNames = ref<string[]>(['Index', 'Register'])
|
||||
const keepAliveNames = ref<string[]>(['index', 'rindex'])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { FormInstance, message, notification } from 'ant-design-vue'
|
||||
import { FormInstance, notification } from 'ant-design-vue'
|
||||
import { Rule } from 'ant-design-vue/es/form'
|
||||
import { LoginParams } from '@/types/views/login.ts'
|
||||
import api from '@/axios'
|
||||
|
|
@ -24,7 +24,10 @@ import rsaUtil from '@/utils/rsaUtil.ts'
|
|||
import { TokenInfo } from '@/types/stores/userStore.ts'
|
||||
import { useUserStore } from '@/stores/modules/userStore.ts'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const props = defineProps<{
|
||||
account: string
|
||||
password: string
|
||||
}>()
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
|
||||
|
|
@ -47,9 +50,11 @@ const loginParamsRule: Record<keyof LoginParams, Rule[]> = {
|
|||
],
|
||||
}
|
||||
const loginParams = ref<LoginParams>({
|
||||
accountOrTelephone: __APP_ENV.VITE_APP_ENV === 'development' ? 'ERwuf2' : '',
|
||||
password: __APP_ENV.VITE_APP_ENV === 'development' ? '123456' : '',
|
||||
accountOrTelephone: __APP_ENV.VITE_APP_ENV === 'development' ? '' : '',
|
||||
password: __APP_ENV.VITE_APP_ENV === 'development' ? '' : '',
|
||||
})
|
||||
loginParams.value.accountOrTelephone = props.account
|
||||
loginParams.value.password = props.password
|
||||
|
||||
/**
|
||||
* 登录
|
||||
|
|
|
|||
|
|
@ -8,3 +8,15 @@ interface JsonResult<T> {
|
|||
message: string;
|
||||
data?: T;
|
||||
}
|
||||
interface dataStatus {
|
||||
account: string;
|
||||
password: string;
|
||||
remark: string;
|
||||
checkStatus: {
|
||||
extData: {
|
||||
color: string;
|
||||
};
|
||||
label: string;
|
||||
value: number;
|
||||
};
|
||||
}
|
||||
|
|
@ -27,22 +27,19 @@ router.beforeEach(async (to, from, next) => {
|
|||
return next(from.fullPath)
|
||||
}
|
||||
//判断访问路径是不是白名单d
|
||||
console.log('访问路径', to.path);
|
||||
// console.log('访问路径', to.path);
|
||||
|
||||
if (ROUTER_WHITE_LIST.includes(to.path)) {
|
||||
return next();
|
||||
} else {
|
||||
//不在白名单内需要查看是否携带token 没有token需要返回登录页进行登录
|
||||
if (!userStore.getTokenInfo?.value) {
|
||||
await message.warn('未找到token，请重新登陆!')
|
||||
return next('/login');
|
||||
}
|
||||
}
|
||||
//不在白名单内需要查看是否携带token 没有token需要返回登录页进行登录
|
||||
// if (!userStore.getTokenInfo?.value) {
|
||||
// await message.warn('未找到token，请重新登陆!')
|
||||
// return next('/login');
|
||||
// }
|
||||
//放行
|
||||
|
||||
|
||||
return next();
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -5,19 +5,10 @@ export const Layout = () => import("@/components/layout/layout.vue");
|
|||
export const staticRouter: RouteRecordRaw[] =
|
||||
[
|
||||
{
|
||||
path: "/",
|
||||
name: "/",
|
||||
component: Layout,
|
||||
redirect: "/dashboard",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
|
||||
path: '',
|
||||
path: '/',
|
||||
name: 'dashboard',
|
||||
redirect: '/index',
|
||||
meta: {
|
||||
title: '首页',
|
||||
keepalive: true
|
||||
},
|
||||
component: Layout,
|
||||
|
|
@ -39,45 +30,111 @@ export const staticRouter: RouteRecordRaw[] =
|
|||
|
||||
{
|
||||
|
||||
path: '',
|
||||
name: 'register',
|
||||
path: '/query-',
|
||||
name: 'query-',
|
||||
meta: {
|
||||
title: '注册',
|
||||
title: '信息查询',
|
||||
keepalive: true
|
||||
},
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '/register', // 这里使用相对路径而不是 '/register'
|
||||
name: '',
|
||||
path: 'public-unit', // 这里使用相对路径而不是 '/register'
|
||||
name: 'public-unit',
|
||||
meta: {
|
||||
title: '注册',
|
||||
|
||||
title: '企事业单位',
|
||||
keepalive: true
|
||||
},
|
||||
component: () => import('@/views/register.vue')
|
||||
component: () => import('@/views/query/publicUnit.vue')
|
||||
},
|
||||
{
|
||||
path: 'weapp-user', // 这里使用相对路径而不是 '/register'
|
||||
name: 'weapp-user',
|
||||
meta: {
|
||||
|
||||
title: '微信小程序用户',
|
||||
keepalive: true
|
||||
},
|
||||
component: () => import('@/views/query/weappUser.vue')
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
//登录页面
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
meta: {
|
||||
// title: '登录',
|
||||
// keepalive: true
|
||||
keepalive: true
|
||||
},
|
||||
component: () => import('@/views/login.vue')
|
||||
},
|
||||
{
|
||||
//登录页面
|
||||
|
||||
path: '/register-index',
|
||||
name: 'register-index',
|
||||
meta: {
|
||||
// title: '注册',
|
||||
},
|
||||
component: () => import('@/views/register.vue')
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
path: '/law',
|
||||
name: 'law',
|
||||
meta: {
|
||||
|
||||
},
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '/law-index',
|
||||
name: 'law-index',
|
||||
meta: {
|
||||
title: '法制宣传',
|
||||
keepalive: true
|
||||
},
|
||||
component: () => import('@/views/law/index.vue')
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/police',
|
||||
name: 'police',
|
||||
meta: {
|
||||
|
||||
},
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '/police-presence',
|
||||
name: 'police-presence',
|
||||
meta: {
|
||||
title: '警保风采',
|
||||
keepalive: true
|
||||
},
|
||||
component: () => import('@/views/police/index.vue')
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/warning',
|
||||
name: 'warning',
|
||||
meta: {
|
||||
|
||||
},
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '/early-warning',
|
||||
name: 'early-warning',
|
||||
meta: {
|
||||
title: '三色预警',
|
||||
keepalive: true
|
||||
},
|
||||
component: () => import('@/views/warning/index.vue')
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {defineStore} from "pinia";
|
||||
import {TokenInfo, UserStore} from "@/types/stores/userStore.ts";
|
||||
import { defineStore } from "pinia";
|
||||
import { TokenInfo, UserStore } from "@/types/stores/userStore.ts";
|
||||
|
||||
export const useUserStore = defineStore({
|
||||
id: 'useUserStore',
|
||||
|
|
@ -19,6 +19,10 @@ export const useUserStore = defineStore({
|
|||
getters: {
|
||||
getTokenInfo: (state): TokenInfo => state.tokenInfo as TokenInfo,
|
||||
},
|
||||
|
||||
// persist 是 Pinia 的一个插件 pinia-plugin-persistedstate 提供的功能
|
||||
// 用来让状态数据在页面刷新或重新加载时保存在浏览器的存储中
|
||||
// 通过这个插件，你可以让 Pinia store 的状态持久化，即即使页面刷新，数据也不会丢失
|
||||
persist: {
|
||||
key: "useUserStore",
|
||||
storage: window.localStorage,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template><div>111111</div></template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'Index',
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<!-- <template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 法制宣传 -->
|
||||
法制宣传
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="title">欢迎来到超级后台</div>
|
||||
<a-tabs class="account-tab" v-model:active-key="activeKey">
|
||||
<a-tab-pane :key="0" tab="账号登录">
|
||||
<TelephoneLogin />
|
||||
<TelephoneLogin :account="account" :password="password" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div class="oauth">
|
||||
|
|
@ -38,8 +38,15 @@
|
|||
import { QqOutlined, WechatOutlined } from '@ant-design/icons-vue'
|
||||
import TelephoneLogin from '@/components/login/TelephoneLogin.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const account = ref<string>('')
|
||||
const password = ref<string>('')
|
||||
const activeKey = ref(0)
|
||||
account.value = route.query.account as string
|
||||
password.value = route.query.password as string
|
||||
// console.log('Account:', account.value)
|
||||
// console.log('Password:', password.value)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 警保风采 -->
|
||||
警保风采
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 企事业单位 -->
|
||||
企事业单位
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 微信小程序用户 -->
|
||||
微信小程序用户
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
|
@ -32,21 +32,21 @@
|
|||
</a-form-item>
|
||||
</div>
|
||||
<!-- 用户根据单位代码去查询 审核状态 -->
|
||||
<a-form-item has-feedback label="单位代码" name="code">
|
||||
<a-form-item has-feedback label="单位机构代码" name="code">
|
||||
<a-input v-model:value="formState.code" autocomplete="off" />
|
||||
</a-form-item>
|
||||
<a-form-item has-feedback label="单位名称" name="name">
|
||||
<a-form-item has-feedback label="单位机构名称" name="name">
|
||||
<a-input v-model:value="formState.name" autocomplete="off" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item has-feedback label="详细地址" name="address">
|
||||
<a-input v-model:value="formState.address" autocomplete="off" />
|
||||
</a-form-item>
|
||||
<a-form-item has-feedback label="联系人姓名" name="contactPersonInfo">
|
||||
<a-input v-model:value="formState.contactPersonInfo.name" autocomplete="off" />
|
||||
<a-form-item has-feedback label="联系人姓名" name="contactName">
|
||||
<a-input v-model:value="formState.contactName" autocomplete="off" />
|
||||
</a-form-item>
|
||||
<a-form-item has-feedback label="联系人电话" name="contactPersonInfo">
|
||||
<a-input v-model:value="formState.contactPersonInfo.telephone" autocomplete="off" />
|
||||
<a-form-item has-feedback label="联系人电话" name="telephone">
|
||||
<a-input v-model:value="formState.telephone" autocomplete="off" />
|
||||
</a-form-item>
|
||||
<!-- -->
|
||||
|
||||
|
|
@ -60,13 +60,14 @@
|
|||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="查询注册结果">
|
||||
<div class="flex items-center justify-center flex-col" style="max-height: 500px; overflow-y: auto">
|
||||
<a-card v-if="isLogin" class="mb-8" style="width: 300px">
|
||||
<div>账户：{{ account }}</div>
|
||||
<div>密码：{{ password }}</div>
|
||||
</a-card>
|
||||
<a-input v-if="isHasAccount" class="w-40 mb-8" v-model:value="searchCode.code" autocomplete="off" placeholder="请输入单位代码查询" />
|
||||
<a-button v-if="isHasAccount" size="large" type="primary" :loading="loading" @click="getCheckStatus"> 查询审核状态 </a-button>
|
||||
<a-button v-if="isLogin" size="large" type="primary" @click="toLogin"> 去登录 </a-button>
|
||||
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="statusDate" layout="horizontal">
|
||||
<a-form-item label="单位机构代码" name="onlyCode" :rules="[{ required: true, message: '请输入单位代码进行查询' }]">
|
||||
<a-input placeholder="请输入单位代码查询" :allowClear="true" v-model:value="statusDate.onlyCode"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
|
||||
<a-button type="primary" html-type="submit" style="width: 100px" @click="getCheckStatus">确认</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
|
@ -78,21 +79,25 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
import { message } from 'ant-design-vue'
|
||||
// import type { CascaderProps } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import api from '@/axios/index.ts'
|
||||
import type { ShowSearchType } from 'ant-design-vue/es/cascader'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { onMounted, reactive, ref, defineComponent, createVNode, h } from 'vue'
|
||||
defineComponent({
|
||||
name: 'Register',
|
||||
})
|
||||
onMounted(() => {
|
||||
getTree()
|
||||
})
|
||||
const labelCol = { style: { width: '120px' } }
|
||||
const wrapperCol = { span: 14 }
|
||||
const filter: ShowSearchType['filter'] = (inputValue, path) => {
|
||||
return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
|
||||
}
|
||||
const value = ref<string[]>([])
|
||||
const options = ref<any[]>([])
|
||||
const cascaderChange = (value: any, selectedOptions: any): void => {
|
||||
const cascaderChange = (value: any): void => {
|
||||
formState.administrativeDivisionCodes = [...value]
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +156,6 @@ const loadTreeFromCache = async (): Promise<any | null> => {
|
|||
const request = store.get('treeData')
|
||||
|
||||
request.onsuccess = () => {
|
||||
// console.log('🚀 ~ loadTreeFromCache ~ request.result:', request.result)
|
||||
if (request.result !== undefined) {
|
||||
resolve(request.result) // 返回缓存数据
|
||||
} else {
|
||||
|
|
@ -169,7 +173,6 @@ const loadTreeFromCache = async (): Promise<any | null> => {
|
|||
const getTree = async () => {
|
||||
// 先尝试从缓存中加载数据
|
||||
const cachedData = await loadTreeFromCache()
|
||||
// console.log('🚀 ~ getTree ~ cachedData:', cachedData)
|
||||
if (cachedData) {
|
||||
console.log('未发请求')
|
||||
// 如果缓存存在，直接使用缓存数据
|
||||
|
|
@ -190,66 +193,83 @@ interface FormState {
|
|||
name: string
|
||||
code: number | string
|
||||
administrativeDivisionCodes: any[]
|
||||
|
||||
address: string
|
||||
contactPersonInfo: ContactPersonInfo
|
||||
telephone: string //联系人手机
|
||||
contactName: string //联系人姓名
|
||||
}
|
||||
const formRef = ref<FormInstance>()
|
||||
interface ContactPersonInfo {
|
||||
telephone: string
|
||||
name: string
|
||||
}
|
||||
const formState = reactive<FormState>({
|
||||
name: '',
|
||||
code: '',
|
||||
administrativeDivisionCodes: [],
|
||||
// province: '',
|
||||
// city: '',
|
||||
// districts: '',
|
||||
// street: '',
|
||||
address: '',
|
||||
contactPersonInfo: {
|
||||
telephone: '',
|
||||
name: '',
|
||||
},
|
||||
contactName: '',
|
||||
})
|
||||
|
||||
const checkIsNull = async (_rule: Rule, value: string) => {
|
||||
const checkName = async (_rule: Rule, value: string) => {
|
||||
if (value === '') {
|
||||
return Promise.reject('请输入')
|
||||
return Promise.reject('请输入单位机构名称')
|
||||
} else {
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
const checkOBJ = async (_rule: Rule, value: ContactPersonInfo) => {
|
||||
// console.log('🚀 ~ checkOBJ ~ value:', value)
|
||||
|
||||
if (value.telephone !== '' && value.name !== '') {
|
||||
return Promise.resolve()
|
||||
const checkCode = async (_rule: Rule, value: string) => {
|
||||
if (value === '') {
|
||||
return Promise.reject('请输入单位机构代码')
|
||||
} else {
|
||||
// return Promise.reject('请填写完整的联系人信息')
|
||||
// return Promise.reject('请输入')
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
|
||||
const checkAddress = async (_rule: Rule, value: string) => {
|
||||
if (value === '') {
|
||||
return Promise.reject('请输入详细地址')
|
||||
} else {
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
const checkTelephone = async (_rule: Rule, value: string) => {
|
||||
if (value === '') {
|
||||
return Promise.reject('请输入联系人电话')
|
||||
} else {
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
const checkContactName = async (_rule: Rule, value: string) => {
|
||||
if (value === '') {
|
||||
return Promise.reject('请输入联系人姓名')
|
||||
} else {
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
// 写自定义 Rule 是为之后修改做准备
|
||||
const rules: Record<string, Rule[]> = {
|
||||
name: [{ required: true, validator: checkIsNull, trigger: 'change' }],
|
||||
code: [{ required: true, validator: checkIsNull, trigger: 'change' }],
|
||||
address: [{ required: true, validator: checkIsNull, trigger: 'change' }],
|
||||
|
||||
contactPersonInfo: [{ required: true, validator: checkOBJ, trigger: 'change' }],
|
||||
name: [{ required: true, validator: checkName, trigger: 'change' }],
|
||||
code: [{ required: true, validator: checkCode, trigger: 'change' }],
|
||||
address: [{ required: true, validator: checkAddress, trigger: 'change' }],
|
||||
telephone: [{ required: true, validator: checkTelephone, trigger: 'change' }],
|
||||
contactName: [{ required: true, validator: checkContactName, trigger: 'change' }],
|
||||
}
|
||||
const layout = {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
}
|
||||
|
||||
const register = (values: any) => {
|
||||
const register = () => {
|
||||
if (value.value.length === 0) {
|
||||
message.error('请选择行政区划')
|
||||
return
|
||||
} else {
|
||||
api.post<any>('/common/policeUnitRegister', { ...formState }).then((res) => {
|
||||
const { telephone, contactName, ...rest } = formState
|
||||
const contactPersonInfo = {
|
||||
telephone,
|
||||
name: contactName,
|
||||
}
|
||||
const submitForm = {
|
||||
...rest,
|
||||
contactPersonInfo,
|
||||
}
|
||||
api.post<any>('/common/policeUnitRegister', { ...submitForm }).then((res) => {
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
message.success('提交成功')
|
||||
|
|
@ -259,14 +279,15 @@ const register = (values: any) => {
|
|||
}
|
||||
|
||||
const handleFinish = (values: FormState) => {
|
||||
console.log(values, formState)
|
||||
register(values)
|
||||
console.log('自定义校验成功')
|
||||
console.log(values)
|
||||
register()
|
||||
}
|
||||
const handleFinishFailed = (errors: any) => {
|
||||
console.log(errors)
|
||||
}
|
||||
const resetForm = () => {
|
||||
formRef.value.resetFields()
|
||||
formRef.value?.resetFields()
|
||||
value.value = []
|
||||
}
|
||||
const handleValidate = (...args: any[]) => {
|
||||
|
|
@ -275,35 +296,55 @@ const handleValidate = (...args: any[]) => {
|
|||
|
||||
const activeKey = ref('1')
|
||||
const loading = ref<boolean>(false)
|
||||
const account = ref<string>('')
|
||||
const password = ref<string>('')
|
||||
const isHasAccount = ref<boolean>(true)
|
||||
const isLogin = ref<boolean>(false)
|
||||
// const searchCode = ref<string>()
|
||||
//
|
||||
const searchCode = reactive({
|
||||
code: __APP_ENV.VITE_APP_ENV === 'development' ? 'dawda' : '',
|
||||
})
|
||||
|
||||
const getCheckStatus = () => {
|
||||
const getCheckStatus = async () => {
|
||||
if (statusDate.onlyCode.trim() === '') {
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
api
|
||||
.post<any>('/management/getCheckStatus', { onlyCode: searchCode.code, unitOptType: 'POLICE_UNIT' })
|
||||
.post<dataStatus>('/management/getCheckStatus', statusDate)
|
||||
.then((res) => {
|
||||
console.log('🚀 ~ api.post<any> ~ res:', res)
|
||||
if (res.code === 200) {
|
||||
loading.value = false
|
||||
isHasAccount.value = false
|
||||
isLogin.value = true
|
||||
account.value = res.data.account
|
||||
password.value = res.data.password
|
||||
}
|
||||
showConfirm(res.data as dataStatus)
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const toLogin = () => {
|
||||
router.replace({ path: '/login' })
|
||||
import { useUserStore } from '@/stores/modules/userStore.ts'
|
||||
const showConfirm = (columnsDate: dataStatus) => {
|
||||
if (columnsDate.checkStatus.value === 0) {
|
||||
Modal.success({
|
||||
title: `审核通过`,
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: h('div', {}, [h('div', `账号：${columnsDate.account}`), h('div', `密码：${columnsDate.password}`), h('div', `${columnsDate.remark}`)]),
|
||||
okText: '跳转',
|
||||
async onOk() {
|
||||
await useUserStore().resetUserInfo()
|
||||
await router
|
||||
.replace({
|
||||
path: '/login',
|
||||
query: {
|
||||
account: columnsDate.account,
|
||||
password: columnsDate.password,
|
||||
},
|
||||
})
|
||||
.then(() => {})
|
||||
},
|
||||
onCancel() {},
|
||||
})
|
||||
} else {
|
||||
Modal.error({
|
||||
title: `未审核`,
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: `${columnsDate.remark}`,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const statusDate = reactive({
|
||||
// __APP_ENV.VITE_APP_ENV === 'development' ? 'dawda' : '',
|
||||
onlyCode: '',
|
||||
unitOptType: 'POLICE_UNIT',
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 三色预警 -->
|
||||
三色预警
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
"lodash-es": "^4.17.21",
|
||||
"pinia": "^2.2.2",
|
||||
"pinia-plugin-persistedstate": "^3.2.0",
|
||||
"vue-component-type-helpers": "^2.1.2",
|
||||
"sass": "^1.77.8",
|
||||
"vue": "^3.4.37",
|
||||
"vue-router": "4",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,162 @@
|
|||
/* 扩展ant design pro按钮组件颜色 */
|
||||
$--my-antd-important: !important;
|
||||
|
||||
.btn-danger {
|
||||
color: #ffffff;
|
||||
background-color: #F5222D;
|
||||
border-color: #F5222D;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #ff4d4f $--my-antd-important;
|
||||
border-color: #ff4d4f $--my-antd-important;
|
||||
}
|
||||
|
||||
&:active, &.active {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #cf1322 $--my-antd-important;
|
||||
border-color: #cf1322 $--my-antd-important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-volcano {
|
||||
color: #ffffff;
|
||||
background-color: #FA541C;
|
||||
border-color: #FA541C;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #ff7a45 $--my-antd-important;
|
||||
border-color: #ff7a45 $--my-antd-important;
|
||||
}
|
||||
|
||||
&:active, &.active {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #d4380d $--my-antd-important;
|
||||
border-color: #d4380d $--my-antd-important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warn {
|
||||
color: #ffffff;
|
||||
background-color: #FAAD14;
|
||||
border-color: #FAAD14;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #ffc53d $--my-antd-important;
|
||||
border-color: #ffc53d $--my-antd-important;
|
||||
}
|
||||
|
||||
&:active, &.active {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #d48806 $--my-antd-important;
|
||||
border-color: #d48806 $--my-antd-important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
color: #ffffff;
|
||||
background-color: #52C41A;
|
||||
border-color: #52C41A;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #73d13d $--my-antd-important;
|
||||
border-color: #73d13d $--my-antd-important;
|
||||
}
|
||||
|
||||
&:active, &.active {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #389e0d $--my-antd-important;
|
||||
border-color: #389e0d $--my-antd-important;
|
||||
}
|
||||
}
|
||||
|
||||
.button-color-cyan {
|
||||
color: #ffffff;
|
||||
background-color: #13C2C2;
|
||||
border-color: #13C2C2;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #36cfc9 $--my-antd-important;
|
||||
border-color: #36cfc9 $--my-antd-important;
|
||||
}
|
||||
|
||||
&:active, &.active {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #08979c $--my-antd-important;
|
||||
border-color: #08979c $--my-antd-important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-daybreak {
|
||||
color: #ffffff;
|
||||
background-color: #1890FF;
|
||||
border-color: #1890FF;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #096dd9 $--my-antd-important;
|
||||
border-color: #096dd9 $--my-antd-important;
|
||||
}
|
||||
|
||||
&:active, &.active {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #40a9ff $--my-antd-important;
|
||||
border-color: #40a9ff $--my-antd-important;
|
||||
}
|
||||
}
|
||||
|
||||
.button-color-geekblue {
|
||||
color: #ffffff;
|
||||
background-color: #2F54EB;
|
||||
border-color: #2F54EB;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #1d39c4 $--my-antd-important;
|
||||
border-color: #1d39c4 $--my-antd-important;
|
||||
}
|
||||
|
||||
&:active, &.active {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #597ef7 $--my-antd-important;
|
||||
border-color: #597ef7 $--my-antd-important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-purple {
|
||||
color: #ffffff;
|
||||
background-color: #722ED1;
|
||||
border-color: #722ED1;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #9254de $--my-antd-important;
|
||||
border-color: #9254de $--my-antd-important;
|
||||
}
|
||||
|
||||
&:active, &.active {
|
||||
color: #ffffff $--my-antd-important;
|
||||
background-color: #531dab $--my-antd-important;
|
||||
border-color: #531dab $--my-antd-important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-row-warn td {
|
||||
background-color: #fefca6;
|
||||
}
|
||||
|
||||
.table-row-danger td {
|
||||
background-color: #f79988;
|
||||
}
|
||||
|
||||
.table-row-success td {
|
||||
background-color: #b6fcbe;
|
||||
}
|
||||
|
||||
.ant-table-summary td {
|
||||
background: #edeff6;
|
||||
}
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
<template>
|
||||
<a-form
|
||||
ref="formProMaxRef"
|
||||
v-bind="props"
|
||||
:model="modelValue"
|
||||
>
|
||||
<a-row :gutter="props.gutter">
|
||||
<a-col
|
||||
v-for="(item,field) in props.formItemOptions as FormProMaxItemOptions<T>"
|
||||
:key="field"
|
||||
v-bind="getResponsive(item)"
|
||||
>
|
||||
<a-form-item
|
||||
:name="field"
|
||||
v-bind="item"
|
||||
:label="undefined"
|
||||
>
|
||||
<template v-slot:label>
|
||||
{{ item.label }}
|
||||
<template v-if="item.remarkRender">
|
||||
<a-popover :title="item.label" :content="item.remarkRender()">
|
||||
<QuestionCircleOutlined class="margin-left-xs" style="color: red"/>
|
||||
</a-popover>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 自定义组件 -->
|
||||
<!-- ant design vue 组件 -->
|
||||
<a-input
|
||||
v-if="item.type==='input'"
|
||||
v-model:value="modelValue[field]"
|
||||
style="width: 100%"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="getPlaceholder(item)"
|
||||
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||
/>
|
||||
<a-input-password
|
||||
v-else-if="item.type==='inputPassword'"
|
||||
v-model:value="modelValue[field]"
|
||||
style="width: 100%"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="getPlaceholder(item)"
|
||||
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||
/>
|
||||
<a-input-number
|
||||
v-else-if="item.type==='inputNumber'"
|
||||
v-model:value="modelValue[field]"
|
||||
style="width: 100%"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="getPlaceholder(item)"
|
||||
/>
|
||||
<a-textarea
|
||||
v-else-if="item.type==='inputTextArea'"
|
||||
v-model:value="modelValue[field]"
|
||||
style="width: 100%"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="getPlaceholder(item)"
|
||||
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-else-if="item.type==='radioGroup'"
|
||||
v-model:value="modelValue[field]"
|
||||
style="width: 100%"
|
||||
v-bind="item.componentsProps"
|
||||
:options="item.options"
|
||||
/>
|
||||
<a-checkbox-group
|
||||
v-else-if="item.type==='checkboxGroup'"
|
||||
v-model:value="modelValue[field]"
|
||||
style="width: 100%"
|
||||
v-bind="item.componentsProps"
|
||||
:options="item.options"
|
||||
/>
|
||||
<a-select
|
||||
v-else-if="item.type==='select'"
|
||||
v-model:value="modelValue[field]"
|
||||
style="width: 100%"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="getPlaceholder(item)"
|
||||
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||
:options="item.options"
|
||||
/>
|
||||
<a-tree-select
|
||||
v-else-if="item.type==='treeSelect'"
|
||||
style="width: 100%"
|
||||
v-model:value="modelValue[field]"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="getPlaceholder(item)"
|
||||
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||
:tree-data="item.options"
|
||||
/>
|
||||
<a-cascader
|
||||
v-else-if="item.type ==='cascader'"
|
||||
style="width: 100%"
|
||||
v-model:value="modelValue[field]"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="getPlaceholder(item)"
|
||||
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||
:options="item.options"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-else-if="item.type ==='rangePicker'"
|
||||
style="width: 100%"
|
||||
v-model:value="modelValue[field]"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="item.componentsProps?.placeholder ?? ['开始日期', '结束日期']"
|
||||
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||
/>
|
||||
<a-date-picker
|
||||
v-else-if="item.type ==='datePicker'"
|
||||
style="width: 100%"
|
||||
v-model:value="modelValue[field]"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="item.componentsProps?.placeholder ?? '请选择日期'"
|
||||
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||
/>
|
||||
<a-time-range-picker
|
||||
v-else-if="item.type ==='timeRangePicker'"
|
||||
style="width: 100%"
|
||||
v-model:value="modelValue[field]"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="item.componentsProps?.placeholder ?? ['开始时间', '结束时间']"
|
||||
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||
/>
|
||||
<a-time-picker
|
||||
v-else-if="item.type ==='timePicker'"
|
||||
style="width: 100%"
|
||||
v-model:value="modelValue[field]"
|
||||
v-bind="item.componentsProps"
|
||||
:placeholder="getPlaceholder(item)"
|
||||
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||
/>
|
||||
<template v-else-if="item.type==='custom'">
|
||||
<component :is="item.customRender"/>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<slot name="formOperation"></slot>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" generic="T extends Record<string,any>">
|
||||
import {FormInstance} from "ant-design-vue";
|
||||
import {ref} from "vue";
|
||||
import {FormExpose} from "ant-design-vue/es/form/Form";
|
||||
import {QuestionCircleOutlined} from '@ant-design/icons-vue'
|
||||
import {FormProMaxItemOptions, FormProMaxItemProps, FormProMaxProps} from "@/types/components/form/index.ts";
|
||||
|
||||
|
||||
const modelValue = defineModel<T>('value', {
|
||||
default: {}
|
||||
})
|
||||
|
||||
const props = withDefaults(defineProps<FormProMaxProps<T>>(), {
|
||||
grid: () => {
|
||||
return {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
gutter: 10,
|
||||
labelCol: () => {
|
||||
return {
|
||||
style: {
|
||||
width: '100px'
|
||||
}
|
||||
}
|
||||
},
|
||||
wrapperCol: () => {
|
||||
return {
|
||||
span: 18
|
||||
}
|
||||
},
|
||||
labelAlign: "left",
|
||||
colon: undefined,
|
||||
disabled: undefined,
|
||||
hideRequiredMark: undefined,
|
||||
labelWrap: undefined,
|
||||
scrollToFirstError: undefined,
|
||||
validateOnRuleChange: undefined
|
||||
})
|
||||
|
||||
const formProMaxRef = ref<FormInstance>(null!)
|
||||
|
||||
const getResponsive = (item: FormProMaxItemProps): Grid => {
|
||||
//span优先级高于响应式设置
|
||||
if (item.grid) return item.grid.span ? {span: item.grid.span} : {...item.grid};
|
||||
return {...props.grid}
|
||||
}
|
||||
|
||||
//优先级: 组件本身=》formItem=》label
|
||||
const getPlaceholder = (item: FormProMaxItemProps) => item.componentsProps?.placeholder ?? item.placeholder ?? (item.type.includes('input') ? `请输入${item.label}` : `请选择${item.label}`)
|
||||
|
||||
defineExpose<FormExpose>({
|
||||
validate: (nameList, options) => formProMaxRef.value?.validate(nameList, options),
|
||||
resetFields: (name) => formProMaxRef.value?.resetFields(name),
|
||||
clearValidate: () => formProMaxRef.value?.clearValidate(),
|
||||
getFieldsValue: (nameList) => formProMaxRef.value?.getFieldsValue(nameList),
|
||||
scrollToField: (name, options) => formProMaxRef.value?.scrollToField(name, options),
|
||||
validateFields: (nameList, options) => formProMaxRef.value?.validateFields(nameList, options)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
<template>
|
||||
<div class="table-pro-content">
|
||||
<div class="card padding" v-if="props.searchFormOptions">
|
||||
<FormProMax
|
||||
ref="searchFormRef"
|
||||
:form-item-options="props.searchFormOptions"
|
||||
v-model:value="searchParams"
|
||||
v-bind="props.searchFormProps"
|
||||
>
|
||||
<template v-slot:formOperation>
|
||||
<a-space class="margin-right flex-end">
|
||||
<a-button type="primary" @click="search">
|
||||
<search-outlined/>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button danger @click="resetFormAndTable">
|
||||
<rollback-outlined/>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</FormProMax>
|
||||
</div>
|
||||
<div class="card padding margin-top-xs">
|
||||
<div class="flex-justify-between">
|
||||
<slot name="tableHeader" :selectKeys="selectKeys" :selectRows="selectRows"></slot>
|
||||
<div></div>
|
||||
<slot name="tableHeaderRight" :selectKeys="selectKeys" :selectRows="selectRows"></slot>
|
||||
<a-space>
|
||||
<template v-if="!props.searchFormOptions">
|
||||
<a-tooltip>
|
||||
<template #title>刷新数据</template>
|
||||
<a-button shape="circle" @click="requestGetTableData">
|
||||
<ReloadOutlined/>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="props.isPrinter">
|
||||
<a-tooltip>
|
||||
<template #title>打印数据</template>
|
||||
<a-button shape="circle">
|
||||
<PrinterOutlined/>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-table
|
||||
class="margin-top"
|
||||
v-bind="props"
|
||||
:columns="tableColumns"
|
||||
:row-selection="props.isSelection ? props.selectionProps ? props.selectionProps : defaultSelectProps : null"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
>
|
||||
<template v-for="(_,key) in slots" v-slot:[key]="scope">
|
||||
<slot v-if="!includes(['tableHeader','tableHeaderRight'],key)" :name="key" v-bind="scope"></slot>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
v-if="props.isPagination"
|
||||
class="flex-end margin-top margin-right"
|
||||
v-model:current="pageParams.current"
|
||||
v-model:page-size="pageParams.size"
|
||||
:total="pageParams.total"
|
||||
v-bind="props.paginationProps"
|
||||
@change="handleCurrentChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script
|
||||
setup
|
||||
lang="ts"
|
||||
generic="T extends BaseTableRowRecord = {},P extends { [key: string]: any } ={}"
|
||||
>
|
||||
import FormProMax from "@/components/form/FormProMax.vue";
|
||||
import {PrinterOutlined, ReloadOutlined, RollbackOutlined, SearchOutlined} from "@ant-design/icons-vue";
|
||||
import {computed, onMounted, Ref, ref} from "vue";
|
||||
import {FormInstance} from "ant-design-vue";
|
||||
import useTableProMax from "@/hooks/useTableProMax";
|
||||
import {includes, isEmpty} from "lodash-es";
|
||||
import {BaseTableRowRecord, TableProMaxProps, TableProMaxRowSelect, TableProMaxSlots} from "@/types/components/table";
|
||||
|
||||
const selectKeys = ref<string[]>([])
|
||||
const selectRows = ref<T[]>([]) as Ref<T[]>
|
||||
|
||||
const defaultSelectProps: TableProMaxRowSelect<T> = {
|
||||
type: "checkbox",
|
||||
selectedRowKeys: selectKeys as any,
|
||||
preserveSelectedRowKeys: true,
|
||||
onSelect: (record, selected) => {
|
||||
if (selected) {
|
||||
selectKeys.value.push(record[props.rowKey] as string)
|
||||
selectRows.value.push(record)
|
||||
} else {
|
||||
selectKeys.value.splice(selectKeys.value.findIndex(x => x === record[props.rowKey]));
|
||||
selectRows.value.splice(selectRows.value.findIndex(r => r[props.rowKey] === record[props.rowKey]))
|
||||
}
|
||||
},
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
selectKeys.value = selectedRowKeys as string[];
|
||||
selectRows.value = selectedRows;
|
||||
},
|
||||
}
|
||||
|
||||
const clearSelect = () => {
|
||||
selectKeys.value = [];
|
||||
selectRows.value = [];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TableProMaxProps<T, P>>(), {
|
||||
needIndex: true,
|
||||
searchFormProps: () => {
|
||||
return {
|
||||
grid: {
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4
|
||||
},
|
||||
labelCol: undefined,
|
||||
wrapperCol: undefined
|
||||
}
|
||||
},
|
||||
rowKey: 'snowFlakeId',
|
||||
requestAuto: true,
|
||||
isPagination: true,
|
||||
isSelection: false,
|
||||
paginationProps: () => {
|
||||
return {
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
showSizeChanger: true,
|
||||
}
|
||||
},
|
||||
bordered: true,
|
||||
showSorterTooltip: undefined,
|
||||
showHeader: undefined,
|
||||
expandFixed: undefined,
|
||||
expandRowByClick: undefined,
|
||||
defaultExpandAllRows: undefined,
|
||||
showExpandColumn: undefined,
|
||||
sticky: undefined
|
||||
})
|
||||
const slots = defineSlots<TableProMaxSlots<T>>()
|
||||
|
||||
const tableColumns = computed(() => {
|
||||
let cols = props.columns;
|
||||
if (!isEmpty(cols) && props.needIndex) {
|
||||
if (!(cols?.[0].dataIndex === 'index')) {
|
||||
cols?.unshift({
|
||||
dataIndex: 'index',
|
||||
width: 60,
|
||||
title: '序号',
|
||||
customRender: ({index}) => index + 1
|
||||
})
|
||||
}
|
||||
}
|
||||
return cols;
|
||||
})
|
||||
|
||||
/**
|
||||
* 表单实例
|
||||
*/
|
||||
const searchFormRef = ref<FormInstance>() as Ref<FormInstance>
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
const searchParams = ref<P | Record<string, any>>(props.defaultSearchParams || {}) as Ref<P>
|
||||
|
||||
const {
|
||||
loading,
|
||||
dataSource,
|
||||
pageParams,
|
||||
search,
|
||||
requestGetTableData,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
resetState
|
||||
} = useTableProMax(props.requestApi,
|
||||
searchFormRef,
|
||||
searchParams,
|
||||
props.isPagination,
|
||||
props.dataCallback,
|
||||
props.requestError
|
||||
)
|
||||
|
||||
onMounted(() => props.requestAuto && requestGetTableData(true))
|
||||
|
||||
/**
|
||||
* 重置表单并查询
|
||||
*/
|
||||
const resetFormAndTable = () => {
|
||||
searchFormRef.value?.resetFields()
|
||||
requestGetTableData()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
selectKeys,
|
||||
selectRows,
|
||||
requestGetTableData,
|
||||
clearSelect,
|
||||
resetTable: () => {
|
||||
searchFormRef.value?.resetFields()
|
||||
resetState();
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,5 +13,5 @@ export const initEnums = () => {
|
|||
})
|
||||
}
|
||||
|
||||
export const enumSelectNodes = <T>(enumType: DictType): SelectNodeVo<T>[] => JSON.parse(sessionStorage.getItem('dictMap') as string)?.[enumType] || []
|
||||
export const dictSelectNodes = <T>(enumType: DictType): SelectNodeVo<T>[] => JSON.parse(sessionStorage.getItem('dictMap') as string)?.[enumType] || []
|
||||
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ export const SYSTEM_MENUS: SystemMenu[] = [
|
|||
type: "menu",
|
||||
component: () => import('@/views/index.vue')
|
||||
}, {
|
||||
title: '单位管理',
|
||||
title: '用户管理',
|
||||
name: 'userManagement',
|
||||
path: '/userManagement',
|
||||
type: 'dir',
|
||||
children: [
|
||||
{
|
||||
title: '用户管理',
|
||||
title: '后台管理',
|
||||
name: 'bgManagement',
|
||||
path: '/bgManagement',
|
||||
type: 'menu',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
import {ref, Ref} from "vue";
|
||||
import {Page, PageParams, PageResult} from "@/types/hooks/useTableProMax.ts";
|
||||
import {FormInstance} from "ant-design-vue";
|
||||
import {BaseTableRowRecord, RequestApiType} from "@/types/components/table";
|
||||
|
||||
/**
|
||||
*
|
||||
* @param api 查询方法
|
||||
* @param searchFormRef 表单校验
|
||||
* @param searchParams 查询的参数
|
||||
* @param isPageTable 是否分页
|
||||
* @param dataCallBack 查询到数据后的回调
|
||||
* @param requestError 查询出错回调
|
||||
*/
|
||||
export default <T extends BaseTableRowRecord, P extends Record<string, any> | PageParams<P>>(api: RequestApiType<T, P>,
|
||||
searchFormRef: Ref<FormInstance>,
|
||||
searchParams: Ref<P>,
|
||||
isPageTable: boolean = true,
|
||||
dataCallBack?: (data: T[]) => T[],
|
||||
requestError?: (errorMsg: any) => void) => {
|
||||
|
||||
const dataSource = ref<T[]>([]) as Ref<T[]>;
|
||||
const loading = ref<boolean>(false);
|
||||
const pageParams = ref<Page>({
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取表格数据
|
||||
*/
|
||||
const requestGetTableData = async (isInit: boolean = false) => {
|
||||
try {
|
||||
//校验表单
|
||||
!isInit && await searchFormRef.value?.validate();
|
||||
//组装参数
|
||||
let totalSearchParams;
|
||||
if (isPageTable) {
|
||||
totalSearchParams = {
|
||||
params: searchParams.value,
|
||||
page: {
|
||||
current: pageParams.value.current,
|
||||
size: pageParams.value.size
|
||||
}
|
||||
} as PageParams<P>;
|
||||
} else {
|
||||
totalSearchParams = searchParams.value
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
const resp = await api(totalSearchParams as P);
|
||||
let tableData: T[];
|
||||
|
||||
if (isPageTable) {
|
||||
const {current, records, size, total} = resp.data as PageResult<T>;
|
||||
isPageTable && updatePageParams({
|
||||
current: parseInt(current),
|
||||
size: parseInt(size),
|
||||
total: parseInt(total)
|
||||
});
|
||||
tableData = records;
|
||||
} else {
|
||||
tableData = resp.data as T[]
|
||||
}
|
||||
dataCallBack && (tableData = dataCallBack(tableData));
|
||||
dataSource.value = tableData;
|
||||
} catch (error) {
|
||||
requestError && requestError(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新分页信息
|
||||
*/
|
||||
const updatePageParams = (ps: Page) => Object.assign(pageParams.value, ps)
|
||||
|
||||
/**
|
||||
* 重置表格状态 包括 dataSource loading pageParams
|
||||
*/
|
||||
const resetState = () => {
|
||||
dataSource.value = [];
|
||||
loading.value = false;
|
||||
pageParams.value = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格数据查询 与 requestGetTableData 区别是会将页面重置为1
|
||||
* 如果只做刷新数据请用 requestGetTableData
|
||||
*/
|
||||
const search = async () => {
|
||||
pageParams.value.current = 1;
|
||||
await requestGetTableData();
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 每页条数改变
|
||||
* @param _
|
||||
* @param {Number} size 页显示数量
|
||||
*/
|
||||
const handleSizeChange = async (_: number, size: number) => {
|
||||
pageParams.value.current = 1;
|
||||
pageParams.value.size = size;
|
||||
await requestGetTableData();
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 当前页改变
|
||||
* @param current 当前页
|
||||
*/
|
||||
const handleCurrentChange = async (current: number) => {
|
||||
pageParams.value.current = current;
|
||||
await requestGetTableData();
|
||||
};
|
||||
|
||||
return {
|
||||
dataSource,
|
||||
loading,
|
||||
pageParams,
|
||||
requestGetTableData,
|
||||
search,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
resetState
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import '@/reset.css'
|
|||
import './index.css'
|
||||
// 公共样式
|
||||
import '@/assets/scss/common.scss'
|
||||
import '@/assets/scss/myAntD.scss'
|
||||
// iconfont css
|
||||
import "@/assets/iconfont/iconfont.css";
|
||||
// vue Router
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ router.beforeEach(async (to, from, next) => {
|
|||
// 不在白名单内需要查看是否携带token 没有token需要返回登录页进行登录
|
||||
if (!userStore.getTokenInfo?.value) {
|
||||
await message.warn('未找到token，请重新登陆!')
|
||||
return next('/login');
|
||||
return next('/enterprise');
|
||||
}
|
||||
//放行
|
||||
return next();
|
||||
|
|
|
|||
|
|
@ -51,4 +51,9 @@ export const staticRouter: RouteRecordRaw[] = [
|
|||
name: 'test',
|
||||
component: () => import("@/views/test.vue"),
|
||||
},
|
||||
{
|
||||
path: '/enterprise',
|
||||
name: 'enterprise',
|
||||
component: () => import("@/views/enterprise.vue"),
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
import {
|
||||
FormProps,
|
||||
RangePicker,
|
||||
Input,
|
||||
InputNumber,
|
||||
Textarea,
|
||||
InputPassword,
|
||||
RadioGroup,
|
||||
Select,
|
||||
TreeSelect,
|
||||
Cascader,
|
||||
CheckboxGroup,
|
||||
DatePicker,
|
||||
FormItem, TimeRangePicker, TimePicker,
|
||||
} from "ant-design-vue";
|
||||
import {Ref, UnwrapRef, VNode} from "vue";
|
||||
import {ComponentProps} from "vue-component-type-helpers";
|
||||
|
||||
type FormProMaxItemType =
|
||||
| 'custom'
|
||||
| 'input'
|
||||
| 'inputPassword'
|
||||
| 'inputNumber'
|
||||
| 'inputTextArea'
|
||||
| 'radioGroup'
|
||||
| 'select'
|
||||
| 'selectIcon'
|
||||
| 'selectUser'
|
||||
| 'treeSelect'
|
||||
| 'cascader'
|
||||
| 'checkboxGroup'
|
||||
| 'datePicker'
|
||||
| 'rangePicker'
|
||||
| 'timeRangePicker'
|
||||
| 'timePicker';
|
||||
|
||||
interface FormProMaxItemCommonProps extends ComponentProps<typeof FormItem> {
|
||||
label?: string,
|
||||
grid?: Grid,
|
||||
placeholder?: string,
|
||||
remarkRender?: () => VNode | string,
|
||||
customRender?: () => VNode;
|
||||
options?: (SelectNodeVo<unknown> | TreeNodeVo<unknown>) [] | Ref<(SelectNodeVo<unknown> | TreeNodeVo<unknown>)[]>
|
||||
}
|
||||
|
||||
export interface FormProMaxItemProps<T extends FormProMaxItemType = any, C = any> extends FormProMaxItemCommonProps {
|
||||
type: T
|
||||
componentsProps?: C
|
||||
}
|
||||
|
||||
export type FormProMaxItemOptions<T> = {
|
||||
[key in keyof T | string]:
|
||||
FormProMaxItemProps<'custom', ComponentProps<Record<string, any>>>
|
||||
| FormProMaxItemProps<'input', ComponentProps<typeof Input>>
|
||||
| FormProMaxItemProps<'inputPassword', ComponentProps<typeof InputPassword>>
|
||||
| FormProMaxItemProps<'inputNumber', ComponentProps<typeof InputNumber>>
|
||||
| FormProMaxItemProps<'inputTextArea', ComponentProps<typeof Textarea>>
|
||||
| FormProMaxItemProps<'radioGroup', ComponentProps<typeof RadioGroup>>
|
||||
| FormProMaxItemProps<'select', ComponentProps<typeof Select>>
|
||||
| FormProMaxItemProps<'treeSelect', ComponentProps<typeof TreeSelect>>
|
||||
| FormProMaxItemProps<'cascader', ComponentProps<typeof Cascader>>
|
||||
| FormProMaxItemProps<'checkboxGroup', ComponentProps<typeof CheckboxGroup>>
|
||||
| FormProMaxItemProps<'datePicker', ComponentProps<typeof DatePicker>>
|
||||
| FormProMaxItemProps<'rangePicker', ComponentProps<typeof RangePicker>>
|
||||
| FormProMaxItemProps<'timeRangePicker', ComponentProps<typeof TimeRangePicker>>
|
||||
| FormProMaxItemProps<'timePicker', ComponentProps<typeof TimePicker>>
|
||||
}
|
||||
|
||||
export interface FormProMaxProps<T = {}> extends FormProps {
|
||||
grid?: Grid
|
||||
gutter?: number;
|
||||
formItemOptions?: FormProMaxItemOptions<T> | Ref<FormProMaxItemOptions<T>> | UnwrapRef<FormProMaxItemOptions<T>>
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import {PaginationProps, Table, TableProps} from "ant-design-vue";
|
||||
import {TableRowSelection} from "ant-design-vue/lib/table/interface";
|
||||
import {Ref, UnwrapRef} from "vue";
|
||||
import {ColumnType} from "ant-design-vue/es/table/interface";
|
||||
import {ComponentSlots} from "vue-component-type-helpers";
|
||||
import {FormProMaxItemOptions, FormProMaxProps} from "@/types/components/form";
|
||||
import {PageParams, PageResult} from "@/types/hooks/useTableProMax.ts";
|
||||
|
||||
|
||||
export type TableProMaxColumnType<T extends BaseTableRowRecord> = Omit<ColumnType<T>, 'dataIndex'> & {
|
||||
dataIndex: keyof T | string | string[] | number | number[];
|
||||
}
|
||||
|
||||
|
||||
export type TableProMaxProps<
|
||||
T extends BaseTableRowRecord = {},
|
||||
P extends { [key: string]: any } = {}
|
||||
> = Partial<Omit<TableProps<T>, "dataSource" | 'pagination' | 'loading' | 'rowKey' | 'columns'>> & {
|
||||
rowKey?: keyof T,
|
||||
columns?: TableProMaxColumnType<T>[],
|
||||
searchFormProps?: Omit<FormProMaxProps<P>, 'formItems'>
|
||||
searchFormOptions?: FormProMaxItemOptions<P> | Ref<FormProMaxItemOptions<P>> | UnwrapRef<FormProMaxItemOptions<P>>,
|
||||
defaultSearchParams?: { [key in keyof P | string]: any };
|
||||
requestAuto?: boolean,
|
||||
requestApi: RequestApiType<T, P>,
|
||||
requestError?: (errorMsg: any) => void,
|
||||
dataCallback?: (data: T[]) => T[],
|
||||
isPagination?: boolean,
|
||||
paginationProps?: TableProMaxPaginationProps,
|
||||
isSelection?: boolean,
|
||||
selectionProps?: TableProMaxRowSelect<T>,
|
||||
isPrinter?: boolean,
|
||||
needIndex?: boolean
|
||||
}
|
||||
|
||||
export type TableProMaxSlots<T> = ComponentSlots<typeof Table> & {
|
||||
tableHeader: (scope: { selectKeys: string[], selectRows: T[] }) => any,
|
||||
tableHeaderRight: (scope: { selectKeys: string[], selectRows: T[] }) => any,
|
||||
}
|
||||
|
||||
export type RequestApiType<T extends BaseTableRowRecord, P extends {
|
||||
[key: string]: any
|
||||
} = {}> = (params: P | PageParams<P>) => Promise<JsonResult<T[] | PageResult<T>>>;
|
||||
|
||||
export type TableProMaxPaginationProps = Partial<Omit<PaginationProps, "current" | "pageSize" | "total">>;
|
||||
|
||||
export type TableProMaxRowSelect<T extends BaseTableRowRecord> = TableRowSelection<T>;
|
||||
|
||||
export interface BaseTableRowRecord {
|
||||
snowFlakeId?: string;
|
||||
createUserName?: string;
|
||||
createTime?: Date | string;
|
||||
updateUserName?: string;
|
||||
updateTime?: Date | string
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* 分页对象
|
||||
*/
|
||||
export interface Page {
|
||||
current: number,
|
||||
size: number,
|
||||
total: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页参数
|
||||
*/
|
||||
export interface PageParams<T extends Record<string, any> = {}> {
|
||||
params: T & { [key: string]: any },
|
||||
page: Omit<Page, 'total'>
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页结果
|
||||
*/
|
||||
export interface PageResult<T> {
|
||||
current: string,
|
||||
records: T[],
|
||||
size: string,
|
||||
total: string
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import {BaseTableRowRecord} from "@/types/components/table";
|
||||
|
||||
export interface BgManagementPagerQueryParams extends BaseTableRowRecord{
|
||||
/** 名称 **/
|
||||
name?: string;
|
||||
/** 社会编码 **/
|
||||
socialCode?: string;
|
||||
/** 行政区划编码 **/
|
||||
administrativeDivisionCodes?: string[];
|
||||
/** 是否启用 **/
|
||||
isEnable?: number;
|
||||
/** 审核状态 **/
|
||||
checkStatus?: number;
|
||||
/** 账号 **/
|
||||
account?:string,
|
||||
sex?:BaseEnum<number>,
|
||||
telephone?:string,
|
||||
createTime?:string,
|
||||
snowFlakeId?:string,
|
||||
remark?:string,
|
||||
}
|
||||
|
||||
|
|
@ -1,11 +1,264 @@
|
|||
<template>
|
||||
<div>
|
||||
<TableProMax
|
||||
ref="tableRef"
|
||||
:request-api="reqApi"
|
||||
:columns="columns"
|
||||
:searchFormOptions="searchFormOptions"
|
||||
:scroll="{x}"
|
||||
>
|
||||
<template #tableHeader>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="addUserManagement">新增用户</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</TableProMax>
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
:title="title"
|
||||
@ok="submit"
|
||||
@cancel="closeModal"
|
||||
>
|
||||
<FormProMax ref="formRef" v-model:value="formParams" :form-item-options="formItemOptions"/>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script setup lang="tsx">
|
||||
import TableProMax from "@/components/table/TableProMax.vue";
|
||||
import {TableProMaxProps} from "@/types/components/table";
|
||||
import api from "@/axios";
|
||||
import {ref} from "vue";
|
||||
import {ComponentExposed} from "vue-component-type-helpers";
|
||||
import {dictSelectNodes} from "@/config/dict.ts";
|
||||
import {BgManagementPagerQueryParams} from "@/types/views/bgManagement.ts";
|
||||
import FormProMax from "@/components/form/FormProMax.vue";
|
||||
import {FormProMaxItemOptions} from "@/types/components/form";
|
||||
import {FormExpose} from "ant-design-vue/es/form/Form";
|
||||
import {message} from "ant-design-vue";
|
||||
import {} from '@/hooks/useTableProMax.ts'
|
||||
|
||||
|
||||
type TableProps = TableProMaxProps<BgManagementPagerQueryParams>
|
||||
|
||||
const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
|
||||
// table表格
|
||||
const reqApi: TableProps['requestApi'] = (params) => api.post('/managementSecurityUnitUser/pager', params) //分页
|
||||
const columns: TableProps['columns'] = [
|
||||
{
|
||||
dataIndex: 'account',
|
||||
title: '账号',
|
||||
width: 100,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '名称',
|
||||
width: 200,
|
||||
ellipsis: true
|
||||
}, {
|
||||
dataIndex: 'sex',
|
||||
title: '性别',
|
||||
customRender: ({text}) => <a-tag>{text?.label}</a-tag>,
|
||||
width: 150
|
||||
}, {
|
||||
dataIndex: 'telephone',
|
||||
title: '手机号码',
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
dataIndex: 'createTime',
|
||||
title: '创建时间',
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: 'snowFlakeId',
|
||||
title: '社区唯一编码',
|
||||
width: 200,
|
||||
ellipsis: true
|
||||
}, {
|
||||
dataIndex: 'remark',
|
||||
title: '备注',
|
||||
width: 200,
|
||||
ellipsis: true
|
||||
}, {
|
||||
dataIndex: 'isEnable',
|
||||
title: '是否启用',
|
||||
customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
|
||||
width: 150
|
||||
}, {
|
||||
dataIndex: 'opt',
|
||||
title: '操作',
|
||||
fixed: "right",
|
||||
customRender({record}) {
|
||||
return <a-space>
|
||||
<a-button class={record.isEnable.value === 0 ? 'btn-danger' : 'btn-success'} onClick={async () => {
|
||||
const resp = await api.post('/management/disableOrEnable', {
|
||||
unitId: record.snowFlakeId,
|
||||
unitOptType: UNIT_TYPE.security
|
||||
})
|
||||
message.success(resp.message)
|
||||
await tableRef.value?.requestGetTableData()
|
||||
}}>
|
||||
{record.isEnable.value === 0 ? '禁用' : '启用'}
|
||||
</a-button>
|
||||
|
||||
|
||||
|
||||
<a-button>
|
||||
删除
|
||||
</a-button>
|
||||
<a-button onClick={async () => {
|
||||
visible.value = true
|
||||
title.value = "编辑用户"
|
||||
formParams.value.snowFlakeId = record.snowFlakeId
|
||||
formParams.value.name = record.name,
|
||||
formParams.value.sex = record.sex.value,
|
||||
formParams.value. telephone = record.telephone,
|
||||
formParams.value.isEnable = record.isEnable?.value,
|
||||
formParams.value.remark = record.remark
|
||||
}}>
|
||||
编辑
|
||||
</a-button>
|
||||
</a-space>
|
||||
}
|
||||
},
|
||||
]
|
||||
const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
|
||||
const searchFormOptions: TableProps["searchFormOptions"] = {
|
||||
name: {
|
||||
type: 'input',
|
||||
label: '名称'
|
||||
}, sex: {
|
||||
type: 'select',
|
||||
label: '性别',
|
||||
options: [
|
||||
{
|
||||
value: null,
|
||||
label: '全部'
|
||||
}, ...dictSelectNodes('Sex')
|
||||
]
|
||||
},
|
||||
telephone: {
|
||||
type: 'input',
|
||||
label: '手机号'
|
||||
},
|
||||
isEnable: {
|
||||
type: 'select',
|
||||
label: '是否启用',
|
||||
options: [
|
||||
{
|
||||
value: null,
|
||||
label: '全部'
|
||||
}, ...dictSelectNodes('IsEnable')
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const visible = ref(false)
|
||||
const title = ref('新增用户')
|
||||
const formRef = ref<FormExpose>(null)
|
||||
const formParams = ref<{
|
||||
snowFlakeId?: string,
|
||||
name: string,
|
||||
sex: number,
|
||||
telephone: string,
|
||||
isEnable: boolean,
|
||||
remark?: string,
|
||||
}>({
|
||||
name: '',
|
||||
sex: null,
|
||||
telephone: '',
|
||||
isEnable: null,
|
||||
})
|
||||
|
||||
interface FromItem {
|
||||
snowFlakeId?: string,
|
||||
name: string,
|
||||
sex: number,
|
||||
telephone: string,
|
||||
isEnable: boolean,
|
||||
remark?: string,
|
||||
}
|
||||
|
||||
const formItemOptions = ref<FormProMaxItemOptions<FromItem>>({
|
||||
|
||||
name:{
|
||||
type:'input',
|
||||
label:'姓名',
|
||||
required:true,
|
||||
},
|
||||
sex:{
|
||||
type:'radioGroup',
|
||||
label:'性别',
|
||||
options: dictSelectNodes('Sex'),
|
||||
required:true,
|
||||
},
|
||||
telephone:{
|
||||
type:'input',
|
||||
label:'手机号',
|
||||
required:true,
|
||||
},
|
||||
isEnable:{
|
||||
type:'radioGroup',
|
||||
label:'启用状态',
|
||||
options: dictSelectNodes('IsEnable'),
|
||||
required:true,
|
||||
},
|
||||
remark:{
|
||||
type:'inputTextArea',
|
||||
label:'备注',
|
||||
}
|
||||
})
|
||||
const submit = async () => {
|
||||
await formRef.value.validate()
|
||||
const snowFlakeId = ref('')
|
||||
if(title.value === '新增用户'){
|
||||
snowFlakeId.value = ''
|
||||
}else{
|
||||
snowFlakeId.value = formParams.value.snowFlakeId
|
||||
}
|
||||
const managementSecurityUnitUserSaveOrUpdateParams = {
|
||||
snowFlakeId:snowFlakeId.value,
|
||||
name:formParams.value.name,
|
||||
sex:formParams.value.sex,
|
||||
telephone:formParams.value.telephone,
|
||||
isEnable:formParams.value.isEnable,
|
||||
remark:formParams.value.remark
|
||||
}
|
||||
const resp = await api.post('/managementSecurityUnitUser/saveOrUpdate',managementSecurityUnitUserSaveOrUpdateParams)
|
||||
message.success(resp.message)
|
||||
close()
|
||||
}
|
||||
const close = ()=>{
|
||||
tableRef.value?.requestGetTableData()
|
||||
visible.value = false
|
||||
closeModal()
|
||||
}
|
||||
const closeModal = () => {
|
||||
formParams.value = {
|
||||
name:'',
|
||||
sex:null,
|
||||
telephone:'',
|
||||
isEnable:null,
|
||||
remark:''
|
||||
}
|
||||
visible.value = false
|
||||
// formRef.value.
|
||||
console.log('取消')
|
||||
}
|
||||
//Form
|
||||
const addUserManagement = () => {
|
||||
visible.value = true
|
||||
title.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue