訂單列表和資料列表（七）

阿新 • • 發佈：2020-08-28

實現的功能

功能	詳述
訂單列表	渲染元件和子路由；佈局；獲取和渲染訂單列表；省市區聯動；時間線物流進度
資料報表	渲染元件和子路由；佈局；ECharts圖表

使用到的Element-ui元件

元件名稱_EN	註冊	備註
Timeline	Vue.use(Timeline)	時間線
TimelineItem	Vue.use(TimelineItem)

使用到的依賴

執行依賴，echarts

一、訂單列表

1.渲染元件和子路由

2.佈局

①麵包屑導航

②卡片檢視

③柵格系統搜尋框

④表格

⑤分頁

3.獲取渲染訂單列表

①獲取訂單列表

②渲染訂單列表

4、修改地址

①對話方塊顯示和隱藏

②渲染表單省市區聯動

<!-- [Order.vue] -->
<el-form
         :model="addressForm"
         :rules="addressFormRules"
         ref="addressFormRef"
         label-width="100px"
         >
    <el-form-item label="省市區縣" prop="address1">
        <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
    </el-form-item>
    <el-form-item label="詳細地址" prop="address2">
        <el-input v-model="addressForm.address2"></el-input>
    </el-form-item>
</el-form>

省市區檔案

// [Order.vue]
import cityData from './citydata.js'

// [Order.vue -> data]
addressForm: {
    address1: [],
    address2: '',
},
cityData,

③清空表單

5、物流進度

①對話方塊顯示和隱藏

②獲取物流資訊

③渲染時間線

<!-- [Order.vue] -->
<!-- 時間線 -->
<el-timeline>
    <el-timeline-item
                      v-for="(activity, index) in progressInfo"
                      :key="index"
                      :timestamp="activity.time"
                      >{{activity.context}}</el-timeline-item>
</el-timeline>

二、資料報表

1.渲染元件和子路由

2.佈局

①麵包屑導航

②卡片檢視

③圖表

// [Report.vue]
// 1 匯入echarts
import echarts from 'echarts'

import _ from 'lodash'

<!-- [Report.vue] -->
<!-- 2 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 750px;height:400px;"></div>

// [Report.vue -> data]
// 需要合併的資料
options: {
    title: {
        text: '使用者來源',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {backgroundColor: '#E9EEF3',},
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
   },
   xAxis: [{boundaryGap: false,},],
   yAxis: [{type: 'value',},],
},

// [Report.vue -> methods]
// 此時頁面上的元素渲染完畢
async mounted() {
    // 3 基於準備好的dom，初始化echarts例項
    var myChart = echarts.init(document.getElementById('main'))

    const { data: res } = await this.$http.get('reports/type/1')
    if (res.meta.status !== 200) {
        return this.$message.error('獲取折線圖資料失敗')
    }
    // 4 指定圖表的配置項和資料
    const result = _.merge(res.data,this.options)

    // 5 使用剛指定的配置項和資料顯示圖表。
    myChart.setOption(result)
},