完善任务流程

src/views/flowable/form/index.vue

@@ -168,10 +168,10 @@
         },
         rules: {
           formKey: [
-            { required: true, message: '该项不能为空', trigger: 'change' }
+            { required: true, message: '表单KEY不能为空', trigger: 'blur' }
           ],
           formName: [
-            { required: true, message: '该项不能为空', trigger: 'change' }
+            { required: true, message: '表单名称不能为空', trigger: 'blur' }
           ]
         }
       };

src/views/flowable/taskDone/done-search.vue

@@ -0,0 +1,103 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="100px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="任务名称:">
+          <el-input clearable v-model="where.taskName" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="业务主键Key:">
+          <el-input
+            clearable
+            v-model="where.processInstanceBusinessKey"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="到期日开始:">
+          <el-date-picker
+            v-model="where.taskDueAfter"
+            value-format="yyyy-MM-dd"
+            placeholder="到期日开始"
+            type="date"
+            style="width: 200px"
+            class="filter-item"
+          ></el-date-picker>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="到期日开始:">
+          <el-date-picker
+            v-model="where.taskDueBefore"
+            value-format="yyyy-MM-dd"
+            placeholder="到期日结束"
+            type="date"
+            style="width: 200px"
+            class="filter-item"
+          ></el-date-picker>
+        </el-form-item>
+      </el-col>
+      <!-- <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="备注:">
+          <el-input clearable v-model="where.comments" placeholder="请输入" />
+        </el-form-item>
+      </el-col> -->
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        taskName: undefined,
+        processInstanceBusinessKey: undefined,
+        taskDueAfter: undefined,
+        taskDueBefore: undefined
+      };
+      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>

src/views/flowable/taskDone/index.vue

@@ -77,96 +77,43 @@
           </el-dropdown-menu>
         </el-dropdown>
       </div>
-      <el-table
-        :data="records"
-        border
-        fit
-        highlight-current-row
-        style="width: 99%"
-        :cell-style="{ padding: '3px' }"
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemRoleTable"
       >
-        <el-table-column
-          label="流程实例名称"
-          prop="processInstanceName"
-          align="center"
-        >
-          <template slot-scope="scope"
-            ><span>{{ scope.row.processInstanceName }}</span></template
-          >
-        </el-table-column>
-        <el-table-column label="任务名称" prop="name" align="center">
-          <template slot-scope="scope"
-            ><span>{{ scope.row.name }}</span></template
-          >
-        </el-table-column>
-        <el-table-column
-          label="开始时间"
-          prop="createTime"
-          align="center"
-          width="165px"
-        >
-          <template slot-scope="scope"
-            ><span>{{ scope.row.createTime }}</span></template
-          >
-        </el-table-column>
-        <el-table-column
-          label="完成时间"
-          prop="endTime"
-          align="center"
-          width="165px"
-        >
-          <template slot-scope="scope"
-            ><span>{{ scope.row.endTime }}</span></template
-          >
-        </el-table-column>
-        <el-table-column
-          label="工作耗时"
-          prop="workTimeInMillis"
-          align="center"
-        >
-          <template slot-scope="scope"
-            ><span>{{ scope.row.workTimeInMillis }}</span></template
-          >
-        </el-table-column>
-        <el-table-column label="总耗时" prop="durationInMillis" align="center">
-          <template slot-scope="scope"
-            ><span>{{ scope.row.durationInMillis }}</span></template
-          >
-        </el-table-column>
-        <el-table-column label="所有人" prop="owner" align="center">
-          <template slot-scope="scope"
-            ><span>{{ scope.row.owner }}</span></template
-          >
-        </el-table-column>
-        <el-table-column label="执行人" prop="assignee" align="center">
-          <template slot-scope="scope"
-            ><span>{{ scope.row.assignee }}</span></template
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <!-- <el-button
+            icon="el-icon-plus"
+            type="primary"
+            @click="btnImport"
+            class="ele-btn-icon"
+            >导入
+          </el-button> -->
+        </template>
+        <!-- 工作耗时 -->
+        <template v-slot:workTimeInMillis="{ row }">
+          {{ getTime(row.workTimeInMillis) }}
+        </template>
+        <!-- 总耗时 -->
+        <template v-slot:durationInMillis="{ row }">
+          {{ getTime(row.durationInMillis) }}
+        </template>
+
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="btnView(null, row.id)"
           >
