yos_web/src/components/normal-basic-layout/details/modules/group/group.vue

<template>
<div class="normal-panel">
  <div  v-for="item in list" :key="item.index" class="normal-panel">
    <div class="flex-align-center flex-between" style="border-bottom:1px solid #f1f2f3;padding:0 10px">
      <div>
        <slot name="collapse"></slot>
        <p style="display:inline;flex:1;padding:10px 0;color:#999">负责人</p>
      </div>
      <el-popover
        placement="right"
        trigger="manual"
        v-model="visible1"
        width="500">
        <member ref="member" :justsaler="justsaler" :param="param" :radio="true" @onSelect="setLeader" @onCancel="visible1 = false"></member>
        <el-button v-show="item.teamleader[0] && nowUserid === item.teamleader[0].userid" type="text" size="small" slot="reference" @click="showMenberSelect(item)">变更</el-button>
      </el-popover>
    </div>
    <div style="padding:10px">
      <div class="flex-align-center" v-for="men in item.teamleader" :key="men.index">
        <div class="avatar inline-16" :class="men.isleader === 1?'leader':''" >
          <img class="avatar__image" v-if="men.headpic" :src="men.headpic" alt="">
          <p v-else>{{men.name.substr(0, 1)}}</p>
        </div>
        <div>
					<p>{{ men.name }} <small style="color:#999999ad">&nbsp;账号:{{ men.username }}</small></p>
					<small style="color:#999999ad;margin-top:10px">部门：{{ men.depname?men.depname:"未知部门" }}&emsp;职位：{{ men.position?men.position:"未知部门" }}</small>
				</div>
      </div>
      <div v-if="item.teamleader.length === 0">
        <el-empty description="暂无负责人" :image-size="40"></el-empty>
      </div>
    </div>
    <!-- <div class="flex-align-center" style="border-bottom:1px solid #f1f2f3;padding:0 10px">
      <p style="flex:1;padding:10px 0;color:#999">参与者</p>
      <el-popover
        placement="right"
        trigger="manual"
        v-model="visible"
        width="500">
        <member ref="member1" :justsaler="justsaler" :param="param" :radio="false" :checked="item.team" @onSelect="onSubmit" @onCancel="visible = false"></member>
        <el-button v-show="item.teamleader[0] && nowUserid === item.teamleader[0].userid" type="text" size="small" slot="reference"  @click="showMenberSelect1(item)">添加</el-button>
      </el-popover>
    </div> -->
    <!-- <div style="padding:10px">
      <div class="flex-align-center" style="margin-bottom:16px" v-show="men.isleader === 0" v-for="men in item.team" :key="men.index">
        <div class="avatar inline-16"  :class="men.isleader === 1?'leader':''" >
          <img class="avatar__image" v-if="men.headpic" :src="men.headpic" alt="">
          <p v-else>{{men.name.substr(0, 1)}}</p>
        </div>
        <div>
          <p>{{ men.name }}&nbsp;<small style="color:#999999ad">&nbsp;账号:{{ men.username }}</small></p>
          <small style="color:#999999ad;margin-top:10px">部门：{{ men.depname?men.depname:"未知部门" }}&emsp;职位：{{ men.position?men.position:"未知部门" }}</small>
        </div>
        <div style="float: right;margin-left: 60px">
          <el-button v-show="item.teamleader[0] && nowUserid === item.teamleader[0].userid" type="text" @click="setClick(men)" size="mini">设置</el-button>
        </div>
      </div> -->

      <div v-if="showEmpty(item.team)">
        <el-empty description="暂无成员" :image-size="40"></el-empty>
      </div>
      <el-dialog title="设置" :visible.sync="dialogTableVisible" append-to-body width="400px">
        <el-radio v-model="isEdit" label="1"  >允许编辑</el-radio>
        <el-radio v-model="isEdit" label="0" >不允许编辑</el-radio>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="setOnSubmit" size="small">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</div>
</template>

