doway-coms 2.2.18 → 2.2.21

package/packages/BaseToolStatus/src/index.vue

@@ -1,389 +1,389 @@
-<template>
-    <div class="status-bar">
-      <div class="status-bar-btns">
-        <a-button
-          class="status-bar-btn"
-          size="small"
-          :type="btn.isPrimary === true ? 'primary' : 'default'"
-          v-show="btn.visible === true"
-          :loading="btn.isLoading"
-          @click="btnClick(btn)"
-          v-for="btn in internalBtns"
-          :key="btn.code"
-        >{{ btn.caption }}</a-button
-        >
-      </div>
-      <div class="status-bar-status">
-        <div class="el-status-btn-wrapper">
-          <div
-            v-for="(status, index) in statuss"
-            :key="index"
-            style="display:inline-block"
-          >
-            <a-button
-              v-if="!status.notButton"
-              class="status-primary"
-              :class="
-                 status.value === (workFlowStatus?workFlowStatus:formRow.status)
-                  ? 'current-status'
-                  : 'inactive-status'
-              "
-              type="text"
-            >
-              {{ status.caption }}</a-button
-              >
-            <div
-              v-else
-              class="progressBar"
-              :class="
-                formRow.value == 'progress' ? 'progressBar' : 'progressBarStop'
-              "
-            >
-              <div class="inProgressBar" :style="{ width: status.progress }">
-                <div class="text">
-                  {{ status.progress }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </template>
-  
-  <script>
- import { Button } from 'ant-design-vue'
-  export default {
-    name: 'BaseToolStatus',
-    components:{
-       'a-button': Button
-    },
-    data() {
-      return {
-        internalWorkFlowBtns: [],
-        internalBtns: [],
-        internalStatuss: [],
-        internalFormRow: {}
-      }
-    },
-    props: {
-      workFlowBtns: {
-        type: Array,
-        default: () => {
-          return []
-        }
-      },
-      actionData: {
-        type: Object,
-        default: () => {
-          return {}
-        },
-        deep: true
-      },
-      workFlowStatus: {
-        // 对象信息
-        type: String,
-        default: ''
-      },
-      objectName: {
-        // 对象信息
-        type: String,
-        default: 'artRout'
-      },
-      formRow: {
-        type: Object,
-        default: function() {
-          return {}
-        }
-      },
-      btns: {
-        // 按钮
-        type: Array,
-        default: function() {
-          return []
-        }
-      },
-      statuss: {
-        // 状态栏
-        type: Array,
-        default: function() {
-          return []
-        }
-      }
-    },
-    watch: {
-      workFlowBtns: {
-        handler: function(newVal) {
-          this.internalWorkFlowBtns = newVal
-        },
-        deep: true
-      },
-      btns: {
-        handler: function(newVal) {
-          this.internalBtns = newVal
-        },
-        deep: true
-      }
-    },
-    created() {
-      this.internalWorkFlowBtns = this.workFlowBtns
-      this.internalBtns = this.btns
-    },
-    methods: {
-      btnClick(btn) {
-        this.$emit(btn.code, btn)
-      }
-    }
-  }
-  </script>
-  <style lang="scss" scoped>
-  .progressBarStop {
-    background-color: #fafafa;
-    width: 90px;
-    height: 32px;
-    margin-bottom: -12px !important;
-    .inProgressBar {
-      background: 0;
-    }
-  }
-  .progressBar {
-    position: relative;
-    background-color: #fafafa;
-    width: 90px;
-    height: 32px;
-    margin-bottom: -12px !important;
-  }
-  .progressBar:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: #ccc;
-    width: 1px;
-    height: 32px;
-  }
-  .inProgressBar {
-    width: 90px;
-    height: 32px;
-    background: -webkit-repeating-linear-gradient(
-      30deg,
-      #83a7cf 0,
-      #83a7cf 10px,
-      #93b3d6 10px,
-      #93b3d6 20px
-    );
-    -webkit-animation: move 5s linear infinite;
-  }
-  .text {
-    position: absolute;
-    top: 20%;
-    left: 40%;
-    color: black;
-    font-size: 14px;
-  }
-  @-webkit-keyframes move {
-    0% {
-      background-position: 0 0;
-    }
-    100% {
-      background-position: -200px 0;
-    }
-  }
-  //所在状态状态提示样式
-  .current-status {
-    color: #010101 !important;
-    font-weight: bold;
-    background-color: #ffc56b !important;
-  }
-  //所在状态状态指向提示样式
-  .current-status::before {
-    content: " ";
-    display: block;
-    position: absolute;
-    top: 0px;
-    left: auto;
-    bottom: auto;
-    right: -12px;
-    border-top: 16px solid transparent;
-    border-bottom: 18px solid transparent;
-    border-right: none;
-    border-left: 11px solid #ffc56b !important;
-    z-index: 10;
-  }
-  //所在状态状态指向提示样式
-  .current-status::after {
-    content: " ";
-    display: block;
-    position: absolute;
-    top: 0px;
-    left: auto;
-    bottom: auto;
-    right: -11px;
-    border-left: 11px solid #ffc56b !important;
-    border-top: 16px solid transparent;
-    border-bottom: 18px solid transparent;
-    border-right: none;
-    z-index: 11;
-  }
-  //未使用的状态提示样式
-  .inactive-status {
-    background-color: #f9f9f9;
-  }
-  //未使用的状态指向提示样式
-  .inactive-status::before {
-    content: " ";
-    display: block;
-    position: absolute;
-    top: 0px;
-    left: auto;
-    bottom: auto;
-    right: -12px;
-    border-top: 16px solid transparent;
-    border-bottom: 18px solid transparent;
-    border-right: none;
-    border-left: 11px solid #ccc !important;
-    z-index: 10;
-  }
-  //未使用的状态指向提示样式
-  .inactive-status::after {
-    content: " ";
-    display: block;
-    position: absolute;
-    top: 0px;
-    left: auto;
-    bottom: auto;
-    right: -11px;
-    border-left: 11px solid #f9f9f9 !important;
-    border-top: 16px solid transparent;
-    border-bottom: 18px solid transparent;
-    border-right: none;
-    z-index: 11;
-  }
-  //状态条样式
-  .status-bar {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid #ccc;
-    border-top: 1px solid #ccc;
-    // padding-top: 1px;
-  
-    padding-left: 8px;
-    // padding-bottom: 1px;
-    // border-left: none;
-    //状态栏高度
-    .status-bar-btns {
-      line-height: 30px;
-      float: left;
-      margin-left: 10px;
-      //状态工作按钮样式
-      .status-bar-btn {
-        // margin-top: 1px;
-        // border-radius: 3px;
-        // height: 28px;
-        // font-size: 12px;
-        // padding: 5px 10px;
-        margin-right: 8px;
-      }
-      //状态工作按钮样式
-      .btn-primary {
-        color: #efefef;
-        background-color: #219bff;
-        cursor: pointer;
-        // margin-top: 1px;
-      }
-    }
-    //状态提示按钮样式
-    .status-bar-status {
-      overflow: hidden;
-      .el-status-btn-wrapper {
-        overflow: visible;
-        border-left: 1px solid #ccc;
-        // border-bottom: 1px solid #ccc;
-        .el-status-btn {
-          margin-left: 0px !important;
-          color: #000;
-          padding-left: 20px;
-          padding-right: 20px;
-          position: relative;
-          padding-left: 22px;
-          cursor: default;
-          font-size: 11px;
-          background-color: #fff;
-        }
-        .el-status-btn::before {
-          content: " ";
-          display: block;
-          position: absolute;
-          top: 0px;
-          left: auto;
-          bottom: auto;
-          right: -12px;
-          border-top: 16px solid transparent;
-          border-bottom: 18px solid transparent;
-          border-right: none;
-          border-left: 11px solid #ccc !important;
-          z-index: 10;
-        }
-        .el-status-btn::after {
-          content: " ";
-          display: block;
-          position: absolute;
-          top: 0px;
-          left: auto;
-          bottom: auto;
-          right: -11px;
-          border-left: 11px solid white !important;
-          border-top: 16px solid transparent;
-          border-bottom: 18px solid transparent;
-          border-right: none;
-          z-index: 11;
-        }
-        .status-primary {
-          color: #0b0b0b;
-          font-size: 12px;
-          border-radius: 0;
-          background-color: #fafafa;
-          margin-left: 0px !important;
-          padding-left: 20px;
-          padding-right: 20px;
-          position: relative;
-          padding-left: 22px;
-          cursor: default;
-        }
-        .status-primary::before {
-          content: " ";
-          display: block;
-          position: absolute;
-          top: 0px;
-          left: auto;
-          bottom: auto;
-          right: -12px;
-          border-top: 16px solid transparent;
-          border-bottom: 18px solid transparent;
-          border-right: none;
-          border-left: 11px solid #ccc;
-          z-index: 10;
-        }
-  
-        .status-primary::after {
-          content: " ";
-          display: block;
-          position: absolute;
-          top: 0px;
-          left: auto;
-          bottom: auto;
-          right: -11px;
-          border-left: 11px solid #f9f9f9;
-          border-top: 16px solid transparent;
-          border-bottom: 18px solid transparent;
-          border-right: none;
-          z-index: 11;
-        }
-      }
-    }
-  }
-  </style>
-  <style lang="less">
-  @import  '../../styles/default.less';
-  </style>
+<template>
+    <div class="status-bar">
+      <div class="status-bar-btns">
+        <a-button
+          class="status-bar-btn"
+          size="small"
+          :type="btn.isPrimary === true ? 'primary' : 'default'"
+          v-show="btn.visible === true"
+          :loading="btn.isLoading"
+          @click="btnClick(btn)"
+          v-for="btn in internalBtns"
+          :key="btn.code"
+        >{{ btn.caption }}</a-button
+        >
+      </div>
+      <div class="status-bar-status">
+        <div class="el-status-btn-wrapper">
+          <div
+            v-for="(status, index) in statuss"
+            :key="index"
+            style="display:inline-block"
+          >
+            <a-button
+              v-if="!status.notButton"
+              class="status-primary"
+              :class="
+                 status.value === (workFlowStatus?workFlowStatus:formRow.status)
+                  ? 'current-status'
+                  : 'inactive-status'
+              "
+              type="text"
+            >
+              {{ status.caption }}</a-button
+              >
+            <div
+              v-else
+              class="progressBar"
+              :class="
+                formRow.value == 'progress' ? 'progressBar' : 'progressBarStop'
+              "
+            >
+              <div class="inProgressBar" :style="{ width: status.progress }">
+                <div class="text">
+                  {{ status.progress }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+ import { Button } from 'ant-design-vue'
+  export default {
+    name: 'BaseToolStatus',
+    components:{
+       'a-button': Button
+    },
+    data() {
+      return {
+        internalWorkFlowBtns: [],
+        internalBtns: [],
+        internalStatuss: [],
+        internalFormRow: {}
+      }
+    },
+    props: {
+      workFlowBtns: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      },
+      actionData: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+        deep: true
+      },
+      workFlowStatus: {
+        // 对象信息
+        type: String,
+        default: ''
+      },
+      objectName: {
+        // 对象信息
+        type: String,
+        default: 'artRout'
+      },
+      formRow: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      },
+      btns: {
+        // 按钮
+        type: Array,
+        default: function() {
+          return []
+        }
+      },
+      statuss: {
+        // 状态栏
+        type: Array,
+        default: function() {
+          return []
+        }
+      }
+    },
+    watch: {
+      workFlowBtns: {
+        handler: function(newVal) {
+          this.internalWorkFlowBtns = newVal
+        },
+        deep: true
+      },
+      btns: {
+        handler: function(newVal) {
+          this.internalBtns = newVal
+        },
+        deep: true
+      }
+    },
+    created() {
+      this.internalWorkFlowBtns = this.workFlowBtns
+      this.internalBtns = this.btns
+    },
+    methods: {
+      btnClick(btn) {
+        this.$emit(btn.code, btn)
+      }
+    }
+  }
+  </script>
+  <style lang="scss" scoped>
+  .progressBarStop {
+    background-color: #fafafa;
+    width: 90px;
+    height: 32px;
+    margin-bottom: -12px !important;
+    .inProgressBar {
+      background: 0;
+    }
+  }
+  .progressBar {
+    position: relative;
+    background-color: #fafafa;
+    width: 90px;
+    height: 32px;
+    margin-bottom: -12px !important;
+  }
+  .progressBar:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: #ccc;
+    width: 1px;
+    height: 32px;
+  }
+  .inProgressBar {
+    width: 90px;
+    height: 32px;
+    background: -webkit-repeating-linear-gradient(
+      30deg,
+      #83a7cf 0,
+      #83a7cf 10px,
+      #93b3d6 10px,
+      #93b3d6 20px
+    );
+    -webkit-animation: move 5s linear infinite;
+  }
+  .text {
+    position: absolute;
+    top: 20%;
+    left: 40%;
+    color: black;
+    font-size: 14px;
+  }
+  @-webkit-keyframes move {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: -200px 0;
+    }
+  }
+  //所在状态状态提示样式
+  .current-status {
+    color: #010101 !important;
+    font-weight: bold;
+    background-color: #ffc56b !important;
+  }
+  //所在状态状态指向提示样式
+  .current-status::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0px;
+    left: auto;
+    bottom: auto;
+    right: -12px;
+    border-top: 16px solid transparent;
+    border-bottom: 18px solid transparent;
+    border-right: none;
+    border-left: 11px solid #ffc56b !important;
+    z-index: 10;
+  }
+  //所在状态状态指向提示样式
+  .current-status::after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0px;
+    left: auto;
+    bottom: auto;
+    right: -11px;
+    border-left: 11px solid #ffc56b !important;
+    border-top: 16px solid transparent;
+    border-bottom: 18px solid transparent;
+    border-right: none;
+    z-index: 11;
+  }
+  //未使用的状态提示样式
+  .inactive-status {
+    background-color: #f9f9f9;
+  }
+  //未使用的状态指向提示样式
+  .inactive-status::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0px;
+    left: auto;
+    bottom: auto;
+    right: -12px;
+    border-top: 16px solid transparent;
+    border-bottom: 18px solid transparent;
+    border-right: none;
+    border-left: 11px solid #ccc !important;
+    z-index: 10;
+  }
+  //未使用的状态指向提示样式
+  .inactive-status::after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0px;
+    left: auto;
+    bottom: auto;
+    right: -11px;
+    border-left: 11px solid #f9f9f9 !important;
+    border-top: 16px solid transparent;
+    border-bottom: 18px solid transparent;
+    border-right: none;
+    z-index: 11;
+  }
+  //状态条样式
+  .status-bar {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #ccc;
+    border-top: 1px solid #ccc;
+    // padding-top: 1px;
+  
+    padding-left: 8px;
+    // padding-bottom: 1px;
+    // border-left: none;
+    //状态栏高度
+    .status-bar-btns {
+      line-height: 30px;
+      float: left;
+      margin-left: 10px;
+      //状态工作按钮样式
+      .status-bar-btn {
+        // margin-top: 1px;
+        // border-radius: 3px;
+        // height: 28px;
+        // font-size: 12px;
+        // padding: 5px 10px;
+        margin-right: 8px;
+      }
+      //状态工作按钮样式
+      .btn-primary {
+        color: #efefef;
+        background-color: #219bff;
+        cursor: pointer;
+        // margin-top: 1px;
+      }
+    }
+    //状态提示按钮样式
+    .status-bar-status {
+      overflow: hidden;
+      .el-status-btn-wrapper {
+        overflow: visible;
+        border-left: 1px solid #ccc;
+        // border-bottom: 1px solid #ccc;
+        .el-status-btn {
+          margin-left: 0px !important;
+          color: #000;
+          padding-left: 20px;
+          padding-right: 20px;
+          position: relative;
+          padding-left: 22px;
+          cursor: default;
+          font-size: 11px;
+          background-color: #fff;
+        }
+        .el-status-btn::before {
+          content: " ";
+          display: block;
+          position: absolute;
+          top: 0px;
+          left: auto;
+          bottom: auto;
+          right: -12px;
+          border-top: 16px solid transparent;
+          border-bottom: 18px solid transparent;
+          border-right: none;
+          border-left: 11px solid #ccc !important;
+          z-index: 10;
+        }
+        .el-status-btn::after {
+          content: " ";
+          display: block;
+          position: absolute;
+          top: 0px;
+          left: auto;
+          bottom: auto;
+          right: -11px;
+          border-left: 11px solid white !important;
+          border-top: 16px solid transparent;
+          border-bottom: 18px solid transparent;
+          border-right: none;
+          z-index: 11;
+        }
+        .status-primary {
+          color: #0b0b0b;
+          font-size: 12px;
+          border-radius: 0;
+          background-color: #fafafa;
+          margin-left: 0px !important;
+          padding-left: 20px;
+          padding-right: 20px;
+          position: relative;
+          padding-left: 22px;
+          cursor: default;
+        }
+        .status-primary::before {
+          content: " ";
+          display: block;
+          position: absolute;
+          top: 0px;
+          left: auto;
+          bottom: auto;
+          right: -12px;
+          border-top: 16px solid transparent;
+          border-bottom: 18px solid transparent;
+          border-right: none;
+          border-left: 11px solid #ccc;
+          z-index: 10;
+        }
+  
+        .status-primary::after {
+          content: " ";
+          display: block;
+          position: absolute;
+          top: 0px;
+          left: auto;
+          bottom: auto;
+          right: -11px;
+          border-left: 11px solid #f9f9f9;
+          border-top: 16px solid transparent;
+          border-bottom: 18px solid transparent;
+          border-right: none;
+          z-index: 11;
+        }
+      }
+    }
+  }
+  </style>
+  <style lang="less">
+  @import  '../../styles/default.less';
+  </style>