vue-insagent-pc/src/views/Sys/ChannelGrouping.vue

<template>
    <div>
        <templateTable :formList="formList" :searchData.sync="searchData" :tableConfig="tableConfig" :data="tableData"
            @getList="getList" :btnGroup="btnGroup" @handleSearchList="handleSearchList" :pagination="page">
        </templateTable>
        <el-dialog :title="dialogTitle" width="25%" :visible.sync="dialogVisibleadd">
            <div class="flex" style="line-height: 50px;">
                <span>渠道分组名称：</span>
                <el-input size="small" style="width:220px" v-model="name" placeholder="请输入渠道分组名称"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisibleadd = false">取 消</el-button>
                <el-button type="primary" size="small" @click="sumbit">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="授权机构" width="25%" :visible.sync="dialogVisible">
                <el-tree ref="tree" :data="treedata" accordion :props="defaultProps" show-checkbox node-key="id" 
              :default-checked-keys="treekeys"   @check-change="treechange"  
              :default-expand-all="expandshow" class="stafftree">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" size="small" @click="sumbitInstitution">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import templateTable from "@/components/TemplateTable/index.vue";
import templateForm from "@/components/TemplateForm/index.vue";

export default {
    name: "policyImport",
    components: { templateTable, templateForm },
    data() {
        return {
            dept: [],
            name: '',
            dialogTitle: '新增',
            rowId: '',
            dialogVisible: false,
            dialogVisibleadd: false,
            labelWidth: '100px',
            btnGroup: [
                {
                    name: '新增',
                    click: () => this.add()
                }
            ],
            formList: [
                {
                    label: "渠道分组名称",
                    prop: "name",
                    type: "input",
                },

            ],
            searchData: {},
            page: {
                pageNum: 1,
                pageSize: 20,
                totalSize: 0
            },
            tableData: [],
            tableConfig: {
                columns: [
                    {
                        prop: "name",
                        label: "渠道分组名称",
                        type: "text"
                    },
                    {
                        prop: "createTime",
                        label: "创建时间",
                        type: "text"
                    },
                    {
                        prop: "updateBy",
                        label: "操作人",
                        type: "text"
                    },
                ],
                loading: true,
                isPaginationShow: true,
                optBtns: [
                    {
                        type: "primary",
                        label: "授权机构",
                        click: (row, index) => {
                            return this.uthorizedAgency(row) 
                        },
                    },
                    {
                        type: "primary",
                        label: "修改",
                        click: (row, index) => {
                            return this.handleTableUpload(row);
                        },
                    },
                    {
                        type: "primary",
                        label: "删除",
                        click: (row, index) => {
                            return this.handleTableDatl(row);
                        },
                    },

                ],
            },
            treedata: [], //授权结构树
            defaultProps: {
        //自定义参数
        children: "children",
        label: "name",
      },
      treekeys: [],
      expandshow: false,
        };
    },
    created() {
        this.getList();
        this.$api.dept.findDeptTree("9", "").then((res) => {
            this.treedata = res.data;
            this.setDisabled(this.treedata)
        });
    },
    methods: {
        uthorizedAgency(row){
             this.rowId=row.id
            this.$api.sys
                        .queryRelationList(row.id)
                        .then(res => {
                            if (res.code == 200) {
                                this.dialogVisible=true
                                setTimeout(()=>{
                                    this.dept=res.data
                                    this.$refs.tree.setCheckedKeys(res.data);
                                },500)
                               
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
        },
         //获取选中节点
    treechange(item, node, self) {
        if(item.children.length==0){
            if (node === true) {
        this.dept.push(item.id)

      } else {
        let index = this.dept.indexOf(this.dept.filter(e=>e==item.id)[0]);
        if (index !== -1) {
            this.dept.splice(index, 1);
        }
      }
        }
    
    },
    //  向有children的节点上增加disabled属性
    setDisabled(treeData) {
            if (treeData) {
                treeData.forEach(item => {
                    if (!item.deptType || item.deptType!=='D') {
                        item.disabled = true
                        this.setDisabled(item.children)
                    }
                })
            }
 
        },
        // 查询
        handleSearchList(data) {
            this.getList(data);
        },
        add() {
            this.dialogVisibleadd = true
            this.dialogTitle = '新增'
        },
        handleTableDatl(row) {
            this.$confirm("确认删除该条数据吗?", "提示", {
                type: "warning",
            })
                .then(() => {
                    this.$api.sys
                        .sysChannelGradeDelete(row.id)
                        .then(res => {
                            if (res.code == 200) {
                                this.getList();

                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                })
        },
        sumbit() {
            if (this.name) {
                if (this.dialogTitle == '新增') {
                    this.$api.sys
                        .sysChannelGradeGrade({ name: this.name })
                        .then(res => {
                            if (res.code == 200) {
                                this.getList();
                                this.dialogVisibleadd = false
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                }
                else {
                    this.$api.sys
                        .sysChannelGradeUp(this.rowId, { name: this.name })
                        .then(res => {
                            if (res.code == 200) {
                                this.getList();
                                this.dialogVisibleadd = false

                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                }
            }
            else {
                this.$message({
                    message: '请输入渠道分组名称!',
                    type: 'warning'
                });
            }
        },
        //列表数据
        getList(data) {
            this.tableConfig.loading = true;
            this.$api.sys
                .sysChannelGradePage({ ...data, ...this.page })
                .then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data.content;
                        this.page.pageNum = res.data.pageNum;
                        this.page.pageSize = res.data.pageSize;
                        this.page.totalSize = res.data.totalSize;
                        this.tableConfig.loading = false;
                    } else {
                        this.tableData = [];
                        this.$message.error(res.msg);
                        this.page.totalSize = 0;
                        this.tableConfig.loading = false;
                    }
                });
        },
        sumbitInstitution(){
            this.$api.sys
                        .sysChannelauthorized({ areaIdList: this.dept,id:this.rowId })
                        .then(res => {
                            if (res.code == 200) {
                                this.getList();
                                this.dialogVisible = false

                            } else {
                                this.$message.error(res.msg);
                            }
                        });

        },
        handleTableUpload(row) {
            this.name = row.name
            this.rowId = row.id
            this.dialogTitle = '编辑'
            this.dialogVisibleadd = true
        },
    }
};
</script>
<style lang="scss" scoped>
/deep/{
    .stafftree {
 
 // 不可全选样式
 .el-tree-node {
     .el-checkbox__input.is-disabled {
         display: none;
     }
 }
 
}
} 
</style>