Skip to content

梁建民 / wmsMin

Go to a project
Commit bff9d1fc by LJM
Options

移动端--增加滞留预警功能

parent f343b912
Inline Side-by-side
Showing with 696 additions and 173 deletions
assets/css/tally/retentionList.scss 0 → 100644
.page-box {
padding: 15rpx 22rpx;
.content {
margin-top: 24rpx;
.search {
height: 80rpx;
background: #ffffff;
border-radius: 4rpx;
padding: 0 24rpx;
.uni-input {
width: 100%;
font-weight: 600;
font-size: 28rpx;
color: #404547;
box-sizing: border-box;
}
.icon-a-juxing111 {
font-size: 30rpx;
color: #c6c7cc;
}
}
.filter-box {
padding: 20rpx 0;
.radio-item {
margin-right: 20px;
font-size: 24rpx;
}
.count {
margin-left: auto;
font-size: 24rpx;
color: #666;
text {
margin: 0 2rpx;
color: #197adb;
}
}
}
.list {
padding-bottom: 100rpx;
.box {
position: relative;
padding: 15px 17rpx 18rpx 17rpx;
background: #ffffff;
box-shadow: 0px 3rpx 3rpx 0px rgba(198, 199, 204, 0.3);
border-radius: 10rpx;
margin-bottom: 15rpx;
flex-wrap: wrap;
border: 1px solid transparent;
.input-box {
margin-bottom: 18rpx;
flex: 0 0 50%;
.bor {
height: 1px;
background-color: #f0f0f2;
color: #f0f0f2;
margin-bottom: 10rpx;
}
.label {
width: 132rpx;
font-size: 28rpx;
color: #919399;
white-space: nowrap;
}
.text {
font-size: 28rpx;
color: #484b59;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.desc {
font-size: 28rpx;
color: #484b59;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tt {
font-size: 28rpx;
color: #1969f9;
}
.pick_img_list {
flex-wrap: wrap;
.default {
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
.iconfont {
font-size: 60rpx;
color: #c6c7cc;
}
}
.img_list {
position: relative;
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
image {
width: 120rpx;
height: 120rpx;
}
.iconfont {
position: absolute;
right: 0;
top: 0;
font-size: 30rpx;
color: #ff3700;
z-index: 9;
}
}
}
}
.pick_img_list {
flex-wrap: wrap;
.default {
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
.iconfont {
font-size: 60rpx;
color: #c6c7cc;
}
}
.img_list {
position: relative;
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
image {
width: 120rpx;
height: 120rpx;
}
.iconfont {
position: absolute;
right: 0;
top: 0;
font-size: 30rpx;
color: #ff3700;
z-index: 9;
}
}
}
.btn-box {
width: 100%;
justify-content: flex-end;
.btn1 {
width: 137rpx;
height: 70rpx;
background: #1969f9;
border-radius: 8rpx;
font-size: 25rpx;
color: #ffffff;
margin-left: 14rpx;
}
}
.status-box {
position: absolute;
right: 10rpx;
top: 5rpx;
.staus_type_val {
font-size: 28rpx;
color: #1969f9;
border: 1px solid #f0f0f2;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 10rpx;
}
}
}
}
}
}
.no-date {
padding: 30rpx 0;
.iconfont {
font-size: 180rpx;
color: #c6c7cc;
margin-bottom: 30rpx;
}
.text {
font-size: 20rpx;
color: #484b59;
}
}
pages/tally/abnormalTally.vue
......@@ -198,6 +198,9 @@
pack_time_end: this.getCurrentDate()
};
},
onLoad(options) {
this.abnormal_batch = options.abnormal_batch || '';
},
onShow() {
this.getData();
},
......
pages/tally/retentionList.vue
<template>
<view class="page-box">
<!-- 搜索参数 -->
<view class="search-box row bothSide verCenter">
<view class="sn row rowCenter verCenter">
<picker @change="bindPickerChange($event,1)" :value="index" :range="array">
<view class="row verCenter">
<view class="uni-input">{{ array[index] }}</view>
<view class="uni-arrow"></view>
</view>
</picker>
</view>
<view class="search-bar row bothSide verCenter">
<view class="row verCenter" style="width: 100%;">
<text class="iconfont icon-juxing11"></text>
<input class="uni-input" placeholder="输入型号或入仓号或异常编码查询" placeholder-style="color:#919399" :focus="is_focus" v-model="searchParams.keyword" @input="handleInput" style="width: 100%;" />
</view>
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#197adb"></uni-segmented-control>
<view class="content">
<view class="search row verCenter bothSide">
<input type="text" placeholder="输入型号或入仓号或箱号查询" class="uni-input" placeholder-style="color:#404547" :focus="is_focus" @input="handleInput" v-model="searchParams.search_val" />
<text class="iconfont icon-a-juxing111" @click="clearInput()" v-if="input_flag"></text>
</view>
</view>
<view class="row radio-box">
<radio-group @change="radioChange" class="row verCenter" style="width: 100%;">
<label class="radio row verCenter">
<radio value="" style="transform:scale(0.7)" color="#197adb" />全部
</label>
<label class="radio row verCenter">
<radio value="0" style="transform:scale(0.7)" color="#197adb" />待业务处理
<view class="filter-box row verCenter bothSide">
<radio-group @change="handleTallyTypeChange">
<label class="radio-item">
<radio value="0" style="transform:scale(0.7)" color="#197adb" :checked="searchParams.tally_type === '0'" />全部
</label>
<label class="radio row verCenter">
<radio value="1" style="transform:scale(0.7)" color="#197adb" />待仓库确认
<label class="radio-item">
<radio value="2" style="transform:scale(0.7)" color="#197adb" :checked="searchParams.tally_type === '2'" />商检
</label>
<label class="radio row verCenter">
<radio value="2" style="transform:scale(0.7)" color="#197adb" />已确认
</label>
<label class="radio row verCenter">
<radio value="-1" style="transform:scale(0.7)" color="#197adb" />作废
<label class="radio-item">
<radio value="1" style="transform:scale(0.7)" color="#197adb" :checked="searchParams.tally_type === '1'" />美产
</label>
</radio-group>
<view class="count">共 <text>{{total}}</text> 条数据</view>
</view>
<view class="total-text" v-if="list.length > 0">共<text>{{total}}</text>条数据</view>
<!-- 列表区 -->
<view class="list" v-if="list.length > 0">
<view class="box row" v-for="(item, index) in list" :key="index">
<template v-if="current === 0">
<view class="input-box row verCenter bothSide" style="flex: 0 0 100%;">
<view>
<text class="tt" style="color: #000;font-weight: bold;">{{ item.entrust_no }}</text>
<text class="tt" style="color: #000;font-weight: bold;">{{ item.erp_order_sn }}</text>
</view>
<view class="row verCenter">
<text class="text" style="color: red;font-weight: bold;">{{ item.abnormal_type_val }}</text>
<text class="text" style="margin-left: 20px;font-weight: bold;">{{ item.abnormal_status_val }}</text>
<view class="column" style="align-items: flex-end;">
<text class="text" style="color: red;font-weight: bold;">{{ item.box_status_val }}</text>
<text class="text" style="margin-left: 20px;font-weight: bold;">{{ item.declaration_type_val }}</text>
</view>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;" @click="open()">
<text class="label" @click="open()">异常编码：</text>
<text class="text">{{item.abnormal_number}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">物料名称：</text>
<text class="text">{{item.goods_name}}</text>
</view>
<template v-if="item.abnormal_type == 1">
<view class="input-box row verCenter" style="flex: 0 0 100%;background-color: #eee;padding: 10rpx 0;">
<text class="label">订单型号：</text>
<text class="text">{{item.order_model}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">型号：</text>
<text class="text">{{item.model}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;background-color: #eee;padding: 10rpx 0;">
<text class="label">实物型号：</text>
<view class="text">
<rich-text :nodes="highlightDifferences(item.order_model, item.actual_model)"></rich-text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">品牌：</text>
<text class="text">{{item.brand}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">订单备注：</text>
<text class="text">{{item.order_remark}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单品牌：</text>
<text class="text">{{item.order_brand}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">入库数量：</text>
<text class="text">{{item.qty}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单产地：</text>
<text class="text">{{item.order_origin}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">原产地：</text>
<text class="text">{{item.origin}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单数量：</text>
<text class="text">{{item.order_qty}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">净重：</text>
<text class="text">{{item.net_weight}}</text>
</view>
</template>
<template v-else-if="item.abnormal_type == 2">
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单型号：</text>
<text class="text">{{item.order_model}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">理货备注：</text>
<text class="text">{{item.tally_remark}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;background-color: #eee;padding: 10rpx 0;">
<text class="label">订单品牌：</text>
<text class="text">{{item.order_brand}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">理货时间：</text>
<text class="text">{{item.tally_time}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;background-color: #eee;padding: 10rpx 0;">
<text class="label">实物品牌：</text>
<view class="text">
<rich-text :nodes="highlightDifferences(item.order_brand, item.actual_brand)"></rich-text>
<view class="input-box row" style="flex: 0 0 100%;">
<text class="label">理货照片：</text>
<view class="pick_img_list row">
<template v-if="item.tally_picture">
<view class="img_list" v-for="(v, i) in getPictureArray(item.tally_picture)" :key="i">
<image :src="v" mode="aspectFill" @click="previewChange(item.tally_picture, i)"></image>
</view>
</template>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单产地：</text>
<text class="text">{{item.order_origin}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单数量：</text>
<text class="text">{{item.order_qty}}</text>
<view class="btn-box row">
<navigator class="btn1 row rowCenter verCenter" :url="'/pages/tally/abnormalTally?abnormal_batch='+item.abnormal_batch">去装箱</navigator>
</view>
</template>
<template v-else-if="item.abnormal_type == 3">
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单型号：</text>
<text class="text">{{item.order_model}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单品牌：</text>
<text class="text">{{item.order_brand}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;background-color: #eee;padding: 10rpx 0;">
<text class="label">订单产地：</text>
<text class="text">{{item.order_origin}}</text>
<template v-if="current === 1">
<view class="input-box row verCenter bothSide" style="flex: 0 0 100%;">
<view>
<text class="tt" style="color: #000;font-weight: bold;">{{ item.box_sn }}</text>
<text class="text" style="font-weight: bold;margin-left: 100rpx;">{{ item.box_type_val }}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;background-color: #eee;padding: 10rpx 0;">
<text class="label">实物产地：</text>
<rich-text :nodes="highlightDifferences(item.order_origin, item.actual_origin)"></rich-text>
<view class="column" style="align-items: flex-end;">
<text class="text" style="margin-left: 20px;font-weight: bold;color: red;">{{ item.box_status_val }}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单数量：</text>
<text class="text">{{item.order_qty}}</text>
</view>
</template>
<template v-else-if="item.abnormal_type == 4">
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单型号：</text>
<text class="text">{{item.order_model}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">订单号：</text>
<text class="text">{{item.erp_order_sn.join(',')}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单品牌：</text>
<text class="text">{{item.order_brand}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">型号数：</text>
<text class="text">{{item.model_num}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单产地：</text>
<text class="text">{{item.order_origin}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">更新时间：</text>
<text class="text">{{item.update_time}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.update_user}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;background-color: #eee;padding: 10rpx 0;">
<text class="label">订单数量：</text>
<text class="text">{{item.order_qty}}</text>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">创建时间：</text>
<text class="text">{{item.create_time}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.create_user}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;background-color: #eee;padding: 10rpx 0;">
<text class="label">实物数量：</text>
<rich-text :nodes="highlightDifferences(item.order_qty, item.actual_qty)"></rich-text>
<view class="btn-box row">
<navigator class="btn1 row rowCenter verCenter" :url="'/pages/tally/goodsDetail?wsty_id='+item.wsty_id+'&box_sn='+item.box_sn+'&box_type='+item.box_type+'&tally_status='+item.tally_status">详情</navigator>
<view class="btn1 row rowCenter verCenter" @click="getBoxStatus(item.box_sn,item.wsty_id)">去封箱</view>
</view>
</template>
<template v-else>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单型号：</text>
<text class="text">{{item.order_model}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单品牌：</text>
<text class="text">{{item.order_brand}}</text>
<template v-if="current === 2">
<view class="input-box row verCenter bothSide" style="flex: 0 0 100%;">
<view>
<text class="tt" style="color: #000;font-weight: bold;">{{ item.box_sn }}</text>
<text class="text" style="font-weight: bold;margin-left: 100rpx;">{{ item.box_type_val }}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单产地：</text>
<text class="text">{{item.order_origin}}</text>
<view class="column" style="align-items: flex-end;">
<text class="text" style="margin-left: 20px;font-weight: bold;color: red;">{{ item.box_status_val }}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;padding: 10rpx 0;">
<text class="label">订单数量：</text>
<text class="text">{{item.order_qty}}</text>
</view>
</template>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">异常说明：</text>
<text class="text" style="max-width: 500rpx;" @click="show(item.abnormal_explain)">{{item.abnormal_explain}}</text>
<text class="label">订单号：</text>
<text class="text">{{item.erp_order_sn.join(',')}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">业务回复：</text>
<text class="text" style="color: red;" @click="show(item.handle_explain)">{{item.handle_explain}}</text>
<text class="label">型号数：</text>
<text class="text">{{item.model_num}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">创建时间：</text>
<text class="text">{{item.create_time}}</text>
<text class="label">封箱时间：</text>
<text class="text">{{item.close_box_time}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.close_box_user}}</text>
</view>
<view class="input-box row verCenter" style="flex: 0 0 100%;">
<text class="label">回复时间：</text>
<text class="text">{{item.salesman_handle_time}}</text>
</view>
<view class="input-box row" style="flex: 0 0 100%;">
<text class="label">异常图片：</text>
<view class="pick_img_list row">
<template v-if="item.abnormal_pic_urls.length > 0">
<view class="img_list" v-for="(v, i) in item.abnormal_pic_urls" :key="i">
<image :src="v" mode="aspectFill" @click="previewChange(item.abnormal_pic_urls,i)"></image>
</view>
</template>
</view>
<text class="label">创建时间：</text>
<text class="text">{{item.create_time}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.create_user}}</text>
</view>
<view class="btn-box row">
<!-- 除“作废”状态的异常，其他状态异常均可作废 -->
<template v-if="item.abnormal_status != -1">
<view class="btn1 row rowCenter verCenter" @click="cancelAbnormal(item.abnormal_id)">作废</view>
</template>
<!-- 仅“待仓库确认”时可操作 -->
<template v-if="item.abnormal_status == 1">
<view class="btn2 row rowCenter verCenter" @click="confirmAbnormal(item.abnormal_id)">确认</view>
</template>
<navigator class="btn1 row rowCenter verCenter" :url="'/pages/tally/goodsDetail?wsty_id='+item.wsty_id+'&box_sn='+item.box_sn+'&box_type='+item.box_type+'&tally_status='+item.tally_status">详情</navigator>
</view>
</template>
</view>
</view>
<!-- 无数据展示 -->
......@@ -208,6 +153,7 @@
<text class="text">查不到当前数据</text>
</view>
</view>
</view>
</template>
<script>
......@@ -221,24 +167,15 @@
page: 1,
limit: 10,
list: [],
index: 0,
array: ['全量搜索'],
detail: {}, //详情
input_flag: false,
entrust_no: '', //入仓号
total: 0,
items: ['', '', ''],
input_flag: false,
is_focus: true, //获取焦点动态化
hasMoreData: true, //是否分页加载
orderDetailByIdList: [],
orderDetailByIdIndex: -1,
allOrderDataByEntrustNoList: [],
allOrderDataByEntrustNoIndex: -1,
order_id: '',
erp_order_sn: '',
salesman: '',
current: 0,
searchParams: {
keyword: '',
abnormal_status: ''
search_val: '',
type: '1', //获取数据类型 1.已理货未装箱，2.已装箱未封箱，3.已封箱未报关
tally_type: '0' //理货类型 0.全部 1.美产2.商检
}
};
},
......@@ -249,25 +186,146 @@
this.page++;
this.getData();
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
this.open();
}
},
onShow() {
if (this.noexebshowFalg) {
this.resetChange();
this.getData();
}
},
methods: {
getData() {
if (!this.noexebshowFalg) {
this.noexebshowFalg = true; // 重置标志位
return;
}
this.request(API.getRetentionList, 'GET', { page: this.page, limit: this.limit, ...this.searchParams }, true).then(res => {
if (res.err_code === 0) {
this.items[0] = `已理货未装箱 (${res.data.retentionDetail.unBoxedQty})`;
this.items[1] = `已装箱未封箱 (${res.data.retentionDetail.unCloseBoxQty})`;
this.items[2] = `已装箱未封箱 (${res.data.retentionDetail.unPlateQty})`;
this.total = res.data.total;
if (res.data.list.length > 0) {
this.hasMoreData = true;
this.list = this.list.concat(res.data.list);
} else {
this.hasMoreData = false;
}
this.$forceUpdate();
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
},
/**
* 全量搜索
* @param {Object} event
*/
handleInput: debounce(function(event) {
const val = event.target.value?.trim() || '';
// 重置列表和分页
this.resetChange();
// 更新搜索参数和输入状态
this.searchParams.keyword = val;
this.input_flag = Boolean(val);
// 获取数据
this.getData();
}, 500),
/**
* 去封箱
*/
getBoxStatus(box_sn, wsty_id) {
this.request(API.getBoxStatus, 'POST', { box_sn: box_sn }, true).then(res => {
if (res.err_code === 0) {
if (res.data == 1) {
uni.navigateTo({
url: '/pages/tally/closeBox?box_sn=' + box_sn + '&wsty_id=' + wsty_id
})
} else {
uni.showModal({
title: '',
content: `只有理货中的箱号才可封箱，请重新开箱`,
showCancel: false,
success: (res) => {
if (res.confirm) {
}
}
});
}
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
},
/**
* tab切换监听
* @param {Object} e
*/
onClickItem(e) {
if (this.current != e.currentIndex) {
this.current = e.currentIndex;
// 根据当前选项卡更新type值
this.searchParams.type = String(e.currentIndex + 1);
// 重置列表并重新获取数据
this.resetChange();
this.getData();
}
},
/**
* 将逗号分隔的图片字符串转换为数组
*/
getPictureArray(pictures) {
return pictures ? pictures.split(',').filter(Boolean) : [];
},
/**
* 预览图片
*/
previewChange(pictures, index) {
this.noexebshowFalg = false;
const imgArray = this.getPictureArray(pictures);
uni.previewImage({
current: imgArray[index],
urls: imgArray
});
},
/**
* 重置
*/
resetChange() {
this.list = [];
this.page = 1;
},
/**
* 再次获取焦点
*/
clearInput() {
this.searchParams.search_val = '';
this.input_flag = false; //关闭叉叉
this.is_focus = false;
setTimeout(() => {
this.is_focus = true;
}, 200);
},
/**
* 理货类型切换
* @param {Object} e
*/
handleTallyTypeChange(e) {
this.searchParams.tally_type = e.detail.value;
this.resetChange();
this.getData();
}
}
};
</script>
<style scoped lang="scss">
@import '@/assets/css/tally/abnormalManageList.scss';
@import '@/assets/css/tally/retentionList.scss';
</style>
\ No newline at end of file
uni_modules/uni-segmented-control/changelog.md 0 → 100644
## 1.2.3（2024-04-02）
- 修复 修复在微信小程序下inactiveColor失效bug
## 1.2.2（2024-03-28）
- 修复 在vue2下:style动态绑定导致编译失败的bug
## 1.2.1（2024-03-20）
- 新增 inActiveColor属性，可供配置未激活时的颜色
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-segmented-control](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.5（2021-05-12）
- 新增 项目示例地址
## 1.0.4（2021-02-05）
- 调整为uni_modules目录规范
uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue 0 → 100644
<template>
<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]" :style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
<view v-for="(item, index) in values" :class="[styleType === 'text' ? '' : 'segmented-control__item--button',
index === 0 && styleType === 'button' ? 'segmented-control__item--button--first' : '',
index === values.length - 1 && styleType === 'button' ? 'segmented-control__item--button--last':'']" :key="index" :style="{backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : styleType === 'button' ?inActiveColor:'transparent', borderColor: index === currentIndex && styleType === 'text' || styleType === 'button' ? activeColor : inActiveColor}" class="segmented-control__item" @click="_onClick(index)">
<view>
<text :style="{color:index === currentIndex? styleType === 'text'? activeColor: '#fff': styleType === 'text'? '#000': activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
</view>
</view>
</view>
</template>
<script>
/**
* SegmentedControl 分段器
* @description 用作不同视图的显示
* @tutorial https://ext.dcloud.net.cn/plugin?id=54
* @property {Number} current 当前选中的tab索引值，从0计数
* @property {String} styleType = [button|text] 分段器样式类型
* @value button 按钮类型
* @value text 文字类型
* @property {String} activeColor 选中的标签背景色与边框颜色
* @property {String} inActiveColor 未选中的标签背景色与边框颜色
* @property {Array} values 选项数组
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
*/
export default {
name: 'UniSegmentedControl',
emits: ['clickItem'],
props: {
current: {
type: Number,
default: 0
},
values: {
type: Array,
default () {
return []
}
},
activeColor: {
type: String,
default: '#2979FF'
},
inActiveColor: {
type: String,
default: 'transparent'
},
styleType: {
type: String,
default: 'button'
}
},
data() {
return {
currentIndex: 0
}
},
watch: {
current(val) {
if (val !== this.currentIndex) {
this.currentIndex = val
}
}
},
computed: {},
created() {
this.currentIndex = this.current
},
methods: {
_onClick(index) {
if (this.currentIndex !== index) {
this.currentIndex = index
this.$emit('clickItem', {
currentIndex: index
})
}
}
}
}
</script>
<style lang="scss" scoped>
.segmented-control {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
height: 36px;
overflow: hidden;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.segmented-control__item {
/* #ifndef APP-NVUE */
display: inline-flex;
box-sizing: border-box;
/* #endif */
position: relative;
flex: 1;
justify-content: center;
align-items: center;
transition: all 0.4s ease;
}
.segmented-control__item--button {
border-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 0;
}
.segmented-control__item--button--first {
border-left-width: 1px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.segmented-control__item--button--last {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.segmented-control__item--text {
border-bottom-style: solid;
border-bottom-width: 2px;
padding: 6px 0;
}
.segmented-control__text {
font-size: 12px;
line-height: 20px;
text-align: center;
}
</style>
\ No newline at end of file
uni_modules/uni-segmented-control/package.json 0 → 100644
{
"id": "uni-segmented-control",
"displayName": "uni-segmented-control 分段器",
"version": "1.2.3",
"description": "分段器由至少 2 个分段控件组成，用作不同视图的显示",
"keywords": [
"uni-ui",
"uniui",
"分段器",
"segement",
"顶部选择"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
uni_modules/uni-segmented-control/readme.md 0 → 100644
## SegmentedControl 分段器
> **组件名：uni-segmented-control**
> 代码块： `uSegmentedControl`
用作不同视图的显示
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
util/api.js
......@@ -401,7 +401,11 @@ const API = {
/**
* 历史理货图片
*/
getHistoryPic: API_BASE + '/supplywechatwms/getHistoryPic'
getHistoryPic: API_BASE + '/supplywechatwms/getHistoryPic',
/**
* 滞留数据详情
*/
getRetentionList: API_BASE + '/supplywechatwms/getRetentionList'
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment