进度填报大屏界面基本功能

src/views/progress/plan/component/createDailyRate.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="daily-paper-count">
-    <el-dialog v-model="isShowDialog" @close="onCancel" width="65vw" :close-on-click-modal="false" :destroy-on-close="true">
+    <el-dialog
+      v-model="isShowDialog"
+      @close="onCancel"
+      width="70vw"
+      :close-on-click-modal="false"
+      :destroy-on-close="true"
+      :lock-scroll="false"
+      :append-to-body="false"
+    >
       <template #header>
         <div v-drag="['.daily-paper-count .el-dialog', '.daily-paper-count .el-dialog__header']" style="font-size: 18px">
           {{ infoDetail.name }} 日报填写
@@ -24,23 +32,23 @@
                 <div style="margin-left: 45px" m="4">
                   <el-table
                     :border="true"
-                    :data="propsRow.detail"
+                    :data="propsRow.detailList"
                     :header-cell-style="{ 'text-align': 'center' }"
                     :cell-style="{ 'text-align': 'center' }"
                     highlight-current-row
                   >
                     <el-table-column label="序号" type="index" width="60px" />
                     <el-table-column label="计划日期" prop="date" />
-                    <el-table-column label="数量" prop="planNum" width="60" />
-                    <el-table-column label="完成量" prop="finishedNum" width="60" />
-                    <el-table-column label="AI填报" prop="autoFill" width="60" />
-                    <el-table-column label="操作" class-name="small-padding" width="200px" fixed="right">
+                    <el-table-column label="数量" prop="planNumber" width="60" />
+                    <el-table-column label="完成量" prop="finishedNumber" width="70" />
+                    <el-table-column label="AI填报" prop="aiFill" width="70" />
+                    <el-table-column label="操作" class-name="small-padding" width="170px" fixed="right">
                       <template #default="{ row: scopeRow, $index }">
                         <el-button type="primary" link @click="handleDayAdd(scopeRow, propsRow)">
-                          <el-icon><ele-Plus /></el-icon>日报
+                          <el-icon><Plus /></el-icon>日报
                         </el-button>
                         <el-button type="success" link @click="handleView(scopeRow, propsRow)">
-                          <el-icon><ele-View /></el-icon>查看
+                          <el-icon><View /></el-icon>查看
                         </el-button>
                       </template>
                     </el-table-column>
@@ -49,8 +57,8 @@
               </template>
             </el-table-column>
             <el-table-column label="序号" type="index" :index="indexMethod" width="60px" />
-            <el-table-column label="计划数量" prop="planNum" min-width="100px" />
-            <el-table-column label="完成数量" prop="finishedNum" min-width="100px" />
+            <el-table-column label="计划数量" prop="planNumber" min-width="100px" />
+            <el-table-column label="完成数量" prop="finishedNumber" min-width="100px" />
             <el-table-column label="延期量" min-width="100px">
               <template #default="{ row: scopeRow }">
                 <el-tag :type="filterW(scopeRow) ? 'danger' : 'success'">
@@ -58,10 +66,10 @@
                 </el-tag>
               </template>
             </el-table-column>
-            <el-table-column label="AI填报" prop="autoFill" min-width="100px" />
+            <el-table-column label="AI填报" prop="aiFill" min-width="100px" />
             <el-table-column label="开始时间" min-width="100px">
               <template #default="{ row: scopeRow }">
-                <span>{{ scopeRow.startAt.split(' ')[0] }}</span>
+                <span>{{ scopeRow.startDate.split(' ')[0] }}</span>
               </template>
             </el-table-column>
           </el-table>
@@ -73,13 +81,14 @@
             @pagination="getWorkList"
             layout="total, sizes, prev, pager, next"
             :isSmall="5"
+            class="float-left mt-4.5!"
           />
         </div>
         <div class="box_right" v-if="showDayWork">
           <div class="time_submit">
             <span>{{ formDetail.submitTime }}</span>
-            <el-button type="primary" :disabled="!checkedList.length || flag" @click="onUploadDaily" size="large">
-              <el-icon><ele-Upload /></el-icon>提交日报
+            <el-button type="primary" :disabled="!checkedList.length || flag" @click="onUploadDaily" size="small">
+              <el-icon><Upload /></el-icon>提交日报
             </el-button>
           </div>
           <el-table
@@ -97,14 +106,14 @@
               <el-table-column label="状态" align="center" min-width="100px">
                 <template #default="{ row: scopeRow }">
                   <el-tag :type="typeList[scopeRow.status]">
-                    {{ filterStatus(scopeRow.status) }}
+                    {{ filterStatus(Number(scopeRow.status)) }}
                   </el-tag>
                 </template>
               </el-table-column>
             </el-table-column>
           </el-table>
           <pagination
