From a886764374c7ee326bd632110fc6f518c5343e52 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期一, 18 十一月 2024 09:00:57 +0800
Subject: [PATCH] 项目管理

---
 src/views/safetyReview/projectManage/components/projectApproval.vue |  309 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 301 insertions(+), 8 deletions(-)

diff --git a/src/views/safetyReview/projectManage/components/projectApproval.vue b/src/views/safetyReview/projectManage/components/projectApproval.vue
index ed2315e..6296004 100644
--- a/src/views/safetyReview/projectManage/components/projectApproval.vue
+++ b/src/views/safetyReview/projectManage/components/projectApproval.vue
@@ -1,24 +1,308 @@
-
 <template>
-  <div>项目审批</div>
+  <div class="approval">
+    <el-form :model="state.dataForm" ref="dataForm" :inline="true" style="margin-top: 10px" label-width="130px" >
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="项目名称:">
+           <span>{{state.dataForm.name}}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="被检查/对接单位:">
+            <span>{{state.dataForm.unit}}</span>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="计划实行时间:">
+            <span>{{state.dataForm.time}}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="项目地点:">
+            <span>{{state.dataForm.address}}</span>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="项目概况:">
+            <span>{{state.dataForm.description}}</span>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table v-loading="state.loading"  :data="state.dataList" :border="true" ref="tableRef" style="width: 100%;">
+      <el-table-column label="姓名" prop="name" align="center" />
+      <el-table-column label="性别" prop="sex" align="center" >
+        <template #default="scope">
+          {{scope.row.sex === 0 ? '男' : '女' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="身份证号" prop="idCard" align="center" />
+      <el-table-column label="等级" prop="level" align="center" />
+      <el-table-column label="专业领域" prop="domain" align="center" />
+      <el-table-column label="选用方式" prop="type" align="center" >
+        <template #default="scope">
+          {{scope.row.type === 0 ? '固定' : '随机' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="是否为组长" prop="isLeader" align="center" >
+        <template #default="scope">
+          <span v-if="scope.row.isLeader === 0" style="color: red">是</span>
+          <span v-else>否</span>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="180">
+        <template #default="scope">
+          <el-button link type="primary" v-if="scope.row.isLeader === 0" @click="handleLeader(scope.row)">取消组长</el-button>
+          <el-button link type="primary" v-else @click="handleLeader(scope.row)">设为组长</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+<!--    <div class="pag-container">-->
+<!--      <el-pagination-->
+<!--          v-model:current-page="state.queryParams.pageNum"-->
+<!--          v-model:page-size="state.queryParams.pageSize"-->
+<!--          :page-sizes="[10,15,20,25]"-->
+<!--          layout="total, sizes, prev, pager, next, jumper"-->
+<!--          :total="state.total"-->
+<!--          @size-change="handleSizeChange"-->
+<!--          @current-change="handleCurrentChange"-->
+<!--      />-->
+<!--    </div>-->
+    <el-dialog
+        v-model="dialogVisible"
+        width="600px"
+    >
+      <div>
+        <div style="display: flex;align-items: center">
+          <span style="font-size: 18px;font-weight: 600">审批填报:</span>
+          <div style="display: flex;align-items: flex-end;margin-top: 15px">
+            <img :src="wordSvg" style="width: 30px;height: 35px" />
+            <el-button style="width: 110px;margin-left: 10px" type="primary" >下载审批单word</el-button>
+          </div>
+        </div>
+      </div>
+      <div style="margin-top: 30px">
+        <div style="display: flex">
+          <span style="font-size: 18px;font-weight: 600">审批记录附件:</span>
+          <el-upload  :disabled="projectType==='view'" accept=".pdf" :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile)" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='1' v-model:file-list="state.fileList" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,5)">
+            <el-button type="primary">上传附件PDF</el-button>
+            <template #tip>
+              <div class="el-upload__tip">上传文件尺寸小于5M,最多可上传1份</div>
+            </template>
+          </el-upload>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="success" @click="nextStatus">线下审批通过并进行下一步</el-button>
+          <el-button type="warning" style="margin-left: 40px;" @click="back">线下审批不通过返回上一步</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
+import {onMounted, reactive, ref} from "vue";
+import wordSvg from '@/assets/images/word.svg'
+import {ElMessage, ElMessageBox} from "element-plus";
+import {getToken} from "@/utils/auth";
+import axios from "axios";
 const emit = defineEmits(["getNextStatus"]);
+const tableRef = ref()
+const dialogVisible = ref(false);
+const state = reactive({
+  dataForm: {
+    name: 'xxx',
+    unit: 'xxx',
+    time: '2024年11月1日-2024年11月25日',
+    address: 'xxx',
+    description: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
+
+  },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 20,
+  },
+  loading: false,
+  dataList: [],
+  total: 0,
+  uploadUrl: import.meta.env.VITE_APP_BASE_API + '',
+  header: {
+    Authorization: getToken()
+  },
+  fileList: []
+});
+const projectType = ref('')
+
+onMounted(async () => {
+  await getList()
+})
+
 const riskOpen = async (type,val) => {
   console.log("type",type,val)
-  //保存按钮
-  if(type === 'add'){
-    //成功后自动到下一步 项目id
-    emit('getNextStatus', 3);
+  //生成审批按钮
+  if(type === 'confirmApproval'){
+    dialogVisible.value = true
+
+
+    // emit('getNextStatus', 3);
 
   }else if(type === 'clickEdit'){
     //变更按钮
 
-  }else if(type === 'detail'){
+  }else if(type === 'detail' || type === 'view'){
+    if(type === 'view'){
+      projectType.value = type
+    }
     console.log("view333333",type,val)
   }
 }
+
+const nextStatus = () =>{
+  dialogVisible.value = false
+  emit('getNextStatus', 3);
+}
+const back = () => {
+  dialogVisible.value = false
+}
+
+const getList = async () => {
+  state.loading = true;
+  state.dataList = [
+    {
+      id:1,
+      name: 'xxx',
+      idCard: 'xxx',
+      isLeader: 0,
+      level: '二级',
+      domain: 'xxx',
+      type: 0
+    },
+    {
+      id:2,
+      name: 'xxx',
+      idCard: 'xxx',
+      isLeader: 1,
+      level: '二级',
+      domain: 'xxx',
+      type: 1
+    }
+  ]
+  // state.total = 1
+  state.loading = false;
+}
+
+// const handleSizeChange = (val) => {
+//   state.queryParams.pageNum = 1;
+//   state.queryParams.pageSize = val
+//   getList()
+// }
+// const handleCurrentChange = (val) => {
+//   state.queryParams.pageNum = val
+//   getList()
+// }
+
+const handleLeader = (val) => {
+  state.dataList.forEach(item => {
+    if(val.id === item.id){
+      if(val.isLeader === 0){
+        item.isLeader = 1
+      }else {
+        item.isLeader = 0
+      }
+    }
+  })
+
+}
+
+const handleAvatarSuccess = (res, uploadFile) => {
+  if(res.code == 200){
+    state.fileList = res.data.map(i=>{
+      return {
+        name: i.originName,
+        url: import.meta.env.VITE_APP_BASE_API + '/' + i.path,
+        id: i.id,
+        projectId: i.projectId,
+      }
+    })
+  }else{
+    state.fileList = []
+    ElMessage({
+      type: 'warning',
+      message: res.message
+    })
+  }
+}
+
+const showTip =()=>{
+  ElMessage({
+    type: 'warning',
+    message: '超出文件上传数量'
+  });
+}
+
+const picSize = async (rawFile) => {
+  if(rawFile.size / 1024 / 1024 > 5){
+    ElMessage({
+      type: 'warning',
+      message: '文件大小不能超过5M'
+    });
+    return false
+  }
+};
+
+const handlePictureCardPreview = (uploadFile) => {
+  axios.get(uploadFile.url,{headers:{'Content-Type': 'application/json','Authorization': `${getToken()}`,'uid':`${Cookies.get('uid')}`},responseType: 'blob'}).then(res=>{
+    if (res) {
+      const link = document.createElement('a')
+      let blob = new Blob([res.data],{type: res.data.type})
+      link.style.display = "none";
+      link.href = URL.createObjectURL(blob); // 创建URL
+      window.open(link.href)
+    } else {
+      ElMessage({
+        type: 'warning',
+        message: '文件读取失败'
+      });
+    }
+  })
+};
+
+const handleRemove = async (file, uploadFile) => {
+  if(file && file.status == 'success') {
+    ElMessageBox.confirm(
+        '确定删除该附件?',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        .then(async () => {
+          state.fileList = []
+          // const res = await delFile(file.id)
+          // if (res.code == 200) {
+          //   ElMessage({
+          //     type: 'success',
+          //     message: '文件已删除'
+          //   })
+          // } else {
+          //   ElMessage({
+          //     type: 'warning',
+          //     message: res.message
+          //   })
+          // }
+        })
+        .catch(() => {
+        })
+  }
+}
+
 
 defineExpose({
   riskOpen
@@ -27,5 +311,14 @@
 
 
 <style scoped lang="scss">
-
+.approval{
+  .pag-container{
+    float: right;
+    margin-top: 10px;
+  }
+  :deep(.el-dialog__footer) {
+    display: flex;
+    justify-content: center;
+  }
+}
 </style>

--
Gitblit v1.9.2