You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
410 lines
11 KiB
410 lines
11 KiB
<template>
|
|
<div class="publish-container">
|
|
<div>
|
|
<div v-if="!publishStatus"
|
|
class="publish-btn-view">
|
|
<div>
|
|
<el-form label-width="150px">
|
|
<el-form-item label="小程序端">
|
|
<el-radio-group class="form_item"
|
|
@change="clientChange"
|
|
v-model="clientType">
|
|
<el-radio label="resi">居民端</el-radio>
|
|
<el-radio label="gov">工作端</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="发布范围">
|
|
<el-tree class="form_item"
|
|
ref="tree"
|
|
node-key="orgId"
|
|
style="background-color:#f7f7f7"
|
|
:props="props"
|
|
:data="treeData"
|
|
show-checkbox
|
|
:default-expand-all="false" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div style="text-align:left;margin-left:200px;margin-top:50px">
|
|
<el-button class="publish-btn"
|
|
size="medium"
|
|
type="primary"
|
|
@click="publishProject">
|
|
<i class="el-icon-document-checked el-icon--right">发布</i>
|
|
</el-button>
|
|
<!-- <el-button type="danger"
|
|
@click="resolveAgency">
|
|
禁用
|
|
</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>
|
|
|
|
<el-form label-width="150px">
|
|
<el-form-item label="小程序端">
|
|
<span style="margin-left:30px;float:left">{{publishClient}}</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="发布范围">
|
|
<el-tree style="background-color:#f7f7f7"
|
|
class="form_item"
|
|
ref="selTree"
|
|
node-key="orgId"
|
|
:default-checked-keys="publishAgency"
|
|
:props="props"
|
|
:data="selTreeData"
|
|
show-checkbox
|
|
:default-expand-all="false" />
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- <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="24">
|
|
<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: 'orgName',
|
|
children: 'subOrgList'
|
|
},
|
|
count: 1,
|
|
treeData: [],
|
|
|
|
selTreeData: [],//回显选中的组织
|
|
|
|
selAgencyList: [],
|
|
agencyArrayCopy: [],
|
|
publishClient: '',
|
|
publishAgency: []//问卷的发布范围
|
|
}
|
|
},
|
|
async mounted () {
|
|
this.projectKey = this.$route.query.key
|
|
let url = window.location.protocol + '//' + window.location.host
|
|
this.writeLink = `${url}/${process.env.VUE_APP_PUBLIC_PATH}/s/${this.projectKey}`
|
|
await this.loadAgencyList()
|
|
|
|
|
|
|
|
},
|
|
methods: {
|
|
clientChange (label) {
|
|
this.clientType = label
|
|
this.loadAgencyList()
|
|
},
|
|
|
|
loadAgencyList () {
|
|
const customerId = localStorage.getItem('customerId')
|
|
let params = {
|
|
client: this.clientType,
|
|
agencyId: customerId
|
|
}
|
|
this.$api.post(`/data/aggregator/org/agencytree`, params).then((res) => {
|
|
this.treeData = res.data || []
|
|
this.selTreeData = JSON.parse(JSON.stringify(this.treeData))
|
|
|
|
this.getProjectStatus()
|
|
|
|
})
|
|
},
|
|
|
|
//获取问卷发布范围
|
|
getPublishAgency () {
|
|
let params = {
|
|
projectKey: this.projectKey,
|
|
|
|
}
|
|
this.$api.post(`/data/aggregator/questionnaire/getrange`, params).then((res) => {
|
|
if (res.data.client) {
|
|
if (res.data.client === 'resi') {
|
|
this.publishClient = '居民端'
|
|
} else if (res.data.client === 'gov') {
|
|
this.publishClient = '工作端'
|
|
} else {
|
|
this.publishClient = '未知'
|
|
}
|
|
} else {
|
|
this.publishClient = '未知'
|
|
}
|
|
// this.processSelTreeData(this.selTreeData)
|
|
this.publishAgency = res.data.orgList || []
|
|
|
|
|
|
// this.processSelTreeData(this.selTreeData)
|
|
this.$refs.selTree.setCheckedKeys(this.publishAgency)
|
|
this.processSelTreeData(this.selTreeData)
|
|
// this.$refs.selTree.setCheckedNodes(this.publishAgency)
|
|
|
|
|
|
})
|
|
},
|
|
|
|
disableditem () {
|
|
this.processSelTreeData(this.selTreeData)
|
|
},
|
|
|
|
processSelTreeData (array) {
|
|
|
|
array.forEach(element => {
|
|
element.disabled = true
|
|
if (element.subOrgList && element.subOrgList.length > 0) {
|
|
this.processSelTreeData(element.subOrgList)
|
|
}
|
|
});
|
|
|
|
console.log(this.selTreeData)
|
|
},
|
|
|
|
//解析树选择的数据
|
|
resolveAgency () {
|
|
|
|
let selAll = this.$refs.tree.getCheckedNodes(false, false)
|
|
console.log(selAll)
|
|
|
|
this.selAgencyList = []
|
|
this.agencyArrayCopy = JSON.parse(JSON.stringify(this.treeData))
|
|
|
|
selAll.forEach(element => {
|
|
// debugger
|
|
let orgId = element.orgId
|
|
this.resursionTree(this.agencyArrayCopy, orgId)
|
|
});
|
|
|
|
},
|
|
|
|
//递归树
|
|
resursionTree (orgArray, orgId) {
|
|
for (let i = 0; i < orgArray.length; i++) {
|
|
let item = orgArray[i]
|
|
|
|
if (item && item.orgId === orgId) {
|
|
orgArray[i].orgIds = orgArray[i].orgPids
|
|
orgArray[i].subOrgList = []
|
|
|
|
this.selAgencyList.push(orgArray[i])
|
|
orgArray[i] = {}
|
|
break
|
|
|
|
} else if (item.subOrgList && item.subOrgList.length > 0) {
|
|
|
|
this.resursionTree(item.subOrgList, orgId)
|
|
|
|
}
|
|
}
|
|
console.log(this.selAgencyList)
|
|
|
|
|
|
},
|
|
|
|
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
|
|
this.getPublishAgency()
|
|
} else {
|
|
this.publishStatus = false
|
|
|
|
}
|
|
})
|
|
},
|
|
publishProject () {
|
|
this.resolveAgency()
|
|
if (this.treeData.length > 0 && this.selAgencyList.length === 0) {
|
|
this.$message(
|
|
{
|
|
message: "请选择发布范围",
|
|
type: 'warning'
|
|
}
|
|
)
|
|
return false
|
|
}
|
|
|
|
const params = {
|
|
key: this.projectKey,
|
|
client: this.clientType,
|
|
rangeList: this.selAgencyList
|
|
}
|
|
|
|
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/publish`,
|
|
params).then(() => {
|
|
this.publishStatus = true
|
|
this.getPublishAgency()
|
|
this.$parent.getProjectStatus()
|
|
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.$parent.getProjectStatus()
|
|
this.getProjectStatus()
|
|
// this.$router.push({ path: '/home' })
|
|
}
|
|
})
|
|
},
|
|
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>
|
|
.age_title {
|
|
width: 100px;
|
|
align-items: left;
|
|
}
|
|
.publish-container {
|
|
width: 100vw;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #f7f7f7;
|
|
min-height: 84vh;
|
|
display: flex;
|
|
padding-top: 150px;
|
|
padding-left: 350px;
|
|
// 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;
|
|
}
|
|
}
|
|
.form_item {
|
|
padding-left: 20px;
|
|
}
|
|
</style>
|
|
|