auth-web/src/pages/data-auth-module/property-management/user-management/user-attributes.vue

<!--
 * @Author: Liugh
 * @Date: 2021-05-17 14:52:53
 * @LastEditTime: 2021-05-18 14:06:47
 * @LastEditors: Do not edit
 * @Description: 
-->
<template>
    <main class="user-attributes">
        <el-form ref="ruleForm" inline :rules="rules" :model="form">
            <el-form-item label="用户类别">
                <el-select v-model="form.userType" placeholder="请选择用户类别">
                    <el-option label="警员" value="shanghai"></el-option>
                    <el-option label="辅警" value="beijing"></el-option>
                    <el-option label="施工人员" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="form.idCard" placeholder="请输入身份证号"></el-input>
            </el-form-item>

            <el-form-item label="所属机构">
                <dg-tree-select
                    v-model="form.institution"
                    placeholder="请选择所属机构"
                    :data="options"
                    clearable
                    filterable
                    multiple
                ></dg-tree-select>
            </el-form-item>

            <el-form-item>
                <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
            </el-form-item>
            
            <el-form-item label="最近同步时间：" style="float:right">
                <span>2021-04-08 12:00:00</span>
            </el-form-item>
        </el-form>
        <div class="buttonGroup">
            <dg-button type="primary" @click="handleLeading" icon="el-icon-upload2">导入</dg-button>
            <dg-button type="primary" @click="handleSynchro" icon="el-icon-refresh">同步</dg-button>
            <dg-button type="text" @click="handleInfo">详情</dg-button>
        </div>

        <Table ref="myTable" :url="tableUrl" :headerData="UserTableData" :condition="reportForm">
            <dg-table-column fixed="right" label="操作" align="center">
                <template>
                    <dg-button type="text" @click="handleInfo">详情</dg-button>
                </template>
            </dg-table-column>
        </Table>
    </main>
</template>

<script>
import Table from "@/pages/common/table";
import { ApplicationTableData } from "../DataConfig";
import * as dynamicManageApi from "@/api/dynamic-manage";
import detail from "./detail";
const editorArea = ["900px", "660px"];
export default {
    name: "user-attributes", // 组件名称
    props: {
        // 接收父组件的数据
    },
    data() {
        // 组件内部参数
        return {
            // 参数名称及默认值
            form: {},
            rules: {},
            options: [
                {
                    id: "fruits",
                    label: "Fruits",
                    children: [
                        {
                            id: "apple",
                            label: "Apple",
                            isNew: true
                        },
                        {
                            id: "grapes",
                            label: "Grapes",
                            disabled: true
                        },
                        {
                            id: "pear",
                            label: "Pear"
                        },
                        {
                            id: "strawberry",
                            label: "Strawberry 🍓"
                        },
                        {
                            id: "watermelon",
                            label: "Watermelon 🍉"
                        }
                    ]
                },
                {
                    id: "vegetables",
                    label: "Vegetables",
                    children: [
                        {
                            id: "corn",
                            label: "Corn 🌽"
                        },
                        {
                            id: "carrot",
                            label: "Carrot 🥕"
                        },
                        {
                            id: "eggplant",
                            label: "Eggplant 🍆"
                        },
                        {
                            id: "tomato",
                            label: "Tomato 🍅"
                        }
                    ]
                }
            ],
            UserTableData,
            tableUrl: dynamicManageApi.tableUrl,
            reportForm: {}
        };
    },
    computed: {}, // 计算属性
    watch: {}, // 侦听器（扩展的计算属性）
    components: { Table }, // 注册局部组件
    methods: {
        /**
         * @description:表单查询方法
         */
        handleSearch() {},
        /**
         * @description:导入方法
         */
        handleLeading() {},
        /**
         * @description:同步方法
         */
        handleSynchro() {},
        /**
         * @description:详情
         */
        handleInfo() {
            const layer = this.$dgLayer({
                title: "警员详情",
                shade: [0.4, "#FFF"],
                content: detail,
                props: {},
                on: {
                    success() {
                        layer.close(layer.dialogIndex);
                    }
                },
                area: editorArea
            });
        }
    }, // 内部方法
    beforeCreate() {}, // 组件创建前
    created() {}, // 组件创建完成后
    beforeMount() {}, // 组件挂载前
    mounted() {}, // 组件挂载完成后
    beforeUpdate() {}, // 组件更新前
    updated() {}, // 组件挂载完成后
    beforeDestroy() {}, // 组件销毁前
    destroyed() {} // 组件销毁完成后
};
</script>
<style lang="scss" scoped>
@import "../index.scss";
</style>