feat: uI暂存

This commit is contained in:
cgd_mac 2022-01-07 15:25:17 +08:00
parent c08648778b
commit ad6ba976ba
6 changed files with 335 additions and 7 deletions

View File

@ -54,6 +54,10 @@ export default {
justify-content: center; justify-content: center;
} }
.justify-between{
justify-content: space-between;
}
.nowrap{ .nowrap{
white-space: nowrap; white-space: nowrap;
} }

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -11,7 +11,6 @@
:columns="columns" :columns="columns"
:showPagination="false" :showPagination="false"
:data-source="dataList" :data-source="dataList"
:showHeader="false"
:rowKey="record => record.id"> :rowKey="record => record.id">
<span slot="action" slot-scope="text, record, index"> <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 == 1" @click="$refs.userForm.edit(record)">添加课程</a>
@ -27,7 +26,6 @@
:columns="columns" :columns="columns"
:showPagination="false" :showPagination="false"
:data-source="dataList" :data-source="dataList"
:showHeader="false"
:rowKey="record => record.id"> :rowKey="record => record.id">
<span slot="action" slot-scope="text, record, index"> <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 == 1" @click="$refs.userForm.edit(record)">添加课程</a>

View File

@ -12,21 +12,27 @@
<br /> <br />
<a-card title="集中培训" :bodyStyle="{padding: '0px !important'}"> <a-card title="集中培训" :bodyStyle="{padding: '0px !important'}">
<a slot="extra" href="#">查看更多</a> <a slot="extra" href="#">查看更多</a>
<CentralizedTraining></CentralizedTraining>
</a-card> </a-card>
<br /> <br />
<a-card title="系统推荐课程" :bodyStyle="{padding: '0px !important'}"> <a-card title="系统推荐课程" :bodyStyle="{padding: '0px !important'}">
<a slot="extra" href="#">查看更多</a> <a slot="extra" href="#">查看更多</a>
<CourseRecommendation></CourseRecommendation>
</a-card> </a-card>
</a-card> </a-card>
</div> </div>
</template> </template>
<script> <script>
import MyCourseList from './MyCourseList.vue' import MyCourseList from './MyCourseList.vue' //
import TrainingPlan from './TrainingPlan.vue' import TrainingPlan from './TrainingPlan.vue' //
import CentralizedTraining from './CentralizedTraining.vue' //
import CourseRecommendation from './CourseRecommendation.vue' //
export default { export default {
components: { components: {
MyCourseList, MyCourseList,
TrainingPlan TrainingPlan,
CentralizedTraining,
CourseRecommendation
}, },
data () { data () {
return { return {