store-management-app/src/pages/index/index.vue

<template>
  <view class="content">
    <!-- <navBar> 添加画作 </navBar> -->
    <view class="container-box">
      <div style="height: 160rpx">
        <span style="font-weight: bold"> 已扫画筒号：{{ state.pid }} </span>
        <view style="display: flex; align-items: center">
          <up-input
            class="login-input"
            placeholder="画家姓名/画作名称"
            v-model="state.searchValue"
            style="flex: 1; margin-right: 10rpx; height: 80rpx"
            clearable
          >
          </up-input>

          <up-button
            style="
              width: 120rpx;
              height: 80rpx;
              margin-top: 15rpx;
              margin-left: 15rpx;
            "
            color="#EFC54E"
            throttleTime="5"
            :loading="loading"
            @click="paintingList((state.page = 1))"
            >搜索</up-button
          >
        </view>
      </div>

      <view style="flex: 1">
        <up-list @scrolltolower="scrolltolower" style="max-height: 1000rpx">
          <span>
            <up-image
              v-if="showNoResultImage"
              src="../../static/empty.png"
              width="100px"
              height="100px"
              style="
                margin-left: 240rpx;
                margin-top: 200rpx;
                margin-bottom: 20px;
              "
            >
            </up-image>
            <span
              v-if="showNoResultImage"
              style="
                font-weight: bold;
                color: #bababa;
                margin-left: 280rpx;
                margin-top: 20rpx;
              "
              >暂无画作</span
            >
          </span>
          <up-list-item
            class="painting-box"
            v-for="(painting, index) in state.tableData"
            :key="index"
          >
            <span
              style="display: flex; align-items: center; position: relative"
            >
              <up-image
                :show-loading="true"
                :src="painting.HdPic"
                width="100px"
                height="100px"
                @click="enlarge(painting.HdPic)"
              ></up-image>
              <span
                style="
                  display: flex;
                  flex-direction: column;
                  margin-left: 10px;
                  flex: 1;
                "
              >
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                  "
                >
                  <span style="font-weight: bold">{{
                    painting.ArtworkName
                  }}</span>
                  <up-radio-group
                    v-model="painting.checked"
                    placement="right"
                    @change="groupChange"
                  >
                    <up-radio :name="painting.ArtworkUuid"></up-radio>
                  </up-radio-group>
                </div>
                <span style="color: #bcbcbc; font-size: 16px"
                  >画作编号：{{ painting.Tfnum }}</span
                >
                <span style="color: #bcbcbc; font-size: 16px"
                  >画家编号：{{ painting.Tnum }}</span
                >
                <span style="color: #bcbcbc; font-size: 16px"
                  >画家姓名：{{ painting.ArtistName }}</span
                >
                <span style="color: #bcbcbc; font-size: 16px"
                  >平尺（寸）：{{ painting.Ruler }}</span
                >
              </span>
            </span>
          </up-list-item>
        </up-list>
      </view>
    </view>
    <view class="button-container">
      <up-button
        style="width: 336rpx; margin: auto; height: 80rpx"
        color="#BABABA"
        throttleTime="5"
        @click="backScan"
        >取消</up-button
      >
      <up-button
        style="width: 336rpx; margin: auto; height: 80rpx"
        color="#EFC54E"
        throttleTime="5"
        :loading="loading"
        :disabled="isButtonDisabled"
        @click="doneSet"
        v-if="hasPermission('APP-scanAdd')"
      >
        {{ buttonText }}</up-button
      >
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import useToast from "@/hooks/toast/useToast.js";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { creChangepainting, add, getRules } from "@/api/login.js";
import { closeWebview, hasPermission } from "../../../utils/index";

