realtorEasier-webSite/pc/src/components/toast/cooperation.vue

<template>
  <div
    class="toast-layout"
    :style="{background:false?'none':'rgba(0, 0, 0, 0.3)'}"
    :class="{'toast-active':visible}"
  >
    <div class="toast-con bind-con" :style="{minWidth:'600px'}">
      <div class="t-header ">
        <span>{{lang==='en'?'Invite collaborator':'分配协作'}}</span>
        <i class="iconfont icon-cuowu" @click="handleClick"></i>
      </div>
      <div class="binding-con" :style="{height:Math.ceil(auth.length/4)*62+'px'}">
        <div class="binding-body cooperation">
          <div class="toclient">{{lang==='en'?'Add collaborator':`分配${cooType === 'scene'?'场景':'相机'}给用户`}}</div>
          <div class="b-input" >
            <input v-model="userName" :placeholder="lang==='en'?'User name':'请输入用户账号'" type="text">
          </div>

          <div class="toclient"><span>{{lang==='en'?'Assign Permission':'分配权限'}}</span><div @click="lock=false,selectAll=!selectAll"><span :class="{check_active:selectAll}" class="fdcheck">{{lang==='en'?'All':'全选'}}</span></div></div>
          <ul class="auth-list">
            <li v-for="(item,i) in auth" :key="i"><span @click="selectItem(item,i)" class="fdcheck" :class="{check_active:item.hasAuth}">{{lang==='en'?item.keyWord:item.name}}</span></li>
          </ul>
        </div>
      </div>

      <div class="bind-btn coo-btn" >
        <span @click="addCooperation">{{lang==='en'?'OK':'确定'}}</span>
        <span class="default" @click="handleClick">{{lang==='en'?'Cancel':'取消'}}</span>
      </div>
    </div>

  </div>
</template>

<script>
import toastZH from '@/store/language/cn/toast'
import toastEN from '@/store/language/en/toast'

export default {
  props: ['sceneNum', 'visible', 'cooType'],
  data () {
    return {
      lock: true,
      userName: '',
      selectAll: false,
      auth: [],
      lang: localStorage.getItem('language'),
      toastCode: localStorage.getItem('language') === 'en' ? toastEN : toastZH
    }
  },
  computed: {

  },
  watch: {
    selectAll: function (newVal) {
      if (!this.lock) {
        this.auth.forEach(item => {
          item.hasAuth = newVal
        })
      }
    },
    visible: function (newVal) {
      if (newVal) {
        this.selectAll = true
        this.getResoureList()
        this.getResoureByNum()
      }
      this.userName = ''
      this.lang = localStorage.getItem('language')
      this.toastCode = this.lang === 'en' ? toastEN : toastZH
    }
  },
  methods: {
    selectItem (item, i) {
      item.hasAuth = !item.hasAuth
      this.$set(this.auth, i, item)
      this.lock = true
      this.selectAll = true

      this.auth.forEach(sub => {
        if (!sub.hasAuth) {
          this.selectAll = false
        }
      })
    },
    handleClick (type = '') {
      this.$emit('closePoint', type)
    },
    async getResoureByNum () {
      let token = localStorage.getItem('token')
      let url = this.cooType === 'scene' ? '/user/scene/cooperation/sceneResourceBySceneNum' : '/user/camera/sceneResourceByCameraId'
      let params = this.cooType === 'scene' ? {
        sceneNum: this.sceneNum
      } : {
        cameraId: this.sceneNum
      }

      let res = await this.$http({
        method: 'post',
        headers: {
          token
        },
        data: params,
        url: url
      })

      if (res.data.code !== 0) {
        return
      }
      let data = res.data.data || []
      setTimeout(() => {
        let tmp = this.auth.map(item => {
          item.hasAuth = true
          data.forEach(sub => {
            if (item.id === sub.id) {
              item.hasAuth = true
            } else {
              item.hasAuth = false
            }
          })
          return item
        })
        this.auth = tmp
      })
    },
    async getResoureList () {
      let token = localStorage.getItem('token')

      let res = await this.$http({
        method: 'post',
        headers: {
          token
        },
        url: '/user/scene/cooperation/sceneResourceList'
      })
      if (res.data.code !== 0) {
        return this.handleClick()
      }
      this.auth = res.data.data
    },
    async addCooperation () {
      let token = localStorage.getItem('token')

      if (!this.userName) {
        return this.$toast.show('error', `${this.lang === 'en' ? 'Please enter user name.' : '请输入用户账号'}`)
      }
      let resourceIds = []

      this.auth.forEach(item => {
        if (item.hasAuth) {
          resourceIds.push(item.id)
        }
      })

      if (resourceIds.length <= 0) {
        return this.$toast.show('error', `${this.lang === 'en' ? 'Please select at least one.' : '请至少勾选一项权限'}`)
      }

      let url = this.cooType === 'scene' ? '/user/scene/cooperation/save' : '/user/camera/saveCooperationUser'
      let params = {
        userName: this.userName,
        resourceIds: resourceIds.join(',')
      }

      this.cooType === 'scene' ? (params['sceneNum'] = this.sceneNum) : (params['cameraId'] = this.sceneNum)

      let result = await this.$http({
        method: 'post',
        data: params,
        headers: {
          token
        },
        url: url
      })
      let data = result.data
      if (data.code === 0) {
        this.handleClick('getList')
        this.$toast.show('success', this.toastCode['44'])
      } else if (data.code === 3004) {
        this.handleClick()
      } else {
        return this.$toast.show('warn', this.toastCode[data.code], () => {
          return false
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>