new_huozhou_frontend/src/views/projectSummary/planSummary/ShowDetailPage.vue

<template>
  <!-- 自定义表单 -->
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="项目汇总详情"
    width="1700px"
    :showOkBtn="false"
    :showCancelBtn="false"
  >
    <BasicTable @register="registerTable" @fetch-success="fetchSuccess">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
      <template #toolbar>
        <div class="text-base font-bold">单位：（万元）</div>
      </template>
      <template #headerTop>
        项目当前所处阶段
        <div class="container mx-auto mt-4 mb-4 h-20">
          <div class="grid grid-cols-5 gap-4 h-full">
            <div class="bg-[#1890FF] opacity-100 h-full">
              <div class="grid grid-cols-4 gap-1 h-full">
                <div class="col-span-3 mt-4 ml-4 text-white">项目申报阶段</div>
                <div
                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
                  >{{ countStage[0].value }}</div
                >
              </div>
            </div>
            <div class="bg-[#1890FF] opacity-90 h-full">
              <div class="grid grid-cols-4 gap-1 h-full">
                <div class="col-span-3 mt-4 ml-4 text-white">项目立项阶段</div>
                <div
                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
                  >{{ countStage[1].value }}</div
                >
              </div>
            </div>
            <div class="bg-[#1890FF] opacity-85 h-full">
              <div class="grid grid-cols-4 gap-1 h-full">
                <div class="col-span-3 mt-4 ml-4 text-white">项目采购阶段</div>
                <div
                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
                  >{{ countStage[2].value }}</div
                >
              </div>
            </div>
            <div class="bg-[#1890FF] opacity-80 h-full">
              <div class="grid grid-cols-4 gap-1 h-full">
                <div class="col-span-3 mt-4 ml-4 text-white">项目建设阶段</div>
                <div
                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
                  >{{ countStage[3].value }}</div
                >
              </div>
            </div>
            <div class="bg-[#1890FF] opacity-70 h-full">
              <div class="grid grid-cols-4 gap-1 h-full">
                <div class="col-span-3 mt-4 ml-4 text-white">项目验收阶段</div>
                <div
                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
                  >{{ countStage[5].value }}</div
                >
              </div>
            </div>
          </div>
        </div>
      </template>
    </BasicTable>
  </BasicModal>
  <BasicModal
    @register="registeruploadFile"
    title="查看进度"
    width="1200px"
    :showOkBtn="false"
    :showCancelBtn="false"
  >
    <showtu :res="showtuList" />
  </BasicModal>
  <SetWanCheng  @register="registerwancheng"></SetWanCheng>

</template>
<script lang="ts" name="addAndModify" setup>
  import { ref, onMounted } from 'vue';
  import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table';
  import { useModalInner, BasicModal } from '@/components/Modal';
  import {
    detailColumn,
    searchFormSchemacengji,
    searchFormSchemarenwu,
  } from '@/views/projectSummary/planSummary/planSummary.data';
  import {
    getProjectDetailPage,
    getCountStage,
  } from '@/views/projectSummary/planSummary/planSummary.api';
  import { queryPlanInfoMainTimeline } from '@/views/projectLib/projectPlan/projectPlan.api';
  import showtu from '@/views/projectLib/projectPlan/showtu.vue';
  import { useModal } from '@/components/Modal';
  import { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api';
  import SetWanCheng from './SetWanCheng.vue';
  const [registeruploadFile, { openModal: openPlanFile, closeModal: closePlanFile }] = useModal(); //文件上传和查看
  const [registerwancheng, { openModal }] = useModal();
  let fatherData = ref<any>();
  let showtuList = ref<Array<Object>>();

  const emit = defineEmits(['close']);
  let pageType = ref<string>('renwu');
  let countStage = ref<any>([
    { value: 0 },
    { value: 0 },
    { value: 0 },
    { value: 0 },
    { value: 0 },
    { value: 0 },
  ]);
  const [registerModal, { closeModal }] = useModalInner(init);
  async function init(data) {
    fatherData.value=data;
    pageType.value = data.pageType;
    console.log('pageType', data.pageType);
    if (data.pageType == 'cengji') {
      setProps({ formConfig: { schemas: searchFormSchemacengji } });
      getForm().setFieldsValue(data.form);
    } else {
      setProps({ formConfig: { schemas: searchFormSchemarenwu } });
      getForm().setFieldsValue(data.form);
    }
    // countStage.value=await getCountStage()
    console.log('countStage', countStage.value);
  }
  const [registerTable, { getForm, setProps }] = useTable({
    api: getProjectDetailPage,
    columns: detailColumn,
    showIndexColumn: false,
    useSearchForm: true,
    actionColumn: {
      width: 140,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    //表单查询项设置
    formConfig: {
      schemas: searchFormSchemacengji,
    },
  });
  function getTableAction(record): ActionItem[] {
    return [
      {
        label: '查看进度',
        onClick: handlejindu.bind(null, record),
        ifShow: () => {
          if (record.projectStage == '项目申报阶段') {
            return false;
          } else {
            return true;
          }
        },
      },
    ];
  }
  async function fetchSuccess() {
    let formdata = await getForm().getFieldsValue();
    countStage.value = await getCountStage(formdata);
    console.log('afterFetch', formdata);
  }
  async function handlejindu(record) {
    showtuList.value = await queryPlanInfoMainTimeline({ projectid: record.id });
    openPlanFile(true);
  }
  function setWancheng() {
    openModal(true,fatherData.value);
  }
  function dialogVisible() {
    closeModal();
    emit('close');
  }
</script>
<style></style>