1、根据最新设计方案调整设备管理模块点击弹窗样式 2、mdc公司级首页设备管理模块与点击功能联调

zhaowei

3 天以前 f02cf09eb0c6933dd5ccc4dac6c6c09c3b5f3d3c

 src/views/dashboard/modules/SignageModal.vue

@@ -1,24 +1,12 @@
<template>
  <a-modal :title="modalTitle" :width="modalWidth" :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.equipmentNum"></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" :loading="loading"
             @change="handleTableChange" style="margin-top: 20px" rowKey="equipmentNum"></a-table>
    <a-table bordered :columns="modalTableColumns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
             @change="handleTableChange" rowKey="id"/>
  </a-modal>
</template>

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

  export default {
    name: 'SignageModal',
@@ -38,7 +26,9 @@
        type: Boolean
      },
      modalDataApiParams: {
        type: Object
        type: Object,
        default: () => {
        }
      }
    },
    watch: {
@@ -54,7 +44,6 @@
    },
    data() {
      return {
        queryParam: {},
        loading: false,
        /* 分页参数 */
        ipagination: {
@@ -84,36 +73,33 @@
            width: 150,
            align: 'center',
            title: '设备编号',
            dataIndex: 'equipmentNum',
            key: 'equipmentNum'
            dataIndex: 'equipmentCode',
            key: 'equipmentCode'
          },
          {
            width: 200,
            align: 'center',
            title: '设备名称',
            dataIndex: 'equipmentName',
            key: 'equipmentName'
          },
          {
            width: 200,
            align: 'center',
            title: '设备型号',
            dataIndex: 'equipmentModel',
            key: 'equipmentModel'
          },
          {
            width: 250,
            align: 'center',
            title: '规格',
            key: 'specification',
            dataIndex: 'specification'
            title: '使用部门',
            key: 'zxfactoryOrgCode_dictText',
            dataIndex: 'zxfactoryOrgCode_dictText'
          },
          {
            width: 140,
            width: 100,
            align: 'center',
            title: '技术状态',
            key: 'technologyStatus',
            dataIndex: 'technologyStatus'
            key: 'technologyStatus_dictText',
            dataIndex: 'technologyStatus_dictText'
          }
        ]
      }
@@ -126,42 +112,27 @@
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) this.ipagination.current = 1
        const params = this.getQueryParams()//查询条件
        const params = Object.assign({}, this.modalDataApiParams)
        params.pageNo = this.ipagination.current
        params.pageSize = this.ipagination.pageSize
        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.modalDataApiParams, 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
        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
          })
      },

      searchReset() {
        this.queryParam = {}
        this.dataSource = []
        this.loadData(1)
      },
@@ -177,94 +148,3 @@
    }
  }
</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>