From 5caa25dc8f299cb5ef5cc056dfd6c307b6763934 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期二, 08 十月 2024 20:06:49 +0800
Subject: [PATCH] update
---
src/views/master/person/main/personPerson.vue | 824 +++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 574 insertions(+), 250 deletions(-)
diff --git a/src/views/master/person/main/personPerson.vue b/src/views/master/person/main/personPerson.vue
index 2c196d1..24db503 100644
--- a/src/views/master/person/main/personPerson.vue
+++ b/src/views/master/person/main/personPerson.vue
@@ -2,317 +2,641 @@
* @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
+ * @LastEditTime: 2024-09-24 15:47:04
+ * @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" v-if="leftActive"/>
+ <!-- 宀椾綅 -->
+ <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="phone" label="鍛樺伐鐓х墖" width="150">
+ <template #default="scope">
+ <el-upload
+ :headers="authorization"
+ class="avatar-uploader"
+ action="/api/blade-resource/oss/endpoint/put-file"
+ :show-file-list="false"
+ :on-success="(file)=>handleAvatarSuccess(file,scope.$index)"
+ :before-upload="(file)=>beforeAvatarUpload(file,scope.$index)">
+ <div v-if="scope.row.avatar" style="position: relative;">
+ <img :src="scope.row.avatar" class="avatar">
+ <div class="el-icon-editDom">
+ <span class="el-icon-edit">缂栬緫</span>
+ <span class="el-icon-del" @click.stop="avatarDel(scope.$index)">鍒犻櫎</span>
+ </div>
+ </div>
+ <el-icon v-else class="el-icon-plus avatar-uploader-icon"><Picture /></el-icon>
+ </el-upload>
+ </template>
</el-table-column>
- <el-table-column
- prop="name"
- label="鍏宠仈璐﹀彿"
- width="120">
+ <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="province"
- 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="city"
- 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="address"
- label="閭"
- width="300">
+ <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="zip"
- label="鎵嬫満鍙�"
- width="120">
+ <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
- 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 * as ElementPlusIconsVue from '@element-plus/icons-vue'
+let icons = []
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+ icons.push(key)
+}
+import importTable from '@/layout/components/importTable.vue'
+import saveDialog from './save'
+export default {
+ name: "personPerson",
+ data() {
+ return {
+ authorization: {},
+ 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,...ElementPlusIconsVue
+ },
+ methods: {
+ avatarDel(index) {
+ var obj = this.tableData[index];
+ obj.avatar = "";
+ this.$HTTP.post(`/api/blade-cps/employee/submit`,obj).then(res=> {
+ this.searchPerson();
+ })
+ },
+ handleAvatarSuccess(file,index) {
+ var obj = this.tableData[index];
+ obj.avatar = file.data.link;
+ this.$HTTP.post(`/api/blade-cps/employee/submit`,obj).then(res=> {
+ this.searchPerson();
+ })
+ },
+ beforeAvatarUpload(file,index) {
+ var isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
+ if (!isJPG) {
+ this.$message.error('璇蜂笂浼犲浘鐗囷紒');
+ }
+ var TOKEN = this.$TOOL.cookie.get("TOKEN")
+ this.authorization = {Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0','Blade-Auth': TOKEN}
+ return isJPG;
+ },
+ 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;
+.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>
+<style>
+ .avatar-uploader .el-upload {
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
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;
+ .avatar-uploader .el-upload:hover {
+ border-color: #409EFF;
}
- .person-left-title {
+ .avatar-uploader-icon {
+ font-size: 28px;
+ color: #8c939d;
+ width: 80px;
+ height: 80px;
+ line-height: 80px;
text-align: center;
- vertical-align: middle;
- padding-left: 8px;
+ background-color: #c0c4cc;
}
- .person-left-title div {
- display: inline-block;
- width: 55px;
- height: 28px;
- line-height: 28px;
- border: 1px solid #dcdfe6;
+ .el-icon-editDom {
+ position: absolute;
+ left: 4px;
+ top: 56px;
+ font-weight: 700;
+ color: #409eff;
+ }
+ .el-icon-editDom span {
+ margin: 0;
+ padding: 0;
+ font-size: 12px;
+ line-height: 18px;
+ border: 1px solid #409eff;
+ background: #fff;
+ padding-left: 2px;
+ padding-right: 2px;
cursor: pointer;
}
- .person-left-title div:nth-child(1) {
- border-top-left-radius: 4px;
- border-bottom-left-radius: 4px;
- border-right: 0px;
+ .el-icon-editDom .el-icon-edit {
+ margin-right: 4px;
}
- .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;
+ .el-icon-editDom .el-icon-del {
}
- .multipleTableRef {
- margin-bottom: 8px;
+ .avatar {
+ width: 80px;
+ height: 80px;
+ display: block;
}
-</style>
+ </style>
--
Gitblit v1.9.3