336 lines
7.6 KiB
Vue
336 lines
7.6 KiB
Vue
<template>
|
||
<view class="container">
|
||
<custom-navbar title="选择员工" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
|
||
backgroundColor="linear-gradient( 134deg, #F52540 0%, #FF4767 100%)"
|
||
titleColor="#fff" borderBottom="none"></custom-navbar>
|
||
<searchBox placeholder="输入员工名/手机号" v-model="queryData.str_val" :showAdd="false" @confirm="search"
|
||
@search="search">
|
||
</searchBox>
|
||
<!-- Tab 内容区域 -->
|
||
<div class="tab-nav">
|
||
<div v-for="tab in tabs" :key="tab.id" class="tab-item" :class="{ active: queryData.state === tab.id }"
|
||
@click="switchTab(tab.id)">
|
||
{{ tab.name }}
|
||
</div>
|
||
</div>
|
||
<CommonList ref="groupRef" apiUrl="/sj/sryservers" @load-success="loadSuccess"
|
||
:listScrollHeight="`calc(100vh - ${statusBarHeight + 302}rpx)`">
|
||
<template #listData="{ list }">
|
||
<view class="syr-list">
|
||
<view class="syr-item flex-row-center" v-for="(item, index) in syrList" :key="index" @click="goDetail(item)">
|
||
<view @click.stop="changeType(item)">
|
||
<image src="/static/images/shop/pintuan/radioYes.png" mode="aspectFill"
|
||
class="syr-card-left__img" v-if="item.isSelect"></image>
|
||
<view class="syr-card-left" v-else>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="syr-item-right flex-row-start">
|
||
<image :src="item.head_photo" class="item-right-photo"></image>
|
||
<view class="item-right-texts">
|
||
<view class="item-right-text1">{{ item.name }}</view>
|
||
<view class="item-right-text2">绑定时间:{{ item.bind_time }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 空数据状态 -->
|
||
<template #empty>
|
||
<noData></noData>
|
||
</template>
|
||
</CommonList>
|
||
|
||
<view class="container-footer">
|
||
<view class="container-footer-tip">{{ queryData.state==2?"批量选择员工后，进行批量分配操作":"批量选择员工后，进行批量取消操作" }}</view>
|
||
<view class="container-button flex-row-center-center" @click="makesyr">
|
||
{{ queryData.state==2?"批量分配":"批量取消" }}
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "@/utils/request";
|
||
import searchBox from "./components/search-box.vue";
|
||
import CommonList from "@/components/common/CommonList.vue";
|
||
export default {
|
||
components: {
|
||
searchBox,
|
||
CommonList,
|
||
},
|
||
data() {
|
||
return {
|
||
syrList: [],
|
||
isSubmit: false,
|
||
queryData: {
|
||
state: 2,
|
||
str_val: "",
|
||
},
|
||
userInfo: {},
|
||
statusBarHeight: 0,
|
||
tabs: [{
|
||
id: 2,
|
||
name: "未分配",
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "已分配",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
async onLoad(options) {
|
||
if (options.server_id) {
|
||
this.queryData.server_id = Number(options.server_id);
|
||
}
|
||
let type = 3;
|
||
let result = await request.post("/user/getuser", {
|
||
type,
|
||
});
|
||
this.userInfo = result.data;
|
||
this.queryData.sjid = this.userInfo.id;
|
||
this.statusBarHeight = this.getRpxStatusBarHeight();
|
||
this.$nextTick(() => {
|
||
this.search();
|
||
});
|
||
},
|
||
// 核心：新增计算属性，实时筛选选中的id
|
||
computed: {
|
||
selectedIds() {
|
||
// 筛选出isSelect为true的项，提取id组成数组
|
||
return this.syrList.filter(item => item.isSelect).map(item => item.syr_id);
|
||
}
|
||
},
|
||
methods: {
|
||
goDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/shop/staff/staffDetail?syrid=${item.syr_id}`,
|
||
});
|
||
},
|
||
loadSuccess(res) {
|
||
this.syrList = res.list
|
||
},
|
||
search() {
|
||
this.$refs.groupRef.manualRefresh(this.queryData);
|
||
},
|
||
// 切换 Tab 的方法
|
||
switchTab(tabId) {
|
||
this.queryData.state = tabId;
|
||
this.$nextTick(() => {
|
||
this.search();
|
||
});
|
||
},
|
||
changeType(item) {
|
||
// 先获取当前isSelect值（初始为undefined，取反为true）
|
||
const newIsSelect = !item.isSelect;
|
||
// 用$set添加/修改响应式属性
|
||
this.$set(item, 'isSelect', newIsSelect);
|
||
// item.name = item.isSelect
|
||
},
|
||
makesyr() {
|
||
|
||
if (this.isSubmit) {
|
||
return
|
||
}
|
||
if (this.selectedIds.length == 0) {
|
||
uni.showToast({
|
||
title: "请选择手艺人",
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
this.isSubmit = true
|
||
request
|
||
.post("/sj/makesyr", {
|
||
sjid: this.userInfo.id,
|
||
server_id: this.queryData.server_id,
|
||
syr_arr: this.selectedIds,
|
||
type: this.queryData.state == 2 ? 1 : 2
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: this.queryData.state == 2 ? "分配成功" : "取消成功",
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
this.$nextTick(() => {
|
||
this.search();
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: '网络异常，请稍后重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}).finally(() => {
|
||
this.isSubmit = false
|
||
});
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
page {
|
||
background: linear-gradient(to top, #fff, #F5F5F5);
|
||
}
|
||
|
||
.container {
|
||
.tab-nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 91rpx;
|
||
background: #fff;
|
||
|
||
.tab-item {
|
||
padding: 30rpx 0rpx 30rpx 0rpx;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
/* 预先设置透明边框，防止切换时布局跳动 */
|
||
&.active {
|
||
color: #FF4767;
|
||
font-weight: 500;
|
||
position: relative;
|
||
|
||
&:after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 17rpx; // 定位在底部边框的下方
|
||
left: 50%;
|
||
transform: translateX(-50%); // 水平居中
|
||
|
||
/* 激活时显示红色边框 */
|
||
width: 34rpx;
|
||
height: 6rpx;
|
||
background: linear-gradient(306deg, #FF4767 0%, #fc563b 100%);
|
||
border-radius: 3rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.syr-list {
|
||
.syr-item {
|
||
margin: 20rpx;
|
||
padding: 20rpx 30rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
|
||
.syr-card-left {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 4rpx solid #CDCFD2;
|
||
border-radius: 40rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.syr-card-left__img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.syr-item-right {
|
||
.item-right-photo {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.item-right-texts {
|
||
flex: 1;
|
||
|
||
.item-right-text1 {
|
||
margin-top: 8rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.item-right-text2 {
|
||
margin-top: 8rpx;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.container-footer {
|
||
position: fixed;
|
||
bottom: 20rpx;
|
||
left: 0rpx;
|
||
right: 0;
|
||
|
||
.container-footer-tip {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.container-button {
|
||
margin: 0 20rpx;
|
||
width: 710rpx;
|
||
height: 98rpx;
|
||
background: #FF4767;
|
||
border-radius: 49rpx;
|
||
font-weight: 400;
|
||
font-size: 38rpx;
|
||
color: #ffffff;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.common-list {
|
||
border-radius: 30rpx 30rpx 0rpx 0rpx !important;
|
||
background: #f5f5f5 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
::v-deep .list-container {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
::v-deep .load-tips {
|
||
padding-bottom: 200rpx !important;
|
||
}
|
||
|
||
::v-deep .list-scroll {
|
||
margin-top: 0 !important;
|
||
}
|
||
</style> |