Browse Source

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

master
张立 2 weeks ago
parent
commit
3aabe5529d
  1. 405
      src/components/item/slectItemList.vue

405
src/components/item/slectItemList.vue

@ -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>

Loading…
Cancel
Save