eam
/
eam-uniapp
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: SBBJ-1126app备件维修工单，添加备件点击备件，应加loding，反应太慢

master
张立 2 weeks ago
parent
3e942038d0
commit
3aabe5529d
1 changed files with 210 additions and 195 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 405
      src/components/item/slectItemList.vue

405
src/components/item/slectItemList.vue
View File

@ -3,10 +3,10 @@
<u-popup v-model="props.isShowSelectItem" mode="center" border-radius="14">
<view class="popup-title">选择备件</view>
<view class="popup">
<u-search :placeholder="props.searchPlaceholder" v-model="form1.searchName" @change="searchItem" clearabled=false></u-search>
<scroll-view class="list" scroll-y="true" style="max-height: 800rpx">
<view class="item" v-for="(item, index) in singleColumnList" :key="index" @click="chooseItem(item)">
<u-checkbox v-model="item.checked" shape="circle" style="margin-top: 8rpx;"></u-checkbox>
<u-search :placeholder="props.searchPlaceholder" v-model="form1.searchName" @change="searchItem" clearabled="false"></u-search>
<scroll-view class="list" scroll-y="true" style="max-height: 800rpx" @scrolltolower="scrolltolower">
<view class="item" v-for="(item, index) in tableData" :key="index" @click="chooseItem(item)">
<u-checkbox v-model="item.checked" shape="circle" style="margin-top: 8rpx"></u-checkbox>
<view class="right">
<view class="item-name">
名称: <span>{{ item.name }}</span>
@ -17,16 +17,10 @@
<view class="item-dec">
编码: <span>{{ item.number }}</span>
</view>
<view class="item-dec" style="display: flex;">
<span style="white-space: nowrap; align-self: flex-start;">图片:</span>
<div style="display: flex; flex-direction: column; margin-left: 10px;">
<span
v-for="(pic, picIndex) in item.picture"
:key="picIndex"
@click.stop="showImage(pic.path)"
@longpress.stop="showFullText(pic.name)"
class="image-link"
>
<view class="item-dec" style="display: flex">
<span style="white-space: nowrap; align-self: flex-start">图片:</span>
<div style="display: flex; flex-direction: column; margin-left: 10px">
<span v-for="(pic, picIndex) in item.picture" :key="picIndex" @click.stop="showImage(pic.path)" @longpress.stop="showFullText(pic.name)" class="image-link">
{{ pic.name }}
</span>
</div>
@ -56,281 +50,302 @@
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits, getCurrentInstance, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import * as repairOrderApi from "@/api/repairOrder";
import { ref, defineProps, defineEmits, getCurrentInstance, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import * as repairOrderApi from '@/api/repairOrder'
const props = defineProps({
isShowSelectItem: {
type: Boolean,
default: () => { return false },
default: () => {
return false
},
require: true
},
searchPlaceholder: {
type: String,
default: () => { return '请输入备件名称' },
default: () => {
return '请输入备件名称'
},
require: true
},
singleColumnList: {
type: Array,
default: () => { return [] },
default: () => {
return []
},
require: false
},
});
}
})
const pageSize = ref(10)
const currentPage = ref(1)
const tableData = ref([])
// 展示的数据
const showTableData = () => {
if (props.singleColumnList.length > pageSize.value) {
tableData.value = [...tableData.value, ...props.singleColumnList.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)]
} else {
tableData.value = props.singleColumnList
}
}
const scrolltolower = () => {
currentPage.value += 1
showTableData()
}
// 监测isShowSelectItem的变化
watch(() => props.isShowSelectItem, (newValue, oldValue) => {
if (newValue) {
console.log('props.isShowSelectItem', props.isShowSelectItem);
form1.value.searchName = null;
form1.value.temporarilyNumber = null;
form1.value.temporarilyName = null;
watch(
() => props.isShowSelectItem,
(newValue, oldValue) => {
if (newValue) {
form1.value.searchName = null
form1.value.temporarilyNumber = null
form1.value.temporarilyName = null
showTableData()
}
}
});
const { proxy } = getCurrentInstance();
const repairOrderList = ref([]);
const itemList = ref([]);
const type = ref('');
const isShowSelectItem = ref(false);
const selectVal = ref(null);
const emits = defineEmits(['searchItem', 'chooseItem1']);
)
const { proxy } = getCurrentInstance()
const repairOrderList = ref([])
const itemList = ref([])
const type = ref('')
const isShowSelectItem = ref(false)
const selectVal = ref(null)
const emits = defineEmits(['searchItem', 'chooseItem1'])
const form1 = ref({
number: "",
name: "",
specifications: "",
number: '',
name: '',
specifications: '',
qty: 0,
temporarilyNumber: "",
temporarilyName: "",
temporarilySpecifications: "",
searchName: "",
});
temporarilyNumber: '',
temporarilyName: '',
temporarilySpecifications: '',
searchName: ''
})
// 管理全屏图片弹窗的状态
const isImagePopupVisible = ref(false);
const currentImagePath = ref('');
const isImagePopupVisible = ref(false)
const currentImagePath = ref('')
// 管理浮窗的状态
const showTooltip = ref(false);
const tooltipContent = ref('');
const tooltipPosition = ref({ top: '0px', left: '0px' });
const showTooltip = ref(false)
const tooltipContent = ref('')
const tooltipPosition = ref({ top: '0px', left: '0px' })
// 打开全屏图片弹窗
function showImage(path) {
currentImagePath.value = path;
isImagePopupVisible.value = true;
currentImagePath.value = path
isImagePopupVisible.value = true
}
// 关闭全屏图片弹窗
function closeImagePopup() {
uni.hideLoading()
isImagePopupVisible.value = false;
isImagePopupVisible.value = false
}
// 显示完整内容的浮窗
function showFullText(text) {
tooltipContent.value = text;
showTooltip.value = true;
tooltipContent.value = text
showTooltip.value = true
// 设置浮窗位置（这里可以根据需求设置具体位置）
tooltipPosition.value = { top: '50px', left: '50px' };
tooltipPosition.value = { top: '50px', left: '50px' }
}
onLoad((option) => {
if (option.type) type.value = option.type;
if (option.type) isShowSelectItem.value = option.isShowSelectItem;
if (option.selectVal) selectVal.value = option.selectVal;
});
if (option.type) type.value = option.type
if (option.type) isShowSelectItem.value = option.isShowSelectItem
if (option.selectVal) selectVal.value = option.selectVal
})
// 取消和确认方法
function chooseItem1(type) {
if (type == 1) {
form1.value.number = form1.value.temporarilyNumber;
form1.value.name = form1.value.temporarilyName;
form1.value.specifications = form1.value.temporarilySpecifications;
form1.value.number = form1.value.temporarilyNumber
form1.value.name = form1.value.temporarilyName
form1.value.specifications = form1.value.temporarilySpecifications
}
emits('chooseItem1', type, form1);
emits('chooseItem1', type, form1)
}
function searchItem() {
emits('searchItem', form1.value.searchName);
emits('searchItem', form1.value.searchName)
}
function chooseItem(item) {
console.log('props.isShowSelectItem', props.isShowSelectItem);
console.log('props.singleColumnList', props.singleColumnList);
let arr = props.singleColumnList.filter(cur => cur.number != item.number);
arr.forEach(item => {
item.checked = false;
});
item.checked = !item.checked;
let arr1 = props.singleColumnList.filter(cur => cur.number == item.number);
form1.value.temporarilyNumber = arr1[0].number;
form1.value.temporarilyName = arr1[0].name;
form1.value.temporarilySpecifications = arr1[0].specifications;
const arr = props.singleColumnList.filter((cur) => cur.number != item.number)
arr.forEach((item) => {
item.checked = false
})
item.checked = !item.checked
const arr1 = props.singleColumnList.filter((cur) => cur.number == item.number)
form1.value.temporarilyNumber = arr1[0].number
form1.value.temporarilyName = arr1[0].name
form1.value.temporarilySpecifications = arr1[0].specifications
}
</script>
<style lang="scss" scoped>
.add-form-container {
min-height: calc(100vh - 140rpx);
background: white;
padding: 0px 30rpx 140rpx;
min-height: calc(100vh - 140rpx);
background: white;
padding: 0px 30rpx 140rpx;
}
.footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 22;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 22;
}
.btns {
display: flex;
button {
flex: 1;
}
.sure {
background: #409eff;
color: white;
border-radius: 0px;
&::after {
border: 1px solid #409eff;
border-radius: 0px;
}
}
.reset {
background: #F5F5F5;
border-radius: 0px;
&::after {
border-radius: 0px;
}
}
display: flex;
button {
flex: 1;
}
.sure {
background: #409eff;
color: white;
border-radius: 0px;
&::after {
border: 1px solid #409eff;
border-radius: 0px;
}
}
.reset {
background: #f5f5f5;
border-radius: 0px;
&::after {
border-radius: 0px;
}
}
}
.right-button {
background: #409eff;
color: white;
padding: 0rpx 30rpx;
border-radius: 16rpx;
text-align: center;
font-size: 28rpx;
background: #409eff;
color: white;
padding: 0rpx 30rpx;
border-radius: 16rpx;
text-align: center;
font-size: 28rpx;
}
.select {
display: flex;
align-items: center;
height: 72rpx;
width: 100%;
.input {
flex: 1;
font-size: 28rpx;
color: #000000;
}
.placeholder {
flex: 1;
font-size: 28rpx;
color: rgb(192, 196, 204);
}
display: flex;
align-items: center;
height: 72rpx;
width: 100%;
.input {
flex: 1;
font-size: 28rpx;
color: #000000;
}
.placeholder {
flex: 1;
font-size: 28rpx;
color: rgb(192, 196, 204);
}
}
.title {
padding: 32rpx 0px;
position: relative;
span {
position: absolute;
left: -16rpx;
color: #fa3534;
padding-top: 6rpx;
}
padding: 32rpx 0px;
position: relative;
span {
position: absolute;
left: -16rpx;
color: #fa3534;
padding-top: 6rpx;
}
}
.list {
// overflow-y: auto; /* 启用垂直滚动条 */
// max-height: 500px; /* 设置最大高度 */
.item {
display: flex;
margin-bottom: 20rpx;
.item-box {
background: #F5F5F5;
border-radius: 12rpx;
flex: 1;
width: 0rpx;
}
.spare-title {
padding: 20rpx 30rpx;
border-bottom: 1px solid #e4e4e4;
.title-txt {
color: #409eff;
font-size: 30rpx;
font-weight: bold;
}
}
.dec {
color: #9c9c9c;
padding: 20rpx 30rpx 20rpx;
}
}
// overflow-y: auto; /* 启用垂直滚动条 */
// max-height: 500px; /* 设置最大高度 */
.item {
display: flex;
margin-bottom: 20rpx;
.item-box {
background: #f5f5f5;
border-radius: 12rpx;
flex: 1;
width: 0rpx;
}
.spare-title {
padding: 20rpx 30rpx;
border-bottom: 1px solid #e4e4e4;
.title-txt {
color: #409eff;
font-size: 30rpx;
font-weight: bold;
}
}
.dec {
color: #9c9c9c;
padding: 20rpx 30rpx 20rpx;
}
}
}
.add-btn {
display: flex;
justify-content: flex-start;
align-items: center;
display: flex;
justify-content: flex-start;
align-items: center;
}
.popup-title {
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #409eff;
padding: 30rpx 30rpx 0px;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #409eff;
padding: 30rpx 30rpx 0px;
}
.popup {
width: 600rpx;
padding: 30rpx 60rpx 30rpx;
width: 600rpx;
padding: 30rpx 60rpx 30rpx;
}
.popup-footer {
display: flex;
border-top: 1px solid #e4e4e4;
view {
line-height: 100rpx;
flex: 1;
text-align: center;
&.sure {
color: #409eff;
}
}
display: flex;
border-top: 1px solid #e4e4e4;
view {
line-height: 100rpx;
flex: 1;
text-align: center;
&.sure {
color: #409eff;
}
}
}
::v-deep .u-checkbox-group {
display: grid !important;
display: grid !important;
}
.image-popup {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
color: white;
font-size: 24px;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
color: white;
font-size: 24px;
cursor: pointer;
}
.full-image {
max-width: 100%;
max-height: 100%;
max-width: 100%;
max-height: 100%;
}
.item-dec {
@ -381,4 +396,4 @@ function chooseItem(item) {
z-index: 1000;
white-space: normal;
}
</style>
</style>

Write Preview
Loading…
Cancel
Save