feat:添加删除接口，调整绘制

张含笑

2025-09-01 f8681079a2acb7c0e7cacc6b67c5c99398181397

feat:添加删除接口，调整绘制

 src/api/patchManagement/index.js

@@ -94,4 +94,12 @@
        method: 'put',
        data
    })
}
// 删除数据
export const deletePatches = params => {
    return request({
        url: `/drone-device-core/patches/api/v1/Patches/deleteBatch`,
        method: 'delete',
        params,
    })
}

 src/views/resource/components/spotDetails.vue

@@ -26,10 +26,9 @@
                <template v-if="props.title === '图斑编辑' && item.editable">
                  <template v-if="item.name === '图斑类型'">
                    <el-select
                      v-model="item.value" 
                      v-model="item.value"
                      placeholder="请选择图斑类型"
                      style="width: 100%"
                    
                    >
                      <el-option
                        v-for="opt in spotTypeOptions"
@@ -79,10 +78,8 @@
              </el-table-column>
              <el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
                <template #default="scope">
                  <span class="operationspan">删除</span>
                  <span class="operationspan" @click.stop="handleSelectionChange(scope.row)"
                    >编辑</span
                  >
                  <span class="operationspan" @click="handleDelete(scope.row)">删除</span>
                  <span class="operationspan" @click="handleSelectionChange(scope.row)">编辑</span>
                </template>
              </el-table-column>
            </el-table>
