<template>
<div>
<!--选择账号 选择账号的具体页面 选择添加账号-->
<el-button icon="el-icon-plus" size="medium" @click="open" :disabled="viewMode">
添加账号
</el-button>
<!--title表示标题 close表示取消-->
<el-dialog
@open="open"
title="选择账号"
:visible.sync="visible"
@close="cancel"
width="70%"
:append-to-body="true"
>
<!--单选框和多选框选择 控制内容分类-->
<el-form ref="account" :model="query" label-width="140px">
<el-form-item label="平台分类">
<!-- <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
<el-checkbox v-model="checked2" label="备选项2" border></el-checkbox> -->
<!--v-model默认绑定:value="query.content_type" @change="query.content_type = $event.target.value"-->
<grid-radio
@change="ListQuery"
v-model="query.platrorm_channel"
:border="true"
:options="
platform_category
"
/>
</el-form-item>
<el-form-item label="平台选择">
<!-- <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
<el-checkbox v-model="checked2" label="备选项2" border></el-checkbox> -->
<grid-radco
@change="ListRuery"
v-model="query.platform"
:border="true"
:options="
this.description
"
/>
</el-form-item>
<el-form-item label="部门选择">
<!-- <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
<el-checkbox v-model="checked2" label="备选项2" border></el-checkbox> -->
<grid-radeo
@change="ListCuery"
v-model="query.department"
:border="true"
:options="this.departmentList2"
/>
</el-form-item>
</el-form>
<div style="float: left;">
<!--子代方法有一个·传值传向父级 onselect去接收这个值-->
<select-account @seletct="onSelect" />
</div>
<div style="clear: both"></div>
<template v-slot:footer>
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import GridRadco from "@/component/radio/GridRadco";
import GridRadeo from "@/component/radio/GridRadeo";
import GridRadio from "@/component/radio/GridRadio";
import AccountCard from "./AccountCard";
import SelectAccount from "./SelectAccount";
import {getAction} from "@/api";
export default {
name: "AccountFilterSelect",
/*引入三个组件*/
components: { SelectAccount, AccountCard, GridRadio,GridRadeo,GridRadco },
data() {
return {
departmentList2:[],
description:[],
visible: false,
width: {
label: 4,
content: 20,
},
platform_category:[],
query: {},
/*传值传到当前的界面进行保存*/
accountList: []
};
},
props:["viewMode"],
methods: {
ListCuery(){
getAction("/account/list",{
query:{
platrorm_channel: '',
platrorm_category:'',
department_id:this.query.department,
},
}).then(res=>{
console.log(res)
this.accountList=res.data
})
},
ListRuery(){
getAction("/account/list",{
query:{
platrorm_channel: '',
platrorm_category:this.query.platform,
department_id:'',
},
}).then(res=>{
console.log(res)
this.accountList=res.data
})
},
ListQuery(){
console.log(1)
getAction("/account/list",{
query:{
platrorm_channel: this.query.platrorm_channel,
platrorm_category:'',
department_id:'',
}
}).then(res=>{
console.log(res)
this.accountList=res.data
})
},
/*控制弹窗的开启 控制弹框得开启*/
open() {
this.query={}
console.log(this)
/*动态渲染content_type接口*/
getAction("/dict/list",{
dict_code: "platform_category"
}).then(res=>{
this.platform_category=res.data
console.log(this.platform_category)
})
/*动态渲染content_type接口*/
getAction("/department/publish_permission",
).then(res=>{
console.log(res)
this.departmentList2=res.data
})
getAction("/account/plugin_list").then(res=>{
console.log(res)
this.description=res.data
})
this.visible = true;
},
/*通过confirm'继续向上传值*/
confirm() {
this.$emit("select", this.accountList);
this.close();
},
/*取消就调用close 点击close就将识别取消按钮*/
cancel() {
this.close();
},
/*定义一个close得 调用取消*/
close() {
this.$emit("close");
this.visible = false;
},
onSelect(data){
/*把子级传入的值*/
console.log(data)
this.accountList = data;
}
}
};
</script>
<style lang="scss" scoped></style>
![在这里插入图片描述]()