|
@@ -0,0 +1,227 @@
|
|
|
|
+<template>
|
|
|
|
+ <div>
|
|
|
|
+ <ag-grid-layout
|
|
|
|
+ toolbar
|
|
|
|
+ theme="ag-theme-alpine"
|
|
|
|
+ :column-defs="columnDefs"
|
|
|
|
+ :row-data="rowData"
|
|
|
|
+ :locale-text="localeText"
|
|
|
|
+ :grid-options="gridOptions"
|
|
|
|
+ :debounce-vertical-scrollbar="true"
|
|
|
|
+ :default-col-def="defaultColDef"
|
|
|
|
+ :animate-rows="true"
|
|
|
|
+ :row-selection="rowSelection"
|
|
|
|
+ :framework-components="frameworkComponents"
|
|
|
|
+ @filterChanged="filterModifed"
|
|
|
|
+ @sortChanged="gridSortChange"
|
|
|
|
+ >
|
|
|
|
+ <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 {AG_GRID_LOCALE_CN} from "@/utils/AgGridVueLocaleCn";
|
|
|
|
+import * as API_Customer_Fee from "@/api/ncs_customer_fee_config";
|
|
|
|
+import {unix2Date, unixToDate} from "@/utils/Foundation";
|
|
|
|
+import ButtonCellRender from "@/components/AgGridCellRender/ButtonCellRender";
|
|
|
|
+import ListFilter from "@/components/AgGridCustomFilter/ListFilter";
|
|
|
|
+import RadioFilter from "@/components/AgGridCustomFilter/RadioFilter";
|
|
|
|
+import {getCustomerFeeConfigPage} from "@/api/ncs_customer_fee_config";
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: "CustomerFee",
|
|
|
|
+ components: {ButtonCellRender, ListFilter, RadioFilter},
|
|
|
|
+ props: {
|
|
|
|
+ customerId: {
|
|
|
|
+ type: Number,
|
|
|
|
+ default: null
|
|
|
|
+ },
|
|
|
|
+ activeName: {
|
|
|
|
+ type: String,
|
|
|
|
+ default: ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ /** ag-grid参数 **/
|
|
|
|
+ pageData: {}, // 翻页数据
|
|
|
|
+ errorId: null,
|
|
|
|
+ shopVisible: false,
|
|
|
|
+ columnDefs: null,
|
|
|
|
+ rowData: [],
|
|
|
|
+ defaultColDef: null,
|
|
|
|
+ gridOptions: null,
|
|
|
|
+ gridApi: null,
|
|
|
|
+ columnApi: null,
|
|
|
|
+ localeText: AG_GRID_LOCALE_CN,
|
|
|
|
+ filterState: null,
|
|
|
|
+ rowSelection: null,
|
|
|
|
+ frameworkComponents: null,
|
|
|
|
+ /** 列表参数 */
|
|
|
|
+ params: {
|
|
|
|
+ page_size: 20,
|
|
|
|
+ page_no: 1,
|
|
|
|
+ fixedCondition: 'fee_config_id is not null and customer_id = ' + this.customerId
|
|
|
|
+ },
|
|
|
|
+ isLedDevice: false,
|
|
|
|
+ websock: null,
|
|
|
|
+ onlineDevice: [],
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ },
|
|
|
|
+ watch: {},
|
|
|
|
+ beforeMount() {
|
|
|
|
+ this.gridOptions = {}
|
|
|
|
+ this.columnDefs = [
|
|
|
|
+ {
|
|
|
|
+ headerName: '#',
|
|
|
|
+ headerCheckboxSelection: true,
|
|
|
|
+ headerCheckboxSelectionFilteredOnly: true,
|
|
|
|
+ checkboxSelection: true,
|
|
|
|
+ sortable: false, filter: false,
|
|
|
|
+ width: 80,
|
|
|
|
+ resizable: false,
|
|
|
|
+ valueGetter: this.hashValueGetter
|
|
|
|
+ },
|
|
|
|
+ {headerName: 'ID', field: 'id', sortable: true, filter: 'agNumberColumnFilter', width: 100},
|
|
|
|
+ {headerName: this.$t('customerManage.feeName'), field: 'fee_name', sortable: true, filter: 'agTextColumnFilter', width: 100},
|
|
|
|
+ {headerName: this.$t('customerManage.feeValue'), field: 'fee_value', sortable: true, filter: 'agNumberColumnFilter', width: 100},
|
|
|
|
+ {headerName: this.$t('customerManage.feeNumber'), field: 'fee_number', sortable: true, filter: 'agNumberColumnFilter', width: 100},
|
|
|
|
+ {headerName: this.$t('customerManage.feeTime'), field: 'fee_time', sortable: true, valueFormatter: this.formatterDate, width: 100},
|
|
|
|
+ {headerName: this.$t('customerManage.feeGroupName'), field: 'group_name', sortable: true, filter: 'agTextColumnFilter', width: 100},
|
|
|
|
+ {headerName: this.$t('customerManage.feeKeyCode'), field: 'key_code', sortable: true, filter: 'agTextColumnFilter', width: 100},
|
|
|
|
+ {headerName: this.$t('customerManage.feeUnit'), field: 'unit', sortable: true, filter: 'agTextColumnFilter', width: 100},
|
|
|
|
+ {headerName: this.$t('customerManage.feeDescription'), field: 'description', sortable: true, filter: 'agTextColumnFilter', width: 100},
|
|
|
|
+ {headerName: this.$t('customerManage.feeKeyType'), field: 'key_type', sortable: true, filter: 'agTextColumnFilter', width: 100},
|
|
|
|
+ ]
|
|
|
|
+ this.defaultColDef = {
|
|
|
|
+ // filter: 'agTextColumnFilter',
|
|
|
|
+ sortable: true,
|
|
|
|
+ resizable: true,
|
|
|
|
+ enableValue: true,
|
|
|
|
+ filter: true,
|
|
|
|
+ // comparator: this.dateCustomComparator,
|
|
|
|
+ filterParams: {
|
|
|
|
+ debounceMs: 500,
|
|
|
|
+ newRowsAction: 'keep',
|
|
|
|
+ textCustomComparator: this.textCustomComparator
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.rowSelection = 'multiple'
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ window.onresize = this.windowResize
|
|
|
|
+ this.gridApi = this.gridOptions.api
|
|
|
|
+ // this.gridColumnApi = this.gridOptions.columnApi
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ windowResize() {
|
|
|
|
+ this.$set(this, 'mainAreaHeight', Number(document.documentElement.clientHeight) - 84)
|
|
|
|
+ },
|
|
|
|
+ /** 加载列表数据 */
|
|
|
|
+ getList() {
|
|
|
|
+ const param = this.MixinClone(this.params)
|
|
|
|
+ this.gridApi.showLoadingOverlay()
|
|
|
|
+ API_Customer_Fee.getCustomerFeeConfigPage(param).then(response => {
|
|
|
|
+ this.rowData = response.data
|
|
|
|
+ this.pageData = {
|
|
|
|
+ page_no: response.page_no,
|
|
|
|
+ page_size: response.page_size,
|
|
|
|
+ data_total: response.data_total
|
|
|
|
+ }
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ const node = this.gridApi.getDisplayedRowAtIndex(0)
|
|
|
|
+ if (node !== null && node !== undefined) {
|
|
|
|
+ node.setSelected(true)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 过滤状态发生变化,发送到服务器检索数据
|
|
|
|
+ */
|
|
|
|
+ filterModifed(param) {
|
|
|
|
+ var model = param.api.getFilterModel()
|
|
|
|
+ // 连接状态不经过服务器过滤
|
|
|
|
+ delete model.online_state
|
|
|
|
+ this.params.filter = JSON.stringify(model)
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ 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()
|
|
|
|
+ },
|
|
|
|
+ /** 处理搜索 */
|
|
|
|
+ handlerSearch(keywords) {
|
|
|
|
+ this.params.query = keywords
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ /** 格式化时间函数 */
|
|
|
|
+ unixDateFormatter(param) {
|
|
|
|
+ if (!param.value) return ''
|
|
|
|
+ return unix2Date(param.value * 1000)
|
|
|
|
+ },
|
|
|
|
+ /** 分页大小发生改变 */
|
|
|
|
+ handlePageSizeChange(size) {
|
|
|
|
+ this.params.page_size = size
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ /** 分页页数发生改变 */
|
|
|
|
+ handlePageCurrentChange(page) {
|
|
|
|
+ this.params.page_no = page
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ formatterDate(params) {
|
|
|
|
+ return unixToDate(params.value)
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+
|
|
|
|
+</style>
|