search

src/views/user/userLog/components/search.vue

+<template>
+  <div>
+    <el-form class="search-form" :model="form" ref="form" label-width="80px" :inline="true" size="mini">
+      <el-form-item label="操作对象" >
+        <el-select v-model="form.sex" placeholder="请选择操作对象">
+          <el-option v-for="(val, key) in sexOptions"
+            :key="val"
+            :label="val"
+            :value="key">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作内容">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="操作结果">
+        <el-select v-model="form.sex" placeholder="请选择操作结果">
+          <el-option v-for="(val, key) in sexOptions"
+            :key="val"
+            :label="val"
+            :value="key">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="success"  @click="toSearch">查询</el-button>
+        <el-button type="primary"  @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'search',
+  data() {
+    return {
+      sexOptions: [],
+      form: formInit()
+    }
+  },
+  computed: {
+  },
+  methods: {
+    toSearch() {
+      this.$emit('search', this.form)
+    },
+    reset() {
+      this.form = formInit()
+    }
+  }
+}
+
+function formInit() {
+  return {
+    department_id: [],
+    name: '',
+    sex: null,
+  }
+}
+</script>
+<style scoped lang="scss">
+.w200 {
+  width: 200px;
+}
+.search-form {
+  padding: 10px;
+  background-color: #EAF1FE;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
\ No newline at end of file

src/views/user/userLog/index.vue

@@ -5,10 +5,13 @@
       <div style="color: #666666"></div>
       <div class="operate-btn">
         <el-button type="primary" @click="getTableData">刷新</el-button>
-        <el-button type="primary">查询</el-button>
+        <el-button type="primary" @click="isQuery = !isQuery">查询</el-button>
         <el-button type="primary" @click="exportLog">导出</el-button>
       </div>
     </div>
+    <div v-if="isQuery">
+      <search />
+    </div>
     <el-table
       :data="tableData"
       style="width: 100%"
@@ -41,7 +44,7 @@
 </template>
 <script>
 import { exportLog, logList } from '../api'
-
+import search from './components/search.vue'
 export default {
   data() {
     return {
@@ -51,8 +54,12 @@ export default {
       },
       total: 10,
       tableData: [],
+      isQuery: false
     };
   },
+  components: {
+    search
+  },
   computed: {},
   methods: {
     handlePageChange(pageData) {