wt_project_web_bak/src/views/home/component/authorize.vue

<template>
  <div class='flex flex-justify-between flex-col  full-width '>
    <div v-if='folderName' class='bold'>授权当前文件夹 ({{folderName}})</div>
    <div class='flex flex-justify-start flex-align-center full-width' v-if='authorType'>
      <span class='bold'>授权模式：</span>
      <el-radio-group v-model='grantType'>
        <el-radio :label="1">项目全托管</el-radio>
        <el-radio :label="0">按文件授权</el-radio>
      </el-radio-group>
    </div>
    <el-tabs v-if='grantType === 0' class='mt-20' type='border-card' v-model='initType'>
      <el-tab-pane label='授权子文件夹'>
        <div class='flex full-width full-height flex-justify-around border-bottom padding-bottom bold '>
          <span class='text-center'>文件夹名称</span>
          <span class='text-center'>权限设置</span>
        </div>
        <div class='border-bottom padding-right padding-left mt-10' style='height: 500px'>
          <div class='flex flex-align-center mb-10 flex-justify-between border-bottom'>
            <div class='bold'>文件夹相关权限</div>
            <el-radio-group v-model="check" @change='allChange($event,1)'>
              <el-radio label="1" size="large">可见</el-radio>
              <el-radio label="2" size="large">可编辑</el-radio>
              <el-radio label="3" size="large">不可操作</el-radio>
            </el-radio-group>
          </div>
          <div style='overflow-y: scroll; height: 450px' v-loading='loading'>
            <div v-for='(item,index) in folderList' :key='item.id'>
              <item1 :check='item.check' :data='item' :index='index' @change='change($event,1)'/>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label='授权子文件'>
        <div class='flex full-width full-height flex-justify-around border-bottom padding-bottom bold '>
          <span class='flex-child-average text-center'>文件名称</span>
          <span class='flex-child-average text-center'>权限设置</span>
        </div>
        <div class='border-bottom padding-right padding-left mt-10' style='height: 500px'>
          <div class='flex flex-align-center mb-10 flex-justify-between border-bottom'>
            <div class='bold'>文件相关权限</div>
            <el-radio-group v-model="check" @change='allChange($event,2)'>
              <el-radio label="3" size="large">不可查看</el-radio>
              <el-radio label="1" size="large">可见</el-radio>
              <el-radio label="2" size="large">可编辑</el-radio>
            </el-radio-group>
          </div>
          <div style='overflow-y: scroll; height: 450px'>
            <div v-for='(item,index) in fileList' :key='item.id'>
              <item1 :check='item.check' :data='item' :index='index' @change='change($event,2)'/>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div>
      <div class='full-width flex flex-align-center mt-10'>
        <span class='font-14 bold'>授权时长</span>
        <el-date-picker
            v-model="authorizeDate"
            class='ml-20'
            end-placeholder="截止日期"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            value-format='YYYY-MM-DD'
            format='YYYY-MM-DD'
        />
      </div>
      <div class='full-width flex flex-align-center mt-10'>
        <span class='font-14 bold'>生成授权连接</span>
        <el-button circle class='ml-20' icon="Picture" type="danger" @click='initCode(2)'/>
        <!--      <el-button circle icon="Paperclip" type="danger"/>-->
      </div>
      <div class='full-width mt-20 border-top padding-top flex flex-justify-end'>
        <el-button @click='close'>取消</el-button>
        <el-button type='primary' @click='close'>关闭</el-button>
      </div>
    </div>
    <el-dialog v-model='qrCodeShow' top='20%' width='400px'>
      <div class='flex flex-col flex-center' style='height: 400rpx;width: 400rpx'>
        <vue-qr :currentLevel='3' :logoCornerRadius='4' :logoScale='0.25' :text='qrCodeText'
                size='340'/>
        <span>右键复制二维码，通过微信进行分享</span>
        {{qrCodeText}}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import item1 from '@/views/home/component/item1.vue'
import VueQr from 'vue-qr/src/packages/vue-qr.vue'

