feat(投资计划 ): 加周期

src/api/project/monthlyPlan.ts

@@ -122,8 +122,8 @@ export const SetEditStatus = (params?: any) =>
     url: Api.EditStatus,
     params,
   });
-export const getFillComDetails = (params?: any) =>
+export const getFillComDetails = (params?: any,url?:any) =>
   defHttp.post<any>({
-    url: Api.BusinessComDetails,
+    url: url,
     params,
   });

src/views/engineeringProject/index.vue

 <template>
   <div>
+    <div v-if="deptId == 100 || deptId == 0" style="margin: 16px">
+      <PageCard title="数据填报周期">
+        <Row>
+          <Col :span="20">
+            <div class="cycleFrame">
+              <div class="card">
+                <div class="cycleIcon">
+                  <img src="@/assets/icons/tianbaoriqi.png" />
+                </div>
+                <div class="characte">
+                  <div class="top">填报周期</div>
+                  <div  @click="selectCycle" class="bottom"  style="color: #0d84ff; text-decoration: underline; cursor: pointer">{{ mothCycle.fillCycle}}</div>
+                </div>
+              </div>
+              <Divider type="vertical" style="height: 36px; border-color: rgba(22,106,203,0.30)" dashed />
+              <div class="card">
+                <div class="cycleIcon">
+                  <img src="@/assets/icons/shenyutianshu.png" />
+                </div>
+                <div class="characte">
+                  <div class="top">剩余天数</div>
+                  <div class="bottom" style="color:#DFAA21 ">{{
+                      daysReturn() + '天'
+                    }}</div>
+                </div>
+              </div>
+              <Divider type="vertical" style="height: 36px; border-color: rgba(22,106,203,0.30)" dashed />
+
+              <div class="card">
+                <div class="cycleIcon">
+                  <img src="@/assets/icons/weiwancheng.png" />
+                </div>
+                <div class="characte">
+                  <div class="top">企业未完成</div>
+                  <div class="bottom" style="color:#DB4343">{{
+                      mothCycle.noNum + '家'
+                    }}</div>
+                </div>
+              </div>
+              <Divider type="vertical" style="height: 36px; border-color: rgba(22,106,203,0.30)" dashed />
+
+              <div class="card">
+                <div class="cycleIcon">
+                  <img src="@/assets/icons/yiwancheng.png" />
+                </div>
+                <div class="characte">
+                  <div class="top">企业已完成</div>
+                  <div class="bottom" style="color:#16CB28">{{
+                      mothCycle.deptNum - mothCycle.noNum + '家'
+                    }}</div>
+                </div>
+              </div>
+            </div>
+          </Col>
+          <Col :span="4">
+            <a-button class="btn" @click="getFillDetails">
+              查看填报详情
+            </a-button>
+            <a-button class="btn" type="primary" @click="returnEdit">
+              {{ mothCycle.isEdit === '1' ? '开启本轮填报' : '结束本轮填报' }}
+            </a-button>
+          </Col>
+        </Row>
+      </PageCard>
+    </div>
     <BasicTable @register="registerTable" :title="'工程项目投资计划填报'">
       <template #tabSlot>
         <div>
@@ -40,7 +105,9 @@
                 label: '修改',
                 // icon: 'clarity:note-edit-line',
                 onClick: handleEdit.bind(null, record, 0),
-                 ifShow: true
+                 ifShow:  (_action) => {
+                  return record.editStatus == '0';
+                },
               },
                {
                 label: '删除',
@@ -50,7 +117,9 @@
                   placement: 'left',
                   confirm: handleDelete.bind(null, record),
                 },
