z暂存

src/components/globalComponents/Hamburger/index.js

@@ -1,2 +0,0 @@
-import Main from './main.vue'
-export default Main

src/components/globalComponents/Hamburger/main.vue

@@ -1,46 +0,0 @@
-<template>
-  <div style="padding: 0 15px;" @click="toggleClick">
-    <svg
-      :class="{ 'is-active': isActive }"
-      class="hamburger"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-    >
-      <path
-        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
-      />
-    </svg>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Hamburger',
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    toggleClick() {
-      this.$emit('toggleClick')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.hamburger {
-  display: inline-block;
-  vertical-align: middle;
-  width: 20px;
-  height: 20px;
-}
-
-.hamburger.is-active {
-  transform: rotate(180deg);
-}
-</style>

src/components/globalComponents/github-corner/index.js

@@ -1,2 +0,0 @@
-import Main from './main.vue'
-export default Main

src/components/globalComponents/github-corner/main.vue

@@ -1,63 +0,0 @@
-<template>
-  <a
-    href="https://github.com/PanJiaChen/vue-element-admin"
-    target="_blank"
-    class="github-corner"
-    aria-label="View source on Github"
-  >
-    <svg
-      width="80"
-      height="80"
-      viewBox="0 0 250 250"
-      style="fill: #40c9c6; color: #fff"
-      aria-hidden="true"
-    >
-      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
-      <path
-        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
-        fill="currentColor"
-        style="transform-origin: 130px 106px"
-        class="octo-arm"
-      />
-      <path
-        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
-        fill="currentColor"
-        class="octo-body"
-      />
-    </svg>
-  </a>
-</template>
-<script>
-export default {
-  name: "GithubCorner",
-};
-</script>
-<style scoped>
-.github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out;
-}
-
-@keyframes octocat-wave {
-  0%,
-  100% {
-    transform: rotate(0);
-  }
-  20%,
-  60% {
-    transform: rotate(-25deg);
-  }
-  40%,
-  80% {
-    transform: rotate(10deg);
-  }
-}
-
-@media (max-width: 500px) {
-  .github-corner:hover .octo-arm {
-    animation: none;
-  }
-  .github-corner .octo-arm {
-    animation: octocat-wave 560ms ease-in-out;
-  }
-}
-</style>

src/components/globalComponents/process-time-line/main.vue

@@ -1,18 +1,45 @@
 <template>
-  <!-- <div class=""> -->
-  <!-- 123456 -->
-  <el-timeline reverse>
-   
-    <el-timeline-item  v-for="(item, index) in options"
-        :key="item.time + index" :timestamp="item.addtime" placement="top">
-      <!-- <el-card> -->
-        <!-- 111 -->
-        <h4>王小虎 {{item.status_name}}</h4>
-        <!-- <p>王小虎 提交于 2018/4/12 20:46</p> -->
-      <!-- </el-card> -->
-    </el-timeline-item>
-  </el-timeline>
-  <!-- </div> -->
+    <div class="processTimeLine">
+    <el-steps
+      direction="vertical"
+      :active="options.length"
+      :space="80"
+      :finish-status="finishStatus"
+      :process-status="finishStatus"
+    >
+      <el-step
+        icon="el-icon-success"
+        v-for="(item, index) in options"
+        :key="item.time + index"
+        :finish-status="finishStatus"
+        :process-status="finishStatus"
+        style="margin: 0 0 0 150px; position: relative"
+      >
+        <div
+          slot="title"
+          style="
+            position: absolute;
+            width: 142px;
+            left: -150px;
+            text-align: right;
+          "
+        >
+          {{ item.status_name }}
+        </div>
+        <div slot="description">
+          <p class="name">
+           操作人： {{ item.action_name?item.action_name:'未知'}}
+          </p>
+          <p class="item">
+            {{ item.action_name?item.action_name:'未知'}}
+          </p>
+          <p class="time">
+            {{ item.addtime }}
+          </p>
+        </div>
+      </el-step>
+    </el-steps>
+  </div>
 </template>
 
 <script>
