src/utils/dict.js

@@ -139,3 +139,15 @@ export function getDictDataLabel(dictType, value) {
   const dict = getDictData(dictType, value);
   return dict ? dict.label : '';
 }
+
+// table中用来过滤字典
+export function publicFormatter(dictTable) {
+  const dictDatas = getDictDatas(dictTable)
+  return function (val) {
+    const arr = {}
+    dictDatas.map((item) => {
+      arr[item.value] = item.label
+    })
+    return arr?.[val]
+  }
+}

src/views/system/components/statusBtn2.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <span class="dot" :class="injectData.status === 1 ? 'red' : 'green'"></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn2",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.status === 1 ? "关闭" : "开启";
+    },
+  },
+};
+</script>
+<style scoped>
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.green {
+  background: #10dc76;
+}
+.red {
+  background: #ff5656;
+}
+</style>

src/views/system/components/statusBtn3.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <span
+      class="dot"
+      :class="injectData.resultCode === 0 ? 'green' : 'red'"
+    ></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn3",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.resultCode === 0 ? "成功" : "失败";
+    },
+  },
+};
+</script>
+<style scoped>
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.green {
+  background: #10dc76;
+}
+.red {
+  background: #ff5656;
+}
+</style>

src/views/system/components/statusBtn4.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <span class="dot" :class="injectData.result === 0 ? 'green' : 'red'"></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn3",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.result === 0 ? "成功" : "失败";
+    },
+  },
+};
+</script>
+<style scoped>
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.green {
+  background: #10dc76;
+}
+.red {
+  background: #ff5656;
+}
+</style>

src/views/system/components/statusBtn5.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-switch
+    v-model="status"
+    type="text"
+    size="small"
+    @change="changeHandler"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      status: false,
+    };
+  },
+  mounted() {
+    this.mapToState();
+  },
+  methods: {
+    mapToState() {
+      this.status = this.injectData.status === 0 ? true : false;
+    },
+    changeHandler() {
+      let params = {};
+      params.id = this.injectData.id;
+      params.status = this.status ? "0" : "1";
+      params.username = this.injectData.username;
+      this.$emit("emitData", params);
+    },
+  },
+};
+</script>

src/views/system/loginlog/index.vue

@@ -1,137 +1,26 @@
 <template>
   <div class="app-container">
-    <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    <!-- <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" /> -->
     <!-- 搜索工作栏 -->
-    <el-form
+    <search-bar
-      :model="queryParams"
+      :formConfigs="formConfig"
-      ref="queryForm"
+      ref="searchBarForm"
-      size="small"
+      @headBtnClick="buttonClick"
-      :inline="true"
-      v-show="showSearch"
-      label-width="68px"
-    >
-      <el-form-item label="登录地址" prop="userIp">
-        <el-input
-          v-model="queryParams.userIp"
-          placeholder="请输入登录地址"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
     />
-      </el-form-item>
-      <el-form-item label="用户名称" prop="username">
-        <el-input
-          v-model="queryParams.username"
-          placeholder="请输入用户名称"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="结果"
-          clearable
-          style="width: 240px"
-        >
-          <el-option :key="true" label="成功" :value="true" />
-          <el-option :key="false" label="失败" :value="false" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="登录时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          style="width: 240px"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <!-- 列表 -->
-      <el-col :span="1.5">
+    <base-table
-        <el-button
+      :page="queryParams.pageNo"
-          type="warning"
+      :limit="queryParams.pageSize"
-          icon="el-icon-download"
+      :table-props="tableProps"
-          size="mini"
+      :table-data="list"
-          @click="handleExport"
+      :max-height="tableH"
-          :loading="exportLoading"
-          v-hasPermi="['system:login-log:export']"
-          >导出</el-button
-        >
-      </el-col>
-      <right-toolbar
-        :showSearch.sync="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="访问编号" align="center" prop="id" />
-      <el-table-column
-        label="日志类型"
-        align="center"
-        prop="logType"
-        width="120"
-      >
-        <template v-slot="scope">
-          <dict-tag
-            :type="DICT_TYPE.SYSTEM_LOGIN_TYPE"
-            :value="scope.row.logType"
     />
