gdy_qywx_pc/src/views/common/edit_team_item.vue

<template>
  <div>
    <el-dialog
      append-to-body
      :title="title"
      top="40px"
      width="620px"
      :visible.sync="show"
    >
      <div style="padding:0 40px;">
        <el-form :model="team_info">
          <el-steps :active="setTeamActive" finish-status="success" simple>
            <el-step title="团队名称"></el-step>
            <el-step title="选择成员"></el-step>
            <el-step title="设置队长"></el-step>
          </el-steps>
          <el-form-item
            v-show="setTeamActive==0"
            label="队名"
            prop="name"
            label-width="55px"
            style="padding:50px 100px"
          >
            <el-input v-if="team_info != null" v-model="team_info.name" auto-complete="off"></el-input>
          </el-form-item
            v-show="setTeamActive==0">

          <el-form-item
            prop="name"
            v-show="setTeamActive==1"
            style="padding:50px 0px"
          >
            <EmployeeSelectorCell :employee_not_select.sync="employee_not_select" title="选择队员" v-model="member_list" :max="20"></EmployeeSelectorCell>
          </el-form-item>


          <el-form-item
            prop="name"
            v-show="setTeamActive==2"
            style="padding:50px 0px"
          >
            <EmployeeSelectorCell v-if="member_list.length > 0" title="选择队长" v-model="leader_list" :employee_list.sync="member_list" :multi="false" :max="1"></EmployeeSelectorCell>

          </el-form-item>

        </el-form>
      </div>

      <div
        slot="footer"
        class="dialog-footer"
        style="text-align:center;"
        v-show="setTeamActive!=2"
      >
        <el-button @click="dialogAddteamVisible = false">取 消</el-button>
        <el-button @click="setTeamActive--" v-show="setTeamActive>0">上一步</el-button>
        <el-button type="primary" @click="setTeamNext" v-show="setTeamActive!=2">下一步</el-button>
      </div>

      <div
        slot="footer"
        class="dialog-footer"
        style="text-align:center;"
        v-show="setTeamActive==2"
      >
        <el-button @click="show = false">取 消</el-button>
        <el-button @click="setTeamActive--" v-show="setTeamActive==2">上一步</el-button>

        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-row :gutter="20">
      <el-col :span="span" v-for="(item, index) in team_list" :key="index">
        <el-card class="box-card" shadow="hover" style="margin-top:24px;">
          <div slot="header" class="clearfix">
            <span>{{item.name}}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="add(index, item)">修改</el-button>
            <el-button style="float: right; padding: 3px 0" type="text" @click="del(index, item)">删除</el-button>
          </div>
          <div class="member_list_box">
            <el-tag type="primary" size="small" v-if="item.leader > 0 && employee_map[item.leader]">{{employee_map[item.leader].name}}</el-tag>
            <el-tag type="primary" plain size="small" :key="employee_id" v-for="employee_id in item.member" v-if="employee_id > 0 && employee_map[employee_id]">{{employee_map[employee_id].name}}</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>



    <div style="padding:24px; text-align: center;">
      <el-button type="primary" @click="add(-1, null)">创建团队</el-button>
    </div>

  </div>
</template>

<script>
  import team_item from '@/views/common/team_item'
  import EmployeeSelectorCell from '@/views/common/EmployeeSelectorCard'
  export default {
    components: {EmployeeSelectorCell},
    name: "team_item",
    model: {
      prop: 'list',
      event: 'value'
    },
    props: {
      span: {
        type: Number,
        default: 24
      },
      list: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data(){
      let team_list = this.list
      return {
        setTeamActive: 0,
        employee_not_select: [],
        bar_height: 0,
        title: '创建团队',
        show: false,
        team_list: team_list,
        team_info: null,
        member_list: [],
        leader_list: [],
        index: -1,
        employee_map: this.$store.getters.employee_map
      }
    },
    created(){
      if(window.plus){
        this.bar_height = window.plus.navigator.getStatusbarHeight();
      }
    },
    methods:{

      setTeamNext() {
        if(this.team_info.name == ''){
          this.$message({
            message: "团队名称不能为空",
            type: "warning"
          })
          return false
        }
        this.setTeamActive ++
      },

      set_employee_not_select(member){
        this.employee_not_select = []
        for(let i in this.team_list){
          for(let j in this.team_list[i].member){
            if(member.indexOf(this.team_list[i].member[j]) < 0){
              this.employee_not_select.push(this.team_list[i].member[j])
            }
          }
        }
      },
      del(index){
        this.$dialog.confirm({
          title: '删除团队',
          message: '确定要删除当前团队吗？'
        }).then(() => {
          this.team_list.splice(index, 1)
          this.show = false
        })
      },
      save(){
        if(this.team_info.name == ''){
          this.$toast('请输入队名')
          return false
        }
        if(this.member_list.length == 0){
          this.$toast('请选择队员')
          return false
        }
        if(this.leader_list.length == 0){
          this.$toast('请选择队长')
          return false
        }
        let member = []
        for(let i in this.member_list){
          member.push(this.member_list[i].id)
        }
        let leader = this.leader_list[0].id
        this.team_info.member = member
        this.team_info.leader = leader
        if(this.index >= 0){
          this.team_list[this.index] = this.team_info
        }else{
          this.team_list.push(this.team_info)
        }
        this.show = false
      },
      add(index, data){
        this.setTeamActive = 0
        this.index = index
        if(index >= 0){
          this.set_employee_not_select(data.member)
          this.title = '修改团队'
        }else{
          this.set_employee_not_select([])
          this.title = '创建团队'
        }
        if(data == null){
          this.team_info = {
            name: '',
            member: [],
            leader: 0
          }
        }else{
          this.team_info = JSON.parse(JSON.stringify(data))
        }
        this.member_list = []
        this.leader_list = []
        for(let i in this.team_info.member){
          this.member_list.push(this.employee_map[this.team_info.member[i]])
        }
        if(this.team_info.leader > 0 && this.employee_map[this.team_info.leader]){
          this.leader_list.push(this.employee_map[this.team_info.leader])
        }
        this.show = true
      },
      getContainer() {
        return document.body
      },
    }
  }
</script>

<style scoped>
  .member_list_box .van-tag{font-size:0.2rem; margin-left:0.05rem;}
  .member_list_box .van-tag:first-child{margin-left:0rem;}
  .add-btn{color:#1989fa;}
</style>