jiangyy
4 years ago
8 changed files with 801 additions and 636 deletions
@ -1,196 +1,287 @@ |
|||||
<template> |
<template> |
||||
<div class="publish-container"> |
<div class="publish-container"> |
||||
|
<div> |
||||
|
<div v-if="!publishStatus" |
||||
|
class="publish-btn-view"> |
||||
<div> |
<div> |
||||
<div v-if="!publishStatus" class="publish-btn-view"> |
<el-form label-width="90px"> |
||||
<el-button |
<el-form-item label="小程序端"> |
||||
class="publish-btn" |
<el-radio-group v-model="clientType"> |
||||
size="medium" |
<el-radio-button label="resi">居民端</el-radio-button> |
||||
type="primary" |
<el-radio-button label="work">工作端</el-radio-button> |
||||
@click="publishProject" |
</el-radio-group> |
||||
> |
</el-form-item> |
||||
<i class="el-icon-document-checked el-icon--right">开始发布</i> |
|
||||
</el-button> |
<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> |
||||
<div v-if="publishStatus" class="publish-finish-view"> |
<div style="text-align: center;"> |
||||
<el-row :gutter="10" align="middle" type="flex"> |
<el-link type="primary" @click="()=>{ |
||||
<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) |
this.downloadFile('qrcode.png',this.qrCodeUrl) |
||||
}" |
}" |
||||
> |
> |
||||
下载分享二维码 |
下载分享二维码 |
||||
</el-link> |
</el-link> |
||||
</div> |
</div> |
||||
</el-col> |
</el-col> --> |
||||
<el-col style="margin-left: 75px;"> |
<el-col style="margin-left: 75px;"> |
||||
<div style="display: flex; justify-content: center;"> |
<div style="display: flex; justify-content: center;"> |
||||
<div class="icon-view"> |
<div class="icon-view"> |
||||
<i class="el-icon-check success-icon" /> |
<i class="el-icon-check success-icon" /> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div> |
<div> |
||||
<p class="success-title">恭喜您，发布成功！</p> |
<p class="success-title">恭喜您，发布成功！</p> |
||||
</div> |
</div> |
||||
<div> |
<!-- <div> |
||||
<p class="link-text"> {{ writeLink }}</p> |
<p class="link-text"> {{ writeLink }}</p> |
||||
</div> |
</div> --> |
||||
<el-row> |
<el-row> |
||||
<el-col :offset="3" :span="6"> |
<!-- <el-col :offset="2" |
||||
<el-button v-clipboard:copy="writeLink" |
:span="6"> |
||||
|
<el-button v-clipboard:copy="writeLink" |
||||
v-clipboard:error="()=>{this.msgError('复制失败')}" |
v-clipboard:error="()=>{this.msgError('复制失败')}" |
||||
v-clipboard:success="()=>{this.msgSuccess('复制成功')}" type="primary" |
v-clipboard:success="()=>{this.msgSuccess('复制成功')}" type="primary" |
||||
> |
> |
||||
复制链接 |
复制链接 |
||||
</el-button> |
</el-button> |
||||
</el-col> |
</el-col> --> |
||||
<el-col :span="6"> |
<el-col :span="12"> |
||||
<el-button |
<el-button type="danger" |
||||
type="danger" |
@click="stopPublishProject"> |
||||
@click="stopPublishProject" |
停止发布 |
||||
> |
</el-button> |
||||
停止发布 |
</el-col> |
||||
</el-button> |
<el-col :span="12"> |
||||
</el-col> |
<el-button type="warning" |
||||
<el-col :span="6"> |
@click="toFeedbackPageHandle"> |
||||
<el-button |
查看反馈 |
||||
type="warning" |
</el-button> |
||||
@click="toFeedbackPageHandle" |
</el-col> |
||||
> |
</el-row> |
||||
查看反馈 |
</el-col> |
||||
</el-button> |
</el-row> |
||||
</el-col> |
</div> |
||||
</el-row> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import VueQr from 'vue-qr' |
// import VueQr from 'vue-qr' |
||||
|
|
||||
export default { |
export default { |
||||
name: 'ProjectPublish', |
name: 'ProjectPublish', |
||||
components: { |
components: { |
||||
VueQr |
// 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 () { |
||||
|
|
||||
}, |
}, |
||||
data() { |
handleCheckChange (data, checked, indeterminate) { |
||||
return { |
data.select = true |
||||
publishStatus: false, |
console.log(data, checked, indeterminate) |
||||
projectKey: null, |
// console.log('树'); |
||||
writeLink: '', |
// console.log(this.data) |
||||
qrCodeUrl: '' |
}, |
||||
|
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('发布成功') |
||||
|
// }) |
||||
}, |
}, |
||||
mounted() { |
stopPublishProject () { |
||||
this.projectKey = this.$route.query.key |
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/stop`, { 'key': this.projectKey }).then(res => { |
||||
let url = window.location.protocol + '//' + window.location.host |
if (res.data) { |
||||
this.writeLink = `${url}/s/${this.projectKey}` |
this.msgSuccess('停止成功') |
||||
this.getProjectStatus() |
this.getProjectStatus() |
||||
}, methods: { |
|
||||
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() { |
|
||||
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}}) |
|
||||
} |
} |
||||
|
}) |
||||
|
}, |
||||
|
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> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.publish-container { |
.publish-container { |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
padding: 0; |
padding: 0; |
||||
margin: 0; |
margin: 0; |
||||
background-color: #f7f7f7; |
background-color: #f7f7f7; |
||||
min-height: 84vh; |
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; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
|
align-content: center; |
||||
|
justify-items: center; |
||||
justify-content: center; |
justify-content: center; |
||||
} |
} |
||||
.publish-finish-view { |
.success-icon { |
||||
width: 500px; |
|
||||
height: 200px; |
|
||||
text-align: center; |
text-align: center; |
||||
.icon-view { |
color: white; |
||||
width: 59px; |
font-size: 30px; |
||||
height: 59px; |
} |
||||
border-radius: 100px; |
.success-title { |
||||
background-color: #0076ff; |
color: rgba(16, 16, 16, 100); |
||||
display: flex; |
font-size: 28px; |
||||
align-items: center; |
} |
||||
align-content: center; |
.link-text { |
||||
justify-items: center; |
color: rgba(16, 16, 16, 100); |
||||
justify-content: center; |
font-size: 14px; |
||||
} |
} |
||||
.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> |
</style> |
||||
|
|||||
File diff suppressed because it is too large
Loading…
Reference in new issue