aiot-app/pages/pda/workReport/components/reassignDialog.vue

<template>
  <u-popup
    :show="show"
    mode="center"
    :round="10"
    closeable
    @close="cancel"
    bgColor="#fff"
    :customStyle="{ width: '85vw' }"
  >
    <view class="reassign_wrap">
      <view class="title">选择转派人员</view>

      <view class="search_row">
        <input class="search_ipt" v-model="kw" placeholder="搜索人员姓名" />
      </view>

      <scroll-view scroll-y class="user_list">
        <view
          v-for="item in filteredList"
          :key="item.id"
          class="user_item"
          :class="{ active: selectedId === item.id }"
          @click="selectedId = item.id"
        >
          <view class="name">{{ item.name }}</view>
          <view v-if="selectedId === item.id" class="check">✓</view>
        </view>
        <view v-if="!filteredList.length" class="empty">暂无人员</view>
      </scroll-view>

      <view class="btns">
        <button class="btn cancel" @click="cancel">取消</button>
        <button class="btn confirm" @click="confirm">确定</button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { getteampage, transferTasks } from "@/api/pda/workReport.js";

export default {
  data() {
    return {
      show: false,
      kw: "",
      selectedId: "",
      taskId: "",
      teamList: [],
    };
  },
  computed: {
    filteredList() {
      const k = (this.kw || "").trim();
      if (!k) return this.teamList;
      return this.teamList.filter((u) => (u.name || "").indexOf(k) > -1);
    },
  },
  methods: {
    async open(row) {
      this.taskId = row.id;
      this.selectedId = "";
      this.kw = "";
      this.teamList = [];
      this.show = true;
      try {
        const res = await getteampage({ name: row.assignTeamName });
        if (res && res.list && res.list[0]) {
          this.teamList = res.list[0].userVOList || [];
        }
      } catch (err) {
        uni.showToast({ title: err.message || "人员加载失败", icon: "none" });
      }
    },
    cancel() {
      this.show = false;
    },
    async confirm() {
      if (!this.selectedId) {
        return uni.showToast({ title: "请选择转派人员", icon: "none" });
      }
      const user = this.teamList.find((u) => u.id == this.selectedId);
      try {
        await transferTasks({
          assigneeId: user.id,
          assigneeName: user.name,
          id: this.taskId,
        });
        uni.showToast({ title: "转派成功", icon: "success" });
        this.$emit("success");
        this.cancel();
      } catch (err) {
        uni.showToast({ title: err.message || "转派失败", icon: "none" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.reassign_wrap {
  padding: 30rpx;
  .title {
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20rpx;
  }
  .search_row {
    margin-bottom: 16rpx;
    .search_ipt {
      width: 100%;
      box-sizing: border-box;
      border: 1rpx solid #e0e0e0;
      border-radius: 6rpx;
      padding: 14rpx 16rpx;
      font-size: 26rpx;
    }
  }
  .user_list {
    max-height: 50vh;
    .user_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 16rpx;
      border-bottom: 1rpx solid #f0f0f0;
      font-size: 28rpx;
      &.active {
        color: $theme-color;
        background: rgba(21, 122, 44, 0.06);
      }
      .check {
        color: $theme-color;
        font-weight: bold;
      }
    }
    .empty {
      text-align: center;
      color: #999;
      padding: 40rpx 0;
      font-size: 26rpx;
    }
  }
  .btns {
    display: flex;
    gap: 20rpx;
    margin-top: 30rpx;
    .btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
    }
    .cancel { background: #f5f5f5; color: #333; }
    .confirm { background: $theme-color; color: #fff; }
  }
}
</style>