pc-component-v5/packages/info/src/QueryPageDashboard.vue

<template>
  <div class="flex-main">
    <table style="width: 100%; background-color: #f7f9f8; border: 1px solid #eeeeeb; margin-bottom: 0.5rem;">
      <thead>
        <tr height="40px">
          <th
            width="30px" class="text-center" :class="{ 'mulitiple-select': multipleSelect }"
            @click.self="changeSelectMode"
          >
            <input v-model="isSelectAll" autocomplete="off" type="checkbox" />
          </th>

          <th width="80px">
            <a-flex justify="flex-start" align="center">
              <a-button type="text" @click="sortInstance.changeFieldName('assetInstance.assetNo')">
                综合排序
                <template v-if="sortInstance.sortSetting.fieldName == 'assetInstance.assetNo'" #icon>
                  <ArrowUpOutlined v-if="sortInstance.sortSetting.direction == 'ASC'" />
                  <ArrowDownOutlined v-if="sortInstance.sortSetting.direction == 'DESC'" />
                </template>
              </a-button>
            </a-flex>
          </th>

          <th width="80px">
            <a-flex justify="flex-start" align="center">
              <a-button type="text" @click="sortInstance.changeFieldName('assetInstance.buyDate')">
                购置日期
                <template v-if="sortInstance.sortSetting.fieldName == 'assetInstance.buyDate'" #icon>
                  <ArrowUpOutlined v-if="sortInstance.sortSetting.direction == 'ASC'" />
                  <ArrowDownOutlined v-if="sortInstance.sortSetting.direction == 'DESC'" />
                </template>
              </a-button>
            </a-flex>
          </th>
          <th width="100px">
            <a-flex justify="flex-start" align="center">
              <a-button type="text" @click="sortInstance.changeFieldName('assetInstance.accountCreateDate')">
                财务入账日期
                <template v-if="sortInstance.sortSetting.fieldName == 'assetInstance.accountCreateDate'" #icon>
                  <ArrowUpOutlined v-if="sortInstance.sortSetting.direction == 'ASC'" />
                  <ArrowDownOutlined v-if="sortInstance.sortSetting.direction == 'DESC'" />
                </template>
              </a-button>
            </a-flex>
          </th>
          <th width="60px">
            <a-flex justify="flex-start" align="center">
              <a-button type="text" @click="sortInstance.changeFieldName('assetInstance.quantity')">
                数量
                <template v-if="sortInstance.sortSetting.fieldName == 'assetInstance.quantity'" #icon>
                  <ArrowUpOutlined v-if="sortInstance.sortSetting.direction == 'ASC'" />
                  <ArrowDownOutlined v-if="sortInstance.sortSetting.direction == 'DESC'" />
                </template>
              </a-button>
            </a-flex>
          </th>
          <th width="60px">
            <a-flex justify="flex-start" align="center">
              <a-button type="text" @click="sortInstance.changeFieldName('assetInstance.orginalValue')">
                价格
                <template v-if="sortInstance.sortSetting.fieldName == 'assetInstance.orginalValue'" #icon>
                  <ArrowUpOutlined v-if="sortInstance.sortSetting.direction == 'ASC'" />
                  <ArrowDownOutlined v-if="sortInstance.sortSetting.direction == 'DESC'" />
                </template>
              </a-button>
            </a-flex>
          </th>

          <th />
        </tr>
      </thead>
    </table>

    <div>
      <a-flex wrap="wrap" gap="small">
        <div
          v-for="(item1, index) in infoWindowDataInstance.dataList" :key="'tr' + item1.id" 
          :class="{ warning: item1.select }" @dblclick="selectNode(item1)"
        >
          <a-card hoverable :body-style="{ padding: '1rem' }" style="width: 200px;">
            <template #cover>
              <a-flex gap="0" vertical>
                <div>
                  <div style="position: relative;">
                    <div style="position: absolute; top:0px; left: 10px; z-index: 1;">
                      <span>
                        {{
                          index +
                            1 +
                            (pagination.current_page - 1) * pagination.per_page
                        }}

                        &nbsp;
                      </span>
                    </div>
                    <div style="position: absolute; top:1px; left: 25px; z-index: 1;">
                      <input
                        autocomplete="off" type="checkbox" :checked="item1.select" style="padding-left: 10px;"
                        @click.self="selectNodeForSearch(item1)"
                      />
                    </div>
                  </div>
                </div>

                <div>
                  <img
                    style="width: 100%;" alt="example"
                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                    @click="selectNodeForSearch(item1)"
                  />
                </div>

                <div style="padding: 0 1rem;">
                  {{ item1.data['assetInstance.assetNo'].displayValue[0] }}
                </div>
                <div style="padding: 0 1rem;">
                  {{ item1.data['assetInstance.name'].displayValue[0] }}
                </div>

                <a-flex horizontal style="border: 1px solid #ebebe9;">
                  <div style="width: 50%; text-align: center; border-right: 1px solid #ebebe9;">¥0</div>
                  <div style="width: 50%; text-align: center;">数量：{{ item1.data['assetInstance.quantity'].displayValue[0] }}</div>
                </a-flex>
              </a-flex>
            </template>

            <a-flex gap="0" vertical>
              <a-flex horizontal gap="5">
                <div style="width: 40%">购置日期</div>
                <div style="width: 60%"> xxx </div>
              </a-flex>
              <a-flex horizontal gap="5">
                <div style="width: 40%">财务入账</div>
                <div style="width: 60%">xxx</div>
              </a-flex>
              <a-flex horizontal gap="5">
                <div style="width: 40%">使用人</div>
                <div style="width: 60%">xxx</div>
              </a-flex>
              <a-flex horizontal gap="5">
                <div style="width: 40%">使用状态</div>
                <div style="width: 60%">{{ item1.data['useStatus.name'].displayValue[0] }}</div>
              </a-flex>

              <a-flex horizontal justify="flex-end" style="margin-top: 5px;">
                <a-tag color="pink">账</a-tag>
                <a-tag color="red">固</a-tag>
                <a-tag color="orange">主</a-tag>
                <a-tag color="green">无</a-tag>
              </a-flex>
            </a-flex>
          </a-card>
        </div>
      </a-flex>
    </div>
  </div>
