dai
3 years ago
5 changed files with 350 additions and 30 deletions
@ -0,0 +1,221 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="dialog-h-content scroll-h"> |
||||
|
<el-form |
||||
|
ref="ref_form" |
||||
|
:inline="true" |
||||
|
:model="fmData" |
||||
|
:rules="dataRule" |
||||
|
class="form" |
||||
|
> |
||||
|
<el-form-item |
||||
|
label="文章名称" |
||||
|
prop="title" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<div style="width: 610px"> |
||||
|
{{ fmData.title || "--" }} |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="下线网格 " |
||||
|
prop="gridIdList" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<el-cascader |
||||
|
v-model="fmData.gridIdList" |
||||
|
placeholder="请选择" |
||||
|
:options="gridOptions" |
||||
|
:props="{ |
||||
|
multiple: true, |
||||
|
value: 'value', |
||||
|
label: 'label', |
||||
|
children: 'children', |
||||
|
checkStrictly: false, |
||||
|
emitPath: false, |
||||
|
}" |
||||
|
:show-all-levels="false" |
||||
|
size="small" |
||||
|
clearable |
||||
|
class="item-select" |
||||
|
style="width: 500px" |
||||
|
@change="handleChangeCascader" |
||||
|
> |
||||
|
</el-cascader> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class="div_btn resi-btns"> |
||||
|
<el-button size="small" @click="handleCancle">取 消</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
:disabled="btnDisable" |
||||
|
@click="handleComfirm" |
||||
|
>确 定</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
export default { |
||||
|
props: {}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
btnDisable: false, |
||||
|
|
||||
|
fmData: { |
||||
|
articleId: "", |
||||
|
title: "", |
||||
|
gridIdList: [], |
||||
|
}, |
||||
|
|
||||
|
gridOptions: [], |
||||
|
}; |
||||
|
}, |
||||
|
components: {}, |
||||
|
computed: { |
||||
|
dataRule() { |
||||
|
return { |
||||
|
gridIdList: [ |
||||
|
{ required: true, message: "下线网格不能为空", trigger: "blur" }, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
watch: {}, |
||||
|
|
||||
|
async mounted() {}, |
||||
|
|
||||
|
methods: { |
||||
|
handleChangeCascader(e) { |
||||
|
console.log(e); |
||||
|
}, |
||||
|
async initForm({ articleId, title }) { |
||||
|
this.fmData.articleId = articleId; |
||||
|
this.fmData.title = title; |
||||
|
this.fmData.gridIdList = []; |
||||
|
this.gridOptions = []; |
||||
|
this.getGridOpitons(articleId); |
||||
|
}, |
||||
|
|
||||
|
async getGridOpitons(articleId) { |
||||
|
const url = "/gov/voice/article/publishgridlist"; |
||||
|
const params = { |
||||
|
articleId, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
function poll(list) { |
||||
|
return list.map((item) => { |
||||
|
return { |
||||
|
label: item.agencyName, |
||||
|
value: item.agencyId, |
||||
|
type: "agency", |
||||
|
children: [ |
||||
|
...poll(item.subAgencyGridList), |
||||
|
...item.gridList.map((grid) => ({ |
||||
|
label: grid.gridName, |
||||
|
value: grid.gridId, |
||||
|
type: "grid", |
||||
|
})), |
||||
|
], |
||||
|
}; |
||||
|
}); |
||||
|
} |
||||
|
let gridOptions = poll([data.agencyGridList]); |
||||
|
console.log(gridOptions); |
||||
|
this.gridOptions = gridOptions; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async handleComfirm() { |
||||
|
this.btnDisable = true; |
||||
|
setTimeout(() => { |
||||
|
this.btnDisable = false; |
||||
|
}, 5000); |
||||
|
this.$refs["ref_form"].validate((valid, messageObj) => { |
||||
|
if (!valid) { |
||||
|
app.util.validateRule(messageObj); |
||||
|
this.btnDisable = false; |
||||
|
} else { |
||||
|
this.submit(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
async submit() { |
||||
|
let url = "/gov/voice/article/offlinearticle"; |
||||
|
|
||||
|
let params = { ...this.fmData }; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: "success", |
||||
|
message: "操作成功", |
||||
|
}); |
||||
|
this.$emit("afterOffline"); |
||||
|
this.btnDisable = false; |
||||
|
} else { |
||||
|
this.btnDisable = false; |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleCancle() { |
||||
|
this.$emit("close"); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.item_width_1 { |
||||
|
width: 500px; |
||||
|
} |
||||
|
.item_width_2 { |
||||
|
width: 400px; |
||||
|
} |
||||
|
.item_width_3 { |
||||
|
margin-left: 10px; |
||||
|
width: 200px; |
||||
|
} |
||||
|
.item_width_4 { |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
.div_map { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.div_btn { |
||||
|
// display: flex; |
||||
|
// justify-content: flex-end; |
||||
|
} |
||||
|
.el-tabs { |
||||
|
margin: 0 20px; |
||||
|
} |
||||
|
.el-upload__tip { |
||||
|
color: rgb(155, 155, 155); |
||||
|
margin: 0; |
||||
|
} |
||||
|
.form { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.attachement-list { |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue