bug

src/views/doc/components/power/add.vue

@@ -28,13 +28,14 @@
         >.
       </div>
       <template v-slot:content>
+        <user-select-search @search="reload"></user-select-search>
         <ele-pro-table
           ref="table"
           :columns="columns"
           :datasource="datasource"
           tool-class="ele-toolbar-form"
           :selection.sync="selection"
-          cache-key="systemOrgUserTable"
+          row-key="id"
         >
         </ele-pro-table>
       </template>
@@ -47,142 +48,150 @@
 </template>
 
 <script>
-import { getUserPage } from '@/api/system/organization';
+  import { getUserPage } from '@/api/system/organization';
+  import userSelectSearch from './user-select-search.vue';
 
-import { listOrganizations } from '@/api/system/organization';
-export default {
-  data() {
-    return {
-      data: [],
-      show: false,
-      organizationId: '',
-      // 表格列配置
-      columns: [
-        {
-          width: 45,
-          type: 'selection',
-          columnKey: 'selection',
-          align: 'center',
-          selectable: (row, index) => {
-            return (
-              this.$store.state.user.info.userId != row.id &&
-              !this.disArr.includes(row.id)
-            );
-          }
-        },
-        {
-          columnKey: 'index',
-          type: 'index',
-          label: '序号',
-          width: 45,
-          align: 'center',
-          showOverflowTooltip: true,
-          fixed: 'left'
-        },
-        {
-          prop: 'name',
-          label: '姓名',
-          sortable: 'custom',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'jobNumber',
-          label: '工号',
-          sortable: 'custom',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'loginName',
-          label: '用户账号',
-          sortable: 'custom',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'sex',
-          label: '性别',
-          sortable: 'custom',
-          showOverflowTooltip: true,
-          minWidth: 80,
-          formatter: (_row, _column, cellValue) => {
-            return cellValue == 1 ? '男' : cellValue == 2 ? '女' : '';
+  import { listOrganizations } from '@/api/system/organization';
+  export default {
+    components: {
+      userSelectSearch
+    },
+    data() {
+      return {
+        data: [],
+        show: false,
+        organizationId: '',
+        // 表格列配置
+        columns: [
+          {
+            width: 45,
+            type: 'selection',
+            columnKey: 'selection',
+            align: 'center',
+            reserveSelection: true,
+            selectable: (row, index) => {
+              return (
+                this.$store.state.user.info.userId != row.id &&
+                !this.disArr.includes(row.id)
+              );
+            }
+          },
+          {
+            columnKey: 'index',
+            type: 'index',
+            label: '序号',
+            width: 45,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'name',
+            label: '姓名',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'jobNumber',
+            label: '工号',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'loginName',
+            label: '用户账号',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'sex',
+            label: '性别',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 80,
+            formatter: (_row, _column, cellValue) => {
+              return cellValue == 1 ? '男' : cellValue == 2 ? '女' : '';
+            }
           }
-        }
-      ],
-      selection: [],
-      disArr: []
-    };
-  },
+        ],
+        selection: [],
+        disArr: []
+      };
+    },
 
-  created() {},
-  methods: {
-    /* 查询 */
-    query() {
-      listOrganizations()
-        .then((list) => {
-          let _list = list.filter((i) => i.name != '超级管理员');
+    created() {},
+    methods: {
+      /* 查询 */
+      query() {
+        listOrganizations()
+          .then((list) => {
+            let _list = list.filter((i) => i.name != '超级管理员');
 
-          this.data = this.$util.toTreeData({
-            data: _list,
-            idField: 'id',
-            parentIdField: 'parentId'
-          });
+            this.data = this.$util.toTreeData({
+              data: _list,
+              idField: 'id',
+              parentIdField: 'parentId'
+            });
 
-          this.$nextTick(() => {
-            this.onNodeClick(this.data[0]);
+            this.$nextTick(() => {
+              this.onNodeClick(this.data[0]);
+            });
+          })
+          .catch((e) => {
+            // this.$message.error(e.message);
           });
+      },
+      async open(data) {
+        this.query();
+        this.disArr = data;
+      
+        this.show = true;
+        this.$nextTick(()=>{
+         this.$refs.table.setSelectedRowKeys([])
+
         })
-        .catch((e) => {
-          // this.$message.error(e.message);
+      },
+      /* 表格数据源 */
+      async datasource({ page, limit, where, order }) {
+        let data = await getUserPage({
+          ...where,
+          ...order,
+          pageNum: page,
+          size: limit,
+          groupId: this.organizationId
         });
-    },
-    async open(data) {
-      this.query();
-
-      this.disArr = data;
-      this.show = true;
-    },
-    /* 表格数据源 */
-    async datasource({ page, limit, where, order }) {
-      let data = await getUserPage({
-        ...where,
-        ...order,
-        pageNum: page,
-        size: limit,
-        groupId: this.organizationId
-      });
 
-      return data;
-    },
-    /* 保存编辑 */
-    save() {
-      let data = JSON.parse(JSON.stringify(this.selection));
-      this.$emit('success', data);
-      this.show = false;
-    },
-    onNodeClick(val) {
-      this.organizationId = val.id;
-      this.reload();
-    },
-    /* 刷新表格 */
-    reload(where) {
-      this.$refs.table.reload({ pageNum: 1, where: where });
-    },
-    cancel() {
-      this.show = false;
+        return data;
+      },
+      /* 保存编辑 */
+      save() {
+        let data = JSON.parse(JSON.stringify(this.selection));
+        this.$emit('success', data);
+        this.show = false;
+      },
+      onNodeClick(val) {
+        this.organizationId = val.id;
+        this.reload();
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ pageNum: 1, where: where });
+      },
+      cancel() {
+        this.show = false;
+      }
     }
-  }
-};
+  };
 </script>
 <style scoped lang="scss">
-:deep(.ele-split-panel-wrap) {
-  height: 50vh;
-  overflow-y: auto;
-}
-:deep(.el-checkbox__input.is-disabled .el-checkbox__inner){
-  background-color: #f3f3f3;
-}
-
+  :deep(.ele-split-panel-wrap) {
+    height: 50vh;
+    overflow-y: auto;
+  }
+  :deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
+    background-color: #f3f3f3;
+  }
 </style>

src/views/doc/components/power/user-select-search.vue

@@ -0,0 +1,94 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    size="small"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="24">
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+      <el-form-item>
+          <el-input
+            clearable
+            size="small"
+            v-model.trim="where.jobNumber"
+            placeholder="请输入工号"
+          />
+        </el-form-item>
+        </el-col>
+
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+
+
+        <el-form-item>
+          <el-input
+            clearable
+            size="small"
+            v-model.trim="where.loginName"
+            placeholder="请输入用户账号"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+        <el-form-item>
+          <el-input
+            clearable
+            size="small"
+            v-model.trim="where.name"
+            placeholder="请输入姓名"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ?  { md: 6 } : { span: 6 }">
+        <el-form-item>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+          <slot></slot>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        jobNumber: '',
+        loginName: '',
+        name: ''
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>