feat: save

src/app/criminal/view/example/edit.vue

@@ -7,6 +7,47 @@
         placeholder="请输入案件名称"
       />
     </el-form-item>
+
+    <el-form-item label="案件编号">
+      <el-input
+        v-model="bindExample.caseTitle"
+        maxlength="50"
+        placeholder="请输入案件编号"
+      />
+    </el-form-item>
+
+    <el-form-item label="案件类别">
+      <el-input
+        v-model="bindExample.caseTitle"
+        maxlength="50"
+        placeholder="请输入案件类别"
+      />
+    </el-form-item>
+
+    <el-form-item label="案件区域">
+      <el-input
+        v-model="bindExample.caseTitle"
+        maxlength="50"
+        placeholder="案件区域"
+      />
+    </el-form-item>
+
+    <el-form-item label="案件地点">
+      <el-input
+        v-model="bindExample.caseTitle"
+        maxlength="50"
+        placeholder="案件地点"
+      />
+    </el-form-item>
+
+    <el-form-item label="经纬度">
+      <el-input
+        v-model="bindExample.caseTitle"
+        maxlength="50"
+        placeholder="经纬度"
+      />
+    </el-form-item>
+
     <el-form-item label="详细地址">
       <el-input
         v-model="bindExample.mapUrl"
@@ -31,14 +72,19 @@ import { Search } from "@element-plus/icons-vue";
 import { selectMapImage } from "@/view/case/quisk";
 
 const props = defineProps<{ example?: Example }>();
