empty 组件

src/components/empty/README.md

@@ -0,0 +1,15 @@
+#### empty 空状态
+
+##### demo
+
+###### 默认
+``` html
+<empty/>
+```
+
+###### 自定义描述
+``` html
+<empty>
+  <p>自定义描述</p>
+</empty>
+```

src/components/empty/empty.svg

@@ -0,0 +1 @@
+<svg t="1609119920930" class="icon" viewBox="0 0 1706 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10437" width="256" height="256"><path d="M0 851.446623a853.285929 172.553377 0 1 0 1706.571857 0 853.285929 172.553377 0 1 0-1706.571857 0Z" fill="#ECEEF2" p-id="10438"></path><path d="M304.149029 857.135196a92.534118 92.534118 0 0 1-91.775642-92.913356L151.316038 301.361628a27.494769 27.494769 0 0 1 9.480955-21.426958L439.726682 6.883173a27.874007 27.874007 0 0 1 18.961909-6.826287h793.555914a27.30515 27.30515 0 0 1 18.961909 6.067811l277.602356 273.620354a34.131437 34.131437 0 0 1 9.670574 21.806196l-61.057349 462.670593a92.534118 92.534118 0 0 1-91.775642 92.913356z" fill="#E1E5EC" p-id="10439"></path><path d="M242.143585 764.22184a61.815825 61.815825 0 0 0 62.005444 62.005444h1099.790752a60.298872 60.298872 0 0 0 60.678111-61.057349l61.057348-452.241542H1076.467604l-2.844287 18.961909a223.371294 223.371294 0 0 1-66.177064 126.096699 217.87234 217.87234 0 0 1-150.178323 60.867729 221.285484 221.285484 0 0 1-216.924245-187.343666l-3.033906-18.961909H180.32776z" fill="#F4F5F7" p-id="10440"></path><path d="M202.133956 282.02048h447.121826a11.377146 11.377146 0 0 1 9.860193 11.187527 197.203859 197.203859 0 1 0 394.407718 0 10.618669 10.618669 0 0 1 10.049812-11.187527h442.570968L1251.675648 29.827084h-792.607818z" fill="#FFFFFF" p-id="10441"></path><path d="M1117.994186 338.147733l378.290095-0.568858-56.316872 405.974483-38.871914-0.948095 53.662204-371.08457-342.831325 1.327334z" fill="#FFFFFF" p-id="10442"></path></svg>

src/components/empty/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="empty">
+    <img src="./empty.svg"/>
+    <slot v-if="$slots.default"/>
+    <p v-else>{{desc}}</p>
+  </div>
+</template>
+<script>
+import tempalteManager from '@/views/categroyManager/specialSetup/tempalteManager.vue'
+export default {
+  components: { tempalteManager },
+  name: 'empty',
+  props: {
+    desc: {
+      type: String,
+      default: '暂无数据'
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .empty{
+    text-align: center;
+    >img {
+      width: 100px;
+    }
+    >p{
+      font-size: 16px;
+      line-height: 1.8;
+    }
+  }
+</style>

src/components/install.js

@@ -13,6 +13,7 @@ import statistic from '@/components/statistic'
 import descriptions from '@/components/Descriptions/Descriptions.vue'
 import remoteSearch from "@/components/remote-search"
 import tabRouter from '@/components/tab-router'
+import empty from '@/components/empty'
 
 export default {
   install(Vue) {
@@ -26,5 +27,6 @@ export default {
     Vue.component(descriptions.name, descriptions)
     Vue.component(remoteSearch.name, remoteSearch)
     Vue.component(tabRouter.name, tabRouter)
+    Vue.component(empty.name, empty)
   }
 }

src/views/teamDetail/components/modals/course-time-detail.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-table
+    :data="list"
+    :header-cell-style="{background:'#EDEEF0',color:'#444'}"
+  >
+    <el-table-column
+      prop="type"
+      label="课程类型"
+      align="center"
+    >
+      <template slot-scope="scope">
+        {{courseType[scope.row.type]}}
+      </template>
+    </el-table-column>
+    <el-table-column
+      prop="time"
+      label="剩余时长(分)"
+      align="center"
+    />
+  </el-table>
+</template>
+
+<script>
+import { queryStudentSubTotalCourseTimes } from '../../api'
+import { courseType } from '@/constant'
+export default {
+  props: ['detail'],
+  data() {
+    return {
+      courseType,
+      list: []
+    }
+  },
+  mounted() {
+    this.FetchDetail()
+  },
+  methods: {
+    async FetchDetail() {
+      try {
+        const res = await queryStudentSubTotalCourseTimes({
+          userId: this.detail.userId,
+          musicGroupId: this.detail.musicGroupId,
+        })
+        this.list = Object.keys(res.data).map(item => ({type: item, time: res.data[item]}))
+      } catch (error) {}
+    }
+  }
+}
+</script>