加班申请模块和审批流程公共组件

yyb

2 小时以前 04b1a9cfde4049be9a38b9832d5289d4a192c883

 src/views/system/appVersion/index.vue

@@ -7,9 +7,9 @@
    </el-row>

    <el-table v-loading="loading" :data="versionList">
      <el-table-column label="ID" prop="id" align="center" width="80" />
      <el-table-column label="应用名称" prop="name" align="center" min-width="150" />
      <el-table-column label="版本号" prop="version" align="center" width="120" />
      <el-table-column label="ID" prop="id" align="center" width="80"/>
      <el-table-column label="应用名称" prop="name" align="center" min-width="150"/>
      <el-table-column label="版本号" prop="version" align="center" width="120"/>
      <el-table-column label="创建时间" prop="createTime" align="center" width="170">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
@@ -20,46 +20,34 @@
          <span>{{ parseTime(scope.row.updateTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="createUser" align="center" width="100" />
      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
      <el-table-column label="创建人" prop="createUser" align="center" width="100"/>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" @click="downloadAttachment(scope.row)">下载</el-button>
          <el-button link type="success" @click="openQrDialog(scope.row)">扫码下载</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.current"
      v-model:limit="queryParams.size"
      @pagination="getList"
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.current"
        v-model:limit="queryParams.size"
        @pagination="getList"
    />

    <el-dialog title="上传APK" v-model="uploadOpen" width="560px" append-to-body @close="resetUploadForm">
      <el-form ref="uploadRef" :model="uploadForm" :rules="uploadRules" label-width="90px">
        <el-form-item label="应用名称" prop="name">
          <el-input v-model="uploadForm.name" placeholder="请输入应用名称" />
          <el-input v-model="uploadForm.name" placeholder="请输入应用名称"/>
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input v-model="uploadForm.version" placeholder="请输入版本号" />
          <el-input v-model="uploadForm.version" placeholder="请输入版本号"/>
        </el-form-item>
        <el-form-item label="APK文件" prop="file">
          <el-upload
            :auto-upload="false"
            :show-file-list="true"
            :limit="1"
            accept=".apk"
            :on-change="handleApkChange"
            :on-remove="handleApkRemove"
            :on-exceed="handleApkExceed"
            :before-upload="beforeApkUpload"
          >
            <el-button type="primary">选择APK文件</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传 APK 文件，且不超过 200MB</div>
            </template>
          </el-upload>
        <el-form-item label="APK文件" prop="storageBlobDTOList">
          <FileUpload v-model:file-list="uploadForm.storageBlobDTOList" :limit="1" :file-type="['apk']"
                      :file-size="200"/>
        </el-form-item>
      </el-form>
      <template #footer>
@@ -69,13 +57,45 @@
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="qrOpen"
      title="扫码下载"
      width="460px"
      append-to-body
      class="download-qr-dialog"
    >
      <div class="download-qr-content">
        <div class="app-meta-card">
          <div class="meta-row">
            <span class="meta-label">应用名称</span>
            <span class="meta-value">{{ qrCurrentRow?.name || "-" }}</span>
          </div>
          <div class="meta-row">
            <span class="meta-label">版本编号</span>
            <span class="meta-value">{{ qrCurrentRow?.version || "-" }}</span>
          </div>
        </div>
        <div class="qr-box">
          <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="download qr code" class="qr-image" />
          <div class="qr-tip">请使用手机扫码下载应用</div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="qrOpen = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="SystemAppVersion">
import { listAppVersion, uploadApk } from "@/api/system/appVersion";
import {listAppVersion, add} from "@/api/system/appVersion";
import FileUpload from "@/components/AttachmentUpload/file/index.vue";
import QRCode from "qrcode";

const { proxy } = getCurrentInstance();
const {proxy} = getCurrentInstance();

const loading = ref(false);
const versionList = ref([]);
@@ -88,16 +108,19 @@

const uploadOpen = ref(false);
const uploading = ref(false);
const qrOpen = ref(false);
const qrCodeUrl = ref("");
const qrCurrentRow = ref(null);
const uploadForm = reactive({
  name: "",
  version: "",
  file: null,
  storageBlobDTOList: null,
});

const uploadRules = {
  name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
  version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
  file: [{ required: true, message: "请上传APK文件", trigger: "change" }],
  name: [{required: true, message: "请输入应用名称", trigger: "blur"}],
  version: [{required: true, message: "请输入版本号", trigger: "blur"}],
  storageBlobDTOList: [{required: true, message: "请上传APK文件", trigger: "change"}],
};

function normalizeListResp(res) {
@@ -113,14 +136,14 @@
function getList() {
  loading.value = true;
  listAppVersion(queryParams)
    .then(res => {
      const result = normalizeListResp(res);
      versionList.value = result.records;
      total.value = result.total;
    })
    .finally(() => {
      loading.value = false;
    });
      .then(res => {
        const result = normalizeListResp(res);
        versionList.value = result.records;
        total.value = result.total;
      })
      .finally(() => {
        loading.value = false;
      });
}

function openUploadDialog() {
@@ -131,86 +154,50 @@
function resetUploadForm() {
  uploadForm.name = "";
  uploadForm.version = "";
  uploadForm.file = null;
  uploadForm.storageBlobDTOList = null;
  proxy.resetForm("uploadRef");
}

function beforeApkUpload(file) {
  const isApk = /\.apk$/i.test(file.name);
  if (!isApk) {
    proxy.$modal.msgWarning("只能上传APK文件");
    return false;
  }
  const isLt200M = file.size / 1024 / 1024 < 200;
  if (!isLt200M) {
    proxy.$modal.msgWarning("APK 文件大小不能超过 200MB");
    return false;
  }
  return true;
}

function handleApkChange(file) {
  if (!file || !file.raw) return;
  if (!beforeApkUpload(file.raw)) {
    uploadForm.file = null;
    proxy.$refs.uploadRef?.clearValidate("file");
    return;
  }
  uploadForm.file = file.raw;
}

function handleApkRemove() {
  uploadForm.file = null;
}

function handleApkExceed() {
  proxy.$modal.msgWarning("只能上传一个APK文件");
}

function downloadAttachment(row) {
  const filePath =
    (row.commonFileList &&
      row.commonFileList.length > 0 &&
      row.commonFileList[0].url) ||
    row.url;
  if (!filePath) {
    proxy.$modal.msgError("下载链接不存在");
  window.open(row.downloadURL, "_blank");
}

async function openQrDialog(row) {
  if (!row?.downloadURL) {
    proxy.$modal.msgError("当前记录缺少下载地址，无法生成二维码");
    return;
  }

  const link = document.createElement("a");
  const rawName = String(row.name || "").trim();
  const fallbackName = String(filePath).split("/").pop()?.split("?")[0] || "app";
  const baseName = rawName || fallbackName;
  const downloadName = /\.apk$/i.test(baseName) ? baseName : `${baseName}.apk`;
  console.log(downloadName,filePath,'downloadName,filePath');
  link.href = filePath;
  link.download = downloadName;
  link.target = "_blank";
  link.rel = "noopener noreferrer";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  try {
    qrCodeUrl.value = await QRCode.toDataURL(row.downloadURL, {
      width: 220,
      margin: 2,
      errorCorrectionLevel: "M",
      color: {
        dark: "#1f2937",
        light: "#ffffff",
      },
    });
    qrCurrentRow.value = row;
    qrOpen.value = true;
  } catch (error) {
    proxy.$modal.msgError("二维码生成失败，请稍后重试");
  }
}

function submitUpload() {
  proxy.$refs.uploadRef.validate(valid => {
    if (!valid) return;
    const formData = new FormData();
    formData.append("name", uploadForm.name);
    formData.append("version", uploadForm.version);
    formData.append("file", uploadForm.file);

    uploading.value = true;
    uploadApk(formData)
      .then(() => {
        proxy.$modal.msgSuccess("上传成功");
        uploadOpen.value = false;
        getList();
      })
      .finally(() => {
        uploading.value = false;
      });
    add(uploadForm)
        .then(() => {
          proxy.$modal.msgSuccess("上传成功");
          uploadOpen.value = false;
          getList();
        })
        .finally(() => {
          uploading.value = false;
        });
  });
}

@@ -218,3 +205,66 @@
  getList();
});
</script>

<style scoped>
.download-qr-content {
  padding: 4px 4px 8px;
}

.app-meta-card {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #f0f7ff 0%, #ecfdf5 100%);
  border: 1px solid #dbeafe;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 26px;
}

.meta-row + .meta-row {
  margin-top: 6px;
}

.meta-label {
  font-size: 13px;
  color: #64748b;
}

.meta-value {
  max-width: 260px;
  font-size: 14px;
  color: #0f172a;
  font-weight: 600;
  word-break: break-all;
  text-align: right;
}

.qr-box {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 12px 14px;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.qr-image {
  width: 220px;
  height: 220px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 8px;
  background: #fff;
}

.qr-tip {
  margin-top: 10px;
  font-size: 13px;
  color: #64748b;
}
</style>