keysass_admin/src/views/trainService/trainTeacher.vue

<template>
    <div class="container" style="padding: 30px">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="68px"
            style="display: flex; justify-content: space-between"
        >
            <!-- <div style="display: flex">
                <el-form-item label="学校名称" prop="title">
                    <el-input v-model="queryParams.title" placeholder="请输入资讯标题" clearable size="small" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </div> -->
            <div style="margin-top: 5px">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addsign">新增</el-button>
            </div>
        </el-form>
        <el-table v-loading="loading" :data="schoolList">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="手机号" align="center" prop="phone" />
            <el-table-column label="教学方向" align="center" prop="teaching" />
            <el-table-column label="职称" align="center" prop="title" />
            <el-table-column label="简介" align="center" prop="profile" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="modify(scope.row)">修改</el-button>
                    <el-button size="mini" type="text" @click="delrow(scope.row)">删除</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"
            width="700px"
            append-to-body
            @close="colsedia"
        >
            <el-form :model="form" :rules="rules" ref="form" label-width="70px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="教学方向" prop="teaching">
                    <el-input v-model="form.teaching"></el-input>
                </el-form-item>
                <el-form-item label="职称" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="profile">
                    <el-input v-model="form.profile" type="textarea" :rows="6"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="avatar">
                    <ImageUpload
                        ref="imgupload"
                        v-model="form.avatar"
                        listtype="picture-card"
                        fileName="publicize"
                        :limit="1"
                    />
                </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="colsedia"
                        >取消</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { listTeacher, addTeacher, updateTeacher, deleteTalent } from '@/api/trainService/index.js'
import ImageUpload from '@/components/ImageUpload/index.vue'
export default {
    name: 'peixunbaoming',
    components: { ImageUpload },
    data() {
        return {
            imgbase: process.env.VUE_APP_BASE_TARGET,
            loading: false,
            schoolList: [],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            title: '新增教师',
            visibleopen: false,
            form: {},
            rules: {},
        }
    },

    mounted() {},
    methods: {
        async getList() {
            const res = await listTeacher(this.queryParams)
            this.total = res.total
            this.schoolList = res.rows
        },
        //新增资讯的弹窗
        addsign() {
            this.title = '新增教师'
            this.visibleopen = true
        },
        //修改资讯的弹窗
        async modify(row) {
            this.title = '修改教师'
            this.visibleopen = true
            this.form = row
            if (this.form.avatar) {
                this.form.avatar = this.imgbase + this.form.avatar
            }
        },
        async delrow(row) {
            this.$confirm('是否确认删除教师', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(function () {
                    return deleteTalent(row.talentId)
                })
                .then(() => {
                    this.getList()
                    this.$message.success('删除成功')
                })
        },
        // 提交
        async submitto() {
            if (this.form.talentId) {
                // 修改
                const url = this.form.avatar
                const index = url.indexOf('/profile')
                this.form.avatar = url.substring(index)
                console.log(this.form)
                await updateTeacher(this.form)
                this.$message.success('修改成功')
            } else {
                await addTeacher(this.form)
                this.$message.success('新增成功')
            }
            this.colsedia()
            this.getList()
        },
        // 关闭
        colsedia() {
            this.visibleopen = false
        },
        handleQuery() {
            this.getList()
        },
        resetQuery() {
            this.resetForm('queryForm')
            this.getList()
        },
    },
    created() {
        this.getList()
    },
}
</script>

<style lang="scss" scoped>
</style>