fanfan
8 months ago
parent
959270a724
commit
8e9a096515
@ -0,0 +1,62 @@ |
|||||||
|
import { axios } from '@/utils/request' |
||||||
|
|
||||||
|
// api接口列表
|
||||||
|
const api = { |
||||||
|
list: '/course/getCourseList', |
||||||
|
add: '/course/add', |
||||||
|
edit: '/course/edit', |
||||||
|
delete: '/course/delete', |
||||||
|
getCourselist:'/course/getCourseType', |
||||||
|
} |
||||||
|
|
||||||
|
// 列表记录
|
||||||
|
export function getCourselist (params) { |
||||||
|
return axios({ |
||||||
|
url: api.getCourselist, |
||||||
|
method: 'get', |
||||||
|
params |
||||||
|
}) |
||||||
|
} |
||||||
|
// 列表记录
|
||||||
|
export function list (params) { |
||||||
|
return axios({ |
||||||
|
url: api.list, |
||||||
|
method: 'get', |
||||||
|
params |
||||||
|
}) |
||||||
|
} |
||||||
|
/** |
||||||
|
* 新增记录 |
||||||
|
* @param {*} data |
||||||
|
*/ |
||||||
|
export function add (data) { |
||||||
|
return axios({ |
||||||
|
url: api.add, |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 编辑记录 |
||||||
|
* @param {*} data |
||||||
|
*/ |
||||||
|
export function edit (data) { |
||||||
|
return axios({ |
||||||
|
url: api.edit, |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 删除记录 |
||||||
|
* @param {*} data |
||||||
|
*/ |
||||||
|
export function deleted (data) { |
||||||
|
return axios({ |
||||||
|
url: api.delete, |
||||||
|
method: 'post', |
||||||
|
data: data |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,131 @@ |
|||||||
|
<template> |
||||||
|
<a-card :bordered="false"> |
||||||
|
<content-header :title="$route.meta.title"></content-header> |
||||||
|
<div class="table-operator"> |
||||||
|
<a-button type="primary" icon="plus" @click="handleAdd">新增</a-button> |
||||||
|
</div> |
||||||
|
<s-table ref="table" rowKey="course_id" :columns="columns" :data="loadData" :pagination="pagination"> |
||||||
|
<span slot="action" slot-scope="text, item"> |
||||||
|
<a style="margin-right: 8px" @click="handleEdit(item)">编辑</a> |
||||||
|
<a @click="handleDelete(item)">删除</a> |
||||||
|
</span> |
||||||
|
</s-table> |
||||||
|
<AddForm ref="AddForm" :courseTypeList="courseTypeList" @handleSubmit="handleRefresh" /> |
||||||
|
<EditForm ref="EditForm" :courseTypeList="courseTypeList" @handleSubmit="handleRefresh" /> |
||||||
|
</a-card> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as Api from '@/api/course' |
||||||
|
import { STable, ContentHeader } from '@/components' |
||||||
|
import AddForm from './modules/AddForm' |
||||||
|
import EditForm from './modules/EditForm' |
||||||
|
import { tree } from '@/api/region' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Index', |
||||||
|
components: { |
||||||
|
ContentHeader, |
||||||
|
STable, |
||||||
|
AddForm, |
||||||
|
EditForm, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 分类列表 |
||||||
|
courseList: [], |
||||||
|
courseTypeList: [], |
||||||
|
// 查询参数 |
||||||
|
queryParam: {}, |
||||||
|
// 正在加载 |
||||||
|
isLoading: false, |
||||||
|
// 表头 |
||||||
|
columns: [ |
||||||
|
{ |
||||||
|
title: '教学ID', |
||||||
|
dataIndex: 'course_id', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '教学名称', |
||||||
|
dataIndex: 'course_name', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '教学副标题', |
||||||
|
dataIndex: 'course_subheading', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '教学详情', |
||||||
|
dataIndex: 'course_detail', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '排序', |
||||||
|
dataIndex: 'sort', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '添加时间', |
||||||
|
dataIndex: 'create_time', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
width: '180px', |
||||||
|
scopedSlots: { customRender: 'action' }, |
||||||
|
}, |
||||||
|
], |
||||||
|
// 加载数据方法 必须为 Promise 对象 |
||||||
|
loadData: (param) => { |
||||||
|
return Api.list(param).then((response) => { |
||||||
|
return response.data.list |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getCourseTypeList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取分类列表 |
||||||
|
getCourseTypeList() { |
||||||
|
Api.getCourselist() |
||||||
|
.then((result) => { |
||||||
|
this.courseTypeList = result.data.courseCategory |
||||||
|
}) |
||||||
|
.finally(() => (this.isLoading = false)) |
||||||
|
}, |
||||||
|
// 新增记录 |
||||||
|
handleAdd() { |
||||||
|
this.$refs.AddForm.add() |
||||||
|
}, |
||||||
|
|
||||||
|
// 编辑记录 |
||||||
|
handleEdit(item) { |
||||||
|
this.$refs.EditForm.edit(item) |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除记录 |
||||||
|
handleDelete(item) { |
||||||
|
const self = this |
||||||
|
const modal = this.$confirm({ |
||||||
|
title: '您确定要删除该记录吗?', |
||||||
|
content: '删除后不可恢复', |
||||||
|
onOk() { |
||||||
|
return Api.deleted({ courseId: item['course_id'] }) |
||||||
|
.then((result) => { |
||||||
|
self.$message.success(result.message, 1.5) |
||||||
|
self.handleRefresh() |
||||||
|
}) |
||||||
|
.finally((result) => modal.destroy()) |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* 刷新列表 |
||||||
|
* @param Boolean bool 强制刷新到第一页 |
||||||
|
*/ |
||||||
|
handleRefresh() { |
||||||
|
this.$refs.table.refresh(true) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,132 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
title="新增商家教学" |
||||||
|
:width="720" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
:maskClosable="false" |
||||||
|
:destroyOnClose="true" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="handleCancel" |
||||||
|
> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-form-item label="教学分类" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select placeholder="请选择" v-decorator="['course_category_id', { rules: [{ required: true, message: '请选择商家教学分类' }] }]"> |
||||||
|
<a-select-option :value="item.course_category_id" v-for="item in courseTypeList" :key="item.course_category_id"> |
||||||
|
{{ item.name }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="教学名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input |
||||||
|
placeholder="请输入商家教学名称" |
||||||
|
v-decorator="['course_name', { rules: [{ required: true, message: '请输入商家教学名称' }] }]" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="教学副标题" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input |
||||||
|
placeholder="请输入教学副标题" |
||||||
|
v-decorator="['course_subheading', { rules: [{ required: true, message: '请输入教学副标题' }] }]" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="教学详情" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input |
||||||
|
placeholder="请输入教学详情" |
||||||
|
v-decorator="['course_detail', { rules: [{ required: true, message: '请输入教学详情' }] }]" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="教学图片" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<SelectImage v-decorator="['image_id', { rules: [{ required: true, message: '请上传1张图片 ' }] }]" /> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="教学视频" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<SelectVideo :multiple="false" v-decorator="['video_id', { rules: [{ required: true, message: '请上传1张视频' }] }]" /> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as Api from '@/api/course' |
||||||
|
import { SelectVideo, SelectImage } from '@/components' |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { |
||||||
|
SelectImage, |
||||||
|
SelectVideo |
||||||
|
}, |
||||||
|
props: { |
||||||
|
// 分类列表 |
||||||
|
courseTypeList: { |
||||||
|
type: Array, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 对话框标题 |
||||||
|
title: '', |
||||||
|
// 标签布局属性 |
||||||
|
labelCol: { |
||||||
|
span: 7, |
||||||
|
}, |
||||||
|
// 输入框布局属性 |
||||||
|
wrapperCol: { |
||||||
|
span: 13, |
||||||
|
}, |
||||||
|
// modal(对话框)是否可见 |
||||||
|
visible: false, |
||||||
|
// modal(对话框)确定按钮 loading |
||||||
|
confirmLoading: false, |
||||||
|
// 当前表单元素 |
||||||
|
form: this.$form.createForm(this), |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 显示对话框 |
||||||
|
add() { |
||||||
|
// 显示窗口 |
||||||
|
this.visible = true |
||||||
|
}, |
||||||
|
|
||||||
|
// 确认按钮 |
||||||
|
handleSubmit(e) { |
||||||
|
e.preventDefault() |
||||||
|
// 表单验证 |
||||||
|
const { |
||||||
|
form: { validateFields }, |
||||||
|
} = this |
||||||
|
validateFields((errors, values) => { |
||||||
|
// 提交到后端api |
||||||
|
if (!errors) { |
||||||
|
this.onFormSubmit(values) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 关闭对话框事件 |
||||||
|
handleCancel() { |
||||||
|
this.visible = false |
||||||
|
this.form.resetFields() |
||||||
|
}, |
||||||
|
|
||||||
|
// 提交到后端api |
||||||
|
onFormSubmit(values) { |
||||||
|
this.confirmLoading = true |
||||||
|
Api.add({ form: values }) |
||||||
|
.then((result) => { |
||||||
|
// 显示成功 |
||||||
|
this.$message.success(result.message, 1.5) |
||||||
|
// 关闭对话框事件 |
||||||
|
this.handleCancel() |
||||||
|
// 通知父端组件提交完成了 |
||||||
|
this.$emit('handleSubmit', values) |
||||||
|
}) |
||||||
|
.finally((result) => { |
||||||
|
this.confirmLoading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,164 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
title="编辑商家教学" |
||||||
|
:width="720" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
:maskClosable="false" |
||||||
|
:destroyOnClose="true" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="handleCancel" |
||||||
|
> |
||||||
|
<a-spin :spinning="confirmLoading"> |
||||||
|
<a-form :form="form"> |
||||||
|
<a-form-item label="教学分类" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-select |
||||||
|
placeholder="请选择" |
||||||
|
v-decorator="['course_category_id', { rules: [{ required: true, message: '请选择商家教学分类' }] }]" |
||||||
|
> |
||||||
|
<a-select-option |
||||||
|
:value="item.course_category_id" |
||||||
|
v-for="item in courseTypeList" |
||||||
|
:key="item.course_category_id" |
||||||
|
> |
||||||
|
{{ item.name }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="教学名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input |
||||||
|
placeholder="请输入商家教学名称" |
||||||
|
v-decorator="['course_name', { rules: [{ required: true, message: '请输入商家教学名称' }] }]" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="教学副标题" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input |
||||||
|
placeholder="请输入教学副标题" |
||||||
|
v-decorator="['course_subheading', { rules: [{ required: true, message: '请输入教学副标题' }] }]" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="教学详情" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<a-input |
||||||
|
placeholder="请输入教学详情" |
||||||
|
v-decorator="['course_detail', { rules: [{ required: true, message: '请输入教学详情' }] }]" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="教学图片" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<SelectImage |
||||||
|
:defaultList="record.image_url ? [record.image_url] : []" |
||||||
|
v-decorator="['image_id', { rules: [{ required: true, message: '请上传1张图片 ' }] }]" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="教学视频" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<SelectVideo |
||||||
|
:multiple="false" |
||||||
|
:defaultList="record.video_url ? [record.video_url] : []" |
||||||
|
v-decorator="['video_id', { rules: [{ required: true, message: '请上传1张视频' }] }]" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import _ from 'lodash' |
||||||
|
import * as Api from '@/api/course' |
||||||
|
import { SelectVideo, SelectImage } from '@/components' |
||||||
|
import CategoryModel from '@/common/model/Category' |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { |
||||||
|
SelectImage, |
||||||
|
SelectVideo, |
||||||
|
}, |
||||||
|
props: { |
||||||
|
// 分类列表 |
||||||
|
courseTypeList: { |
||||||
|
type: Array, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 对话框标题 |
||||||
|
title: '', |
||||||
|
// 标签布局属性 |
||||||
|
labelCol: { span: 7 }, |
||||||
|
// 输入框布局属性 |
||||||
|
wrapperCol: { |
||||||
|
span: 13, |
||||||
|
}, |
||||||
|
// modal(对话框)是否可见 |
||||||
|
visible: false, |
||||||
|
// modal(对话框)确定按钮 loading |
||||||
|
confirmLoading: false, |
||||||
|
// 当前表单元素 |
||||||
|
form: this.$form.createForm(this), |
||||||
|
// 当前记录 |
||||||
|
record: {}, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 显示对话框 |
||||||
|
edit(record) { |
||||||
|
// 显示窗口 |
||||||
|
this.visible = true |
||||||
|
// 当前分类记录 |
||||||
|
this.record = record |
||||||
|
// 设置默认值 |
||||||
|
this.setFieldsValue() |
||||||
|
}, |
||||||
|
|
||||||
|
// 设置默认值 |
||||||
|
setFieldsValue() { |
||||||
|
const { |
||||||
|
record, |
||||||
|
form: { setFieldsValue }, |
||||||
|
} = this |
||||||
|
// 设置表单内容 |
||||||
|
this.$nextTick(() => { |
||||||
|
setFieldsValue(_.pick(record, ['course_name', 'course_subheading', 'course_detail','image_id', 'video_id','course_category_id'])) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 确认按钮 |
||||||
|
handleSubmit(e) { |
||||||
|
e.preventDefault() |
||||||
|
// 表单验证 |
||||||
|
const { |
||||||
|
form: { validateFields }, |
||||||
|
} = this |
||||||
|
validateFields((errors, values) => { |
||||||
|
// 提交到后端api |
||||||
|
if (!errors) { |
||||||
|
this.onFormSubmit(values) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 关闭对话框事件 |
||||||
|
handleCancel() { |
||||||
|
this.visible = false |
||||||
|
this.form.resetFields() |
||||||
|
}, |
||||||
|
|
||||||
|
// 提交到后端api |
||||||
|
onFormSubmit(values) { |
||||||
|
this.confirmLoading = true |
||||||
|
Api.edit({courseId: this.record['course_id'], form: values }) |
||||||
|
.then((result) => { |
||||||
|
// 显示成功 |
||||||
|
this.$message.success(result.message, 1.5) |
||||||
|
// 关闭对话框事件 |
||||||
|
this.handleCancel() |
||||||
|
// 通知父端组件提交完成了 |
||||||
|
this.$emit('handleSubmit', values) |
||||||
|
}) |
||||||
|
.finally((result) => { |
||||||
|
this.confirmLoading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
Loading…
Reference in new issue