fix : 修复详情页面移动端适配

2024-06-24 13:25:34 +08:00
parent f66a570f00
commit 6f320a47bb
8 changed files with 436 additions and 40 deletions
--- a/src/components/DetailComponent/CollectionDetail.vue
+++ b/src/components/DetailComponent/CollectionDetail.vue
@@ -32,8 +32,8 @@
            <span>{{ formData.specialFund }}</span>
          </el-form-item>
        </el-col>
-        <baseTitle title="征集说明"></baseTitle>
        <el-col :span="24">
+          <baseTitle title="征集说明"></baseTitle>
          <el-form-item>
            <el-card style="width: 100%">
              <div v-html="formData.collectExplain">
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -30,6 +30,16 @@ const router = createRouter({
            name: 'projectDetailMobile',
            component: () => import('@/views/project-management/mobledetail/index.vue')
        },
+        {
+            path: '/fund/mobile',
+            name: 'specialFundDetailMobile',
+            component: () => import('@/views/project-management/mobledetail/SpecialFundDetailMobile.vue')
+        },
+        {
+            path: '/share/mobile',
+            name: 'shareDetailMobile',
+            component: () => import('@/views/project-management/mobledetail/ShareDetailMobile.vue')
+        },
        {
            path: '/',
            name: 'layout',
--- a/src/views/project-management/mobledetail/OpinionMoblie.vue
+++ b/src/views/project-management/mobledetail/OpinionMoblie.vue
@@ -12,7 +12,7 @@ import {ElNotification} from 'element-plus';
 import {agreeTask, rejectTask} from "@/api/project-demand/index.js";
 import {useTagsView} from '@/stores/tagsview.js'

-const tagsViewStore = useTagsView()
+// const tagsViewStore = useTagsView()
 const route = useRoute()
 const router = useRouter()
 const props = defineProps({
@@ -141,8 +141,9 @@ const handleReject = async () => {
    message: res.msg,
    type: res.code === 1000 ? 'success' : 'error'
  })
-  tagsViewStore.delVisitedViews(router.currentRoute.value.path)
-  back()
+  // tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+  location.reload()
+  // back()
 }

 const handleAgree = async () => {
@@ -158,8 +159,9 @@ const handleAgree = async () => {
    message: res.msg,
    type: res.code === 1000 ? 'success' : 'error'
  })
-  tagsViewStore.delVisitedViews(router.currentRoute.value.path)
-  back()
+  // tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+  location.reload()
+  // back()
 }
 </script>

--- a/src/views/project-management/mobledetail/ProjectApplyMoblie.vue
+++ b/src/views/project-management/mobledetail/ProjectApplyMoblie.vue
@@ -45,7 +45,7 @@
      <el-button color="#DED0B2" v-else-if="mode === 'resubmit'" @click="handleSubmit">重新提交</el-button>
      <el-button @click="handleBack">返回</el-button>
    </div>
-    <el-dialog title="前置流程" v-model="showPreTable" width="80%">
+    <el-dialog title="前置流程" v-model="showPreTable" width="80%" style="margin-top: 6vh">
      <el-form :model="preProcessForm" inline>
        <el-form-item label="请求名称">
          <el-input v-model="preProcessForm.requestName" placeholder="请输入请求名称" clearable>
@@ -62,19 +62,20 @@
        <el-table-column prop="requestId" label="请求id"></el-table-column>
        <el-table-column prop="requestName" label="请求名称"></el-table-column>
        <el-table-column prop="lastOperatorName" label="最后操作人名称"></el-table-column>
-        <el-table-column prop="lastOperateTime" label="最后操作时间"></el-table-column>
+        <el-table-column prop="lastOperateTime" label="最后操作时间" width="165px"></el-table-column>
        <el-table-column prop="currentNodeName" label="当前节点"></el-table-column>
        <el-table-column prop="creatorName" label="创建人"></el-table-column>
-        <el-table-column prop="createTime" label="创建时间"></el-table-column>
-        <el-table-column label="操作" align="center">
+        <el-table-column prop="createTime" label="创建时间" width="165px"></el-table-column>
+        <el-table-column label="操作" align="center" width="90px">
          <template #default="scope">
            <!--              <el-button type="primary" @click="choosePreProcess(scope.row)" link>选择</el-button>-->
            <a :href="scope.row.baseUrl" target="_blank" style="color: #2a99ff;margin-left: 10px">查看流程</a>
          </template>
        </el-table-column>
      </el-table>
-      <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
-              :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
+      <el-pagination layout="prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
+<!--      <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"-->
+<!--              :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>-->
      <div class="oper">
        <el-button color="#DED0B2" @click="choosePreProcess">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
@@ -148,7 +149,7 @@ const pageInfo = reactive({
 const rules = reactive({
  requestName: [{required: true, message: '请选择前置流程', trigger: 'blur'}],
 })
-const tagsViewStore = useTagsView()
+// const tagsViewStore = useTagsView()
 const processStore = useProcessStore()
 const otherFileList = ref([])
 const localFormData = ref({
@@ -212,7 +213,7 @@ const getPreProcessList = () => {
    })
    total.value = searchArray.length
    currentList.value = searchArray
-    preProcessList.value = currentList.value.slice(0, 10)
+    preProcessList.value = currentList.value.slice(0, 5)
  })
 }
 const choosePreProcess = () => {
@@ -360,20 +361,21 @@ const handleSubmit = async () => {
    type: res.code === 1000 ? 'success' : 'error'
  })
  if (res.code === 1000) {
-    tagsViewStore.delVisitedViews(router.currentRoute.value.path)
-    if (props.step === '20') {
-      await router.push({
-        name: 'Initiation'
-      })
-    } else if (props.step === '40') {
-      await router.push({
-        name: 'Implementation'
-      })
-    } else if (props.step === '50') {
-      await router.push({
-        name: 'Filing'
-      })
-    }
+    // tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+    location.reload()
+    // if (props.step === '20') {
+    //   await router.push({
+    //     name: 'Initiation'
+    //   })
+    // } else if (props.step === '40') {
+    //   await router.push({
+    //     name: 'Implementation'
+    //   })
+    // } else if (props.step === '50') {
+    //   await router.push({
+    //     name: 'Filing'
+    //   })
+    // }
  }
 }
 const init = async () => {
@@ -426,4 +428,10 @@ onMounted(async () => {
  display: flex;
  justify-content: flex-end;
 }
+:deep(.el-upload-list) {
+  width: auto;
+}
+:deep(.el-overlay-dialog ){
+ left: 0!important;
+}
 </style>
--- a/src/views/project-management/mobledetail/ShareDetailMobile.vue
+++ b/src/views/project-management/mobledetail/ShareDetailMobile.vue
@@ -0,0 +1,135 @@
+<template>
+  <el-form :model="formData" ref="form" class="query-form" label-width="auto">
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="分摊名称">
+          <span>{{ formData.shareName }}</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="分摊月份">
+          <span>{{ formData.apportionmentMonth }}</span>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="分摊明细" name="first">
+      <expense-detail/>
+    </el-tab-pane>
+    <el-tab-pane label="分摊汇总" name="second" v-loading="loading">
+      <allocation-summary-detail/>
+    </el-tab-pane>
+  </el-tabs>
+  <div v-if="shareData.taskId">
+    <baseTitle title="审核意见"></baseTitle>
+    <el-form-item prop="auditOpinion">
+      <el-input
+          v-model="auditOpinion"
+          :rows="3"
+          type="textarea"
+          placeholder="请输入审核意见"
+      />
+    </el-form-item>
+  </div>
+  <div class="approval-record">
+    <div class="approval-title">
+      <baseTitle title="审批记录"></baseTitle>
+      <div class="diagram">
+        <div class="base-title">流程图</div>
+        <el-switch
+            v-model="changeDiagram"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color:#BEA266"
+        />
+      </div>
+    </div>
+    <div class="process">
+      <operation-render
+          v-if="shareProcessViewer&& shareData.operationList && shareData.operationList.length > 0&&!changeDiagram"
+          :operation-list="shareData.operationList"
+          :state="shareData.state"/>
+      <process-diagram-viewer v-if="shareProcessViewer&&changeDiagram" id-name="shareProcess"/>
+    </div>
+  </div>
+  <opinion-moblie v-if="shareData.taskId" :formData="shareData.formData" :taskId="shareData.taskId"
+           v-model:value="auditOpinion"></opinion-moblie>
+</template>
+
+<script setup lang="jsx">
+import OperationRender from '@/views/workflow/common/OperationRender.vue'
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
+import {ElNotification} from "element-plus";
+import {useProcessStore} from '@/stores/processStore.js';
+import {getAllocationDetail} from "@/api/expense-manage";
+import OpinionMoblie from "./OpinionMoblie.vue";
+
+const changeDiagram = ref(false)
+const processStore = useProcessStore()
+const route = useRoute()
+const shareData = ref({})
+const formData = ref({})
+const auditOpinion = ref('')
+const shareProcessViewer = ref(true)
+const loading = ref(false)
+const activeName = ref('first')
+// const activeName = ref('second')
+
+const getDetail = async () => {
+  const id = route.query.id
+  shareProcessViewer.value = false
+  const {code, data, msg} = await getAllocationDetail(id)
+  if (code === 1000) {
+    shareData.value = data
+    formData.value = data.formData
+    processStore.setDesign(data)
+    processStore.runningList.value = data.runningList;
+    processStore.endList.value = data.endList;
+    processStore.noTakeList.value = data.noTakeList;
+    processStore.refuseList.value = data.refuseList;
+    processStore.passList.value = data.passList;
+    nextTick(() => {
+      shareProcessViewer.value = true
+    })
+  } else {
+    ElNotification({
+      title: '提示',
+      message: msg,
+      type: 'error'
+    })
+  }
+}
+
+
+const handleClick = (tab) => {
+  if (tab.index == 0) {
+    getDetail()
+  }
+}
+getDetail()
+</script>
+<style scoped lang="scss">
+:deep(.el-table--fit ) {
+  width: 100%;
+  height: 479px !important;
+}
+
+:deep(.el-tabs__nav-scroll) {
+  width: 100%;
+  display: flex;
+
+  .el-tabs__nav {
+    display: flex;
+    flex: 1;
+
+    .el-tabs__item {
+      flex: 1;
+      font-size: 16px;
+    }
+
+    .is-active {
+      color: black;
+      //background-color: #DED0B2;
+    }
+  }
+}
+</style>
--- a/src/views/project-management/mobledetail/SpecialFundDetailMobile.vue
+++ b/src/views/project-management/mobledetail/SpecialFundDetailMobile.vue
@@ -0,0 +1,242 @@
+<template>
+<!--  <special-fund-detail :formData="fundData.formData" :data="fundData" :showTable="showTable" :processViewer="fundProcessViewer"-->
+<!--                       :loading="loading"/>-->
+
+  <div v-loading="loading">
+    <baseTitle title="专项资金详情"></baseTitle>
+    <el-form :model="formData" ref="form" label-width="auto">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="专项名称">
+            <span>{{ formData.name }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="金额(元)">
+            <span>{{ toThousands(formData.fundAmount) }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="剩余金额(元)">
+            <span>{{ toThousands(formData.residualAmount) }}</span>
+          </el-form-item>
+        </el-col>
+        <baseTitle title="介绍"></baseTitle>
+        <el-col :span="24">
+          <el-form-item>
+            <el-card style="width: 100%">
+              <div v-html="formData.introduce">
+              </div>
+            </el-card>
+          </el-form-item>
+        </el-col>
+        <baseTitle title="关联项目"></baseTitle>
+        <el-col :span="24">
+          <el-form-item>
+            <fvTable style="width: 100%;max-height:300px" v-if="showTable" :tableConfig="projectTable"
+                     :data="formData.projects" :isSettingCol="false" :pagination="false">
+              <template #empty>
+                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+              </template>
+            </fvTable>
+          </el-form-item>
+        </el-col>
+        <baseTitle title="附件列表"></baseTitle>
+        <el-col :span="24">
+          <el-form-item>
+            <fvTable style="width: 100%;max-height: 300px;" v-if="showTable" :tableConfig="fileTable"
+                     :data="formData.files" :isSettingCol="false" :pagination="false">
+              <template #empty>
+                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+              </template>
+            </fvTable>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <div v-if="fundData.taskId">
+            <baseTitle title="审核意见"></baseTitle>
+            <el-form-item prop="auditOpinion">
+              <el-input
+                  v-model="formData.auditOpinion"
+                  :rows="3"
+                  type="textarea"
+                  placeholder="请输入审核意见"
+              />
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <div class="approval-record">
+        <div class="approval-title">
+          <baseTitle title="审批记录"></baseTitle>
+          <div class="diagram">
+            <div class="base-title">流程图</div>
+            <el-switch
+                v-model="changeDiagram"
+                style="--el-switch-on-color: #13ce66; --el-switch-off-color:#BEA266"
+            />
+          </div>
+        </div>
+        <div class="process">
+          <operation-render v-if="fundProcessViewer && fundData.operationList && fundData.operationList.length > 0&&!changeDiagram"
+                            :operation-list="fundData.operationList"
+                            :state="fundData.state"/>
+          <process-diagram-viewer v-if="fundProcessViewer&&changeDiagram" id-name="fundProcess"/>
+        </div>
+      </div>
+    </el-form>
+    <opinion-moblie v-if="fundData.taskId" :formData="formData" :taskId="fundData.taskId"
+             v-model:value="formData.auditOpinion"></opinion-moblie>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import {toThousands} from '@/utils/changePrice.js'
+import OperationRender from '@/views/workflow/common/OperationRender.vue'
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
+import {downloadFile} from "@/api/project-demand";
+import {ElNotification} from "element-plus";
+import {useProcessStore} from '@/stores/processStore.js';
+import {getFundDetailProcess} from "@/api/special-fund";
+import OpinionMoblie from "./OpinionMoblie.vue";
+const processStore = useProcessStore()
+const route = useRoute()
+const changeDiagram = ref(false)
+const fundData = ref({})
+const formData = ref({})
+const fundProcessViewer = ref(true)
+const showTable = ref(true)
+const loading = ref(false)
+const projectTable = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: '80',
+    },
+    {
+      prop: 'projectName',
+      label: '项目名称',
+      align: 'center',
+    },
+    {
+      prop: 'specialFundAmount',
+      label: '项目金额',
+      align: 'center',
+      currentRender:({row})=>{
+        return <span>{toThousands(row.specialFundAmount)}</span>
+      }
+    },
+    {
+      prop: 'startTime',
+      label: '项目时间',
+      align: 'center'
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      currentRender: ({row, index}) => {
+        return (
+            <el-button type="primary" link onClick={() => handleView(row)}>查看</el-button>
+        )
+      }
+    }
+  ]
+})
+const fileTable = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: '80',
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      currentRender: ({row, index}) => {
+        return (
+            <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
+        )
+      }
+    }
+  ]
+})
+const handleView=(row)=>{
+  router.push({
+    name: 'Implementation/detail',
+    query: {
+      id: row.requirementId,
+      projectId: row.projectId,
+      // step: '40'
+    }
+  })
+}
+const handleDownload = (row) => {
+  downloadFile(row.fileId).then(res => {
+    const blob = new Blob([res])
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = row.originalFileName
+    a.click()
+  })
+}
+const getDetail = async () => {
+  const specialFundId = route.query.id
+  showTable.value = false
+  loading.value = true
+  fundProcessViewer.value = false
+  const {code, data, msg} = await getFundDetailProcess(specialFundId)
+
+  if (code === 1000) {
+    fundData.value = data
+    formData.value = data.formData
+    loading.value = false
+    if(data.operationList==null)return;
+    processStore.setDesign(data)
+    processStore.runningList.value = data.runningList;
+    processStore.endList.value = data.endList;
+    processStore.noTakeList.value = data.noTakeList;
+    processStore.refuseList.value = data.refuseList;
+    processStore.passList.value = data.passList;
+    nextTick(() => {
+      fundProcessViewer.value = true
+      showTable.value = true
+    })
+  }else {
+    ElNotification({
+      title: '提示',
+      message: msg,
+      type: 'error'
+    })
+    loading.value = false
+  }
+}
+getDetail()
+</script>
+<style scoped>
+:deep(.el-table--fit ) {
+  height: 300px !important;
+}
+</style>
--- a/src/views/project-management/mobledetail/index.vue
+++ b/src/views/project-management/mobledetail/index.vue
@@ -36,7 +36,7 @@
                      :processViewer="commonProvessViewer"
                      :fileListShow="fileListShow"
                      v-model:value="auditOpinion"/>
