feat: uI暂存

2022-01-07 15:25:17 +08:00 · 2022-01-07 15:25:17 +08:00 · ad6ba976ba
parent c08648778b
commit ad6ba976ba
6 changed files with 335 additions and 7 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -54,6 +54,10 @@ export default {
  justify-content: center;
 }

+.justify-between{
+  justify-content: space-between;
+}
+
 .nowrap{
  white-space: nowrap;
 }
--- a/src/views/mycourse/mycourseList/CentralizedTraining.vue
+++ b/src/views/mycourse/mycourseList/CentralizedTraining.vue
@ -0,0 +1,126 @@
+<template>
+  <a-card
+    :bordered="false"
+    :loading="loading"
+  >
+    <a-table
+      ref="table"
+      :pageSize="5"
+      :columns="columns"
+      :showPagination="false"
+      :data-source="dataList"
+      :rowKey="record => record.id">
+      <span slot="action" slot-scope="text, record, index">
+        <a v-if="index % 3 == 1" @click="$refs.userForm.edit(record)">添加课程</a>
+        <a v-if="index % 3 == 2" @click="$refs.userForm.edit(record)">继续学习</a>
+        <a v-if="index % 3 == 0">已完成学习</a>
+      </span>
+    </a-table>
+    <CentralizedTrainingDetail ref="centralizedTrainingDetail"></CentralizedTrainingDetail>
+  </a-card>
+</template>
+
+<script>
+import { userPage, userDel, passwordReset } from '@/api/security/user'
+import { getCourseList, deleteCourse } from '@/api/course/course'
+import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
+import { dictToTree } from '@/utils/util'
+import CentralizedTrainingDetail from './CentralizedTrainingDetail.vue'
+export default {
+  components: {
+    CentralizedTrainingDetail
+  },
+	data () {
+		return {
+      dataList: [],
+      activeTab: '1',
+      loading: true,
+      columns: [
+        {
+          title: '培训名称',
+          dataIndex: 'courseName',
+          scopedSlots: { customRender: 'courseName' }
+        },
+        {
+          title: '培训时间',
+          dataIndex: 'courseTypeName'
+        },
+        {
+          title: '培训地点',
+          dataIndex: 'date'
+        },
+        {
+          title: '培训状态',
+          dataIndex: 'status'
+        },
+        {
+          title: '操作',
+          width: '150px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getCourseList(Object.assign(parameter, this.queryParam)).then(res => {
+          return res
+        })
+      },
+      selectedRows: [], // 选中行的数据
+      options: {}
+		}
+	},
+	created () {
+    this.dictionaryDropDown()
+  },
+	methods: {
+    tabChange (key) {
+      console.log('key', key)
+    },
+		// 点击详情
+    handlerDetail () {
+      this.$refs.aycourseDetail.visible = true
+    },
+    // 获取数据词典
+    dictionaryDropDown () {
+      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
+				this.loading = false
+        this.queryOptions[1].options = dictToTree(res.data, [], 0)
+      })
+    },
+    classificationChange (value) {
+      this.queryParam.classification = value
+    },
+    // 获取列表
+    handleRefresh () {
+
+    },
+    sysUserDelete (param) {
+      userDel(param)
+        .then(res => {
+          if (res.code === 200) {
+            this.$message.success('删除成功')
+            this.$refs.table.refresh()
+          } else {
+            this.$message.error('删除失败：' + res.msg)
+          }
+        })
+        .catch(err => {
+          this.$message.error('删除错误：' + err.msg)
+        })
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    }
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.table-operator {
+  margin-bottom: 18px;
+}
+button {
+  margin-right: 8px;
+}
+</style>
--- a/src/views/mycourse/mycourseList/CentralizedTrainingDetail.vue
+++ b/src/views/mycourse/mycourseList/CentralizedTrainingDetail.vue
@ -0,0 +1,59 @@
+<template>
+  <a-modal title="集中培训详情" :width="800" :visible="visible" :confirmLoading="confirmLoading" :footer="null">
+    <a-descriptions title="User Info">
+      <a-descriptions-item label="UserName">
+        Zhou Maomao
+      </a-descriptions-item>
+      <a-descriptions-item label="Telephone">
+        1810000000
+      </a-descriptions-item>
+      <a-descriptions-item label="Live">
+        Hangzhou, Zhejiang
+      </a-descriptions-item>
+      <a-descriptions-item label="Remark">
+        empty
+      </a-descriptions-item>
+      <a-descriptions-item label="Address">
+        No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+      </a-descriptions-item>
+    </a-descriptions>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      visible: false,
+      confirmLoading: false
+    }
+  },
+  methods: {
+    // 开始学习
+    handlerStartLearn () {}
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.cover-img {
+  width: 100%;
+  height: 200px;
+  border: 1px solid #e8e8e8;
+  border-radius: 10px;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.info-text {
+  font-size: 16px;
+  color: #666;
+  line-height: 1.8;
+  h2 {
+    line-height: 1.2;
+  }
+}
+</style>
--- a/src/views/mycourse/mycourseList/CourseRecommendation.vue
+++ b/src/views/mycourse/mycourseList/CourseRecommendation.vue
@ -0,0 +1,135 @@
+<template>
+  <a-card
+    :bordered="false"
+    :loading="loading"
+  >
+    <a-row :gutter="16">
+      <a-col :span="6" v-for="(item, index) in 8" :key="index">
+        <a-card hoverable style="width: 100%; margin-bottom: 15px;">
+          <img
+            slot="cover"
+            alt="example"
+            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+          />
+          <div>
+            <h4>建筑安全施工生产注意事项</h4>
+            <div class="flex-center justify-between">
+              <div>课时: 24小时</div>
+              <div>选修课</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+
+<script>
+import { userPage, userDel, passwordReset } from '@/api/security/user'
+import { getCourseList, deleteCourse } from '@/api/course/course'
+import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
+import { dictToTree } from '@/utils/util'
+import { STable, SearchCom } from '@/components'
+export default {
+  components: {
+    STable,
+    SearchCom
+  },
+	data () {
+		return {
+      dataList: [],
+      activeTab: '1',
+			loading: true,
+      queryParam: {
+        classification: '' // 课程分类
+      },
+      queryOptions: [
+        { type: 'input', placeholder: '课程名称', key: 'courseName' },
+        { type: 'select-dic-tree', placeholder: '请选择课程类别', key: 'courseType', options: [] }
+      ],
+      // 表头
+      columns: [
+        {
+          title: '课程名称',
+          dataIndex: 'courseName',
+          scopedSlots: { customRender: 'courseName' }
+        },
+        {
+          title: '课程类别',
+          dataIndex: 'courseTypeName'
+        },
+        {
+          title: '学习时间',
+          dataIndex: 'date'
+        },
+        {
+          title: '操作',
+          width: '150px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getCourseList(Object.assign(parameter, this.queryParam)).then(res => {
+          return res
+        })
+      },
+      selectedRows: [], // 选中行的数据
+      options: {}
+		}
+	},
+	created () {
+    this.dictionaryDropDown()
+  },
+	methods: {
+    tabChange (key) {
+      console.log('key', key)
+    },
+		// 点击详情
+    handlerDetail () {
+      this.$refs.aycourseDetail.visible = true
+    },
+    // 获取数据词典
+    dictionaryDropDown () {
+      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
+        this.queryOptions[1].options = dictToTree(res.data, [], 0)
+				this.loading = false
+      })
+    },
+    classificationChange (value) {
+      this.queryParam.classification = value
+    },
+    // 获取列表
+    handleRefresh () {
+
+    },
+    sysUserDelete (param) {
+      userDel(param)
+        .then(res => {
+          if (res.code === 200) {
+            this.$message.success('删除成功')
+            this.$refs.table.refresh()
+          } else {
+            this.$message.error('删除失败：' + res.msg)
+          }
+        })
+        .catch(err => {
+          this.$message.error('删除错误：' + err.msg)
+        })
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    }
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.table-operator {
+  margin-bottom: 18px;
+}
+button {
+  margin-right: 8px;
+}
+</style>
--- a/src/views/mycourse/mycourseList/TrainingPlan.vue
+++ b/src/views/mycourse/mycourseList/TrainingPlan.vue
@ -11,7 +11,6 @@
          :columns="columns"
          :showPagination="false"
          :data-source="dataList"
-          :showHeader="false"
          :rowKey="record => record.id">
          <span slot="action" slot-scope="text, record, index">
            <a v-if="index % 3 == 1" @click="$refs.userForm.edit(record)">添加课程</a>
@ -27,7 +26,6 @@
          :columns="columns"
          :showPagination="false"
          :data-source="dataList"
-          :showHeader="false"
          :rowKey="record => record.id">
          <span slot="action" slot-scope="text, record, index">
            <a v-if="index % 3 == 1" @click="$refs.userForm.edit(record)">添加课程</a>
--- a/src/views/mycourse/mycourseList/index.vue
+++ b/src/views/mycourse/mycourseList/index.vue
@ -12,28 +12,34 @@
      <br />
      <a-card title="集中培训" :bodyStyle="{padding: '0px !important'}">
        <a slot="extra" href="#">查看更多</a>
+        <CentralizedTraining></CentralizedTraining>
      </a-card>
      <br />
      <a-card title="系统推荐课程" :bodyStyle="{padding: '0px !important'}">
        <a slot="extra" href="#">查看更多</a>
+        <CourseRecommendation></CourseRecommendation>
      </a-card>
    </a-card>
  </div>
 </template>
 <script>
-import MyCourseList from './MyCourseList.vue'
-import TrainingPlan from './TrainingPlan.vue'
+import MyCourseList from './MyCourseList.vue' // 我的课程
+import TrainingPlan from './TrainingPlan.vue' // 培训计划
+import CentralizedTraining from './CentralizedTraining.vue' // 集中培训
+import CourseRecommendation from './CourseRecommendation.vue' // 课程推荐
 export default {
  components: {
    MyCourseList,
-    TrainingPlan
+    TrainingPlan,
+    CentralizedTraining,
+    CourseRecommendation
  },
  data () {
    return {
-     
+
    }
  },
-  
+
  methods: {
  }
 }