界面调整

龚焕茏

2024-03-15 de2f2613ffd98786bc7252a35ceb6a4d165849ef

 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>