-        </template>
-      </el-table-column>
-      <el-table-column label="用户名称" align="center" prop="username" />
-      <el-table-column
-        label="登录地址"
-        align="center"
-        prop="userIp"
-        width="130"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        label="userAgent"
-        align="center"
-        prop="userAgent"
-        width="400"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column label="结果" align="center" prop="status">
-        <template v-slot="scope">
-          <dict-tag
-            :type="DICT_TYPE.SYSTEM_LOGIN_RESULT"
-            :value="scope.row.result"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="登录日期"
-        align="center"
-        prop="loginTime"
-        width="180"
-      >
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
 
     <pagination
-      v-show="total > 0"
-      :total="total"
       :page.sync="queryParams.pageNo"
       :limit.sync="queryParams.pageSize"
+      :total="total"
       @pagination="getList"
     />
   </div>
@@ -139,17 +28,117 @@
 
 <script>
 import { list, exportLoginLog } from "@/api/system/loginlog";
-
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+import { parseTime } from "@/utils/ruoyi";
+import { DICT_TYPE, publicFormatter } from "@/utils/dict";
+import statusBtn4 from "./../components/statusBtn4.vue";
+const tableProps = [
+  {
+    prop: "id",
+    label: "访问编号",
+  },
+  {
+    prop: "logType",
+    label: "日志类型",
+    filter: publicFormatter(DICT_TYPE.SYSTEM_LOGIN_TYPE),
+  },
+  {
+    prop: "username",
+    label: "用户名称",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "userIp",
+    label: "登录地址",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "userAgent",
+    label: "userAgent",
+    minWidth: 300,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "result",
+    label: "结果",
+    minWidth: 80,
+    // filter: publicFormatter(DICT_TYPE.SYSTEM_LOGIN_RESULT),
+    subcomponent: statusBtn4,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "createTime",
+    label: "登录日期",
+    minWidth: 150,
+    filter: parseTime,
+    showOverflowtooltip: true,
+  },
+];
 export default {
   name: "SystemLoginLog",
+  mixins: [tableHeightMixin],
   data() {
     return {
-      // 遮罩层
+      formConfig: [
-      loading: true,
+        {
+          type: "input",
+          label: "登录地址",
+          placeholder: "登录地址",
+          param: "userIp",
+        },
+        {
+          type: "input",
+          label: "用户名称",
+          placeholder: "用户名称",
+          param: "username",
+        },
+        {
+          type: "select",
+          label: "状态",
+          selectOptions: [
+            { id: true, name: "成功" },
+            { id: false, name: "失败" },
+          ],
+          param: "status",
+        },
+        {
+          type: "datePicker",
+          label: "登录时间",
+          dateType: "daterange",
+          format: "yyyy-MM-dd",
+          valueFormat: "yyyy-MM-dd HH:mm:ss",
+          rangeSeparator: "-",
+          startPlaceholder: "开始日期",
+          endPlaceholder: "结束日期",
+          param: "createTime",
+          defaultSelect: [],
+          defaultTime: ["00:00:00", "23:59:59"],
+          width: 250,
+        },
+        {
+          type: "button",
+          btnName: "查询",
+          name: "search",
+          color: "primary",
+        },
+        {
+          type: this.$auth.hasPermi("system:login-log:export")
+            ? "separate"
+            : "",
+        },
+        {
+          type: this.$auth.hasPermi("system:login-log:export") ? "button" : "",
+          btnName: "导出",
+          name: "export",
+          color: "primary",
+          plain: true,
+        },
+      ],
+      tableProps,
       // 导出遮罩层
       exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
       // 总条数
       total: 0,
       // 表格数据
@@ -157,7 +146,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
+        pageSize: 20,
         userIp: undefined,
         username: undefined,
         status: undefined,
@@ -171,22 +160,22 @@ export default {
   methods: {
     /** 查询登录日志列表 */
     getList() {
-      this.loading = true;
       list(this.queryParams).then((response) => {
         this.list = response.data.list;
         this.total = response.data.total;
-        this.loading = false;
       });
     },
-    /** 搜索按钮操作 */
+    buttonClick(val) {
-    handleQuery() {
+      this.queryParams.userIp = val.userIp;
+      this.queryParams.username = val.username;
+      this.queryParams.status = val.status;
+      this.queryParams.createTime = val.createTime;
+      if (val.btnName === "search") {
         this.queryParams.pageNo = 1;
         this.getList();
-    },
+      } else {
-    /** 重置按钮操作 */
+        this.handleExport();
-    resetQuery() {
+      }
-      this.resetForm("queryForm");
-      this.handleQuery();
     },
     /** 导出按钮操作 */
     handleExport() {

src/views/system/menu/index.vue

@@ -1,49 +1,39 @@
 <template>
   <div class="app-container">
-    <doc-alert
+    <!-- <doc-alert
       title="功能权限"
       url="https://doc.iocoder.cn/resource-permission"
     />
-    <doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/" />
+    <doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/" /> -->
     <!-- 搜索工作栏 -->
-    <el-form
+    <search-bar
-      :model="queryParams"
+      :formConfigs="formConfig"
-      ref="queryForm"
+      ref="searchBarForm"
-      size="small"
+      @headBtnClick="buttonClick"
-      :inline="true"
-      v-show="showSearch"
-    >
-      <el-form-item label="菜单名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入菜单名称"
-          clearable
-          @keyup.enter.native="handleQuery"
     />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="菜单状态"
-          clearable
-        >
-          <el-option
-            v-for="dict in statusDictDatas"
-            :key="parseInt(dict.value)"
-            :label="dict.label"
-            :value="parseInt(dict.value)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <!-- 列表 -->
+    <base-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :table-props="tableProps"
+      :table-data="menuList"
+      :row-key="'id'"
+      :default-expand-all="isExpandAll"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="120"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+
+    <!-- <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -69,9 +59,9 @@
         :showSearch.sync="showSearch"
         @queryTable="getList"
       ></right-toolbar>
-    </el-row>
+    </el-row> -->
 
-    <el-table
+    <!-- <el-table
       v-if="refreshTable"
       v-loading="loading"
       :data="menuList"
@@ -143,10 +133,10 @@
           >
         </template>
       </el-table-column>
-    </el-table>
+    </el-table> -->
 
     <!-- 添加或修改菜单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+    <base-dialog :dialogTitle="title" :dialogVisible="open" width="50%">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="24">
@@ -173,7 +163,7 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col :span="24">
+          <!-- <el-col :span="24">
             <el-form-item v-if="form.type !== 3" label="菜单图标">
               <el-popover
                 placement="bottom-start"
@@ -203,7 +193,7 @@
                 </el-input>
               </el-popover>
             </el-form-item>
-          </el-col>
+          </el-col> -->
           <el-col :span="12">
             <el-form-item label="菜单名称" prop="name">
               <el-input v-model="form.name" placeholder="请输入菜单名称" />
@@ -344,7 +334,7 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </base-dialog>
   </div>
 </template>
 
@@ -361,14 +351,113 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import IconSelect from "@/components/IconSelect";
 
 import { SystemMenuTypeEnum, CommonStatusEnum } from "@/utils/constants";
-import { getDictDatas, DICT_TYPE } from "@/utils/dict";
+import { getDictDatas, DICT_TYPE, publicFormatter } from "@/utils/dict";
 import { isExternal } from "@/utils/validate";
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+import statusBtn2 from "./../components/statusBtn2.vue";
+const tableProps = [
+  {
+    prop: "name",
+    label: "菜单名称",
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "sort",
+    label: "排序",
+    width: 100,
+  },
+  {
+    prop: "permission",
+    label: "权限标识",
+    minWidth: 80,
+  },
+  {
+    prop: "component",
+    label: "组件路径",
+    minWidth: 80,
+  },
+  {
+    prop: "componentName",
+    label: "组件名称",
+    minWidth: 80,
+  },
+  {
+    prop: "status",
+    label: "状态",
+    // filter: publicFormatter(DICT_TYPE.COMMON_STATUS),
+    subcomponent: statusBtn2,
+    width: 100,
+  },
+];
 
 export default {
   name: "SystemMenu",
+  mixins: [tableHeightMixin],
   components: { Treeselect, IconSelect },
   data() {
     return {
+      formConfig: [
+        {
+          type: "input",
+          label: "菜单名称",
+          placeholder: "菜单名称",
+          param: "name",
+        },
+        {
+          type: "select",
+          label: "菜单状态",
+          selectOptions: this.getDictDatas(this.DICT_TYPE.COMMON_STATUS),
+          labelField: "label",
+          valueField: "value",
+          param: "status",
+        },
+        {
+          type: "button",
+          btnName: "查询",
+          name: "search",
+          color: "primary",
+        },
+        {
+          type: "separate",
+        },
+        {
+          type: this.$auth.hasPermi("system:menu:create") ? "button" : "",
+          btnName: "新增",
+          name: "addNew",
+          color: "success",
+          plain: true,
+        },
+        {
+          type: "button",
+          btnName: "展开/折叠",
+          name: "expandAll",
+          color: "primary",
+          plain: true,
+        },
+      ],
+      tableBtn: [
+        this.$auth.hasPermi("system:menu:update")
+          ? {
+              type: "edit",
+              btnName: "编辑",
+            }
+          : undefined,
+        this.$auth.hasPermi("system:menu:delete")
+          ? {
+              type: "delete",
+              btnName: "删除",
+            }
+          : undefined,
+        this.$auth.hasPermi("system:menu:create")
+          ? {
+              type: "add",
+              btnName: "新增",
+            }
+          : undefined,
+      ].filter((v) => v),
+      tableProps,
+      heightNum: 210,
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -388,7 +477,7 @@ export default {
       // 查询参数
       queryParams: {
         name: undefined,
-        visible: undefined,
+        status: undefined,
       },
       // 表单参数
       form: {},
@@ -418,6 +507,27 @@ export default {
     this.getList();
   },
   methods: {
+    handleClick(val) {
+      console.log(val);
+      if (val.type === "edit") {
+        this.handleUpdate(val.data);
+      } else if (val.type === "delete") {
+        this.handleDelete(val.data);
+      } else {
+        this.handleAdd(val.data);
+      }
+    },
+    buttonClick(val) {
+      this.queryParams.name = val.name;
+      this.queryParams.status = val.status;
+      if (val.btnName === "search") {
+        this.getList();
+      } else if (val.btnName === "addNew") {
+        this.handleAdd();
+      } else {
+        this.toggleExpandAll();
+      }
+    },
     // 选择图标
     selected(name) {
       this.form.icon = name;
@@ -471,15 +581,6 @@ export default {
       };
       this.resetForm("form");
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
     /** 展开/折叠操作 */
     toggleExpandAll() {
       this.refreshTable = false;

src/views/system/operatelog/index.vue

@@ -7,96 +7,6 @@
       ref="searchBarForm"
       @headBtnClick="buttonClick"
     />
-    <!-- <el-form
-      :model="queryParams"
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="68px"
-    >
-      <el-form-item label="系统模块" prop="module">
-        <el-input
-          v-model="queryParams.module"
-          placeholder="请输入系统模块"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="操作人员" prop="userNickname">
-        <el-input
-          v-model="queryParams.userNickname"
-          placeholder="请输入操作人员"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="类型" prop="type">
-        <el-select
-          v-model="queryParams.type"
-          placeholder="操作类型"
-          clearable
-          style="width: 240px"
-        >
-          <el-option
-            v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
-            :key="parseInt(dict.value)"
-            :label="dict.label"
-            :value="parseInt(dict.value)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.success"
-          placeholder="操作状态"
-          clearable
-          style="width: 240px"
-        >
-          <el-option :key="true" label="成功" :value="true" />
-          <el-option :key="false" label="失败" :value="false" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="操作时间" prop="startTime">
-        <el-date-picker
-          v-model="queryParams.startTime"
-          style="width: 240px"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form> -->
-
-    <!-- <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['system:operate-log:export']"
-          >导出</el-button
-        >
-      </el-col>
-      <right-toolbar
-        :showSearch.sync="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
-    </el-row> -->
-
     <!-- 列表 -->
     <base-table
       :page="queryParams.pageNo"
@@ -108,62 +18,12 @@
       <method-btn
         v-if="tableBtn.length"
         slot="handleBtn"
-        :width="230"
+        :width="80"
         label="操作"
         :method-list="tableBtn"
         @clickBtn="handleClick"
       />
     </base-table>
-    <!-- <el-table v-loading="loading" :data="list">
-      <el-table-column label="日志编号" align="center" prop="id" />
-      <el-table-column label="操作模块" align="center" prop="module" />
-      <el-table-column label="操作名" align="center" prop="name" width="180" />
-      <el-table-column label="操作类型" align="center" prop="type">
-        <template v-slot="scope">
-          <dict-tag
-            :type="DICT_TYPE.SYSTEM_OPERATE_TYPE"
-            :value="scope.row.type"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作人" align="center" prop="userNickname" />
-      <el-table-column label="操作结果" align="center" prop="status">
-        <template v-slot="scope">
-          <span>{{ scope.row.resultCode === 0 ? "成功" : "失败" }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="操作日期"
-        align="center"
-        prop="startTime"
-        width="180"
-      >
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.startTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="执行时长" align="center" prop="startTime">
-        <template v-slot="scope">
-          <span>{{ scope.row.duration }} ms</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
-        <template v-slot="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handleView(scope.row, scope.index)"
-            v-hasPermi="['system:operate-log:query']"
-            >详细</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table> -->
 
     <pagination
       :page.sync="queryParams.pageNo"
@@ -173,11 +33,11 @@
     />
 
     <!-- 操作日志详细 -->
-    <el-dialog
+    <base-dialog
-      title="访问日志详细"
+      dialogTitle="访问日志详细"
-      :visible.sync="open"
+      :dialogVisible="open"
-      width="700px"
+      width="50%"
-      append-to-body
+      @close="open = false"
     >
       <el-form ref="form" :model="form" label-width="100px" size="mini">
         <el-row>
@@ -238,36 +98,46 @@
       <div slot="footer" class="dialog-footer">
         <el-button @click="open = false">关 闭</el-button>
       </div>
-    </el-dialog>
+    </base-dialog>
   </div>
 </template>
 
 <script>
 import { listOperateLog, exportOperateLog } from "@/api/system/operatelog";
 import tableHeightMixin from "@/mixins/tableHeightMixin";
+import statusBtn3 from "./../components/statusBtn3.vue";
 const tableProps = [
   {
-    prop: "code",
+    prop: "id",
-    label: "角色编码",
+    label: "日志编号",
-    minWidth: 140,
+  },
+  {
+    prop: "module",
+    label: "操作模块",
+    minWidth: 150,
     showOverflowtooltip: true,
   },
   {
     prop: "name",
-    label: "角色名称",
+    label: "操作名",
-    minWidth: 140,
+    minWidth: 200,
     showOverflowtooltip: true,
   },
-  // {
-  //   prop: "status",
-  //   label: "状态",
-  //   minWidth: 100,
-  //   subcomponent: statusBtn,
-  // },
   {
-    prop: "remark",
+    prop: "userNickname",
-    label: "角色描述",
+    label: "操作人",
-    minWidth: 140,
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "resultCode",
+    label: "操作结果",
+    subcomponent: statusBtn3,
+  },
+  {
+    prop: "duration",
+    label: "执行时长",
+    minWidth: 80,
     showOverflowtooltip: true,
   },
 ];
@@ -327,10 +197,14 @@ export default {
           color: "primary",
         },
         {
-          type: "separate",
+          type: this.$auth.hasPermi("system:operate-log:export")
+            ? "separate"
+            : "",
         },
         {
-          type: "button",
+          type: this.$auth.hasPermi("system:operate-log:export")
+            ? "button"
+            : "",
           btnName: "导出",
           name: "export",
           color: "primary",
@@ -338,8 +212,6 @@ export default {
         },
       ],
       tableProps,
-      // 遮罩层
-      loading: true,
       // 导出遮罩层
       exportLoading: false,
       // 显示搜索条件
@@ -378,11 +250,9 @@ export default {
   methods: {
     /** 查询登录日志 */
     getList() {
-      this.loading = true;
       listOperateLog(this.queryParams).then((response) => {
         this.list = response.data.list;
         this.total = response.data.total;
-        this.loading = false;
       });
     },
     /** 搜索按钮操作 */
@@ -390,11 +260,6 @@ export default {
       this.queryParams.pageNo = 1;
       this.getList();
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
     /** 详细按钮操作 */
     handleView(row) {
       this.open = true;
@@ -419,12 +284,13 @@ export default {
         .catch(() => {});
     },
     buttonClick(val) {
-      if (val.btnName === "search") {
       this.queryParams.module = val.module;
       this.queryParams.userNickname = val.userNickname;
       this.queryParams.type = val.type;
       this.queryParams.success = val.success;
       this.queryParams.startTime = val.startTime;
+      if (val.btnName === "search") {
+        this.queryParams.pageNo = 1;
         this.getList();
       } else {
         this.handleExport();

src/views/system/role/index.vue

@@ -124,10 +124,10 @@ export default {
           color: "primary",
         },
         {
-          type: "separate",
+          type: this.$auth.hasPermi("system:role:create") ? "separate" : "",
         },
         {
-          type: "button",
+          type: this.$auth.hasPermi("system:role:create") ? "button" : "",
           btnName: "新增",
           name: "add",
           color: "success",
@@ -142,25 +142,32 @@ export default {
       tableProps,
       list: [],
       tableBtn: [
-        {
+        this.$auth.hasPermi("system:permission:assign-role-menu")
+          ? {
               type: "menuAuth",
               btnName: "菜单权限",
-          // showTip: "新增工单",
+            }
-        },
+          : undefined,
-        {
+        this.$auth.hasPermi("system:permission:assign-role-data-scope")
+          ? {
               type: "dataAuth",
               btnName: "数据权限",
               // showTip: "新增工单",
-        },
+            }
-        {
+          : undefined,
+        this.$auth.hasPermi("system:role:update")
+          ? {
               type: "edit",
               btnName: "编辑",
-        },
+            }
-        {
+          : undefined,
+        this.$auth.hasPermi("system:role:delete")
+          ? {
               type: "delete",
               btnName: "删除",
-        },
+            }
-      ],
+          : undefined,
+      ].filter((v) => v),
       addOrEditTitle: "",
       centervisible: false,
       // 菜单权限

src/views/system/user/index.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="app-container">
-    <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
+    <!-- <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
     <doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
     <doc-alert
       title="Excel 导入导出"
       url="https://doc.iocoder.cn/excel-import-and-export/"
-    />
+    /> -->
     <!-- 搜索工作栏 -->
+
     <el-row :gutter="20">
       <!--部门数据-->
       <el-col :span="4" :xs="24">
@@ -35,7 +36,12 @@
       </el-col>
       <!--用户数据-->
       <el-col :span="20" :xs="24">
-        <el-form
+        <search-bar
+          :formConfigs="formConfig"
+          ref="searchBarForm"
+          @headBtnClick="buttonClick"
+        />
+        <!-- <el-form
           :model="queryParams"
           ref="queryForm"
           size="small"
@@ -96,9 +102,9 @@
               >重置</el-button
             >
           </el-form-item>
-        </el-form>
+        </el-form> -->
 
-        <el-row :gutter="10" class="mb8">
+        <!-- <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
             <el-button
               type="primary"
@@ -136,9 +142,27 @@
             @queryTable="getList"
             :columns="columns"
           ></right-toolbar>
-        </el-row>
+        </el-row> -->
 
-        <el-table v-loading="loading" :data="userList">
+        <!-- 列表 -->
+        <base-table
+          :page="queryParams.pageNo"
+          :limit="queryParams.pageSize"
+          :table-props="tableProps"
+          :table-data="userList"
+          :max-height="tableH"
+          @emitFun="handleStatusChange"
+        >
+          <method-btn
+            v-if="tableBtn.length"
+            slot="handleBtn"
+            :width="220"
+            label="操作"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+        <!-- <el-table v-loading="loading" :data="userList">
           <el-table-column
             label="用户编号"
             align="center"
@@ -262,20 +286,19 @@
               </el-dropdown>
             </template>
           </el-table-column>
-        </el-table>
+        </el-table> -->
 
         <pagination
-          v-show="total > 0"
-          :total="total"
           :page.sync="queryParams.pageNo"
           :limit.sync="queryParams.pageSize"
+          :total="total"
           @pagination="getList"
         />
       </el-col>
     </el-row>
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+    <base-dialog :dialogTitle="title" :dialogVisible="open" width="50%">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="12">
@@ -344,7 +367,11 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="用户性别">
-              <el-select v-model="form.sex" placeholder="请选择">
+              <el-select
+                v-model="form.sex"
+                placeholder="请选择"
+                style="width: 100%"
+              >
                 <el-option
                   v-for="dict in sexDictDatas"
                   :key="parseInt(dict.value)"
@@ -356,7 +383,12 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="岗位">
-              <el-select v-model="form.postIds" multiple placeholder="请选择">
+              <el-select
+                v-model="form.postIds"
+                multiple
+                placeholder="请选择"
+                style="width: 100%"
+              >
                 <el-option
                   v-for="item in postOptions"
                   :key="item.id"
@@ -383,14 +415,13 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </base-dialog>
 
     <!-- 用户导入对话框 -->
-    <el-dialog
+    <base-dialog
-      :title="upload.title"
+      :dialogTitle="upload.title"
-      :visible.sync="upload.open"
+      :dialogVisible="upload.open"
       width="400px"
-      append-to-body
     >
       <el-upload
         ref="upload"
@@ -425,15 +456,10 @@
         <el-button type="primary" @click="submitFileForm">确 定</el-button>
         <el-button @click="upload.open = false">取 消</el-button>
       </div>
-    </el-dialog>
+    </base-dialog>
 
     <!-- 分配角色 -->
-    <el-dialog
+    <base-dialog dialogTitle="分配角色" :dialogVisible="openRole" width="500px">
-      title="分配角色"
-      :visible.sync="openRole"
-      width="500px"
-      append-to-body
-    >
       <el-form :model="form" label-width="80px">
         <el-form-item label="用户名称">
           <el-input v-model="form.username" :disabled="true" />
@@ -456,7 +482,7 @@
         <el-button type="primary" @click="submitRole">确 定</el-button>
         <el-button @click="cancelRole">取 消</el-button>
       </div>
-    </el-dialog>
+    </base-dialog>
   </div>
 </template>
 
@@ -483,12 +509,161 @@ import { DICT_TYPE, getDictDatas } from "@/utils/dict";
 import { assignUserRole, listUserRoles } from "@/api/system/permission";
 import { listSimpleRoles } from "@/api/system/role";
 import { getBaseHeader } from "@/utils/request";
-
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+import { parseTime } from "@/utils/ruoyi";
+import statusBtn5 from "./../components/statusBtn5.vue";
+const tableProps = [
+  {
+    prop: "id",
+    label: "用户编号",
+  },
+  {
+    prop: "username",
+    label: "用户名称",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "nickname",
+    label: "用户昵称",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "deptName",
+    label: "部门",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mobile",
+    label: "手机号码",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "status",
+    label: "状态",
+    minWidth: 80,
+    // filter: publicFormatter(DICT_TYPE.SYSTEM_OPERATE_TYPE),
+    subcomponent: statusBtn5,
+  },
+  {
+    prop: "createTime",
+    label: "创建时间",
+    filter: parseTime,
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
 export default {
   name: "SystemUser",
+  mixins: [tableHeightMixin],
   components: { Treeselect },
   data() {
     return {
+      formConfig: [
+        {
+          type: "input",
+          label: "用户名称",
+          placeholder: "用户名称",
+          param: "username",
+          width: 150,
+        },
+        {
+          type: "input",
+          label: "手机号码",
+          placeholder: "手机号码",
+          param: "mobile",
+          width: 150,
+        },
+        {
+          type: "select",
+          label: "状态",
+          selectOptions: this.getDictDatas(this.DICT_TYPE.COMMON_STATUS),
+          labelField: "label",
+          valueField: "value",
+          param: "status",
+          width: 100,
+        },
+        {
+          type: "datePicker",
+          label: "创建时间",
+          dateType: "daterange",
+          format: "yyyy-MM-dd",
+          valueFormat: "yyyy-MM-dd HH:mm:ss",
+          rangeSeparator: "-",
+          startPlaceholder: "开始日期",
+          endPlaceholder: "结束日期",
+          param: "createTime",
+          defaultSelect: [],
+          defaultTime: ["00:00:00", "23:59:59"],
+          width: 250,
+        },
+        {
+          type: "button",
+          btnName: "查询",
+          name: "search",
+          color: "primary",
+        },
+        {
+          type: this.$auth.hasPermiOr([
+            "system:user:create",
+            "system:user:import",
+            "system:user:export",
+          ])
+            ? "separate"
+            : "",
+        },
+        {
+          type: this.$auth.hasPermi("system:user:create") ? "button" : "",
+          btnName: "新增",
+          name: "addNew",
+          color: "success",
+          plain: true,
+        },
+        {
+          type: this.$auth.hasPermi("system:user:import") ? "button" : "",
+          btnName: "导入",
+          name: "import",
+          color: "warning",
+          plain: true,
+        },
+        {
+          type: this.$auth.hasPermi("system:user:export") ? "button" : "",
+          btnName: "导出",
+          name: "export",
+          color: "primary",
+          plain: true,
+        },
+      ],
+      tableBtn: [
+        this.$auth.hasPermi("system:user:update")
+          ? {
+              type: "edit",
+              btnName: "修改",
+            }
+          : undefined,
+        this.$auth.hasPermi("system:user:delete")
+          ? {
+              type: "delete",
+              btnName: "删除",
+            }
+          : undefined,
+        this.$auth.hasPermi("system:user:update-password")
+          ? {
+              type: "reset",
+              btnName: "重置密码",
+            }
+          : undefined,
+        this.$auth.hasPermi("system:permission:assign-user-role")
+          ? {
+              type: "role",
+              btnName: "分配角色",
+            }
+          : undefined,
+      ].filter((v) => v),
+      tableProps,
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -498,7 +673,7 @@ export default {
       // 总条数
       total: 0,
       // 用户表格数据
-      userList: null,
+      userList: [],
       // 弹出层标题
       title: "",
       // 部门树选项
@@ -607,6 +782,37 @@ export default {
     // });
   },
   methods: {
+    handleClick(val) {
+      switch (val.type) {
+        case "edit":
+          this.handleUpdate(val.data);
+          break;
+        case "delete":
+          this.handleDelete(val.data);
+          break;
+        case "reset":
+          this.handleResetPwd(val.data);
+          break;
+        default:
+          this.handleRole(val.data);
+      }
+    },
+    buttonClick(val) {
+      console.log(val);
+      switch (val.btnName) {
+        case "search":
+          this.handleQuery();
+          break;
+        case "addNew":
+          this.handleAdd();
+          break;
+        case "import":
+          this.handleImport();
+          break;
+        default:
+          this.handleExport();
+      }
+    },
     // 更多操作
     handleCommand(command, index, row) {
       switch (command) {
@@ -660,20 +866,8 @@ export default {
     },
     // 用户状态修改
     handleStatusChange(row) {
-      let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
+      changeUserStatus(row.id, row.status).then((res) => {
-      this.$modal
+        this.$modal.msgSuccess("操作成功");
-        .confirm('确认要"' + text + '""' + row.username + '"用户吗?')
-        .then(function () {
-          return changeUserStatus(row.id, row.status);
-        })
-        .then(() => {
-          this.$modal.msgSuccess(text + "成功");
-        })
-        .catch(function () {
-          row.status =
-            row.status === CommonStatusEnum.ENABLE
-              ? CommonStatusEnum.DISABLE
-              : CommonStatusEnum.ENABLE;
       });
     },
     // 取消按钮
@@ -709,11 +903,6 @@ export default {
       this.queryParams.pageNo = 1;
       this.getList();
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();