|
|
@@ -0,0 +1,477 @@
|
|
|
+<template>
|
|
|
+ <div class="page">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div class="search_nav">
|
|
|
+ <h1>授课讲师管理</h1>
|
|
|
+ <!-- 页面搜索 -->
|
|
|
+ <div>
|
|
|
+ <a-form :model="searchData" layout="inline" >
|
|
|
+ <a-form-item>
|
|
|
+ <a-button type="primary" @click="add">新授课讲师</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <!--表格 -->
|
|
|
+ <a-table
|
|
|
+ class="tabel"
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="dataList"
|
|
|
+ bordered
|
|
|
+ :pagination="false"
|
|
|
+ :loading="loading"
|
|
|
+ ref="shopTable"
|
|
|
+ >
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <!-- 图片样式 -->
|
|
|
+ <!-- <template v-if="column.key === 'img'">
|
|
|
+ <a-image
|
|
|
+ :width="40"
|
|
|
+ :height="40"
|
|
|
+ :src="record.img"
|
|
|
+ />
|
|
|
+ </template> -->
|
|
|
+ <!-- 任务状态 -->
|
|
|
+ <template v-if="column.key === 'switch'">
|
|
|
+ <a-switch v-model:checked='record.status' :checkedValue="1" :unCheckedValue="0"
|
|
|
+ @change="switchChange(record)"></a-switch>
|
|
|
+ </template>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template v-if="column.key === 'handle'">
|
|
|
+ <a-button type="link" @click="edit(record)">编辑</a-button>
|
|
|
+ <a-popconfirm
|
|
|
+ title="是否确定删除？删除后不可恢复，请谨慎操作！"
|
|
|
+ ok-text="确认"
|
|
|
+ cancel-text="取消"
|
|
|
+ @confirm="delSubmit(record.id)"
|
|
|
+ >
|
|
|
+ <a-button type="link" style="color:#FF4D4F">删除</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <!-- 页码-->
|
|
|
+ <!-- <a-pagination
|
|
|
+ v-model:current="paginationData.current"
|
|
|
+ pageSize="20"
|
|
|
+ :total="paginationData.total"
|
|
|
+ :show-total="(total, range) => `第${range[0]}-${range[1]} 条，共 ${total} 条`"
|
|
|
+ @change="changePage"
|
|
|
+ show-less-items
|
|
|
+ /> -->
|
|
|
+ <!-- 新增--编辑弹窗 -->
|
|
|
+ <a-modal v-model:visible="addPop" :title="addData.id ? '编辑授课讲师' :'新增授课讲师'" @ok="submit" okText="确定" cancelText="取消" >
|
|
|
+ <a-form :model="addData" :labelCol="{ style: 'width:120px' }" ref="formRef" :rules="rules">
|
|
|
+ <a-form-item label="授课讲师名称" name="name">
|
|
|
+ <!-- 授课讲师名称 -->
|
|
|
+ <a-input class="tasktype" placeholder="请输入名称" v-model:value="addData.name"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <!-- 授课讲师职称 -->
|
|
|
+ <!-- <a-form-item label="职称" name="title">
|
|
|
+ <a-input class="tasktype" placeholder="请输入职称" v-model:value="addData.title"></a-input>
|
|
|
+ </a-form-item> -->
|
|
|
+ <a-form-item label="手机号" name="phone">
|
|
|
+ <!-- 授课讲师手机号 -->
|
|
|
+ <a-input class="tasktype" placeholder="请输入手机号" v-model:value="addData.phone"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <!-- <a-form-item label="上传图片" name="img">
|
|
|
+ <ul class="upImg">
|
|
|
+ <li>{{addData.coverimg}}</li>
|
|
|
+ <li class="img_icon" v-if="addData.coverimg">
|
|
|
+ <CloseCircleTwoTone class="icon_del" @click="delAdCover()"/>
|
|
|
+ <img :src="addData.coverimg" >
|
|
|
+ </li>
|
|
|
+ <li class="upload" v-else >
|
|
|
+ <uploadImg path="cms/admin/img"
|
|
|
+ class="upload-img"
|
|
|
+ @imgSuccess="(url) => adCoverSuccess(url)" :imgUrl="addData.img" />
|
|
|
+ </li>
|
|
|
+ <li class="warn">*请上传尺寸68px*68px,png或jpeg格式的图片</li>
|
|
|
+ </ul>
|
|
|
+ </a-form-item> -->
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <script>
|
|
|
+ import { defineComponent,onMounted,ref } from 'vue'
|
|
|
+
|
|
|
+ import uploadImg from "../../components/upload-img.vue";
|
|
|
+ // import {getempower,updateempower,addempower,delempower, shop_train} from '@/api'
|
|
|
+ import { curriculAJAXREQUEST } from "@/api";
|
|
|
+ import AJAXPATH from "@/api/path";
|
|
|
+
|
|
|
+ import { message } from 'ant-design-vue'
|
|
|
+ import { CloseCircleTwoTone,CloseCircleOutlined } from '@ant-design/icons-vue';
|
|
|
+ import Sortable from "sortablejs";
|
|
|
+
|
|
|
+ export default defineComponent({
|
|
|
+ components: {
|
|
|
+ uploadImg,
|
|
|
+ CloseCircleTwoTone
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const formRef = ref();
|
|
|
+ // 搜索数据
|
|
|
+ const searchData = ref({
|
|
|
+ // 请求数据时需要带页码，默认1
|
|
|
+ })
|
|
|
+ // 新增/编辑表单数据
|
|
|
+ const addData = ref({})
|
|
|
+ //弹窗显示开关
|
|
|
+ const addPop = ref(false)
|
|
|
+ // 表格数据
|
|
|
+ const dataList = ref([])
|
|
|
+ //分页数据
|
|
|
+ const paginationData = ref({
|
|
|
+ current:1,
|
|
|
+ total:0,
|
|
|
+ })
|
|
|
+ //拖拽
|
|
|
+ const mokeDataList= ref([])
|
|
|
+ // 加载中
|
|
|
+ const loading = ref(false)
|
|
|
+ //获取请求列表
|
|
|
+ const getData = async(e) =>{
|
|
|
+ const { code, data ,count} = await curriculAJAXREQUEST({
|
|
|
+ path: AJAXPATH.teacher.path,
|
|
|
+ method: AJAXPATH.teacher.method,
|
|
|
+ data: {},
|
|
|
+ });
|
|
|
+ if(code == 0){
|
|
|
+ dataList.value = data
|
|
|
+ console.log(132,data,count);
|
|
|
+ if(count){
|
|
|
+ paginationData.value.total=count
|
|
|
+ }
|
|
|
+ mokeDataList.value = JSON.parse(JSON.stringify(dataList.value))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //新增数据
|
|
|
+ const add = () =>{
|
|
|
+ // 将addData置空
|
|
|
+ addData.value = {}
|
|
|
+ addPop.value = true
|
|
|
+ }
|
|
|
+ //编辑数据
|
|
|
+ const edit = (item) =>{
|
|
|
+ // 获取当前点击的行数据
|
|
|
+ addData.value = {
|
|
|
+ id:item.id,
|
|
|
+ name:item.name,
|
|
|
+ img: item.img,
|
|
|
+ title: item.title,
|
|
|
+ phone: item.phone,
|
|
|
+ }
|
|
|
+ addPop.value = true
|
|
|
+ }
|
|
|
+ //删除数据
|
|
|
+ const delSubmit = async(id) =>{
|
|
|
+ // delempower(id)
|
|
|
+ const { code} = await curriculAJAXREQUEST({
|
|
|
+ path: AJAXPATH.teacher.path +"/"+ id,
|
|
|
+ method: 'DELETE',
|
|
|
+ });
|
|
|
+ if(code == 0){
|
|
|
+ message.success('删除成功');
|
|
|
+ }else{
|
|
|
+ message.error('删除失败');
|
|
|
+ }
|
|
|
+ getData()
|
|
|
+ }
|
|
|
+ //搜索数据
|
|
|
+ const search = () =>{
|
|
|
+ searchData.value.page= 1
|
|
|
+ getData()
|
|
|
+ }
|
|
|
+ //置空搜索
|
|
|
+ const reset = () => {
|
|
|
+ searchData.value = {
|
|
|
+ page:1,
|
|
|
+ }
|
|
|
+ paginationData.value.current = 1
|
|
|
+ getData()
|
|
|
+ }
|
|
|
+ // 上传图片
|
|
|
+ const addimg = ref({})
|
|
|
+ // const imgData = ref()
|
|
|
+
|
|
|
+ const adCoverSuccess = (imgUrl)=>{
|
|
|
+ addData.value.img = imgUrl
|
|
|
+ console.log(addData.value.img,'图片')
|
|
|
+ addData.value.coverimg = imgUrl
|
|
|
+ }
|
|
|
+ // 删除图片
|
|
|
+ const delAdCover = () => {
|
|
|
+ addData.value.img='',
|
|
|
+ addData.value.coverimg = ''
|
|
|
+ }
|
|
|
+ //数据提交
|
|
|
+ const submit = async() =>{
|
|
|
+ formRef.value.validate().then(async() => {
|
|
|
+ //console.log('values', addData.value, toRaw(addData.value));
|
|
|
+ if(addData.value.id){
|
|
|
+ // const {status} = await updateempower(
|
|
|
+ // addData.value.id,
|
|
|
+ // addData.value
|
|
|
+ // )
|
|
|
+ // if(!status){
|
|
|
+ const { code} = await curriculAJAXREQUEST({
|
|
|
+ path: AJAXPATH.teacher.path +"/"+ addData.value.id,
|
|
|
+ method: 'put',
|
|
|
+ data: addData.value,
|
|
|
+ });
|
|
|
+ if(code == 0){
|
|
|
+ message.success('修改成功');
|
|
|
+ }else{
|
|
|
+ message.error('修改失败');
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ // const {status} = await addempower(
|
|
|
+ // addData.value
|
|
|
+ // )
|
|
|
+ const { code} = await curriculAJAXREQUEST({
|
|
|
+ path: AJAXPATH.teacher.path,
|
|
|
+ method: 'POST',
|
|
|
+ data: addData.value,
|
|
|
+ });
|
|
|
+ if(code == 0){
|
|
|
+ // if(!status){
|
|
|
+ message.success('新增成功');
|
|
|
+ }else{
|
|
|
+ message.error('新增失败');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ addPop.value = false
|
|
|
+ getData()
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ console.log('error', error);
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ // 改变状态
|
|
|
+ const switchChange = async(record) =>{
|
|
|
+ //
|
|
|
+ console.log(record.id,record.status);
|
|
|
+ const { code} = await curriculAJAXREQUEST({
|
|
|
+ path: AJAXPATH.teacher.path +"/"+ record.id,
|
|
|
+ method: 'put',
|
|
|
+ data: record,
|
|
|
+ });
|
|
|
+ if(code == 0){
|
|
|
+ message.success('修改成功');
|
|
|
+ }else{
|
|
|
+ message.error('修改失败');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 验证规则
|
|
|
+ const rules = {
|
|
|
+ name:[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请填写内容',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ img:[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请填写内容',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ title:[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请填写内容',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ phone:[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请填写内容',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ const shopTable = ref(null);
|
|
|
+
|
|
|
+ //行拖拽
|
|
|
+ const rowDrop = () => {
|
|
|
+ const tabel = shopTable.value.$el;
|
|
|
+ Sortable.create(tabel.querySelector("tbody"), {
|
|
|
+ animation: 150,
|
|
|
+ async onEnd({ newIndex, oldIndex }) {
|
|
|
+ console.log(mokeDataList.value)
|
|
|
+ const currRow = mokeDataList.value.splice(oldIndex, 1)[0];
|
|
|
+ mokeDataList.value.splice(newIndex, 0, currRow);
|
|
|
+ const list = mokeDataList.value.map((item) => item.id);
|
|
|
+ let softs = list;
|
|
|
+ sortFocus(softs);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const sortFocus = async (sort1) => {
|
|
|
+ // bannerSort
|
|
|
+ const { code} = await curriculAJAXREQUEST({
|
|
|
+ path: AJAXPATH.bannerSort.path,
|
|
|
+ method: 'put',
|
|
|
+ data: {data:sort1,},
|
|
|
+ });
|
|
|
+ if(code == 0){
|
|
|
+ console.log( "排序");
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //页面加载
|
|
|
+ onMounted(() =>{
|
|
|
+ getData()
|
|
|
+ // rowDrop()
|
|
|
+ })
|
|
|
+
|
|
|
+ return{
|
|
|
+ shopTable,
|
|
|
+ formRef,
|
|
|
+ rules,
|
|
|
+ columns:[
|
|
|
+ {
|
|
|
+ title: "序号",
|
|
|
+ dataIndex: "key",
|
|
|
+ key: "key",
|
|
|
+ customRender: ({ text, record, index }) => {
|
|
|
+ return `${index + 1}`;
|
|
|
+ },
|
|
|
+ rowDrag: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "授课讲师名称",
|
|
|
+ key: "name",
|
|
|
+ dataIndex: "name",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // title: "头像",
|
|
|
+ // key: "img",
|
|
|
+ // dataIndex: "img",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: "职称",
|
|
|
+ // key: "title",
|
|
|
+ // dataIndex: "title",
|
|
|
+ // },
|
|
|
+ { title: "手机号",
|
|
|
+ key: "phone",
|
|
|
+ dataIndex: "phone",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "创建时间",
|
|
|
+ key: "createdAt",
|
|
|
+ dataIndex: "createdAt",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "修改时间",
|
|
|
+ key: "updatedAt",
|
|
|
+ dataIndex: "updatedAt",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ key: "handle",
|
|
|
+ dataIndex: "handle",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ searchData,
|
|
|
+ addData,
|
|
|
+ addPop,
|
|
|
+ dataList,
|
|
|
+ paginationData,
|
|
|
+ loading,
|
|
|
+ getData,
|
|
|
+ add,
|
|
|
+ edit,
|
|
|
+ search,
|
|
|
+ reset,
|
|
|
+ submit,
|
|
|
+ delSubmit,
|
|
|
+ switchChange,
|
|
|
+ adCoverSuccess,
|
|
|
+ delAdCover,
|
|
|
+ rowDrop
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ <style lang="scss" scoped>
|
|
|
+ .wrapper{
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .search_nav{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .reset{
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h1 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .select{
|
|
|
+ margin-right:20px;
|
|
|
+ }
|
|
|
+ .table-wrapper{
|
|
|
+ margin-top: 20px;
|
|
|
+ background: #fff;
|
|
|
+ /* padding: 20px; */
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .tasktype{
|
|
|
+ min-width: 300px;
|
|
|
+ }
|
|
|
+ .add_btn{
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .upImg{
|
|
|
+ height: 120px;
|
|
|
+ .img_icon{
|
|
|
+ // display: flex;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+ padding: 20px 10px 10px 0;
|
|
|
+ position: relative;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ .icon_del{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add_btn{
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .ant-modal-title{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .ant-modal-footer{
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .ant-modal-body{
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .warn{
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgb(255, 77, 79);
|
|
|
+ margin-left: 120px;
|
|
|
+ margin-top: -50px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