-      <ProjectApply :title="applyTitle"
+      <project-apply-moblie :title="applyTitle"
                     v-if="editShow"
                     :mode="mode"
                     :step="showActive"
@@ -44,8 +44,7 @@
                     :formData="detailData.formData"/>
    </template>
  </StepsMoblie>
-  <div style="width: 100%;height: 30px"></div>
-  <Opinion v-if="detailData.taskId" :formData="detailData.formData" :taskId="detailData.taskId"
+  <opinion-moblie v-if="detailData.taskId" :formData="detailData.formData" :taskId="detailData.taskId"
           v-model:value="auditOpinion"/>
 </template>

@@ -56,9 +55,10 @@ import {ElLoading, ElNotification} from "element-plus";
 import ApprovalDetail from './ApprovalDetailMoblie.vue';
 import CollectionDetail from './CollectionDetailMoblie.vue';
 import SummaryDetail from './SummaryDetailMoblie.vue';
-import Opinion from './OpinionMoblie.vue';
 import StepsMoblie from './StepsMoblie.vue';
-import ProjectApply from './ProjectApplyMoblie.vue';
+import {getMapProjectStateInfo} from "./api";
+import OpinionMoblie from "./OpinionMoblie.vue";
+import ProjectApplyMoblie from "./ProjectApplyMoblie.vue";


 const route = useRoute()
@@ -70,7 +70,6 @@ const fileListShow = ref('READ')
 const mode = ref('')
 const currentStep = ref()
 const auditOpinion = ref('')
-// const step = ref(route.query.step)
 route.query.step == '10' && (currentStep.value = 1)
 route.query.step == '20' && (currentStep.value = 2)
 route.query.step == '40' && (currentStep.value = 3)
@@ -167,4 +166,4 @@ const stepChange = (data) => {
    //}
  }
 }
-</style>
+</style>
--- a/src/views/special-fund/detail.vue
+++ b/src/views/special-fund/detail.vue
@@ -19,11 +19,6 @@ const getDetail = async () => {
  loading.value = true
  fundProcessViewer.value = false
  const {code, data, msg} = await getFundDetailProcess(specialFundId)
-  ElNotification({
-    title: '提示',
-    message: msg,
-    type: code === 1000 ? 'success' : 'error'
-  })
  if (code === 1000) {
    fundData.value = data
    loading.value = false
@@ -39,6 +34,11 @@ const getDetail = async () => {
      showTable.value = true
    })
  }else {
+    ElNotification({
+      title: '提示',
+      message: msg,
+      type: 'error'
+    })
    loading.value = false
  }
 }