更换Element

frontend_web/src/views/course/detail/editForm.vue

@@ -192,13 +192,10 @@ export default {
           .then(res => {
             _this.formdata = res
             // 编辑时初始化表单数据，给字段赋值
-            // _this.formdata.Status = _this.formdata.Status === 1
             // 判断多选的选中状态
             if (_this.formdata.Time) {
               let subStr = _this.formdata.Time
               _this.checkedTimes = subStr.split(',')
-
-              console.log(_this.checkedTimes)
             } else {
               _this.checkedTimes = []
             }
@@ -220,7 +217,6 @@ export default {
         _this.formdata.WeekTitle = ''
         _this.formdata.DayOfWeek = ''
         _this.formdata.Time = []
-        // _this.formdata.Status = 0
         _this.checkedTimes = [] // 多选选中项、
       }
     },
@@ -229,7 +225,6 @@ export default {
       _this.formdata.Id = this.id
       _this.$refs['form'].validate(valid => {
         if (valid) {
-          // _this.formdata.Status = _this.formdata.Status ? 1 : 0
           _this.loading = true
           detailApi.save(_this.formdata)
             .then(data => {

frontend_web/src/views/course/detail/index.vue

@@ -44,16 +44,67 @@
                 </el-form-item>
             </el-form>
         </template>
-        <ag-grid-vue class="table ag-theme-balham ag-title-center"
-                     style="width: 100%; height: 100%;"
-                     id="myGrid"
-                     :gridOptions="gridOptions"
-                     @gridReady="onGridReady"
-                     :rowData="rowData"
-                     :columnDefs="columnDefs"
-                     rowSelection="multiple"
-        >
-        </ag-grid-vue>
+
+        <el-table ref="multipleTable"
+                  :data="activities"
+                  border
+                  fit
+                  tooltip-effect="dark"
+                  style="width: 100%"
+                  @sort-change="orderby"
+                  height="100%">
+            <el-table-column label="操作"
+                             width="160px"
+                             align="center"
+                             fixed='right'>
+                <template slot-scope="scope">
+                    <el-button size="mini"
+                               title="编辑"
+                               type="primary"
+                               @click="handleEdit(scope.row.Id)"
+                               icon="el-icon-edit"
+                               circle></el-button>
+                    <el-button size="mini"
+                               type="danger"
+                               title="删除"
+                               @click="handleDelete(scope.row.Id)"
+                               style="margin-left:5px;"
+                               icon="el-icon-delete"
+                               circle></el-button>
+
+                </template>
+            </el-table-column>
+            <el-table-column prop="CourseName"
+                             align="center"
+                             min-width="120px"
+                             label="课程名称"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Teacher"
+                             align="center"
+                             min-width="120px"
+                             label="授课老师"
+                             show-overflow-tooltip
+                             :formatter="teacherFormatter"
+            ></el-table-column>
+            <el-table-column prop="Local"
+                             align="center"
+                             min-width="120px"
+                             label="实验地点"
+                             show-overflow-tooltip
+                             :formatter="localFormatter"
+            ></el-table-column>
+            <el-table-column prop="Num"
+                             align="center"
+                             min-width="120px"
+                             label="人数"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="CreatedTime"
+                             align="center"
+                             min-width="120px"
+                             label="创建时间"
+                             show-overflow-tooltip></el-table-column>
+        </el-table>
+
         <template slot="footer">
             <el-pagination style="margin: -10px;"
                            @size-change="handleSizeChange"
@@ -79,17 +130,15 @@
 
 <script>
 import itemDetailApi from '@/api/sysadmin/itemdetail'
-import command from './components/command'
 import detailApi from '@/api/course/detail'
 import editForm from './editForm'
 import { searchmanagingroomdata } from '@/api/instrumentroom'
-import { AgGridVue } from 'ag-grid-vue'
 import 'ag-grid-community/dist/styles/ag-grid.css'
 import 'ag-grid-community/dist/styles/ag-theme-balham.css'
 
 export default {
   name: 'courseDetail',
-  components: { AgGridVue, editForm },
+  components: { editForm },
   data () {
     return {
       // ag-grid相关变量
@@ -98,6 +147,7 @@ export default {
       columnApi: null,
       rowData: null,
       columnDefs: null,
+      activities: [],
       RoomList: [],
       TeacherList: [],
       page: {
@@ -127,7 +177,6 @@ export default {
     }
   },
   beforeMount () {
-    let _this = this
     this.gridOptions = {
       rowHeight: 32, // 设置行高为32px
       // 缺省列属性
@@ -138,55 +187,18 @@ export default {
       onRowSelected: this.handleSelectionChange, // 行选中
       onSortChanged: this.handleSortChange // 排序传递后台
     }
-    this.columnDefs = [
-      { headerName: '', checkboxSelection: true, headerCheckboxSelection: true, width: 50, 'pinned': 'left' },
-      {
-        headerName: '序号',
-        width: 50,
-        field: 'OrdNo',
-        cellRenderer: (params) => {
-          return params ? params.node.rowIndex + 1 + '' : ''
-        }
-      },
-      { headerName: '课程名称', field: 'CourseName', sortable: true },
-      { headerName: '授课老师', field: 'Teacher', valueFormatter: teacherFormatter },
-      { headerName: '实验地点', field: 'Local', valueFormatter: localFormatter },
-
-      { headerName: '人数', field: 'Num', sortable: true },
-
-      { headerName: '创建时间', field: 'CreatedTime', sortable: true },
-      { headerName: '操作', field: 'operation', width: 120, 'pinned': 'right', cellRendererFramework: command }
-    ]
-
-    // 授课老师
-    function teacherFormatter (item) {
-      for (var i = 0; i < _this.TeacherList.length; i++) {
-        if (parseInt(_this.TeacherList[i].ItemValue) === item.value) {
-          return _this.TeacherList[i].ItemName
-        }
-      }
-    }
-
-    // 实验地点
-    function localFormatter (item) {
-      for (var i = 0; i < _this.RoomList.length; i++) {
-        if (parseInt(_this.RoomList[i].Id) === item.value) {
-          return _this.RoomList[i].RoomName
-        }
-      }
-    }
   },
   created () {
   },
-  mounted () {
+  mounted: function () {
     let _this = this
+    _this.getTeacherList()
     _this.gridOptions.context = { page: _this }
     _this.gridApi = _this.gridOptions.api
     _this.CourseId = _this.$route.query.CourseId
     _this.Year = _this.$route.query.Year
     _this.Term = _this.$route.query.Term
     _this.Class = _this.$route.query.Class
-    this.getTeacherList()
     let params = {
       _currentPage: 1,
       _size: 9999
@@ -217,6 +229,14 @@ export default {
         _this.TeacherList = []
       }
     },
+    // 授课老师
+    teacherFormatter (row, column) {
+      for (var i = 0; i < this.TeacherList.length; i++) {
+        if (parseInt(this.TeacherList[i].ItemValue) === row.Teacher) {
+          return this.TeacherList[i].ItemName
+        }
+      }
+    },
     // 获取实验室地点
     getRoomList (params) {
       let _this = this
@@ -234,6 +254,14 @@ export default {
         _this.RoomList = []
       }
     },
+    // 实验地点
+    localFormatter (row, column) {
+      for (var i = 0; i < this.RoomList.length; i++) {
+        if (parseInt(this.RoomList[i].Id) === row.Local) {
+          return this.RoomList[i].RoomName
+        }
+      }
+    },
     // 执行刷新(获取数据)
     doRefresh () {
       let _this = this
@@ -250,7 +278,7 @@ export default {
       }
       detailApi.getList(query)
         .then(res => {
-          _this.rowData = res.records ? res.records : []
+          _this.activities = res.records ? res.records : []
           _this.page.current = res.current
           _this.page.size = res.size
           _this.page.total = res.total
@@ -278,16 +306,24 @@ export default {
     },
     // 处理删除
     handleDelete (id) {
-      const params = {
-        ids: this.deleteIds
+      let _this = this
+      let params = {
+        id: id
       }
-      detailApi.delete(params).then((res) => {
-        this.$message({
-          type: 'success',
-          message: '删除成功!'
-        })
-        this.doRefresh()
+      _this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '关闭',
+        type: 'warning'
+      }).then(() => {
+        detailApi.delete(params)
+          .then(data => {
+            _this.doRefresh()
+          })
+          .catch(function (error) {
+            console.log(error)
+          })
       })
+        .catch(() => { })
     },
 
     // 查询
@@ -357,6 +393,16 @@ export default {
     },
     back () { // 返回上一页
       this.$router.go(-1)
+    },
+    // 列表排序功能
+    orderby (column) {
+      if (column.order === 'ascending') {
+        this.Column.Order = 'asc'
+      } else if (column.order === 'descending') {
+        this.Column.Order = 'desc'
+      }
+      this.Column.Prop = column.prop
+      this.initDatas()
     }
   }
 }