From 9d643bd9e55f48e388729b3b273ef22b931e8393 Mon Sep 17 00:00:00 2001 From: 龚焕茏 <2842157468@qq.com> Date: 星期五, 08 三月 2024 10:03:12 +0800 Subject: [PATCH] 数据上图 --- src/views/dg/danger/total.vue | 1 src/views/geographyData/index.vue | 255 ++++++++++++++++++++++++++++++++++++ src/api/geographyData/index.ts | 63 +++++++++ src/api/geographyData/types.ts | 71 ++++++++++ 4 files changed, 389 insertions(+), 1 deletions(-) diff --git a/src/api/geographyData/index.ts b/src/api/geographyData/index.ts new file mode 100644 index 0000000..d239d66 --- /dev/null +++ b/src/api/geographyData/index.ts @@ -0,0 +1,63 @@ +import request from '@/utils/request'; +import { AxiosPromise } from 'axios'; +import { GeographyDataVO, GeographyDataForm, GeographyDataQuery } from '@/api/geographyData/types'; + +/** + * 鏌ヨ鏁版嵁涓婂浘鍒楄〃 + * @param query + * @returns {*} + */ + +export const listGeographyData = (query?: GeographyDataQuery): AxiosPromise<GeographyDataVO[]> => { + return request({ + url: '/demo/geographyData/list', + method: 'get', + params: query + }); +}; + +/** + * 鏌ヨ鏁版嵁涓婂浘璇︾粏 + * @param id + */ +export const getGeographyData = (id: string | number): AxiosPromise<GeographyDataVO> => { + return request({ + url: '/demo/geographyData/' + id, + method: 'get' + }); +}; + +/** + * 鏂板鏁版嵁涓婂浘 + * @param data + */ +export const addGeographyData = (data: GeographyDataForm) => { + return request({ + url: '/demo/geographyData', + method: 'post', + data: data + }); +}; + +/** + * 淇敼鏁版嵁涓婂浘 + * @param data + */ +export const updateGeographyData = (data: GeographyDataForm) => { + return request({ + url: '/demo/geographyData', + method: 'put', + data: data + }); +}; + +/** + * 鍒犻櫎鏁版嵁涓婂浘 + * @param id + */ +export const delGeographyData = (id: string | number | Array<string | number>) => { + return request({ + url: '/demo/geographyData/' + id, + method: 'delete' + }); +}; diff --git a/src/api/geographyData/types.ts b/src/api/geographyData/types.ts new file mode 100644 index 0000000..83efadd --- /dev/null +++ b/src/api/geographyData/types.ts @@ -0,0 +1,71 @@ +export interface GeographyDataVO { + /** + * 缂栧彿 + */ + id: string | number; + + /** + * 绫诲瀷 + */ + type: string; + + /** + * 鍚嶇О + */ + name: string; + + /** + * 鎻忚堪 + */ + description: string; + + /** + * 鏍囪鐘舵�� 1宸叉爣璁� 2鏈爣璁� + */ + status: number; + +} + +export interface GeographyDataForm extends BaseEntity { + /** + * 缂栧彿 + */ + id?: string | number; + + /** + * 绫诲瀷 + */ + type?: string; + + /** + * 鍚嶇О + */ + name?: string; + + /** + * 鎻忚堪 + */ + description?: string; + + /** + * 鏍囪鐘舵�� 1宸叉爣璁� 2鏈爣璁� + */ + status?: number; + +} + +export interface GeographyDataQuery extends PageQuery { + + /** + * 鍚嶇О + */ + name?: string; + + /** + * 鏃ユ湡鑼冨洿鍙傛暟 + */ + params?: any; +} + + + diff --git a/src/views/dg/danger/total.vue b/src/views/dg/danger/total.vue index f420cd5..065e022 100644 --- a/src/views/dg/danger/total.vue +++ b/src/views/dg/danger/total.vue @@ -84,7 +84,6 @@ <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> <el-form ref="dangerTotalFormRef" :model="form" :rules="rules" label-width="80px"> <el-form-item label="闀囪鍚嶇О" prop="townStreetName" label-width="100"> - <!-- <el-input v-model="form.townStreetName" placeholder="璇疯緭鍏ラ晣琛楀悕绉�" /> --> <el-select v-model="form.townStreetName" placeholder="璇烽�夋嫨" clearable style="width: 240px" > <el-option v-for="item in townStreetNames" :key="item.name" :label="item.name" :value="item.name"/> </el-select> diff --git a/src/views/geographyData/index.vue b/src/views/geographyData/index.vue new file mode 100644 index 0000000..5a16b43 --- /dev/null +++ b/src/views/geographyData/index.vue @@ -0,0 +1,255 @@ +<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="name"> + <el-input v-model="queryParams.name" placeholder="璇疯緭鍏ュ悕绉�" clearable style="width: 240px" @keyup.enter="handleQuery" /> + </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="['demo:geographyData:add']">鏂板</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['demo:geographyData:edit']">淇敼</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['demo:geographyData:remove']">鍒犻櫎</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['demo:geographyData:export']">瀵煎嚭</el-button> + </el-col> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + </el-row> + </template> + + <el-table v-loading="loading" :data="geographyDataList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="搴忓彿" align="center" type="index" width="50" /> + <el-table-column label="绫诲瀷" align="center" prop="type" /> + <el-table-column label="鍚嶇О" align="center" prop="name" /> + <el-table-column label="鎻忚堪" align="center" prop="description" /> + <el-table-column label="鏍囪鐘舵��" align="center" prop="status"> + <template #default="scope"> + <span v-show="scope.row['status'] == 1">宸叉爣璁�</span> + <span v-show="scope.row['status'] == 2" style="color: rgba(227, 70,101);">鏈爣璁�</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="['demo:geographyData:edit']"></el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top"> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demo:geographyData: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="geographyDataFormRef" :model="form" :rules="rules" label-width="80px"> + <el-form-item label="绫诲瀷" prop="type"> + <el-select v-model="form.type" placeholder="璇烽�夋嫨" style="width: 240px;"> + <el-option key="1" label="浜嬫晠鏄撳彂澶氬彂璺" value="浜嬫晠鏄撳彂澶氬彂璺" /> + <el-option key="2" label="閲嶇偣鏃呮父閫氶亾" value="閲嶇偣鏃呮父閫氶亾" /> + <el-option key="3" label="閮芥睙鍫版櫙鍖�" value="閮芥睙鍫版櫙鍖�" /> + <el-option key="4" label="璀﹀姏閰嶅" value="璀﹀姏閰嶅" /> + <el-option key="5" label="鎵撳洿鏂藉伐" value="鎵撳洿鏂藉伐" /> + <el-option key="6" label="浜ら�氫簨鏁呮槗鍙戠偣" value="浜ら�氫簨鏁呮槗鍙戠偣" /> + <el-option key="7" label="閲嶇偣杩愯緭浼佷笟" value="閲嶇偣杩愯緭浼佷笟" /> + <el-option key="8" label="鍏氦绾胯矾" value="鍏氦绾胯矾" /> + <el-option key="9" label="瀹夊叏闅愭偅" value="瀹夊叏闅愭偅" /> + </el-select> + </el-form-item> + <el-form-item label="鍚嶇О" prop="name"> + <el-input v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�" /> + </el-form-item> + <el-form-item label="鎻忚堪" prop="description"> + <el-input v-model="form.description" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" /> + </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="GeographyData" lang="ts"> +import { listGeographyData, getGeographyData, delGeographyData, addGeographyData, updateGeographyData } from '@/api/geographyData'; +import { GeographyDataVO, GeographyDataQuery, GeographyDataForm } from '@/api/geographyData/types'; + +const { proxy } = getCurrentInstance() as ComponentInternalInstance; + +const geographyDataList = ref<GeographyDataVO[]>([]); +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 geographyDataFormRef = ref<ElFormInstance>(); + +const dialog = reactive<DialogOption>({ + visible: false, + title: '' +}); + +const initFormData: GeographyDataForm = { + id: undefined, + type: undefined, + name: undefined, + description: undefined, + status: undefined +} +const data = reactive<PageData<GeographyDataForm, GeographyDataQuery>>({ + form: {...initFormData}, + queryParams: { + pageNum: 1, + pageSize: 10, + name: undefined, + params: { + } + }, + rules: { + id: [ + { required: true, message: "缂栧彿涓嶈兘涓虹┖", trigger: "blur" } + ], + type: [ + { required: true, message: "绫诲瀷涓嶈兘涓虹┖", trigger: "change" } + ], + name: [ + { required: true, message: "鍚嶇О涓嶈兘涓虹┖", trigger: "blur" } + ], + description: [ + { required: true, message: "鎻忚堪涓嶈兘涓虹┖", trigger: "blur" } + ], + status: [ + { required: true, message: "鏍囪鐘舵�� 1宸叉爣璁� 2鏈爣璁颁笉鑳戒负绌�", trigger: "change" } + ] + } +}); + +const { queryParams, form, rules } = toRefs(data); + +/** 鏌ヨ鏁版嵁涓婂浘鍒楄〃 */ +const getList = async () => { + loading.value = true; + const res = await listGeographyData(queryParams.value); + geographyDataList.value = res.rows; + total.value = res.total; + loading.value = false; +} + +/** 鍙栨秷鎸夐挳 */ +const cancel = () => { + reset(); + dialog.visible = false; +} + +/** 琛ㄥ崟閲嶇疆 */ +const reset = () => { + form.value = {...initFormData}; + geographyDataFormRef.value?.resetFields(); +} + +/** 鎼滅储鎸夐挳鎿嶄綔 */ +const handleQuery = () => { + queryParams.value.pageNum = 1; + getList(); +} + +/** 閲嶇疆鎸夐挳鎿嶄綔 */ +const resetQuery = () => { + queryFormRef.value?.resetFields(); + handleQuery(); +} + +/** 澶氶�夋閫変腑鏁版嵁 */ +const handleSelectionChange = (selection: GeographyDataVO[]) => { + 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?: GeographyDataVO) => { + reset(); + const _id = row?.id || ids.value[0] + const res = await getGeographyData(_id); + Object.assign(form.value, res.data); + dialog.visible = true; + dialog.title = "淇敼鏁版嵁涓婂浘"; +} + +/** 鎻愪氦鎸夐挳 */ +const submitForm = () => { + geographyDataFormRef.value?.validate(async (valid: boolean) => { + if (valid) { + buttonLoading.value = true; + if (form.value.id) { + await updateGeographyData(form.value).finally(() => buttonLoading.value = false); + } else { + await addGeographyData(form.value).finally(() => buttonLoading.value = false); + } + proxy?.$modal.msgSuccess("淇敼鎴愬姛"); + dialog.visible = false; + await getList(); + } + }); +} + +/** 鍒犻櫎鎸夐挳鎿嶄綔 */ +const handleDelete = async (row?: GeographyDataVO) => { + if(row?.status == 1) { proxy?.$modal.msgWarning("褰撳墠涓哄凡鏍囪鐘舵�侊紝涓嶆敮鎸佸垹闄�"); return; } + const _ids = row?.id || ids.value; + await proxy?.$modal.confirm('鏄惁纭鍒犻櫎鏁版嵁涓婂浘缂栧彿涓�"' + _ids + '"鐨勬暟鎹」锛�').finally(() => loading.value = false); + await delGeographyData(_ids); + proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + await getList(); +} + +/** 瀵煎嚭鎸夐挳鎿嶄綔 */ +const handleExport = () => { + proxy?.download('demo/geographyData/export', { + ...queryParams.value + }, `geographyData_${new Date().getTime()}.xlsx`) +} + +onMounted(() => { + getList(); +}); +</script> -- Gitblit v1.8.0