需求申请单-工作流

src/components/workflow.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <div class="flex-handle">
+      <!-- <button @click="qqq">123</button> -->
       <div class="flex-left">
         <div class="flex-left-header">
           <div class="flex-path">
@@ -52,11 +53,10 @@
           </el-input>
         </div>
       </div>
-      <div class="flex-right" :class="{ copyClass: CopyStatus }">
-        <div
-          class="flex-left-header-text"
-          :class="{ 'flex-right-text': CopyStatus }"
-        >
+      <!-- :class="{ copyClass: CopyStatus }" -->
+      <!-- :class="{ 'flex-right-text': CopyStatus }" -->
+      <div class="flex-right">
+        <div class="flex-left-header-text">
           本部门人员办理
           <div style="display: flex">
             <div class="flex-header-text-tree">
@@ -74,7 +74,7 @@
             </div>
           </div>
         </div>
-        <div v-if="CopyStatus" class="flex-left-header-text flex-right-text">
+        <!-- <div v-if="CopyStatus" class="flex-left-header-text flex-right-text">
           抄送人员
           <div style="display: flex">
             <div class="flex-header-text-tree">
@@ -91,7 +91,7 @@
               <div class="">{{ copyUser }}</div>
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="flex-footer-botton">
@@ -99,6 +99,29 @@
         <el-button type="primary" @click="submitWork()">提交</el-button>
       </div>
     </div>