-                ifShow: true
+                 ifShow:  (_action) => {
+                  return record.editStatus == '0';
+                },
               },
               {
                 label: '上报',
@@ -69,11 +138,13 @@
         </template>
       </template>
     </BasicTable>
+    <CycleModel @register="registerCycleModel" :user-data="mothCycle" @get-cycle="getSetCycle" />
     <yearModal @register="register" @close="handleNew" />
+    <FillDetailsModel @register="registerFillDetail"></FillDetailsModel>
   </div>
 </template>
 <script lang="ts" setup>
-  import { Tag,Tabs } from 'ant-design-vue';
+import {Tag, Tabs, Col, Row, Divider} from 'ant-design-vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import yearModal from '@/components/yearModal.vue';
   import { useModal } from '@/components/Modal';
@@ -89,8 +160,70 @@
   import {getDepartmentList} from "@/api/project/settlementManage";
   import {useMessage} from "@/hooks/web/useMessage";
   import {useUserStore} from "@/store/modules/user";
+import PageCard from "@/components/Page/src/PageCard.vue";
+import CycleModel from "@/views/monthlyPlan/cycleModel/cycleModel.vue";
+import FillDetailsModel from "@/views/monthlyPlan/fillDetailsModel/fillDetailsModel.vue";
+import {getMothCycel,SetEditStatus} from "@/api/project/monthlyPlan";
+const mothCycle = ref({
+  fillCycle:'2024',
+  isEdit: '0',
+  deptNum: 12,
+  noNum: 6,
+  planType:''
+});
+const [registerCycleModel, { openModal: openCycleModel }] = useModal();
+const [registerFillDetail, { openModal: openFillDetailModel }] = useModal();
+function selectCycle() {
+  openCycleModel(true, {
+    data: mothCycle.value,
+    type:'year',
+    id:8,
+    planType:planType.value
+  });
+}
+function getFillDetails(){
+  openFillDetailModel(true,{
+    data:mothCycle.value,
+    url:'/pro/monthEngineer/businessComDetails',
+    module:'Engineering'
+  })
+}
+async function getSetCycle() {
+  const cycle = await getMothCycel({id:'8',module:'Engineering',planType:planType.value});
+  mothCycle.value = cycle;
+}
+function daysReturn() {
+  // 获取今天的日期
+  const today = new Date();
+
+// 获取目标年份和月份
+  let targetYear = Number.parseInt(mothCycle.value.fillCycle);
+  let targetMonth= 12;
+
+// 创建目标日期（2024年9月30日）
+  const targetDate = new Date(targetYear, targetMonth, 0); // 0表示上一个月的最后一天，即9月30日
+
+// 计算时间差（毫秒）
+  const timeDifference = targetDate - today;
+
+// 计算天数差（天数 = 毫秒差 / 每天的毫秒数）
+  const daysUntilTarget = Math.max(0, Math.ceil(timeDifference / (1000 * 60 * 60 * 24)));
+  return daysUntilTarget ;
+}
+
+function returnEdit() {
+  mothCycle.value.planType = planType.value
+  if (mothCycle.value.isEdit == '1') {
+    mothCycle.value.isEdit = '0';
+    SetEditStatus(mothCycle.value);
+  } else {
+    mothCycle.value.isEdit = '1';
+    SetEditStatus(mothCycle.value);
+  }
+  reload();
+}
   const isExamine = ref<boolean>(false);
-  const deptId = ref(100);
+  const deptId = useUserStore().userInfo.deptParentId;
   const { createMessage } = useMessage();
   const { error } = createMessage;
 
@@ -124,13 +257,13 @@
   onMounted(async () => {
     const  data = await getDepartmentList()
     searchFormSchema[2].componentProps.options=data
-    deptId.value = useUserStore().userInfo.deptParentId;
     let roles = useUserStore().userInfo.roles;
     roles.forEach((item) => {
       if (item.role_key === 'approver') {
         isExamine.value = true;
       }
     });
+    getSetCycle()
   });
 
   async function clickTab(value){
@@ -139,6 +272,7 @@
      planType:value
    }).then(()=>{
      reload()
+     getSetCycle()
    })
   }
   const planType = ref('自投')
@@ -206,5 +340,28 @@
 <style scoped>
   .btn {
     margin-right: 10px;
+    margin-top: 8px;
+  }
+
+  .cycleFrame{
+    border: 1px solid rgba(22, 106, 203, 0.10);
+    border-radius: 6px;
+    padding: 20px 50px;
+    margin-right: 20px;
+    display: flex;
+    justify-content: space-between;
+    .card{
+      display: flex;
+      .cycleIcon{
+        margin-right: 10px;
+      }
+      .characte{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        .top{}
+        .bottom{}
+      }
+    }
   }
 </style>

src/views/monthlyPlan/cycleModel/cycleModel.vue

@@ -15,16 +15,57 @@
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '@/components/Form';
   import { SetMothCycelEdit } from '@/api/project/monthlyPlan';
+  import moment from 'moment/moment';
 
   const props = defineProps({
     userData: { type: Object },
   });
   const emit = defineEmits(['getCycle', 'register']);
   const modelRef = ref({});