-const bindExample = ref<Example>(props.example ? { ...props.example } : ({} as Example));
+const bindExample = ref<Example>(
+  props.example ? { ...props.example } : ({} as Example)
+);
 
 defineExpose<QuiskExpose>({
   async submit() {
     if (!bindExample.value.caseTitle || !bindExample.value.caseTitle.trim()) {
       ElMessage.error("案件名称不能为空");
       throw "案件名称不能为空";
-    } else if (!bindExample.value.latAndLong || !bindExample.value.latAndLong.trim()) {
+    } else if (
+      !bindExample.value.latAndLong ||
+      !bindExample.value.latAndLong.trim()
+    ) {
       ElMessage.error("详细地址不能为空");
       throw "详细地址不能为空！";
     }

src/app/criminal/view/example/quisk.ts

@@ -7,6 +7,6 @@ export const addExample = quiskMountFactory(Edit, {
 });
 
 export const editExample = quiskMountFactory(Edit, {
-  title: "编辑案件",
-  width: 500,
+  title: "案件信息",
+  width: 800,
 });

src/store/caseFile.ts

@@ -19,6 +19,8 @@ export interface CaseFileType {
   filesTypeId: number;
   filesTypeName: string;
   tbStatus: number;
+  childKey?: string;
+  filesTypeKey?: string;
   createTime: string;
   updateTime: string;
 }
@@ -39,6 +41,9 @@ export interface CaseFile {
 export const getCaseFileTypes = async () =>
   (await axios.get<CaseFileType[]>(caseFileTypes)).data;
 
+export const getCaseFileTypesQuery = async (key: string) =>
+  (await axios.get<CaseFileType[]>(`${caseFileTypes}?fileTypeKey=${key}`)).data;
+
 export const getCaseFiles = async (props: {
   caseId: number;
   filesTypeId?: number;

src/view/media/index.scss

@@ -24,7 +24,7 @@
     padding: 30px 0;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: space-evenly;
+    justify-content: flex-start;
     align-items: center;
     gap: 30px;
     .cover {
@@ -45,4 +45,18 @@
       }
     }
   }
+  .empty {
+    margin-top: 120px;
+    height: 100%;
+  }
+  .sub-tab {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+  :deep(.el-tabs__contentF) {
+    flex: 1;
+  }
+  .el-tab-pane {
+  }
 }

src/view/media/index.vue

@@ -22,53 +22,120 @@
           :label="sub.name"
           :name="sub.value"
         >
-          <div class="media-list">
-            <div v-for="i in 40" class="cover" @click="handerPhotoEdit">
-              <img src="https://placehold.co/600x400" />
-              <span class="title">{{ i }}.jpg</span>
+          <div class="media-list" v-if="files.length">
+            <div v-for="file in files" class="cover" @click="handerPhotoEdit">
+              <img :src="file.filesUrl" />
+              <span class="title">{{ file.filesTitle }}</span>
             </div>
           </div>
+          <el-empty v-else class="empty"></el-empty>
         </el-tab-pane>
       </el-tabs>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed, watchEffect, watch } from "vue";
 import comHead from "@/components/head/index.vue";
 import { title, desc } from "@/store/system";
 
-const currentTypeId = ref<number>(1);
-const options = ref([
-  { name: "现场照片", value: 1 },
-  { name: "痕迹物证", value: 2 },
-]);
-const subOptions = ref([
-  { name: "方位照片", value: 1 },
-  { name: "中心现场", value: 2 },
-  { name: "概貌照片", value: 3 },
-  { name: "细目照片", value: 4 },
-  { name: "重点部位", value: 5 },
-  { name: "尸体照片", value: 6 },
-  { name: "关联现场", value: 7 },
-  { name: "其他", value: 8 },
-]);
+import {
+  CaseFile,
+  CaseFileType,
+  getCaseFileTypesQuery,
+  getCaseFiles,
+  delCaseFile,
+  BoardType,
+} from "@/store/caseFile";
+import { RouteName, router } from "@/router";
+import { addCaseFile } from "../case/quisk";
 
-const subTabName = ref(1);
+const caseId = computed(() => {
+  const caseId = router.currentRoute.value.params.caseId;
+  if (caseId) {
+    return Number(caseId);
+  }
+});
+const currentTypeId = ref<number>();
+const options = ref<{ name: string; value: number; childKey?: string }[]>([]);
+const subOptions = ref<{ name: string; value: number }[]>([]);
+const files = ref<CaseFile[]>([]);
+const subTabName = ref();
 
-const handleSubtabClick = () => {};
-const handleUploadClick = () => {
+const handleSubtabClick = (value: number) => {
+  // console.log("handleSubtabClick", value);
+  // currentTypeId.value = value;
+};
+const handleUploadClick = async () => {
   console.log("handleUploadClick");
+  await addCaseFile({ caseId: caseId.value!, fileType: subTabName.value! });
+  refresh();
 };
 
 const handerPhotoEdit = () => {
   console.log("handerPhotoEdit");
-  
 };
+const initDefaultData = async () => {
+  const data = await getCaseFileTypesQuery("library");
+  const rootList = data.map((item) => {
+    return {
+      name: item.filesTypeName,
+      value: item.filesTypeId,
+      childKey: item.childKey,
+    };
+  });
+  options.value = rootList;
+  currentTypeId.value = rootList[0].value;
+
+  const secondData = rootList[0].childKey
+    ? await getCaseFileTypesQuery(rootList[0].childKey)
+    : [];
+  const secondList = secondData.map((item) => {
+    return {
+      name: item.filesTypeName,
+      value: item.filesTypeId,
+    };
+  });
+  subTabName.value = secondList[0].value;
+  subOptions.value = secondList;
+};
+watchEffect(() => caseId.value && subTabName.value && refresh());
 
+watch(currentTypeId, async (nVal, oVal) => {
+  if (oVal && nVal !== oVal) {
+    //切换时
+    const root = options.value.find((i) => i.value === nVal);
+    if (root) {
+      const secondData = root.childKey
+        ? await getCaseFileTypesQuery(root.childKey)
+        : [];
+      const secondList = secondData.map((item) => {
+        return {
+          name: item.filesTypeName,
+          value: item.filesTypeId,
+        };
+      });
+      subTabName.value = secondList[0].value;
+      subOptions.value = secondList;
+    }
+
+    //  const data = await getCaseFileTypesQuery("library");
+  }
+});
+const refreshRoot = async () => {
+  console.log("refreshRoot");
+};
+const refresh = async () => {
+  files.value = await getCaseFiles({
+    caseId: caseId.value!,
+    filesTypeId: subTabName.value,
+  });
+};
 onMounted(async () => {
   title.value = " xxxx | 媒体库";
   desc.value = "";
+  console.log("caseId", caseId.value);
+  initDefaultData();
 });
 </script>