From 227117205cbb62e9febf96870d2fbb9ce056eb43 Mon Sep 17 00:00:00 2001 From: houzhongjian <houzhongyi@126.com> Date: 星期三, 06 十一月 2024 14:09:54 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/model/chart/param/index.vue | 183 +++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 183 insertions(+), 0 deletions(-) diff --git a/src/views/model/chart/param/index.vue b/src/views/model/chart/param/index.vue new file mode 100644 index 0000000..8714213 --- /dev/null +++ b/src/views/model/chart/param/index.vue @@ -0,0 +1,183 @@ +<template> + <el-drawer + v-model="drawer" + size="40%" + title="参数列表" + direction="rtl" + :before-close="handleClose" + > + <!-- 搜索工作栏 --> + <ContentWrap> + <el-form + class="-mb-15px" + :model="queryParams" + ref="queryFormRef" + :inline="true" + label-width="68px" + > + <el-form-item label="参数名称" prop="paramName"> + <el-input + v-model="queryParams.paramName" + placeholder="请输入参数名称" + clearable + class="!w-240px" + /> + </el-form-item> +<!-- <el-form-item label="参数编码" prop="paramCode">--> +<!-- <el-input--> +<!-- v-model="queryParams.paramCode"--> +<!-- placeholder="请输入"--> +<!-- clearable--> +<!-- class="!w-240px"--> +<!-- />--> +<!-- </el-form-item>--> + <el-form-item> + <el-button @click="handleQuery"> + <Icon icon="ep:search" class="mr-5px"/> + 搜索 + </el-button> + <el-button @click="resetQuery"> + <Icon icon="ep:refresh" class="mr-5px"/> + 重置 + </el-button> + <el-button + type="primary" + plain + @click="openForm('create')" + > + <Icon icon="ep:plus" class="mr-5px" /> + 新增 + </el-button> + + </el-form-item> + </el-form> + </ContentWrap> + + <!-- 列表 --> + <ContentWrap> + <el-table + v-loading="loading" + :data="list" + row-key="id" + > + <el-table-column prop="paramName" label="参数名称"/> + <el-table-column prop="paramCode" label="参数编码"/> + <el-table-column prop="paramValue" label="参数值"/> + <el-table-column label="操作" align="center" width="150px"> + <template #default="scope"> + <div class="flex items-center justify-center"> + <el-button + link + type="primary" + @click="openForm('update', scope.row.id)" + > + 编辑 + </el-button> + <el-button link type="danger" @click="handleDelete(scope.row.id)"> + 删除 + </el-button> + </div> + </template> + </el-table-column> + </el-table> + <!-- 分页 --> + <Pagination + v-model:limit="queryParams.limit" + v-model:page="queryParams.page" + :total="total" + @pagination="getList" + /> + </ContentWrap> + + <!-- 表单弹窗:添加/修改 --> + <ChartParamForm ref="formRef" @success="getList" /> + </el-drawer> +</template> +<script lang="ts" setup> +import {dateFormatter} from '@/utils/formatTime' +import * as ChartParamApi from '@/api/model/mpk/chartParam' +import ChartParamForm from './ChartParamForm.vue' + +import type {DrawerProps} from "element-plus"; + +defineOptions({name: 'ChartParam'}) + +const message = useMessage() // 消息弹窗 +const {t} = useI18n() // 国际化 + +const drawer = ref(false) +const loading = ref(true) // 列表的加载中 +const total = ref(0) // 列表的总页数 +const list = ref([]) // 字典表格数据 +const queryParams = reactive({ + page: 1, + limit: 10, + chartId: undefined, + paramName: undefined, + paramCode: undefined, +}) +const queryFormRef = ref() // 搜索的表单 + +const getList = async () => { + loading.value = true + try { + const data = await ChartParamApi.getPage(queryParams) + list.value = data.list + total.value = data.total + } finally { + loading.value = false + } +} + +/** 搜索按钮操作 */ +const handleQuery = () => { + getList() +} + +/** 重置按钮操作 */ +const resetQuery = () => { + queryFormRef.value.resetFields() + handleQuery() +} + +/** 添加/修改操作 */ +const formRef = ref() +const openForm = (type: string, id?: string) => { + formRef.value.open(type, id, queryParams.chartId) +} + +/** 删除按钮操作 */ +const handleDelete = async (id: string) => { + try { + // 删除的二次确认 + await message.delConfirm() + // 发起删除 + await ChartParamApi.del(id) + message.success(t('common.delSuccess')) + // 刷新列表 + await getList() + } catch { + } +} + +/** 打开弹窗 */ +const open = async (chartId?: string) => { + resetForm() + drawer.value = true + queryParams.chartId = chartId + if (chartId) { + getList() + } +} +defineExpose({open}) // 提供 open 方法,用于打开弹窗 + +/** 重置表单 */ +const resetForm = () => { + queryParams.chartId = '' + queryParams.name = '' +} + +const handleClose = (done: () => void) => { + drawer.value = false +} +</script> -- Gitblit v1.9.3