From 5535157ce811a29c4e3c68148fd110c9c5a4137b Mon Sep 17 00:00:00 2001
From: Fixiaobai <fixiaobai@163.com>
Date: 星期二, 05 九月 2023 16:39:58 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.65.113:9001/r/lims-before
---
src/views/laboratory/organizational/index.vue | 332 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 330 insertions(+), 2 deletions(-)
diff --git a/src/views/laboratory/organizational/index.vue b/src/views/laboratory/organizational/index.vue
index 1a29501..aa83bc1 100644
--- a/src/views/laboratory/organizational/index.vue
+++ b/src/views/laboratory/organizational/index.vue
@@ -1,11 +1,339 @@
<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"
+ :expand-on-click-node="false"
+ >
+ </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"
+ @click="dialogVisible = true"
+ >鏂板</el-button
+ >
+ <el-button
+ size="small"
+ icon="el-icon-delete-solid"
+ @click="listDeleteClick"
+ >鍒犻櫎</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="搴忓彿"
+ type="index"
+ width="70"
+ ></el-table-column>
+ <el-table-column prop="department" label="閮ㄩ棬"> </el-table-column>
+ <el-table-column label="鎿嶄綔">
+ <template scope="scope">
+ <el-button type="text" size="mini" @click="updateClick(scope)"
+ >缂栬緫</el-button
+ >
+ <el-button type="text" size="mini" @click="deleteClick(scope)"
+ >鍒犻櫎</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ <el-dialog
+ :title="isUpdate ? '鏇存柊閮ㄩ棬鍚嶇О' : '鏂板閮ㄩ棬'"
+ :visible.sync="dialogVisible"
+ width="30%"
+ >
+ <el-form
+ :model="formData"
+ :rules="rules"
+ ref="ruleForm"
+ class="elFormClass"
+ >
+ <el-form-item label="涓婄骇閮ㄩ棬锛�" prop="name" style="padding-left: 10px">
+ <el-input
+ v-model="treeNodeData.department"
+ :disabled="true"
+ style="width: 81.3%"
+ >
+ </el-input>
+ </el-form-item>
+ <el-form-item
+ label="閮ㄩ棬鍚嶇О锛�"
+ prop="department"
+ style="padding-top: 20px"
+ >
+ <el-input
+ placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�"
+ v-model="formData.department"
+ style="width: 80%"
+ >
+ </el-input>
+ </el-form-item>
+ </el-form>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="saveForm">{{
+ isUpdate ? "鏇� 鏂�" : "鏂� 澧�"
+ }}</el-button>
+ </span>
+ </el-dialog>
+ </div>
</template>
<script>
+import {
+ getOrganizationalApi,
+ getTableInitializationApi,
+ organizationalAddApi,
+ organizationalUpdateApi,
+ organizationalDeleteApi,
+} from "@/api/laboratory/organizational";
export default {
name: "Organizational",
+ data() {
+ return {
+ filterText: "",
+ dialogVisible: false,
+ msg: "",
+ isUpdate: false,
+ data: [],
+ // tree鏍戦粯璁ゅ�奸厤缃�
+ defaultProps: {
+ children: "children",
+ label: "department",
+ id: "id",
+ },
+ formData: {
+ fatherId: "",
+ department: "",
+ },
+ // 鏂板鎸夐挳閲岄潰绂佹杈撳叆妗嗘暟鎹�
+ disabledInputShow: "",
+ // 淇濆瓨鐐瑰嚮鑺傜偣鏁版嵁
+ treeNodeData: {},
+ // 澶氶�夊垹闄�
+ listDelete: [],
+ // 琛ㄦ牸鏁版嵁
+ tableData: [],
+ rules: {
+ department: [
+ { required: true, message: "璇疯緭鍏ユ椿鍔ㄥ悕绉�", trigger: "blur" },
+ { min: 1, max: 25, message: "闀垮害鍦� 1 鍒� 5 涓瓧绗�", trigger: "blur" },
+ ],
+ },
+ };
+ },
+ methods: {
+ // 鏍戜笂鏂规悳绱㈡杩囨护鍣�
+ filterNode(value, data) {
+ if (!value) return true;
+ return data.department.indexOf(value) !== -1;
+ },
+ // 鍒濆鍖栬幏鍙栨爲鏁版嵁
+ treeInitialization() {
+ getOrganizationalApi().then((res) => {
+ this.data = res.data;
+ // 鍒濆鍖栭粯璁sg鎻愮ず璺緞涓虹涓�鑺傜偣鍚嶇О
+ this.msg = res.data[0].department;
+ // 鍒濆鍖栬皟鐢ㄨ〃鏍兼帴鍙�
+ this.tableInitialization(res.data[0].id);
+ // 鍒濆鍖栦繚瀛樼涓�鑺傜偣鏁版嵁
+ this.treeNodeData.department = res.data[0].department;
+ this.treeNodeData.id = res.data[0].id;
+ });
+ },
+ // 鑾峰彇鏍戣矾寰�
+ 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);
+ // 鐢变簬鐐瑰嚮绗竴鑺傜偣鏃犳硶瑙﹀彂getParentData閲岄潰鐨勫垽鏂紝鍙兘棰濆鍒ゆ柇
+ if (node.data.id === 0) {
+ this.msg = node.data.department;
+ }
+ // 鐐瑰嚮鑺傜偣鏁版嵁瀛樺偍涓嬫潵
+ this.treeNodeData = node.data;
+ // 鐐瑰嚮瑙﹀彂璇ュ嚱鏁帮紝鏇存柊琛ㄦ牸鏁版嵁
+ this.tableInitialization(node.data.id);
+ },
+ // 鏀瑰彉澶氶�夋鐘舵��
+ toggleSelection(rows) {
+ if (rows) {
+ rows.forEach((row) => {
+ this.$refs.multipleTable.toggleRowSelection(row);
+ });
+ } else {
+ this.$refs.multipleTable.clearSelection();
+ }
+ },
+ // 鐐瑰嚮澶氶�夋浠ュ悗鐨勬搷浣�
+ handleSelectionChange(val) {
+ this.listDelete = []
+ val.forEach((v) => {
+ this.listDelete.push(v.id);
+ });
+ },
+ // 鍒濆鍖栬〃鏍兼暟鎹�
+ tableInitialization(departmentId) {
+ getTableInitializationApi(departmentId).then((res) => {
+ this.tableData = res.data;
+ });
+ },
+ // 鏇存柊涓庢柊澧炶〃鍗�
+ saveForm() {
+ this.formData.fatherId = this.treeNodeData.id;
+ this.$refs.ruleForm.validate((valid) => {
+ if (valid) {
+ if (!this.isUpdate) {
+ organizationalAddApi(this.formData).then((res) => {
+ this.$message({
+ message: res.message,
+ type: "success",
+ });
+ this.treeInitialization();
+ this.dialogVisible = false;
+ });
+ } else {
+ organizationalUpdateApi(this.formData).then((res) => {
+ this.$message({
+ message: res.message,
+ type: "success",
+ });
+ this.treeInitialization();
+ this.dialogVisible = false;
+ });
+ }
+ }
+ });
+ },
+ // 鐐瑰嚮缂栬緫瑙﹀彂
+ updateClick(scope) {
+ this.dialogVisible = true;
+ this.isUpdate = true;
+ this.formData.id = scope.row.id;
+ this.formData.fatherId = this.treeNodeData.id;
+ this.formData.department = scope.row.department;
+ },
+ // 琛ㄦ牸涓殑鍒犻櫎鎸夐挳
+ deleteClick(scope) {
+ organizationalDeleteApi(scope.row.id).then((res) => {
+ this.$message({
+ message: res.message,
+ type: "success",
+ });
+ this.treeInitialization();
+ });
+ },
+ // 澶撮儴澶氶�夊垹闄�
+ listDeleteClick() {
+ organizationalDeleteApi(this.listDelete).then((res) => {
+ this.$message({
+ message: res.message,
+ type: "success",
+ });
+ this.treeInitialization();
+ });
+ },
+ },
+ mounted() {
+ this.treeInitialization();
+ },
+ watch: {
+ filterText(val) {
+ this.$refs.tree.filter(val);
+ },
+ dialogVisible: {
+ handler(newVal, oldVal) {
+ if (newVal == false) {
+ this.isUpdate = false;
+ this.formData = {
+ fatherId: "",
+ department: "",
+ };
+ this.$refs.ruleForm.resetFields();
+ }
+ },
+ },
+ },
};
</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;
+}
+.elFormClass .el-form-item__error {
+ padding-left: 90px;
+}
+</style>
--
Gitblit v1.9.3