From 656d6f8029f8bf9b2daa9dcc89101a879a70b860 Mon Sep 17 00:00:00 2001
From: wlzboy <66905212@qq.com>
Date: 星期三, 03 十二月 2025 23:10:05 +0800
Subject: [PATCH] feat:优先添加执行人
---
app/pagesTask/components/StaffSelector.vue | 646 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 646 insertions(+), 0 deletions(-)
diff --git a/app/pagesTask/components/StaffSelector.vue b/app/pagesTask/components/StaffSelector.vue
new file mode 100644
index 0000000..55c5391
--- /dev/null
+++ b/app/pagesTask/components/StaffSelector.vue
@@ -0,0 +1,646 @@
+<template>
+ <view class="staff-selector-component">
+ <view class="form-item">
+ <view class="form-label" :class="{ required: required }">{{ label }}</view>
+ <view class="staff-list">
+ <view class="staff-item" v-for="(staff, index) in selectedStaff" :key="staff.userId">
+ <view class="staff-info">
+ <text class="staff-name">{{ staff.nickName }}</text>
+ </view>
+ <uni-icons
+ v-if="canRemove(index)"
+ type="closeempty"
+ size="20"
+ color="#ff4d4f"
+ @click="removeStaff(index)"
+ ></uni-icons>
+ <uni-icons
+ v-else
+ type="checkmarkempty"
+ size="20"
+ color="#007AFF"
+ ></uni-icons>
+ </view>
+ <view class="add-staff" @click="showStaffSelector">
+ <uni-icons type="plusempty" size="20" color="#007AFF"></uni-icons>
+ <text>娣诲姞浜哄憳</text>
+ </view>
+ </view>
+ </view>
+
+ <!-- 浜哄憳閫夋嫨寮圭獥 -->
+ <uni-popup ref="staffPopup" type="bottom" :safe-area="true">
+ <view class="staff-selector-popup">
+ <view class="popup-header">
+ <view class="popup-title">閫夋嫨鎵ц浜哄憳</view>
+ <view class="popup-close" @click="closeStaffSelector">
+ <uni-icons type="closeempty" size="24" color="#333"></uni-icons>
+ </view>
+ </view>
+
+ <view class="search-box">
+ <uni-icons type="search" size="18" color="#999"></uni-icons>
+ <input
+ class="search-input"
+ placeholder="鎼滅储濮撳悕銆佹墜鏈哄彿"
+ v-model="staffSearchKeyword"
+ @input="onStaffSearch"
+ />
+ </view>
+
+ <view class="staff-filter">
+ <view
+ class="filter-item"
+ :class="{ active: staffFilterType === 'driver' }"
+ @click="filterStaff('driver')"
+ >鍙告満</view>
+ <view
+ class="filter-item"
+ :class="{ active: staffFilterType === 'doctor' }"
+ @click="filterStaff('doctor')"
+ >鍖荤敓</view>
+ <view
+ class="filter-item"
+ :class="{ active: staffFilterType === 'nurse' }"
+ @click="filterStaff('nurse')"
+ >鎶ゅ＋</view>
+ </view>
+
+ <scroll-view class="staff-list-popup" scroll-y="true">
+ <view
+ class="staff-item-popup"
+ v-for="staff in filteredStaffList"
+ :key="staff.userId"
+ @click="toggleStaffSelection(staff)"
+ >
+ <view class="staff-info">
+ <view class="staff-name-row">
+ <text class="staff-name">{{ staff.nickName }}</text>
+ <text class="staff-phone">{{ staff.phonenumber }}</text>
+ </view>
+ <view class="staff-detail-row">
+ <text class="staff-dept">{{ staff.deptName }}</text>
+ </view>
+ </view>
+ <uni-icons
+ v-if="isStaffSelected(staff.userId)"
+ type="checkmarkempty"
+ size="24"
+ color="#007AFF"
+ ></uni-icons>
+ <view v-else class="checkbox-empty"></view>
+ </view>
+
+ <view class="no-data" v-if="filteredStaffList.length === 0">
+ <uni-icons type="info" size="40" color="#ccc"></uni-icons>
+ <text>鏆傛棤浜哄憳鏁版嵁</text>
+ </view>
+ </scroll-view>
+
+ <view class="popup-footer">
+ <button class="cancel-btn" @click="closeStaffSelector">鍙栨秷</button>
+ <button class="confirm-btn" @click="confirmStaffSelection">纭畾(宸查�墈{ selectedStaff.length }})</button>
+ </view>
+ </view>
+ </uni-popup>
+ </view>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
+import { listBranchUsers } from "@/api/system/user"
+
+export default {
+ name: 'StaffSelector',
+ components: {
+ uniPopup
+ },
+ props: {
+ // 宸查�夋嫨鐨勪汉鍛樺垪琛�
+ value: {
+ type: Array,
+ default: () => []
+ },
+ // 鏍囩鏂囨湰
+ label: {
+ type: String,
+ default: '鎵ц浠诲姟浜哄憳'
+ },
+ // 鏄惁蹇呭～
+ required: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁鑷姩娣诲姞褰撳墠鐢ㄦ埛
+ autoAddCurrentUser: {
+ type: Boolean,
+ default: true
+ },
+ // 褰撳墠鐢ㄦ埛鏄惁鍙Щ闄�
+ currentUserRemovable: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ selectedStaff: [],
+ allStaffList: [],
+ filteredStaffList: [],
+ staffSearchKeyword: '',
+ staffFilterType: 'driver' // 榛樿閫変腑鍙告満
+ }
+ },
+ computed: {
+ ...mapState({
+ currentUser: state => ({
+ userId: state.user.userId,
+ nickName: state.user.nickName || '寮犱笁',
+ phonenumber: state.user.phonenumber || '',
+ deptId: state.user.deptId || 100,
+ posts: state.user.posts || [],
+ roles: state.user.roles || [],
+ dept: state.user.dept || null
+ })
+ })
+ },
+ watch: {
+ value: {
+ handler(newVal) {
+ if (newVal && Array.isArray(newVal)) {
+ this.selectedStaff = [...newVal]
+ }
+ },
+ immediate: true,
+ deep: true
+ }
+ },
+ mounted() {
+ this.loadStaffList()
+
+ // 濡傛灉闇�瑕佽嚜鍔ㄦ坊鍔犲綋鍓嶇敤鎴蜂笖閫変腑浜哄憳涓虹┖
+ if (this.autoAddCurrentUser && this.selectedStaff.length === 0) {
+ this.initWithCurrentUser()
+ }
+ },
+ methods: {
+ // 鍒濆鍖栭�変腑鐨勪汉鍛橈紙榛樿鍖呭惈褰撳墠鐢ㄦ埛锛�
+ initWithCurrentUser() {
+ const currentUserStaff = {
+ userId: this.currentUser.userId,
+ nickName: this.currentUser.nickName,
+ phonenumber: this.currentUser.phonenumber,
+ deptId: this.currentUser.deptId,
+ posts: this.currentUser.posts || [],
+ roles: this.currentUser.roles || [],
+ dept: this.currentUser.dept || null
+ }
+
+ // 鑾峰彇褰撳墠鐢ㄦ埛鐨勬墍鏈夎鑹茬被鍨嬶紙鍙兘鏈夊涓級
+ currentUserStaff.types = this.getUserTypes(currentUserStaff)
+ currentUserStaff.type = currentUserStaff.types[0] || 'driver' // 涓昏绫诲瀷
+
+ this.selectedStaff = [currentUserStaff]
+ this.emitChange()
+ },
+
+ // 鍔犺浇浜哄憳鍒楄〃
+ loadStaffList() {
+ listBranchUsers().then(response => {
+ const userList = response.data || []
+
+ this.allStaffList = userList.map(user => ({
+ userId: user.userId,
+ nickName: user.nickName,
+ phonenumber: user.phonenumber,
+ deptName: user.dept?.deptName || '',
+ postName: user.posts && user.posts.length > 0 ? user.posts[0].postName : '',
+ roleName: user.roles && user.roles.length > 0 ? user.roles[0].roleName : '',
+ posts: user.posts || [],
+ roles: user.roles || [],
+ dept: user.dept || null,
+ // 鏀寔澶氱绫诲瀷
+ types: this.getUserTypes(user),
+ type: this.getUserTypes(user)[0] || 'driver' // 涓昏绫诲瀷锛堢敤浜庡悜鍚庡吋瀹癸級
+ }))
+
+ this.filterStaffList()
+ }).catch(error => {
+ console.error('鍔犺浇浜哄憳鍒楄〃澶辫触:', error)
+ this.$modal.showToast('鍔犺浇浜哄憳鍒楄〃澶辫触')
+ })
+ },
+
+ // 鏍规嵁鐢ㄦ埛鐨勫矖浣嶆垨瑙掕壊鍒ゆ柇鎵�鏈夌被鍨嬶紙鏀寔澶氱韬唤锛�
+ getUserTypes(user) {
+ const types = []
+ const postNames = user.posts ? user.posts.map(p => p.postName).join('') : ''
+ const roleNames = user.roles ? user.roles.map(r => r.roleName).join('') : ''
+ const deptName = user.dept?.deptName || ''
+
+ // 鍒ゆ柇鏄惁涓哄徃鏈�
+ if (postNames.includes('鍙告満') || roleNames.includes('鍙告満') ||
+ deptName.includes('杞﹂槦') || deptName.includes('鍙告満')) {
+ types.push('driver')
+ }
+
+ // 鍒ゆ柇鏄惁涓哄尰鐢�
+ if (postNames.includes('鍖荤敓') || roleNames.includes('鍖荤敓') ||
+ deptName.includes('鍖荤敓') || deptName.includes('鍖绘姢')) {
+ types.push('doctor')
+ }
+
+ // 鍒ゆ柇鏄惁涓烘姢澹�
+ if (postNames.includes('鎶ゅ＋') || roleNames.includes('鎶ゅ＋') || deptName.includes('鎶ゅ＋')) {
+ types.push('nurse')
+ }
+
+ // 濡傛灉娌℃湁鍖归厤鍒颁换浣曠被鍨嬶紝榛樿涓哄徃鏈�
+ if (types.length === 0) {
+ types.push('driver')
+ }
+
+ return types
+ },
+
+ // 鑾峰彇绫诲瀷鍚嶇О
+ getUserTypeName(staffType) {
+ const typeMap = {
+ 'driver': '鍙告満',
+ 'doctor': '鍖荤敓',
+ 'nurse': '鎶ゅ＋'
+ }
+ return typeMap[staffType] || staffType || '鍙告満'
+ },
+
+ // 鏄剧ず浜哄憳閫夋嫨寮圭獥
+ showStaffSelector() {
+ this.$refs.staffPopup.open()
+ this.filterStaffList()
+ },
+
+ // 鍏抽棴浜哄憳閫夋嫨寮圭獥
+ closeStaffSelector() {
+ this.$refs.staffPopup.close()
+ this.staffSearchKeyword = ''
+ this.staffFilterType = 'driver' // 閲嶇疆涓洪粯璁ゅ徃鏈�
+ },
+
+ // 浜哄憳鎼滅储
+ onStaffSearch(e) {
+ this.staffSearchKeyword = e.detail.value
+ this.filterStaffList()
+ },
+
+ // 绛涢�変汉鍛樼被鍨�
+ filterStaff(type) {
+ this.staffFilterType = type
+ this.filterStaffList()
+ },
+
+ // 杩囨护浜哄憳鍒楄〃
+ filterStaffList() {
+ let list = [...this.allStaffList]
+
+ // 鎸夊叧閿瘝鎼滅储
+ if (this.staffSearchKeyword && this.staffSearchKeyword.trim() !== '') {
+ const keyword = this.staffSearchKeyword.trim().toLowerCase()
+ list = list.filter(staff => {
+ return staff.nickName.toLowerCase().includes(keyword) ||
+ (staff.phonenumber && staff.phonenumber.includes(keyword))
+ })
+ }
+
+ // 鏍规嵁閫変腑鐨勭被鍨嬶紝灏嗘湁璇ヨ韩浠界殑浜烘帓鍦ㄥ墠闈�
+ list.sort((a, b) => {
+ const aHasType = a.types.includes(this.staffFilterType)
+ const bHasType = b.types.includes(this.staffFilterType)
+
+ if (aHasType && !bHasType) return -1 // a鏈夎韬唤锛屾帓鍓嶉潰
+ if (!aHasType && bHasType) return 1 // b鏈夎韬唤锛屾帓鍓嶉潰
+ return 0 // 閮芥湁鎴栭兘娌℃湁锛屼繚鎸佸師椤哄簭
+ })
+
+ this.filteredStaffList = list
+ },
+
+ // 鍒囨崲浜哄憳閫変腑鐘舵��
+ toggleStaffSelection(staff) {
+ const index = this.selectedStaff.findIndex(s => s.userId === staff.userId)
+
+ if (index > -1) {
+ // 濡傛灉鏄涓�涓笖涓嶅彲绉婚櫎锛堝綋鍓嶇敤鎴凤級锛屼笉鍏佽绉婚櫎
+ if (!this.canRemove(index)) {
+ this.$modal.showToast('褰撳墠鐢ㄦ埛涓嶈兘绉婚櫎')
+ return
+ }
+ // 宸查�変腑锛岀Щ闄�
+ this.selectedStaff.splice(index, 1)
+ } else {
+ // 鏈�変腑锛屾坊鍔�
+ this.selectedStaff.push({ ...staff })
+ }
+ },
+
+ // 鍒ゆ柇浜哄憳鏄惁宸查�変腑
+ isStaffSelected(userId) {
+ return this.selectedStaff.some(staff => staff.userId === userId)
+ },
+
+ // 鍒ゆ柇鏄惁鍙互绉婚櫎
+ canRemove(index) {
+ // 濡傛灉鏄涓�涓笖褰撳墠鐢ㄦ埛涓嶅彲绉婚櫎
+ if (index === 0 && !this.currentUserRemovable) {
+ return false
+ }
+ return true
+ },
+
+ // 纭浜哄憳閫夋嫨
+ confirmStaffSelection() {
+ if (this.selectedStaff.length === 0) {
+ this.$modal.showToast('璇疯嚦灏戦�夋嫨涓�鍚嶄汉鍛�')
+ return
+ }
+ this.emitChange()
+ this.closeStaffSelector()
+ },
+
+ // 绉婚櫎浜哄憳
+ removeStaff(index) {
+ if (!this.canRemove(index)) {
+ this.$modal.showToast('褰撳墠鐢ㄦ埛涓嶈兘绉婚櫎')
+ return
+ }
+ this.selectedStaff.splice(index, 1)
+ this.emitChange()
+ },
+
+ // 瑙﹀彂change浜嬩欢
+ emitChange() {
+ this.$emit('input', this.selectedStaff)
+ this.$emit('change', this.selectedStaff)
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.staff-selector-component {
+ .form-item {
+ margin-bottom: 40rpx;
+
+ .form-label {
+ font-size: 28rpx;
+ margin-bottom: 15rpx;
+ color: #333;
+
+ &.required::before {
+ content: '*';
+ color: #ff4d4f;
+ margin-right: 4rpx;
+ font-weight: bold;
+ }
+ }
+
+ .staff-list {
+ .staff-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20rpx;
+ background-color: #f9f9f9;
+ border-radius: 10rpx;
+ margin-bottom: 20rpx;
+
+ .staff-info {
+ flex: 1;
+
+ .staff-name {
+ font-size: 28rpx;
+ color: #333;
+ margin-right: 10rpx;
+ display: block;
+ margin-bottom: 8rpx;
+ }
+
+ .staff-roles {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8rpx;
+
+ .staff-role {
+ font-size: 22rpx;
+ color: white;
+ background-color: #007AFF;
+ padding: 4rpx 12rpx;
+ border-radius: 6rpx;
+ }
+ }
+ }
+ }
+
+ .add-staff {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20rpx;
+ border: 1rpx dashed #007AFF;
+ border-radius: 10rpx;
+ color: #007AFF;
+
+ text {
+ margin-left: 10rpx;
+ }
+ }
+ }
+ }
+}
+
+// 浜哄憳閫夋嫨寮圭獥鏍峰紡
+.staff-selector-popup {
+ background-color: white;
+ border-radius: 20rpx 20rpx 0 0;
+ max-height: 80vh;
+ display: flex;
+ flex-direction: column;
+
+ .popup-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 30rpx;
+ border-bottom: 1rpx solid #f0f0f0;
+ flex-shrink: 0;
+
+ .popup-title {
+ font-size: 32rpx;
+ font-weight: bold;
+ color: #333;
+ }
+
+ .popup-close {
+ padding: 10rpx;
+ }
+ }
+
+ .search-box {
+ display: flex;
+ align-items: center;
+ margin: 20rpx 30rpx;
+ padding: 15rpx 20rpx;
+ background-color: #f5f5f5;
+ border-radius: 10rpx;
+ flex-shrink: 0;
+
+ .search-input {
+ flex: 1;
+ margin-left: 10rpx;
+ font-size: 28rpx;
+ }
+ }
+
+ .staff-filter {
+ display: flex;
+ padding: 0 30rpx 20rpx;
+ gap: 15rpx;
+ flex-shrink: 0;
+
+ .filter-item {
+ flex: 1;
+ text-align: center;
+ padding: 15rpx 0;
+ background-color: #f5f5f5;
+ border-radius: 10rpx;
+ font-size: 26rpx;
+ color: #666;
+
+ &.active {
+ background-color: #007AFF;
+ color: white;
+ }
+ }
+ }
+
+ .staff-list-popup {
+ flex: 1;
+ overflow-y: auto;
+ padding: 0 30rpx;
+
+ .staff-item-popup {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 25rpx 20rpx;
+ border-bottom: 1rpx solid #f0f0f0;
+
+ &:active {
+ background-color: #f5f5f5;
+ }
+
+ .staff-info {
+ flex: 1;
+
+ .staff-name-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10rpx;
+
+ .staff-name {
+ font-size: 30rpx;
+ font-weight: bold;
+ color: #333;
+ margin-right: 20rpx;
+ }
+
+ .staff-phone {
+ font-size: 24rpx;
+ color: #999;
+ }
+ }
+
+ .staff-detail-row {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+
+ .staff-dept {
+ font-size: 24rpx;
+ color: #666;
+ margin-right: 15rpx;
+ }
+
+ .staff-types {
+ display: flex;
+ gap: 8rpx;
+
+ .type-tag {
+ font-size: 20rpx;
+ color: white;
+ padding: 4rpx 10rpx;
+ border-radius: 6rpx;
+
+ &.type-driver {
+ background-color: #007AFF;
+ }
+
+ &.type-doctor {
+ background-color: #34C759;
+ }
+
+ &.type-nurse {
+ background-color: #AF52DE;
+ }
+ }
+ }
+ }
+ }
+
+ .checkbox-empty {
+ width: 40rpx;
+ height: 40rpx;
+ border: 2rpx solid #ddd;
+ border-radius: 50%;
+ }
+ }
+
+ .no-data {
+ text-align: center;
+ padding: 100rpx 0;
+ color: #999;
+
+ text {
+ display: block;
+ margin-top: 20rpx;
+ font-size: 28rpx;
+ }
+ }
+ }
+
+ .popup-footer {
+ display: flex;
+ padding: 20rpx 30rpx;
+ border-top: 1rpx solid #f0f0f0;
+ gap: 20rpx;
+ flex-shrink: 0;
+
+ button {
+ flex: 1;
+ height: 80rpx;
+ border-radius: 10rpx;
+ font-size: 30rpx;
+ }
+
+ .cancel-btn {
+ background-color: #f5f5f5;
+ color: #666;
+ }
+
+ .confirm-btn {
+ background-color: #007AFF;
+ color: white;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.1