系统维护计划管理 - 客户管理 - 前端代码分析

系统维护计划管理 - 前端代码分析

该代码片段展示了系统维护计划管理功能的Vue.js前端代码，包含以下功能：

• 数据获取：使用fetchList函数获取数据列表。
• 列表展示：使用BasicTable组件展示数据列表。
• 搜索：使用queryRef变量存储搜索条件，并使用getDataList函数获取搜索结果。
• 导出：使用exportExcel函数将数据导出为Excel文件。
• 删除：使用handleDelete函数删除选中的数据。

代码分析

1. 导入组件和函数

import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchList, delObjs } from '/@/api/customer/cmMaintenancePlan';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';
import { useI18n } from 'vue-i18n';

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const { t } = useI18n();

2. 定义变量

// 定义查询字典

// 定义变量内容
const formDialogRef = ref();
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

// 项目类型下拉数据
const { plan_type } = useDict('plan_type');

const loading = ref(false);

3. 定义表格配置

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
});

4. 使用useTable钩子

const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

5. 页面加载后执行的逻辑

onMounted(() => {
	console.log(state.dataList);
});

6. 清空搜索条件

const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	selectObjs.value = [];
	getDataList();
};

7. 导出Excel

const exportExcel = () => {
	downBlobFile('/customer/cmMaintenancePlan/export', state.queryForm, 'cmMaintenancePlan.xlsx');
};

8. 多选事件

const handleSelectionChange = (objs: { planId: string }[]) => {
	selectObjs.value = objs.map(({ planId }) => planId);
	multiple.value = !objs.length;
};

9. 删除操作

const handleDelete = async (ids: string[]) => {
	try {
		await useMessageBox().confirm('此操作将永久删除');
	} catch {
		return;
	}

	try {
		await delObjs(ids);
		getDataList();
		useMessage().success('删除成功');
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};

总结

该代码片段展示了如何使用Vue.js开发一个简单的系统维护计划管理页面，包含数据获取、列表展示、搜索、导出、删除等功能。

刚进入该页面调用的方法是onMounted钩子函数内的代码，用于在页面加载完成后执行一些逻辑。该方法的返回值没有存储在任何地方。