From 02409bfbe15f22fc3b5dccadabfd860a660a49d9 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 11 Oct 2025 10:37:14 +0800
Subject: [PATCH] feat: 名称修改
---
src/views/resource/patchManagement.vue | 586 ++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 388 insertions(+), 198 deletions(-)
diff --git a/src/views/resource/patchManagement.vue b/src/views/resource/patchManagement.vue
index ee9d276..1ff8005 100644
--- a/src/views/resource/patchManagement.vue
+++ b/src/views/resource/patchManagement.vue
@@ -1,68 +1,158 @@
<template>
<basic-container>
- <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" :permission="permissionList"
- v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" :before-open="beforeOpen"
- @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
- @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
+ <avue-crud
+ :option="option"
+ :table-loading="loading"
+ :data="data"
+ v-model:page="page"
+ :permission="permissionList"
+ v-model="form"
+ ref="crud"
+ @row-update="rowUpdate"
+ @row-save="rowSave"
+ @row-del="rowDel"
+ :before-open="beforeOpen"
+ @search-change="searchChange"
+ @search-reset="searchReset"
+ @selection-change="selectionChange"
+ @current-change="currentChange"
+ @size-change="sizeChange"
+ @refresh-change="refreshChange"
+ @on-load="onLoad"
+ >
<template #menu-left>
- <el-button type="primary" icon="el-icon-upload" @click=" handleDebug">
- 上传图斑
- </el-button>
+ <el-button type="primary" icon="el-icon-upload" @click="handleDebug"> 上传图斑 </el-button>
<el-button type="primary" icon="el-icon-setting" @click="goTypeManagement">
类型管理
</el-button>
- <el-button type="success" icon="el-icon-download" @click="downloadPatch">
- 导出
- </el-button>
+ <el-button type="success" icon="el-icon-download" @click="downloadPatch"> 导出 </el-button>
</template>
<template #menu="scope">
- <el-button type="primary" text icon="el-icon-view" @click="uploadPatch(scope.row,'detail')">详情
+ <el-button type="primary" text icon="el-icon-view" @click="uploadPatch(scope.row, 'detail')"
+ >详情
</el-button>
- <el-button type="primary" text icon="el-icon-edit" @click="uploadPatch(scope.row,'edit')">编辑
+ <el-button type="primary" text icon="el-icon-edit" @click="uploadPatch(scope.row, 'edit')"
+ >编辑
</el-button>
- <el-button type="primary" text icon="el-icon-delete" @click="handleDebug(scope.row)">删除
+ <el-button type="primary" text icon="el-icon-delete" @click="rowDel(scope.row)"
+ >删除
</el-button>
</template>
</avue-crud>
- <el-dialog title="上传图斑" append-to-body v-model="box" width="550px">
- <avue-form ref="form" :option="debugOption" v-model="debugForm" @submit="handleSubmit" />
+ <el-dialog title="上传图斑" append-to-body align-center v-model="box" width="550px">
+ <el-form
+ ref="ruleFormRef"
+ style="max-width: 600px"
+ :model="ruleForm"
+ :rules="rules"
+ label-width="auto"
+ >
+ <el-form-item label="文件名称" prop="name">
+ <el-input v-model="ruleForm.name" />
+ </el-form-item>
+ <el-form-item label="图斑类型" prop="region">
+ <el-select v-model="ruleForm.region" placeholder="请选择图斑类型">
+ <el-option
+ v-for="item in allspotTypeOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item class="center-align">
+ <el-upload
+ action="#"
+ :show-file-list="false"
+ :before-upload="e => uploadFlightFile(e, '1')"
+ accept=".kmz, .kml, .zip"
+ >
+ <el-button type="primary"> 图斑上传 </el-button>
+ </el-upload>
+ </el-form-item>
+ <el-form-item class="center-align">
+ <span>注：仅支持gis平台导出的zip压缩文件</span>
+ </el-form-item>
+ </el-form>
</el-dialog>
<!-- 图斑详情 -->
- <SpotDetails v-model:show="uploadPatchDialog" :title="spotDetailsTitle"></SpotDetails>
- <!-- <patchDetails ref="patchDetails" /> -->
+ <SpotDetails
+ v-model:show="uploadPatchDialog"
+ :title="spotDetailsTitle"
+ :detailid="detailid"
+ :detailList="detailList"
+ :spotTypeOption="allspotTypeOption"
+ :regionalData="regionalData"
+ ></SpotDetails>
</basic-container>
</template>
-
<script setup>
-import { ref, computed, watch } from 'vue'
-import { useStore } from 'vuex'
-import { useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { getListPage, getDetail, add, update, remove, enable, disable } from '@/api/resource/oss'
-import func from '@/utils/func'
-import patchDetails from '@/views/resource/components/patchDetails.vue'
+import {findAreaName} from '@/utils/areaUtils'
+import {
+ spotManagementTableApi,
+ searchManagementApi,
+ uploadManagementApi,
+ tableMapListApi,
+ exportExcel,
+ patchDeleteApi,
+ listOfSpotTypesApi,
+} from '@/api/patchManagement/index';
+import { getRegionTreeAll } from '@/api/job/task';
+import { ref, computed, watch } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { getListPage, getDetail, add, update, remove, enable, disable } from '@/api/resource/oss';
+import func from '@/utils/func';
+import patchDetails from '@/views/resource/components/patchDetails.vue';
import SpotDetails from '@/views/resource/components/spotDetails.vue';
const spotDetailsTitle = ref('');
-const store = useStore()
-const router = useRouter()
+const detailList = ref('');
+const store = useStore();
+const router = useRouter();
+const ruleFormRef = ref(null);
+let deptTreeData = ref([]);
+const regionalScope = ref([]);
+const spotTypeOption = ref([]);
+const creatorOption = ref([]);
+const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
+const ruleForm = reactive({
+ name: '',
+ region: '',
+});
+const rules = reactive({
+ name: [{ required: true, message: '请输入', trigger: 'blur' }, { trigger: 'blur' }],
+ region: [
+ {
+ required: true,
+ message: '请选择',
+ trigger: 'change',
+ },
+ ],
+});
// ===== state =====
-const form = ref({})
-const query = ref({})
-const loading = ref(true)
-const box = ref(false)
+const form = ref({});
+const query = ref({});
+const loading = ref(true);
+const box = ref(false);
const page = ref({
- pageSize: 10,
+ pageSize: 20,
currentPage: 1,
total: 0,
-})
+ lotTypeId: '',
+ createUser: '',
+ areaCode: '',
+ fileName: '',
+});
-const selectionList = ref([])
-
+const selectionList = ref([]);
const option = ref({
+ align: 'center',
+ headerAlign: 'center',
addBtn: false,
tip: false,
searchShow: true,
@@ -70,6 +160,8 @@
searchMenuPosition: 'right',
border: true,
index: true,
+ indexLabel: '序号',
+ indexWidth: 60,
selection: true,
grid: false,
menuWidth: 240,
@@ -88,163 +180,211 @@
column: [
{
label: '文件名称',
- prop: 'name',
+ prop: 'file_name',
span: 24,
search: true,
+ overHidden: true,
+ showOverflowTooltip: true,
searchSpan: 4,
rules: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
},
{
label: '图斑类型',
- prop: 'ossCode',
+ prop: 'patches_type_desc',
span: 24,
searchLabelWidth: 100,
search: true,
searchSpan: 4,
- rules: [{ required: true, message: '请输入图斑类型', trigger: 'blur' }],
+ type: 'select',
+ dicData: spotTypeOption,
+ props: {
+ label: 'label',
+ value: 'value',
+ },
+ rules: [{ required: true, message: '请选择图斑类型', trigger: 'blur' }],
},
{
label: '图斑数量',
- prop: 'ossCode',
+ prop: 'patches_num',
span: 24,
rules: [{ required: true, message: '请输入图斑数量', trigger: 'blur' }],
},
{
label: '异常图斑数量',
- prop: 'ossCode',
+ prop: 'exception_num',
span: 24,
rules: [{ required: true, message: '请输入异常图斑数量', trigger: 'blur' }],
},
{
label: '行政区划',
- prop: 'ossCode',
+ prop: 'areaName',
span: 24,
+ width: 180,
searchLabelWidth: 100,
search: true,
searchSpan: 4,
- rules: [{ required: true, message: '请输入行政区划', trigger: 'blur' }],
+ type: 'tree',
+ dicData: deptTreeData,
+ props: {
+ label: 'name',
+ value: 'id',
+ children: 'childrens',
+ },
+ rules: [{ required: true, message: '请选择行政区划', trigger: 'blur' }],
},
{
label: '数据来源',
- prop: 'ossCode',
+ prop: 'dataFrom',
span: 24,
rules: [{ required: true, message: '请输入数据来源', trigger: 'blur' }],
},
{
label: '创建时间',
- prop: 'ossCode',
+ prop: 'create_time',
span: 24,
rules: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
},
{
label: '创建人',
- prop: 'bucketName',
+ prop: 'user_name',
span: 24,
searchLabelWidth: 100,
search: true,
searchSpan: 4,
+ type: 'select',
+ dicData: creatorOption,
+ props: {
+ label: 'label',
+ value: 'value',
+ },
rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
},
],
-})
+});
-const data = ref([])
-
-const debugForm = ref({
- code: '',
- backgroundUrl: '',
-})
-
-const debugOption = ref({
- submitText: '提交',
- column: [
- {
- label: '资源编号',
- prop: 'code',
- disabled: true,
- span: 24,
- },
- {
- label: '上传背景',
- prop: 'backgroundUrl',
- type: 'upload',
- listType: 'picture-img',
- dataType: 'string',
- action: '/blade-resource/oss/endpoint/put-file',
- propsHttp: { res: 'data', url: 'link' },
- span: 24,
- },
- ],
-})
-
-// ===== refs =====
-const crudRef = ref(null)
-const uploadPatchDialog = ref(null)
-
+const data = ref([]);
+const crudRef = ref(null);
+const uploadPatchDialog = ref(null);
+const detailid = ref(null);
// ===== computed =====
-const userInfo = computed(() => store.getters.userInfo)
-const permission = computed(() => store.getters.permission)
-
+const userInfo = computed(() => store.getters.userInfo);
+const permission = computed(() => store.getters.permission);
const permissionList = computed(() => ({
addBtn: !!permission.value.oss_add,
viewBtn: !!permission.value.oss_view,
delBtn: !!permission.value.oss_delete,
editBtn: !!permission.value.oss_edit,
-}))
+}));
-const ids = computed(() => selectionList.value.map(ele => ele.id).join(','))
+const ids = computed(() => selectionList.value.map(ele => ele.id).join(','));
+// 获取行政区划
+const regionalData = ref([]);
+const requestDockInfo = () => {
+ getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
+ const rawData = res.data.data ? [res.data.data] : [];
+ regionalData.value = rawData;
+ const filterTree = nodes => {
+ return nodes.filter(node => {
+ const nodeCodeStr = node.id.toString();
+ const isMatched = regionalScope.value.some(
+ code => nodeCodeStr.startsWith(code.toString()) || code.toString().startsWith(nodeCodeStr)
+ );
+ if (node.childrens && node.childrens.length) {
+ node.childrens = filterTree(node.childrens);
+ if (node.childrens.length) return true;
+ }
+
+ return isMatched;
+ });
+ };
+ deptTreeData.value = filterTree(rawData);
+ onLoad(page.value);
+ });
+};
+// 获取搜索数据
+const getsearchManagementApi = () => {
+ searchManagementApi().then(res => {
+ const uniqueMap = new Map();
+ res.data.data.lot_values.forEach(item => {
+ const [key, value] = Object.entries(item)[0];
+ if (!uniqueMap.has(key)) {
+ uniqueMap.set(key, value);
+ }
+ });
+ const creatorOptionuniqueMap = new Map();
+ res.data.data.user_names.forEach(item => {
+ const [key, value] = Object.entries(item)[0];
+ if (!creatorOptionuniqueMap.has(key)) {
+ creatorOptionuniqueMap.set(key, value);
+ }
+ });
+ spotTypeOption.value = Array.from(uniqueMap).map(([key, value]) => ({
+ label: value,
+ value: key,
+ }));
+ creatorOption.value = Array.from(creatorOptionuniqueMap).map(([key, value]) => ({
+ label: value,
+ value: key,
+ }));
+ regionalScope.value = res.data.data.area_codes;
+ requestDockInfo();
+ });
+};
+const allspotTypeOption = ref([]);
+// 获取上传图斑类型
+const getlistOfSpotTypesApi = () => {
+ const searchparams = {
+ current: 1,
+ size: 9999,
+ };
+ listOfSpotTypesApi(searchparams).then(res => {
+ allspotTypeOption.value = res.data.data.records.map(item => ({
+ label: item.patches_type,
+ value: item.id,
+ }));
+ });
+};
// ===== watch =====
watch(
() => form.value.category,
() => {
- const category = func.toInt(form.value.category)
+ const category = func.toInt(form.value.category);
option.value.column.forEach(item => {
if (item.prop === 'appId') {
- item.display = category === 4
+ item.display = category === 4;
}
- })
+ });
}
-)
-
-watch(
- () => debugForm.value.code,
- () => {
- const column = debugOption.value.column.find(item => item.prop === 'backgroundUrl')
- if (column) {
- column.action = `/blade-resource/oss/endpoint/put-file?code=${debugForm.value.code}`
- }
- }
-)
-
+);
// ===== methods =====
const rowSave = (row, done, loading) => {
add(row).then(
() => {
- onLoad(page.value)
- ElMessage.success('操作成功!')
- done()
+ onLoad(page.value);
+ ElMessage.success('操作成功!');
+ done();
},
error => {
- console.log(error)
- loading()
+ console.log(error);
+ loading();
}
- )
-}
+ );
+};
const rowUpdate = (row, index, done, loading) => {
update(row).then(
() => {
- onLoad(page.value)
- ElMessage.success('操作成功!')
- done()
+ onLoad(page.value);
+ ElMessage.success('操作成功!');
+ done();
},
error => {
- console.log(error)
- loading()
+ console.log(error);
+ loading();
}
- )
-}
+ );
+};
const rowDel = row => {
ElMessageBox.confirm('确定将选择数据删除?', '提示', {
@@ -252,120 +392,170 @@
cancelButtonText: '取消',
type: 'warning',
})
- .then(() => remove(row.id))
+ .then(() => patchDeleteApi(row.id)) // 直接传递ID
.then(() => {
- onLoad(page.value)
- ElMessage.success('操作成功!')
- })
-}
+ onLoad(page.value);
+ ElMessage.success('操作成功!');
+ });
+};
const searchReset = () => {
- query.value = {}
- onLoad(page.value)
-}
+ page.value.areaCode = '';
+ page.value.createUser = '';
+ page.value.fileName = '';
+ page.value.lotTypeId = '';
+ page.value.currentPage = 1;
+ page.value.pageSize = 20;
+ onLoad(page.value);
+};
const searchChange = (params, done) => {
- query.value = params
- page.value.currentPage = 1
- onLoad(page.value, params)
- done()
-}
-
+ page.value.currentPage = 1;
+ page.value.lotTypeId = params.patches_type_desc;
+ page.value.createUser = params.user_name;
+ page.value.fileName = params.file_name;
+ page.value.areaCode = params.areaName;
+ page.value.createUser = params.user_name;
+ onLoad(page.value);
+ done();
+};
const selectionChange = list => {
- selectionList.value = list
-}
+ selectionList.value = list;
+};
const selectionClear = () => {
- selectionList.value = []
- crudRef.value?.toggleSelection()
-}
-
-const handleEnable = row => {
- ElMessageBox.confirm('是否确定启用这条配置?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- })
- .then(() => enable(row.id))
- .then(() => {
- onLoad(page.value)
- ElMessage.success('操作成功!')
- crudRef.value?.toggleSelection()
- })
-}
-
-const handleDisable = row => {
- ElMessageBox.confirm('是否确定禁用用这条配置?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- })
- .then(() => disable(row.id))
- .then(() => {
- onLoad(page.value)
- ElMessage.success('操作成功!')
- crudRef.value?.toggleSelection()
- })
-}
+ selectionList.value = [];
+ crudRef.value?.toggleSelection();
+};
const handleDebug = row => {
- box.value = true
- debugForm.value.code = row.ossCode
- debugForm.value.backgroundUrl = ''
-}
-
-const handleSubmit = (formData, done) => {
- ElMessage.success(`获取到图片地址:[${formData.backgroundUrl}]`)
- done()
-}
-
+ box.value = true;
+};
const beforeOpen = (done, type) => {
- if (['edit', 'view'].includes(type)) {
- getDetail(form.value.id).then(res => {
- form.value = res.data.data
- })
- }
- done()
-}
+ // if (['edit', 'view'].includes(type)) {
+ // getDetail(form.value.id).then(res => {
+ // form.value = res.data.data
+ // })
+ // }
+ done();
+};
const currentChange = currentPage => {
- page.value.currentPage = currentPage
-}
+ page.value.currentPage = currentPage;
+};
const sizeChange = pageSize => {
- page.value.pageSize = pageSize
-}
+ page.value.pageSize = pageSize;
+};
const refreshChange = () => {
- onLoad(page.value, query.value)
-}
+ onLoad(page.value);
+};
const onLoad = (pageInfo, params = {}) => {
- loading.value = true
- getListPage(pageInfo.currentPage, pageInfo.pageSize, Object.assign({}, params, query.value)).then(res => {
- const d = res.data.data
- page.value.total = d.total
- data.value = d.records
- loading.value = false
- selectionClear()
- })
-}
+ const searchparams = {
+ current: pageInfo.currentPage,
+ size: pageInfo.pageSize,
+ lotTypeId: pageInfo.lotTypeId,
+ fileName: pageInfo.fileName,
+ areaCode: pageInfo.areaCode,
+ createUser: pageInfo.createUser,
+ };
+ loading.value = true;
+ spotManagementTableApi(searchparams).then(res => {
+ const d = res.data.data;
+ page.value.total = d.total;
+ data.value = d.records.map(i => ({
+ ...i,
+ dataFrom: i.date_from === 0 ? '本地上传' : '国土调查云',
+ areaName: findAreaName(i.area_code, regionalData.value, true)
+ }));
+ loading.value = false;
+ selectionClear();
+ });
+};
// 图斑详情/编辑
const uploadPatch = (row, type = 'detail') => {
+ detailid.value = row.id;
uploadPatchDialog.value = true;
spotDetailsTitle.value = type === 'detail' ? '图斑详情' : '图斑编辑';
-}
+ detailList.value = row;
+};
// 跳转至图斑类型管理页面
const goTypeManagement = () => {
- router.push({ path: '/resource/patchTypeManagement' })
-}
+ router.push({ path: '/resource/patchTypeManagement' });
+};
// 下载图斑
const downloadPatch = () => {
- crudRef.value?.download()
-}
+ if (!selectionList.value.length) {
+ return ElMessage.warning('请选择需要导出的数据');
+ }
+ const a = selectionList.value.map(i => Number(i.id));
+ exportExcel(a).then(res => {
+ const elink = document.createElement('a');
+ elink.download = new Date().getTime() + '.xls';
+ elink.style.display = 'none';
+ const blob = new Blob([res.data], {
+ type: 'application/x-msdownload',
+ });
+ elink.href = URL.createObjectURL(blob);
+ document.body.appendChild(elink);
+ elink.click();
+ document.body.removeChild(elink);
+ loading.value = false;
+ });
+};
+// 图斑上传
+const uploadFlightFile = (file, t) => {
+loading.value = true
+ const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
+ if (!['kmz', 'kml', 'zip'].includes(fileSuffix)) {
+ return ElMessage.error('请上传zip/kmz/kml格式的文件');
+ }
+
+ let data = new FormData();
+ let type = t === '3' ? '' : t;
+ const params = {
+ file: file,
+ fileName: ruleForm.name,
+ LotTypeId: ruleForm.region,
+ };
+
+ Object.keys(params).forEach(key => {
+ data.append(key, params[key]);
+ });
+
+ uploadManagementApi(data).then(res => {
+ if (res.data.code !== 0) {
+ return ElMessage.error('上传失败');
+ }
+
+ ElMessage.success('上传成功');
+
+ box.value = false;
+
+ ruleForm.name = '';
+ ruleForm.region = '';
+
+ if (ruleFormRef.value) {
+ ruleFormRef.value.resetFields();
+ }
+loading.value = true
+ searchReset();
+ });
+};
+provide('searchReset', searchReset);
+onMounted(() => {
+ getsearchManagementApi();
+ getlistOfSpotTypesApi();
+});
</script>
-<style scoped lang="scss"></style>
\ No newline at end of file
+<style scoped lang="scss">
+.center-align :deep(.el-form-item__content) {
+ justify-content: center !important;
+}
+</style>
--
Gitblit v1.9.3