From a67954b67cc45a77aca9cb67aa23965ea16879c3 Mon Sep 17 00:00:00 2001 From: 幻雨堂 <13281837894@163.com> Date: 星期四, 22 二月 2024 10:39:58 +0800 Subject: [PATCH] 指标管理 --- src/views/td/data/index.vue | 256 ++++++++++++++++++++++++++++++++++++ src/api/td/data/index.ts | 63 +++++++++ src/api/td/data/types.ts | 71 ++++++++++ 3 files changed, 390 insertions(+), 0 deletions(-) diff --git a/src/api/td/data/index.ts b/src/api/td/data/index.ts new file mode 100644 index 0000000..b183a96 --- /dev/null +++ b/src/api/td/data/index.ts @@ -0,0 +1,63 @@ +import request from '@/utils/request'; +import { AxiosPromise } from 'axios'; +import { DataVO, DataForm, DataQuery } from '@/api/system/data/types'; + +/** + * 鏌ヨ鎸囨爣鏁版嵁鍒楄〃 + * @param query + * @returns {*} + */ + +export const listData = (query?: DataQuery): AxiosPromise<DataVO[]> => { + return request({ + url: '/system/data/list', + method: 'get', + params: query + }); +}; + +/** + * 鏌ヨ鎸囨爣鏁版嵁璇︾粏 + * @param id + */ +export const getData = (id: string | number): AxiosPromise<DataVO> => { + return request({ + url: '/system/data/' + id, + method: 'get' + }); +}; + +/** + * 鏂板鎸囨爣鏁版嵁 + * @param data + */ +export const addData = (data: DataForm) => { + return request({ + url: '/system/data', + method: 'post', + data: data + }); +}; + +/** + * 淇敼鎸囨爣鏁版嵁 + * @param data + */ +export const updateData = (data: DataForm) => { + return request({ + url: '/system/data', + method: 'put', + data: data + }); +}; + +/** + * 鍒犻櫎鎸囨爣鏁版嵁 + * @param id + */ +export const delData = (id: string | number | Array<string | number>) => { + return request({ + url: '/system/data/' + id, + method: 'delete' + }); +}; diff --git a/src/api/td/data/types.ts b/src/api/td/data/types.ts new file mode 100644 index 0000000..bfc6b60 --- /dev/null +++ b/src/api/td/data/types.ts @@ -0,0 +1,71 @@ +export interface DataVO { + /** + * 涓婚敭 + */ + id: string | number; + + /** + * 琛屾斂鍖哄垝 + */ + areaName: string; + + /** + * 鍖哄垝浠g爜 + */ + areaCode: number; + + /** + * 缁熻鏃堕棿 + */ + collectTime: string; + +} + +export interface DataForm extends BaseEntity { + /** + * 涓婚敭 + */ + id?: string | number; + + /** + * 琛屾斂鍖哄垝 + */ + areaName?: string; + + /** + * 鍖哄垝浠g爜 + */ + areaCode?: number; + + /** + * 缁熻鏃堕棿 + */ + collectTime?: string; + +} + +export interface DataQuery extends PageQuery { + + /** + * 琛屾斂鍖哄垝 + */ + areaName?: string; + + /** + * 鍖哄垝浠g爜 + */ + areaCode?: number; + + /** + * 缁熻鏃堕棿 + */ + collectTime?: string; + + /** + * 鏃ユ湡鑼冨洿鍙傛暟 + */ + params?: any; +} + + + diff --git a/src/views/td/data/index.vue b/src/views/td/data/index.vue new file mode 100644 index 0000000..d765c37 --- /dev/null +++ b/src/views/td/data/index.vue @@ -0,0 +1,256 @@ +<template> + <div class="p-2"> + <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> + <div class="search" v-show="showSearch"> + <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px"> + <el-form-item label="琛屾斂鍖哄垝" prop="areaName"> + <el-input v-model="queryParams.areaName" placeholder="璇疯緭鍏ヨ鏀垮尯鍒�" clearable style="width: 240px" @keyup.enter="handleQuery" /> + </el-form-item> + <el-form-item label="鍖哄垝浠g爜" prop="areaCode"> + <el-input v-model="queryParams.areaCode" placeholder="璇疯緭鍏ュ尯鍒掍唬鐮�" clearable style="width: 240px" @keyup.enter="handleQuery" /> + </el-form-item> + <el-form-item label="缁熻鏃堕棿" prop="collectTime"> + <el-date-picker clearable + v-model="queryParams.collectTime" + type="date" + value-format="YYYY-MM-DD" + placeholder="璇烽�夋嫨缁熻鏃堕棿" + /> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + </el-form> + </div> + </transition> + + <el-card shadow="never"> + <template #header> + <el-row :gutter="10" class="mb8"> + <el-col :span="1.5"> + <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:data:add']">鏂板</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:data:edit']">淇敼</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:data:remove']">鍒犻櫎</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:data:export']">瀵煎嚭</el-button> + </el-col> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + </el-row> + </template> + + <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="涓婚敭" align="center" prop="id" v-if="true" /> + <el-table-column label="琛屾斂鍖哄垝" align="center" prop="areaName" /> + <el-table-column label="鍖哄垝浠g爜" align="center" prop="areaCode" /> + <el-table-column label="缁熻鏃堕棿" align="center" prop="collectTime" width="180"> + <template #default="scope"> + <span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d}') }}</span> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-tooltip content="淇敼" placement="top"> + <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:data:edit']"></el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top"> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:data:remove']"></el-button> + </el-tooltip> + </template> + </el-table-column> + </el-table> + + <pagination + v-show="total>0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </el-card> + <!-- 娣诲姞鎴栦慨鏀规寚鏍囨暟鎹璇濇 --> + <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> + <el-form ref="dataFormRef" :model="form" :rules="rules" label-width="80px"> + <el-form-item label="琛屾斂鍖哄垝" prop="areaName"> + <el-input v-model="form.areaName" placeholder="璇疯緭鍏ヨ鏀垮尯鍒�" /> + </el-form-item> + <el-form-item label="鍖哄垝浠g爜" prop="areaCode"> + <el-input v-model="form.areaCode" placeholder="璇疯緭鍏ュ尯鍒掍唬鐮�" /> + </el-form-item> + <el-form-item label="缁熻鏃堕棿" prop="collectTime"> + <el-date-picker clearable + v-model="form.collectTime" + type="datetime" + value-format="YYYY-MM-DD HH:mm:ss" + placeholder="璇烽�夋嫨缁熻鏃堕棿"> + </el-date-picker> + </el-form-item> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button :loading="buttonLoading" type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + </div> +</template> + +<script setup name="Data" lang="ts"> +import { listData, getData, delData, addData, updateData } from '@/api/system/data'; +import { DataVO, DataQuery, DataForm } from '@/api/system/data/types'; + +const { proxy } = getCurrentInstance() as ComponentInternalInstance; + +const dataList = ref<DataVO[]>([]); +const buttonLoading = ref(false); +const loading = ref(true); +const showSearch = ref(true); +const ids = ref<Array<string | number>>([]); +const single = ref(true); +const multiple = ref(true); +const total = ref(0); + +const queryFormRef = ref<ElFormInstance>(); +const dataFormRef = ref<ElFormInstance>(); + +const dialog = reactive<DialogOption>({ + visible: false, + title: '' +}); + +const initFormData: DataForm = { + id: undefined, + areaName: undefined, + areaCode: undefined, + collectTime: undefined +} +const data = reactive<PageData<DataForm, DataQuery>>({ + form: {...initFormData}, + queryParams: { + pageNum: 1, + pageSize: 10, + areaName: undefined, + areaCode: undefined, + collectTime: undefined, + params: { + } + }, + rules: { + id: [ + { required: true, message: "涓婚敭涓嶈兘涓虹┖", trigger: "blur" } + ], + areaName: [ + { required: true, message: "琛屾斂鍖哄垝涓嶈兘涓虹┖", trigger: "blur" } + ], + areaCode: [ + { required: true, message: "鍖哄垝浠g爜涓嶈兘涓虹┖", trigger: "blur" } + ], + collectTime: [ + { required: true, message: "缁熻鏃堕棿涓嶈兘涓虹┖", trigger: "blur" } + ] + } +}); + +const { queryParams, form, rules } = toRefs(data); + +/** 鏌ヨ鎸囨爣鏁版嵁鍒楄〃 */ +const getList = async () => { + loading.value = true; + const res = await listData(queryParams.value); + dataList.value = res.rows; + total.value = res.total; + loading.value = false; +} + +/** 鍙栨秷鎸夐挳 */ +const cancel = () => { + reset(); + dialog.visible = false; +} + +/** 琛ㄥ崟閲嶇疆 */ +const reset = () => { + form.value = {...initFormData}; + dataFormRef.value?.resetFields(); +} + +/** 鎼滅储鎸夐挳鎿嶄綔 */ +const handleQuery = () => { + queryParams.value.pageNum = 1; + getList(); +} + +/** 閲嶇疆鎸夐挳鎿嶄綔 */ +const resetQuery = () => { + queryFormRef.value?.resetFields(); + handleQuery(); +} + +/** 澶氶�夋閫変腑鏁版嵁 */ +const handleSelectionChange = (selection: DataVO[]) => { + ids.value = selection.map(item => item.id); + single.value = selection.length != 1; + multiple.value = !selection.length; +} + +/** 鏂板鎸夐挳鎿嶄綔 */ +const handleAdd = () => { + reset(); + dialog.visible = true; + dialog.title = "娣诲姞鎸囨爣鏁版嵁"; +} + +/** 淇敼鎸夐挳鎿嶄綔 */ +const handleUpdate = async (row?: DataVO) => { + reset(); + const _id = row?.id || ids.value[0] + const res = await getData(_id); + Object.assign(form.value, res.data); + dialog.visible = true; + dialog.title = "淇敼鎸囨爣鏁版嵁"; +} + +/** 鎻愪氦鎸夐挳 */ +const submitForm = () => { + dataFormRef.value?.validate(async (valid: boolean) => { + if (valid) { + buttonLoading.value = true; + if (form.value.id) { + await updateData(form.value).finally(() => buttonLoading.value = false); + } else { + await addData(form.value).finally(() => buttonLoading.value = false); + } + proxy?.$modal.msgSuccess("淇敼鎴愬姛"); + dialog.visible = false; + await getList(); + } + }); +} + +/** 鍒犻櫎鎸夐挳鎿嶄綔 */ +const handleDelete = async (row?: DataVO) => { + const _ids = row?.id || ids.value; + await proxy?.$modal.confirm('鏄惁纭鍒犻櫎鎸囨爣鏁版嵁缂栧彿涓�"' + _ids + '"鐨勬暟鎹」锛�').finally(() => loading.value = false); + await delData(_ids); + proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + await getList(); +} + +/** 瀵煎嚭鎸夐挳鎿嶄綔 */ +const handleExport = () => { + proxy?.download('system/data/export', { + ...queryParams.value + }, `data_${new Date().getTime()}.xlsx`) +} + +onMounted(() => { + getList(); +}); +</script> -- Gitblit v1.8.0