新增首页看板点击图表出现的弹窗组件

zhuzhuanzhuan

2024-05-09 1d79d3950a3d8c489ca9ee2c88a50b01e2b5ab6e

新增首页看板点击图表出现的弹窗组件

 src/views/dashboard/modules/SignageModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,220 @@
<template>
  <a-modal :title="modalTitle" :width="1048" :visible="modalVisible" :footer="null" @cancel="$emit('closeModal')">
    <a-form layout="inline" @keyup.enter.native="loadData(1)">
      <a-form-item label="设备编号">
        <a-input v-model="queryParam.equipmentId"></a-input>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="loadData(1)">查询</a-button>
          <a-button type="primary" @click="searchReset">重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <a-table :columns="modalTableColumns" :dataSource="dataSource" :pagination="ipagination"
             @change="handleTableChange" style="margin-top: 20px"></a-table>
  </a-modal>
</template>

<script>
  import { putAction, getAction } from '@/api/manage'
  import { filterObj } from '@/utils/util'

  export default {
    name: 'SignageModal',
    components: {},
    mixins: [],
    props: {
      modalTitle: {
        type: String
      },
      modalDataApiUrl: {
        type: String
      },
      modalVisible: {
        type: Boolean
      },
      modalTableColumns: {
        type: Array
      }
    },
    watch: {
      modalVisible: {
        handler(newVal) {
          // æ‰“开弹窗时数据回到第一页且每页显示最大条数恢复为最小值
          if (newVal) {
            this.searchReset()
            this.ipagination.pageSize = +this.ipagination.pageSizeOptions[0]
          }
        }
      }
    },
    data() {
      return {
        queryParam: {},
        loading: false,
        /* åˆ†é¡µå‚æ•° */
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' å…±' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        dataSource: []
      }
    },
    methods: {
      loadData(arg) {
        if (!this.modalDataApiUrl) {
          this.$message.error('请设置接口地址!')
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) this.ipagination.current = 1
        const params = this.getQueryParams()//查询条件
        console.log('params', params)
        if (!params) return false
        this.loading = true
        getAction(this.modalDataApiUrl, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records || res.result
            if (res.result.total) this.ipagination.total = res.result.total
            else this.ipagination.total = 0
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },

      getQueryParams() {
        //获取查询条件
        let sqp = {}
        const param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
        param.field = this.getQueryField()
        param.pageNo = this.ipagination.current
        param.pageSize = this.ipagination.pageSize
        return filterObj(param)
      },

      getQueryField() {
        let str = 'id,'
        this.modalTableColumns.forEach(function(value) {
          str += ',' + value.dataIndex
        })
        return str
      },

      searchReset() {
        this.queryParam = {}
        this.loadData(1)
      },

      /**
       * åˆ†é¡µå˜åŒ–时触发
       * @param pagination åˆ†é¡µå‚æ•°
       */
      handleTableChange(pagination) {
        this.ipagination = pagination
        this.loadData()
      }
    }
  }
</script>

<style scoped>
  /deep/ .ant-modal-content {
    background-color: #000;
  }

  /deep/ .ant-modal-header {
    background-color: #000;
  }

  /deep/ .ant-modal-title {
    color: #fff;
  }

  /deep/ .ant-modal-close {
    color: #fff;
  }

  /deep/ .ant-input {
    color: #fff;
    background-color: #000;
  }

  /deep/ .ant-form-item-label label {
    color: #fff;
  }

  /deep/ .ant-table-thead th {
    background-color: #5C5C5C;
    color: #fff;
  }

  /deep/ .ant-table-tbody td {
    background-color: #262626;
    color: #fff;
  }

  /deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: #7E7E7E;
  }

  /deep/ .ant-table-placeholder {
    background-color: #000;
  }

  /deep/ .ant-table-placeholder .ant-empty-description {
    color: #fff;
  }

  /deep/ .ant-pagination-item a {
    background-color: #000;
    color: #fff;
  }

  /deep/ .ant-pagination-item-link {
    background-color: #000;
    color: #fff;
  }

  /deep/ .ant-pagination-item-link:hover {
    color: #1890FF;
    border-color: #1890FF;
  }

  /deep/ .ant-pagination-item-active {
    background-color: #000;
  }

  /deep/ .ant-select-selection--single {
    background-color: #000;
    color: #fff;
  }

  /deep/ .ant-pagination-options-quick-jumper {
    color: #fff;
  }

  /deep/ .ant-pagination-options-quick-jumper input {
    background-color: #000;
    color: #fff;
  }

  /deep/ .ant-select-dropdown-menu-item {
    background-color: #000;
    color: #fff;
  }

  /deep/ .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: #1890FF;
  }
</style>