BoundLink-Plate-UI/src/views/flow/stFormDesign/packages/PopUpQueryGlobal/index.vue

<template>
  <div>
    <a-modal
        :width='isMobile ? "100%" : "70%"'
        :title='title'
        :open='visible'
        :confirm-loading='confirmLoading'
        @ok='handleOkMain'
        @cancel='handleCancel'
    >
      <div v-if="!isMobile">
        <a-row>
          <a-col :span='24'>
            <div class='queryMain'>
              <div class='queryChild' v-for='(h,i) in headerQuery'>
                <a-input v-model:value='h.value' :placeholder='h.fieldName'></a-input>
              </div>
              <a-button class='queryBut' @click='search'>查询</a-button>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span='24'>
            <a-table :row-selection='{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }' :columns='columns'
                     :data-source='tableData'
            >
            </a-table>
          </a-col>

        </a-row>
      </div>
      <div v-else>
        <a-row>
          <a-col :span='24' v-for='(h,i) in isFold ? headerQuery.slice(0, 1) : headerQuery'>
            <div class='queryMain' style="padding: 5px 0">
              <div class='queryChild' style="width: 100%">
                <a-input v-model:value='h.value' :placeholder='h.fieldName'></a-input>
              </div>
            </div>
          </a-col>
          <a-col :span='24'>
            <a-button class='queryBut' @click='search' type="primary">查询</a-button>
            <a-button class='queryBut' @click='isFold = false' style="margin-left: 10px;" v-show="isFold">
              <template #icon>
                <DownOutlined/>
              </template>
              <span>展开</span>
            </a-button>
            <a-button class='queryBut' @click='isFold = true' style="margin-left: 10px;" v-show="!isFold">
              <template #icon>
                <UpOutlined/>
              </template>
              <span>折叠</span>
            </a-button>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span='24'>
            <a-table :row-selection='{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }'
                     :columns='columns'
                     :data-source='tableData'
            >
            </a-table>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>
<script>
import {getPopUpData, getQueryPopupData} from '/@/api/flow/settingApi'
import {isMobile} from '/@/utils'
import {DownOutlined, UpOutlined} from '@ant-design/icons-vue';
import {formGet} from "/@/api/flow/formApi.js";

export default {
  data() {
    return {
      title: '数据查询',
      queryCode: '',//列表头
      queryMapField: [],
      columns: [],//列表头
      tableData: [],//列表数据
      visible: false,//弹出框是否可见
      confirmLoading: false,//数据加载
      selectRecord: {},//选中内容
      selectIndex: null,//选中index
      headerQuery: [],//搜索内容
      selectedRows: [],
      selectedRowKeys: [],
      isFold: true
    }
  },
  components: {
    DownOutlined,
    UpOutlined
  },
  watch: {
    visible(newVal, oldVal) {
      if (newVal == true) {
        this.search()
      }
    },
    queryCode(newVal, oldVal) {
      this.handleQueryCodeChange(newVal)
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = selectedRows
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User',
            name: record.name
          }
        })
      }
    },
    isMobile() {
      return isMobile()
    }
  },
  mounted() {
  },
  methods: {
    handleToggle(code) {
      if (code === 'unfold') {
        // 展开
      } else {
        // 折叠
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleQueryCodeChange(newQueryCode) {
      getPopUpData({queryCode: newQueryCode}).then((res) => {
        let j = res.data
        this.columns = j.columns
        this.headerQuery = j.headerQuery
        this.headerQuery.forEach(h => {
          h.value = ''
        })
      })
    },
    search() {
      getQueryPopupData({
            queryCode: this.queryCode,
            query: JSON.stringify(this.headerQuery),
            queryMapField: JSON.stringify(this.queryMapField)
          }
      ).then((res) => {
        this.tableData = res.data
        this.tableData.forEach((t, index) => {
          if (!t.key) {
            t.key = `row-${index}`; // 使用索引生成唯一的 key
          }
        })
      })
    },
    showModal() {
      this.visible = true
    },
    onSearch(r) {
      this.showModal()
    },
    handleChange(a, b, c) {
      this.$emit('change', a, b, c)
    },
    handleOkMain(e) {
      this.visible = false
      this.handleOk(e)
      this.selectedRows = []
      this.selectedRowKeys = []
    },
    handleOk(e) {
    }
    ,
    handleCancel(e) {
      this.visible = false
      this.selectedRows = []
      this.selectedRowKeys = []
    }
  }
}
</script>
<style scoped>
:deep(.active td) {
  background: #c8e7ff !important;
}

.queryMain {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
  padding: 10px;

}

.queryChild {
  margin-right: 10px;
}

.queryBut {

}

:deep(.ant-table) {
  height: calc(100vh - 450px);
  overflow: auto;
}
</style>