+    <el-dialog
+      title="修改常用意见"
+      :visible.sync="editStatus"
+      width="100%"
+      :before-close="editCloses"
+      :modal="false"
+      :destroy-on-close="true"
+    >
+      <div style="overflow-y: scroll; overflow-x: hidden; height: 240px">
+        <div
+          v-for="(item, index) in commonlyList"
+          :key="index"
+          ref="common"
+          class="flex-common"
+        >
+          {{ item.dataName
+          }}<i class="el-icon-circle-close" @click="deleStatus(item)"></i>
+        </div>
+        <div class="flex-common">
+          <i class="el-icon-circle-plus-outline" @click="addStatus()"></i>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -118,7 +141,7 @@ export default {
       node: [], //路径列表
       seleIndex: "", //点击路径下标
       commonlyList: [], //常用意见数组
-      textarea: "", //意见内容字段
+      textarea: "未填写意见", //意见内容字段
       copyUser: "", //抄送人员列表
       selectUser: "", //已选人员列表
       treeList: [], // 待选人员列表
@@ -127,6 +150,9 @@ export default {
       initialList: [], //第一次进入是加载节点
       clicknextName: "", //获取的流程节点
       backThree: [],
+      editStatus: false, //修改控制显示字段
+      treeCopyList: [],
+      demand: "",
     };
   },
   props: {
@@ -140,11 +166,34 @@ export default {
     },
   },
   created() {
+    console.log(this.list);
     this.getNextPath(this.list.resourceId, 1);
     this.getMetirialType();
   },
   methods: {
+    //生成需求决策编号接口
+    getDemand() {
+      this.$http({
+        url: "/market/waf/getBusi",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data:{}
+      }).then((res) => {
+        console.log(res);
+        this.demand = res.data;
+      });
+    },
     submitWork() {
+      //生成需求决策编号
+      if (this.clicknextName === "起草人发送") {
+        this.getDemand()
+      }
+      if (!this.list.taskId) {
+        this.$message.error("请先保存表单后处理");
+        return false;
+      }
       if (this.TransferStatus === true) {
         if (this.backThree.length > 0) {
           this.nextWork();
@@ -162,9 +211,9 @@ export default {
           // resolution: this.nodes.currentShape[0].condition.resolution, //流程图线节点
           // nextDealMan: this.backThree[0].loginNoStr || '', //下一步处理人
         };
-        if (this.copyUser) {
+        if (this.treeCopyList.length) {
           //抄送
-          list.copyman = this.backCopyThree[0].loginNoStr;
+          list.copyman = this.treeCopyList[0].loginNoStrCopy;
         }
         if (this.nodes.currentShape) {
           list.resolution = this.nodes.currentShape[0].condition.resolution;
@@ -199,7 +248,6 @@ export default {
           userId: _this.backThree[0].loginNoStr,
           taskId: _this.list.taskId,
           content: _this.textarea,
-          tableName: _this.requestForm.processDefinitionKey,
         };
         obj.url = _this.$url.formList.transferTask + _this.list.taskId;
         obj.data = lists;
@@ -211,7 +259,6 @@ export default {
             let list = {
               taskId: data.taskid,
               id: _this.list.id,
-              tableName: _this.requestForm.processDefinitionKey,
             };
 
             _this.setUpdate(list);
@@ -221,12 +268,13 @@ export default {
               id: _this.list.id,
               resourceId: _this.nodes.currentShape[0].resourceId,
               taskName: _this.nodes.nextShapes[0].properties.name,
-              tableName: _this.requestForm.processDefinitionKey,
             };
             if (data.copytaskid) {
               list.copytaskid = data.copytaskid;
-              list.copyman = _this.backCopyThree[0].loginNoStr;
-              // list.tableName = _this.requestForm.processDefinitionKey;
+              list.copyman = _this.treeCopyList[0].loginNoStrCopy;
+            }
+            if(_this.demand){
+              list.needNo = _this.demand
             }
             _this.setUpdate(list);
           }
@@ -234,23 +282,25 @@ export default {
           let list = {
             taskName: "结束",
             id: _this.list.id,
-            tableName: _this.requestForm.processDefinitionKey,
           };
           _this.setUpdate(list);
         }
-        _this.dialogStatus = false;
-        _this.handleCloses();
       }
     },
+    // qqq() {
+    //   this.$emit("beforeClose", true);
+    // },
+    //更新工作流接口
     setUpdate(e) {
       this.$http({
-        url: "/market/waf/updateBase",
+        url: "/market/waf/update",
         method: "post",
         headers: {
           "Content-Type": "application/json",
         },
         data: e,
       }).then((res) => {
+        this.$emit("beforeClose", true);
         // this.fromList.taskId = res.data.body.taskId;
         // this.fromList.taskName = res.data.body.taskName;
         // if (res.data.body.taskName === "起草") {
@@ -269,9 +319,12 @@ export default {
         // fresourceId: "bf79721c-33f3-11ed-ba0b-00505687dcd3", //测试环境
         fresourceId: this.requestForm.fresourceId, // 本地环境
         processId: this.requestForm.processDefinitionKey,
+        // fresourceId: "0d94de8a-0281-11ed-a302-4ae7da54db39", // 本地环境
+        // processId: "request_form_process",
         // resourceId: e,
       };
       if (e) {
+        // this.propsList = [];
         list.resourceId = e;
       }
       this.$http({
@@ -295,9 +348,9 @@ export default {
             this.transferStatus = false;
           }
           if (res.data.body.nextShapes[0].copy !== null) {
-            console.log(res.data.body.nextShapes[0].copy.copy);
             if (res.data.body.nextShapes[0].copy.copy === "true") {
-              this.copyStatus = true; //抄送按钮生效
+              // this.copyStatus = true; //抄送按钮生效
+              this.CopyStatus = true;
             } else {
               this.copyStatus = false;
             }
@@ -323,12 +376,17 @@ export default {
     },
     //查询候选人接口
     getTreeLists(e, status) {
-      let createdId = "createld"
-      let id =
-        e.nextShapes[0].properties.documentation === createdId
-          ? this.list.createId
-          : e.nextShapes[0].properties.documentation;
-          console.log(id);
+      let id = "";
+      if (status === 2) {
+        id = "copy." + e;
+      } else {
+        id =
+          e.nextShapes[0].properties.documentation == "createId" ||
+          e.nextShapes[0].properties.documentation == "createId-copy"
+            ? this.list.createId
+            : e.nextShapes[0].properties.documentation;
+      }
+
       this.$http({
         url: "/market/api/user/info/queryNodePers?params=" + id,
         method: "post",
@@ -340,6 +398,7 @@ export default {
         console.log(status);
         if (status === 2) {
           this.treeCopyList = res.data; //抄送
+          console.log(this.treeCopyList);
           //  this.$refs.defTrees.treeList = res.data;
         } else {
           this.treeList = res.data; //抄送
@@ -359,7 +418,7 @@ export default {
     },
     //点击节点获取下一步的处理人字段
     clickGetTree(e, index) {
-      this.CopyStatus = false;
+      // this.CopyStatus = false;
       this.TransferStatus = false;
       //   this.clickTaskName = e.properties.name;
       this.clicknextName = e.properties.name;
@@ -372,6 +431,7 @@ export default {
     },
     //点击修改
     clickEdit() {
+      console.log(123);
       this.editStatus = true;
     },
     //选择树的回调
@@ -380,7 +440,12 @@ export default {
         this.$message.error("只能选择一个人");
         return;
       } else {
+        console.log(e);
         this.backThree = e;
+        if (this.CopyStatus === true) {
+          this.getTreeLists(e[0].loginNoStr, 2);
+        }
+
         if (e[0]) {
           this.selectUser = e[0].loginNameStr;
         } else {
@@ -430,6 +495,62 @@ export default {
         this.getMetirialType();
       });
     },
+    //常用意见添加
+    addStatus() {
+      let newData = Date.parse(new Date());
+      this.$prompt("请输入常用意见", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      })
+        .then(({ value }) => {
+          let list = {
+            dictCode: "approval",
+            dataCode: newData,
+            dataName: value,
+            dictName: "审批意见",
+          };
+          this.geaddctType(list);
+          this.$message({
+            type: "success",
+            message: "常用意见添加成功",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
+        });
+    },
+    //常用意见删除
+    deleStatus(e) {
+      this.$confirm("此操作将删除此常用意见, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          let list = {
+            dataCode: e.dataCode,
+            dictCode: "approval",
+          };
+          this.geDelectType(list);
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    //关闭修改
+    editCloses() {
+      this.editStatus = false;
+    },
   },
 };
 </script>

src/pages/main/leader/components/deptThree.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="treebox" v-loading="loading" style="height: 30rem">
+      <el-checkbox-group v-model="userList">
+          <div v-for="(item,index) in treeList" :key="index">
+              <el-checkbox :label="item" @change="checkChange(item)">{{item.loginNameStr}}</el-checkbox> </div>
+      </el-checkbox-group>
+    <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
+<!--    <el-tree-->
+<!--      :highlight-current="true"-->
+<!--      :check-strictly="true"-->
+<!--      ref="tree"-->
+<!--      @check-change="handleCheckChange"-->
+<!--      :data="treeList"-->
+<!--      node-key="id"-->
+<!--      :default-checked-keys="defaultListc"-->
+<!--      :default-expanded-keys="defaultListc"-->
+<!--      @node-click="handleNodeClick"-->
+<!--      :filter-node-method="filterNode"-->
+<!--    >-->
+<!--      <span class="custom-tree-node" slot-scope="{ node }" @click="cs(node)">-->
+<!--        <em-->
+<!--          style="display: inline-block; width: 20px"-->
+<!--          v-if="node.data.haveUserFlag == 'N' && node.data.children.length == 0"-->
+<!--        ></em>-->
+<!--        <i-->
+<!--          class="el-icon-caret-right"-->
+<!--          v-if="node.data.haveUserFlag == 'Y' && node.data.children.length == 0"-->
+<!--        ></i>-->
+<!--        <el-checkbox-->
+<!--          style="margin-right: 10px"-->
+<!--          v-model="node.checked"-->
+<!--          v-if="node.data.type == 1"-->
+<!--        ></el-checkbox>-->
+<!--        <span>{{ node.label }}</span>-->
+<!--      </span>-->
+<!--    </el-tree>-->
+  </div>
+</template>
+
+<script>
+export default {
+    props: ["defaultList", "type", "closeList", "treeList"],
+    data() {
+        return {
+            userList:[],
+            // treeList: [],
+            opt: [],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+            defaultListc: [],
+            loading: false,
+            filterText: "",
+            list:[]
+        };
+    },
+    methods:{
+        checkChange(e){
+  
+  
+            // console.log(this.userList)
+            // let newList = []
+            // this.userList.map((item) =>{
+            //     let array =    {
+            //         userid:item,
+            //         taskid:e.id_,
+            //         nextid:e.id
+            //     }
+            //     newList.push(array)
+            //     // newList.map((items,i) =>{
+            //     //     if(item !== items.userid){
+            //     //         newList.splice(i,1)
+            //     //     }
+            //     //         })
+            //
+            // })
+            // this.list = newList
+            // this.userList.map((item) =>{
+            //     newList.map((items,i) =>{
+            //         if(item !==items.id){
+            //             newList.splice(i,1)
+            //         }
+            //     })
+            // })
+            // console.log(newList)
+            this.$emit('changeTree',this.userList)
+            this.$emit('changeUserName',e)
+
+
+        },
+    }
+}
+    // filterNode(value, data) {
+    //   if (!value) return true;
+    //   return data.label.indexOf(value) !== -1;
+    // },
+    // cs(v) {
+    //   // console.log(v)
+    // },
+    // getTree(v) {
+    //     this.loading = true;
+    //     this.$http({
+    //         url: "/sysmgr/csysdept/queryAllList",
+    //         method: "post",
+    //         headers: {
+    //             "Content-Type": "application/json",
+    //         },
+    //         data: {
+    //             parentorgid: '00440089000000000000',
+    //         },
+    //     }).then((res) => {
+    //         console.log(res);
+    //         // this.treeList = res.data;
+    //         // this.loading = false;
+    //     });
+    // },
+    // handleCheckChange(v) {
+    //     let opt = [];
+    //     let list = this.$refs.tree.getCheckedNodes();
+    //     for (let i = 0; i < list.length; i++) {
+    //         if (list[i].type == 1) {
+    //             opt.push({
+    //                 receiveNo: list[i].loginNoStr,
+    //                 receiveName: list[i].label,
+    //                 deptName: list[i].displayname,
+    //                 deptCode: list[i].groupId,
+    //                 id: list[i].id,
+    //                 type: list[i].type,
+    //                 label: list[i].label,
+    //             });
+    //         }
+    //     }
+    //     this.$emit("treeCheck", opt);
+    // },
+  //   handleNodeClick(v) {
+  //     console.log(v);
+  //     let s = false;
+  //     if (v.children && v.children.length == 0) {
+  //       s = true;
+  //     }
+  //     if (v.type) {
+  //       return;
+  //     }
+  //     if (
+  //       v.children &&
+  //       v.children.length > 0 &&
+  //       v.children[v.children.length - 1].type == 1
+  //     ) {
+  //       return;
+  //     }
+  //     this.$http({
+  //       url: "/sysmgr/sysuserinfo/queryList",
+  //       method: "post",
+  //       headers: {
+  //         "Content-Type": "application/json",
+  //       },
+  //       data: {
+  //         groupId: v.o,
+  //       },
+  //     }).then((res) => {
+  //       res.data.forEach((item) => {
+  //         v.children.push({
+  //           id: item.id,
+  //           label: item.loginNameStr,
+  //           type: 1,
+  //           displayname: v.displayname,
+  //           groupId: item.groupId,
+  //           loginNoStr: item.loginNoStr,
+  //         });
+  //       });
+  //     });
+  //     for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
+  //       if (s && v.o == this.$refs.tree.store._getAllNodes()[i].data.o) {
+  //         this.$refs.tree.store._getAllNodes()[i].expanded = true;
+  //         return;
+  //       }
+  //     }
+  //   },
+  // },
+//   created() {
+//     console.log(this.treeList);
+//     // this.getTree();
+//     this.defaultListc = this.defaultList;
+//   },
+//   watch: {
+//     filterText(val) {
+//       this.$refs.tree.filter(val);
+//     },
+//     type() {
+//       this.defaultListc = this.defaultList;
+//       this.$forceUpdate();
+//     },
+//     defaultList() {
+//       this.$forceUpdate();
+//     },
+//     closeList() {
+//       this.$refs.tree.setCheckedNodes(this.closeList);
+//     },
+//   },
+// };
+</script>
+
+<style scoped lang="scss">
+.el-icon-caret-right {
+  color: #ccc;
+  margin: 0 5px;
+}
+.treebox {
+  border: 1px solid #ddd;
+}
+    ::v-deep .el-checkbox-group{
+        display: flex;
+        flex-direction: column;
+        align-items: baseline;
+        /* font-size: 38px; */
+        margin-left: 20px;
+    }
+</style>

src/pages/main/leader/components/export.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="flex-count">
+    <div class="flex-num">
+      <div class="time-title">已选（{{ num }}）项</div>
+      <div v-if="!approvalStatus" class="flex-time">
+        <div class="time-title">时间:</div>
+ <el-date-picker
+      v-model="seachList"
+      type="daterange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      :default-time="['00:00:00', '23:59:59']">
+      size="small"
+    </el-date-picker>
+        <el-button
+          type="primary"
+          @click="clickSeach"
+          plain
+          >搜索</el-button
+        >
+      </div>
+    </div>
+    <div class="flex-num" v-if="exportStatusList">
+      <!-- <el-button
+        type="primary"
+        @click="clickApproval"
+        v-if="approvalStatus"
+        plain
+        >批量审批</el-button
+      > -->
+      <el-button type="primary" @click="clickExport" v-if="exportStatus" plain
+        >批量导出</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    num: {
+      type: Number,
+      default: () => [],
+    },
+      exportStatusList: {
+          type:Boolean,
+          default: () => [],
+      },
+  },
+  data() {
+    return {
+      seachList:'',
+      approvalStatus: true,
+      exportStatus: true,
+    };
+  },
+  methods: {
+    clickExport() {
+      if (this.approvalStatus) {
+        this.approvalStatus = false;
+        this.$emit("clickexport", true);
+      } else {
+        this.$emit("export", true);
+      }
+    },
+    clickApproval() {
+        this.$emit('clickApproval',true)
+
+    },
+    clickSeach(){
+
+
+        this.$emit('seachExportList',this.seachList)
+    }
+  },
+  created() {
+
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.time-title {
+  margin-right: 20px;
+  height: 40px;
+  line-height: 40px;
+}
+.flex-count {
+  display: flex;
+  justify-content: space-between;
+  .flex-num {
+    margin: 1%;
+    display: flex;
+    .flex-time {
+      display: flex;
+      margin-left: 20px;
+      margin-right: 20px;
+    }
+  }
+}
+</style>

src/pages/main/leader/components/form.vue

@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <slot :name="list.name"></slot>
+    <el-table
+      ref="table"
+      style="width: 100%"
+      :data="list.data"
+      :height="list.height + 'px'"
+      :max-height="list.height + 'px'"
+      @row-click="getRowData"
+      @selection-change="selectionChange"
+      :cell-style="columnbackgroundStyle"
+      empty-text="暂无数据"
+      @cell-click="getRowList"
+    >
+      <!-- 是否多选 -->
+      <el-table-column
+        v-if="list.isSelection"
+        :selecttable="list"
+        type="selection"
+        :width="100"
+        align="center"
+      />
+
+      <!-- 是否需要序号 -->
+      <el-table-column
+        v-if="list.isIndex"
+        type="index"
+        label="序号"
+        width="55"
+        align="center"
+      />
+      <template v-for="item in list.titledata">
+        <el-table-column
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+          align="center"
+          show-overflow-tooltip
+          :width="item.width || 100"
+        />
+      </template>
+      <!-- 操作列 -->
+      <el-table-column
+        v-if="list.isOperation"
+        v-bind="list.data && list.data.length ? { fixed: 'right' } : null"
+        style="margin-right: 20px"
+        class-name="handle-td"
+        label-class-name="tc"
+        :label="list.operation.label"
+        align="center"
+      >
+        <!-- UI统一一排放3个，4个以上出现更多 -->
+        <template slot-scope="scope">
+          <!-- 三个一排的情况，去掉隐藏的按钮后的长度 -->
+          <template v-if="list.operation.data.length > 0">
+            <div class="btn">
+              <div v-for="item in list.operation.data" :key="item.label">
+                <template v-if="item.type !== 'icon'">
+                  <el-button
+                    v-bind="item"
+                    :type="item.type ? item.type : ''"
+                    size="mini"
+                    @click.native.prevent="
+                      item.handleRow(scope.$index, scope.row, item.label)
+                    "
+                  >
+                    {{ item.label }}
+                  </el-button>
+                </template>
+                <template v-else>
+                  <i
+                    :class="[icon, item.icon]"
+                    v-bind="item"
+                    @click="item.handleRow(scope.$index, scope.row, item.label)"
+                  />
+                </template>
+              </div>
+            </div>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="page">
+      <el-pagination
+        style="display: flex; flex-direction: row-reverse"
+        v-if="list.pageData.total > 0"
+        :current-page.sync="page"
+        :page-sizes="list.pageData.pageSizes ? list.pageData.pageSizes : [10]"
+        :page-size="list.pageData.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="list.pageData.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      page: 1,
+    };
+  },
+  props: {
+    //  表格数据和表格部分属性的对象
+    // eslint-disable-next-line vue/require-default-prop
+    list: {
+      type: Object,
+    },
+  },
+  created() {
+    console.log(this.list);
+    // this.columnbackgroundStyle()
+  },
+  mounted() {
+     console.log(this.list);
+  },
+  methods: {
+    columnbackgroundStyle({ row, column, rowIndex, columnIndex }) {
+      // console.log(row);
+      // console.log(column);
+      // console.log(rowIndex);
+      // console.log(columnIndex);
+      if(column.type == 'default'){
+        if(column.label === '需求名称'){
+          return 'color:#0682CD;'
+        }
+      }
+    //   if (columnIndex == 1) {
+    // 	//让下标为1的列数背景颜色显示为红色（颜色自定义根据大家需求来）
+    //     return 'color:#0682CD;'
+    // }
+    },
+    selectionChange(val) {
+      //多选数字回调
+      this.$emit("num", val);
+    },
+    handleAdd(name) {
+      this.$emit("toolMsg", name);
+    },
+    handleRow(index, row, lable) {},
+    handleSizeChange(val) {
+      this.$emit("changeSize", val);
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      this.$emit("changeNum", val);
+      console.log(`当前页: ${val}`);
+    },
+    // 点击行即可选中
+    getRowData(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    getRowList(row, column, event, cell) {
+      this.$emit("clickDemand", column.label, row);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/pages/main/leader/components/search.vue

@@ -0,0 +1,139 @@
+<!-- @2022 -6-13 @dalaoyang -->
+<!-- 搜索栏组件，后期可加判断 -->
+<!-- 支持input select 按钮显示-->
+
+
+<template>
+  <div class="flex-count">
+    <div class="flex-container">
+      <template v-if="list.elinput">
+        <div
+          class="flex-title"
+          v-for="item in list.elinput"
+          :key="'input'+item.key"
+        >
+          <div>{{ item.name }}</div>:
+          <el-input
+            v-model="seachList[item.key]"
+            :placeholder="item.name"
+            :style="{ width: item.width ? item.width + 'px' : '400px' }"
+            class="filter-item"
+            clearable
+          />
+        </div>
+      </template>
+      <template v-if="list.date">
+        <div
+          class="flex-title"
+         
+          v-for="(item, index) in list.date"
+          :key="'input'+index"
+        >
+          <div>{{ item.name }}</div>:
+          <div >
+            <el-date-picker
+              :key="'date'+index"
+              value-format="yyyy-MM-dd"
+             v-model="seachList[item.key]"
+              type="daterange"
+            :style="{ width: item.width ? item.width + '%' : '400px' }"
+              
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+      </template>
+      <template v-if="list.elselect">
+        <div
+          class="flex-title"
+          v-for="(item, index) in list.elselect"
+          :key="'select'+index"
+        >
+          {{ item.name }}:
+        </div>
+        <el-select
+          v-for="item in list.elselect"
+          :key="'select'+item.key"
+          v-model="seachList[item.key]"
+          :placeholder="item.name"
+          clearable
+          :style="{ width: item.width ? item.width + 'px' : '90px' }"
+          class="filter-item"
+        >
+          <el-option
+            v-for="i in item.option"
+            :key="i.key"
+            :label="i.value"
+            :value="i.value"
+          />
+        </el-select>
+      </template>
+    </div>
+    <div class="btn">
+      <el-button
+        v-if="list.sreach"
+        class="filter-item"
+        type="primary"
+        @click="handleSearch"
+      >
+        搜索
+      </el-button>
+      <el-button
+        v-if="list.reset"
+        class="filter-item"
+        type="warning"
+        @click="handleRest"
+      >
+        重置
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      seachList: {},
+    };
+  },
+  methods: {
+    //搜索事件
+    handleSearch() {
+      this.$emit("seachList", this.seachList);
+    },
+    //重置事件
+    handleRest() {},
+  },
+};
+</script>
+
+<style  lang="scss" scoped>
+.flex-count {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-container {
+  display: -webkit-box;
+}
+.flex-title {
+  height: 40px;
+  line-height: 40px;
+  margin-left: 40px;
+  margin-right: 15px;
+  display: flex;
+}
+.filter-item {
+  width: 9rem;
+}
+</style>

src/pages/main/leader/components/tabs.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-tabs v-model="activeName" @tab-click="handleClick">
+    <!-- <el-tab-pane
+    class="flex-tabs"
+      v-for="item in tabList"
+      :key="item.index"
+      :label="item.label"
+      :name="item.index"
+    >
+    </el-tab-pane> -->
+    <el-tab-pane v-for="item in tabList" :key="item.index" :name="item.index">
+      <span slot="label"
+        >{{ item.label }} <span v-if="item.number">({{ item.number }})</span>
+      </span>
+    </el-tab-pane>
+    <!-- <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  props: {
+    active: {
+      type: String,
+      default: "first",
+    },
+    tabList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      activeName: "first",
+    };
+  },
+  created() {
+  },
+  methods: {
+    handleClick(tab, event) {
+      this.$emit("status", tab._props.name);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped >
+.flex-tabs {
+  background-color: red !important;
+  color: red !important;
+}
+</style>

src/pages/main/leader/demand/reportForm.vue

@@ -0,0 +1,412 @@
+<template>
+  <div class="flex-header">
+    <Seach
+      style="margin-top: 20px"
+      :list="filterData"
+      @seachList="seachList"
+    ></Seach>
+    <div class="flex-export">
+      <el-button class="flex-button" type="primary" @click="clickExport"
+        >导出</el-button
+      >
+    </div>
+    <Table
+      ref="table"
+      :list="firstTable"
+      @changeNum="changeNum"
+      @changeSize="changeSize"
+    >
+    </Table>
+    <el-dialog
+      title="详细信息"
+      :visible.sync="dialogStatus"
+      width="100%"
+      :before-close="handleClose"
+      :modal="false"
+      :destroy-on-close="true"
+    >
+      <Table :list="twoTable" class="flex-form" ref="formTable" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import FormTable from "../components/formTable.vue";
+import Seach from "../components/search.vue";
+import Export from "../components/export.vue";
+import Tabs from "../components/tabs.vue";
+import Table from "../components/form.vue";
+import deptTree from "../components/deptThree.vue";
+export default {
+  components: {
+    Tabs,
+    Table,
+    Export,
+    Seach,
+    FormTable,
+    deptTree,
+  },
+  data() {
+    return {
+      seachLists: {},
+      firstTable: {
+        name: "first",
+        height: "700",
+        titledata: [
+          {
+            label: "需求决策编号",
+            prop: "needNo",
+            width: 200,
+          },
+          {
+            label: "需求名称",
+            prop: "needName",
+            width: 200,
+          },
+          {
+            label: "提出部门",
+            prop: "applyDept",
+            width: 200,
+          },
+          {
+            label: "提出人",
+            prop: "proposer",
+            width: 200,
+          },
+          {
+            label: "提出时间",
+            prop: "proposerTime",
+            width: 200,
+          },
+          {
+            label: "当前状态",
+            prop: "taskName",
+            width: 200,
+          },
+          {
+            label: "需求讨论确认时间",
+            prop: "tlTime",
+            width: 200,
+          },
+          {
+            label: "需求排期开始时间",
+            prop: "paiqiBegin",
+            width: 200,
+          },
+          {
+            label: "需求排期结束时间",
+            prop: "paiqiEnd",
+            width: 200,
+          },
+          {
+            label: "上线时间",
+            prop: "onlineTime",
+            width: 200,
+          },
+          {
+            label: "需求一级目录",
+            prop: "firstDirectory",
+            width: 200,
+          },
+          {
+            label: "需求二级目录",
+            prop: "secondDirectory",
+            width: 200,
+          },
+          {
+            label: "需求三级目录",
+            prop: "thirdDirectory",
+            width: 200,
+          },
+          {
+            label: "需求四级目录",
+            prop: "fourthDirectory",
+            width: 200,
+          },
+          {
+            label: "需求五级目录",
+            prop: "fifthDirectory",
+            width: 200,
+          },
+        ], //表格头
+        data: [], //内容数据
+        loading: true,
+        pageData: {
+          total: 100, // 总条数
+          pageSize: 10, // 每页数量
+          pageNum: 1, // 页码
+        },
+        isSelection: false, // 表格有多选时设置
+        isOperation: false, // 表格有操作列时设置
+        isIndex: false, // 列表序号
+        operation: {
+          // 表格有操作列时设置
+          label: "操作", // 列名
+          width: "50", // 根据实际情况给宽度
+          data: [
+            {
+              label: "操作", // 操作名称
+              type: "", //按钮类型
+              handleRow: (e, r, o) => {
+                this.getQueryList(r);
+              }, // 自定义事件
+            },
+          ],
+        },
+      },
+      twoTable: {
+        name: "first",
+        height: "300",
+        titledata: [
+          {
+            label: "需求决策编号",
+            prop: "needNo",
+            width: 200,
+          },
+          {
+            label: "业支需求编号",
+            prop: "reqNum",
+            width: 200,
+          },
+          {
+            label: "业支需求名称",
+            prop: "needName",
+            width: 200,
+          },
+          {
+            label: "需求负责人",
+            prop: "createUser",
+            width: 200,
+          },
+          {
+            label: "需求讨论确认时间",
+            prop: "tlTime",
+            width: 200,
+          },
+          {
+            label: "当前状态",
+            prop: "taskName",
+            width: 200,
+          },
+          {
+            label: "需求开发开始时间",
+            prop: "paigiBegin",
+            width: 200,
+          },
+          {
+            label: "需求开发结束时间",
+            prop: "paigiEnd",
+            width: 200,
+          },
+          {
+            label: "需求测试开始时间",
+            prop: "startTime",
+            width: 200,
+          },
+          {
+            label: "需求测试结束时间",
+            prop: "endTime",
+            width: 200,
+          },
+          {
+            label: "计划上线时间",
+            prop: "paiqiPlanOnlineTime",
+            width: 200,
+          },
+          {
+            label: "上线时间",
+            prop: "onlineTime",
+            width: 200,
+          },
+          {
+            label: "所属系统",
+            prop: "sysBelong",
+            width: 200,
+          },
+        ], //表格头
+        data: [], //内容数据
+        loading: true,
+        pageData: {
+          total: "", // 总条数
+          pageSize: 10, // 每页数量
+          pageNum: 1, // 页码
+        },
+        isSelection: false, // 表格有多选时设置
+        isOperation: false, // 表格有操作列时设置
+        isIndex: false, // 列表序号
+        operation: {
+          // 表格有操作列时设置
+          label: "操作", // 列名
+          width: "50", // 根据实际情况给宽度
+          data: [
+            {
+              label: "操作", // 操作名称
+              type: "", //按钮类型
+              handleRow: (e, r, o) => {
+                console.log(r);
+                this.dialogStatus = true;
+              }, // 自定义事件
+            },
+          ],
+        },
+      },
+      filterData: {
+        timeSelect: true, //是否显示日期控件
+        sreach: true,
+        restet: false,
+        elinput: [
+          {
+            name: "需求决策编号", //提示语275
+            key: "needNo", //字段名
+            width: 120, //宽度
+          },
+          {
+            name: "需求名称", //提示语275
+            key: "needName", //字段名
+            width: 120, //宽度
+          },
+        ],
+        date: [
+          {
+            name: "需求提出时间",
+            key: "time",
+            width: 40,
+          },
+        ],
+      },
+      dialogStatus: false,
+      page: 1,
+      size: 10,
+    };
+  },
+  created() {
+    this.getQueryLists();
+  },
+  methods: {
+    //报表导出
+
+    clickExport() {
+      this.$http({
+        url: "/market/waf/excelExport",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        responseType: "blob",
+        data: this.seachLists ? this.seachLists : {},
+      }).then((response) => {
+        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+          let blob = new Blob([response.data.size], {
+            type: "application/vnd.ms-excel;",
+          });
+
+          // window.navigator.msSaveOrOpenBlob(blob, res + "需求申请单" + ".zip");
+
+          window.navigator.msSaveOrOpenBlob(blob, "需求管理报表" + ".xlsx");
+
+          //window.navigator.msSaveOrOpenBlob(blob, t his.form.needName);
+        } else {
+          /* 火狐谷歌的文件下载方式 */
+          var blob = new Blob([response.data]);
+          var downloadElement = document.createElement("a");
+          var href = window.URL.createObjectURL(blob);
+          downloadElement.href = href;
+
+          downloadElement.download =  "需求管理报表" + ".xlsx";
+
+          document.body.appendChild(downloadElement);
+          downloadElement.click();
+          document.body.removeChild(downloadElement);
+          window.URL.revokeObjectURL(href);
+        }
+      });
+    },
+    //报表首页接口
+    getQueryLists(e) {
+      this.$http({
+        url: "/market/waf/queryReport",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
+          page: '{"pageNo":"' + this.page + '","pageSize":"' + this.size + '"}',
+        },
+        data: e || {},
+      }).then((res) => {
+        console.log(res);
+        this.firstTable.pageData.total = res.data.totalRecord;
+        this.firstTable.data = res.data.data;
+      });
+    },
+    getQueryList(e) {
+      if (e.needNo !== null) {
+        this.$http({
+          url: "/market/relation/getRelation",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          data: {
+            needNo: e.needNo,
+          },
+        }).then((res) => {
+          this.twoTable.data = res.data.cwfInfo;
+          this.dialogStatus = true;
+        });
+      } else {
+        this.$message.error("暂无需求决策编号");
+      }
+    },
+    //子需求dialogStatus显示
+    handleClose() {
+      this.dialogStatus = false;
+      this.twoTable.data = [];
+    },
+    //搜索数据回调
+    seachList(e) {
+      this.$refs.table.page = 1;
+      this.page = 1;
+      this.size = 10;
+      this.seachLists = e;
+      if (e.time) {
+        e.stime = e.time[0];
+        e.etime = e.time[1];
+      } else {
+        e.stime = "";
+        e.etime = "";
+      }
+      this.getQueryLists(e);
+    },
+    changeNum(e) {
+      this.page = e;
+      this.getQueryLists(this.seachLists);
+    },
+    changeSize(e) {
+      this.size = e;
+      this.getQueryLists(this.seachLists);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.flex-export {
+  margin: 10px 0 10px 0;
+  text-align: end;
+}
+.flex-button {
+  width: 6%;
+}
+.flex-header {
+  display: flex;
+  width: calc(100% - 40px);
+  border-radius: 20px;
+  background-color: #fff;
+  margin: 0 auto;
+  margin-top: 20px;
+  position: relative;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+</style>

src/pages/main/leader/demand/supportState.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="flex-box">
+    <div class="flex-header">
+      <Table :list="firstTable" />
+    </div>
+    <div class="flex-count" v-for="(item, index) in listTable" :key="index">
+      <div>
+        <el-descriptions class="margin-top" :column="2" :size="size" border>
+          <template slot="extra"> </template>
+          <el-descriptions-item
+            labelStyle="text-align:center;width:10%;background-color:#F3FAFF;color:black;font-size: 15px;font-weight: bold;text-indent: 10px"
+          >
+            <template slot="label"> 子需求编号 </template>
+            {{ item.id }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            labelStyle="text-align:center;width:10%;background-color:#F3FAFF;color:black;font-size: 15px;font-weight: bold;text-indent: 10px"
+          >
+            <template slot="label"> 需求负责人 </template>
+            {{ item.createUser }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            labelStyle="text-align:center;width:10%;background-color:#F3FAFF;color:black;font-size: 15px;font-weight: bold;text-indent: 10px"
+          >
+            <template slot="label"> 需求名称 </template>
+            {{ item.needName }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            labelStyle="text-align:center;width:10%;background-color:#F3FAFF;color:black;font-size: 15px;font-weight: bold;text-indent: 10px"
+          >
+            <template slot="label"> 系统分类 </template>
+            {{ item.reqNum }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div class="flex-state">
+        <div class="flex-title">进度状态</div>
+        <div class="flex-img">
+          <div
+            class="flex-img-count"
+            v-for="(items, index) in item.state"
+            :key="index"
+          >
+            <div class="flex-text">{{ items.name }}</div>
+            <div class="flex-time flex-text">{{ items.time }}</div>
+            <img :src="items.imgUrl" alt="" />
+          </div>
+          <!-- <img src="../../../../assets/jiantou.png" alt=""> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Table from "../components/form.vue";
+export default {
+  components: {
+    Table,
+  },
+
+  data() {
+    return {
+      size: "",
+      list: [],
+      firstTable: {
+        name: "first",
+        height: "120",
+        titledata: [
+          {
+            label: "需求决策编号",
+            prop: "needNo",
+            width: 250,
+          },
+          {
+            label: "需求名称",
+            prop: "needName",
+            width: 250,
+          },
+          {
+            label: "需求创建时间",
+            prop: "proposerTime",
+            width: 250,
+          },
+          {
+            label: "需求确认时间",
+            prop: "tlTime",
+            width: 250,
+          },
+          {
+            label: "需求排期开始时间",
+            prop: "paiqiBegin",
+            width: 300,
+          },
+          {
+            label: "需求排期结束时间",
+            prop: "paiqiEnd",
+            width: 250,
+          },
+          {
+            label: "计划上线时间",
+            prop: "paiqiPlanOnlineTime",
+            width: 200,
+          },
+          {
+            label: "实际上线时间",
+            prop: "onlineTime",
+            width: 200,
+          },
+        ], //表格头
+        data: [
+          // {
+          //   date: "2016-05-04",
+          //   name: "王小虎",
+          //   address: "上海市普陀区金沙江路 1517 弄",
+          // },
+          //   {
+          //     date: "2016-05-01",
+          //     name: "王小虎",
+          //     address: "上海市普陀区金沙江路 1519 弄",
+          //   },
+          //   {
+          //     date: "2016-05-03",
+          //     name: "王小虎",
+          //     address: "上海市普陀区金沙江路 1516 弄",
+          //   },
+        ], //内容数据
+        loading: true,
+        pageData: {
+          total: 0, // 总条数
+          pageSize: 10, // 每页数量
+          pageNum: 1, // 页码
+        },
+        isSelection: false, // 表格有多选时设置
+        isOperation: false, // 表格有操作列时设置
+        isIndex: false, // 列表序号
+        // operation: {
+        //   // 表格有操作列时设置
+        //   label: "操作", // 列名
+        //   width: "50", // 根据实际情况给宽度
+        //   data: [
+        //   ],
+        // },
+      },
+      listTable: [],
+      listImg: [
+        {
+          name: "创建时间",
+          time: "123123123",
+          imgUrl: require("../../../../assets/a_img1.png"),
+        },
+        {
+          name: "确认时间",
+          time: "123123123",
+          imgUrl: require("../../../../assets/a_img2.png"),
+        },
+        {
+          name: "排期时间",
+          time: "123123123",
+          imgUrl: require("../../../../assets/a_img3.png"),
+        },
+        {
+          name: "开发完成时间",
+          time: "123123123",
+          imgUrl: require("../../../../assets/a_img4.png"),
+        },
+        {
+          name: "测试完成时间",
+          time: "123123123",
+          imgUrl: require("../../../../assets/a_img5.png"),
+        },
+        {
+          name: "上线时间",
+          time: "123123123",
+          imgUrl: require("../../../../assets/a_img6.png"),
+        },
+      ],
+      needNo: "",
+    };
+  },
+  created() {
+    this.needNo = this.$route.query.id;
+    this.getQueryList();
+  },
+  methods: {
+    getQueryList() {
+      this.$http({
+        url: "/market/relation/getRelation",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: {
+          needNo: this.needNo,
+        },
+      }).then((res) => {
+        this.firstTable.data.push(res.data);
+        this.listTable = res.data.cwfInfo;
+        this.listTable.map((item) => {
+          item.state.map((items, index) => {
+            if (items.status === false) {
+              items.imgUrl = require("../../../../assets/b_img" +
+                (index + 1) +
+                ".png");
+            } else {
+              items.imgUrl = require("../../../../assets/a_img" +
+                (index + 1) +
+                ".png");
+            }
+          });
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+//
+::v-deep .el-table {
+  border-radius: 10px;
+}
+.flex-box {
+  padding: 1%;
+  border-radius: 20px !important;
+  .flex-count {
+    width: 100%;
+    padding: 1%;
+    background-color: #fff;
+    margin-top: 20px;
+    border-radius: 10px;
+    margin-bottom: 40px;
+    .flex-state {
+      margin-top: 20px;
+      border: 1px solid #e8e8e8;
+      .flex-title {
+        height: 40px;
+        line-height: 40px;
+        background-color: #f3faff;
+        border-bottom: 1px solid #e8e8e8;
+        font-size: 15px;
+        font-weight: bold;
+        text-indent: 10px;
+      }
+      .flex-img {
+        display: flex;
+        margin: 30px;
+        background: url("../../../../assets/jiantou1.png");
+        background-repeat: no-repeat;
+        background-position: 30px 75%;
+        background-size: 97% 30%;
+        .flex-img-count {
+          margin-left: 20px;
+          width: 15%;
+          text-align: center;
+
+          .flex-text {
+            font-size: 16px;
+          }
+          .flex-time {
+            margin-top: 5px;
+            margin-bottom: 10%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/plugins/element-ui.js

@@ -59,14 +59,18 @@ import {
 	ColorPicker,
 	RadioButton,
 	Drawer,
+	Descriptions,
 	Badge,
 	TimePicker,
+	DescriptionsItem,
 	Alert,
 	InputNumber,
 	Rate,
 	Progress
 } from 'element-ui';
+Vue.use(DescriptionsItem);
 Vue.use(TimePicker);
+Vue.use(Descriptions);
 Vue.use(Badge);
 Vue.use(Drawer);
 Vue.use(RadioButton);

src/router/index.js

@@ -2060,6 +2060,33 @@ const routes = [{
             component: (resolve) => require( /* webpackChunkName: "system" */['../pages/main/incomeExcel/incomeExcelViewInfo'], resolve)
         },
         {
+            meta: { name: '需求申请单', keepAlive: false },
+            path: '/demandHome',
+            name: 'demandHome',
+            component: (resolve) => require( /* webpackChunkName: "system" */
+                ['../pages/main/leader/demand/demandHome.vue'], resolve)
+        }, {
+            meta: { name: '需求申请单s', keepAlive: false },
+            path: '/demandHomes',
+            name: 'demandHomes',
+            component: (resolve) => require( /* webpackChunkName: "system" */
+                ['../pages/main/leader/demand/demandHomes.vue'], resolve)
+        },
+        {
+            meta: { name: '报表', keepAlive: false },
+            path: '/reportForm',
+            name: 'reportForm',
+            component: (resolve) => require( /* webpackChunkName: "system" */
+                ['../pages/main/leader/demand/reportForm.vue'], resolve)
+        },
+        {
+            meta: { name: '支撑状态', keepAlive: false },
+            path: '/supportState',
+            name: 'supportState',
+            component: (resolve) => require( /* webpackChunkName: "system" */
+                ['../pages/main/leader/demand/supportState.vue'], resolve)
+        },
+        {
             meta: {
                 name: '在线文档',
                 keepAlive: false