审批配置-详情

src/api/approvalConfiguration/approvalConfiguration.js

@@ -50,3 +50,11 @@ export function delMainData(id) {
         method: 'delete'
     })
 }
+
+// 详情
+export function getNodeListDetail(id) {
+    return request({
+        url: '/approvalConfiguration/getNodeList/'+id,
+        method: 'get'
+    })
+}

src/views/approvalConfiguration/detail.vue

+<template>
+  <div class="app-container">
+
+    <div class="content" style="position: relative">
+      <!--    标题-->
+      <div >
+        <span  class="bold-text" style="border-bottom: 4px solid #0062FF;">审批流程详情</span>
+      </div>
+
+      <div   class="detail">
+        <el-row>
+          <el-col :span="2"> <span>审批名称：</span></el-col>
+          <el-col :span="22"><div>{{nodeDetailObj.approvalName}}</div></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="2"> <span>审批类型：</span></el-col>
+          <el-col :span="22"><div>{{changeDictLabel(nodeDetailObj.approveType)}}</div></el-col>
+        </el-row>
+        <el-row v-for="(t,i) in nodeDetailObj.nodeList">
+          <el-col :span="2"> <span>{{getName(i)}}</span></el-col>
+
+          <el-col :span="22"><div>{{nodeDetailObj.nodeList[i].roleName}}</div></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="2"> <span>备注：</span></el-col>
+          <el-col :span="22"><div>{{nodeDetailObj.remark}}</div></el-col>
+        </el-row>
+
+      </div>
+
+      <!--  取消、提交按钮-->
+      <div  style="position: absolute;right: 52px;bottom: 42px">
+        <div ><el-button @click="goBackIndex" size="large" type="primary" class="btn-A">返回</el-button></div>
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { getDicts } from "@/api/system/dict/data";
+import { getNodeListDetail } from "../../api/approvalConfiguration/approvalConfiguration.js";
+import { reactive, ref} from 'vue'
+import { useRouter } from 'vue-router'
+const { proxy } = getCurrentInstance();
+
+
+const chineseNumbers = ["1","一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
+const projectTypeOptions = reactive([])
+const nodeDetailObj = reactive({})
+let id = proxy.$route.query.id;
+console.log(id)
+
+
+const getDetail = ()=>{
+  getNodeListDetail(id).then(res=>{
+    console.log(res)
+    Object.assign(nodeDetailObj, res.data);
+  })
+}
+
+const changeDictLabel = (yuan)=>{
+  for(let item of projectTypeOptions){
+    if(item.dictValue === yuan) return item.dictLabel
+  }
+}
+
+const getName = (i)=>{
+  console.log(i)
+  if(i <= 0 ) return "流程发起人"
+  else return `第${chineseNumbers[i]}节点审批人`;
+}
+
+
+onMounted(()=>{
+  getDicts("approve_type").then(response => {
+    console.log(response)
+    Object.assign(projectTypeOptions, response.data);
+  });
+  getDetail()
+})
+
+
+//  取消按钮
+const router = useRouter()
+const goBackIndex = () => {
+  router.push({ path: '/system/approvalConfiguration/index' })
+}
+
+
+
+</script>
+
+<style scoped lang="scss">
+.bold-text {
+  margin-left: 10px;
+  padding-bottom: 3px;
+  width: 72px;
+  height: 15px;
+  font-family: PingFangSC-Medium;
+  font-weight: 900;
+  font-size: 18px;
+  color: #0D162A;
+  letter-spacing: 0;
+  line-height: 15px;
+}
+.inner{
+  box-shadow: 0 0 3px rgba(211, 211, 211, 0.2),
+  0 0 7px rgba(211, 211, 211, 0.2),
+  0 0 7px rgba(211, 211, 211, 0.2);
+  background-color: white;
+  height: calc(100vh - 130px);
+}
+
+
+
+.detail{
+  margin-left: 10px;
+  margin-top: 34px;
+  span{
+    color: #969696;
+  }
+  div{
+    margin-top: 5px;
+    color: #65676C;
+  }
+  .detail_beizhu{
+    padding: 10px;
+    width: 480px;
+    height: 130px;
+    border: 1px solid #dddddd;
+    background-color: #FAFAFA;
+  }
+}
+
+
+.folderAdd {
+  font-size: 20px;
+  margin-right: 5px;
+}
+
+
+
+
+//步骤条
+.shadow_box_bottom_step {
+  display: flex;
+  margin: 10px 13px;
+  padding: 20px 0px;
+  width: 98%;
+  justify-content: space-evenly;
+  align-items: center;
+  background-color: #F9F9FA;
+  .text1 {
+    font-size: 18px;
+    font-weight: 550;
+  }
+  .text2 {
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+    align-items: center;
+  }
+  .step {
+    width: 80%;
+  }
+}
+</style>

src/views/approvalConfiguration/index.vue

@@ -163,10 +163,14 @@ const getDictList = ()=>{
 }
 
 const handleUpdate = (row)=>{
-  console.log(row.id)
   router.push({ path: '/system/approvalConfiguration/info',query:{id:row.id,type:"编辑"} })
 }
 
+const handleView = (row)=>{
+  router.push({ path: '/system/approvalConfiguration/detail',query:{id:row.id} })
+}
+
+
 const handleQuery = ()=>{
   getTableDataList()
 }
@@ -235,7 +239,7 @@ onMounted(()=>{
 }
 .bold-text1 {
   border-bottom: 4px solid #0062FF;
-  padding-bottom: 25px;
+  padding-bottom: 22px;
   height: 15px;
   font-family: PingFangSC-Medium;
   font-weight: 900;

src/views/approvalConfiguration/info.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <div class="content" style="position: relative">
       <div style="padding-left: 10px">
-        <span  class="bold-text" style="border-bottom: 3px solid #0062FF;">新增审批流程</span>
+        <span  class="bold-text" style="border-bottom: 4px solid #0062FF;">新增审批流程</span>
       </div>
       <div style="padding-top: 40px;">
         <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" >
@@ -243,6 +243,7 @@ onMounted(()=>{
 .bold-text {
   width: 72px;
   height: 15px;
+  padding-bottom: 3px;
   font-family: PingFangSC-Medium;
   font-weight: 900;
   font-size: 18px;