优化

src/views/bpm/handleTask/components/materialPlan/detailDialog.vue

@@ -58,22 +58,42 @@
                 {{ row.deliveryMethod == 1 ? '一次性到货' : '分批到货' }}
               </template>
 
-              <template v-slot:annex="{ row }">
-                {{ row.annex }}
+              <template v-slot:requireDeliveryTime="{ row }">
+                <span v-if="row.deliveryMethod == 1">{{  row.requireDeliveryTime  }}</span>
+           
+
+                <el-link type="primary" :underline="false" v-if="row.deliveryMethod == 2"
+                  @click.native="handleMethod(row)">
+                  设置分批时间
+                </el-link>
+              </template>
+
+              <template v-slot:imgUrl="{ row }">
+                {{ row.imgUrl }}
+              </template>
+
+              <template v-slot:files="{ row }">
+                {{ row.files }}
               </template>
             </ele-pro-table>
           </div>
         </template>
       </ele-pro-table>
     </el-form>
+
+    <timeDialog ref="timeDialogRef" ></timeDialog>
   </div>
 </template>
   
 <script>
 import { getById } from '@/api/bpm/components/materialPlan/index';
 import { getFile } from '@/api/system/file';
+import timeDialog from './timeDialog'
 
 export default {
+  components: {
+    timeDialog
+  },
   props: {
     businessId: {
       default: ''
@@ -230,12 +250,6 @@ export default {
           align: 'center'
         },
 
-        {
-          label: '要求到货时间',
-          action: ' requireDeliveryTime',
-          align: 'center'
-        },
-
         {
           label: '到货方式',
           slot: 'deliveryMethod',
@@ -244,12 +258,30 @@ export default {
         },
 
         {
-          label: '附件图纸',
-          slot: 'annex',
-          action: ' annex',
+          label: '要求到货时间',
+          slot: 'requireDeliveryTime',
+          action: 'requireDeliveryTime',
           align: 'center'
         },
 
+ 
+
+        {
+          label: '图纸',
+          slot: 'imgUrl',
+          action: 'imgUrl',
+          align: 'center',
+        },
+
+
+        {
+          label: '附件',
+          slot: 'files',
+          action: 'files',
+          align: 'center',
+        },
+
+
    
       ],
 
@@ -281,7 +313,11 @@ export default {
         this.$refs.table.setData([...res.salesOrderList]);
         this.$refs.table.toggleRowExpansionAll()
       }
-    }
+    },
+
+    handleMethod(row) {
+      this.$refs.timeDialogRef.open(row)
+    },
   }
 };
 </script>

src/views/bpm/handleTask/components/materialPlan/timeDialog.vue

