课目管理

xiangpei

2024-09-23 710a9bf11a76b7b2fb27ba99f772ecc46aeb99fa

课目管理

 src/api/subject.js

@@ -3,9 +3,12 @@
export default {
  list: query => post('/api/admin/education/subject/list'),
  pageList: query => post('/api/admin/education/subject/page', query),
  edit: query => post('/api/admin/education/subject/edit', query),
  page: query => post('/api/admin/education/subject/page1', query),
  edit: data => post('/api/admin/education/subject/edit', data),
  update: data => post('/api/admin/education/subject/edit1', data),
  select: id => post('/api/admin/education/subject/select/' + id),
  selectByDeptId: deptId => get('/api/admin/education/subject/select/dept/' + deptId),
  deleteSubject: id => post('/api/admin/education/subject/delete/' + id),
  add: data => post('/api/admin/education/subject/add', data)
  add: data => post('/api/admin/education/subject/add', data),
  save: data => post('/api/admin/education/subject/save', data)
}

 src/router.js

@@ -115,6 +115,13 @@
        meta: { title: '部门课目', noCache: true }
      },
      {
        path: 'subject/manager',
        hidden: true,
        component: () => import('@/views/education/subject/manager'),
        name: 'SubjectManager',
        meta: { title: '课目管理', noCache: true }
      },
      {
        path: 'department/list',
        component: () => import('@/views/education/department/list'),
        name: 'EducationDepartmentPage',

 src/views/education/subject/list.vue

@@ -1,19 +1,25 @@
<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="查询条件：">
        <el-input v-model="queryParam.name" size="small"></el-input>
<!--        <el-select v-model="queryParam.level" placeholder="部门" clearable="">-->
<!--          <el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>-->
<!--        </el-select>-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" size="small">查询</el-button>
        <!-- <router-link :to="{path:'/education/subject/edit'}" class="link-left">
          <el-button type="primary">添加</el-button>
        </router-link> -->
      </el-form-item>
    </el-form>
    <div style="width: 100%;position: relative;display: flex">
      <el-form :model="queryParam" ref="queryForm" :inline="true">
        <el-form-item label="查询条件：">
          <el-input v-model="queryParam.name" size="small"></el-input>
          <!--        <el-select v-model="queryParam.level" placeholder="部门" clearable="">-->
          <!--          <el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>-->
          <!--        </el-select>-->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" size="small">查询</el-button>
          <!-- <router-link :to="{path:'/education/subject/edit'}" class="link-left">
            <el-button type="primary">添加</el-button>
          </router-link> -->
        </el-form-item>
      </el-form>
      <div style="position: absolute; right: 0">
        <el-button @click="jumpToSubject" type="primary">课目管理</el-button>
      </div>
    </div>


    <el-table
      v-loading="listLoading"
@@ -107,6 +113,9 @@
    this.getAllSubject()
  },
  methods: {
    jumpToSubject() {
      this.$router.push({path: '/education/subject/manager'})
    },
    getAllSubject() {
      subjectApi.list().then(res => {
        this.subjectList = res.response

 src/views/education/subject/manager.vue

New file
@@ -0,0 +1,152 @@
<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryForm">
      <el-form-item label="课目名称">
        <el-input v-model="queryForm.name" clearable @input="page" @clear="page"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="page">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        label="课目名称"
        >
      </el-table-column>
      <el-table-column
        label="操作"
        >
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small" style="margin-right: 5px">修改</el-button>
          <el-popconfirm
            title="确定要删除该课目吗？，该课目管理的数据都将被删除！"
            @confirm="del(scope.row.id)"
          >
            <el-button slot="reference" type="text" size="small">删除</el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryForm.pageIndex" :limit.sync="queryForm.pageSize"
                @pagination="page"/>

    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="editOpen"
      width="400px"
      :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="课目名称" prop="name">
          <el-input v-model="form.name" placeholder="课目名称"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editOpen = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import subjectApi from '@/api/subject'
import Pagination from '@/components/Pagination'

export default {
  name: "manager",
  components: {Pagination},
  data() {
    return {
      total: 0,
      queryForm: {
        name: '',
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [],
      title: '新增课目',
      editOpen: false,
      form: {
        id: null,
        name: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入课目名称'}
        ]
      }
    }
  },
  mounted() {
    this.page();
  },
  methods: {
    del(id) {
      subjectApi.deleteSubject(id).then(res => {
        this.$message.success("删除成功")
        this.page()
      })
    },
    page() {
      subjectApi.page(this.queryForm).then(res => {
        this.tableData = res.response.list
        this.total = res.response.total
      })
    },
    addOrUpdate() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            subjectApi.update(this.form).then(res => {
              this.editOpen = false
              this.$message.success("修改成功")
              this.page()
            })
          } else {
            subjectApi.save(this.form).then(res => {
              this.editOpen = false
              this.$message.success("添加成功")
              this.page()
            })
          }

        }
      })
    },
    handleAdd() {
      this.form = {
        id: null,
        name: ''
      }
      this.title = '新增课目'
      this.editOpen = true
    },
    handleEdit(row) {
      this.form.id = row.id
      this.form.name = row.name
      this.title = '修改课目'
      this.editOpen = true
    },
    handleClose() {
      this.editOpen = false
      this.form = {
        id: null,
        name: ''
      }
    }
  }
}
</script>

<style scoped>

</style>