|
@@ -0,0 +1,390 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <ag-grid-layout
|
|
|
+ toolbar
|
|
|
+ :table-height="tableHeight"
|
|
|
+ theme="ag-theme-alpine"
|
|
|
+ :column-defs="columnDefs"
|
|
|
+ :row-data="rowData"
|
|
|
+ :locale-text="localeText"
|
|
|
+ :grid-options="gridOptions"
|
|
|
+ :default-col-def="defaultColDef"
|
|
|
+ :animate-rows="true"
|
|
|
+ :row-selection="rowSelection"
|
|
|
+ @filterChanged="filterModifed"
|
|
|
+ @sortChanged="gridSortChange"
|
|
|
+ >
|
|
|
+ <div slot="toolbar" class="inner-toolbar">
|
|
|
+ <div class="toolbar-search">
|
|
|
+ <en-table-search placeholder="请输入搜索关键字" @search="handlerSearch"/>
|
|
|
+ </div>
|
|
|
+ <div class="toolbar-btns">
|
|
|
+ <el-button type="danger" size="mini" @click="handleClear">清空记录</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-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"
|
|
|
+ />
|
|
|
+ </ag-grid-layout>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API_ASC_MACDispatch from '@/api/pdm_asc_macdispatch'
|
|
|
+ import { unixToDate,unix2Date } from '@/utils/Foundation'
|
|
|
+ import { AG_GRID_LOCALE_CN } from '@/utils/AgGridVueLocaleCn'
|
|
|
+ import ListFilter from '@/components/AgGridCustomFilter/ListFilter'
|
|
|
+ import RadioFilter from '@/components/AgGridCustomFilter/RadioFilter'
|
|
|
+ import ButtonCellRender from '@/components/AgGridCellRender/ButtonCellRender'
|
|
|
+ export default {
|
|
|
+ name: 'index',
|
|
|
+ components: { ButtonCellRender, ListFilter, RadioFilter },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ /** 列表参数 */
|
|
|
+ params: {
|
|
|
+ page_size: 20,
|
|
|
+ page_no: 1,
|
|
|
+ sort: 'id',
|
|
|
+ dir: 'desc'
|
|
|
+ },
|
|
|
+ pageData: [],
|
|
|
+ loading: false,
|
|
|
+ errorId: null,
|
|
|
+ formShow: false,
|
|
|
+ userReadOnly:false,
|
|
|
+ columnDefs: null,
|
|
|
+ rowData: null,
|
|
|
+ defaultColDef: null,
|
|
|
+ gridOptions: null,
|
|
|
+ gridApi: null,
|
|
|
+ columnApi: null,
|
|
|
+ localeText: AG_GRID_LOCALE_CN,
|
|
|
+ filterState: null,
|
|
|
+ rowSelection: null,
|
|
|
+ pwdType: 'password',
|
|
|
+ chipRules: {
|
|
|
+ user_name: [
|
|
|
+ this.MixinRequired('登录名不能为空!')
|
|
|
+ ],
|
|
|
+ true_name: [this.MixinRequired('真实名称不能为空!')]
|
|
|
+ },
|
|
|
+ formmodel: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ tableHeight() {
|
|
|
+ return this.mainAreaHeight - 130
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeMount() {
|
|
|
+ this.gridOptions = {}
|
|
|
+ this.columnDefs = [
|
|
|
+ {
|
|
|
+ headerName: '#',
|
|
|
+ headerCheckboxSelection: true,
|
|
|
+ headerCheckboxSelectionFilteredOnly: true,
|
|
|
+ checkboxSelection: true,
|
|
|
+ sortable: false, filter: false,
|
|
|
+ width: 100,
|
|
|
+ resizable: false,
|
|
|
+ valueGetter: this.hashValueGetter
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ headerName: '分配时间',
|
|
|
+ field: 'create_time',
|
|
|
+ sortable: true,
|
|
|
+ filter: 'agDateColumnFilter',
|
|
|
+ valueFormatter: this.unixDateFormatter,
|
|
|
+ filterParams: {
|
|
|
+ comparator: (filterLocalDateAtMidnight, cellValue) => { // 所有数据都由服务器端过滤,此处只需返回0 即可
|
|
|
+ const celldate = unixToDate(cellValue, 'yyyy-MM-dd 00:00:00')
|
|
|
+ return (new Date(celldate).getTime() / 1000) - (filterLocalDateAtMidnight.getTime() / 1000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '起始数字', field: 'start_num', sortable: true, filterFramework: 'agNumberColumnFilter', flex: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '结束数字', field: 'end_num', sortable: true, filterFramework: 'agNumberColumnFilter', flex: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '分配数量', field: 'dispatch_qty', sortable: true, filterFramework: 'agNumberColumnFilter', flex: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ 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() {
|
|
|
+ window.onresize = this.windowResize
|
|
|
+ this.gridApi = this.gridOptions.api
|
|
|
+ this.gridColumnApi = this.gridOptions.columnApi
|
|
|
+ this.gridColumnApi.applyColumnState({
|
|
|
+ state: [
|
|
|
+ {
|
|
|
+ colId: 'create_time',
|
|
|
+ sort: 'desc'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ windowResize() {
|
|
|
+ this.$set(this, 'mainAreaHeight', Number(document.documentElement.clientHeight) - 84)
|
|
|
+ },
|
|
|
+ handlerDelete(ids) {
|
|
|
+ this.$confirm(this.$t('action.sureDelete'), this.$t('action.waring'), {
|
|
|
+ confirmButtonText: this.$t('action.yes'),
|
|
|
+ cancelButtonText: this.$t('action.cancel'),
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ API_ASC_MACDispatch.remove(ids).then(
|
|
|
+ response => {
|
|
|
+ this.getList()
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: this.$t('action.deleted')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ ).catch(response => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: response.message
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: this.$t('action.cancelDelete')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 删除 **/
|
|
|
+ deleteSingle(row) {
|
|
|
+ this.handlerDelete(row.id)
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 修改 **/
|
|
|
+ handleEdit(params) {
|
|
|
+
|
|
|
+ this.formmodel = {
|
|
|
+ ...params
|
|
|
+ }
|
|
|
+ delete this.formmodel.password
|
|
|
+ this.formShow = true
|
|
|
+ this.userReadOnly=true
|
|
|
+ this.formTitle = '编辑用户'
|
|
|
+ },
|
|
|
+ /** 分页大小发生改变 */
|
|
|
+ handlePageSizeChange(size) {
|
|
|
+ this.params.page_size = size
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 分页页数发生改变 */
|
|
|
+ handlePageCurrentChange(page) {
|
|
|
+ this.params.page_no = page
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ /** 加载列表数据 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ const param = this.MixinClone(this.params)
|
|
|
+ this.gridApi.showLoadingOverlay()
|
|
|
+ API_ASC_MACDispatch.getList(param).then(response => {
|
|
|
+ this.loading = false
|
|
|
+ this.pageData = {
|
|
|
+ page_no: response.page_no,
|
|
|
+ page_size: response.page_size,
|
|
|
+ data_total: response.data_total
|
|
|
+ }
|
|
|
+ this.rowData = [...response.data]
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 处理搜索 */
|
|
|
+ handlerSearch(keywords) {
|
|
|
+ this.params.query = keywords
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ /** 处理字段排序 */
|
|
|
+ tableSort(column) {
|
|
|
+ if (column.order !== null) {
|
|
|
+ this.params.sort = column.prop
|
|
|
+ this.params.dir = column.order === 'ascending' ? 'asc' : 'desc'
|
|
|
+ } else {
|
|
|
+ this.params.sort = null
|
|
|
+ this.params.dir = null
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ forDate(row, column, cellValue) {
|
|
|
+ return unixToDate(row.create_time)
|
|
|
+ },
|
|
|
+ testComparator(valueA, valueB, nodeA, nodeB, isInverted) {
|
|
|
+ if (valueB === null) {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ const cellDate = new Date(valueB)
|
|
|
+ const day = cellDate.getDate()
|
|
|
+ const month = cellDate.getMonth()
|
|
|
+ const year = cellDate.getFullYear()
|
|
|
+ const cellDateMidNight = new Date(year, month, day)
|
|
|
+ if (new Date(valueA) < cellDateMidNight) {
|
|
|
+ return 1
|
|
|
+ } else if (new Date(valueA) > cellDateMidNight) {
|
|
|
+ return -1
|
|
|
+ } else {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.getList()
|
|
|
+ },
|
|
|
+ filterModifed(param) {
|
|
|
+ var model = param.api.getFilterModel()
|
|
|
+ this.params.filter = JSON.stringify(model)
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ numberParser(text) {
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ textCustomComparator(filter, value, text) {
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ hashValueGetter(params) {
|
|
|
+ // return params.node.rowIndex + 1
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ dateValueFormatter(params) {
|
|
|
+ return unixToDate(params.value)
|
|
|
+ },
|
|
|
+ /** 获取设备类型文字显示,从deviceTypeTransfer 中找出value值对应的key显示出来 */
|
|
|
+ deviceTypeGetter(params) {
|
|
|
+ const gridVal = params.data.burn_tool
|
|
|
+ if (gridVal) {
|
|
|
+ return this.toolOptions.filter(p => p.value === gridVal).map(p => p.key)
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ handlerFormSubmit(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ /** 新增 */
|
|
|
+ if (!this.formmodel.id) {
|
|
|
+ API_ASC_MACDispatch.add(this.formmodel).then(r => {
|
|
|
+ this.$message.success('添加成功!')
|
|
|
+ this.formShow = false
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ /** 修改 */
|
|
|
+ API_ASC_MACDispatch.update(this.formmodel.id, this.formmodel).then(() => {
|
|
|
+ this.$message.success('修改成功!')
|
|
|
+ this.formShow = false
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error('输入错误,请检查!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 添加事件 **/
|
|
|
+ handleClear() {
|
|
|
+ this.$confirm(this.$t('action.sureDelete'), this.$t('action.waring'), {
|
|
|
+ confirmButtonText: this.$t('action.yes'),
|
|
|
+ cancelButtonText: this.$t('action.cancel'),
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ API_ASC_MACDispatch.clearRecords().then(
|
|
|
+ response => {
|
|
|
+ this.getList()
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: this.$t('action.deleted')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ ).catch(response => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: response.message
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: this.$t('action.cancelDelete')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 格式化时间函数 */
|
|
|
+ unixDateFormatter(param) {
|
|
|
+ if (!param.value) return ''
|
|
|
+ return unix2Date(param.value * 1000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|