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 class="add">
        <uni-forms
          label-position="top"
          class="form"
          ref="form"
          :modelValue="formData"
          :rules="rules"
        >
          <uni-forms-item label="添加成员" name="member">
            <uni-data-picker
              ref="member"
              class="depSelect"
              :localdata="depUserTree"
              @change="changeMember"
            />
          </uni-forms-item>
        </uni-forms>
        <button class="button" @click="onAddMember">添加</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { queryMember, deleteMember, addMember } from "@/services/project";
export default {
  data() {
    return {
      memberList: [],
      formData: {
        member: "",
      },
      rules: {
        member: {
          rules: [{ required: true, errorMessage: "请选择成员" }],
        },
      },
    };
  },
  computed: {
    ...mapState(["currentProject", "depUserTree"]),
  },
  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);
          }
        },
      });
    },
    changeMember(e) {
      if (e.detail.value.length > 0)
        this.formData.member = e.detail.value[e.detail.value.length - 1].value;
      else this.formData.member = "";
    },
    onAddMember() {
      this.$refs.form.validate(async (err) => {
        if (!err) {
          const member_id = this.formData.member.split("-")[1];
          let payload = {
            project_code_id: this.currentProject.id,
            user_id: Number(member_id),
          };
          await addMember(payload);
          uni.showToast({
            title: "添加成功",
          });
          setTimeout(() => {
            uni.hideToast();
            this.init();
            this.$refs.member.clear();
            this.formData.member = "";
          }, 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%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.actions {
  font-size: 14px;
  border-top: 1px solid gray;
  padding: 4px 10px 4px 0px;
  display: flex;
  justify-content: flex-end;
}

.add {
  width: 90%;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.form {
  width: 100%;
}

.depSelect {
  background: #fff;
}

.button {
  width: 60px;
  height: 40px;
  font-size: 14px;
  background: #1890ff;
  color: #fff;
  margin: 0;
}

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