perf: 代码生成示例 demo01 增加批量删除示例

Author: puhui999

src/api/infra/demo01.js

@@ -26,6 +26,14 @@ export function deleteDemo01Contact(id) {
   })
 }
 
+/** 批量删除示例联系人 */
+export function deleteDemo01ContactList(ids) {
+  return request({
+    url: `/infra/demo01-contact/delete-list?ids=${ids.join(',')}`,
+    method: 'delete'
+  })
+}
+
 // 获得示例联系人
 export function getDemo01Contact(id) {
   return request({

src/main.js

@@ -16,14 +16,15 @@ import './permission' // permission control
 import './tongji' // 百度统计
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/infra/config";
-import { parseTime, resetForm, handleTree, addBeginAndEndTime, divide} from "@/utils/ruoyi";
+import { parseTime, resetForm, handleTree, addBeginAndEndTime, divide } from "@/utils/ruoyi";
+import { isEmpty } from "@/utils";
 import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
 // 代码高亮插件
 // import hljs from 'highlight.js'
 // import 'highlight.js/styles/github-gist.css'
-import {DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2} from "@/utils/dict";
+import { DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2 } from "@/utils/dict";
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -37,6 +38,7 @@ Vue.prototype.DICT_TYPE = DICT_TYPE
 Vue.prototype.handleTree = handleTree
 Vue.prototype.addBeginAndEndTime = addBeginAndEndTime
 Vue.prototype.divide = divide
+Vue.prototype.isEmpty = isEmpty
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
@@ -56,6 +58,7 @@ Vue.use(VueMeta)
 
 // bpmnProcessDesigner 需要引入
 import MyPD from "@/components/bpmnProcessDesigner/package/index.js";
+
 Vue.use(MyPD);
 import "@/components/bpmnProcessDesigner/package/theme/index.scss";
 import "bpmn-js/dist/assets/diagram-js.css";
@@ -65,6 +68,7 @@ import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
 
 // Form Generator 组件需要使用到 tinymce
 import Tinymce from '@/components/tinymce/index.vue'
+
 Vue.component('tinymce', Tinymce)
 import '@/assets/icons'
 import request from "@/utils/request" // 实现 form generator 使用自己定义的 axios request 对象
@@ -74,6 +78,7 @@ import '@/styles/index.scss'
 
 // 默认点击背景不关闭弹窗
 import ElementUI from 'element-ui'
+
 ElementUI.Dialog.props.closeOnClickModal.default = false
 
 /**

src/utils/index.js

@@ -1,4 +1,4 @@
-import { parseTime } from './ruoyi'
+import {parseTime} from './ruoyi'
 
 /**
  * 表格时间格式化
@@ -217,7 +217,7 @@ export function getTime(type) {
 export function debounce(func, wait, immediate) {
   let timeout, args, context, timestamp, result
 
-  const later = function() {
+  const later = function () {
     // 据上一次触发时间间隔
     const last = +new Date() - timestamp
 
@@ -234,7 +234,7 @@ export function debounce(func, wait, immediate) {
     }
   }
 
-  return function(...args) {
+  return function (...args) {
     context = this
     timestamp = +new Date()
     const callNow = immediate && !timeout
@@ -294,9 +294,15 @@ export function deepClone(obj) {
   // RegExp
   if (_toString.call(obj) === '[object RegExp]') {
     const flags = []
-    if (obj.global) { flags.push('g') }
-    if (obj.multiline) { flags.push('m') }
-    if (obj.ignoreCase) { flags.push('i') }
+    if (obj.global) {
+      flags.push('g')
+    }
+    if (obj.multiline) {
+      flags.push('m')
+    }
+    if (obj.ignoreCase) {
+      flags.push('i')
+    }
 
     return new RegExp(obj.source, flags.join(''))
   }
@@ -438,3 +444,38 @@ export function toCamelCase(str, upperCaseFirst) {
 
   return str;
 }
+
+export const is = (val, type) => {
+  return toString.call(val) === `[object ${type}]`
+}
+
+export function isString(val) {
+  return is(val, 'String')
+}
+
+export function isArray(val) {
+  return val && Array.isArray(val)
+}
+
+export function isObject(val) {
+  return val !== null && is(val, 'Object')
+}
+
+export function isEmpty(val) {
+  if (val === null || val === undefined || typeof val === 'undefined') {
+    return true
+  }
+  if (isArray(val) || isString(val)) {
+    return val.length === 0
+  }
+
+  if (val instanceof Map || val instanceof Set) {
+    return val.size === 0
+  }
+
+  if (isObject(val)) {
+    return Object.keys(val).length === 0
+  }
+
+  return false
+}

src/views/infra/demo/demo01/Demo01ContactForm.vue

@@ -8,8 +8,11 @@
         </el-form-item>
         <el-form-item label="性别" prop="sex">
           <el-radio-group v-model="formData.sex">
-            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-                      :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
+                      :key="dict.value" :label="parseInt(dict.value)"
+            >
+              {{dict.label}}
+            </el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="出生年" prop="birthday">

src/views/infra/demo/demo01/index.vue

@@ -7,16 +7,15 @@
       </el-form-item>
       <el-form-item label="性别" prop="sex">
         <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
-          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
                      :key="dict.value" :label="dict.label" :value="dict.value"/>
         </el-select>
       </el-form-item>
-      <el-form-item label="出生年" prop="birthday">
-        <el-date-picker clearable v-model="queryParams.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择出生年" />
-      </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-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>
@@ -28,30 +27,53 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
-                   v-hasPermi="['infra:demo01-contact:create']">新增</el-button>
+                   v-hasPermi="['infra:demo01-contact:create']">新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+                   :loading="exportLoading"
+                   v-hasPermi="['infra:demo01-contact:export']">导出
+        </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['infra:demo01-contact:export']">导出</el-button>
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="isEmpty(checkedIds)"
+          @click="handleDeleteBatch"
+          v-hasPermi="['infra:demo01-contact:delete']"
+        >
+          批量删除
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="名字" align="center" prop="name" />
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      @selection-change="handleRowCheckboxChange"
+    >
+      <el-table-column type="selection" width="55"/>
+      <el-table-column label="编号" align="center" prop="id"/>
+      <el-table-column label="名字" align="center" prop="name"/>
       <el-table-column label="性别" align="center" prop="sex">
         <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.sex" />
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex"/>
         </template>
       </el-table-column>
       <el-table-column label="出生年" align="center" prop="birthday" width="180">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.birthday) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="简介" align="center" prop="description" />
-      <el-table-column label="头像" align="center" prop="avatar" />
+      <el-table-column label="简介" align="center" prop="description"/>
+      <el-table-column label="头像" align="center" prop="avatar"/>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -60,17 +82,19 @@
       <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-edit" @click="openForm(scope.row.id)"
-                     v-hasPermi="['infra:demo01-contact:update']">修改</el-button>
+                     v-hasPermi="['infra:demo01-contact:update']">修改
+          </el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['infra:demo01-contact:delete']">删除</el-button>
+                     v-hasPermi="['infra:demo01-contact:delete']">删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                 @pagination="getList"/>
     <!-- 对话框(添加 / 修改) -->
-    <Demo01ContactForm ref="formRef" @success="getList" />
+    <Demo01ContactForm ref="formRef" @success="getList"/>
   </div>
 </template>
 
@@ -100,15 +124,13 @@ export default {
       refreshTable: true,
       // 选中行
       currentRow: {},
+      checkedIds: [],
       // 查询参数
       queryParams: {
         pageNo: 1,
         pageSize: 10,
         name: null,
         sex: null,
-        birthday: null,
-        description: null,
-        avatar: null,
         createTime: [],
       },
     };
@@ -150,15 +172,29 @@ export default {
         await Demo01ContactApi.deleteDemo01Contact(id);
         await this.getList();
         this.$modal.msgSuccess("删除成功");
-      } catch {}
+      } catch {
+      }
+    },
+    /** 批量删除示例联系人 */
+    async handleDeleteBatch() {
+      await this.$modal.confirm('是否确认删除?')
+      try {
+        await Demo01ContactApi.deleteDemo01ContactList(this.checkedIds);
+        await this.getList();
+        this.$modal.msgSuccess("删除成功");
+      } catch {
+      }
+    },
+    handleRowCheckboxChange(records) {
+      this.checkedIds = records.map((item) => item.id);
     },
     /** 导出按钮操作 */
     async handleExport() {
       await this.$modal.confirm('是否确认导出所有示例联系人数据项?');
       try {
         this.exportLoading = true;
-        const res = await Demo01ContactApi.exportDemo01ContactExcel(this.queryParams);
-        this.$download.excel(res.data, '示例联系人.xls');
+        const data = await Demo01ContactApi.exportDemo01ContactExcel(this.queryParams);
+        this.$download.excel(data, '示例联系人.xls');
       } catch {
       } finally {
         this.exportLoading = false;