|
|
@@ -0,0 +1,521 @@
|
|
|
+<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"
|
|
|
+ >
|
|
|
+ <!-- @rowDoubleClicked="getList"-->
|
|
|
+ <div slot="toolbar" class="inner-toolbar">
|
|
|
+ <div class="toolbar-search">
|
|
|
+ <en-table-search placeholder="请输入搜索关键字" @search="handlerSearch" />
|
|
|
+ </div>
|
|
|
+ <div class="toolbar-btns">
|
|
|
+ <el-button type="primary" size="mini" @click="createBroadcast">新建广播</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>
|
|
|
+ <!-- 新建病区弹窗 -->
|
|
|
+ <el-dialog :title.sync="formtitle" :visible.sync="formshow" width="55%">
|
|
|
+ <div>
|
|
|
+ <el-form ref="editform" :rules="rules" label-width="120px" :model="formmodel">
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="广播名称" prop="title">
|
|
|
+ <el-input
|
|
|
+ v-model="formmodel.title"
|
|
|
+ clearable
|
|
|
+ :maxlength="100"
|
|
|
+ placeholder="请输入广播名称"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="广播模式" prop="broadcast_mode">
|
|
|
+ <el-radio-group v-model="formmodel.broadcast_mode">
|
|
|
+ <el-radio label="1">手动模式</el-radio>
|
|
|
+ <el-radio label="2">自动模式</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="播放模式(自动)" prop="play_mode">
|
|
|
+ <el-radio-group v-model="formmodel.play_mode">
|
|
|
+ <el-radio label="1">定时播放</el-radio>
|
|
|
+ <el-radio label="2">定次播放</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="定时播放时段">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="timeRange"
|
|
|
+ is-range
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ placeholder="选择时间范围"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="定次播放次数" prop="repeat_times">
|
|
|
+ <el-input-number v-model="formmodel.repeat_times" :min="1" :max="100" label="repeat_times" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="是否启用" prop="status">
|
|
|
+ <el-checkbox v-model="formmodel.status" :true-label="1" :false-label="0">开启此广播</el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="开启日">
|
|
|
+ <el-checkbox-group v-model="formmodel.repeat_day">
|
|
|
+ <el-checkbox label="1">周一</el-checkbox>
|
|
|
+ <el-checkbox label="2">周二</el-checkbox>
|
|
|
+ <el-checkbox label="3">周三</el-checkbox>
|
|
|
+ <el-checkbox label="4">周四</el-checkbox>
|
|
|
+ <el-checkbox label="5">周五</el-checkbox>
|
|
|
+ <el-checkbox label="6">周六</el-checkbox>
|
|
|
+ <el-checkbox label="0">周日</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="formshow = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handlerFormSubmit('editform')">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 新建病区弹窗结束 -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+/** 广播设置 */
|
|
|
+import { AG_GRID_LOCALE_CN } from '@/utils/AgGridVueLocaleCn'
|
|
|
+import ButtonCellRender from '../../components/AgGridCellRender/ButtonCellRender'
|
|
|
+import * as API_Broadcast from '@/api/calling-broadcast'
|
|
|
+import { unix2Date } from '@/utils/Foundation'
|
|
|
+export default {
|
|
|
+ name: 'Index',
|
|
|
+ components: { ButtonCellRender },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ /** 列表参数 */
|
|
|
+ params: {
|
|
|
+ page_size: 20,
|
|
|
+ page_no: 1,
|
|
|
+ fixedCondition: ' part_id = ' + this.$store.getters.partId
|
|
|
+ },
|
|
|
+ /** 新建组织弹出参数 **/
|
|
|
+ formtitle: '新建广播',
|
|
|
+ formshow: false,
|
|
|
+ formmodel: {
|
|
|
+ repeat_times: 1
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ title: [
|
|
|
+ { required: true, message: '广播名称不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ broadcast_mode: [
|
|
|
+ { required: true, message: '广播模式必须选择', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ play_mode: [
|
|
|
+ { required: true, message: '播放模式必须选择', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ repeat_times: [
|
|
|
+ { required: true, message: '播放次数必须填写', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ timeRange: [new Date(2020, 11, 11, 7, 0), new Date(2020, 11, 11, 8, 0)],
|
|
|
+ checkWeek: [],
|
|
|
+ /** ag-grid参数 **/
|
|
|
+ pageData: [],
|
|
|
+ loading: false,
|
|
|
+ errorId: null,
|
|
|
+ shopVisible: false,
|
|
|
+ columnDefs: null,
|
|
|
+ rowData: null,
|
|
|
+ defaultColDef: null,
|
|
|
+ gridOptions: null,
|
|
|
+ gridApi: null,
|
|
|
+ columnApi: null,
|
|
|
+ localeText: AG_GRID_LOCALE_CN,
|
|
|
+ filterState: null,
|
|
|
+ rowSelection: null,
|
|
|
+ frameworkComponents: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: 'ID', field: 'id', sortable: true, filter: 'agNumberColumnFilter', width: 130 },
|
|
|
+ {
|
|
|
+ headerName: '广播名称', field: 'title', sortable: true, filter: 'agTextColumnFilter', width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '开启状态', field: 'status', sortable: true, filter: 'agListColumnFilter', width: 150, cellRenderer: this.statusFormatter
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '广播模式', field: 'broadcast_mode', sortable: true, filter: 'agTextColumnFilter', width: 150,
|
|
|
+ valueFormatter: this.broadcastFormatter
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '播放模式', field: 'play_mode', sortable: true, filter: 'agTextColumnFilter', width: 150,
|
|
|
+ valueFormatter: this.playmodeFormatter
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '开始时间', field: 'play_start', sortable: true, filter: 'agTextColumnFilter', width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '结束时间', field: 'play_end', sortable: true, filter: 'agTextColumnFilter', width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '播放次数', field: 'repeat_times', sortable: true, filter: 'agNumberColumnFilter', width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '开启日', field: 'repeat_day', sortable: true, filter: 'agTextColumnFilter', width: 300, valueFormatter: this.weekdayFormatter
|
|
|
+ },
|
|
|
+
|
|
|
+ // lockPosition 锁定位置，会在第一列
|
|
|
+ // lockPinned = true 不能拖动然后固定
|
|
|
+ // resizeable 单元个大小是否可以调整
|
|
|
+ {
|
|
|
+ headerName: '创建时间',
|
|
|
+ field: 'create_time',
|
|
|
+ sortable: true,
|
|
|
+ filter: 'agNumberColumnFilter',
|
|
|
+ width: 200,
|
|
|
+ valueFormatter: this.unixDateFormatter
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '更新时间',
|
|
|
+ field: 'update_time',
|
|
|
+ sortable: true,
|
|
|
+ filter: 'agNumberColumnFilter',
|
|
|
+ width: 200,
|
|
|
+ valueFormatter: this.unixDateFormatter
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '编辑', field: 'shop_id',
|
|
|
+ cellRendererFramework: 'ButtonCellRender',
|
|
|
+ cellRendererParams: {
|
|
|
+ onClick: this.handEdit,
|
|
|
+ label: '编辑',
|
|
|
+ buttonType: 'primary',
|
|
|
+ buttonSize: 'mini'
|
|
|
+ },
|
|
|
+ filter: false,
|
|
|
+ pinned: 'right',
|
|
|
+ lockPinned: true,
|
|
|
+ width: 100,
|
|
|
+ resizable: false,
|
|
|
+ sortable: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headerName: '删除', field: 'shop_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.dateCustomComparator,
|
|
|
+ filterParams: {
|
|
|
+ debounceMs: 200,
|
|
|
+ newRowsAction: 'keep',
|
|
|
+ textCustomComparator: this.textCustomComparator,
|
|
|
+ comparator: this.dateCustomComparator
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.rowSelection = 'multiple'
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.onresize = this.windowResize
|
|
|
+ this.gridApi = this.gridOptions.api
|
|
|
+ this.gridColumnApi = this.gridOptions.columnApi
|
|
|
+ // 设置默认排序字段，应用列状态之后会触发 gridSortChange 函数，会调用getlist，后面不需要再调用this.getlist
|
|
|
+ this.gridColumnApi.applyColumnState({
|
|
|
+ state: [
|
|
|
+ {
|
|
|
+ colId: 'id',
|
|
|
+ sort: 'asc'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ // this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ windowResize() {
|
|
|
+ this.$set(this, 'mainAreaHeight', Number(document.documentElement.clientHeight) - 84)
|
|
|
+ },
|
|
|
+ handlerDelete(ids) {
|
|
|
+ this.$confirm('删除操作后数据不可复原，您确定要删除此数据?', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ API_Broadcast.remove(ids).then(
|
|
|
+ response => {
|
|
|
+ this.getList()
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ ).catch(response => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: response.message
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deleteSingle(row) {
|
|
|
+ this.handlerDelete(row.id)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 创建组织
|
|
|
+ */
|
|
|
+ createBroadcast() {
|
|
|
+ this.formshow = true
|
|
|
+ this.formmodel = {
|
|
|
+ title: '',
|
|
|
+ repeat_times: 1,
|
|
|
+ repeat_day: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 分页大小发生改变 */
|
|
|
+ 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_Broadcast.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.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()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 格式化unix时间戳
|
|
|
+ **/
|
|
|
+ unixDateFormatter(param) {
|
|
|
+ if (!param.value) return ''
|
|
|
+ return unix2Date(param.value * 1000)
|
|
|
+ },
|
|
|
+
|
|
|
+ broadcastFormatter(param) {
|
|
|
+ if (!param.value) return ''
|
|
|
+ if (param.value === 1) {
|
|
|
+ return '手动模式'
|
|
|
+ } else {
|
|
|
+ return '自动模式'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ playmodeFormatter(param) {
|
|
|
+ if (!param.value) return ''
|
|
|
+ if (param.value === 1) {
|
|
|
+ return '定时播放'
|
|
|
+ } else {
|
|
|
+ return '定次播放'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ statusFormatter(param) {
|
|
|
+ if (param.value) {
|
|
|
+ return '<span style="color: green">开启</span>'
|
|
|
+ } else {
|
|
|
+ return '<span style="color: red">关闭</span>'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ weekdayFormatter(param) {
|
|
|
+ const weekname = ['周一', '周二', '周三', '周四', '周五', '周六', '', '周日']
|
|
|
+ if (param.value && param.value !== '') {
|
|
|
+ const weekday = param.value.split(',').map(p => (Number(p) + 7)).sort()
|
|
|
+ return weekday.map(p => weekname[p % 8]).join(',')
|
|
|
+ } else {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ console.log(sortState)
|
|
|
+ },
|
|
|
+ filterModifed(param) { // todo 通过转换后的数值过滤，需要转回原始数值
|
|
|
+ console.log(param)
|
|
|
+ var model = param.api.getFilterModel()
|
|
|
+ console.log('model', JSON.stringify(model))
|
|
|
+ this.params.filter = JSON.stringify(model)
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handEdit(row) {
|
|
|
+ this.$router.push({ name: 'frameGroupEdit', params: { id: row.id, callback: this.getList() }})
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 提交新增表单
|
|
|
+ * @param formname
|
|
|
+ */
|
|
|
+ handlerFormSubmit(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ /** 新增 */
|
|
|
+ delete this.formmodel.id
|
|
|
+ this.formmodel.part_id = this.$store.getters.partId
|
|
|
+ const starttime = new Date(this.timeRange[0]).toLocaleTimeString('chinese', { hour12: false })
|
|
|
+ const endtime = new Date(this.timeRange[1]).toLocaleTimeString('chinese', { hour12: false })
|
|
|
+ this.formmodel.play_start = starttime
|
|
|
+ this.formmodel.play_end = endtime
|
|
|
+
|
|
|
+ API_Broadcast.add(this.formmodel).then(() => {
|
|
|
+ this.formshow = false
|
|
|
+ this.$message.success('保存成功！')
|
|
|
+ this.getList()
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