+  let schemasForm = reactive<FormSchema[]>([]);
   const [registerForm, { getFieldsValue, validate }] = useForm({
     labelWidth: 100,
-    schemas: [
-      {
+    schemas: schemasForm,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+  const cycleData = ref({
+    fillCycle: '2024-09',
+    planType: '',
+    id: '',
+  });
+  const [register, { closeModal }] = useModalInner((data) => {
+    console.log(data);
+    cycleData.value.fillCycle = data.data.fillCycle;
+    cycleData.value.id = data.id;
+    if (data.planType) {
+      cycleData.value.planType = data.planType;
+    }
+    schemasForm.length = 0;
+    if (data.type == 'year') {
+      schemasForm.push({
+        field: 'fillCycle',
+        label: '',
+        component: 'DatePicker',
+        required: true,
+        defaultValue: '',
+        componentProps: {
+          placeholder: '年份',
+          picker: 'year',
+          valueFormat: 'YYYY',
+          format: 'YYYY',
+          defaultValue: moment().format('YYYY'),
+          style: {
+            width: '100%',
+          },
+        },
+        colProps: { span: 11, offset: 1 },
+      });
+    }
+    if (data.type == 'moth') {
+      schemasForm.push({
         field: 'fillCycle',
         label: '填报周期',
         component: 'DatePicker',
@@ -39,45 +80,15 @@
             width: '100%',
           },
         },
-      },
-      // {
-      //   field: 'endTime',
-      //   label: '结束时间',
-      //   component: 'DatePicker',
-      //   defaultValue: '',
-      //   required: true,
-      //   componentProps: {
-      //     placeholder: '结束时间',
-      //     valueFormat: 'YYYY-MM-DD',
-      //     format: 'YYYY-MM-DD',
-      //     style: {
-      //       width: '100%',
-      //     },
-      //   },
-      // },
-    ],
-    showActionButtonGroup: false,
-    actionColOptions: {
-      span: 24,
-    },
-  });
-  const cycleData = ref({
-    beginTime: '2024-07-01',
-    endTime: '2024-09-02',
-    fillCycle: '2024-09',
-    isEdit: '0',
-    deptNum: 12,
-    noNum: 6,
       });
-  const [register, { closeModal }] = useModalInner((data) => {
-    console.log(data.data);
-    cycleData.value = data.data;
+    }
   });
 
   function handleSubmit() {
     validate().then(() => {
       const value = getFieldsValue();
       cycleData.value.fillCycle = value.fillCycle;
+
       SetMothCycelEdit(cycleData.value).then(() => {
         emit('getCycle');
         console.log('2123', cycleData.value);

src/views/monthlyPlan/fillDetailsModel/fillDetailsModel.vue

@@ -46,12 +46,12 @@
     },
   ];
   const getTitle = ref('');
-  const params = ref({ mothCycle: '' });
+  const params = ref({ mothCycle: '',module:'Month' });
 
   const [register, { closeModal }] = useModalInner(async (data) => {
     params.value.mothCycle = data.data.fillCycle;
-    dataSource.value = await getFillComDetails(params.value);
-    // console.log('212', list);
+    params.value.module = data.module;
+    dataSource.value = await getFillComDetails(params.value, data.url);
   });
 </script>
 <style scoped lang="less"></style>

src/views/monthlyPlan/monthlyPlanAdd/monthlyPlanAdd.vue

@@ -193,15 +193,19 @@
   function selectCycle() {
     openCycleModel(true, {
       data: mothCycle.value,
+      id:1,
+      type:'moth'
     });
   }
   function getFillDetails(){
     openFillDetailModel(true,{
-      data:mothCycle.value
+      data:mothCycle.value,
+      url:'/pro/monthEngineer/businessComDetails',
+      module:'Month'
     })
   }
   async function getSetCycle() {
-    const cycle = await getMothCycel();
+    const cycle = await getMothCycel({id:'1',module:'Moth'});
     mothCycle.value = cycle;
   }
   onMounted(async () => {
@@ -216,8 +220,7 @@
     searchFormSchema[1].componentProps.options = data;
     const list = await getMonthlyPlanList();
     isEdit.value = list.items[0].reviewStatus;
-    const cycle = await getMothCycel();
-    mothCycle.value = cycle;
+    getSetCycle();
   });
   const { createMessage } = useMessage();
   const { error } = createMessage;