-            v-show="detailTotal > 0"
+            v-show="1"
             :total="detailTotal"
             v-model:page="detailQueryParams.pageNum"
             v-model:limit="detailQueryParams.pageSize"
@@ -116,8 +125,8 @@
         <div class="box_right" v-else>
           <div class="time_submit">
             <span>{{ formDetail.submitTime }}</span>
-            <el-button type="danger" :disabled="single" @click="handleRemove(null)" size="large">
-              <el-icon><ele-SemiSelect /></el-icon>批量移除
+            <el-button type="danger" :disabled="single" @click="handleRemove(null)" size="small">
+              <el-icon><Minus /></el-icon>批量移除
             </el-button>
           </div>
           <el-table
@@ -134,14 +143,14 @@
               <el-table-column label="编号" align="center" prop="name" min-width="100px" />
               <el-table-column label="填报方式" align="center" prop="status" min-width="100px">
                 <template #default="{ row: scopeRow }">
-                  <span v-if="scopeRow.status === 2">手动填报</span>
-                  <span v-if="scopeRow.status === 3">AI识别</span>
+                  <span v-if="scopeRow.finishType === '1'">手动填报</span>
+                  <span v-if="scopeRow.finishType === '2'">AI识别</span>
                 </template>
               </el-table-column>
               <el-table-column label="操作" align="center" min-width="100px">
                 <template #default="{ row: scopeRow }">
                   <el-button type="danger" link @click="handleRemove(scopeRow)">
-                    <el-icon><ele-SemiSelect /></el-icon>移除
+                    <el-icon><Minus /></el-icon>移除
                   </el-button>
                 </template>
               </el-table-column>
