测试图标
This commit is contained in:
parent
2fc5a867fb
commit
41e4464224
|
@ -3,16 +3,11 @@
|
|||
<!-- 小程序用户 -->
|
||||
<TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions"
|
||||
:scroll="{ x }">
|
||||
|
||||
</TableProMax>
|
||||
<a-modal v-model:open="visible" :title="title" @ok="submit" @cancel="closeModal">
|
||||
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import {storeTreeData, loadTreeFromCache} from '@/utils/DB.ts'
|
||||
import api from '@/axios'
|
||||
import {ref, reactive} from 'vue'
|
||||
import TableProMax from '@/components/table/TableProMax.vue'
|
||||
|
@ -20,9 +15,7 @@ import {TableProMaxProps} from '@/types/components/table/index.ts'
|
|||
import {ComponentExposed} from 'vue-component-type-helpers'
|
||||
import {dictSelectNodes} from '@/config/dict.ts'
|
||||
import {publicUnitPagerQueryParams, FromItem} from '@/types/views/publicUnit.ts'
|
||||
import {FormProMaxItemOptions} from '@/types/components/form//index.ts'
|
||||
import {FormExpose} from 'ant-design-vue/es/form/Form'
|
||||
import {message} from 'ant-design-vue'
|
||||
|
||||
const formRef = ref<FormExpose>(null)
|
||||
type TableProps = TableProMaxProps<publicUnitPagerQueryParams>
|
||||
|
@ -32,161 +25,87 @@ const reqApi: TableProps['requestApi'] = (params) => api.post('/management/miniP
|
|||
const columns: TableProps['columns'] = [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '单位名称',
|
||||
},
|
||||
// {
|
||||
// dataIndex: 'code',
|
||||
// title: '单位代码',
|
||||
// },
|
||||
{
|
||||
dataIndex: 'provinceName',
|
||||
title: '行政区划',
|
||||
customRender: ({record}) => {
|
||||
return `${record?.provinceName}/${record?.cityName}/${record?.districtsName}/${record?.streetName}`
|
||||
},
|
||||
},
|
||||
|
||||
// {
|
||||
// dataIndex: 'isEnable',
|
||||
// title: '是否启用',
|
||||
// customRender: ({ text }) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
|
||||
// width: 150,
|
||||
// },
|
||||
// {
|
||||
// dataIndex: 'checkStatus',
|
||||
// title: '是否审核',
|
||||
// customRender: ({ record }) => {
|
||||
// return record.checkStatus?.extData?.color === 'success' ? <a-tag color='green'>{record?.checkStatus?.label}</a-tag> : <a-tag color='#f50'>{record?.checkStatus?.label}</a-tag>
|
||||
// },
|
||||
// },
|
||||
{
|
||||
dataIndex: 'address',
|
||||
title: '详细地址',
|
||||
title: '用户名',
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'contactPersonInfo',
|
||||
title: '联系人姓名',
|
||||
dataIndex: 'isEnable',
|
||||
title: '是否启用',
|
||||
customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
|
||||
|
||||
},
|
||||
{
|
||||
dataIndex: 'checkStatus',
|
||||
title: '是否审核',
|
||||
customRender: ({record}) => {
|
||||
return record?.contactPersonInfo?.name
|
||||
return record.checkStatus?.extData?.color === 'success' ?
|
||||
<a-tag color='green'>{record?.checkStatus?.label}</a-tag> :
|
||||
<a-tag color='#f50'>{record?.checkStatus?.label}</a-tag>
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'identity',
|
||||
title: '身份',
|
||||
customRender: ({record}) => {
|
||||
return record?.identity?.label
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: 'contactPersonInfo',
|
||||
title: '联系人手机号',
|
||||
customRender: ({record}) => {
|
||||
return record?.contactPersonInfo?.telephone
|
||||
},
|
||||
dataIndex: 'telephone',
|
||||
title: '手机号',
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'createTime',
|
||||
title: '创建时间',
|
||||
},
|
||||
{
|
||||
dataIndex: 'remark',
|
||||
title: '备注',
|
||||
},
|
||||
|
||||
]
|
||||
const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
|
||||
const visible = ref(false)
|
||||
const title = ref('新增用户')
|
||||
const addUserManagement = () => {
|
||||
visible.value = true
|
||||
title.value = ''
|
||||
}
|
||||
|
||||
const getTree = async () => {
|
||||
// 先尝试从缓存中加载数据
|
||||
const cachedData = await loadTreeFromCache()
|
||||
if (cachedData) {
|
||||
console.log('未发请求')
|
||||
// 如果缓存存在,直接使用缓存数据
|
||||
return cachedData
|
||||
} else {
|
||||
console.log('发起了请求')
|
||||
// 如果缓存不存在,发起 API 请求
|
||||
const res = await api.get<any>('/common/administrativeDivisionTree')
|
||||
await storeTreeData(res.data)
|
||||
return res.data
|
||||
}
|
||||
}
|
||||
const loadOptions = async () => {
|
||||
const treeData = await getTree()
|
||||
searchFormOptions.treeSelect.options = treeData
|
||||
}
|
||||
loadOptions()
|
||||
const searchFormOptions = reactive<TableProps['searchFormOptions']>({
|
||||
name: {
|
||||
type: 'input',
|
||||
label: '名称',
|
||||
},
|
||||
treeSelect: {
|
||||
type: 'cascader',
|
||||
label: '行政区划',
|
||||
label: '用户名',
|
||||
},
|
||||
|
||||
telephone: {
|
||||
type: 'input',
|
||||
label: '手机号',
|
||||
},
|
||||
// isEnable: {
|
||||
isEnable: {
|
||||
type: 'select',
|
||||
label: '是否启用',
|
||||
options: [
|
||||
{
|
||||
value: null,
|
||||
label: '全部',
|
||||
},
|
||||
...dictSelectNodes('IsEnable'),
|
||||
],
|
||||
},
|
||||
CheckStatus: {
|
||||
type: 'select',
|
||||
label: '是否审核',
|
||||
options: [
|
||||
{
|
||||
value: null,
|
||||
label: '全部',
|
||||
},
|
||||
...dictSelectNodes('CheckStatus'),
|
||||
],
|
||||
},
|
||||
// MiniProgramUserIdentity: {
|
||||
// type: 'select',
|
||||
// label: '是否启用',
|
||||
// label: '身份选择',
|
||||
// options: [
|
||||
// {
|
||||
// value: null,
|
||||
// label: '全部',
|
||||
// },
|
||||
// ...dictSelectNodes('IsEnable'),
|
||||
// ...dictSelectNodes('MiniProgramUserIdentity'),
|
||||
// ],
|
||||
// },
|
||||
})
|
||||
|
||||
const formParams = ref<{
|
||||
snowFlakeId?: string
|
||||
name: string
|
||||
sex: number
|
||||
telephone: string
|
||||
isEnable: any
|
||||
remark?: string
|
||||
}>({
|
||||
name: '',
|
||||
sex: 0,
|
||||
telephone: '',
|
||||
isEnable: 0,
|
||||
})
|
||||
|
||||
const submit = async () => {
|
||||
// await formRef.value.validate()
|
||||
}
|
||||
const closeModal = () => {
|
||||
visible.value = false
|
||||
}
|
||||
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: '备注',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
|
@ -6,13 +6,18 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onMounted} from "vue";
|
||||
|
||||
|
||||
import {IconFontProps} from "@/types/components/iconfont/IconFont";
|
||||
|
||||
withDefaults(defineProps<IconFontProps>(), {
|
||||
const props = withDefaults(defineProps<IconFontProps>(), {
|
||||
size: 25,
|
||||
type: "svg"
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
console.log(props.fontClass, props.type);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
@ -18,7 +18,8 @@
|
|||
@click="router.push(item.path)"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-font :font-class="item.icon"/>
|
||||
<icon-font :font-class="item.icon" :size="item.size"/>
|
||||
<!-- <icon-font font-class="icon-guanlianbaoan" type="class" size="10"/>-->
|
||||
</template>
|
||||
<span class="margin-left-xs">{{ item.title }}</span>
|
||||
</a-menu-item>
|
||||
|
|
|
@ -14,6 +14,7 @@ import {computed} from "vue";
|
|||
import {useRoute} from "vue-router";
|
||||
import {SYSTEM_MENUS} from "@/config";
|
||||
import MenuItem from "@/components/layout/MenuItem.vue";
|
||||
import IconFont from "@/components/iconfont/IconFont.vue";
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
|
|
|
@ -25,6 +25,8 @@ export const SYSTEM_MENUS: SystemMenu[] = [
|
|||
name: 'policeUnit',
|
||||
path: '/policeUnit',
|
||||
type: 'menu',
|
||||
// icon: 'icon-policeman-full',
|
||||
// size: '16',
|
||||
component: () => import('@/views/unitManage/policeUnit/index.vue')
|
||||
}, {
|
||||
title: '保安单位',
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export interface IconFontProps {
|
||||
fontClass?: string,
|
||||
size?: number,
|
||||
size?: number | string,
|
||||
type?: 'class' | 'svg'
|
||||
}
|
Loading…
Reference in New Issue