From 0d5b719e7c3ae2c18525d35cac4a8a0dc127f86e Mon Sep 17 00:00:00 2001
From: XiaoRuby <3114200645@qq.com>
Date: 星期三, 23 八月 2023 18:02:02 +0800
Subject: [PATCH] 8-23组织架构开始编写下班
---
src/views/laboratory/organizational/index.vue | 183 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 181 insertions(+), 2 deletions(-)
diff --git a/src/views/laboratory/organizational/index.vue b/src/views/laboratory/organizational/index.vue
index 1a29501..b25fa6a 100644
--- a/src/views/laboratory/organizational/index.vue
+++ b/src/views/laboratory/organizational/index.vue
@@ -1,11 +1,190 @@
<template>
- <div>131</div>
+ <div class="main-div">
+ <div class="side_div">
+ <el-input placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" v-model="filterText">
+ </el-input>
+ <el-tree
+ class="filter-tree"
+ :data="data"
+ node-key="id"
+ :props="defaultProps"
+ default-expand-all
+ :filter-node-method="filterNode"
+ ref="tree"
+ @node-click="handleNodeClick"
+ >
+ </el-tree>
+ </div>
+ <div class="table_div">
+ <div class="table_top_div">
+ <span class="top_span" v-if="msg !== ''">{{ msg }}</span>
+ <div style="text-align: right; float: right">
+ <el-button
+ type="primary"
+ size="small"
+ icon="el-icon-circle-plus-outline"
+ >鏂板</el-button
+ >
+ <el-button size="small" icon="el-icon-delete-solid">鍒犻櫎</el-button>
+ </div>
+ </div>
+ <div class="table-main-div">
+ <el-table
+ ref="multipleTable"
+ :data="tableData"
+ border
+ height="100%"
+ tooltip-effect="dark"
+ style="width: 100%"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" width="55"> </el-table-column>
+ <el-table-column label="鏃ユ湡" width="120">
+ <template slot-scope="scope">{{ scope.row.date }}</template>
+ </el-table-column>
+ <el-table-column prop="name" label="濮撳悕" width="120">
+ </el-table-column>
+ <el-table-column prop="address" label="鍦板潃" show-overflow-tooltip>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </div>
</template>
<script>
+import { getOrganizationalApi } from "@/api/laboratory/organizational";
export default {
name: "Organizational",
+ data() {
+ return {
+ filterText: "",
+ msg: "",
+ data: [],
+ // tree鏍戦粯璁ゅ�奸厤缃�
+ defaultProps: {
+ children: "children",
+ label: "department",
+ id: "id",
+ },
+ tableData: [
+ {
+ date: "2016-05-02",
+ name: "鐜嬪皬铏�",
+ address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�",
+ },
+ {
+ date: "2016-05-04",
+ name: "鐜嬪皬铏�",
+ address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�",
+ },
+ {
+ date: "2016-05-01",
+ name: "鐜嬪皬铏�",
+ address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�",
+ },
+ {
+ date: "2016-05-03",
+ name: "鐜嬪皬铏�",
+ address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�",
+ },
+ ],
+ };
+ },
+ methods: {
+ // 鏍戜笂鏂规悳绱㈡杩囨护鍣�
+ filterNode(value, data) {
+ if (!value) return true;
+ return data.department.indexOf(value) !== -1;
+ },
+ // 鍒濆鍖栬幏鍙栨爲鏁版嵁
+ treeInitialization() {
+ getOrganizationalApi().then((res) => {
+ this.data = res.data;
+ });
+ },
+ // 鑾峰彇鏍戣矾寰�
+ getParentData(node, department) {
+ if (node !== null) {
+ if (node.data.department !== undefined) {
+ this.msg = node.data.department + " > " + department;
+ }
+ this.getParentData(node.parent, this.msg);
+ }
+ },
+ // 鐐瑰嚮鏍戣妭鐐�
+ handleNodeClick(data, node, element) {
+ this.getParentData(node.parent, node.data.department);
+ console.log(`output->this.msg`, this.msg);
+ console.log(`output->data`, data);
+ console.log(`output->node`, node);
+ console.log(`output->element`, element);
+ },
+ // 鏀瑰彉澶氶�夋鐘舵��
+ toggleSelection(rows) {
+ if (rows) {
+ rows.forEach((row) => {
+ this.$refs.multipleTable.toggleRowSelection(row);
+ });
+ } else {
+ this.$refs.multipleTable.clearSelection();
+ }
+ },
+ // 鐐瑰嚮澶氶�夋浠ュ悗鐨勬搷浣�
+ handleSelectionChange(val) {
+ this.multipleSelection = val;
+ },
+ },
+ mounted() {
+ this.treeInitialization();
+ },
+ watch: {
+ filterText(val) {
+ this.$refs.tree.filter(val);
+ },
+ },
};
</script>
-<style></style>
+<style lang="scss">
+.main-div {
+ width: 99.2% !important;
+ height: 94vh !important;
+ margin: 5px 5px 5px 5px;
+}
+.side_div {
+ float: left;
+ width: 300px;
+ height: 95%;
+ margin-bottom: 5px;
+ background-color: #ffffff;
+ padding: 15px;
+}
+.table_div {
+ margin-left: 6px;
+ float: left;
+ width: calc(100% - 306px);
+ height: 95%;
+ background-color: #ffffff;
+}
+.filter-tree {
+ margin-top: 6px;
+}
+.table_top_div {
+ height: 80px;
+ width: 100%;
+ padding-top: 23px;
+ padding-right: 50px;
+}
+.table-main-div {
+ width: 100%;
+ height: 90.3%;
+ padding: 10px;
+}
+.top_span {
+ margin-left: 12px;
+ font-size: 16px;
+ font-weight: 500;
+ color: #999999;
+}
+</style>
--
Gitblit v1.9.3