liukai
/
fast-iot-web
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: views

main
xingyu 2 years ago
parent
1a36a195f3
commit
3c8dbb4d0d
8 changed files with 588 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/api/system/tenantPackage/index.ts
  2. 7
      src/components/Form/src/components/ApiTree.vue
  3. 58
      src/views/system/tenant/TenantModel.vue
  4. 95
      src/views/system/tenant/index.vue
  5. 185
      src/views/system/tenant/tenant.data.ts
  6. 58
      src/views/system/tenantPackage/TenantPackageModel.vue
  7. 80
      src/views/system/tenantPackage/index.vue
  8. 104
      src/views/system/tenantPackage/tenantPackage.data.ts

8
src/api/system/tenantPackage/index.ts
Unescape View File

@ -20,7 +20,7 @@ export interface TenantPackagePageReqVO extends PageParam {
}
// 查询租户套餐列表
export const getTenantPackageTypePageApi = (params: TenantPackagePageReqVO) => {
export const getTenantPackagePageApi = (params: TenantPackagePageReqVO) => {
return defHttp.get({ url: '/system/tenant-package/page', params })
}
@ -30,17 +30,17 @@ export const getTenantPackageApi = (id: number) => {
}
// 新增租户套餐
export const createTenantPackageTypeApi = (data: TenantPackageVO) => {
export const createTenantPackageApi = (data: TenantPackageVO) => {
return defHttp.post({ url: '/system/tenant-package/create', data })
}
// 修改租户套餐
export const updateTenantPackageTypeApi = (data: TenantPackageVO) => {
export const updateTenantPackageApi = (data: TenantPackageVO) => {
return defHttp.put({ url: '/system/tenant-package/update', data })
}
// 删除租户套餐
export const deleteTenantPackageTypeApi = (id: number) => {
export const deleteTenantPackageApi = (id: number) => {
return defHttp.delete({ url: '/system/tenant-package/delete?id=' + id })
}
// 获取租户套餐精简信息列表

7
src/components/Form/src/components/ApiTree.vue
Unescape View File

@ -15,13 +15,15 @@ import { isArray, isFunction } from '@/utils/is'
import { get } from 'lodash-es'
import { propTypes } from '@/utils/propTypes'
import { LoadingOutlined } from '@ant-design/icons-vue'
import { handleTree } from '@/utils/tree'
const props = defineProps({
api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
params: { type: Object },
immediate: { type: Boolean, default: true },
resultField: propTypes.string.def(''),
afterFetch: { type: Function as PropType<Fn> }
afterFetch: { type: Function as PropType<Fn> },
handleTree: { type: String, default: '' }
})
const emit = defineEmits(['options-change', 'change'])
const attrs = useAttrs()
@ -76,6 +78,9 @@ async function fetch() {
}
loading.value = false
if (!result) return
if (props.handleTree) {
result = handleTree(result, props.handleTree)
}
if (!isArray(result)) {
result = get(result, props.resultField)
}

58
src/views/system/tenant/TenantModel.vue
Unescape View File

@ -0,0 +1,58 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup name="TenantModal">
import { ref, computed, unref } from 'vue'
import { BasicModal, useModalInner } from '@/components/Modal'
import { BasicForm, useForm } from '@/components/Form'
import { formSchema } from './tenant.data'
import { createTenantApi, getTenantApi, updateTenantApi } from '@/api/system/tenant'
const emit = defineEmits(['success', 'register'])
const isUpdate = ref(true)
const rowId = ref()
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { span: 24 },
schemas: formSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23
}
})
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields()
setModalProps({ confirmLoading: false })
isUpdate.value = !!data?.isUpdate
if (unref(isUpdate)) {
const res = await getTenantApi(data.record.id)
rowId.value = res.id
setFieldsValue({
...res
})
}
})
const getTitle = computed(() => (!unref(isUpdate) ? '新增租户' : '编辑租户'))
async function handleSubmit() {
try {
const values = await validate()
setModalProps({ confirmLoading: true })
if (unref(isUpdate)) {
await updateTenantApi(values)
} else {
await createTenantApi(values)
}
closeModal()
emit('success')
} finally {
setModalProps({ confirmLoading: false })
}
}
</script>

95
src/views/system/tenant/index.vue
Unescape View File

