no message

src/components/DrawFlow/index.js

@@ -0,0 +1,7 @@
+/* 仿钉钉流程图插件 */
+import DrawFlow from "./src/DrawFlow";
+/* istanbul ignore next */
+DrawFlow.install = function(Vue) {
+  Vue.component(DrawFlow.name, DrawFlow);
+};
+export default DrawFlow;

src/components/DrawFlow/src/DrawFlow.vue

@@ -0,0 +1,349 @@
+<!--
+* @author 肖阳
+* @time 2020-9-10
+* @dec 生成流程绘制 基本节点(审批 抄送)组装逻辑
+*  组装
+-->
+<script>
+import AddNodeBtn from "@/components/DrawFlow/src/components/AddNodeBtn";
+import RowFactory from "@/components/DrawFlow/src/components/DrawRow/FactoryRow";
+// import EventBus from "@/components/ApprovalProcess/ProcessDesign/components/EventBus/EventBus";
+
+import {
+  RowNode,
+  ConditionNode,
+  CopyNode
+} from "./components/NodeConfigFactory/NodeFactory";
+// import { deepClone } from "@/common/utils";
+import FlowFactory from "./components/factory";
+import { HashCode, transToTreeDat, getPidArr , deepClone } from "./utils";
+import FlowNode from "@/components/DrawFlow/src/components/DrawRow/FlowNode";
+export default {
+  name: "FactoryDrawFlow",
+  components: {
+    AddNodeBtn,
+    FlowNode
+  },
+  created() {
+    this.init();
+    // this.creatBusNodeChange();  // 可用事件派发
+  },
+  props: {
+    FlowConfig: {// 接受的数据
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      rectTypeDic: {
+        1: "审批节点",
+        2: "规则节点23",
+        3: "抄送人",
+        4: "开始节点"
+      },
+      isColList: ["3", "5"],
+      selfConfig: null,
+      currentNode: null
+    };
+  },
+  methods: {
+    // 节点数据变化事件
+    nodeChange(node) {
+      this.currentNode.title = node.title;
+      this.selfConfig.forEach(i => {
+        if (i.id === this.currentNode.id) {
+          i.data = node.data;
+          i.title = node.title;
+        }
+      });
+      this.$forceUpdate();
+    },
+    /**
+     * 添加条件框
+     */
+    addBranch(node) {
+      let newNode = new CopyNode(node[0]);
+      this.selfConfig = this.selfConfig.concat([newNode]);
+    },
+    creatBusNodeChange() {
+      // EventBus.$on("nodeChange", this.nodeChange);
+    },
+    /**
+     * 获取传参数据结构
+     */
+    getResData() {
+      let list = JSON.parse(JSON.stringify(this.selfConfig));
+      getPidArr(list);
+      return list;
+    },
+    /**
+     * 初始化 数据私有化
+     */
+    init() {
+      this.selfConfig = deepClone(this.FlowConfig);
+    },
+    /**
+     *  @param data  源数组一维数组
+     *  @requires  tree 二维数组
+     */
+    transformTree(data) {
+      return transToTreeDat(data);
+    },
+    clickSelectBox(nextNode) {
+      let { node, selfConfig } = this.getNodeFactory(nextNode);
+      this.selfConfig = selfConfig.concat(node);
+    },
+    /**
+     * 根据isRow去判断row或者rol
+     */
+    getNodeFactory(nextNode) {
+      if (!nextNode.isRow) {
+        let { node, selfConfig } = this.getColNode(nextNode);
+        return { node, selfConfig };
+      } else {
+        let { node, selfConfig } = this.getRowNode(nextNode);
+        return { node, selfConfig };
+      }
+    },
+    /**
+     * 获取row节点
+     */
+    getRowNode(nextNode) {
+      let node = [new RowNode(nextNode)];
+      let selfConfig = this.repickArr(node[0]);
+      this.clickNode(node[0]);
+      return { node, selfConfig };
+    },
+    /**
+     * 获取col节点
+     */
+    getColNode(nextNode) {
+      let groupId = HashCode();
+      let node = [
+        new ConditionNode({ groupId, ...nextNode }),
+        new ConditionNode({ groupId, ...nextNode })
+      ];
+      let repickConfig = {
+        groupId: node[0].groupPid,
+        id: node[0].id
+      };
+      let selfConfig = this.repickArr(repickConfig);
+      this.locationScroll();
+      return { node, selfConfig };
+    },
+    /**
+     * 定位滚动条
+     */
+    locationScroll() {
+      // window.location.hash = ".bottom-right-cover-line";
+      let el = document.getElementsByClassName("dingflow-design")[0];
+      setTimeout(() => {
+        el.scrollLeft = el.scrollWidth - el.clientWidth + 340;
+      }, 0);
+    },
+    /**
+     * 重定位数组
+     */
+    repickArr(repickConfig) {
+      let selfConfig = JSON.parse(JSON.stringify(this.selfConfig));
+      selfConfig.forEach(i => {
+        if (i.isRow) {
+          if (i.groupId === repickConfig.groupId) {
+            i.groupId = repickConfig.id;
+          }
+        } else {
+          if (i.groupPid === repickConfig.groupId) {
+            i.groupPid = repickConfig.id;
+          }
+        }
+      });
+      return selfConfig;
+    },
+    // 点击节点
+    clickNode(nodeConfig) {
+      this.currentNode = nodeConfig;
+      this.$emit("clickNode", nodeConfig);
+    },
+    //点击关闭节点
+    closeNode(node) {
+      let repickConfig = {};
+      if (node.isRow) {
+        repickConfig.groupId = node.groupId;
+        repickConfig.id = node.id;
+        let selfConfig = JSON.parse(JSON.stringify(this.selfConfig));
+        this.selfConfig = this.deleteNode(selfConfig, node);
+      } else {
+        repickConfig.groupId = node.groupPid;
+        repickConfig.id = node.groupId;
+        this.selfConfig = this.deleteColNode(node);
+      }
+      this.selfConfig = this.repickDeleteArr(repickConfig);
+    },
+    // 删除节点
+    deleteNode(selfConfig, node) {
+      selfConfig = selfConfig.map(i => i.id !== node.id && i).filter(Boolean);
+      return selfConfig;
+    },
+    //单独删除col下node
+    deleteColNode(node) {
+      let selfConfig = JSON.parse(JSON.stringify(this.selfConfig));
+      let nodeArr = selfConfig.filter(
+        i => i.groupId === node.groupId && !i.isRow
+      );
+      let deleteArr = [];
+      if (nodeArr.length > 2) {
+        //递归删除所有关联子节点
+        deleteArr = [node];
+        this.deleteLoop(selfConfig, node, deleteArr);
+      } else {
+        //删除整个group
+        let allCol = selfConfig
+          .map(i => i.groupId === node.groupId && !i.isRow && i)
+          .filter(Boolean);
+        deleteArr = allCol;
+        allCol.forEach(i => {
+          this.deleteLoop(selfConfig, i, deleteArr);
+        });
+      }
+      deleteArr.forEach(i => {
+        selfConfig = this.deleteNode(selfConfig, i);
+      });
+      return selfConfig;
+    },
+    // 循环遍历删除组下关联节点
+    deleteLoop(selfConfig, node, deleteArr) {
+      let currentDeleteArr = selfConfig.filter(i => {
+        if (i.isRow) {
+          return i.groupId === node.id;
+        } else {
+          return i.groupPid === node.id;
+        }
+      });
+      if (currentDeleteArr.length) {
+        currentDeleteArr.forEach(i => {
+          deleteArr.push(i);
+          this.deleteLoop(selfConfig, i, deleteArr);
+        });
+      } else {
+        return;
+      }
+    },
+    //判断是否是row
+    judgeNodeIsRow(node) {
+      return node.isRow;
+    },
+    //删除后重组数组
+    repickDeleteArr(repickConfig) {
+      let selfConfig = JSON.parse(JSON.stringify(this.selfConfig));
+      selfConfig.forEach(i => {
+        if (i.isRow && i.groupId === repickConfig.id) {
+          i.groupId = repickConfig.groupId;
+        } else if (i.groupPid === repickConfig.id) {
+          i.groupPid = repickConfig.groupId;
+        }
+      });
+      return selfConfig;
+    },
+    //绘制body
+    drawBody(h, node) {
+      if (node.childNode) {
+        return FlowFactory.getFactory.bind(this, h, node.childNode)();
+      } else {
+        return <div></div>;
+      }
+    },
+    
+  },
+  destroyed() {
+    // EventBus.$off("nodeChange");
+  },
+  render(h) {
+    // this.init();
+    let FlowConfig = this.selfConfig;
+    FlowConfig = this.transformTree(FlowConfig);
+    const root = JSON.parse(JSON.stringify(this.selfConfig[0]));
+    return (
+      <div class="design-engine">
+        <div class="dingflow-design">
+          <div class="ie-polyfill-container">
+            <div class="box-scale" id="box-scale">
+              {RowFactory.nodeWrapRender.bind(this, h, root)()}
+              {this.drawBody(h, FlowConfig[0])}
+              <div class="end-node">
+                <div class="end-node-circle"></div>
+                <div class="end-node-text">流程结束</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.design-engine {
+  position: relative;
+  height: 100%;
+  .dingflow-design {
+    width: 100%;
+    // background-color: #f5f5f7;
+    overflow: auto;
+    height: 100%;
+    position: relative;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    /deep/ .ant-popover-arrow {
+      display: none !important;
+    }
+    .ie-polyfill-container {
+      display: -ms-grid;
+      -ms-grid-columns: min-content;
+      .box-scale {
+        transform: scale(1);
+        display: inline-block;
+        position: relative;
+        width: 100%;
+        padding: 54.5px 0;
+        -webkit-box-align: start;
+        -ms-flex-align: start;
+        align-items: flex-start;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+        min-width: -webkit-min-content;
+        min-width: -moz-min-content;
+        min-width: min-content;
+        // background-color: #f5f5f7;
+        -webkit-transform-origin: 0 0 0;
+        transform-origin: 50% 0px 0px;
+        .end-node {
+          border-radius: 50%;
+          font-size: 14px;
+          color: rgba(25, 31, 37, 0.4);
+          text-align: left;
+          .end-node-circle {
+            width: 10px;
+            height: 10px;
+            margin: auto;
+            border-radius: 50%;
+            background: #dbdcdc;
+          }
+          .end-node-text {
+            margin-top: 5px;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/DrawFlow/src/components/AddNodeBtn.vue

@@ -0,0 +1,127 @@
+<!--
+* @author 肖阳
+* @time 2020-9-10
+* @dec 多列生成流程中 添加节点的图标
+-->
+<script>
+import AddBox from "@/components/DrawFlow/src/components/DrawAddSelectBox/DrawAddBox.vue";
+export default {
+  name: "AddNodeBtn",
+  components: {
+    AddBox
+  },
+  props: {
+    belongToNode: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      popoVisible: false
+    };
+  },
+  methods: {
+    getPopupContainer() {
+      let el = document.getElementsByClassName("dingflow-design")[0];
+      return el;
+    },
+    clickSelectBox(nextNode) {
+      this.popoVisible = false;
+      this.$emit("clickSelectBox", nextNode);
+    }
+  },
+  mounted() {},
+  render() {
+    const node = this.belongToNode;
+    return (
+      <div class="add-node-btn-box">
+        <div class="add-node-btn">
+          <a-popover
+            auto-adjust-overflow
+            arrow-point-at-center
+            placement="rightTop"
+            v-model={this.popoVisible}
+            trigger="click"
+          >
+            <template slot="content">
+              <add-box
+                {...{
+                  props: { nodeConfig: node },
+                  on: {
+                    clickSelectBox: this.clickSelectBox
+                  }
+                }}
+              ></add-box>
+            </template>
+            <button class="btn" type="button">
+              <a-icon type="plus" class="iconfont" ></a-icon>
+            </button>
+          </a-popover>
+        </div>
+      </div>
+    );
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.add-node-btn-box {
+  width: 240px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    margin: auto;
+    width: 2px;
+    height: 100%;
+    background-color: #cacaca;
+  }
+  .add-node-btn {
+    user-select: none;
+    width: 240px;
+    padding: 28px 0px 38px;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    flex-shrink: 0;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    .btn {
+      outline: none;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+      width: 30px;
+      height: 30px;
+      background: #3296fa;
+      border-radius: 50%;
+      position: relative;
+      border: none;
+      line-height: 30px;
+      -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      &:hover {
+        transform: scale(1.3);
+        box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
+      }
+      .iconfont {
+        color: #fff;
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style>

src/components/DrawFlow/src/components/DrawAddSelectBox/DrawAddBox.vue

@@ -0,0 +1,96 @@
+<!--
+* @author 肖阳
+* @time 2020-9-10
+* @dec 添加新增节点按钮
+-->
+<script>
+/* eslint-disable no-unused-vars */
+import "./addBox.scss";
+import { NextNode } from "@/components/DrawFlow/src/components/DrawAddSelectBox/NextNode";
+import { HashCode } from "../../utils";
+export default {
+  name: "AddBox",
+  props: {
+    nodeConfig: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      boxArr: [
+        {
+          type: "2",
+          value: "审批人",
+          isRow: true,
+          calssName: "approver",
+          icon: "user"
+        },
+        {
+          type: "4",
+          value: "抄送人",
+          isRow: true,
+          calssName: "notifier",
+          icon: "highlight"
+        },
+        {
+          type: "3",
+          value: "条件分支",
+          isRow: false,
+          calssName: "route",
+          icon: "sliders"
+        },
+        {
+          type: "6",
+          value: "流转至",
+          isRow: false,
+          calssName: "route",
+          icon: "sliders"
+        },
+      ],
+    };
+  },
+  methods: {
+    clickSelectBox(item) {
+      this.getNexttBox(item);
+    },
+    getNexttBox(item) {
+      const nodeConfig = this.nodeConfig;
+      if (item.value === "流转至") {
+        this.nodeConfig.isFlowTo = true;
+      }
+      let { id, prevId, type, isRow } = Object.assign(nodeConfig, item);
+      let nextNode = new NextNode({ id, prevId, type, isRow });
+      this.$emit("clickSelectBox", nextNode);
+    },
+    renderAddSBox() {
+      return (
+        <div class="add-node-popover">
+          <div class="add-node-popover-body">
+            {this.boxArr.map((item) => {
+              return (
+                <a
+                  onClick={() => {
+                    this.clickSelectBox(item);
+                  }}
+                  class={["add-node-popover-item", item.calssName]}
+                >
+                  <div class="item-wrapper">
+                    <a-icon class="iconfont" type={item.icon} />
+                  </div>
+                  <span>{item.value}</span>
+                </a>
+              );
+            })}
+          </div>
+        </div>
+      );
+    },
+  },
+  render() {
+    return this.renderAddSBox();
+  },
+};
+</script>

src/components/DrawFlow/src/components/DrawAddSelectBox/NextNode.js

@@ -0,0 +1,15 @@
+/**
+ * @author 肖阳
+ * @time 2020-9-10
+ * @dec 下一节点属性
+ */
+
+//  构造函数，创建一个对象
+export class NextNode {
+  constructor({ id, prevId, type, isRow }) {
+    this.id = id;
+    this.prevId = prevId;
+    this.type = type;
+    this.isRow = isRow;
+  }
+}

src/components/DrawFlow/src/components/DrawAddSelectBox/addBox.scss

@@ -0,0 +1,53 @@
+.add-node-popover-body {
+    max-width: 336px;
+    .add-node-popover-item {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+        color: #191F25 !important;
+        margin-right: 8px;
+        margin-bottom: 8px;
+        width: 160px;
+        background: rgba(17, 31, 44, 0.02);
+        padding: 8px;
+        border: 1px solid #FFFFFF;
+        border-radius: 4px;
+        .iconfont {
+            font-size: 20px;
+            line-height: 40px;
+        }
+        .item-wrapper {
+            user-select: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            background: #FFFFFF;
+            border: 1px solid #eeeeee;
+            border-radius: 16px;
+            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+            margin-right: 12px;
+        }
+        &:hover{
+                background: #FFFFFF;
+                border: 1px solid #ecedef;
+                box-shadow: 0 2px 8px 0 rgba(17, 31, 44, 0.08);
+        }
+    }
+    .add-node-popover-item.approver {
+        .item-wrapper {
+            color: #FF943E;
+        }
+    }
+    .add-node-popover-item.notifier {
+        .item-wrapper {
+            color: #3296FA;
+        }
+    }
+    .add-node-popover-item.route {
+        .item-wrapper {
+            color: #15BC83;
+        }
+    }
+}

src/components/DrawFlow/src/components/DrawCol/FactoryCol.js

@@ -0,0 +1,126 @@
+/**
+ * @author 肖阳
+ * @time 2020-9-10
+ * @dec col节点工厂
+ */
+import drawFlow from "../factory";
+
+import "./layout.scss";
+function branchBoxRender(h, nodeArr) {
+  // let title = [];
+  // if (nodeArr.isFlowTo) {
+  //   title = "添加流转";
+  // } else {
+  //   title = "添加条件";
+  // }
+  const colNodeArr = nodeArr.conditionNodes;
+  return (
+    <div class="branch-wrap">
+      <div class="branch-box-wrap">
+        <div class="branch-box">
+          {/* <button onClick={() => this.addBranch(colNodeArr)} class="add-branch">
+            {title}
+          </button> */}
+          {colBoxRender.bind(this, h, colNodeArr)()}
+        </div>
+        <add-node-btn
+          {...{
+            props: { belongToNode: nodeArr },
+            on: { clickSelectBox: this.clickSelectBox }
+          }}
+        ></add-node-btn>
+      </div>
+    </div>
+  );
+}
+/**
+ * col-box
+ */
+function colBoxRender(h, colNodeArr) {
+  return colNodeArr.map((item, idx) => {
+    switch (idx) {
+      case 0:
+        return (
+          <div class="col-box">
+            <div class="top-left-cover-line"></div>
+            <div class="bottom-left-cover-line"></div>
+            {conditionNodeRender.bind(this, h, item)()}
+          </div>
+        );
+      case colNodeArr.length - 1:
+        return (
+          <div class="col-box">
+            {conditionNodeRender.bind(this, h, item)()}
+            <div class="top-right-cover-line"></div>
+            <div class="bottom-right-cover-line"></div>
+          </div>
+        );
+      default:
+        return (
+          <div class="col-box">{conditionNodeRender.bind(this, h, item)()}</div>
+        );
+    }
+  });
+}
+function closeNode(event, node) {
+  event.stopPropagation();
+  this.closeNode(node);
+}
+function conditionNodeRender(h, node) {
+  const judegeNode = { ...node };
+  let tep = [];
+  tep.push(
+    <div class="condition-node">
+      <div class="condition-node-box">
+        <div
+          class="auto-judge node_e27d_5719"
+          onClick={() => {
+            this.clickNode(node);
+          }}
+        >
+          <div class="sort-left"></div>
+          <div class="title-wrapper">
+            <span class="editable-title">{judegeNode.title}</span>
+            {/* <i
+              aria-label="icon: close"
+              tabindex="-1"
+              class="anticon anticon-close close"
+            >
+              <a-icon
+                type="close"
+                onClick={event => {
+                  closeNode.bind(this, event, node)();
+                }}
+              />
+            </i> */}
+            {/* <span class="priority-title">
+              {judegeNode.data.priority || "123"}
+            </span> */}
+          </div>
+          {/* <div class="content">{judegeNode.content}</div> */}
+          <div class="content flex-between">
+            <div class="text">{judegeNode.content}</div>
+            <i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+        <add-node-btn
+          {...{
+            props: { belongToNode: judegeNode },
+            on: { clickSelectBox: this.clickSelectBox }
+          }}
+        ></add-node-btn>
+      </div>
+    </div>
+  );
+
+  if (node.childNode) {
+    let el = drawFlow.getFactory.bind(this, h, node.childNode)();
+    tep.push(el);
+  }
+  // let el = drawFlow.getFactory.bind(this, h, node)();
+  // tep.push(el);
+  return tep;
+}
+export default {
+  branchBoxRender
+};

src/components/DrawFlow/src/components/DrawCol/layout.scss

@@ -0,0 +1,264 @@
+
+.branch-wrap {
+    display: inline-flex;
+    width: 100%;
+    .branch-box-wrap {
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      min-height: 270px;
+      width: 100%;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
+      .branch-box {
+        display: flex;
+        overflow: visible;
+        min-height: 180px;
+        height: auto;
+        border-bottom: 2px solid #cccccc;
+        border-top: 2px solid #cccccc;
+        position: relative;
+        // margin-top: 15px;
+        .add-branch {
+          border: none;
+          outline: none;
+          user-select: none;
+          justify-content: center;
+          font-size: 12px;
+          padding: 0 10px;
+          height: 30px;
+          line-height: 30px;
+          border-radius: 15px;
+          color: #0089ff;
+          background: #fff;
+          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+          position: absolute;
+          top: -16px;
+          left: 50%;
+          transform: translateX(-50%);
+          transform-origin: center center;
+          cursor: pointer;
+          z-index: 1;
+          display: inline-flex;
+          align-items: center;
+          -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        }
+        .col-box {
+          // background: #f0f2f5;
+          display: inline-flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+          flex-direction: column;
+          -webkit-box-align: center;
+          align-items: center;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 0;
+            margin: auto;
+            width: 2px;
+            height: 100%;
+            background-color: #cacaca;
+          }
+  
+          .top-left-cover-line {
+            position: absolute;
+            height: 3px;
+            width: 50%;
+            background-color: #f5f5f7;
+            top: -2px;
+            left: -1px;
+          }
+          .bottom-left-cover-line {
+            position: absolute;
+            height: 3px;
+            width: 50%;
+            background-color: #f5f5f7;
+            bottom: -2px;
+            left: -1px;
+          }
+          .top-right-cover-line {
+            position: absolute;
+            height: 3px;
+            width: 50%;
+            background-color: #f5f5f7;
+            top: -2px;
+            right: -1px;
+          }
+          .bottom-right-cover-line {
+            position: absolute;
+            height: 3px;
+            width: 50%;
+            background-color: #f5f5f7;
+            bottom: -2px;
+            right: -1px;
+          }
+        }
+      }
+    }
+  }
+  
+.dingflow-design .auto-judge .sort-left,
+.dingflow-design .auto-judge .sort-right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: none;
+  z-index: 1;
+}
+.condition-node {
+  min-height: 220px;
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  .condition-node-box {
+    padding-top: 30px;
+    padding-right: 50px;
+    padding-left: 50px;
+    -webkit-box-pack: center;
+    justify-content: center;
+    display: inline-flex;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    position: relative;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      width: 2px;
+      height: 100%;
+      background-color: #cacaca;
+    }
+    .auto-judge {
+      position: relative;
+      width: 220px;
+      min-height: 72px;
+      background: #ffffff;
+      // padding: 14px 19px;
+      cursor: pointer;
+      .close {
+        width: 14px;
+        height: 14px;
+        display: none;
+        position: absolute;
+        right: -2px;
+        top: -2px;
+        font-size: 14px;
+        text-align: center;
+        line-height: 20px;
+        z-index: 2;
+        color: rgba(25, 31, 37, 0.56);
+      }
+    .priority-title {
+      display: block;
+      margin-right: 10px;
+      float: right;
+      color: rgba(25, 31, 37, 0.56);
+    }
+      &:hover {
+        .close{
+          display: block;
+        }
+        .priority-title{
+          display: none;
+        }
+        &::after {
+          border: 1px solid #3296fa;
+          box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+        }
+      }
+      &::after{
+          pointer-events: none;
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 2;
+          border-radius: 4px;
+          border: 1px solid transparent;
+          transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+      }
+      .title-wrapper {
+        position: relative;
+        background: #ff943e;
+        padding-left: 16px;
+        padding-right: 30px;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        color: #ffffff;
+        text-align: left;
+        border-radius: 4px 4px 0px 0px;
+        text-align: left;
+        .editable-title {
+          line-height: 15px;
+          overflow: hidden; 
+          border-bottom: dashed 1px transparent;
+          display: inline-block;
+          max-width: 120px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          // &:hover {
+          //   border-bottom: dashed 1px #ffffff;
+          // }
+          &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 40px;
+          }
+        }
+       
+      }
+      .content {
+        // padding: 16px;
+        height: 50px;
+        line-height: 50px;
+        padding: 0 30px 0 16px;
+        font-size: 14px;
+        color: #191f25;
+        text-align: left;
+        // margin-top: 6px;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+        // // display: -webkit-box;
+        // -webkit-line-clamp: 3;
+        // -webkit-box-orient: vertical;
+      }
+      .sort-right {
+        right: 0;
+        border-left: 1px solid #f6f6f6;
+      }
+    }
+  }
+}

src/components/DrawFlow/src/components/DrawRow/FactoryRow.js

@@ -0,0 +1,46 @@
+/**
+ * @author 肖阳
+ * @time 2020-9-10
+ * @dec row节点包裹框
+ */
+import "./row.scss";
+import drawFlow from "../factory";
+export default {
+  /**
+   *
+   * @param {creatElement} h
+   * @param {Object} nodeConfig
+   */
+  nodeWrapRender(h, nodeConfig) {
+    let tep = [];
+    tep.push(
+      <div class="node-wrap">
+        <flow-node
+          {...{
+            props: { nodeConfig },
+            on: {
+              clickNode: this.clickNode,
+              closeNode: this.closeNode
+            }
+          }}
+        ></flow-node>
+        <add-node-btn
+          {...{
+            props: { belongToNode: nodeConfig },
+            on: {
+              clickSelectBox: this.clickSelectBox
+            }
+          }}
+        ></add-node-btn>
+      </div>
+    );
+    if (nodeConfig.isRoot) {
+      return tep;
+    }
+    if (nodeConfig.childNode) {
+      let el = drawFlow.getFactory.bind(this, h, nodeConfig.childNode)();
+      tep.push(el);
+    }
+    return tep;
+  }
+};

src/components/DrawFlow/src/components/DrawRow/FlowNode.vue

@@ -0,0 +1,198 @@
+<!--
+* @author 肖阳
+* @time 2020-9-10
+* @dec 单列生成流程节点的基本节点(开始，抄送，审批)
+-->
+<script>
+export default {
+  name: "FlowNode",
+  props: {
+    nodeConfig: {
+      type: Object,
+      default() {
+        return {
+          pid: "root",
+          id: "1",
+          type: "root", // 1:发起人 2：审批人 3 抄送人 4条件框
+          title: "所有人12",
+          content: "内容2",
+          isRow: true,
+          data: {}
+        };
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    clickNode(nodeConfig) {
+      this.$emit("clickNode", nodeConfig);
+    },
+    closeNode(e, nodeConfig) {
+      e.stopPropagation();
+      this.$emit("closeNode", nodeConfig);
+    }
+  },
+
+  render() {
+    const { title, content, type } = this.nodeConfig;
+    // ---------span 下面, x号点击取消节点
+      // <i
+      //    aria-label="icon: close"
+      //    tabindex="-1"
+      //    class="anticon anticon-close close"
+      //  >
+      //    <a-icon
+      //      type="close"
+      //      onClick={event => {
+      //        this.closeNode(event, this.nodeConfig);
+      //      }}
+      //    />
+      //  </i>
+
+    return (
+      <div
+        onClick={() => {
+          this.clickNode(this.nodeConfig);
+        }}
+        class="node-wrap-box node_sid-startevent start-node"
+      >
+        <div>
+          <div class={[type !== "1" ? "arrows" : "noArrows"]}>
+            <div class={[`node-type-${type}`, "title"]}>
+              <span class="edit-title">{title}</span>
+            </div>
+          </div>
+          <div class="content flex-between">
+            <div class="text">{content}</div>
+            <i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.arrows {
+  &::before {
+    content: "";
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    width: 0;
+    height: 8px;
+    border-style: solid;
+    border-width: 8px 6px 4px;
+    border-color: #cacaca transparent transparent;
+    background: #f5f5f7;
+  }
+}
+.node-wrap-box {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  width: 220px;
+  min-height: 72px;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background: #ffffff;
+  border-radius: 4px;
+  cursor: pointer;
+  .close {
+    display: none;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+    color: #fff;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 20px;
+  }
+  &:hover {
+    .close {
+      display: block;
+    }
+    &::after {
+      border: 1px solid #3296fa;
+      box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+    }
+  }
+  &::after {
+    pointer-events: none;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+  }
+  //审批
+  .node-type-1 {
+    background: rgb(87, 106, 149);
+  }
+  .node-type-2 {
+    background: rgb(255, 148, 62);
+  }
+  .node-type-4 {
+    background: rgb(50, 150, 250);
+  }
+  .title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-left: 16px;
+    padding-right: 30px;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: left;
+    border-radius: 4px 4px 0px 0px;
+    .edit-title {
+      line-height: 24px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      border-bottom: dashed 1px transparent;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 40px;
+      }
+    }
+  }
+  .content {
+    position: relative;
+    font-size: 14px;
+    padding: 16px;
+    padding-right: 30px;
+    .text {
+      display: block;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

src/components/DrawFlow/src/components/DrawRow/row.scss

@@ -0,0 +1,19 @@
+.node-wrap,.flow-wrap {
+    display: inline-flex;
+    flex-direction: column;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    width: 100%;
+    padding: 0 50px;
+    position: relative;
+  }
+
+  

src/components/DrawFlow/src/components/NodeConfigFactory/NodeFactory.js

@@ -0,0 +1,49 @@
+/* eslint-disable no-unused-vars */
+/**
+ * @author 肖阳
+ * @time 2020-9-10
+ * @dec 各种节点类
+ */
+import { HashCode } from "../../utils";
+export class Node {
+  nodeId;
+  type;
+  childNode;
+  title = "title";
+  content = "content";
+  conditionNodes;
+  constructor({ id, type, isRow }) {
+    this.groupId = id;
+    this.id = HashCode();
+    this.type = type;
+    this.content += this.id;
+    this.isRow = isRow;
+  }
+}
+export class ConditionNode {
+  title = "title";
+  data = {};
+  constructor({ groupId, type, id, isRow }) {
+    this.id = HashCode();
+    this.groupId = groupId;
+    this.type = type;
+    this.content += this.id;
+    this.groupPid = id;
+    this.isRow = isRow;
+  }
+}
+export class RowNode extends Node {
+  data = {};
+  constructor({ id, type, isRow }) {
+    super({ id, type, isRow });
+  }
+}
+export class CopyNode {
+  title = "标题";
+  id = HashCode();
+  content = "内容";
+  data = {};
+  constructor({ id, childNode, ...node }) {
+    return Object.assign(node, this);
+  }
+}

src/components/DrawFlow/src/components/factory.js

@@ -0,0 +1,19 @@
+import RowFactory from "@/components/DrawFlow/src/components/DrawRow/FactoryRow";
+import ColFactory from "./DrawCol/FactoryCol";
+function getFactory(h, item) {
+  let tep = [];
+  if (item.type === "route") {
+    //多节点
+    tep.push(ColFactory.branchBoxRender.bind(this, h, item)());
+    if (item.childNode) {
+      tep.push(getFactory.bind(this, h, item.childNode)());
+    }
+  }
+  if (item.type !== "route") {
+    tep.push(RowFactory.nodeWrapRender.bind(this, h, item)());
+  }
+  return tep;
+}
+export default {
+  getFactory
+};

src/components/DrawFlow/src/mixin/factory.vue

@@ -0,0 +1,30 @@
+<!--
+* @author 肖阳
+* @time 2020-9-10
+* @dec  预留接口 主要用在添加新功能 应用场景 多流程
+-->
+<script>
+import { transToTreeDat } from "../utils";
+
+export default {
+  name: "FlowFactoryMixin",
+  props: {},
+  methods: {
+    /**
+     *  @param data  源数组一维数组
+     *  @requires  tree 二维数组
+     */
+    transformTree(data) {
+      return transToTreeDat(data);
+    }
+  },
+  watch: {}
+};
+</script>
+
+<style>
+.branch-wrap {
+  display: inline-flex;
+  width: 100%;
+}
+</style>

src/components/DrawFlow/src/utils/index.js

@@ -0,0 +1,230 @@
+/**
+ * @author 肖阳
+ * @time 2020-9-10
+ * @dec 公共方法
+ */
+// https://github.com/reduxjs/redux/blob/master/src/compose.js
+import moment from "moment";
+
+export function compose(...funcs) {
+  if (funcs.length === 0) {
+    return arg => arg;
+  }
+  if (funcs.length === 1) {
+    return funcs[0];
+  }
+  return funcs.reduce((a, b) => (...args) => a(b(...args)));
+}
+
+/**
+ * 转化为el-tree树形结构数据
+ */
+export function transToTreeDat(arr) {
+  let list = JSON.parse(JSON.stringify(arr));
+  let colNodes = list.filter(i => !i.isRow);
+  let colNodesGroup = getColNode(colNodes);
+  let allNodes = list.concat(colNodesGroup);
+  let tree = transTree(allNodes);
+  return tree;
+}
+export function getColNode(colNodeArrs) {
+  let colNodes = colNodeArrs;
+  let map = {};
+  colNodes.forEach(i => {
+    if (!map[i.groupId]) {
+      map[i.groupId] = [];
+    }
+    map[i.groupId].push(i);
+  });
+  let colNodesArr = [];
+  for (const groupId in map) {
+    let obj = {
+      id: groupId,
+      groupId: map[groupId][0].groupPid,
+      type: "route",
+      isRow: true,
+      isFlowTo: map[groupId][0].type === "6",
+      conditionNodes: map[groupId]
+    };
+    colNodesArr.push(obj);
+  }
+
+  return colNodesArr;
+}
+/**
+ *
+ * @param {allNodes} arr 所有的整行元素
+ * @param {*} list  所有的节点元素
+ */
+export function getPidArr(list) {
+  let colNodes = list.filter(i => !i.isRow);
+  let rowNodes = list.filter(i => i.isRow);
+  let colNodesGroup = getColNode(colNodes, list);
+  let arr = colNodesGroup.concat(rowNodes);
+  let map = {}; //所有整行元素的字典对象
+  for (let item of arr) {
+    map[item.id] = item;
+  }
+  //获取节点所在行
+  for (let lis of list) {
+    lis.pids = [];
+    if (!lis.isRow) {
+      let p = map[lis.groupPid];
+      if (lis.groupPid === "root") {
+        lis.pids.push(p.id);
+        continue;
+      }
+      //当上一层为rowNode
+      getColPid(p, lis);
+    } else {
+      let p = map[lis.groupId];
+      getRowPid(p, lis);
+    }
+  }
+}
+//获取row的父节点id
+function getRowPid(p, lis) {
+  if (!p) {
+    lis.pids.push(lis.groupId);
+  } else {
+    if (p.conditionNodes) {
+      p.conditionNodes.forEach(i => {
+        loopGetPid(i, lis);
+      });
+    } else {
+      lis.pids.push(p.id);
+    }
+  }
+}
+/**
+ * 获取col节点的父节点
+ */
+function getColPid(p, lis) {
+  if (!p) {
+    //当上一层为条件框元素
+    lis.pids.push(lis.groupPid);
+  } else {
+    //当上一层为整行元素
+    loopGetPidCol(p, lis);
+  }
+}
+/**
+ *
+ * @param {*} parentRow
+ * @param {*} lis
+ * 单独处理一下col节点
+ */
+export function loopGetPidCol(parentRow, lis) {
+  if (parentRow.conditionNodes) {
+    parentRow.conditionNodes.forEach(i => {
+      loopGetPid(i, lis);
+    });
+  } else {
+    lis.pids.push(parentRow.id);
+  }
+}
+/**
+ *  轮询节点获取pid
+ * @param {*} node
+ * @param {*} lis
+ */
+export function loopGetPid(node, lis) {
+  if (node.childNode) {
+    loopGetPid(node.childNode, lis);
+  } else if (node.conditionNodes) {
+    node.conditionNodes.forEach(i => {
+      loopGetPid(i, lis);
+    });
+  } else {
+    lis.pids.push(node.id);
+  }
+}
+/**
+ * 转化为el-tree树形结构数据
+ */
+export function transTree(arr) {
+  let list = arr;
+  if (!list || !list.length) return [];
+  let map = {};
+  for (let item of list) {
+    map[item.id] = item;
+  }
+  let nodes = [];
+  for (let lis of list) {
+    if (!lis.isRow) {
+      continue;
+    }
+    let p = map[lis.groupId];
+    if (!p) {
+      nodes.push(lis);
+      continue;
+    }
+    p.isParent = true;
+    p.childNode || (p.childNode = {});
+    p.childNode = lis;
+    if (
+      p.childNode.conditionNodes &&
+      p.childNode.conditionNodes[0].type === "6"
+    ) {
+      p.isFlowTo = true;
+    }
+  }
+  return nodes;
+}
+/**
+ * Hash 哈希值
+ */
+export function HashCode(hashLength) {
+  // 默认长度 24
+  return (
+    "a" +
+    Array.from(Array(Number(hashLength) || 15), () =>
+      Math.floor(Math.random() * 36).toString(36)
+    ).join("")
+  );
+}
+/**
+ * 树结构转化为扁平化结构
+ */
+export function deepTraversal(tree) {
+  let list = [];
+  tree.forEach(item => {
+    const loop = data => {
+      list.push(data);
+      let children = data.children;
+      children &&
+        children.length &&
+        children.forEach(child => {
+          loop(child);
+        });
+    };
+    loop(item);
+  });
+  return list;
+}
+  /**
+ * 数据深拷
+ * @param {Array|Object} 要拷贝的对象
+ * @return {Array|Object} 返回拷贝的新对象
+ */
+export function deepClone(source) {
+  if (!source && typeof source !== "object") {
+    throw new Error("error arguments", "shallowClone");
+  }
+  const targetObj = source.constructor === Array ? [] : {};
+  for (const keys in source) {
+    if (Object.prototype.hasOwnProperty.call(source, keys)) {
+      if (
+        source[keys] &&
+        typeof source[keys] === "object" &&
+        !moment.isMoment(source[keys])
+      ) {
+        targetObj[keys] = source[keys].constructor === Array ? [] : {};
+        targetObj[keys] = deepClone(source[keys]);
+      } else {
+        targetObj[keys] = source[keys];
+      }
+    }
+  }
+  return targetObj;
+}

src/components/common/BindPhone.vue

@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <!-- 绑定手机号card -->
+        <div class="Login_view bindphone_view">
+            <div class="flex-between login_title">
+                <span>绑定手机号码</span>
+                <i class="el-icon-close" @click="toWechat"></i>
+            </div>
+
+            <el-form :model="param" :rules="rules" ref="param" label-width="0px" class="login_form">
+                <el-form-item prop="username">
+                    <p>手机号</p>
+                    <el-input v-model="param.username" placeholder="请输入手机号"></el-input>
+                </el-form-item>
+
+                <el-form-item prop="password" class="item_password">
+                    <p>验证码</p>
+                    <div class="flex-between">
+                        <el-input type="password" placeholder="请输入验证码" v-model="param.password" @keyup.enter.native="nextStep()"></el-input>
+                        <el-button type="primary" round @click="getCode" class="code-btn">获取验证码</el-button>
+                    </div>
+                </el-form-item> 
+
+                <div class="login-btn flex-column-content">
+                    <el-button type="primary" round>绑定</el-button>
+                    <el-button type="primary" plain round class="temporary" @click="toWechat">暂不绑定</el-button>
+                </div>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            param: {
+                username: '',
+                password: ''
+            },
+            rules: {
+                username: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+                password: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
+            },
+            checked: false
+        };
+    },
+    methods: {
+        getCode(){},
+        toWechat(){
+            this.$emit("toWechat", 1)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+//提取Steps共同样式
+@mixin Steps_node {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%; 
+}
+.bindphone_view{
+    .login_title{
+        .Steps_view{
+            margin-left: 146px;
+            .Steps1{
+                height: 1px;
+                width: 28px;
+                background-color: #00B9FF;
+            }
+            .Steps1_node{
+                @include Steps_node;
+                background-color: #00B9FF;
+            }
+            .Steps2{
+                height: 1px;
+                width: 150px;
+                background-color: #ccc;
+            }
+            .Steps2_node{
+                @include Steps_node;
+                background-color: #ccc;
+            }
+        }
+        i{
+            margin-right: 50px;
+            color: #666;
+            font-size: 20px;
+        }
+    }
+    .code-btn{
+        margin-left: 20px;
+    }
+    .temporary{
+        margin-top: 20px;
+    }
+}
+</style>
+
+

src/components/common/Foot.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="footer_view flex-column-content">
+        <el-row justify="center" type="flex" :gutter="100" class="wd80 contact">
+            <el-col :span="8"><span>© 2021 大庆市工商业融资担保有限公司 版权所有</span></el-col>
+            <el-col :span="8"><span>联系地址：黑龙江省大庆市</span></el-col>
+            <el-col :span="8"><span>联系邮箱：dqgsyrzdb@163.com</span></el-col>
+        </el-row>
+        <el-row :gutter="100" type="flex" class="wd80 contact" justify="center">
+            <el-col :span="8"><span style="cursor:pointer" @click="open1">官方网站：http://www.dqdb.net</span></el-col>
+            <el-col :span="8"><span style="cursor:pointer" @click="open">许可证号：黑ICP备11006413号</span></el-col>
+            <el-col :span="8"><span>技术支持：深圳市斐凡科技有限公司</span></el-col>
+        </el-row>
+        <!-- <el-row :gutter="100" type="flex" class="wd80 contact" >
+            <el-col :span="8"><span>工信部链接：https://beian.miit.gov.cn</span></el-col>
+        </el-row> -->
+        <!-- <p class="wd60 record flex-between">
+            <span>联系邮箱：dqgsyrzdb@163.com</span>
+            <span>公司名称：大庆市工商业融资担保有限公司</span>
+            <span>许可证号：黑ICP备11006413号</span>
+        </p> -->
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+
+        }
+    },
+    methods:{
+        open(){
+            window.open('https://beian.miit.gov.cn')
+        },
+        open1(){
+            window.open('http://www.dqdb.net')
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.footer_view{
+    background-color: #333;
+    padding: 30px 0 46px 0;
+    color: #999;
+    .solve{
+        color: #fff;
+        width: 568px;
+    }
+    .contact{
+        margin-top: 30px;
+    }
+}
+</style>
+

src/components/common/Header.vue

@@ -0,0 +1,124 @@
+// 这个应该是废弃掉的
+<template>
+
+    <div class="header flex-between">
+        <!-- <div v-if="this.$route.path!='/dashboard'&&this.$route.path!='/teacherhome'&&this.$route.path!='/student'"
+         class="goBack" @click="back"><i class="el-icon-arrow-left"></i>返回</div> -->
+        <div class="logo">
+            <img src="../../assets/img/logo.png">
+        </div>
+        <div class="header-right">
+            <div class="header-user-con">
+                <!-- 用户头像 -->
+                <span>应用市场</span>
+                <el-divider class="ml20" direction="vertical"></el-divider>
+                <div class="ml20">
+                    <el-avatar :size="40" :src="this.$store.state.userPhoto"></el-avatar>
+                </div>
+                <span class="user-avator">{{username}}</span>
+                <el-divider class="ml20" direction="vertical"></el-divider>
+                <el-button type="text" class="ml20" @click="loginout">退出</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import bus from '../common/bus';
+export default {
+    data() {
+        return {
+            // name: 'huoran',
+            username: this.$store.state.name,
+            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+        };
+    },
+    mounted(){
+    },
+    // computed: {
+    //     username() {
+    //         let username = sessionStorage.getItem('ms_username');
+    //         return username ? username : this.name;
+    //     }
+    // },
+    methods: {
+        loginout() {
+            sessionStorage.removeItem('ms_username');
+            this.$router.push('/login');
+        },
+        toPersonalCenter(){
+          this.$router.push('/personalcenter')
+        },
+        back(){
+            if(this.$route.path == '/addassessment'){
+                this.$router.push({ path: '/teacherhome', query: { active: true }})
+            }else{
+                this.$router.go(-1)
+            }
+        }
+    },
+};
+</script>
+<style scoped>
+.goBack{
+    cursor: pointer;
+    line-height: 60px;
+    height: 60px;
+    font-size: 16px;
+    font-weight: bold;
+    margin-left: 20px;
+}
+.goBack i{
+    color: #9278ff;
+    font-size: 20px;
+}
+.header {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    color: #333;
+}
+.header .logo {
+    float: left;
+    width: 170px;
+    height: 40px;
+    margin-left: 20px;
+}
+.header .logo img{
+    width: 100%;
+    height: 100%;
+}
+.header-right {
+    float: right;
+    padding-right: 50px;
+}
+.header-user-con {
+    display: flex;
+    height: 70px;
+    align-items: center;
+}
+.user-avator {
+    cursor: pointer;
+    margin-left: 10px;
+}
+.ml20{
+    margin-left: 20px;
+}
+.user-avator img {
+    display: block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+}
+.header-right .el-button--text{
+    color: #333;
+}
+.header-right .el-divider--vertical{
+    width: 2px;
+    height: 15px;
+}
+.header-right .el-divider{
+    background-color: #333;
+}
+</style>

src/components/common/Home.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+       <div class="wrapper clearfix">
+            <Sidebar></Sidebar>
+            <div class="content-box">
+                <!-- <v-tags></v-tags> -->
+                <div class="content" :style="{ 'min-height':fullHeight + 'px' }">
+                    <transition name="move" mode="out-in">
+                        <keep-alive :include="tagsList">
+                            <router-view></router-view>
+                        </keep-alive>   
+                    </transition>
+                    <el-backtop target=".content"></el-backtop>
+                </div>
+            </div>
+        </div> 
+        <Foot></Foot>
+    </div>
+</template>
+
+<script>
+import bus from './bus';
+export default {
+    data() {
+        return {
+            tagsList: [],
+            collapse: false,
+            fullHeight: 0,
+            
+        };
+    },
+    created() {
+        let contentHeight = document.documentElement.clientHeight - 61
+        this.fullHeight = contentHeight
+        // this.$store.commit("contentHeight", { contentHeight : contentHeight });
+
+        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
+        bus.$on('tags', msg => {
+            let arr = [];
+            for (let i = 0, len = msg.length; i < len; i++) {
+                msg[i].name && arr.push(msg[i].name);
+            }
+            this.tagsList = arr;
+        });
+    }
+};
+</script>

src/components/common/Jurisdiction.vue

@@ -0,0 +1,409 @@
+<template>
+    <div>
+        <div class=" shadow radius10 main">
+            <div class="system_view mab20">
+                <el-button type="primary" class="mgt20 mgr10" size="small" round icon="el-icon-plus" @click="addjurisdiction('add')">新增权限</el-button>
+            </div>
+            <Background-list :check="false" :nowPage="pageNo" :totalPage="totalPage" :tableData="jurisdiction" @getPaging='getPaging' :totalCount="totalCount" @getSize="getSize">
+                 <template v-slot:tableData>
+                    <el-table-column prop="name" label="角色名称" align="center"></el-table-column>
+                    <el-table-column prop="description" label="角色描述" align="center"></el-table-column>
+                    <el-table-column label="权限列表" align="center">
+                        <template slot-scope="scope">
+                            <span class="ellipsis">{{ scope.row.permissionName }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" align="center">
+                        <template slot-scope="scope">
+                            <el-button type="text" @click="check(scope.row)">查看</el-button>
+                            <el-button type="text" @click="edit(scope.row)">修改</el-button>
+                            <el-button type="text" @click="del(scope.row)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </template>
+            </Background-list>
+        </div>
+        <!-- 添加权限 -->
+        <el-dialog
+            :title="titleText"
+            :visible.sync="isAddjurisdiction"
+            width="70%"
+            center
+            @close="closeAdd"
+            :close-on-click-modal="false"
+        >
+            <el-form ref="jurForm" :model="jurForm">
+                <div class="jurTitle flex-center">
+                    <el-form-item>
+                        <p class="text_color">角色名称</p>
+                        <el-input :disabled="titleText==='查看权限'"  placeholder="请输入角色名称" v-model="newRole.name"></el-input>
+                    </el-form-item>
+                    <el-form-item class="mal50">
+                        <p class="text_color">角色描述</p>
+                        <el-input  :disabled="titleText==='查看权限'"  placeholder="请输入角色描述" v-model="newRole.description"></el-input>
+                    </el-form-item>
+                </div>
+            </el-form>
+                <p class="text_color mab10">权限</p>
+                <div>
+                    <!-- 权限框--渲染组件取值 -->
+                    <el-row :gutter="10">
+                        <!-- 有空改为固定的4个，循环的数据太恶心了 -->
+
+                        <!-- 工作台默认时存在的 -->
+                        <el-col :span="6" class="flex-column-content">
+                            <p class="text_color">工作台</p>
+                            <SystemTree :Treedata="workTree" :ids="treeIds" @getNode="getNode"></SystemTree>
+                        </el-col>
+                        <el-col  :span="6" v-for="item in jurTreeData" :key="item.id">
+                            <div class="flex-column-content">
+                                <p class="text_color">{{ item.name }}</p>
+                                <SystemTree :Treedata="[item]" :ids="treeIds" @getNode="getNode"></SystemTree>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+            <span slot="footer" class="dialog-footer">
+                <cancel type="primary" round @click.native="isAddjurisdiction = false">取 消</cancel>
+                <sure v-show="titleText==='新增权限'" type="primary" round @click.native="addSure('jurForm')">确 定</sure>
+                <sure v-show="titleText==='编辑权限'" type="primary" round @click.native="editBtn('jurForm')">确 定</sure>
+                <sure v-show="titleText===''" type="primary" round @click.native="addSure('jurForm')">确 定</sure>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { getPermissionIds,rolePermissionList, queryPermission, delRolePermission, jurTree, newAddRolePermission, editRolePermission } from '../../utils/api';
+import sure from '../common/sure_btn';
+import cancel from '../common/cancel_btn';
+export default {
+    components: {
+        sure,
+        cancel
+    },
+    data() {
+        return {
+           
+            // 权限假数据
+            jurisdiction: [],
+            isAddDepartment: false,
+            // 表单
+            jurForm: {
+                jurisdictionId: ''
+            },
+            titleText:'',
+            pageNo: 1,
+            pageNumber: 10,
+            totals: 1,
+            totalPage: 1,
+            isAddjurisdiction: false,
+            jurTreeData: [],//树渲染
+            // 新增员工数据
+            newRole: {
+                name: '',
+                description: '',
+                permissionIds: []
+            },
+            workTree:[],
+            name:'',
+            description:'',
+            // // 传给组件高亮的数据
+            treeIds:[],
+            // 查看时的数据
+            watchTreeData:[],
+            needID:0,
+            totalCount:10,
+        };
+    },
+    mounted() {
+        
+    },
+    created(){
+        this.getData();
+        this.getjurTree();
+//    this.changeData(this.testData)
+    },
+    watch: {
+        jurTreeData: {
+            handler(newValue, oldValue) {
+            },
+            deep: true
+        }
+    },
+    methods: {
+        // 改造树的数据，遍历添加字段
+        // 父子级关联需要半勾选效果，需要进行特殊数据处理
+        changeData(testData){
+            let that = this
+            let myArr =JSON.parse(JSON.stringify(this.treeIds) )
+            // 删除了父级1，2，3，4，实现半勾选效果
+            if(myArr.indexOf(1)!==-1){
+                myArr.splice(myArr.indexOf(1),1)
+            }
+            if(myArr.indexOf(2)!==-1){
+                myArr.splice(myArr.indexOf(2),1)
+            }
+            if(myArr.indexOf(3)!==-1){
+                myArr.splice(myArr.indexOf(3),1)
+            }
+            if(myArr.indexOf(4)!==-1){
+                myArr.splice(myArr.indexOf(4),1)
+            } 
+            // 第二级的删除该id，实现半勾选
+            // 后台人力资源管理系统
+            if(myArr.indexOf(9)!==-1){
+                myArr.splice(myArr.indexOf(9),1)
+            } 
+            // 后台客户资源
+            if(myArr.indexOf(10)!==-1){
+                myArr.splice(myArr.indexOf(10),1)
+            } 
+            // 工作台客户资源
+            if(myArr.indexOf(120)!==-1){
+                myArr.splice(myArr.indexOf(120),1)
+            } 
+            // 工作台担保贷后
+            if(myArr.indexOf(7)!==-1){
+                myArr.splice(myArr.indexOf(7),1)
+            } 
+            // 后台担保，待修改
+            // if(myArr.indexOf(11)!==-1){
+            //     myArr.splice(myArr.indexOf(11),1)
+            // } 
+            
+            testData.map(e=>{
+                // 每次都设置为false，非选中
+                this.$set(e,'checked',false)
+                // 判断ids，设置高亮
+                if(myArr.length!==0){
+                    if(myArr.indexOf(e.id)!==-1){
+                       this.$set(e,'checked',true)
+                    }
+                }else{
+                    this.$set(e,'checked',false)
+                }
+                // 查看把所有都禁了
+                if(this.titleText === '查看权限'){
+                     this.$set(e,'disabled',true)
+                }else{
+                    // 因为是浅拷贝，需要解除
+                    this.$set(e,'disabled',false)
+                }
+                // 新增权限时，全部取消选中
+                if(this.titleText === '新增权限'){
+                    this.$set(e,'checked',false)
+                }   
+                // 全部展开
+                this.$set(e,'expand',true)
+                // e.ifVisible = false,e.ischeck = false
+                if(e.children&&e.children.length!==0){
+                    that.changeData(e.children)
+                }
+
+                // 待删除------担保函，暂时进行禁用
+                // 后续做成活的权限，删除角色系统时，删掉。---估计不太可能了，暂时不管
+                if(e.name==='担保业务管理系统'){
+                    this.$set(e,'disabled',true)
+                    if(e.children){
+                        e.children.map(i=>{
+                            this.$set(i,'disabled',true)
+                            if(i.children){
+                                i.children.map(q=>{
+                                    this.$set(q,'disabled',true)
+                                })
+                            }
+                        })
+                    }
+                }
+            })
+        },
+        // 查询角色权限列表
+        async getData() {
+            let res = await rolePermissionList({
+                page: this.pageNo,
+                size: this.pageNumber
+            });
+            this.jurisdiction = res.data.list;
+            this.totals = res.data.totalCount;
+            this.totalPage = res.data.totalPage;
+            this.totalCount = res.data.totalCount
+        },
+        getSize(val){
+            this.pageNo=1
+            this.pageNumber=val
+            this.getData()
+        },
+        // 查询所有权限树形结构
+        async getjurTree() {
+            let res = await jurTree();
+            this.jurTreeData = res.data;
+            this.jurTreeData.map(e=>{
+                if(e.name=='客户资源管理系统'||e.name=='担保业务管理系统'||e.name=='保后业务管理系统'){
+                    this.workTree.push(e)
+                    this.jurTreeData.splice(this.jurTreeData.findIndex(i=>{return i.name==e.name}),1)  
+                }
+            })
+            this.changeData(this.jurTreeData)
+            this.changeData(this.workTree)
+        },
+        // 查看权限 --- 应该是禁用
+        async check(row) {
+            this.treeIds = []
+            this.titleText = '查看权限'
+            this.addjurisdiction();
+            this.newRole.name = row.name;
+            this.newRole.description = row.description;
+            let ids = await getPermissionIds({roleId:row.roleId})
+            this.treeIds = ids.data
+            // 修改一下数据样式
+            this.changeData(this.jurTreeData)
+            this.changeData(this.workTree)
+
+        },
+        async edit(row) {
+            this.treeIds = []
+            this.newRole.permissionIds=[]
+            this.titleText = '编辑权限'
+            this.newRole.name = row.name;
+            this.newRole.description = row.description;
+            this.newRole.roleId = row.roleId;
+            this.isAddjurisdiction = true;
+            // 点击编辑的时候，把id传过去，如果点击的非编辑，则传一个
+            this.needID = row.roleId
+
+           
+            let ids = await getPermissionIds({roleId:row.roleId})
+
+            // 取得了勾选的ids
+            this.newRole.permissionIds = ids.data
+            this.treeIds = ids.data
+            // 修改一下数据样式
+            this.changeData(this.jurTreeData)
+            this.changeData(this.workTree)
+
+        },
+        del(row) {
+            this.$confirm('确定要删除该角色吗？', '提示', {
+                type: 'warning'
+            })
+            .then(() => {
+                delRolePermission({ roleId: row.roleId })
+                    .then((res) => {
+                        this.$message.success('删除成功');
+                        this.getData();
+                    })
+                    .catch((res) => {});
+            })
+            .catch(() => {});
+        },
+        currentChange() {},
+        closeAdd() {
+            this.$refs.jurForm.resetFields();
+        },
+        // 新增弹框
+        addjurisdiction(val) {
+            this.treeIds = []
+            this.newRole.permissionIds = []
+            if(val==='add'){
+                this.titleText = '新增权限'
+            }
+            this.jurForm.jurisdictionId = '';
+            this.isAddjurisdiction = true;
+            this.newRole.name = '';
+            this.newRole.description = '';
+            this.changeData(this.jurTreeData)
+            this.changeData(this.workTree)
+
+        },
+        
+        // 新增角色权限
+        async addSure(val) {
+            this.treeIds=[]
+            // 重新改造数据
+            this.changeData(this.jurTreeData)
+            this.changeData(this.workTree)
+
+            if(!this.newRole.name){
+                this.$message.error('请填写角色名称后再提交')
+            }else{
+                let res = await newAddRolePermission(this.newRole);
+                if (res.code === 10000) {
+                    this.getData();
+                    this.isAddjurisdiction = false;
+                    this.$store.commit("routerData", { router: false });// 重置路由权限
+                }  
+            }
+        },
+        // 接收多个组件传来的值
+        getNode(data, checked) {
+            if (checked === true) {
+                this.newRole.permissionIds.push(data);
+                this.newRole.permissionIds = [...new Set(this.newRole.permissionIds)];
+            } else {
+                // 为false，则删除,且遍历数组，删除所有children的值
+                this.newRole.permissionIds.splice(this.newRole.permissionIds.indexOf(data), 1);   
+            }
+        },
+        // 编辑确定按钮
+        async editBtn(val){
+
+            if(!this.newRole.name){
+                 this.$message.error('请输入角色名称')
+            }else{
+                let res = await editRolePermission(this.newRole)  
+                if (res.code === 10000) {
+                    this.getData();
+                    this.$forceUpdate
+                    this.isAddjurisdiction = false;
+                    this.$store.commit("routerData", { router: false });// 重置路由权限
+                }
+            }
+        },
+        // biangeng 
+        changeInput(){
+            // this.treeIds = this.newRole.permissionIds
+        },
+        getPaging(val){
+            this.pageNo = val
+            
+            this.getData()
+        }
+       
+    },
+    watch:{
+        isAddjurisdiction(val){
+            if(val===false){
+                this.needID = 0
+            }
+        },
+        // newRole(val){
+        // }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.system_view {
+    text-align: right;
+}
+.jurTitle {
+    /deep/ .el-input__inner {
+        height: 40px;
+    }
+    .mal50 {
+        margin-left: 50px;
+    }
+}
+.mab10 {
+    margin-bottom: 10px;
+}
+.text_color {
+    color: #00b9ff;
+}
+.main{
+    min-height: 755px;
+}
+</style>
+
+

src/components/common/Letter.vue

@@ -0,0 +1,739 @@
+<template>
+    <div>
+        <!-- 担保函 -->
+        <div v-show="loans" class="mat20 bgw shadow radius10 list-box">
+            <div class="flex-between search-box">
+                <div class="flex-center">
+                    <p class="fz-16 mgr10 font-blue mgl20">流程状态</p>
+                    <el-select v-model="processValue" clearable placeholder="请选择" @change="getProcess(1,keyWord,processValue)">
+                        <el-option v-for="item in processStatus" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div class="mgr10 flex-center">
+                    <el-input class="ht40" clearable v-model="keyWord" @keyup.enter.native="getProcess(1,keyWord,processValue)" placeholder="业务编号/客户名称" ></el-input>
+                    <el-button class="ht40 btn-pdt mgl10" type="primary" plain round   @click="download">导出</el-button>
+                    <el-button class="ht40 mgl10 btn-pdt" type="primary" round @click="getProcess(1,keyWord,processValue)">查询</el-button>
+                </div>
+            </div>
+            <div class="pdlr20 wrap self">
+                <el-table :data="processData" stripe header-align="center" class="" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+                    <el-table-column type="selection" width="30" align="center" :reserve-selection="true"></el-table-column>
+                    <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
+                    <el-table-column prop="businessCode" label="业务编号" width="100" align="center"></el-table-column>
+                    <el-table-column prop="name" label="客户名称" align="center"></el-table-column>
+                    <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
+                    <el-table-column prop="businessType" label="业务类别" align="center"></el-table-column>
+                    <el-table-column prop="loanMoney" label="担保额度(万元)" min-width="100" align="center"></el-table-column>
+                    <el-table-column prop="loanTern" label="担保期限" align="center"></el-table-column>
+                    <el-table-column prop="passingTime" label="贷审会日期" align="center"></el-table-column>
+                    <el-table-column label="审批状态" align="center">
+                        <template slot-scope="scope">
+                            <span :style="'color:'+scope.row.color">{{scope.row.statusText}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="业务状态" align="center">
+                        <template slot-scope="scope">
+                            <span :style="'color:'+scope.row.businessColor">{{ scope.row.businessText }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作状态" align="center">
+                        <template slot-scope="scope">
+                            <span :style="'color:'+scope.row.operatingColor">{{ scope.row.operatingText }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="200" align="center">
+                        <template slot-scope="scope">
+                            <el-button type="text" v-if="scope.row.isFgJl == 1 && scope.row.operatingText !== '已处理'&&scope.row.businessStatus !== 3" @click="letterData(scope.row,1)">担保函</el-button>
+                            <el-button type="text" v-if="scope.row.isFgJl != 1 && scope.row.operatingText !== '已处理'&&scope.row.businessStatus !== 3" @click="letterData(scope.row,3)">确认</el-button>
+                            <el-button type="text" @click="letterData(scope.row,2)">查看</el-button>
+                            <el-button type="text" @click="auditProgressPop(scope)">审核进度</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <AuditProgress v-if="visible" :visible.sync="visible" :businessId.sync="businessId"></AuditProgress>
+
+
+            <div class="pagination sorter self">
+                <p v-if="processData.length!==0">{{ pageNo }}/{{ totalPage }}页</p>
+                <el-pagination 
+                    :hide-on-single-page="processData.length===0"
+                    background 
+                    :page-sizes="[10, 15, 20, 50]"
+                    :page-size="10"
+                    layout="total,prev,pager,next,jumper,sizes" 
+                    @current-change="currentChange" 
+                    :current-page.sync="pageNo" 
+                    :total="totals"  
+                    @size-change="handleSizeChange"   >
+                </el-pagination>
+            </div>
+        </div>
+        <!-- 担保函展示 -->
+        <div v-if="!loans" v-loading="screenshot">
+            <div ref="imageTofile">
+                <div class="shadow radius10 mgt20 pdb10">
+                    <div class="mga printOrder-data wd95">
+                        <div class="self tx-center border-b pdt20 pdb20 print-top">
+                            <p style="font-size:20px;font-weight: 900;">担保承诺函</p>
+                            <!-- 仅查看时显示 -->
+                            <el-button v-show="operationType === 2 && letterOfPrint" class="print-btn" @click="toPrint()">打印</el-button>
+                        </div>
+                        <div class="mgt40 pdl30 pdr30 print-text">
+                            <strong style="font-size:18px">{{letterValue.bank}} :</strong>
+                            <!-- 生成/确定 担保函的文字--处于非放款通知的情况下 -->
+                            <div>
+                                <p v-show="operationType !== 2" class="fz-20 mgt20" style="line-height:40px">
+                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据<span class="letter-key">{{letterValue.name}}</span>的贷款担保申请，&nbsp;经我公司项目贷审会研究，&nbsp;同意为其在贵行申请的贷款提供担保，&nbsp;特向贵行提供承诺。&nbsp;本承诺系我公司同意与贵行签订保证合同的意向，&nbsp;一切权利义务以保证合同为准！
+                                </p>
+                                <!-- 查看担保函的文字 -->
+                                <p v-show="operationType === 2" class="mgt20" style="line-height:40px;font-size:18px">
+                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据<span class="letter-key">{{letterValue.name}}</span>的贷款担保申请，&nbsp;经我公司<span class="letter-key">{{letterValue.passingTime}}</span>项目贷审会研究，&nbsp;同意为其在贵行申请的贷款提供<span class="letter-key">{{letterValue.loanMoney}}</span>万元&emsp;担保，期限<span class="letter-key">{{letterValue.loanTern}}</span>，&nbsp;特向贵行提供承诺。&nbsp;本承诺系我公司同意与贵行签订保证合同的意向，&nbsp;一切权利义务以保证合同为准！
+                                </p>
+                            </div>
+                            <!-- 生成担保函时展示 -->
+                            <div class="mgl40 mgt20" v-show="operationType !== 2">
+                                <div class="df">
+                                    <p class="fz-20 guarantee-Text-wd not-zoom">客户名称：</p>
+                                    <p class="fz-20">{{letterValue.name}}</p>
+                                </div>
+                                <div class="df mgt10">
+                                    <p class="fz-20 guarantee-Text-wd not-zoom">贷审会日期：</p>
+                                    <p class="fz-20">{{letterValue.passingTime}}</p>
+                                </div>
+                                <div class="df mgt10">
+                                    <p class="fz-20 guarantee-Text-wd not-zoom">担保金额（万元）：</p>
+                                    <p class="fz-20" v-text="`${letterValue.loanMoney} (大写：${letterValue.guaranteeMoney})`"></p>
+                                </div>
+                                <div class="df mgt10">
+                                    <p class="fz-20 guarantee-Text-wd not-zoom">担保期限：</p>
+                                    <p class="fz-20">{{letterValue.loanTern}}</p>
+                                </div>
+                            </div>
+                            <div class="wd100 flex-end-content mgb20" :class="operationType === 2 ? 'print' : ''">
+                                <div class="mgr50 print-bottom" style="font-size:18px">
+                                    <strong>大庆市工商业融资担保有限公司</strong>
+                                    <div class="mgl40 mgt10">
+                                        <p>法定代表人:</p>
+                                        <p class="mgt10">或授权代理人:</p>
+                                        <p class="mgt10 ">&emsp;&emsp;年&emsp;&emsp;&emsp;月&emsp;&emsp;&emsp;日</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-show="operationType !== 2">
+                    <div class="mgt20 left-border fz-16"><p class="c-black mgl10">附件</p></div>
+                    <div class="shadow radius10 mgt20 pdr20 flex-center">
+                        <div v-for="(item,index) in fileList" :key="index" class="mgr20 mgt20 mab20">
+                            <span class="fz-16 mgl20 cur" @click="preview(item)">{{URLsubstring(item)}}</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 担保函--确认 -->
+                <div v-show="operationType !== 2">
+                    <div v-show="operationType === 1" class="mgt20 left-border fz-16"><p class="c-black mgl10">审核</p></div>
+                    <div v-show="operationType === 3" class="mgt20 left-border fz-16"><p class="c-black mgl10">担保函确认</p></div>
+                    <div class="shadow radius10 mgt20 mgb20 pdr20">
+                        <el-form label-position="right" label-width="80px" class="mgr20 mgt20 mab20">
+                            <el-form-item label="审核意见">
+                                <el-input
+                                    class="mgl20 wd100"
+                                    type="textarea"
+                                    :rows="3"
+                                    placeholder="请输入审核意见"
+                                    v-model="letterValue.auditOpinion">
+                                </el-input>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </div>
+            </div>
+            <!-- 查看时的按钮 -->
+            <div class="fj-center">
+                <!-- <el-button @click="toImage($refs.imageTofile)">点击上传base64到服务器测试</el-button> -->
+                <!-- <el-button v-if="sendShow" class="mgr20" @click="toImage($refs.imageTofile)">抄送</el-button>  -->
+
+                <el-button v-show="operationType === 2" type="primary bd0" class="mgt20" round @click="downloadLetter">导出</el-button>
+            </div>
+            <!-- 确认按钮 -->
+            <div v-show="operationType === 1 || operationType === 3" class="df fj-end mgt30 mgb30">
+                <div class="df">
+                    <el-button plain type="primary" class="mgr20" round @click="backTo">返回</el-button>
+                    <el-button v-show="operationType === 1" type="success" class="mgr20" v-preventReClick round @click="sumbitOpinion('提交',2)">提交</el-button>
+                    <el-button v-show="operationType === 3" type="success" class="mgr20" v-preventReClick round @click="sumbitOpinion('确认',2)">确认</el-button>
+                    <el-button type="warning" class="mgr20" v-preventReClick round @click="sumbitOpinion('驳回',4)">驳回</el-button>
+                </div>
+            </div>
+            
+            <!-- 审核流程和业务流程 -->
+            <processTemp></processTemp>
+
+            <!-- 当前页面预览弹框 -->
+            <el-dialog :visible.sync="showPreviewImg"  style="margin-top:-7vh">
+                <div class="tx-center">
+                    <img :src="previewImg" class="el-image-viewer__img" style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;">
+                </div>
+            </el-dialog>
+
+            <!-- 预览pdf -->
+            <pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
+        </div>
+    </div>
+</template>
+
+<script>
+import { guaranteeLetterList, excelExportLetter, updateStatus, exportGuaranteeLetter,copySend ,designFrom,letterDetail } from '../../utils/api'
+import { constants } from 'zlib';
+import core from '../../utils/core'
+ 
+export default {
+    props:{
+        
+    },
+    data() {
+        return {
+            loans: true,
+            //流程状态
+            processValue: '',
+            processStatus: [{
+                label: '审核中',
+                value: 1
+            },
+            {
+                label: '已审核',
+                value: 2
+            },
+            {
+                label: '已驳回',
+                value: 4
+            }],
+            keyWord: '',//搜索框
+            pageNo: 1,
+            pageNum: 10,
+            totals: 1,
+            processData: [],//列表数据
+            multipleSelection: [],//选择的数据
+            guaranteeMoney: '',//担保金额
+            totalPage: 1,
+
+            //担保函数据
+            letterValue: {
+                businessId: '',//业务id
+                bank: '',//银行
+                name: '',//客户名称
+                passingTime: '',//贷审会日期
+                loanMoney: '',//担保金额
+                guaranteeMoney: '',//担保金额转格式
+                file: '',//会议纪要
+                loanTern: '',//担保期限
+                auditOpinion: '',//审核意见
+                roleId: ''//角色id
+            },
+            operationType: 1,//列表操作状态
+            letterOfPrint: true,//打印按钮的显隐
+            printWidth: false,//打印时改变打印内容宽度
+            fileList: [],//附件文件列表
+            showPreviewImg: false,//图片预览
+            previewImg:'',//查看预览文件
+            pdfVisible: false,//pdf弹框
+            pdfSrc: '',//pdf文件
+            visible:false,
+            businessId:'', 
+            //  :0,
+            fromData:[],// 表单值
+            upDataArr:[],// 表单限制文件
+            screenshot:false,//截图时的加载
+            sendShow:false
+
+        };
+    },
+    filters:{
+        linkmanFilter(val){
+            switch (val) {
+                case '0': return '个人'
+                    break;
+                case '1': return '企业'
+                    break;
+            }
+        },
+        applyDeadline(val){
+            switch (val) {
+                case 0:return '1个月'
+                    break;
+                case 1:return '3个月'
+                    break;
+                case 2:return '6个月'
+                    break;
+                case 3:return '9个月'
+                    break;
+                case 4:return '12个月'
+                    break;
+                case 5:return '24个月'
+                    break;
+                default:
+                    break;
+            }
+        },
+    },
+    computed:{
+        num(){
+            
+        }
+    },
+    watch:{
+        loans:function(val){
+            if(val){
+                this.getProcess(this.pageNo,this.keyWord,this.processValue)
+            }else{
+                // this.designFrom()// 动态表单
+            }
+            this.$store.commit("loansData", { loans: this.loans });
+        },
+       
+    },
+    destroyed(){},// 销毁组件
+    mounted(){
+        // 判断是否由待处理哪里跳转过来的，每次触发后删除
+        if(sessionStorage.getItem('decideJump')){
+            let data = JSON.parse(sessionStorage.getItem('decideJump'))
+            data.id = data.detailId
+            data.status = data.approveStatus
+            data.handleStatus = data.operatingStatus
+            // 判断操作
+            this.loans = false //判断详情显示
+            if(data.btn==='担保函'){
+                this.operationType = 1
+                this.letterDetail(data)
+            }else if(data.btn==='确认'){
+                this.operationType = 3
+                this.letterDetail(data)
+            }
+            sessionStorage.removeItem('decideJump')
+            // 读取抄送状态，当前是否处于抄送查看,
+        }else if(sessionStorage.getItem('fromCopyTo')){
+            let data = JSON.parse(sessionStorage.getItem('fromCopyTo'))
+            this.loans = false // 进入详情
+            this.operationType = 2
+            // 判断是否来自个人效率非抄送列表
+            if(sessionStorage.getItem('private')==='查看'){
+                this.letterDetail(data)
+            }else{
+                let that = this
+                this.letterValue = {
+                    businessId: data.businessId,//业务id
+                    bank: data.bank,//银行
+                    name: data.clientName,//客户名称
+                    passingTime: data.passingTime,//贷审会日期
+                    loanMoney: data.loanMoney,//担保金额
+                    guaranteeMoney: that.core.fMoney3(data.loanMoney),//担保金额转格式
+                    file: '',//会议纪要
+                    loanTern: data.loanTern,//担保期限
+                    auditOpinion: '',//审核意见
+                    roleId: ''//角色id
+                }
+            }
+            // this.disable = true// 禁用表单
+            // this.messageDetail(data.detailId)
+        }else{
+            // 读取列表的显示状态
+            this.loans = this.$store.state.guarantee.loans
+            this.operationType = this.$store.state.guarantee.operationType
+            this.letterValue = this.$store.state.guarantee.letterValue
+            this.fileList = this.$store.state.guarantee.fileList
+            this.getProcess(this.pageNo,this.keyWord,this.processValue)
+        }
+    },
+    methods: {
+        // 详情--个人效率专用
+        letterDetail(data){
+            letterDetail({id:data.detailId}).then(res=>{
+                let that = this,data = res.data.data
+                this.letterValue = {
+                    businessId: data.businessId,//业务id
+                    bank: data.bank,//银行
+                    name: data.clientName,//客户名称
+                    passingTime: data.passingTime,//贷审会日期
+                    loanMoney: data.loanMoney,//担保金额
+                    guaranteeMoney: that.core.fMoney3(data.loanMoney),//担保金额转格式
+                    file: '',//会议纪要
+                    loanTern: data.loanTern,//担保期限
+                    auditOpinion: '',//审核意见
+                    roleId: ''//角色id
+                }
+                // this.fileList = row.file.split(",")
+                // this.$store.commit("fileData", { fileList: this.fileList });
+                this.$store.commit("loansData", { loans: this.loans });
+                this.$store.commit("letterData", { operationType: this.operationType, letterValue: this.letterValue });
+            })
+        },
+        // 担保函-列表
+        async getProcess(val, search, status){
+            let params = {
+                page: val,
+                size: this.pageNum,
+                customerNumberOrName: search,
+                status: status
+            }
+            let res = await guaranteeLetterList(params)
+            res.data.list.map(e =>{
+                e.statusText = this.core.auditStatus(e.status).text
+                e.color = this.core.auditStatus(e.status).color
+                e.businessText = this.core.businessType(e.businessStatus).text
+                e.businessColor = this.core.businessType(e.businessStatus).color
+                e.operatingText = this.core.operationType(e.operatingStatus).text
+                e.operatingColor = this.core.operationType(e.operatingStatus).color
+            })
+            this.processData = res.data.list
+            // this.processData = [{name:1}]// 调试用
+            this.totals = res.data.totalCount
+            if(res.data.totalPage !== 0 ){
+                this.totalPage = res.data.totalPage
+            }
+
+        },
+        handleSizeChange(val) {
+            this.pageNum = val
+            this.getProcess(1)
+        },
+        //列表数据导出
+        download(){
+            let id = sessionStorage.getItem('userID')
+            let str = this.multipleSelection.map(e => e.id)
+            let downloadElement = document.createElement('a');
+            downloadElement.href = `${excelExportLetter}?ids=${str?str:[]}&userId=`+id;
+            downloadElement.download = '业务申请导出文件'; //下载后文件名
+            document.body.appendChild(downloadElement);
+            downloadElement.click(); //点击下载
+            document.body.removeChild(downloadElement); //下载完成移除元素 
+            // if(this.multipleSelection.length == 0){
+            //     this.$message.error('请先选择担保函数据！');
+            // }else{
+            // }
+        },
+        downloadLetter(){
+            window.open(`${exportGuaranteeLetter}?businessId=${this.letterValue.businessId}&roleId=${this.letterValue.roleId}`)
+        },
+        getRowKeys(row) {
+            return row.Id;
+        },
+        handleSelectionChange(val) {
+
+            this.multipleSelection = val;
+        },
+        currentChange(val){
+            this.getProcess(val)
+        },
+        //列表操作-详情
+        letterData(row,operationType){
+            this.loans = false //判断详情显示
+            this.operationType = operationType //列表操作状态
+            //担保函数据
+            this.letterValue = {
+                businessId: row.businessId,//业务id
+                bank: row.bank,//银行
+                name: row.name,//客户名称
+                passingTime: row.passingTime,//贷审会日期
+                loanMoney: this.core.fMoney(row.loanMoney),//担保金额
+                guaranteeMoney : this.core.fMoney3(row.loanMoney),//担保金额转格式
+                file: row.file,//会议纪要
+                loanTern: row.loanTern,//担保期限
+                auditOpinion: row.auditOpinion,//审核意见
+                roleId: row.roleId //角色id
+            }
+            this.fileList = row.file.split(",")
+            this.$store.commit("fileData", { fileList: this.fileList });
+            this.$store.commit("loansData", { loans: this.loans });
+            this.$store.commit("letterData", { operationType: this.operationType, letterValue: this.letterValue });
+
+        },
+        // 预览文件item
+        preview(item){
+            let len = item.length,type = item.substring(len-4,len)
+            // 检查后四位，进行格式匹配
+            if(['.jpg','jpeg','.png','.gif','.svg','.psd'].includes(type.toLowerCase())){
+                this.showPreviewImg = true
+                this.previewImg = item 
+            }else if(['.pdf'].includes(type.toLowerCase())){
+                this.pdfVisible = true,//pdf弹框
+                this.pdfSrc = item //pdf文件
+            }else if('.mp4'.includes(type.toLowerCase())){
+                core.downMp4(url,this.URLsubstring(url))
+            }
+            else{
+                window.open(`https://view.officeapps.live.com/op/view.aspx?src=${item}`)
+            }
+        },
+        // 打印功能
+        toPrint(){
+            this.letterOfPrint = false
+            this.printWidth = true
+            this.$nextTick(()=>{
+                if(this.letterOfPrint === false){
+                    var oldstr = document.body.innerHTML
+                    // 截取需要打印的部分
+                    var newstr = document.getElementsByClassName('printOrder-data')[0].innerHTML
+                    document.body.innerHTML = newstr  // 打印区域赋值给body
+                    window.print();//调用打印
+                    // 还原：将旧的页面储存起来，当打印完成后返给给页面。
+                    document.body.innerHTML = oldstr
+                    window.location.reload()  
+                }
+            })
+        },
+        // 提交审核意见
+        sumbitOpinion(text,type){
+            this.$confirm(`确定要${text}该审核意见吗？`, '提示', {
+                type: 'warning'
+            }).then(() => {
+                if(type == 4 && this.letterValue.auditOpinion == ''){
+                    return this.$message.error("请先填写审核意见！")
+                }
+                let params = {
+                    auditOpinion: this.letterValue.auditOpinion,
+                    businessId: this.letterValue.businessId,
+                    status: type
+                }
+                updateStatus(params).then(res => {
+                    this.$message.success(`${text}成功`);
+                    let btnPermissionsStr = sessionStorage.getItem("now-roleBtn").split(',');
+                    // if(btnPermissionsStr.includes('62')){
+                    //     this.toImage(this.$refs.imageTofile)
+                    // }else{
+                        this.loans = true
+                        // this.getProcess(this.pageNo,this.keyWord,this.processValue)
+                    // }
+                }).catch(res => {});
+            }).catch(() => {});
+        },
+        // 返回
+        backTo(){
+            this.loans = true
+        },
+        auditProgressPop(data){
+            this.visible=true
+            this.businessId = data.row.businessId
+        }, 
+        URLsubstring(url){// 剪切img-url的名称
+            if(url){
+                return url.substring(59,url.length)
+            }
+        },
+        // 页面元素转图片
+        toImage(el) {
+            copySend({
+                businessId:this.letterValue.businessId,
+                detailId:this.letterValue.id,
+                processId:8
+            }).then(res=>{
+                if(res.code===10000){
+                    this.screenshot = false                    
+                    this.loans = true
+                }
+            }).catch(err=>{
+                this.screenshot = false
+            })
+        },
+        compare(key){ // 用于对象数组排序
+            return function(value1,value2){
+                let val1=value1[key];
+                let val2=value2[key];
+                return val1-val2;
+            }
+        },
+        designFrom(){// 表单数据接口
+            designFrom({processId:8}).then(res=>{
+                this.fromData = res.data 
+                this.fromData.sort(this.compare('id'))
+                // this.upDataArr = []
+                // this.upDataArr.push(this.fromData[24].ifRequired,this.fromData[25].ifRequired,this.fromData[26].ifRequired,this.fromData[27].ifRequired,this.fromData[28].ifRequired,this.fromData[29].ifRequired,this.fromData[30].ifRequired,this.fromData[31].ifRequired,this.fromData[32].ifRequired )
+            })
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@page{//清除打印时的页眉页脚--通过margin挤掉
+    size: auto A4 landscape;//设置打印规定的纸张大小
+    margin: 3mm 1cm 3mm;
+}
+@media print {
+    .print-top{
+        padding-top: 3.5cm;
+        padding-bottom: 1cm;
+    }
+    .print-text{
+        padding-top: .5cm;
+        margin-left: 1.5cm;
+        margin-right: 1.5cm;
+    }
+    .border-b{
+        border-bottom:0
+    }
+    .print-bottom{
+        margin-top: 4.5cm;
+    }
+}
+.print{
+    margin-top: 200px;
+}
+.print-btn{
+    position:absolute;
+    right:0;
+    top: 15px;
+}
+.letter-key{
+    font-weight: bold;
+    margin: 0 10px;
+}
+.guarantee-Text-wd{
+    width: 180px;
+}
+
+.sorter {
+    // position: absolute;
+    // bottom: 5%;
+    // right: 3%;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 50px;
+    padding-bottom: 20px;
+    p {
+        color: #cccccc;
+        position: absolute;
+        left: 50%;
+        top: 28%;
+        transform: translate(-50%,-50%);
+        font-size: 16px;
+    }
+}
+.wrap{
+    
+    // min-height: 664px;
+    min-height: 100%;
+}
+/deep/.el-table .cell{
+    padding: 0;
+}
+/deep/ .el-table-column--selection .cell{
+    padding-left: 0;
+    padding-right: 0;
+}
+/deep/ .el-checkbox__inner {
+    background: transparent;
+    border: 0;
+    background-image: url('../../assets/img/btn_per_un.png');
+    background-size: cover;
+    width: 20px;
+    height: 20px;
+}
+/deep/ .cell .el-checkbox__input .el-checkbox__inner {
+    background-color: transparent;
+    background-image: url('../../assets/img/btn_per_un.png');
+    background-size: cover;
+    width: 20px;
+    height: 20px;
+    border: 0;
+    transition: none;
+}
+/deep/ .el-checkbox {
+    width: 20px;
+    height: 20px;
+    transition: none;
+}
+/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+    transition: none;
+    width: 20px;
+    height: 20px;
+}
+/deep/ .el-checkbox__input .el-checkbox__inner::after {
+    background: transparent;
+    content: '';
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    transition: none;
+}
+
+// 选中后
+
+/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: transparent;
+    transition: none;
+    width: 20px;
+    height: 20px;
+}
+/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after {
+    content: '';
+    background: transparent;
+    background-image: url('../../assets/img/btn_pre.png');
+
+    width: 20px;
+    border: 0;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: none;
+}
+/deep/ .el-table .cell {
+    text-align: center;
+    text-overflow: clip;
+}
+
+// 分页器样式
+
+/deep/ .el-pager li {
+    border-radius: 50% !important;
+    height: 30px;
+    width: 30px;
+    min-height: 25px !important;
+    min-width: 25px !important;
+    background: #f2f2f2;
+    line-height: 30px;
+    text-align: center;
+    padding: 0;
+}
+/deep/ .el-form-item {
+    margin-bottom: 0;
+}
+/deep/ .el-pagination.is-background .btn-prev {
+    background-color: transparent;
+}
+/deep/ .el-form-item__label {
+    color: #00b9ff;
+    padding: 0;
+}
+/deep/ .el-input__inner {
+    border-radius: 20px;
+    // background: #fafafa;
+}
+/deep/ .el-pagination .btn-next .el-icon {
+    color: #00b9ff;
+    font-size: 20px;
+}
+/deep/ .el-pagination .btn-prev .el-icon {
+    color: #00b9ff;
+    font-size: 20px;
+}
+
+/deep/ .el-table td {
+    padding: 0px;
+   padding: 8px 0;
+}
+/deep/ .el-table th > .cell {
+    
+    padding: 0;
+}
+/deep/ .el-pagination.is-background .btn-next {
+    background-color: transparent;
+}
+/deep/ .el-input__inner {
+    border-radius: 20px;
+    height: 35px !important;
+    line-height: 35px;
+}
+</style>

src/components/common/List.vue

@@ -0,0 +1,149 @@
+<template>
+
+    <!-- bug未修复：处于关联状态渲染会出问题，然后修改完权限，输入框输入的时候会导致权限复原 -->
+    <!-- 且：会导致严格关联的勾选（即父级勾选，等于全选） -->
+        <!-- 父子级不严格关联check-strictly -->
+        <!-- 默认选中的id default-checked-keys -->
+        <!-- 展开所有节点default-expand-all -->
+        <div class="df-column">
+            <div class="radius10 ">
+                    <el-tree
+                        default-expand-all
+                        :data="data"
+                        check-strictly
+                        @check-change="checkBox"
+                        node-key="id"
+                        :expand-on-click-node="false"
+                        ref="tree"
+                        class="mgtb10"
+                        show-checkbox
+                        auto-expand-parent
+                        :default-checked-keys="myIds"
+
+                        
+                    >
+                        <span class="custom-tree-node" slot-scope="{  data }">
+                            <span>{{ data.name }}</span>
+                        </span>
+                    </el-tree>
+            </div>
+        </div>
+</template>
+<script>
+import { getPermissionIds} from '../../utils/api'
+export default {
+    name: "List",
+    props: {
+        data: Array,
+        needID:Number,
+        // ids:Array
+        },
+    data(){
+        return{
+            // 设置树
+           
+            nodeArr:[],//选中的节点添加进数组
+            myIds:[]//
+        }
+    },
+    methods:{
+        // 检测实时变更选中，传给父级
+        checkBox(data, checked, indeterminate){
+            // 传父级id过去（这个是关联模式）
+            // if(this.getCheckedNodes().length!==0){
+            //     let[a]=this.getCheckedNodes() 
+            //         this.$emit('getNodeArr',a,true)
+            // }
+
+            // 传父级id过去
+            this.myIds.push(data.parentId)
+            
+            
+            this.$emit('getNodeArr',data.parentId,true)
+            this.$emit('getNodeArr',data.id,checked)
+            
+
+        },
+        handleNodeClick(data) {
+        },
+        // 选中树节点的处理方式
+        getNode(data) {
+        //不需要处理node数据时，不做操作，data为当前节点的数据
+        },
+       
+        getCheckedNodes() {
+            // 半选的时候获取父级的id 
+        return this.$refs.tree.getHalfCheckedKeys()
+        },
+        // getCheckedKeys() {
+        //     // 返回选中的id组合
+        // },
+
+        getLight(val){
+            if(val!==0){
+                getPermissionIds({roleId:val}).then(res=>{
+                    this.myIds = res.data
+                    // this.$refs.tree.setCheckedKeys(this.myIds,true)
+                })}
+        },
+    //    debounce(func, wait) {
+    //         let timer;
+    //         return function() {
+    //           let context = this;  
+    //           let args = arguments; 
+    //           if (timer) clearTimeout(timer);
+    //           let callNow = !timer;
+    //           timer = setTimeout(() => {
+    //             timer = null;
+    //           }, wait)
+    //           if (callNow) func.apply(context, args);
+    //         }
+    //     }
+    },
+    created(){
+        this.getLight(this.needID)
+        // this.getLight(this.needID)
+    },
+    watch:{
+        // needID:function(val,val1){
+        //     if(val!==0){
+        //         this.debounce(this.getLight(val),500)
+        //     }
+        // },
+        // myIds:function(val){
+        // }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.list-item{
+    .item-name{
+        padding: 10px 0 0 0;
+        i{
+            margin-right: 10px;
+        }
+       
+        .hover{
+            color: #ccc;
+            &:hover{
+               color: #00B9FF; 
+            }
+        }
+        span{
+            color: #666;
+        }
+    }
+    .children-item{
+        margin-left: 20px;
+    }
+}
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 10px;
+}
+</style>

src/components/common/Notice.vue

@@ -0,0 +1,696 @@
+<template>
+    <div>
+        <div v-show="loans" class="mat20 bgw shadow radius10 list-box">
+            <div class="flex-between search-box">
+                <div class="flex-center">
+                    <p class="fz-16 mgr10 font-blue mgl20">流程状态</p>
+                    <el-select v-model="processValue" clearable placeholder="请选择" @change="getProcess(1,keyWord,processValue)">
+                        <el-option v-for="item in processStatus" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div class="mgr10 flex-center">
+                    <el-input class="ht40" clearable v-model="keyWord" @keyup.enter.native="getProcess(1,keyWord,processValue)" placeholder="业务编号/客户名称" ></el-input>
+                    <el-button class="ht40 btn-pdt mgl10" type="primary" plain round  @click="download">导出</el-button>
+                    <el-button class="ht40 mgl10 btn-pdt" type="primary" round @click="getProcess(1,keyWord,processValue)">查询</el-button>
+                </div>
+            </div>
+            <div class="pdlr20 wrap self">
+                <el-table :data="processData" stripe header-align="center" class="" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+                    <el-table-column type="selection" width="30" align="center" :reserve-selection="true"></el-table-column>
+                    <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
+                    <el-table-column prop="businessCode" label="业务编号" width="100" align="center"></el-table-column>
+                    <el-table-column prop="name" label="客户名称" align="center"></el-table-column>
+                    <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
+                    <el-table-column prop="businessType" label="业务类别" align="center"></el-table-column>
+                    <el-table-column prop="loanMoney" label="担保额度(万元)" min-width="100" align="center"></el-table-column>
+                    <el-table-column prop="loanTern" label="担保期限" align="center"></el-table-column>
+                    <el-table-column prop="passingTime" label="贷审会日期" align="center"></el-table-column>
+                    <el-table-column label="审批状态" align="center">
+                        <template slot-scope="scope">
+                            <span :style="'color:'+scope.row.color">{{scope.row.statusText}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="业务状态" align="center">
+                        <template slot-scope="scope">
+                            <span :style="'color:'+scope.row.businessColor">{{ scope.row.businessText }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作状态" align="center">
+                        <template slot-scope="scope">
+                            <span :style="'color:'+scope.row.operatingColor">{{ scope.row.operatingText }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="200" align="center">
+                        <template slot-scope="scope">
+                            <el-button type="text" @click="letterData(scope.row,2)">查看</el-button>
+                            <!-- 确认A/B角/资产部 -->
+                            <el-button type="text" v-show="scope.row.operatingText !== '已处理'&&scope.row.businessStatus !== 3" @click="letterData(scope.row,3)">确认</el-button>
+                            <el-button type="text" @click="auditProgressPop(scope)">审核进度</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <AuditProgress v-if="visible" :visible.sync="visible" :businessId.sync="businessId"></AuditProgress>
+
+            <div class="pagination sorter self">
+                <p v-if="processData.length!==0">{{ pageNo }}/{{ totalPage }}页</p>
+                <el-pagination 
+                    :hide-on-single-page="processData.length===0"
+                    background 
+                    :page-sizes="[10, 15, 20, 50]"
+                    :page-size="10"
+                    layout="total,prev,pager,next,jumper,sizes" 
+                    @current-change="currentChange" 
+                    :current-page.sync="pageNo" 
+                    :total="totals"
+                    @size-change="handleSizeChange">
+                </el-pagination>
+            </div>
+        </div>
+
+        <!-- 担保函展示 -->
+        <div v-if="!loans" ref="imageTofile" v-loading="screenshot">
+            <div class="shadow radius10 mgt20 pdb10">
+                <div class="mga printOrder-data wd95">
+                    <div class="self tx-center border-b pdt20 pdb20 print-top">
+                        <p style="font-size:20px;font-weight: 900;">放款通知</p>
+                        <!-- 仅查看时显示 -->
+                        <el-button v-show="operationType === 2 && letterOfPrint" class="print-btn" @click="toPrint()">打印</el-button>
+                    </div>
+                    <div class="mgt40 pdl30 pdr30 print-text">
+                        <strong style="font-size:18px">{{letterValue.bank}} :</strong>
+                        <!-- 非打印展示 -->
+                        <div :class="letterOfPrint?'before-print':'do-print'">
+                            <div>
+                                <p class="fz-18 mgt20" style="line-height:40px">
+                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我公司同意贵行为该公司放款。
+                                </p>
+                            </div>
+                            <!-- 生成担保函时展示 -->
+                            <div class="mgl40 mgt20">
+                                <div class="df">
+                                    <p class="fz-16 not-zoom">客户名称：</p>
+                                    <p class="fz-16">{{letterValue.name}}</p>
+                                </div>
+                                <div class="df mgt10">
+                                    <p class="fz-16 mgr30 not-zoom">放款额度（万元）：</p>
+                                    <p class="fz-16" v-text="`${letterValue.loanMoney} (大写：${letterValue.guaranteeMoney})`"></p>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 打印时展示 -->
+                        <div :class="!letterOfPrint?'before-print':'do-print'" style="line-height:40px;font-size:18px;">
+                            <p class="mgt20 print-main" >
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我公司同意贵行为&nbsp;&nbsp;<span style="font-weight: bold;">{{letterValue.name}}</span>&nbsp;&nbsp;放款人民币&nbsp;&nbsp;<span style="font-weight: bold;">{{letterValue.loanMoney}}</span>万元整&nbsp;&nbsp;(大写：<span style="font-weight: bold;">{{letterValue.guaranteeMoney}}</span>)。
+                            </p>
+                            <p class="mgt20" >
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;特此通知！
+                            </p>
+                        </div>
+                        <div class="wd100 flex-end-content mgb20" :class="operationType === 2 ? 'print' : ''">
+                            <div class="mgr50 print-bottom" style="font-size:18px">
+                                <strong>大庆市工商业融资担保有限公司</strong>
+                                <div class="mgl40 mgt15">
+                                    <p>法定代表人:</p>
+                                    <p class="mgt15">或授权代理人:</p>
+                                    <p class="mgt15 ">&emsp;&emsp;年&emsp;&emsp;&emsp;月&emsp;&emsp;&emsp;日</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 担保函--确认 -->
+            <div v-show="operationType !== 2">
+                <div v-show="operationType === 1" class="mgt20 left-border fz-16"><p class="c-black mgl10">审核</p></div>
+                <div v-show="operationType === 3" class="mgt20 left-border fz-16"><p class="c-black mgl10">放款确认</p></div>
+                <div class="shadow radius10 mgt20 mgb20 pdr20">
+                    <el-form label-position="right" label-width="80px" class="mgr20 mgt20 mab20">
+                        <el-form-item label="审核意见">
+                            <el-input
+                                class="mgl20 wd100"
+                                type="textarea"
+                                :rows="3"
+                                placeholder="请输入审核意见"
+                                v-model="letterValue.auditOpinion">
+                            </el-input>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+            <!-- 查看时的按钮 -->
+            <div class="fj-center">
+                <el-button v-show="operationType === 2" type="primary bd0" class="mgt20" round @click="downloadLetter">导出</el-button>
+            </div>
+            <!-- 确认按钮 -->
+            <div class="df fj-end mgt30 mgb30">
+                <!-- <el-button v-if="sendShow"  class="mgr20" @click="toImage($refs.imageTofile)">抄送</el-button>  -->
+                <div class="df" v-show="operationType === 3">
+                    <el-button plain type="primary" class="mgr20" round @click="backTo">返回</el-button>
+                    <el-button type="success" class="mgr20" round v-preventReClick @click="sumbitOpinion('提交',2)">提交</el-button>
+                    <el-button type="warning" class="mgr20" round v-preventReClick @click="sumbitOpinion('驳回',4)">驳回</el-button>
+                </div>
+            </div>
+            
+            <!-- 审核流程和业务流程 -->
+            <processTemp></processTemp>
+        </div>
+    </div>
+</template>
+
+<script>
+ 
+import {loanNoticeDetail, loanNoticeList, loanNoticeListExport, updateLoanNotice, exportLoanNotice,copySend ,designFrom } from '../../utils/api'
+var myToken = sessionStorage.getItem('token')
+import core from '../../utils/core'
+export default {
+    props:{
+        
+    },
+    data() {
+        return {
+            loans: true,
+            visible:false,
+            businessId:'', 
+            //流程状态
+            processValue: '',
+            processStatus: [{
+                label: '审核中',
+                value: 1
+            },
+            {
+                label: '已审核',
+                value: 2
+            },
+            {
+                label: '已驳回',
+                value: 4
+            }],
+            keyWord: '',//搜索框
+            pageNo: 1,
+            pageNum: 10,
+            totals: 1,
+            totalPage: 1,
+
+            processData: [],//列表数据
+            multipleSelection: [],//选择的数据
+            guaranteeMoney: '',//担保金额
+            //担保函数据
+            letterValue: {
+                businessId: '',//业务id
+                bank: '',//银行
+                name: '',//客户名称
+                passingTime: '',//贷审会日期
+                loanMoney: '',//担保金额
+                guaranteeMoney: '',//担保金额转格式
+                file: '',//会议纪要
+                loanTern: '',//担保期限
+                auditOpinion: '',//审核意见
+                roleId: '' //角色id
+            },
+            operationType: 1,//列表操作状态
+            letterOfPrint: true,//打印按钮的显隐
+            printWidth: false,//打印时改变打印内容宽度
+            imgFileList: [],
+            imgListT: [],
+            checkImgList:[],
+            inspectionPhotos: [], //图片列表
+            uploadHeaders:{token:myToken},//上传带token
+            fromData:[],// 表单值
+            upDataArr:[],// 表单限制文件
+            screenshot:false,//截图时的加载
+            sendShow:false
+
+        };
+    },
+    mounted(){
+        // 判断是否由待处理哪里跳转过来的，每次触发后删除
+        if(sessionStorage.getItem('decideJump')){
+            let data = JSON.parse(sessionStorage.getItem('decideJump'))
+            data.id = data.detailId
+            data.status = data.approveStatus
+            data.handleStatus = data.operatingStatus
+            // 判断操作
+            this.loans = false //判断详情显示
+            if(data.btn==='确认'){
+                this.operationType = 3
+                this.loanNoticeDetail(data)// 取得详情
+                this.operationType = operationType //列表操作状态
+                this.$store.commit("loansData", { loans: this.loans });
+                this.$store.commit("letterData", { operationType: this.operationType, letterValue: this.letterValue });
+            }
+            sessionStorage.removeItem('decideJump')
+            // 读取抄送状态，当前是否处于抄送查看,
+        }else if(sessionStorage.getItem('fromCopyTo')){
+            let data = JSON.parse(sessionStorage.getItem('fromCopyTo'))
+            this.loans = false // 进入详情
+            this.operationType = 2
+            // 判断是否来自个人效率非抄送列表
+            if(sessionStorage.getItem('private')==='查看'){
+                this.loanNoticeDetail(data)
+            }else{
+                let that = this
+                this.letterValue = {
+                    businessId: data.businessId,//业务id
+                    bank: data.bank,//银行
+                    name: data.clientName,//客户名称
+                    passingTime: data.passingTime,//贷审会日期
+                    loanMoney: data.loanMoney,//担保金额
+                    guaranteeMoney: that.core.fMoney3(data.loanMoney),//担保金额转格式
+                    file: '',//会议纪要
+                    loanTern: data.loanTern,//担保期限
+                    auditOpinion: '',//审核意见
+                    roleId: ''//角色id
+                }
+            }
+            // this.disable = true// 禁用表单
+            // this.messageDetail(data.detailId)
+        }else{
+            // 读取列表的显示状态
+            this.loans = this.$store.state.guarantee.loans
+            this.operationType = this.$store.state.guarantee.operationType
+            this.letterValue = this.$store.state.guarantee.letterValue
+    
+            this.getProcess(this.pageNo,this.keyWord,this.processValue)
+        }
+    },
+    watch:{
+        loans:function(val){
+            if(val){
+                this.getProcess(this.pageNo,this.keyWord,this.processValue)
+            }else{
+                // this.designFrom()// 动态表单
+            }
+            this.$store.commit("loansData", { loans: this.loans });
+        },
+     
+    },
+    methods: {
+        // 详情
+        loanNoticeDetail(data){
+
+            loanNoticeDetail({id:data.detailId}).then(res=>{
+                let that = this,data = res.data.data
+                this.letterValue = {
+                    businessId: data.businessId,//业务id
+                    bank: data.bank,//银行
+                    name: data.clientName,//客户名称
+                    passingTime: data.passingTime,//贷审会日期
+                    loanMoney: data.loanMoney,//担保金额
+                    guaranteeMoney: that.core.fMoney3(data.loanMoney),//担保金额转格式
+                    file: '',//会议纪要
+                    loanTern: data.loanTern,//担保期限
+                    auditOpinion: '',//审核意见
+                    roleId: ''//角色id
+                }
+            })
+        },
+        // 担保函-列表
+        async getProcess(val, search, status){
+            let params = {
+                page: val,
+                size: this.pageNum,
+                customerNumberOrName: search,
+                status: status
+            }
+            let res = await loanNoticeList(params)
+            res.data.list.map(e =>{
+                e.statusText = this.core.auditStatus(e.status).text
+                e.color = this.core.auditStatus(e.status).color
+                e.businessText = this.core.businessType(e.businessStatus).text
+                e.businessColor = this.core.businessType(e.businessStatus).color
+                e.operatingText = this.core.operationType(e.operatingStatus).text
+                e.operatingColor = this.core.operationType(e.operatingStatus).color
+            })
+            this.processData = res.data.list
+            this.totals = res.data.totalCount
+            if(res.data.totalPage !== 0 ){
+                this.totalPage = res.data.totalPage
+            }
+        },
+        handleSizeChange(val) {
+            this.pageNum = val
+            this.getProcess(1)
+        },
+        //列表数据导出
+        download(){
+            // if(this.multipleSelection.length == 0){
+            //     this.$message.error('请先选择财务确认数据！');
+            // }else{
+            let id = sessionStorage.getItem('userID')
+            let str = this.multipleSelection.map(e => e.id)
+            // window.open(`${loanNoticeListExport}?ids=${str?str:[]}&userId=`+id)
+            let downloadElement = document.createElement('a');
+            downloadElement.href = `${loanNoticeListExport}?ids=${str?str:[]}&userId=`+id;
+            downloadElement.download = '业务申请导出文件'; //下载后文件名
+            document.body.appendChild(downloadElement);
+            downloadElement.click(); //点击下载
+            document.body.removeChild(downloadElement); //下载完成移除元素 
+            // }
+        },
+        downloadLetter(){
+            window.open(`${exportLoanNotice}?businessId=${this.letterValue.businessId}&roleId=${this.letterValue.roleId}`)
+        },
+        getRowKeys(row) {
+            return row.Id;
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        currentChange(val){
+            this.getProcess(val)
+        },
+        //列表操作-详情
+        letterData(row,operationType){
+            this.loans = false //判断详情显示
+            this.operationType = operationType //列表操作状态
+            //担保函数据
+            this.letterValue = {
+                businessId: row.businessId,//业务id
+                bank: row.bank,//银行
+                name: row.name,//客户名称
+                passingTime: row.passingTime,//贷审会日期
+                loanMoney: this.core.fMoney(row.loanMoney),//担保金额
+                guaranteeMoney : this.core.fMoney3(row.loanMoney),//担保金额转格式
+                file: row.file,//会议纪要
+                loanTern: row.loanTern,//担保期限
+                auditOpinion: row.auditOpinion,//审核意见
+                roleId: row.roleId //角色id
+            }
+          
+            this.$store.commit("loansData", { loans: this.loans });
+            this.$store.commit("letterData", { operationType: this.operationType, letterValue: this.letterValue });
+        },
+        // 打印功能
+        toPrint(){
+            this.letterOfPrint = false
+            this.printWidth = true
+            this.$nextTick(()=>{
+                if(this.letterOfPrint === false){
+                    var oldstr = document.body.innerHTML
+                    // 截取需要打印的部分
+                    var newstr = document.getElementsByClassName('printOrder-data')[0].innerHTML
+                    document.body.innerHTML = newstr  // 打印区域赋值给body
+                    window.print();//调用打印
+                    // 还原：将旧的页面储存起来，当打印完成后返给给页面。
+                    document.body.innerHTML = oldstr
+                    window.location.reload()  
+                }
+            })
+        },
+        // 提交审核意见
+        sumbitOpinion(text,type){
+            this.$confirm(`确定要${text}该审核意见吗？`, '提示', {
+                type: 'warning'
+            }).then(() => {
+                if(type == 4 && this.letterValue.auditOpinion == ''){
+                    return this.$message.error("请先填写审核意见！")
+                }
+                let params = {
+                    auditOpinion: this.letterValue.auditOpinion,
+                    businessId: this.letterValue.businessId,
+                    status: type
+                }
+                updateLoanNotice(params).then(res => {
+                    // if(type===2){
+                    //     this.toImage(this.$refs.imageTofile)
+                    // }else{
+                        this.$message.success(`${text}成功`);
+                        this.loans = true
+                        this.getProcess(this.pageNo,this.keyWord,this.processValue)
+                    // }
+                }).catch(res => {});
+            }).catch(() => {});
+        },
+        // 返回
+        backTo(){
+            this.loans = true
+        },
+        auditProgressPop(data){
+            this.visible=true
+            this.businessId = data.row.businessId
+        }, 
+        // 页面元素转图片
+        toImage(el) {
+            copySend({
+                businessId:this.letterValue.businessId,
+                detailId:this.letterValue.id,
+                processId:10
+            }).then(res=>{
+                if(res.code===10000){
+                    this.screenshot = false                    
+                    this.loans = true
+                    // this.getProcess(this.pageNo,this.keyWord,this.processValue)
+                }
+            }).catch(err=>{
+                this.screenshot = false
+            })
+        },
+        compare(key){ // 用于对象数组排序
+            return function(value1,value2){
+                let val1=value1[key];
+                let val2=value2[key];
+                return val1-val2;
+            }
+        },
+        designFrom(){// 表单数据接口
+            designFrom({processId:10}).then(res=>{
+                this.fromData = res.data 
+                this.fromData.sort(this.compare('id'))
+                // this.upDataArr = []
+                // this.upDataArr.push(this.fromData[24].ifRequired,this.fromData[25].ifRequired,this.fromData[26].ifRequired,this.fromData[27].ifRequired,this.fromData[28].ifRequired,this.fromData[29].ifRequired,this.fromData[30].ifRequired,this.fromData[31].ifRequired,this.fromData[32].ifRequired )
+            })
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@page{//清除打印时的页眉页脚--通过margin挤掉
+    size: auto A4 landscape;//设置打印规定的纸张大小
+    margin: 3mm 1cm 3mm;
+}
+@media print {
+    .print-top{
+        padding-top: 3.5cm;
+        padding-bottom: 1cm;
+    }
+    .print-text{
+        padding-top: .5cm;
+        margin-left: 1.5cm;
+        margin-right: 1.5cm;
+    }
+    .border-b{
+        border-bottom:0
+    }
+    .print-bottom{
+        margin-top: 4.5cm;
+    }
+
+}
+.print-main{
+    word-break: break-all;
+}
+.before-print{
+    display: block;
+}
+.do-print{
+    display: none;
+}
+.print{
+    margin-top: 200px;
+}
+.print-btn{
+    position:absolute;
+    right:0;
+    top: 15px;
+}
+.letter-key{
+    font-weight: bold;
+    margin: 0 10px;
+}
+
+.up-img-box{
+    position: relative;
+    height: 250px;
+    width: 250px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+    .img{
+        margin-top: 20px;
+        height: 150px;
+        width: 200px;
+    }
+    p{
+        width: 95%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        text-align: center;
+    }
+    .checkbox{
+        width: 25px;
+        overflow: hidden;
+    }
+    .close-img{
+        position: absolute;
+        top:3.5%;
+        right: 5%;
+        width: 25px;
+        height: 25px;
+        background: url('../../assets/img/flowNoChecked.png') no-repeat center;
+        background-size: 22px;
+        cursor: pointer;
+        &:hover{
+            background-size: 24px;
+        }
+    }
+}
+
+.sorter {
+    // position: absolute;
+    // bottom: 5%;
+    // right: 3%;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 50px;
+    padding-bottom: 20px;
+    p {
+        color: #cccccc;
+        position: absolute;
+        left: 50%;
+        top: 28%;
+        transform: translate(-50%,-50%);
+        font-size: 16px;
+    }
+}
+.wrap{
+    
+    // min-height: 664px;
+    min-height: 100%;
+}
+/deep/.el-table .cell{
+    padding: 0;
+}
+/deep/ .el-table-column--selection .cell{
+    padding-left: 0;
+    padding-right: 0;
+}
+/deep/ .el-checkbox__inner {
+    background: transparent;
+    border: 0;
+    background-image: url('../../assets/img/btn_per_un.png');
+    background-size: cover;
+    width: 20px;
+    height: 20px;
+}
+/deep/ .cell .el-checkbox__input .el-checkbox__inner {
+    background-color: transparent;
+    background-image: url('../../assets/img/btn_per_un.png');
+    background-size: cover;
+    width: 20px;
+    height: 20px;
+    border: 0;
+    transition: none;
+}
+/deep/ .el-checkbox {
+    width: 20px;
+    height: 20px;
+    transition: none;
+}
+/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+    transition: none;
+    width: 20px;
+    height: 20px;
+}
+/deep/ .el-checkbox__input .el-checkbox__inner::after {
+    background: transparent;
+    content: '';
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    transition: none;
+}
+
+// 选中后
+
+/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: transparent;
+    transition: none;
+    width: 20px;
+    height: 20px;
+}
+/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after {
+    content: '';
+    background: transparent;
+    background-image: url('../../assets/img/btn_pre.png');
+
+    width: 20px;
+    border: 0;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: none;
+}
+/deep/ .el-table .cell {
+    text-align: center;
+    text-overflow: clip;
+}
+
+// 分页器样式
+
+/deep/ .el-pager li {
+    border-radius: 50% !important;
+    height: 30px;
+    width: 30px;
+    min-height: 25px !important;
+    min-width: 25px !important;
+    background: #f2f2f2;
+    line-height: 30px;
+    text-align: center;
+    padding: 0;
+}
+/deep/ .el-form-item {
+    margin-bottom: 0;
+}
+/deep/ .el-pagination.is-background .btn-prev {
+    background-color: transparent;
+}
+/deep/ .el-form-item__label {
+    color: #00b9ff;
+    padding: 0;
+}
+/deep/ .el-input__inner {
+    border-radius: 20px;
+    // background: #fafafa;
+}
+/deep/ .el-pagination .btn-next .el-icon {
+    color: #00b9ff;
+    font-size: 20px;
+}
+/deep/ .el-pagination .btn-prev .el-icon {
+    color: #00b9ff;
+    font-size: 20px;
+}
+
+/deep/ .el-table td {
+    padding: 0px;
+   padding: 8px 0;
+}
+/deep/ .el-table th > .cell {
+    
+    padding: 0;
+}
+/deep/ .el-pagination.is-background .btn-next {
+    background-color: transparent;
+}
+/deep/ .el-input__inner {
+    border-radius: 20px;
+    height: 35px !important;
+    line-height: 35px;
+}
+</style>

src/components/common/Payment.vue

@@ -0,0 +1,894 @@
+<template>
+    <div>
+        <!-- 担保函 -->
+        <div v-show="loans" class="mat20 bgw shadow radius10 list-box">
+            <div class="flex-between search-box">
+                <div class="flex-center">
+                    <p class="fz-16 mgr10 font-blue mgl20">流程状态</p>
+                    <el-select v-model="processValue" clearable placeholder="请选择" @change="getProcess(1,keyWord,processValue)">
+                        <el-option v-for="item in processStatus" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div class="mgr10 flex-center">
+                    <el-input class="ht40" clearable v-model="keyWord" @keyup.enter.native="getProcess(1,keyWord,processValue)" placeholder="业务编号/客户名称" ></el-input>
+                    <el-button class="ht40 btn-pdt mgl10" type="primary" plain round   @click="download">导出</el-button>
+                    <el-button class="ht40 mgl10 btn-pdt" type="primary" round @click="getProcess(1,keyWord,processValue)">查询</el-button>
+                </div>
+            </div>
+            <div class="pdlr20 wrap self">
+                <el-table :data="processData" stripe header-align="center" class="" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+                    <el-table-column type="selection" width="30" align="center" :reserve-selection="true"></el-table-column>
+                    <el-table-column type="index" width="40" label="序号" align="center"></el-table-column>
+                    <el-table-column prop="businessCode" label="业务编号" width="100" align="center"></el-table-column>
+                    <el-table-column prop="name" label="客户名称" align="center"></el-table-column>
+                    <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
+                    <el-table-column prop="businessType" label="业务类别" align="center"></el-table-column>
+                    <el-table-column prop="loanMoney" label="担保额度(万元)" align="center"></el-table-column>
+                    <el-table-column prop="loanTern" label="担保期限" align="center"></el-table-column>
+                    <el-table-column prop="passingTime" label="贷审会日期" align="center"></el-table-column>
+                    <el-table-column label="审批状态" align="center">
+                        <template slot-scope="scope">
+                            <span :style="'color:'+scope.row.color">{{scope.row.statusText}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="业务状态" align="center">
+                        <template slot-scope="scope">
+                            <span :style="'color:'+scope.row.businessColor">{{ scope.row.businessText }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作状态" align="center">
+                        <template slot-scope="scope">
+                            <span :style="'color:'+scope.row.operatingColor">{{ scope.row.operatingText }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="200" align="center">
+                        <template slot-scope="scope">
+                            <el-button type="text" @click="letterData(scope.row,2)">查看</el-button>
+                            <!-- 确认A/B角/资产部 -->
+                            <el-button type="text" v-show="scope.row.operatingText !== '已处理'&&scope.row.businessStatus !== 3" @click="letterData(scope.row,3)">确认</el-button>
+                            <el-button type="text" @click="auditProgressPop(scope)">审核进度</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>   
+            <AuditProgress v-if="visible" :visible.sync="visible" :businessId.sync="businessId"></AuditProgress>
+
+
+            <div class="pagination sorter self">
+                <p v-if="processData.length!==0">{{ pageNo }}/{{ totalPage }}页</p>
+                <el-pagination 
+                    :hide-on-single-page="processData.length===0"
+                    background 
+                    :page-sizes="[10, 15, 20, 50]"
+                    :page-size="10"
+                    layout="total,prev,pager,next,jumper,sizes" 
+                    @current-change="currentChange" 
+                    :current-page.sync="pageNo" 
+                    :total="totals"
+                    @size-change="handleSizeChange">
+                </el-pagination>
+            </div>
+        </div>
+        <!-- 担保函展示 -->
+        <div v-if="!loans" v-loading="screenshot" ref="imageTofile">
+            <!-- <img :src="jietu" alt=""> -->
+            <div class="shadow radius10 mgt20 pdb10">
+                <div class="mga printOrder-data wd95">
+                    <div class="self tx-center border-b pdt20 pdb20 print-top">
+                        <p style="font-size:20px;font-weight: 900;">担保承诺函</p>
+                        <!-- 仅查看时显示 -->
+                        <el-button v-show="operationType === 2 && letterOfPrint" class="print-btn" @click="toPrint()">打印</el-button>
+                    </div>
+                    <div class="mgt40 pdl30 pdr30 print-text">
+                        <strong style="font-size:18px">{{letterValue.bank}} :</strong>
+                        <!-- 生成/确定 担保函的文字--处于非放款通知的情况下 -->
+                        <div>
+                            <p v-show="operationType !== 2" class="fz-20 mgt20" style="line-height:40px">
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据<span class="letter-key">{{letterValue.name}}</span>的贷款担保申请，&nbsp;经我公司项目贷审会研究，&nbsp;同意为其在贵行申请的贷款提供担保，&nbsp;特向贵行提供承诺。&nbsp;本承诺系我公司同意与贵行签订保证合同的意向，&nbsp;一切权利义务以保证合同为准！
+                            </p>
+                            <!-- 查看担保函的文字 -->
+                            <p v-show="operationType === 2" class="mgt20" style="line-height:40px;font-size:18px">
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据<span class="letter-key">{{letterValue.name}}</span>的贷款担保申请，&nbsp;经我公司<span class="letter-key">{{letterValue.passingTime}}</span>项目贷审会研究，&nbsp;同意为其在贵行申请的贷款提供<span class="letter-key">{{letterValue.loanMoney}}</span>万元&emsp;担保，期限<span class="letter-key">{{letterValue.loanTern}}</span>，&nbsp;特向贵行提供承诺。&nbsp;本承诺系我公司同意与贵行签订保证合同的意向，&nbsp;一切权利义务以保证合同为准！
+                            </p>
+                        </div>
+                        <!-- 生成担保函时展示 -->
+                        <div class="mgl40 mgt20" v-show="operationType !== 2">
+                            <div class="df">
+                                <p class="fz-16 guarantee-Text-wd not-zoom">客户名称：</p>
+                                <p class="fz-16">{{letterValue.name}}</p>
+                            </div>
+                            <div class="df mgt10">
+                                <p class="fz-16 guarantee-Text-wd not-zoom">贷审会日期：</p>
+                                <p class="fz-16">{{letterValue.passingTime}}</p>
+                            </div>
+                            <div class="df mgt10">
+                                <p class="fz-16 guarantee-Text-wd not-zoom">担保金额（万元）：</p>
+                                <p class="fz-16" v-text="`${letterValue.loanMoney} (大写：${letterValue.guaranteeMoney})`"></p>
+                            </div>
+                            <div class="df mgt10">
+                                <p class="fz-16 guarantee-Text-wd not-zoom">担保期限：</p>
+                                <p class="fz-16">{{letterValue.loanTern}}</p>
+                            </div>
+                        </div>
+                        <div class="wd100 flex-end-content mgb20" :class="operationType === 2 ? 'print' : ''">
+                            <div class="mgr50 print-bottom" style="font-size:18px">
+                                <strong>大庆市工商业融资担保有限公司</strong>
+                                <div class="mgl40 mgt10">
+                                    <p>法定代表人:</p>
+                                    <p class="mgt10">或授权代理人:</p>
+                                    <p class="mgt10 ">&emsp;&emsp;年&emsp;&emsp;&emsp;月&emsp;&emsp;&emsp;日</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 查看时的按钮 -->
+            <div class="fj-center">
+                <el-button v-show="operationType === 2" type="primary bd0" class="mgt20" round @click="downloadLetter">导出</el-button>
+            </div>
+            <div>
+                <div class="mgt20 left-border fz-16"><p class="c-black mgl10">附件</p></div>
+                <div class="shadow radius10 mgt20 pdr20 flex-center">
+                    <div v-for="(item,index) in fileList" :key="index" class="mgr20 mgt20 mab20">
+                        <span class="fz-16 mgl20 cur" @click="preview(item)">{{`附件${index+1}`}}</span>
+                    </div>
+                </div>
+            </div>
+            <!-- 上传图片 -->
+            <div class="df mat20">
+                <div v-show="operationType !== 2 && isFgJl !== 1" class="df flex-align-center mgr30">
+                    <div class="mgr30 df mgl30">
+                        <!-- <span class="c-red">*</span> -->
+                        <!-- 查看/确认切换 -->
+                        <p class="fz-14 font-blue">上传银行回单</p>
+                    </div>
+                    <el-upload
+                        v-show="operationType !== 2 && isFgJl !== 1"
+                        multiple
+                        class="flex-align-center"
+                        ref="file-imgup"
+                        :action="uploadUrl"
+                        :on-success="upImgFile"
+                        :file-list="imgFileList"
+                        :headers="uploadHeaders"
+                        :show-file-list="false"
+                        :on-preview="handlePreview"
+                        >
+                        <el-button slot="trigger" size="small" type="primary" class="mgr20" >新增图片</el-button>
+                    </el-upload>
+                </div>
+                <el-button slot="trigger" size="small" type="warning" class="mgl40" @click="deleteImgs" v-show="operationType !== 2 && isFgJl !== 1">批量删除</el-button>
+            </div>
+            <div class="df mgb20">
+                <!-- 图片展示 -->
+                <el-checkbox-group class="df" style="flex-wrap:wrap" v-model="checkImgList" @change="imgCheckbox">
+                    <div class="mgl30 mgt20 up-img-box shadow radius10" v-for="(item,index) in imgListT" :key="index" v-show="item">
+                        <img class="img mgt10" :src="item.url"  @click="seeImg(item.url)">
+                        <!-- <p class="fz-14 mgt10">{{item.name}}</p> -->
+                        <div class="checkbox mgt10" v-show="operationType !== 2">
+                            <el-checkbox :label="index"></el-checkbox>
+                        </div>
+                        <!-- 可能需要在查看的状态下隐藏 -->
+                        <div v-show="operationType !== 2 && isFgJl !== 1" class="close-img" @click="delImgOne(index)"></div>
+                    </div>
+                </el-checkbox-group>
+            </div> 
+            <!-- 担保函--确认 -->
+            <div v-show="operationType !== 2">
+                <div v-show="operationType === 1" class="mgt20 left-border fz-16"><p class="c-black mgl10">审核</p></div>
+                <div v-show="operationType === 3" class="mgt20 left-border fz-16"><p class="c-black mgl10">财务确认</p></div>
+                <div class="shadow radius10 mgt20 mgb20 pdr20">
+                    <el-form label-position="right" label-width="80px" class="mgr20 mgt20 mab20">
+                        <el-form-item label="审核意见">
+                            <el-input
+                                class="mgl20 wd100"
+                                type="textarea"
+                                :rows="3"
+                                placeholder="请输入审核意见"
+                                v-model="letterValue.auditOpinion">
+                            </el-input>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+            
+            <!-- 当前页面预览弹框 -->
+            <el-dialog :visible.sync="showPreviewImg"  style="margin-top:-7vh">
+                <div class=" tx-center">
+                    <img :src="previewImg" class="el-image-viewer__img" style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;">
+                </div>
+            </el-dialog>
+            <!-- 预览pdf -->
+            <pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
+            <!-- 确认按钮 -->
+            <div class="df fj-end mgt30 mgb30">
+                <!-- <el-button  class="mgr20" v-if="sendShow" @click="toImage($refs.imageTofile)">抄送</el-button>  -->
+
+                <div class="df"  v-show="operationType === 3">
+                    <el-button plain type="primary" class="mgr20" round @click="backTo">返回</el-button>
+                    <el-button type="success" class="mgr20" v-preventReClick round @click="sumbitOpinion('提交',2)">提交</el-button>
+                    <el-button type="warning" class="mgr20" v-preventReClick round @click="sumbitOpinion('驳回',4)">驳回</el-button>
+                </div>
+            </div>
+            <!-- 审核流程和业务流程 -->
+            <processTemp></processTemp>
+        </div>
+    </div>
+</template>
+
+<script>
+import { paymentDetail,paymentList, excelExportPayment, updatePayment, exportGuaranteeLetter ,copySend ,designFrom} from '../../utils/api'
+import axios from 'axios';
+ 
+import core from '../../utils/core'
+
+// var myToken = sessionStorage.getItem('token')
+export default {
+    data() {
+        return {
+            uploadUrl:axios.defaults.baseURL +'/api-guarantee/dg-apply-amount-info/uploadFile',
+            loans: true,
+            //流程状态
+            processValue: '',
+            processStatus: [{
+                label: '审核中',
+                value: 1
+            },
+            {
+                label: '已审核',
+                value: 2
+            },
+            {
+                label: '已驳回',
+                value: 4
+            }],
+            keyWord: '',//搜索框
+            pageNo: 1,
+            pageNum: 10,
+            totals: 1,
+            totalPage: 1,
+
+            processData: [],//列表数据
+            multipleSelection: [],//选择的数据
+            guaranteeMoney: '',//担保金额
+            //担保函数据
+            letterValue: {
+                businessId: '',//业务id
+                bank: '',//银行
+                name: '',//客户名称
+                passingTime: '',//贷审会日期
+                loanMoney: '',//担保金额
+                guaranteeMoney: '',//担保金额转格式
+                file: '',//会议纪要
+                loanTern: '',//担保期限
+                auditOpinion: '',//审核意见
+                imgFile: '' //图片列表
+            },
+            operationType: 1,//列表操作状态
+            letterOfPrint: true,//打印按钮的显隐
+            printWidth: false,//打印时改变打印内容宽度
+            imgFileList: [],
+            imgListT: [],
+            checkImgList:[],
+            inspectionPhotos: [], //图片列表
+            uploadHeaders:{},//上传带token
+            isFgJl: '',
+            fileList: [],//附件文件列表
+            showPreviewImg: false,//图片预览
+            previewImg:'',//查看预览文件
+            pdfVisible: false,//pdf弹框
+            pdfSrc: '',//pdf文件
+            visible:false,
+            businessId:'', 
+            fromData:[],// 表单值
+            upDataArr:[],// 表单限制文件
+            screenshot:false,//截图时的加载
+            jietu:'',
+            sendShow:false
+
+        };
+    },
+    created(){
+        this.uploadHeaders = {token:sessionStorage.getItem('token')}
+    },
+    mounted(){
+        // 判断是否由待处理哪里跳转过来的，每次触发后删除
+        if(sessionStorage.getItem('decideJump')){
+            let data = JSON.parse(sessionStorage.getItem('decideJump'))
+            data.id = data.detailId
+            data.status = data.approveStatus
+            data.handleStatus = data.operatingStatus
+            // 判断操作
+            this.loans = false //判断详情显示
+            if(data.btn==='确认'){
+                this.operationType = 3
+                this.paymentDetail(data)// 取得详情
+                this.operationType = operationType //列表操作状态
+                this.isFgJl = data.isFgJl //是否是法规部经理
+                
+                this.$store.commit("isFgJlData", { isFgJl: data.isFgJl });
+                this.$store.commit("loansData", { loans: this.loans });
+                this.$store.commit("letterData", { operationType: this.operationType, letterValue: this.letterValue });
+            }
+            sessionStorage.removeItem('decideJump')
+            // 读取抄送状态，当前是否处于抄送查看,
+        }else if(sessionStorage.getItem('fromCopyTo')){
+            let data = JSON.parse(sessionStorage.getItem('fromCopyTo'))
+            this.loans = false // 进入详情
+            this.operationType = 2
+            // 判断是否来自个人效率非抄送列表
+            if(sessionStorage.getItem('private')==='查看'){
+                this.paymentDetail(data)
+            }else{
+                let that = this
+                this.letterValue = {
+                    businessId: data.businessId,//业务id
+                    bank: data.bank,//银行
+                    name: data.clientName,//客户名称
+                    passingTime: data.passingTime,//贷审会日期
+                    loanMoney: data.loanMoney,//担保金额
+                    guaranteeMoney: that.core.fMoney3(data.loanMoney),//担保金额转格式
+                    file: '',//会议纪要
+                    loanTern: data.loanTern,//担保期限
+                    auditOpinion: '',//审核意见
+                    roleId: ''//角色id
+                }
+            }
+            // this.disable = true// 禁用表单
+            // this.messageDetail(data.detailId)
+        }else{
+            // 读取列表的显示状态
+            this.loans = this.$store.state.guarantee.loans
+            this.operationType = this.$store.state.guarantee.operationType
+            this.letterValue = this.$store.state.guarantee.letterValue
+            this.isFgJl = this.$store.state.guarantee.isFgJl
+            if(this.$store.state.guarantee.imgListT){
+                this.imgListT = this.$store.state.guarantee.imgListT
+            }
+            if(this.$store.state.guarantee.fileList){
+                this.fileList = this.$store.state.guarantee.fileList
+            }
+            this.getProcess(this.pageNo,this.keyWord,this.processValue)
+        }
+
+
+    },
+    watch:{
+        loans:function(val){
+            if(val){
+                this.getProcess(this.pageNo,this.keyWord,this.processValue)
+            }else{
+                // this.designFrom()// 动态表单
+            }
+            this.$store.commit("loansData", { loans: this.loans });
+        },
+        
+    },
+    methods: {
+        // 详情接口--个人效率专用
+        paymentDetail(data){
+            paymentDetail({id:data.detailId}).then(res=>{
+                let that = this,data = res.data.data
+                this.letterValue = {
+                    businessId: data.businessId,//业务id
+                    bank: data.bank,//银行
+                    name: data.clientName,//客户名称
+                    passingTime: data.passingTime,//贷审会日期
+                    loanMoney: data.loanMoney,//担保金额
+                    guaranteeMoney: that.core.fMoney3(data.loanMoney),//担保金额转格式
+                    file: '',//会议纪要
+                    loanTern: data.loanTern,//担保期限
+                    auditOpinion: '',//审核意见
+                    roleId: ''//角色id
+                }
+                if(data.imgFile){
+                    let newArr = data.imgFile.split(",")
+                    let arrList = [];
+                    newArr.map(e =>{
+                        let j = {};
+                        j.url = e
+                        arrList.push(j);
+                    })
+                    this.imgListT = arrList
+                }else{
+                    this.imgListT = []
+                }
+                if(data.file) {this.fileList = data.file.split(",") }else{this.fileList = []}
+        
+            
+                this.$store.commit("fileData", { fileList: this.fileList });
+                this.$store.commit("imgListTData", { imgListT: this.imgListT });
+            })
+        },
+        // 担保函-列表
+        async getProcess(val, search, status){
+            let params = {
+                page: val,
+                size: this.pageNum,
+                customerNumberOrName: search,
+                status: status
+            }
+            let res = await paymentList(params)
+            res.data.list.map(e =>{
+                e.statusText = this.core.auditStatus(e.status).text
+                e.color = this.core.auditStatus(e.status).color
+                e.businessText = this.core.businessType(e.businessStatus).text
+                e.businessColor = this.core.businessType(e.businessStatus).color
+                e.operatingText = this.core.operationType(e.operatingStatus).text
+                e.operatingColor = this.core.operationType(e.operatingStatus).color
+            })
+            this.processData = res.data.list
+            // this.processData = [{name:1}]
+            this.totals = res.data.totalCount
+            if(res.data.totalPage !== 0 ){
+                this.totalPage = res.data.totalPage
+            }
+
+        },
+        handleSizeChange(val) {
+            this.pageNum = val
+            this.getProcess(1)
+        },
+        //列表数据导出
+        download(){
+            // if(this.multipleSelection.length == 0){
+            //     this.$message.error('请先选择财务确认数据！');
+            // }else{
+            let id = sessionStorage.getItem('userID')
+            let str = this.multipleSelection.map(e => e.id)
+            let downloadElement = document.createElement('a');
+            downloadElement.href = `${excelExportPayment}?ids=${str?str:[]}&userId=`+id;
+            downloadElement.download = '业务申请导出文件'; //下载后文件名
+            document.body.appendChild(downloadElement);
+            downloadElement.click(); //点击下载
+            document.body.removeChild(downloadElement); //下载完成移除元素 
+            // }
+        },
+        downloadLetter(){
+            window.open(`${exportGuaranteeLetter}?businessId=${this.letterValue.businessId}&roleId=68`)
+        },
+        getRowKeys(row) {
+            return row.Id;
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        currentChange(val){
+            this.getProcess(val)
+            // this.page = +val;
+        },
+        //列表操作-详情
+        letterData(row,operationType){
+            this.loans = false //判断详情显示
+            this.operationType = operationType //列表操作状态
+            this.isFgJl = row.isFgJl //是否是法规部经理
+            //担保函数据
+            this.letterValue = {
+                businessId: row.businessId,//业务id
+                bank: row.bank,//银行
+                name: row.name,//客户名称
+                passingTime: row.passingTime,//贷审会日期
+                loanMoney: this.core.fMoney(row.loanMoney),//担保金额
+                guaranteeMoney : this.core.fMoney3(row.loanMoney),//担保金额转格式
+                file: row.file,//会议纪要
+                loanTern: row.loanTern,//担保期限
+                auditOpinion: row.auditOpinion,//审核意见
+                imgFile: row.imgFile, //图片列表
+                isFgJl: row.isFgJl
+            }
+            if(row.imgFile){
+                let newArr = row.imgFile.split(",")
+                let arrList = [];
+                newArr.map(e =>{
+                    let j = {};
+                    j.url = e
+                    arrList.push(j);
+                })
+                this.imgListT = arrList
+            }else{
+                this.imgListT = []
+            }
+            if(row.file) {this.fileList = row.file.split(",") }else{this.fileList = []}
+        
+            
+            this.$store.commit("fileData", { fileList: this.fileList });
+            this.$store.commit("imgListTData", { imgListT: this.imgListT });
+            this.$store.commit("isFgJlData", { isFgJl: row.isFgJl });
+            this.$store.commit("loansData", { loans: this.loans });
+            this.$store.commit("letterData", { operationType: this.operationType, letterValue: this.letterValue });
+        },
+        // 预览文件item
+        preview(item){
+            let len = item.length,type = item.substring(len-4,len)
+            // 检查后四位，进行格式匹配
+            if(['.jpg','jpeg','.png','.gif','.svg','.psd'].includes(type.toLowerCase())){
+                this.showPreviewImg = true
+                this.previewImg = item 
+            }else if(['.pdf'].includes(type.toLowerCase())){
+                this.pdfVisible = true,//pdf弹框
+                this.pdfSrc = item //pdf文件
+            }else if('.mp4'.includes(type.toLowerCase())){
+                core.downMp4(url,this.URLsubstring(url))
+            }
+            else{
+                window.open(`https://view.officeapps.live.com/op/view.aspx?src=${item}`)
+            }
+        },
+        // 打印功能
+        toPrint(){
+            this.letterOfPrint = false
+            this.printWidth = true
+            this.$nextTick(()=>{
+                if(this.letterOfPrint === false){
+                    var oldstr = document.body.innerHTML
+                    // 截取需要打印的部分
+                    var newstr = document.getElementsByClassName('printOrder-data')[0].innerHTML
+                    document.body.innerHTML = newstr  // 打印区域赋值给body
+                    window.print();//调用打印
+                    // 还原：将旧的页面储存起来，当打印完成后返给给页面。
+                    document.body.innerHTML = oldstr
+                    window.location.reload()  
+                }
+            })
+        },
+        // 提交审核意见
+        sumbitOpinion(text,type){
+            this.$confirm(`确定要${text}该审核意见吗？`, '提示', {
+                type: 'warning'
+            }).then(() => {
+                if(type == 4 && this.letterValue.auditOpinion == ''){
+                    return this.$message.error("请先填写审核意见！")
+                }
+                let imgFile = this.imgListT.map(e =>e.url).join()
+                let params = {
+                    auditOpinion: this.letterValue.auditOpinion,
+                    businessId: this.letterValue.businessId,
+                    status: type,
+                    imgFile: imgFile
+                }
+                updatePayment(params).then(res => {
+                    this.$message.success(`${text}成功`);
+                    let btnPermissionsStr = sessionStorage.getItem("now-roleBtn").split(',');
+                    if(btnPermissionsStr.includes('68')){
+                        // if(type===2){
+                        //     this.toImage(this.$refs.imageTofile)
+                        // }else{
+                            this.loans = true
+                        // }
+                    }else{
+                        this.loans = true
+                    }
+                }).catch(res => {});
+            }).catch(() => {});
+        },
+        // 返回
+        backTo(){
+            this.loans = true
+        },
+        // 担保-调查-图片上传成功钩子
+        upImgFile(response, file, filelist){
+            let arr = []
+            this.imgListT = this.$store.state.guarantee.imgListT
+            if(response.success){
+                this.inspectionPhotos.push(response.data)
+                let otherList =JSON.parse(JSON.stringify(response.data)) 
+                arr.push({name:file.name,url:otherList})
+            }
+            this.imgListT.push(arr[0]) //展示用
+        },
+        // 图片批量删除功能---担保部--附件
+        deleteImgs(){
+            let len = this.checkImgList.length
+            this.checkImgList.sort(function(a, b){return a - b})
+            if(len > 0){
+                for(let i=len-1;i>=0;i--){
+                    this.imgListT.splice(this.checkImgList[i],1)
+                    this.inspectionPhotos.splice(this.checkImgList[i],1)
+                }
+                this.checkImgList=[]
+            }else{
+                this.$message.error("请先选中图片")
+            }
+        },
+        imgCheckbox(){
+        },
+        // 点击图片进行预览
+        seeImg(url){
+            let len = url.length,type = url.substring(len-4,len)
+            // 检查后四位，进行格式匹配
+            if(['.jpg','jpeg','.png','.gif','.svg','.psd'].includes(type.toLowerCase())){
+                this.showPreviewImg = true
+                this.previewImg = url 
+            }else{
+                window.open('https://view.officeapps.live.com/op/view.aspx?src='+url)
+            }
+        },
+        // 图片删除-x图标--担保部删除图片
+        delImgOne(index){
+            this.checkImgList = []
+            this.imgListT.splice(index,1)
+            if(this.inspectionPhotos){
+                this.inspectionPhotos.splice(index,1)
+            }
+        },
+        auditProgressPop(data){
+            this.visible=true
+            this.businessId = data.row.businessId
+        }, 
+        // 页面元素转图片
+        toImage(el) {
+            copySend({
+                businessId:this.letterValue.businessId,
+                detailId:this.letterValue.id,
+                processId:9
+            }).then(res=>{
+                if(res.code===10000){
+                    this.loans = true
+                    this.screenshot = false
+                }
+            }).catch(err=>{
+                this.screenshot = false
+            })
+        },
+        compare(key){ // 用于对象数组排序
+            return function(value1,value2){
+                let val1=value1[key];
+                let val2=value2[key];
+                return val1-val2;
+            }
+        },
+        designFrom(){// 表单数据接口
+            designFrom({processId:9}).then(res=>{
+                this.fromData = res.data 
+                this.fromData.sort(this.compare('id'))
+                // this.upDataArr = []
+                // this.upDataArr.push(this.fromData[24].ifRequired,this.fromData[25].ifRequired,this.fromData[26].ifRequired,this.fromData[27].ifRequired,this.fromData[28].ifRequired,this.fromData[29].ifRequired,this.fromData[30].ifRequired,this.fromData[31].ifRequired,this.fromData[32].ifRequired )
+            })
+        },
+        // 上传后点击预览文件钩子
+        handlePreview(file) {
+            if(['image/jpg','image/jpeg','image/png','image/gif','image/svg','image/psd'].includes(file.raw.type)){
+                this.showPreviewImg = true
+                this.previewImg=file.response.data[0] 
+                // pdf调用插件
+            }else if(file.raw.type==="application/pdf"){
+                window.open(file.response.data[0])
+            }else if(file.raw.type==='video/mp4'){
+                core.downMp4(file.response.data[0],this.URLsubstring(file.response.data[0]))
+            }
+            else{
+                window.open('https://view.officeapps.live.com/op/view.aspx?src='+file.response.data[0])
+            }
+        },
+         URLsubstring(url){// 剪切img-url的名称
+            if(url){
+               return url.substring(59,url.length)
+            }
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@page{//清除打印时的页眉页脚--通过margin挤掉
+    size: auto A4 landscape;//设置打印规定的纸张大小
+    margin: 3mm 1cm 3mm;
+}
+@media print {
+    .print-top{
+        padding-top: 3.5cm;
+        padding-bottom: 1cm;
+    }
+    .print-text{
+        padding-top: .5cm;
+        margin-left: 1.5cm;
+        margin-right: 1.5cm;
+    }
+    .border-b{
+        border-bottom:0
+    }
+    .print-bottom{
+        margin-top: 4.5cm;
+    }
+}
+.print{
+    margin-top: 200px;
+}
+.print-btn{
+    position:absolute;
+    right:0;
+    top: 15px;
+}
+.letter-key{
+    font-weight: bold;
+    margin: 0 10px;
+}
+.guarantee-Text-wd{
+    width: 180px;
+}
+
+.up-img-box{
+    position: relative;
+    height: 250px;
+    width: 250px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+    .img{
+        margin-top: 20px;
+        height: 150px;
+        width: 200px;
+    }
+    p{
+        width: 95%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        text-align: center;
+    }
+    .checkbox{
+        width: 25px;
+        overflow: hidden;
+    }
+    .close-img{
+        position: absolute;
+        top:3.5%;
+        right: 5%;
+        width: 25px;
+        height: 25px;
+        background: url('../../assets/img/flowNoChecked.png') no-repeat center;
+        background-size: 22px;
+        cursor: pointer;
+        &:hover{
+            background-size: 24px;
+        }
+    }
+}
+
+.sorter {
+    // position: absolute;
+    // bottom: 5%;
+    // right: 3%;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 50px;
+    padding-bottom: 20px;
+    p {
+        color: #cccccc;
+        position: absolute;
+        left: 50%;
+        top: 28%;
+        transform: translate(-50%,-50%);
+        font-size: 16px;
+    }
+}
+.wrap{
+    
+    // min-height: 664px;
+    min-height: 100%;
+}
+/deep/.el-table .cell{
+    padding: 0;
+}
+/deep/ .el-table-column--selection .cell{
+    padding-left: 0;
+    padding-right: 0;
+}
+/deep/ .el-checkbox__inner {
+    background: transparent;
+    border: 0;
+    background-image: url('../../assets/img/btn_per_un.png');
+    background-size: cover;
+    width: 20px;
+    height: 20px;
+}
+/deep/ .cell .el-checkbox__input .el-checkbox__inner {
+    background-color: transparent;
+    background-image: url('../../assets/img/btn_per_un.png');
+    background-size: cover;
+    width: 20px;
+    height: 20px;
+    border: 0;
+    transition: none;
+}
+/deep/ .el-checkbox {
+    width: 20px;
+    height: 20px;
+    transition: none;
+}
+/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+    transition: none;
+    width: 20px;
+    height: 20px;
+}
+/deep/ .el-checkbox__input .el-checkbox__inner::after {
+    background: transparent;
+    content: '';
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    transition: none;
+}
+
+// 选中后
+
+/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: transparent;
+    transition: none;
+    width: 20px;
+    height: 20px;
+}
+/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after {
+    content: '';
+    background: transparent;
+    background-image: url('../../assets/img/btn_pre.png');
+
+    width: 20px;
+    border: 0;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: none;
+}
+/deep/ .el-table .cell {
+    text-align: center;
+    text-overflow: clip;
+}
+
+// 分页器样式
+
+/deep/ .el-pager li {
+    border-radius: 50% !important;
+    height: 30px;
+    width: 30px;
+    min-height: 25px !important;
+    min-width: 25px !important;
+    background: #f2f2f2;
+    line-height: 30px;
+    text-align: center;
+    padding: 0;
+}
+/deep/ .el-form-item {
+    margin-bottom: 0;
+}
+/deep/ .el-pagination.is-background .btn-prev {
+    background-color: transparent;
+}
+/deep/ .el-form-item__label {
+    color: #00b9ff;
+    padding: 0;
+}
+/deep/ .el-input__inner {
+    border-radius: 20px;
+    // background: #fafafa;
+}
+/deep/ .el-pagination .btn-next .el-icon {
+    color: #00b9ff;
+    font-size: 20px;
+}
+/deep/ .el-pagination .btn-prev .el-icon {
+    color: #00b9ff;
+    font-size: 20px;
+}
+
+/deep/ .el-table td {
+    padding: 0px;
+   padding: 8px 0;
+}
+/deep/ .el-table th > .cell {
+    
+    padding: 0;
+}
+/deep/ .el-pagination.is-background .btn-next {
+    background-color: transparent;
+}
+/deep/ .el-input__inner {
+    border-radius: 20px;
+    height: 35px !important;
+    line-height: 35px;
+}
+</style>

src/components/common/PlatformLog.vue

@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="radius10 shadow main">
+            <div class="flex-between mgt20 mgb20 mglr10">
+                <div class="df-ac">
+                    <p class="fz-16 mgr10 font-blue not-zoom">添加时间</p>
+                    <el-date-picker
+                        v-model="searchForm.date"
+                        align="right"
+                        unlink-panels
+                        type="daterange"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        format="yyyy-MM-dd"
+                        value-format="yyyy-MM-dd"
+                        @change="selectTime"
+                        clearable
+                    >
+                    </el-date-picker>
+                </div>
+                <div class="flex-center">
+                    <el-input placeholder="搜索员工姓名/员工工号" class="cusSearch" v-model="searchForm.keyword" clearable></el-input>
+                    <el-button type="primary" round @click="search">查询</el-button>
+                </div>
+            </div>
+            <Background-list :check="false" :nowPage="pageNo" :totalPage="totalPage" :tableData="logData" @getPaging="currentChange" :totalCount="totalCount" @getSize="getSize">
+                <template v-slot:tableData>
+                    <el-table-column prop="empName" label="姓名" align="center"></el-table-column>
+                    <el-table-column prop="jobNumber" label="工号" align="center"></el-table-column>
+                    <el-table-column label="所属部门" align="center">
+                        <template slot-scope="scope">
+                            <span class="ellipsis">{{ scope.row.deptName }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="posName" label="职位" align="center"></el-table-column>
+                    <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
+                    <el-table-column prop="createTime" label="添加日期"  min-width="120" align="center"></el-table-column>
+                    <el-table-column prop="loginNum" label="登录次数" align="center"></el-table-column>
+                    <el-table-column prop="newestTime" label="最后登录时间"  min-width="120" align="center"></el-table-column>
+                </template>
+            </Background-list>
+            <!-- <el-table :data="logData" class="mat20" stripe header-align="center" :row-key="getRowKeys">
+                <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
+                <el-table-column prop="empName" label="姓名" align="center"></el-table-column>
+                <el-table-column prop="jobNumber" label="工号" align="center"></el-table-column>
+                <el-table-column label="所属部门" align="center">
+                    <template slot-scope="scope">
+                        <span class="ellipsis">{{scope.row.deptName}}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="posName" label="职位" align="center"></el-table-column>
+                <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
+                <el-table-column prop="createTime" label="添加日期" align="center"></el-table-column>
+                <el-table-column prop="loginNum" label="登录次数" align="center"></el-table-column>
+                <el-table-column prop="newestTime" label="最后登录时间" align="center"></el-table-column>
+            </el-table>
+            <div class="pagination">
+                <p class="pagination_pageNumber">{{`${pageNo}/${totalPage}页`}}</p>
+                <el-pagination background @current-change="currentChange" :current-page="pageNo" layout="total, prev, pager, next" :total="totals">
+                </el-pagination>
+            </div> -->
+        </div>
+    </div>
+</template>
+
+<script>
+import { loginLogList } from '../../utils/api';
+export default {
+    data() {
+        return {
+            searchForm: {
+                date: '',
+                startTime: '',
+                endTime: '',
+                keyword: ''
+            },
+            logData: [],
+            pageNo: 1,
+            pageNumber: 10,
+            totals: 1,
+            totalPage: 1,
+            totalCount:10
+        };
+    },
+    mounted() {
+        this.getData();
+    },
+    methods: {
+        // 查询平台日志列表
+        async getData() {
+            let res = await loginLogList({
+                page: this.pageNo,
+                size: this.pageNumber,
+                startTime: this.searchForm.startTime,
+                endTime: this.searchForm.endTime,
+                jobNumberOrName: this.searchForm.keyword
+            });
+            this.logData = res.data.list;
+            this.totals = res.data.totalCount;
+            this.totalPage = res.data.totalPage;
+            this.totalCount = res.data.totalCount
+        },
+        getSize(val){
+            this.pageNo=1
+            this.pageNumber=val
+            this.getData()
+        },
+        getRowKeys(row) {
+            return row.id;
+        },
+        currentChange(val) {
+            this.pageNo = val;
+            this.getData();
+        },
+        // 选择时间
+        selectTime(val) {
+            if (val) {
+                this.searchForm.startTime = val[0];
+                this.searchForm.endTime = val[1];
+            } else {
+                this.searchForm.startTime = '';
+                this.searchForm.endTime = '';
+            }
+        },
+        search() {
+            this.pageNo = 1;
+            this.getData();
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url('../../assets/css/common.scss');
+.cusSearch {
+    margin-right: 16px;
+}
+.main{
+    min-height: 755px;
+}
+/deep/ .el-table td{
+    padding: 15px!important;
+}
+</style>
+
+

src/components/common/RetrievePsd.vue

@@ -0,0 +1,230 @@
+<template>
+    <div>
+        <!-- 找回密码card -->
+        <div class="Login_view Retrieve_view">
+            <div class="flex-between login_title">
+                <div class="Steps_view flex-center">
+                    <p class="Steps1"></p>
+                    <p class="Steps1_node"></p>
+                    <p class="Steps2"></p>
+                    <p class="Steps2_node"></p>
+                </div>
+                <i class="el-icon-close" @click="gohome"></i>
+            </div>
+
+            <div class="Steps_title">
+                <span>找回密码</span>
+                <span class="Steps2_span">重新设置密码</span>
+            </div>
+
+            <el-form :model="param" :rules="rules" ref="param" label-width="0px" class="login_form">
+                <el-form-item prop="username">
+                    <p>手机号</p>
+                    <el-input v-model="param.username" placeholder="请输入手机号" maxlength="11"></el-input>
+                </el-form-item>
+
+                <el-form-item prop="code" class="item_password">
+                    <p>验证码</p>
+                    <div class="flex-between">
+                        <el-input placeholder="请输入验证码" v-model="param.code" maxlength="6" @keyup.enter.native="nextStep('param')"></el-input>
+                        <el-button type="primary" round @click="countDown(bindPhoneDisabled)" class="code-btn">{{content}}</el-button>
+                    </div>
+                </el-form-item> 
+
+                <div class="login-btn">
+                    <el-button class="wd100" type="primary" round @click="nextStep('param')">下一步</el-button>
+                </div>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import bus from './bus';
+import { verifyMobile,phoneCode } from '../../utils/api';
+export default {
+    data() {
+        return {
+            param: {
+                username: '',
+                code: ''
+            },
+            rules: {
+                username: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+                code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
+            },
+            checked: false,
+            content: '发送验证码',
+            canClick: true, //添加canClick
+            totalTime: 60,
+             bindPhoneDisabled: true,
+        };
+    },
+    watch:{
+        'param.username': function (val) {
+            if (this.fnChangePhone(val)) {
+                this.bindPhoneDisabled = false;
+            }
+        },
+    },
+    methods: {
+        async getCode(){
+            let res = phoneCode({mobile:this.param.username})
+            if(res.code===10000){
+                this.$message.success('已发送')
+            }
+        },
+         // 发送验证码--弹框专属
+        countDown(val, from) {
+            if (val === false) {
+                if (!this.canClick) return; 
+                this.getCode();
+                this.canClick = false;
+                this.content = this.totalTime + 's后重新发送';
+                let clock = window.setInterval(() => {
+                    this.totalTime--;
+                    this.content = this.totalTime + 's后重新发送';
+                    if (this.totalTime < 0) {
+                        window.clearInterval(clock);
+                        this.content = '重新发送验证码';
+                        this.totalTime = 60;
+                        this.canClick = true; //这里重新开启
+                    }
+                }, 1000);
+            } else {
+                this.$message.error('请输入正确的手机号');
+                this.bindPhoneDisabled = true;
+            }
+        },
+        // 读取手机号，做一个判断
+        fnChangePhone(str) {
+            if (!str) {
+                return false;
+            }
+            let re = /^1[3456789]\d{9}$/;
+            if (re.test(str)) {
+              return true
+            } else {
+              return false
+            }
+        },
+        nextStep(param){
+            this.$refs.param.validate(valid => {
+                if (valid) {
+                    let newToken = sessionStorage.getItem("token")
+                    sessionStorage.removeItem("token");
+                    verifyMobile({
+                        phoneAccount: this.param.username,
+                        verifyCode: this.param.code
+                    }).then(res => {
+                        this.$emit("nextStep", 3)
+                        bus.$emit('phoneData', this.param)
+                        sessionStorage.setItem("token",newToken);
+                    }).catch(res => {
+                        });
+                }
+            });
+        },
+        gohome(){
+           this.$emit("gohome",1) 
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import url('../../assets/css/common.scss');
+//提取Steps共同样式
+@mixin Steps_node {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%; 
+}
+.Login_view{
+            position: absolute;
+            left: 50%;
+            top: 120px;
+            transform: translate(-50%, 0);
+            background-color: #fff;
+            border-radius: 20px;
+            width: 812px;
+            padding: 52px 0;
+            .login_title{
+                span{
+                    font-size: 26px;
+                    margin-left: 146px;
+                }
+                i{
+                    margin-right: 50px;
+                    color: #666;
+                    font-size: 20px;
+                }
+            }
+            .login_form{
+                margin: 60px 146px 0 146px;
+                p{
+                    margin-bottom: 10px;
+                    font-size: 14px;
+                }
+                .item_password{
+                    margin-top: 40px;
+                }
+                .login-btn{
+                    margin-top: 70px;
+                }
+                .forget_view{
+                    font-size: 14px;
+                }
+                .login-wechat{
+                    text-align: center;
+                    color: #00B9FF;
+                    font-size: 14px;
+                    margin-top: 60px;
+                }
+            }
+        }
+.Retrieve_view{
+    padding: 30px 0 90px 0;
+    .login_title{
+        .Steps_view{
+            margin-left: 146px;
+            .Steps1{
+                height: 1px;
+                width: 28px;
+                background-color: #00B9FF;
+            }
+            .Steps1_node{
+                @include Steps_node;
+                background-color: #00B9FF;
+            }
+            .Steps2{
+                height: 1px;
+                width: 150px;
+                background-color: #ccc;
+            }
+            .Steps2_node{
+                @include Steps_node;
+                background-color: #ccc;
+            }
+        }
+        i{
+            margin-right: 50px;
+            color: #666;
+            font-size: 20px;
+        }
+    }
+    .Steps_title{
+        font-size: 16px;
+        margin-left: 146px;
+        .Steps2_span{
+            margin-left: 70px;
+            color: #ccc;
+        }
+    }
+    .code-btn{
+        margin-left: 20px;
+    }
+}
+</style>
+
+