Merge branch 'xj' of http://192.168.0.115:3000/bill/public-fuse into xj

src/view/case/addPhotoFile.vue

@@ -59,7 +59,7 @@ import { maxFileSize } from "@/constant/caseFile";
 import { useUpload } from "@/hook/upload";
 import { saveOrUpdate, CaseImg } from "@/store/case";
 import { ElMessage } from "element-plus";
-import { computed, ref, watchEffect } from "vue";
+import { computed, ref, watch, watchEffect } from "vue";
 import { QuiskExpose } from "@/helper/mount";
 
 const props = defineProps<{
@@ -83,10 +83,20 @@ const { size, fileList, upload, removeFile, previewFile, file, accept } = useUpl
 const formatDesc = computed(() =>
 DrawFormatDesc
 );
-
+watch(props, newValue => {
+  caseFile.value.id = newValue.data.id;
+  caseFile.value.imgInfo = newValue.data.imgInfo;
+  caseFile.value.imgUrl = newValue.data.imgUrl;
+  caseFile.value.sort = newValue.data.sort;
+  if(newValue.data.imgUrl){
+    file.value = [{
+    name: newValue.data.imgInfo,
+    url: newValue.data.imgUrl,
+  }]
+  }
+},{ immediate: true })
 watchEffect(() => {
   if (file.value?.name) {
-    caseFile.value.imgUrl = file.value && file.value[0]?.url;
     caseFile.value.imgInfo = file.value?.name.substring(0, 50);
   }
 });
@@ -111,8 +121,9 @@ defineExpose<QuiskExpose>({
       ElMessage.error("附件标题不能为空！");
       throw "附件标题不能为空！";
     }
-    console.log('defineExpose', caseFile.value, file.value.value[0]?.url)
-    await saveOrUpdate({ ...caseFile.value, imgUrl: file.value && file.value.value && file.value.value[0]?.url });
+    console.log('defineExpose', caseFile.value, file.value)
+    let imgUrl = file.value && file.value.value ? file.value.value[0]?.url : file.value[0]?.url
+    await saveOrUpdate({ ...caseFile.value, imgUrl });
     return caseFile.value;
   },
 });

src/view/case/photos/draggable.vue

@@ -4,10 +4,10 @@
       <div class="item" v-for="(item, index) in list" :key="item.id" @click="handleItem(index)">
         <img class="itemImg" :src="item.imgUrl" alt="" />
         <div class="text">
-          {{ item.imgInfo }}
+            <div :title="item.imgInfo">{{ item.imgInfo }}</div>
            <EditPen @click.stop="handleEdit(item)" class="EditPen" />
         </div>
-        <CircleCloseFilled @click.stop="handleDet(index)" class="itemIcon" />
+        <CircleCloseFilled @click.stop="handleDet(index, item.id)" class="itemIcon" />
       </div>
     </VueDraggable>
     <el-empty class="empty" v-else description="请上传现场照片" />
@@ -16,106 +16,16 @@
 
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
-import { caseImgList, CaseImg } from "@/store/case";
+import { caseImgList, CaseImg, caseDel } from "@/store/case";
 import { VueDraggable } from 'vue-draggable-plus'
 import { addCaseImgFile } from "../quisk";
 // import { IconRabbish } from '@element-plus/icons-vue'
 const props = defineProps({ sortType: Boolean, caseId: Number });
 const emit = defineEmits<{
-  (e: "changeList", value: Case[] | null): void;
+  (e: "changeList", value: CaseImg[] | null): void;
   (e: "handleItem", value: Number | null): void;
 }>();
-const list = ref([
-  {
-  name: 'Joao1',
-  id: 1
-},
-{
-  name: 'Jean2',
-  id: 2
-},
-{
-  name: 'Johanna3',
-  id: 3
-},
-{
-  name: 'Juan4',
-  id: 4
-},
-{
-  name: 'Joao5',
-  id: 5
-},
-{
-  name: 'Jean6',
-  id: 6
-},
-{
-  name: 'Johanna7',
-  id: 7
-},
-{
-  name: 'Juan8',
-  id: 8
-},{
-  name: 'Juan4',
-  id: 4
-},
-{
-  name: 'Joao5',
-  id: 5
-},
-{
-  name: 'Jean6',
-  id: 6
-},
-{
-  name: 'Johanna7',
-  id: 7
-},
-{
-  name: 'Juan8',
-  id: 8
-},{
-  name: 'Juan4',
-  id: 4
-},
-{
-  name: 'Joao5',
-  id: 5
-},
-{
-  name: 'Jean6',
-  id: 6
-},
-{
-  name: 'Johanna7',
-  id: 7
-},
-{
-  name: 'Juan8',
-  id: 8
-},{
-  name: 'Juan4',
-  id: 4
-},
-{
-  name: 'Joao5',
-  id: 5
-},
-{
-  name: 'Jean6',
-  id: 6
-},
-{
-  name: 'Johanna7',
-  id: 7
-},
-{
-  name: 'Juan8',
-  id: 8
-}
-])
+const list = ref<CaseImg[]>([])
 
 watch(()=>props.sortType,(newValue, oldValue)=>{
     console.log('sum is changed',newValue,oldValue);
@@ -135,10 +45,12 @@ async function getList () {
   emit("changeList", list.value);
 
 }
-function handleDet(index: Number) {
-  list.value.splice(index, 1)
-  emit("changeList", list.value);
-  console.log('handleDet', list.value);
+function handleDet(index: Number, id: Number) {
+  caseDel(id).then(res=>{
+    list.value.splice(index, 1)
+    emit("changeList", list.value);
+    console.log('handleDet', list.value);
+  })
 }
 function handleEdit(params) {
   addCaseImgFile({ caseId: props.caseId, data: {
@@ -171,10 +83,18 @@ onMounted(() => {
       object-fit: cover;
     }
     .text{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      div{
+        width: calc(100% - 20px);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
       .EditPen{
         width: 20px;
         height: 20px;
-        float: right;
       }
     }
     .itemIcon{

src/view/case/photos/index.vue

@@ -10,7 +10,7 @@
           >{{ sortType ? "横排" : "竖排" }}</el-button
         >
       </div>
-      <draggable :caseId="caseId" :sortType="sortType" @changeList="changeList" @handleItem="handleItem" />
+      <draggable ref="draggableRef" :caseId="caseId" :sortType="sortType" @changeList="changeList" @handleItem="handleItem" />
     </div>
     <div class="right">
       <swiper
@@ -59,9 +59,9 @@ import draggable from './draggable.vue';
 const props = defineProps({ caseId: Number });
 const newlist = ref([]);
 const swiperRef = ref(null);
+const draggableRef = ref(null);
 const caseId = ref(props.caseId);
 const sortType = ref(false);
-console.log(props);
 const addCaseFileHandler = async () => {
   await addCaseImgFile({ caseId: caseId.value, data: {
     imgUrl: '',
@@ -71,6 +71,9 @@ const addCaseFileHandler = async () => {
   } });
   refresh();
 };
+function refresh() {
+  console.log("changeList", draggableRef.value);
+}
 const changeList = (list) => {
   let newList = [];
   list.map((item, index) => {