From b46e6d2306515f94bf77c06e8d80ac76267e3ddb Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期日, 02 六月 2024 21:44:23 +0800
Subject: [PATCH] 搜索

---
 src/views/master/person/main/personPerson.vue |  749 +++++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 487 insertions(+), 262 deletions(-)

diff --git a/src/views/master/person/main/personPerson.vue b/src/views/master/person/main/personPerson.vue
index 2c196d1..5b1e874 100644
--- a/src/views/master/person/main/personPerson.vue
+++ b/src/views/master/person/main/personPerson.vue
@@ -1,318 +1,543 @@
 <!--
  * @Author: lzhe lzhe@example.com
  * @Date: 2024-03-26 10:28:33
- * @LastEditors: lzhe lzhe@example.com
- * @LastEditTime: 2024-03-28 18:08:51
- * @FilePath: /smart-web/src/views/master/person/main/index.vue
+ * @LastEditors: Sneed
+ * @LastEditTime: 2024-05-09 21:01:06
+ * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/master/person/main/personPerson.vue
  * @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
 	<div class="person-person">
 		<div class="person-person-left">
 			<div class="person-left-title">
-				<div :class="{'person-left-active': leftActive}" @click="changeTab(1)">閮ㄩ棬</div>
-				<div :class="{'person-left-active': !leftActive}" @click="changeTab(2)">宀椾綅</div>
+				<div :class="{ 'person-left-active': leftActive }" @click="changeTab(1)">閮ㄩ棬</div>
+				<div :class="{ 'person-left-active': !leftActive }" @click="changeTab(2)">宀椾綅</div>
 			</div>
 			<div class="person-left-search">
 				<el-input v-model="input" placeholder="璇疯緭鍏ュ唴瀹�" size="small"></el-input>
 			</div>
 			<div class="person-tree">
-				鍗冩枃绉戞妧
+				<!-- 閮ㄩ棬 -->
+				<el-tree style="max-width: 600px" :data="titleList" :expand-on-click-node="false" default-expand-all
+					:props="{ label: 'name', children: 'children' }" class="treeActive" @node-click="titleListNode" />
+				<!-- 宀椾綅 -->
+				<div v-for="(item, index) in titleList" :data-id="item.id" v-if="!leftActive"
+					:class="{ treeActive: item.active }" @click="selectbtn(index)">{{ item.postName }}</div>
 			</div>
 		</div>
 		<div class="person-person-right">
 			<div class="right-top">
-				<div class="right-title">閮ㄩ棬锛氬崈鏂囩鎶�</div>
+				<div class="right-title"><span v-if="leftActive">閮ㄩ棬锛氬崈鏂囩鎶�</span></div>
 				<div>
-					<el-select v-model="input3" placeholder="鐘舵��" class="searchStatus">
-						<el-option
-							v-for="item in options"
-							:key="item.value"
-							:label="item.label"
-							:value="item.value"
-							size="small"
-						/>
+					<el-select v-model="searchData.status" placeholder="鐘舵��" class="searchStatus">
+						<el-option v-for="item in statusList" :key="item.dictKey" :label="item.dictValue"
+							:value="item.dictKey" size="small" />
 					</el-select>
-					<el-input
-						v-model="input3"
-						style="width: 200px"
-						size="small"
-						placeholder="璇疯緭鍏ュ叧閿瓧杩涜杩囨护"
-						class="input-with-select"
-						>
+					<el-input v-model="searchData.keywords" style="width: 200px" size="small" placeholder="璇疯緭鍏ュ叧閿瓧杩涜杩囨护">
 						<template #append>
-							<el-button :icon="Search" />
+							<el-button :icon="searchIcon" @click="searchPerson" />
 						</template>
 					</el-input>
 				</div>
 			</div>
-			<div class="right-bottom"> 
+			<div class="right-bottom">
 				<el-button type="primary" @click="addPerson">+ 娣诲姞鍛樺伐</el-button>
 				<el-button type="primary" @click="changeDepartment">閮ㄩ棬璋冩暣</el-button>
+				<!-- 瀵煎叆 -->
+				<import-table class="exportBtn" :exportUrl="exportUrl" :uploadUrl="uploadUrl"></import-table>
+				<!-- 瀵煎嚭 -->
+				<el-button type="primary" @click="getExport">瀵煎嚭</el-button>
 				<el-button type="danger" plain @click="delPerson">鍒犻櫎</el-button>
 			</div>
 			<div class="right-table">
