'上传变更公告获取详情与删除'

zhangwei

2025-08-27 dade6a8b4772abc113383246d05ab59162630e7c

 src/views/system/dept/detail.vue

@@ -1,14 +1,21 @@
<script setup lang="tsx">
import { ref, reactive, onMounted, computed, PropType } from "vue";
import { ref, reactive, onMounted, computed, PropType, h } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useDept } from "./utils/hook";
import { useDetail } from "./utils/detail";
import { getTenderOrderDetail } from "@/api/item/index";
const isLoading = ref(false);
import { addDialog } from "@/components/ReDialog";
import pdfPreview from "@/views/system/component/pdfPreview.vue";
import { deviceDetection } from "@pureadmin/utils";
interface Emits {
  (e: "backListPage"): void;
}
import MaterialIconThemePdf from "~icons/material-icon-theme/pdf";
import MaterialIconThemeImage from "~icons/material-icon-theme/image";
import MaterialIconThemeWord from "~icons/material-icon-theme/word";
import MaterialIconThemeTable from "~icons/material-icon-theme/table";
import MaterialIconThemeZip from "~icons/material-icon-theme/zip";
const emit = defineEmits<Emits>();
const props = defineProps({
  nowID: null
@@ -17,41 +24,83 @@
import IconParkSolidBack from "~icons/icon-park-solid/back";

const { openDialog } = useDept(ref({}));
const { openUploadDialog, state } = useDetail();
const { openUploadDialog, state, changeDialog } = useDetail();
defineOptions({
  name: "itemdetail"
});
const convertFujianToObjects = (fujianStr, fujianNameStr) => {
  // 分割字符串为数组并过滤空值
  const srcArray = fujianStr.split(",").filter(Boolean);
  const nameArray = fujianNameStr.split(",").filter(Boolean);

  // 提取文件后缀作为valu
  const getFileExtension = fileName => {
    const lastDotIndex = fileName.lastIndexOf(".");
    // 如果没有后缀或文件名以点结尾，返回空字符串
    if (lastDotIndex === -1 || lastDotIndex === fileName.length - 1) {
      return "";
    }
    return fileName.slice(lastDotIndex + 1).toLowerCase();
  };

  // 映射为目标对象数组
  return srcArray.map((src, index) => {
    // 确保名称数组有对应索引的元素
    const name = nameArray[index]?.trim() || `未知文件${index + 1}`;

    return {
      name: name,
      filePath: src.trim(),
      fileType: getFileExtension(name)
    };
  });
};
onMounted(async () => {
  let res = await getTenderOrderDetail({ id: props.nowID });
  state.nowInfo = res.result;
  if (state.nowInfo.fujian) {
    state.nowInfo.fujianList = convertFujianToObjects(
      state.nowInfo.fujian,
      state.nowInfo.fujianName
    );
  }
});
const backListPage = () => {
  emit("backListPage");
};
const previewPdf = pdfUrl => {
  addDialog({
    width: "80%",
    title: "确认信息",
    contentRenderer: () => (
      <iframe
        type="application/pdf"
        src={pdfUrl}
        width="800"
        height="600"
      ></iframe>
    ), // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
    closeCallBack: ({ options, args }) => {
      // options.props 是响应式的
      // const { formInline } = options.props as FormProps;
      // const text = `姓名：${formInline.user} 城市：${formInline.region}`;
      if (args?.command === "cancel") {
        // 您点击了取消按钮
        // active.value -= 1;
      } else if (args?.command === "sure") {
      } else {
      }
    }
  });
  console.log(pdfUrl, "pdfUrl");

  switch (pdfUrl.fileType) {
    case "png":
      showImg(pdfUrl.filePath);
      break;
    case "jepg":
      showImg(pdfUrl.filePath);
      break;
    case "pdf":
      addDialog({
        title: `预览pdf`,
        props: {},
        width: "60%",
        draggable: true,
        fullscreen: deviceDetection(),
        fullscreenIcon: true,
        sureBtnLoading: true,
        closeOnClickModal: false,
        contentRenderer: () => h(pdfPreview, { fileInfo: pdfUrl })
        // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
      });
      break;
    default:
      window.location.href = pdfUrl.filePath;
      break;
  }
};
const showPreview = ref(false);
const showImg = (name: string | number) => {
  showPreview.value = true;
  state.srcList = [name];
};
</script>

@@ -80,7 +129,12 @@
        </div>
      </template>
      <div>
        <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions
          class="margin-top"
          :column="3"
          border
          label-width="120"
        >
          <el-descriptions-item label="项目编号">
            {{ state.nowInfo.projectCode }}
          </el-descriptions-item>
@@ -93,9 +147,9 @@
          <el-descriptions-item label="联合体投标">
            {{ state.nowInfo.lianhetitoubiao }}
          </el-descriptions-item>
          <!-- <el-descriptions-item label="Remarks">
          <el-descriptions-item label="开标方式">
            {{ state.nowInfo.kaibiaofangshi }}
          </el-descriptions-item>
          <el-descriptions-item label="Address" /> -->
        </el-descriptions>
      </div>
    </el-card>
@@ -114,11 +168,18 @@
              <div>
                <el-form label-width="auto" style="max-width: 1000px">
                  <el-form-item label="项目信息：">
                    投标报名开始时间：
                    {{ state.nowInfo.toubiaoStartDate ?? "暂无" }}
                    投标报名截止时间：
                    {{ state.nowInfo.toubiaoEndDate }}
                    开标时间：{{ state.nowInfo.kaibiaoDate }}
                    <span class="mr-4">
                      投标报名开始时间：{{
                        state.nowInfo.toubiaoStartDate ?? "暂无"
                      }}
                    </span>
                    <span class="mr-4">
                      投标报名截止时间：
                      {{ state.nowInfo.toubiaoEndDate ?? "暂无" }}
                    </span>
                    <span class="mr-4">
                      开标时间：{{ state.nowInfo.kaibiaoDate ?? "暂无" }}
                    </span>
                  </el-form-item>
                  <el-form-item label="上传公告：">
                    <el-button
@@ -126,7 +187,7 @@
                      type="primary"
                      plain
                      size="small"
                      @click="openUploadDialog('上传')"
                      @click="openUploadDialog('上传', state.nowInfo)"
                    >
                      上传公告
                    </el-button>
@@ -139,22 +200,114 @@
                    >
                      上传变更公告
                    </el-button>
                    <el-button
                      type="primary"
                      plain
                      size="small"
                      @click="changeDialog('上传变更', state.nowInfo)"
                    >
                      修改标题
                    </el-button>
                  </el-form-item>
                  <el-form-item v-if="state.nowInfo.zhaobiaowenjian" label=" ">
                    <div class="border-1 w-[100%] rounded-md p-3">
                      <p>{{ state.nowInfo.projectName }}</p>
                      <p>上传时间：2025-8-12 13:41:00</p>
                      <el-button
                      <p>上传时间：{{ state.nowInfo.fabuDate }}</p>
                      <p
                        class="flex items-center cursor-pointer"
                        @click="
                          previewPdf({
                            name: state.nowInfo.zhaobiaowenjian,
                            filePath: state.nowInfo.zhaobiaowenjianName,
                            fileType: 'pdf'
                          })
                        "
                      >
                        招标文件：<MaterialIconThemePdf
                          style="font-size: 1.5em"
                        />{{ state.nowInfo.zhaobiaowenjianName }}
                      </p>
                      <p
                        v-if="state.nowInfo?.changeOrder"
                        class="flex items-center cursor-pointer"
                        @click="
                          previewPdf({
                            name: state.nowInfo.changeOrder.biangengwenjianName,
                            filePath: state.nowInfo.changeOrder.biangengwenjian,
                            fileType: 'pdf'
                          })
                        "
                      >
                        变更公告：
                        <MaterialIconThemePdf style="font-size: 1.5em" />
                        {{ state.nowInfo.changeOrder.biangengwenjianName }}
                      </p>
                      <div v-if="state.nowInfo.fujian" class="flex">
                        附件：
                        <div>
                          <p
                            v-for="item in state.nowInfo.fujianList"
                            :key="item.src"
                            class="flex items-center cursor-pointer"
                            @click="previewPdf(item)"
                          >
                            <MaterialIconThemeImage
                              v-if="
                                item.fileType == 'png' ||
                                item.fileType == 'jepg'
                              "
                              style="font-size: 1.5em"
                            />
                            <MaterialIconThemePdf
                              v-else-if="item.fileType == 'pdf'"
                              style="font-size: 1.5em"
                            />
                            <MaterialIconThemeTable
                              v-else-if="item.fileType == 'xlsx'"
                              style="font-size: 1.5em"
                            />
                            <MaterialIconThemeWord
                              v-else-if="
                                item.fileType == 'doc' ||
                                item.fileType == 'docx'
                              "
                              style="font-size: 1.5em"
                            />
                            <MaterialIconThemeZip
                              v-else
                              style="font-size: 1.5em"
                            />
                            {{ item.name }}
                          </p>
                        </div>
                      </div>
                      <!-- <el-button
                        type="primary"
                        plain
                        size="small"
                        @click="previewPdf(state.nowInfo.zhaobiaowenjian)"
                      >
                        点击预览
                      </el-button>
                      <el-button type="primary" plain size="small">
                      </el-button> -->
                      <!-- <el-button
                        v-if="state.nowInfo?.changeOrder"
                        type="primary"
                        plain
                        size="small"
                        @click="
                          previewPdf(state.nowInfo.changeOrder.biangengwenjian)
                        "
                      >
                        点击预览变更公告
                      </el-button> -->
                      <!-- <el-button
                        type="primary"
                        plain
                        size="small"
                        @click="changeDialog('上传变更', state.nowInfo)"
                      >
                        修改标题
                      </el-button>
                      </el-button> -->
                    </div>
                  </el-form-item>
                  <!-- <el-form-item label="磋商文件：">
@@ -223,6 +376,12 @@
        </el-tabs>
      </el-card>
    </div>
    <el-image-viewer
      v-if="showPreview"
      :url-list="state.srcList"
      show-progress
      @close="showPreview = false"
    />
  </div>
</template>