WorkloadApp/pages/Project/member.vue

<template>
  <view class="content">
    <view class="title">成员管理</view>
    <view class="list">
      <uni-collapse>
        <uni-collapse-item
          v-for="member in memberList"
          :key="member.user_id"
          :title="member.User.CName"
        >
          <uni-card>
            <view>工号：{{ member.User.UserName }}</view>
            <view>联系方式：{{ member.User.Mobile }}</view>
            <view
              slot="actions"
              class="actions"
              v-if="notManager(member)"
              @click="deleteMember(member)"
            >
              <view>移除</view>
            </view>
          </uni-card>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { queryMember, deleteMember } from "@/services/project";
export default {
  data() {
    return {
      memberList: [],
    };
  },
  computed: {
    ...mapState(["currentProject"]),
  },
  onLoad() {
    this.init();
  },
  methods: {
    async init() {
      let res;
      res = await queryMember({ project_code_id: this.currentProject.id });
      this.memberList = res.data;
    },
    notManager(member) {
      return (
        member.user_id != this.currentProject.author &&
        member.user_id != this.currentProject.LeaderId &&
        member.user_id != this.currentProject.wty_manager_id &&
        member.user_id != this.currentProject.opt_manager_id
      );
    },
    deleteMember(member) {
      uni.showModal({
        title: "移除成员",
        content: "是否确认从项目中移除该成员",
        confirmText: "移除",
        confirmColor: "#ff7875",
        success: async (res) => {
          if (res.confirm) {
            await deleteMember({
              project_code_id: this.currentProject.id,
              user_id: member.user_id,
            });
            uni.showToast({
              title: "删除成功",
            });
            setTimeout(() => {
              uni.hideToast();
              this.init();
            }, 1800);
          }
        },
      });
    },
  },
};
</script>

<style lang="less">
.content {
  display: flex;
  flex-wrap: wrap;
}
.title {
  width: 100%;
  padding: 0 20px 20px 20px;
  font: 24px bold;
}
.list {
  margin: 0 5% 20px 5%;
  width: 100%;
}
.actions {
  font-size: 14px;
  border-top: 1px solid gray;
  padding: 4px 10px 4px 0px;
  display: flex;
  justify-content: flex-end;
}

::v-deep {
  .uni-collapse-item__title-text {
    font-size: 16px;
  }
}
</style>