@@ -0,0 +1,134 @@
+<template>
+    <el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
+        :close-on-press-escape="false" append-to-body width="35%">
+
+        <el-form :model="form" ref="tableForm" class="tableForm" :rules="tableFormRules">
+
+            <el-table ref="multipleTable" :data="form.timeList" tooltip-effect="dark" style="width: 100%" stripe
+                :header-cell-style="{ background: '#EEEEEE', border: 'none' }">
+
+
+
+                <el-table-column label="数量" prop="purchaseQuantity">
+                    <template slot-scope="{ row, $index }">
+                        <el-form-item :prop="'timeList.' + $index + '.purchaseQuantity'"
+                            :rules="tableFormRules.purchaseQuantity">
+                            <el-input placeholder="请输入" clearable v-model="row.purchaseQuantity"></el-input>
+                        </el-form-item>
+
+                    </template>
+                </el-table-column>
+
+
+
+                <el-table-column label="到货时间">
+                    <template slot-scope="{ row, $index }">
+                        <el-form-item :prop="'timeList.' + $index + '.requireDeliveryTime'"
+                            :rules="tableFormRules.requireDeliveryTime">
+                            <el-date-picker clearable v-model="row.requireDeliveryTime" type="date"
+                                value-format="yyyy-MM-dd" placeholder="请选择日期">
+                            </el-date-picker>
+                        </el-form-item>
+                    </template></el-table-column>
+
+
+
+
+            </el-table>
+
+        </el-form>
+
+
+
+
+        <div class="btns">
+            <el-button size="small" @click="handleClose">取消</el-button>
+        </div>
+    </el-dialog>
+</template>
+  
+<script>
+
+
+
+
+export default {
+    components: {
+    },
+    data() {
+        return {
+            visible: false,
+            title: '设置分批时间',
+
+            current: null,
+            form: {
+                timeList: [
+                    {
+                        requireDeliveryTime: null,
+                        purchaseQuantity: null
+                    }
+                ]
+            },
+
+            tableFormRules: {
+                purchaseQuantity: {
+                    required: true,
+                    message: '请输入数量',
+                    trigger: 'blur'
+                },
+
+                requireDeliveryTime: {
+                    required: true,
+                    message: '请选择日期',
+                    trigger: 'change'
+                }
+            }
+
+
+        }
+    },
+
+    watch: {
+
+    },
+    methods: {
+
+
+
+        open(row) {
+
+            this.form.timeList = row.timeList
+            this.current = row;
+            this.visible = true
+
+        },
+
+
+
+
+
+
+
+        handleClose() {
+            this.visible = false
+            this.form.timeList = [{
+                requireDeliveryTime: null,
+                purchaseQuantity: null
+            }];
+        },
+
+    }
+}
+</script>
+  
+<style lang="scss" scoped>
+.btns {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.el-form-item {
+    margin-bottom: 20px !important;
+}
+</style>
+  

src/views/bpm/processInstance/detail.vue

@@ -1,12 +1,6 @@
 <template>
-  <el-dialog
-    title="详情"
-    :before-close="handleClose"
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    :append-to-body="true"
-    width="80%"
-  >
+  <el-dialog title="详情" :before-close="handleClose" :visible.sync="dialogVisible" :close-on-click-modal="false"
+    :append-to-body="true" width="80%">
     <div class="app-container" style="padding: 15px">
       <!-- 审批记录 -->
       <el-card class="box-card" v-loading="tasksLoad">
@@ -16,49 +10,25 @@
         <el-col :span="16" :offset="4">
           <div class="block">
             <el-timeline>
-              <el-timeline-item
-                v-for="(item, index) in tasks"
-                :key="index"
-                :icon="getTimelineItemIcon(item)"
-                :type="getTimelineItemType(item)"
-              >
+              <el-timeline-item v-for="(item, index) in tasks" :key="index" :icon="getTimelineItemIcon(item)"
+                :type="getTimelineItemType(item)">
                 <p style="font-weight: 700">任务：{{ item.name }}</p>
                 <el-card :body-style="{ padding: '10px' }">
-                  <label
-                    v-if="item.assigneeUser"
-                    style="font-weight: normal; margin-right: 30px"
-                  >
+                  <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
                     审批人：{{ item.assigneeUser.nickname }}
                     <el-tag type="info" size="mini">{{
                       item.assigneeUser.deptName
                     }}</el-tag>
                   </label>
-                  <label style="font-weight: normal" v-if="item.createTime"
-                    >创建时间：</label
-                  >
+                  <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
                   <label style="color: #8a909c; font-weight: normal">{{
                     item.createTime
                   }}</label>
-                  <label
-                    v-if="item.endTime"
-                    style="margin-left: 30px; font-weight: normal"
-                    >审批时间：</label
-                  >
-                  <label
-                    v-if="item.endTime"
-                    style="color: #8a909c; font-weight: normal"
-                  >
-                    {{ item.endTime }}</label
-                  >
-                  <label
-                    v-if="item.durationInMillis"
-                    style="margin-left: 30px; font-weight: normal"
-                    >耗时：</label
-                  >
-                  <label
-                    v-if="item.durationInMillis"
-                    style="color: #8a909c; font-weight: normal"
-                  >
+                  <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">审批时间：</label>
+                  <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
+                    {{ item.endTime }}</label>
+                  <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">耗时：</label>
+                  <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
                     {{ getDateStar(item.durationInMillis) }}
                   </label>
                   <p v-if="item.reason">
@@ -78,206 +48,200 @@
         <div slot="header" class="clearfix">
           <span class="el-icon-picture-outline">流程图</span>
         </div>
-        <my-process-viewer
-          key="designer"
-          v-model="bpmnXML"
-          v-bind="bpmnControlForm"
-          :activityData="activityList"
-          :processInstanceData="processInstance"
-          :taskData="tasks"
-        />
+        <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :activityData="activityList"
+          :processInstanceData="processInstance" :taskData="tasks" />
       </el-card>
     </div>
   </el-dialog>
 </template>
 
 <script>
-  import { getProcessDefinitionBpmnXML } from '@/api/bpm/definition';
-  import store from '@/store';
-  import { getProcessInstance } from '@/api/bpm/processInstance';
-  import { getDate } from '@/utils/dateUtils';
-  import dictMixins from '@/mixins/dictMixins';
-  import { getTaskListByProcessInstanceId } from '@/api/bpm/task';
-  import { getActivityList } from '@/api/bpm/activity';
-  // import Vue from 'vue';
+import { getProcessDefinitionBpmnXML } from '@/api/bpm/definition';
+import store from '@/store';
+import { getProcessInstance } from '@/api/bpm/processInstance';
+import { getDate } from '@/utils/dateUtils';
+import dictMixins from '@/mixins/dictMixins';
+import { getTaskListByProcessInstanceId } from '@/api/bpm/task';
+import { getActivityList } from '@/api/bpm/activity';
+// import Vue from 'vue';
 
-  // 流程实例的详情页，可用于审批
-  export default {
-    name: 'ProcessInstanceDetail',
-    mixins: [dictMixins],
+// 流程实例的详情页，可用于审批
+export default {
+  name: 'ProcessInstanceDetail',
+  mixins: [dictMixins],
 
-    components: {},
-    data() {
-      return {
-        // 遮罩层
-        processInstanceLoading: true,
-        dialogVisible: false,
+  components: {},
+  data() {
+    return {
+      // 遮罩层
+      processInstanceLoading: true,
+      dialogVisible: false,
 
-        // 流程实例
-        id: undefined, // 流程实例的编号
-        processInstance: {},
+      // 流程实例
+      id: undefined, // 流程实例的编号
+      processInstance: {},
 
-        // BPMN 数据
-        bpmnXML: null,
-        bpmnControlForm: {
-          prefix: 'flowable'
-        },
-        activityList: [],
-
-        // 审批记录
-        tasksLoad: true,
-        tasks: []
-      };
-    },
-    created() {
-      // this.id = this.$route.query.id;
-      // if (!this.id) {
-      //   this.$message.error('未传递 id 参数，无法查看流程信息');
-      //   return;
-      // }
-      // this.getDetail();
-    },
-    methods: {
-      open(id) {
-        this.id = id;
-        this.dialogVisible=true
-        this.getDetail();
+      // BPMN 数据
+      bpmnXML: null,
+      bpmnControlForm: {
+        prefix: 'flowable'
       },
-      /** 获得流程实例 */
-      getDetail() {
-        // 获得流程实例相关
-        this.processInstanceLoading = true;
-        getProcessInstance(this.id).then((response) => {
-          if (!response) {
-            this.$message.error('查询不到流程信息！');
-            return;
-          }
-          // 设置流程信息
-          this.processInstance = response;
+      activityList: [],
 
-          // //将业务表单，注册为动态组件
-          // const path = this.processInstance.processDefinition.formCustomViewPath;
-          // Vue.component("async-biz-form-component", function (resolve) {
-          //   require([`@/views${path}`], resolve);
-          // });
+      // 审批记录
+      tasksLoad: true,
+      tasks: []
+    };
+  },
+  created() {
+    // this.id = this.$route.query.id;
+    // if (!this.id) {
+    //   this.$message.error('未传递 id 参数，无法查看流程信息');
+    //   return;
+    // }
+    // this.getDetail();
+  },
+  methods: {
+    open(id) {
+      this.id = id;
+      this.dialogVisible = true
+      this.getDetail();
+    },
+    /** 获得流程实例 */
+    getDetail() {
+      // 获得流程实例相关
+      this.processInstanceLoading = true;
+      getProcessInstance(this.id).then((response) => {
+        if (!response) {
+          this.$message.error('查询不到流程信息！');
+          return;
+        }
+        // 设置流程信息
+        this.processInstance = response;
 
-          // 加载流程图
-          getProcessDefinitionBpmnXML(
-            this.processInstance.processDefinition.id
-          ).then((response) => {
-            this.bpmnXML = response;
-          });
-          // 加载活动列表
-          getActivityList({
-            processInstanceId: this.processInstance.id
-          }).then((response) => {
-            console.log(response, 'response');
-            this.activityList = response;
-          });
+        // //将业务表单，注册为动态组件
+        // const path = this.processInstance.processDefinition.formCustomViewPath;
+        // Vue.component("async-biz-form-component", function (resolve) {
+        //   require([`@/views${path}`], resolve);
+        // });
 
-          // 取消加载中
-          this.processInstanceLoading = false;
+        // 加载流程图
+        getProcessDefinitionBpmnXML(
+          this.processInstance.processDefinition.id
+        ).then((response) => {
+          this.bpmnXML = response;
+        });
+        // 加载活动列表
+        getActivityList({
+          processInstanceId: this.processInstance.id
+        }).then((response) => {
+          console.log(response, 'response');
+          this.activityList = response;
         });
 
-        // 获得流程任务列表（审批记录）
-        this.tasksLoad = true;
-        getTaskListByProcessInstanceId(this.id).then((response) => {
-          // 审批记录
-          this.tasks = [];
-          // 移除已取消的审批
-          response.forEach((task) => {
-            if (task.result !== 4) {
-              this.tasks.push(task);
-            }
-          });
-          // 排序，将未完成的排在前面，已完成的排在后面；
-          this.tasks.sort((a, b) => {
-            // 有已完成的情况，按照完成时间倒序
-            if (a.endTime && b.endTime) {
-              return b.endTime - a.endTime;
-            } else if (a.endTime) {
-              return 1;
-            } else if (b.endTime) {
-              return -1;
-              // 都是未完成，按照创建时间倒序
-            } else {
-              return b.createTime - a.createTime;
-            }
-          });
+        // 取消加载中
+        this.processInstanceLoading = false;
+      });
 
-          // 需要审核的记录
-          const userId = store.getters.userId;
-          this.tasks.forEach((task) => {
-            if (task.result !== 1 && task.result !== 6) {
-              // 只有待处理才需要
-              return;
-            }
-            if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-              // 自己不是处理人
-              return;
-            }
-          });
+      // 获得流程任务列表（审批记录）
+      this.tasksLoad = true;
+      getTaskListByProcessInstanceId(this.id).then((response) => {
+        // 审批记录
+        this.tasks = [];
+        // 移除已取消的审批
+        response.forEach((task) => {
+          if (task.result !== 4) {
+            this.tasks.push(task);
+          }
+        });
+        // 排序，将未完成的排在前面，已完成的排在后面；
+        this.tasks.sort((a, b) => {
+          // 有已完成的情况，按照完成时间倒序
+          if (a.endTime && b.endTime) {
+            return b.endTime - a.endTime;
+          } else if (a.endTime) {
+            return 1;
+          } else if (b.endTime) {
+            return -1;
+            // 都是未完成，按照创建时间倒序
+          } else {
+            return b.createTime - a.createTime;
+          }
+        });
 
-          // 取消加载中
-          this.tasksLoad = false;
+        // 需要审核的记录
+        const userId = store.getters.userId;
+        this.tasks.forEach((task) => {
+          if (task.result !== 1 && task.result !== 6) {
+            // 只有待处理才需要
+            return;
+          }
+          if (!task.assigneeUser || task.assigneeUser.id !== userId) {
+            // 自己不是处理人
+            return;
+          }
         });
-      },
-      getDateStar(ms) {
-        return getDate(ms);
-      },
-      getTimelineItemIcon(item) {
-        if (item.result === 1) {
-          return 'el-icon-time';
-        }
-        if (item.result === 2) {
-          return 'el-icon-check';
-        }
-        if (item.result === 3) {
-          return 'el-icon-close';
-        }
-        if (item.result === 4) {
-          return 'el-icon-remove-outline';
-        }
-        if (item.result === 5) {
-          return 'el-icon-back';
-        }
-        return '';
-      },
-      getTimelineItemType(item) {
-        if (item.result === 1) {
-          return 'primary';
-        }
-        if (item.result === 2) {
-          return 'success';
-        }
-        if (item.result === 3) {
-          return 'danger';
-        }
-        if (item.result === 4) {
-          return 'info';
-        }
-        if (item.result === 5) {
-          return 'warning';
-        }
-        if (item.result === 6) {
-          return 'default';
-        }
-        return '';
-      },
-      handleClose() {
-        this.dialogVisible = false;
+
+        // 取消加载中
+        this.tasksLoad = false;
+      });
+    },
+    getDateStar(ms) {
+      return getDate(ms);
+    },
+    getTimelineItemIcon(item) {
+      if (item.result === 1) {
+        return 'el-icon-time';
+      }
+      if (item.result === 2) {
+        return 'el-icon-check';
+      }
+      if (item.result === 3) {
+        return 'el-icon-close';
+      }
+      if (item.result === 4) {
+        return 'el-icon-remove-outline';
       }
+      if (item.result === 5) {
+        return 'el-icon-back';
+      }
+      return '';
+    },
+    getTimelineItemType(item) {
+      if (item.result === 1) {
+        return 'primary';
+      }
+      if (item.result === 2) {
+        return 'success';
+      }
+      if (item.result === 3) {
+        return 'danger';
+      }
+      if (item.result === 4) {
+        return 'info';
+      }
+      if (item.result === 5) {
+        return 'warning';
+      }
+      if (item.result === 6) {
+        return 'default';
+      }
+      return '';
+    },
+    handleClose() {
+      this.dialogVisible = false;
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss">
-  .my-process-designer {
-    height: calc(100vh - 200px);
-  }
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
 
-  .box-card {
-    width: 100%;
-    margin-bottom: 20px;
-  }
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
 </style>