企标制修订立项流程页面构图调整

src/pages/processCenter/pages/creatProcess/qbzxdlx/step1.vue

@@ -50,7 +50,7 @@
             </el-form-item>
             <el-form-item class="add-form-item">
               <div style="margin-top: 10px;margin-bottom: 10px">
-                <el-button type="primary" size="small" @click="addQblx">新增</el-button>
+                <el-button type="primary" size="small" @click="addQblx('add','企标制修订立项计划')">新增</el-button>
                 <el-button type="plain" size="small" @click="uploadQblx">上传</el-button>
                 <el-button type="success" size="small" @click="qblxTemplate">模板下载</el-button>
                 <el-button type="danger" size="small" @click="delQblx">删除</el-button>
@@ -65,14 +65,19 @@
                 @selection-change="selectedDelete"
                 :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
               fontWeight: 'bold', height: '20px'}">
-                <el-table-column type="selection" width="55"/>
-                <el-table-column type="index" label="序号" align="center" width="50"/>
-                <el-table-column prop="esName" label="企标名称" align="center" width="300" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="dutyUnit" label="责任单位" align="center"></el-table-column>
-                <el-table-column prop="dutyPeople" label="责任人" align="center"></el-table-column>
+                <el-table-column type="selection" fixed="left" width="55"/>
+                <el-table-column type="index" label="序号" fixed="left" align="center" width="50"/>
+                <el-table-column prop="esName" label="企标名称" fixed="left" align="center" width="300" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="dutyUnit" label="责任单位" width="200" align="center"></el-table-column>
+                <el-table-column prop="dutyPeople" label="责任人" width="150" align="center"></el-table-column>
                 <el-table-column prop="firstDraftTime" label="初稿完成日期" width="150" align="center"></el-table-column>
                 <el-table-column prop="planTime" label="计划完成日期" width="150" align="center"></el-table-column>
                 <el-table-column prop="endTime" label="截止日期" width="150" align="center"></el-table-column>
+                <el-table-column label="操作" align="center" width="100" fixed="right">
+                  <template slot-scope="scope">
+                    <el-button size="mini" type="primary" @click="editRow('edit','编辑信息',scope.row)">编辑</el-button>
+                  </template>
+                </el-table-column>
               </el-table>
             </el-form-item>
           </el-form>
@@ -98,7 +103,6 @@
           <el-form
             ref="roleForm"
             :model="roleForm"
-            :rules="roleFormRules"
             class="label-input-form">
             <el-timeline-item timestamp="起草" placement="top" :color="roleForm.startUser ? '#66b1ff' : ''">
               <el-card>
@@ -117,7 +121,7 @@
                   <h4>责任人</h4>
                   <div style="margin-top: 10px;width: 300px;">
                     <el-input v-model="roleForm.dockUser" style="display: none;"></el-input>
-                    <el-input v-model="roleForm.dockUserName" placeholder="选择标准法规工程师" @click.native="choiceZRR('dockUser', '选择标准责任人', roleForm.dockUser)">
+                    <el-input v-model="roleForm.dockUserName" placeholder="责任人" disabled>
                     </el-input>
                   </div>
                 </el-form-item>
@@ -130,18 +134,53 @@
 
     <!-- 新增/编辑弹框 -->
     <el-drawer
-      title="企标制修订立项计划"
+      :title="qblxTitle"
       :visible.sync="qblxModel"
       size="600px"
+      :wrapper-closable="false"
       custom-class="demo-drawer"
     >
       <el-form class="label-input-form" ref="addQblxData" style="height: 100%" :model="addQblxData" :rules="addRule">