-        </el-table-column>
-        <el-table-column label="操作" align="center">
-          <template slot-scope="{ row }">
-            <el-dropdown>
-              <span class="el-dropdown-link"
-                >操作<i class="el-icon-arrow-down el-icon--right"></i
-              ></span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  icon="el-icon-view"
-                  @click.native="btnView(row.processInstanceId)"
-                  >查看详情
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :current.sync="listQuery.current"
-        :size.sync="listQuery.size"
-        @pagination="list"
-      />
+            查看详情
+          </el-link>
+        </template>
+      </ele-pro-table>
     </el-card>
 
     <process-detail
@@ -187,13 +134,84 @@
     components: { ProcessDetail, Pagination },
     data() {
       return {
+        columns: [
+          {
+            type: 'index',
+            label: '序号',
+            width: 50,
+            align: 'center',
+            fixed: 'left'
+          },
+
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'name',
+            label: '任务名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'createTime',
+            label: '开始时间',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'endTime',
+            label: '完成时间',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'workTimeInMillis',
+            label: '工作耗时',
+            align: 'center',
+            slot: 'workTimeInMillis',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'durationInMillis',
+            label: '总耗时',
+            align: 'center',
+            slot: 'durationInMillis',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'owner',
+            label: '所有人',
+            align: 'center',
+
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'assignee',
+            label: '执行人',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 230,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
         dicts: [],
         records: null,
         selectedRecords: [],
         total: 0,
         listQuery: {
-          current: 1,
-          size: 10,
           processInstanceId: undefined,
           taskName: undefined,
           processInstanceBusinessKey: undefined,
@@ -209,25 +227,47 @@
         dialogViewVisible: false
       };
     },
-    created() {
-      this.list();
-    },
+
     methods: {
-      list() {
-        getAction('/flowable/task/listDone', this.listQuery).then((res) => {
-          const { data } = res.data;
-          this.records = data.records;
-          this.total = data.total;
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where: this.listQuery });
+      },
+      async datasource({ page, limit, where }) {
+        const res = await getAction('/flowable/task/listDone', {
+          ...where,
+          current: page,
+          size: limit
         });
+        const { data } = res.data;
+        return {
+          list: data.records,
+          count: data.total
+        };
+      },
+      getTime(time) {
+        if (time == '' || time == null) {
+          return '';
+        }
+        let h = parseInt((time / 60 / 60) % 24);
+
+        let m = parseInt((time / 60) % 60);
+
+        let s = parseInt(time % 60);
+
+        if (time >= 3600) {
+          return `${h}时${m}分${s}秒`;
+        } else if (time >= 60) {
+          return `${m}分${s}秒`;
+        } else {
+          return `${time}秒`;
+        }
       },
+
       btnQuery() {
-        this.listQuery.current = 1;
-        this.list();
+        this.reload();
       },
       btnReset() {
         this.listQuery = {
-          current: 1,
-          size: 10,
           processInstanceId: undefined,
           taskName: undefined,
           processInstanceBusinessKey: undefined,
@@ -238,7 +278,7 @@
           processUnfinished: false,
           processFinished: false
         };
-        this.list();
+        this.reload();
       },
       btnView(processInstanceId) {
         this.processInstanceId = processInstanceId;
@@ -247,3 +287,17 @@
     }
   };
 </script>
+<style scoped>
+  .app-container {
+    padding: 10px;
+  }
+  .filter-container .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 5px;
+    margin-right: 4px;
+  }
+  .filter-container {
+    padding-bottom: 5px;
+  }
+</style>

src/views/flowable/taskTodo/index.vue

@@ -1,147 +1,73 @@
 <template>
   <div class="ele-body">
     <el-card shadow="never">
-      <div class="filter-container">
-        <!--<el-input v-model="listQuery.processInstanceId" placeholder="流程实例ID" style="width: 200px;"
-                      class="filter-item" @keyup.enter.native="btnQuery"/>-->
-        <el-input
-          v-model="listQuery.taskName"
-          placeholder="任务名称"
-          style="width: 200px"
-          class="filter-item"
-          @keyup.enter.native="btnQuery"
-        />
-        <el-input
-          v-model="listQuery.processInstanceBusinessKey"
-          placeholder="业务主键Key"
-          style="width: 200px"
-          class="filter-item"
-          @keyup.enter.native="btnQuery"
-        />
-        <el-date-picker
-          v-model="listQuery.taskDueAfter"
-          value-format="yyyy-MM-dd"
-          placeholder="到期日开始"
-          type="date"
-          style="width: 200px"
-          class="filter-item"
-        ></el-date-picker>
-        <el-date-picker
-          v-model="listQuery.taskDueBefore"
-          value-format="yyyy-MM-dd"
-          placeholder="到期日结束"
-          type="date"
-          style="width: 200px"
-          class="filter-item"
-        ></el-date-picker>
-        <el-dropdown
-          split-button
-          type="primary"
-          @click="btnQuery"
-          class="filter-item"
-        >
-          <i class="el-icon-search el-icon--left"></i>查询
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
-              >重置</el-dropdown-item
-            >
-          </el-dropdown-menu>
-        </el-dropdown>
-      </div>
-      <el-table
-        :data="records"
-        border
-        fit
-        highlight-current-row
-        style="width: 100%"
-        :cell-style="{ padding: '3px' }"
+      <todo-search @search="reload" />
+
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        cache-key="systemRoleTable"
       >
-        <el-table-column
-          label="流程实例名称"
-          prop="processInstanceName"
-          align="center"
-        >
-          <template slot-scope="scope"
-            ><span>{{ scope.row.processInstanceName }}</span></template
-          >
-        </el-table-column>
-        <el-table-column label="任务名称" prop="name" align="center">
-          <template slot-scope="scope"
-            ><span>{{ scope.row.name }}</span></template
-          >
-        </el-table-column>
-        <el-table-column
-          label="开始时间"
-          prop="createTime"
-          align="center"
-          width="165px"
-        >
-          <template slot-scope="scope"
-            ><span>{{ scope.row.createTime }}</span></template
-          >
-        </el-table-column>
-        <el-table-column label="到期日期" prop="dueDate" align="center">
-          <template slot-scope="scope"
-            ><span>{{ scope.row.dueDate }}</span></template
-          >
-        </el-table-column>
-        <el-table-column label="所有人" prop="owner" align="center">
-          <template slot-scope="scope"
-            ><span>{{ scope.row.owner }}</span></template
-          >
-        </el-table-column>
-        <el-table-column label="执行人" prop="assignee" align="center">
-          <template slot-scope="scope"
-            ><span>{{ scope.row.assignee }}</span></template
-          >
-        </el-table-column>
-        <el-table-column label="操作" align="center">
-          <template slot-scope="{ row }">
-            <el-dropdown>
-              <span class="el-dropdown-link"
-                >操作<i class="el-icon-arrow-down el-icon--right"></i
-              ></span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  icon="el-icon-view"
-                  @click.native="btnView(row.processInstanceId)"
-                  >查看详情
-                </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="row.assignee == null || row.assignee == ''"
-                  icon="el-icon-edit"
-                  divided
-                  @click.native="btnClaim(row)"
-                  >认领并执行
-                </el-dropdown-item>
-                <!-- v-if="
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <!-- <el-button
+            icon="el-icon-plus"
+            type="primary"
+            @click="btnImport"
+            class="ele-btn-icon"
+            >导入
+          </el-button> -->
+        </template>
+
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-dropdown>
+            <span class="el-dropdown-link"
+              >操作<i class="el-icon-arrow-down el-icon--right"></i
+            ></span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                icon="el-icon-view"
+                @click.native="btnView(row.processInstanceId)"
+                >查看详情
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-if="row.assignee == null || row.assignee == ''"
+                icon="el-icon-edit"
+                divided
+                @click.native="btnClaim(row)"
+                >认领并执行
+              </el-dropdown-item>
+              <!-- v-if="
                   row.assignee === $store.getters.sysUser.userId &&
                   row.endTime == null
                 " -->
-                <el-dropdown-item
-                  icon="el-icon-edit"
-                  divided
-                  @click.native="btnUnclaim(row)"
-                  >取消签收
-                </el-dropdown-item>
-                <el-dropdown-item
-                  icon="el-icon-edit"
-                  divided
-                  @click.native="btnExcuteTask(row)"
-                  >执行
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :current.sync="listQuery.current"
-        :size.sync="listQuery.size"
-        @pagination="list"
-      />
+              <el-dropdown-item
+                icon="el-icon-edit"
+                v-if="
+                  (row.endTime == null || row.endTime == '') &&
+                  row.assignee == userId
+                "
+                divided
+                @click.native="btnUnclaim(row)"
+                >取消签收
+              </el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-edit"
+                v-if="
+                  (row.endTime == null || row.endTime == '') &&
+                  (row.assignee != null || row.assignee != '') &&
+                  row.assignee == userId
+                "
+                divided
+                @click.native="btnExcuteTask(row)"
+                >执行
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </ele-pro-table>
     </el-card>
 
     <!-- 执行任务 -->
@@ -160,7 +86,6 @@
 </template>
 
 <script>
-  import Pagination from '@/components/Pagination';
   import {
     deleteAction,
     getAction,
@@ -170,20 +95,75 @@
   import { Message } from 'element-ui';
   import ExecuteTask from '../components/ExecuteTask';
   import ProcessDetail from '../components/ProcessDetail';
+  import TodoSearch from '@/views/flowable/taskTodo/todo-search';
 
   export default {
     name: 'FlowableTaskTodo',
-    components: { Pagination, ExecuteTask, ProcessDetail },
+    components: { ExecuteTask, ProcessDetail, TodoSearch },
     data() {
       return {
-        dicts: [],
-        records: null,
-        selectedRecords: [],
-        total: 0,
+        columns: [
+          {
+            type: 'index',
+            label: '序号',
+            width: 50,
+            align: 'center',
+            fixed: 'left'
+          },
+
+          {
+            prop: 'processInstanceName',
+            label: '流程实例名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'name',
+            label: '任务名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'createTime',
+            label: '创建时间',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'dueDate',
+            label: '到期日期',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'owner',
+            label: '所有人',
+            align: 'center',
+
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'assignee',
+            label: '执行人',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 230,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
+        userId: localStorage.getItem('userId'),
+
         listQuery: {
-          current: 1,
-          size: 10,
-          processInstanceId: undefined,
           taskName: undefined,
           processInstanceBusinessKey: undefined,
           taskDueAfter: undefined,
@@ -196,51 +176,62 @@
         dialogViewVisible: false
       };
     },
-    created() {
-      this.list();
-      console.log(this.$store.getters);
-    },
+
     methods: {
-      list() {
-        getAction('/flowable/task/listTodo', this.listQuery).then((res) => {
-          const { data } = res;
-          console.log(data);
-          this.records = data.data.records;
-          this.total = data.data.total;
+      async datasource({ page, limit, where }) {
+        const res = await getAction('/flowable/task/listTodo', {
+          ...where,
+          current: page,
+          size: limit
         });
+        const { data } = res.data;
+        return {
+          list: data.records,
+          count: data.total
+        };
+      },
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where });
       },
+      // list() {
+      //   this.$refs.table.reload({ page: 1 });
+
+      // getAction('/flowable/task/listTodo', this.listQuery).then((res) => {
+      //   const { data } = res;
+      //   console.log(data);
+      //   this.records = data.data.records;
+      //   this.total = data.data.total;
+      // });
+      // },
       btnQuery() {
         this.listQuery.current = 1;
-        this.list();
+        this.reload();
       },
       btnReset() {
         this.listQuery = {
-          current: 1,
-          size: 10,
-          processInstanceId: undefined,
           taskName: undefined,
           processInstanceBusinessKey: undefined,
           taskDueAfter: undefined,
           taskDueBefore: undefined
         };
-        this.list();
+        this.reload();
       },
       btnClaim(row) {
         putAction('/flowable/task/claim', { taskId: row.id })
           .then(({ data }) => {
             Message.success('认领' + data.message + '，请编辑执行');
-            this.list();
+            this.reload();
             this.btnExcuteTask(row);
           })
           .catch((response) => {
-            this.list();
+            this.reload();
           });
       },
       btnUnclaim(row) {
         putAction('/flowable/task/unclaim', { taskId: row.id }).then(
           ({ data }) => {
             Message.success(data.message);
-            this.list();
+            this.reload();
           }
         );
       },

src/views/flowable/taskTodo/todo-search.vue

@@ -0,0 +1,103 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="100px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="任务名称:">
+          <el-input clearable v-model="where.taskName" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <el-form-item label="业务主键Key:">
+          <el-input
+            clearable
+            v-model="where.processInstanceBusinessKey"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="到期日开始:">
+          <el-date-picker
+            v-model="where.taskDueAfter"
+            value-format="yyyy-MM-dd"
+            placeholder="到期日开始"
+            type="date"
+            style="width: 200px"
+            class="filter-item"
+          ></el-date-picker>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="到期日开始:">
+          <el-date-picker
+            v-model="where.taskDueBefore"
+            value-format="yyyy-MM-dd"
+            placeholder="到期日结束"
+            type="date"
+            style="width: 200px"
+            class="filter-item"
+          ></el-date-picker>
+        </el-form-item>
+      </el-col>
+      <!-- <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="备注:">
+          <el-input clearable v-model="where.comments" placeholder="请输入" />
+        </el-form-item>
+      </el-col> -->
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 6 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        taskName: undefined,
+        processInstanceBusinessKey: undefined,
+        taskDueAfter: undefined,
+        taskDueBefore: undefined
+      };
+      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>

src/views/system/dictionary/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ele-body">
-    <DictDataSearch @search="reload" />
     <el-card shadow="never">
+      <DictDataSearch @search="reload" />
       <div style="margin: 5px 0; padding-left: 262px">
         <el-button
           size="small"