mcwl-pc/app/components/publishWorkFlow/UploadImg.vue

<script setup lang="ts">
import { cloneDeep } from "lodash-es";
import { Asterisk } from "lucide-vue-next";
import { useRoute, useRouter } from "vue-router";

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(["update:modelValue", "preStep"]);
const router = useRouter();

const route = useRoute();

const { type } = route.query;

const message = useMessage();

const localForm = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
function preStep() {
  emit("preStep");
}
const showSuccessModal = ref(false);
const loading = ref(false)
async function handlePublish() {
  for (let i = 0; i < localForm.value.workFlowVersionList.length; i++) {
    if (
      localForm.value.workFlowVersionList[i].delFlag === "0" &&
      localForm.value.workFlowVersionList[i].imagePaths.length === 0
    ) {
      return message.error("请上传图片");
    }
  }
  try {
    const param = cloneDeep(localForm.value);
    if (param.workFlow.typeList.length !== 0) {
      param.workFlow.type = param.workFlow.typeList.join(",");
    } else {
      param.workFlow.type = "";
    }
    for (let i = 0; i < param.workFlowVersionList.length; i++) {
      if (param.workFlowVersionList[i].imagePaths.length !== 0) {
        param.workFlowVersionList[i].imagePaths = param.workFlowVersionList[
          i
        ].imagePaths.join(",");
      } else {
        param.workFlowVersionList[i].imagePaths = "";
      }
    }
    if (param.workFlow.original === 0) {
      param.workFlow.originalAuthorName = "";
    }
    // await request.post('/WorkFlow/addWorkFlow', param)
    if (type === "add") {
      try {
        const res = await request.post("/WorkFlow/addWorkFlow", param);
        if (res.code === 200) {
          showSuccessModal.value = true;
        }
      } catch (error) {
        console.log(error);
      }
    } else {
      try {
        const res = await request.post("/WorkFlow/updateWorkFlow", param);
        if (res.code === 200) {
          showSuccessModal.value = true;
        }
      } catch (error) {
        console.log(error);
      }
    }
  } catch (error) {
    console.log(error);
  }
}
watch(
  () => localForm.value,
  (newVal) => {
    emit("update:modelValue", newVal);
  },
  { immediate: true, deep: true }
);
const fileInput = ref<HTMLInputElement | null>(null);
const uploadFileIndex = ref(0);

function triggerFileInput(index: number) {
  (fileInput.value as HTMLInputElement)?.click();
  uploadFileIndex.value = index;
}
async function handleFileChange(event: Event) {
  const target = event.target as HTMLInputElement;
  const files = target.files;

  if (files && files.length > 0) {
    const sum =
      localForm.value.workFlowVersionList[uploadFileIndex.value].imagePaths.length +
      files.length;
    if (sum >= 20) return message.error("最多20张");
    try {
      loading.value = true
      const res = await uploadImagesInBatches(files);
      const urlList = res.map((item) => item.url);
      localForm.value.workFlowVersionList[uploadFileIndex.value].imagePaths.push(
        ...urlList
      );
    } catch (err) {
      console.log(err);
    }finally{
      loading.value = false
    }
  }
  target.value = "";
}

function onPositiveClick() {
  showSuccessModal.value = false;
  router.push("/personal-center");
}
</script>

<template>
  <div class="mx-auto mt-10">
    <div class="w-[960px] items-start rounded-lg">
      <template v-for="(item, index) in localForm.workFlowVersionList" :key="index">
        <div v-if="item.delFlag === '0'" class="w-full bg-gray-100 p-4 rounded-lg mt-2">
          <div class="flex justify-between items-center">
            <div>
              版本名: <span>{{ item.versionName }}</span>
            </div>
            <div>
              <n-checkbox
                v-model:checked="item.hideGenInfo"
                :checked-value="1"
                :unchecked-value="0"
              />
              隐藏图片生成信息
            </div>
          </div>
          <div class="flex justify-between items-center mt-4">
            <div class="flex">
              添加版本示例图片
              <Asterisk :size="10" color="#ff0000" class="mt-1" />
            </div>
            <div class="text-[12px] text-gray-400">最多20张图片，图片不超过30M</div>
          </div>
          <div>
            <n-spin :show="loading">
            <div
              class="flex flex-col justify-center items-center w-30 h-40 border border-dashed mt-2 rounded-lg bg-white"
            >
              <div
                class="w-24 bg-gradient-to-r from-[#2D28FF] to-[#1A7DFF] h-8 text-white rounded-sm bg-[#3162ff] cursor-pointer flex justify-center items-center"
                @click="triggerFileInput(index)"
              >
                上传文件
              </div>
              <div class="my-3">点击上传文件</div>
              <div class="text-[#999999] text-xs">
                请勿上传裸露、暴力、血腥或其他包含非法信息图片
              </div>
            </div>
          </n-spin>

          </div>
          <div class="grid grid-cols-3 gap-2.5 mt-4 w-full">
            <div v-for="(subItem, subIndex) in item.imagePaths" :key="subIndex">
              <img
                class="w-full h-[200px] object-cover rounded-lg"
                :src="subItem"
                alt=""
              />
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="flex items-center justify-center mt-5">
      <div
        class="flex justify-center items-center mt-5 w-[20%] mx-2 h-10 rounded-lg bg-[#f1f2f7] cursor-pointer"
        @click="preStep"
      >
        上一步
      </div>
      <div
        class="flex justify-center items-center mt-5 text-white mx-2 w-[20%] h-10 rounded-lg bg-[#3162ff] cursor-pointer"
        @click="handlePublish"
      >
        发布
      </div>
    </div>
  </div>
  <input
    ref="fileInput"
    type="file"
    class="hidden"
    accept="image/*"
    multiple
    @change="handleFileChange"
  />

  <!-- 成功之后的弹框 -->
  <n-modal
    v-model:show="showSuccessModal"
    :mask-closable="false"
    preset="dialog"
    title="发布成功！"
    content="工作流发布成功， 可至个人中心查看状态"
    positive-text="确认"
    @positive-click="onPositiveClick"
  />
</template>

<style scoped></style>