-        <el-form-item class="add-form-item" label="企标名称"></el-form-item>
-        <el-form-item class="add-form-item" label="责任单位"></el-form-item>
-        <el-form-item class="add-form-item" label="责任人"></el-form-item>
-        <el-form-item class="add-form-item" label="初稿完成日期"></el-form-item>
-        <el-form-item class="add-form-item" label="计划完成日期"></el-form-item>
-        <el-form-item class="add-form-item" label="截止日期"></el-form-item>
+        <el-form-item class="add-form-item" label="企标名称">
+          <el-input style="width: 90%"  v-model="addQblxData.esName" placeholder="请输入企标名称"></el-input>
+        </el-form-item>
+        <el-form-item class="add-form-item" label="责任单位">
+          <el-input style="width: 90%" v-model="addQblxData.dutyUnit" placeholder="请填写责任单位"></el-input>
+        </el-form-item>
+        <el-form-item class="add-form-item" label="责任人" prop="dutyPeople">
+          <el-input v-model="addQblxData.dutyPeopleId" style="display: none"/>
+          <el-input style="width: 90%" v-model="addQblxData.dutyPeople" placeholder="请选择责任人" @click.native="choiceZRR"/>
+        </el-form-item>
+        <el-form-item class="picker_style" label="初稿完成日期">
+          <el-date-picker
+            v-model="addQblxData.firstDraftTime"
+            type="datetime"
+            :picker-options="datePicker"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择初稿完成日期"
+            align="right">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item class="picker_style" label="计划完成日期">
+          <el-date-picker
+            v-model="addQblxData.planTime"
+            type="datetime"
+            :picker-options="datePicker"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择计划完成日期"
+            align="right">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item class="picker_style" label="截止日期">
+          <el-date-picker
+            v-model="addQblxData.endTime"
+            type="datetime"
+            :picker-options="datePicker"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择截止日期"
+            align="right">
+          </el-date-picker>
+        </el-form-item>
       </el-form>
       <div class="demo-drawer-footer">
         <el-button size="mini" @click="closeDrawer">取消</el-button>
@@ -172,7 +211,7 @@
 import ProcessHeader from '../../components/ProcessHeader'
 import ProcessFooter from '../../components/ProcessFooter'
 import ProcessTitle from '../../components/ProcessTitle'