export default {
  name: 'authorize',
  components: { item1, VueQr },
  props: {
    list: {
      type: Array,
      default: null
    },
    folderId: {
      type: String,
      default: ''
    },
    projectId: {
      type: String,
      default: ''
    },
    extra: {
      type: Object,
      default: null
    },
    // 是否显示授权模式
    authorType: {
      type: Boolean,
      default: true
    },
    // 当前授权文件夹
    folderName: {
      type: String,
      default: ''
    }
  },
  watch: {
    list: {
      handler (val) {
        val = val.map(sub => {
          sub.check = this.check
          return sub
        })
        this.folderList = val.filter(sub => sub.type !== 1)
        this.fileList = val.filter(sub => sub.type === 1)
      },
      immediate: true
    }
  },
  data () {
    return {
      loading: false,
      check: '2',
      authorizeDate: [],
      access: 1,
      fileData: null,
      qrCodeShow: false,
      fileList: [],
      folderList: [],
      qrCodeText: '',
      defaultDate: [],
      // 0 部分授权，1 全托管授权
      grantType: 0,
      initType: '0'
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    initCode () {
      this.loading = true
      let list = this.folderList
      if (this.initType === '1') {
        list = this.fileList
      }
      console.log(list)
      if (this.authorizeDate.length === 0) {
        this.$message.error('请设置授权时间')
        return
      }
      this.startTime = this.authorizeDate[0]
      this.endTime = this.authorizeDate[1]
      const fileTmps = list.map(sub => {
        const item = { fileId: sub.id, startTime: this.startTime, endTime: this.endTime, status: sub.check }
        return item
      })
      const folder = [{
        folderId: this.folderId,
        startTime: this.startTime,
        endTime: this.endTime,
        status: this.check
      }]

      const folderTmp = list.map(sub => {
        const item = {
          folderId: sub.hasOwnProperty('fileFolderId') ? sub.fileFolderId : sub.id,
          startTime: this.startTime,
          endTime: this.endTime,
          status: sub.check,
          folderName: sub.title
        }
        return item
      })
      const query = []
      for (const k in this.extra) {
        query.push(k + '=' + this.extra[k])
      }
      const data = {
        files: this.initType === '0' ? [] : fileTmps,
        folders: this.folderId.length === 0 ? folderTmp : folder.concat(folderTmp),
        projectId: this.projectId,
        grantType: this.grantType,
        startTime: this.startTime,
        endTime: this.endTime
      }
      this.$api.project.initCode(Object.assign(data, this.extra)).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.qrCodeText = 'https://dev.wutongresearch.club/apply?id=' + res.data + (query.length > 0 ? '&' + query.join('&') : '')
          this.qrCodeShow = true
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    allChange (res, type) {
      console.log(res)
      if (type === 1) {
        this.folderList.forEach(sub => {
          sub.check = res
          return sub
        })
        console.log(this.folderList)
      } else {
        this.fileList.forEach(sub => {
          sub.check = res
          return sub
        })
      }
    },
    change (res, type) {
      if (type === 1) {
        this.folderList[res.index] = res
        let seeCount = 0
        let editCount = 0
        let notCount = 0
        this.folderList.forEach(sub => {
          if (sub.check === '1') {
            seeCount = seeCount + 1
          } else if (sub.check === '2') {
            editCount = editCount + 1
          } else {
            notCount = notCount + 1
          }
        })
        if (editCount >= seeCount || editCount > 0) {
          this.check = '2'
        } else if (seeCount > 0) {
          this.check = '1'
        } else {
          this.check = '3'
        }
      } else {
        this.fileList[res.index] = res
        let seeCount = 0
        let editCount = 0
        let notCount = 0
        this.fileList.forEach(sub => {
          if (sub.check === '1') {
            seeCount = seeCount + 1
          } else if (sub.check === '2') {
            editCount = editCount + 1
          } else {
            notCount = notCount + 1
          }
        })
        if (editCount >= seeCount || editCount > 0) {
          this.check = '2'
        } else if (seeCount > 0) {
          this.check = '1'
        } else {
          this.check = '3'
        }
      }
    }
  }
}
</script>

<style scoped>

</style>