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"
          @uploadStyle="uploadStyle" 
        />
        <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"
          :maxlength="60"
        >
          <template #preIcon><span>遗留部位：</span></template>
        </ui-input>
        <ui-input 
          class="input preplace" 
          width="100%" 
          placeholder="" 
          type="text" 
          v-model="tagging.method"
          :maxlength="60"
        >
          <template #preIcon><span>提取方法：</span></template>
        </ui-input>
        <ui-input 
          class="input preplace" 
          width="100%" 
          type="text" 
          placeholder=""
          v-model="tagging.principal"
          :maxlength="60"
        >
          <template #preIcon><span>提取人：</span></template>
        </ui-input>
        <ui-input
          class="input "
          type="file"
          width="100%"
          height="225px"
          require
          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" >
          <a @click="submitHandler">
            <ui-icon type="nav-edit" />
            确定
          </a>
        </div>
      </div>
  </div>
</template>

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

export type EditProps = {
  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 if (!tagging.value.images.length) {
    Message.error('至少上传一张图片！')
  } else {
    emit('save', tagging.value)
  }
}

const styles = computed(() => 
  [...taggingStyles.value].sort((a, b) => 
    a.default ? -1 : b.default ? 1 :
    a.lastUse ? -1 : b.lastUse ? 1 : isTemploraryID(a.id) ? -1 : isTemploraryID(b.id) ? 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 uploadStyle = (style: TaggingStyle) => {
  taggingStyles.value.push(style)
  tagging.value.styleId = style.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 {
      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;
  padding: 20px;
  overflow-y: auto;
}

.edit-hot-item {
  margin: 100px auto 20px;
  width: 400px;
  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>

<style>
  .edit-hot-layer .input.ui-input .text.suffix input {
    padding-right: 60px;
  }
</style>