FE_preschoolEdu_server/src/pages/supplier/manage/member.vue

<template>
  <div class="page-content"
       style="padding: 24px">
    <div class="tool">
      <ul class="filter">
        <li>
          <label>搜索：</label>
          <el-input placeholder="请输入姓名、姓名进行查询"
                    prefix-icon="el-icon-search"
                    v-model="keyword"
                    clearable
                    size="mini"
                    style="width: 250px"></el-input>
        </li>
      </ul>
      <div></div>
    </div>

    <el-table ref="table"
              :data="list"
              class="table"
              stripe
              header-align="center"
              row-key="id">
      <el-table-column type="index"
                       width="60"
                       label="序号"
                       align="center">
        <template slot-scope="scope">
          {{ scope.$index + (page - 1) * pageSize + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="phone"
                       label="手机号">
      </el-table-column>
      <el-table-column prop="userName"
                       label="姓名">
      </el-table-column>
      <el-table-column prop="username"
                       label="角色">
        <template slot-scope="scope">
          {{ scope.row.isTeam === '1' ? '负责人' : '成员' }}
        </template>
      </el-table-column>
      <el-table-column prop="joinTime"
                       label="加入时间">
      </el-table-column>
      <el-table-column prop="authentication"
                       label="实名认证">
      </el-table-column>
      <el-table-column prop="lastLoginTime"
                       label="最近登录">
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="320">
        <template slot-scope="scope">
          <!-- <el-button type="text"
                     @click="edit(scope.row)">编辑</el-button> -->
          <el-button v-if="scope.row.isTeam == 1"
                     type="text"
                     @click="transfer(scope.row)">转让管理员</el-button>
          <el-button v-else
                     type="text"
                     @click="remove(scope.row)">踢出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background
                     layout="total, prev, pager, next"
                     :total="total"
                     @current-change="handleCurrentChange"
                     :current-page="page">
      </el-pagination>
    </div>

    <el-dialog title="请选择要转让的团队成员"
               :visible.sync="chooseVisible"
               width="300px"
               custom-class="choose-dia"
               :close-on-click-modal="false">
      <ul class="member-list">
        <li v-for="(item, i) in members"
            :key="i">
          <div class="info">
            <img src="@/assets/images/avatar.png"
                 alt="">
            <span class="name">{{ item.userName }}</span>
          </div>
          <el-radio v-model="choosePartnerId"
                    :label="item.manageId"
                    :disabled="curRow.accountId === item.accountId"></el-radio>
        </li>
      </ul>
      <span slot="footer"
            class="dialog-footer">
        <el-button size="small"
                   @click="chooseVisible = false">取 消</el-button>
        <el-button size="small"
                   type="primary"
                   @click="chooseSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑合伙人"
               :visible.sync="editVisible"
               width="400px"
               class="dialog"
               :close-on-click-modal="false">
      <el-form ref="form"
               label-width="70px">
        <el-form-item prop="userName"
                      label="姓名">
          <el-input v-model="form.userName"
                    placeholder="请输入姓名"
                    disabled></el-input>
        </el-form-item>
        <el-form-item prop="phone"
                      label="手机号">
          <el-input v-model="form.phone"
                    placeholder="请输入手机号"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select style="width: 100%"
                     v-model="form.roles"
                     multiple>
            <!-- 不显示超管 -->
            <el-option v-for="(item, i) in roles"
                       :key="i"
                       :label="item.roleName"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实名状态">
          <el-input v-model="form.phone"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="所属组织">
          <el-input v-model="form.phone"
                    disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="submitEdit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import util from "@/libs/util";
import axios from 'axios'
import Setting from "@/setting";
export default {
  name: "matchSignup",
  data () {
    return {
      id: this.$route.query.id,
      teamId: this.$route.query.teamId,
      keyword: '',
      list: [],
      multipleSelection: [],
      page: 1,
      pageSize: 10,
      total: 0,

      transferVisible: false,
      chooseVisible: false,
      members: [],
      choosePartnerId: '',
      curRow: '',
      provinces: [],
      cities: [],
      editVisible: false,
      form: {
        userName: '',
        provinceId: '',
        cityId: '',
      },
      roles: []
    };
  },
  watch: {
    keyword: function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.initData();
      }, 500);
    }
  },
  mounted () {
    this.$store.commit('user/setCrumbs', [
      {
        name: '供应商管理',
        route: '/supplier'
      },
      {
        name: '供应商成员'
      },
    ])
    this.initData()
  },
  methods: {
    getData () {
      this.$post(this.api.platformTeamAccountList, {
        type: 1,
        pageNum: this.page,
        pageSize: this.pageSize,
        keyWord: this.keyword,
        platformId: 6,
        classificationId: this.teamId
      }).then(({ pageList }) => {
        this.list = pageList.records;
        this.total = pageList.total;
      }).catch(res => { });
    },
    initData () {
      this.page = 1
      this.getData()
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getData();
    },
    // 编辑
    edit (row) {
      this.editVisible = true
      this.form = JSON.parse(JSON.stringify(row))
    },
    // 删除
    del (row) {
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      }).then(() => {
        this.$post(`${this.api.delPartnerAccount}?accountId=${row.accountId}`).then(res => {
          util.successMsg("删除成功")
          this.getList()
        }).catch(res => { })
      }).catch(() => { })
    },
    // 移除
    remove (row) {
      this.$confirm("确定要移除吗？", "提示", {
        type: "warning"
      }).then(() => {
        this.$get(this.api.removeOrganization, {
          manageId: row.manageId,
          teamId: row.classificationId,
        }).then(res => {
          util.successMsg("移除成功")
          this.getData()
        }).catch(res => { })
      }).catch(() => { })
    },
    // 转让超管
    transfer (row) {
      this.curRow = row
      this.chooseVisible = true
      this.$post(this.api.platformTeamAccountList, {
        type: 1,
        classificationId: this.teamId,
        keyWord: '',
        platformId: 6,
        pageNum: 1,
        pageSize: 10000
      }).then(({ pageList }) => {
        this.members = pageList.records
      }).catch(err => { })
    },
    // 选择成员提交
    chooseSubmit () {
      const { curRow } = this
      const id = this.choosePartnerId
      const member = this.members.find(e => e.manageId === id) // 获取选择的成员
      if (member) {
        this.$post(this.api.transferTeam, {
          adminManageId: curRow.manageId,
          adminTeamId: curRow.classificationId,
          memberManageId: member.manageId,
          memberName: member.userName,
          memberTeamId: member.classificationId
        }).then(res => {
          this.chooseVisible = false
          this.transferVisible = false
          this.getData()
        }).catch(err => { })
      } else {
        util.warningMsg('请选择成员！')
      }
    },
    // 编辑提交
    submitEdit () {
      if (this.submiting) return false
      this.submiting = true
      const form = JSON.parse(JSON.stringify(this.form))
      form.classificationId = form.partnerClassificationId
      this.$post(this.api.editProvinceCity, form).then(res => {
        this.getList()
        util.successMsg("编辑成功！")
        this.editVisible = false
        setTimeout(() => {
          this.submiting = false
        }, 2000)
      }).catch(res => {
        setTimeout(() => {
          this.submiting = false
        }, 2000)
      })
    },
  }
};
</script>

<style lang="scss" scoped>
/deep/.dia-form {
    .w-100 {
        width: 100%;
    }
    .tips {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
/deep/.choose-dia {
    .member-list {
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .info {
            display: inline-flex;
            align-items: center;
        }
        img {
            width: 40px;
            height: 40px;
        }
        .name {
            margin-left: 10px;
        }
        .el-radio__label {
            display: none;
        }
    }
}
</style>