2026-03-24 11:45:13 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="container">
|
|
|
|
|
|
<custom-navbar title="选择员工" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
|
2026-06-02 11:39:23 +08:00
|
|
|
|
backgroundColor="linear-gradient( 134deg, #F52540 0%, #FF4767 100%)"
|
2026-03-24 11:45:13 +08:00
|
|
|
|
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 {
|
2026-06-02 11:39:23 +08:00
|
|
|
|
color: #FF4767;
|
2026-03-24 11:45:13 +08:00
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 17rpx; // 定位在底部边框的下方
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translateX(-50%); // 水平居中
|
|
|
|
|
|
|
|
|
|
|
|
/* 激活时显示红色边框 */
|
|
|
|
|
|
width: 34rpx;
|
|
|
|
|
|
height: 6rpx;
|
2026-06-02 11:39:23 +08:00
|
|
|
|
background: linear-gradient(306deg, #FF4767 0%, #fc563b 100%);
|
2026-03-24 11:45:13 +08:00
|
|
|
|
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;
|
2026-06-02 11:39:23 +08:00
|
|
|
|
background: #FF4767;
|
2026-03-24 11:45:13 +08:00
|
|
|
|
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>
|
