测试图标
This commit is contained in:
parent
2fc5a867fb
commit
41e4464224
|
@ -3,16 +3,11 @@
|
||||||
<!-- 小程序用户 -->
|
<!-- 小程序用户 -->
|
||||||
<TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions"
|
<TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions"
|
||||||
:scroll="{ x }">
|
:scroll="{ x }">
|
||||||
|
|
||||||
</TableProMax>
|
</TableProMax>
|
||||||
<a-modal v-model:open="visible" :title="title" @ok="submit" @cancel="closeModal">
|
|
||||||
|
|
||||||
</a-modal>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="tsx">
|
<script setup lang="tsx">
|
||||||
import {storeTreeData, loadTreeFromCache} from '@/utils/DB.ts'
|
|
||||||
import api from '@/axios'
|
import api from '@/axios'
|
||||||
import {ref, reactive} from 'vue'
|
import {ref, reactive} from 'vue'
|
||||||
import TableProMax from '@/components/table/TableProMax.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 {ComponentExposed} from 'vue-component-type-helpers'
|
||||||
import {dictSelectNodes} from '@/config/dict.ts'
|
import {dictSelectNodes} from '@/config/dict.ts'
|
||||||
import {publicUnitPagerQueryParams, FromItem} from '@/types/views/publicUnit.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 {FormExpose} from 'ant-design-vue/es/form/Form'
|
||||||
import {message} from 'ant-design-vue'
|
|
||||||
|
|
||||||
const formRef = ref<FormExpose>(null)
|
const formRef = ref<FormExpose>(null)
|
||||||
type TableProps = TableProMaxProps<publicUnitPagerQueryParams>
|
type TableProps = TableProMaxProps<publicUnitPagerQueryParams>
|
||||||
|
@ -32,161 +25,87 @@ const reqApi: TableProps['requestApi'] = (params) => api.post('/management/miniP
|
||||||
const columns: TableProps['columns'] = [
|
const columns: TableProps['columns'] = [
|
||||||
{
|
{
|
||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
title: '单位名称',
|
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: '详细地址',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
dataIndex: 'contactPersonInfo',
|
dataIndex: 'isEnable',
|
||||||
title: '联系人姓名',
|
title: '是否启用',
|
||||||
|
customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'checkStatus',
|
||||||
|
title: '是否审核',
|
||||||
customRender: ({record}) => {
|
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',
|
dataIndex: 'telephone',
|
||||||
title: '联系人手机号',
|
title: '手机号',
|
||||||
customRender: ({record}) => {
|
|
||||||
return record?.contactPersonInfo?.telephone
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
dataIndex: 'createTime',
|
dataIndex: 'createTime',
|
||||||
title: '创建时间',
|
title: '创建时间',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
dataIndex: 'remark',
|
|
||||||
title: '备注',
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
|
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']>({
|
const searchFormOptions = reactive<TableProps['searchFormOptions']>({
|
||||||
name: {
|
name: {
|
||||||
type: 'input',
|
type: 'input',
|
||||||
label: '名称',
|
label: '用户名',
|
||||||
},
|
|
||||||
treeSelect: {
|
|
||||||
type: 'cascader',
|
|
||||||
label: '行政区划',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
telephone: {
|
telephone: {
|
||||||
type: 'input',
|
type: 'input',
|
||||||
label: '手机号',
|
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',
|
// type: 'select',
|
||||||
// label: '是否启用',
|
// label: '身份选择',
|
||||||
// options: [
|
// options: [
|
||||||
// {
|
// {
|
||||||
// value: null,
|
// value: null,
|
||||||
// label: '全部',
|
// 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>
|
</script>
|
||||||
|
|
|
@ -6,13 +6,18 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import {onMounted} from "vue";
|
||||||
|
|
||||||
|
|
||||||
import {IconFontProps} from "@/types/components/iconfont/IconFont";
|
import {IconFontProps} from "@/types/components/iconfont/IconFont";
|
||||||
|
|
||||||
withDefaults(defineProps<IconFontProps>(), {
|
const props = withDefaults(defineProps<IconFontProps>(), {
|
||||||
size: 25,
|
size: 25,
|
||||||
type: "svg"
|
type: "svg"
|
||||||
});
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
console.log(props.fontClass, props.type);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
@click="router.push(item.path)"
|
@click="router.push(item.path)"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<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>
|
</template>
|
||||||
<span class="margin-left-xs">{{ item.title }}</span>
|
<span class="margin-left-xs">{{ item.title }}</span>
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
|
|
|
@ -14,6 +14,7 @@ import {computed} from "vue";
|
||||||
import {useRoute} from "vue-router";
|
import {useRoute} from "vue-router";
|
||||||
import {SYSTEM_MENUS} from "@/config";
|
import {SYSTEM_MENUS} from "@/config";
|
||||||
import MenuItem from "@/components/layout/MenuItem.vue";
|
import MenuItem from "@/components/layout/MenuItem.vue";
|
||||||
|
import IconFont from "@/components/iconfont/IconFont.vue";
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
|
|
|
@ -25,6 +25,8 @@ export const SYSTEM_MENUS: SystemMenu[] = [
|
||||||
name: 'policeUnit',
|
name: 'policeUnit',
|
||||||
path: '/policeUnit',
|
path: '/policeUnit',
|
||||||
type: 'menu',
|
type: 'menu',
|
||||||
|
// icon: 'icon-policeman-full',
|
||||||
|
// size: '16',
|
||||||
component: () => import('@/views/unitManage/policeUnit/index.vue')
|
component: () => import('@/views/unitManage/policeUnit/index.vue')
|
||||||
}, {
|
}, {
|
||||||
title: '保安单位',
|
title: '保安单位',
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
export interface IconFontProps {
|
export interface IconFontProps {
|
||||||
fontClass?: string,
|
fontClass?: string,
|
||||||
size?: number,
|
size?: number | string,
|
||||||
type?: 'class' | 'svg'
|
type?: 'class' | 'svg'
|
||||||
}
|
}
|
Loading…
Reference in New Issue