</template>


<script>

import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';

export default {
  name: 'QueryPageDashboard',

  components: {
    ArrowUpOutlined, ArrowDownOutlined,
  },

  props: {
    infoWindowDataInstance: {
      type: Object,
      default() {
        return {};
      },
    },
    pagination: {
      type: Object,
      default() {
        return {};
      },
    },
    infoGridFieldsInstance: {
      type: Object,
      default() {
        return {};
      },
    },
    /**
     * 是否多选
     */
    multiple: {
      type: Boolean,
      default: false,
    },

    /**
     * 排序对象实例
     */
    sortInstance: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  emits: ['dataSelected', 'deleteSelected'],
  
  data: function () {
    return {
      isSelectAll: false,
      multipleSelect: false,
    };
  },

  computed: {
    operateButtons: function () {
      let buttons = [];
      this.infoGridFieldsInstance.infoGridFields.forEach(item => {
        if (item.simpleDisplayType == 'OperateButton') {
          buttons.push(item);
        }
      });
      return buttons;
    },
  },


  watch: {
    /**
     * 是否选择了全部的数据
     */
    isSelectAll: function (val) {
      var _self = this;
      if (_self.multipleSelect) {
        if (_self.isSelectAll) {
          if (val) {
            _self.infoWindowDataInstance.setAllSelect();
          }
        } else {
          _self.infoWindowDataInstance.setAllUnSelect();
        }
      } else {
        _self.isSelectAll = false;
      }
    },

    multiple: {
      handler: function (newValue, oldValue) {
        this.multipleSelect = newValue;
      },
      immediate: true,
    },
  },

  methods: {
    /**
     * 切换全选/单选
     */
    changeSelectMode: function () {
      this.multipleSelect = !this.multipleSelect;
    },

    /**
     * 选择/取消选择表格行中的复选框事件
     */
    selectNodeForSearch: function (modelData) {
      var _self = this;

      var currentStatus = modelData.select;
      if (!_self.multipleSelect) {
        _self.infoWindowDataInstance.setAllUnSelect();
      }

      _self.infoWindowDataInstance.selectSelectState(modelData, !currentStatus);

      if (modelData.select === true) {
        _self.$emit('dataSelected', modelData);
      } else {
        _self.$emit('deleteSelected', modelData);
      }
    },

    /**
     * 双击表格行事件
     */
    selectNode: function (modelData) {
      this.$emit('dataSelected', modelData);
    },

  },
};
</script>

<style scoped>

.flex-main {
    overflow: scroll;
    flex: 1;
    margin-bottom: 0px;
}
</style>