@@ -120,13 +117,14 @@
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  patchEditApi,
  spotManagementTableApi,
  searchManagementApi,
  uploadManagementApi,
  tableMapListApi,
  deletePatches,
} from '@/api/patchManagement/index';
import { getCenterPoint } from '@/utils/cesium/mapUtil.js';
import { getPatchesSpotList } from '@/api/patchManagement/index';
@@ -164,39 +162,41 @@
const spotTypeOptions = ref([]);
const infoList = ref([
  { name: '文件名称', value: '', field: 'file_name', editable: true },
  { name: '图斑类型', value: '', field: 'lot_type_id', editable: true }, 
  { name: '图斑类型', value: '', field: 'lot_type_id', editable: true },
  { name: '图斑数量', value: '', field: 'patches_num', editable: false },
  { name: '异常图斑数量', value: '', field: 'exception_num', editable: false },
  { name: '行政区划', value: '', field: 'area_code', editable: false },
  { name: '行政区划', value: '', field: 'areaName', editable: false },
  { name: '数据来源', value: '', field: 'dataFrom', editable: false },
  { name: '创建时间', value: '', field: 'create_time', editable: false },
  { name: '创建人', value: '', field: 'user_name', editable: false },
])
watch(() => props.spotTypeOption, (newOptions) => {
  if (newOptions) {
    spotTypeOptions.value = newOptions.map(opt => ({
      label: opt.label,
      value: String(opt.value) 
    }));
  }
}, { immediate: true });
]);
watch(
  () => props.spotTypeOption,
  newOptions => {
    if (newOptions) {
      spotTypeOptions.value = newOptions.map(opt => ({
        label: opt.label,
        value: String(opt.value),
      }));
    }
  },
  { immediate: true }
);
watch(
  () => props.detailList,
  newVal => {
    if (newVal) {
    console.log('详情',newVal);
    
      updateInfoList(newVal);
    }
  },
  { immediate: true }
);
// 将 lot_type_id 转换为对应的 label
const getPatchTypeLabel = (lotTypeId) => {
const getPatchTypeLabel = lotTypeId => {
  const option = spotTypeOptions.value.find(opt => opt.value === String(lotTypeId));
  return option ? option.label : '';
};
const updateInfoList = (detailData) => {
const updateInfoList = detailData => {
  infoList.value = infoList.value.map(item => {
    let value = detailData[item.field] !== undefined ? detailData[item.field] : item.value;
    // 处理图斑类型字段
@@ -207,7 +207,7 @@
          ...item,
          value: detailData.patches_type_desc,
          // 保留原始 lot_type_id 用于提交
          originalValue: detailData.lot_type_id
          originalValue: detailData.lot_type_id,
        };
      }
      // 否则根据 lot_type_id 查找对应的 label
@@ -215,14 +215,14 @@
        return {
          ...item,
          value: getPatchTypeLabel(detailData.lot_type_id),
          originalValue: detailData.lot_type_id
          originalValue: detailData.lot_type_id,
        };
      }
    }
    

    return {
      ...item,
      value: value
      value: value,
    };
  });
};
@@ -236,8 +236,10 @@
    patchesInfoId: props.detailid,
  };
  tableMapListApi(params).then(res => {
    console.log('地图表格数据', res.data.data);
    tableData.value = res.data.data;
    tableData.value = res.data.data.map(item => ({
      ...item,
      dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
    }));
    // 先清空地图现有图斑
    tbJwdList = [];
    viewer?.entities.removeAll(); // 清除所有实体
@@ -324,21 +326,21 @@
// 鼠标触发点击图斑高亮 pick：可以获取当前图斑数据
const spotHighlighting = (click, pick, viewer) => {
  if (!pick || !(pick.id?.customType == 'pattern_spot_polygon')) return;
      let clickTableID = tableData.value.findIndex(i => i.id == pick.id?.customInfo.id)
        // 计算表格滚动至中间位置
    const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr')
    let targetRow = rows[clickTableID]
    nextTick(() => {
        const table = polygonTableEle?.value
        if (!table) return
        if (targetRow) {
            targetRow.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
            })
            polygonTableEle?.value.setCurrentRow(tableData.value[clickTableID])
        }
    })
  let clickTableID = tableData.value.findIndex(i => i.id == pick.id?.customInfo.id);
  // 计算表格滚动至中间位置
  const rows = polygonTableEle?.value.$el.querySelectorAll('.el-table__body tr');
  let targetRow = rows[clickTableID];
  nextTick(() => {
    const table = polygonTableEle?.value;
    if (!table) return;
    if (targetRow) {
      targetRow.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
      polygonTableEle?.value.setCurrentRow(tableData.value[clickTableID]);
    }
  });
  // 表格也对应选中数据 TODO
  const data = pick.id?.customInfo;
  // 高亮图斑
@@ -403,7 +405,6 @@
};
// 编辑
const handleSelectionChange = row => {
  // console.log('编辑', row.id);
  let curRowIsSelect = row;
  selectionIds.value = row.id;
  selectionList.value = row;
@@ -416,21 +417,35 @@
    isDrawPolygon.value = false;
  }
};
// 删除
const handleDelete = row => {
  ElMessageBox.confirm('确认删除当前行图斑?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deletePatches({ ids: row.id }).then(res => {
      if (res.data.code !== 0) return ElMessage.warning('删除失败');
      ElMessage.success('删除成功');
      getTableList();
    });
  });
};

