268 lines
7.4 KiB
Vue
268 lines
7.4 KiB
Vue
<template>
|
||
<view class="content">
|
||
<navBar> 添加画作 </navBar>
|
||
<view class="container-box">
|
||
<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;" 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>
|
||
<up-list @scrolltolower="scrolltolower" style="height:1120rpx">
|
||
<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;">
|
||
<span style="font-weight: bold;" >{{painting.ArtworkName}}</span>
|
||
<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>
|
||
<up-radio-group
|
||
v-model="painting.checked"
|
||
style="position: absolute;
|
||
left: 550rpx;
|
||
bottom: 150rpx;
|
||
"
|
||
placement="right"
|
||
@change="groupChange"
|
||
>
|
||
<up-radio :name="painting.ArtworkUuid"></up-radio>
|
||
</up-radio-group>
|
||
</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"
|
||
>取消</up-button
|
||
>
|
||
<up-button
|
||
style="width: 336rpx; margin: auto; height: 80rpx;"
|
||
color="#EFC54E"
|
||
throttleTime="5"
|
||
:loading="loading"
|
||
:disabled="isButtonDisabled"
|
||
@click="doneSet"
|
||
> {{ buttonText }}</up-button
|
||
>
|
||
</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 } from "@/api/login.js";
|
||
const { showMessage } = useToast();
|
||
const loading = ref(false);
|
||
const isButtonDisabled = ref(false);
|
||
const buttonText = ref("确认");
|
||
const state = reactive({
|
||
id: "",
|
||
pid: "",
|
||
tableData:[],
|
||
page:1,
|
||
pageSize:10,
|
||
selectedUuid:"",
|
||
searchValue:"",
|
||
});
|
||
onLoad((options) => {
|
||
state.id = options.id;
|
||
state.pid = options.pid;
|
||
paintingList()
|
||
});
|
||
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);
|
||
} else {
|
||
state.tableData = [];
|
||
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,
|
||
drawThumbnai: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
|
||
});
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: url("@/static/bgp.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
background-attachment: fixed;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.container-box {
|
||
height: auto;
|
||
width: 95%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 40rpx;
|
||
padding: 40rpx;
|
||
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%;
|
||
position: fixed;
|
||
bottom: 1rpx;
|
||
left: 0;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
height: 8%;
|
||
}
|
||
</style>
|