-				<el-table
-					ref="multipleTableRef"
-					:data="tableData"
-					border
-					style="width: 100%"
-					class="multipleTableRef"
-					@selection-change="handleSelectionChange"
-				>
+				<el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef"
+					@selection-change="handleSelectionChange">
 					<el-table-column type="selection" width="55" />
-					<el-table-column
-					prop="date"
-					label="寮犱笁"
-					width="150">
+					<el-table-column prop="name" label="濮撳悕" width="150"></el-table-column>
+					<el-table-column prop="jobNumber" label="宸ュ彿" width="150"></el-table-column>
+					<el-table-column label="鍏宠仈璐﹀彿" width="120">
+						<template #default="scope">
+							<span>{{ scope.row.account ? scope.row.account : '-' }}</span>
+						</template>
 					</el-table-column>
-					<el-table-column
-					prop="name"
-					label="鍏宠仈璐﹀彿"
-					width="120">
+					<el-table-column label="閮ㄩ棬" width="120">
+						<template #default="scope">
+							<span>{{ scope.row.organizationName ? scope.row.organizationName : '-' }}</span>
+						</template>
 					</el-table-column>
-					<el-table-column
-					prop="province"
-					label="閮ㄩ棬"
-					width="120">
+					<el-table-column label="宀椾綅" width="120">
+						<template #default="scope">
+							<span>{{ scope.row.postName ? scope.row.postName : '-' }}</span>
+						</template>
 					</el-table-column>
-					<el-table-column
-					prop="city"
-					label="宀椾綅"
-					width="120">
+					<el-table-column label="閭" width="120">
+						<template #default="scope">
+							<span>{{ scope.row.email ? scope.row.email : '-' }}</span>
+						</template>
 					</el-table-column>
-					<el-table-column
-					prop="address"
-					label="閭"
-					width="300">
+					<el-table-column prop="tel" label="鎵嬫満鍙�" width="120"></el-table-column>
+					<el-table-column prop="tel" label="鐘舵��" width="120">
+						<template #default="scope">
+							<span>{{ scope.row.status == "1" ? "鍦ㄨ亴" : '绂昏亴' }}</span>
+						</template>
 					</el-table-column>
-					<el-table-column
-					prop="zip"
-					label="鎵嬫満鍙�"
-					width="120">
-					</el-table-column>
-					<el-table-column
-					prop="zip"
-					label="鐘舵��"
-					width="120">
-					</el-table-column>
-					<el-table-column
-					fixed="right"
-					label="鎿嶄綔"
-					width="140">
-					<template #default="scope">
-						<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">缂栬緫</el-button>
-						<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">鏌ョ湅</el-button>
-					</template>
+					<el-table-column fixed="right" label="鎿嶄綔" width="140">
+						<template #default="scope">
+							<el-button type="text" size="small"
+								@click="table_edit(scope.row, scope.$index)">缂栬緫</el-button>
+							<el-button text type="primary" size="small"
+								@click="table_del(scope.row, scope.$index)">鍒犻櫎</el-button>
+						</template>
 					</el-table-column>
 				</el-table>
-				<el-pagination
-					@size-change="handleSizeChange"
-					@current-change="handleCurrentChange"
-					:current-page="currentPage4"
-					:page-sizes="[100, 200, 300, 400]"
-					:page-size="100"
-					layout="total, sizes, prev, pager, next, jumper"
-					:total="400">
+				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+					:current-page="currentPage4" :page-sizes="[15, 50, 100]" :page-size="15"
+					layout="total, sizes, prev, pager, next, jumper" :total="total">
 				</el-pagination>
 			</div>
-			
 		</div>
 	</div>
 
-	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
+	<el-dialog title="閮ㄩ棬璋冩暣" v-model="departmentVisible" :width="400" destroy-on-close>
+		<el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode == 'show'" ref="dialogForm"
+			label-width="80px" label-position="center">
+			<el-row>
+				<el-col :span="24">
+					<el-form-item label="閮ㄩ棬" prop="parentId">
+						<el-tree-select @change="parentIdChange" v-model="departmentFrom.parentId" clearable
+							placeholder="閮ㄩ棬" default-expand-all check-on-click-nod :data="titleList" check-strictly
+							:props="{ label: 'name' }" node-key="id" ref="parentTree" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+		<template #footer>
+			<el-button @click="departmentVisible = false">鍙� 娑�</el-button>
+			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">淇�
+				瀛�</el-button>
+		</template>
+	</el-dialog>
+	<!-- 鍒犻櫎 -->
+	<el-dialog title="" v-model="delPersonModel" :width="300" destroy-on-close>
+		<div>
+			<div style="margin-bottom: 6px;"><span class="delIcon">!</span>璇蜂綘璋ㄦ厧閫夋嫨锛�</div>
+			<div style="text-indent: 24px;">鍒犻櫎鏁版嵁浼氬奖鍝嶅凡鍏宠仈鐨勪笟鍔� ,鑻ユ偍鎯冲湪宸插叧鑱旂殑涓氬姟涓緷鐒舵樉绀鸿繖浜涙暟鎹�, 鎮ㄥ彲浠ラ�夋嫨 鍋滅敤 鎿嶄綔銆傚仠鐢ㄥ悗姝ゆ暟鎹皢涓嶈兘鍐嶈鏂颁笟鍔′娇鐢ㄣ��</div>
+		</div>
+		<template #footer>
+			<div class="footerDiv">
+				<div class="delBtn" @click="delData(0)">鍒犻櫎</div>
+				<div class="delBtn" @click="delData(1)">鍋滅敤</div>
+			</div>
+		</template>
+	</el-dialog>
+
+	<save-dialog v-if="dialog.save" ref="saveDialog" @success="personHandleSuccess"
+		@closed="dialog.save = false"></save-dialog>
 </template>
 <script>
