tabel默认首条选中部门信息页测试

src/views/system/dept/authDept.vue

@@ -2,7 +2,12 @@
   <div>
     <!--    部门信息相关-->
     <el-card>
-      <el-form :inline="true" :model="filterQuery" class="query-form" size="mini" >
+      <el-form
+        :inline="true"
+        :model="filterQuery"
+        class="query-form"
+        size="mini"
+      >
         <el-row>
           <el-form-item class="query-form-item" label="部门名称:">
             <el-input
@@ -12,7 +17,11 @@
             ></el-input>
           </el-form-item>
           <el-form-item class="query-form-item" label="状态:">
-            <el-select v-model="filterQuery.status" placeholder="请选择状态:" clearable>
+            <el-select
+              v-model="filterQuery.status"
+              placeholder="请选择状态:"
+              clearable
+            >
               <el-option label="全部" value=""></el-option>
               <el-option label="禁用" :value="0"></el-option>
               <el-option label="正常" :value="1"></el-option>
@@ -20,17 +29,12 @@
           </el-form-item>
           <el-form-item>
             <el-button-group>
-              <el-button
+              <el-button type="primary" icon="el-icon-refresh" @click="onReset"
-                type="primary"
+                >重置
-                icon="el-icon-refresh"
+              </el-button>
-                @click="onReset"
+              <el-button type="primary" @click="onSubmit" icon="el-icon-search"
-              >重置
+                >查询
               </el-button>
-              <el-button type="primary" @click="onSubmit"
-                         icon="el-icon-search"
-              >查询
-              </el-button
-              >
               <!--              <el-button type="primary" @click="addDeptDialog"-->
               <!--                         icon="el-icon-plus"-->
               <!--              >新增-->
@@ -40,81 +44,86 @@
                 type="primary"
                 icon="el-icon-sort"
                 @click="toggleExpandAll"
-              >展开/折叠
+                >展开/折叠
               </el-button>
             </el-button-group>
           </el-form-item>
         </el-row>
       </el-form>
-      <el-table v-loading="loading" :data="list" style="width: 100%" ref="deptTableRef"
+      <el-table
-                highlight-current-row
+        v-loading="loading"
-                border
+        :data="list"
-                v-if="refreshTable"
+        style="width: 100%"
-                row-key="id"
+        ref="deptTableRef"
-                @current-change="handleDeptChange"
+        highlight-current-row
-                :default-expand-all="isExpandAll"
+        border
-                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        v-if="refreshTable"
+        row-key="id"
+        @current-change="handleDeptChange"
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
         <el-table-column label="序号" type="index"></el-table-column>
-        <el-table-column
+        <el-table-column label="部门名称" prop="name"></el-table-column>
-          label="部门名称"
+        <el-table-column label="部门编码" prop="code"></el-table-column>
-          prop="name"
-        ></el-table-column>
-        <el-table-column
-          label="部门编码"
-          prop="code"
-        ></el-table-column>
         <el-table-column label="状态" prop="status">
           <template slot-scope="scope">
-            <el-tag :type="scope.row.status | statusFilterType">{{
+            <el-tag :type="scope.row.status | statusFilterType"
-                scope.row.status | statusFilterName
+              >{{ scope.row.status | statusFilterName }}
-              }}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column label="允许供应商使用" prop="spUse">
           <template slot-scope="scope">
