更表单详情完善、新增请假单模版页面

src/api/oa/todo/index.js

@@ -79,6 +79,14 @@ export function getToDoPageList(params) {
         params
     })
 }
+// 表单审批
+export function approve(params) {
+    return request({
+        url: '/service-oa/oaApproval/approve',
+        method: 'put',
+        params
+    })
+}
 
 
 

src/pages.json

@@ -997,9 +997,9 @@
                     }
                 },
                 {
-                    "path": "approval/qjd",
+                    "path": "approval/formType",
                     "style": {
-                        "navigationBarTitleText": "详情",
+                        "navigationBarTitleText": "...",
                         "enablePullDownRefresh": false,
                         "navigationStyle": "custom",
                         "app-plus": {

src/pages/business/oa/approval/components/qjd.vue

@@ -0,0 +1,355 @@
+<template>
+  <oa-scroll
+    customClass="unitInfoCollection-container scroll-height"
+    :refresherLoad="false"
+    :refresherEnabled="false"
+    :refresherEnabledTitle="false"
+    :refresherDefaultStyle="'none'"
+    :refresherThreshold="44"
+    :refresherBackground="'#f5f6f7'"
+    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
+  >
+    <template #default>
+      <view class="centerOne">
+        <u--form ref="uForm" :model="form" :rules="rules" labelWidth="130">
+          <view style="padding: 0px 10px 0px 10px; background: #ffffff">
+            <view style="padding-left: 9px">
+              <u-form-item
+                label="请假类型："
+                prop="type"
+                required
+                :borderBottom="false"
+                label-position="top"
+                @click="handleAction('请假类型')"
+                style="margin-top:10px"
+              >
+                <u-input
+                  v-model="form.typeName"
+                  placeholder="请选择请假类型"
+                  suffixIcon="arrow-right"
+                  suffixIconStyle="color: #909399"
+                  border="none"
+                  disabledColor="transparent"
+                  disabled
+                />
+              </u-form-item>
+            </view>
+          </view>
+          <view style="margin-top:10px;padding: 0px 10px 0px 10px; background: #ffffff">
+            <view style="padding-left: 9px">
+              <u-form-item
+                label="开始时间："
+                prop="startTime"
+                required
+                label-position="top"
+                @click="handleDateTime('开始时间', 0, form.startTime)"
+              >
+                <u-input
+                  v-model="form.startTime1"
+                  placeholder="请选择开始时间"
+                  border="none"
+                  suffixIcon="arrow-right"
+                  suffixIconStyle="color: #909399;"
+                />
+              </u-form-item>
+            </view>
+          </view>
+          <view style="margin-top:10px;padding: 0px 10px 0px 10px; background: #ffffff">
+            <view style="padding-left: 9px">
+              <u-form-item
+                label="结束时间："
+                prop="endTime"
+                required
+                label-position="top"
+                @click="handleDateTime('结束时间', 1, form.endTime)"
+              >
+                <u-input
+                  v-model="form.endTime1"
+                  placeholder="请选择结束时间"
+                  border="none"
+                  suffixIcon="arrow-right"
+                  suffixIconStyle="color: #909399;"
+                />
+              </u-form-item>
+            </view>
+          </view>
+          <view style="margin-top:10px;padding: 0px 10px 0px 10px; background: #ffffff">
+            <view style="padding-left: 9px">
+              <u-form-item
+                label="时长（小时）："
+                prop="duration"
+                required
+                label-position="top"
+              >
+                <u-input
+                  v-model="form.duration"
+                  placeholder="请输入请假时长"
+                  border="none"
+                  maxlength="4"
+                />
+              </u-form-item>
+            </view>
+          </view>
+          <view style="margin-top:10px;padding: 0px 10px 0px 10px; background: #ffffff">
+            <view style="padding-left: 9px">
+              <u-form-item
+                label="请假事由："
+                prop="reason"
+                required
+                label-position="top"
+              >
+                <u-input
+                  v-model="form.reason"
+                  placeholder="请输入请假事由"
+                  border="none"
+                  maxlength="18"
+                />
+              </u-form-item>
+            </view>
+          </view>
+          <view style="margin-top:10px;padding: 0px 10px 0px 10px; background: #ffffff">
+            <view style="padding-left: 9px">
+              <u-form-item label="图片：" prop="imgUrl" label-position="top" >
+                <div style="margin-top: 10px">
+                  <oa-upload :uploadCount="1" :uploadImage="form.imgUrl" @uploadSuccessChange="uploadSuccessChange" @uploadDeleteChange="uploadDeleteChange"></oa-upload>
+                </div>
+                <!-- <view style="color: #666666">图片支持png、jpg</view> -->
+              </u-form-item>
+            </view>
+          </view>
+        </u--form>
+      </view>
+      <u-picker
+        :show="actionShow"
+        :columns="actionsList"
+        :title="actionTitle"
+        keyName="label"
+        visibleItemCount="6"
+        :defaultIndex="[actionDefaultIndex]"
+        :closeOnClickOverlay="true"
+        @close="actionShow = false"
+        @cancel="actionShow = false"
+        @confirm="selectAction"
+      ></u-picker>
+      <u-datetime-picker
+        :show="showTime"
+        v-model="timeValue"
+        mode="datetime"
+        @close="showTime = false"
+        @cancel="showTime = false"
+        @confirm="timeSubmit"
+        :closeOnClickOverlay="true"
+        :minDate="Number(new Date())"
+        :maxDate="Number(new Date('2027'))"
+      ></u-datetime-picker>
+      <view class="app-button">
+        <u-button  type="primary" @click="handleSubmit('提交')" shape="circle"> 提交 </u-button>
+      </view>
+    </template>
+  </oa-scroll>
+</template>
+
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { onLoad, onShow, onHide, onLaunch, onReady } from "@dcloudio/uni-app";
+import {
+  ref,
+  onMounted,
+  inject,
+  shallowRef,
+  reactive,
+  toRefs,
+  getCurrentInstance,
+} from "vue";
+/*----------------------------------接口引入-----------------------------------*/
+import {
+  companyByNameSelect,
+  addBaseCompany,
+  delBaseBuild,
+  delBaseBuildExtinguish,
+} from "@/api/business/mhxf/unitInfoCollection";
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+import { useStores, commonStores } from "@/store/modules/index";
+/*----------------------------------公共方法引入-----------------------------------*/
+import {
+  getOaFormDefinition,
+  addQjDocument,
+  updateQjDocument,
+} from "@/api/oa/approval/index.js";
+/*----------------------------------公共变量-----------------------------------*/
+const { proxy } = getCurrentInstance();
+const { leaveType } = proxy.useDict("leaveType");
+/*----------------------------------变量声明-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: Object,
+  },
+})
+const actionTitle = ref(null);
+const actionsList = ref([]);
+const actionDefaultIndex = ref(0);
+const actionShow = ref(false);
+const uForm = ref(null);
+const showTime = ref(false) //时间选择显示隐藏
+const timeValue = ref(Number(new Date())) //时间选择值
+const timeTitle = ref("") //时间选择标题
+const state = reactive({
+  form: {
+    reason: "",
+    type: undefined,
+    typeName: undefined,
+    formName: undefined,
+    duration: "",
+    imgUrl: "",
+    startTime: "",
+    startTime1: "",
+    endTime: "",
+    endTime1: "",
+    formSign: undefined,
+    id: undefined,
+  },
+  rules: {
+    type: [{ required: true, message: "请选择请假类型", trigger: "change" }],
+    startTime: [
+      { required: true, message: "请假开始时间不能为空", trigger: "change" },
+    ],
+    endTime: [
+      { required: true, message: "请假结束时间不能为空", trigger: "change" },
+    ],
+    duration: [
+      { required: true, message: "请假时长不能为空", trigger: "blur" },
+    ],
+    reason: [{ required: true, message: "请假事由不能为空", trigger: "blur" }],
+  },
+});
+
+const { form, rules } = toRefs(state);
+
+form.value.formSign = props.data.form.formSign
+form.value.id = props.data.form.id
+/**
+ * @图片上传成功回调
+ */
+ function uploadSuccessChange(e) {
+  form.value.imgUrl = e.url;
+}
+
+/**
+ * @图片删除回调
+ */
+function uploadDeleteChange(e) {
+  form.value.imgUrl = e;
+}
+
+/**
+ * @api提交
+ */
+function handleSubmit(value) {
+  console.log(form.value)
+  uForm.value
+    .validate()
+      .then((res) => {
+        // proxy.$modal.msg("校验通过");
+        addQjDocument({
+          id: form.value.id,
+          formSign: form.value.formSign,
+          type: form.value.type,
+          startTime: form.value.startTime,
+          endTime: form.value.endTime,
+          duration: Number(form.value.duration),
+          reason: form.value.reason,
+          docStatus: 1,
+          image: form.value.image
+        }).then((res) => {
+          proxy.$modal.msgSuccess("表单提交成功");
+          uni.switchTab({
+            url: `/pages/business/oa/toDo/index`
+          })
+        });
+      })
+      .catch((errors) => {
+        proxy.$modal.msg("校验失败");
+      });
+}
+
+/**
+ * @action弹出框点击事件
+ */
+function handleAction(value, index, ind) {
+  if (value == "请假类型") {
+    actionTitle.value = value;
+    actionsList.value = [leaveType.value];
+    actionDefaultIndex.value = 0;
+  }
+  actionShow.value = true;
+}
+
+/**
+ * @action弹出框选择事件
+ */
+function selectAction(e) {
+  if(actionTitle.value == "请假类型"){
+    form.value.type = e.value[0].value;
+    form.value.typeName = e.value[0].label;
+  }
+  actionShow.value = false;
+}
+/**
+ * @时间弹出框点击事件
+ */
+function handleDateTime(value, index, time) {
+  showTime.value = true;
+  timeTitle.value = value;
+}
+
+/**
+ * @时间选择器
+ * @确定按钮事件
+ */
+function timeSubmit(data) {
+  let time = proxy.$time.getFormatterDate(data.value);
+  let timeData = time.split(" ")[0] + " " + time.split(" ")[1]
+  if (timeTitle.value == "开始时间") {
+    form.value.startTime1 = timeData;
+    form.value.startTime = timeData;
+  } else if (timeTitle.value == "结束时间") {
+    form.value.endTime1 = timeData;
+    form.value.endTime = timeData;
+  }
+  showTime.value = false;
+}
+
+onLoad((options) => {});
+
+onShow(() => {
+  //调用系统主题颜色
+  proxy.$settingStore.systemThemeColor([1]);
+});
+</script>
+
+<style lang="scss">
+.unitInfoCollection-container {
+  .centerOne,
+  .centerTwo {
+    .title {
+      color: #333333;
+      text-align: center;
+      margin-top: 10px;
+    }
+  }
+  :deep(.u-picker__view__column__item) {
+    font-size: 13px;
+  }
+}
+.app-button{
+  position: fixed;
+  bottom:10px;
+  left:10px;
+  width:calc(100% - 20px);
+  button{
+    border-radius: 10px !important;
+  }
+}
+</style>

src/pages/business/oa/approval/formType.vue

@@ -0,0 +1,174 @@
+<template>
+    <u-navbar
+      :autoBack="false"
+      :placeholder="true"
+      :safeAreaInsetTop="true"
+      :bgColor="proxy.$settingStore.themeColor.color"
+    >
+      <template #left>
+        <u-icon
+          name="arrow-left"
+          size="20"
+          color="#fff"
+          @click="returnTo('index')"
+        ></u-icon>
+      </template>
+      <template #center>
+        <text class="grid-area_center_item_title" style="color: #fff"
+          >{{ datail?.formName }}</text
+        >
+      </template>
+    </u-navbar>
+    <qjd v-if="datail?.fieldInfo == 'QJD' && JSON.stringify(datail) != '{}' " :data="{form:datail}" />
+    <!-- :data="{form:form,nodeList:nodeList,ccTo:ccTo}" -->
+</template>
+  
+  <script setup>
+  /*----------------------------------依赖引入-----------------------------------*/
+  import { onLoad, onShow, onHide, onLaunch, onReady } from "@dcloudio/uni-app";
+  import {
+    ref,
+    onMounted,
+    inject,
+    shallowRef,
+    reactive,
+    toRefs,
+    getCurrentInstance,
+  } from "vue";
+  /*----------------------------------接口引入-----------------------------------*/
+  import {
+    companyByNameSelect,
+    addBaseCompany,
+    delBaseBuild,
+    delBaseBuildExtinguish,
+  } from "@/api/business/mhxf/unitInfoCollection";
+  /*----------------------------------组件引入-----------------------------------*/
+  import qjd from "./components/qjd.vue";//请假单
+  /*----------------------------------store引入-----------------------------------*/
+  import { useStores, commonStores } from "@/store/modules/index";
+  /*----------------------------------公共方法引入-----------------------------------*/
+  import {
+    getOaFormDefinition, addQjDocument, updateQjDocument, myApplication, getDocumentDetails
+  } from "@/api/oa/approval/index.js";
+  /*----------------------------------公共变量-----------------------------------*/
+  const { proxy } = getCurrentInstance();
+  /*----------------------------------变量声明-----------------------------------*/
+  const formType = ref(""); //表单类型
+  const datail = ref({}); //表单详情
+  const formSign = ref(""); //表单标识
+  /**
+   *
+   * @param {*事件类型} eventType
+   * @param {*} row
+   */
+   function handle(type,row) {
+    if(type == "getMore"){
+      if(formType.value == 1){
+        getOaFormDefinition( {formSign:row}).then((res)=>{
+          if(res.data.length){
+            datail.value = res.data[0]
+            /** 查询用户列表 */
+            // listUser({ pageNum: "1", pageSize: "10000" }).then((res2) => {
+            //   userData.value = res2.data.rows;
+            //   var data = res.data[0]
+            //   var flowInfo = JSON.parse(data.flowInfo)
+            //   if(flowInfo.node){
+            //     nodeList.value = flowInfo.node
+            //     for(let i = 0; i < nodeList.value.length; i++){
+            //         ccTo.value.push([])
+            //         var nodeUsers = []
+            //         if(nodeList.value[i].appointApprover){
+            //             if(nodeList.value[i].appointApprover.indexOf(",")>-1){
+            //                 nodeUsers = nodeList.value[i].appointApprover.split(",")
+            //                 // console.log("长度长",nodeUsers)
+            //             }else{
+            //                 nodeUsers.push(nodeList.value[i].appointApprover)  
+            //                 // console.log("长度0",nodeUsers)
+            //             }
+            //         }
+            //         for (let j = 0; j < nodeUsers.length; j++) {
+            //             for (let k = 0; k < userData.value.length; k++) {
+            //                 if (nodeUsers[j] == userData.value[k].userId) {
+            //                     ccTo.value[i].push(userData.value[k]);
+            //                 }
+            //             }
+            //         }
+            //     }
+            //   }
+            //   pageStatus.value = true;
+            // })
+          }else{
+            proxy.$modal.msgError("表单模版不存在")
+              returnTo('index')
+          }
+        })
+      }
+    }
+  }
+  /**
+   * 返回上级页面
+   * @param defaultPage 默认页面
+   */
+  function returnTo(defaultPage) {
+    if(getCurrentPages().length > 1){
+      uni.navigateBack()
+    }else{
+      uni.switchTab({
+        url: `/pages/${defaultPage}`
+      })
+    }
+  }
+  function init(){
+    //新增
+    if(formSign.value){
+      formType.value = 1
+      handle("getMore",formSign.value) 
+    }
+    //编辑
+    // if(route.query.docNo){
+    //   formType.value = 2 
+    //   if(route.query.status == 3){
+    //     docStatus.value = route.query.status
+    //   }
+    //   handle("getMore",route.query.docNo) 
+    // }
+  }
+  onLoad((options) => {
+    if(options?.formSign){
+      formSign.value = options.formSign;
+    }
+    init()
+  });
+  
+  onShow(() => {
+    
+    //调用系统主题颜色
+    proxy.$settingStore.systemThemeColor([1]);
+  });
+  </script>
+  
+  <style lang="scss">
+  .unitInfoCollection-container {
+    .centerOne,
+    .centerTwo {
+      .title {
+        color: #333333;
+        text-align: center;
+        margin-top: 10px;
+      }
+    }
+    :deep(.u-picker__view__column__item) {
+      font-size: 13px;
+    }
+  }
+  .app-button{
+    position: fixed;
+    bottom:10px;
+    left:10px;
+    width:calc(100% - 20px);
+    button{
+      border-radius: 10px !important;
+    }
+  }
+  </style>
+  

src/pages/business/oa/approval/index.vue

@@ -46,10 +46,8 @@
             <view class="grid-area_title">我的</view>
             <u-icon class="grid-area_icon"  name="arrow-down" color="#000" size="18"  @click="splitNum(0,5)" v-if="state.appContent[0].direction == '0'"></u-icon>
             <u-icon class="grid-area_icon"  name="arrow-up" color="#000" size="18"  @click="splitNum(0,5)" v-if="state.appContent[0].direction == '1'"></u-icon>
-            <!-- <u-icon class="grid-area_icon"  name="arrow-up" color="#000" size="18"  @click="splitNum('recentlyUsed',5)"></u-icon> -->
-            <!-- <u-icon  name="arrow-bottom" size="20" color="#000" @click="returnTo('index')"></u-icon> -->
-            <view class="grid-area_center cu-list grid col-5 no-border" @click="toForm(item.formId)">
-              <view class="grid-area_center_item cu-item align-center" v-for="(item, index) in state.appContent[0].array" :key="index">
+            <view class="grid-area_center cu-list grid col-5 no-border" >
+              <view class="grid-area_center_item cu-item align-center" v-for="(item, index) in state.appContent[0].array" :key="index" @click="toForm(item.formSign)">
                 <image class="grid-area_center_item_image" :src="item.icon"></image>
                 <text class="grid-area_center_item_title" >{{ item.formName }}</text>
               </view>
@@ -160,9 +158,12 @@
   /**
    * 跳转表单模版
    */
-  function
-   toForm(formId){
-
+  function toForm(formSign){
+    if(formSign == "QJD"){
+      uni.navigateTo({
+        url: `/pages/business/oa/approval/formType?formSign=${formSign}`
+      })
+    }
   }
   /**
    * 

src/pages/business/oa/approval/qjd.vue

@@ -1,237 +0,0 @@
-<template>
-    <u-navbar :autoBack="false" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
-      <template #left>
-        <u-icon name="arrow-left" size="20" color="#fff" @click="returnTo('business/oa/approval/index')"></u-icon>
-      </template>
-      <template #center>
-        <text class="grid-area_center_item_title" style="color: #fff;">请假</text>
-      </template>
-    </u-navbar>
-        <view class="menu-list m0" style="margin-bottom:50px;">
-          <view class="list-cell" style="color: #666666; line-height: 25px; width: auto; ">
-            <view class="content-area-top menu-item">
-              <view class="content-area-top-name" >{{ state.detail.createBy + '提交的' + proxy.$common.mapping("formName", "formSign", state.detail.docNo.split("-")[0], state.formList) }} </view>
-            </view>
-            <view class="content-area-row_wrap menu-item">
-              <img class="typeIcon" src="@/static/images/oa/pass.png" v-if="state.detail.docStatus === '2' "/>
-              <view class="content-area-row_wrap-view gray"> 上海永天科技股份有限公司 </view>
-              <view class="content-area-row_wrap-view gray"> 单据编号：{{ state.detail.docNo }} </view>
-              <view class="content-area-row_wrap-view" style="display: block">
-                <span :style="{ color: proxy.$common.mapping('elTagClass', 'value', state.detail.docStatus, form_status) }" >{{ proxy.$common.mapping("label", "value", state.detail.docStatus, form_status) }} </span>
-              </view>
-              <view class="content-area-row_wrap-view gray label">所在部门</view>
-              <view class="content-area-row_wrap-view gray black">{{ state.detail.deptName }}</view>
-              <view class="content-area-row_wrap-view gray label">自定义类型</view>
-              <view class="content-area-row_wrap-view gray black">{{ state.detail.deptName }}</view>
-            </view>
-          </view>
-          <view class="list-cell" style="color: #666666; line-height: 25px; width: auto;margin-top:10px;">
-            <view class="content-area-top menu-item">
-              流程
-            </view>
-          </view>
-          <view class="fixedBottom" v-if="state.detail.docStatus === '2' || state.detail.docStatus === '3' ">
-            <img src="@/static/images/oa/loading.png" alt="">
-            <span>再次提交</span>
-          </view>
-          <view class="fixedBottom" v-if="state.detail.docStatus === '2' || state.detail.docStatus === '3' ">
-            <img src="@/static/images/oa/loading.png" alt="">
-            <span>再次提交</span>
-          </view>
-        </view>
-  </template>
-  
-  <script setup>
-  /*----------------------------------依赖引入-----------------------------------*/
-  import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
-  import { ref, reactive, computed, getCurrentInstance, toRefs, inject, watchEffect } from "vue";
-  /*----------------------------------接口引入-----------------------------------*/
-  import { getToDoPageList } from "@/api/oa/todo/index.js";
-  import { getFormName, getDocumentDetails } from "@/api/oa/approval/index.js";
-  import { listDept } from "@/api/system/user";
-  /*----------------------------------组件引入-----------------------------------*/
-  /*----------------------------------store引入-----------------------------------*/
-  /*----------------------------------公共方法引入-----------------------------------*/
-  /*----------------------------------公共变量-----------------------------------*/
-  const { proxy } = getCurrentInstance();
-  const { form_status, workflow_form_subset } = proxy.useDict("form_status","workflow_form_subset");
-  /*----------------------------------变量声明-----------------------------------*/
-  const state = reactive({
-    loading: false,
-    queryParams:{
-      docNo: undefined,
-      pageNum:1,
-      pageSize:5,
-    },
-    detail:{},//详情数据
-  });
-  
-  const {  queryParams,  detail,formList } = toRefs(state);
-  /**
-   * @页面初始化
-   */
-  function init() {
-    getDetail();
-  }
-  
-  /**
-   * @列表查询
-   * @api接口查询
-   */
-  function getDetail(type) {
-    state.loading = true;
-    getFormName().then((res) => {
-      state.formList = res.data;
-      getDocumentDetails(state.queryParams)
-      .then((requset) => {
-          state.detail = requset.data;
-          listDept({id:state.detail.deptId}).then((res2) => {
-            state.detail.deptName = res2.data[0].deptName
-          })
-          state.loading = false;
-      })
-      .catch((err) => {
-        state.loading = false;
-      });
-    })
-  }
-  
-  
-  /**
-   * 返回上级页面
-   * @param defaultPage 默认页面
-   */
-  function returnTo(defaultPage) {
-    if(getCurrentPages().length > 1){
-      uni.navigateBack()
-    }else{
-      uni.redirectTo({
-        url: `/pages/${defaultPage}`
-      })
-    }
-  }
-  onShow((options) => {
-    
-  });
-  onLoad((options) => {
-    if(options?.docNo){
-      state.queryParams.docNo = options.docNo;
-    }
-    init();
-    //调用系统主题颜色
-    proxy.$settingStore.systemThemeColor([1]);
-  });
-  </script>
-  <style lang="scss" scoped>
-  :deep(.u-modal__content) {
-    font-size: 14px;
-    justify-content: left;
-  }
-  :deep(.list-container .content-area-top-name) {
-    font-size: 16px !important;
-  }
-  </style>
-  <style lang="scss" scoped>
-    .content-area {
-      &-top {
-        font-size: 16px;
-        font-weight: 600;
-        color: #000000;
-        width: 100%;
-        &-name {
-          font-size: 13px;
-          width: 65%;
-          text-align: left;
-          color: #000;
-          white-space: nowrap; /* 确保文本在一行内显示 */
-          overflow: hidden; /* 隐藏超出容器的内容 */
-          text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
-        }
-        &-time {
-          font-size: 12px;
-          text-align: right;
-          color: #999;
-          float:right;
-          width:35%;
-        }
-  
-        &-status {
-          max-width: 30%;
-          margin: auto 0 auto auto;
-          font-size: 12px;
-          color: #ffffff;
-          padding: 0 5px;
-          border-radius: 20px;
-          line-height: 20px;
-        }
-  
-        &-icon {
-          max-width: 30%;
-          margin: auto 0 auto auto;
-        }
-      }
-  
-      &-row_wrap {
-        font-size: 13px;
-        flex-flow: row wrap;
-  
-        &-view {
-          display: flex;
-          min-width: 100%;
-          > .iconfont {
-            font-size: 14px;
-            color: #909399;
-            margin-left: 5px;
-          }
-  
-          &-status {
-            margin: auto 0 auto 0;
-            font-size: 12px;
-            font-weight: 600;
-            color: #ffffff;
-            padding: 0 5px;
-            border-radius: 20px;
-            line-height: 20px;
-          }
-        }
-      }
-    }
-  
-    .gray{
-      color:#999;
-    }
-    .label{
-      margin-top:10px;
-    }
-    .black{
-      color:#000;
-      margin-top:0px;
-    }
-    .typeIcon{
-      width:55px;
-      position: absolute;
-      top:25px;
-      right:10px;
-    }
-    .fixedBottom{
-      width:100%;
-      height:36px;
-      line-height: 36px;
-      position: fixed;
-      bottom: 0;
-      left:0;
-      background-color: #fff;
-      text-align: center;
-      color:#000;
-      img{
-        vertical-align: middle;
-        margin-right:10px;
-        margin-top:-2px;
-      }
-      span{
-        vertical-align: middle;
-      }
-    }
-  
-  </style>
-  

src/pages/business/oa/toDo/detail.vue

@@ -10,7 +10,7 @@
       <view class="menu-list m0" style="margin-bottom:50px;">
         <view class="list-cell" style="color: #666666; line-height: 25px; width: auto; ">
           <view class="content-area-top menu-item">
-            <view class="content-area-top-name" >{{ state.detail.createBy + '提交的' + proxy.$common.mapping("formName", "formSign", state.detail.docNo.split("-")[0], state.formList) }} </view>
+            <view class="content-area-top-name" >{{ state?.detail?.createBy + '提交的' + state?.detail?.formName }} </view>
           </view>
           <view class="content-area-row_wrap menu-item">
             <img class="typeIcon" src="@/static/images/oa/pass.png" v-if="state.detail.docStatus === '2' "/>
@@ -25,30 +25,94 @@
             <view class="content-area-row_wrap-view gray black">{{ state.detail.deptName }}</view>
           </view>
         </view>
-        <view class="list-cell" style="color: #666666; line-height: 25px; width: auto;margin-top:10px;">
-          <view class="content-area-top menu-item">
-            流程
+        <view class="list-cell" style="color: #666666; line-height: 25px; width: auto;margin-top:10px;flex:none">
+          <view class="content-area-top">
+            <view style="width:100%;">流程</view>
+            <view class="stepBar">
+              <view class="item">
+                <view class="left">
+                  <image class="icon" src="@/static/images/oa/user.png"></image>
+                  <image class="status" src="@/static/images/oa/pass2.png"></image>
+                  <div>
+                    <view class="title">
+                      发起申请
+                    </view>
+                    <view class="name">
+                      {{ state.detail.createBy }}
+                    </view>
+                  </div>
+                </view>
+                <view class="right">
+                  {{ state.detail.createTime?.split("T")[0] + " " + state.detail.createTime?.split("T")[1]}}
+                </view>
+                <view class="line sucess">
+                </view>
+              </view>
+              <view class="item" v-for="(item, index) in nodeList" :key="index">
+                <view class="left">
+                  <image class="icon" src="@/static/images/oa/user.png" v-if="item.nodeType == 1"></image>
+                  <image class="icon" src="@/static/images/oa/Ccto.png" v-if="item.nodeType == 2"></image>
+                  <div>
+                    <view class="title">
+                      {{ item.nodeType == 1 ? '审批人' : item.nodeType == 2 ? `抄送${item.appointApprover.indexOf(",") && item.appointApprover.split(",").length>1 ? `(${item.appointApprover.split(",").length}人)` : "人"}` : "" }}
+                    </view>
+                    <view class="name" v-if="item.nodeType == 1">
+                      {{  proxy.$common.mapping("nickName", "userId", item.appointApprover, state.userData) }}
+                    </view>
+                    <view class="name" v-if="item.nodeType == 2 && item.appointApprover.indexOf(',') && item.appointApprover.split(',').length == 1">
+                      {{  proxy.$common.mapping("nickName", "userId", item.appointApprover, state.userData) }}
+                    </view>
+                    <view class="name" v-if="item.nodeType == 2 && item.appointApprover.indexOf(',') && item.appointApprover.split(',').length > 1">
+                      抄送人
+                    </view>
+                  </div>
+                </view>
+                <view class="right">
+                  <!-- 2021-08-01 10:30:00 -->
+                </view>
+                <view class="center" v-if="item.nodeType == 2 && item.appointApprover.indexOf(',') && item.appointApprover.split(',').length > 1">
+                  <view class="content-area-header mt20 mb10 text-center" style="display: inline-block"  v-for="(approver, index2) in item.appointApprover.split(',')" :key="index2">
+                    <img v-if='proxy.$common.mapping("avatar", "userId", approver, state.userData)' class="content-area-header-avatarImg mlr5" :src='proxy.$common.mapping("avatar", "userId", approver, state.userData)' style="display: block; width: 40px; height: 40px" />
+                    <u-avatar
+                      class="content-area-header-avatar mlr5"
+                      :text='proxy.$common.mapping("nickName", "userId", approver, state.userData).length > 2 ? proxy.$common.mapping("nickName", "userId", approver, state.userData).slice(1, 3) : proxy.$common.mapping("nickName", "userId", approver, state.userData)'
+                      shape="square"
+                      size="40"
+                      fontSize="12"
+                      color="#ffffff"
+                      :bgColor="proxy.$settingStore.themeColor.color"
+                    ></u-avatar>
+                    <u-text :text='proxy.$common.mapping("nickName", "userId", approver, state.userData)' color="#000000" size="14" align="center"></u-text>
+                  </view>
+                </view>
+                <view class="line gray" v-if="item.nodeType == 1">
+                </view>
+              </view>
+            </view>
           </view>
         </view>
-        <view class="fixedBottom" v-if="state.detail.docStatus === '2' || state.detail.docStatus === '3' ">
+        <!-- <view class="fixedBottom" v-if="state.detail.docStatus === '2' || state.detail.docStatus === '3' ">
           <img src="@/static/images/oa/loading.png" alt="">
           <span>再次提交</span>
         </view>
         <view class="fixedBottom" v-if="state.detail.docStatus === '2' || state.detail.docStatus === '3' ">
           <img src="@/static/images/oa/loading.png" alt="">
           <span>再次提交</span>
+        </view> -->
+        <view class="approval">
+          <button class="refuse" @click="handle('refuse',2)">拒绝</button>
+          <button class="pass" @click="handle('pass',2)">同意</button>
         </view>
       </view>
 </template>
-
 <script setup>
 /*----------------------------------依赖引入-----------------------------------*/
 import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
 import { ref, reactive, computed, getCurrentInstance, toRefs, inject, watchEffect } from "vue";
 /*----------------------------------接口引入-----------------------------------*/
-import { getToDoPageList } from "@/api/oa/todo/index.js";
-import { getFormName, getDocumentDetails } from "@/api/oa/approval/index.js";
-import { listDept } from "@/api/system/user";
+import { getToDoPageList, approve } from "@/api/oa/todo/index.js";
+import { getFormName, getDocumentDetails,getOaFormDefinition } from "@/api/oa/approval/index.js";
+import { listDept, UserList } from "@/api/system/user";
 /*----------------------------------组件引入-----------------------------------*/
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/
@@ -64,15 +128,32 @@ const state = reactive({
     pageSize:5,
   },
   detail:{},//详情数据
+  userData:[],//用户列表
+  nodeList:[],//节点列表
 });
 
-const {  queryParams,  detail,formList } = toRefs(state);
+const {  queryParams,  detail,formList, userData, nodeList } = toRefs(state);
 /**
  * @页面初始化
  */
 function init() {
   getDetail();
 }
+/**
+ * 表单审核
+ * @param type 
+ * @param status 
+ */
+function handle(type) {
+  if(type == "pass" || type == "refuse"){
+    approve({id:state.detail.id,approvalStatus:type == "pass"? 2:3}).then(() => {
+      proxy.$modal.msgSuccess("操作成功");
+      uni.redirectTo({
+        url: `/pages/business/oa/toDo/index`
+      })
+    })
+  }
+}
 
 /**
  * @列表查询
@@ -80,20 +161,32 @@ function init() {
  */
 function getDetail(type) {
   state.loading = true;
-  getFormName().then((res) => {
-    state.formList = res.data;
+  // getFormName().then((res1) => {
+  //   state.formList = res1.data;
     getDocumentDetails(state.queryParams)
     .then((requset) => {
         state.detail = requset.data;
         listDept({id:state.detail.deptId}).then((res2) => {
           state.detail.deptName = res2.data[0].deptName
         })
+        UserList({ pageNum: "1", pageSize: "10000" }).then((res3) => {
+          state.userData = res3.data.rows;
+          getOaFormDefinition( {formSign:state.queryParams?.docNo?.split("-")[0]}).then((res4)=>{
+            if(res4.data.length){
+              var info = res4.data[0]
+              state.nodeList = JSON.parse(info.flowInfo).node
+              console.log(state.nodeList)
+              state.detail.formName = info.formName
+            }
+          })
+        })
+        
         state.loading = false;
     })
     .catch((err) => {
       state.loading = false;
     });
-  })
+  // })
 }
 
 
@@ -232,5 +325,117 @@ onLoad((options) => {
       vertical-align: middle;
     }
   }
+  .stepBar{
+    margin-top:-20px;
+    font-weight: 400;
+    .item{
+      position: relative;
+      margin-top:10%;
+      .left,.right{
+        display: inline-block;
+        width:50%;
+      }
+      .left{
+        position: relative;
+        .icon{
+          width:40px;
+          height:40px;
+          vertical-align: middle;
+          float: left;
+        }
+        .status{
+          width:16px;
+          height:16px;
+          position: absolute;
+          left:28px;
+          bottom:-2px;
+        }
+        >div{
+          width:80%;
+          margin-left:50px;
+          vertical-align: middle;
+          line-height: 20px;
+          .title{
+            font-size: 14px;
+          }
+          .name{
+            font-size: 12px;
+            color: #999;
+          }
+        }
+      }
+      .right{
+        vertical-align: top;
+        font-size: 12px;
+        text-align: right;
+        color:#909399;
+      }
+      .line{
+        height:40px;
+        width:1px;
+        position: absolute;
+        top:40px;
+        left:18px;
+      }
+      .line.sucess{
+        background: #67c23a;
+      }
+      .line.gray{
+        background: #999;
+      }
+      .center{
+        width:40%;
+        margin-left:35px;
+        background: red;
+      }
+    }
+  }
+  .content-area {
+    margin: 0;
+    padding: 15px 20px;
+    overflow: hidden;
 
-</style>
+    &-header {
+      &-avatar {
+        margin: auto 0;
+      }
+      &-avatarImg {
+        width: 35px;
+        height: 35px;
+        border-radius: 4px;
+      }
+
+      &-title {
+        margin: 0 0 15px 0;
+        font-weight: 600;
+        color: #000000;
+      }
+    }
+
+    &-center {
+      line-height: 25px;
+      &-top {
+        color: #000000;
+        font-weight: 600;
+      }
+    }
+  }
+  .approval{
+    margin-top:10px;
+    button{
+      width:calc(50% - 15px);
+      height:50px;
+      margin-left:10px;
+      display: inline-block;
+      border-radius: 16px !important;
+      
+    }
+    button.pass{
+      background: #2A98FF;
+      color:#fff;
+    }
+    button.refuse{
+      border:1px solid #CFCFCF;
+    }
+  }
+</style>