382 lines
10 KiB
Vue
382 lines
10 KiB
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>
|