物料详情，运输详情的组件开发

haoxuan

2023-11-03 21df61612c3af131f495a83bd6c715b6df45b57b

 src/views/dashboard/components/MaterialDetails.vue

@@ -16,23 +16,26 @@
          </div>
        </div>
        <div class="details-b">
          <el-scrollbar always class="scroller">
            <div class="details-b-t">运输详情</div>
            <div class="details-b-b">
          <div class="details-b-t">运输详情</div>

          <div class="details-b-b">
            <el-scrollbar always class="scroller">
              <el-steps finish-status="success" class="steps" direction="vertical">
                <el-step v-for="(item, index) in materialObj.materialFlow" :key="index" icon="">
                  <template #title>
                    {{ item.label }}
                  </template>
                  <template #description>
                    {{ item.date }}
                    {{ item.name }}
                    {{ item.deviceName }}
                    <div class="details-date">{{ item.date }}</div>
                    <div class="details-name">
                      {{ item.name }}
                      <span>{{ item.deviceName }}</span>
                    </div>
                  </template>
                </el-step>
              </el-steps>
            </div>
          </el-scrollbar>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </BaseModal>
@@ -94,7 +97,7 @@
</script>
<style scoped lang="scss">
$status-default: #03d203f0;
$status-running: #f76c0f;
$status-running: #33ccff;
$status-ready: #13235a;
$status-done: #0dfde6;
.details-box {
@@ -145,12 +148,12 @@
      line-height: 30px;
      height: 30px;
      width: 100%;
      margin-bottom: 20px;
    }
    .details-b-b {
      width: 100%;
      height: calc(100% - 30px);
      overflow-x: auto;
      margin-top: -5px;
      height: calc(100% - 60px);
      overflow-y: auto;
      padding: 0 20px;
      .steps {
        height: 100%;
@@ -158,12 +161,33 @@
          width: 16px;
          height: 16px;
        }
        :deep(.el-step__icon.is-text) {
          border-color: $status-running !important;
        }
        :deep(.el-step__icon-inner) {
          display: none !important;
        }
        .el-step__title {
          line-height: 25px;
          font-size: 14px;
          font-size: 18px;
        }
        .el-step__title.is-process {
          color: #a8abb2;
        // .el-step__title.is-process {
        //   color: #a8abb2;
        // }
      }
      .details-date {
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        margin-top: 5px;
      }
      .details-name {
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        margin: 10px 0 20px;
        span {
          margin-left: 15px;
        }
      }
    }