From 6ecc790c14ac7d22aeaab5512b0093931620a310 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期四, 31 八月 2023 09:19:24 +0800
Subject: [PATCH] modified: .env.development
---
src/views/laboratory/organizational/index.vue | 217 +++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 182 insertions(+), 35 deletions(-)
diff --git a/src/views/laboratory/organizational/index.vue b/src/views/laboratory/organizational/index.vue
index b25fa6a..3561611 100644
--- a/src/views/laboratory/organizational/index.vue
+++ b/src/views/laboratory/organizational/index.vue
@@ -12,6 +12,7 @@
:filter-node-method="filterNode"
ref="tree"
@node-click="handleNodeClick"
+ :expand-on-click-node="false"
>
</el-tree>
</div>
@@ -23,9 +24,15 @@
type="primary"
size="small"
icon="el-icon-circle-plus-outline"
+ @click="dialogVisible = true"
>鏂板</el-button
>
- <el-button size="small" icon="el-icon-delete-solid">鍒犻櫎</el-button>
+ <el-button
+ size="small"
+ icon="el-icon-delete-solid"
+ @click="listDeleteClick"
+ >鍒犻櫎</el-button
+ >
</div>
</div>
<div class="table-main-div">
@@ -39,27 +46,84 @@
@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
+ 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"
+ clearable
+ 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 } from "@/api/laboratory/organizational";
+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: {
@@ -67,28 +131,24 @@
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 寮�",
- },
- ],
+ formData: {
+ fatherId: "",
+ department: "",
+ },
+ // 鏂板鎸夐挳閲岄潰绂佹杈撳叆妗嗘暟鎹�
+ disabledInputShow: "",
+ // 淇濆瓨鐐瑰嚮鑺傜偣鏁版嵁
+ treeNodeData: {},
+ // 澶氶�夊垹闄�
+ listDelete: [],
+ // 琛ㄦ牸鏁版嵁
+ tableData: [],
+ rules: {
+ department: [
+ { required: true, message: "璇疯緭鍏ユ椿鍔ㄥ悕绉�", trigger: "blur" },
+ { min: 1, max: 25, message: "闀垮害鍦� 1 鍒� 5 涓瓧绗�", trigger: "blur" },
+ ],
+ },
};
},
methods: {
@@ -101,6 +161,13 @@
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;
});
},
// 鑾峰彇鏍戣矾寰�
@@ -115,10 +182,14 @@
// 鐐瑰嚮鏍戣妭鐐�
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);
+ // 鐢变簬鐐瑰嚮绗竴鑺傜偣鏃犳硶瑙﹀彂getParentData閲岄潰鐨勫垽鏂紝鍙兘棰濆鍒ゆ柇
+ if (node.data.id === 0) {
+ this.msg = node.data.department;
+ }
+ // 鐐瑰嚮鑺傜偣鏁版嵁瀛樺偍涓嬫潵
+ this.treeNodeData = node.data;
+ // 鐐瑰嚮瑙﹀彂璇ュ嚱鏁帮紝鏇存柊琛ㄦ牸鏁版嵁
+ this.tableInitialization(node.data.id);
},
// 鏀瑰彉澶氶�夋鐘舵��
toggleSelection(rows) {
@@ -132,7 +203,71 @@
},
// 鐐瑰嚮澶氶�夋浠ュ悗鐨勬搷浣�
handleSelectionChange(val) {
- this.multipleSelection = 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() {
@@ -141,6 +276,15 @@
watch: {
filterText(val) {
this.$refs.tree.filter(val);
+ },
+ dialogVisible: {
+ handler(newVal, oldVal) {
+ if (newVal == false) {
+ this.isUpdate = false;
+ this.formData = {};
+ this.$refs.ruleForm.resetFields();
+ }
+ },
},
},
};
@@ -187,4 +331,7 @@
font-weight: 500;
color: #999999;
}
+.elFormClass .el-form-item__error {
+ padding-left: 90px;
+}
</style>
--
Gitblit v1.9.3