OA详情表单信息和流转记录的数据渲染

zkqy-ui/src/components/FormGroup/FormDetail.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="list-wrap">
+    <div class="list-item" v-for="(item, index) in myFormList" :key="index">
+      <k-form-build
+        :dynamicData="item.template.dfFormSql || {}"
+        :defaultValue="item.template.defaultValue"
+        class="formBuild"
+        ref="addFromRef"
+        :value="item.template.dfVueTemplate"
+      />
+    </div>
+    <el-divider></el-divider>
+    <!-- <div class="log-list"></div> -->
+    <el-descriptions
+      v-for="(item, index) in nodeLogList"
+      :key="index"
+      :title="item.taskNodeName"
+    >
+      <el-descriptions-item label="审批人">{{
+        item.createBy
+      }}</el-descriptions-item>
+      <el-descriptions-item label="审批结果">{{
+        statusObj[item.taskNodeOtherState]
+      }}</el-descriptions-item>
+      <el-descriptions-item label="审批意见">{{
+        item.taskRemark || "无"
+      }}</el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<script>
+// import formList from "@/assets/js/formArray";
+import { camelCase, toUnderline } from "@/utils/index";
+import { disableFormItem } from "@/utils/kFormDesign";
+export default {
+  name: "FormDetail",
+  props: {
+    formList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    nodeLogList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  components: {},
+  data() {
+    return {
+      // formList: [
+      //   {
+      //     formJson: formList,
+      //   },
+      // ],
+      form: {
+        approvalStatus: "", //审批结果
+        approvalRemark: "", //审批备注
+      },
+      statusOptions: [
+        {
+          value: "pass",
+          label: "通过",
+        },
+        {
+          value: "noPass",
+          label: "不通过",
+        },
+        {
+          value: "reject",
+          label: "驳回",
+        },
+      ],
+      statusObj: {
+        pass: "通过",
+        noPass: "不通过",
+        reject: "驳回",
+      },
+      rules: {
+        approvalStatus: [
+          {
+            required: true,
+            message: "请选择审批结果",
+            trigger: "change",
+          },
+        ],
+        approvalRemark: [
+          {
+            required: true,
+            message: "请输入审批备注",
+            trigger: "blur",
+          },
+        ],
+      },
+      defaultValue: {}, //表单默认值
+    };
+  },
+  computed: {
+    myFormList() {
+      return this.disableHandler(this.formList);
+      // this.formList.forEach((item) => {
+      //   item.template.dfFormSql = JSON.parse(item.template.dfFormSql);
+      //   item.template.dfVueTemplate = JSON.parse(item.template.dfVueTemplate);
+      // });
+      // return this.formList;
+    },
+  },
+  methods: {
+    /**
+     *
+     * @param {array} formList 表单列表
+     * @return {array} 处理后的表单列表-添加disable属性
+
+     */
+    disableHandler(formList) {
+      this.resetForm();
+      if (formList.length == 0) return [];
+      formList.forEach((item) => {
+        item.template.dfFormSql = JSON.parse(item.template.dfFormSql);
+        item.template.dfVueTemplate = disableFormItem(
+          JSON.parse(item.template.dfVueTemplate)
+        );
+        item.template.defaultValue = item.template.resultMap[0]?.resultMap
+          ? item.template.resultMap[0].resultMap
+          : {};
+        for (const key of Object.keys(item.template.defaultValue)) {
+          item.template.defaultValue[toUnderline(key)] =
+            item.template.defaultValue[key];
+        }
+        // this.$nextTick(() => {
+        //   Object.assign(this.defaultValue, item.template.defaultValue);
+        // });
+        // item.formInfo.jsonData = disableFormItem(item.formInfo.jsonData);
+      });
+      return formList;
+    },
+    // 获取表单信息
+    getformInfo() {
+      let res = {
+        flag: false,
+      };
+      return new Promise((resolve) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            // alert('submit!');
+            res.flag = true;
+            res.data = this.form;
+            console.log(res);
+            // return res;
+            resolve(res);
+          } else {
+            resolve(res);
+          }
+        });
+      });
+    },
+    // 重置审批表单
+    resetForm() {
+      Object.assign(this.form, {
+        approvalStatus: "",
+        approvalRemark: "",
+      });
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped lang="scss">
+// .list-wrap {
+//   display: flex;
+//   flex-direction: column;
+//   .list-item {
+//     margin-top: 10px;
+//     &::after {
+//       content: "";
+//       display: block;
+//       border: 1px dashed #41baeb; /* 设置虚线样式 */
+//     }
+//     &:last-child::after {
+//       display: none;
+//     }
+//   }
+// }
+</style>

zkqy-ui/src/views/bussiness/detail/RecordList.vue

@@ -2,25 +2,25 @@
   <div class="list-wrap">
     <el-timeline>
       <el-timeline-item
-        v-for="(item, index) in recordList"
-        :key="index"
-        :icon="setIcon(item.finishTime)"
-        :color="setColor(item.finishTime)"
+        v-for="item in recordList"
+        :key="item.id"
+        :icon="setIcon(item.updateTime)"
+        :color="setColor(item.updateTime)"
       >
-        <p style="font-weight: 700">{{ item.taskName }}</p>
+        <p style="font-weight: 700">{{ item.taskNodeName }}</p>
         <el-card :body-style="{ padding: '10px' }">
           <el-descriptions class="margin-top" :column="1" size="small" border>
             <el-descriptions-item
-              v-if="item.assigneeName"
+              v-if="item.updateBy"
               label-class-name="my-label"
             >
               <template slot="label"
                 ><i class="el-icon-user mr5"></i>办理人</template
               >
-              {{ item.assigneeName }}
-              <el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
+              {{ item.updateBy }}
+              <!-- <el-tag type="info" size="mini">{{ item.deptName }}</el-tag> -->
             </el-descriptions-item>
-            <el-descriptions-item
+            <!-- <el-descriptions-item
               v-if="item.candidate"
               label-class-name="my-label"
             >
@@ -28,14 +28,14 @@
                 ><i class="el-icon-user mr5"></i>候选办理</template
               >
               {{ item.candidate }}
-            </el-descriptions-item>
+            </el-descriptions-item> -->
             <el-descriptions-item label-class-name="my-label">
               <template slot="label"
                 ><i class="el-icon-date mr5"></i>接收时间</template
               >
               {{ item.createTime }}
             </el-descriptions-item>
-            <el-descriptions-item
+            <!-- <el-descriptions-item
               v-if="item.finishTime"
               label-class-name="my-label"
             >
@@ -43,8 +43,8 @@
                 ><i class="el-icon-date mr5"></i>处理时间</template
               >
               {{ item.finishTime }}
-            </el-descriptions-item>
-            <el-descriptions-item
+            </el-descriptions-item> -->
+            <!-- <el-descriptions-item
               v-if="item.duration"
               label-class-name="my-label"
             >
@@ -52,15 +52,12 @@
                 ><i class="el-icon-time mr5"></i>耗时</template
               >
               {{ item.duration }}
-            </el-descriptions-item>
-            <el-descriptions-item
-              v-if="item.comment"
-              label-class-name="my-label"
-            >
+            </el-descriptions-item> -->
+            <el-descriptions-item label-class-name="my-label">
               <template slot="label"
                 ><i class="el-icon-tickets mr5"></i>处理意见</template
               >
-              {{ item.comment.comment }}
+              {{ item.taskRemark }}
             </el-descriptions-item>
           </el-descriptions>
         </el-card>
@@ -72,14 +69,20 @@
 import recordListData from "./recordListData.js";
 export default {
   name: "RecordList",
-  props: [],
+  props: {
+    nodeLogList: {
+      type: Array,
+      default: () => [],
+    },
+  },
   components: {},
   data() {
     return {};
   },
   computed: {
     recordList() {
-      return recordListData;
+      console.log(this.nodeLogList);
+      return this.nodeLogList;
     },
   },
   methods: {
@@ -106,4 +109,3 @@ export default {
   background: #e1f3d8;
 }
 </style>
-./recordListData.js

zkqy-ui/src/views/bussiness/detail/formList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="list-wrap">
-    <div class="list-item" v-for="(item, index) in formList" :key="index">
+    <div class="list-item" v-for="(item, index) in myFormList" :key="index">
       <!--  :dynamicData="dynamicData"
         :defaultValue="defaultValue" -->
       <k-form-build
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import formList from "./formList.js";
+// import formList from "./formList.js";
 import { disableFormItem } from "@/utils/kFormDesign";
 export default {
   name: "FormList",
-  props: [],
+  props: ["formList"],
   components: {},
   data() {
     return {
@@ -31,8 +31,8 @@ export default {
     };
   },
   computed: {
-    formList() {
-      return this.disableHandler(formList);
+    myFormList() {
+      return this.disableHandler(this.formList);
     },
   },
   methods: {

zkqy-ui/src/views/bussiness/detail/index.vue

@@ -20,16 +20,21 @@
         <el-tab-pane label="表单信息" name="1">
           <el-col :span="16" :offset="4">
             <div class="test-form">
-              <FormList></FormList>
+              <!-- <FormList :formList="formList"></FormList>
+               -->
               <!-- <Approve></Approve> -->
               <!-- <formGroup /> -->
+              <FormDetail
+                :formList="formList"
+                :nodeLogList="nodeLogList"
+              ></FormDetail>
             </div>
           </el-col>
         </el-tab-pane>
         <!-- 流程流转记录-->
         <el-tab-pane label="流转记录" name="2">
           <el-col :span="16" :offset="4">
-            <RecordList></RecordList>
+            <RecordList :nodeLogList="nodeLogList"></RecordList>
           </el-col>
         </el-tab-pane>
         <!--流程图 -->
@@ -42,8 +47,16 @@
 </template>
 
 <script>
+import {
+  processList,
+  runProcessNodeExecution,
+  getProcessNodeFormTemplate,
+  getProcessNodeFormInfoData,
+  processNodeExecutionApproval,
+} from "@/api/bpmprocess/run/executeProcess";
 import FormList from "./formList.vue";
 import Approve from "@/components/FormGroup/Approve"; //审批表单
+import FormDetail from "@/components/FormGroup/FormDetail"; //审批表单
 import formGroup from "@/components/FormGroup/index.vue"; //表单组
 import FlowChart from "@/views/bussiness/detail/FlowChart";
 import RecordList from "@/views/bussiness/detail/RecordList";
@@ -53,15 +66,45 @@ import formList from "./formList.js";
 import flowData from "./flowData.js";
 export default {
   name: "Record",
-  components: { FormList, FlowChart, RecordList, Approve, formGroup },
+  components: {
+    FormList,
+    FlowChart,
+    RecordList,
+    Approve,
+    formGroup,
+    FormDetail,
+  },
   props: {},
   data() {
     return {
       activeName: "1",
+      formList: [], //表单数据
+      nodeLogList: [], //审批数据
     };
   },
   created() {},
+  mounted() {
+    let { taskNodeKey, taskProcessKey, taskPlanKey } = this.$route.query;
+    if (taskNodeKey && taskProcessKey && taskPlanKey) {
+      this.initFormData({ taskNodeKey, taskProcessKey, taskPlanKey });
+    }
+  },
   methods: {
+    // 初始化表单数据
+    async initFormData(payLoad) {
+      try {
+        let res = await getProcessNodeFormTemplate(payLoad);
+        if (res.code == 200) {
+          this.formList = res.data;
+          let row = window.sessionStorage.getItem("oaRow");
+          if (row) {
+            this.nodeLogList = JSON.parse(row).nodeLog.slice(1);
+          }
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
     tabChangeHandler(val) {
       if (this.activeName == "3") {
         this.$nextTick(() => {