|
|
@@ -1,199 +1,211 @@
|
|
|
<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>
|
|
|
+ <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>
|
|
|
- </ui-input>
|
|
|
- <div class="edit-hot" >
|
|
|
- <a @click="submitHandler">
|
|
|
- <ui-icon type="nav-edit" />
|
|
|
- 确定
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+ </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, watchEffect } from 'vue';
|
|
|
-import { Dialog, Message } from 'bill/index';
|
|
|
-import {
|
|
|
+import StylesManage from "./styles.vue";
|
|
|
+import Images from "./images.vue";
|
|
|
+import { computed, ref, watchEffect } from "vue";
|
|
|
+import { Dialog, Message } from "bill/index";
|
|
|
+import {
|
|
|
taggingStyles,
|
|
|
- Tagging,
|
|
|
- getTaggingStyle,
|
|
|
+ Tagging,
|
|
|
+ getTaggingStyle,
|
|
|
TaggingStyle,
|
|
|
taggings,
|
|
|
isTemploraryID,
|
|
|
-defaultStyle
|
|
|
-} from '@/store'
|
|
|
+ defaultStyle,
|
|
|
+} from "@/store";
|
|
|
|
|
|
export type EditProps = {
|
|
|
- data: Tagging
|
|
|
-}
|
|
|
+ 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 activeStyle = computed(() => getTaggingStyle(tagging.value.styleId))
|
|
|
+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 activeStyle = computed(() => getTaggingStyle(tagging.value.styleId));
|
|
|
|
|
|
watchEffect(() => {
|
|
|
if (!activeStyle.value && defaultStyle.value) {
|
|
|
- tagging.value.styleId = defaultStyle.value.id
|
|
|
+ tagging.value.styleId = defaultStyle.value.id;
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
const submitHandler = () => {
|
|
|
if (!tagging.value.title.trim()) {
|
|
|
- Message.error('标注标题必须填写！')
|
|
|
+ Message.error("标注标题必须填写！");
|
|
|
} else if (!tagging.value.images.length) {
|
|
|
- Message.error('至少上传一张图片！')
|
|
|
+ Message.error("至少上传一张图片！");
|
|
|
} else {
|
|
|
- emit('save', tagging.value)
|
|
|
+ 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 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 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
|
|
|
-}
|
|
|
+ taggingStyles.value.push(style);
|
|
|
+ tagging.value.styleId = style.id;
|
|
|
+};
|
|
|
|
|
|
-type LocalImageFile = { file: File; preview: string } | Tagging['images'][number]
|
|
|
+type LocalImageFile = { file: File; preview: string } | Tagging["images"][number];
|
|
|
const fileChange = (file: LocalImageFile | LocalImageFile[]) => {
|
|
|
- const files = Array.isArray(file) ? file : [file]
|
|
|
+ const files = Array.isArray(file) ? file : [file];
|
|
|
|
|
|
- tagging.value.images = files.map(atom => {
|
|
|
- if (typeof atom === 'string' || 'blob' in atom) {
|
|
|
- return atom
|
|
|
+ tagging.value.images = files.map((atom) => {
|
|
|
+ if (typeof atom === "string" || "blob" in atom) {
|
|
|
+ return atom;
|
|
|
} else {
|
|
|
return {
|
|
|
blob: atom.file,
|
|
|
- url: atom.preview
|
|
|
- }
|
|
|
+ url: atom.preview,
|
|
|
+ };
|
|
|
}
|
|
|
- })
|
|
|
-}
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
-const delImageHandler = async (file: Tagging['images'][number]) => {
|
|
|
- const index = tagging.value.images.indexOf(file)
|
|
|
+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)
|
|
|
+ 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);
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
backdrop-filter: blur(4px);
|
|
|
z-index: 2000;
|
|
|
padding: 20px;
|
|
|
@@ -205,13 +217,12 @@ const delImageHandler = async (file: Tagging['images'][number]) => {
|
|
|
width: 400px;
|
|
|
padding: 20px;
|
|
|
background: rgba(27, 27, 28, 0.8);
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0,0,0, 0.3);
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
|
|
|
border-radius: 4px;
|
|
|
|
|
|
.input {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
.edit-close {
|
|
|
position: absolute;
|
|
|
@@ -227,13 +238,13 @@ const delImageHandler = async (file: Tagging['images'][number]) => {
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
- content: '';
|
|
|
+ content: "";
|
|
|
position: absolute;
|
|
|
left: -20px;
|
|
|
right: -20px;
|
|
|
height: 1px;
|
|
|
bottom: 0;
|
|
|
- background-color: rgba(255, 255, 255, 0.16);;
|
|
|
+ background-color: rgba(255, 255, 255, 0.16);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -249,12 +260,12 @@ const delImageHandler = async (file: Tagging['images'][number]) => {
|
|
|
}
|
|
|
</style>
|
|
|
<style>
|
|
|
-.edit-hot-item .preplace input{
|
|
|
+.edit-hot-item .preplace input {
|
|
|
padding-left: 76px !important;
|
|
|
}
|
|
|
|
|
|
.edit-hot-item .preplace .pre-icon {
|
|
|
- color: rgba(255,255,255,0.6000);
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
width: 70px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
@@ -264,15 +275,15 @@ const delImageHandler = async (file: Tagging['images'][number]) => {
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
font-size: 16px;
|
|
|
- background-color: rgba(0,0,0,0.5);
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 50%;
|
|
|
text-align: center;
|
|
|
- line-height: 32px
|
|
|
+ line-height: 32px;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
- .edit-hot-layer .input.ui-input .text.suffix input {
|
|
|
- padding-right: 60px;
|
|
|
- }
|
|
|
-</style>
|
|
|
+.edit-hot-layer .input.ui-input .text.suffix input {
|
|
|
+ padding-right: 60px;
|
|
|
+}
|
|
|
+</style>
|
