auth-web/src/pages/admin-manage/add.vue

<template>
    <dg-row :gutter="20">
        <el-form ref="form" label-width="80px" label-suffix=":" :model="reportPersonFrom">
            <dg-row :gutter="20">
                <dg-col :span="16">
                    <dg-col :span="12">
                        <el-form-item label="姓名" prop="name.value">
                            <el-input
                                v-model="reportPersonFrom.name.value"
                                clearable
                                placeholder="请输入姓名"
                                @keyup.enter.native="handleSearch"
                            />
                        </el-form-item>
                    </dg-col>
                    <dg-col :span="12">
                        <el-form-item label="警号" prop="policeNumber.value">
                            <el-input
                                v-model="reportPersonFrom.policeNumber.value"
                                clearable
                                placeholder="请输入警号"
                                @keyup.enter.native="handleSearch"
                            />
                        </el-form-item>
                    </dg-col>
                    <dg-col :span="12">
                        <el-form-item label="身份证" prop="idcard.value">
                            <el-input
                                v-model="reportPersonFrom.idcard.value"
                                clearable
                                placeholder="请输入身份证"
                                @keyup.enter.native="handleSearch"
                            />
                        </el-form-item>
                    </dg-col>
                    <dg-col :span="12">
                        <el-form-item label="单位名称">
                            <org v-model="tempOrgId" :key="orgKey" type="APP" />
                        </el-form-item>
                    </dg-col>
                </dg-col>
                <dg-col :span="7">
                    <dg-button type="primary" icon="el-icon-search" @click="handleSearch">查询</dg-button>
                    <dg-button type="primary" icon="el-icon-refresh-right" @click="handleReset">重置</dg-button>
                </dg-col>
            </dg-row>
        </el-form>
        <Table
            ref="myTable"
            selection
            :url="tableUrl"
            :headerData="titleData"
            :condition="reportPersonFrom"
            @handleSelectionChange="handleSelectionChange"
        >
            <dg-table-column fixed="right" label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <div class="u-table__operation">
                        <el-tooltip
                            v-for="(item, i) in optList"
                            :key="i"
                            :content="item.tooltip"
                            effect="dark"
                            placement="top-end"
                        >
                            <i :class="item.icon" @click="item.on(scope.row)" />
                        </el-tooltip>
                    </div>
                </template>
            </dg-table-column>
        </Table>
        <div class="dg-layer-demo" v-footer>
            <dg-button @click="handleClose">取消</dg-button>
            <dg-button type="primary" @click="handlSave">确定</dg-button>
        </div>
    </dg-row>
</template>

<script>
import Org from "@/components/org";
import * as Api from "@/api/admin-manage";
import Table from "@/pages/common/table";
import Editor from "./noBindEditor";
import { mapGetters } from "vuex";
export default {
    name: "adminManageAdd",
    components: { Org, Table },
    computed: {
        ...mapGetters(["user"])
    },
    props: {
        orgId: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        const that = this;
        return {
            tableUrl: Api.tableUnAdminPolices,
            reportPersonFrom: {
                name: { value: "", op: "like" }, // 姓名
                policeNumber: { value: "", op: "like" }, // 编号
                idcard: { value: "", op: "like" }, // 身份证
                orgId: { value: "", op: "=" } // 机构id
            },
            tempOrgId: "",
            titleData: [
                { label: "姓名", prop: "name" },
                { label: "警号", prop: "policeNumber" },
                { label: "身份证", prop: "idcard" },
                { label: "单位名称", prop: "orgName" },
                { label: "用户类型", prop: "userType", enum: "UserTypeEnum" }
            ],
            optList: [{ icon: "el-icon-edit", tooltip: "管理范围", on: that.handleDetail }],
            selectionList: [],
            orgSave: false,
            menuSave: false,
            orgKey: 0
        };
    },
    methods: {
        success(message = "操作成功!") {
            const that = this;
            that.$message.success(message);
        },
        fail(message = "操作失败", error) {
            const that = this;
            console.error("[Error]", error);
            that.$message.error(message);
        },
        reloadTable() {
            const that = this;
            that.$refs.myTable.$refs.grid.reload();
        },
        handleSearch() {
            // if (this.tempOrgId) {
            //     this.$set(this.reportPersonFrom.orgId, "value", this.tempOrgId);
            // }
            this.$set(this.reportPersonFrom.orgId, "value", this.tempOrgId);
            this.$refs.myTable.handleSearchClick();
        },
        handleClose(bool) {
            this.$emit("success", bool);
        },
        handleReset() {
            if (this.tempOrgId) {
                this.tempOrgId = "";
                this.orgKey++;
            }
            this.$set(this.reportPersonFrom.orgId, "value", "");
            this.$refs.form.resetFields();
        },
        handleSelectionChange(selection) {
            this.selectionList = selection;
        },
        handlSave() {
            let ids = [];
            const { selectionList } = this;
            const that = this;
            let flag = false;
            let params = {
                userIds: ""
            };
            if (selectionList.length) {
                selectionList.some((item) => {
                    if (!item.orgSave) {
                        this.$message({ type: "error", message: item.name + "未分配管理范围" });
                        flag = true;
                        return true;
                    }
                    // if (!item.menuSave) {
                    //     this.$message({ type: "error", message: item.name + "未分配管理菜单" });
                    //     flag = true;
                    //     return true;
                    // }
                });
                selectionList.forEach((item) => {
                    ids.push(item.id);
                });
                params["userIds"] = ids.join(",");
                if (!flag) {
                    Api.addAdmin(params)
                        .then((res) => {
                            that.success();
                            that.$emit("success", true);
                        })
                        .catch(() => {
                            that.fail("新增失败");
                        });
                }
            } else {
                this.$message({ type: "warning", message: "至少选择一条" });
                return;
            }
        },
        handleDetail(row) {
            const that = this;
            const { id } = row;

            const layer = that.$dgLayer({
                title: "修改",
                shade: [0.4, "#FFF"],
                area: ["830px", "660px"],
                content: Editor,
                props: {
                    id,
                    type: "create"
                },
                on: {
                    success(bool = false) {
                        layer.close(layer.dialogIndex);
                        if (bool) {
                            that.reloadTable();
                        }
                    },
                    oneSaveOrg(boo) {
                        // that.orgSave = boo;
                        row.orgSave = boo;
                        that.$refs.myTable.toggleRowSelection(row, true);
                    },
                    oneSaveMenu(boo) {
                        // that.menuSave = boo;
                        row.menuSave = boo;
                        that.$refs.myTable.toggleRowSelection(row, true);
                    }
                }
            });
        }
    },
    created() {
        this.$set(this.reportPersonFrom.orgId, "value", this.orgId.value); //带当前登录用户的orgId去查
        // setTimeout(() => {
        //     this.$set(this.reportPersonFrom.orgId, "value", "");
        // }, 250);
    }
};
</script>