const { showMessage } = useToast();
const loading = ref(false);
const showNoResultImage = ref(false);
const isButtonDisabled = ref(false);
const buttonText = ref("确认");
const state = reactive({
  id: "",
  pid: "",
  tableData: [],
  page: 1,
  pageSize: 10,
  selectedUuid: "",
  searchValue: "",
});
onLoad((options) => {
  const token = window?.plus?.storage.getItem("token");
  if (token) {
    document.querySelector(".uni-page-head-hd").style.display = "none";
  }
  state.id = options.id;
  state.pid = options.pid;
  paintingList();
  getBtngetRules();
});
const groupChange = (e) => {
  state.tableData.forEach((item) => {
    if (item.ArtworkUuid !== e) {
      item.checked = "";
    }
  });
};
// 获取可添加的画作列表
const paintingList = async (param) => {
  loading.value = true;
  const res = await creChangepainting({
    Tfnum: "",
    ArtworkName: "",
    Tnum: "",
    ArtistName: "",
    page: state.page,
    pageSize: state.pageSize,
    keywords: state.searchValue,
    ...param,
  });
  loading.value = false;
  if (res.status === 0) {
    if (res.data.Data !== null) {
      state.tableData = res.data.Data.map((item) => {
        return {
          ...item,
          checked: "",
        };
      });
      console.log(1111, state.tableData);
      showNoResultImage.value = false;
    } else {
      state.tableData = [];
      showNoResultImage.value = true;
      showMessage({ type: "error", message: "查询失败，暂无画作!" });
    }
  } else {
    showMessage({ type: "error", message: res.msg });
  }
};

//添加画作
const doneSet = async () => {
  loading.value = true;
  const selectedPainting = state.tableData.find((item) => item.checked);
  if (selectedPainting) {
    const res = await add({
      type: "add",
      id: state.id,
      pid: state.pid,
      drawUid: selectedPainting.ArtworkUuid,
      drawName: selectedPainting.ArtworkName,
      drawerName: selectedPainting.ArtistName,
      drawerUid: selectedPainting.ArtistUuid,
      rulerNum: selectedPainting.Ruler,
      drawThumbnail: selectedPainting.HdPic,
      drawerNum: selectedPainting.Tnum, //画家编号
      drawNum: selectedPainting.Tfnum,
    });
    if (res.status === 0) {
      showMessage({ type: "sucess", message: "添加画作成功" });
      isButtonDisabled.value = true;
      buttonText.value = "已添加";
      state.searchValue = "";
      // 重新获取初始画作列表
      paintingList({
        page: 1,
        pageSize: 10,
        keywords: "",
      });
    } else {
      showMessage({ type: "error", message: res.msg });
    }
  } else {
    showMessage({ type: "error", message: "请先选择要添加的画作" });
  }
  loading.value = false;
};
//下拉刷新数据
const scrolltolower = async () => {
  state.page = state.page + 1;
  const res = await creChangepainting({
    Tfnum: "",
    ArtworkName: "",
    Tnum: "",
    ArtistName: "",
    page: state.page,
    pageSize: state.pageSize,
    keywords: state.searchValue,
  });
  if (res.status === 0) {
    if (res.data.Data !== null) {
      const newData = res.data.Data.map((item) => {
        return {
          ...item,
          checked: "",
        };
      });
      const uniqueData = newData.filter((newItem) => {
        return !state.tableData.some(
          (existingItem) => existingItem.ArtworkUuid === newItem.ArtworkUuid
        );
      });
      state.tableData = state.tableData.concat(uniqueData);
    }
  } else {
    showMessage({ type: "error", message: res.msg });
  }
};
//点击照片预览
const enlarge = (src) => {
  uni.previewImage({
    urls: [src],
    current: src,
  });
};
const backScan = () => {
  closeWebview();
};
const runTimeEnv = () => {
  try {
    if (plus) {
      const currentWebView = plus.webview.getWebviewById("wv");
      return currentWebView.RunTime === "app";
    }
  } catch (e) {
    return false;
  }
};
const getBtngetRules = async () => {
  const res = await getRules({});
  if (res.status === 0) {
    const ruleBtn = res.data.MyButtonAuths?.map((button) => button.Url) || [];
    uni.setStorageSync("ruleBtn", ruleBtn);
  } else {
    showMessage({ type: "error", message: res.msg });
  }
};
</script>

<style lang="scss" scoped>
page {
  background: url("@/static/bgp.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100%;
  box-sizing: border-box;
}
:deep(.u-radio) {
  justify-content: end;
}
.content {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  .container-box {
    margin-bottom: 20rpx;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    flex: 1;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    .login-input {
      width: 80%;
      display: flex;
      background-color: #f9f9f9;
      margin-top: 20rpx;
      padding: 32rpx 24rpx;
      box-sizing: border-box;
      height: 96rpx;
    }

    .painting-box {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: 0 0 6px rgba(219, 218, 218, 0.5);
    }
  }
}
.button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  margin-bottom: 20rpx;
  gap: 20rpx;
}
uni-button:after {
  border: none;
}
</style>