@ -1,3 +1,96 @@
<template>
<div>开发中</div>
<div>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增 </a-button>
<a-button type="warning" @click="handleExport"> 导出 </a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '修改',
onClick: handleEdit.bind(null, record)
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record)
}
}
]"
/>
</template>
</template>
</BasicTable>
<TenantModel @register="registerModal" @success="reload()" />
</div>
</template>
<script lang="ts" setup name="Tenant">
import { BasicTable, useTable, TableAction } from '@/components/Table'
import { TenantExportReqVO, deleteTenantApi, exportTenantApi, getTenantPageApi } from '@/api/system/tenant'
import { useModal } from '@/components/Modal'
import TenantModel from './TenantModel.vue'
import { columns, searchFormSchema } from './tenant.data'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
const { t } = useI18n()
const { createConfirm, createMessage } = useMessage()
const [registerModal, { openModal }] = useModal()
const [registerTable, { getForm, reload }] = useTable({
title: '租户列表',
api: getTenantPageApi,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema
},
useSearchForm: true,
showTableSetting: true,
showIndexColumn: false,
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
fixed: 'right'
}
})
function handleCreate() {
openModal(true, {
isUpdate: false
})
}
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true
})
}
async function handleExport() {
createConfirm({
title: '导出',
iconType: 'warning',
content: '是否要导出数据？',
async onOk() {
await exportTenantApi(getForm().getFieldsValue() as TenantExportReqVO)
createMessage.success(t('common.exportSuccessText'))
}
})
}
async function handleDelete(record: Recordable) {
await deleteTenantApi(record.id)
createMessage.success('删除成功')
reload()
}
</script>

185
src/views/system/tenant/tenant.data.ts
Unescape View File

@ -0,0 +1,185 @@
import { getTenantPackageList } from '@/api/system/tenantPackage'
import { BasicColumn, FormSchema, useRender } from '@/components/Table'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
export const columns: BasicColumn[] = [
{
title: '租户编号',
dataIndex: 'id',
width: 100
},
{
title: '租户名',
dataIndex: 'name',
width: 180
},
{
title: '租户套餐',
dataIndex: 'packageId',
width: 100
},
{
title: '联系人',
dataIndex: 'contactName',
width: 120
},
{
title: '联系手机',
dataIndex: 'contactMobile',
width: 120
},
{
title: '账号额度',
dataIndex: 'accountCount',
width: 120,
customRender: ({ text }) => {
return useRender.renderTag(text)
}
},
{
title: '过期时间',
dataIndex: 'expireTime',
width: 180,
customRender: ({ text }) => {
return useRender.renderDate(text)
}
},
{
title: '绑定域名',
dataIndex: 'domain',
width: 120
},
{
title: '租户状态',
dataIndex: 'status',
width: 180,
customRender: ({ text }) => {
return useRender.renderDict(text, DICT_TYPE.COMMON_STATUS)
}
},
{
title: '备注',
dataIndex: 'remark',
width: 180
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 180,
customRender: ({ text }) => {
return useRender.renderDate(text)
}
}
]
export const searchFormSchema: FormSchema[] = [
{
label: '租户名',
field: 'name',
component: 'Input',
colProps: { span: 8 }
},
{
label: '联系人',
field: 'contactName',
component: 'Input',
colProps: { span: 8 }
},
{
label: '联系手机',
field: 'contactMobile',
component: 'Input',
colProps: { span: 8 }
},
{
label: '状态',
field: 'status',
component: 'Select',
componentProps: {
options: getIntDictOptions(DICT_TYPE.COMMON_STATUS)
},
colProps: { span: 8 }
},
{
label: '创建时间',
field: 'createTime',
component: 'RangePicker',
colProps: { span: 8 }
}
]
export const formSchema: FormSchema[] = [
{
label: '编号',
field: 'id',
show: false,
component: 'Input'
},
{
label: '租户名',
field: 'name',
required: true,
component: 'Input'
},
{
label: '租户套餐',
field: 'packageId',
required: true,
component: 'ApiSelect',
componentProps: {
api: () => getTenantPackageList(),
labelField: 'name',
valueField: 'id'
}
},
{
label: '联系人',
field: 'contactName',
required: true,
component: 'Input'
},
{
label: '联系手机',
field: 'contactMobile',
component: 'Input'
},
{
label: '用户名称',
field: 'username',
component: 'Input',
dynamicDisabled: ({ values }) => values.id !== undefined
},
{
label: '用户密码',
field: 'password',
component: 'InputPassword',
ifShow: ({ values }) => values.id === undefined
},
{
label: '账号额度',
field: 'accountCount',
required: true,
component: 'InputNumber'
},
{
label: '过期时间',
field: 'expireTime',
required: true,
component: 'TimePicker'
},
{
label: '绑定域名',
field: 'domain',
required: true,
component: 'Input'
},
{
label: '租户状态',
field: 'status',
component: 'Select',
defaultValue: 0,
componentProps: {
options: getIntDictOptions(DICT_TYPE.COMMON_STATUS)
}
}
]

58
src/views/system/tenantPackage/TenantPackageModel.vue
Unescape View File