// 完成
const handleSave = () => {
  const fileNameItem = infoList.value.find(item => item.name === '文件名称');
  const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
  
  const updateParams = {
    file_name: fileNameItem?.value || '',
    lot_type_id: patchTypeItem?.originalValue || patchTypeItem?.value || '', 
    type: patchTypeItem?.originalValue || patchTypeItem?.value || '', 
    lot_type_id: patchTypeItem?.originalValue || patchTypeItem?.value || '',
    type: patchTypeItem?.originalValue || patchTypeItem?.value || '',
    id: props.detailList.id,
  };

  patchEditApi(updateParams).then(res => {
  console.log('111',res.data.data);
  
    console.log('111', res.data.data);

    ElMessage.success(res.data.data);
    refreshonload();
    uploadPatchDialog.value = false;

 src/views/resource/patchManagement.vue

@@ -88,7 +88,6 @@
  
  </basic-container>
</template>

<script setup>
import {
  spotManagementTableApi,
@@ -151,6 +150,8 @@
const selectionList = ref([]);

const option = ref({
 align: 'center', 
  headerAlign: 'center',
  addBtn: false,
  tip: false,
  searchShow: true,
@@ -211,8 +212,9 @@
    },
    {
      label: '行政区划',
      prop: 'area_code',
      prop: 'areaName',
      span: 24,
      width:180,
      searchLabelWidth: 100,
      search: true,
      searchSpan: 4,
@@ -262,7 +264,6 @@
// ===== computed =====
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,
@@ -272,13 +273,11 @@

const ids = computed(() => selectionList.value.map(ele => ele.id).join(','));
// 获取行政区划
const regionalData = ref(null)
const regionalData = ref([])
const requestDockInfo = () => {
  getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => { 
    const rawData = res.data.data ? [res.data.data] : []; 
    regionalData.value = rawData
        // console.log('quyu',regionalData.value);
    // 过滤函数
    regionalData.value = rawData; 
    const filterTree = nodes => {
      return nodes.filter(node => {
        const nodeCodeStr = node.id.toString();
@@ -295,6 +294,7 @@
      });
    };
    deptTreeData.value = filterTree(rawData);
    onLoad(page.value); 
  });
};
// 获取搜索数据
@@ -398,7 +398,7 @@
  page.value.lotTypeId = params.patches_type_desc;
  page.value.createUser = params.user_name;
  page.value.fileName=params.file_name
  page.value.areaCode=params.area_code
  page.value.areaCode=params.areaName
  page.value.createUser= params.user_name
  onLoad(page.value);
  done();
@@ -453,28 +453,41 @@
    .map(i=>({
      ...i,
      dataFrom:i.date_from === 0? '本地上传':'国土调查云',
      // areaName: findAreaName(regionalData.value, i.area_code)
      areaName: findAreaName(i.area_code)
    }));
     console.log('表格数据',data.value );
    loading.value = false;
    selectionClear();
  });
};
// const findAreaName = (nodes, areaCode) => {
//   if (!nodes || nodes.length === 0) return '';
//   for (const node of nodes) {
//     if (node.id === areaCode) {
//       return node.name;
//     }
    
//     if (node.childrens && node.childrens.length > 0) {
//       const found = findAreaName(node.childrens, areaCode);
//       if (found) return found;
//     }
//   }
  
//   return '';
// };
const findAreaName = (areaCode) => {
  const nodes = regionalData.value;
  if (!nodes || nodes.length === 0) return areaCode;

  const normalizeCode = (code) => {
    if (!code) return '';
    const strCode = String(code).replace(/0+$/, '');
    return strCode.length >= 6 ? strCode : '';
  };
  const targetCode = normalizeCode(areaCode);
  const findInTree = (treeNodes, needFullPath = false, parentPath = []) => {
    for (const node of treeNodes) {
      const currentPath = [...parentPath, node.name];
      
      if (normalizeCode(node.id) === targetCode) {
        return needFullPath ? currentPath.join('/') : node.name;
      }

      if (node.childrens?.length > 0) {
        const found = findInTree(node.childrens, needFullPath, currentPath);
        if (found) return found;
      }
    }
    return null;
  };

  return findInTree(nodes, true) || areaCode;
};
// 图斑详情/编辑
const uploadPatch = (row, type = 'detail') => {
  detailid.value = row.id;
@@ -533,7 +546,6 @@
};
provide('searchReset', searchReset);
onMounted(() => {
  requestDockInfo()
  getsearchManagementApi();

});

 src/views/resource/patchTypeManagement.vue

@@ -1,15 +1,28 @@
<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 #search-menu="{ row, size }">
        <el-button icon="el-icon-back" @click="goPatchManagement">
          返回
        </el-button>
        <el-button icon="el-icon-back" @click="goPatchManagement"> 返回 </el-button>
      </template>

      <template #status="{ row }">
        <el-tag>{{ row.statusName }}</el-tag>
      </template>
@@ -21,28 +34,34 @@
</template>

<script setup>
import {searchManagementApi,listOfSpotTypesApi,spotTypesCreateApi,editSpotTypeApi,deleteSpotTypeApi} from '@/api/patchManagement/index'
import { ref, computed, watch } from 'vue'
import { enable, disable } from '@/api/resource/oss'
import { useStore } from 'vuex'
import func from '@/utils/func'
import { useRouter } from 'vue-router'
import {
  searchManagementApi,
  listOfSpotTypesApi,
  spotTypesCreateApi,
  editSpotTypeApi,
  deleteSpotTypeApi,
} from '@/api/patchManagement/index';
import { ref, computed, watch } from 'vue';
import { enable, disable } from '@/api/resource/oss';
import { useStore } from 'vuex';
import func from '@/utils/func';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
const store = useStore()
const router = useRouter()
const store = useStore();
const router = useRouter();
// ---------------- data ----------------
const form = ref({})
const query = ref({})
const form = ref({});
const query = ref({});
const creatorOption = ref([]);
const loading = ref(true)
const loading = ref(true);
const page = ref({
  pageSize: 20,
  currentPage: 1,
  total: 0,
  lotValue:"",
  userName:''
})
const selectionList = ref([])
  lotValue: '',
  userName: '',
});
const selectionList = ref([]);
const option = ref({
  addBtn: true,
  addBtnText: '新增类型',
@@ -50,7 +69,7 @@
  searchShow: true,
  searchMenuSpan: 16,
  searchMenuPosition: 'right',
  border: true,    
  border: true,
  index: true,
  selection: true,
  grid: false,
@@ -70,112 +89,108 @@
      prop: 'patches_type',
      search: true,
      searchSpan: 4,
      rules: [
        { required: true, message: '请输入类型名称', trigger: 'blur' },
      ],
      rules: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
    },
    {
      label: '创建时间',
      prop: 'create_time',
      addDisplay: false, 
      addDisplay: false,
      editDisplay: false,
      rules: [
        { required: true, message: '请输入创建时间', trigger: 'blur' },
      ],
      rules: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
    },
    {
      label: '创建人',
      prop: 'user_name',
      search: true,
       addDisplay: false, 
       editDisplay: false,
      addDisplay: false,
      editDisplay: false,
      searchSpan: 4,
       type: 'select',
      type: 'select',
      dicData: creatorOption,
      props: {
        label: 'label',
        value: 'value',
      },
      rules: [
        { required: true, message: '请输入创建人', trigger: 'blur' },
      ],
      rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
    },
  ],
})
});

