From de2f2613ffd98786bc7252a35ceb6a4d165849ef Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期五, 15 三月 2024 14:27:14 +0800
Subject: [PATCH] 界面调整
---
src/views/geographyData/index.vue | 98 ++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 93 insertions(+), 5 deletions(-)
diff --git a/src/views/geographyData/index.vue b/src/views/geographyData/index.vue
index 5a16b43..2389b01 100644
--- a/src/views/geographyData/index.vue
+++ b/src/views/geographyData/index.vue
@@ -36,8 +36,9 @@
<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="type" />
+ <el-table-column label="鎵�灞炶闀�" align="center" prop="townStreetName" />
<el-table-column label="鎻忚堪" align="center" prop="description" />
<el-table-column label="鏍囪鐘舵��" align="center" prop="status">
<template #default="scope">
@@ -66,10 +67,10 @@
/>
</el-card>
<!-- 娣诲姞鎴栦慨鏀规暟鎹笂鍥惧璇濇 -->
- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+ <el-dialog :title="dialog.title" v-model="dialog.visible" width="430px" 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-select v-model="form.type" placeholder="璇烽�夋嫨" class="el-input-width">
<el-option key="1" label="浜嬫晠鏄撳彂澶氬彂璺" value="浜嬫晠鏄撳彂澶氬彂璺" />
<el-option key="2" label="閲嶇偣鏃呮父閫氶亾" value="閲嶇偣鏃呮父閫氶亾" />
<el-option key="3" label="閮芥睙鍫版櫙鍖�" value="閮芥睙鍫版櫙鍖�" />
@@ -82,10 +83,50 @@
</el-select>
</el-form-item>
<el-form-item label="鍚嶇О" prop="name">
- <el-input v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�" />
+ <el-input class="el-input-width" v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�" />
+ </el-form-item>
+ <el-form-item label="闀囪" prop="townStreetName">
+ <el-select v-model="form.townStreetName" placeholder="璇烽�夋嫨" clearable class="el-input-width">
+ <el-option v-for="item in townStreetNames" :key="item.name" :label="item.name" :value="item.name"/>
+ </el-select>
</el-form-item>
<el-form-item label="鎻忚堪" prop="description">
- <el-input v-model="form.description" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" />
+ <el-input class="el-input-width" v-model="form.description" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" />
+ </el-form-item>
+ <el-form-item label="鍥剧墖" prop="">
+ <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="2">
+ <el-icon><Plus /></el-icon>
+ <template #file="{ file }">
+ <div>
+ <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+ <span class="el-upload-list__item-actions">
+ <span
+ class="el-upload-list__item-preview"
+ @click="handlePictureCardPreview(file)"
+ >
+ <el-icon><zoom-in /></el-icon>
+ </span>
+ <span
+ v-if="!disabled"
+ class="el-upload-list__item-delete"
+ @click="handleDownload(file)"
+ >
+ <el-icon><Download /></el-icon>
+ </span>
+ <span
+ v-if="!disabled"
+ class="el-upload-list__item-delete"
+ @click="handleRemove(file)"
+ >
+ <el-icon><Delete /></el-icon>
+ </span>
+ </span>
+ </div>
+ </template>
+ </el-upload>
+ <el-dialog v-model="dialogVisible">
+ <img w-full :src="dialogImageUrl" alt="Preview Image" />
+ </el-dialog>
</el-form-item>
</el-form>
<template #footer>
@@ -125,6 +166,7 @@
id: undefined,
type: undefined,
name: undefined,
+ townStreetName: undefined,
description: undefined,
status: undefined
}
@@ -134,6 +176,7 @@
pageNum: 1,
pageSize: 10,
name: undefined,
+ townStreetName: undefined,
params: {
}
},
@@ -146,6 +189,9 @@
],
name: [
{ required: true, message: "鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }
+ ],
+ townStreetName: [
+ { required: true, message: "琛楅晣涓嶈兘涓虹┖", trigger: "blur" }
],
description: [
{ required: true, message: "鎻忚堪涓嶈兘涓虹┖", trigger: "blur" }
@@ -251,5 +297,47 @@
onMounted(() => {
getList();
+ getTownStreetNames();
});
+
+
+import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
+
+import type { UploadFile } from 'element-plus'
+
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+const disabled = ref(false)
+
+const handleRemove = (file: UploadFile) => {
+ console.log(file)
+}
+
+const handlePictureCardPreview = (file: UploadFile) => {
+ dialogImageUrl.value = file.url!
+ dialogVisible.value = true
+}
+
+const handleDownload = (file: UploadFile) => {
+ console.log(file)
+}
+
+// 璋冪敤鍚庣API鑾峰彇闀囪鍚嶇О鍒楄〃
+import { listRegion} from '@/api/region';
+const townStreetNames = ref<RegionVO[]>([]);
+
+const regionQueryParams = {
+ parentCode: 510181
+}
+
+/** 鏌ヨ闀囪 */
+const getTownStreetNames = async () => {
+ const res = await listRegion(regionQueryParams);
+ townStreetNames.value = res.rows;
+}
</script>
+<style scoped>
+.el-input-width {
+ width: 265px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0