gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【优化】优化一些移动端相关的代码

pull/85/head
小诺 2023-02-06 22:56:12 +08:00 committed by 俞宝山
parent 4926efe662
commit 3aee08136b
6 changed files with 246 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
snowy-admin-web/src/assets/icons/mobile/index.js
View File

@ -29,8 +29,8 @@ export default {
name: '实底风格', name: '实底风格',
key: 'filled', key: 'filled',
item: filledJsonData.glyphs item: filledJsonData.glyphs
}, }
] ]
}, }
] ]
} }

22
snowy-admin-web/src/views/mobile/resource/button/form.vue
View File

@ -55,19 +55,17 @@
} }
// 验证并提交数据 // 验证并提交数据
const onSubmit = () => { const onSubmit = () => {
formRef.value formRef.value.validate().then(() => {
.validate() const defParam = {
.then(() => { category: 'BUTTON',
const defParam = { parentId: recordData.value.id
category: 'BUTTON', }
parentId: recordData.value.id const param = Object.assign(defParam, formData.value)
} buttonApi.mobileButtonSubmitForm(param, !formData.value.id).then(() => {
const param = Object.assign(defParam, formData.value) onClose()
buttonApi.mobileButtonSubmitForm(param, !formData.value.id).then(() => { emit('successful')
onClose()
emit('successful')
})
}) })
})
} }
// 调用这个函数将子组件的一些数据和方法暴露出去 // 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({ defineExpose({

38
snowy-admin-web/src/views/mobile/resource/menu/changeModuleForm.vue
View File

@ -10,21 +10,16 @@
> >
<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical"> <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
<a-form-item label="显示名称：" name="title"> <a-form-item label="显示名称：" name="title">
<span>{{formData.title}}</span> <span>{{ formData.title }}</span>
</a-form-item> </a-form-item>
<a-form-item label="所属目录：" name="module" v-if="formData.parentId === '0'" > <a-form-item label="所属目录：" name="module" v-if="formData.parentId === '0'">
<a-radio-group v-model:value="formData.module" button-style="solid"> <a-radio-group v-model:value="formData.module" button-style="solid">
<a-radio-button <a-radio-button v-for="module in moduleTypeList" :key="module.id" :value="module.id">
v-for="module in moduleTypeList"
:key="module.id"
:value="module.id"
>
<component :is="module.icon" /> <component :is="module.icon" />
{{ module.title }}</a-radio-button {{ module.title }}</a-radio-button
> >
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
</a-form> </a-form>
<template #footer> <template #footer>
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button> <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
@ -35,9 +30,7 @@
<script setup> <script setup>
import { required } from '@/utils/formRules' import { required } from '@/utils/formRules'
import tool from '@/utils/tool'
import mobileMenuApi from '@/api/mobile/resource/menuApi' import mobileMenuApi from '@/api/mobile/resource/menuApi'
import { getCurrentInstance } from 'vue'
// 默认是关闭状态 // 默认是关闭状态
let visible = $ref(false) let visible = $ref(false)
const emit = defineEmits({ successful: null }) const emit = defineEmits({ successful: null })
@ -64,26 +57,27 @@
} }
// 默认要校验的 // 默认要校验的
const formRules = { const formRules = {
module: [required('请选择所属目录')], module: [required('请选择所属目录')]
} }
// 验证并提交数据 // 验证并提交数据
const onSubmit = () => { const onSubmit = () => {
formRef.value formRef.value.validate().then(() => {
.validate() const param = {
.then(() => { id: formData.value.id,
const param = { module: formData.value.module
id: formData.value.id, }
module: formData.value.module submitLoading.value = true
} mobileMenuApi
submitLoading.value = true .mobileMenuChangeModule(param)
mobileMenuApi.mobileMenuChangeModule(param).then(() => { .then(() => {
submitLoading.value = false submitLoading.value = false
emit('successful') emit('successful')
}).finally(() => { })
.finally(() => {
visible = false visible = false
}) })
}) })
} }
// 调用这个函数将子组件的一些数据和方法暴露出去 // 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({ defineExpose({

