update src/views/Sys/Deptall.vue.

Signed-off-by: 赵蒙蒙 <1595784580@qq.com>

src/views/Sys/Deptall.vue

@@ -3,59 +3,91 @@
     <!--布局容器-->
     <el-container style="height: 100%" direction="vertical">
       <el-main ref="elMain" style="padding: 0px">
-        <Split
-          :gutterSize="2"
-          @onDragEnd="onDragEnd"
-          style="height: calc(100vh - 120px)"
+        <!-- 新增展开折叠 -->
+        <div style="margin-bottom: 20px; margin-top: 15px">
+          <el-button
+            size="small"
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            :label="$t('action.addCompany')"
+            @click="handleAddCompany"
+            >新增子公司</el-button
+          >
+          <el-button
+            size="small"
+            type="warning"
+            plain
+            icon="el-icon-plus"
+            :label="$t('action.addDept')"
+            @click="handleAddDept"
+            >新增部门</el-button
+          >
+          <el-button
+            size="small"
+            type="info"
+            plain
+            icon="el-icon-sort"
+            @click="fold()"
+            >展开折叠</el-button
+          >
+        </div>
+        <!-- 表格渲染 -->
+        <el-table
+          style="width: 100%; font-size: 13px"
+          permsEdit="sys:dept:edit"
+          permsDelete="sys:dept:delete"
+          :columns="columns"
+          :row-key="row_key"
+          :expand-row-keys="expandRowKeys"
+          border
+          :data="ztreeNodes"
+          :tree-props="{ children: 'children', hasChildren: 'hasChilkdren' }"
+          :header-cell-style="{
+            background: '#F2F7FC',
+            fontWeight: '900',
+            color: '#606266',
+          }"
+          size="small"
+          ref="expandTable"
+          highlight-current-row
+          @row-click="rowClick"
         >
-          <SplitArea :size="ztreeLeftWidth" :minSize="240">
-            <!-- 操作按钮 -->
-            <div class="u-f-ac" style="margin-bottom: 20px; margin-top: 10px">
-              <!-- 新增子公司按钮 -->
-              <kt-button
-                style="background-color: #52c578; border: #52c578"
-                icon="fa fa-plus"
-                :label="$t('action.addCompany')"
-                type="primary"
-                perms="sys:dept:add"
-                @click="handleAddCompany"
-              />
-              <!-- 新增部门按钮 -->
-              <kt-button
-                style="background-color: #ffc000; border: #ffc000"
-                icon="fa fa-plus"
-                :label="$t('action.addDept')"
-                type="primary"
-                perms="sys:dept:add"
-                @click="handleAddDept"
-              />
-            </div>
-            <!-- 机构树 -->
-            <tree
-              :setting="ztreeSetting"
-              :nodes="ztreeNodes"
-              @onClick="onClick"
-              @onCheck="onCheck"
-              @onCreated="handleCreated"
-              @onRightClick="onZTreeRightClick"
-            />
-          </SplitArea>
-          <SplitArea :size="ztreeRightWidth">
-            <kt-common-table
-              permsEdit="sys:dept:edit"
-              permsDelete="sys:dept:delete"
-              :data="pageResult"
-              :columns="columns"
-              editButtonName="编辑"
-              deleteButtonName="删除"
-              :showBatchDelete="false"
-              @findPage="findSubDeptPage"
-              @handleEdit="handleEdit"
-              @handleDeleteFlag="handleDeleteFlag"
-            >
-            </kt-common-table>
-          </SplitArea>
-        </Split>
+          <el-table-column prop="name" label="部门管理" width="300">
+          </el-table-column>
+          <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+          <el-table-column
+            prop="comlevel"
+            label="机构级别"
+            :formatter="comlevelFormatter"
+          ></el-table-column>
+          <el-table-column
+            prop="comattribute"
+            label="机构性质"
+            :formatter="comattributeFormatter"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="comtype"
+            label="机构类型"
+            :formatter="comtypeFormatter"
+          >
+          </el-table-column>
+          <el-table-column prop="address" label="机构地址" width="300">
+          </el-table-column>
+          <el-table-column label="操作" fixed="right">
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                size="medium "
+                icon="el-icon-edit"
+                @click.native.stop="handleEdit(scope.row)"
+                @findPage="findSubDeptPage"
+                >编辑</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
       </el-main>
     </el-container>
     <!-- 新增修改机构界面 -->
@@ -221,14 +253,6 @@
         <el-row> </el-row>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <!-- <el-button :size="size" @click="showmessage">看点信息</el-button> -->
