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

zhaowei

3 天以前 f02cf09eb0c6933dd5ccc4dac6c6c09c3b5f3d3c

 src/views/dashboard/modules/SignageModal.vue

@@ -1,30 +1,21 @@
<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 :title="modalTitle" :width="modalWidth" :visible="modalVisible" :footer="null" @cancel="$emit('closeModal')">
    <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',
    components: {},
    mixins: [],
    props: {
      modalWidth: {
        type: Number,
        default: 1048
      },
      modalTitle: {
        type: String
      },
@@ -34,8 +25,10 @@
      modalVisible: {
        type: Boolean
      },
      modalTableColumns: {
        type: Array
      modalDataApiParams: {
        type: Object,
        default: () => {
        }
      }
    },
    watch: {
@@ -51,7 +44,6 @@
    },
    data() {
      return {
        queryParam: {},
        loading: false,
        /* 分页参数 */
        ipagination: {
@@ -65,7 +57,51 @@
          showSizeChanger: true,
          total: 0
        },
        dataSource: []
        dataSource: [],
        modalTableColumns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            width: 150,
            align: 'center',
            title: '设备编号',
            dataIndex: 'equipmentCode',
            key: 'equipmentCode'
          },
          {
            align: 'center',
            title: '设备名称',
            dataIndex: 'equipmentName',
            key: 'equipmentName'
          },
          {
            align: 'center',
            title: '设备型号',
            dataIndex: 'equipmentModel',
            key: 'equipmentModel'
          },
          {
            align: 'center',
            title: '使用部门',
            key: 'zxfactoryOrgCode_dictText',
            dataIndex: 'zxfactoryOrgCode_dictText'
          },
          {
            width: 100,
            align: 'center',
            title: '技术状态',
            key: 'technologyStatus_dictText',
            dataIndex: 'technologyStatus_dictText'
          }
        ]
      }
    },
    methods: {
@@ -76,43 +112,28 @@
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) this.ipagination.current = 1
        const params = this.getQueryParams()//查询条件
        console.log('params', params)
        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.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)
      },

@@ -127,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>