@@ -175,7 +184,7 @@ import { workScheduleListQuery } from '@/api/progress/plan/types';
 
 // 响应式状态
 const state = reactive<{
-  expandRowKeys: number[];
+  expandRowKeys: string[];
   loading: boolean;
   isShowDialog: boolean;
   queryParams: workScheduleListQuery;
@@ -186,7 +195,7 @@ const state = reactive<{
     workId: string;
     id: string;
     submitTime: string;
-    finishedNum: number;
+    finishedNumber: number;
   };
   detialList: any[];
   detailTotal: number;
@@ -225,12 +234,12 @@ const state = reactive<{
     workId: '',
     id: '',
     submitTime: '选择日期',
-    finishedNum: 0
+    finishedNumber: 0
   },
   detialList: [],
   detailTotal: 0,
   detailQueryParams: {
-    pageSize: 20,
+    pageSize: 10,
     pageNum: 1
   },
   loading1: false,
@@ -242,7 +251,7 @@ const state = reactive<{
   detialWordList: [],
   detailTotalWork: 0,
   detailQueryParamsWork: {
-    pageSize: 20,
+    pageSize: 10,
     pageNum: 1
   },
   single: true,
@@ -318,15 +327,13 @@ const resetForm = (bool: boolean) => {
 const getPvModuleList = () => {
   loading1.value = true;
   pvModuleList({
-    workId: formDetail.value.workId,
-    ...detailQueryParams.value,
-    type: infoDetail.value.work_type,
-    status: 0
+    id: formDetail.value.id,
+    ...detailQueryParams.value
   }).then((res: any) => {
     loading1.value = false;
-    if (res.code === 0) {
-      detialList.value = res.data.list;
-      detailTotal.value = res.data.total;
+    if (res.code === 200) {
+      detialList.value = res.rows;
+      detailTotal.value = res.total;
     }
   });
 };
@@ -335,13 +342,13 @@ const getPvModuleList = () => {
 const getWorkList = (bool = false) => {
   loading.value = true;
   workScheduleList(queryParams.value).then((res: any) => {
-    if (res.code === 0) {
-      state.tableData = res.data.list.map((item: any, i: number) => {
+    if (res.code === 200) {
+      state.tableData = res.rows.map((item: any, i: number) => {
         item.index = i + 1;
-        item.autoFill = item.detail?.reduce((sum: number, child: any) => sum + child.autoFill, 0) || 0;
+        item.aiFill = item.detailList?.reduce((sum: number, child: any) => sum + child.aiFill, 0) || 0;
         return item;
       });
-      state.total = res.data.total;
+      state.total = res.total;
     }
     loading.value = false;
   });
@@ -366,7 +373,7 @@ const indexMethod = (index: number): number => {
 // 日报添加
 const handleDayAdd = (row: any, obj: any) => {
   resetForm(true);
-  formDetail.value.id = obj.id;
+  formDetail.value.id = row.id;
   formDetail.value.submitTime = row.date;
   state.updateRow = row;
   getPvModuleList();
@@ -376,8 +383,9 @@ const tableKey = (row: any) => row.id;
 
 // 展开行处理
 const clickOpen = (row: any) => {
-  const index = state.expandRowKeys.indexOf(row.id);
-  index === -1 ? state.expandRowKeys.push(row.id) : state.expandRowKeys.splice(index, 1);
+  const rowId = String(row.id);
+  const index = state.expandRowKeys.indexOf(rowId);
+  index === -1 ? state.expandRowKeys.push(rowId) : state.expandRowKeys.splice(index, 1);
   state.expandRowKeys = [...new Set(state.expandRowKeys)];
 };
 
@@ -394,22 +402,21 @@ const onUploadDaily = () => {
   }
 
   const obj = {
-    ids: checkedList.value,
-    workID: formDetail.value.workId,
-    doneTime: formDetail.value.submitTime,
-    planID: formDetail.value.id
+    finishedDetailIdList: checkedList.value,
+    id: formDetail.value.id
   };
 
   state.flag = true;
   addDaily(obj).then((res: any) => {
-    if (res.code === 0) {
+    if (res.code === 200) {
       ElMessage.success('添加成功');
       if (state.updateRow) {
-        state.updateRow.finishedNum += checkedList.value.length;
+        state.updateRow.finishedNumber += checkedList.value.length;
       }
       checkedList.value = [];
       multipleTableRef.value?.clearSelection();
       getPvModuleList();
+      getWorkList();
     } else {
       ElMessage.error(res.message);
     }
@@ -420,10 +427,11 @@ const onUploadDaily = () => {
 // 查看日报
 const handleView = (row: any, obj: any) => {
   resetForm(false);
-  getDailyBookList(row.date);
   state.updateRow = row;
-  formDetail.value.id = obj.id;
+  formDetail.value.id = row.id;
   formDetail.value.submitTime = row.date;
+  getDailyBookList(row.date);
+
   showDayWork.value = false;
 };
 
@@ -431,12 +439,12 @@ const handleView = (row: any, obj: any) => {
 const getDailyBookList = (doneTime: string) => {
   detialWordList.value = [];
   getDailyBook({
-    workId: formDetail.value.workId,
-    type: infoDetail.value.work_type,
-    doneTime
+    id: formDetail.value.id,
+    ...detailQueryParams.value
   }).then((res: any) => {
-    if (res.code === 0) {
-      detialWordList.value = res.data.list || [];
+    if (res.code === 200) {
+      detialWordList.value = res.rows || [];
+      detailTotalWork.value = res.total;
     } else {
       ElMessage.error(res.message);
     }
@@ -453,10 +461,8 @@ const handleSelectionChangeWork = (selection: any[]) => {
 const handleRemove = (row?: any) => {
   const planID = row ? [row.id] : state.checkList;
   const obj = {
-    planID,
-    id: formDetail.value.id,
-    workID: formDetail.value.workId,
-    time: formDetail.value.submitTime
+    detailIdList: planID,
+    id: formDetail.value.id
   };
 
   ElMessageBox.confirm('确认移除该条数据?', '温馨提示', {
@@ -466,12 +472,13 @@ const handleRemove = (row?: any) => {
   })
     .then(() => {
       deleteDaily(obj).then((res: any) => {
-        if (res.code === 0) {
+        if (res.code === 200) {
           ElMessage.success('移除成功');
           if (state.updateRow) {
-            state.updateRow.finishedNum -= planID.length;
+            state.updateRow.finishedNumber -= planID.length;
           }
           getDailyBookList(formDetail.value.submitTime);
+          getWorkList();
         } else {
           ElMessage.error(res.message);
         }
@@ -482,14 +489,14 @@ const handleRemove = (row?: any) => {
 
 // 延期计算
 const filterW = (row: any): number => {
-  const { finishedNum, planNum, endAt } = row;
+  const { finishedNumber, planNumber, endAt } = row;
   if (!endAt) return 0;
 
   const endTime = new Date(endAt).getTime();
   const now = new Date().getTime();
 
-  if (endTime <= now && planNum > finishedNum) {
-    return planNum - finishedNum;
+  if (endTime <= now && planNumber > finishedNumber) {
+    return planNumber - finishedNumber;
   }
   return 0;
 };
@@ -500,6 +507,32 @@ defineExpose({
   closeDialog
 });
 const emit = defineEmits(['getProgressList']);
+
+let scrollTop = 0;
+
+watch(
+  () => isShowDialog.value,
+  (visible) => {
+    if (visible) {
+      scrollTop = window.scrollY || document.documentElement.scrollTop;
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+      document.body.style.position = 'fixed';
+      document.body.style.top = `-${scrollTop}px`;
+      document.body.style.width = '100%';
+      document.body.style.paddingRight = `${scrollbarWidth}px`; // 👈 补偿滚动条宽度
+    } else {
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.width = '';
+      document.body.style.paddingRight = ''; // 👈 恢复
+
+      nextTick(() => {
+        window.scrollTo(0, scrollTop);
+      });
+    }
+  }
+);
 </script>
 
 <style lang="scss" scoped>