@ -0,0 +1,58 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup name="TenantPackageModel">
import { ref, computed, unref } from 'vue'
import { BasicModal, useModalInner } from '@/components/Modal'
import { BasicForm, useForm } from '@/components/Form'
import { formSchema } from './tenantPackage.data'
import { createTenantPackageApi, getTenantPackageApi, updateTenantPackageApi } from '@/api/system/tenantPackage'
const emit = defineEmits(['success', 'register'])
const isUpdate = ref(true)
const rowId = ref()
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { span: 24 },
schemas: formSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23
}
})
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields()
setModalProps({ confirmLoading: false })
isUpdate.value = !!data?.isUpdate
if (unref(isUpdate)) {
const res = await getTenantPackageApi(data.record.id)
rowId.value = res.id
setFieldsValue({
...res
})
}
})
const getTitle = computed(() => (!unref(isUpdate) ? '新增租户套餐' : '编辑租户套餐'))
async function handleSubmit() {
try {
const values = await validate()
setModalProps({ confirmLoading: true })
if (unref(isUpdate)) {
await updateTenantPackageApi(values)
} else {
await createTenantPackageApi(values)
}
closeModal()
emit('success')
} finally {
setModalProps({ confirmLoading: false })
}
}
</script>

80
src/views/system/tenantPackage/index.vue
Unescape View File

@ -1,3 +1,81 @@
<template>
<div>开发中</div>
<div>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增 </a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
label: '修改',
onClick: handleEdit.bind(null, record)
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
label: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record)
}
}
]"
/>
</template>
</template>
</BasicTable>
<TenantPackageModel @register="registerModal" @success="reload()" />
</div>
</template>
<script lang="ts" setup name="TenantPackage">
import { BasicTable, useTable, TableAction } from '@/components/Table'
import { deleteTenantPackageApi, getTenantPackagePageApi } from '@/api/system/tenantPackage'
import { useModal } from '@/components/Modal'
import TenantPackageModel from './TenantPackageModel.vue'
import { columns, searchFormSchema } from './tenantPackage.data'
import { useMessage } from '@/hooks/web/useMessage'
const { createMessage } = useMessage()
const [registerModal, { openModal }] = useModal()
const [registerTable, { reload }] = useTable({
title: '租户套餐列表',
api: getTenantPackagePageApi,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema
},
useSearchForm: true,
showTableSetting: true,
showIndexColumn: false,
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
fixed: 'right'
}
})
function handleCreate() {
openModal(true, {
isUpdate: false
})
}
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true
})
}
async function handleDelete(record: Recordable) {
await deleteTenantPackageApi(record.id)
createMessage.success('删除成功')
reload()
}
</script>

104
src/views/system/tenantPackage/tenantPackage.data.ts
Unescape View File

@ -0,0 +1,104 @@
import { listSimpleMenusApi } from '@/api/system/menu'
import { BasicColumn, FormSchema, useRender } from '@/components/Table'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
export const columns: BasicColumn[] = [
{
title: '套餐编号',
dataIndex: 'id',
width: 100
},
{
title: '套餐名',
dataIndex: 'name',
width: 180
},
{
title: '状态',
dataIndex: 'status',
width: 180,
customRender: ({ text }) => {
return useRender.renderDict(text, DICT_TYPE.COMMON_STATUS)
}
},
{
title: '备注',
dataIndex: 'remark',
width: 180
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 180,
customRender: ({ text }) => {
return useRender.renderDate(text)
}
}
]
export const searchFormSchema: FormSchema[] = [
{
label: '套餐名',
field: 'name',
component: 'Input',
colProps: { span: 8 }
},
{
label: '状态',
field: 'status',
component: 'Select',
componentProps: {
options: getIntDictOptions(DICT_TYPE.COMMON_STATUS)
},
colProps: { span: 8 }
},
{
label: '创建时间',
field: 'createTime',
component: 'RangePicker',
colProps: { span: 8 }
}
]
export const formSchema: FormSchema[] = [
{
label: '编号',
field: 'id',
show: false,
component: 'Input'
},
{
label: '套餐名',
field: 'name',
required: true,
component: 'Input'
},
{
label: '菜单权限',
field: 'packageId',
required: true,
component: 'ApiTree',
// TODO
componentProps: {
api: () => listSimpleMenusApi(),
fieldNames: {
title: 'name',
key: 'id',
children: 'children'
},
handleTree: 'id',
checkable: true,
multiple: true,
checkedKeys: []
}
},
{
label: '状态',
field: 'status',
component: 'Select',
defaultValue: 0,
componentProps: {
options: getIntDictOptions(DICT_TYPE.COMMON_STATUS)
}
}
]