初始提交

baoshiwei

2023-03-10 1fb197352b6a263646e4ccd3ed1c7854ede031dd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<template>
  <div v-show="download" class="upload-download-handler">
    <a class="download" title="下载" @click="onDownload">
      <Icon icon="ant-design:download" />
    </a>
  </div>
  <div v-show="mover && list.length > 1" class="upload-mover-handler">
    <a title="向前移动" @click="onMoveForward">
      <Icon icon="ant-design:arrow-left" />
    </a>
    <a title="向后移动" @click="onMoveBack">
      <Icon icon="ant-design:arrow-right" />
    </a>
  </div>
</template>
 
<script lang="ts" setup>
  import { unref, computed } from 'vue';
  import { Icon } from '/@/components/Icon';
  import { useMessage } from '/@/hooks/web/useMessage';
 
  const { createMessage } = useMessage();
 
  const props = defineProps({
    element: { type: HTMLElement, required: true },
    fileList: { type: Object, required: true },
    mover: { type: Boolean, required: true },
    download: { type: Boolean, required: true },
    emitValue: { type: Function, required: true },
  });
  const list = computed(() => unref(props.fileList));
 
  // 向前移动图片
  function onMoveForward() {
    let index = getIndexByUrl();
    if (index === -1) {
      createMessage.warn('移动失败：' + index);
      return;
    }
    if (index === 0) {
      doSwap(index, unref(list).length - 1);
      return;
    }
    doSwap(index, index - 1);
  }
 
  // 向后移动图片
  function onMoveBack() {
    let index = getIndexByUrl();
    if (index === -1) {
      createMessage.warn('移动失败：' + index);
      return;
    }
    if (index == unref(list).length - 1) {
      doSwap(index, 0);
      return;
    }
    doSwap(index, index + 1);
  }
 
  function doSwap(oldIndex, newIndex) {
    if (oldIndex !== newIndex) {
      let array: any[] = [...(unref(list) as Array<any>)];
      let temp = array[oldIndex];
      array[oldIndex] = array[newIndex];
      array[newIndex] = temp;
      props.emitValue(array.map((i) => i.url).join(','));
    }
  }
 
  function getIndexByUrl() {
    const url = props.element?.getElementsByTagName('img')[0]?.src;
    if (url) {
      const fileList: any = unref(list);
      for (let i = 0; i < fileList.length; i++) {
        let current = fileList[i].url;
        const replace = url.replace(window.location.origin, '');
        if (current === replace || encodeURI(current) === replace) {
          return i;
        }
      }
    }
    return -1;
  }
 
  function onDownload() {
    const url = props.element?.getElementsByTagName('img')[0]?.src;
    window.open(url);
  }
</script>