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

Write Preview
Loading…
Cancel
Save