cellsysArt/components/chooseArtwork.vue

<!--选择艺术品-->
<template>
  <div class="portal-panel">
    <div class="body-container panel-shadow">
      <div class="search" style="text-align: center; margin-top: 10px">
        <el-input
          @change="changeSearch"
          @keyup.enter.native="changeSearch"
          v-model="input"
          clearable
          class="search-input"
          placeholder="请输入检索内容"
        >
          <template #prepend>
            <el-select
              v-model="selectdata"
              slot="prepend"
              placeholder="检索条件"
              style="width: 140px"
            >
              <el-option label="艺术品编号" value="record_number"></el-option>
              <el-option
                label="登录号"
                value="original_registration_number"
              ></el-option>
              <el-option label="作者" value="author"></el-option>
              <el-option label="国家" value="country_id"></el-option>
              <el-option label="原名" value="old_name"></el-option>
            </el-select>
          </template>
          <template #append>
            <el-button
              slot="append"
              icon="Search"
              @click="handleClick"
            ></el-button>
          </template>
        </el-input>
      </div>
      <div class="art-wrap" v-if="archivesDatas.length > 0">
        <el-card
          @click="handleChecked(art)"
          :class="GLOBAL.isMobile ? 'isMobileArtCard' : 'artCard'"
          v-for="(art, index) in archivesDatas"
        >
          <div class="art-image-wrap">
            <el-image
              class="artwork-image"
              :src="art.coverImageUrl"
              fit="cover"
            >
              <template #error>暂无图片</template>
            </el-image>
          </div>
          <div class="art-info">
            <span class="art-name">{{ art.oldNameFormat }}</span>
            <p class="art-other">艺术家：{{ art.author || "未知" }}</p>
            <p class="art-other">状态：{{ art.statusMsg }}</p>
          </div>
        </el-card>
      </div>
      <el-empty style="margin: 10%" v-else description="空空如也"></el-empty>
    </div>
    <div class="footer-container horizontal-shadow">
      <Pagination
        v-show="listQuery.total > 0"
        :total="listQuery.total"
        :page.sync="listQuery.currPage"
        :limit.sync="listQuery.pageSize"
        @pageChange="handlePageChange"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import ArtSystem from "../artSystem.js";
import { ElMessage } from "element-plus";
import Pagination from "./Pagination/index.vue";

export default {
  name: "chooseArtwork",
  emits: ["checked"],
  props: {
    type: String,
  },
  data() {
    return {
      listQuery: {
        filters: [],
        total: 0,
        currPage: 1,
        pageSize: 10,
        listLoading: false,
      },
      form: {},
      input: "",
      selectdata: "record_number",
      archivesDatas: [],
    };
  },

  components: { Pagination },
  mounted() {
    this.queryTableData();
  },
  methods: {
    handlePageChange() {},
    queryTableData() {
      this.listQuery.listLoading = true;
      //加载表格数据
      let pageInfo = {
        currPage: this.listQuery.currPage,
        pageSize: this.listQuery.pageSize,
      };
      ArtSystem.queryArtworks({ pageInfo, filter: this.listQuery.filters })
        .then((res) => {
          this.archivesDatas = res.data;
          this.listQuery.total = res.totalCount;
        })
        .catch((error) => {
          console.error(error);
          ElMessage({
            message: error,
            type: "error",
          });
        })
        .finally(() => {
          this.listQuery.listLoading = false;
        });
    },
    removeSearch() {
      this.queryTableData();
    },
    changeSearch() {
      console.log(this.input, this.selectdata);
      if (this.input) {
        let operator;
        if (this.selectdata !== "record_number") {
          operator = "like";
        } else {
          operator = "=";
        }
        this.listQuery.filters = [
          {
            name: this.selectdata,
            operator: operator,
            value: this.input,
          },
        ];
      } else {
        this.listQuery.filters = [];
      }

      this.queryTableData();
    },
    handleClick() {
      this.changeSearch();
    },
    handleChecked(art) {
      if (this.type === "inStorage") {
        if (art.status === 2) {
          ElMessage({
            message: "该艺术品已经处于入库状态！",
            type: "error",
          });
          return;
        }
      } else if (this.type === "outStorage") {
        if (art.status !== 2) {
          ElMessage({
            message: "该艺术品目前不在仓库中，无法进行出库！",
            type: "error",
          });
          return;
        }
      } else if (this.type === "repairFile") {
        if (art.status === 2) {
          ElMessage({
            message: "该艺术品目前处于入库保存状态，请先出库！",
            type: "error",
          });
          return;
        }
        if (art.status === 4) {
          ElMessage({
            message: "该艺术品目前已经处于修复中状态！",
            type: "error",
          });
          return;
        }
      }
      this.$emit("checked", art);
    },
  },
};
</script>

<style scoped>
.portal-panel {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.footer-container {
  width: 100%;
  position: absolute;
  bottom: 0;
  justify-content: center;
  display: flex;
}
.art-wrap {
  display: flex;
  flex-flow: row wrap;
  margin: 2.1rem;
}
.search-input {
  margin: 0 auto;
  width: 80%;
}
.isMobileArtCard {
  position: relative;
  box-sizing: border-box;
  border-radius: 2px;
  width: 80%;
  margin-bottom: 16px;
  margin-left: 15px;
  margin-right: 15px;

  &:hover {
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 20%);
  }

  & .art-image-wrap {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  & .artwork-image {
    width: 100%;
    height: 100%;
  }

  & .art-info {
    padding: 10px 0;
    text-align: center;
  }

  & .art-name {
    font-size: 16px;

    text-align: center;
  }

  & .art-other {
    font-size: 14px;
    color: #999999;
    margin-top: 10px;
  }
}

.artCard {
  position: relative;
  box-sizing: border-box;
  border-radius: 2px;
  width: calc(20% - 30px);
  margin-bottom: 16px;
  margin-left: 15px;
  margin-right: 15px;

  &:hover {
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 20%);
  }

  & .art-image-wrap {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  & .artwork-image {
    width: 100%;
    height: 100%;
  }

  & .art-info {
    padding: 10px 0;
  }

  & .art-name {
    font-size: 16px;

    text-align: center;
  }

  & .art-other {
    font-size: 12px;
    color: #999999;
    margin-top: 10px;
  }
}

:deep(.el-card__body) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (max-width: 750px) {
  .art-wrap {
    display: flex;
    overflow-y: scroll;

    flex-flow: row wrap;
    margin-top: 20px;
    justify-content: center;
  }
  :deep(.el-select) {
    width: 7rem !important;
  }
  .search-input {
    width: 100%;
  }
  .art-wrap::-webkit-scrollbar {
    display: none; /* 对于基于Webkit的浏览器，如Chrome和Safari */
  }

  .art-wrap {
    -ms-overflow-style: none; /* 对于IE和Edge */
    scrollbar-width: none; /* 对于Firefox */
  }
}
</style>