-import {completeTask, saveTaskFirst, taskDel, processBack, queryTaskFirst } from '@/api/process.js'
+import {completeTask, saveTaskFirst, taskDel, processBack, queryTaskFirst} from '@/api/process.js'
 
 export default {
   components: {
@@ -193,8 +232,8 @@ export default {
       qblxRule: {},
 
       roleForm: {
-        startUser: '',
-        startUserName: '',
+        startUserName: this.$store.getters.userInfo.userName,
+        startUser: this.$store.getters.userInfo.userId,
         dockUser: '',
         dockUserName: '',
       },
@@ -205,16 +244,21 @@ export default {
       fillFileList: [],
 
       // 新增弹框
+      qblxTitle: '',
+      btnType: '',
       qblxModel: false,
       addQblxData: {
         esName: '',
         dutyUnit: '',
+        dutyPeopleId: '',
         dutyPeople: '',
         firstDraftTime: '',
         planTime: '',
         endTime: '',
       },
-      addRule: {},
+      addRule: {
+        dutyPeople: [{required: true, message: '请选择责任人', trigger: ['blur', 'change']}]
+      },
 
       isSubmit: false,
       saveLoading: false,
@@ -225,6 +269,15 @@ export default {
 
       taskID: '',
       bpnId: '',
+
+      // 表格勾选数据储存
+      deleteDataList: [],
+      // 设置当前日期之前不可选择
+      datePicker: {
+        disabledDate(date) {
+          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000
+        }
+      }
     }
   },
 
@@ -315,7 +368,8 @@ export default {
     },
 
     // 表格勾选事件
-    selectedDelete() {
+    selectedDelete(val) {
+      this.deleteDataList = val
     },
 
     // 流程阶段负责人选择
@@ -323,24 +377,90 @@ export default {
       this.nodeList = []
       this.nodeList.push(id)
       this.type = type
-      this.drawerTitle = title
       this.modalshowflag = true
     },
     // 选人组件确认
     drawerCheck(data) {
-      this.roleForm.dockUser = data[0].id
-      this.roleForm.dockUserName = data[0].name
+      this.addQblxData.dutyPeopleId = data[0].id
+      this.addQblxData.dutyPeople = data[0].name
       this.modalshowflag = false
     },
 
     /** 新增按钮 */
-    addQblx() {
+    addQblx(type,title) {
+      this.btnType = type
+      this.qblxTitle = title
       this.qblxModel = true
     },
     // 抽屉确认按钮
-    OkDrawer() {},
+    OkDrawer() {
+      this.$refs['addQblxData'].validate((valid) => {
+        if (valid) {
+          if (this.btnType === 'add') {
+            this.qblx_pageData.qblxData.push(this.addQblxData)
+          }
+          this.addQblxData = {}
+          this.qblxModel = false
+        }
+      })
+    },
     // 抽屉取消按钮
-    closeDrawer() {},
+    closeDrawer() {
+      if (this.btnType === 'edit') {
+        let Items = JSON.parse(localStorage.getItem('obj'))
+        this.addQblxData.esName = Items.esName
+        this.addQblxData.dutyUnit = Items.dutyUnit
+        this.addQblxData.dutyPeopleId = Items.dutyPeopleId
+        this.addQblxData.dutyPeople = Items.dutyPeople
+        this.addQblxData.firstDraftTime = Items.firstDraftTime
+        this.addQblxData.planTime = Items.planTime
+        this.addQblxData.endTime = Items.endTime
+      } else {
+        this.addQblxData = {}
+      }
+      this.qblxModel = false
+    },
+
+    editRow(type,title,val) {
+      this.btnType = type
+      this.qblxTitle = title
+      localStorage.setItem('obj', JSON.stringify(val))
+      this.addQblxData = val
+      this.qblxModel = true
+    },
+    /** 删除按钮*/
+    delQblx() {
+      if (this.deleteDataList.length < 1) {
+        this.$message.warning("请选择一条数据进行删除");
+      } else {
+        this.$confirm("您确认删除这些数据?", "提示", {
+          confirmButtonText: "确认",
+          confirmButtonClass: "common-button-primary",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          let exits = [];
+          this.deleteDataList.map(item => {
+            let index;
+            index = this.qblx_pageData.qblxData.findIndex(items => {
+              return items === item;
+            });
+            if (index > -1) {
+              this.qblx_pageData.qblxData.splice(index, 1);
+            }
+            exits.push(item);
+          });
+          this.deleteDataList = [];
+        }).catch(() => {
+        });
+      }
+    },
+
+    /** 数据上传到列表 */
+    uploadQblx() {},
+
+    /** 模板下载 */
+    qblxTemplate() {},
     // 保存按钮
     handleSave() {
       this.saveLoading = true
@@ -368,7 +488,6 @@ export default {
       let json = {
         prcCreateUser: this.$store.getters.userInfo.userId,
         prcCreateUserName: this.$store.getters.userInfo.userName,
-        roleForm: this.roleForm,
         qblx_pageData: this.qblx_pageData,
         commentText: this.commentText
       }
@@ -386,23 +505,37 @@ export default {
               processBack(paramsInfo).then(res => {
                 this.taskID = res.data
                 const params = new FormData();
-                params.set('json', JSON.stringify(json))
-                params.set('userId', this.$store.getters.userInfo.userId)
-                params.set('taskId', this.taskID)
-                completeTask(params).then(res => {
-                  if (res.success === true) {
-                    this.$message.success('提交成功')
-                    if (this.bpnId !== '') {
-                      let taskId = {
-                        id: this.bpnId
-                      }
-                      taskDel(taskId).then(res => {
-                        return res
-                      })
-                    }
-                    this.$router.push("/processCenter");
+                this.qblx_pageData.qblxData.forEach((item, index) => {
+                  let newJson = {
+                    prcCreateUser: this.$store.getters.userInfo.userId,
+                    prcCreateUserName: this.$store.getters.userInfo.userName,
+                    qblx_pageData: {
+                      projectTarget: this.qblx_pageData.projectTarget,
+                      qblxFile: this.qblx_pageData.qblxFile,
+                      qblxData: item,
+                    },
+                    commentText: this.commentText
                   }
-                  this.isSubmit = false
+                  params.set('json', JSON.stringify(newJson))
+                  params.set('userId', this.$store.getters.userInfo.userId)
+                  params.set('taskId', this.taskID)
+                  completeTask(params).then(res => {
+                    if (res.success === true) {
+                      if (index === this.qblx_pageData.qblxData.length) {
+                        this.$message.success('提交成功')
+                        if (this.bpnId !== '') {
+                          let taskId = {
+                            id: this.bpnId
+                          }
+                          taskDel(taskId).then(res => {
+                            return res
+                          })
+                        }
+                        this.$router.push("/processCenter");
+                      }
+                    }
+                    this.isSubmit = false
+                  })
                 })
               })
             } else {
@@ -425,10 +558,11 @@ export default {
   position: relative;
   height: 100%;
 
-  /deep/.el-upload-list__item-name {
+  /deep/ .el-upload-list__item-name {
     margin-left: 48px;
   }
-  /deep/.el-upload-list {
+
+  /deep/ .el-upload-list {
     width: 50%;
     margin-bottom: 10px;
   }
@@ -500,10 +634,23 @@ export default {
     /deep/ .el-textarea__inner {
       font-family: inherit;
     }
+
     /deep/ .el-table th {
       padding: 0px;
     }
   }
+
+  .picker_style {
+    margin-left: 10px;
+    margin-bottom: 0;
+    min-height: 50px;
+    line-height: 50px;
+    border-bottom: 1px dashed #e5e5e5;
+    /deep/.el-input__inner{
+      border: 0;
+    }
+  }
+
 }
 
 </style>

src/pages/processCenter/pages/creatProcess/qbzxdlx/step2.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="qbzxdlxStep1">
+  <div class="qbzxdlxStep2">
     <ProcessHeader toggle>
       <template slot="proName">企标制修订立项计划流程</template>
       <template slot="proNode">发起流程</template>
     </ProcessHeader>
     <div class="headerTabs">
       <div class="headerTabsItem" :class="active === '1' ? 'active' : ''" @click="handleTabs('1')">基础信息</div>
-      <div class="headerTabsItem" :class="active === '2' ? 'active' : ''" @click="handleTabs('2')">人员信息</div>
+      <div class="headerTabsItem" :class="active === '2' ? 'active' : ''" @click="handleTabs('2')">审批历史</div>
     </div>
     <div class="content" v-show="active === '1'">
       <div style="flex: auto; overflow: auto;">
@@ -18,7 +18,7 @@
             <el-form-item label="项目目标:" class="add-form-item">
               <el-input
                 style="width: 90%"
-                clearable
+                readonly
                 v-model="qblx_pageData.projectTarget"
                 placeholder="请输入项目目标"/>
             </el-form-item>
@@ -39,25 +39,40 @@
                 ></el-button>
               </div>
             </el-form-item>
-            <el-form-item class="add-form-item">
-              <el-table
-                :data="qblx_pageData.qblxData"
-                border
-                ref="entryTable"
-                height="49%"
-                style="width: 100%"
-                :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
-              fontWeight: 'bold', height: '20px'}">
-                <el-table-column type="selection" width="55"/>
-                <el-table-column type="index" label="序号" align="center" width="50"/>
-                <el-table-column prop="esName" label="企标名称" align="center" width="300" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="dutyUnit" label="责任单位" align="center"></el-table-column>
-                <el-table-column prop="dutyPeople" label="责任人" align="center"></el-table-column>
-                <el-table-column prop="firstDraftTime" label="初稿完成日期" width="150" align="center"></el-table-column>
-                <el-table-column prop="planTime" label="计划完成日期" width="150" align="center"></el-table-column>
-                <el-table-column prop="endTime" label="截止日期" width="150" align="center"></el-table-column>
-              </el-table>
-            </el-form-item>
+            <el-row>
+              <el-col :span="8">
+                <el-form-item class="add-form-item" label="企标名称">
+                  <!--<a>{{ qblx_pageData.qblxData.esName || '-' }}</a>-->
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item class="add-form-item" label="责任单位:">
+                  <!--<a>{{ qblx_pageData.qblxData.dutyUnit || '-' }}</a>-->
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item class="add-form-item" label="责任人:">
+                  <!--<a>{{ qblx_pageData.qblxData.dutyPeople || '-' }}</a>-->
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8">
+                <el-form-item class="add-form-item" label="初稿完成日期:">
+                  <!--<a>{{ qblx_pageData.qblxData.firstDraftTime || '-' }}</a>-->
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item class="add-form-item" label="计划完成日期:">
+                  <!--<a>{{ qblx_pageData.qblxData.planTime || '-' }}</a>-->
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item class="add-form-item" label="截止时间:">
+                  <!--<a>{{ qblx_pageData.qblxData.endTime || '-' }}</a>-->
+                </el-form-item>
+              </el-col>
+            </el-row>
           </el-form>
         </div>
       </div>
@@ -75,6 +90,73 @@
         </el-collapse-item>
       </el-collapse>
     </div>
+    <div class="content" v-show="active === '2'">
+      <div class="flow-list">
+        <el-table
+          height="100%"
+          ref="selection"
+          :data="detailData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          border
+          row-key="id"
+          :no-data-text="listNoDataText"
+          :header-cell-style="{background: '#f8f8f9', color: '#515a6e'}"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="任务步骤"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="assignee"
+            label="任务受理人"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="createTime"
+            label="创建时间"
+            sortable="custom"
+            align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.createTime ? $moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") : "" }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="endTime"
+            label="完成时间"
+            align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.endTime ? $moment(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss") : "" }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="comment"
+            label="流程信息"
+            align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.commentText }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="completeFlag"
+            label="状态"
+            align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.endTime ? "已完成" : "未完成" }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <loading :loading="loading">流程列表加载中</loading>
+      </div>
+    </div>
 
     <ProcessFooter
       show-submit
@@ -118,6 +200,10 @@ export default {
       modalshowflag: false,
       nodeList: [],
       infoSourcesLength: '',
+      detailData: [],
+      loading: false,
+      taskIds: this.$route.query.taskIds,
+      pId: this.$route.query.prcId,
     }
   },
 
@@ -131,6 +217,9 @@ export default {
     this.getData()
   },
   methods: {
+    handleTabs(name) {
+      this.active = name
+    },
     processTable() {
       this.$http.get("lawss/activiti/get_list_by_instance", {
         prcNum: this.$route.query.prcNum,
@@ -158,7 +247,6 @@ export default {
     getFormFieldList(item) {
       this.$nextTick(() => {
         this.qblx_pageData = JSON.parse(JSON.stringify(item)).qblx_pageData
-        this.roleForm = JSON.parse(JSON.stringify(item)).roleList
         this.infoSourcesLength = this.qblx_pageData.qblxFile.length
       })
     },
@@ -226,6 +314,96 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+@import '~@/assets/styles/style';
+
+.qbzxdlxStep2 {
+  position: relative;
+  height: 100%;
+
+  /deep/ .el-upload-list__item-name {
+    margin-left: 48px;
+  }
+
+  /deep/ .el-upload-list {
+    width: 50%;
+    margin-bottom: 10px;
+  }
+
+  /deep/ .el-drawer__container {
+    .prc-content-border {
+      border: none;
+      padding: 0 20px 0;
+    }
+  }
+
+  .headerTabs {
+    height: 52px;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 10px;
+
+    .headerTabsItem {
+      border: 1px solid #c1c1c1;
+      padding: 0 5px;
+      height: 30px;
+      line-height: 30px;
+      cursor: pointer;
+    }
+
+    .active {
+      border: 1px solid #E6A23C;
+      color: #fff;
+      background: #E6A23C;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(~'100% - 103px');
+    overflow: auto;
+
+    .tableTitle {
+      margin-bottom: 10px;
+      height: 30px;
+      line-height: 30px;
+      position: relative;
+      font-size: 13px;
+      font-weight: bold;
+
+      .tableButton {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+
+  .content_form {
+    padding-top: 15px;
+
+    .el-divider--horizontal {
+      margin-top: 0px;
+    }
+
+    /deep/ .el-table__body-wrapper {
+      height: auto !important;
+    }
+
+    /deep/ .el-textarea__inner {
+      font-family: inherit;
+    }
+
+    /deep/ .el-table th {
+      padding: 0px;
+    }
+  }
+
+
+}
 
 </style>