1

src/components/viewImg/index.vue

@@ -113,13 +113,15 @@ const initFileList = ref([
   // "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
 ]);
 const urlFilter = (url) => {
+  if (!url) return "";
   const fileType = url.substring(url.lastIndexOf(".")).toLowerCase();
   console.log(url, fileType, "urlFilter");
   return fileList.value.includes(fileType) ? fileImg : url ;
  }
 watchEffect(() => {
   if (props.list.length) {
-    let newlist = props.list.map(item => item.filesUrl);
+    console.log(props.list, "watchEffect");
+    let newlist = props.list.map(item => item.filesUrl || item.fileUrl);
     initFileList.value = newlist;
   }
 });
@@ -128,7 +130,7 @@ const url = ref("");
 const showViewer = ref(false);
 const previewList = ref([]);
 const showImgView = (src) => {
-  console.log(src, "showImgView");
+  console.log(src, "showImgView", initFileList.value);
   const fileType = src.substring(src.lastIndexOf(".")).toLowerCase();
   console.log(fileType, fileList.value.includes(fileType), "urlFilter");
   if(fileList.value.includes(fileType)){

src/view/abstract/index.vue

@@ -217,177 +217,6 @@
         </el-form>
       </el-tab-pane>
     </el-tabs>
-    <!-- <el-form
-      ref="ruleFormRef"
-      :model="ruleForm"
-      label-position="top"
-      :rules="rules"
-      label-width="auto"
-      class="demo-ruleForm"
-      size="default"
-      status-icon
-    >
-      <div class="form-content" v-if="activeName == 1">
-        <el-form-item label="案件名称" required>
-          <el-input
-            v-model="bindExample.caseTitle"
-            placeholder="请输入"
-            show-word-limit
-            maxlength="100"
-          />
-        </el-form-item>
-        <el-form-item label="立案编号" prop="caseNum">
-          <el-input
-            v-model="bindExample.caseNum"
-            placeholder="请输入"
-            show-word-limit
-            maxlength="100"
-          />
-        </el-form-item>
-        <el-form-item label="案件类别" required>
-          <el-select
-            v-model="bindExample.caseCategory"
-            placeholder="请选择案件类别"
-          >
-            <el-option
-              v-for="item in criminalType"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="案发时间" required>
-          <el-date-picker
-            v-model="bindExample.crimeTime"
-            type="date"
-            aria-label="Pick a date"
-            placeholder="请选择案发时间"
-            style="width: 100%"
-          />
-        </el-form-item>
-
-        <el-form-item label="案发区域" prop="name">
-          <el-input
-            v-model="bindExample.caseRegion"
-            placeholder="请输入案发区域"
-            show-word-limit
-            maxlength="100"
-          />
-        </el-form-item>
-        <el-form-item label="案件地点">
-          <el-input
-            v-model="bindExample.caseAddress"
-            placeholder="输入名称搜索"
-            clearable
-            disabled
-          >
-            <template #append>
-              <el-button :icon="Search" @click="searchAMapAddress" />
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="是否命案" prop="region">
-          <el-select v-model="bindExample.homicideCase" placeholder="请选择">
-            <el-option label="是" :value="1" />
-            <el-option label="否" :value="0" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="是否刑案" prop="region">
-          <el-select v-model="bindExample.criminalCase" placeholder="请选择">
-            <el-option label="是" :value="1" />
-            <el-option label="否" :value="0" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="经纬度" prop="name">
-          <el-input
-            v-model="bindExample.latAndLong"
-            placeholder="请输入"
-            show-word-limit
-            maxlength="100"
-          />
-        </el-form-item>
-      </div>
-      <div class="form-content" v-else>
-        <el-form-item label="指挥中心电话时间" required>
-          <el-date-picker
-            v-model="ruleForm.commandTime"
-            type="date"
-            placeholder="请选择"
-            aria-label="请选择"
-            style="width: 100%"
-          />
-        </el-form-item>
-        <el-form-item label="接警时间" required>
-          <el-date-picker
-            v-model="ruleForm.alarmTime"
-            type="date"
-            placeholder="请选择"
-            aria-label="请选择"
-            style="width: 100%"
-          />
-        </el-form-item>
-        <el-form-item label="报警人" required>
-          <el-input
-            v-model="ruleForm.alarmName"
-            placeholder="请输入"
-            show-word-limit
-            maxlength="100"
-          />
-        </el-form-item>
-        <el-form-item label="现场勘验单位" required>
-          <el-input
-            v-model="ruleForm.inquestDept"
-            placeholder="请输入"
-            show-word-limit
-            maxlength="100"
-          />
-        </el-form-item>
-        <el-form-item label="指派/报告单位" required>
-          <el-input
-            v-model="ruleForm.assignDept"
-            placeholder="请输入"
-            show-word-limit
-            maxlength="100"
-          />
-        </el-form-item>
-        <el-form-item label="指派方式" required>
-          <el-input
-            v-model="ruleForm.assignType"
-            placeholder="请输入"
-            show-word-limit
-            maxlength="100"
-          />
-        </el-form-item>
-        <el-form-item label="勘验时间">
-          <el-date-picker
-            v-model="ruleForm.times"
-            type="daterange"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            format="YYYY-MM-DD"
-            date-format="YYYY/MM/DD ddd"
-          />
-        </el-form-item>
-        <el-form-item label="勘验地点" required>
-          <el-input
-            v-model="ruleForm.inquestAddress"
-            placeholder="请输入"
-            show-word-limit
-            maxlength="100"
-          />
-        </el-form-item>
-      </div>
-
-      <el-form-item>
-        <el-button
-          class="w-full"
-          type="primary"
-          @click="submitForm(ruleFormRef)"
-        >
-          保存
-        </el-button>
-      </el-form-item>
-    </el-form> -->
   </div>
 </template>
 

src/view/dossier/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="abstract">
-    <div class="blfrom">
+    <el-button class="w-full" @click="handleAdd">上传</el-button>
+    <!-- <div class="blfrom">
       <div class="fromTitle">侦查实验</div>
       <el-upload
         class="upload-demo"
@@ -44,11 +45,11 @@
           </div>
         </div>
       </el-upload>
-    </div>
+    </div> -->
     <div class="blList">
       <div class="listItem py-2" v-for="(item, index) in list" :key="index" v-show="item.caseFilesList?.length">
         <div class="title1 pb-2">{{ item.filesTypeName }}</div>
-        <viewImg :list="item.caseFilesList || []" @handleItem="handleItem" /> 
+        <viewImg edit :list="item.caseFilesList || []" @handleItem="handleItem" /> 
         <!-- <div
           class="list2"
           v-for="(item2, index2) in item.childrenList"
@@ -66,7 +67,6 @@ import { computed, ref, reactive } from "vue";
 import { addCaseFile } from "../originalPhoto/quisk";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { uploadNewFile, addByMediaLiBrary } from "@/store/case";
-import { useUpload } from "@/hook/upload";
 import { updateByTreeFileLists } from "@/store/case";
 import { Delete, Edit } from "@element-plus/icons-vue";
 import viewImg from "@/components/viewImg/index.vue"
@@ -84,11 +84,13 @@ const ssjId = ref(0);
 const zjjId = ref(0);
 const showModal = ref(false);
 const caseId = computed(() => router.currentRoute.value?.params?.caseId);
-getList();
-const { size, fileList, removeFile, previewFile, file, accept } = useUpload({
-  maxSize: 10 * 1024 * 1024,
-  formats: [".jpg", ".png", ".jpeg", ".doc", ".docx", ".pdf"],
+const fileInfo = ref({
+  accept: ".jpg, .jpeg, .png, .mp4",
+  formats:  [".jpg", ".png", ".jpeg", ".doc", ".docx", ".pdf"],
+  DrawFormatDesc: "jpg、png、jpeg、doc、pdf上传",
+  fileSize: 500 * 1024 * 1024,
 });
+getList();
 const handleClick = (tab) => {
   console.log(tab);
 };
@@ -159,8 +161,8 @@ function handleItem(type, item) {
   console.log("handleItem", type, item);
 }
 async function handleAdd() {
-  await addCaseFile({ caseId: 2, fileType: 1 });
-  console.log("handleAdd");
+  await addCaseFile({ caseId: caseId.value, fileType: 1, fileInfo: fileInfo.value, filesTypeName: ['案件卷宗'] });
+  getList();
 }
 function handleDel() {
   ElMessageBox.confirm("确定删除？", "提示", {

src/view/originalPhoto/addCaseFile.vue

@@ -17,7 +17,28 @@
         clearable
       />
     </el-form-item>
-    <el-form-item label="文件：" class="mandatory uploadFile" style="margin-left: 12px">
+    <el-form-item label="文件类别：" class="mandatory">
+      <el-select
+        style="width: 300px;"
+        v-model="caseFile.filesType"
+        placeholder="请选择文件类别"
+        clearable
+      >
+        <el-option label="本地上传" :value="1" />
+        <el-option label="媒体库上传" :value="0" />
+      </el-select>
+      <!-- <el-cascader
+        v-model="caseFile.filesTypeId"
+        :how-all-levels="false"
+        style="width: 300px;"
+        :options="fileOptions"
+        :props="{
+          checkStrictly: false,
+        }"
+        clearable
+      /> -->
+    </el-form-item>
+    <el-form-item label="文件：" v-if="caseFile.filesType == 1" class="mandatory uploadFile">
       <el-upload
         class="upload-demo"
         :multiple="false"
@@ -46,15 +67,21 @@
           </div>
         </template>
       </el-upload>
-      <el-button style="margin-left: 20px" type="primary" class="mtk" @click="handleAdd"
-        >从媒体库上传</el-button
-      >
     </el-form-item>
+    
+    <el-form-item label="文件：" v-else class="mandatory uploadFile">
+      <el-button  type="primary" class="mtk" @click="handleAdd"
+      >从媒体库上传</el-button>
+    </el-form-item>
+    <div style="padding-left: 90px">
+        <viewImg :list="mtkList" edit @handleItem="handleItem"/>
+      </div>
   </el-form>
 </template>
 
 <script setup lang="ts">
 import { uploadNewFile, addByMediaLiBrary } from "@/store/case";
+import viewImg from "@/components/viewImg/index.vue"
 import {
   DrawFormatDesc,
   DrawFormats,
@@ -75,9 +102,10 @@ const props = defineProps<{
   caseId: number;
   fileType: number;
   filesTypeName: [string];
+  fileInfo?: Object;
 }>();
 const fileOptions = ref([])
-
+const mtkList = ref([]);
 onMounted(async () => {
   let newfileOptions = await updateSelectByTreeFileLists();
   if(props.filesTypeName){
@@ -99,11 +127,12 @@ const caseFile = ref({
   filesTitle: "",
   dictId: '',
   uploadId: '',
+  filesType: 1,
 });
-
+console.log('caseFile', props.fileInfo);
 const { size, fileList, upload, removeFile, previewFile, file, accept } = useUpload({
-  maxSize: 10 * 1024 * 1024,
-  formats: [".jpg", ".jpeg", ".png", '.mp4'],
+  maxSize: props.fileInfo?.fileSize || 10 * 1024 * 1024,
+  formats: props.fileInfo?.formats || [".jpg", ".jpeg", ".png", '.mp4'],
 });
 
 const formatDesc = computed(() =>
@@ -116,7 +145,17 @@ const handleSuccess = (option) => {
 }
 
 const handleAdd = async () => {
-  await addCaseScenes();
+  let fileId =  await addCaseScenes();
+  mtkList.value = fileId.map(ele => {
+    return {
+      filesUrl: ele.fileUrl,
+      ...ele,
+     }
+  }) || [];
+  console.log("handleItem", mtkList.value);
+};
+const handleItem = (type, item) => {
+  console.log("handleItem", type, item);
 };
 watchEffect(() => {
   console.log('file', file.value);
@@ -128,7 +167,7 @@ watchEffect(() => {
 defineExpose<QuiskExpose>({
   async submit() {
     console.log('filesTypeId', caseFile.value);
-    if (!file.value) {
+    if (!file.value && mtkList.value.length == 0) {
       ElMessage.error("请上传文件");
       throw "请上传文件";
     } else if (!caseFile.value.filesTypeId) {
@@ -136,8 +175,9 @@ defineExpose<QuiskExpose>({
       throw "文件类别不能为空！";
     }
     let filesTypeId = caseFile.value.filesTypeId?.slice(-1),
-    uploadId = file.value?.response?.data.id
-    let params = { ...caseFile.value, file: file.value, filesTypeId: filesTypeId[0], uploadId  };
+    uploadId = file.value?.response?.data.id,
+    uploadIds = mtkList.value.map(ele => ele.id) || [];
+    let params = { ...caseFile.value, file: file.value, filesTypeId: filesTypeId[0], uploadId, uploadIds };
     console.log('filesTypeId', params);
     await addByMediaLiBrary(params);
     return caseFile.value;
@@ -164,10 +204,10 @@ defineExpose<QuiskExpose>({
   }
 }
 .jm-file-upload {
-  .mtk {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
+  // .mtk {
+  //   position: absolute;
+  //   right: 0;
+  //   top: 0;
+  // }
 }
 </style>

src/view/originalPhoto/addScenes.vue

@@ -62,7 +62,7 @@ import { ElTable } from "element-plus";
 
 const props = defineProps<{ caseId: number }>();
 const params = useScenePaggingParams();
-const caseScenes = ref<CaseScenes>(getCaseScenes([]));
+const caseScenes = ref([]);
 const tableRef = ref<InstanceType<typeof ElTable>>();
 // const 
 watch(
@@ -76,29 +76,21 @@ watch(
 // 复选框同步
 watchEffect(() => {
   if (!tableRef.value) return;
-  const selectKeys = []
+  const selectKeys = caseScenes.value.map((item) => item.id);
+  console.log('caseScenes.value', caseScenes.value);
   // caseScenes.value.find(
   //   (item) => item.type === params.pagging.state.query.type
   // )!.numList;
   params.pagging.state.table.rows.forEach((scene) => {
-    tableRef.value!.toggleRowSelection(scene, selectKeys.includes(getSceneKey(scene)));
+    tableRef.value!.toggleRowSelection(scene, selectKeys.includes(scene.id));
   });
 });
 
-const changeSelection = (selectScenes: Scene[]) => {
+const changeSelection = (selectScenes) => {
   if (params.pagging.loading) return;
   const pagScenes = params.pagging.state.table.rows;
   const type = params.pagging.state.query.type;
-  const typeCaseScenes = caseScenes.value.find((item) => item.type === type)!;
-  const oldKeys = caseScenes.value.find((item) => item.type === type)!.numList;
-  const selectKeys = selectScenes.map(getSceneKey);
-  const pagKeys = pagScenes.map(getSceneKey);
-
-  typeCaseScenes.numList = oldKeys
-    // 保留其他页的key，剔除当前页的key
-    .filter((key) => !pagKeys.includes(key))
-    // 拼接上当前页选中的key
-    .concat(selectKeys);
+  caseScenes.value = selectScenes;
 };
 // 初始化数据
 onMounted(async () => {
@@ -106,6 +98,7 @@ onMounted(async () => {
 });
 const submit = () => {
   console.log(caseScenes.value);
+  return caseScenes.value;
   // () => replaceCaseScenes(props.caseId, caseScenes.value)
 };
 defineExpose<QuiskExpose>({

src/view/other/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="abstract">
-    <div class="blfrom">
+    <el-button class="w-full" @click="handleAdd">上传</el-button>
+    <!-- <div class="blfrom">
       <div class="fromTitle">侦查实验</div>
       <el-upload
         class="upload-demo"
@@ -41,7 +42,7 @@
           <div class="">支持{{ fileInfo.DrawFormatDesc }}格式上传</div>
         </div>
       </el-upload>
-    </div>
+    </div> -->
     <div class="blList">
       <div class="listItem py-4" v-for="(item, index) in list" :key="index" v-show="item.caseFilesList?.length">
         <div class="title1">{{ item.filesTypeName }}</div>
@@ -56,7 +57,7 @@ import { computed, ref, reactive } from "vue";
 import { addCaseFile } from "../originalPhoto/quisk";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useUpload } from "@/hook/upload";
-import { uploadNewFile, addByMediaLiBrary } from "@/store/case";
+import { addByMediaLiBrary } from "@/store/case";
 import { updateByTreeFileLists } from "@/store/case";
 import { delCaseFile, } from "@/store/caseFile";
 import { router } from "@/router";
@@ -100,6 +101,10 @@ const submitForm = async (formEl) => {
     }
   });
 };
+async function handleAdd() {
+  await addCaseFile({ caseId: caseId.value, fileType: 1, fileInfo: fileInfo.value, filesTypeName: ['其他资料'] });
+  getList();
+}
 function getList() {
   updateByTreeFileLists(caseId.value).then((res) => {
     let newlist = res.find((ele) => ele.filesTypeName == "其他资料") || [];
@@ -121,10 +126,7 @@ const resetForm = (formEl) => {
 function handleActive(params) {
   console.log("handleActive", params);
 }
-async function handleAdd() {
-  await addCaseFile({ caseId: caseId.value, fileType: 1 });
-  console.log("handleAdd");
-}
+
 function handleSuccess(item) {
   let uploadId = item?.data.id;
   addByMediaLiBrary({ caseId: caseId.value, filesTypeId: xzclId.value, uploadId }).then((res) => {