feat:新增/编辑文件夹

张含笑

2025-10-31 69cc010e3c7f994f302426c6f3acdc15c2b49cbb

 src/views/layerManagement/components/folderFile.vue

@@ -2,7 +2,6 @@
  <div class="rightContainer">
    <div class="contenttitle">文件夹信息</div>
    <div class="centerBox">

      <div class="itemRow">
        <div class="label">文件夹名称</div>
        <div>
@@ -16,7 +15,7 @@
            class="ztzf-layer-search filter-item"
            popper-class="ztzf-select-popper"
            @change="handleTypeChange"
            v-model="formData.type"
            v-model="formData.event_type"
            placeholder="请选择"
            clearable
          >
@@ -28,12 +27,12 @@
            />
          </el-select>
          <el-select
            v-model="formData.algorithm"
            v-model="formData.algorithm_name"
            popper-class="ztzf-select-popper"
            class="ztzf-layer-search"
            placeholder="请选择"
            clearable
            :disabled="!formData.type"
            :disabled="!formData.event_type"
          >
            <el-option
              v-for="item in algorithms"
@@ -45,25 +44,33 @@
        </div>
      </div>
    </div>
    <div class="detailInfo">
    <div class="detailInfo" v-if="layerParams.editFolder">
      <div class="infpItem">
        <div class="itemData">
          <div class="title">围栏总数量</div>
          <div class="num"><span>{{totalCount}}</span>个</div>
          <div class="num">
            <span>{{ formData.total_count }}</span> 个
          </div>
        </div>
        <div class="itemData">
          <div class="title">围栏总面积</div>
          <div class="num"><span>{{totalArea}}</span>m²</div>
          <div class="num">
            <span>{{ formData.total_area }}</span> m²
          </div>
        </div>
      </div>
      <div class="infpItem">
        <div class="itemData">
          <div class="title">创建时间</div>
          <div class="num"><span>{{formData?.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>{{formData?.create_name}}</span></div>
          <div class="num">
            <span>{{ formData?.create_name }}</span>
          </div>
        </div>
      </div>
    </div>
@@ -75,86 +82,130 @@
</template>

<script setup>
import { deitFenceApi } from '@/api/layer/index';
import {
  getTicketInfo,
} from '@/api/tickets/ticket';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { deleteFolderApi, deitFolderApi, addFolderApi } from '@/api/layer/index';
import { getTicketInfo } from '@/api/tickets/ticket';
const layerParams = inject('layerParams');
const types = ref([]) //工单类型
const allAlgorithms = ref([])
const algorithms = ref([])

const types = ref([]); //工单类型
const allAlgorithms = ref([]);
const algorithms = ref([]);
const formData = ref({
  folder_id: '',
  category_id: '',
  name: '',
  description: '',
  is_enabled: false,
  area: '',
  altitude: '',
  control_start_time: '',
  control_end_time: '',
  geo_data: '',
  algorithm:'',
  type: '',
  event_type: '',
  algorithm_name: '',
  total_count: 0,
  total_area: 0,
});
const detailData = ref(null)
const totalArea = ref(null)
const totalCount = ref(null)
detailData.value = layerParams.value.editDetailData
totalArea.value = layerParams.value.total_area
totalCount.value = layerParams.value.total_count

const detailData = ref(null);
detailData.value = layerParams.value.editFolderData;
const getTicketInfoData = async () => {
  const response = await getTicketInfo()
  const { dept_data, event_type, ai_type, info } = response.data.data
  allAlgorithms.value = info
  const response = await getTicketInfo();
  const { dept_data, event_type, ai_type, info } = response.data.data;
  allAlgorithms.value = info;
  types.value = Object.entries(event_type).map(([key, value]) => ({
    label: value,
    value: key,
  }))

}
const handleTypeChange=(typeValue)=>{

  const matchedCategory = allAlgorithms.value.find(category => category.dict_key === typeValue)
  }));
};
const handleTypeChange = typeValue => {
  const matchedCategory = allAlgorithms.value.find(category => category.dict_key === typeValue);
  if (!matchedCategory || !matchedCategory.algorithms || matchedCategory.algorithms.length === 0) {
    // 无匹配的算法时清空
    algorithms.value = []
    return
    algorithms.value = [];
    return;
  }
  algorithms.value = matchedCategory.algorithms.map(algo => ({
    label: algo.dict_value,
    value: algo.dict_key,
    dict_key: algo.dict_key,
    dict_value: algo.dict_value,
  }))
  console.log(' algorithms.value ', algorithms.value );
}
  }));
};
const clearAllData = () => {
  detailData.value = {}
  // 清空回显相关数据
  formData.value = {
    category_id: '',
    name: '',
    event_type: '',
    algorithm_name: '',
    total_count: 0,
    total_area: 0,
    create_time: '',
    create_name: '',
  };
  algorithms.value = [];
  detailData.value = {};
  totalArea.value = null;
  totalCount.value = null;
  // 重置判断状态（可选，根据业务需求是否需要）
  layerParams.value.decideWhetherToAddOrEdit = 1;
  // 重置面板状态和缓存数据
  layerParams.value.addFolder = false;
  layerParams.value.editFolder = false;
  layerParams.value.editDetailData = null;
  layerParams.value.polygonPosition = null;
};
const cancelHandel = () => {
  clearAllData()

  clearAllData();
};
const submitHandle = () => {

  clearAllData()

  const params = {
    category_id: layerParams.value.fileType === 1 ? 1 : 2,
    name: formData.value.name,
    event_type: formData.value.event_type,
    algorithm_name: formData.value.algorithm_name,
  };
  // 如果是编辑模式，才添加 id
  if (layerParams.value.addAnEditingFolder === 2) {
    params.id = detailData.value.id;
  }
  if (layerParams.value.addAnEditingFolder === 1) {
    // 文件夹新增
    addFolderApi(params).then(res => {
      if (res.status === 200) {
        ElMessage({
          message: '新增成功',
          type: 'success',
        });
      }
    });
  } else {
    //文件夹编辑
    deitFolderApi(params).then(res => {
      if (res.status === 200) {
        ElMessage({
          message: '编辑成功',
          type: 'success',
        });
      }
    });
  }
  clearAllData();
};
onMounted(() => {
  getTicketInfoData()
onMounted(async () => {

  await getTicketInfoData();
  const addOrEditStatus = layerParams.value.addAnEditingFolder || 1;
  //  判断是否有编辑数据，有则回显
  if (detailData.value && addOrEditStatus === 2) {
    const editData = detailData.value;
    formData.value = {
      ...formData.value,
      category_id: editData.category_id,
      name: editData.name,
      event_type: editData.event_type, // 回显“关联算法类型”值
      algorithm_name: editData.algorithm_name, // 回显“算法”值
  
      total_count: editData.total_count,
      total_area: editData.total_area,
      create_time: editData.create_time ? dayjs(editData.create_time).format('YYYY年MM月DD日') : '',
      create_name: editData.create_name,
    };
    if (formData.value.event_type) {
      handleTypeChange(formData.value.event_type);

      setTimeout(() => {
        formData.value.algorithm_name = editData.algorithm_name;
      }, 100);
    }
  }
});
</script>