|
|
@@ -0,0 +1,488 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="userManger_box">
|
|
|
+ <el-card :style="'height:' + fullHeight + 'px'">
|
|
|
+ <div class="card_box">
|
|
|
+ <!-- 组织 -->
|
|
|
+ <div
|
|
|
+ class="userManger_left"
|
|
|
+ :style="'height:' + (fullHeight - 100) + 'px'"
|
|
|
+ >
|
|
|
+ <el-tree
|
|
|
+ :data="data"
|
|
|
+ :props="defaultProps"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ ></el-tree>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 搜索和表格 -->
|
|
|
+ <div
|
|
|
+ class="userManger_right"
|
|
|
+ :style="'height:' + (fullHeight - 100) + 'px'"
|
|
|
+ >
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <!-- 组织搜索 -->
|
|
|
+ <div class="search_box">
|
|
|
+ <el-input
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入用户姓名"
|
|
|
+ v-model="nameVal"
|
|
|
+ @change="searchData"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-input
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ v-model="phoneVal"
|
|
|
+ @change="searchData"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <div class="btn_box">
|
|
|
+ <el-button type="primary" size="small" @click="searchData"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" size="small" @click="addrRole"
|
|
|
+ >添加用户</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table :data="tableData" stripe style="width: 100%">
|
|
|
+ <el-table-column prop="ind" label="序号" width="90">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="姓名" width="190">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="user" label="账号名称" width="200">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="phone" label="手机号" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="texture" label="所属组织" width="280">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="state" label="状态" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.state == '1'">
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background: #30a031;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 0 2px 0;
|
|
|
+ "
|
|
|
+ ></span>
|
|
|
+ <span>正常</span>
|
|
|
+ </span>
|
|
|
+ <span v-if="scope.row.state == '0'">
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background: #f93f3d;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 0 2px 0;
|
|
|
+ "
|
|
|
+ ></span>
|
|
|
+ <span>停用</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="280">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <a
|
|
|
+ class="reset"
|
|
|
+ href="javascript:;"
|
|
|
+ @click="actionFunc(scope.row)"
|
|
|
+ >编辑</a
|
|
|
+ >
|
|
|
+ <i class="line"></i>
|
|
|
+ <a class="delete" href="javascript:;" @click="outUse(scope.row)"
|
|
|
+ >停用</a
|
|
|
+ >
|
|
|
+ <i class="line"></i>
|
|
|
+ <a
|
|
|
+ class="reset"
|
|
|
+ href="javascript:;"
|
|
|
+ @click="resetPwd(scope.row)"
|
|
|
+ >重置密码</a
|
|
|
+ >
|
|
|
+ <i class="line"></i>
|
|
|
+ <a
|
|
|
+ class="delete"
|
|
|
+ href="javascript:;"
|
|
|
+ @click="deleteFunc(scope.row)"
|
|
|
+ >删除</a
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <el-pagination
|
|
|
+ v-if="tableData.length !== 0"
|
|
|
+ @current-change="changeList"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next, jumper"
|
|
|
+ :current-page="page"
|
|
|
+ :total="pageSum"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 添加 - 编辑 用户 -->
|
|
|
+ <el-dialog :title="tltData" :visible.sync="userVisible" width="30%">
|
|
|
+ <el-form ref="form" :rules="rules" :model="form" label-width="150px">
|
|
|
+ <el-form-item label="账号: " prop="user">
|
|
|
+ <el-input
|
|
|
+ style="width: 80%"
|
|
|
+ size="mini"
|
|
|
+ v-model="form.user"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="密码: " prop="password">
|
|
|
+ <el-input
|
|
|
+ style="width: 80%"
|
|
|
+ size="mini"
|
|
|
+ v-model="form.password"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="姓名: " prop="name">
|
|
|
+ <el-input
|
|
|
+ style="width: 80%"
|
|
|
+ size="mini"
|
|
|
+ v-model="form.name"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="隶属海关: " prop="judge">
|
|
|
+ <el-select v-model="form.judge" placeholder="请选择">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="角色: " prop="role">
|
|
|
+ <el-select v-model="form.role" placeholder="请选择否">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="手机号码: " prop="phone">
|
|
|
+ <el-input
|
|
|
+ style="width: 80%"
|
|
|
+ size="mini"
|
|
|
+ v-model="form.phone"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="备注: " prop="remark">
|
|
|
+ <el-input
|
|
|
+ style="width: 80%"
|
|
|
+ size="mini"
|
|
|
+ type="textarea"
|
|
|
+ resize="none"
|
|
|
+ v-model="form.remark"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="small" type="primary" @click="submitForm"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ <el-button size="small" @click="addrUserVisible = false"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ fullHeight: document.documentElement.clientHeight - 116, //
|
|
|
+
|
|
|
+ // 树形图
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ label: "一级 1",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: "二级 1-1",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: "三级 1-1-1",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "一级 2",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: "二级 2-1",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: "三级 2-1-1",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "二级 2-2",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: "三级 2-2-1",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "一级 3",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: "二级 3-1",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: "三级 3-1-1",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "二级 3-2",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: "三级 3-2-1",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "label",
|
|
|
+ },
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ nameVal: "",
|
|
|
+ phoneVal: "",
|
|
|
+
|
|
|
+ // 表格
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ ind: "1",
|
|
|
+ name: "王小虎",
|
|
|
+ user: "王小虎的账号",
|
|
|
+ phone: "18538403123",
|
|
|
+ texture: "海关局-检测部门",
|
|
|
+ state: "1", // 1正常 0停用
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ind: "2",
|
|
|
+ name: "王小虎",
|
|
|
+ user: "王小虎的账号",
|
|
|
+ phone: "18538403123",
|
|
|
+ texture: "海关局-检测部门",
|
|
|
+ state: "0", // 1正常 0停用
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ // 分页
|
|
|
+ page: 1, //当前页码
|
|
|
+ pageSum: 0, // 总数量
|
|
|
+
|
|
|
+ // 弹框
|
|
|
+ tltData: "添加用户",
|
|
|
+ userVisible: true,
|
|
|
+ form: {
|
|
|
+ user: "", //账号
|
|
|
+ password: '', // 密码
|
|
|
+ name: '', // 姓名
|
|
|
+ judge: "", // 隶属海关
|
|
|
+ role: "", //角色
|
|
|
+ phone: "", // 手机号码
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ user: [
|
|
|
+ { required: true, message: "请输入账号", trigger: "blur" },
|
|
|
+ // { min: 3, max: 5, message: "长度在 1 到 15 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, message: "请输入密码", trigger: "blur" },
|
|
|
+ // { min: 3, max: 5, message: "长度在 1 到 15 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ name: [
|
|
|
+ { required: true, message: "请输入姓名", trigger: "blur" },
|
|
|
+ // { min: 3, max: 5, message: "长度在 1 到 15 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ judge: [
|
|
|
+ { required: true, message: "请选检疫性有害生物", trigger: "blur" },
|
|
|
+ // { min: 3, max: 5, message: "长度在 1 到 15 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ role: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请选择角色",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ // { min: 3, max: 5, message: "长度在 1 到 30 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ phone: [
|
|
|
+ { required: true, message: "请输入手机号码", trigger: "blur" },
|
|
|
+ // { min: 3, max: 5, message: "长度在 1 到 30 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {
|
|
|
+ fullHeight(val) {
|
|
|
+ //监控浏览器高度变化
|
|
|
+ if (!this.timer) {
|
|
|
+ this.fullHeight = val;
|
|
|
+ this.timer = true;
|
|
|
+ let that = this;
|
|
|
+ setTimeout(function () {
|
|
|
+ //防止过度调用监测事件,导致卡顿
|
|
|
+ that.timer = false;
|
|
|
+ }, 400);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ //动态获取浏览器高度
|
|
|
+ get_boderHeight() {
|
|
|
+ const that = this;
|
|
|
+ window.onresize = () => {
|
|
|
+ return (() => {
|
|
|
+ window.fullHeight = document.documentElement.clientHeight;
|
|
|
+ that.fullHeight = window.fullHeight;
|
|
|
+ })();
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ // 树形图
|
|
|
+ handleNodeClick(data) {
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 编辑
|
|
|
+ actionFunc(data) {},
|
|
|
+
|
|
|
+ // 停用
|
|
|
+ outUse(data) {},
|
|
|
+
|
|
|
+ // 重置密码
|
|
|
+ resetPwd() {},
|
|
|
+
|
|
|
+ // 删除
|
|
|
+ deleteFunc(data) {},
|
|
|
+
|
|
|
+ // 分页
|
|
|
+ changeList(page) {
|
|
|
+ this.page = page;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ searchData() {},
|
|
|
+
|
|
|
+ // 添加用户
|
|
|
+ addrRole() {},
|
|
|
+
|
|
|
+ // 添加 - 编辑 确定
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert("完成");
|
|
|
+ } else {
|
|
|
+ // console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.userManger_box {
|
|
|
+ .card_box {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ // 树形图
|
|
|
+ .userManger_left {
|
|
|
+ width: 19%;
|
|
|
+ margin: 0 15px 0 0;
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索和表格
|
|
|
+ .userManger_right {
|
|
|
+ width: 80%;
|
|
|
+ // border: 1px solid red;
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ .search_box {
|
|
|
+ display: flex;
|
|
|
+ /deep/.el-input {
|
|
|
+ width: 20%;
|
|
|
+ margin: 0 15px 0 0;
|
|
|
+ }
|
|
|
+ .btn_box {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ .reset {
|
|
|
+ color: #1890ff;
|
|
|
+ }
|
|
|
+ .delete {
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ display: inline-block;
|
|
|
+ width: 1px;
|
|
|
+ background: rgba(0, 0, 0, 0.09);
|
|
|
+ margin: 0 11px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|