feat:新增/编辑

张含笑

2025-10-29 e17c0a2eceac008182504bdd40143658ab494c0b

 src/views/layerManagement/components/rightEdit.vue

@@ -18,13 +18,13 @@
      <div class="itemRow">
        <div class="label">围栏名称</div>
        <div>
          <el-input class="ztzf-input inputName" v-model="detailData.name" placeholder="围栏名称" />
          <el-input class="ztzf-input inputName" v-model="formData.name" placeholder="围栏名称" />
        </div>
      </div>
      <div class="itemRow">
        <div class="label">围栏备注</div>
        <div>
          <el-input v-model="detailData.description" :rows="5" type="textarea" placeholder="请输入" />
          <el-input v-model="formData.description" :rows="5" type="textarea" placeholder="请输入" />
        </div>
      </div>
    </div>
@@ -42,11 +42,11 @@
      <div class="infpItem">
        <div class="itemData">
          <div class="title">创建时间</div>
          <div class="num"><span>{{detailData.create_time}}</span></div>
          <div class="num"><span>{{formData?.create_time}}</span></div>
        </div>
        <div class="itemData">
          <div class="title">创建人</div>
          <div class="num"><span>{{detailData.create_name}}</span></div>
          <div class="num"><span>{{formData?.create_name}}</span></div>
        </div>
      </div>
    </div>
@@ -61,6 +61,28 @@
import { deitFenceApi } from '@/api/layer/index';
const emit = defineEmits([ 'callParentMethod']);
const layerParams = inject('layerParams');
const options = [
  {
    value: 'Option1',
    label: '111',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const formData = ref({
  folder_id: '',
  name: '',
@@ -73,15 +95,29 @@
  geo_data: '',
});
const detailData = ref(null)
const totalArea = ref(null)
const totalCount = ref(null)
detailData.value = layerParams.value.editDetailData
const totalArea = layerParams.value.total_area
const totalCount = layerParams.value.total_count
console.log('layerParams',detailData.value
);
 totalArea.value = layerParams.value.total_area
 totalCount.value = layerParams.value.total_count
console.log('2222222',layerParams.value.decideWhetherToAddOrEdit);

const cancelHandel = () => {
const clearAllData = () => {
  detailData.value = {}
  // 清空回显相关数据
  detailData.value = {};
  totalArea.value = null;
  totalCount.value = null;
  // 重置判断状态（可选，根据业务需求是否需要）
  layerParams.value.decideWhetherToAddOrEdit = 1;
  // 重置面板状态和缓存数据
  layerParams.value.addNest = false;
  layerParams.value.editNest = false;
  layerParams.value.editDetailData = null;
  layerParams.value.polygonPosition = null;
};
const cancelHandel = () => {
   clearAllData()
   emit('callParentMethod');
};
const submitHandle = () => {
@@ -99,10 +135,57 @@
  console.log('保存',res);
  
})
  layerParams.value.addNest = false;
  layerParams.value.editNest = false;
  clearAllData()
   emit('callParentMethod');
};
onMounted(() => {
  // 先清空表单，避免残留旧数据
  formData.value = {
    folder_id: '',
    name: '',
    description: '',
    is_enabled: false,
    area: '',
    altitude: '',
    control_start_time: '',
    control_end_time: '',
    geo_data: '',
  };

  // 获取判断状态（默认设为 1，防止未定义时报错）
  const addOrEditStatus = layerParams.value.decideWhetherToAddOrEdit || 1;

  if (addOrEditStatus === 2) {
    // 编辑状态：回显数据（从 layerParams.editDetailData 读取）
    const editData = layerParams.value.editDetailData || {};
    // 表单数据回显（将编辑数据赋值给 formData，与表单字段一一对应）
    formData.value = {
      folder_id: editData.folder_id || '', // 文件夹ID（需与下拉框 options 的 value 匹配）
      name: editData.name || '', // 围栏名称
      description: editData.description || '', // 围栏备注
      is_enabled: editData.is_enabled || false, // 是否启用
      area: editData.area || '', // 面积
      altitude: editData.altitude || '', // 高度
      control_start_time: editData.control_start_time || '', // 控制开始时间
      control_end_time: editData.control_end_time || '', // 控制结束时间
      geo_data: editData.geo_data || '', // 地理数据（编辑时回显原始坐标）
    };
    // 下拉框回显（若 editData 中有文件夹名称，需匹配 options 的 value）
    // 假设 editData.folder_name 是文件夹名称，需找到对应的 value 赋值给 formData.area
    const matchedFolder = options.find(item => item.label === (editData.folder_name || ''));
    if (matchedFolder) {
      formData.value.area = matchedFolder.value;
    }

    // 回显总数和总面积（编辑时可能需要展示）
    totalArea.value = layerParams.value.total_area || 0;
    totalCount.value = layerParams.value.total_count || 0;
  } else {
    // 新增状态：不回显数据，清空总数和总面积
    totalArea.value = null;
    totalCount.value = null;
  }
});
</script>

<style scoped lang="scss">