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

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

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

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

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

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

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

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

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

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

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

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

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