keysass_admin/src/views/trainService/courseManage.vue

<template>
    <div class="container" style="padding: 30px">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
            style="display: flex; margin-left: 5px">
            <div style="margin-top: 5px; margin-bottom: 20px; margin-right: 5px">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="option({}, 'add')">新增课程</el-button>
            </div>
            <el-form-item label="课程" prop="courseId">
                <el-input v-model="queryParams.courseName"></el-input>
            </el-form-item>
            <el-form-item label="班级名称" prop="courseId">
                <el-input v-model="queryParams.className"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="courseList">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="所属班级" align="center" prop="className" />
            <el-table-column label="课程名称" align="center" prop="courseName" />
            <el-table-column label="任课老师" align="center" prop="instructor" />
            <el-table-column label="上课时间" align="center" prop="courseTime" />
            <el-table-column label="课程资料" align="center">
                <template slot-scope="scope">
                    <div v-for="name in scope.row.attachments" :key="name.fileId" @click="downLoadSource(name)"
                        class="sourceItem">
                        {{ name.fileName }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="签到情况" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="option(scope.row, 'siginList')">{{
                        scope.row.signIn
                    }}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="option(scope.row, 'motify')">修改</el-button>
                    <el-button size="mini" type="text" @click="option(scope.row, 'delete')">删除</el-button>
                    <el-button size="mini" type="text" @click="option(scope.row, 'signIn')">签到</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <el-dialog class="diaform" :title="title" :visible.sync="visibleopen" :close-on-click-modal="false"
            append-to-body width="700px" @open="openDia" @close="closeDia">
            <div v-if="optionType == 'signIn'">
                <vueQr :signInInfo="JSON.stringify(signInInfo)"></vueQr>
            </div>

            <el-form v-else :model="courseForm" :rules="rules" ref="courseForm" label-width="150px" text-align:center>
                <el-form-item label="所属班级" prop="classId">
                    <el-select v-model="courseForm.classId" filterable placeholder="请选择" @change="classChange">
                        <el-option v-for="item in classList" :key="item.trainClassId" :label="item.trainClassName"
                            :value="item.trainClassId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="课程名称" prop="courseName">
                    <el-input class="courseName" placeholder="请输入课堂名称" v-model="courseForm.courseName"></el-input>
                </el-form-item>

                <el-form-item label="课堂老师" prop="instructor" v-if="classType != 4">
                    <el-select v-model="courseForm.instructor" placeholder="请选择老师" clearable>
                        <el-option v-for="item in teacherList" :key="item.talent_id" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="职称" prop="title" v-if="classType == 4">
                    <el-input class="courseName" v-model="courseForm.title" placeholder="请输入职称"></el-input>
                </el-form-item>

                <el-form-item label="授课老师" prop="instructor" v-if="classType == 4">
                    <el-autocomplete class="inline-input" v-model="courseForm.instructor"
                        :fetch-suggestions="querySearch" placeholder="请输入授课老师" @select="handleSelect">
                        <template slot-scope="{ item }">
                            <span class="addr">{{ item.name }}</span>
                        </template></el-autocomplete>
                </el-form-item>

                <el-form-item label="上课时间" prop="courseTime">
                    <el-date-picker v-model="courseForm.courseTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="授课内容" prop="courseContent" v-if="classType == 4">
                    <el-input v-model="courseForm.courseContent" placeholder="请输入授课内容" type="textarea"
                        :rows="2"></el-input>
                </el-form-item>

                <el-form-item label="授课链接" prop="url" v-if="classType == 4">
                    <el-input class="courseName" v-model="courseForm.url" placeholder="请输入授课链接"></el-input>
                </el-form-item>

                <el-form-item label="是否付费" prop="isPay" v-if="classType == 4">
                    <!-- <el-cascader v-model="courseForm.isPay" :options="payOptions"
                        @change="payHandleChange"></el-cascader> -->
                    <el-select v-model="courseForm.isPay" placeholder="请选择是否付费">
                        <el-option label="付费" value="1"></el-option>
                        <el-option label="免费" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付方式" prop="payMethods" v-if="classType == 4 && courseForm.isPay == 1">
                    <!-- <el-cascader v-model="courseForm.isPay" :options="payOptions"
                        @change="payHandleChange"></el-cascader> -->
                    <el-select v-model="courseForm.payMethods" placeholder="请选择是否付费">
                        <el-option label="费用" value="1"></el-option>
                        <el-option label="口令" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="费用" prop="amount"
                    v-if="classType == 4 && courseForm.isPay == 1 && courseForm.payMethods == '1'">
                    <el-input v-model="courseForm.amount" type="number" placeholder="请输入费用"></el-input>
                </el-form-item>
                <el-form-item label="口令" prop="password"
                    v-if="classType == 4 && courseForm.isPay == 1 && courseForm.payMethods == '2'">
                    <el-input v-model="courseForm.password" placeholder="请输入口令"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark" v-if="classType == 4">
                    <el-input v-model="courseForm.remark" placeholder="请输入备注"></el-input>
                </el-form-item>


                <el-form-item label="课程资料" prop="attachments" v-if="classType != 4">
                    <div>
                        <fileUpload ref="fileUpload" v-model="courseForm.attachments" listtype="picture-card"
                            :fileType="['rar']" class="widthFix" fileName="publicize" :limit="3" />
                    </div>
                </el-form-item>

                <el-form-item style="margin-top: 80px; text-align: center; margin-left: -150px">
                    <el-button type="primary" style="width: 135px; font-size: 16px; height: 39px; line-height: 11px"
                        @click="submitto('confirm')">确认</el-button>
                    <el-button style="width: 135px; font-size: 16px; height: 39px; line-height: 11px; margin-left: 30px"
                        @click="closeDia">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {
    getCourseList,
    addCourseItem,
    putCourseItem,
    delCourse,
    listTeacherAll,
    getClassList,
} from '@/api/trainService/index'
import fileUpload from '@/components/FileUpload/index.vue'
import { encodeChinese } from '@/utils/encodeChinese'
import vueQr from '@/components/vueQr/index.vue'
import { deepClone } from '@/utils'
const titleMap = {
    motify: '修改',
    delete: '删除',
    signIn: '签到码',
    add: '新增',
    siginList: '签到情况',
    attendance: '考勤',
}
const courseRule = {
    courseName: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
    classId: [{ required: true, message: '请选择班级', trigger: 'change' }],
    instructor: [{ required: true, message: '请选择任课老师', trigger: 'change' }],
    courseTime: [{ required: true, trigger: 'change', message: '请输入上课时间' }],
    courseContent: [{ required: true, message: '请输入课程内容', trigger: 'blur' }],
    password: [{ required: true, message: '请输入口令', trigger: 'blur' }],
    amount: [{ required: true, message: '请输入付款金额', trigger: 'blue' }],
    isPay: [{ required: true, message: '请输入选择授课方法', trigger: 'change' }],
    url: [{ required: true, message: '请输入课程链接', trigger: 'blur' }],
    title: [{ required: true, message: '请输入职称', trigger: 'blur' }],
    payMethods: [{ required: true, message: '请输入支付方式', trigger: 'change' }]
}
export default {
    components: { fileUpload, vueQr },
    data() {
        return {
            imgAction: process.env.VUE_APP_BASE_API + '/upload',
            loading: false,
            id: '',
            currentCourse: {},
            optionType: '',
            // 传递给二维码的信息
            signInInfo: {},
            courseList: [
                {
                    courseId: '',
                    className: '',
                    courseName: '',
                    courseTime: '',
                    instructor: '',
                    signIn: '',
                    attachments: [],
                },
            ],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                courseName: '',
                className: '',
            },
            courseForm: {
                classId: '',
                courseName: '',
                instructor: '',
                attachments: [],
                courseTime: '',
            },
            // 班级下拉框数据
            classList: [],
            // 教师下拉框数据
            teacherList: [],
            title: '',
            visibleopen: false,
            rules: courseRule,
            classType: 0,
            // payOptions: [
            //     {
            //         value: '1',
            //         label: '付费',
            //         children: [{
            //             key: '0',
            //             value: '1-1',
            //             label: '金额'
            //         }, {
            //             key: '0',
            //             value: '1-2',
            //             label: '口令'
            //         }]
            //     },
            //     {
            //         value: '0',
            //         label: '免费',

            //     }],
            payMethods: '0'
        }
    },
    methods: {
        querySearch(queryString, cb) {
            var restaurants = this.teacherList;
            console.log(restaurants);
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            this.courseForm.instructor = item.name
            console.log(item);
        },
        async getList() {
            const res = await getCourseList(this.queryParams)
            this.total = res.total
            this.courseList = res.rows
        },
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                courseName: '',
                className: '',
            }
            this.getList()
        },
        // payHandleChange(e) {
        //     this.courseForm.isPay = e[0]
        //     if (e[1]) {
        //         this.payMethods = e[1]
        //     }
        //     console.log(e);
        // },
        classChange(e) {
            const result = this.classList.find(item => {
                console.log(item);
                return item.trainClassId == e
            })
            if (result) {
                this.classType = result.classType
            }
            console.log(this.courseForm);
        },
        downLoadSource(params) {
            const url = params.filePath
            if (!url) {
                return
            }
            downloadHttp(url)
        },
        async option(row, type) {
            this.optionType = type
            this.currentCourse = row
            this.title = titleMap[type]
            switch (type) {
                case 'motify':
                    this.courseForm = deepClone(row)
                    this.initDialog(this.courseForm.classId)
                    // 为提供线上培训班的类型
                    // console.log(this.classList);
                    // const result = this.classList.find(item => {
                    //     console.log(item);
                    //     return item.trainClassId == this.courseForm.classId
                    // })
                    // console.log(result);
                    // this.classType = result.classType
                    break
                case 'delete':
                    this.deleteRow(row)
                    return
                case 'add':
                    this.initDialog()
                    break
                case 'signIn':
                    this.generateSignIn(row)
                    break
                case 'siginList':
                    // this.id = row.courseId
                    console.log(row);
                    this.$router.push({
                        path: '/signInInfoList',
                        query: {
                            name: row.courseName,
                            id: row.courseId,
                        },
                    })
                    return
                default:
                    break
            }
            this.visibleopen = true
        },
        // 提交
        submitto() {
            this.$refs['courseForm'].validate((valid) => {
                if (valid) {
                    this.submit()
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        async submit() {
            const data = deepClone(this.courseForm)
            if (data.amount) {
                data.amount = data.amount * 1
            }
            if (this.classType == 4) {
                data.classType = '4'
                delete data.payMethods
            }


            if (this.courseForm.courseId) {
                const res = await putCourseItem(data)
                res.code == 200 && this.$message.success('修改成功')
            } else {
                const res = await addCourseItem(data)
                res.code == 200 && this.$message.success('新增成功')
            }
            this.closeDia()
            this.getList()
        },
        // dialog init
        async initDialog(val) {
            console.log(val);
            const classRes = await getClassList()
            this.classList = classRes.data
            if (val) {
                this.classChange(val)
            }
            const teacherRes = await listTeacherAll()
            this.teacherList = teacherRes

        },
        openDia() {
            if (this.optionType === 'motify') {
                this.$refs.fileUpload?.fileInit(this.courseForm.attachments)
            }
        },
        // 关闭
        closeDia() {
            this.$refs['courseForm']?.resetFields()
            Object.keys(this.courseForm).forEach((item) => {
                if (Array.isArray(this.courseForm[item])) {
                    if (item == 'remark') {
                        this.courseForm[item] = ''
                    } else {
                        this.courseForm[item] = []
                    }
                } else {
                    this.courseForm[item] = ''
                }
            })
            this.classType = 0
            this.$refs.fileUpload?.reset()
            this.visibleopen = false
        },
        // 生成二维码信息
        generateSignIn(row) {
            this.signInInfo['courseId'] = row.courseId
            this.signInInfo['className'] = encodeChinese(row.className)
            this.signInInfo['courseName'] = encodeChinese(row.courseName)
            this.title = '签到码'
            this.visibleopen = true
        },
        /**
         * 删除签到信息
         */
        deleteRow(row) {
            this.$confirm('是否确认删除课程', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(function () {
                    return delCourse(row.courseId)
                })
                .then(() => {
                    this.getList()
                    this.$message.success('删除成功')
                })
        },
    },

    created() {
        this.getList()
    },
}
</script>

<style lang="scss">
.courseName {
    width: 220px;
}

.sourceItem {
    color: #1890ff;
    cursor: pointer;
    text-decoration: underline;
}

.sourceItem:hover {
    color: #0e4272;
    cursor: pointer;
    text-decoration: underline;
}
</style>