-            <el-tag :type="scope.row.spUse | spUerFilterType">{{
+            <el-tag :type="scope.row.spUse | spUerFilterType"
-                scope.row.spUse | spUerFilterName
+              >{{ scope.row.spUse | spUerFilterName }}
-              }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="备注" prop="remark">
+        <el-table-column label="备注" prop="remark"> </el-table-column>
-        </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button
-              type="text" :disabled="scope.row.status==0"
+              type="text"
+              :disabled="scope.row.status == 0"
               @click.native.stop="subAddDeptDialog(scope.row)"
-            >新增
+              >新增
-            </el-button
+            </el-button>
-            >
 
             <el-button
               type="text"
               @click.native.stop="updateDeptDialog(scope.row)"
-            >编辑
+              >编辑
-            </el-button
+            </el-button>
-            >
 
-            <el-button
+            <el-button type="text" @click.native.stop="deleteDialog(scope.row)"
-              type="text"
+              >删除
-              @click.native.stop="deleteDialog(scope.row)"
+            </el-button>
-            >删除
-            </el-button
-            >
           </template>
         </el-table-column>
       </el-table>
-      <el-dialog :title="formMap[formName]" :before-close="cancelDialog" :visible.sync="formVisible" width="45%">
+      <el-dialog
-        <el-form :model="formData" ref="dataForm" :rules="rules" label-width="150px">
+        :title="formMap[formName]"
+        :before-close="cancelDialog"
+        :visible.sync="formVisible"
+        width="45%"
+      >
+        <el-form
+          :model="formData"
+          ref="dataForm"
+          :rules="rules"
+          label-width="150px"
+        >
           <el-row>
             <el-form-item label="上级部门:" v-if="formData.pid != 0">
-              <treeselect v-model="formData.pcode"  :options="deptOptions" :normalizer="normalizer"
+              <treeselect
-                          :disabled="isShow"
+                v-model="formData.pcode"
-                          style="width: 90%"
+                :options="deptOptions"
-                          placeholder="选择上级部门"/>
+                :normalizer="normalizer"
+                :disabled="isShow"
+                style="width: 90%"
+                placeholder="选择上级部门"
+              />
             </el-form-item>
           </el-row>
           <el-row>
@@ -128,15 +137,22 @@
             </el-form-item>
           </el-row>
           <el-row>
-            <el-form-item label="状态:"  prop="status">
+            <el-form-item label="状态:" prop="status">
-              <el-radio-group :disabled="formData.pid==0" v-model="formData.status">
+              <el-radio-group
+                :disabled="formData.pid == 0"
+                v-model="formData.status"
+              >
                 <el-radio :label="1">正常</el-radio>
                 <el-radio :label="0">禁用</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-row>
 
-          <el-form-item label="是否能被供应商使用" prop="spUse" class="query-form-item">
+          <el-form-item
+            label="是否能被供应商使用"
+            prop="spUse"
+            class="query-form-item"
+          >
             <el-radio-group v-model="formData.spUse">
               <el-radio :label="true">是</el-radio>
               <el-radio :label="false">否</el-radio>
@@ -169,14 +185,12 @@
                         ></el-tree>
                       </el-form-item>
                     </el-row>-->
-
         </el-form>
 
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" size="small" @click.native="formSubmit()"
-          >提交
+            >提交
-          </el-button
+          </el-button>
-          >
           <el-button @click.native="cancelDialog" size="small">取消</el-button>
         </div>
       </el-dialog>
@@ -185,7 +199,12 @@
       <!--      部门绑定用户列表-->
       <el-tab-pane>
         <span slot="label">{{ currentRow.name }}-用户列表</span>
-        <el-form :inline="true" :model="userQuery" class="query-form" size="mini">
+        <el-form
+          :inline="true"
+          :model="userQuery"
+          class="query-form"
+          size="mini"
+        >
           <el-form-item class="query-form-item" label="用户名称/账号:">
             <el-input
               v-model="userQuery.key"
@@ -200,47 +219,50 @@
                 type="primary"
                 icon="el-icon-refresh"
                 @click="onUserReset"
-              >重置
+                >重置
               </el-button>
-              <el-button type="primary" @click="onUserSubmit"
+              <el-button
-                         icon="el-icon-search"
+                type="primary"
-              >查询
+                @click="onUserSubmit"
-              </el-button
+                icon="el-icon-search"
+                >查询
+              </el-button>
+              <el-tooltip
+                content="请移步至权限管理-用户管理-编辑界面选择所属部门信息"
+                placement="top"
+                style="margin-left: 20px"
               >
-              <el-tooltip content="请移步至权限管理-用户管理-编辑界面选择所属部门信息" placement="top"
-                          style="margin-left: 20px">
                 <i class="el-icon-question">帮助</i>
               </el-tooltip>
             </el-button-group>
           </el-form-item>
         </el-form>
-        <el-table v-loading="userloading" :data="userlist" style="width: 100%" border
+        <el-table
-                  row-key="id"
+          v-loading="userloading"
+          :data="userlist"
+          style="width: 100%"
+          border
+          row-key="id"
         >
           <el-table-column label="序号" type="index"></el-table-column>
           <el-table-column
             label="用户名称"
             prop="employeeName"
           ></el-table-column>
-          <el-table-column
+          <el-table-column label="用户账号" prop="userName"></el-table-column>
-            label="用户账号"
+          <el-table-column label="备注" prop="comments"> </el-table-column>
-            prop="userName"
-          ></el-table-column>
-          <el-table-column label="备注" prop="comments">
-          </el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
               <el-button
                 type="text"
                 @click.native.stop="removeUserDialog(scope.row)"
-              >移除
+                >移除
-              </el-button
+              </el-button>
-              >
             </template>
           </el-table-column>
         </el-table>
         <pagination
-          v-show="userTotal>0"
+          v-show="userTotal > 0"
           :total="userTotal"
           :page.sync="userQuery.page"
           :limit.sync="userQuery.limit"
@@ -248,11 +270,15 @@
         />
       </el-tab-pane>
 
-
       <!--      部门绑定仓库信息-->
       <el-tab-pane>
         <span slot="label">{{ currentRow.name }}-仓库列表</span>
-        <el-form :inline="true" :model="invQuery" class="query-form" size="mini">
+        <el-form
+          :inline="true"
+          :model="invQuery"
+          class="query-form"
+          size="mini"
+        >
           <el-form-item class="query-form-item" label="仓库名称/编码:">
             <el-input
               v-model="invQuery.key"
@@ -267,34 +293,35 @@
                 type="primary"
                 icon="el-icon-refresh"
                 @click="onInvReset"
-              >重置
+                >重置
+              </el-button>
+              <el-button
+                type="primary"
+                @click="onInvSubmit"
+                icon="el-icon-search"
+                >查询
               </el-button>
-              <el-button type="primary" @click="onInvSubmit"
+              <el-tooltip
-                         icon="el-icon-search"
+                content="请移步至系统管理-组织管理-仓库信息管理界面绑定仓库信息"
-              >查询
+                placement="top"
-              </el-button
+                style="margin-left: 20px"
               >
-              <el-tooltip content="请移步至系统管理-组织管理-仓库信息管理界面绑定仓库信息" placement="top"
-                          style="margin-left: 20px">
                 <i class="el-icon-question">帮助</i>
               </el-tooltip>
             </el-button-group>
           </el-form-item>
         </el-form>
-        <el-table v-loading="invLoading" :data="invlist" style="width: 100%" border
+        <el-table
-                  row-key="id"
+          v-loading="invLoading"
+          :data="invlist"
+          style="width: 100%"
+          border
+          row-key="id"
         >
           <el-table-column label="序号" type="index"></el-table-column>
-          <el-table-column
+          <el-table-column label="仓库名称" prop="name"></el-table-column>
-            label="仓库名称"
+          <el-table-column label="仓库编码" prop="code"></el-table-column>
-            prop="name"
+          <el-table-column label="备注" prop="remark"> </el-table-column>
-          ></el-table-column>
-          <el-table-column
-            label="仓库编码"
-            prop="code"
-          ></el-table-column>
-          <el-table-column label="备注" prop="remark">
-          </el-table-column>
           <!--          <el-table-column label="操作">-->
           <!--            <template slot-scope="scope">-->
           <!--              <el-button-->
@@ -307,9 +334,8 @@
           <!--          </el-table-column>-->
         </el-table>
 
-
         <pagination
-          v-show="invTotal>0"
+          v-show="invTotal > 0"
           :total="invTotal"
           :page.sync="invQuery.page"
           :limit.sync="invQuery.limit"
@@ -317,19 +343,21 @@
         />
       </el-tab-pane>
     </el-tabs>
-
   </div>
 </template>
 
 <script>
+import {
+  filterList,
+  deleteWarehouse,
+  saveWarehouse,
+} from "@/api/system/invWarehouse";
 
-import {filterList, deleteWarehouse, saveWarehouse} from "@/api/system/invWarehouse";
+import { treeList, treeSelectedList } from "@/api/system/dataStatus";
-
-import {treeList, treeSelectedList} from "@/api/system/dataStatus";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import {listDeptUser, removeUser} from "@/api/system/deptUser";
+import { listDeptUser, removeUser } from "@/api/system/deptUser";
-import {filterSubAll} from "@/api/system/invSubWarehouse";
+import { filterSubAll } from "@/api/system/invSubWarehouse";
 
 export default {
   data() {
@@ -359,21 +387,19 @@ export default {
       deptOptions: [],
       rules: {
         name: [
-          {required: true, message: "部门名称不能为空", trigger: "blur"}
+          { required: true, message: "部门名称不能为空", trigger: "blur" },
-        ],
-        status: [
-          {required: true, message: "状态不能为空", trigger: "blur"}
         ],
+        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
       },
       menuExpand: false,
       menuNodeAll: false,
       menuOptions: [],
       defaultProps: {
         children: "children",
-        label: "label"
+        label: "label",
       },
       currentRow: {
-        name: "部门"
+        name: "部门",
       },
 
       //部门用户
@@ -392,15 +418,14 @@ export default {
       selectUserQuery: {
         code: null,
         page: 1,
-        limit: 10
+        limit: 10,
       },
 
-
       //部门仓库
       invQuery: {
         key: null,
         page: 1,
-        limit: 10
+        limit: 10,
       },
       invlist: [],
       invTotal: 0,
@@ -446,12 +471,12 @@ export default {
         path: "",
       });
       this.filterQuery = {
-        name: ""
+        name: "",
       };
       this.getList();
     },
     formSubmit() {
-      this.$refs["dataForm"].validate(valid => {
+      this.$refs["dataForm"].validate((valid) => {
         if (valid) {
           if (this.$isBlank(this.formData.name)) {
             this.$message.error("部门名称不能为空！");
@@ -499,8 +524,6 @@ export default {
           }
         }
       });
-
-
     },
     onSubmit() {
       this.getList();
@@ -526,10 +549,10 @@ export default {
         pid: row.id,
         pcode: row.code,
         status: 1,
-        spUse:false
+        spUse: false,
-      }
+      };
       // this.getStatusTreeselect();
-      filterList().then(response => {
+      filterList().then((response) => {
         let depList = response.data.list || [];
         this.deptOptions = this.handleTree(depList, "code", "pcode");
       });
@@ -550,10 +573,14 @@ export default {
       this.isShow = true;
       this.formData = row;
       // const roleMenu = this.getDeptStatusMenuTreeselect(this.formData.id);
-      filterList().then(response => {
+      filterList().then((response) => {
         let depList = response.data.list || [];
         this.deptOptions = this.handleTree(depList, "code", "pcode");
       });
+      console.log(row.id);
+    //   this.$nextTick(() => {
+    //   this.$refs.deptTableRef.setCurrentRow(this.list[row.pid]);
+    // });
     },
     getList() {
       this.loading = true;
@@ -562,6 +589,10 @@ export default {
           this.loading = false;
           let depList = response.data.list || [];
           this.list = this.handleTree(depList, "code", "pcode");
+          this.$nextTick(() => {
+      this.$refs.deptTableRef.setCurrentRow(this.list[0]);
+    });
+    console.log(this.list);
         })
         .catch(() => {
           this.loading = false;
@@ -590,11 +621,9 @@ export default {
             } else {
               this.$message.error(res.message);
             }
-
           });
         })
-        .catch(() => {
+        .catch(() => {});
-        });
     },
     toggleExpandAll() {
       this.refreshTable = false;
@@ -611,7 +640,7 @@ export default {
       return {
         id: node.code,
         label: node.name,
-        children: node.children
+        children: node.children,
       };
     },
     // 树权限（展开/折叠）
@@ -627,13 +656,13 @@ export default {
     },
     /** 查询菜单树结构 */
     getStatusTreeselect() {
-      treeList().then(response => {
+      treeList().then((response) => {
         this.menuOptions = response.data;
       });
     },
     getDeptStatusMenuTreeselect(deptId) {
-      let query = {deptId: deptId};
+      let query = { deptId: deptId };
-      return treeSelectedList(query).then(response => {
+      return treeSelectedList(query).then((response) => {
         this.menuOptions = response.data.menus;
         return response;
       });
@@ -652,7 +681,6 @@ export default {
       this.onInvSubmit();
     },
 
-
     //用户相关
     handleUserSelectionChange(val) {
       this.selectAddUser = val;
@@ -689,7 +717,7 @@ export default {
         key: "",
         parentId: this.currentRow.code,
         page: 1,
-        limit: 20
+        limit: 20,
       };
       this.onInvSubmit();
     },
@@ -712,11 +740,9 @@ export default {
             }
           });
         })
-        .catch(() => {
+        .catch(() => {});
-        });
     },
 
-
     //仓库相关
     getInvList() {
       filterSubAll(this.invQuery)
@@ -735,12 +761,11 @@ export default {
       this.getInvList();
     },
   },
-  components: {Treeselect},
+  components: { Treeselect },
   mounted() {
-
   },
   created() {
     this.getList();
-  }
+  },
 };
 </script>