Browse Source

优化需求开发

master
ljlong_2630 3 months ago
parent
commit
1e51e80f98
  1. 16
      src/api/http.ts
  2. 600
      src/components/item/slectItemList.vue
  3. 5
      src/pages/sparePartsApplication/addForm.vue
  4. 32
      src/pages/sparePartsApplication/detail.vue

16
src/api/http.ts

@ -33,10 +33,24 @@ const instance = axios.create({
*/
instance.interceptors.request.use((config) => {
const { method, params, url } = config
// 获取当前页面路由
let pages = getCurrentPages(); // 获取所有页面栈的实例数组
let currentPage = pages[pages.length - 1]; // 获取最后一个页面的实例
console.log(currentPage)
let currentRoute=''
if(currentPage){
currentRoute = currentPage.route; // 获取当前页面的路由
if (currentRoute.endsWith('/index')) {
currentRoute = currentRoute.slice(0, -'/index'.length);
}
}
// 附带鉴权的token
const headers : any = {
token: getAccessToken(),
'Authorization': 'Bearer ' + getAccessToken()
'Authorization': 'Bearer ' + getAccessToken(),
"Referer1":currentRoute
}
if (uni.getStorageSync('openId')) {
headers['openId'] = uni.getStorageSync('openId')

600
src/components/item/slectItemList.vue

@ -1,276 +1,376 @@
<template>
<!-- 选择备件 -->
<u-popup v-model="props.isShowSelectItem" mode="center" border-radius="14">
<view class="popup-title">选择备件</view>
<view class="popup">
<!-- <input v-model="searchKeyword" @input="filterItems" placeholder="搜索备件名称"> -->
<u-search placeholder="搜索" v-model="form1.searchName" @change="searchItem" clearabled=false></u-search>
<!-- <u-input v-model="form1.searchName" placeholder="请输入备件名称" @change="searchItem"/>
<u-button>搜索</u-button> -->
<view class="list">
<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>
<view class="right">
<view class="item-name">
名称: <span>{{item.name}}</span>
</view>
<view class="item-dec">
型号: <span>{{item.specifications}}</span>
</view>
<view class="item-dec">
编码: <span>{{item.number}}</span>
</view>
</view>
</view>
</view>
</view>
<view class="popup-footer">
<view @click="chooseItem1(0)">取消</view>
<view class="sure" @click="chooseItem1(1)">确认</view>
</view>
</u-popup>
<!-- 选择备件 -->
<u-popup v-model="props.isShowSelectItem" mode="center" border-radius="14">
<view class="popup-title">选择备件</view>
<view class="popup">
<u-search placeholder="搜索" v-model="form1.searchName" @change="searchItem" clearabled=false></u-search>
<view class="list">
<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>
<view class="right">
<view class="item-name">
名称: <span>{{ item.name }}</span>
</view>
<view class="item-dec">
型号: <span>{{ item.specifications }}</span>
</view>
<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"
>
{{ pic.name }}
</span>
</div>
</view>
</view>
</view>
</view>
</view>
<view class="popup-footer">
<view @click="chooseItem1(0)">取消</view>
<view class="sure" @click="chooseItem1(1)">确认</view>
</view>
</u-popup>
<!-- 全屏图片弹窗 -->
<u-popup v-model="isImagePopupVisible" mode="center" border-radius="0">
<view class="image-popup">
<view class="close-btn" @click="closeImagePopup">X</view>
<img :src="currentImagePath" class="full-image" />
</view>
</u-popup>
<!-- 长按显示完整内容的浮窗 -->
<div v-if="showTooltip" class="tooltip" :style="{ top: tooltipPosition.top, left: tooltipPosition.left }">
{{ tooltipContent }}
</div>
</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"
const props = defineProps({
isShowSelectItem: {
type: Boolean,
default: () => { return false },
require: true
},
singleColumnList:{
type: Array,
default: () => { return [] },
require: false
},
});
// 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
}
});
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:"",
qty: 0,
temporarilyNumber:"",//
temporarilyName:"",//
temporarilySpecifications:"",//
searchName:"",//
})
onLoad((option) => {
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
}
emits('chooseItem1',type,form1);
}
function searchItem(){
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;
}
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 },
require: true
},
singleColumnList: {
type: Array,
default: () => { return [] },
require: false
},
});
// 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;
}
});
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: "",
qty: 0,
temporarilyNumber: "",
temporarilyName: "",
temporarilySpecifications: "",
searchName: "",
});
//
const isImagePopupVisible = ref(false);
const currentImagePath = ref('');
//
const showTooltip = ref(false);
const tooltipContent = ref('');
const tooltipPosition = ref({ top: '0px', left: '0px' });
//
function showImage(path) {
currentImagePath.value = path;
isImagePopupVisible.value = true;
}
//
function closeImagePopup() {
isImagePopupVisible.value = false;
}
//
function showFullText(text) {
tooltipContent.value = text;
showTooltip.value = true;
//
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;
});
//
function chooseItem1(type) {
if (type == 1) {
form1.value.number = form1.value.temporarilyNumber;
form1.value.name = form1.value.temporarilyName;
form1.value.specifications = form1.value.temporarilySpecifications;
}
emits('chooseItem1', type, form1);
}
function searchItem() {
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;
}
</script>
<style lang="scss" scoped>
.add-form-container {
min-height: calc(100vh - 140rpx);
background: white;
padding: 0px 30rpx 140rpx;
.add-form-container {
min-height: calc(100vh - 140rpx);
background: white;
padding: 0px 30rpx 140rpx;
}
.footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 22;
}
.btns {
display: flex;
button {
flex: 1;
}
.footer {
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;
}
}
}
.right-button {
.sure {
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);
}
}
.title {
padding: 32rpx 0px;
position: relative;
span {
position: absolute;
left: -16rpx;
color: #fa3534;
padding-top: 6rpx;
border-radius: 0px;
&::after {
border: 1px solid #409eff;
border-radius: 0px;
}
}
.list {
.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;
}
.reset {
background: #F5F5F5;
border-radius: 0px;
&::after {
border-radius: 0px;
}
}
.add-btn {
display: flex;
justify-content: flex-start;
align-items: center;
}
.right-button {
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;
}
.popup-title {
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #409eff;
padding: 30rpx 30rpx 0px
.placeholder {
flex: 1;
font-size: 28rpx;
color: rgb(192, 196, 204);
}
.popup {
width: 600rpx;
padding: 30rpx 60rpx 30rpx;
}
.title {
padding: 32rpx 0px;
position: relative;
span {
position: absolute;
left: -16rpx;
color: #fa3534;
padding-top: 6rpx;
}
}
.popup-footer {
.list {
.item {
display: flex;
border-top: 1px solid #e4e4e4;
view {
line-height: 100rpx;
margin-bottom: 20rpx;
.item-box {
background: #F5F5F5;
border-radius: 12rpx;
flex: 1;
text-align: center;
&.sure {
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;
}
}
::v-deep .u-checkbox-group {
display: grid !important;
}
.add-btn {
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;
}
.popup {
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;
}
}
}
::v-deep .u-checkbox-group {
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);
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
color: white;
font-size: 24px;
cursor: pointer;
}
.full-image {
max-width: 100%;
max-height: 100%;
}
.item-dec {
display: flex;
align-items: flex-start;
}
.image-link {
cursor: pointer;
color: blue;
text-decoration: underline;
margin-bottom: 5px;
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap; /* 不换行 */
max-width: 150px; /* 根据需要设置最大宽度 */
}
.image-popup {
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;
}
.full-image {
max-width: 100%;
max-height: 100%;
}
.tooltip {
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
white-space: normal;
}
</style>

5
src/pages/sparePartsApplication/addForm.vue

@ -171,6 +171,7 @@
const deviceType = ref('DEVICE')
const form = ref({
name: '',
costCenter: '',
subList: []
})
const form1 = ref({
@ -195,6 +196,10 @@
proxy.$modal.showToast('请输入主题')
return;
}
if (!form.value.costCenter) {
proxy.$modal.showToast('请输入成本中心')
return;
}
if (form.value.subList.length === 0) {
proxy.$modal.showToast('请选择备件')
return;

32
src/pages/sparePartsApplication/detail.vue

@ -17,22 +17,22 @@
<view class="dec-item">
<view>申请备件</view>
</view>
<view class="items" v-for="(cur,key) in data.subList" :key="key" style="margin-bottom: 20rpx;">
<view class="items-name">
备件名称{{cur.itemName}}
</view>
<view class="items-dec" v-if="cur.type">
类型{{cur.type == 'type'?'设备' :'模具'}}
</view>
<view class="items-dec" v-if="cur.name">
{{cur.type == 'type'?'设备' :'模具'}}名称{{cur.name}}
</view>
<view class="items-dec">
是否以旧换新{{cur.isRadeIn == 'TRUE'?'是' :'否'}}
</view>
<view class="items-dec">
数量{{cur.qty}}
</view>
<view class="items" v-for="(cur, key) in data.subList" :key="key" style="margin-bottom: 20rpx;">
<view class="items-name">
备件名称{{ cur.itemName }}
</view>
<view class="items-dec" v-if="cur.type">
类型{{ cur.type == 'type' ? '设备' : '模具' }}
</view>
<view class="items-dec" v-if="cur.name">
{{ cur.type == 'type' ? '设备' : '模具' }}名称{{ cur.name }}
</view>
<view class="items-dec">
是否以旧换新{{ cur.isRadeIn == 'TRUE' ? '是' : '否' }}
</view>
<view class="items-dec">
数量{{ cur.qty }}
</view>
</view>
</view>
</view>

Loading…
Cancel
Save