156
snowy-admin-web/src/views/mobile/resource/menu/form.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<a-drawer <a-drawer
:title="formData.id ? '编辑移动端菜单' : '增加移动端菜单'" :title="formData.id ? '编辑移动端菜单' : '增加移动端菜单'"
:width="600" :width="600"
:visible="visible" :visible="visible"
:destroy-on-close="true" :destroy-on-close="true"
:footer-style="{ textAlign: 'right' }" :footer-style="{ textAlign: 'right' }"
@close="onClose" @close="onClose"
> >
<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical"> <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
<a-form-item label="上级菜单：" name="parentId"> <a-form-item label="上级菜单：" name="parentId">
<a-tree-select <a-tree-select
v-model:value="formData.parentId" v-model:value="formData.parentId"
@ -19,10 +19,10 @@
tree-default-expand-all tree-default-expand-all
:tree-data="treeData" :tree-data="treeData"
:field-names="{ :field-names="{
children: 'children', children: 'children',
label: 'title', label: 'title',
value: 'id' value: 'id'
}" }"
selectable="false" selectable="false"
tree-line tree-line
@change="parentChange(formData.parentId)" @change="parentChange(formData.parentId)"
@ -43,9 +43,7 @@
<a-form-item v-if="formData.menuType !== 'CATALOG'" name="path"> <a-form-item v-if="formData.menuType !== 'CATALOG'" name="path">
<template #label> <template #label>
<a-tooltip> <a-tooltip>
<template #title> <template #title> 类型为内外链条时，输入https开头的链接即可（例：https://xiaonuo.vip） </template>
类型为内外链条时，输入https开头的链接即可（例：https://xiaonuo.vip）
</template>
<question-circle-outlined /> <question-circle-outlined />
</a-tooltip> </a-tooltip>
&nbsp {{ formData.menuType === 'MENU' || formData.menuType === 'CATALOG' ? '界面地址' : 'https链接地址' }}： &nbsp {{ formData.menuType === 'MENU' || formData.menuType === 'CATALOG' ? '界面地址' : 'https链接地址' }}：
@ -68,38 +66,38 @@
<a-form-item label="排序码：" name="sortCode"> <a-form-item label="排序码：" name="sortCode">
<a-slider v-model:value="formData.sortCode" :max="1000" style="width: 100%" /> <a-slider v-model:value="formData.sortCode" :max="1000" style="width: 100%" />
</a-form-item> </a-form-item>
</a-form> </a-form>
<template #footer> <template #footer>
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button> <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button> <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
</template> </template>
<icon-mobile-selector ref="iconSelector" @iconCallBack="iconCallBack" /> <icon-mobile-selector ref="iconSelector" @iconCallBack="iconCallBack" />
</a-drawer> </a-drawer>
</template> </template>
<script setup name="mobileMenuForm"> <script setup name="mobileMenuForm">
import tool from '@/utils/tool' import tool from '@/utils/tool'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import SnowflakeId from 'snowflake-id' import SnowflakeId from 'snowflake-id'
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules' import { required } from '@/utils/formRules'
import mobileMenuApi from '@/api/mobile/resource/menuApi' import mobileMenuApi from '@/api/mobile/resource/menuApi'
import ColorPicker from '@/components/ColorPicker/index.vue' import ColorPicker from '@/components/ColorPicker/index.vue'
import IconMobileSelector from '@/components/Selector/iconMobileSelector.vue' import IconMobileSelector from '@/components/Selector/iconMobileSelector.vue'
// 抽屉状态 // 抽屉状态
const visible = ref(false) const visible = ref(false)
const emit = defineEmits({ successful: null }) const emit = defineEmits({ successful: null })
const formRef = ref() const formRef = ref()
let iconSelector = ref() let iconSelector = ref()
// 默认展开的节点(顶级) // 默认展开的节点(顶级)
const defaultExpandedKeys = ref([0]) const defaultExpandedKeys = ref([0])
const treeData = ref([]) const treeData = ref([])
const formData = ref({}) const formData = ref({})
// 类别 // 类别
const moduleId = ref('') const moduleId = ref('')
const submitLoading = ref(false) const submitLoading = ref(false)
const regTypeOptions = ref([]) const regTypeOptions = ref([])
const statusOptions = ref([]) const statusOptions = ref([])
const menuTypeOptions = [ const menuTypeOptions = [
{ {
label: '目录', label: '目录',
@ -119,14 +117,14 @@
} }
] ]
// 打开抽屉 // 打开抽屉
const onOpen = (record, module) => { const onOpen = (record, module) => {
if (!module) { if (!module) {
message.warning('请先添加菜单所属模块') message.warning('请先添加菜单所属模块')
return return
} }
moduleId.value = module moduleId.value = module
visible.value = true visible.value = true
// 设置默认的 // 设置默认的
formData.value = { formData.value = {
regType: 'YES', regType: 'YES',
@ -134,10 +132,10 @@
category: 'MENU', category: 'MENU',
menuType: 'MENU' menuType: 'MENU'
} }
if (record) { if (record) {
let recordData = cloneDeep(record) let recordData = cloneDeep(record)
formData.value = Object.assign({}, recordData) formData.value = Object.assign({}, recordData)
} }
// 获取菜单树并加入顶级 // 获取菜单树并加入顶级
const treeParam = { const treeParam = {
module: module module: module
@ -153,14 +151,14 @@
] ]
}) })
regTypeOptions.value = tool.dictList('MOBILE_REG_TYPE') regTypeOptions.value = tool.dictList('MOBILE_REG_TYPE')
statusOptions.value = tool.dictList('MOBILE_STATUS') statusOptions.value = tool.dictList('MOBILE_STATUS')
} }
// 关闭抽屉 // 关闭抽屉
const onClose = () => { const onClose = () => {
formRef.value.resetFields() formRef.value.resetFields()
formData.value = {} formData.value = {}
visible.value = false visible.value = false
} }
// 选择上级加载模块的选择框 // 选择上级加载模块的选择框
const parentChange = (value) => { const parentChange = (value) => {
if (value > 0) { if (value > 0) {
@ -179,34 +177,32 @@
const iconCallBack = (value) => { const iconCallBack = (value) => {
formData.value.icon = value formData.value.icon = value
} }
// 默认要校验的 // 默认要校验的
const formRules = { const formRules = {
parentId: [required('请选择上级')], parentId: [required('请选择上级')],
title: [required('请输入名称')], title: [required('请输入名称')],
path: [required('请输入界面路径')], path: [required('请输入界面路径')],
icon: [required('请选择图标')], icon: [required('请选择图标')],
color: [required('请选择颜色')], color: [required('请选择颜色')],
regType: [required('请选择规则类型')], regType: [required('请选择规则类型')],
status: [required('请选择可用状态')] status: [required('请选择可用状态')]
} }
// 验证并提交数据 // 验证并提交数据
const onSubmit = () => { const onSubmit = () => {
formRef.value formRef.value.validate().then(() => {
.validate() submitLoading.value = true
.then(() => { const formDataParam = parameterChanges(cloneDeep(formData.value))
submitLoading.value = true mobileMenuApi
const formDataParam = parameterChanges(cloneDeep(formData.value)) .mobileMenuSubmitForm(formDataParam, !formDataParam.id)
mobileMenuApi .then(() => {
.mobileMenuSubmitForm(formDataParam, !formDataParam.id) onClose()
.then(() => { emit('successful')
onClose() })
emit('successful') .finally(() => {
}) submitLoading.value = false
.finally(() => { })
submitLoading.value = false })
}) }
})
}
// 提交之前转换数据 // 提交之前转换数据
const parameterChanges = (data) => { const parameterChanges = (data) => {
data.module = moduleId.value data.module = moduleId.value
@ -218,8 +214,8 @@
} }
return data return data
} }
// 抛出函数 // 抛出函数
defineExpose({ defineExpose({
onOpen onOpen
}) })
</script> </script>

274
snowy-admin-web/src/views/mobile/resource/menu/index.vue
View File

@ -2,71 +2,71 @@
<a-card :bordered="false" :body-style="{ 'padding-bottom': '0px' }" class="mb-2"> <a-card :bordered="false" :body-style="{ 'padding-bottom': '0px' }" class="mb-2">
<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form"> <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
<a-space style="align-items: normal"> <a-space style="align-items: normal">
<a-radio-group v-model:value="module" button-style="solid"> <a-radio-group v-model:value="module" button-style="solid">
<a-radio-button <a-radio-button
v-for="module in moduleList" v-for="module in moduleList"
:key="module.id" :key="module.id"
:value="module.id" :value="module.id"
@click="moduleClock(module.id)" @click="moduleClock(module.id)"
> >
<component :is="module.icon" /> <component :is="module.icon" />
{{ module.title }}</a-radio-button {{ module.title }}</a-radio-button
> >
</a-radio-group> </a-radio-group>
<a-form-item name="searchKey"> <a-form-item name="searchKey">
<a-space> <a-space>
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入模块名称关键词"></a-input> <a-input v-model:value="searchFormState.searchKey" placeholder="请输入模块名称关键词"></a-input>
<a-button type="primary" @click="table.refresh(true)">查询</a-button> <a-button type="primary" @click="table.refresh(true)">查询</a-button>
<a-button style="margin: 0 8px" @click="() => searchFormRef.resetFields()">重置</a-button> <a-button style="margin: 0 8px" @click="() => searchFormRef.resetFields()">重置</a-button>
</a-space> </a-space>
</a-form-item> </a-form-item>
</a-space> </a-space>
</a-form> </a-form>
</a-card> </a-card>
<a-card :bordered="false"> <a-card :bordered="false">
<s-table <s-table
ref="table" ref="table"
:columns="columns" :columns="columns"
:data="loadData" :data="loadData"
:alert="options.alert.show" :alert="options.alert.show"
bordered bordered
:row-key="(record) => record.id" :row-key="(record) => record.id"
:tool-config="toolConfig" :tool-config="toolConfig"
:show-pagination="false" :show-pagination="false"
:row-selection="options.rowSelection" :row-selection="options.rowSelection"
> >
<template #operator class="table-operator"> <template #operator class="table-operator">
<a-space> <a-space>
<a-button type="primary" @click="formRef.onOpen(undefined, module)"> <a-button type="primary" @click="formRef.onOpen(undefined, module)">
<template #icon><plus-outlined /></template> <template #icon><plus-outlined /></template>
新增 新增
</a-button> </a-button>
<a-button danger @click="deleteBatchMobileMenu()">删除</a-button> <a-button danger @click="deleteBatchMobileMenu()">删除</a-button>
</a-space> </a-space>
</template> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'path'"> <template v-if="column.dataIndex === 'path'">
<span v-if="record.menuType === 'CATALOG'">-</span> <span v-if="record.menuType === 'CATALOG'">-</span>
<span v-else>{{record.path}}</span> <span v-else>{{ record.path }}</span>
</template> </template>
<template v-if="column.dataIndex === 'icon'"> <template v-if="column.dataIndex === 'icon'">
<a-tag :color="record.color"> <a-tag :color="record.color">
<span class="snowy xn-icons" :class="record.icon" ></span> <span class="snowy xn-icons" :class="record.icon"></span>
</a-tag> </a-tag>
</template> </template>
<template v-if="column.dataIndex === 'regType'"> <template v-if="column.dataIndex === 'regType'">
{{ $TOOL.dictTypeData('MOBILE_REG_TYPE', record.regType) }} {{ $TOOL.dictTypeData('MOBILE_REG_TYPE', record.regType) }}
</template> </template>
<template v-if="column.dataIndex === 'status'"> <template v-if="column.dataIndex === 'status'">
{{ $TOOL.dictTypeData('MOBILE_STATUS', record.status) }} {{ $TOOL.dictTypeData('MOBILE_STATUS', record.status) }}
</template> </template>
<template v-if="column.dataIndex === 'action'"> <template v-if="column.dataIndex === 'action'">
<a-space> <a-space>
<a @click="formRef.onOpen(record, module)">编辑</a> <a @click="formRef.onOpen(record, module)">编辑</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<a-popconfirm title="确定要删除吗？" @confirm="deleteMobileMenu(record)"> <a-popconfirm title="确定要删除吗？" @confirm="deleteMobileMenu(record)">
<a-button type="link" danger size="small">删除</a-button> <a-button type="link" danger size="small">删除</a-button>
</a-popconfirm> </a-popconfirm>
<div v-if="record.parentId === '0' || record.menuType === 'MENU'"> <div v-if="record.parentId === '0' || record.menuType === 'MENU'">
<a-divider type="vertical" /> <a-divider type="vertical" />
<a-dropdown> <a-dropdown>
@ -86,82 +86,82 @@
</template> </template>
</a-dropdown> </a-dropdown>
</div> </div>
</a-space> </a-space>
</template> </template>
</template> </template>
</s-table> </s-table>
</a-card> </a-card>
<Form ref="formRef" @successful="table.refresh(true)" /> <Form ref="formRef" @successful="table.refresh(true)" />
<changeModuleForm ref="changeModuleFormRef" @successful="table.refresh(true)"/> <changeModuleForm ref="changeModuleFormRef" @successful="table.refresh(true)" />
<Button ref="button" /> <Button ref="button" />
</template> </template>
<script setup name="mobileMenuIndex"> <script setup name="mobileMenuIndex">
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import Form from './form.vue' import Form from './form.vue'
import changeModuleForm from './changeModuleForm.vue' import changeModuleForm from './changeModuleForm.vue'
import Button from '../button/index.vue' import Button from '../button/index.vue'
import mobileMenuApi from '@/api/mobile/resource/menuApi' import mobileMenuApi from '@/api/mobile/resource/menuApi'
let searchFormState = reactive({}) let searchFormState = reactive({})
let moduleList = ref([]) let moduleList = ref([])
const module = ref() const module = ref()
const table = ref() const table = ref()
const formRef = ref() const formRef = ref()
const searchFormRef = ref() const searchFormRef = ref()
const changeModuleFormRef = ref() const changeModuleFormRef = ref()
const button = ref() const button = ref()
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false } const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const columns = [ const columns = [
{ {
title: '名称', title: '名称',
dataIndex: 'title' dataIndex: 'title'
}, },
{ {
title: '界面路径', title: '界面路径',
dataIndex: 'path', dataIndex: 'path',
ellipsis: true ellipsis: true
}, },
{ {
title: '图标', title: '图标',
dataIndex: 'icon', dataIndex: 'icon',
width: 80 width: 80
}, },
{ {
title: '正规则', title: '正规则',
dataIndex: 'regType' dataIndex: 'regType'
}, },
{ {
title: '可用状态', title: '可用状态',
dataIndex: 'status' dataIndex: 'status'
}, },
{ {
title: '创建时间', title: '创建时间',
dataIndex: 'createTime', dataIndex: 'createTime',
ellipsis: true ellipsis: true
}, },
{ {
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
align: 'center', align: 'center',
width: 200 width: 200
} }
] ]
let selectedRowKeys = ref([]) let selectedRowKeys = ref([])
// 列表选择配置 // 列表选择配置
const options = { const options = {
alert: { alert: {
show: false, show: false,
clear: () => { clear: () => {
selectedRowKeys = ref([]) selectedRowKeys = ref([])
} }
}, },
rowSelection: { rowSelection: {
onChange: (selectedRowKey, selectedRows) => { onChange: (selectedRowKey, selectedRows) => {
selectedRowKeys.value = selectedRowKey selectedRowKeys.value = selectedRowKey
} }
} }
} }
const loadData = (parameter) => { const loadData = (parameter) => {
if (!module.value) { if (!module.value) {
return mobileMenuApi.mobileMenuModuleSelector().then((data) => { return mobileMenuApi.mobileMenuModuleSelector().then((data) => {
moduleList.value = data moduleList.value = data
@ -182,36 +182,36 @@
return [] return []
}) })
} }
} }
// 切换模块标签查询菜单列表 // 切换模块标签查询菜单列表
const moduleClock = (value) => { const moduleClock = (value) => {
searchFormState.module = value searchFormState.module = value
table.value.refresh(true) table.value.refresh(true)
} }
// 删除 // 删除
const deleteMobileMenu = (record) => { const deleteMobileMenu = (record) => {
let params = [ let params = [
{ {
id: record.id id: record.id
} }
] ]
mobileMenuApi.mobileMenuDelete(params).then(() => { mobileMenuApi.mobileMenuDelete(params).then(() => {
table.value.refresh(true) table.value.refresh(true)
}) })
} }
// 批量删除 // 批量删除
const deleteBatchMobileMenu = () => { const deleteBatchMobileMenu = () => {
if (selectedRowKeys.value.length < 1) { if (selectedRowKeys.value.length < 1) {
message.warning('请选择一条或多条数据') message.warning('请选择一条或多条数据')
return false return false
} }
const params = selectedRowKeys.value.map((m) => { const params = selectedRowKeys.value.map((m) => {
return { return {
id: m id: m
} }
}) })
mobileMenuApi.mobileMenuDelete(params).then(() => { mobileMenuApi.mobileMenuDelete(params).then(() => {
table.value.clearRefreshSelected() table.value.clearRefreshSelected()
}) })
} }
</script> </script>

12
snowy-admin-web/src/views/mobile/resource/module/form.vue
View File

@ -74,14 +74,12 @@
// 验证并提交数据 // 验证并提交数据
const onSubmit = () => { const onSubmit = () => {
formRef.value formRef.value.validate().then(() => {
.validate() moduleApi.submitForm(formData.value, !formData.value.id).then(() => {
.then(() => { onClose()
moduleApi.submitForm(formData.value, !formData.value.id).then(() => { emit('successful')
onClose()
emit('successful')
})
}) })
})
} }
// 调用这个函数将子组件的一些数据和方法暴露出去 // 调用这个函数将子组件的一些数据和方法暴露出去