1413 lines
33 KiB
Vue
1413 lines
33 KiB
Vue
<template>
|
||
<view class="all-bgc guodu" :style="!transition?'opacity: 0':'opacity: 1'" style="transition: opacity 1s ease;">
|
||
<view class="buttons-father">
|
||
<input class="title-input" type="text" v-model="plzinfo.searchContent" placeholder="请领单号/请领人/请领日期"
|
||
@confirm="clickconfirm" />
|
||
<view class="title-ball" @click="clickconfirm();handleClick()">
|
||
<image class="title-ball-img" :src="imgSrc" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="title-ball" @click="chongzhi();handleClick1()">
|
||
<image class="title-ball-img" :src="imgSrc1" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
<view class="right-buttons">
|
||
<view :class="manyselect?`right-button-blue`:`right-button-white`" @click="startselect()"
|
||
v-show="plsbuy[lefttarget]?.status==`1`">
|
||
<image :src="`/static/index/warehouse/procurement/picking/piliang${manyselect?`target`:``}.png`" />
|
||
<view>
|
||
批量统计
|
||
</view>
|
||
</view>
|
||
<view class="right-button" @click="huituiclick()" v-show="plsbuy[lefttarget]?.status==`1`">
|
||
<image src="/static/index/warehouse/procurement/picking/huitui.png" />
|
||
<view>
|
||
回退
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mengban" style="background: #fff;width:100vw;right:0;left: 0vw;top:-5vw;height: 110vh;"
|
||
v-if="nomessageshow">
|
||
<defaultr cont="暂无数据" style="z-index: 999;margin: auto;"></defaultr>
|
||
</view>
|
||
</view>
|
||
<tanchuang :show="badshow" font="确定要回退这个请领单吗" @back="badshow=false;" @right="huitui"> </tanchuang>
|
||
<tanchuang :show="chukushow" font="确定要出库吗" @back="chukushow=false;" @right="chukuclick"> </tanchuang>
|
||
|
||
<view class="other-contain" v-show=" !nomessageshow">
|
||
<view class="other-contain-left">
|
||
<view class="left-selecttype">
|
||
<view :class="selectType===index?`selecttype-target`: `selecttype`"
|
||
v-for="(item,index) in tagsarray" @click="changetype(index)">
|
||
{{ item }}
|
||
</view>
|
||
<view class="heng-blue" :style="{ left: `${selectType === 0 ? 14 : 13.5 + selectType * 23.5}%` }">
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll" :scroll-top="leftscrolltop"
|
||
@scrolltolower="plsbuytolower" :lower-threshold="200">
|
||
<!-- <view style="height: 1%;"></view> -->
|
||
|
||
<view class="haventmessage" v-if="shownomessage">
|
||
<view class="que">
|
||
<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
|
||
<view>暂无数据</view>
|
||
</view>
|
||
</view>
|
||
<view class="pls-card" v-for="(v,i) in plsbuy" :key='i' @click="clickLeftMenu(i,v)"
|
||
:style="{borderColor: manyselect ? (selectarray.includes(v.qldNo) ? '#0f9fff' : 'transparent'): (i === lefttarget ? '#0f9fff' : 'transparent')}">
|
||
<view
|
||
style="background: #ff5757;position: absolute;width: 1.3vw;height: 1.3vw;border-radius: 50%;right: 0vw;top: 0vw;"
|
||
v-if="v.izYgRead=='N'">
|
||
</view>
|
||
<view class="pls-card-title">
|
||
<view class="middle-title-spec">
|
||
请领单号
|
||
</view>
|
||
<view class="title-left">
|
||
{{ v.qldNo }}
|
||
</view>
|
||
</view>
|
||
<view class="pls-card-middle">
|
||
<view class="middle-heng"></view>
|
||
<view class="pls-card-middle-one">
|
||
<view class="middle-title">
|
||
{{ v.tjTime.replace(/-/g, '.') }}
|
||
</view>
|
||
<view class="middle-heng-father">
|
||
<image class="middle-ball-img" src="/static/index/requestform/isok.png" />
|
||
</view>
|
||
<view class="end-font">
|
||
|
||
<view>
|
||
待出库
|
||
</view>
|
||
<view style="font-size: 25rpx;">
|
||
{{ "[ " + v.tjByName + " ]" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pls-card-middle-one">
|
||
<view class="middle-title"
|
||
:style=" v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
|
||
{{
|
||
Number(v.status)>1?
|
||
v?.status === '2'
|
||
? v.zfTime?.slice(0,10).replace(/-/g, '.')
|
||
: v?.status === '3'
|
||
? v.htTime?.slice(0,10).replace(/-/g, '.')
|
||
: v.ckTime?.slice(0,10).replace(/-/g, '.')
|
||
: ""
|
||
}}
|
||
|
||
</view>
|
||
<view class="middle-heng-father">
|
||
<image class="middle-ball-img" style="width: 32rpx;height: 32rpx;"
|
||
v-if="v?.status === '2' || v?.status === '3'"
|
||
src="/static/index/requestform/iserror.png" />
|
||
<view class="middle-ball" style="background-color: #1083F8;"
|
||
v-else-if="Number(v.status)==1">
|
||
</view>
|
||
<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
|
||
</view>
|
||
<view class="end-font">
|
||
|
||
<view :style="v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
|
||
{{
|
||
v?.status === '2'
|
||
? `已作废`
|
||
: v?.status === '3'
|
||
? `已回退`
|
||
: `已出库`
|
||
}}
|
||
|
||
</view>
|
||
<view style="font-size: 25rpx;" v-if="Number(v.status)>1"
|
||
:style=" v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
|
||
{{ "[ " + (v?.status === '2'
|
||
? v?.zfByName
|
||
: v?.status === '3'
|
||
? v?.htByName
|
||
: v?.ckByName)+ " ]" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pls-card-middle-one">
|
||
<view class="middle-title">
|
||
{{ Number(v.status)==5 ? v.shTime?.slice(0,10).replace(/-/g, '.') :""}}
|
||
</view>
|
||
|
||
<view class="middle-heng-father">
|
||
|
||
<view class="middle-ball"
|
||
:style="Number(v.status)<4?{backgroundColor: `#E5E5E5`}:{}"
|
||
v-if="Number(v.status)!=5"></view>
|
||
<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
|
||
</view>
|
||
<view class="end-font">
|
||
<view v-if="v?.cgdType!='9'">
|
||
已收货
|
||
</view>
|
||
<view style="font-size: 25rpx;" v-if="Number(v.status)==5">
|
||
{{ "[ " + v.shByName + " ]" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pls-card-end">
|
||
<view class="end-left">
|
||
<image class="end-left-img" src="/static/index/requestform/gongyingshang.png" />
|
||
<view class="end-left-font">
|
||
{{ v.nuName }}
|
||
</view>
|
||
</view>
|
||
<view :class="v?.status === '2' || v?.status === '3' ?`tag-fail`:`tag-success`">
|
||
{{ v.statusText }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pls-card center" v-if="!shownomessage&&plsbuy.length===1">
|
||
<view class="que">
|
||
<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
|
||
<view>暂无数据</view>
|
||
</view>
|
||
</view>
|
||
<view class="pls-card center" v-if="!shownomessage&&plsbuy.length===1">
|
||
<view class="que">
|
||
<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
|
||
<view>暂无数据</view>
|
||
</view>
|
||
</view>
|
||
<view class="pls-card center" v-if="!shownomessage&&plsbuy.length===2">
|
||
<view class="que">
|
||
<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
|
||
<view>暂无数据</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="other-contain-right">
|
||
<scroll-view scroll-y="true" scroll-with-animation class="right-contain">
|
||
<view class="right-ones">
|
||
<view class="right-one" v-for="(item,index) in rightarray" :key="index">
|
||
<view class="right-one-left">
|
||
<view class="bgimg">
|
||
<image class="left-image"
|
||
:src="item.materialInfo?.materialImg?serverUrl+item.materialInfo?.materialImg:'/static/index/procurement/k.png'"
|
||
mode="aspectFill"></image>
|
||
</view>
|
||
<view class="left-tages">
|
||
{{ item.materialInfo.categoryName}}
|
||
</view>
|
||
<view class="left-tages">
|
||
{{ item.materialInfo.typeName}}
|
||
</view>
|
||
<view class="left-tages" v-if="item.materialInfo.medicationName">
|
||
{{ item.materialInfo.medicationName}}
|
||
</view>
|
||
</view>
|
||
<view class="right-one-right">
|
||
<view class="right-title">
|
||
{{ item.materialInfo.materialName }}
|
||
</view>
|
||
<view class="right-setting">
|
||
规格型号
|
||
</view>
|
||
<view class="right-mm">
|
||
{{ item.materialInfo.materialNo }}
|
||
</view>
|
||
<view class="right-down">
|
||
<view class="">
|
||
<view class="right-first-num">
|
||
{{ item.qlNum }}
|
||
</view>
|
||
<view class="right-first-type">
|
||
请领数量
|
||
</view>
|
||
</view>
|
||
<view class="right-shu"></view>
|
||
<view class="">
|
||
<view class="right-first-num" style="font-weight: 500;">
|
||
{{ item.materialInfo.materialUnits }}
|
||
</view>
|
||
<view class="right-first-type">
|
||
请领单位
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<defaultr cont="暂无数据" v-if="rightarray.length==0 && rightdonghua"
|
||
style="width: 30%;height: 30%;position: absolute;">
|
||
</defaultr>
|
||
</scroll-view>
|
||
<view class="bottom-buttons" v-show="plsbuy[lefttarget]?.status==`1`">
|
||
<!-- <view class="button-gray" @click="quxiao">
|
||
取消
|
||
</view> -->
|
||
<view class="button-blue" @click="chukushow=true" v-if="!manyselect">
|
||
出库
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<errorshow :show="openerror" font="注意：只能选择待出库的请领单" @close="openerror=false" />
|
||
<errorshow :show="qinglingshow" font="注意：批量选择模式请选择一项或以上的请领单" @close="qinglingshow=false" />
|
||
<errorshow :show="chukuerror" :font="chukuvalue" @close="chukuerror=false" />
|
||
<severcard></severcard>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
||
import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
|
||
import { queryQld, queryQldWlInfo, newtransRead, orderReturn, outbound } from './api/lunpan.js'
|
||
import nomessage from './components/nomessage.vue'
|
||
import defaultr from './components/default.vue'
|
||
const props = defineProps({
|
||
isShow: { type: Boolean }
|
||
});
|
||
const manyselect = ref(false);
|
||
const tagsarray = ref(["全部", "待出库", "已出库", "已收货 "])
|
||
// const nottrue = Array(10).fill(null)
|
||
// 使用watch监听isShow变化
|
||
const transition = ref(false);
|
||
watch(
|
||
() => props.isShow,
|
||
(newVal, oldVal) => {
|
||
// 当旧值为false，新值为true时延迟0.2秒调用方法
|
||
if (!oldVal && newVal) {
|
||
transition.value = false;
|
||
setTimeout(() => {
|
||
transition.value = true;
|
||
}, 50)
|
||
} else {
|
||
transition.value = false;
|
||
}
|
||
}
|
||
)
|
||
onMounted(() => {
|
||
firstgetqueryCgdList();
|
||
transition.value = false;
|
||
setTimeout(() => {
|
||
transition.value = true;
|
||
}, 50)
|
||
})
|
||
const lanjie = ref(false);
|
||
|
||
const selectType = ref(0)
|
||
const changetype = (index : number) => {
|
||
if ((selectType.value == index) && index) {
|
||
return
|
||
}
|
||
leftscrolltop.value = 0.01
|
||
setTimeout(() => {
|
||
leftscrolltop.value = 0
|
||
}, 50)
|
||
lefttarget.value = 0
|
||
selectType.value = index
|
||
plzinfo.pageNo = 1;
|
||
plzinfo.canpull = true;
|
||
|
||
switch (index) {
|
||
case 0:
|
||
plzinfo.status = `1,4,5`
|
||
break
|
||
case 1:
|
||
plzinfo.status = `1`
|
||
break
|
||
case 2:
|
||
plzinfo.status = `4`
|
||
break
|
||
case 3:
|
||
plzinfo.status = `5`
|
||
break
|
||
}
|
||
firstgetqueryCgdList()
|
||
}
|
||
const clickconfirm = () => {
|
||
if (chongzhiLock) return
|
||
chongzhiLock = true
|
||
plzinfo.pageNo = 1;
|
||
plzinfo.canpull = true;
|
||
lefttarget.value = 0
|
||
firstgetqueryCgdList()
|
||
leftscrolltop.value = 0.01
|
||
setTimeout(() => {
|
||
leftscrolltop.value = 0
|
||
}, 10)
|
||
setTimeout(() => chongzhiLock = false, 500)
|
||
}
|
||
let chongzhiLock = false
|
||
|
||
const chongzhi = () => {
|
||
if (chongzhiLock) return
|
||
chongzhiLock = true
|
||
|
||
plzinfo.searchContent = ""
|
||
changetype(0)
|
||
firstgetqueryCgdList()
|
||
|
||
setTimeout(() => chongzhiLock = false, 500)
|
||
}
|
||
const plsbuy = ref([])
|
||
const alltotal = ref(0);
|
||
const lefttarget = ref(0)
|
||
const plzinfo = reactive({
|
||
pageNo: 1,
|
||
pageSize: 5,
|
||
canpull: true,
|
||
searchContent: "",
|
||
status: "1,4,5",
|
||
// elderId: uni.getStorageSync('elderId'),
|
||
// nuId: uni.getStorageSync('nuId')
|
||
})
|
||
|
||
const nomessageshow = ref(false);
|
||
const shownomessage = ref(false);
|
||
const leftscrolltop = ref(0)
|
||
|
||
const rightarray = ref([]);
|
||
// 检测锁
|
||
const cannomessage = ref(true)
|
||
const rightdonghua = ref(true);
|
||
const firstgetqueryCgdList = () => {
|
||
queryQld(plzinfo).then((res : any) => {
|
||
transition.value = true;
|
||
// console.log("kankan", plzinfo, res)
|
||
if (((res.message === "缺少参数") || (!res.result?.total)) && cannomessage.value) {
|
||
nomessageshow.value = true;
|
||
return
|
||
}
|
||
if (res.result.records.length) {
|
||
shownomessage.value = false;
|
||
} else {
|
||
shownomessage.value = true;
|
||
}
|
||
cannomessage.value = false
|
||
plsbuy.value = []
|
||
plsbuy.value.push(...res.result.records)
|
||
alltotal.value = res.result.total
|
||
if (res.result.records.length) {
|
||
rightdonghua.value = false;
|
||
queryQldWlInfo({ qldNo: res.result.records[0].qldNo }).then((element : any) => {
|
||
rightarray.value = []
|
||
rightarray.value.push(...element.result)
|
||
rightdonghua.value = true;
|
||
})
|
||
} else {
|
||
rightarray.value = []
|
||
}
|
||
|
||
if (res.result.records.length < plzinfo.pageSize) {
|
||
plzinfo.canpull = false;
|
||
}
|
||
|
||
})
|
||
}
|
||
const setout = ref(true)
|
||
let times = null
|
||
const plsbuytolower = () => {
|
||
if (!setout.value) { return }
|
||
plzinfo.pageNo++;
|
||
getqueryCgdList()
|
||
setout.value = false
|
||
times = setTimeout(() => {
|
||
setout.value = true
|
||
}, 500)
|
||
}
|
||
//获得采购单列表
|
||
const getqueryCgdList = () => {
|
||
if (!plzinfo.canpull) return
|
||
queryQld(plzinfo).then((res : any) => {
|
||
// console.log("???加载", res.result.records)
|
||
plsbuy.value.push(...res.result.records)
|
||
alltotal.value = res.result.total
|
||
if (res.result.records.length < plzinfo.pageSize) {
|
||
plzinfo.canpull = false;
|
||
}
|
||
})
|
||
}
|
||
const openerror = ref(false)
|
||
const clickLeftMenu = (index : any, item : any) => {
|
||
|
||
let num = Math.ceil((index + 1))
|
||
leftscrolltop.value = (num - 2) * 188.5;
|
||
if (item.izYgRead == 'N') {
|
||
let param = {
|
||
status: `yg`,
|
||
qldNo: plsbuy.value[index].qldNo,
|
||
}
|
||
newtransRead(param).then((res : any) => {
|
||
if (res.success) {
|
||
item.izYgRead = 'Y'
|
||
}
|
||
})
|
||
}
|
||
if (manyselect.value) {
|
||
if (item.status == `1`) {
|
||
if (selectarray.value.includes(item.qldNo)) {
|
||
// 删除
|
||
selectarray.value = selectarray.value.filter(v => v !== item.qldNo)
|
||
} else {
|
||
// 加入
|
||
selectarray.value.push(item.qldNo)
|
||
}
|
||
} else {
|
||
openerror.value = true
|
||
}
|
||
return
|
||
}
|
||
|
||
|
||
lefttarget.value = index;
|
||
|
||
rightdonghua.value = false;
|
||
queryQldWlInfo({ qldNo: plsbuy.value[index].qldNo }).then((element : any) => {
|
||
rightarray.value = [];
|
||
rightarray.value.push(...element.result)
|
||
rightdonghua.value = true;
|
||
})
|
||
// form.cgdId = plsbuy.value[index].id
|
||
// form.pageNo = 1
|
||
// form.canpull = true;
|
||
// // console.log("!!!!",form)
|
||
// queryCgdInfoList(form).then(res => {
|
||
// InvoicingList.value = []
|
||
// // console.log("数据呢", res.result.records)
|
||
// InvoicingList.value.push(...res.result.records);
|
||
// if (form.pageNo) {
|
||
// clickmiddle(0);
|
||
// }
|
||
// })
|
||
|
||
|
||
}
|
||
const serverUrl = ref("")
|
||
onLoad(() => {
|
||
serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
|
||
})
|
||
const badshow = ref(false)
|
||
const huitui = () => {
|
||
let data = {
|
||
qldNo: plsbuy.value[lefttarget.value].qldNo,
|
||
nuId: uni.getStorageSync('nuId'),
|
||
nuName: uni.getStorageSync('nuName'),
|
||
|
||
}
|
||
orderReturn(data).then((res : any) => {
|
||
console.log('回退', res)
|
||
badshow.value = false
|
||
if (res.success) {
|
||
plsbuy.value[lefttarget.value] = res.result.result
|
||
} else {
|
||
plzinfo.pageNo = 1;
|
||
plzinfo.canpull = true;
|
||
leftscrolltop.value = 0.01
|
||
setTimeout(() => {
|
||
leftscrolltop.value = 0
|
||
}, 50)
|
||
lefttarget.value = 0
|
||
firstgetqueryCgdList();
|
||
}
|
||
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: res.success ? res.result.message : res.message,
|
||
icon: 'none', // 'none' 表示不带图标
|
||
duration: 3000
|
||
})
|
||
}, 300)
|
||
|
||
})
|
||
}
|
||
// const shouhuoshow = ref(false)
|
||
|
||
// const shouhuo = () => {
|
||
// // let param = {
|
||
// // qldNo: plsbuy.value[lefttarget.value].qldNo,
|
||
// // elderId: uni.getStorageSync('elderId'),
|
||
// // nuId: uni.getStorageSync('nuId')
|
||
// // }
|
||
// // confirmReceipt(param).then((res : any) => {
|
||
// // console.log('收货', param, res)
|
||
// // shouhuoshow.value = false
|
||
// // if (res.success) {
|
||
// // plsbuy.value[lefttarget.value] = res.result.result
|
||
// // } else {
|
||
// // plzinfo.pageNo = 1;
|
||
// // leftscrolltop.value = 1
|
||
// // setTimeout(() => {
|
||
// // leftscrolltop.value = 0
|
||
// // }, 50)
|
||
// // lefttarget.value = 0
|
||
// // plzinfo.canpull = true;
|
||
// // firstgetqueryCgdList();
|
||
// // }
|
||
|
||
// // setTimeout(() => {
|
||
// // uni.showToast({
|
||
// // title: res.success ? res.result.message : res.message,
|
||
// // icon: 'none', // 'none' 表示不带图标
|
||
// // duration: 3000
|
||
// // })
|
||
// // }, 300)
|
||
|
||
// // })
|
||
// }
|
||
const goback = () => {
|
||
uni.navigateBack()
|
||
}
|
||
const selectarray = ref([]);
|
||
|
||
const startselect = () => {
|
||
|
||
selectarray.value = [];
|
||
manyselect.value = !manyselect.value
|
||
if (!manyselect.value) {
|
||
lefttarget.value = 0
|
||
}
|
||
}
|
||
const huituiclick = () => {
|
||
if (manyselect.value) {
|
||
console.log("55555")
|
||
selectarray.value = [];
|
||
manyselect.value = false
|
||
leftscrolltop.value = 0.01
|
||
setTimeout(() => {
|
||
leftscrolltop.value = 0
|
||
}, 50)
|
||
} else {
|
||
|
||
badshow.value = true
|
||
}
|
||
}
|
||
// const quxiao = () => {
|
||
// selectarray.value = [];
|
||
// manyselect.value = false;
|
||
|
||
// }
|
||
const chukushow = ref(false);
|
||
const qinglingshow = ref(false)
|
||
const chukuerror = ref(false);
|
||
const chukuvalue = ref("")
|
||
|
||
const chukuclick = () => {
|
||
if (manyselect.value && !selectarray.value.length) {
|
||
qinglingshow.value = true
|
||
return
|
||
}
|
||
let data = {
|
||
qldNo: manyselect.value ? selectarray.value.join(',') : plsbuy.value[lefttarget.value].qldNo,
|
||
nuId: uni.getStorageSync('nuId'),
|
||
// elderId: uni.getStorageSync('elderId'),
|
||
nuName: uni.getStorageSync('nuName'),
|
||
// elderName: uni.getStorageSync(`NUall`).elderInfo.name
|
||
|
||
}
|
||
outbound(data).then((res : any) => {
|
||
if (res.success) {
|
||
selectarray.value = [];
|
||
manyselect.value = false
|
||
chukushow.value = false
|
||
plzinfo.pageNo = 1;
|
||
lefttarget.value = 0
|
||
plzinfo.canpull = true;
|
||
leftscrolltop.value = 0.01
|
||
setTimeout(() => {
|
||
leftscrolltop.value = 0
|
||
}, 50)
|
||
lefttarget.value = 0
|
||
firstgetqueryCgdList();
|
||
}
|
||
console.log("!!!!!!", res)
|
||
setTimeout(() => {
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: res.result.message,
|
||
icon: 'none', // 'none' 表示不带图标
|
||
duration: 3000
|
||
})
|
||
} else {
|
||
chukuerror.value = true;
|
||
chukuvalue.value = res.message;
|
||
}
|
||
// uni.showToast({
|
||
// title: res.success ? res.result.message : res.message,
|
||
// icon: 'none', // 'none' 表示不带图标
|
||
// duration: 3000
|
||
// })
|
||
}, 300)
|
||
|
||
})
|
||
|
||
}
|
||
const basePath = '/static/index/procurement/' // 图片公共路径
|
||
const imgNormal = basePath + 'sh.png'
|
||
const imgActive = basePath + 'shr.png'
|
||
|
||
const imgSrc = ref(imgNormal)
|
||
const busy = ref(false) // 防止重复点击造成多个定时器
|
||
|
||
function handleClick () {
|
||
if (busy.value) return
|
||
busy.value = true
|
||
|
||
// 切换到 active 图
|
||
imgSrc.value = imgActive
|
||
|
||
// 0.5 秒后复原
|
||
setTimeout(() => {
|
||
imgSrc.value = imgNormal
|
||
busy.value = false
|
||
}, 300)
|
||
}
|
||
const basePath1 = '/static/index/procurement/' // 图片公共路径
|
||
const imgNormal1 = basePath + 'cz.png'
|
||
const imgActive1 = basePath + 'czr.png'
|
||
|
||
const imgSrc1 = ref(imgNormal1)
|
||
const busy1 = ref(false) // 防止重复点击造成多个定时器
|
||
|
||
function handleClick1 () {
|
||
if (busy1.value) return
|
||
busy1.value = true
|
||
|
||
// 切换到 active 图
|
||
imgSrc1.value = imgActive1
|
||
|
||
// 0.5 秒后复原
|
||
setTimeout(() => {
|
||
imgSrc1.value = imgNormal1
|
||
busy1.value = false
|
||
}, 300)
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.guodu {
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.all-bgc {
|
||
background-color: rgb(239, 240, 244);
|
||
// background-color: red;
|
||
// padding: 2vw;
|
||
padding-left: 1vw;
|
||
// padding-top: 1.5vh;
|
||
width: 92vw;
|
||
}
|
||
|
||
.right-container-tem {
|
||
display: flex;
|
||
|
||
.right-container-tem-text {
|
||
font-size: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
|
||
.right-container-tem-img {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
}
|
||
|
||
.buttons-father {
|
||
width: 100%;
|
||
height: 6.5vh;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.title-input {
|
||
width: 405rpx;
|
||
height: 5.1vh;
|
||
background-color: #fff;
|
||
font-size: 27.5rpx;
|
||
padding-left: 26rpx;
|
||
border-radius: 40rpx;
|
||
padding-top: 2rpx;
|
||
border: 2rpx solid #C9C9C9;
|
||
}
|
||
|
||
.ipt {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 20vw;
|
||
background: #E2E4E9;
|
||
border-radius: 1.65vw;
|
||
height: 3.3vw;
|
||
|
||
image {
|
||
width: 2.2vw;
|
||
height: 2.2vw;
|
||
margin: 0 0.5vw;
|
||
}
|
||
|
||
input {
|
||
width: 18vw;
|
||
height: 3.5vw;
|
||
font-size: 1.4vw;
|
||
padding-left: 1.6vw;
|
||
|
||
}
|
||
}
|
||
|
||
.scr {
|
||
border-radius: 1.65vw;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 0 0 0.7vw;
|
||
background-color: #fff;
|
||
border: 1px solid #D9DADC;
|
||
color: #555555;
|
||
width: 6.5vw;
|
||
height: 3.3vw;
|
||
}
|
||
|
||
.shx {
|
||
width: 6.5vw;
|
||
height: 3.3vw;
|
||
background-color: #fff;
|
||
border-radius: 1.65vw;
|
||
border: 1px solid #D9DADC;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 0 0 0.5vw;
|
||
color: #555555;
|
||
|
||
image {
|
||
width: 1.5vw;
|
||
height: 1.5vw;
|
||
margin: 0 0.2vw 0 0;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.right-button {
|
||
width: 7vw;
|
||
height: 3.3vw;
|
||
background-color: #fff;
|
||
border-radius: 1.65vw;
|
||
border: 1px solid #D9DADC;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #555555;
|
||
|
||
image {
|
||
width: 1.5vw;
|
||
height: 1.5vw;
|
||
margin: 0.1vw 0.2vw 0 0;
|
||
}
|
||
}
|
||
|
||
.right-button-white {
|
||
width: 10vw;
|
||
height: 3.3vw;
|
||
background-color: #fff;
|
||
border-radius: 1.65vw;
|
||
border: 1px solid #D9DADC;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #555555;
|
||
margin-right: 15rpx;
|
||
|
||
image {
|
||
width: 1.5vw;
|
||
height: 1.5vw;
|
||
margin: 0.1vw 0.2vw 0 0;
|
||
}
|
||
}
|
||
|
||
.right-button-blue {
|
||
width: 10vw;
|
||
height: 3.3vw;
|
||
background-color: #fff;
|
||
border-radius: 1.65vw;
|
||
border: 1px solid #1083F8;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #1083F8;
|
||
margin-right: 15rpx;
|
||
|
||
image {
|
||
width: 1.5vw;
|
||
height: 1.5vw;
|
||
margin: 0.1vw 0.2vw 0 0;
|
||
}
|
||
}
|
||
|
||
.right-button:active,
|
||
.scr:active,
|
||
.shx:active {
|
||
color: #1083F8;
|
||
background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
|
||
border: 1rpx solid #1083F8;
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
}
|
||
|
||
.other-contain {
|
||
width: 100%;
|
||
height: 93vh;
|
||
display: flex;
|
||
// background-color: rgb(239, 240, 244);
|
||
// transition: opacity 1s ease;
|
||
|
||
.other-contain-left {
|
||
width: 32%;
|
||
height: 100%;
|
||
|
||
.left-menu-scroll {
|
||
margin-top: 2.5%;
|
||
height: 90%;
|
||
width: 100%;
|
||
|
||
.pls-card {
|
||
width: 100%;
|
||
height: 359rpx;
|
||
border: transparent 3rpx solid;
|
||
background-color: #fff;
|
||
border-radius: 40rpx;
|
||
margin-bottom: 18rpx;
|
||
padding: 0 30rpx;
|
||
position: relative;
|
||
background-color: #fff;
|
||
|
||
.pls-card-title {
|
||
height: 5.6vh;
|
||
width: 105%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
|
||
.title-left {
|
||
font-weight: 800;
|
||
font-size: 32rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.title-right {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
font-size: 30rpx;
|
||
position: relative;
|
||
|
||
.title-right-big {
|
||
font-weight: 800;
|
||
font-size: 40rpx;
|
||
margin-right: 35rpx;
|
||
color: #555555;
|
||
}
|
||
|
||
.title-right-img {
|
||
position: absolute;
|
||
right: -10rpx;
|
||
bottom: 6rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pls-card-middle {
|
||
width: 100%;
|
||
height: 11vh;
|
||
margin-top: 2vh;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.middle-heng {
|
||
position: absolute;
|
||
left: 4%;
|
||
top: 35%;
|
||
transform: translateY(-35%);
|
||
width: 92%;
|
||
height: 2px;
|
||
/* 虚线粗细 */
|
||
background-image: repeating-linear-gradient(to right,
|
||
#E5E5E5 0,
|
||
#E5E5E5 6px,
|
||
transparent 6px,
|
||
transparent 10px);
|
||
}
|
||
|
||
.pls-card-middle-one {
|
||
width: 33.3%;
|
||
height: 100%;
|
||
|
||
// background-color: yellow;
|
||
.middle-title {
|
||
width: 100%;
|
||
height: 2.1vh;
|
||
// background-color: #007CFF;
|
||
color: #888888;
|
||
text-align: center;
|
||
font-size: 25rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.middle-heng-father {
|
||
width: 100%;
|
||
height: 4vh;
|
||
position: relative;
|
||
|
||
.middle-ball-img {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.middle-ball {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background-color: #1083F8;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.end-font {
|
||
width: 100%;
|
||
height: 6vh;
|
||
font-size: 25rpx;
|
||
text-align: center;
|
||
color: #666666;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pls-card-end {
|
||
width: 100%;
|
||
height: 7.7vh;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
|
||
.end-left {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.end-left-img {
|
||
width: 37rpx;
|
||
height: 37rpx;
|
||
}
|
||
|
||
.end-left-font {
|
||
margin-top: 3rpx;
|
||
width: 400rpx;
|
||
color: #666666;
|
||
margin-left: 10rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
.tag-fail {
|
||
width: 120rpx;
|
||
height: 50rpx;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #FDEBEC;
|
||
color: #FF5757;
|
||
position: absolute;
|
||
right: -5rpx;
|
||
bottom: 20rpx;
|
||
}
|
||
|
||
.tag-success {
|
||
width: 120rpx;
|
||
height: 50rpx;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #ECF6FF;
|
||
color: #1083F8;
|
||
border: 1rpx solid #1083F8;
|
||
position: absolute;
|
||
right: -5rpx;
|
||
bottom: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-selecttype {
|
||
width: 98%;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
background-color: #FFFFFF;
|
||
display: flex;
|
||
padding-right: 30rpx;
|
||
padding-left: 15rpx;
|
||
position: relative;
|
||
|
||
|
||
.heng-blue {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 25rpx;
|
||
height: 8rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #1083F8;
|
||
transition: 0.3s all ease;
|
||
|
||
}
|
||
|
||
.selecttype {
|
||
width: 25%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #999999;
|
||
font-size: 31rpx;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.selecttype-target {
|
||
width: 25%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #222222;
|
||
font-size: 31rpx;
|
||
font-weight: 600;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
|
||
.other-contain-right {
|
||
width: 65.5%;
|
||
margin-left: 1%;
|
||
height: 97%;
|
||
background-color: #fff;
|
||
border-radius: 40rpx;
|
||
position: relative;
|
||
|
||
.right-contain {
|
||
width: 100%;
|
||
height: 95%;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
|
||
|
||
.right-ones {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
padding-left: 15rpx;
|
||
padding-top: 13rpx;
|
||
padding-bottom: 80rpx;
|
||
|
||
|
||
.right-one {
|
||
width: 592rpx;
|
||
height: 270rpx;
|
||
margin-left: 20rpx;
|
||
margin-bottom: 15rpx;
|
||
background-color: #F9F9F9;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
|
||
.right-one-left {
|
||
height: 100%;
|
||
width: 40%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding: 0.5vw 0;
|
||
|
||
.bgimg {
|
||
width: 6.5vw;
|
||
height: 6vw;
|
||
margin: 0.3vw auto 0.25vw;
|
||
border-radius: 1.1vw;
|
||
background: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0.2vw;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.left-tages {
|
||
width: 130rpx;
|
||
height: 36rpx;
|
||
border-radius: 30rpx;
|
||
color: #555555;
|
||
border: 1rpx solid #D2D2D2;
|
||
margin-top: 5rpx;
|
||
font-size: 20rpx;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
line-height: 34rpx;
|
||
}
|
||
}
|
||
|
||
.right-one-right {
|
||
height: 100%;
|
||
width: 60%;
|
||
|
||
.right-title {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
margin-top: 25rpx;
|
||
color: #222222;
|
||
width: 300rpx;
|
||
overflow: hidden;
|
||
/* 必须 */
|
||
white-space: nowrap;
|
||
/* 强制单行 */
|
||
text-overflow: ellipsis;
|
||
/* 显示省略号 */
|
||
}
|
||
|
||
.right-setting {
|
||
color: #888888;
|
||
margin-top: 5rpx;
|
||
font-size: 25rpx;
|
||
}
|
||
|
||
.right-mm {
|
||
color: #555555;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.right-down {
|
||
display: flex;
|
||
margin-top: 15rpx;
|
||
|
||
.right-first-num {
|
||
font-size: 35rpx;
|
||
color: #555555;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.right-first-type {
|
||
color: #888888;
|
||
font-size: 23rpx;
|
||
}
|
||
|
||
.right-shu {
|
||
width: 2rpx;
|
||
height: 50rpx;
|
||
background-color: #C9C9C9;
|
||
margin: 0 40rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-buttons {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 10%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.button-gray {
|
||
background-color: #f8f8f8;
|
||
color: #555555;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #555555;
|
||
width: 180rpx;
|
||
height: 70rpx;
|
||
border-radius: 40rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.button-blue {
|
||
background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
|
||
border: 1rpx solid #1083F8;
|
||
color: #1083F8;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 180rpx;
|
||
height: 70rpx;
|
||
border-radius: 40rpx;
|
||
margin-right: 60rpx;
|
||
}
|
||
|
||
.button-gray:active {
|
||
color: #1083F8;
|
||
background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
|
||
border: 1rpx solid #1083F8;
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.right-buttons {
|
||
position: absolute;
|
||
right: 1.4vw;
|
||
top: 0;
|
||
display: flex;
|
||
|
||
.contain-right-button {
|
||
width: 7.3vw;
|
||
height: 3.3vw;
|
||
background: #FFFFFF;
|
||
border-radius: 1.65vw;
|
||
border: 1px solid #D9DADC;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #222;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 0 0 0.7vw;
|
||
color: #555555;
|
||
|
||
image {
|
||
width: 1.5vw;
|
||
height: 1.5vw;
|
||
margin: 0 0.2vw 0 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.zhedang {
|
||
position: fixed;
|
||
width: 50%;
|
||
right: 0;
|
||
top: 0;
|
||
height: 500rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.mengban {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 100;
|
||
background: RGBA(239, 240, 244, 0.55);
|
||
}
|
||
|
||
.title-ball {
|
||
width: 5.3vh;
|
||
height: 5.3vh;
|
||
border-radius: 50%;
|
||
margin-left: 10rpx;
|
||
background-color: #fff;
|
||
border: 2rpx solid #D9DADC;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.title-ball-img {
|
||
width: 55%;
|
||
height: 55%;
|
||
}
|
||
}
|
||
|
||
// .title-ball:active {
|
||
// background: linear-gradient(to top, #1083F8, #1083F8);
|
||
// color: #fff;
|
||
// font-size: 44rpx;
|
||
// font-weight: 700;
|
||
// border: 1rpx solid #00C9FF;
|
||
// }
|
||
.haventmessage {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 30rpx;
|
||
|
||
}
|
||
.que {
|
||
width: 10vw;
|
||
height: 10vw;
|
||
// margin: auto;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
view {
|
||
margin-top: -30rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 300;
|
||
font-size: 1.2vw;
|
||
color: #555555;
|
||
}
|
||
}
|
||
.center{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style> |