labsop_scientific_h5/pages/todo/components/document/AchWorkForm.vue

<template>
  <view class="document-form">
    <uv-loading-icon
      v-if="loading"
      mode="circle"
      text="正在加载学术著作详情..."
    ></uv-loading-icon>
    <template v-else-if="form">
      <!-- 基本信息 -->
      <CommonSection title="基本信息" :isFirst="true">
        <CommonInfoRow label="著作名称" :value="form.workName" />
        <CommonInfoRow
          label="著作类别"
          :value="getDictLabel('sci_work_class', form.workClass)"
        />
        <CommonInfoRow label="出版单位" :value="form.workPublisher" />
        <CommonInfoRow
          label="出版社类型"
          :value="
            getDictLabel('sci_work_publisherType', form.workPublisherType)
          "
        />
        <CommonInfoRow
          label="出版时间"
          :value="formatDate(form.workPublicationDate)"
        />
        <CommonInfoRow label="所属部门" :value="form.deptName" />
        <CommonInfoRow label="CIP号" :value="form.cip" />
        <CommonInfoRow label="字数" :value="form.wordsNum" />
        <CommonInfoRow
          label="所属年份"
          :value="
            form.statisticalYear
              ? formatDate(form.statisticalYear, 'YYYY')
              : '-'
          "
        />
        <CommonInfoRow
          label="是否国家规范化教材"
          :value="form.isStandard === '10' ? '是' : '否'"
        />
        <CommonInfoRow
          label="是否翻译著作"
          :value="form.isTranslation === '10' ? '是' : '否'"
        />
        <CommonInfoRow label="著作附件(封面和版权页)" isColumn>
          <view class="file-links">
            <template v-if="workFileList.length > 0">
              <view
                class="file-item"
                v-for="(item, index) in workFileList"
                :key="'work-file-' + index"
                @click="handlePreview(item)"
              >
                <text class="file-link">{{
                  item.fileName || item.name || "-"
                }}</text>
              </view>
            </template>
            <text v-else>-</text>
          </view>
        </CommonInfoRow>
        <CommonInfoRow label="所属平台" isColumn>
          <view class="platform-tags">
            <template v-if="platformList.length > 0">
              <uv-tags
                v-for="(p, index) in platformList"
                :key="index"
                :text="
                  p.platformName === '其他'
                    ? '其他'
                    : p.platformType
                    ? p.platformName + ' (' + p.platformType + ')'
                    : p.platformName
                "
                type="primary"
                plain
                size="mini"
                class="mr5"
              ></uv-tags>
            </template>
            <text v-else>-</text>
          </view>
        </CommonInfoRow>
        <CommonInfoRow label="所属团队" :value="form.belongTeam || '-'" />
      </CommonSection>

      <!-- 关联项目 -->
      <CommonSection title="关联项目" v-if="form.projList?.length">
        <view
          class="achievement-card"
          v-for="(row, index) in form.projList"
          :key="index"
        >
          <view class="a-row">
            <text class="al">关联类型：</text>
            <text class="av">{{
              row.sourceType === "10" ? "项目" : "学科"
            }}</text>
          </view>
          <view class="a-row">
            <text class="al">项目/学科：</text>
            <text class="av">{{ row.projectSource || "-" }}</text>
          </view>
        </view>
      </CommonSection>

      <!-- 著作人 -->
      <CommonSection title="著作人信息" v-if="form.memberList?.length">
        <view class="member-list">
          <view
            class="member-item"
            v-for="(row, index) in form.memberList"
            :key="index"
          >
            <view class="member-header">
              <view class="m-left">
                <text class="m-name mr20">{{ row.memberName }}</text>
                <text class="m-tag" v-if="row.roleContent">{{
                  getDictLabel("sci_work_roleContent", row.roleContent)
                }}</text>
              </view>
              <text class="m-tag blue" v-if="row.position"
                >第{{ row.position }}位</text
              >
            </view>
            <view class="m-body">
              <view class="m-line"
                ><text class="l">贡献率：</text
                ><text class="v">{{ row.contributionRate }}%</text></view
              >
            </view>
          </view>
        </view>
      </CommonSection>

      <!-- 审批记录 -->
      <CommonSection title="审批记录" v-if="form.id">
        <FlowTable
          :id="form.id"
          :businessCode="'学术著作-' + String(form.workCode)"
          defCode="sci_academic_achievement"
        />
      </CommonSection>
    </template>
    <uv-empty v-else mode="data" text="暂无数据"></uv-empty>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import { useDict } from "@/hooks/useDict";
import { useDocumentApi } from "@/api/document";
import { formatDate } from "@/utils/date";
import { previewFile } from "@/utils/file";
import to from "await-to-js";
import FlowTable from "@/pages/project/components/detail/FlowTable.vue";
import CommonSection from "@/components/ui/CommonSection.vue";
import CommonInfoRow from "@/components/ui/CommonInfoRow.vue";

const props = defineProps<{
  code: string;
}>();

const { getDictLabel } = useDict(
  "sci_work_class",
  "sci_work_publisherType",
  "sci_work_roleContent"
);
const documentApi = useDocumentApi();

const form = ref<any>(null);
const loading = ref(false);

const platformList = computed(() => {
  if (form.value?.belongPlatform) {
    try {
      const data = JSON.parse(form.value.belongPlatform);
      return Array.isArray(data) ? data : [];
    } catch (e) {
      if (form.value.belongPlatform === "其他")
        return [{ platformName: "其他" }];
      return [{ platformName: form.value.belongPlatform }];
    }
  }
  return [];
});

const workFileList = computed(() => {
  if (!form.value?.workFile) return [];
  try {
    const files = JSON.parse(form.value.workFile);
    return Array.isArray(files) ? files : [files];
  } catch (e) {
    return [];
  }
});

const handlePreview = (file: any) => {
  const url = file.fileUrl || file.url;
  const name = file.fileName || file.name;
  if (url) {
    previewFile(url, name);
  }
};

const fetchData = async () => {
  if (!props.code) return;
  loading.value = true;
  const workCode = props.code.includes("-")
    ? props.code.split("-")[1]
    : props.code;
  const [err, res] = await to(documentApi.getWorkByCode(workCode));
  if (!err && res?.data) {
    form.value = res.data;
  }
  loading.value = false;
};

onMounted(() => {
  fetchData();
});

watch(
  () => props.code,
  () => {
    fetchData();
  }
);
</script>

<style lang="scss" scoped>
@import "./common.scss";



.platform-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8rpx;
  flex: 1;
  align-items: center;
}

.file-links {
  .file-item {
    padding: 6rpx 0;
  }

  .file-link {
    color: #2979ff;
    text-decoration: underline;
    word-break: break-all;
  }
}
</style>