新增AStepItem组件

src/components/detail/AdvancedDetail.vue

@@ -1,14 +1,23 @@
 <template>
   <page-layout title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
-    <detail-list slot="headerContent" class="advanced-detail-header" style="margin-left: 44px;">
+    <detail-list size="small" :col="2" slot="headerContent" style="margin-left: 44px;">
       <detail-list-item term="创建人">曲丽丽</detail-list-item>
-      <detail-list-item term="订购产品">xx服务</detail-list-item>
+      <detail-list-item term="订购产品">XX服务</detail-list-item>
-      <detail-list-item term="订购产品">xx服务</detail-list-item>
+      <detail-list-item term="创建时间">2018-08-07</detail-list-item>
-      <detail-list-item term="订购产品">xx服务</detail-list-item>
+      <detail-list-item term="关联单据"><a>12421</a></detail-list-item>
+      <detail-list-item term="生效日期">2018-08-07 ~ 2018-12-11</detail-list-item>
+      <detail-list-item term="备注">请于两个工作日内确认</detail-list-item>
     </detail-list>
-    <template slot="extra">
+    <a-row slot="extra">
-      2333
+      <a-col :xs="24" :sm="12">
-    </template>
+        <div class="text">状态</div>
+        <div class="heading">待审批</div>
+      </a-col>
+      <a-col :xs="24" :sm="12">
+        <div class="text">订单金额</div>
+        <div class="heading">¥ 568.08</div>
+      </a-col>
+    </a-row>
     <template slot="action">
       <a-button-group style="margin-right: 4px;">
         <a-button>操作</a-button>
@@ -17,6 +26,27 @@
       </a-button-group>
       <a-button type="primary" >主操作</a-button>
     </template>
+    <a-card>
+      <a-steps :current="1" progressDot>
+        <a-step title="创建项目">
+          <a-step-item-group slot="description">
+            <a-step-item title="曲丽丽" icon="dingding-o"/>
+            <a-step-item title="王建豪" icon="dingding-o"/>
+            <a-step-item title="2016-12-12 12:32"/>
+          </a-step-item-group>
+        </a-step>
+        <a-step title="部门初审">
+          <a-step-item-group slot="description">
+            <a-step-item title="周毛毛" icon="dingding-o"/>
+            <a-step-item title="催一下"/>
+          </a-step-item-group>
+        </a-step>
+        <a-step title="财务复核">
+        </a-step>
+        <a-step title="完成">
+        </a-step>
+      </a-steps>
+    </a-card>
   </page-layout>
 </template>
 
@@ -26,19 +56,41 @@ import AButtonGroup from 'vue-antd-ui/es/button/button-group'
 import AButton from 'vue-antd-ui/es/button/button'
 import AIcon from 'vue-antd-ui/es/icon/icon'
 import DetailList from '../tool/DetailList'
+import ARow from 'vue-antd-ui/es/grid/Row'
+import ACol from 'vue-antd-ui/es/grid/Col'
+import ACard from 'vue-antd-ui/es/card/Card'
+import ASteps from 'vue-antd-ui/es/steps/index'
+import AStepItem from '../tool/AStepItem'
 
 const DetailListItem = DetailList.Item
+const AStep = ASteps.Step
+const AStepItemGroup = AStepItem.Group
 
 export default {
   name: 'AdvancedDetail',
-  components: {DetailListItem, DetailList, AIcon, AButton, AButtonGroup, PageLayout}
+  components: {
+    AStepItemGroup,
+    AStepItem,
+    AStep,
+    ASteps,
+    ACard,
+    ACol,
+    ARow,
+    DetailListItem,
+    DetailList,
+    AIcon,
+    AButton,
+    AButtonGroup,
+    PageLayout}
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
-  .advanced-detail-header{
+  .text{
-    .term,.content{
+    color: rgba(0,0,0,.45);
-      padding-bottom: 8px;
   }
+  .heading{
+    color: rgba(0,0,0,.85);
+    font-size: 20px;
   }
 </style>

src/components/tool/AStepItem.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <router-link to="/" style="text-decoration:none;out-line: none; color: #000">
+      <span :style="titleStyle">{{title}}</span>
+      <a-icon :style="iconStyle" :type="icon" />
+    </router-link>
+  </div>
+</template>
+
+<script>
+import AIcon from 'vue-antd-ui/es/icon/icon'
+
+const Group = {
+  name: 'AStepItemGroup',
+  render (h) {
+    return h(
+      'div',
+      {attrs: {style: 'text-align: center; margin-top: 8px'}},
+      [h('div', {attrs: {style: 'text-align: left; display: inline-block;'}}, [this.$slots.default])]
+    )
+  }
+}
+
+export default {
+  name: 'AStepItem',
+  Group: Group,
+  components: {AIcon},
+  props: ['title', 'icon', 'link', 'titleStyle', 'iconStyle']
+}
+</script>
+
+<style scoped>
+
+</style>