1、登录页实现登录窗口响应式布局，同时限制最大最小宽高 2、除设备级看板其余看板中点击技术状态以及报修故障图表后打开对应弹窗，并实现与接口联动 3、设...

zhuzhuanzhuan

2024-05-31 bb654cea7b1666d5b3c04dbd81a074a5a502cc67

 src/views/dashboard/modules/SignageModal.vue

@@ -1,18 +1,18 @@
<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-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-modal>
</template>

@@ -23,8 +23,11 @@
  export default {
    name: 'SignageModal',
    components: {},
    mixins: [],
    props: {
      modalWidth: {
        type: Number,
        default: 1048
      },
      modalTitle: {
        type: String
      },
@@ -34,8 +37,8 @@
      modalVisible: {
        type: Boolean
      },
      modalTableColumns: {
        type: Array
      modalDataApiParams: {
        type: Object
      }
    },
    watch: {
@@ -65,7 +68,54 @@
          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: 'equipmentNum',
            key: 'equipmentNum'
          },
          {
            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'
          },
          {
            width: 140,
            align: 'center',
            title: '技术状态',
            key: 'technologyStatus',
            dataIndex: 'technologyStatus'
          }
        ]
      }
    },
    methods: {
@@ -77,7 +127,6 @@
        //加载数据 若传入参数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) => {
@@ -96,7 +145,7 @@
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        const param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
        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
@@ -113,6 +162,7 @@

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