|
|
@@ -0,0 +1,356 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <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"
|
|
|
+ row-height="50"
|
|
|
+ @filterChanged="filterModifed"
|
|
|
+ @sortChanged="gridSortChange"
|
|
|
+ >
|
|
|
+ <!--工具栏-->
|
|
|
+ <div slot="toolbar" class="inner-toolbar">
|
|
|
+ <div class="toolbar-search">
|
|
|
+ <en-table-search :placeholder="this.$t('action.keywords')" @search="handlerSearch" />
|
|
|
+ </div>
|
|
|
+ <div class="toolbar-search"></div>
|
|
|
+ <div class="toolbar-btns">
|
|
|
+ <el-form label-width="120px">
|
|
|
+ <el-form-item>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchDateRange"
|
|
|
+ type="daterange"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ value-format="yyyy/MM/dd"
|
|
|
+ :range-separator="this.$t('action.to')"
|
|
|
+ :start-placeholder="this.$t('action.startDate')"
|
|
|
+ :end-placeholder="this.$t('action.endDate')"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ :default-time="['00:00:00', '23:59:59']"
|
|
|
+ @change="dateRangeChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </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>
|
|
|
+
|
|
|
+<!-- <el-dialog title="留言播放" :visible.sync="dialogVisible" :before-close="stop">-->
|
|
|
+<!-- <template>-->
|
|
|
+<!-- <audio-->
|
|
|
+<!-- :src="src"-->
|
|
|
+<!-- autoplay="autoplay"-->
|
|
|
+<!-- controls="controls"-->
|
|
|
+<!-- ref="audio"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- </audio>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-dialog>-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ButtonCellRender from "@/components/AgGridCellRender/ButtonCellRender";
|
|
|
+import RadioFilter from "@/components/AgGridCustomFilter/RadioFilter";
|
|
|
+import ListFilter from "@/components/AgGridCustomFilter/ListFilter";
|
|
|
+import {AG_GRID_LOCALE_CN} from "@/utils/AgGridVueLocaleCn";
|
|
|
+import * as API_ChannelImHistory from "@/api/ncs_channel_im_history";
|
|
|
+import {unixToDate} from "@/utils/Foundation";
|
|
|
+
|
|
|
+const DeviceUrl = domain.DeviceUrl
|
|
|
+export default {
|
|
|
+ name: "channelImHistory",
|
|
|
+ components: { ButtonCellRender, RadioFilter, ListFilter},
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: this.$t('action.lastWeek'),
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ text: this.$t('action.lastMonth'),
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: this.$t('action.lastThreeMonths'),
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ /** 表格数据 */
|
|
|
+ tableData: [],
|
|
|
+ pageData: [],
|
|
|
+ loading: false,
|
|
|
+ multipleSelection: [],
|
|
|
+ /** 列表参数 */
|
|
|
+ params: {
|
|
|
+ page_size: 20,
|
|
|
+ page_no: 1,
|
|
|
+ fixedCondition: 'channel_id = ' + this.$route.params.id,
|
|
|
+ sort: 'id',
|
|
|
+ dir: 'desc'
|
|
|
+ },
|
|
|
+ searchDateRange: [],
|
|
|
+ columnDefs: null, // 新表格
|
|
|
+ defaultColDef: null,
|
|
|
+ gridOptions: null,
|
|
|
+ gridApi: null,
|
|
|
+ columnApi: null,
|
|
|
+ localeText: AG_GRID_LOCALE_CN,
|
|
|
+ rowSelection: null,
|
|
|
+ showViewer: false,
|
|
|
+ timer: '',
|
|
|
+ audio: new Audio(),
|
|
|
+ src: '',
|
|
|
+ // dialogVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ tableHeight() {
|
|
|
+ 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: 'ID', field: 'id', sortable: true, filter: 'agNumberColumnFilter', width: 200 },
|
|
|
+ { headerName: this.$t('channel.channelName'), field: 'channel_name', sortable: false, filter: false , width: 200},
|
|
|
+ { headerName: this.$t('channel.senderMemberName'), field: 'sender_member_name', sortable: false, filter: false , width: 200 },
|
|
|
+ { headerName: this.$t('channel.senderTime'), field: 'send_time', sortable: true, valueFormatter: this.formatterDate, filter: false , width: 200 },
|
|
|
+ { headerName: this.$t('channel.audioPath'), field: 'audio_path', sortable: false, filter: false , width: 300 },
|
|
|
+ {
|
|
|
+ headerName: this.$t('channel.play'), field: 'id',
|
|
|
+ cellRendererFramework: 'ButtonCellRender',
|
|
|
+ cellRendererParams: param => {
|
|
|
+ return {
|
|
|
+ onClick: this.playIm,
|
|
|
+ label: this.$t('channel.play'),
|
|
|
+ buttonType: 'primary',
|
|
|
+ buttonSize: 'mini'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filter: false,
|
|
|
+ pinned: 'right',
|
|
|
+ lockPinned: true,
|
|
|
+ width: 100,
|
|
|
+ resizable: false,
|
|
|
+ sortable: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.defaultColDef = {
|
|
|
+ sortable: true,
|
|
|
+ resizable: true,
|
|
|
+ filter: true,
|
|
|
+ filterParams: {
|
|
|
+ debounceMs: 200,
|
|
|
+ newRowsAction: 'keep',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.rowSelection = 'multiple'
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // window.onresize = this.windowResize()
|
|
|
+ this.gridApi = this.gridOptions.api
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 分页大小发生改变 */
|
|
|
+ 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_ChannelImHistory.getList(param).then(response => {
|
|
|
+ this.loading = false
|
|
|
+ this.tableData = 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 处理搜索 */
|
|
|
+ handlerSearch(keywords) {
|
|
|
+ this.params.filerStr = 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()
|
|
|
+ },
|
|
|
+ filterModifed(param) {
|
|
|
+ const 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()
|
|
|
+ },
|
|
|
+ formatterDate(params) {
|
|
|
+ return unixToDate(params.value)
|
|
|
+ },
|
|
|
+ dateRangeChange(value) {
|
|
|
+ if (value && value.length > 0) {
|
|
|
+ this.params.start_date = value[0]
|
|
|
+ this.params.end_date = value[1]
|
|
|
+ } else {
|
|
|
+ delete this.params.start_date
|
|
|
+ delete this.params.end_date
|
|
|
+ }
|
|
|
+ this.params.page_no = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ playIm(params) {
|
|
|
+ console.log(params.audio_path)
|
|
|
+ console.log(DeviceUrl + '/' + params.audio_path)
|
|
|
+ this.audio.src = DeviceUrl + '/' + params.audio_path
|
|
|
+ this.audio.play();
|
|
|
+
|
|
|
+ // this.src = DeviceUrl + '/' + params.audio_path
|
|
|
+ // this.play();
|
|
|
+ },
|
|
|
+ // play() {
|
|
|
+ // this.dialogVisible = true
|
|
|
+ // this.$refs.audio.play()
|
|
|
+ // },
|
|
|
+ // stop() {
|
|
|
+ // this.dialogVisible = false
|
|
|
+ // this.$refs.audio.pause()
|
|
|
+ // this.$refs.audio.currentTime = 0
|
|
|
+ // }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style type="text/scss" scoped>
|
|
|
+.tablewen{
|
|
|
+ width:100%;
|
|
|
+ border-collapse:collapse;
|
|
|
+ border: 1px solid #a5b6c8;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+.tablewen td{
|
|
|
+ font-size: 14px;
|
|
|
+ -webkit-margin-before: 0.83em;
|
|
|
+ -webkit-margin-after: 0.83em;
|
|
|
+ -webkit-margin-start: 0px;
|
|
|
+ -webkit-margin-end: 0px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.tablewen td span{
|
|
|
+ font-size: 0.8em;
|
|
|
+ -webkit-margin-before: 0.83em;
|
|
|
+ -webkit-margin-after: 0.83em;
|
|
|
+ -webkit-margin-start: 0px;
|
|
|
+ -webkit-margin-end: 0px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #8c939d;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+.tablewen .td1{
|
|
|
+ width:15%;
|
|
|
+}
|
|
|
+.tablewen .td2{
|
|
|
+ width:20%;
|
|
|
+}
|
|
|
+</style>
|
vothin