<script>
import member from '@/template/menber/index.vue'
export default {
  props:['ownertable','justsaler'],
  components:{
    member
  },
  data () {
    return {
      visible1:false,
      visible:false,
      dialogTableVisible:false,
      isEdit:'',
      list:[
        {
          ismyteam:1,
          team:[],
          teamleader:[],
          teamname:''
        }
      ],
      param:{
        id:'20221018122201',
        content: {
          "ownertable":this.ownertable,
          "ownerid":this.$route.query.id,
          "pageSize":20,
          "where":{
            "justsaler":0,
            "condition":"",
            "withoutselect":0,
          }
        }
      },
      addType:'',
      nowUserid:''
    }
  },
  methods:{
    async queryGroup () {
      console.log(this.justsaler,'----')
      this.list = []
      /*this.param.content.where.justsaler = this.justsaler?this.justsaler:0*/
      const res = await this.$api.requested({
        "id": 20220930103501,
        "content": {
          "ownertable":this.ownertable,
          "ownerid":this.$route.query.id
        }
      })
      res.data.length > 0?this.list = res.data:this.list=[
        {
          ismyteam:1,
          team:[],
          teamleader:[],
          teamname:''
        }
      ]
      
    },
    async setLeader (item) {
      const res = await this.$api.requested({
        "id": 20220930103701,
        "content": {
          "ownertable":this.ownertable,
          "ownerid":this.$route.query.id,
          "userid":item[0].userid
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryGroup()
        this.visible1 = false
        this.$emit('onSuccess')
        this.$store.dispatch('changeDetailDrawer',false)
      })
    },
    async deleteGroupAccount (item) {
      const res = await this.$api.requested({
        "id": 20220930103801,
        "content": {
          "ownertable":this.ownertable,
          "ownerid":this.$route.query.id,
          "userid":item.userid
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryGroup()
      })
    },
    async onSubmit (data) {
      const res = await this.$api.requested({
        "id": 20220930103601,
        "content": {
            "ownertable":this.ownertable,
            "ownerid":this.$route.query.id,
            "justuserids":true,
            "userids":data?data.map(e=>{
              return e.userid
            }):[]
        }
      })
      this.tool.showMessage(res,()=>{
        this.queryGroup()
        this.visiable = false
        this.$emit('onSuccess')
      })
      this.visible = false
    },
    showMenberSelect (item) {
      this.visible = false
      this.visible1 = !this.visible1
      this.$refs['member'][0].selected = item.teamleader
    },
    showMenberSelect1 (item) {
      this.visible1 = false
      this.visible = !this.visible
      this.$refs['member1'][0].selected = item.team.filter(e=>{
        return e.isleader !== 1
      })
    },
    showEmpty (data) {
      let team = data.filter(e=>{
        return e.isleader !== 1
      })
      if (team.length === 0) return true
    },
    setClick(row){
      console.log(row)
      this.row = row
      this.isEdit = row.editable
      if (this.isEdit === 1){
        this.isEdit = '1'
      }else {
        this.isEdit = '0'
      }
      console.log(this.row)
      this.dialogTableVisible = true
    },
    async setOnSubmit(){
      if (this.isEdit === '1'){
        this.isEdit = 1
      }else {
        this.isEdit = 0
      }
      const res = await this.$api.requested({
        "id":"20230302183101",
        "content":{
          "editable":this.isEdit,
          "sys_datateamid":this.row.sys_datateamid
        }
      })
      this.tool.showMessage(res,()=>{
        this.dialogTableVisible = false
        this.queryGroup()
      })
    }
  },
  mounted() {
    this.queryGroup()
    this.nowUserid = JSON.parse(sessionStorage.getItem('active_account')).userid
  },
  watch: {
    $route () {
      this.queryGroup()
    }
  }
}

</script>
<style>
</style>
<style scoped>
.avatar{
  position: relative;
  height:40px;
  width: 40px;
  margin-bottom: 5px;
  border-radius: 100%;
  text-align: center;
  line-height: 40px;
  color:#fff;
  font-weight: 500;
  background: #3874F6;
  cursor: pointer;
  overflow: hidden;
}
.avatar__model{
  display: none;
  position: absolute;
  left:0;
  top:0;
  height:40px;
  width: 40px;
  border-radius: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}
.avatar:hover .avatar__model{
  display: block;
}
.leader{
  background: #999 !important;;
}
.avatar__image{
  height: 100%;
  width: 100%;
}
.normal-panel{
  border-radius: 5px;
}
</style>