lims_college/frontend_web/src/views/sysadmin/item/index.vue

<template>
  <d2-container>
    <template slot="header">
      <el-form :inline="true"
               :model="searchForm"
               ref="searchForm"
               size="mini"
               style="height: 25px; margin-top: -7px;text-align:right;">
        <el-form-item label="字典分类名称"
                      prop="name">
          <el-input v-model="searchForm.name"
                    placeholder="字典分类名称"
                    style="width: 140px;"
                    clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     size="mini"
                     style="margin-left:10px"
                     @click="handleSearch">
            <d2-icon name="search" /> 查询
          </el-button>
          <el-button @click="handleSearchFormReset"
                     type="primary"
                     size="mini">
            <d2-icon name="refresh" /> 重置
          </el-button>
          <el-button type="primary"
                     size="mini"
                     icon="el-icon-circle-plus"
                     @click="add"> 新增
          </el-button>
          <el-button type="primary"
                     size="mini"
                     icon="el-icon-circle-plus"
                     :disabled="deleteBtnVisible"
                     @click="delSelectedIds"> 删除
          </el-button>
        </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>
    <template slot="footer">
      <el-pagination style="margin: -10px;"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page.current"
                     :page-size="page.size"
                     :total="page.total"
                     :page-sizes="[10, 20]"
                     layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </template>
    <edit-form :id="id"
               v-model="editFormVisible"
               @submit="doRefresh" />
  </d2-container>
</template>

<script>
import command from './components/command'
import itemApi from '@/api/sysadmin/item'
import editForm from './editForm'
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: 'item',
  components: { AgGridVue, editForm },
  data () {
    return {
      // ag-grid相关变量
      gridOptions: null,
      gridApi: null,
      columnApi: null,
      rowData: null,
      columnDefs: null,

      page: {
        current: 1,
        size: 10,
        total: 1
      },
      sort: {
        prop: '',
        order: ''
      },

      id: -1,
      rowdata: {},
      searchForm: {
        name: ''
        // code: ''
      },
      loading: false,
      multipleSelection: [],
      editFormVisible: false,
      deleteBtnVisible: true,
      deleteIds: []
    }
  },
  beforeMount () {
    this.gridOptions = {
      rowHeight: 32, // 设置行高为32px
      // 缺省列属性
      defaultColDef: {
        width: 200,
        resizable: true
      },
      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: 'FullName',
        sortable: true
      }, {
        headerName: '分类编码',
        field: 'Code',
        sortable: true
      }, {
        headerName: '关联表',
        field: 'TargetTable',
        sortable: true
      }, {
        headerName: '使用分类名',
        field: 'UseItemName',
        valueFormatter (params) {
          return params.value === 0 ? '否' : '是'
        }
      },
      {
        headerName: '使用分类编码',
        field: 'UseItemCode',
        valueFormatter (params) {
          return params.value === 0 ? '否' : '是'
        }
      },
      {
        headerName: '树结构',
        field: 'IsTree',
        valueFormatter (params) {
          return params.value === 0 ? '否' : '是'
        },
        sortable: true
      },
      { headerName: '排序', field: 'SortCode' },
      { headerName: '备注', field: 'Description' },
      { headerName: '创建时间', field: 'CreateOn', sortable: true },
      { headerName: '更新时间', field: 'ModifiedOn', sortable: true },
      { headerName: '操作', field: 'operation', width: 160, 'pinned': 'right', cellRendererFramework: command }
    ]
  },
  created () {
  },
  mounted () {
    this.gridOptions.context = { page: this }
    this.gridApi = this.gridOptions.api
    this.gridColumnApi = this.gridOptions.columnApi
    this.doRefresh()
  },
  methods: {

    // 表格就绪后后执行
    onGridReady (params) {
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit()
    },
    // 执行刷新(获取数据)
    doRefresh () {
      let _this = this
      let query = {
        // 分页信息
        size: this.page.size,
        current: this.page.current,
        // 排序信息
        prop: this.sort.prop,
        order: this.sort.order,
        // 搜索名称
        name: this.searchForm.name
      }
      itemApi.getList(query)
        .then(res => {
          _this.rowData = res.records
          _this.page.total = res.total
          _this.deleteBtnVisible = true
        })
        .catch(err => {
          console.error(err)
        })
    },

    // 分页-改变分页大小
    handleSizeChange (value) {
      this.page.size = value
      this.page.current = 1
      this.doRefresh()
    },
    // 分页-改变当前页
    handleCurrentChange (value) {
      this.page.current = value
      this.doRefresh()
    },
    // 处理编辑
    handleEdit (id) {
      this.id = id
      this.editFormVisible = true
    },
    // 处理删除
    handleDelete (id) {
      const params = {
        ids: this.deleteIds
      }
      itemApi.delete(params).then((res) => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.doRefresh()
      })
    },
    // 查询
    handleSearch () {
      this.currentPage = 1
      this.doRefresh()
    },
    // 重置
    handleSearchFormReset () {
      this.searchForm.name = ''
      this.doRefresh()
    },
    // 新建窗口
    add () {
      this.rowdata = {}
      this.id = -1
      this.editFormVisible = true
    },
    // 批量删除
    delSelectedIds () {
      this.$confirm('此操作将永久删除所选字典分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          ids: this.deleteIds
        }
        itemApi.delete(params).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.doRefresh()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 处理列表选择
    handleSelectionChange () {
      let _this = this
      _this.multipleSelection = _this.gridOptions.api.getSelectedRows()
      _this.deleteBtnVisible = !_this.multipleSelection || _this.multipleSelection.length === 0
      if (!_this.deleteBtnVisible) {
        _this.deleteIds = []
        // 赋值删除id列表
        _this.multipleSelection.forEach((item, k) => {
          _this.deleteIds.push(item.Id)
        })
      } else {
        _this.deleteIds = []
      }
    },
    handleSortChange (val) {
      var sortState = this.gridApi.getSortModel()
      // 获取排序的字段
      if (sortState && sortState.length > 0) {
        var item = sortState[0]
        this.sort.prop = item.colId
        this.sort.order = item.sort
      }
      this.doRefresh()
    }
  }
}
</script>

<style lang="scss">
.el-pagination {
  margin: 1rem 0 2rem;
  text-align: right;
}

.plab {
  font-size: 13px;
  color: #999;
}

.rowequippower .el-checkbox {
  margin-left: 1px;
  padding: 5px 10px 0 0;
}
.ag-header-cell-text {
  text-align: center;
  width: 100%;
}
</style>