From 1d79d3950a3d8c489ca9ee2c88a50b01e2b5ab6e Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期四, 09 五月 2024 14:54:32 +0800
Subject: [PATCH] 新增首页看板点击图表出现的弹窗组件

---
 src/views/dashboard/modules/SignageModal.vue |  220 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 220 insertions(+), 0 deletions(-)

diff --git a/src/views/dashboard/modules/SignageModal.vue b/src/views/dashboard/modules/SignageModal.vue
new file mode 100644
index 0000000..9e1d078
--- /dev/null
+++ b/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>
\ No newline at end of file

--
Gitblit v1.9.3