const data = ref([])
const data = ref([]);
// 获取搜索数据
const getsearchManagementApi = () => {
  searchManagementApi().then(res => {
   creatorOption.value = res.data.data.user_names.map(item => ({
      label: item,
      value: item,
    }));
   
    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);
      }
    });
    creatorOption.value = Array.from(creatorOptionuniqueMap).map(([key, value]) => ({
      label: value,
      value: value,
    })); 
  });
};


// ---------------- watch ----------------
watch(
  () => form.value.category,
  () => {
    const category = func.toInt(form.value.category)
    const category = func.toInt(form.value.category);
    option.value.column.filter(item => {
      if (item.prop === 'appId') {
        item.display = category === 4
        item.display = category === 4;
      }
    })
    });
  }
)


);

// ---------------- computed ----------------
const permission = computed(() => store.getters.permission)
const permission = computed(() => store.getters.permission);
const permissionList = computed(() => ({
  addBtn: validData(permission.value.oss_add),
  viewBtn: validData(permission.value.oss_view),
  delBtn: validData(permission.value.oss_delete),
  editBtn: validData(permission.value.oss_edit),
}))
}));

const ids = computed(() => {
  return selectionList.value.map(ele => ele.id).join(',')
})
  return selectionList.value.map(ele => ele.id).join(',');
});

// ---------------- methods ----------------
const rowSave = (row, done, loadingFn) => {
const createParams ={
  patches_type:row.patches_type
,
}
  const createParams = {
    patches_type: row.patches_type,
  };
  spotTypesCreateApi(createParams).then(
    () => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
      done()
      onLoad(page.value);
      ElMessage.success('操作成功!');
      done();
    },
    error => {
      console.log(error)
      loadingFn()
      console.log(error);
      loadingFn();
    }
  )
}
  );
};

