@egova/components/src/components/person-selector/index.ts

components

import { component, config, View, autowired } from "@egova/flagwind-web";
import "./index.scss";
import { QueryModel, Paging } from "../../models";
import Service from "./service";
import { PropSync } from "vue-property-decorator";

@component({
    template: require("./index.html")
})
export default class PersonSelector extends View {
    @autowired(Service)
    public service!: Service;

    // //
    // @config({ type: Boolean, default: false })
    // public modalVisible!: boolean;
    // 控制弹窗显示
    @PropSync("value", { type: Boolean, default: false })
    public visible!: boolean;

    public get show() {
        return this.visible;
    }

    public set show(value: Boolean) {
        this.$emit("input", value);
    }

    @config({ type: Object, default: () => Object.create(null) })
    public choosePerson!: any;

    public loading: boolean = false;

    public tableSelectedId = "";

    public condition: any = {
        name: "",
        departmentId: ""
    };

    public treeData: Array<any> = [
        {
            id: "-1",
            title: "机构列表",
            expand: true,
            selected: false,
            children: []
        }
    ];

    public get columns() {
        return [
            {
                title: "选择",
                width: 60,
                align: "center",
                ellipsis: true,
                slot: "action"
            },
            {
                title: "人员名称",
                slot: "name",
                align: "center",
                ellipsis: true
            },
            { title: "性别", key: "sexName", align: "center", ellipsis: true },
            {
                title: "联系电话",
                slot: "phone",
                align: "center",
                ellipsis: true
            },
            {
                title: "所属机构",
                slot: "departmentName",
                align: "center",
                tooltip: true
            }
        ];
    }

    public get chooseColumn() {
        return [
            { title: "人员名称", key: "name", align: "center", ellipsis: true },
            {
                title: "操作",
                width: 60,
                align: "center",
                ellipsis: true,
                slot: "action"
            }
        ];
    }

    public list: Array<any> = [];

    public chooseList: Array<any> = [];

    public paging: Paging = {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0
    };

    public onVisibleChange(visible: boolean) {
        if (visible === true) {
            this.tableSelectedId = this.choosePerson
                ? this.choosePerson.id
                : "";
            this.chooseList = [];
            if (this.choosePerson) {
                this.chooseList.push(this.choosePerson);
            }
        }
        this.$emit("on-visible-change", visible);
    }

    public onTreeSelectChange(selections: Array<any>, curNode: any) {
        if (curNode.selected) {
            // 选中
            if (curNode.id !== "-1") {
                this.condition.departmentId = curNode.id;
            } else {
                this.condition.departmentId = "";
            }

            this.onQuery();
        } else {
            // TODO: 取消选中
            // this.select = Object.create(null);
        }
    }

    public onRadioChange(row: any) {
        this.tableSelectedId = row.id;
        this.chooseList = [];
        this.chooseList.push(row);
    }

    public toRemove(row: any) {
        this.chooseList = [];
        this.tableSelectedId = "";
    }

    public onPageIndexChange(index: number) {
        this.paging.pageIndex = index;
        this.doQuery();
    }

    public onPageSizeChange(size: number) {
        this.paging.pageIndex = 1;
        this.paging.pageSize = size;
        this.doQuery();
    }

    public mounted() {
        this.getDepartmentTree();
        this.onQuery();
    }

    public onQuery() {
        this.paging.pageIndex = 1;
        this.paging.pageSize = 10;
        this.doQuery();
    }

    public async doQuery() {
        this.loading = true;
        let query: QueryModel<any> = Object.create(null);
        query.condition = this.condition;
        query.paging = this.paging;
        let res: any = await this.service.personPage(query);
        if (!res || res.hasError) return;
        // if (res.result.length < 1) {
        //     this.$message.info("没有查询到数据");
        // }
        this.list = res.result;
        this.paging.totalCount = res.totalCount;
        this.loading = false;
    }

    // 获取机构树
    public async getDepartmentTree() {
        let res: any = await this.service.getDepartmentTree();
        if (res.hasError) {
            this.$message.error(res.message);
        }

        let data = res.result;
        this.treeData[0].children = [];
        for (let g of data) {
            let node = this.getTreeNode(g);
            this.treeData[0].children.push(node);
        }
    }

    public getTreeNode(item: any) {
        let node: any = {};
        node.children = [];
        node._data = item;
        node.title = item.name;
        node.id = item.id;
        node.selected = false;
        if (item.children != null && item.children.length > 0) {
            for (let c of item.children) {
                node.children.push(this.getTreeNode(c));
            }
        }
        return node;
    }

    // 点击取消按钮
    public cancel() {
        this.$emit("on-visible-change", false);
    }
    // 点击确定按钮
    public onOkClick() {
        this.$emit(
            "on-choose-ok",
            this.chooseList.length === 0 ? {} : this.chooseList[0]
        );
    }
}