|
@@ -1,14 +1,68 @@
|
|
|
<template>
|
|
|
<div class="formwrap">
|
|
|
- <en-table-layout
|
|
|
- toolbar
|
|
|
- @selection-change="selectFun"
|
|
|
- @sort-change="tableSort"
|
|
|
- pagination
|
|
|
- :tableData="tableData"
|
|
|
- :height="600"
|
|
|
- :loading="loading"
|
|
|
- :default-sort="{prop: 'id', order: 'ascending'}"
|
|
|
+<!-- <en-table-layout-->
|
|
|
+<!-- toolbar-->
|
|
|
+<!-- @selection-change="selectFun"-->
|
|
|
+<!-- @sort-change="tableSort"-->
|
|
|
+<!-- pagination-->
|
|
|
+<!-- :tableData="tableData"-->
|
|
|
+<!-- :height="600"-->
|
|
|
+<!-- :loading="loading"-->
|
|
|
+<!-- :default-sort="{prop: 'id', order: 'ascending'}"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <!–表头–>-->
|
|
|
+<!-- <template slot="table-columns">-->
|
|
|
+<!-- <el-table-column type="selection" width="55" align="center"></el-table-column>-->
|
|
|
+<!-- <el-table-column style="text-align: left;" label="图标" width="70">-->
|
|
|
+<!-- <template slot-scope="scope">-->
|
|
|
+<!-- <el-image :src="scope.row.icon_src" lazy fit="cover" :preview-src-list="srcList" @click="lookBigImg(scope.row.icon_src)">-->
|
|
|
+<!-- <div slot="error" class="image-slot">-->
|
|
|
+<!-- <i class="el-icon-picture-outline"></i>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </el-image>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-table-column>-->
|
|
|
+<!-- <el-table-column prop="name" label="名称" min-width="150" align="center" />-->
|
|
|
+<!-- <el-table-column prop="desc" label="描述" min-width="150" align="center" />-->
|
|
|
+<!-- <el-table-column prop="key_code" label="唯一标识码" width="160" align="center" />-->
|
|
|
+<!-- <el-table-column prop="min_x" label="x轴范围" align="center" width="150" :formatter="formatterX" />-->
|
|
|
+<!-- <el-table-column prop="min_y" label="y轴范围" width="150" align="center" :formatter="formatterY" />-->
|
|
|
+<!-- <el-table-column prop="create_time" label="创建时间" width="170" align="center" :formatter="formatterDate" />-->
|
|
|
+<!-- <el-table-column style="text-align: left;" label="操作" width="150">-->
|
|
|
+<!-- <template slot-scope="scope">-->
|
|
|
+<!-- <el-button type="success" size="mini" @click="handlerEdit(scope.$index,scope.row)">编辑</el-button>-->
|
|
|
+<!-- <el-button type="danger" size="mini" @click="handlerDelete(scope.row.id)">删除</el-button>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-table-column>-->
|
|
|
+<!-- </template>-->
|
|
|
+
|
|
|
+<!-- <!–翻页–>-->
|
|
|
+<!-- <el-pagination-->
|
|
|
+<!-- slot="pagination"-->
|
|
|
+<!-- v-if="pageData"-->
|
|
|
+<!-- :current-page="pageData.page_no"-->
|
|
|
+<!-- :page-sizes="[10, 20, 50, 100]"-->
|
|
|
+<!-- :page-size="pageData.page_size"-->
|
|
|
+<!-- @size-change="handlePageSizeChange"-->
|
|
|
+<!-- @current-change="handlePageCurrentChange"-->
|
|
|
+<!-- layout="total, sizes, prev, pager, next, jumper"-->
|
|
|
+<!-- :total="pageData.data_total">-->
|
|
|
+<!-- </el-pagination>-->
|
|
|
+<!-- </en-table-layout>-->
|
|
|
+
|
|
|
+ <ag-grid-layout
|
|
|
+ :table-height="tableHeight"
|
|
|
+ theme="ag-theme-alpine"
|
|
|
+ :column-defs="columnDefs"
|
|
|
+ :row-data="tableData"
|
|
|
+ :locale-text="localeText"
|
|
|
+ :grid-options="gridOptions"
|
|
|
+ :default-col-def="defaultColDef"
|
|
|
+ :animate-rows="true"
|
|
|
+ :row-selection="rowSelection"
|
|
|
+ rowHeight="50"
|
|
|
+ @filterChanged="filterModifed"
|
|
|
+ @sortChanged="gridSortChange"
|
|
|
>
|
|
|
<!--工具栏-->
|
|
|
<div slot="toolbar" class="inner-toolbar">
|
|
@@ -19,45 +73,21 @@
|
|
|
<el-button type="primary" @click="handleAdd">新增</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!--表头-->
|
|
|
- <template slot="table-columns">
|
|
|
- <el-table-column type="selection" width="55" align="center"></el-table-column>
|
|
|
- <el-table-column style="text-align: left;" label="图标" width="70">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-image :src="scope.row.icon_src" lazy fit="cover" :preview-src-list="srcList" @click="lookBigImg(scope.row.icon_src)">
|
|
|
- <div slot="error" class="image-slot">
|
|
|
- <i class="el-icon-picture-outline"></i>
|
|
|
- </div>
|
|
|
- </el-image>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name" label="名称" min-width="150" align="center" />
|
|
|
- <el-table-column prop="desc" label="描述" min-width="150" align="center" />
|
|
|
- <el-table-column prop="key_code" label="唯一标识码" width="160" align="center" />
|
|
|
- <el-table-column prop="min_x" label="x轴范围" align="center" width="150" :formatter="formatterX" />
|
|
|
- <el-table-column prop="min_y" label="y轴范围" width="150" align="center" :formatter="formatterY" />
|
|
|
- <el-table-column prop="create_time" label="创建时间" width="170" align="center" :formatter="formatterDate" />
|
|
|
- <el-table-column style="text-align: left;" label="操作" width="150">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button type="success" size="mini" @click="handlerEdit(scope.$index,scope.row)">编辑</el-button>
|
|
|
- <el-button type="danger" size="mini" @click="handlerDelete(scope.row.id)">删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!--翻页-->
|
|
|
<el-pagination
|
|
|
- slot="pagination"
|
|
|
v-if="pageData"
|
|
|
+ slot="pagination"
|
|
|
:current-page="pageData.page_no"
|
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
|
:page-size="pageData.page_size"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="pageData.data_total"
|
|
|
@size-change="handlePageSizeChange"
|
|
|
@current-change="handlePageCurrentChange"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="pageData.data_total">
|
|
|
- </el-pagination>
|
|
|
- </en-table-layout>
|
|
|
+ />
|
|
|
+ </ag-grid-layout>
|
|
|
+ <template>
|
|
|
+ <image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList"/>
|
|
|
+ </template>
|
|
|
<!--编辑表单-->
|
|
|
<el-dialog title="编辑按钮事件" :visible.sync="formshow" width="50%">
|
|
|
<div>
|
|
@@ -109,9 +139,17 @@
|
|
|
<script>
|
|
|
import * as API_event from '@/api/ncs_event'
|
|
|
import {unix2Date, unixToDate} from "@/utils/Foundation"
|
|
|
- import {serverUrl} from "@/utils/domain";
|
|
|
+ import {serverUrl} from "@/utils/domain"
|
|
|
+ import { AG_GRID_LOCALE_CN } from '@/utils/AgGridVueLocaleCn'
|
|
|
+ import {param} from "@/utils"
|
|
|
+ import ButtonCellRender from "@/components/AgGridCellRender/ButtonCellRender"
|
|
|
+ import AgGridImg from "@/components/AgGridImg/AgGridImg"
|
|
|
+ import ImageViewer from "element-ui/packages/image/src/image-viewer"
|
|
|
+ let prevOverflow = ''
|
|
|
+
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
+ components: { ButtonCellRender, AgGridImg, ImageViewer },
|
|
|
data: function () {
|
|
|
return {
|
|
|
/** 表格数据 */
|
|
@@ -137,7 +175,15 @@
|
|
|
editflag: 0,
|
|
|
srcList: ['1'],
|
|
|
uploadurl: serverUrl + '/ncs/upload/uploadFile',
|
|
|
- imageUrl: ''
|
|
|
+ imageUrl: '',
|
|
|
+ columnDefs: null, // 新表格
|
|
|
+ defaultColDef: null,
|
|
|
+ gridOptions: null,
|
|
|
+ gridApi: null,
|
|
|
+ columnApi: null,
|
|
|
+ localeText: AG_GRID_LOCALE_CN,
|
|
|
+ rowSelection: null,
|
|
|
+ showViewer: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -145,6 +191,84 @@
|
|
|
return this.mainAreaHeight - 130
|
|
|
}
|
|
|
},
|
|
|
+ beforeMount() {
|
|
|
+ this.gridOptions = {
|
|
|
+ }
|
|
|
+ this.columnDefs = [
|
|
|
+ {
|
|
|
+ headerName: '#',
|
|
|
+ headerCheckboxSelection: true,
|
|
|
+ headerCheckboxSelectionFilteredOnly: true,
|
|
|
+ checkboxSelection: true,
|
|
|
+ sortable: false, filter: false,
|
|
|
+ width: 50,
|
|
|
+ resizable: false,
|
|
|
+ valueGetter: this.hashValueGetter
|
|
|
+ },
|
|
|
+ { headerName: '图标', field: 'icon_src', sortable: true, filter: false, width: 70,
|
|
|
+ cellRendererFramework: 'AgGridImg',
|
|
|
+ cellRendererParams: param => {
|
|
|
+ return {
|
|
|
+ onClick: this.lookBigImg,
|
|
|
+ face: 'icon_src'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ { headerName: '名称', field: 'name', sortable: true, minWidth: 150 },
|
|
|
+ { headerName: '描述', field: 'desc', sortable: true, minWidth: 220 },
|
|
|
+ { headerName: '唯一标识码', field: 'key_code', sortable: true, width: 160 },
|
|
|
+ { headerName: 'x轴范围', field: 'min_x', sortable: true, filter: false, valueFormatter: this.formatterX, minWidth: 150 },
|
|
|
+ { headerName: 'y轴范围', field: 'min_y', sortable: true, filter: false, valueFormatter: this.formatterY, width: 150 },
|
|
|
+ { headerName: '创建时间', field: 'create_time', sortable: true, filter: false, valueFormatter: this.formatterDate, width: 170 },
|
|
|
+ { headerName: '编辑', field: 'id',
|
|
|
+ cellRendererFramework: 'ButtonCellRender',
|
|
|
+ cellRendererParams: param => {
|
|
|
+ return {
|
|
|
+ onClick: this.handlerEdit,
|
|
|
+ label: '编辑',
|
|
|
+ buttonType: 'primary',
|
|
|
+ buttonSize: 'mini'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filter: false,
|
|
|
+ pinned: 'right',
|
|
|
+ lockPinned: true,
|
|
|
+ width: 100,
|
|
|
+ resizable: false,
|
|
|
+ sortable: false
|
|
|
+ },
|
|
|
+ { headerName: '删除', field: 'id',
|
|
|
+ cellRendererFramework: 'ButtonCellRender',
|
|
|
+ cellRendererParams: param => {
|
|
|
+ return {
|
|
|
+ onClick: this.deleteSingle,
|
|
|
+ label: '删除',
|
|
|
+ buttonType: 'danger',
|
|
|
+ buttonSize: 'mini'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ pinned: 'right',
|
|
|
+ lockPinned: true,
|
|
|
+ width: 100,
|
|
|
+ resizable: false,
|
|
|
+ filter: false,
|
|
|
+ sortable: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.defaultColDef = {
|
|
|
+ filter: 'agTextColumnFilter',
|
|
|
+ sortable: true,
|
|
|
+ resizable: true,
|
|
|
+ comparator: this.testComparator,
|
|
|
+ filterParams: {
|
|
|
+ debounceMs: 200,
|
|
|
+ newRowsAction: 'keep',
|
|
|
+ textCustomComparator: this.textCustomComparator,
|
|
|
+ comparator: this.testComparator
|
|
|
+ }
|
|
|
+ },
|
|
|
+ this.rowSelection = 'multiple'
|
|
|
+ },
|
|
|
mounted() {
|
|
|
this.getList()
|
|
|
},
|
|
@@ -159,7 +283,7 @@
|
|
|
this.editflag = 0
|
|
|
this.formshow = true
|
|
|
},
|
|
|
- handlerEdit: function (index, row) {
|
|
|
+ handlerEdit: function (row) {
|
|
|
this.formmodel = Object.assign({}, row)
|
|
|
this.imageUrl = row.icon_src
|
|
|
this.editflag = 1
|
|
@@ -169,6 +293,9 @@
|
|
|
selectFun(val) {
|
|
|
this.multipleSelection = val
|
|
|
},
|
|
|
+ deleteSingle(row) {
|
|
|
+ this.handlerDelete(row.id)
|
|
|
+ },
|
|
|
/** 单条数据删除处理 */
|
|
|
handlerDelete(ids) {
|
|
|
this.$confirm('删除操作后数据不可复原,您确定要删除此数据?', '警告', {
|
|
@@ -197,18 +324,6 @@
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- /** 批量数据删除处理(删除选中的行) */
|
|
|
- batchDelete: function () {
|
|
|
- if (rows.length === 0) {
|
|
|
- this.$message({ type: 'info', message: '请先勾选需要删除的数据' })
|
|
|
- return
|
|
|
- }
|
|
|
- const ids = []
|
|
|
- rows.forEach(function (item) {
|
|
|
- ids.push(item.id)
|
|
|
- })
|
|
|
- this.handlerDelete(ids.join(','))
|
|
|
- },
|
|
|
/** 分页大小发生改变 */
|
|
|
handlePageSizeChange(size) {
|
|
|
this.params.page_size = size
|
|
@@ -279,10 +394,6 @@
|
|
|
}
|
|
|
this.getList()
|
|
|
},
|
|
|
- lookBigImg(img) {
|
|
|
- this.srcList = []
|
|
|
- this.srcList.push(img)
|
|
|
- },
|
|
|
/** 图片上传之前的校验 */
|
|
|
handleShopLogoBefore(file) {
|
|
|
return new Promise((resolve, reject) => {
|
|
@@ -328,18 +439,18 @@
|
|
|
this.imageUrl = serverUrl + '/' + res
|
|
|
this.formmodel.icon_src = this.imageUrl
|
|
|
},
|
|
|
- formatterX(row, column, cellValue) {
|
|
|
- if (row.min_x != null && row.min_x !== '' && row.max_x != null && row.max_x !== '') {
|
|
|
- return row.min_x + '-' + row.max_x
|
|
|
+ formatterX(row) {
|
|
|
+ if (row.data.min_x != null && row.data.min_x !== '' && row.data.max_x != null && row.data.max_x !== '') {
|
|
|
+ return row.data.min_x + '-' + row.data.max_x
|
|
|
}
|
|
|
},
|
|
|
- formatterY(row, column, cellValue) {
|
|
|
- if (row.min_y != null && row.min_y !== '' && row.max_y != null && row.max_y !== '') {
|
|
|
- return row.min_y + '-' + row.max_y
|
|
|
+ formatterY(row) {
|
|
|
+ if (row.data.min_y != null && row.data.min_y !== '' && row.data.max_y != null && row.data.max_y !== '') {
|
|
|
+ return row.data.min_y + '-' + row.data.max_y
|
|
|
}
|
|
|
},
|
|
|
- formatterDate(row, column, cellValue) {
|
|
|
- return unixToDate(row.create_time)
|
|
|
+ formatterDate(params) {
|
|
|
+ return unixToDate(params.value)
|
|
|
},
|
|
|
handleChangeMinX(val) {
|
|
|
if (this.formmodel.max_x <= val || !this.formmodel.max_x) {
|
|
@@ -370,6 +481,54 @@
|
|
|
this.formmodel.min_y = 0
|
|
|
}
|
|
|
|
|
|
+ },
|
|
|
+ lookBigImg(row) {
|
|
|
+ this.srcList = []
|
|
|
+ this.srcList.push(row.icon_src)
|
|
|
+ prevOverflow = document.body.style.overflow;
|
|
|
+ document.body.style.overflow = 'hidden';
|
|
|
+ this.showViewer = true;
|
|
|
+ },
|
|
|
+ closeViewer() {
|
|
|
+ document.body.style.overflow = prevOverflow;
|
|
|
+ this.showViewer = false;
|
|
|
+ },
|
|
|
+ filterModifed(param) {
|
|
|
+ let model = param.api.getFilterModel()
|
|
|
+ this.params.filter = JSON.stringify(model)
|
|
|
+ this.GET_List()
|
|
|
+ },
|
|
|
+ gridSortChange(param) {
|
|
|
+ const columnState = param.columnApi.getColumnState()
|
|
|
+ // 排序状态
|
|
|
+ const sortState = columnState.filter(function(s) {
|
|
|
+ return s.sort != null
|
|
|
+ }).map(function(s) {
|
|
|
+ return {
|
|
|
+ colId: s.colId,
|
|
|
+ sort: s.sort,
|
|
|
+ sortIndex: s.sortIndex
|
|
|
+ }
|
|
|
+ }).sort(function(a, b) {
|
|
|
+ return a.sortIndex - b.sortIndex
|
|
|
+ })
|
|
|
+ if (sortState.length > 0) {
|
|
|
+ if (sortState.length === 1) {
|
|
|
+ this.params.sort = sortState[0].colId
|
|
|
+ this.params.dir = sortState[0].sort
|
|
|
+ } else {
|
|
|
+ let sortstring = ''
|
|
|
+ sortState.forEach(function(item) {
|
|
|
+ sortstring += item.colId + ' ' + item.sort + ','
|
|
|
+ })
|
|
|
+ this.params.sort = sortstring.substring(0, sortstring.length - 1)
|
|
|
+ this.params.dir = ' '
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ delete this.params.sort
|
|
|
+ delete this.params.dir
|
|
|
+ }
|
|
|
+ this.GET_List()
|
|
|
}
|
|
|
}
|
|
|
}
|