const rowUpdate = (row, index, done, loadingFn) => {
  editSpotTypeApi(row).then(
    (res) => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
      done()
    res => {
      onLoad(page.value);
      ElMessage.success('操作成功!');
      done();
    },
    error => {
      console.log(error)
      loadingFn()
      console.log(error);
      loadingFn();
    }
  )
}
  );
};

const rowDel = row => {
  ElMessageBox.confirm('确定将选择数据删除?', '提示', {
@@ -185,37 +200,35 @@
  })
    .then(() => deleteSpotTypeApi([row.id]))
    .then(() => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
    })
}
      onLoad(page.value);
      ElMessage.success('操作成功!');
    });
};

const searchReset = () => {
page.value.userName=''
page.value.lotValue =''
page.value.currentPage=1
page.value.pageSize=20
  onLoad(page.value)
}
  page.value.userName = '';
  page.value.lotValue = '';
  page.value.currentPage = 1;
  page.value.pageSize = 20;
  onLoad(page.value);
};

const searchChange = (params, done) => {
  page.value.currentPage = 1
  page.value.lotValue = params.patches_type
  page.value.userName = params.user_name
  onLoad(page.value)
  done()
}
  page.value.currentPage = 1;
  page.value.lotValue = params.patches_type;
  page.value.userName = params.user_name;
  onLoad(page.value);
  done();
};

const selectionChange = list => {


  // selectionList.value = list
}
};

const selectionClear = () => {
  selectionList.value = []
  selectionList.value = [];
  // crudRef.value.toggleSelection()
}
};

const handleEnable = row => {
  ElMessageBox.confirm('是否确定启用这条配置?', '提示', {
@@ -225,11 +238,11 @@
  })
    .then(() => enable(row.id))
    .then(() => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
      onLoad(page.value);
      ElMessage.success('操作成功!');
      // crudRef.value.toggleSelection()
    })
}
    });
};

const handleDisable = row => {
  ElMessageBox.confirm('是否确定禁用这条配置?', '提示', {
@@ -239,12 +252,11 @@
  })
    .then(() => disable(row.id))
    .then(() => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
      onLoad(page.value);
      ElMessage.success('操作成功!');
      // crudRef.value.toggleSelection()
    })
}

    });
};

const beforeOpen = (done, type) => {
  // if (['edit', 'view'].includes(type)) {
@@ -252,45 +264,45 @@
  //   //   form.value = res.data.data
  //   // })
  // }
  done()
}
  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, query.value);
};

const onLoad = (pageParam, params = {}) => {
const searchparams ={
  current:pageParam.currentPage,
  size:pageParam.pageSize,
  lotValue:pageParam.lotValue,
  userName:pageParam.userName
}
  loading.value = true
  const searchparams = {
    current: pageParam.currentPage,
    size: pageParam.pageSize,
    lotValue: pageParam.lotValue,
    userName: pageParam.userName,
  };
  loading.value = true;
  listOfSpotTypesApi(searchparams).then(res => {
    const resData = res.data.data
    page.value.total = resData.total
    data.value = resData.records
    loading.value = false
    selectionClear()
  })
}
    const resData = res.data.data;
    page.value.total = resData.total;
    data.value = resData.records;
    loading.value = false;
    selectionClear();
  });
};

// ---------------- extra ----------------
const goPatchManagement = () => {
  router.push({ path: '/resource/patchManagement' })
}
  router.push({ path: '/resource/patchManagement' });
};

// ---------------- utils ----------------
function validData (value) {
  return value !== undefined && value !== null && value !== false
function validData(value) {
  return value !== undefined && value !== null && value !== false;
}

onMounted(() => {
@@ -298,4 +310,4 @@
});
</script>

<style scoped lang="scss"></style>
<style scoped lang="scss"></style>