From d762fc609a101b1a82576a54f835834f4e9cd9b9 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期四, 07 九月 2023 10:54:39 +0800
Subject: [PATCH] 	modified:   src/layout/components/Sidebar/SidebarItem.vue 	modified:   src/router/index.js 	modified:   src/views/CNAS/nonConformanceManage/index.vue 	modified:   src/views/CNAS/reviewAnnualPlan/index.vue 	modified:   src/views/CNAS/satisfactionSurveys/index.vue 	modified:   src/views/basicData/index.vue 	modified:   src/views/experiment/inspectionApplication/index.vue 	modified:   src/views/inspectionManagement/commissionInspection/index.vue 	modified:   src/views/inspectionManagement/reportForInspection/index.vue 	modified:   src/views/laboratory/organizational/index.vue 	modified:   src/views/login/index.vue

---
 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..b8e8d8a 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-plus"
+            @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