fuse-code/src/views/tagging/edit.vue

<template>
  <div class="edit-hot-layer">
    <div class="edit-hot-item">
      <h3 class="edit-title">
        标注
        <ui-icon type="close" ctrl @click.stop="$emit('quit')" class="edit-close" />
      </h3>
      <!-- <StylesManage 
        :styles="styles" 
        :active="(getTaggingStyle(tagging.styleId) as TaggingStyle)" 
        @change="style => tagging.styleId = style.id" 
        @delete="deleteStyle"
        @uploadStyles="uploadStyles" 
      /> -->
      <ui-input 
        require 
        class="input" 
        width="100%" 
        placeholder="请输入热点标题" 
        type="text" 
        v-model="tagging.title"
        maxlength="15" 
      />
      <ui-input
        class="input"
        width="100%"
        height="158px"
        placeholder="特征描述："
        type="richtext"
        v-model="tagging.desc"
        :maxlength="200"
      />
      <ui-input 
        class="input preplace" 
        width="100%" 
        placeholder="" 
        type="text" 
        v-model="tagging.part"
      >
        <template #preIcon><span>遗留部位：</span></template>
      </ui-input>
      <ui-input 
        class="input preplace" 
        width="100%" 
        placeholder="" 
        type="text" 
        v-model="tagging.method"
      >
        <template #preIcon><span>提取方法：</span></template>
      </ui-input>
      <ui-input 
        class="input preplace" 
        width="100%" 
        type="text" 
        placeholder=""
        v-model="tagging.principal"
      >
        <template #preIcon><span>提取人：</span></template>
      </ui-input>
      <ui-input
          class="input "
          type="file"
          width="100%"
          height="225px"
          preview
          placeholder="上传图片"
          othPlaceholder="支持JPG、PNG图片格式，单张不超过5MB，最多支持上传9张。"
          accept=".jpg, .png"
          :disable="true"
          :multiple="true"
          :maxSize="5 * 1024 * 1024"
          :maxLen="9"
          :modelValue="tagging.images"
          @update:modelValue="fileChange"
      >
          <template v-slot:valuable>
              <Images :tagging="tagging" :hideInfo="true">
                <template v-slot:icons="{ active }">
                  <span @click="delImageHandler(active)" class="del-file">
                    <ui-icon type="del" ctrl />
                  </span>
                </template>
              </Images>
          </template>
      </ui-input>
      <div class="edit-hot" >
        <span @click="submitHandler" class="fun-ctrl">
          <ui-icon type="edit" />
          确定
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import StylesManage from './styles.vue'
import Images from './images.vue'
// import { LocalTaggingStyle } from './styles.vue'
import { computed, ref } from 'vue';
import { Dialog, Message } from 'bill/index';
import { 
  // taggingStyles,
  Tagging, 
  Taggings,
  // TemploraryID, 
  // getTaggingStyle, 
  // TaggingStyle,
  // taggings
} from '@/store'

export type EditProps = {
  // taggingFiles: WeakMap<Tagging, Array<File>>
  // styleFile: WeakMap<TaggingStyle, File>
  data: Tagging
}

const props = defineProps<EditProps>()
const emit = defineEmits<{ (e: 'quit'): void, (e: 'save', data: Tagging): void }>()
const tagging = ref<Tagging>({...props.data, images: [...props.data.images]})

const submitHandler = () => {
  if (!tagging.value.title.trim()) {
    Message.error('标注标题必须填写！')
  } else {
    emit('save', tagging.value)
  }
}

// const styles = computed(() => 
//   [...taggingStyles.value].sort((a, b) => 
//     a.default ? -1 : b.default ? 1 : a.id === TemploraryID ? -1 : b.id === TemploraryID ? 1 : 0
//   )
// )

// const deleteStyle = (style: TaggingStyle) => {
//     const index = taggingStyles.value.indexOf(style)
//     if (~index) {
//       taggingStyles.value.splice(index, 1)
//       for (const item of taggings.value) {
//         if (item.styleId === style.id) {
//           const defaultIcon = taggingStyles.value.find(({ default: isDefault }) => isDefault)?.id
//           if (defaultIcon) {
//             item.styleId = defaultIcon
//           }
//         }
//       }
//     }
// }

// const normalizeIcon = (icon: LocalTaggingStyle['icon'] | string): string => {
//   if (typeof icon === 'string') {
//     return icon
//   } else {
//     return icon.preview
//   }
// }

// const uploadStyles = (unStyles: Array<LocalTaggingStyle>) => {
//   const addStyles = unStyles.map(item => {
//     const style = {
//       ...item,
//       icon: normalizeIcon(item.icon),
//     }

//     props.styleFile.set(style, item.icon.file)
//     return style
//   })
//   styles.value.push(...addStyles)
//   tagging.value.styleId = addStyles[0].id
// }

type LocalImageFile = { file: File; preview: string } | Tagging['images'][number]
const fileChange = (file: LocalImageFile | LocalImageFile[]) => {
  const files = Array.isArray(file) ? file : [file]

  tagging.value.images = files.map(atom => {
    if (typeof atom === 'string' || 'blob' in atom) {
      return atom
    } else {
      console.log(atom)
      return {
        blob: atom.file,
        url: atom.preview
      }
    }
  })
}

const delImageHandler = async (file: Tagging['images'][number]) => {
  const index = tagging.value.images.indexOf(file)
  if (~index && (await Dialog.confirm(`确定要删除此数据吗？`))) {
    tagging.value.images.splice(index, 1)
  }
}

</script>

<style lang="scss" scoped>
.edit-hot-layer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3000);
  backdrop-filter: blur(4px);
  z-index: 2000;
}
.edit-hot-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  position: relative;
  padding: 20px;
  background: rgba(27, 27, 28, 0.8);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0, 0.3);
  border-radius: 4px;

  .input {
    margin-bottom: 10px;
  }

}
.edit-close {
  position: absolute;
  cursor: pointer;
  top: calc((100% - 18px) / 2);
  right: 0;
  transform: translateY(-50%);
}

.edit-title {
  padding-bottom: 18px;
  margin-bottom: 18px;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: -20px;
    right: -20px;
    height: 1px;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.16);;
  }
}

.edit-hot {
  margin-top: 20px;
  text-align: right;

  span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
  }
}
</style>
<style>
.edit-hot-item .preplace input{
  padding-left: 76px !important;
}

.edit-hot-item .preplace .pre-icon {
  color: rgba(255,255,255,0.6000);
  width: 70px;
  text-align: right;
}
</style>