This commit is contained in:
浅念
2026-02-06 14:39:37 +08:00
parent 423fc8b7e1
commit bf3d85de0d
28 changed files with 5631 additions and 1164 deletions
+2 -2
View File
@@ -1,6 +1,6 @@
// const baseUrl = "https://api.collect.hs.hnzhwlkj.club/"; //这里放置url域名32044 // const baseUrl = "https://api.collect.hs.hnzhwlkj.club/"; //这里放置url域名32044
// const baseUrl = "https://api.collect.xyh.muzili.top/"; //这里放置url域名32044 // const baseUrl = "https://api.collect.xyh.muzili.top/"; //这里放置url域名32044
const baseUrl = "https://bsh.info.hb.hnzhwlkj.cn/"; //这里放置url域名32044 const baseUrl = "https://fdesk.hnxinyouhe.com/"; //这里放置url域名32044
// const baseUrl = "https://114.215.24.240:8106/api/v1/"; //这里放置url域名32044 // const baseUrl = "https://114.215.24.240:8106/api/v1/"; //这里放置url域名32044
export function request(options){//封装的requset export function request(options){//封装的requset
let { url,data,method } = options; let { url,data,method } = options;
@@ -13,7 +13,7 @@ export function request(options){//封装的requset
uni.request({//这里是uniapp网络请求的api uni.request({//这里是uniapp网络请求的api
url: baseUrl + url, //仅为示例,并非真实接口地址。 url: baseUrl + url, //仅为示例,并非真实接口地址。
data, data,
header:{'content-type': 'application/x-www-form-urlencoded','Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),'Fdesk-Language': uni.getStorageSync('i18locale')?uni.getStorageSync('i18locale'):'zh','Fdesk-Login-Type': 'wechat','Fdesk-System-Code':'wechat'}, header:{'Fdesk-Corp-Abbr':uni.getStorageSync('corp_abbr'),'Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),'Fdesk-Language': uni.getStorageSync('i18locale')?uni.getStorageSync('i18locale'):'zh','Fdesk-Login-Type': 'feishu','Fdesk-System-Code':'fdesk','is_mob':1},
method:method||"GET",//默认请求方式是get method:method||"GET",//默认请求方式是get
success: (res) => { success: (res) => {
uni.hideLoading(); uni.hideLoading();
+1 -1
View File
@@ -5,7 +5,7 @@
"versionName" : "1.0.0", "versionName" : "1.0.0",
"versionCode" : "100", "versionCode" : "100",
"transformPx" : false, "transformPx" : false,
"locale" : "en", // 设置默认语言, "locale" : "zh-Hans", // 设置默认语言,
"app-plus" : { "app-plus" : {
"usingComponents" : true, "usingComponents" : true,
"nvueCompiler" : "uni-app", "nvueCompiler" : "uni-app",
+85 -4
View File
@@ -3,10 +3,10 @@
// pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages // pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{ {
"path": "pages/index/index", "path" : "pages/login/index",
"style" : "style" :
{ {
"navigationBarTitleText": "首页", "navigationBarTitleText": "登录",
"enablePullDownRefresh": true, "enablePullDownRefresh": true,
"navigationStyle":"custom",// 去掉微信小程序顶部导航 "navigationStyle":"custom",// 去掉微信小程序顶部导航
"app-plus":{ "app-plus":{
@@ -18,10 +18,10 @@
} }
} }
},{ },{
"path" : "pages/login/index", "path": "pages/index/index",
"style" : "style" :
{ {
"navigationBarTitleText": "登录", "navigationBarTitleText": "首页",
"enablePullDownRefresh": true, "enablePullDownRefresh": true,
"navigationStyle":"custom",// 去掉微信小程序顶部导航 "navigationStyle":"custom",// 去掉微信小程序顶部导航
"app-plus":{ "app-plus":{
@@ -51,6 +51,15 @@
"navigationStyle":"custom" "navigationStyle":"custom"
} }
}, },
{
"path" : "pages/borrow/return_edit",
"style" :
{
"navigationBarTitleText": "编辑归还",
"enablePullDownRefresh": true,
"navigationStyle":"custom"
}
},
{ {
"path" : "pages/borrow/borrow_list", "path" : "pages/borrow/borrow_list",
"style" : "style" :
@@ -78,6 +87,15 @@
"navigationStyle":"custom" "navigationStyle":"custom"
} }
}, },
{
"path" : "pages/borrow/borrow_edit",
"style" :
{
"navigationBarTitleText" : "编辑",
"enablePullDownRefresh": true,
"navigationStyle":"custom"
}
},
{ {
"path" : "pages/stock/stock_list", "path" : "pages/stock/stock_list",
"style" : "style" :
@@ -86,6 +104,69 @@
"enablePullDownRefresh": true, "enablePullDownRefresh": true,
"navigationStyle":"custom" "navigationStyle":"custom"
} }
},
{
"path" : "pages/login/feishu-callback",
"style" :
{
"navigationBarTitleText" : "飞书",
"enablePullDownRefresh": true,
"navigationStyle":"custom"
}
},
{
"path" : "pages/approval/borrow_approval",
"style" :
{
"navigationBarTitleText" : "借用审核",
"enablePullDownRefresh": true,
"navigationStyle":"custom"
}
},
{
"path" : "pages/approval/return_approval",
"style" :
{
"navigationBarTitleText" : "归还审核",
"enablePullDownRefresh": true,
"navigationStyle":"custom"
}
},
{
"path" : "pages/approval/borrow_approval_detils",
"style" :
{
"navigationBarTitleText" : "审核借用",
"enablePullDownRefresh": true,
"navigationStyle":"custom"
}
},
{
"path" : "pages/approval/borrow_approval_detail",
"style" :
{
"navigationBarTitleText" : "审核详情",
"enablePullDownRefresh": true,
"navigationStyle":"custom"
}
},
{
"path" : "pages/approval/return_approval_detils",
"style" :
{
"navigationBarTitleText" : "审核归还",
"enablePullDownRefresh": true,
"navigationStyle":"custom"
}
},
{
"path" : "pages/approval/return_approval_detail",
"style" :
{
"navigationBarTitleText" : "归还审核详情",
"enablePullDownRefresh": true,
"navigationStyle":"custom"
}
} }
], ],
"subPackages":[], "subPackages":[],
+344
View File
@@ -0,0 +1,344 @@
<template>
<view class="home-page">
<z-paging ref="paging" v-model="borrowList" @query="queryList" empty-view-text="暂无数据!">
<template #top>
<uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false" @clickLeft="leftClick" color="#fff" backgroundColor="rgb(48, 116, 247)" :statusBar="true" title="审批列表"></uni-nav-bar>
<!-- Tab栏 -->
<view class="tab-bar">
<view
class="tab-item"
:class="{ 'tab-item-active': currentTab === index }"
v-for="(tab, index) in tabList"
:key="index"
@click="switchTab(index)"
>
<text class="tab-text">{{ tab }}</text>
<view v-if="currentTab === index" class="tab-underline"></view>
</view>
</view>
</template>
<!-- 列表内容 -->
<view class="list-container">
<view
class="borrow-card"
v-for="(item, index) in borrowList"
:key="index"
>
<!-- 状态标签(右上角旋转丝带) -->
<view class="status-ribbon" :class="'ribbon-' + item.status">
<text class="ribbon-text">{{ getStatusText(item.status) }}</text>
</view>
<!-- 卡片内容 -->
<view class="card-content" @click="handleCardClick(item)">
<view class="card-title">
<uni-tag :text="item1.item_name_snap" size="mini" type="primary" v-for="(item1, index) in item.item" :key="index"/>
</view>
<view class="card-info">
<text class="info-item">申请人: {{ item.applicant_name }}</text>
<text class="info-item">借用时间: {{ item.use_start_date || '-' }} ~ {{ item.use_end_date || '-' }}</text>
</view>
<view class="action-btns">
<!-- <text class="info-item">公司名称: {{ item.companyName }}</text> -->
<text class="info-item"></text>
<!-- 操作按钮 -->
<view class="card-actions" v-if="item.status !== 'returned'">
<button
class="action-btn"
:class="'btn-' + item.status"
v-if="item.status==10"
@click.stop="handleAction(item)"
>
{{ getActionText(item.status) }}
</button>
</view>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<script>
import { request,showToast } from '@/api/apiT.js'
export default {
data() {
return {
currentTab: 0,
tabList: ['全部', '待审核', '已通过', '未通过'],
borrowList: []
}
},
computed: {
filteredList() {
if (this.currentTab === 0) {
return this.borrowList
} else if (this.currentTab === 1) {
return this.borrowList.filter(item => item.status === 'returned')
} else if (this.currentTab === 2) {
return this.borrowList.filter(item => item.status === 'notReturned')
} else if (this.currentTab === 3) {
return this.borrowList.filter(item => item.status === 'pendingReview')
}
return []
}
},
methods: {
leftClick(){
uni.navigateBack({})
},
switchTab(index) {
this.currentTab = index
// 重置分页并重新加载数据
if (this.$refs.paging) {
this.$refs.paging.reload()
}
},
queryList(pageNo, pageSize, from) {
this.loading = true;
var that = this;
const params = {
current:pageNo,
size:10,
status: this.currentTab === 0 ? '' : (this.currentTab === 1 ? '10' : (this.currentTab === 2 ? '12' : '13'))
};
request({
url:'mobile/inv/requisition/list',
method:'get',
data: params
}).then(res => {
if(res.data.code ==200){
var datas = res.data.data.records;
this.$refs.paging.complete(datas);
}else{
}
uni.stopPullDownRefresh();
//
})
},
getStatusText(status) {
const statusMap = {
'12': '待归还',
'13': '拒绝',
'14': '申请归还',
'15': '归还审核中',
'16': '部分归还',
'17': '已归还',
'18': '归还拒绝',
'11': '审批中',
'10': '待审核',
'19': '损耗品'
}
return statusMap[status] || ''
},
getActionText(status) {
const actionMap = {
'12': '待归还',
'13': '拒绝',
'14': '申请归还',
'15': '归还审核中',
'16': '部分归还',
'17': '已归还',
'18': '归还拒绝',
'11': '审批中',
'10': '去审核',
'19': '损耗品'
}
return actionMap[status] || ''
},
handleCardClick(item) {
uni.navigateTo({
url: '/pages/approval/borrow_approval_detail?id=' + item.id
});
},
handleAction(item) {
uni.navigateTo({
url: '/pages/approval/borrow_approval_detils?id='+item.id
});
}
}
}
</script>
<style lang="scss">
.home-page {
min-height: 100vh;
background: rgb(244, 246, 248);
}
.content-wrapper {
}
// Tab栏样式
.tab-bar {
display: flex;
background: #F4F6F8;
}
.tab-item {
flex: 1;
position: relative;
padding: 24rpx 0;
text-align: center;
}
.tab-text {
font-size: 28rpx;
color: #666;
}
.tab-item-active .tab-text {
color: #3074F7;
font-weight: 500;
}
.tab-underline {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 4rpx;
background: #3074F7;
border-radius: 2rpx;
}
// 列表容器
.list-container {
padding: 24rpx 28rpx;
}
// 借用卡片
.borrow-card {
position: relative;
background: #fff;
border-radius: 12rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
overflow: hidden;
}
// 状态标签(旋转丝带效果)
.status-ribbon {
position: absolute;
top: -4px;
right: -32px;
width: 100px;
height: 47px;
background: #08A400;
transform: rotate(45deg);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
}
.ribbon-notReturned {
background: #BD0000; // 红色
}
.ribbon-10 {
background: #3471FF; // 蓝色
}
.ribbon-11 {
background: #FA8C16;
}
.ribbon-12 {
background: #722ED1;
}
.ribbon-13 {
background: #F5222D;
}
.ribbon-14 {
background: #13C2C2;
}
.ribbon-15 {
background: #FAAD14;
}
.ribbon-16 {
background: #52C41A;
}
.ribbon-17 {
background: #389E0D;
}
.ribbon-18 {
background: #A8071A;
}
.ribbon-19 {
background: #8C8C8C;
}
.ribbon-text {
color: #fff;
font-size: 20rpx;
font-weight: 500;
transform: rotate(0deg);
transform-origin: center;
display: block;
text-align: center;
margin-top: 16rpx;
white-space: nowrap;
letter-spacing: 1rpx;
}
// 卡片内容
.card-content {
padding: 28rpx;
}
.card-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 24rpx;
display: flex;
gap: 10px;
}
.card-info {
display: flex;
flex-direction: column;
gap: 12rpx;
margin-bottom: 24rpx;
}
.info-item {
font-size: 26rpx;
color: #666;
line-height: 1.6;
}
// 操作按钮
.card-actions {
display: flex;
justify-content: flex-end;
}
.action-btns{
display: flex;
justify-content: space-between;
align-items: center;
}
.action-btn {
padding: 14rpx 40rpx;
background: #3074F7;
color: #fff;
border-radius: 8rpx;
font-size: 26rpx;
border: none;
line-height: 1;
&::after {
border: none;
}
}
.btn-notReturned {
background: #3074F7;
}
.btn-pendingReview {
background: #3074F7;
}
</style>
+274
View File
@@ -0,0 +1,274 @@
<template>
<view class="page">
<uni-nav-bar
leftText=" "
:fixed="true"
leftIcon="back"
background-color="rgb(48, 116, 247)"
color="#fff"
:statusBar="true"
title="借用审核详情"
@clickLeft="onBack"
/>
<view class="content">
<!-- 基本信息 -->
<view class="card">
<view class="card-head">
<text class="card-title">借用信息</text>
<view class="status-tag" :class="'s' + (detail.status || 0)">
<text class="status-text">{{ statusText }}</text>
</view>
</view>
<view class="row"><text class="label">单号</text><text class="value">{{ detail.order_no || '-' }}</text></view>
<view class="row"><text class="label">申请人</text><text class="value">{{ detail.applicant_name || '-' }}</text></view>
<view class="row">
<text class="label">借用时间</text>
<text class="value">{{ detail.use_start_date || '-' }} ~ {{ detail.use_end_date || '-' }}</text>
</view>
<view class="row"><text class="label">借用事由</text><text class="value">{{ detail.borrow_reason || '-' }}</text></view>
<view class="row" v-if="detail.remark !== undefined">
<text class="label">备注</text>
<text class="value">{{ detail.remark || '-' }}</text>
</view>
</view>
<!-- 物品明细 -->
<view class="card">
<view class="card-head">
<text class="card-title">物品明细</text>
</view>
<view v-if="detail.item && detail.item.length === 0" class="empty">暂无物品</view>
<view v-for="(it, idx) in detail.item" :key="it.id" class="item">
<view class="item-left">
<text class="item-name">{{ it.item_name_snap || '-' }}</text>
<text class="item-meta" v-if="it.spec_model_snap">规格:{{ it.spec_model_snap }}</text>
</view>
<view class="item-right">
<text class="qty-label">申请数量</text>
<text class="qty-val">{{ it.request_qty || 0 }}</text>
</view>
</view>
</view>
<!-- 申请附件 -->
<view class="card" v-if="(detail.attachment || []).length">
<view class="card-head">
<text class="card-title">申请附件</text>
</view>
<view class="img-grid">
<image
v-for="(a, i) in detail.attachment"
:key="a.id || i"
class="img"
:src="a.file_path_pull || ''"
mode="aspectFill"
@click="previewAttachment(i)"
/>
</view>
</view>
<!-- 审核信息 -->
<view class="card" v-if="detail.audit_info">
<view class="card-head">
<text class="card-title">审核信息</text>
</view>
<view class="row"><text class="label">审核人</text><text class="value">{{ detail.audit_info.handler_name || '-' }}</text></view>
<view class="row"><text class="label">审核时间</text><text class="value">{{ detail.audit_info.handle_time || '-' }}</text></view>
<view class="row" v-if="detail.audit_info.handle_remark">
<text class="label">审核意见</text>
<text class="value">{{ detail.audit_info.handle_remark }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import { request, showToast } from '@/api/apiT.js'
export default {
data() {
return {
id: '',
detail: {}
}
},
computed: {
statusText() {
const s = Number(this.detail.status || 0)
if (this.detail.is_returned === 1) return '已归还'
if (s === 10) return '待审核'
if (s === 11) return '审批中'
if (s === 12) return '待归还'
if (s === 13) return '借用拒绝'
if (s === 14) return '归还待审核'
if (s === 15) return '归还审批中'
if (s === 16) return '部分归还'
if (s === 17) return '已归还'
if (s === 18) return '归还拒绝'
return '处理中'
}
},
onLoad(option) {
this.id = option.id || option.requisition_id || option.requisitionId || ''
if (!this.id) {
showToast({ title: '缺少id参数' })
return
}
this.getDetail()
},
methods: {
onBack() {
uni.navigateBack()
},
getDetail() {
request({
url: 'admin/inv/requisition/show',
method: 'GET',
data: { id: this.id }
}).then((res) => {
if (res.data && res.data.code === 200) {
this.detail = res.data.data || {}
// 兜底,避免 v-for 报错
this.detail.item = Array.isArray(this.detail.item) ? this.detail.item : []
this.detail.attachment = Array.isArray(this.detail.attachment) ? this.detail.attachment : []
} else {
showToast({ title: res.data.message || '获取详情失败' })
}
})
},
previewAttachment(index) {
const urls = (this.detail.attachment || [])
.map((a) => a.file_path_pull)
.filter(Boolean)
if (!urls.length) return
uni.previewImage({
current: urls[index] || urls[0],
urls
})
}
}
}
</script>
<style lang="scss">
.page {
min-height: 100vh;
background: rgb(244, 246, 248);
}
.content {
padding: 20rpx;
}
.card {
background: #fff;
border-radius: 20rpx;
padding: 22rpx;
margin-bottom: 18rpx;
box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
}
.card-title {
font-size: 30rpx;
font-weight: 700;
color: #1f2d3d;
}
.row {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 10rpx 0;
border-bottom: 1rpx solid #f1f3f5;
}
.row:last-child {
border-bottom: none;
}
.label {
width: 160rpx;
font-size: 26rpx;
color: #667085;
}
.value {
flex: 1;
text-align: right;
font-size: 26rpx;
color: #101828;
}
.status-tag {
padding: 6rpx 14rpx;
border-radius: 999rpx;
background: rgba(48, 116, 247, 0.12);
}
.status-text {
font-size: 24rpx;
color: rgb(48, 116, 247);
}
.empty {
padding: 24rpx 0;
text-align: center;
color: #98a2b3;
font-size: 26rpx;
}
.item {
padding: 16rpx 0;
border-top: 1rpx dashed #eef2f6;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
}
.item-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.item-right {
display: flex;
align-items: baseline;
gap: 10rpx;
flex-shrink: 0;
}
.qty-label {
font-size: 22rpx;
color: #667085;
}
.qty-val {
font-size: 30rpx;
font-weight: 700;
color: #101828;
}
.item:first-child {
border-top: none;
padding-top: 0;
}
.item-name {
font-size: 28rpx;
font-weight: 700;
color: #101828;
}
.item-meta {
font-size: 24rpx;
color: #98a2b3;
}
.img-grid {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
}
.img {
width: 210rpx;
height: 210rpx;
border-radius: 16rpx;
background: #f2f4f7;
}
</style>
+450
View File
@@ -0,0 +1,450 @@
<template>
<view class="page">
<uni-nav-bar
leftText=" "
:fixed="true"
leftIcon="back"
background-color="rgb(48, 116, 247)"
color="#fff"
:statusBar="true"
title="借用审核"
@clickLeft="onBack"
/>
<view class="content">
<!-- 基本信息 -->
<view class="card">
<view class="card-head">
<text class="card-title">借用信息</text>
<view class="status-tag" :class="'s' + (detail.status || 0)">
<text class="status-text">{{ statusText }}</text>
</view>
</view>
<view class="row"><text class="label">单号</text><text class="value">{{ detail.order_no || '-' }}</text></view>
<view class="row"><text class="label">申请人</text><text class="value">{{ detail.applicant_name || '-' }}</text></view>
<view class="row">
<text class="label">借用时间</text>
<text class="value">{{ detail.use_start_date || '-' }} ~ {{ detail.use_end_date || '-' }}</text>
</view>
<view class="row"><text class="label">借用事由</text><text class="value">{{ detail.borrow_reason || '-' }}</text></view>
<view class="row" v-if="detail.remark !== undefined">
<text class="label">备注</text>
<text class="value">{{ detail.remark || '-' }}</text>
</view>
</view>
<!-- 物品明细 -->
<view class="card">
<view class="card-head">
<text class="card-title">物品明细</text>
</view>
<view v-if="approveItems.length === 0" class="empty">暂无物品</view>
<view v-for="(it, idx) in approveItems" :key="it.requisition_item_id" class="item">
<view class="item-left">
<text class="item-name">{{ it.requisition_item_name }}</text>
<text class="item-meta" v-if="it.spec_model_snap">规格:{{ it.spec_model_snap }}</text>
</view>
<view class="item-right">
<text class="qty-label">申请数量</text>
<text class="qty-val">{{ it.request_qty }}</text>
</view>
</view>
</view>
<!-- 申请附件 -->
<view class="card" v-if="(detail.attachment || []).length">
<view class="card-head">
<text class="card-title">申请附件</text>
</view>
<view class="img-grid">
<image
v-for="(a, i) in detail.attachment"
:key="a.id || i"
class="img"
:src="a.file_path_pull || ''"
mode="aspectFill"
@click="previewAttachment(i)"
/>
</view>
</view>
<!-- 审核意见 -->
<view class="card">
<view class="card-head">
<text class="card-title">审核意见</text>
</view>
<textarea
class="textarea"
v-model="auditRemark"
placeholder="请输入审核备注(可选)"
:auto-height="true"
maxlength="500"
/>
</view>
<view style="height: 120rpx;"></view>
</view>
<!-- 底部操作 -->
<view class="footer">
<button class="btn btn-ghost" @click="onReject">驳回</button>
<button class="btn btn-primary" @click="onApprove">同意</button>
</view>
</view>
</template>
<script>
import { request, showToast } from '@/api/apiT.js'
// ⚠️ 你需要把这里改成真实的“审核提交接口”
// 如果你后端有具体字段/接口名,发我,我可以帮你对齐成完全可用。
const AUDIT_API = 'admin/inv/requisition/approve'
export default {
data() {
return {
id: '',
detail: {},
approveItems: [],
auditRemark: ''
}
},
computed: {
statusText() {
// 你返回里 status=10;这里做个兼容显示
const s = Number(this.detail.status || 0)
if (this.detail.is_returned === 1) return '已归还'
if (s === 10) return '待审核'
if (s === 11) return '审批中'
if (s === 12) return '待归还'
if (s === 13) return '借用拒绝'
if (s === 14) return '归还待审核'
if (s === 15) return '归还审批中'
if (s === 16) return '部分归还'
if (s === 17) return '已归还'
if (s === 18) return '归还拒绝'
return '处理中'
}
},
onLoad(option) {
this.id = option.id || option.requisition_id || option.requisitionId || ''
if (!this.id) {
showToast({ title: '缺少id参数' })
return
}
this.getDetail()
},
methods: {
onBack() {
uni.navigateBack()
},
getDetail() {
request({
url: 'admin/inv/requisition/show',
method: 'GET',
data: { id: this.id }
}).then((res) => {
this.detail = (res.data && res.data.data) || {}
this.initApproveItems()
})
},
initApproveItems() {
const list = Array.isArray(this.detail.item) ? this.detail.item : []
this.approveItems = list.map((it) => {
// approved_qty 可能后端已经给了;没有就默认=申请数量
const req = Number(it.request_qty || 0)
const approved = it.approved_qty === undefined || it.approved_qty === null ? req : Number(it.approved_qty || 0)
return {
requisition_item_id: it.id,
requisition_item_name: it.item_name_snap || '',
spec_model_snap: it.spec_model_snap || '',
unit_snap: it.unit_snap || '',
request_qty: req,
returned_qty: Number(it.returned_qty || 0),
approved_qty: this.clamp(approved, 0, req)
}
})
},
clamp(v, min, max) {
const n = Number(v || 0)
if (n < min) return min
if (n > max) return max
return n
},
onApprovedQtyChange(idx, val) {
const it = this.approveItems[idx]
if (!it) return
it.approved_qty = this.clamp(val, 0, it.request_qty)
// 触发视图更新
this.$set(this.approveItems, idx, it)
},
previewAttachment(startIndex) {
const urls = (this.detail.attachment || [])
.map((a) => a.file_path_pull)
.filter(Boolean)
if (!urls.length) return
uni.previewImage({
current: urls[startIndex] || urls[0],
urls
})
},
buildPayload(action) {
return {
requisition_id: this.detail.id || this.id,
action, // 'approve' | 'reject'
approve_id:this.detail.approve_id,
comment: this.auditRemark || ''
// items: this.approveItems.map((it) => ({
// requisition_item_id: it.requisition_item_id,
// requisition_item_name: it.requisition_item_name,
// approved_qty: it.approved_qty
// }))
}
},
doSubmit(action) {
if (!this.approveItems.length) {
showToast({ title: '没有可审核的物品' })
return
}
const payload = this.buildPayload(action)
request({
url: AUDIT_API,
method: 'POST',
data: payload
}).then((res) => {
const msg = (res.data && (res.data.message || res.data.msg)) || '操作完成'
showToast({ title: msg })
if (res.data && Number(res.data.code) === 200) {
setTimeout(() => {
// 回到上一页并传递刷新参数
uni.navigateBack({
delta: 1,
success: function() {
// 触发上一页的刷新
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
if (prevPage && prevPage.$refs.paging) {
prevPage.$refs.paging.reload()
}
}
})
}, 600)
}
})
},
onApprove() {
uni.showModal({
title: '确认通过',
content: '确认同意该借用申请?',
success: (r) => {
if (r.confirm) this.doSubmit('1')
}
})
},
onReject() {
uni.showModal({
title: '确认驳回',
content: '确认驳回该借用申请?',
success: (r) => {
if (r.confirm) this.doSubmit('2')
}
})
}
}
}
</script>
<style lang="scss">
.page {
min-height: 100vh;
background: rgb(244, 246, 248);
}
.content {
padding: 20rpx;
}
.card {
background: #fff;
border-radius: 20rpx;
padding: 22rpx;
margin-bottom: 18rpx;
box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
}
.card-title {
font-size: 30rpx;
font-weight: 700;
color: #1f2d3d;
}
.card-sub {
font-size: 24rpx;
color: #98a2b3;
}
.row {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 10rpx 0;
border-bottom: 1rpx solid #f1f3f5;
}
.row:last-child {
border-bottom: none;
}
.label {
width: 160rpx;
font-size: 26rpx;
color: #667085;
}
.value {
flex: 1;
text-align: right;
font-size: 26rpx;
color: #101828;
}
.status-tag {
padding: 6rpx 14rpx;
border-radius: 999rpx;
background: rgba(48, 116, 247, 0.12);
}
.status-text {
font-size: 24rpx;
color: rgb(48, 116, 247);
}
.empty {
padding: 24rpx 0;
text-align: center;
color: #98a2b3;
font-size: 26rpx;
}
.item {
padding: 16rpx 0;
border-top: 1rpx dashed #eef2f6;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
}
.item-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.item-right {
display: flex;
align-items: baseline;
gap: 10rpx;
flex-shrink: 0;
}
.qty-label {
font-size: 22rpx;
color: #667085;
}
.qty-val {
font-size: 30rpx;
font-weight: 700;
color: #101828;
}
.item:first-child {
border-top: none;
padding-top: 0;
}
.item-top {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 12rpx;
}
.item-name {
font-size: 28rpx;
font-weight: 700;
color: #101828;
}
.item-meta {
font-size: 24rpx;
color: #98a2b3;
}
.grid {
display: flex;
gap: 16rpx;
}
.cell {
flex: 1;
background: #f8fafc;
border-radius: 16rpx;
padding: 14rpx;
}
.k {
display: block;
font-size: 22rpx;
color: #667085;
margin-bottom: 8rpx;
}
.v {
font-size: 26rpx;
color: #101828;
}
.hint {
margin-top: 10rpx;
font-size: 24rpx;
color: #667085;
}
.img-grid {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
}
.img {
width: 210rpx;
height: 210rpx;
border-radius: 16rpx;
background: #f2f4f7;
}
.textarea {
width: 100%;
min-height: 140rpx;
font-size: 26rpx;
line-height: 1.6;
background: #f8fafc;
border-radius: 16rpx;
padding: 16rpx;
box-sizing: border-box;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 16rpx 20rpx calc(16rpx + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.98);
border-top: 1rpx solid #eef2f6;
display: flex;
gap: 16rpx;
}
.btn {
flex: 1;
height: 84rpx;
line-height: 84rpx;
border-radius: 18rpx;
font-size: 30rpx;
font-weight: 700;
}
.btn-ghost {
background: #fff;
border: 2rpx solid #d0d5dd;
color: #344054;
}
.btn-primary {
background: rgb(48, 116, 247);
color: #fff;
}
</style>
+298
View File
@@ -0,0 +1,298 @@
<template>
<view class="home-page">
<z-paging ref="paging" :auto="false" v-model="borrowList" @query="queryList" empty-view-text="暂无数据!">
<template #top>
<uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false" @clickLeft="leftClick" color="#fff" backgroundColor="rgb(48, 116, 247)" :statusBar="true" title="归还审批"></uni-nav-bar>
<!-- Tab栏 -->
<view class="tab-bar">
<view
class="tab-item"
:class="{ 'tab-item-active': currentTab === index }"
v-for="(tab, index) in tabList"
:key="index"
@click="switchTab(index)"
>
<text class="tab-text">{{ tab }}</text>
<view v-if="currentTab === index" class="tab-underline"></view>
</view>
</view>
</template>
<!-- 列表内容 -->
<view class="list-container">
<view
class="borrow-card"
v-for="(item, index) in borrowList"
:key="index"
>
<!-- 状态标签(右上角旋转丝带) -->
<view class="status-ribbon" :class="'ribbon-' + item.status">
<text class="ribbon-text">{{ getStatusText(item.status) }}</text>
</view>
<!-- 卡片内容 -->
<view class="card-content" @click="handleCardClick(item)">
<view class="card-title">
<uni-tag :text="item1.item_name" size="mini" type="primary" v-for="(item1, index) in item.item" :key="index"/>
</view>
<view class="card-info">
<text class="info-item">申请人: {{ item.apply_user_name }}</text>
<text class="info-item">归还时间: {{ item.return_at || '-' }}</text>
</view>
<view class="action-btns">
<!-- <text class="info-item">公司名称: {{ item.companyName }}</text> -->
<text class="info-item"></text>
<!-- 操作按钮 -->
<view class="card-actions" v-if="item.status !== 'returned'">
<button
class="action-btn"
:class="'btn-' + item.status"
v-if="item.status==0"
@click.stop="handleAction(item)"
>
{{ getActionText(item.status) }}
</button>
</view>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<script>
import { request,showToast } from '@/api/apiT.js'
export default {
data() {
return {
currentTab: 0,
tabList: ['全部', '待审核', '已通过', '未通过'],
borrowList: []
}
},
onLoad() {
// 页面加载时初始化数据
this.$nextTick(() => {
if (this.$refs.paging) {
this.$refs.paging.reload()
}
})
},
methods: {
leftClick(){
uni.navigateBack({})
},
switchTab(index) {
this.currentTab = index
// 重置分页并重新加载数据
if (this.$refs.paging) {
this.$refs.paging.reload()
}
},
queryList(pageNo, pageSize, from) {
this.loading = true;
var that = this;
const params = {
current:pageNo,
size:10,
status: this.currentTab === 0 ? '' : (this.currentTab === 1 ? '0' : (this.currentTab === 2 ? '1' : '2'))
};
request({
url:'mobile/inv/requisition/return/list',
method:'get',
data: params
}).then(res => {
if(res.data.code ==200){
var datas = res.data.data.records;
this.$refs.paging.complete(datas);
}else{
}
uni.stopPullDownRefresh();
//
})
},
getStatusText(status) {
const statusMap = {
'0': '待审核',
'1': '已通过',
'2': '未通过'
}
return statusMap[status] || ''
},
getActionText(status) {
const actionMap = {
'0': '去审核',
'1': '已通过',
'2': '未通过'
}
return actionMap[status] || ''
},
handleAction(item) {
uni.navigateTo({
url: '/pages/approval/return_approval_detils?id='+item.id
});
},
handleCardClick(item) {
uni.navigateTo({
url: '/pages/approval/return_approval_detail?id='+item.id
});
}
}
}
</script>
<style lang="scss">
.home-page {
min-height: 100vh;
background: rgb(244, 246, 248);
}
.content-wrapper {
}
// Tab栏样式
.tab-bar {
display: flex;
background: #F4F6F8;
}
.tab-item {
flex: 1;
position: relative;
padding: 24rpx 0;
text-align: center;
}
.tab-text {
font-size: 28rpx;
color: #666;
}
.tab-item-active .tab-text {
color: #3074F7;
font-weight: 500;
}
.tab-underline {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 4rpx;
background: #3074F7;
border-radius: 2rpx;
}
// 列表容器
.list-container {
padding: 24rpx 28rpx;
}
// 借用卡片
.borrow-card {
position: relative;
background: #fff;
border-radius: 12rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
overflow: hidden;
}
// 状态标签(旋转丝带效果)
.status-ribbon {
position: absolute;
top: -4px;
right: -32px;
width: 100px;
height: 47px;
background: #08A400;
transform: rotate(45deg);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
}
.ribbon-0 {
background: #3471FF; // 蓝色
}
.ribbon-2 {
background: #F5222D;
}
.ribbon-1 {
background: #389E0D;
}
.ribbon-text {
color: #fff;
font-size: 20rpx;
font-weight: 500;
transform: rotate(0deg);
transform-origin: center;
display: block;
text-align: center;
margin-top: 16rpx;
white-space: nowrap;
letter-spacing: 1rpx;
}
// 卡片内容
.card-content {
padding: 28rpx;
}
.card-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 24rpx;
}
.card-info {
display: flex;
flex-direction: column;
gap: 12rpx;
margin-bottom: 24rpx;
}
.info-item {
font-size: 26rpx;
color: #666;
line-height: 1.6;
}
// 操作按钮
.card-actions {
display: flex;
justify-content: flex-end;
}
.action-btns{
display: flex;
justify-content: space-between;
align-items: center;
}
.action-btn {
padding: 14rpx 40rpx;
background: #3074F7;
color: #fff;
border-radius: 8rpx;
font-size: 26rpx;
border: none;
line-height: 1;
&::after {
border: none;
}
}
.btn-notReturned {
background: #3074F7;
}
.btn-pendingReview {
background: #3074F7;
}
</style>
+308
View File
@@ -0,0 +1,308 @@
<template>
<view class="page">
<uni-nav-bar
leftText=" "
:fixed="true"
leftIcon="back"
background-color="rgb(48, 116, 247)"
color="#fff"
:statusBar="true"
title="归还详情"
@clickLeft="onBack"
/>
<view class="content">
<!-- 基本信息 -->
<view class="card">
<view class="card-head">
<text class="card-title">归还信息</text>
<view class="status-tag" :class="'s' + (detail.status || 0)">
<text class="status-text">{{ statusText }}</text>
</view>
</view>
<view class="row"><text class="label">申请人</text><text class="value">{{ detail.apply_user_name || '-' }}</text></view>
<view class="row"><text class="label">归还时间</text><text class="value">{{ detail.return_at || '-' }}</text></view>
<view class="row" v-if="detail.apply_remark !== undefined">
<text class="label">归还备注</text>
<text class="value">{{ detail.apply_remark || '-' }}</text>
</view>
</view>
<!-- 物品明细 -->
<view class="card">
<view class="card-head">
<text class="card-title">归还物品</text>
</view>
<view v-if="detail.item && detail.item.length === 0" class="empty">暂无物品</view>
<view v-for="(it, idx) in detail.item" :key="it.id" class="item">
<view class="item-left">
<text class="item-name">{{ it.item_name || '-' }}</text>
<text class="item-meta" v-if="it.spec_model">规格:{{ it.spec_model }}</text>
</view>
<view class="item-right">
<text class="qty-label">归还数量</text>
<text class="qty-val">{{ detail.return_qty || 0 }}</text>
</view>
</view>
</view>
<!-- 借用详情 -->
<view class="card" v-if="borrowDetail.id">
<view class="card-head">
<text class="card-title">借用信息</text>
</view>
<view class="row"><text class="label">申请人</text><text class="value">{{ borrowDetail.applicant_name || '-' }}</text></view>
<view class="row"><text class="label">借用时间</text><text class="value">{{ borrowDetail.use_start_date || '-' }} ~ {{ borrowDetail.use_end_date || '-' }}</text></view>
<view class="row" v-if="borrowDetail.borrow_reason !== undefined">
<text class="label">借用事由</text>
<text class="value">{{ borrowDetail.borrow_reason || '-' }}</text>
</view>
</view>
<!-- 借用物品明细 -->
<view class="card" v-if="borrowDetail.id">
<view class="card-head">
<text class="card-title">借用物品明细</text>
</view>
<view v-if="!borrowDetail.item || borrowDetail.item.length === 0" class="empty">暂无物品</view>
<view v-for="(it, idx) in borrowDetail.item" :key="it.id || idx" class="item">
<view class="item-left">
<text class="item-name">{{ it.item_name_snap || '-' }}</text>
<text class="item-meta" v-if="String(it.is_consumable_snap) === '1'">耗材</text>
</view>
<view class="item-right">
<view class="grid-cell">
<text class="g-label">数量</text>
<text class="g-val">{{ safeNum(it.request_qty) }}</text>
</view>
</view>
</view>
</view>
<!-- 审核信息 -->
<view class="card" v-if="detail.audit_info">
<view class="card-head">
<text class="card-title">审核信息</text>
</view>
<view class="row"><text class="label">审核人</text><text class="value">{{ detail.audit_info.handler_name || '-' }}</text></view>
<view class="row"><text class="label">审核时间</text><text class="value">{{ detail.audit_info.handle_time || '-' }}</text></view>
<view class="row" v-if="detail.audit_info.handle_remark">
<text class="label">审核意见</text>
<text class="value">{{ detail.audit_info.handle_remark }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import { request, showToast } from '@/api/apiT.js'
export default {
data() {
return {
id: '',
detail: {},
borrowDetail: {} // 借用详情数据
}
},
computed: {
statusText() {
const s = Number(this.detail.status || 0)
if (s === 0) return '待审核'
if (s === 1) return '已通过'
if (s === 2) return '已驳回'
return '处理中'
}
},
onLoad(option) {
this.id = option.id || ''
if (!this.id) {
showToast({ title: '缺少id参数' })
return
}
this.getDetail()
},
methods: {
onBack() {
uni.navigateBack()
},
getDetail() {
request({
url: 'mobile/inv/requisition/return/show',
method: 'GET',
data: { id: this.id }
}).then((res) => {
if (res.data && res.data.code === 200) {
this.detail = res.data.data || {}
// 兜底,避免 v-for 报错
this.detail.item = Array.isArray(this.detail.item) ? this.detail.item : []
// 如果有借用详情的id,则获取借用详情数据
const borrowId = this.detail.requisition_item_id || this.detail.item_id
if (borrowId) {
this.getBorrowDetail(borrowId)
}
} else {
showToast({ title: res.data.message || '获取详情失败' })
}
})
},
// 获取借用详情数据
getBorrowDetail(borrowId) {
request({
url: 'mobile/inv/requisition/show',
method: 'GET',
data: { id: borrowId }
}).then((res) => {
if (res.data && res.data.code === 200) {
this.borrowDetail = res.data.data || {}
// 兜底,避免 v-for 报错
this.borrowDetail.item = Array.isArray(this.borrowDetail.item) ? this.borrowDetail.item : []
} else {
showToast({ title: res.data.message || '获取借用详情失败' })
}
})
},
// 安全处理数字显示
safeNum(v) {
const n = Number(v)
return Number.isFinite(n) ? n : 0
}
}
}
</script>
<style lang="scss">
.page {
min-height: 100vh;
background: rgb(244, 246, 248);
}
.content {
padding: 20rpx;
}
.card {
background: #fff;
border-radius: 20rpx;
padding: 22rpx;
margin-bottom: 18rpx;
box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
}
.card-title {
font-size: 30rpx;
font-weight: 700;
color: #1f2d3d;
}
.row {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 10rpx 0;
border-bottom: 1rpx solid #f1f3f5;
}
.row:last-child {
border-bottom: none;
}
.label {
width: 160rpx;
font-size: 26rpx;
color: #667085;
}
.value {
flex: 1;
text-align: right;
font-size: 26rpx;
color: #101828;
}
.status-tag {
padding: 6rpx 14rpx;
border-radius: 999rpx;
background: rgba(48, 116, 247, 0.12);
}
.status-text {
font-size: 24rpx;
color: rgb(48, 116, 247);
}
.empty {
padding: 24rpx 0;
text-align: center;
color: #98a2b3;
font-size: 26rpx;
}
.item {
padding: 16rpx 0;
border-top: 1rpx dashed #eef2f6;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
}
.item-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.item-right {
display: flex;
align-items: baseline;
gap: 10rpx;
flex-shrink: 0;
}
.qty-label {
font-size: 22rpx;
color: #667085;
}
.qty-val {
font-size: 30rpx;
font-weight: 700;
color: #101828;
}
.item:first-child {
border-top: none;
padding-top: 0;
}
.item-name {
font-size: 28rpx;
font-weight: 700;
color: #101828;
}
.item-meta {
font-size: 24rpx;
color: #98a2b3;
}
/* 借用物品明细样式 */
.grid-cell {
// background: #fafbff;
border-radius: 10rpx;
padding: 14rpx 10rpx;
text-align: center;
// border: 1rpx solid #f0f0f0;
margin-left: 10rpx;
}
.g-label {
display: block;
font-size: 22rpx;
color: #888;
margin-bottom: 6rpx;
}
.g-val {
display: block;
font-size: 30rpx;
font-weight: 700;
color: #222;
}
</style>
+348
View File
@@ -0,0 +1,348 @@
<template>
<view class="page">
<uni-nav-bar
leftText=" "
:fixed="true"
leftIcon="back"
background-color="rgb(48, 116, 247)"
color="#fff"
:statusBar="true"
title="归还审核"
@clickLeft="onBack"
/>
<view class="content">
<!-- 基本信息 -->
<view class="card">
<view class="card-head">
<text class="card-title">归还信息</text>
<view class="status-tag" :class="'s' + (detail.status || 0)">
<text class="status-text">{{ statusText }}</text>
</view>
</view>
<view class="row"><text class="label">申请人</text><text class="value">{{ detail.apply_user_name || '-' }}</text></view>
<view class="row"><text class="label">归还时间</text><text class="value">{{ detail.return_at || '-' }}</text></view>
<view class="row" v-if="detail.apply_remark !== undefined">
<text class="label">归还备注</text>
<text class="value">{{ detail.apply_remark || '-' }}</text>
</view>
</view>
<!-- 物品明细 -->
<view class="card">
<view class="card-head">
<text class="card-title">归还物品</text>
</view>
<view v-if="approveItems.length === 0" class="empty">暂无物品</view>
<view v-for="(it, idx) in approveItems" :key="it.item_id" class="item">
<view class="item-left">
<text class="item-name">{{ it.item_name }}</text>
<text class="item-meta" v-if="it.spec_model">规格:{{ it.spec_model }}</text>
</view>
<view class="item-right">
<text class="qty-label">归还数量</text>
<text class="qty-val">{{ detail.return_qty || 0 }}</text>
</view>
</view>
</view>
<!-- 审核意见 -->
<view class="card">
<view class="card-head">
<text class="card-title">审核意见</text>
</view>
<textarea
class="textarea"
v-model="auditRemark"
placeholder="请输入审核备注(可选)"
:auto-height="true"
maxlength="500"
/>
</view>
<view style="height: 120rpx;"></view>
</view>
<!-- 底部操作 -->
<view class="footer">
<button class="btn btn-ghost" @click="onReject">驳回</button>
<button class="btn btn-primary" @click="onApprove">同意</button>
</view>
</view>
</template>
<script>
import { request, showToast } from '@/api/apiT.js'
// 归还审核提交接口
const AUDIT_API = 'mobile/inv/requisition/return/confirm'
export default {
data() {
return {
id: '',
detail: {},
approveItems: [],
auditRemark: ''
}
},
computed: {
statusText() {
const s = Number(this.detail.status || 0)
if (s === 0) return '待审核'
if (s === 1) return '已通过'
if (s === 2) return '已驳回'
return '处理中'
}
},
onLoad(option) {
this.id = option.id || ''
if (!this.id) {
showToast({ title: '缺少id参数' })
return
}
this.getDetail()
},
methods: {
onBack() {
uni.navigateBack()
},
getDetail() {
request({
url: 'mobile/inv/requisition/return/show',
method: 'GET',
data: { id: this.id }
}).then((res) => {
this.detail = (res.data && res.data.data) || {}
this.initApproveItems()
})
},
initApproveItems() {
const list = Array.isArray(this.detail.item) ? this.detail.item : []
this.approveItems = list.map((it) => {
return {
item_id: it.id,
item_name: it.item_name || '',
spec_model: it.spec_model || '',
unit: it.unit || ''
}
})
},
buildPayload(action) {
return {
requisition_item_return_id: this.id,
status: action, // '1' 同意 | '2' 驳回
handle_remark: this.auditRemark || ''
}
},
doSubmit(action) {
if (!this.approveItems.length) {
showToast({ title: '没有可审核的物品' })
return
}
const payload = this.buildPayload(action)
request({
url: AUDIT_API,
method: 'POST',
data: payload
}).then((res) => {
const msg = (res.data && (res.data.message || res.data.msg)) || '操作完成'
showToast({ title: msg })
if (res.data && Number(res.data.code) === 200) {
setTimeout(() => {
// 回到上一页并传递刷新参数
uni.navigateBack({
delta: 1,
success: function() {
// 触发上一页的刷新
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
if (prevPage && prevPage.$refs.paging) {
prevPage.$refs.paging.reload()
}
}
})
}, 600)
}
})
},
onApprove() {
uni.showModal({
title: '确认通过',
content: '确认同意该归还申请?',
success: (r) => {
if (r.confirm) this.doSubmit('1')
}
})
},
onReject() {
uni.showModal({
title: '确认驳回',
content: '确认驳回该归还申请?',
success: (r) => {
if (r.confirm) this.doSubmit('2')
}
})
}
}
}
</script>
<style lang="scss">
.page {
min-height: 100vh;
background: rgb(244, 246, 248);
}
.content {
padding: 20rpx;
}
.card {
background: #fff;
border-radius: 20rpx;
padding: 22rpx;
margin-bottom: 18rpx;
box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
}
.card-title {
font-size: 30rpx;
font-weight: 700;
color: #1f2d3d;
}
.card-sub {
font-size: 24rpx;
color: #98a2b3;
}
.row {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 10rpx 0;
border-bottom: 1rpx solid #f1f3f5;
}
.row:last-child {
border-bottom: none;
}
.label {
width: 160rpx;
font-size: 26rpx;
color: #667085;
}
.value {
flex: 1;
text-align: right;
font-size: 26rpx;
color: #101828;
}
.status-tag {
padding: 6rpx 14rpx;
border-radius: 999rpx;
background: rgba(48, 116, 247, 0.12);
}
.status-text {
font-size: 24rpx;
color: rgb(48, 116, 247);
}
.empty {
padding: 24rpx 0;
text-align: center;
color: #98a2b3;
font-size: 26rpx;
}
.item {
padding: 16rpx 0;
border-top: 1rpx dashed #eef2f6;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
}
.item-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.item-right {
display: flex;
align-items: baseline;
gap: 10rpx;
flex-shrink: 0;
}
.qty-label {
font-size: 22rpx;
color: #667085;
}
.qty-val {
font-size: 30rpx;
font-weight: 700;
color: #101828;
}
.item:first-child {
border-top: none;
padding-top: 0;
}
.item-top {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 12rpx;
}
.item-name {
font-size: 28rpx;
font-weight: 700;
color: #101828;
}
.item-meta {
font-size: 24rpx;
color: #98a2b3;
}
.textarea {
width: 100%;
min-height: 140rpx;
font-size: 26rpx;
line-height: 1.6;
background: #f8fafc;
border-radius: 16rpx;
padding: 16rpx;
box-sizing: border-box;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 16rpx 20rpx calc(16rpx + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.98);
border-top: 1rpx solid #eef2f6;
display: flex;
gap: 16rpx;
}
.btn {
flex: 1;
height: 84rpx;
line-height: 84rpx;
border-radius: 18rpx;
font-size: 30rpx;
font-weight: 700;
}
.btn-ghost {
background: #fff;
border: 2rpx solid #d0d5dd;
color: #344054;
}
.btn-primary {
background: rgb(48, 116, 247);
color: #fff;
}
</style>
+294 -219
View File
@@ -1,103 +1,108 @@
<template> <template>
<view class="home-page"> <view class="home-page">
<uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false" @clickLeft="leftClick" color="#fff" backgroundColor="rgb(79 137 247)" :statusBar="true" title="借用申请"></uni-nav-bar> <uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false" color="#fff" backgroundColor="rgb(79 137 247)" :statusBar="true" title="借用申请" @clickLeft="leftClick"></uni-nav-bar>
<view class="content-wrapper"> <view class="content-wrapper">
<!-- 申请人信息卡片 --> <!-- 申请人信息卡片 -->
<view class="form-card"> <view class="form-card">
<view class="form-item form-item-row"> <view class="form-item form-item-row">
<text class="form-label">申请人:</text> <text class="form-label">申请人:</text>
<text class="form-value">{{ formData.applicant || '犇犇' }}</text> <text class="form-value">{{ userinfo.name || '犇犇' }}</text>
</view> </view>
<view class="form-item form-item-row"> <view class="form-item form-item-row">
<text class="form-label">公司名称:</text> <text class="form-label">公司名称:</text>
<text class="form-value">{{ formData.companyName || '合塑' }}</text> <text class="form-value">{{ userinfo.corp_name || '合塑' }}</text>
</view> </view>
</view> </view>
<!-- 借用详情卡片 -->
<view class="form-card4">
<!-- 借用时间 --> <!-- 借用时间 -->
<view class="form-card4">
<view class="form-item form-item-row"> <view class="form-item form-item-row">
<text class="form-label required">借用时间</text> <text class="form-label required">借用时间</text>
<view class="form-input-container"> <view class="form-input-container">
<uni-datetime-picker <uni-datetime-picker
ref="borrowTimePicker" ref="borrowTimePicker"
type="datetime" type="date"
v-model="formData.borrowTime" v-model="formData.use_start_date"
placeholder="请选择时间" placeholder="请选择时间"
:border="false" :border="false"
:clear-icon="false" :clear-icon="false"
@change="onBorrowTimeChange" @change="onBorrowTimeChange"
> >
<view class="custom-datetime-input"> <view class="custom-datetime-input">
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.borrowTime }"> <text class="custom-datetime-text" :class="{ 'placeholder': !formData.use_start_date }">
{{ formData.borrowTime || '请选择时间' }} {{ formData.use_start_date || '请选择时间' }}
</text> </text>
<uni-icons type="calendar" size="18" color="#999"></uni-icons> <uni-icons type="calendar" size="16" color="#999"></uni-icons>
</view> </view>
</uni-datetime-picker> </uni-datetime-picker>
</view> </view>
</view> </view>
</view> </view>
<view class="form-card4">
<!-- 计划归还时间 --> <!-- 计划归还时间 -->
<view class="form-card4">
<view class="form-item form-item-row"> <view class="form-item form-item-row">
<text class="form-label required">计划归还时间</text> <text class="form-label required">计划归还时间</text>
<view class="form-input-container"> <view class="form-input-container">
<uni-datetime-picker <uni-datetime-picker
ref="returnTimePicker" ref="returnTimePicker"
type="datetime" type="date"
v-model="formData.returnTime" v-model="formData.use_end_date"
placeholder="请选择时间" placeholder="请选择时间"
:border="false" :border="false"
:clear-icon="false" :clear-icon="false"
@change="onReturnTimeChange" @change="onReturnTimeChange"
> >
<view class="custom-datetime-input"> <view class="custom-datetime-input">
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.returnTime }"> <text class="custom-datetime-text" :class="{ 'placeholder': !formData.use_end_date }">
{{ formData.returnTime || '请选择时间' }} {{ formData.use_end_date || '请选择时间' }}
</text> </text>
<uni-icons type="calendar" size="18" color="#999"></uni-icons> <uni-icons type="calendar" size="16" color="#999"></uni-icons>
</view> </view>
</uni-datetime-picker> </uni-datetime-picker>
</view> </view>
</view> </view>
</view> </view>
<view class="form-card4"> <!-- ✅ 物品(可添加多条) -->
<!-- 物品名称 --> <view class="goods-card">
<view class="form-item form-item-row"> <view class="goods-head">
<text class="form-label required">物品名称</text> <text class="form-label required">物品</text>
<view class="form-input-container"> <button class="goods-add-btn" size="mini" @click="addItem">+ 添加</button>
<uni-data-select </view>
v-model="formData.itemName"
:localdata="itemNameOptions" <view class="goods-module" v-for="(it, idx) in formData.items" :key="idx">
placeholder="请选择" <view class="goods-module-top">
:clear="false" <text class="goods-module-title">物品 {{ idx + 1 }}</text>
></uni-data-select> <uni-icons
v-if="formData.items.length > 1"
type="trash"
size="18"
color="#ff4d4f"
@click="removeItem(idx)"
></uni-icons>
</view>
<view class="goods-module-body">
<view class="goods-name">
<picker mode="selector" :range="itemNameOptions" range-key="item_name" @change="(e) => onItemNameChange(e, idx)">
<view class="category-content">
<text class="category-text">{{it.item_name_snap || '请选择物品'}}</text>
</view>
</picker>
</view>
<view class="goods-qty">
<uni-number-box v-model="it.request_qty" :min="1" :max="999"></uni-number-box>
</view> </view>
</view> </view>
</view> </view>
<view class="form-card4">
<!-- 物品所属公司 -->
<view class="form-item form-item-row">
<text class="form-label required">物品所属公司</text>
<view class="form-input-container">
<uni-data-select
v-model="formData.itemCompany"
:localdata="itemCompanyOptions"
placeholder="请选择"
:clear="false"
></uni-data-select>
</view>
</view>
</view> </view>
<view class="form-card"> <view class="form-card">
<!-- 借用事由 --> <!-- 借用事由 -->
<view class="form-item"> <view class="form-item">
<text class="form-label required">借用事由</text> <text class="form-label required form-label1">借用事由</text>
<uni-easyinput <uni-easyinput
v-model="formData.borrowReason" v-model="formData.borrow_reason"
type="textarea" type="textarea"
:autoHeight="true" :autoHeight="true"
placeholder="请填写借用事由" placeholder="请填写借用事由"
@@ -105,12 +110,13 @@
></uni-easyinput> ></uni-easyinput>
</view> </view>
</view> </view>
<!-- 备注卡片 --> <!-- 备注卡片 -->
<view class="form-card " style="margin-bottom: 8rpx;"> <view class="form-card " style="margin-bottom: 8rpx;">
<view class="form-item"> <view class="form-item">
<text class="form-label">备注</text> <text class="form-label">备注</text>
<uni-easyinput <uni-easyinput
v-model="formData.remarks" v-model="formData.remark"
type="textarea" type="textarea"
:autoHeight="true" :autoHeight="true"
placeholder="请填写备注" placeholder="请填写备注"
@@ -118,116 +124,204 @@
></uni-easyinput> ></uni-easyinput>
</view> </view>
</view> </view>
<!-- 附件卡片 -->
<!-- 附件上传 -->
<view class="form-card"> <view class="form-card">
<view class="form-item"> <view class="form-item">
<text class="form-label form-label1">附件</text> <text class="form-label">附件</text>
<uni-file-picker <view class="media-upload-wrapper">
v-model="formData.attachments" <uni-file-picker ref="mediaPicker" limit="20" fileMediatype="image" @select="selectMedia" @delete="delfn" >
file-mediatype="image" <view class="upload-icon-wrapper">
mode="grid"
:limit="9"
:auto-upload="false"
@select="onFileSelect"
>
<image src="/static/image/upload.png" mode="" class="addimg"></image> <image src="/static/image/upload.png" mode="" class="addimg"></image>
</view>
</uni-file-picker> </uni-file-picker>
</view> </view>
</view> </view>
</view>
<!-- 提交按钮 --> <!-- 提交按钮 -->
<view class="submit-btn-wrapper"> <view class="submit-container">
<button class="submit-btn" @click="handleSubmit">提交</button> <button class="submit-btn" @click="handleSubmit">提交申请</button>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { request,showToast } from '@/api/apiT.js'
export default { export default {
data() { data() {
return { return {
userinfo: {},
maxMedia:20,
formData: { formData: {
applicant: '犇犇', use_start_date: '',
companyName: '合塑', use_end_date: '',
borrowTime: '', items: [{ item_name_snap: '',item_id:'',request_qty:1}],
returnTime: '', borrow_reason: '',
itemName: '', remark: '',
itemCompany: '', attachment: []
borrowReason: '',
remarks: '',
attachments: []
}, },
itemNameOptions: [ itemNameOptions: [],
{ text: '物品1', value: 'item1' },
{ text: '物品2', value: 'item2' },
{ text: '物品3', value: 'item3' }
],
itemCompanyOptions: [
{ text: '公司A', value: 'companyA' },
{ text: '公司B', value: 'companyB' },
{ text: '公司C', value: 'companyC' }
]
} }
}, },
onLoad() {
this.getinfo()
this.getItemNameOptions()
},
methods: { methods: {
leftClick(){ leftClick(){
uni.navigateBack({}) uni.navigateBack({})
}, },
getinfo(){
request({
url:'common/user/info',
method:'get',
}).then(res => {
this.userinfo=res.data.data.user
})
},
//物品下拉
getItemNameOptions() {
request({
url:'mobile/inv/item/preset',
method:'get',
}).then(res => {
this.itemNameOptions = res.data.data
this.itemNameOptions.forEach(item => {
item.item_name = item.item_name + '(' + item.company_name + ')'
})
console.log(this.itemNameOptions)
})
},
onItemNameChange(e, itemIndex) {
console.log(e, itemIndex)
const index = e.detail.value; // picker 返回的 index
const selectItem = this.itemNameOptions[index]; // 直接取整条数据
if (this.formData.items[itemIndex]) {
this.formData.items[itemIndex].item_name_snap = selectItem.item_name
this.formData.items[itemIndex].item_id = selectItem.id
}
},
onBorrowTimeChange(e) { onBorrowTimeChange(e) {
// uni-datetime-picker返回的已经是格式化后的字符串 this.formData.use_start_date = e
this.formData.borrowTime = e
}, },
onReturnTimeChange(e) { onReturnTimeChange(e) {
// uni-datetime-picker返回的已经是格式化后的字符串 this.formData.use_end_date = e
this.formData.returnTime = e
}, },
onFileSelect(e) { onFileSelect(e) {
console.log('文件选择:', e) console.log('文件选择:', e)
}, },
addItem() {
// 追加一条物品
this.formData.items = Array.isArray(this.formData.items) ? this.formData.items : []
this.formData.items.push({
item_name_snap: '',
item_id: '',
request_qty: 1
})
},
removeItem(index) {
// 删除指定物品(至少保留 1 条)
if (!Array.isArray(this.formData.items)) return
if (this.formData.items.length <= 1) return
this.formData.items.splice(index, 1)
},
uploadfn(imgUrl){
return new Promise((resolve, reject) => {
uni.uploadFile({
url: 'https://fdesk.hnxinyouhe.com/upload?scene=itemsimg',
filePath: imgUrl,
name: 'file',
header:{'Fdesk-Corp-Abbr':uni.getStorageSync('corp_abbr'),'Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),'Fdesk-Language': uni.getStorageSync('i18locale')?uni.getStorageSync('i18locale'):'zh','Fdesk-Login-Type': 'feishu','Fdesk-System-Code':'fdesk'},
success: (uploadFileRes) => {
const res = JSON.parse(uploadFileRes.data || '{}')
if(res && res.data && res.data.file_name){
resolve(res.data)
}else{
reject('上传失败')
}
},
fail: (err) => reject(err)
});
})
},
selectMedia(e){
const allowCount = this.maxMedia - this.formData.attachment.length
const tempFilePaths = e.tempFilePaths || (e.tempFiles || []).map(item => item.path || item.url)
const paths = tempFilePaths.slice(0, allowCount)
if(paths.length === 0){
return
}
Promise.all(paths.map(p => this.uploadfn(p))).then(urls => {
urls.forEach(url => {
const obj={}
obj.original_name =url.original_name
obj.file_path =url.file_name
this.formData.attachment.push(obj)
})
}).catch(() => {
uni.showToast({
title:'图片上传失败,请重试',
icon:'none'
})
})
},
delfn(e){
this.formData.attachment.splice(e.index, 1)
},
handleSubmit() { handleSubmit() {
// 表单验证 // 表单验证
if (!this.formData.borrowTime) { if (!this.formData.use_start_date) {
uni.showToast({ uni.showToast({ title: '请选择借用时间', icon: 'none' })
title: '请选择借用时间',
icon: 'none'
})
return return
} }
if (!this.formData.returnTime) { if (!this.formData.use_end_date) {
uni.showToast({ uni.showToast({ title: '请选择计划归还时间', icon: 'none' })
title: '请选择计划归还时间',
icon: 'none'
})
return
}
if (!this.formData.itemName) {
uni.showToast({
title: '请选择物品名称',
icon: 'none'
})
return
}
if (!this.formData.itemCompany) {
uni.showToast({
title: '请选择物品所属公司',
icon: 'none'
})
return
}
if (!this.formData.borrowReason) {
uni.showToast({
title: '请填写借用事由',
icon: 'none'
})
return return
} }
// 物品列表校验(至少 1 条,且每条需选择名称 + 数量)
if (!Array.isArray(this.formData.items) || this.formData.items.length === 0) {
uni.showToast({ title: '请添加物品', icon: 'none' })
return
}
for (let i = 0; i < this.formData.items.length; i++) {
const it = this.formData.items[i] || {}
if (!it.item_name_snap) {
uni.showToast({ title: `请选择第${i + 1}个物品名称`, icon: 'none' })
return
}
const request_qty = Number(it.request_qty)
if (!request_qty || request_qty <= 0) {
uni.showToast({ title: `请填写第${i + 1}个物品数量`, icon: 'none' })
return
}
}
if (!this.formData.borrow_reason) {
uni.showToast({ title: '请填写借用事由', icon: 'none' })
return
}
// 提交表单 // 提交表单
console.log('提交表单:', this.formData) console.log('提交表单:', this.formData)
request({
url:'mobile/inv/requisition/apply',
method:'post',
data:this.formData
}).then(res => {
uni.showToast({ uni.showToast({
title: '提交成功', title: res.data.message,
icon: 'success' icon: 'none'
});
if(res.data.code==200){
setTimeout(() => {
uni.reLaunch({
url: '/pages/index/index',// 替换为你要跳转的页面路径
});
}, 1000);
}
}) })
// 这里可以调用API提交数据 // 这里可以调用API提交数据
} }
@@ -246,16 +340,21 @@
.content-wrapper{ .content-wrapper{
margin-top: 20rpx; margin-top: 20rpx;
} }
.media-upload-wrapper{
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.addimg{ .addimg{
width: 50px; width: 50px;
height:50px; height:50px;
} }
.form-card { .form-card {
background: #fff; background: #fff;
border-radius: 12rpx; border-radius: 16rpx;
padding:20rpx 34rpx; padding: 24rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
} }
.form-card4 { .form-card4 {
background: #fff; background: #fff;
@@ -266,152 +365,130 @@
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
} }
.form-item {
margin-bottom: 32rpx;
&:last-child { /* 物品(可添加多条) */
margin-bottom: 0; .goods-card {
background: #fff;
border-radius: 6px;
padding: 12px 17px;
margin-bottom: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
} }
.goods-head {
&.form-item-row {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: nowrap; justify-content: space-between;
width: 100%;
margin-bottom: 10px;
} }
.goods-add-btn {
background: #3074F7;
color: #fff;
border-radius: 14px;
font-size: 24rpx;
margin-left: auto;
margin-right: inherit;
}
.goods-module {
background: #F7F8FA;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
}
.goods-module-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.goods-module-title {
font-size: 26rpx;
color: #333;
}
.goods-module-body {
display: flex;
align-items: center;
}
.goods-name {
flex: 1;
min-width: 0;
}
.goods-qty {
width: 220rpx;
display: flex;
justify-content: flex-end;
margin-left: 16rpx;
}
::v-deep .goods-qty .uni-numbox {
scale: 0.95;
transform-origin: right center;
} }
.form-item {
margin-bottom: 32rpx;
&:last-child { margin-bottom: 0; }
}
.form-item-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-label1{
margin-bottom: 16rpx;
}
.form-item-row .form-label {
margin-bottom: 0;
margin-right: 24rpx;
}
.form-input-container {
flex: 1;
min-width: 0;
}
.form-label { .form-label {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
// margin-bottom: 16rpx;
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
min-width: 160rpx; min-width: 160rpx;
&.required::before { &.required::before {
content: '*'; content: '*';
color: #ff0000; color: #ff0000;
margin-right: 4rpx; margin-right: 4rpx;
} }
} }
.form-label1{
margin-bottom: 16rpx;
}
.form-item-row .form-label {
margin-bottom: 0;
margin-right: 24rpx;
}
.form-input-container {
flex: 1;
min-width: 0;
}
.form-value { .form-value {
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #666;
flex: 1; flex: 1;
text-align: right;
} }
.category-text{
.form-input-wrapper { font-size: 28rpx;
width: 100%; color: #333;
} }
.form-input-container .form-input-wrapper {
width: 100%;
}
.custom-datetime-input { .custom-datetime-input {
border-radius: 4px; display: flex;
box-sizing: border-box; align-items: center;
justify-content: space-between;
width: 100%; width: 100%;
text-align: right;
} }
.custom-datetime-text { .custom-datetime-text {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
flex: 1;
&.placeholder { &.placeholder {
color: #999; color: #999;
} }
} }
.submit-container {
// uni-datetime-picker 样式覆盖
::v-deep .uni-date-editor {
width: 100%;
}
::v-deep .uni-date-editor--x {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
::v-deep .uni-date-x {
width: 100%;
padding: 0 !important;
}
::v-deep .uni-date__x-input {
display: none;
}
::v-deep .icon-calendar {
display: none;
}
.submit-btn-wrapper {
margin-top: 40rpx; margin-top: 40rpx;
padding-bottom: 40rpx; padding-bottom: 40rpx;
} }
.submit-btn { .submit-btn {
width: 70%;
height: 88rpx;
background: #3074F7; background: #3074F7;
color: #fff; color: #fff;
border-radius: 44rpx;
font-size: 32rpx; font-size: 32rpx;
border-radius: 12rpx;
height: 88rpx;
line-height: 88rpx; line-height: 88rpx;
border: none;
&::after {
border: none;
}
}
// uni-data-select 样式调整
::v-deep .uni-stat__select {
width: 100%;
}
::v-deep .uni-select {
width: 100%;
border: none;
text-align: right;
}
::v-deep .uni-select__input-text {
font-size: 28rpx;
color: #333;
}
::v-deep .uni-select__input-placeholder {
color: #999;
}
// uni-easyinput 样式调整
::v-deep .uni-easyinput {
width: 100%;
}
::v-deep .uni-easyinput__content {
border: none;
min-height: 120rpx;
} }
::v-deep .uni-easyinput__content-textarea { ::v-deep .uni-easyinput__content-textarea {
@@ -420,8 +497,6 @@
min-height: 120rpx; min-height: 120rpx;
padding-left: 0px; padding-left: 0px;
} }
// uni-file-picker 样式调整
::v-deep .uni-file-picker { ::v-deep .uni-file-picker {
width: 100%; width: 100%;
} }
+392 -121
View File
@@ -1,71 +1,122 @@
<template> <template>
<view class="home-page"> <view class="home-page">
<uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false" @clickLeft="leftClick" color="#fff" backgroundColor="rgb(79 137 247)" :statusBar="true" title="详情"></uni-nav-bar> <uni-nav-bar
leftText=" "
:fixed="true"
leftIcon="back"
:border="false"
@clickLeft="leftClick"
color="#fff"
backgroundColor="rgb(79 137 247)"
:statusBar="true"
title="详情"
></uni-nav-bar>
<view class="content-wrapper"> <view class="content-wrapper">
<view class="detail-card"> <view class="detail-card">
<!-- 状态丝带 --> <!-- 状态丝带 -->
<view class="status-ribbon" :class="statusClass"> <view class="status-ribbon" :class="statusMeta.cls">
<text class="ribbon-text">{{ statusText }}</text> <text class="ribbon-text">{{ statusMeta.text }}</text>
</view> </view>
<!-- 标题 --> <!-- 头部信息 -->
<view class="card-header"> <view class="card-header">
<text class="item-title">{{ detail.itemName }}</text> <view class="header-left">
</view> <text class="order-no">{{ detail.order_no || ('#' + id) }}</text>
<text class="sub-line">
<!-- 申请信息 --> 申请人:{{ detail.applicant_name || '—' }}
<view class="section"> <text class="dot">·</text>
<text class="section-title">申请信息</text> 提交:{{ detail.created_at || '—' }}
<view class="info-row"> </text>
<text class="label">申请人</text>
<text class="value">{{ detail.applicant }}</text>
</view>
<view class="info-row">
<text class="label">公司名称</text>
<text class="value">{{ detail.companyName }}</text>
</view>
<view class="info-row">
<text class="label">物品所属公司</text>
<text class="value">{{ detail.itemCompany }}</text>
</view>
<view class="info-row">
<text class="label">借用时间</text>
<text class="value">{{ detail.borrowTime }}</text>
</view>
<view class="info-row">
<text class="label">计划归还时间</text>
<text class="value">{{ detail.returnTime }}</text>
</view>
<view class="info-row">
<text class="label">借用事由</text>
<text class="value">{{ detail.borrowReason }}</text>
</view>
<view class="info-row" v-if="detail.remarks">
<text class="label">备注</text>
<text class="value">{{ detail.remarks }}</text>
</view> </view>
</view> </view>
<!-- 复核信息 --> <!-- 使用时间 -->
<view class="section"> <view class="section">
<text class="section-title">复核信息</text> <text class="section-title">借用时间</text>
<view class="info-row"> <view class="kv">
<text class="label">复核人</text> <text class="kv-label">开始</text>
<text class="value">{{ detail.reviewer || '—' }}</text> <text class="kv-value">{{ detail.use_start_date || '—' }}</text>
</view> </view>
<view class="info-row"> <view class="kv">
<text class="label">复核时间</text> <text class="kv-label">结束</text>
<text class="value">{{ detail.reviewTime || '—' }}</text> <text class="kv-value">{{ detail.use_end_date || '—' }}</text>
</view> </view>
<view class="info-row">
<text class="label">复核结果</text>
<text class="value">{{ detail.reviewResult || '—' }}</text>
</view> </view>
<view class="info-row" v-if="detail.reviewRemark">
<text class="label">复核说明</text> <!-- 物品列表 -->
<text class="value">{{ detail.reviewRemark }}</text> <view class="section">
<view class="section-title-row">
<text class="section-title">物品明细</text>
<text class="section-sub" v-if="Array.isArray(detail.item)">
共 {{ detail.item.length }} 条
</text>
</view> </view>
<view v-if="Array.isArray(detail.item) && detail.item.length" class="items">
<view class="item-card" v-for="(it, idx) in detail.item" :key="it.id || idx">
<view class="item-top">
<text class="item-name">{{ it.item_name_snap || '—' }}</text>
<text class="item-tag" v-if="String(it.is_consumable_snap) === '1'">耗材</text>
</view>
<view class="item-grid">
<view class="grid-cell">
<text class="g-label">申请</text>
<text class="g-val">{{ safeNum(it.request_qty) }}</text>
</view>
<view class="grid-cell">
<text class="g-label">归还</text>
<text class="g-val">{{ safeNum(it.returned_qty) }}</text>
</view>
</view>
<view class="item-remark" v-if="it.remark">
<text class="remark-label">备注</text>
<text class="remark-value">{{ it.remark }}</text>
</view>
</view>
</view>
<view v-else class="empty-hint">暂无物品明细</view>
</view>
<!-- 借用事由/备注 -->
<view class="section">
<text class="section-title">借用说明</text>
<view class="text-block">
<text class="text-label">借用事由</text>
<text class="text-value">{{ detail.borrow_reason || '—' }}</text>
</view>
<view class="text-block" v-if="detail.remark">
<text class="text-label">备注</text>
<text class="text-value">{{ detail.remark }}</text>
</view>
</view>
<!-- 附件 -->
<view class="section">
<view class="section-title-row">
<text class="section-title">附件</text>
<text class="section-sub" v-if="Array.isArray(detail.attachment)">
{{ detail.attachment.length || 0 }} 张
</text>
</view>
<view v-if="Array.isArray(detail.attachment) && detail.attachment.length" class="attach-grid">
<view
class="attach-item"
v-for="(a, index) in detail.attachment"
:key="a.id || index"
@click="previewAttachment(index)"
>
<image class="attach-img" :src="a.file_path_pull" mode="aspectFill"></image>
</view>
</view>
<view v-else class="empty-hint">暂无附件</view>
</view>
<!-- 底部操作(可选:与列表页一致) -->
<view class="bottom-actions" v-if="showBottomAction">
<button class="primary-btn" @click="goAction">{{ bottomActionText }}</button>
</view> </view>
</view> </view>
</view> </view>
@@ -73,121 +124,343 @@
</template> </template>
<script> <script>
import { request, showToast } from '@/api/apiT.js'
export default { export default {
data() { data() {
return { return {
id: '', id: '',
detail: { detail: {}
status: 'returned', // returned | notReturned | pendingReview
itemName: '公章',
applicant: '刘宇',
companyName: '合塑',
itemCompany: '合塑',
borrowTime: '2024-11-06 09:41:18',
returnTime: '2024-11-10 18:00:00',
borrowReason: '合同签署使用',
remarks: '请保持物品完整',
reviewer: '张伟',
reviewTime: '2024-11-07 09:00:00',
reviewResult: '已复核',
reviewRemark: '流程符合规定'
}
} }
}, },
computed: { computed: {
statusText() { // 状态映射
const map = { statusMeta() {
returned: '已归还', const status = String(this.detail.status)
notReturned: '未归还', const isReturned = String(this.detail.is_returned) === '1'
pendingReview: '待复核' const statusMap = {
'10': { text: '待审核', cls: 'ribbon-pendingReview' },
'11': { text: '审批中', cls: 'ribbon-pendingReview' },
'12': { text: '待归还', cls: 'ribbon-notReturned' },
'13': { text: '借用拒绝', cls: 'ribbon-notReturned' },
'14': { text: '归还待审核', cls: 'ribbon-pendingReview' },
'15': { text: '归还审批中', cls: 'ribbon-pendingReview' },
'16': { text: '部分归还', cls: 'ribbon-notReturned' },
'17': { text: '已归还', cls: 'ribbon-returned' },
'18': { text: '归还拒绝', cls: 'ribbon-notReturned' },
'19': { text: '损耗品', cls: 'ribbon-notReturned' }
} }
return map[this.detail.status] || '' if (isReturned) return { text: '已归还', cls: 'ribbon-returned' }
return statusMap[status] || { text: '未知状态', cls: 'ribbon-notReturned' }
}, },
statusClass() { showBottomAction() {
return `ribbon-${this.detail.status}` // 仅在“待归还”和“部分归还”时展示按钮
const status = String(this.detail.status)
const isReturned = String(this.detail.is_returned) === '1'
if (isReturned) return false
return ['12', '16'].includes(status)
},
bottomActionText() {
// 待归还和部分归还状态显示“去归还”按钮
return '去归还'
} }
}, },
onLoad(options) { onLoad(options) {
this.id = options.id; this.id = options.id || ''
this.getDetails()
}, },
methods: { methods: {
leftClick(){ leftClick() {
uni.navigateBack({}) uni.navigateBack({})
},
getDetails() {
if (!this.id) return
request({
url: 'mobile/inv/requisition/show',
method: 'get',
data: { id: this.id }
}).then((res) => {
if (res?.data?.code !== 200) {
showToast({ title: res?.data?.msg || '获取详情失败' })
return
}
const d = res.data.data || {}
// 兜底,避免 v-for 报错
d.item = Array.isArray(d.item) ? d.item : []
d.attachment = Array.isArray(d.attachment) ? d.attachment : []
this.detail = d
})
},
safeNum(v) {
const n = Number(v)
return Number.isFinite(n) ? n : 0
},
previewAttachment(index) {
const urls = (this.detail.attachment || [])
.map((a) => a.file_path_pull)
.filter(Boolean)
if (!urls.length) return
uni.previewImage({
current: urls[index] || urls[0],
urls
})
},
goAction() {
// 待归还和部分归还状态点击按钮导航到归还页面
uni.navigateTo({
url: '/pages/borrow/return?id=' + this.id
})
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.home-page{ .home-page {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(180.05deg, #3074F7 0.04%, #F4F6F8 34.07%); background: linear-gradient(180.05deg, #3074f7 0.04%, #f4f6f8 34.07%);
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 120rpx; padding: 0 28rpx 120rpx;
padding: 0px 28rpx;
} }
.content-wrapper{
.content-wrapper {
margin-top: 20rpx; margin-top: 20rpx;
} }
.detail-card{ .detail-card {
position: relative; position: relative;
background: #fff; background: #fff;
border-radius: 12rpx; border-radius: 12rpx;
padding: 32rpx; padding: 28rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
overflow: hidden; overflow: hidden;
} }
.card-header{ .card-header {
margin-bottom: 16rpx; display: flex;
align-items: flex-start;
justify-content: space-between;
padding-top: 10rpx;
margin-bottom: 18rpx;
} }
.item-title{ .header-left {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.order-no {
font-size: 32rpx; font-size: 32rpx;
font-weight: 700;
color: #222;
}
.sub-line {
font-size: 24rpx;
color: #8a8a8a;
}
.dot {
padding: 0 10rpx;
color: #c0c0c0;
}
.section {
margin-top: 22rpx;
padding-top: 10rpx;
border-top: 1rpx solid #f2f2f2;
}
.section-title-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10rpx;
}
.section-title {
font-size: 28rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} margin-bottom: 10rpx;
.section{
margin-top: 24rpx;
padding-top: 12rpx;
}
.section-title{
font-size: 28rpx;
font-weight: 500;
color: #444;
margin-bottom: 12rpx;
display: block; display: block;
} }
.info-row{ .section-sub {
font-size: 24rpx;
color: #9a9a9a;
}
.kv {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: center;
margin-bottom: 12rpx; padding: 8rpx 0;
} }
.label{ .kv-label {
font-size: 26rpx;
color: #666; color: #666;
font-size: 26rpx;
} }
.value{ .kv-value {
color: #333;
font-size: 26rpx; font-size: 26rpx;
color: #333;
text-align: right; text-align: right;
max-width: 66%; max-width: 66%;
} }
.status-ribbon{ .items {
display: flex;
flex-direction: column;
gap: 14rpx;
margin-top: 8rpx;
}
.item-card {
background: #fafbff;
border: 1rpx solid #eef2ff;
border-radius: 12rpx;
padding: 18rpx;
}
.item-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12rpx;
margin-bottom: 14rpx;
}
.item-name {
font-size: 28rpx;
font-weight: 600;
color: #2b2b2b;
flex: 1;
}
.item-tag {
font-size: 22rpx;
padding: 6rpx 12rpx;
border-radius: 999rpx;
color: #3074f7;
background: rgba(48, 116, 247, 0.1);
white-space: nowrap;
}
.item-grid {
display: flex;
gap: 10rpx;
}
.grid-cell {
flex: 1;
background: #ffffff;
border-radius: 10rpx;
padding: 14rpx 10rpx;
text-align: center;
border: 1rpx solid #f0f0f0;
}
.g-label {
display: block;
font-size: 22rpx;
color: #888;
margin-bottom: 6rpx;
}
.g-val {
display: block;
font-size: 30rpx;
font-weight: 700;
color: #222;
}
.item-remark {
margin-top: 12rpx;
display: flex;
gap: 12rpx;
align-items: flex-start;
}
.remark-label {
font-size: 24rpx;
color: #888;
white-space: nowrap;
}
.remark-value {
font-size: 24rpx;
color: #333;
flex: 1;
}
.text-block {
padding: 10rpx 0;
}
.text-label {
display: block;
font-size: 24rpx;
color: #888;
margin-bottom: 6rpx;
}
.text-value {
display: block;
font-size: 26rpx;
color: #333;
line-height: 1.6;
white-space: pre-wrap;
}
.attach-grid {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
margin-top: 10rpx;
}
.attach-item {
width: 32%;
height: 208rpx;
border-radius: 12rpx;
overflow: hidden;
background: #f6f6f6;
}
.attach-img {
width: 100%;
height: 100%;
}
.empty-hint {
padding: 18rpx 0 6rpx;
font-size: 24rpx;
color: #9a9a9a;
}
.bottom-actions {
margin-top: 26rpx;
}
.primary-btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 14rpx;
background: #3074f7;
color: #fff;
font-size: 30rpx;
font-weight: 600;
}
.status-ribbon {
position: absolute; position: absolute;
top: -5px; top: -4px;
right: -24px; right: -32px;
width: 75px; width: 100px;
height: 37px; height: 47px;
background: #08A400;
transform: rotate(45deg); transform: rotate(45deg);
z-index: 10; z-index: 10;
display: flex; display: flex;
@@ -196,24 +469,22 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
} }
.ribbon-returned{ .ribbon-returned {
background: #08A400; background: #08a400;
} }
.ribbon-notReturned{ .ribbon-notReturned {
background: #BD0000; background: #bd0000;
} }
.ribbon-pendingReview{ .ribbon-pendingReview {
background: #3471FF; background: #3471ff;
} }
.ribbon-text{ .ribbon-text {
color: #fff; color: #fff;
font-size: 20rpx; font-size: 20rpx;
font-weight: 500; font-weight: 500;
transform: rotate(0deg);
transform-origin: center;
display: block; display: block;
text-align: center; text-align: center;
margin-top: 16rpx; margin-top: 16rpx;
+621
View File
@@ -0,0 +1,621 @@
<template>
<view class="home-page">
<uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false" color="#fff" backgroundColor="rgb(79 137 247)" :statusBar="true" title="借用申请" @clickLeft="leftClick"></uni-nav-bar>
<view class="content-wrapper">
<!-- 申请人信息卡片 -->
<view class="form-card">
<view class="form-item form-item-row">
<text class="form-label">申请人:</text>
<text class="form-value">{{ userinfo.name || '犇犇' }}</text>
</view>
<view class="form-item form-item-row">
<text class="form-label">公司名称:</text>
<text class="form-value">{{ userinfo.corp_name || '合塑' }}</text>
</view>
</view>
<!-- 借用时间 -->
<view class="form-card4">
<view class="form-item form-item-row">
<text class="form-label required">借用时间</text>
<view class="form-input-container">
<uni-datetime-picker
ref="borrowTimePicker"
type="date"
v-model="formData.use_start_date"
placeholder="请选择时间"
:border="false"
:clear-icon="false"
@change="onBorrowTimeChange"
>
<view class="custom-datetime-input">
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.use_start_date }">
{{ formData.use_start_date || '请选择时间' }}
</text>
<uni-icons type="calendar" size="16" color="#999"></uni-icons>
</view>
</uni-datetime-picker>
</view>
</view>
</view>
<!-- 计划归还时间 -->
<view class="form-card4">
<view class="form-item form-item-row">
<text class="form-label required">计划归还时间</text>
<view class="form-input-container">
<uni-datetime-picker
ref="returnTimePicker"
type="date"
v-model="formData.use_end_date"
placeholder="请选择时间"
:border="false"
:clear-icon="false"
@change="onReturnTimeChange"
>
<view class="custom-datetime-input">
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.use_end_date }">
{{ formData.use_end_date || '请选择时间' }}
</text>
<uni-icons type="calendar" size="16" color="#999"></uni-icons>
</view>
</uni-datetime-picker>
</view>
</view>
</view>
<!-- ✅ 物品(可添加多条) -->
<view class="goods-card">
<view class="goods-head">
<text class="form-label required">物品</text>
<button class="goods-add-btn" size="mini" @click="addItem">+ 添加</button>
</view>
<view class="goods-module" v-for="(it, idx) in formData.items" :key="idx">
<view class="goods-module-top">
<text class="goods-module-title">物品 {{ idx + 1 }}</text>
<uni-icons
v-if="formData.items.length > 1"
type="trash"
size="18"
color="#ff4d4f"
@click="removeItem(idx)"
></uni-icons>
</view>
<view class="goods-module-body">
<view class="goods-name">
<picker mode="selector" :range="itemNameOptions" range-key="item_name" @change="onItemNameChange($event, idx)">
<view class="category-content">
<text class="category-text">{{it.item_name_snap || '请选择物品'}}</text>
</view>
</picker>
</view>
<view class="goods-qty">
<uni-number-box v-model="it.request_qty" :min="1" :max="999"></uni-number-box>
</view>
</view>
</view>
</view>
<view class="form-card">
<!-- 借用事由 -->
<view class="form-item">
<text class="form-label required form-label1">借用事由</text>
<uni-easyinput
v-model="formData.borrow_reason"
type="textarea"
:autoHeight="true"
placeholder="请填写借用事由"
:maxlength="500"
></uni-easyinput>
</view>
</view>
<!-- 备注卡片 -->
<view class="form-card " style="margin-bottom: 8rpx;">
<view class="form-item">
<text class="form-label">备注</text>
<uni-easyinput
v-model="formData.remark"
type="textarea"
:autoHeight="true"
placeholder="请填写备注"
:maxlength="500"
></uni-easyinput>
</view>
</view>
<!-- 附件上传 -->
<view class="form-card">
<view class="form-item">
<text class="form-label">附件</text>
<view class="media-upload-wrapper">
<!--
说明:
1) 回显用 :value="mediaValue",每项至少包含 { url }。
2) 关闭组件自带自动上传(auto-upload=false),我们用自己的 uploadfn 上传到后端。
3) 提交给后台时只传 file_path(formData.attachment),展示用 file_path_pull(mediaValue.url)。
-->
<uni-file-picker
ref="mediaPicker"
:limit="maxMedia"
fileMediatype="image"
:auto-upload="false"
:value="mediaValue"
@select="selectMedia"
@delete="delfn"
>
<view class="upload-icon-wrapper">
<image src="/static/image/upload.png" mode="" class="addimg"></image>
</view>
</uni-file-picker>
</view>
</view>
</view>
<!-- 提交按钮 -->
<view class="submit-container">
<button class="submit-btn" @click="handleSubmit">提交申请</button>
</view>
</view>
</view>
</template>
<script>
import { request,showToast } from '@/api/apiT.js'
export default {
data() {
return {
id:'',
userinfo: {},
maxMedia:20,
// uni-file-picker 用于回显的文件列表(展示用)
// 结构:[{ url: 'https://...', name: 'xxx.jpg' }]
mediaValue: [],
formData: {
use_start_date: '',
use_end_date: '',
items: [{ item_name_snap: '',item_id:'',request_qty:1}],
borrow_reason: '',
remark: '',
attachment: []
},
itemNameOptions: [],
}
},
onLoad(options) {
this.id = options.id
this.getinfo()
this.getItemNameOptions()
// 编辑页:有 id 则回显详情
if (this.id) {
this.getdetils()
}
},
methods: {
leftClick(){
uni.navigateBack({})
},
// 获取详情并回显
getdetils() {
request({
url:'mobile/inv/requisition/show',
method:'get',
data:{id:this.id}
}).then(res => {
const d = (res.data && res.data.data) ? res.data.data : {}
// 1) 基础字段
this.formData.id = d.id
this.formData.use_start_date = d.use_start_date || ''
this.formData.use_end_date = d.use_end_date || ''
this.formData.borrow_reason = d.borrow_reason || ''
this.formData.remark = d.remark || ''
// 2) 物品列表:后端字段是 item,这里统一成 items
const items = Array.isArray(d.item) ? d.item : []
this.formData.items = items.length
? items.map(it => ({
// 保留 id 等字段,方便后端识别是更新还是新增
id: it.id,
requisition_id: it.requisition_id,
item_id: it.item_id,
item_name_snap: it.item_name_snap,
request_qty: Number(it.request_qty || 1),
approved_qty: it.approved_qty,
returned_qty: it.returned_qty,
remark: it.remark || ''
}))
: [{ item_name_snap: '', item_id: '', request_qty: 1 }]
// 3) 附件:
// - formData.attachment:提交给后台(file_path)
// - mediaValue:回显展示(file_path_pull)
const atts = Array.isArray(d.attachment) ? d.attachment : []
this.formData.attachment = atts.map(a => ({
id: a.id,
original_name: a.file_name,
file_path: a.file_path
}))
this.mediaValue = atts.map(a => ({
url: a.file_path_pull || a.file_path,
name: a.file_name
}))
})
},
getinfo(){
request({
url:'common/user/info',
method:'get',
}).then(res => {
this.userinfo=res.data.data.user
})
},
//物品下拉
getItemNameOptions() {
request({
url:'mobile/inv/item/preset',
method:'get',
}).then(res => {
this.itemNameOptions = res.data.data
this.itemNameOptions.forEach(item => {
item.item_name = item.item_name + '(' + item.company_name + ')'
})
console.log(this.itemNameOptions)
})
},
// 选择物品(注意:需要知道是第几行物品)
onItemNameChange(e, rowIndex) {
const optIndex = e.detail.value // picker 返回选项下标
const selectItem = this.itemNameOptions[optIndex]
if (!selectItem) return
if (!Array.isArray(this.formData.items)) this.formData.items = []
if (!this.formData.items[rowIndex]) return
this.formData.items[rowIndex].item_name_snap = selectItem.item_name
this.formData.items[rowIndex].item_id = selectItem.id
},
onBorrowTimeChange(e) {
this.formData.use_start_date = e
},
onReturnTimeChange(e) {
this.formData.use_end_date = e
},
onFileSelect(e) {
console.log('文件选择:', e)
},
addItem() {
// 追加一条物品
this.formData.items = Array.isArray(this.formData.items) ? this.formData.items : []
this.formData.items.push({
item_name_snap: '',
item_id: '',
request_qty: 1
})
},
removeItem(index) {
// 删除指定物品(至少保留 1 条)
if (!Array.isArray(this.formData.items)) return
if (this.formData.items.length <= 1) return
this.formData.items.splice(index, 1)
},
uploadfn(imgUrl){
return new Promise((resolve, reject) => {
uni.uploadFile({
url: 'https://fdesk.hnxinyouhe.com/upload?scene=itemsimg',
filePath: imgUrl,
name: 'file',
header:{'Fdesk-Corp-Abbr':uni.getStorageSync('corp_abbr'),'Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),'Fdesk-Language': uni.getStorageSync('i18locale')?uni.getStorageSync('i18locale'):'zh','Fdesk-Login-Type': 'feishu','Fdesk-System-Code':'fdesk'},
success: (uploadFileRes) => {
const res = JSON.parse(uploadFileRes.data || '{}')
if(res && res.data && res.data.file_name){
resolve(res.data)
}else{
reject('上传失败')
}
},
fail: (err) => reject(err)
});
})
},
selectMedia(e){
// 选择图片后:先占位写入 attachment,确保“删除”时 index 一致
this.formData.attachment = Array.isArray(this.formData.attachment) ? this.formData.attachment : []
const allowCount = this.maxMedia - this.formData.attachment.length
const tempFilePaths = e.tempFilePaths || (e.tempFiles || []).map(item => item.path || item.url)
const paths = tempFilePaths.slice(0, allowCount)
if(paths.length === 0) return
const startIndex = this.formData.attachment.length
paths.forEach(p => {
this.formData.attachment.push({
__local_path: p,
original_name: '',
file_path: ''
})
})
Promise.all(
paths.map((p, i) =>
this.uploadfn(p)
.then(data => ({ i, ok: true, data }))
.catch(err => ({ i, ok: false, err }))
)
).then(results => {
// 先写入成功结果
results.forEach(r => {
if (!r.ok) return
const idx = startIndex + r.i
const row = this.formData.attachment[idx]
if (!row) return
row.original_name = r.data.original_name
// 后端需要的路径字段(注意:接口返回里叫 file_name,但实际是存储路径)
row.file_path = r.data.file_name
delete row.__local_path
})
// 再从后往前移除失败项(同时把 picker 里也删掉)
const failed = results.filter(r => !r.ok).map(r => r.i).sort((a,b) => b - a)
if (failed.length) {
failed.forEach(i => {
const idx = startIndex + i
// 删除占位
this.formData.attachment.splice(idx, 1)
// 同步删除 picker 中对应图片
this.$nextTick(() => {
if (this.$refs.mediaPicker && this.$refs.mediaPicker.clearFiles) {
this.$refs.mediaPicker.clearFiles(idx)
}
})
})
uni.showToast({
title:'部分图片上传失败,已自动移除,请重试',
icon:'none'
})
}
})
},
delfn(e){
this.formData.attachment.splice(e.index, 1)
// 仅删除“回显列表”里对应的旧附件(新选的图片不在 mediaValue 中)
if (Array.isArray(this.mediaValue) && e.index < this.mediaValue.length) {
this.mediaValue.splice(e.index, 1)
}
},
handleSubmit() {
// 表单验证
if (!this.formData.use_start_date) {
uni.showToast({ title: '请选择借用时间', icon: 'none' })
return
}
if (!this.formData.use_end_date) {
uni.showToast({ title: '请选择计划归还时间', icon: 'none' })
return
}
// 物品列表校验(至少 1 条,且每条需选择名称 + 数量)
if (!Array.isArray(this.formData.items) || this.formData.items.length === 0) {
uni.showToast({ title: '请添加物品', icon: 'none' })
return
}
for (let i = 0; i < this.formData.items.length; i++) {
const it = this.formData.items[i] || {}
if (!it.item_name_snap) {
uni.showToast({ title: `请选择第${i + 1}个物品名称`, icon: 'none' })
return
}
const request_qty = Number(it.request_qty)
if (!request_qty || request_qty <= 0) {
uni.showToast({ title: `请填写第${i + 1}个物品数量`, icon: 'none' })
return
}
}
if (!this.formData.borrow_reason) {
uni.showToast({ title: '请填写借用事由', icon: 'none' })
return
}
// 附件:如有占位未上传完成,不允许提交
if (Array.isArray(this.formData.attachment)) {
const uploading = this.formData.attachment.some(a => !a || !a.file_path)
if (uploading) {
uni.showToast({ title: '附件上传中,请稍后再提交', icon: 'none' })
return
}
}
// 提交表单
console.log('提交表单:', this.formData)
request({
url:'mobile/inv/requisition/update',
method:'post',
data:this.formData
}).then(res => {
uni.showToast({
title: res.data.message,
icon: 'none'
});
if(res.data.code==200){
setTimeout(() => {
uni.reLaunch({
url: '/pages/index/index',// 替换为你要跳转的页面路径
});
}, 1000);
}
})
// 这里可以调用API提交数据
}
}
}
</script>
<style lang="scss">
.home-page{
min-height: 100vh;
background: linear-gradient(180.05deg, #3074F7 0.04%, #F4F6F8 34.07%);
box-sizing: border-box;
padding-bottom: 120rpx;
padding: 0px 28rpx;
}
.content-wrapper{
margin-top: 20rpx;
}
.media-upload-wrapper{
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.addimg{
width: 50px;
height:50px;
}
.form-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 24rpx;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.form-card4 {
background: #fff;
border-radius: 6px;
padding: 3px 17px;
margin-bottom: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
height: 35px;
line-height: 35px;
}
/* 物品(可添加多条) */
.goods-card {
background: #fff;
border-radius: 6px;
padding: 12px 17px;
margin-bottom: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.goods-head {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 10px;
}
.goods-add-btn {
background: #3074F7;
color: #fff;
border-radius: 14px;
font-size: 24rpx;
margin-left: auto;
margin-right: inherit;
}
.goods-module {
background: #F7F8FA;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
}
.goods-module-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.goods-module-title {
font-size: 26rpx;
color: #333;
}
.goods-module-body {
display: flex;
align-items: center;
}
.goods-name {
flex: 1;
min-width: 0;
}
.goods-qty {
width: 220rpx;
display: flex;
justify-content: flex-end;
margin-left: 16rpx;
}
::v-deep .goods-qty .uni-numbox {
scale: 0.95;
transform-origin: right center;
}
.form-item {
margin-bottom: 32rpx;
&:last-child { margin-bottom: 0; }
}
.form-item-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-label1{
margin-bottom: 16rpx;
}
.form-item-row .form-label {
margin-bottom: 0;
margin-right: 24rpx;
}
.form-input-container {
flex: 1;
min-width: 0;
}
.form-label {
font-size: 28rpx;
color: #333;
display: block;
flex-shrink: 0;
min-width: 160rpx;
&.required::before {
content: '*';
color: #ff0000;
margin-right: 4rpx;
}
}
.form-value {
font-size: 28rpx;
color: #666;
flex: 1;
}
.category-text{
font-size: 28rpx;
color: #333;
}
.custom-datetime-input {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.custom-datetime-text {
font-size: 28rpx;
color: #333;
&.placeholder {
color: #999;
}
}
.submit-container {
margin-top: 40rpx;
padding-bottom: 40rpx;
}
.submit-btn {
background: #3074F7;
color: #fff;
font-size: 32rpx;
border-radius: 12rpx;
height: 88rpx;
line-height: 88rpx;
}
::v-deep .uni-easyinput__content-textarea {
font-size: 28rpx;
color: #333;
min-height: 120rpx;
padding-left: 0px;
}
::v-deep .uni-file-picker {
width: 100%;
}
</style>
+4 -4
View File
@@ -223,10 +223,10 @@
// 状态标签(旋转丝带效果) // 状态标签(旋转丝带效果)
.status-ribbon { .status-ribbon {
position: absolute; position: absolute;
top: -5px; top: -4px;
right: -24px; right: -32px;
width: 75px; width: 100px;
height: 37px; height: 47px;
background: #4CAF50; background: #4CAF50;
transform: rotate(45deg); transform: rotate(45deg);
z-index: 10; z-index: 10;
+4 -4
View File
@@ -221,10 +221,10 @@
// 状态标签(旋转丝带效果) // 状态标签(旋转丝带效果)
.status-ribbon { .status-ribbon {
position: absolute; position: absolute;
top: -5px; top: -4px;
right: -24px; right: -32px;
width: 75px; width: 100px;
height: 37px; height: 47px;
background: #4CAF50; background: #4CAF50;
transform: rotate(45deg); transform: rotate(45deg);
z-index: 10; z-index: 10;
+109 -94
View File
@@ -1,6 +1,6 @@
<template> <template>
<view class="home-page"> <view class="home-page">
<z-paging ref="paging" :auto="false" v-model="contList" @query="queryList" empty-view-text="暂无数据!"> <z-paging ref="paging" :auto="false" v-model="borrowList" @query="queryList" empty-view-text="暂无数据!">
<template #top> <template #top>
<uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false" @clickLeft="leftClick" color="#fff" backgroundColor="rgb(48, 116, 247)" :statusBar="true" title="借用列表"></uni-nav-bar> <uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false" @clickLeft="leftClick" color="#fff" backgroundColor="rgb(48, 116, 247)" :statusBar="true" title="借用列表"></uni-nav-bar>
<!-- Tab栏 --> <!-- Tab栏 -->
@@ -21,9 +21,8 @@
<view class="list-container"> <view class="list-container">
<view <view
class="borrow-card" class="borrow-card"
v-for="(item, index) in filteredList" v-for="(item, index) in borrowList"
:key="index" :key="index"
@click="handleCardClick(item)"
> >
<!-- 状态标签(右上角旋转丝带) --> <!-- 状态标签(右上角旋转丝带) -->
<view class="status-ribbon" :class="'ribbon-' + item.status"> <view class="status-ribbon" :class="'ribbon-' + item.status">
@@ -32,27 +31,30 @@
<!-- 卡片内容 --> <!-- 卡片内容 -->
<view class="card-content"> <view class="card-content">
<view class="card-title">{{ item.itemName }}</view> <view class="card-title" @click="handleCardClick(item)">
<view class="card-info"> <uni-tag :text="item1.item_name_snap" size="mini" type="primary" v-for="(item1, index) in item.item" :key="index"/>
<text class="info-item">申请人: {{ item.applicant }}</text> </view>
<text class="info-item">借用时间: {{ item.borrowTime }}</text> <view class="card-info" @click="handleCardClick(item)">
<text class="info-item">申请人: {{ item.applicant_name }}</text>
<text class="info-item">借用时间: {{ item.use_start_date || '-' }} ~ {{ item.use_end_date || '-' }}</text>
</view>
<view class="action-btns"> <view class="action-btns">
<text class="info-item">公司名称: {{ item.companyName }}</text> <!-- <text class="info-item">公司名称: {{ item.companyName }}</text> -->
<text class="info-item"></text>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<view class="card-actions" v-if="item.status !== 'returned'"> <view class="card-actions" v-if="item.status !== 'returned'">
<button <button
class="action-btn" class="action-btn"
:class="'btn-' + item.status" :class="'btn-' + item.status"
@click="handleAction(item)" @click="handleAction(item)"
v-if="item.status==10||item.status==12||item.status==14||item.status==16"
> >
{{ getActionText(item.status) }} {{ getActionText(item.status) }}
</button> </button>
</view> </view>
</view> </view>
</view> </view>
</view>
</view> </view>
</view> </view>
@@ -61,54 +63,22 @@
</template> </template>
<script> <script>
import { request,showToast } from '@/api/apiT.js'
export default { export default {
data() { data() {
return { return {
currentTab: 0, currentTab: 0,
tabList: ['全部', '已归还', '未归还', '待复核'], tabList: ['全部', '已归还', '未归还', '待审核'],
borrowList: [ borrowList: []
{
id: 1,
itemName: '公章',
applicant: '刘宇',
borrowTime: '2024-11-06 09:41:18',
companyName: '合塑',
status: 'returned' // returned, notReturned, pendingReview
},
{
id: 2,
itemName: '公章',
applicant: '刘宇',
borrowTime: '2024-11-06 09:41:18',
companyName: '合塑',
status: 'notReturned'
},
{
id: 3,
itemName: '公章',
applicant: '刘宇',
borrowTime: '2024-11-06 09:41:18',
companyName: '合塑',
status: 'pendingReview'
},
{
id: 4,
itemName: '公章',
applicant: '刘宇',
borrowTime: '2024-11-06 09:41:18',
companyName: '合塑',
status: 'pendingReview'
},
{
id: 5,
itemName: '公章',
applicant: '刘宇',
borrowTime: '2024-11-06 09:41:18',
companyName: '合塑',
status: 'pendingReview'
} }
] },
onLoad() {
// 页面加载时初始化数据
this.$nextTick(() => {
if (this.$refs.paging) {
this.$refs.paging.reload()
} }
})
}, },
computed: { computed: {
filteredList() { filteredList() {
@@ -130,19 +100,55 @@
}, },
switchTab(index) { switchTab(index) {
this.currentTab = index this.currentTab = index
// 重置分页并重新加载数据
if (this.$refs.paging) {
this.$refs.paging.reload()
}
},
queryList(pageNo, pageSize, from) {
this.loading = true;
var that = this;
const params = {
current:pageNo,
size:10,
applicant_id:'self',
status: this.currentTab === 0 ? '' : (this.currentTab === 1 ? 'repaid' : (this.currentTab === 2 ? 'unreturned' : 'approve'))
};
request({
url:'mobile/inv/requisition/list',
method:'get',
data: params
}).then(res => {
if(res.data.code ==200){
var datas = res.data.data.records;
this.$refs.paging.complete(datas);
}else{
}
uni.stopPullDownRefresh();
//
})
}, },
getStatusText(status) { getStatusText(status) {
const statusMap = { const statusMap = {
'returned': '已归还', '10': '待审核',
'notReturned': '未归还', '11': '审批中',
'pendingReview': '待复核' '12': '待归还',
'13': '借用拒绝',
'14': '归还待审核',
'15': '归还审批中',
'16': '部分归还',
'17': '已归还',
'18': '归还拒绝',
'19': '损耗品'
} }
return statusMap[status] || '' return statusMap[status] || ''
}, },
getActionText(status) { getActionText(status) {
const actionMap = { const actionMap = {
'notReturned': '立即归还', '12': '归还',
'pendingReview': '立即复核' '14': '编辑',
'10': '编辑',
'16': '归还',
} }
return actionMap[status] || '' return actionMap[status] || ''
}, },
@@ -152,28 +158,19 @@
}); });
}, },
handleAction(item) { handleAction(item) {
if (item.status === 'notReturned') {
if (item.status == 12 || item.status == 16) {
// 归还操作 // 归还操作
uni.navigateTo({ uni.navigateTo({
url: '/pages/borrow/return' url: '/pages/borrow/return?id='+item.id
}); });
// uni.showModal({ } else if (item.status == 10) {
// title: '提示',
// content: '确定要归还该物品吗?',
// success: (res) => {
// if (res.confirm) {
// uni.showToast({
// title: '归还成功',
// icon: 'success'
// })
// // 这里可以调用API更新状态
// }
// }
// })
} else if (item.status === 'pendingReview') {
// 复核操作
uni.navigateTo({ uni.navigateTo({
url: '/pages/borrow/review' url: '/pages/borrow/borrow_edit?id='+item.id
});
} else if (item.status == 14) {
uni.navigateTo({
url: '/pages/borrow/return_edit?id='+item.id
}); });
} }
} }
@@ -242,10 +239,10 @@
// 状态标签(旋转丝带效果) // 状态标签(旋转丝带效果)
.status-ribbon { .status-ribbon {
position: absolute; position: absolute;
top: -5px; top: -4px;
right: -24px; right: -32px;
width: 75px; width: 100px;
height: 37px; height: 47px;
background: #08A400; background: #08A400;
transform: rotate(45deg); transform: rotate(45deg);
z-index: 10; z-index: 10;
@@ -254,19 +251,39 @@
justify-content: center; justify-content: center;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15); box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
} }
.ribbon-returned {
background: #08A400; // 绿色
}
.ribbon-notReturned { .ribbon-notReturned {
background: #BD0000; // 红色 background: #BD0000; // 红色
} }
.ribbon-10 {
.ribbon-pendingReview {
background: #3471FF; // 蓝色 background: #3471FF; // 蓝色
} }
.ribbon-11 {
background: #FA8C16;
}
.ribbon-12 {
background: #722ED1;
}
.ribbon-13 {
background: #F5222D;
}
.ribbon-14 {
background: #13C2C2;
}
.ribbon-15 {
background: #FAAD14;
}
.ribbon-16 {
background: #52C41A;
}
.ribbon-17 {
background: #389E0D;
}
.ribbon-18 {
background: #A8071A;
}
.ribbon-19 {
background: #8C8C8C;
}
.ribbon-text { .ribbon-text {
color: #fff; color: #fff;
font-size: 20rpx; font-size: 20rpx;
@@ -290,6 +307,8 @@
font-weight: 500; font-weight: 500;
color: #333; color: #333;
margin-bottom: 24rpx; margin-bottom: 24rpx;
display: flex;
gap: 10px;
} }
.card-info { .card-info {
@@ -330,11 +349,7 @@
} }
} }
.btn-notReturned { .btn-12, .btn-16 {
background: #3074F7; background: #52C41A;
}
.btn-pendingReview {
background: #3074F7;
} }
</style> </style>
+395 -252
View File
@@ -1,350 +1,438 @@
<template> <template>
<view class="home-page"> <view class="home-page">
<uni-nav-bar leftText=" " :fixed="true" leftIcon="back" :border="false" @clickLeft="leftClick" color="#fff" backgroundColor="rgb(79 137 247)" :statusBar="true" title="物品归还"></uni-nav-bar> <uni-nav-bar
leftText=" "
:fixed="true"
leftIcon="back"
:border="false"
color="#fff"
backgroundColor="rgb(79 137 247)"
:statusBar="true"
title="物品归还"
@clickLeft="leftClick"
></uni-nav-bar>
<view class="content-wrapper"> <view class="content-wrapper">
<!-- 申请人信息卡片 --> <!-- 借用基本信息 -->
<view class="form-card"> <view class="form-card">
<view class="form-item form-item-row"> <view class="form-item form-item-row">
<text class="form-label">申请人:</text> <text class="form-label">申请人</text>
<text class="form-value">{{ formData.applicant || '犇犇' }}</text> <text class="form-value">{{ detail.applicant_name || '-' }}</text>
</view> </view>
<view class="form-item form-item-row"> <view class="form-item form-item-row">
<text class="form-label">公司名称:</text> <text class="form-label">单号</text>
<text class="form-value">{{ formData.companyName || '合塑' }}</text> <text class="form-value">{{ detail.order_no || '-' }}</text>
</view>
<view class="form-item form-item-row">
<text class="form-label">借用时间</text>
<text class="form-value">{{ detail.use_start_date || '-' }}</text>
</view>
<view class="form-item form-item-row">
<text class="form-label">计划归还</text>
<text class="form-value">{{ detail.use_end_date || '-' }}</text>
</view>
<view class="form-item">
<text class="form-label">借用事由</text>
<view class="text-block">{{ detail.borrow_reason || '-' }}</view>
</view> </view>
</view> </view>
<!-- 借用详情卡片 --> <!-- 归还物品(可删减 + 改数量) -->
<view class="goods-card">
<view class="goods-head">
<text class="goods-title">归还物品</text>
<text class="goods-sub">可删减物品,数量不超过“可归还”</text>
</view>
<view v-if="returnItems.length === 0" class="empty-tip">
暂无可归还物品
</view>
<view class="goods-module" v-for="(it, idx) in returnItems" :key="it._key">
<view class="goods-module-top">
<view class="goods-module-title">
<text class="name">{{ it.item_name_snap || '-' }}</text>
</view>
<uni-icons
type="trash"
size="18"
color="#ff4d4f"
@click="removeReturnItem(idx)"
></uni-icons>
</view>
<view class="goods-meta">
<view class="meta">
<text class="k">借用</text>
<text class="v">{{ it.approved_qty }}</text>
</view>
<view class="meta">
<text class="k">已还</text>
<text class="v">{{ it.returned_qty }}</text>
</view>
<view class="meta">
<text class="k">可归还</text>
<text class="v">{{ it.can_return }}</text>
</view>
</view>
<view class="goods-module-body">
<text class="qty-label required">本次归还数量</text>
<uni-number-box
v-model="it.return_qty"
:min="1"
:max="it.can_return"
></uni-number-box>
</view>
</view>
</view>
<!-- 实际归还时间 -->
<view class="form-card4"> <view class="form-card4">
<!-- 借用时间 -->
<view class="form-item form-item-row">
<text class="form-label">借用时间</text>
<view class="form-input-container">
<uni-datetime-picker
ref="borrowTimePicker"
type="datetime"
v-model="formData.borrowTime"
placeholder="请选择时间"
:border="false"
:clear-icon="false"
@change="onBorrowTimeChange"
>
<view class="custom-datetime-input">
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.borrowTime }">
{{ formData.borrowTime || '请选择时间' }}
</text>
<uni-icons type="calendar" size="18" color="#999"></uni-icons>
</view>
</uni-datetime-picker>
</view>
</view>
</view>
<view class="form-card4">
<!-- 计划归还时间 -->
<view class="form-item form-item-row">
<text class="form-label">计划归还时间</text>
<view class="form-input-container">
<uni-datetime-picker
ref="returnTimePicker"
type="datetime"
v-model="formData.returnTime"
placeholder="请选择时间"
:border="false"
:clear-icon="false"
@change="onReturnTimeChange"
>
<view class="custom-datetime-input">
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.returnTime }">
{{ formData.returnTime || '请选择时间' }}
</text>
<uni-icons type="calendar" size="18" color="#999"></uni-icons>
</view>
</uni-datetime-picker>
</view>
</view>
</view>
<view class="form-card4">
<!-- 物品所属公司 -->
<view class="form-item form-item-row">
<text class="form-label">物品所属公司</text>
<view class="form-input-container">
<uni-data-select
v-model="formData.itemCompany"
:localdata="itemCompanyOptions"
placeholder="请选择"
:clear="false"
></uni-data-select>
</view>
</view>
</view>
<view class="form-card">
<!-- 借用事由 -->
<view class="form-item">
<text class="form-label">借用事由</text>
<uni-easyinput
v-model="formData.borrowReason"
type="textarea"
:autoHeight="true"
placeholder="请填写借用事由"
:maxlength="500"
></uni-easyinput>
</view>
</view>
<view class="form-card4">
<!-- 物品名称 -->
<view class="form-item form-item-row">
<text class="form-label required">归还物品名称</text>
<view class="form-input-container">
<uni-data-select
v-model="formData.itemName"
:localdata="itemNameOptions"
placeholder="请选择"
:clear="false"
></uni-data-select>
</view>
</view>
</view>
<view class="form-card">
<!-- 计划归还时间 -->
<view class="form-item form-item-row"> <view class="form-item form-item-row">
<text class="form-label required">实际归还时间</text> <text class="form-label required">实际归还时间</text>
<view class="form-input-container"> <view class="form-input-container">
<uni-datetime-picker <uni-datetime-picker
ref="returnTimePicker" type="date"
type="datetime" v-model="formData.return_at"
v-model="formData.returnTime"
placeholder="请选择时间" placeholder="请选择时间"
:border="false" :border="false"
:clear-icon="false" :clear-icon="false"
@change="onReturnTimeChange"
> >
<view class="custom-datetime-input"> <view class="custom-datetime-input">
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.returnTime }"> <text class="custom-datetime-text" :class="{ placeholder: !formData.return_at }">
{{ formData.returnTime || '请选择时间' }} {{ formData.return_at || '请选择时间' }}
</text> </text>
<uni-icons type="calendar" size="18" color="#999"></uni-icons> <uni-icons type="calendar" size="16" color="#999"></uni-icons>
</view> </view>
</uni-datetime-picker> </uni-datetime-picker>
</view> </view>
</view> </view>
</view> </view>
<!-- 备注卡片 -->
<view class="form-card " style="margin-bottom: 8rpx;"> <!-- 备注 -->
<view class="form-card" style="margin-bottom: 8rpx;">
<view class="form-item"> <view class="form-item">
<text class="form-label">备注</text> <text class="form-label">归还备注</text>
<uni-easyinput <uni-easyinput
v-model="formData.remarks" v-model="formData.apply_remark"
type="textarea" type="textarea"
:autoHeight="true" :autoHeight="true"
placeholder="请填写备注" placeholder="请填写归还备注"
:maxlength="500" :maxlength="500"
></uni-easyinput> ></uni-easyinput>
</view> </view>
</view> </view>
<!-- 附件卡片 -->
<!-- 附件(多图) -->
<view class="form-card"> <view class="form-card">
<view class="form-item"> <view class="form-item">
<text class="form-label form-label1">附件</text> <text class="form-label">附件</text>
<view class="media-upload-wrapper">
<uni-file-picker <uni-file-picker
v-model="formData.attachments" :value="mediaValue"
file-mediatype="image" limit="20"
mode="grid" fileMediatype="image"
:limit="9" :disabled="uploading"
:auto-upload="false" :auto-upload="false"
@select="onFileSelect" @select="selectMedia"
@delete="delfn"
> >
<image src="/static/image/upload.png" mode="" class="addimg"></image> <view class="upload-icon-wrapper">
<image src="/static/image/upload.png" class="addimg"></image>
</view>
</uni-file-picker> </uni-file-picker>
</view> </view>
</view> </view>
</view>
<!-- 提交按钮 --> <!-- 提交 -->
<view class="submit-btn-wrapper"> <view class="submit-container">
<button class="submit-btn" @click="handleSubmit">提交</button> <button class="submit-btn" :disabled="submitting || uploading" @click="handleSubmit">
{{ submitting ? '提交中...' : '提交归还' }}
</button>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { request } from '@/api/apiT.js'
export default { export default {
data() { data() {
return { return {
id: '',
detail: {},
returnItems: [],
formData: { formData: {
applicant: '犇犇', return_at: '',
companyName: '合塑', apply_remark: '',
borrowTime: '', attachment: [] // 仅用于提交后台:[{original_name,file_path}]
returnTime: '',
itemName: '',
itemCompany: '',
borrowReason: '',
remarks: '',
attachments: []
}, },
itemNameOptions: [ mediaValue: [], // 仅用于 file-picker 展示:[{url,name,...}]
{ text: '物品1', value: 'item1' }, uploading: false,
{ text: '物品2', value: 'item2' }, submitting: false,
{ text: '物品3', value: 'item3' } maxMedia: 20,
], // 注意:根据你后端实际路由调整(目前项目里只有 apply/list/show)
itemCompanyOptions: [ RETURN_API: 'mobile/inv/requisition/return/store'
{ text: '公司A', value: 'companyA' }, }
{ text: '公司B', value: 'companyB' }, },
{ text: '公司C', value: 'companyC' } onLoad(options) {
] this.id = options.id || ''
if (this.id) {
this.getDetails()
} }
}, },
methods: { methods: {
leftClick(){ leftClick() {
uni.navigateBack({}) uni.navigateBack({})
}, },
onBorrowTimeChange(e) { // 拉取详情并回显
// uni-datetime-picker返回的已经是格式化后的字符串 getDetails() {
this.formData.borrowTime = e request({
url: 'mobile/inv/requisition/show',
method: 'get',
data: { id: this.id }
}).then(res => {
const d = (res && res.data && res.data.data) ? res.data.data : {}
this.detail = d || {}
this.buildReturnItems(d)
})
}, },
onReturnTimeChange(e) { // 把借用明细转换为“可归还”明细
// uni-datetime-picker返回的已经是格式化后的字符串 buildReturnItems(d) {
this.formData.returnTime = e const list = Array.isArray(d && d.item) ? d.item : []
const items = []
list.forEach(row => {
const approved = Number(row.approved_qty || row.request_qty || 0)
const returned = Number(row.returned_qty || 0)
const canReturn = Math.max(approved - returned, 0)
if (canReturn <= 0) return
items.push({
_key: `${row.id || row.item_id || ''}_${Date.now()}_${Math.random()}`,
id: row.id, // requisition_item_id
item_id: row.item_id,
item_name_snap: row.item_name_snap,
approved_qty: approved,
returned_qty: returned,
can_return: canReturn,
return_qty: canReturn // 默认全部归还(可自行改小/删减)
})
})
this.returnItems = items
}, },
onFileSelect(e) { removeReturnItem(idx) {
console.log('文件选择:', e) if (!Array.isArray(this.returnItems)) return
this.returnItems.splice(idx, 1)
}, },
// 上传单张(复用你项目里的 OSS 上传地址 + Header)
uploadfn(imgUrl) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: 'https://fdesk.hnxinyouhe.com/upload?scene=itemsimg',
filePath: imgUrl,
name: 'file',
header: {
'Fdesk-Corp-Abbr': uni.getStorageSync('corp_abbr'),
'Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),
'Fdesk-Language': uni.getStorageSync('i18locale') ? uni.getStorageSync('i18locale') : 'zh',
'Fdesk-Login-Type': 'feishu',
'Fdesk-System-Code': 'fdesk'
},
success: (uploadFileRes) => {
let json = {}
try {
json = JSON.parse(uploadFileRes.data || '{}')
} catch (e) {}
if (json && json.data && (json.data.file_name || json.data.file_path || json.data.file)) {
resolve(json.data)
} else {
reject('上传失败')
}
},
fail: (err) => reject(err)
})
})
},
selectMedia(e) {
if (this.uploading) return
const allowCount = this.maxMedia - this.formData.attachment.length
const tempFilePaths = e.tempFilePaths || (e.tempFiles || []).map(item => item.path || item.url)
const paths = tempFilePaths.slice(0, allowCount)
if (paths.length === 0) return
this.uploading = true
Promise.all(paths.map(p => this.uploadfn(p)))
.then(list => {
list.forEach((u, i) => {
// 兼容后端返回字段(你上面示例是 file_name/original_name)
const original = u.original_name || u.file_original_name || u.name || ('image_' + Date.now())
const filePath = u.file_name || u.file_path || u.path || ''
this.formData.attachment.push({
original_name: original,
file_path: filePath
})
// file-picker 展示用:本地选择的临时路径更直观
this.mediaValue.push({
name: original,
url: paths[i]
})
})
})
.catch(() => {
uni.showToast({ title: '图片上传失败,请重试', icon: 'none' })
})
.finally(() => {
this.uploading = false
})
},
delfn(e) {
// file-picker 的 index 和本地 mediaValue 一致;我们让 attachment 同步删除
const idx = e.index
if (idx >= 0) {
this.mediaValue.splice(idx, 1)
this.formData.attachment.splice(idx, 1)
}
},
handleSubmit() { handleSubmit() {
// 表单验证 if (this.submitting || this.uploading) return
if (!this.formData.borrowTime) {
uni.showToast({ if (!this.id) {
title: '请选择借用时间', uni.showToast({ title: '缺少借用申请ID', icon: 'none' })
icon: 'none'
})
return return
} }
if (!this.formData.returnTime) { if (!this.formData.return_at) {
uni.showToast({ uni.showToast({ title: '请选择归还时间', icon: 'none' })
title: '请选择计划归还时间',
icon: 'none'
})
return return
} }
if (!this.formData.itemName) { if (!Array.isArray(this.returnItems) || this.returnItems.length === 0) {
uni.showToast({ uni.showToast({ title: '请选择需要归还的物品', icon: 'none' })
title: '请选择物品名称',
icon: 'none'
})
return return
} }
if (!this.formData.itemCompany) { for (let i = 0; i < this.returnItems.length; i++) {
uni.showToast({ const it = this.returnItems[i] || {}
title: '请选择物品所属公司', const qty = Number(it.return_qty)
icon: 'none' if (!qty || qty <= 0) {
}) uni.showToast({ title: `请填写第${i + 1}个物品的归还数量`, icon: 'none' })
return return
} }
if (!this.formData.borrowReason) { if (qty > Number(it.can_return || 0)) {
uni.showToast({ uni.showToast({ title: `第${i + 1}个物品归还数量超过可归还`, icon: 'none' })
title: '请填写借用事由',
icon: 'none'
})
return return
} }
}
// 提交表单 const payload = {
console.log('提交表单:', this.formData) requisition_id: this.id,
return_at: this.formData.return_at,
apply_remark: this.formData.apply_remark,
attachment: this.formData.attachment,
items: this.returnItems.map(it => ({
requisition_item_name: it.item_name_snap || '',
requisition_item_id: it.id, // requisition_item_id
return_qty: it.return_qty
}))
}
this.submitting = true
request({
url: this.RETURN_API,
method: 'post',
data: payload
}).then(res => {
uni.showToast({ uni.showToast({
title: '提交成功', title: res.data.message,
icon: 'success' icon: 'none'
});
if(res.data.code==200){
setTimeout(() => {
uni.navigateTo({
url: '/pages/borrow/borrow_list'
});
}, 1000);
}
}).finally(() => {
this.submitting = false
}) })
// 这里可以调用API提交数据
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.home-page{ .home-page {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(180.05deg, #3074F7 0.04%, #F4F6F8 34.07%); background: linear-gradient(180.05deg, #3074F7 0.04%, #F4F6F8 34.07%);
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 120rpx; padding-bottom: 120rpx;
padding: 0px 28rpx; padding: 0px 28rpx;
} }
.content-wrapper{ .content-wrapper {
margin-top: 20rpx; margin-top: 20rpx;
} }
.addimg{
width: 50px;
height:50px;
}
.form-card { .form-card {
background: #fff; background: #fff;
border-radius: 12rpx; border-radius: 16rpx;
padding:20rpx 34rpx; padding: 24rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
} }
.form-card4 { .form-card4 {
background: #fff; background: #fff;
border-radius: 6px; border-radius: 6px;
padding: 3px 17px; padding: 3px 17px;
margin-bottom: 4px; margin-bottom: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
} }
.form-item {
margin-bottom: 32rpx;
.form-item {
margin-bottom: 20rpx;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&.form-item-row { &.form-item-row {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
} }
.form-label { .form-label {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
// margin-bottom: 16rpx;
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
min-width: 160rpx; min-width: 160rpx;
&.required::before { &.required::before {
content: '*'; content: '*';
color: #ff0000; color: #ff0000;
margin-right: 4rpx; margin-right: 4rpx;
} }
} }
.form-label1{
margin-bottom: 16rpx;
}
.form-item-row .form-label { .form-item-row .form-label {
margin-bottom: 0; margin-bottom: 0;
margin-right: 24rpx; margin-right: 24rpx;
} }
.form-input-container { .form-input-container {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
.form-value { .form-value {
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #666;
flex: 1; flex: 1;
text-align: right; text-align: right;
} }
.text-block {
.form-input-wrapper { font-size: 28rpx;
width: 100%; color: #666;
} line-height: 1.6;
padding-top: 10rpx;
.form-input-container .form-input-wrapper {
width: 100%;
} }
.custom-datetime-input { .custom-datetime-input {
@@ -353,46 +441,127 @@
width: 100%; width: 100%;
text-align: right; text-align: right;
} }
.custom-datetime-text { .custom-datetime-text {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
flex: 1;
&.placeholder { &.placeholder {
color: #999; color: #999;
} }
} }
// uni-datetime-picker 样式覆盖
::v-deep .uni-date-editor { ::v-deep .uni-date-editor {
width: 100%; width: 100%;
} }
::v-deep .uni-date-editor--x { ::v-deep .uni-date-editor--x {
border: none !important; border: none !important;
background: transparent !important; background: transparent !important;
padding: 0 !important; padding: 0 !important;
} }
::v-deep .uni-date-x {
width: 100%;
padding: 0 !important;
}
::v-deep .uni-date__x-input { ::v-deep .uni-date__x-input {
display: none; display: none;
} }
::v-deep .icon-calendar { ::v-deep .icon-calendar {
display: none; display: none;
} }
.submit-btn-wrapper { .goods-card {
margin-top: 40rpx; background: #fff;
padding-bottom: 40rpx; border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 24rpx;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.goods-head {
display: flex;
flex-direction: column;
gap: 6rpx;
margin-bottom: 12rpx;
}
.goods-title {
font-size: 30rpx;
color: #111;
font-weight: 600;
}
.goods-sub {
font-size: 24rpx;
color: #999;
}
.empty-tip {
padding: 24rpx 0;
text-align: center;
color: #999;
font-size: 26rpx;
}
.goods-module {
border: 1px solid #eef0f3;
border-radius: 14rpx;
padding: 18rpx;
margin-top: 16rpx;
}
.goods-module-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.goods-module-title .name {
font-size: 28rpx;
color: #333;
font-weight: 600;
}
.goods-meta {
display: flex;
justify-content: space-between;
margin-top: 12rpx;
padding: 12rpx;
border-radius: 12rpx;
background: #f7f8fa;
}
.goods-meta .meta {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.goods-meta .k {
font-size: 22rpx;
color: #999;
}
.goods-meta .v {
font-size: 28rpx;
color: #333;
margin-top: 6rpx;
}
.goods-module-body {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 14rpx;
}
.qty-label {
font-size: 26rpx;
color: #333;
&.required::before {
content: '*';
color: #ff0000;
margin-right: 4rpx;
}
} }
.media-upload-wrapper {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.addimg {
width: 50px;
height: 50px;
}
.submit-container {
margin-top: 30rpx;
padding-bottom: 40rpx;
display: flex;
justify-content: center;
}
.submit-btn { .submit-btn {
width: 70%; width: 70%;
height: 88rpx; height: 88rpx;
@@ -402,50 +571,24 @@
font-size: 32rpx; font-size: 32rpx;
line-height: 88rpx; line-height: 88rpx;
border: none; border: none;
&::after { &::after {
border: none; border: none;
} }
&[disabled] {
opacity: 0.6;
} }
// uni-data-select 样式调整
::v-deep .uni-stat__select {
width: 100%;
}
::v-deep .uni-select {
width: 100%;
border: none;
text-align: right;
}
::v-deep .uni-select__input-text {
font-size: 28rpx;
color: #333;
}
::v-deep .uni-select__input-placeholder {
color: #999;
}
// uni-easyinput 样式调整
::v-deep .uni-easyinput {
width: 100%;
} }
::v-deep .uni-easyinput__content { ::v-deep .uni-easyinput__content {
border: none; border: none;
min-height: 120rpx; min-height: 120rpx;
} }
::v-deep .uni-easyinput__content-textarea { ::v-deep .uni-easyinput__content-textarea {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
min-height: 120rpx; min-height: 120rpx;
padding-left: 0px; padding-left: 0px;
} }
// uni-file-picker 样式调整
::v-deep .uni-file-picker { ::v-deep .uni-file-picker {
width: 100%; width: 100%;
} }
+724
View File
@@ -0,0 +1,724 @@
<template>
<view class="home-page">
<uni-nav-bar
leftText=" "
:fixed="true"
leftIcon="back"
:border="false"
color="#fff"
backgroundColor="rgb(79 137 247)"
:statusBar="true"
title="编辑物品归还"
@clickLeft="leftClick"
></uni-nav-bar>
<view class="content-wrapper">
<!-- 借用基本信息 -->
<view class="form-card">
<view class="form-item form-item-row">
<text class="form-label">申请人</text>
<text class="form-value">{{ detail.apply_user_name || borrowDetail.applicant_name || '-' }}</text>
</view>
<view class="form-item form-item-row">
<text class="form-label">单号</text>
<text class="form-value">{{ detail.order_no || borrowDetail.order_no || '-' }}</text>
</view>
<view class="form-item form-item-row">
<text class="form-label">借用时间</text>
<text class="form-value">{{ borrowDetail.use_start_date || '-' }} ~ {{ borrowDetail.use_end_date || '-' }}</text>
</view>
<view class="form-item">
<text class="form-label">借用事由</text>
<view class="text-block">{{ borrowDetail.borrow_reason || '-' }}</view>
</view>
</view>
<!-- 归还物品(可删减 + 改数量) -->
<view class="goods-card">
<view class="goods-head">
<text class="goods-title">归还物品</text>
<text class="goods-sub">可删减物品,数量不超过"可归还"</text>
</view>
<view v-if="returnItems.length === 0" class="empty-tip">
暂无可归还物品
</view>
<view class="goods-module" v-for="(it, idx) in returnItems" :key="it._key">
<view class="goods-module-top">
<view class="goods-module-title">
<text class="name">{{ it.item_name_snap || '-' }}</text>
</view>
<uni-icons
type="trash"
size="18"
color="#ff4d4f"
@click="removeReturnItem(idx)"
></uni-icons>
</view>
<view class="goods-meta">
<view class="meta">
<text class="k">借用</text>
<text class="v">{{ it.approved_qty }}</text>
</view>
<view class="meta">
<text class="k">已还</text>
<text class="v">{{ it.returned_qty }}</text>
</view>
<view class="meta">
<text class="k">可归还</text>
<text class="v">{{ it.can_return }}</text>
</view>
</view>
<view class="goods-module-body">
<text class="qty-label required">本次归还数量</text>
<uni-number-box
v-model="it.return_qty"
:min="1"
:max="it.can_return"
></uni-number-box>
</view>
</view>
</view>
<!-- 实际归还时间 -->
<view class="form-card4">
<view class="form-item form-item-row">
<text class="form-label required">实际归还时间</text>
<view class="form-input-container">
<uni-datetime-picker
type="date"
v-model="formData.return_at"
placeholder="请选择时间"
:border="false"
:clear-icon="false"
>
<view class="custom-datetime-input">
<text class="custom-datetime-text" :class="{ placeholder: !formData.return_at }">
{{ formData.return_at || '请选择时间' }}
</text>
<uni-icons type="calendar" size="16" color="#999"></uni-icons>
</view>
</uni-datetime-picker>
</view>
</view>
</view>
<!-- 备注 -->
<view class="form-card" style="margin-bottom: 8rpx;">
<view class="form-item">
<text class="form-label">归还备注</text>
<uni-easyinput
v-model="formData.apply_remark"
type="textarea"
:autoHeight="true"
placeholder="请填写归还备注"
:maxlength="500"
></uni-easyinput>
</view>
</view>
<!-- 附件(多图) -->
<view class="form-card">
<view class="form-item">
<text class="form-label">附件</text>
<view class="media-upload-wrapper">
<uni-file-picker
:value="mediaValue"
limit="20"
fileMediatype="image"
:disabled="uploading"
:auto-upload="false"
@select="selectMedia"
@delete="delfn"
>
<view class="upload-icon-wrapper">
<image src="/static/image/upload.png" class="addimg"></image>
</view>
</uni-file-picker>
</view>
</view>
</view>
<!-- 提交 -->
<view class="submit-container">
<button class="submit-btn" :disabled="submitting || uploading" @click="handleSubmit">
{{ submitting ? '提交中...' : '更新归还' }}
</button>
</view>
</view>
</view>
</template>
<script>
import { request } from '@/api/apiT.js'
export default {
data() {
return {
id: '',
return_id: '',
detail: {},
borrowDetail: {}, // 借用详情数据
returnItems: [],
formData: {
return_at: '',
apply_remark: '',
attachment: [] // 仅用于提交后台:[{original_name,file_path}]
},
mediaValue: [], // 仅用于 file-picker 展示:[{url,name,...}]
uploading: false,
submitting: false,
maxMedia: 20,
// 注意:根据你后端实际路由调整
RETURN_API: 'mobile/inv/requisition/return/update'
}
},
onLoad(options) {
this.id = options.id || ''
this.return_id = options.id
this.getDetails()
},
methods: {
leftClick() {
uni.navigateBack({})
},
// 拉取详情并回显
getDetails() {
request({
url: 'mobile/inv/requisition/return/show',
method: 'get',
data: { id: this.id }
}).then(res => {
const d = (res && res.data && res.data.data) ? res.data.data : {}
this.detail = d || {}
this.formData.return_at = d.return_at || ''
this.formData.apply_remark = d.apply_remark || ''
// 处理附件
if (Array.isArray(d.return_attachment)) {
d.return_attachment.forEach(item => {
this.formData.attachment.push({
original_name: item.file_name || '',
file_path: item.file_path || ''
})
this.mediaValue.push({
name: item.file_name || '',
url: item.file_path_pull || item.file_path || ''
})
})
} else if (Array.isArray(d.attachment)) {
// 兼容旧的 attachment 字段
d.attachment.forEach(item => {
this.formData.attachment.push({
original_name: item.original_name || '',
file_path: item.file_path || ''
})
this.mediaValue.push({
name: item.original_name || '',
url: item.file_path_pull || item.file_path || ''
})
})
}
// 如果有借用详情的id,则获取借用详情数据
// 注意:这里应该使用 requisition_id 来获取借用详情
const borrowId = d.requisition_id || d.item_id
if (borrowId) {
this.getBorrowDetail(borrowId)
} else {
// 如果没有借用详情的id,则直接构建归还物品列表
this.buildReturnItems(d)
}
})
},
// 获取借用详情数据
getBorrowDetail(borrowId) {
request({
url: 'mobile/inv/requisition/show',
method: 'GET',
data: { id: borrowId }
}).then((res) => {
if (res.data && res.data.code === 200) {
this.borrowDetail = res.data.data || {}
// 兜底,避免 v-for 报错
this.borrowDetail.item = Array.isArray(this.borrowDetail.item) ? this.borrowDetail.item : []
// 获取借用详情后重新构建归还物品列表
this.buildReturnItems(this.detail)
} else {
uni.showToast({ title: res.data.message || '获取借用详情失败', icon: 'none' })
}
})
},
// 安全处理数字显示
safeNum(v) {
const n = Number(v)
return Number.isFinite(n) ? n : 0
},
// 把借用明细转换为“可归还”明细
buildReturnItems(d) {
const items = []
// 从借用详情中获取完整的物品列表
if (this.borrowDetail.id && this.borrowDetail.item && this.borrowDetail.item.length > 0) {
console.log('从借用详情中获取物品列表:', this.borrowDetail.item)
this.borrowDetail.item.forEach(row => {
const approved = Number(row.approved_qty || row.request_qty || 0)
const returned = Number(row.returned_qty || 0)
const canReturn = Math.max(approved - returned, 0)
if (canReturn <= 0) return
// 检查是否已经在归还列表中
let returnQty = 0
if (Array.isArray(d.item_return)) {
const existingReturn = d.item_return.find(item => {
// 尝试匹配 item_id 或 requisition_item_id
return item.item_id === row.id ||
(item.requisition_item && (item.requisition_item.item_id === row.id || item.requisition_item.id === row.id))
})
if (existingReturn) {
returnQty = Number(existingReturn.return_qty || 0)
}
}
console.log('处理物品:', row.item_name_snap || row.item_name, '可归还数量:', canReturn, '已归还数量:', returnQty)
items.push({
_key: `${row.id || ''}_${Date.now()}_${Math.random()}`,
id: row.id,
item_id: row.id,
item_name_snap: row.item_name_snap || row.item_name,
approved_qty: approved,
returned_qty: returned,
can_return: canReturn,
return_qty: returnQty
})
})
console.log('构建完成的归还物品列表:', items)
} else if (Array.isArray(d.item_return)) {
// 从 item_return 中获取归还物品信息
console.log('从 item_return 中获取物品列表:', d.item_return)
d.item_return.forEach(returnItem => {
if (returnItem.requisition_item) {
const reqItem = returnItem.requisition_item
const approved = Number(reqItem.approved_qty || reqItem.request_qty || 0)
const returned = Number(reqItem.returned_qty || 0)
const canReturn = Math.max(approved - returned, 0)
if (canReturn <= 0) return
items.push({
_key: `${reqItem.id || ''}_${Date.now()}_${Math.random()}`,
id: reqItem.id,
item_id: reqItem.item_id,
item_name_snap: reqItem.item_name_snap || '',
approved_qty: approved,
returned_qty: returned,
can_return: canReturn,
return_qty: Number(returnItem.return_qty || 0)
})
}
})
} else {
// 尝试从不同字段获取物品列表,确保兼容性
const list = Array.isArray(d && d.items) ? d.items : (Array.isArray(d && d.item) ? d.item : [])
if (list.length > 0 && d.return_qty) {
list.forEach(row => {
items.push({
_key: `${row.id || d.item_id || ''}_${Date.now()}_${Math.random()}`,
id: d.requisition_item_id,
item_id: row.id,
item_name_snap: row.item_name,
approved_qty: d.return_qty,
returned_qty: 0,
can_return: d.return_qty,
return_qty: d.return_qty
})
})
}
}
this.returnItems = items
console.log('最终的归还物品列表:', this.returnItems)
},
removeReturnItem(idx) {
if (!Array.isArray(this.returnItems)) return
this.returnItems.splice(idx, 1)
},
// 上传单张(复用你项目里的 OSS 上传地址 + Header)
uploadfn(imgUrl) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: 'https://fdesk.hnxinyouhe.com/upload?scene=itemsimg',
filePath: imgUrl,
name: 'file',
header: {
'Fdesk-Corp-Abbr': uni.getStorageSync('corp_abbr'),
'Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),
'Fdesk-Language': uni.getStorageSync('i18locale') ? uni.getStorageSync('i18locale') : 'zh',
'Fdesk-Login-Type': 'feishu',
'Fdesk-System-Code': 'fdesk'
},
success: (uploadFileRes) => {
let json = {}
try {
json = JSON.parse(uploadFileRes.data || '{}')
} catch (e) {}
if (json && json.data && (json.data.file_name || json.data.file_path || json.data.file)) {
resolve(json.data)
} else {
reject('上传失败')
}
},
fail: (err) => reject(err)
})
})
},
selectMedia(e) {
if (this.uploading) return
const allowCount = this.maxMedia - this.formData.attachment.length
const tempFilePaths = e.tempFilePaths || (e.tempFiles || []).map(item => item.path || item.url)
const paths = tempFilePaths.slice(0, allowCount)
if (paths.length === 0) return
this.uploading = true
Promise.all(paths.map(p => this.uploadfn(p)))
.then(list => {
list.forEach((u, i) => {
// 兼容后端返回字段(你上面示例是 file_name/original_name)
const original = u.original_name || u.file_original_name || u.name || ('image_' + Date.now())
const filePath = u.file_name || u.file_path || u.path || ''
this.formData.attachment.push({
original_name: original,
file_path: filePath
})
// file-picker 展示用:本地选择的临时路径更直观
this.mediaValue.push({
name: original,
url: paths[i]
})
})
})
.catch(() => {
uni.showToast({ title: '图片上传失败,请重试', icon: 'none' })
})
.finally(() => {
this.uploading = false
})
},
delfn(e) {
// file-picker 的 index 和本地 mediaValue 一致;我们让 attachment 同步删除
const idx = e.index
if (idx >= 0) {
this.mediaValue.splice(idx, 1)
this.formData.attachment.splice(idx, 1)
}
},
handleSubmit() {
if (this.submitting || this.uploading) return
if (!this.id || !this.return_id) {
uni.showToast({ title: '缺少必要参数', icon: 'none' })
return
}
if (!this.formData.return_at) {
uni.showToast({ title: '请选择归还时间', icon: 'none' })
return
}
if (!Array.isArray(this.returnItems) || this.returnItems.length === 0) {
uni.showToast({ title: '请选择需要归还的物品', icon: 'none' })
return
}
// 过滤掉归还数量为0的物品
const validReturnItems = this.returnItems.filter(item => {
const qty = Number(item.return_qty)
return qty > 0
})
// 检查是否有有效的归还物品
if (validReturnItems.length === 0) {
uni.showToast({ title: '请至少选择一个物品并填写归还数量', icon: 'none' })
return
}
// 检查每个有效物品的归还数量是否超过可归还数量
for (let i = 0; i < validReturnItems.length; i++) {
const it = validReturnItems[i] || {}
const qty = Number(it.return_qty)
if (qty > Number(it.can_return || 0)) {
uni.showToast({ title: `第${i + 1}个物品归还数量超过可归还`, icon: 'none' })
return
}
}
const payload = {
id: this.return_id,
requisition_id: this.id,
return_at: this.formData.return_at,
apply_remark: this.formData.apply_remark,
attachment: this.formData.attachment,
items: validReturnItems.map(it => ({
requisition_item_id: it.id,
item_id: it.item_id,
return_qty: it.return_qty
}))
}
this.submitting = true
request({
url: this.RETURN_API,
method: 'post',
data: payload
}).then(res => {
uni.showToast({
title: res.data.message,
icon: 'none'
});
if(res.data.code==200){
setTimeout(() => {
uni.navigateTo({
url: '/pages/borrow/borrow_list'
});
}, 1000);
}
}).finally(() => {
this.submitting = false
})
}
}
}
</script>
<style lang="scss">
.home-page {
min-height: 100vh;
background: linear-gradient(180.05deg, #3074F7 0.04%, #F4F6F8 34.07%);
box-sizing: border-box;
padding-bottom: 120rpx;
padding: 0px 28rpx;
}
.content-wrapper {
margin-top: 20rpx;
}
.form-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 24rpx;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.form-card4 {
background: #fff;
border-radius: 6px;
padding: 3px 17px;
margin-bottom: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
height: 35px;
line-height: 35px;
}
.form-item {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
&.form-item-row {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
}
.form-label {
font-size: 28rpx;
color: #333;
display: block;
flex-shrink: 0;
min-width: 160rpx;
&.required::before {
content: '*';
color: #ff0000;
margin-right: 4rpx;
}
}
.form-item-row .form-label {
margin-bottom: 0;
margin-right: 24rpx;
}
.form-input-container {
flex: 1;
min-width: 0;
}
.form-value {
font-size: 28rpx;
color: #666;
flex: 1;
text-align: right;
}
.text-block {
font-size: 28rpx;
color: #666;
line-height: 1.6;
padding-top: 10rpx;
}
.custom-datetime-input {
border-radius: 4px;
box-sizing: border-box;
width: 100%;
text-align: right;
}
.custom-datetime-text {
font-size: 28rpx;
color: #333;
&.placeholder {
color: #999;
}
}
::v-deep .uni-date-editor {
width: 100%;
}
::v-deep .uni-date-editor--x {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
::v-deep .uni-date__x-input {
display: none;
}
::v-deep .icon-calendar {
display: none;
}
.goods-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 24rpx;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.goods-head {
display: flex;
flex-direction: column;
gap: 6rpx;
margin-bottom: 12rpx;
}
.goods-title {
font-size: 30rpx;
color: #111;
font-weight: 600;
}
.goods-sub {
font-size: 24rpx;
color: #999;
}
.empty-tip {
padding: 24rpx 0;
text-align: center;
color: #999;
font-size: 26rpx;
}
.goods-module {
border: 1px solid #eef0f3;
border-radius: 14rpx;
padding: 18rpx;
margin-top: 16rpx;
}
.goods-module-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.goods-module-title .name {
font-size: 28rpx;
color: #333;
font-weight: 600;
}
.goods-meta {
display: flex;
justify-content: space-between;
margin-top: 12rpx;
padding: 12rpx;
border-radius: 12rpx;
background: #f7f8fa;
}
.goods-meta .meta {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.goods-meta .k {
font-size: 22rpx;
color: #999;
}
.goods-meta .v {
font-size: 28rpx;
color: #333;
margin-top: 6rpx;
}
.goods-module-body {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 14rpx;
}
.qty-label {
font-size: 26rpx;
color: #333;
&.required::before {
content: '*';
color: #ff0000;
margin-right: 4rpx;
}
}
.media-upload-wrapper {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.addimg {
width: 50px;
height: 50px;
}
.submit-container {
margin-top: 30rpx;
padding-bottom: 40rpx;
display: flex;
justify-content: center;
}
.submit-btn {
width: 70%;
height: 88rpx;
background: #3074F7;
color: #fff;
border-radius: 44rpx;
font-size: 32rpx;
line-height: 88rpx;
border: none;
&::after {
border: none;
}
&[disabled] {
opacity: 0.6;
}
}
::v-deep .uni-easyinput__content {
border: none;
min-height: 120rpx;
}
::v-deep .uni-easyinput__content-textarea {
font-size: 28rpx;
color: #333;
min-height: 120rpx;
padding-left: 0px;
}
::v-deep .uni-file-picker {
width: 100%;
}
</style>
+3 -3
View File
@@ -38,7 +38,7 @@
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.borrowTime }"> <text class="custom-datetime-text" :class="{ 'placeholder': !formData.borrowTime }">
{{ formData.borrowTime || '请选择时间' }} {{ formData.borrowTime || '请选择时间' }}
</text> </text>
<uni-icons type="calendar" size="18" color="#999"></uni-icons> <uni-icons type="calendar" size="16" color="#999"></uni-icons>
</view> </view>
</uni-datetime-picker> </uni-datetime-picker>
</view> </view>
@@ -62,7 +62,7 @@
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.returnTime }"> <text class="custom-datetime-text" :class="{ 'placeholder': !formData.returnTime }">
{{ formData.returnTime || '请选择时间' }} {{ formData.returnTime || '请选择时间' }}
</text> </text>
<uni-icons type="calendar" size="18" color="#999"></uni-icons> <uni-icons type="calendar" size="16" color="#999"></uni-icons>
</view> </view>
</uni-datetime-picker> </uni-datetime-picker>
</view> </view>
@@ -127,7 +127,7 @@
<text class="custom-datetime-text" :class="{ 'placeholder': !formData.returnTime }"> <text class="custom-datetime-text" :class="{ 'placeholder': !formData.returnTime }">
{{ formData.returnTime || '请选择时间' }} {{ formData.returnTime || '请选择时间' }}
</text> </text>
<uni-icons type="calendar" size="18" color="#999"></uni-icons> <uni-icons type="calendar" size="16" color="#999"></uni-icons>
</view> </view>
</uni-datetime-picker> </uni-datetime-picker>
</view> </view>
+23 -10
View File
@@ -8,6 +8,7 @@
<u-grid-item <u-grid-item
v-for="(listItem,listIndex) in list" v-for="(listItem,listIndex) in list"
:key="listIndex" :key="listIndex"
@click="navTo(listItem.url)"
> >
<image class="icons" src="/static/image/icon.png" mode=""></image> <image class="icons" src="/static/image/icon.png" mode=""></image>
<text class="grid-text">{{listItem.title}}</text> <text class="grid-text">{{listItem.title}}</text>
@@ -31,7 +32,7 @@
<view class="title">备货单</view> <view class="title">备货单</view>
<u-grid :border="false" col="5" > <u-grid :border="false" col="5" >
<u-grid-item <u-grid-item
v-for="(listItem,listIndex) in list" v-for="(listItem,listIndex) in list2"
:key="listIndex" :key="listIndex"
@click="navTo('/pages/stock/stock_list')" @click="navTo('/pages/stock/stock_list')"
> >
@@ -51,19 +52,21 @@
return { return {
list: [ list: [
{ {
title: '备货单审批' title: '备货单审批',
url:''
}, },
{ {
title: '备货单审批' title: '借用审批',
url:'/pages/approval/borrow_approval'
}, },
{ {
title: '备货单审批' title: '归还审批',
}, url:'/pages/approval/return_approval'
}
],
list2: [
{ {
title: '备货单审批' title: '备货单'
},
{
title: '备货单审批'
} }
], ],
bannerList: [], bannerList: [],
@@ -71,11 +74,21 @@
} }
}, },
onLoad() { onLoad() {
if (!uni.getStorageSync('token')) {} if (uni.getStorageSync('token')) {
this.getinfo()
}
}, },
onShow() { onShow() {
}, },
methods: { methods: {
getinfo(){
request({
url:'common/user/info',
method:'get',
}).then(res => {
this.userinfo=res.data.data.user
})
},
navTo(url) { navTo(url) {
uni.navigateTo({ uni.navigateTo({
url: url url: url
+226
View File
@@ -0,0 +1,226 @@
<template>
<view class="auth-page">
<view class="auth-card">
<view v-if="status === 'loading'">
<view class="spinner"></view>
<view class="text-wrap">
<text class="title">{{ title }}</text>
<text class="desc">{{ desc }}<text class="dots">{{ dots }}</text></text>
</view>
<view class="progress">
<view class="bar"></view>
</view>
</view>
<view v-else class="error-wrap">
<uni-icons type="clear" size="44" color="#ff4d4f"></uni-icons>
<text class="title">登录失败</text>
<text class="desc">{{ errorMsg }}</text>
<button class="retry-btn" @click="retry">重试</button>
</view>
</view>
</view>
</template>
<script>
import { request, showToast } from '@/api/apiT.js'
export default {
data() {
return {
status: 'loading',
title: '正在完成登录',
desc: '处理中',
dots: '',
errorMsg: '请稍后重试',
_dotTimer: null,
minStayMs: 600,
_startedAt: 0,
_code: ''
}
},
onLoad(options) {
this._startedAt = Date.now()
this.startDots()
// #ifdef H5
this._code = options.code || ''
// #endif
if (!this._code) {
this.fail('缺少 code 参数')
return
}
this.logins(this._code)
},
onUnload() {
this.stopDots()
},
methods: {
startDots() {
this.stopDots()
let n = 0
this._dotTimer = setInterval(() => {
n = (n + 1) % 4
this.dots = '.'.repeat(n)
}, 350)
},
stopDots() {
if (this._dotTimer) {
clearInterval(this._dotTimer)
this._dotTimer = null
}
},
fail(msg) {
this.status = 'error'
this.errorMsg = msg || '请稍后重试'
uni.showToast({ title: msg || '登录失败', icon: 'none' })
},
async logins(code) {
try {
this.title = '正在交换登录凭证'
this.desc = '请稍候'
const res = await request({
url: 'common/auth/login',
method: 'POST',
data: { feishu_code: code,is_mob:1}
})
const token = res?.data?.data?.access_token
if (!token) {
throw new Error(res?.data?.msg || '未获取到 access_token')
}
uni.setStorageSync('token', token)
this.title = '登录成功'
this.desc = '正在进入首页'
this.goHomeSmooth()
} catch (err) {
console.error('[feishu callback] error:', err)
this.fail(err?.message || '登录失败')
}
},
goHomeSmooth() {
const elapsed = Date.now() - this._startedAt
const wait = Math.max(0, this.minStayMs - elapsed)
setTimeout(() => {
uni.reLaunch({ url: '/pages/index/index' })
}, wait)
},
retry() {
this.status = 'loading'
this.title = '正在完成登录'
this.desc = '处理中'
this.startDots()
if (this._code) this.logins(this._code)
else this.fail('缺少 code 参数')
}
}
}
</script>
<style scoped lang="scss">
.auth-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
box-sizing: border-box;
background: linear-gradient(180deg, #3074F7 0%, #F4F6F8 38%, #F4F6F8 100%);
}
.auth-card {
width: 100%;
max-width: 640rpx;
background: rgba(255, 255, 255, 0.92);
border-radius: 20rpx;
padding: 44rpx 36rpx 32rpx;
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
align-items: center;
backdrop-filter: blur(10px);
}
.spinner {
width: 88rpx;
height: 88rpx;
border-radius: 50%;
border: 8rpx solid rgba(48, 116, 247, 0.18);
border-top-color: rgba(48, 116, 247, 1);
animation: spin 0.9s linear infinite;
margin-bottom: 24rpx;
}
.text-wrap {
text-align: center;
}
.title {
display: block;
font-size: 34rpx;
color: #1f2937;
font-weight: 600;
margin-bottom: 8rpx;
}
.desc {
display: block;
font-size: 26rpx;
color: #6b7280;
}
.dots {
display: inline-block;
width: 40rpx;
text-align: left;
}
.progress {
width: 100%;
height: 10rpx;
border-radius: 999rpx;
background: rgba(48, 116, 247, 0.10);
overflow: hidden;
margin-top: 26rpx;
}
.progress .bar {
height: 100%;
width: 40%;
border-radius: 999rpx;
background: rgba(48, 116, 247, 0.55);
animation: move 1.1s ease-in-out infinite;
}
.error-wrap {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.retry-btn {
margin-top: 24rpx;
width: 240rpx;
height: 72rpx;
line-height: 72rpx;
border-radius: 999rpx;
background: #3074F7;
color: #fff;
font-size: 28rpx;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes move {
0% { transform: translateX(-60%); }
50% { transform: translateX(140%); }
100% { transform: translateX(-60%); }
}
</style>
+177 -228
View File
@@ -1,263 +1,212 @@
<template> <template>
<view class="content"> <view class="auth-page">
<image class="logo" src="/static/image/bg.jpg"></image> <view class="auth-card">
<!-- 这里如果你有站点 logo,可替换为自己的路径;没有也不影响 -->
<!-- <image class="logo" src="/static/logo.png" mode="heightFix"></image> -->
<view class="contop"> <view class="spinner"></view>
<text class="text">2025 USED CAR</text>
<text class="cont"> <view class="text-wrap">
河南合塑实业有限公司 <text class="title">{{ title }}</text>
</text> <text class="desc">{{ desc }}<text class="dots">{{ dots }}</text></text>
</view>
<view class="foot">
<button v-if="is_login" class="btn" @click="mini_login">一键登录</button>
<button v-else="is_login" class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
<view class="check">
<checkbox-group name="" style="width: 28px;">
<label>
<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B" style="transform:scale(0.7);border-radius: 50%"/>
</label>
</checkbox-group>
我同意并遵守<text class="argeen" @click="gouser">《用户服务协议》</text>以及<text class="argeen" @click="goprivacy">《隐私政策》</text>
</view> </view>
<view class="progress">
<view class="bar"></view>
</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { request,showToast } from '@/api/apiT.js' import { request, showToast } from '@/api/apiT.js'
export default { export default {
data() { data() {
return { return {
selfChecked: false, corp_abbr: '',
is_login:false, corp_id: '',
title: '正在为你登录',
desc: '加载中',
dots: '',
_dotTimer: null,
// 最短停留时间,避免“闪一下就跳”的割裂感
minStayMs: 600,
_startedAt: 0
} }
}, },
onLoad() { onLoad(options) {
// this.Props.statusBarHeight = getApp().globalData.statusBarHeight this.corp_abbr = options.corp_abbr || '';
// console.log(this.Props.statusBarHeight) this.corp_id = options.corp_id || '';
// this.Props.capsuleTop = getApp().globalData.capsuleTop uni.setStorageSync('corp_abbr', this.corp_abbr);
// this.getbg() uni.setStorageSync('corp_id', this.corp_id);
// uni.setStorageSync('token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZGVzay5obnhpbnlvdWhlLmNvbSIsImp0aSI6ImEwNzFlYTE1ODQ1NWNmYzA1YTkyOTgxOWUxNzQwNTJkIiwic3ViIjoidXNlcl8xIiwiYXVkIjoiZmRlc2siLCJpYXQiOjE3Njc2NjM0MTcsIm5iZiI6MTc2NzY2MzQxNywiZXhwIjoxNzcwMjU1NDE3LCJ0eXAiOiJhY2Nlc3MiLCJ1aWQiOjEsInVuYW1lIjoiXHU2NzRlXHU0ZjczXHU1MzVhIiwicm9sZV9pZHMiOlsxLDIsNF0sInN5c3RlbV9pZHMiOlsxLDIsM119.vyhbWUVIvEF4VGv1hHi3-4cja9r8q7K8dhSW1ejhKgk')
// console.log(uni.getStorageSync('token'))
this._startedAt = Date.now()
this.startDots()
this.silentAuth()
}, },
onShow() { onUnload() {
// #ifdef MP-WEIXIN this.stopDots()
//小程序登录检测
this.mini_login()
// #endif
// #ifndef MP-WEIXIN
this.is_login = true
// #endif
}, },
methods: { methods: {
selfChangde(e) { startDots() {
this.selfChecked = !this.selfChecked; this.stopDots()
let n = 0
this._dotTimer = setInterval(() => {
n = (n + 1) % 4
this.dots = '.'.repeat(n)
}, 350)
}, },
goprivacy(){ stopDots() {
uni.navigateTo({ if (this._dotTimer) {
url: '/pages/login/agreement',// 替换为你要跳转的页面路径 clearInterval(this._dotTimer)
}); this._dotTimer = null
}, }
gouser(){ },
uni.navigateTo({ async silentAuth() {
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径 try {
}); // 1) 如果本地已有 token,直接进首页(丝滑)
}, const token = uni.getStorageSync('token')
getPhoneNumber(e) { if (token) {
console.log(e.detail.code) // 动态令牌 this.title = '已登录'
let that = this; this.desc = '正在进入首页'
request({ return this.goHomeSmooth()
url:'miniapp/phone',
// url:'customerLogin',
method:'POST',
data:{
phone_code: e.detail.code,
} }
}).then(res => {
console.log(res.data.data)
if (res.data.code == -1) {
uni.showToast({
title: res.data.msg,
icon: 'none'
});
} else if (res.data.code == 0) { // 2) 获取飞书授权跳转地址(静默授权/免登)
//返回数据接收成功 this.title = '正在跳转飞书授权'
this.mini_login(); this.desc = '准备中'
} const res = await request({
url: 'common/auth/feishu/scope',
method: 'get',
data:{is_mob:1}
}) })
}, const auth_url = res?.data?.data?.auth_url
mini_login() { if (!auth_url) {
let that = this; throw new Error('未获取到授权地址')
// if(!this.selfChecked){
// uni.showToast({
// title:'请先勾选同意用户服务协议以及隐私政策',
// icon: 'none'
// });
// return false
// }
uni.login({
provider: 'weixin',
success: loginRes => {
console.log(loginRes);
that.code = loginRes.code;
// 2. 将用户登录code传递到后台置换用户SessionKey、OpenId等信息
request({
url:'miniapp/login',
method:'POST',
data:{
code: loginRes.code
} }
}).then(res => {
console.log(res.data);
uni.hideLoading()
if (res.data.code == 0) {
//存取session
uni.setStorageSync('openid', res.data.data.openid);
uni.setStorageSync('token', res.data.data.token);
if(res.data.data.phone&&res.data.data.phone!=''&&res.data.data.phone!=null){
uni.reLaunch({
url: '/pages/index/index',// 替换为你要跳转的页面路径
});
this.is_login = true;
}
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
}
})
},
fail: () => {
uni.showToast({
title: '获取 code 失败',
icon: 'none'
});
}
});
}, // 3) 给一点点过渡时间,让动画先跑起来再跳转
pd_login(openid) { await this.sleep(180)
let that = this;
request({ // 仅 H5 才能用 window.location
url:'miniapp/phone', // #ifdef H5
method:'POST', window.location.replace(auth_url)
data:{ // #endif
phone_code: openid
// #ifndef H5
showToast && showToast('仅 H5 环境支持飞书静默授权')
// #endif
} catch (err) {
console.error('[feishu silentAuth] error:', err)
uni.showToast({ title: err?.message || '登录失败', icon: 'none' })
} }
}).then(res => {
console.log(res.data)
uni.reLaunch({
url: '/pages/index/index',// 替换为你要跳转的页面路径
});
// if (res.data.code == -1) {
// //unionid在数据库没有记录 记录就可以不需要操作
// console.log('unionid在数据库没有记录 记录就可以不需要操作')
// } else if (res.data.code == 0) {
// var userid = res.data.data;
// this.is_login = true;
// this.getCard(openid);
// }
})
}, },
goHomeSmooth() {
const elapsed = Date.now() - this._startedAt
const wait = Math.max(0, this.minStayMs - elapsed)
setTimeout(() => {
uni.reLaunch({
url: '/pages/index/index'
})
}, wait)
},
sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
} }
} }
</script> </script>
<style scoped> <style scoped lang="scss">
>>>checkbox .wx-checkbox-input { .auth-page {
border-radius: 50% !important; min-height: 100vh;
border: 2rpx solid #3F435B !important;
}
>>>checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border: 2rpx solid #3F435B !important;
background-color:#3F435B !important;
color: #FFFFFF !important;
}
>>>checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
color: #FFFFFF !important;
}
>>>uni-checkbox .uni-checkbox-input {
margin-right: 0;
border-radius: 50%;
border: 2rpx solid #3F435B;
}
>>>uni-checkbox .uni-checkbox-input:empty {
border: 2rpx solid #3F435B;
background-color: #5FFFFFF;
opacity: 0.5;
}
>>>uni-checkbox .uni-checkbox-input:not(:empty) {
border: 2rpx solid #3F435B;
background-color: #3F435B;
color: #FFFFFF;
}
.argeen{
color: #3F435B;
}
.content{
height: 100%;
width: 100%;
position: relative;
background-color: white;
}
.logo{
width: 100%;
height: 830rpx;
}
.contop{
position: absolute;
top: 16%;
text-align: center;
}
.text{
font-size: 32px;
font-weight: bold;
background: linear-gradient(120deg, #B9773C 0%, #67450D 100%);
-webkit-background-clip: text;
color: transparent;
background-clip: text;
display: inline-block;
}
.cont{
background-image: linear-gradient(#4C392B, #0A0604);
padding: 4px 15px;
color: #FFEBCC;
text-align: center;
border-radius: 6px;
display: inline-block;
margin-top: 12px;
font-size: 16px;
}
.foot{
width: 88%;
margin: 30px auto;
text-align: center;
}
.foot label{
color: #929292;
}
.check{
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 26rpx; justify-content: center;
padding: 40rpx;
box-sizing: border-box;
/* 更“高级”的登录背景 */
background: linear-gradient(180deg, #3074F7 0%, #F4F6F8 38%, #F4F6F8 100%);
} }
.btn{
background-color: #3F435B;
color: white;
border-radius: 50px;
width: 100%;
margin-bottom: 40px;
height: 50px;
line-height: 50px;
}
.radio{
color: #929292;
font-size: 12px;
.auth-card {
width: 100%;
max-width: 640rpx;
background: rgba(255, 255, 255, 0.92);
border-radius: 20rpx;
padding: 44rpx 36rpx 32rpx;
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
align-items: center;
backdrop-filter: blur(10px);
}
.logo {
height: 72rpx;
margin-bottom: 26rpx;
}
.spinner {
width: 88rpx;
height: 88rpx;
border-radius: 50%;
border: 8rpx solid rgba(48, 116, 247, 0.18);
border-top-color: rgba(48, 116, 247, 1);
animation: spin 0.9s linear infinite;
margin-bottom: 24rpx;
}
.text-wrap {
text-align: center;
}
.title {
display: block;
font-size: 34rpx;
color: #1f2937;
font-weight: 600;
margin-bottom: 8rpx;
}
.desc {
display: block;
font-size: 26rpx;
color: #6b7280;
}
.dots {
display: inline-block;
width: 40rpx; /* 固定宽度避免文字抖动 */
text-align: left;
}
.progress {
width: 100%;
height: 10rpx;
border-radius: 999rpx;
background: rgba(48, 116, 247, 0.10);
overflow: hidden;
margin-top: 26rpx;
}
.progress .bar {
height: 100%;
width: 40%;
border-radius: 999rpx;
background: rgba(48, 116, 247, 0.55);
animation: move 1.1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes move {
0% { transform: translateX(-60%); }
50% { transform: translateX(140%); }
100% { transform: translateX(-60%); }
} }
</style> </style>
+4 -4
View File
@@ -222,10 +222,10 @@
// 状态标签(旋转丝带效果) // 状态标签(旋转丝带效果)
.status-ribbon { .status-ribbon {
position: absolute; position: absolute;
top: -5px; top: -4px;
right: -24px; right: -32px;
width: 75px; width: 100px;
height: 37px; height: 47px;
background: #08A400; background: #08A400;
transform: rotate(45deg); transform: rotate(45deg);
z-index: 10; z-index: 10;
+12
View File
@@ -1,3 +1,15 @@
## 1.1.0(2025-08-19)
- 新增 插槽 selected empty option
- 新增 mutiple 属性,支持多选功能
- 新增 wrap 属性,支持选中的文字超过一行显示
- 新增 align 属性,支持修改选中的文字显示的位置
- 新增 hideRight 属性,支持隐藏右侧所有按钮
- 新增 mode 属性,支持修改边框样式
- 新增 事件 open close clear
## 1.0.10(2025-04-14)
- 修复 清除按钮不展示问题
## 1.0.9(2025-03-26)
- 优化 默认背景为白色与整体组件保持风格统一
## 1.0.8(2024-03-28) ## 1.0.8(2024-03-28)
- 修复 在vue2下:style动态绑定导致编译失败的bug - 修复 在vue2下:style动态绑定导致编译失败的bug
## 1.0.7(2024-01-20) ## 1.0.7(2024-01-20)
@@ -2,14 +2,22 @@
<view class="uni-stat__select"> <view class="uni-stat__select">
<span v-if="label" class="uni-label-text hide-on-phone">{{label + ':'}}</span> <span v-if="label" class="uni-label-text hide-on-phone">{{label + ':'}}</span>
<view class="uni-stat-box" :class="{'uni-stat__actived': current}"> <view class="uni-stat-box" :class="{'uni-stat__actived': current}">
<view class="uni-select" :class="{'uni-select--disabled':disabled}"> <view class="uni-select" :class="{'uni-select--disabled':disabled, 'uni-select--wrap': shouldWrap , 'border-default': mode == 'default','border-bottom': mode == 'underline'}">
<view class="uni-select__input-box" @click="toggleSelector"> <view class="uni-select__input-box" @click="toggleSelector" :class="{'uni-select__input-box--wrap': shouldWrap}">
<view v-if="current" class="uni-select__input-text">{{textShow}}</view> <view v-if="slotSelected" class="slot-content padding-top-bottom" :class="{'uni-select__input-text--wrap': shouldWrap}">
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view> <slot name="selected" :selectedItems="getSelectedItems()"></slot>
<view v-if="current && clear && !disabled" @click.stop="clearVal"> </view>
<template v-else>
<view v-if="textShow" class="uni-select__input-text" :class="{'uni-select__input-text--wrap': shouldWrap}">
<!-- <view class="padding-top-bottom" :class="'align-'+align">{{textShow}}</view> -->
<view :class="'align-'+align">{{textShow}}</view>
</view>
<view v-else class="uni-select__input-text uni-select__input-placeholder" :class="'align-'+align">{{typePlaceholder}}</view>
</template>
<view key="clear-button" v-if="!hideRight && shouldShowClear && clear && !disabled" @click.stop="clearVal">
<uni-icons type="clear" color="#c0c4cc" size="24" /> <uni-icons type="clear" color="#c0c4cc" size="24" />
</view> </view>
<view v-else> <view key="arrow-button" v-else-if="!hideRight">
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" /> <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
</view> </view>
</view> </view>
@@ -17,13 +25,35 @@
<view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector"> <view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
<view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view> <view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view>
<scroll-view scroll-y="true" class="uni-select__selector-scroll"> <scroll-view scroll-y="true" class="uni-select__selector-scroll">
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0"> <template v-if="slotEmpty && mixinDatacomResData.length === 0">
<view class="uni-select__selector-empty">
<slot name="empty" :empty="emptyTips"></slot>
</view>
</template>
<template v-else>
<view v-if="mixinDatacomResData.length === 0" class="uni-select__selector-empty">
<text>{{emptyTips}}</text> <text>{{emptyTips}}</text>
</view> </view>
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index" </template>
<template v-if="slotOption">
<view v-for="(itemData,index) in mixinDatacomResData" :key="index" @click="change(itemData)">
<slot name="option" :item="itemData" :itemSelected="multiple? getCurrentValues().includes(itemData.value):getCurrentValues() == itemData.value"></slot>
</view>
</template>
<template v-else>
<view v-if="!multiple && mixinDatacomResData.length > 0" class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
@click="change(item)"> @click="change(item)">
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text> <text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
</view> </view>
<view v-if="multiple && mixinDatacomResData.length > 0" >
<checkbox-group @change="checkBoxChange">
<label class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index" >
<checkbox :value="index+''" :checked="getCurrentValues().includes(item.value)" :disabled="item.disable"></checkbox>
<view :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</view>
</label>
</checkbox-group>
</view>
</template>
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
@@ -36,22 +66,56 @@
* DataChecklist 数据选择器 * DataChecklist 数据选择器
* @description 通过数据渲染的下拉框组件 * @description 通过数据渲染的下拉框组件
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
* @property {String} value 默认值 * @property {String|Array} value 默认值,多选时为数组
* @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}] * @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}]
* @property {Boolean} clear 是否可以清空已选项 * @property {Boolean} clear 是否可以清空已选项
* @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效 * @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效
* @property {String} label 左侧标题 * @property {String} label 左侧标题
* @property {String} placeholder 输入框的提示文字 * @property {String} placeholder 输入框的提示文字
* @property {Boolean} disabled 是否禁用 * @property {Boolean} disabled 是否禁用
* @property {Boolean} multiple 是否多选模式
* @property {Boolean} wrap 是否允许选中文本换行显示
* @property {String} placement 弹出位置 * @property {String} placement 弹出位置
* @value top 顶部弹出 * @value top 顶部弹出
* @value bottom 底部弹出(default) * @value bottom 底部弹出(default)
* @property {String} align 选择文字的位置
* @value left 显示左侧
* @value center 显示中间
* @value right 显示 右侧
* @property {Boolean} hideRight 是否隐藏右侧按钮
* @property {String} mode 边框样式
* @value default 四周边框
* @value underline 下边框
* @value none 无边框
* @event {Function} change 选中发生变化触发 * @event {Function} change 选中发生变化触发
* @event {Function} open 选择框开启时触发
* @event {Function} close 选择框关闭时触发
* @event {Function} clear 点击清除按钮之后触发
*/ */
export default { export default {
name: "uni-data-select", name: "uni-data-select",
mixins: [uniCloud.mixinDatacom || {}], mixins: [uniCloud.mixinDatacom || {}],
emits: [
'open',
'close',
'update:modelValue',
'input',
'clear',
'change'
],
model: {
prop: 'modelValue',
event: 'update:modelValue'
},
options: {
// #ifdef MP-TOUTIAO
virtualHost: false,
// #endif
// #ifndef MP-TOUTIAO
virtualHost: true
// #endif
},
props: { props: {
localdata: { localdata: {
type: Array, type: Array,
@@ -60,11 +124,11 @@
} }
}, },
value: { value: {
type: [String, Number], type: [String, Number, Array],
default: '' default: ''
}, },
modelValue: { modelValue: {
type: [String, Number], type: [String, Number, Array],
default: '' default: ''
}, },
label: { label: {
@@ -99,6 +163,26 @@
placement: { placement: {
type: String, type: String,
default: 'bottom' default: 'bottom'
},
multiple: {
type: Boolean,
default: false
},
wrap: {
type: Boolean,
default: false
},
align:{
type: String,
default: "left"
},
hideRight: {
type: Boolean,
default: false
},
mode:{
type: String,
default: 'default'
} }
}, },
data() { data() {
@@ -133,20 +217,35 @@
common common
}, },
valueCom() { valueCom() {
// #ifdef VUE3 if (this.value === '') return this.modelValue
return this.modelValue; if (this.modelValue === '') return this.value
// #endif return this.value
// #ifndef VUE3
return this.value;
// #endif
}, },
textShow() { textShow() {
// 长文本显示 // 长文本显示
let text = this.current; if (this.multiple) {
if (text.length > 10) { const currentValues = this.getCurrentValues();
return text.slice(0, 25) + '...'; if (Array.isArray(currentValues) && currentValues.length > 0) {
const selectedItems = this.mixinDatacomResData.filter(item => currentValues.includes(item.value));
return selectedItems.map(item => this.formatItemName(item)).join(', ');
} else {
return ''; // 空数组时返回空字符串,显示占位符
} }
return text; } else {
return this.current;
}
},
shouldShowClear() {
if (this.multiple) {
const currentValues = this.getCurrentValues();
return Array.isArray(currentValues) && currentValues.length > 0;
} else {
return !!this.current;
}
},
shouldWrap() {
// 只有在多选模式、开启换行、且有内容时才应用换行样式
return this.multiple && this.wrap && !!this.textShow;
}, },
getOffsetByPlacement() { getOffsetByPlacement() {
switch (this.placement) { switch (this.placement) {
@@ -155,10 +254,38 @@
case 'bottom': case 'bottom':
return "top:calc(100% + 12px);"; return "top:calc(100% + 12px);";
} }
},
slotSelected(){
// #ifdef VUE2
return this.$scopedSlots ? this.$scopedSlots.selected : false
// #endif
// #ifdef VUE3
return this.$slots ? this.$slots.selected : false
// #endif
},
slotEmpty(){
// #ifdef VUE2
return this.$scopedSlots ? this.$scopedSlots.empty : false
// #endif
// #ifdef VUE3
return this.$slots ? this.$slots.empty : false
// #endif
},
slotOption(){
// #ifdef VUE2
return this.$scopedSlots ? this.$scopedSlots.option : false
// #endif
// #ifdef VUE3
return this.$slots ? this.$slots.option : false
// #endif
} }
}, },
watch: { watch: {
showSelector:{
handler(val,old){
val ? this.$emit('open') : this.$emit('close')
}
},
localdata: { localdata: {
immediate: true, immediate: true,
handler(val, old) { handler(val, old) {
@@ -178,9 +305,20 @@
} }
} }
}, },
}, },
methods: { methods: {
getSelectedItems() {
const currentValues = this.getCurrentValues();
let _minxData = this.mixinDatacomResData
// #ifdef MP-WEIXIN || MP-TOUTIAO
_minxData = JSON.parse(JSON.stringify(this.mixinDatacomResData))
// #endif
if (this.multiple) {
return _minxData.filter(item => currentValues.includes(item.value)) || [];
} else {
return _minxData.filter(item => item.value === currentValues) || [];
}
},
debounce(fn, time = 100) { debounce(fn, time = 100) {
let timer = null let timer = null
return function(...args) { return function(...args) {
@@ -190,6 +328,23 @@
}, time) }, time)
} }
}, },
// 检查项目是否已选中
isSelected(item) {
if (this.multiple) {
const currentValues = this.getCurrentValues();
return Array.isArray(currentValues) && currentValues.includes(item.value);
} else {
return this.getCurrentValues() === item.value;
}
},
// 获取当前选中的值
getCurrentValues() {
if (this.multiple) {
return Array.isArray(this.valueCom) ? this.valueCom : (this.valueCom ? [this.valueCom] : []);
} else {
return this.valueCom;
}
},
// 执行数据库查询 // 执行数据库查询
query() { query() {
this.mixinDatacomEasyGet(); this.mixinDatacomEasyGet();
@@ -201,7 +356,7 @@
} }
}, },
initDefVal() { initDefVal() {
let defValue = '' let defValue = this.multiple ? [] : ''
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) { if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
defValue = this.valueCom defValue = this.valueCom
} else { } else {
@@ -212,48 +367,106 @@
if (strogeValue || strogeValue === 0) { if (strogeValue || strogeValue === 0) {
defValue = strogeValue defValue = strogeValue
} else { } else {
let defItem = '' let defItem = this.multiple ? [] : ''
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) { if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
defItem = this.mixinDatacomResData[this.defItem - 1].value defItem = this.multiple ? [this.mixinDatacomResData[this.defItem - 1].value] : this.mixinDatacomResData[this.defItem - 1].value
} }
defValue = defItem defValue = defItem
} }
if (defValue || defValue === 0) { if (defValue || defValue === 0 || (this.multiple && Array.isArray(defValue) && defValue.length > 0)) {
this.emit(defValue) this.emit(defValue)
} }
} }
if (this.multiple) {
const selectedValues = Array.isArray(defValue) ? defValue : (defValue ? [defValue] : []);
const selectedItems = this.mixinDatacomResData.filter(item => selectedValues.includes(item.value));
this.current = selectedItems.map(item => this.formatItemName(item));
} else {
const def = this.mixinDatacomResData.find(item => item.value === defValue) const def = this.mixinDatacomResData.find(item => item.value === defValue)
this.current = def ? this.formatItemName(def) : '' this.current = def ? this.formatItemName(def) : ''
}
}, },
/** /**
* @param {[String, Number]} value * @param {[String, Number, Array]} value
* 判断用户给的 value 是否同时为禁用状态 * 判断用户给的 value 是否同时为禁用状态
*/ */
isDisabled(value) { isDisabled(value) {
if (Array.isArray(value)) {
// 对于数组,如果任意一个值被禁用,则认为整体被禁用
return value.some(val => {
return this.mixinDatacomResData.some(item => item.value === val && item.disable);
});
} else {
let isDisabled = false; let isDisabled = false;
this.mixinDatacomResData.forEach(item => { this.mixinDatacomResData.forEach(item => {
if (item.value === value) { if (item.value === value) {
isDisabled = item.disable isDisabled = item.disable
} }
}) })
return isDisabled; return isDisabled;
}
}, },
clearVal() { clearVal() {
this.emit('') const emptyValue = this.multiple ? [] : '';
this.emit(emptyValue)
this.current = this.multiple ? [] : ''
if (this.collection) { if (this.collection) {
this.removeCache() this.removeCache()
} }
this.$emit('clear')
},
checkBoxChange(res){
let range = res.detail.value
let currentValues = range && range.length > 0? range.map((item)=>{
const index = parseInt(item, 10);
if (isNaN(index)) {
console.error(`无效索引: ${item}`);
}
if (index < 0 || index >= this.mixinDatacomResData.length) {
console.error(`索引越界: ${index}`);
}
return this.mixinDatacomResData[index].value;
}) : []
const selectedItems = this.mixinDatacomResData.filter(dataItem => currentValues.includes(dataItem.value));
this.current = selectedItems.map(dataItem => this.formatItemName(dataItem));
this.emit(currentValues);
}, },
change(item) { change(item) {
if (!item.disable) { if (!item.disable) {
if (this.multiple) {
// 多选模式
let currentValues = this.getCurrentValues();
if (!Array.isArray(currentValues)) {
currentValues = currentValues ? [currentValues] : [];
}
const itemValue = item.value;
const index = currentValues.indexOf(itemValue);
if (index > -1) {
currentValues.splice(index, 1);
} else {
currentValues.push(itemValue);
}
const selectedItems = this.mixinDatacomResData.filter(dataItem => currentValues.includes(dataItem.value));
this.current = selectedItems.map(dataItem => this.formatItemName(dataItem));
this.emit(currentValues);
} else {
// 单选模式
this.showSelector = false this.showSelector = false
this.current = this.formatItemName(item) this.current = this.formatItemName(item)
this.emit(item.value) this.emit(item.value)
} }
}
}, },
emit(val) { emit(val) {
this.$emit('input', val) this.$emit('input', val)
@@ -330,6 +543,11 @@
$uni-main-color: #333 !default; $uni-main-color: #333 !default;
$uni-secondary-color: #909399 !default; $uni-secondary-color: #909399 !default;
$uni-border-3: #e5e5e5; $uni-border-3: #e5e5e5;
$uni-primary: #2979ff !default;
$uni-success: #4cd964 !default;
$uni-warning: #f0ad4e !default;
$uni-error: #dd524d !default;
$uni-info: #909399 !default;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
@@ -352,6 +570,7 @@
} }
.uni-stat-box { .uni-stat-box {
background-color: #fff;
width: 100%; width: 100%;
flex: 1; flex: 1;
} }
@@ -370,9 +589,16 @@
margin-right: 5px; margin-right: 5px;
} }
.border-bottom {
border-bottom: solid 1px $uni-border-3;
}
.border-default {
border: 1px solid $uni-border-3;
}
.uni-select { .uni-select {
font-size: 14px; font-size: 14px;
border: 1px solid $uni-border-3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
padding: 0 5px; padding: 0 5px;
@@ -384,15 +610,20 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border-bottom: solid 1px $uni-border-3;
width: 100%; width: 100%;
flex: 1; flex: 1;
height: 35px; min-height: 35px;
&--disabled { &--disabled {
background-color: #f5f7fa; background-color: #f5f7fa;
cursor: not-allowed; cursor: not-allowed;
} }
&--wrap {
height: auto;
min-height: 35px;
// align-items: flex-start;
}
} }
.uni-select__label { .uni-select__label {
@@ -404,7 +635,8 @@
} }
.uni-select__input-box { .uni-select__input-box {
height: 35px; // height: 35px;
width: 0px;
position: relative; position: relative;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
@@ -412,6 +644,24 @@
flex: 1; flex: 1;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
&--wrap {
.uni-select__input-text {
margin-right: 8px;
}
}
.padding-top-bottom {
padding-top: 5px;
padding-bottom: 5px;
}
.slot-content {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
} }
.uni-select__input { .uni-select__input {
@@ -463,15 +713,18 @@
display: flex; display: flex;
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
flex-direction: row;
align-items: center;
line-height: 35px; line-height: 35px;
font-size: 14px; font-size: 14px;
text-align: center;
/* border-bottom: solid 1px $uni-border-3; */ /* border-bottom: solid 1px $uni-border-3; */
padding: 0px 10px; padding: 0px 10px;
} }
.uni-select__selector-item:hover {
background-color: #f9f9f9;
.uni-select__selector-item-check {
margin-left: auto;
} }
.uni-select__selector-empty:last-child, .uni-select__selector-empty:last-child,
@@ -490,8 +743,7 @@
.uni-popper__arrow_bottom, .uni-popper__arrow_bottom,
.uni-popper__arrow_bottom::after, .uni-popper__arrow_bottom::after,
.uni-popper__arrow_top, .uni-popper__arrow_top,
.uni-popper__arrow_top::after, .uni-popper__arrow_top::after {
{
position: absolute; position: absolute;
display: block; display: block;
width: 0; width: 0;
@@ -544,11 +796,22 @@
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
&--wrap {
white-space: normal;
text-overflow: initial;
-o-text-overflow: initial;
overflow: visible;
word-wrap: break-word;
word-break: break-all;
// line-height: 1.5;
}
} }
.uni-select__input-placeholder { .uni-select__input-placeholder {
color: $uni-base-color; color: $uni-base-color;
font-size: 12px; font-size: 12px;
margin: 1px 0;
} }
.uni-select--mask { .uni-select--mask {
@@ -559,4 +822,17 @@
left: 0; left: 0;
z-index: 2; z-index: 2;
} }
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
</style> </style>
+55 -35
View File
@@ -1,7 +1,7 @@
{ {
"id": "uni-data-select", "id": "uni-data-select",
"displayName": "uni-data-select 下拉框选择器", "displayName": "uni-data-select 下拉框选择器",
"version": "1.0.8", "version": "1.1.0",
"description": "通过数据驱动的下拉框选择器", "description": "通过数据驱动的下拉框选择器",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
@@ -12,12 +12,14 @@
], ],
"repository": "https://github.com/dcloudio/uni-ui", "repository": "https://github.com/dcloudio/uni-ui",
"engines": { "engines": {
"HBuilderX": "^3.1.1" "HBuilderX": "^3.1.1",
"uni-app": "^4.45",
"uni-app-x": ""
}, },
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
}, },
"dcloudext": { "dcloudext": {
"sale": { "sale": {
"regular": { "regular": {
"price": "0.00" "price": "0.00"
@@ -35,50 +37,68 @@
"permissions": "无" "permissions": "无"
}, },
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue" "type": "component-vue",
"darkmode": "x",
"i18n": "x",
"widescreen": "x"
}, },
"uni_modules": { "uni_modules": {
"dependencies": ["uni-load-more"], "dependencies": [
"uni-load-more"
],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
"tcb": "y", "tcb": "√",
"aliyun": "y", "aliyun": "√",
"alipay": "n" "alipay": "√"
}, },
"client": { "client": {
"App": { "uni-app": {
"app-vue": "u", "vue": {
"app-nvue": "n" "vue2": "√",
"vue3": "√"
}, },
"H5-mobile": { "web": {
"Safari": "y", "safari": "√",
"Android Browser": "y", "chrome": "√"
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
}, },
"H5-pc": { "app": {
"Chrome": "y", "vue": "√",
"IE": "y", "nvue": "-",
"Edge": "y", "android": "√",
"Firefox": "y", "ios": "√",
"Safari": "y" "harmony": "√"
}, },
"小程序": { "mp": {
"微信": "y", "weixin": "√",
"阿里": "u", "alipay": "√",
"百度": "u", "toutiao": "√",
"字节跳动": "u", "baidu": "-",
"QQ": "u", "kuaishou": "-",
"京东": "u" "jd": "-",
"harmony": "-",
"qq": "-",
"lark": "-"
}, },
"快应用": { "quickapp": {
"华为": "u", "huawei": "-",
"联盟": "u" "union": "-"
}
}, },
"Vue": { "uni-app-x": {
"vue2": "y", "web": {
"vue3": "y" "safari": "-",
"chrome": "-"
},
"app": {
"android": "-",
"ios": "-",
"harmony": "-"
},
"mp": {
"weixin": "-"
}
} }
} }
} }
+2 -4
View File
@@ -1,9 +1,7 @@
## 1.3.7(2025-08-20)
- 修复 微信小程序css警告问题
## 1.3.6(2024-10-15) ## 1.3.6(2024-10-15)
- 修复 微信小程序中的getSystemInfo警告 - 修复 微信小程序中的getSystemInfo警告
## 1.3.5(2024-10-12)
- 修复 微信小程序中的getSystemInfo警告
## 1.3.4(2024-10-12)
- 修复 微信小程序中的getSystemInfo警告
## 1.3.3(2022-01-20) ## 1.3.3(2022-01-20)
- 新增 showText属性 ,是否显示文本 - 新增 showText属性 ,是否显示文本
## 1.3.2(2022-01-19) ## 1.3.2(2022-01-19)
@@ -26,7 +26,7 @@
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view v-else-if="!webviewHide && status === 'loading' && showIcon" <view v-else-if="!webviewHide && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5"> :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
<image :src="imgBase64" mode="widthFix"></image> <image class="image" :src="imgBase64" mode="widthFix"></image>
</view> </view>
<!-- #endif --> <!-- #endif -->
<text v-if="showText" class="uni-load-more__text" <text v-if="showText" class="uni-load-more__text"
@@ -210,7 +210,7 @@
animation: loading-ios-H5 1s 0s step-end infinite; animation: loading-ios-H5 1s 0s step-end infinite;
} }
.uni-load-more__img--ios-H5 image { .uni-load-more__img--ios-H5 .image {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
+55 -34
View File
@@ -1,7 +1,7 @@
{ {
"id": "uni-load-more", "id": "uni-load-more",
"displayName": "uni-load-more 加载更多", "displayName": "uni-load-more 加载更多",
"version": "1.3.6", "version": "1.3.7",
"description": "LoadMore 组件,常用在列表里面,做滚动加载使用。", "description": "LoadMore 组件,常用在列表里面,做滚动加载使用。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
@@ -11,12 +11,14 @@
], ],
"repository": "https://github.com/dcloudio/uni-ui", "repository": "https://github.com/dcloudio/uni-ui",
"engines": { "engines": {
"HBuilderX": "" "HBuilderX": "",
"uni-app": "^4.07",
"uni-app-x": ""
}, },
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
}, },
"dcloudext": { "dcloudext": {
"sale": { "sale": {
"regular": { "regular": {
"price": "0.00" "price": "0.00"
@@ -34,49 +36,68 @@
"permissions": "无" "permissions": "无"
}, },
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue" "type": "component-vue",
"darkmode": "x",
"i18n": "x",
"widescreen": "x"
}, },
"uni_modules": { "uni_modules": {
"dependencies": ["uni-scss"], "dependencies": [
"uni-scss"
],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
"tcb": "y", "tcb": "x",
"aliyun": "y", "aliyun": "x",
"alipay": "n" "alipay": "x"
}, },
"client": { "client": {
"App": { "uni-app": {
"app-vue": "y", "vue": {
"app-nvue": "y" "vue2": "√",
"vue3": "√"
}, },
"H5-mobile": { "web": {
"Safari": "y", "safari": "√",
"Android Browser": "y", "chrome": "√"
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
}, },
"H5-pc": { "app": {
"Chrome": "y", "vue": "√",
"IE": "y", "nvue": "-",
"Edge": "y", "android": "√",
"Firefox": "y", "ios": "√",
"Safari": "y" "harmony": "√"
}, },
"小程序": { "mp": {
"微信": "y", "weixin": "√",
"阿里": "y", "alipay": "√",
"百度": "y", "toutiao": "√",
"字节跳动": "y", "baidu": "√",
"QQ": "y" "kuaishou": "-",
"jd": "-",
"harmony": "-",
"qq": "√",
"lark": "-"
}, },
"快应用": { "quickapp": {
"华为": "u", "huawei": "√",
"联盟": "u" "union": "√"
}
}, },
"Vue": { "uni-app-x": {
"vue2": "y", "web": {
"vue3": "y" "safari": "-",
"chrome": "-"
},
"app": {
"android": "-",
"ios": "-",
"harmony": "-"
},
"mp": {
"weixin": "-"
}
} }
} }
} }