@@ -44,7 +71,7 @@ export default {
     async getList() {
       console.log(123456);
       if (!this.loading) {
-        this.loading=true
+        this.loading = true;
         this.options = [];
         const res = await asyncRequest.list({
           type: this.type,
@@ -52,11 +79,10 @@ export default {
         });
         if (res && res.code === 0 && res.data) {
           this.options = res.data;
-          // this.recursion(this.options);
         } else {
           this.options = [];
         }
-        this.loading=false
+        this.loading = false;
       }
     },
   },

src/components/globalComponents/status-bar/main.vue

@@ -1,44 +1,18 @@
 <template>
-  <div class="statusBar">
-    <el-steps
-      v-if="options && options.length > 0"
-      direction="vertical"
-      :active="options.length"
-      :space="100"
-      :finish-status="finishStatus"
-      :process-status="finishStatus"
-    >
+  <div class="statusBar" style="padding: 0 0 12px 0;">
+    <el-steps :active="sIndex" align-center>
       <el-step
-        icon="el-icon-success"
-        v-for="item in options"
-        :key="item.title"
-        :finish-status="finishStatus"
-        :process-status="finishStatus"
-        style="margin: 0 0 0 100px; position: relative"
-      >
-        <div
-          slot="title"
-          style="
-            position: absolute;
-            width: 92px;
-            left: -100px;
-            text-align: right;
-          "
-        >
-          {{ item.title }}
-        </div>
-        <div slot="description">
-          <p class="name">
-            {{ item.desc && item.desc.name ? item.desc.name : "" }}
-          </p>
-          <p class="item">
-            {{ item.desc && item.desc.item ? item.desc.item : "" }}
-          </p>
-          <p class="time">
-            {{ item.desc && item.desc.time ? item.desc.time : "" }}
-          </p>
-        </div>
-      </el-step>
+        :title="item.label"
+        :icon="
+          index < sIndex
+            ? 'el-icon-success'
+            : index === sIndex
+            ? 'el-icon-s-check'
+            : ''
+        "
+        v-for="(item, index) in options"
+        :key="item.value + index"
+      ></el-step>
     </el-steps>
   </div>
 </template>
@@ -46,60 +20,31 @@
 <script>
 export default {
   name: "statusBar",
-   props: ["options"],
-
+  props: ["options", "status"],
   /**
    * 属性集合
-   * @param {Boolean}       showModel             : 是否弹出弹窗        必填
-   * @param {Boolean}       once                  : 是否只选一条        非必填
-   * @param {Boolean}       code                  : 仓库CODE           非必填
-   */
-  /**
-   * 事件集合
-   * @searchChange             : 选中值变化调用   抛出选中数据
+   * @param {Array}       options                 : 状态条数组        必填
+   * @param {String}       status                  : 当前状态          必填
    */
+  watch: {
+    newTime: function (val) {
+      if (val) {
+        this.getList();
+      }
+    },
+  },
+  mounted() {
+    this.sIndex = this.options.findIndex((v) => v.value === this.status);
+    console.log(this.sIndex);
+  },
   data() {
     return {
+      sIndex: 0,
     };
   },
-  methods: {
-  
-  },
+  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
-.noAuth {
-  width: 800px;
-  max-width: 100%;
-  margin: 100px auto;
-  text-align: left;
-  .pan-back-btn {
-    background: #008489;
-    color: #fff;
-    border: none !important;
-  }
-  .pan-gif {
-    margin: 0 auto;
-    display: block;
-  }
-  .pan-img {
-    display: block;
-    margin: 0 auto;
-    width: 100%;
-  }
-  .text-jumbo {
-    font-size: 60px;
-    font-weight: 700;
-    color: #484848;
-    padding-top: 45px;
-  }
-  .list-unstyled {
-    padding: 0 0 0 4px;
-    font-size: 14px;
-    li {
-      line-height: 30px;
-    }
-  }
-}
 </style>

src/styles/index.scss

@@ -247,9 +247,9 @@ aside {
   display: block;
   clear: both;
 }
-.el-steps--simple {
-  background: transparent;
-}
+// .el-steps--simple {
+//   background: transparent;
+// }
 
 .code-main {
   float: left;
@@ -539,7 +539,7 @@ aside {
   }
 }
 
-.statusBar {
+.processTimeLine {
   .el-step__head.is-finish {
     color: #e8e8e8 !important;
       border-color: #e8e8e8 !important;

src/views/sellOut/salesOrder/components/order-out-table.vue

@@ -256,7 +256,7 @@ export default {
     async resetForm() {
       // 重置
       await this.$nextTick(() => {
-        console.log(this.$refs.addrForm);
+        // console.log(this.$refs.addrForm);
         // if (this.$refs.addrForm) {
         //   this.$refs.addrForm.resetFields();
         //   this.$refs.addrForm.clearValidate();

src/views/sellOut/salesOrder/detail.vue

@@ -5,7 +5,7 @@
       v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
     >
       <div class="tl" style="padding: 10px 0">
-        <span> {{ status }}----{{ powers }}</span>
+        <!-- <span> {{ status }}----{{ powers }}</span> -->
 
         <el-button
           type="primary"
@@ -44,8 +44,16 @@
           >作废该条信息</el-button
         >
       </div>
-
-      <!-- <el-collapse v-model="activeNames">
+  <status-bar
+            v-if="newTime !== ''"
+            :newTime="newTime"
+            :options="statusOptions"
+            :status="status"
+          />
+      <el-collapse v-model="activeNames">
+        <!-- <el-collapse-item title="审批节点" name="-1">
+        
+        </el-collapse-item> -->
         <el-collapse-item title="销售订单信息" name="0">
           <add-form
             :newTime="newTime"
@@ -73,14 +81,15 @@
             @refresh="initData()"
           />
         </el-collapse-item>
-      </el-collapse> -->
-
-      <process-time-line
-        v-if="newTime !== ''"
-        :newTime="newTime"
-        :type="'XSQRD'"
-        :orderCode="orderCode"
-      />
+        <el-collapse-item title="审批记录" name="10">
+          <process-time-line
+            v-if="newTime !== ''"
+            :newTime="newTime"
+            :type="'XSQRD'"
+            :orderCode="orderCode"
+          />
+        </el-collapse-item>
+      </el-collapse>
     </div>
     <div v-else>
       <no-auth></no-auth>
@@ -122,7 +131,15 @@ export default {
   data() {
     return {
       finishStatus: "finish",
-      activeNames: ["0", "1", "2", "3", "4", "5"],
+      activeNames: ["-1", "0", "1", "2", "3", "4", "5", "10"],
+      statusOptions: [
+        { value: "0", label: "取消" },
+        { value: "1", label: "发起" },
+        { value: "2", label: "反馈物流费" },
+        { value: "3", label: "同意下单" },
+        { value: "4", label: "发货中" },
+        { value: "5", label: "已发货" },
+      ],
       sitem: null,
       orderCode: "",
       status: "",
@@ -155,7 +172,7 @@ export default {
         });
     },
     getNewTime() {
-      this.newTime = new Date().valueOf()+"";
+      this.newTime = new Date().valueOf() + "";
       console.log(this.orderCode);
       console.log(this.newTime);
     },