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

<template>
  <div>
    <el-button type="primary" plain icon="User" @click="showDialog"
      >批量授权
    </el-button>
    <el-dialog v-model="show" width="880px">
      <template #header>
        <div class="full-width flex flex-center flex-justify-between">
          <h4>批量授权</h4>
        </div>
      </template>
      <div class="flex flex-center flex-justify-between">
        <div class="from">
          <div class="padding flex full-width flex-col flex-justify-start">
            <span class="full-width text-left bold mt-20">访问权限:</span>
            <div class="flex flex-center flex-justify-start mt-10">
              <el-radio-group v-model="query.status">
                <el-radio :label="1">可看</el-radio>
                <el-radio :label="2">可编辑</el-radio>
                <el-radio :label="3">不可查看</el-radio>
              </el-radio-group>
            </div>
            <span class="full-width text-left bold mt-20">授权时间:</span>
            <el-date-picker
              style="width: 360px"
              v-model="time"
              type="daterange"
              clearable
              class="mt-10"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="截止时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="dateChange"
            />
          </div>
          <el-checkbox
            class="full-width flex flex-justify-start mt-20"
            label="应用到此文件夹、子文件夹及文件"
            @change="changeApplyAll"
          />

          <el-divider />
          <span class="grey-6">- 复制二维码并通过他微信分享给被授权用户 -</span>
        </div>
        <el-divider direction="vertical" style="height: 350px" />
        <div class="qrcode">
          <el-empty
            description="请选择授权配置后点击生成二维码"
            v-if="qrCodeText.length === 0"
          ></el-empty>
          <vue-qr
            v-else
            :currentLevel="3"
            :logoCornerRadius="4"
            :logoScale="0.25"
            :logoSrc="logoSrc"
            :text="qrCodeText"
            size="360"
          />
        </div>
      </div>
      <div class="mt-20 full-width flex flex-center">
        <el-button type="primary" plain @click="show = false">取 消</el-button>
        <el-button type="primary" @click="qrCode()">生成二维码</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueQr from 'vue-qr/src/packages/vue-qr.vue'

export default {
  components: {
    VueQr
  },
  props: {
    list: {
      type: Array,
      default: []
    }
  },

  data() {
    return {
      show: false,
      access: 1,
      logoSrc: new URL('@/assets/img/logo.png', import.meta.url).href,
      qrCodeText: '',
      time: '',
      query: {
        ids: '',
        status: 2,
        startTime: '',
        endTime: '',
        type: 1,
        isApplyAll: 0
      }
    }
  },
  methods: {
    showDialog() {
      if (this.list.length === 0) {
        this.$message.error('请先选择要授权的文件夹、文件')
        return
      }
      this.show = true
    },
    qrCode() {
      if (this.list.length === 0) {
        return
      }
      if (this.time.length === 0) {
        this.$message.error('请选择授权时间')
        return
      }
      this.query.ids = this.list.map(e => e.id).join(',')
      this.$api.resource.fileAuthorize(this.query).then(res => {
        if (res.code === 200) {
          this.qrCodeText =
            'https://prod.wutongshucloud.com/apply?id=' + res.data
        }
      })
    },
    changeApplyAll(res) {
      if (res) {
        this.query.isApplyAll = 1
      } else {
        this.query.isApplyAll = 0
      }
    },
    dateChange() {
      if (this.time.length === 0) {
        return
      }
      this.query.startTime = this.time[0]
      this.query.endTime = this.time[1]
    }
  }
}
</script>

<style lang="scss" scoped>
.from {
  width: 400px;
  height: 400px;
}

.qrcode {
  width: 400px;
  height: 400px;
}
</style>