From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复
---
src/pages/shuohuangMonitorAnalyze/components/memberManage.vue | 782 +++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 633 insertions(+), 149 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
index 5d7a0a9..d857c46 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
@@ -1,119 +1,230 @@
<template>
<div class="member-manage">
<div class="left">
- <div>
- <el-input placeholder="璇疯緭鍏�" v-model="treeWord">
+ <!-- <div style="margin-bottom: 10px">
+ <el-input placeholder="璇疯緭鍏�" v-model="treeWord" size="small">
<el-button slot="append" icon="el-icon-search"></el-button>
- </el-input>
- </div>
- <el-tree :data="treeData" node-key="id" default-expand-all></el-tree>
- <div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}">
+ </el-input>
+ </div> -->
+ <el-tree
+ ref="leftTreeNodes"
+ :data="treeData"
+ node-key="id"
+ default-expand-all
+ :expand-on-click-node="false"
+ :check-on-click-node="true"
+ :highlight-current="true"
+ @node-click="checkNode"
+ @node-contextmenu="nodeContextMenu"
+ ></el-tree>
+ <!-- <div
+ class="menuList"
+ v-show="showMenu"
+ :style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
+ >
<ul>
<li>鍒涘缓鍚岀骇鑺傜偣</li>
<li>鍒犻櫎鑺傜偣</li>
<li>閲嶅懡鍚嶈妭鐐�</li>
- <li>鍏抽棴</li>
+ <li @click="showMenu = false">鍏抽棴</li>
</ul>
- </div>
+ </div> -->
</div>
<div class="right">
<div class="filter-bar">
- <el-input class="keyword-input" placeholder="濮撳悕/缁勭粐鏈烘瀯/鎵嬫満鍙�" v-model="keyword" size="small"></el-input>
- <el-select v-model="gender" size="small" placeholder="鎬у埆" style="margin: 0 10px;">
+ <el-input
+ class="keyword-input"
+ placeholder="濮撳悕/缁勭粐鏈烘瀯/鎵嬫満鍙�"
+ v-model="keyword"
+ size="small"
+ ></el-input>
+ <el-select
+ v-model="gender"
+ size="small"
+ placeholder="鎬у埆"
+ style="margin: 0px 17px; width: 153px"
+ >
<el-option
v-for="item in genders"
:key="item.id"
- :value="item.id"
+ :value="item.name == '鍏ㄩ儴' ? '' : item.name"
:label="item.name"
- >{{item.name}}</el-option>
+ >{{ item.name }}</el-option
+ >
</el-select>
- <el-button type="primary" size="small" @click="dataSearch">鏌ヨ</el-button>
+ <el-button
+ type="primary"
+ size="small"
+ @click="renderMemberTable"
+ class="query-btn"
+ >鏌ヨ</el-button
+ >
+ <el-button
+ type="primary"
+ size="small"
+ @click="resetFilter"
+ class="reset-btn"
+ >閲嶇疆</el-button
+ >
</div>
<div class="table-area">
<div class="actions">
- <el-button type="primary" size="small" @click="addMember">娣诲姞浜哄憳</el-button>
- <el-button type="primary" size="small" @click="toggleOrganize">鎹㈢粍缁�</el-button>
- <el-button type="primary" size="small" @click="batchImport">鎵归噺瀵煎叆</el-button>
- <el-button type="primary" size="small" @click="uploadPic">涓婁紶鐓х墖</el-button>
+ <el-button type="primary" size="small" @click="addMember"
+ >娣诲姞浜哄憳</el-button
+ >
+ <el-button
+ type="primary"
+ :disabled="multipleTableSelection.length < 1"
+ size="small"
+ @click="toggleOrganize"
+ >鎹㈢粍缁�</el-button
+ >
+ <el-button type="primary" size="small" @click="batchImport"
+ >鎵归噺瀵煎叆</el-button
+ >
+ <!-- <el-button type="primary" size="small" @click="uploadPic">涓婁紶鐓х墖</el-button> -->
</div>
- <el-table class="thbg" :data="tableData" fit ref="elTable">
+ <el-table
+ class="thbg"
+ :data="tableData"
+ fit
+ ref="elTable"
+ @selection-change="tableSelection"
+ :header-cell-style="{
+ background: '#757FA2',
+ color: '#fff',
+ height: '50px',
+ }"
+ >
<el-table-column type="selection" width="55"></el-table-column>
- <el-table-column label="濮撳悕" prop="name" sortable>
+ <el-table-column label="濮撳悕" prop="Name" sortable>
<template slot-scope="scope">
- <div style="cursor:pointer;">{{scope.row.name}}</div>
+ <div style="cursor: pointer">{{ scope.row.Name }}</div>
</template>
</el-table-column>
- <el-table-column label="鐓х墖" prop="picture">
- <template>
- <div></div>
+ <el-table-column label="鐓х墖" prop="Surface">
+ <template slot-scope="scope">
+ <div class="table-cell-pic">
+ <img :src="`/httpImage/${scope.row.Surface}`" alt />
+ </div>
</template>
</el-table-column>
- <el-table-column label="鎬у埆" prop="gender"></el-table-column>
- <el-table-column label="鎵�灞炵粍缁�" prop="organization"></el-table-column>
- <el-table-column label="宸ュ彿" prop="no"></el-table-column>
- <el-table-column label="鎵嬫満鍙�" prop="phone"></el-table-column>
- <el-table-column label="鐢ㄦ埛鏉冮檺" prop="userpermission"></el-table-column>
- <el-table-column label="杞偍鏉冮檺" prop="transferpermission"></el-table-column>
- <el-table-column label="鎿嶄綔">
- <template>
+ <el-table-column label="鎬у埆" prop="Sex"></el-table-column>
+ <el-table-column label="鎵�灞炵粍缁�" prop="Org"></el-table-column>
+ <el-table-column label="宸ュ彿" prop="WorkID"></el-table-column>
+ <el-table-column label="鎵嬫満鍙�" prop="Tel"></el-table-column>
+ <el-table-column label="鐢ㄦ埛鏉冮檺" prop="userpermission">
+ <template slot-scope="scope">
<div>
- <i class="el-icon-edit"></i>
- <i class="el-icon-delete"></i>
+ <el-switch
+ active-color="#4B72E2"
+ inactive-color="#B7BEC8"
+ v-model="scope.row.UserPermissions"
+ @change="memberUpdate(scope.row)"
+ ></el-switch>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="杞偍鏉冮檺" prop="transferpermission">
+ <template slot-scope="scope">
+ <div>
+ <el-switch
+ active-color="#4B72E2"
+ inactive-color="#B7BEC8"
+ v-model="scope.row.DumpPermissions"
+ @change="memberUpdate(scope.row)"
+ ></el-switch>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔">
+ <template slot-scope="scope">
+ <div class="operation">
+ <div class="edit" @click="editMember(scope.row)">
+ <span class="icon iconfont"></span>
+ </div>
+ <div class="delete" @click="delMember(scope.row)">
+ <span class="icon iconfont"></span>
+ </div>
</div>
</template>
</el-table-column>
</el-table>
+ <el-pagination
+ @size-change="handleTableSizeChange"
+ @current-change="renderMemberTable"
+ :current-page.sync="PageIndex"
+ :page-size="PageSize"
+ :page-sizes="pageSizes"
+ layout="total,sizes, prev, pager, next"
+ :total="tableTotal"
+ ></el-pagination>
</div>
</div>
<el-dialog
:visible="memberEditDialogVisible"
class="member-edit-dialog"
:append-to-body="false"
- title="娣诲姞/缂栬緫浜哄憳"
- @close="memberEditDialogVisible=false"
+ @close="memberEditDialogVisible = false"
>
+ <div slot="title">
+ <div class="title">
+ <div class="main-title">
+ {{ memberEditForm.ID ? "缂栬緫浜哄憳" : "娣诲姞浜哄憳" }}
+ </div>
+ <div class="subtitle">缁勭粐缁撴瀯:{{ curLeftTreeNode.label }}</div>
+ </div>
+ </div>
<div class="text-center">
- <el-form :model="memberEditForm">
+ <el-form
+ :model="memberEditForm"
+ :rules="memberEditFormRule"
+ ref="memberForm"
+ >
<el-form-item>
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
- :http-request="uploadMemberPic"
+ :http-request="uploadMemberPicture"
>
<img
- v-if="memberEditForm.memberPicUrl"
- :src="memberEditForm.memberPicUrl"
+ v-if="memberEditForm.Surface"
+ :src="`/httpImage/` + memberEditForm.Surface"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
- <el-form-item label="宸ュ彿:" prop="no">
- <el-input v-model="memberEditForm.no" size="mini"></el-input>
+ <el-form-item label="宸ュ彿:" prop="WorkID">
+ <el-input v-model="memberEditForm.WorkID" size="mini"></el-input>
</el-form-item>
- <el-form-item label="鐓х墖鏍囪瘑:">
- <el-input v-model="memberEditForm.figure" size="mini"></el-input>
+ <!-- <el-form-item label="鐓х墖鏍囪瘑:">
+ <el-input v-model="memberEditForm.SurfaceName" size="mini"></el-input>
+ </el-form-item>-->
+ <el-form-item label="濮撳悕:" prop="Name">
+ <el-input v-model="memberEditForm.Name" size="mini"></el-input>
</el-form-item>
- <el-form-item label="濮撳悕:">
- <el-input v-model="memberEditForm.name" size="mini"></el-input>
+ <el-form-item label="鐢ㄦ埛鍚�:" prop="UserName">
+ <el-input v-model="memberEditForm.UserName" size="mini"></el-input>
</el-form-item>
- <el-form-item label="鎬у埆:">
- <el-radio v-model="memberEditForm.gender" label="1">濂�</el-radio>
- <el-radio v-model="memberEditForm.gender" label="2">鐢�</el-radio>
+ <el-form-item label="鎬у埆:" prop="Sex">
+ <el-radio v-model="memberEditForm.Sex" label="濂�">濂�</el-radio>
+ <el-radio v-model="memberEditForm.Sex" label="鐢�">鐢�</el-radio>
</el-form-item>
<el-form-item label="韬唤璇佸彿:">
- <el-input v-model="memberEditForm.idCard" size="mini"></el-input>
+ <el-input v-model="memberEditForm.OwnerID" size="mini"></el-input>
</el-form-item>
- <el-form-item label="鎵嬫満鍙�:">
- <el-input v-model="memberEditForm.phone" size="mini"></el-input>
- </el-form-item>
- <el-form-item label="鍏朵粬:">
- <el-input v-model="memberEditForm.other" size="mini"></el-input>
+ <el-form-item label="鎵嬫満鍙�:" prop="Tel">
+ <el-input v-model="memberEditForm.Tel" size="mini"></el-input>
</el-form-item>
<div class="btns">
- <el-button size="small">鍙栨秷</el-button>
- <el-button size="small" type="primary">淇濆瓨</el-button>
+ <el-button size="small" @click="memberEditDialogVisible = false"
+ >鍙栨秷</el-button
+ >
+ <el-button size="small" type="primary" @click="memberSave"
+ >淇濆瓨</el-button
+ >
</div>
</el-form>
</div>
@@ -123,21 +234,33 @@
class="toggle-organize-dialog"
:append-to-body="false"
title="绉诲姩浜哄憳鍒板叾浠栫粍缁�"
- @close="toggleOrganizeDialogVisible=false"
+ @close="toggleOrganizeDialogVisible = false"
>
<div class="text-left">
- <div class="flex-box">
- <label>浜哄憳:</label>
- <span>lisi</span>
- </div>
<el-input v-model="organizeKeyword" size="small">
- <el-button slot="append" icon="el-icon-search"></el-button>
+ <el-button
+ slot="append"
+ icon="el-icon-search"
+ @clcik="getOrganizeTreeData"
+ ></el-button>
</el-input>
<div>榛樿缁勭粐</div>
- <el-tree :data="organizeData" node-key="id" default-expand-all></el-tree>
+ <el-tree
+ :data="organizeData"
+ node-key="id"
+ default-expand-all
+ @node-click="checkOrgNode"
+ :expand-on-click-node="false"
+ :check-on-click-node="true"
+ :highlight-current="true"
+ ></el-tree>
<div slot="footer" class="btns">
- <el-button size="small">鍙栨秷</el-button>
- <el-button size="small" type="primary">纭畾</el-button>
+ <el-button size="small" @click="toggleOrganizeDialogVisible = false"
+ >鍙栨秷</el-button
+ >
+ <el-button size="small" type="primary" @click="updateOrg"
+ >纭畾</el-button
+ >
</div>
</div>
</el-dialog>
@@ -146,34 +269,44 @@
class="batch-import-dialog"
:append-to-body="false"
title="鎵归噺瀵煎叆"
- @close="batchImportDialogVisible=false"
+ @close="batchImportDialogVisible = false"
>
- <div class="text-left">
+ <div>
+ <p class="tip">
+ *璇锋彁鍓嶆牴鎹枃浠舵ā鏉夸腑鐨勮姹傛敹闆嗕汉鍛樹俊鎭紝鍦ㄤ竴涓枃浠跺す涓瓨鏀句汉鍛樼収鐗囧拰EXCEL鏂囦欢
+ (
+ <a
+ href="javascript:;"
+ @mouseover="showDemo = true"
+ @mouseout="showDemo = false"
+ >绀轰緥</a
+ >),鐐瑰嚮
+ <a href="javascript:;" @click="downloadExcel">涓嬭浇妯℃澘.excel</a>
+ <img
+ class="tip-demo"
+ v-if="showDemo"
+ :src="`${publicPath}images/shuohuang/tip.jpg`"
+ alt
+ />
+ </p>
<div class="flex-box">
- <label>涓婁紶鏂囦欢:</label>
- <el-upload
- class="upload-demo batch-upload"
- action="https://jsonplaceholder.typicode.com/posts/"
- :on-remove="handleRemove"
- multiple
- :limit="3"
- :http-request="batchImportFiles"
- :on-exceed="handleExceed"
- :file-list="fileList"
+ <label>涓婁紶鏂囦欢澶�:</label>
+ <el-button size="mini" type="primary" @click="uploadDirectoryTrigger"
+ >鐐瑰嚮涓婁紶</el-button
>
- <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
- <div slot="tip" class="el-upload__tip"></div>
- </el-upload>
- <p>
- *璇锋寜鐓ф妯℃澘濉啓淇℃伅锛岀偣鍑讳笅杞芥ā鏉�
- <a href="javascript:;">.excel</a>
- </p>
+ <input
+ ref="directoryInput"
+ @change="importDirectory"
+ hidden
+ type="file"
+ webkitdirectory
+ />
</div>
<el-table class="thbg" :data="batchImportTableData" fit>
<el-table-column type="index" label="搴忓彿"></el-table-column>
- <el-table-column prop="filename" label="鏂囦欢鍚嶇О"></el-table-column>
- <el-table-column prop="time" label="涓婁紶鏃堕棿"></el-table-column>
- <el-table-column prop="state" label="鐘舵��"></el-table-column>
+ <el-table-column prop="Name" label="鏂囦欢鍚嶇О"></el-table-column>
+ <el-table-column prop="UploadTime" label="涓婁紶鏃堕棿"></el-table-column>
+ <el-table-column prop="Status" label="鐘舵��"></el-table-column>
</el-table>
</div>
</el-dialog>
@@ -181,80 +314,281 @@
</template>
<script>
-
-import { getShuohuangDepartTree, getOrganizeTree } from '@/api/shuohuang'
-
+import {
+ getShuohuangDepartTree,
+ getOrganizeTree,
+ getMemberList,
+ updateMemberInfo,
+ addMember,
+ updateUnit,
+ uploadMemberPic,
+ uploadDirectory,
+ uploadFile,
+ downloadFile,
+} from "@/api/shuohuang";
export default {
- data () {
+ data() {
return {
- treeWord: '',
+ publicPath: process.env.BASE_URL,
+ CLIP: "http://192.168.20.113/",
+ treeWord: "",
treeData: [],
+ curLeftTreeNode: {},
showMenu: false,
+ deptId: "",
menuTop: 0,
menuLeft: 0,
- keyword: '',
- gender: '',
- genders: [{ name: '鐢�', id: 'g0' }, { name: '濂�', id: 'g1' }],
+ keyword: "",
+ gender: "",
+ genders: [
+ { id: "g3", name: "鍏ㄩ儴" },
+ { name: "鐢�", id: "g0" },
+ { name: "濂�", id: "g1" },
+ ],
tableData: [],
+ multipleTableSelection: [],
+ PageIndex: 1,
+ pageSizes: [2, 8, 12, 24],
+ tableTotal: 0,
+ PageSize: 8,
organizeData: [],
+ checkedOrgID: "",
+ checkedOrgName: "",
+ organizeKeyword: "",
memberEditDialogVisible: false,
toggleOrganizeDialogVisible: false,
batchImportDialogVisible: false,
fileList: [],
memberEditForm: {},
- memberPicUrl: '',
+ memberEditFormRule: {
+ Name: [{ required: true, message: "璇疯緭鍏ュ鍚�", trigger: "change" }],
+ UserName: [
+ { required: true, message: "璇疯緭鍏ュ鍚�", trigger: "change" },
+ ],
+ Sex: [{ required: true, message: "璇烽�夋嫨鎬у埆", trigger: "change" }],
+ Tel: [{ validator: this.isPhone, trigger: "change" }],
+ },
+ memberPicUrl: "",
+ showDemo: false,
batchImportTableData: [],
- }
+ };
},
- mounted () {
+ mounted() {
this.searchLeftTreeData();
this.getOrganizeTreeData();
+ //this.renderMemberTable();
},
methods: {
- uploadPic(){
-
+ resetFilter() {
+ this.keyword = "";
+ this.gender = "";
+ this.renderMemberTable();
},
- batchImportFiles () {
-
+ isPhone(rule, value, callback) {
+ if (!value) {
+ return callback();
+ } else if (value.trim()) {
+ var pattern = /^1[345789]\d{9}$/;
+ if (pattern.test(value)) {
+ return callback();
+ }
+ return callback(new Error("杈撳叆鐨勬墜鏈哄彿閿欒"));
+ }
+ // if (value.trim()) {
+ // var pattern = /^1[345789]\d{9}$/
+ // if (pattern.test(value)) {
+ // return callback()
+ // }
+ // return callback(new Error('杈撳叆鐨勬墜鏈哄彿閿欒'))
+ // }
},
- handleRemove () {
-
+ nodeContextMenu(e, data, node, comp) {
+ this.showMenu = true;
+ this.menuTop = e.pageY;
+ this.menuLeft = e.pageX;
},
- handleExceed () {
-
+ checkOrgNode(a, b, c) {
+ this.checkedOrgID = a.id;
+ this.checkedOrgName = a.label;
},
- batchImport () {
+ downloadExcel() {
+ downloadFile().then(function (res) {
+ let blobUrl = window.URL.createObjectURL(
+ new Blob([res], {
+ type: "application/vnd.ms-excel",
+ })
+ );
+ const a = document.createElement("a");
+ a.style.display = "none";
+ a.download = "鎵归噺瀵煎叆妯℃澘.xlsx";
+ a.href = blobUrl;
+ a.click();
+ document.body.removeChild(a);
+ });
+ },
+ updateOrg() {
+ let ids = this.multipleTableSelection.map((row) => {
+ return row.ID;
+ });
+ let params = {
+ DeptID: this.checkedOrgID,
+ DeptName: this.checkedOrgName,
+ Users: ids.join(","),
+ };
+ updateUnit(params).then((res) => {
+ if (res.success) {
+ this.$notify({
+ type: "success",
+ message: res.msg,
+ });
+ this.toggleOrganizeDialogVisible = false;
+ this.renderMemberTable();
+ this.searchLeftTreeData();
+ }
+ });
+ },
+ tableSelection(val) {
+ this.multipleTableSelection = val;
+ },
+ memberSave() {
+ this.$refs["memberForm"].validate((valid) => {
+ if (valid) {
+ let params = Object.assign(
+ { DeptID: this.curLeftTreeNode.id },
+ this.memberEditForm
+ );
+ if (this.memberEditForm.ID) {
+ updateMemberInfo(params).then((res) => {
+ if (res.success) {
+ this.$notify({
+ type: "success",
+ message: res.msg,
+ });
+ this.memberEditDialogVisible = false;
+ this.renderMemberTable();
+ this.searchLeftTreeData();
+ this.memberEditForm = {};
+ }
+ });
+ } else {
+ addMember(params).then((res) => {
+ if (res.success) {
+ this.$notify({
+ type: "success",
+ message: res.msg,
+ });
+ this.renderMemberTable();
+ this.memberEditDialogVisible = false;
+ this.searchLeftTreeData();
+ this.memberEditForm = {};
+ }
+ });
+ }
+ } else {
+ return false;
+ }
+ });
+ },
+ delMember(member) {
+ member.IsDel = "1";
+ this.memberUpdate(member);
+ },
+ editMember(member) {
+ this.memberEditDialogVisible = true;
+ this.memberEditForm = member;
+ },
+ memberUpdate(member) {
+ updateMemberInfo(member).then((res) => {
+ if (res.success) {
+ this.$notify({
+ type: "success",
+ message: res.msg,
+ });
+ this.renderMemberTable();
+ this.searchLeftTreeData();
+ }
+ });
+ },
+ checkNode(a, b, c) {
+ if (a.hasOwnProperty("children")) {
+ this.curLeftTreeNode = a;
+ this.deptId = a.id;
+ this.renderMemberTable();
+ }
+ },
+ handleTableSizeChange(size) {
+ this.PageSize = size;
+ this.renderMemberTable();
+ },
+ renderMemberTable() {
+ let _this = this;
+ let params = {
+ DeptID: this.deptId,
+ Keyword: this.keyword,
+ Sex: this.gender,
+ PageIndex: this.PageIndex,
+ PageSize: this.PageSize,
+ };
+ getMemberList(params).then((res) => {
+ _this.tableData = res.data;
+ _this.tableTotal = res.total;
+ });
+ },
+ uploadPic() {},
+ uploadDirectoryTrigger() {
+ this.$refs["directoryInput"].click();
+ },
+ importDirectory() {
+ let _this = this;
+ //this.$refs['directoryInput'].files //鏂囦欢澶筸ap
+ let formData = new FormData();
+ for (var file in this.$refs["directoryInput"].files) {
+ formData.append("files", this.$refs["directoryInput"].files[file]);
+ }
+ //formData.append('files', this.$refs['directoryInput'].files)
+
+ uploadDirectory(formData).then((res) => {
+ _this.batchImportTableData = res.data;
+ _this.renderMemberTable();
+ });
+ },
+
+ handleRemove() {},
+ handleExceed() {},
+ batchImport() {
this.batchImportDialogVisible = true;
},
- toggleOrganize () {
+ toggleOrganize() {
this.toggleOrganizeDialogVisible = true;
},
- uploadMemberPic () { },
- openMenuList (t, l, frame) {
- this.showMenu = true;
- this.menuTop = t;
- this.menuLeft = l;
+ uploadMemberPicture(params) {
+ let param = new FormData();
+ param.append("file", params.file);
+ uploadMemberPic(param).then((res) => {
+ this.$set(this.memberEditForm, "Surface", res.data);
+ });
},
- closeMenuList () {
- this.showMenu = false;
- },
- deepNodeChildren (node) {
+
+ deepNodeChildren(node) {
+ var arr1 = [];
+ var arr2 = [];
if (node.ChildDept && node.ChildDept.length > 0) {
- return node.ChildDept.map(child => {
+ arr1 = node.ChildDept.map((child) => {
let childObj = {};
childObj.id = child.ID;
childObj.label = child.Name;
childObj.Status = child.Status;
if (child.ChildDept) {
- childObj.children = this.deepNodeChildren(child)
+ childObj.children = this.deepNodeChildren(child);
}
if (child.UserLst) {
- childObj.children = this.deepNodeChildren(child)
+ childObj.children = this.deepNodeChildren(child);
}
return childObj;
});
- } else if (node.UserLst && node.UserLst.length > 0) {
- return node.UserLst.map(child => {
+ }
+ if (node.UserLst && node.UserLst.length > 0) {
+ arr2 = node.UserLst.map((child) => {
let childObj = {};
childObj.id = child.ID;
childObj.label = child.Name;
@@ -262,47 +596,93 @@
return childObj;
});
}
+ return arr1.concat(arr2);
},
- getOrganizeTreeData () {
+ getOrganizeTreeData() {
let _this = this;
- getOrganizeTree().then(res => {
- _this.organizeData = res.data.map(item => {
+ getOrganizeTree().then((res) => {
+ _this.organizeData = res.data.map((item) => {
let obj = {};
obj.id = item.ID;
obj.label = item.Name;
obj.Status = item.Status;
obj.children = _this.deepNodeChildren(item);
- return obj
- })
- })
+ return obj;
+ });
+ });
},
- searchLeftTreeData () {
+ searchLeftTreeData() {
let _this = this;
- getShuohuangDepartTree().then(res => {
- _this.treeData = res.data.map(item => {
+ getShuohuangDepartTree().then((res) => {
+ _this.treeData = res.data.map((item) => {
let obj = {};
obj.id = item.ID;
obj.label = item.Name;
obj.Status = item.Status;
obj.children = _this.deepNodeChildren(item);
- return obj
- })
- })
+ return obj;
+ });
+ this.$nextTick(() => {
+ if (!Object.keys(_this.curLeftTreeNode).length) {
+ if (_this.treeData.length) {
+ _this.curLeftTreeNode = _this.treeData[0];
+ _this.$refs["leftTreeNodes"].setCurrentNode(_this.treeData[0]);
+ }
+ } else {
+ _this.$refs["leftTreeNodes"].setCurrentNode(_this.curLeftTreeNode);
+ }
+ _this.checkNode(_this.curLeftTreeNode);
+ });
+ });
},
- addMember () {
+ addMember() {
this.memberEditDialogVisible = true;
+ this.memberEditForm = {};
},
- dataSearch () {
-
- }
- }
-}
+ },
+};
</script>
<style lang="scss">
.member-manage {
+ padding: 25px;
+ background: #fff;
+ // margin: 33px;
display: flex;
- padding: 20px;
+ box-sizing: border-box;box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+
+border-radius: 10px;
+ .left {
+ .el-tree--highlight-current
+ .el-tree-node.is-current
+ > .el-tree-node__content {
+ background-color: #2d52d7 !important;
+ .el-tree-node__label {
+ color: #fff;
+ }
+ }
+ .el-tree {
+ background: #f4f6f9;
+ width: 160px;
+ padding-bottom: 10px;
+
+ .el-tree-node__label {
+ font-size: 14px;
+ color: #606f8f;
+ }
+ .el-tree-node:focus > .el-tree-node__content {
+ background-color: #2d52d7 !important;
+ color: #fff !important;
+ }
+ .el-tree-node__content:hover {
+ background-color: #fff;
+ }
+
+ .el-tree-node__content {
+ height: 36px;
+ }
+ }
+ }
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
@@ -326,7 +706,7 @@
height: 178px;
display: block;
}
- .batch-upload{
+ .batch-upload {
text-align: left;
margin: 0 20px 20px 10px;
}
@@ -334,9 +714,27 @@
.el-dialog {
width: 500px;
padding: 0 30px;
+ .el-dialog__header {
+ .title {
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ .main-title {
+ font-size: 16px;
+ padding-right: 10px;
+ }
+ .subtitle {
+ font-size: 14px;
+ color: #666;
+ }
+ }
+ }
.el-form-item {
.el-form-item__label {
width: 100px;
+ }
+ .el-form-item__error {
+ left: 120px;
}
}
}
@@ -356,13 +754,31 @@
}
}
}
+ .batch-import-dialog {
+ .el-dialog__body {
+ padding: 14px 20px;
+ }
+ .tip {
+ text-align: left;
+ margin-bottom: 10px;
+ position: relative;
+ .tip-demo {
+ position: absolute;
+ width: 530px;
+ z-index: 1000;
+ top: -10px;
+ left: 20px;
+ }
+ }
+ }
.menuList {
background: #fff;
position: absolute;
z-index: 100;
width: 180px;
text-align: left;
- border: 1px solid #ccc;
+ border: 1px solid #ddd;
+ box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.1);
}
.menuList li {
line-height: 28px;
@@ -371,22 +787,90 @@
background: #fff;
}
.menuList li:hover {
- background: rgba(152, 170, 190, 0.7);
+ background: #ecf0fc;
}
.right {
- padding: 8px 0 0 20px;
+ padding-left: 20px;
+ width: calc(100% - 109px);
+
.filter-bar {
display: flex;
- margin-bottom: 20px;
+ margin-bottom: 14px;
+ .el-input__inner {
+ border: 1px solid rgba(26, 55, 122, 0.35);
+ }
.keyword-input {
- width: 300px;
+ width: 320px;
+ }
+ button span {
+ color: #fff;
+ }
+ .reset-btn {
+ background-color: #a6b5cb !important;
+ border-color: #a6b5cb !important;
+ font-size: 13px;
+ padding: 8px 12px;
+ }
+ .query-btn {
+ background-color: #2d52d7 !important;
+ font-size: 13px;
+ padding: 8px 12px;
}
}
+
.table-area {
.actions {
- text-align: left;
+ text-align: right;
+ button span {
+ color: #fff;
+ }
}
-
+ .operation {
+ .edit {
+ background: #dea60b;
+ width: 23px;
+ height: 23px;
+ text-align: center;
+ border-radius: 23px;
+ line-height: 21px;
+ margin-right: 10px;
+ span {
+ color: #fff;
+ font-size: 12px;
+ }
+ }
+ .delete {
+ background: #D94141;
+ width: 23px;
+ height: 23px;
+ text-align: center;
+ border-radius: 23px;
+ line-height: 22px;
+ margin-right: 10px;
+ span {
+ color: #fff;
+ font-size: 12px;
+ }
+ }
+ }
+ .el-table td.el-table__cell div {
+ color: #425277;
+ }
+ .el-table.thbg {
+ margin: 14px 0;
+ }
+ .table-cell-pic {
+ img {
+ vertical-align: middle;
+ width: 53px;
+ }
+ }
+ .el-table .el-table__cell {
+ padding: 7.5px 0;
+ }
+ .el-table th.el-table__cell > .cell {
+ color: #fff;
+ }
}
}
}
--
Gitblit v1.8.0