tduck-front/src/views/form/publish/index.vue

<template>
  <div class="publish-container">
    <div>
      <div v-if="!publishStatus"
           class="publish-btn-view">
        <div>
          <el-form label-width="90px">
            <el-form-item label="小程序端">
              <el-radio-group v-model="clientType">
                <el-radio-button label="resi">居民端</el-radio-button>
                <el-radio-button label="work">工作端</el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="发布范围">
              <el-tree ref="tree"
                       style="background-color:#f7f7f7"
                       :props="props"
                       :data="data"
                       show-checkbox
                       :default-expand-all="true"
                       @node-click="nodeClick"
                       @check="check"
                       @check-change="handleCheckChange" />
            </el-form-item>
          </el-form>
        </div>
        <div style="text-align:center">
          <el-button class="publish-btn"
                     size="medium"
                     type="primary"
                     @click="publishProject">
            <i class="el-icon-document-checked el-icon--right">开始发布</i>
          </el-button>
        </div>
      </div>
      <div v-if="publishStatus"
           class="publish-finish-view">
        <el-row :gutter="10"
                align="middle"
                type="flex">
          <!-- <el-col>
            <div>
              <vue-qr v-if="writeLink"
                      :callback="qrCodeGenSuccess"
                      :size="194"
                      :text="writeLink" />
            </div>
            <div style="text-align: center;">
              <el-link type="primary" @click="()=>{
                                this.downloadFile('qrcode.png',this.qrCodeUrl)
                            }"
                            >
                                下载分享二维码
                            </el-link>
            </div>
          </el-col> -->
          <el-col style="margin-left: 75px;">
            <div style="display: flex; justify-content: center;">
              <div class="icon-view">
                <i class="el-icon-check success-icon" />
              </div>
            </div>
            <div>
              <p class="success-title">恭喜您，发布成功！</p>
            </div>
            <!-- <div>
                            <p class="link-text"> {{ writeLink }}</p>
                        </div> -->
            <el-row>
              <!-- <el-col :offset="2"
                      :span="6">
                <el-button v-clipboard:copy="writeLink"
                                           v-clipboard:error="()=>{this.msgError('复制失败')}"
                                           v-clipboard:success="()=>{this.msgSuccess('复制成功')}" type="primary"
                                >
                                    复制链接
                                </el-button>
              </el-col> -->
              <el-col :span="12">
                <el-button type="danger"
                           @click="stopPublishProject">
                  停止发布
                </el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="warning"
                           @click="toFeedbackPageHandle">
                  查看反馈
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
// import VueQr from 'vue-qr'

export default {
  name: 'ProjectPublish',
  components: {
    // VueQr
  },
  data () {
    return {
      publishStatus: false,
      projectKey: null,
      writeLink: '',
      qrCodeUrl: '',

      clientType: 'resi',

      props: {
        // label: 'name',
        // children: 'zones'
      },
      count: 1,
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }]
    }
  },
  mounted () {
    this.projectKey = this.$route.query.key
    let url = window.location.protocol + '//' + window.location.host
    this.writeLink = `${url}/s/${this.projectKey}`
    this.getProjectStatus()
  },
  methods: {
    currentChange (data, node) {
      console.log(data, node)
    },
    check () {

    },
    handleCheckChange (data, checked, indeterminate) {
      data.select = true
      console.log(data, checked, indeterminate)
      // console.log('树');
      // console.log(this.data)
    },
    nodeClick (a, b, c) {
      console.log(a, b, c)
    },
    handleNodeClick (data) {
      // console.log(data);
    },

    getProjectStatus () {
      this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
        if (res.data.status == 2) {
          this.publishStatus = true
        } else {
          this.publishStatus = false
        }
      })
    },
    publishProject () {
      const aaa = this.$refs.tree.getCheckedNodes(false, false)
      console.log(aaa)
      // this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/publish`, { key: this.projectKey }).then(() => {
      //   this.publishStatus = true
      //   this.msgSuccess('发布成功')
      // })
    },
    stopPublishProject () {
      this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/stop`, { 'key': this.projectKey }).then(res => {
        if (res.data) {
          this.msgSuccess('停止成功')
          this.getProjectStatus()
        }
      })
    },
    qrCodeGenSuccess (dataUrl) {
      this.qrCodeUrl = dataUrl
    },
    downloadFile (fileName, content) {
      let aLink = document.createElement('a')
      let blob = this.base64ToBlob(content) // new Blob([content]);
      let evt = document.createEvent('HTMLEvents')
      evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob)
      // aLink.dispatchEvent(evt);
      aLink.click()
    },
    // base64转blob
    base64ToBlob (code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length
      let uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },
    toFeedbackPageHandle () {
      this.$router.replace({ path: '/project/form/statistics', query: { key: this.projectKey } })
    }
  }

}
</script>

<style lang="scss" scoped>
.publish-container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #f7f7f7;
  min-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.publish-btn-view {
  width: 800px;
}
.publish-finish-view {
  width: 500px;
  height: 200px;
  text-align: center;
  .icon-view {
    width: 59px;
    height: 59px;
    border-radius: 100px;
    background-color: #0076ff;
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
  }
  .success-icon {
    text-align: center;
    color: white;
    font-size: 30px;
  }
  .success-title {
    color: rgba(16, 16, 16, 100);
    font-size: 28px;
  }
  .link-text {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
  }
}
</style>