public-fuse/src/view/cameraVersionApp/edit.vue

<template>
  <el-form
    :model="data"
    ref="form"
    label-width="120px"
    class="cameraVersion-from"
  >
    <el-form-item label="版本号" class="mandatory">
      <el-input
        maxlength="30"
        v-model.trim="data.version"
        placeholder="请输入最新版本号"
      ></el-input>
    </el-form-item>
    <el-form-item label="最低版本号">
      <el-input
        maxlength="30"
        v-model.trim="data.minVersion"
        placeholder="请输入最低版本(低于此版本号强制更新)"
      ></el-input>
    </el-form-item>

    <el-form-item label="版本更新说明" class="mandatory">
      <el-input
        :maxlength="200"
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 10 }"
        style="white-space: pre-wrap; word-break: break-all"
        v-model="data.description"
        placeholder="请输入版本更新说明"
      ></el-input>
    </el-form-item>
    <el-form-item label="文件" class="mandatory" v-if="isAdd">
      <el-upload
        class="upload-demo"
        :multiple="false"
        :limit="1"
        :disabled="!!data.file"
        :before-upload="upload"
        :file-list="fileList"
        :http-request="httpsApi"
        :on-preview="previewFile"
        :accept="accept"
        :before-remove="removeFile"
      >
        <el-button type="primary" :disabled="!!data.file">
          <el-icon><Upload /></el-icon>上传
        </el-button>
        <template v-slot:tip>
          <div class="el-upload__tip">注：可上传{{ size }}以内的文件</div>
        </template>
        <!-- <template v-slot:file="{ file }: { file: UploadFile }">
          <div class="file" @click.stop="previewFile()">
            <div>
              <el-icon><Document /></el-icon>
              <span class="name">{{ file.name }}</span>
            </div>
            <el-icon @click.stop="removeFile()"><Close /></el-icon>
          </div>
        </template> -->
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { computed, ref, unref, watch, watchEffect } from "vue";
import { QuiskExpose } from "@/helper/mount";
import { CameraVersionAppEntity } from "@/store/cameraVersionApp";
import { useUpload } from "@/hook/upload";
import { maxFileSize } from "@/constant/caseFile";

import {
  addCameraVersionApp,
  editCameraVersionApp,
  CameraVersionAppType,
} from "@/store/cameraVersionApp";
import { ElMessage } from "element-plus";

const props = defineProps<{
  // type: string | number;
  entity?: CameraVersionAppEntity;
}>();
const data = ref<CameraVersionAppEntity>({
  version: "",
  description: "",
  minVersion: "",
  file: undefined,
});

const form = ref();

const isAdd = computed(() => !props.entity?.id);

const httpsApi = async ({ file }) => {
  console.log("httpsApi", file);
  // let fileUrl = await uploadFile(file);
  data.value.file = file;
  // file.url = fileUrl;
  // console.log("httpsApi", file, fileUrl);
};

watchEffect(() => {
  if (props.entity) {
    data.value = { ...props.entity };
  }
});
const { size, fileList, upload, removeFile, previewFile, file, accept } =
  useUpload({
    maxSize: maxFileSize,
    formats: [".jpg", ".jpeg"],
  });
defineExpose<QuiskExpose>({
  async submit() {
    if (!data.value.version) {
      ElMessage.error("版本号不能为空！");
      throw "版本号不能为空！";
    }
    if (
      !data.value.description ||
      (data.value.description &&
        String(data.value.description).trim().length === 0)
    ) {
      ElMessage.error("版本更新说明不能为空！");
      throw "版本更新说明不能为空！";
    }
    if (unref(isAdd)) {
      if (!data.value.file) {
        ElMessage.error("文件不能为空！");
        throw "文件不能为空！";
      }
      await addCameraVersionApp(data.value as any as CameraVersionAppType);
      ElMessage.success("添加成功！");
   
    } else {
      await editCameraVersionApp(data.value as any as CameraVersionAppType);
      ElMessage.success("保存成功！");
    }
  },
});
</script>

<style scoped>
.icon-style {
  font-size: 20px;
  line-height: 50px;
}
</style>