-        <el-button
-          size="small"
-          @click="clearDialog"
-          type="primary"
-          style="background-color: #de504c; border: 1px solid #de504c"
-          >重置</el-button
-        >
         <el-button
           size="small"
           type="primary"
@@ -264,7 +288,7 @@
           <el-col :span="8">
             <el-form-item label="所属机构" prop="id">
               <span
-                style="width: 100%"
+                style="width: 100%; overflow: hidden"
                 v-if="
                   currentTreeNode && currentTreeNode.id == deptDataForm.parentId
                 "
@@ -343,7 +367,7 @@ export default {
       this.peopledeptid = "9";
     }
 
-    this.findLeftTreeData(); // 获取左边机构树数据
+    this.findTreeData(); // 获取左边机构树数据
     //获取所有下拉框数据
     this.getDictItems("comlevel");
     this.getDictItems("comattribute");
@@ -356,6 +380,11 @@ export default {
   },
   data() {
     return {
+      expandRowKeys: [],
+      searchForm: {
+        classname: "",
+        status: "",
+      },
       peopleid: "",
       peopledeptid: "",
 
@@ -453,6 +482,7 @@ export default {
         deptType: "", //机构类型：用来区分是子公司还是部门啥的，现有：子公司C,门店M,部门D
         orderNum: 0,
       },
+      //表单验证
       dataRule: {
         name: [
           {
@@ -522,29 +552,64 @@ export default {
           },
         ],
       },
+      isshow: false,
+      expanded: false, // 在这里定义了展开与否的标志
       // 部门DialogEnd
     };
   },
   methods: {
+    row_key(row) {
+      return row.id;
+    },
+    //点击每一行的事件
+    rowClick(row, treeNode) {
+      console.log(row, treeNode);
+      //点每行展开折叠
+      row.expanded = !row.expanded;
+      this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
+      //新增子公司、部门
+      this.currentTreeNode = row;
+      // this.currentTreeNode = treeNode;
+      this.filters.id = this.currentTreeNode.id;
+      this.findSubDeptPage();
+    },
+    //遍历表格数据
+    forTableData(arr, isExpand) {
+      arr.forEach((i) => {
+        this.$refs.expandTable.toggleRowExpansion(i, isExpand);
+        if (i.children) {
+          this.forTableData(i.children, isExpand);
+        }
+      });
+    },
+    //展开收起树列表
+    fold() {
+      this.isshow = !this.isshow;
+      this.forTableData(this.ztreeNodes, this.isshow);
+    },
+
     //--数据字典 begin --
     getDictItems(typeName) {
       this.$api.dict
         .findByLableName(typeName)
         .then((response) => {
+          // console.log(response);
           this[typeName + "options"] = response.data; // 把获取到的数据赋给this.data
+          // this.ztreeNodes = this[typeName + "options"];
+          // console.log(this.columns);
         })
         .catch((error) => {
           this[typeName + "options"] = [];
         });
     },
-    // 拖动框架方法Start（拖动结束后）
-    onDragEnd(size) {
-      // console.log("onDragEnd", size);
-    },
-    // 拖动框架方法End
-
-    // 右边按钮方法
+    // 添加子公司
     handleAddCompany() {
+      if (!this.currentTreeNode) {
+        return this.$message({
+          message: "请选择所属机构",
+          type: "info",
+        });
+      }
       //增加子公司
       let that = this;
       if (this.currentTreeNode.id.indexOf("D") >= 0) {
@@ -622,9 +687,6 @@ export default {
       // 初始化数据
       this.dataForm.parentId = this.currentTreeNode.id;
 
-      console.log(this.dataForm.id);
-      console.log(this.dataForm);
-
       this.dataForm.comlevel = "" + (this.currentTreeNode.comlevel - 0 + 1);
 
       if (this.currentTreeNode.id === "9") {
@@ -673,13 +735,11 @@ export default {
           type: "info",
         });
       }
-      console.log("增加部门");
       this.operType = "ADD";
       this.dialogTitle = "新增部门";
       this.deptDataForm.deptType = "D"; //类型是机构（C是机构，D是部门）
       this.deptDataForm.parentId = this.currentTreeNode.id;
       this.$api.dept.findMaxDeptId(this.currentTreeNode.id).then((res) => {
-        console.log(res.data);
         let newId = parseInt(res.data) + 1;
         if (newId < 10) {
           newId = "0" + newId;
@@ -688,6 +748,7 @@ export default {
 
         this.deptDialogVisible = true;
       });
+      //新增完将输入框清空
     },
 
     // ztreeStart
@@ -698,25 +759,14 @@ export default {
       );
       this.ztreeRightWidth = 100 - (this.ztreeLeftWidth - 0);
     },
-    findLeftTreeData() {
+    findTreeData() {
       // 获取机构树的数据
       //this.loading = true;
-      this.$api.dept.findLeftDeptTree(this.peopledeptid).then((res) => {
-        console.log(res);
+      this.$api.dept.findDeptTree(this.peopledeptid).then((res) => {
         this.ztreeNodes = res.data;
         //this.loading = false;
       });
     },
-    onClick(evt, treeId, treeNode) {
-      // 点击事件
-      this.currentTreeNode = treeNode;
-      this.filters.id = this.currentTreeNode.id;
-      this.findSubDeptPage();
-    },
-    onCheck(evt, treeId, treeNode) {
-      // 选中事件
-      // console.log(evt.type, treeNode);
-    },
     handleCreated(ztreeObj) {
       this.ztreeObj = ztreeObj;
       console.log(this.ztreeOb);
@@ -724,11 +774,6 @@ export default {
       ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
       this.currentTreeNode = ztreeObj.getNodes()[0];
     },
-    onZTreeRightClick: function () {
-      //alert("haha onZTreeRightClick");
-    },
-    // ztreeEnd
-
     // 右边表格Start
     findSubDeptPage: function (data) {
       // 获取分页数据
@@ -751,32 +796,40 @@ export default {
 
     // 编辑机构或部门
     handleEdit(data) {
+      if (data.name == "总部") {
+        this.$message({
+          message: "总部不可编辑",
+          type: "warning",
+          duration: 1000,
+        });
+      }
       let that = this;
       that.operType = "EDIT";
-      if (data.row.deptType == "C") {
+      if (data.deptType == "C") {
         //编辑机构
-        //请求一次数据
         this.dialogTitle = "修改机构信息";
         (this.disabledAddress = {
           province: true,
           city: true,
           area: true,
         }),
-          this.$api.dept.getDeptById(data.row.id).then((res) => {
-            console.log(res);
-            // that.dataForm = res.data;
+          this.$api.dept.getDeptById(data.id).then((res) => {
+            that.dataForm = res.data;
             Object.assign(that.dataForm, res.data);
             that.selectAddress.province = that.dataForm.province;
             that.selectAddress.city = that.dataForm.city;
             that.selectAddress.area = that.dataForm.area;
+            this.$api.dept.getDeptById(res.data.parentId).then((res) => {
+              this.currentTreeNode = res.data;
+              console.log(res);
+            });
             that.dialogVisible = true;
           });
       }
-      if (data.row.deptType == "D") {
+      if (data.deptType == "D") {
         //编辑部门
-        //请求一次数据
         this.dialogTitle = "修改部门信息";
-        this.$api.dept.getDeptById(data.row.id).then((res) => {
+        this.$api.dept.getDeptById(data.id).then((res) => {
           that.deptDataForm = res.data;
           that.deptDialogVisible = true;
         });
@@ -785,13 +838,11 @@ export default {
     handleDeleteFlag(data) {
       let that = this;
       this.$api.dept.batchDelete(data.params).then((data) => {
-        that.findLeftTreeData();
+        that.findTreeData();
         that.filters.id = that.currentTreeNode.id;
         that.findSubDeptPage();
       });
     },
-    // 右边表格End
-
     //-- formatter begin--
     comlevelFormatter(row, column) {
       let comlevel = row.comlevel;
@@ -820,16 +871,14 @@ export default {
         data: comtype,
       });
     },
-    //-- formatter end --
-
     // 提交表单
     submitForm() {
-      if (!this.dataForm.id || this.dataForm.id == this.dataForm.parentId) {
-        return this.$message({
-          message: "请选择新增机构",
-          type: "error",
-        });
-      }
+      // if (!this.dataForm.id || this.dataForm.id == this.dataForm.parentId) {
+      //   return this.$message({
+      //     message: "请选择完整地区生成编码",
+      //     type: "error",
+      //   });
+      // }
       if (this.operType == "ADDC") {
         if (!!this.dataForm.id) {
           this.dataForm.id = this.dataForm.id.replace(/(^\s*)|(\s*$)/g, "");
@@ -845,64 +894,62 @@ export default {
       let that = this;
       this.$refs["dataForm"].validate((valid) => {
         if (valid) {
-          this.$confirm("确认提交吗？", "提示", {}).then(() => {
-            this.editLoading = true;
-            this.dataForm.orderNum = 1;
-            let params = Object.assign({}, this.dataForm);
-            if (that.operType === "ADD" || that.operType === "ADDC") {
-              let paramData = {
-                id: params.id,
-                name: params.name,
-                parentId: params.parentId,
-                comlevel: params.comlevel, //机构级别
-                comtype: params.comtype, //机构类型
-                comattribute: params.comattribute, //机构性质
-                address: params.address, //机构地址
-                province: params.province, //省
-                city: params.city, //市
-                area: params.area, //区县
-                house: params.house, //门店
-                deptType: params.deptType, //机构类型：用来区分是子公司还是部门啥的，现有：子公司C,门店M,部门D
-                orderNum: params.orderNum,
-              };
-              this.$api.dept.add(paramData).then((res) => {
-                this.editLoading = false;
-                if (res.code == 200) {
-                  this.$message({
-                    message: "操作成功",
-                    type: "success",
-                  });
-                  this.closeDialog();
-                } else {
-                  this.$message({
-                    // message: "操作失败, " + res.msg,
-                    message: "该机构已录入,请勿重复录入 ",
-                    type: "error",
-                  });
-                }
-                this.findSubDeptPage();
-                this.findLeftTreeData();
-              });
-            } else if (that.operType === "EDIT") {
-              this.$api.dept.edit(params).then((res) => {
-                this.editLoading = false;
-                if (res.code == 200) {
-                  this.$message({
-                    message: "操作成功",
-                    type: "success",
-                  });
-                  this.closeDialog();
-                } else {
-                  this.$message({
-                    message: "操作失败, " + res.msg,
-                    type: "error",
-                  });
-                }
-                this.findSubDeptPage();
-                this.findLeftTreeData();
-              });
-            }
-          });
+          this.editLoading = true;
+          this.dataForm.orderNum = 1;
+          let params = Object.assign({}, this.dataForm);
+          if (that.operType === "ADD" || that.operType === "ADDC") {
+            let paramData = {
+              id: params.id,
+              name: params.name,
+              parentId: params.parentId,
+              comlevel: params.comlevel, //机构级别
+              comtype: params.comtype, //机构类型
+              comattribute: params.comattribute, //机构性质
+              address: params.address, //机构地址
+              province: params.province, //省
+              city: params.city, //市
+              area: params.area, //区县
+              house: params.house, //门店
+              deptType: params.deptType, //机构类型：用来区分是子公司还是部门啥的，现有：子公司C,门店M,部门D
+              orderNum: params.orderNum,
+            };
+            this.$api.dept.add(paramData).then((res) => {
+              this.editLoading = false;
+              if (res.code == 200) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                });
+                this.closeDialog();
+              } else {
+                this.$message({
+                  // message: "操作失败, " + res.msg,
+                  message: "该机构已录入,请勿重复录入 ",
+                  type: "error",
+                });
+              }
+              this.findSubDeptPage();
+              this.findTreeData();
+            });
+          } else if (that.operType === "EDIT") {
+            this.$api.dept.edit(params).then((res) => {
+              this.editLoading = false;
+              if (res.code == 200) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                });
+                this.closeDialog();
+              } else {
+                this.$message({
+                  message: "操作失败, " + res.msg,
+                  type: "error",
+                });
+              }
+              this.findSubDeptPage();
+              this.findTreeData();
+            });
+          }
         }
       });
     },
@@ -912,48 +959,46 @@ export default {
       let that = this;
       this.$refs["deptDataForm"].validate((valid) => {
         if (valid) {
-          this.$confirm("确认提交吗？", "提示", {}).then(() => {
-            this.editLoading = true;
-            this.dataForm.orderNum = 0;
-            let params = Object.assign({}, this.deptDataForm);
-            if (that.operType === "ADD") {
-              this.$api.dept.add(params).then((res) => {
-                this.editLoading = false;
-                if (res.code == 200) {
-                  this.$message({
-                    message: "操作成功",
-                    type: "success",
-                  });
-                  this.closeDeptDialog();
-                } else {
-                  this.$message({
-                    message: "操作失败, " + res.msg,
-                    type: "error",
-                  });
-                }
-                this.findSubDeptPage();
-                this.findLeftTreeData();
-              });
-            } else if (that.operType === "EDIT") {
-              this.$api.dept.edit(params).then((res) => {
-                this.editLoading = false;
-                if (res.code == 200) {
-                  this.$message({
-                    message: "操作成功",
-                    type: "success",
-                  });
-                  this.closeDeptDialog();
-                } else {
-                  this.$message({
-                    message: "操作失败, " + res.msg,
-                    type: "error",
-                  });
-                }
-                this.findSubDeptPage();
-                this.findLeftTreeData();
-              });
-            }
-          });
+          this.editLoading = true;
+          this.dataForm.orderNum = 0;
+          let params = Object.assign({}, this.deptDataForm);
+          if (that.operType === "ADD") {
+            this.$api.dept.add(params).then((res) => {
+              this.editLoading = false;
+              if (res.code == 200) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                });
+                this.closeDeptDialog();
+              } else {
+                this.$message({
+                  message: "操作失败, " + res.msg,
+                  type: "error",
+                });
+              }
+              this.findSubDeptPage();
+              this.findTreeData();
+            });
+          } else if (that.operType === "EDIT") {
+            this.$api.dept.edit(params).then((res) => {
+              this.editLoading = false;
+              if (res.code == 200) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                });
+                this.closeDeptDialog();
+              } else {
+                this.$message({
+                  message: "操作失败, " + res.msg,
+                  type: "error",
+                });
+              }
+              this.findSubDeptPage();
+              this.findTreeData();
+            });
+          }
         }
       });
     },
@@ -993,97 +1038,7 @@ export default {
         this.dataForm.id = "";
       }
     },
-    //重置
-    clearDialog() {
-      let that = this;
-      var id = this.dataForm.id;
-      this.$refs.dataForm.resetFields();
-      if (this.operType == "ADD") {
-        (this.disabledAddress = {
-          province: false,
-          city: false,
-          area: false,
-        }),
-          (this.dataForm = {});
-        this.selectAddress = {
-          province: "",
-          city: "",
-          area: "",
-        };
-        this.dataForm.parentId = this.currentTreeNode.id;
-        this.dataForm.orderNum = 0;
-        if (this.currentTreeNode.level === 0) {
-          this.disabledAddress.city = true;
-          this.disabledAddress.area = true;
-          this.selectAddress.province = "";
-          this.dataForm.province = "";
-          this.selectAddress.city = "";
-          this.dataForm.city = "";
-          this.selectAddress.area = "";
-          this.dataForm.area = "";
-        } else {
-          if (!!this.currentTreeNode.province) {
-            this.selectAddress.province = this.currentTreeNode.province;
-            this.dataForm.province = this.currentTreeNode.province;
-          }
-          if (!!this.currentTreeNode.city) {
-            this.selectAddress.city = this.currentTreeNode.city;
-            this.dataForm.city = this.currentTreeNode.city;
-          }
-          if (!!this.currentTreeNode.area) {
-            this.selectAddress.area = this.currentTreeNode.area;
-            this.dataForm.area = this.currentTreeNode.area;
-          }
-        }
-        if (this.currentTreeNode.level === 1) {
-          this.disabledAddress.city = true;
-          this.disabledAddress.area = true;
-        }
-        if (this.currentTreeNode.level === 2) {
-          this.disabledAddress.province = true;
-          this.disabledAddress.area = true;
-        }
-        if (this.currentTreeNode.level === 3) {
-          this.disabledAddress.province = true;
-          this.disabledAddress.city = true;
-          this.disabledAddress.area = true;
-        }
 
-        this.dataForm.deptType = "C"; //类型是机构（C是机构，D是部门）
-
-        this.dataForm.id = "";
-        this.dataForm.comlevel = "" + (this.currentTreeNode.level + 1);
-
-        if (this.dataForm.comlevel === "5") {
-          //第5级是门店，去服务器获取最大编号
-          this.$api.dept.findMaxHouseId(this.currentTreeNode.id).then((res) => {
-            let newId = parseInt(res.data) + 1;
-            if (newId < 10) {
-              newId = "0" + newId;
-            }
-            this.dataForm.id = this.currentTreeNode.id + "M" + newId;
-          });
-        }
-      }
-      if (this.operType == "EDIT") {
-        //请求一次数据
-        this.dialogTitle = "修改机构信息";
-        (this.disabledAddress = {
-          province: true,
-          city: true,
-          area: true,
-        }),
-          this.$api.dept.getDeptById(id).then((res) => {
-            var cid = res.data.id;
-            Object.assign(that.dataForm, res.data);
-            that.selectAddress.province = that.dataForm.province;
-            that.selectAddress.city = that.dataForm.city;
-            that.selectAddress.area = that.dataForm.area;
-            that.dataForm.id = cid;
-            that.dialogVisible = true;
-          });
-      }
-    },
     //关闭机构弹框
     closeDialog() {
       this.$refs.dataForm.resetFields();
@@ -1101,7 +1056,6 @@ export default {
         area: false,
       }),
         (this.dialogVisible = false);
-      console.log(this.dataForm);
     },
     //关闭部门弹框
     closeDeptDialog() {
@@ -1112,5 +1066,11 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+body {
+  scrollbar-gutter: stable both-edges;
+}
+.bh-medium-font-size {
+  font-size: 30px !important;
+}
 </style>