-	import saveDialog from './save'
-	export default {
-		name: "bakalaka",
-		data(){
-			return {
-				dialog: {
-					save: false
-				},
-				leftActive: true,
-				input: '',
-				options: [{
-					value: '閫夐」1',
-					label: '榛勯噾绯�'
-				}],
-				input3: '',
-				tableData: [{
-					date: '2016-05-02',
-					name: '鐜嬪皬铏�',
-					province: '涓婃捣',
-					city: '鏅檧鍖�',
-					address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�',
-					zip: 200333
-					}, {
-					date: '2016-05-04',
-					name: '鐜嬪皬铏�',
-					province: '涓婃捣',
-					city: '鏅檧鍖�',
-					address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�',
-					zip: 200333
-					}, {
-					date: '2016-05-01',
-					name: '鐜嬪皬铏�',
-					province: '涓婃捣',
-					city: '鏅檧鍖�',
-					address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�',
-					zip: 200333
-					}, {
-					date: '2016-05-03',
-					name: '鐜嬪皬铏�',
-					province: '涓婃捣',
-					city: '鏅檧鍖�',
-					address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�',
-					zip: 200333
-				}]
-			}
-		},
-		created(){
-			
-		},
-		mounted(){
-			
-		},
-		components: {
-			saveDialog
-		},
-		methods: {
-			//娣诲姞
-			addPerson(){
-				this.dialog.save = true
-				this.$nextTick(() => {
-					this.$refs.saveDialog.open()
-				})
+import importTable from '@/layout/components/importTable.vue'
+import saveDialog from './save'
+export default {
+	name: "personPerson",
+	data() {
+		return {
+			uploadUrl: "/api/blade-cps/employee/import-employee",
+			exportUrl: "/api/blade-cps/employee/export-template",
+			titleList: [],
+			delPersonModel: false,
+			searchIcon: "el-icon-search",
+			searchData: {
+				current: 1,
+				size: 15,
+				status: "1",
+				total: "1",
+				keywords: "",
+				postId: "",  //postId
+				organizationCode: ""  //缁勭粐code
 			},
-			table_edit(row){
-				this.dialog.save = true
-				this.$nextTick(() => {
-					this.$refs.saveDialog.open('edit').setData(row)
-				})
+			total: 0,
+			isSaveing: false,
+			groups: [],
+			departmentFrom: {
+				department: ""
 			},
-			//鏌ョ湅
-			table_show(row){
-				this.dialog.save = true
-				this.$nextTick(() => {
-					this.$refs.saveDialog.open('show').setData(row)
-				})
+			departmentVisibleRules: {
+				parentId: [{ required: true, message: '璇烽�夋嫨閮ㄩ棬' }]
 			},
-			handleSelectionChange() {},
-			delPerson() {},
-			changeDepartment() {},
-			changeTab(name) {
-				if(name == 1) {
-					this.leftActive = true;
-				}else {
-					this.leftActive = false;
-				}
+			departmentVisible: false,
+			dialog: {
+				save: false
 			},
-			handleSizeChange(val) {
-				console.log(`姣忛〉 ${val} 鏉);
-			},
-			handleCurrentChange(val) {
-				console.log(`褰撳墠椤�: ${val}`);
+			leftActive: true,
+			input: '',
+			statusList: [],
+			input3: '',
+			tableData: [],
+			selection: [],
+			departmentFrom: {
+				parentId: ""
 			}
 		}
+	},
+	created() {
+
+	},
+	mounted() {
+		this.getStatus();
+		this.getOrganizationList();  //閮ㄩ棬
+	},
+	components: {
+		saveDialog, importTable
+	},
+	methods: {
+		getExport() {
+			this.$HTTP.get(`/api/blade-cps/employee/export-employee?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
+				if (res.code == 200) {
+					window.open(res.data.link);
+				}
+			})
+		},
+		parentIdChange(val) {
+			// var $parentId = this.$refs.parentTree.getCurrentNode().title;
+			// this.depatmentForm.$parentId = $parentId;
+		},
+		titleListNode(data) {
+			this.searchData.organizationCode = data.code;
+			this.searchPerson();
+		},
+		selectbtn(index) {
+			this.titleList.forEach(item => {
+				item.active = false;
+			})
+			this.titleList[index].active = true;
+			if (this.leftActive) { //閮ㄩ棬
+				this.searchData.organizationCode = this.titleList[index].code;
+				this.searchData.postId = "";
+			} else {  //宀椾綅
+				this.searchData.organizationCode = "";
+				this.searchData.postId = this.titleList[index].id;
+			}
+			this.searchPerson();
+		},
+		getOrganizationList() {  //閮ㄩ棬
+			this.$HTTP.get(`/api/blade-cps/organization/tree?groupType=group_organization&groupCategory=1`).then(res => {
+				if (res.code == 200) {
+					this.titleList = res.data;
+					this.titleList[0].active = true;
+					this.searchData.organizationCode = res.data[0].code;
+					this.searchPerson();
+				}
+			})
+		},
+		getPost() {  //宀椾綅
+			var obj = {
+				current: 1,
+				size: -1,
+			}
+			this.$HTTP.get(`/api/blade-system/post/page?` + this.$TOOL.qsStringify(obj)).then(res => {
+				if (res.code == 200) {
+					this.titleList = res.data.records;
+					this.titleList[0].active = true;
+					this.searchData.postId = res.data.records[0].id;
+					this.searchPerson();
+				}
+			})
+		},
+		delData(type) {
+			this.$HTTP.post(`/api/blade-cps/employee/remove?ids=${this.selectId}&type=${type}`).then(res => {
+				if (res.code == 200) {
+					this.$message.success("鎿嶄綔鎴愬姛");
+					this.delPersonModel = false;
+					this.selectId = "";
+					this.getOrganizationList();
+				}
+			})
+		},
+		personHandleSuccess() {
+			if (this.leftActive) {
+				this.changeTab(1);
+			} else {
+				this.changeTab(2);
+			}
+			this.searchPerson();
+		},
+		searchPerson() {
+			this.$HTTP.get(`/api/blade-cps/employee/list?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
+				if (res.code == 200) {
+					res.data.records.forEach(item => {
+						if (item.dictValue == "鍦ㄨ亴") {
+							this.searchData.status = item.dictKey;
+						}
+					})
+					this.tableData = res.data.records;
+					this.total = res.data.total;
+				}
+			})
+		},
+		getStatus() {  //鑾峰彇鍏ㄩ儴璐﹀彿
+			this.$HTTP.get(`/api/blade-system/dict/dictionary?code=employee_status`).then(res => {
+				if (res.code == 200) {
+					this.statusList = res.data;
+				}
+			})
+		},
+		departmentSubmit() {
+			var employeeIds = [];
+			this.selection.forEach(item => {
+				employeeIds.push(item.id);
+			})
+			this.$refs.dialogForm.validate(async (valid) => {
+				if (valid) {
+					this.$HTTP.put(`/api/blade-cps/employee/change-organization?organizationId=${this.departmentFrom.parentId}&employeeIds=${employeeIds.join(",")}`).then(res => {
+						if (res.code == 200) {
+							this.searchPerson();
+							this.departmentVisible = false;  //閮ㄩ棬璋冩暣
+							this.departmentFrom.parentId = "";
+							this.$message.success("鎿嶄綔鎴愬姛");
+						} else {
+							this.$alert(res.message, "鎻愮ず", { type: 'error' });
+						}
+					})
+				} else {
+					return false;
+				}
+			})
+		},
+		//娣诲姞
+		addPerson() {
+			this.dialog.save = true
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open()
+			})
+		},
+		table_edit(row) {
+			this.dialog.save = true
+			this.$nextTick(() => {
+				this.$refs.saveDialog.open('edit').setData(row)
+			})
+		},
+		//鍒犻櫎
+		table_del(row) {
+			this.selectId = row.id;
+			this.delPersonModel = true;
+		},
+		handleSelectionChange(selection) {
+			this.selection = selection;
+		},
+		delPerson() {
+			if (this.selection.length == 0) {
+				this.$message({
+					message: '璇烽�夋嫨鑷冲皯涓�鏉℃暟鎹�',
+					type: 'warning'
+				});
+				return;
+			}
+			var selStr = "";
+			this.selection.map(item => {
+				selStr += item.id + ","
+			})
+			this.selectId = selStr.replace(/,$/, '');
+			this.delPersonModel = true;
+		},
+		changeDepartment() {
+			if (this.selection.length == 0) {
+				this.$message({
+					message: '璇烽�夋嫨鑷冲皯涓�鏉℃暟鎹�',
+					type: 'warning'
+				});
+				return;
+			}
+			var selStr = "";
+			this.selection.map(item => {
+				selStr += item.id + ","
+			})
+			this.selectId = selStr.replace(/,$/, '');
+			this.departmentVisible = true;
+		},
+		changeTab(name) {
+			this.searchData.current = 1;
+			this.searchData.size = 15;
+			this.searchData.organizationCode = "";
+			this.searchData.postId = "";
+			if (name == 1) {
+				this.searchData.total = '0';
+				this.leftActive = true;
+				this.getOrganizationList();
+			} else {  //宀椾綅
+				this.searchData.total = '1';
+				this.leftActive = false;
+				this.getPost();
+			}
+		},
+		handleSizeChange(val) {
+			console.log(`姣忛〉 ${val} 鏉);
+		},
+		handleCurrentChange(val) {
+			console.log(`褰撳墠椤�: ${val}`);
+		}
 	}
+}
 </script>
 
 <style scoped>
-	.person-person {
-		width: 100%;
-		background-color: #f9fafb;
-		border: 1px solid #dcdfe6;
-		box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
-		display: flex;
-	}
-	.person-person-left {
-		background-color: #fff;
-		width: 300px;
-		min-width: 300px;
-		margin: 8px;
-		overflow: hidden;
-		border-radius: 4px;
-		padding: 8px;
-	}
-	.person-person-right {
-		background-color: #fff;
-		flex: 1;
-		margin-top: 8px;
-		margin-bottom: 8px;
-		overflow: hidden;
-		border-radius: 4px;
-		padding-top: 8px;
-		padding-bottom: 8px;
-	}
-	.person-left-title {
-		text-align: center;
-		vertical-align: middle;
-		padding-left: 8px;
-	}
-	.person-left-title div {
-		display: inline-block;
-		width: 55px;
-		height: 28px;
-		line-height: 28px;
-		border: 1px solid #dcdfe6;
-		cursor: pointer;
-	}
-	.person-left-title div:nth-child(1) {
-		border-top-left-radius: 4px;
-		border-bottom-left-radius: 4px;
-		border-right: 0px;
-	}
-	.person-left-title div:nth-child(2) {
-		border-top-right-radius: 4px;
-		border-bottom-right-radius: 4px;
-		border-left: 0px;
-	}
-	.person-left-active {
-		background-color: #3b8e8e;
-		color: #fff;
-	}
-	.person-left-search {
-		padding-top: 8px;
-		padding-bottom: 8px;
-	}
-	.person-tree {
-		background-color: #d8e8e8;
-		padding: 4px 18px;
-		font-size: 14px;
-		font-weight: 400;
-	}
-	.right-top {
-		display: flex;
-		justify-content: space-between;
-		border-bottom: 1px solid #dcdfe6;
-		margin-bottom: 8px;
-		padding-left: 8px;
-		padding-right: 8px;
-	}
-	.right-title {
-		font-size: 18px;
-		font-weight: bold;
-		padding-bottom: 12px;
-		margin-bottom: 8px;
-	}
-	.searchStatus {
-		margin-right: 6px;
-		width: 200px;
-	}
-	.right-bottom {
-		padding-left: 8px;
-		padding-right: 8px;
-		margin-bottom: 8px;
-	}
-	.right-table {
-		padding-left: 8px;
-		padding-right: 8px;
-		margin-bottom: 8px;
-		
-	}
-	.multipleTableRef {
-		margin-bottom: 8px;
-	}
+.person-person {
+	width: 100%;
+	background-color: #f9fafb;
+	border: 1px solid #dcdfe6;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+	display: flex;
+}
+
+.person-person-left {
+	background-color: #fff;
+	width: 300px;
+	min-width: 300px;
+	margin: 8px;
+	overflow: hidden;
+	border-radius: 4px;
+	padding: 8px;
+}
+
+.person-person-right {
+	background-color: #fff;
+	flex: 1;
+	margin-top: 8px;
+	margin-bottom: 8px;
+	overflow: hidden;
+	border-radius: 4px;
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.person-left-title {
+	text-align: center;
+	vertical-align: middle;
+	padding-left: 8px;
+}
+
+.person-left-title div {
+	display: inline-block;
+	width: 55px;
+	height: 28px;
+	line-height: 28px;
+	border: 1px solid #dcdfe6;
+	cursor: pointer;
+}
+
+.person-left-title div:nth-child(1) {
+	border-top-left-radius: 4px;
+	border-bottom-left-radius: 4px;
+	border-right: 0px;
+}
+
+.person-left-title div:nth-child(2) {
+	border-top-right-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-left: 0px;
+}
+
+.person-left-active {
+	background-color: #409eff;
+	color: #fff;
+}
+
+.person-left-search {
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.person-tree {
+	font-size: 14px;
+	font-weight: 400;
+}
+
+.person-tree div {
+	margin-bottom: 8px;
+	padding: 4px 18px;
+	cursor: pointer;
+}
+
+.right-top {
+	display: flex;
+	justify-content: space-between;
+	border-bottom: 1px solid #dcdfe6;
+	margin-bottom: 8px;
+	padding-left: 8px;
+	padding-right: 8px;
+}
+
+.right-title {
+	font-size: 18px;
+	font-weight: bold;
+	padding-bottom: 12px;
+	margin-bottom: 8px;
+	height: 37px;
+}
+
+.searchStatus {
+	margin-right: 6px;
+	width: 200px;
+}
+
+.right-bottom {
+	padding-left: 8px;
+	padding-right: 8px;
+	margin-bottom: 8px;
+}
+
+.right-table {
+	padding-left: 8px;
+	padding-right: 8px;
+	margin-bottom: 8px;
+
+}
+
+.multipleTableRef {
+	margin-bottom: 8px;
+}
+
+.footerDiv {
+	text-align: center;
+}
+
+.delBtn {
+	color: #fff;
+	width: 112px;
+	height: 32px;
+	display: inline-block;
+	color: #fa554c;
+	background-color: #fff;
+	border: 1px solid #fdbbb7;
+	text-align: center;
+	line-height: 32px;
+	cursor: pointer;
+}
+
+.delBtn:nth-child(1) {
+	margin-right: 4px;
+}
+
+.delBtn:hover {
+	background-color: #f34d5b;
+	border-color: #f34d5b;
+	color: #fff;
+}
+
+.delIcon {
+	color: #fff;
+	background: red;
+	border-radius: 50%;
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	font-size: 14px;
+	text-align: center;
+	line-height: 20px;
+	margin-right: 6px;
+}
+
+.exportBtn {
+	margin-left: 8px;
+	margin-right: 8px;
+}
 </style>

--
Gitblit v1.9.3