Merge remote-tracking branch 'origin/test' into lb

Reviewed-on: #8

src/api/base/groupClasses.js

@@ -43,6 +43,14 @@ export function getGroupClassesPage(query) {
   })
 }
 
+// 获取班组code
+export function getCode() {
+  return request({
+    url: '/base/group-classes/getCode',
+    method: 'get'
+  })
+}
+
 // 导出班次基础信息 Excel
 export function exportGroupClassesExcel(query) {
   return request({

src/api/base/groupTeam.js

@@ -43,12 +43,10 @@ export function getGroupTeamPage(query) {
   })
 }
 
-// 导出班组基础信息 Excel
-export function exportGroupTeamExcel(query) {
+// 获取班组code
+export function getCode() {
   return request({
-    url: '/base/group-team/export-excel',
-    method: 'get',
-    params: query,
-    responseType: 'blob'
+    url: '/base/group-team/getCode',
+    method: 'get'
   })
 }

src/assets/styles/index.scss

@@ -121,7 +121,7 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 16px;
 }
 
 .components-container {
@@ -129,10 +129,6 @@ aside {
   position: relative;
 }
 
-.pagination-container {
-  margin-top: 30px;
-}
-
 .text-center {
   text-align: center
 }

src/assets/styles/ruoyi.scss

@@ -112,13 +112,13 @@
 }
 
 /** 表格布局 **/
-.pagination-container {
-  position: relative;
-  height: 25px;
-  margin-bottom: 10px;
-  margin-top: 15px;
-  padding: 10px 20px !important;
-}
+// .pagination-container {
+//   position: relative;
+//   height: 25px;
+//   margin-bottom: 10px;
+//   margin-top: 15px;
+//   padding: 10px 20px !important;
+// }
 
 /* tree border */
 .tree-border {

src/assets/styles/sidebar.scss

@@ -105,6 +105,10 @@
         background-color: $base-sub-menu-hover !important;
       }
     }
+    
+    & .theme-dark .el-submenu .el-menu-item.is-active {
+      background-color: #0b50ff !important;
+    }
   }
 
   .hideSidebar {

src/assets/styles/variables.scss

@@ -9,20 +9,20 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
-$base-logo-title-color: #ffffff;
+// $base-menu-color:#bfcbd9;
+// $base-menu-color-active:#f4f4f5;
+// $base-menu-background:#304156;
+// $base-logo-title-color: #ffffff;
 
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
+// $base-menu-light-color:rgba(0,0,0,.70);
+// $base-menu-light-background:#ffffff;
+// $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
+// $base-sub-menu-background:#1f2d3d;
+// $base-sub-menu-hover:#001528;
 
 // 自定义暗色菜单风格
-/**
+/*
 $base-menu-color:hsla(0,0%,100%,.65);
 $base-menu-color-active:#fff;
 $base-menu-background:#001529;
@@ -35,8 +35,20 @@ $base-logo-light-title-color: #001529;
 $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
+$base-menu-color: #fff;
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
 
-$base-sidebar-width: 280px;
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#0B253F;
+$base-sub-menu-hover:#0b50ff;
+
+
+$base-sidebar-width: 248px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/components/Breadcrumb/index.vue

@@ -68,8 +68,12 @@ export default {
   margin-left: 8px;
 
   .no-redirect {
-    color: #97a8be;
+    color: rgba(0, 0, 0, 0.65);
     cursor: text;
   }
 }
+
+.app-breadcrumb .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
+  color: rgba(0, 0, 0, 0.45);
+}
 </style>

src/layout/components/AppMain.vue

@@ -28,11 +28,14 @@ export default {
 
 <style lang="scss" scoped>
 .app-main {
-  /* 50= navbar  50  */
+  /* 48= navbar  48  */
   min-height: calc(100vh - 56px);
-  width: 100%;
+  min-width: calc(100vh - 280px);
   position: relative;
   overflow: hidden;
+  margin: 8px 14px 0px 16px;
+  border-radius: 8px;
+  background-color: #fff;
 }
 
 .fixed-header + .app-main {
@@ -41,8 +44,8 @@ export default {
 
 .hasTagsView {
   .app-main {
-    /* 84 = navbar + tags-view = 56 + 34 */
-    min-height: calc(100vh - 128px);
+    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - 120px - 8px);
   }
 
   .fixed-header + .app-main {

src/layout/components/Navbar.vue

@@ -7,16 +7,16 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
+        <!-- <search id="header-search" class="right-menu-item" /> -->
 
         <!-- 站内信 -->
         <!-- <notify-message class="right-menu-item hover-effect" /> -->
 
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+        <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
       </template>
 
@@ -30,9 +30,9 @@
           <router-link to="/user/profile">
             <el-dropdown-item>个人中心</el-dropdown-item>
           </router-link>
-          <el-dropdown-item @click.native="setting = true">
+          <!-- <el-dropdown-item @click.native="setting = true">
             <span>布局设置</span>
-          </el-dropdown-item>
+          </el-dropdown-item> -->
           <el-dropdown-item divided @click.native="logout">
             <span>退出登录</span>
           </el-dropdown-item>
@@ -104,7 +104,7 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 56px;
+  height: 48px; // 56
   overflow: hidden;
   position: relative;
   background: #fff;

src/layout/components/Sidebar/index.vue

@@ -23,7 +23,7 @@
 						: variables.menuLightColor
 				"
 				:unique-opened="true"
-				:active-text-color="settings.theme"
+				active-text-color="#fff"
 				:collapse-transition="false"
 				mode="vertical">
 				<!-- 根据 sidebarRouters 路由，生成菜单 -->

src/layout/components/TagsView/ScrollPane.vue

@@ -78,8 +78,8 @@ export default {
 
 <style lang="scss" scoped>
 .scroll-container {
-  background: #f9f9f9;
-  box-shadow: inset 0 0 8px 1px #e8e8e8;
+  // background: #f9f9f9;
+  // box-shadow: inset 0 0 8px 1px #e8e8e8;
   white-space: nowrap;
   position: relative;
   overflow: hidden;

src/layout/components/TagsView/index.vue

@@ -259,7 +259,7 @@ export default {
 	height: 42px;
 	width: 100%;
 	background: #fff;
-	border-bottom: 1px solid #d8dce5;
+	// border-bottom: 1px solid #d8dce5;
 	border-top: 1px solid #d8dce5;
 
 	// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
@@ -270,17 +270,16 @@ export default {
 			cursor: pointer;
 			height: 28px;
 			line-height: 28px;
-			border: 1px solid #d8dce5;
-			color: #495060;
-			background: #fff;
+			color: rgba(0, 0, 0, 0.45);
+			background: #F4F4F4FF;
 			padding: 0 8px 0 12px;
 			font-size: 14px;
 			letter-spacing: 1px;
-			margin-left: 4px;
-			border-radius: 0;
+			margin-left: 8px;
+			border-radius: 4px;
 
 			&:first-of-type {
-				margin-left: 15px;
+				margin-left: 32px;
 				padding-right: 12px;
 			}
 

src/layout/index.vue

@@ -8,7 +8,7 @@
         <tags-view v-if="needTagsView" />
       </div>
       <app-main />
-      <div class="main-footer" style="color: #777; border-top: 1px solid #eee; user-select: none; font-size: 14px; letter-spacing: 1px; height: 30px; display: grid; place-content: center;">&copy; 中建材智能自动化院 2023</div>
+      <div class="main-footer" style="color: #C7C7C7; user-select: none; font-size: 14px; letter-spacing: 1px; height: 30px; display: grid; place-content: center;">&copy; 中建材智能自动化研究院有限公司</div>
       <right-panel>
         <settings />
       </right-panel>

src/main.js

@@ -49,6 +49,9 @@ Vue.prototype.DICT_TYPE = DICT_TYPE;
 Vue.prototype.handleTree = handleTree;
 Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;
 Vue.prototype.divide = divide;
+Vue.prototype.tableHeight = function(n) {
+	return window.innerHeight - n
+}
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag);
@@ -82,7 +85,7 @@ import Tinymce from '@/components/tinymce/index.vue';
 Vue.component('tinymce', Tinymce);
 import '@/assets/icons';
 import request from '@/utils/request'; // 实现 form generator 使用自己定义的 axios request 对象
-console.log(request);
+// console.log(request);
 Vue.prototype.$axios = request;
 import '@/styles/index.scss';
 

src/styles/index.scss

@@ -2,7 +2,7 @@ $editorTabsborderColor: #121315;
 body, html{
   margin: 0;
   padding: 0;
-  background: #fff;
+  background: #F2F4F9;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -139,3 +139,40 @@ input, textarea{
 .el-upload__tip{
   line-height: 1.2;
 }
+// 滚动条
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color:rgba(144,147,153,0);
+}
+
+::-webkit-scrollbar-corner {
+  background-color:rgba(144,147,153,0);
+}
+
+::-webkit-scrollbar-track {
+  width: 6px;
+  background: rgba(144,147,153,0);
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(144,147,153,.5);
+  background-clip: padding-box;
+  min-height: 28px;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+  transition: background-color .3s;
+  cursor: pointer;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(144,147,153,.3);
+}

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import {Message, MessageBox, Notification} from 'element-ui'
+import {Message, MessageBox, Notification, Loading} from 'element-ui'
 import store from '@/store'
 import {getAccessToken, getRefreshToken, getTenantId, setToken} from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
@@ -30,8 +30,44 @@ const service = axios.create({
   // 禁用 Cookie 等信息
   withCredentials: false,
 })
+
+/*
+  当页面有两个接口时，第一个接口loading的close事件会直接将第二个接口的loading实例也close
+  每次创建Loading实例的时候判断当前是否存在，如果当前还没有Loading实例就创建一个，
+  如果有就不会再创建而是计数；每次关闭的时候判断当前的计数，
+  如果是0了就关闭，否则也计数减一，直到为0的时候表示当前所有页面所有接口都返回结束了，
+  此时执行关闭Loading.close()操作
+*/
+
+let loadingInstance = null
+function startLoading() {
+  loadingInstance = Loading.service({
+    fullscreen: false,
+    text: '拼命加载中...',
+    background: 'rgba(0, 0, 0, 0.1)'
+  })
+}
+function endLoading() {
+  loadingInstance.close()
+}
+let needLoadingRequestCount = 0
+function showFullScreenLoading() {
+  if (needLoadingRequestCount === 0) {
+    startLoading()
+  }
+  needLoadingRequestCount++
+}
+function tryHideFullScreenLoading() {
+  if (needLoadingRequestCount <= 0) return
+  needLoadingRequestCount--
+  if (needLoadingRequestCount === 0) {
+    endLoading()
+  }
+}
+
 // request拦截器
 service.interceptors.request.use(config => {
+  showFullScreenLoading()
   // 是否需要设置 token
   const isToken = (config.headers || {}).isToken === false
   if (getAccessToken() && !isToken) {
@@ -68,12 +104,14 @@ service.interceptors.request.use(config => {
   }
   return config
 }, error => {
+    tryHideFullScreenLoading()
     console.log(error)
     Promise.reject(error)
 })
 
 // 响应拦截器
 service.interceptors.response.use(async res => {
+  tryHideFullScreenLoading()
   // 未设置状态码则默认成功状态
   const code = res.data.code || 200;
   // 获取错误信息
@@ -151,6 +189,7 @@ service.interceptors.response.use(async res => {
     return res.data
   }
 }, error => {
+    tryHideFullScreenLoading()
     console.log('err' + error)
     let {message} = error;
     if (message === "Network Error") {

src/views/group/base/groupClasses/components/groupClassAdd.vue

@@ -0,0 +1,181 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="110px" :model="form">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="班次名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="编码" prop="code">
+          <el-input v-model="form.code" disabled></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="生效时间" prop="enableTime">
+          <el-date-picker
+          v-model="form.enableTime"
+          type="datetime"
+          placeholder="选择日期时间"
+          label-format="yyyy-MM-dd HH:mm:ss"
+          value-format="timestamp"
+          style="width: 100%;">
+        </el-date-picker>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="失效时间" prop="disableTime">
+          <el-date-picker
+            v-model="form.disableTime"
+            type="datetime"
+            placeholder="选择日期时间"
+            label-format="yyyy-MM-dd HH:mm:ss"
+            value-format="timestamp"
+            style="width: 100%;">
+          </el-date-picker>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="班次开始时间" prop="startTime">
+          <el-time-picker
+            v-model="form.startTime"
+            format='HH:mm'
+            value-format='HH:mm'
+            style="width: 100%;"
+            @change="timeFun"
+          >
+          </el-time-picker>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="班次结束时间" prop="endTime">
+          <el-time-picker
+            v-model="form.endTime"
+            format='HH:mm'
+            value-format='HH:mm'
+            style="width: 100%;"
+            @change="timeFun"
+          >
+          </el-time-picker>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="是否跨天" prop="daySpan">
+          <el-select v-model="form.daySpan" placeholder="请选择" disabled style="width: 100%;">
+            <el-option label="否" :value= '0' ></el-option>
+            <el-option label="是" :value= '1' ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+import { getGroupClasses, updateGroupClasses, createGroupClasses, getCode } from '@/api/base/groupClasses'
+export default {
+  name: 'groupClassAdd',
+  data() {
+    return {
+      form: {
+        id: '',
+        name: '',
+        code: '',
+        enableTime: '',
+        disableTime: '',
+        startTime: '',
+        endTime: '',
+        daySpan: '',
+        remark: ''
+      },
+      isEdit: false, //是否是编辑
+      rules: {
+        name: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
+        enableTime: [{ required: true, message: '请选择班次开始时间', trigger: 'change' }],
+        code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
+        startTime: [{ required: true, message: '请输入生效时间', trigger: 'change' }],
+        endTime: [{ required: true, message: '请选择班次结束时间', trigger: 'change' }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      if (id) {
+        this.isEdit = true
+        this.form.id = id
+        getGroupClasses(id).then((res) => {
+          if (res.code === 0) {
+            this.form = res.data
+          }
+        })
+      } else {
+        this.isEdit = false
+        this.form.id = ''
+        getCode().then((res) => {
+          this.form.code = res.data
+        })
+      }
+    },
+    timeFun() {
+      if (this.form.startTime && this.form.endTime) {
+        if (this.form.startTime > this.form.endTime) {
+          this.form.daySpan = 1
+        } else {
+          this.form.daySpan = 0
+        }
+      }
+    },
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          let obj = {}
+          if (this.form.disableTime) {
+            obj = this.form
+          } else {
+            obj.id = this.form.id
+            obj.name = this.form.name
+            obj.code = this.form.code
+            obj.enableTime = this.form.enableTime
+            obj.startTime = this.form.startTime
+            obj.endTime = this.form.endTime
+            obj.daySpan = this.form.daySpan
+            obj.remark = this.form.remark
+          }
+          if (this.isEdit) {
+            //编辑
+            updateGroupClasses({ ...obj }).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          } else {
+            createGroupClasses({ ...obj }).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    formClear() {
+      this.$refs.form.resetFields()
+      this.isEdit = false
+    }
+  }
+}
+</script>

src/views/group/base/groupClasses/index.vue

@@ -2,243 +2,247 @@
   <div class="app-container">
 
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="班次名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入班次名称" clearable @keyup.enter.native="handleQuery"/>
-      </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="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['base:group-classes: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="['base:group-classes:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
     <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="ID" align="center" prop="id" />
-      <el-table-column label="班次编码" align="center" prop="code" />
-      <el-table-column label="班次名称" align="center" prop="name" />
-      <el-table-column label="开始时间" align="center" prop="startTime" />
-      <el-table-column label="结束时间" align="center" prop="endTime" />
-      <el-table-column label="是否跨天" align="center" prop="daySpan" />
-      <el-table-column label="生效时间" align="center" prop="enableTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.enableTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="失效时间" align="center" prop="disableTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.disableTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</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-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['base:group-classes:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['base:group-classes: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"/>
-
-    <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="班次编码" prop="code">
-          <el-input v-model="form.code" placeholder="请输入班次编码" />
-        </el-form-item>
-        <el-form-item label="班次名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入班次名称" />
-        </el-form-item>
-        <el-form-item label="开始时间" prop="startTime">
-          <el-date-picker clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择开始时间" />
-        </el-form-item>
-        <el-form-item label="结束时间" prop="endTime">
-          <el-date-picker clearable v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择结束时间" />
-        </el-form-item>
-        <el-form-item label="是否跨天" prop="daySpan">
-          <el-input v-model="form.daySpan" placeholder="请输入是否跨天" />
-        </el-form-item>
-        <el-form-item label="生效时间" prop="enableTime">
-          <el-date-picker clearable v-model="form.enableTime" type="date" value-format="timestamp" placeholder="选择生效时间" />
-        </el-form-item>
-        <el-form-item label="失效时间" prop="disableTime">
-          <el-date-picker clearable v-model="form.disableTime" type="date" value-format="timestamp" placeholder="选择失效时间" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="120"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+    <!-- 新增 -->
+    <base-dialog
+      :dialogTitle="addOrEditTitle"
+      :dialogVisible="centervisible"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :before-close="handleCancel"
+      width='70%'
+    >
+      <group-class-add ref="classList" @successSubmit="successSubmit" />
+    </base-dialog>
   </div>
 </template>
 
 <script>
-import { createGroupClasses, updateGroupClasses, deleteGroupClasses, getGroupClasses, getGroupClassesPage, exportGroupClassesExcel } from "@/api/base/groupClasses";
-
-export default {
-  name: "GroupClasses",
-  components: {
+import { getGroupClassesPage, deleteGroupClasses, updateGroupClasses } from "@/api/base/groupClasses";
+import GroupClassAdd from './components/groupClassAdd.vue'
+import { formatDate } from '@/utils'
+const tableProps = [
+  {
+    prop: 'enableTimeStr',
+    label: '生效时段',
+    minWidth: 300
   },
+  {
+    prop: 'name',
+    label: '班次名称'
+  },
+  {
+    prop: 'timeStr',
+    label: '班次时间'
+  },
+  {
+    prop: 'code',
+    label: '班次编码',
+    minWidth: 200
+  },
+  {
+    prop: 'status',
+    label: '班次状态'
+  },
+  {
+    prop: 'remark',
+    label: '备注'
+  }
+]
+export default {
+  name: "GroupClass",
+  components: { GroupClassAdd },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
+      formConfig: [
+        {
+          type: 'input',
+          label: '班次名称',
+          placeholder: '班次名称',
+          param: 'name'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('base:group-classes:create') ? 'button' : '',
+          btnName: '新增',
+          name: 'add',
+          color: 'success',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableBtn: [
+        this.$auth.hasPermi('base:group-classes:update')
+          ? {
+              type: 'edit',
+              btnName: '编辑'
+            }
+          : undefined,
+          {
+            type: 'cancel',
+            btnName: '作废'
+          },
+        this.$auth.hasPermi('base:group-classes:delete')
+          ? {
+              type: 'delete',
+              btnName: '删除'
+            }
+          : undefined
+      ].filter((v) => v),
+      tableH: this.tableHeight(260),
       // 总条数
       total: 0,
       // 班次基础信息列表
       list: [],
       // 弹出层标题
-      title: "",
+      addOrEditTitle: "",
       // 是否显示弹出层
-      open: false,
+      centervisible: false,
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
-        name: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
-        endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
-        enableTime: [{ required: true, message: "生效时间不能为空", trigger: "blur" }],
+        pageSize: 20,
+        name: null
       }
     };
   },
   created() {
-    this.getList();
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(260)
+    })
+    this.getList()
   },
   methods: {
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1;
+          this.queryParams.name = val.name
+          this.getList()
+          break
+        default:
+          this.addOrEditTitle = '新增'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.classList.init()
+          })
+      }
+    },
     /** 查询列表 */
     getList() {
-      this.loading = true;
-      // 执行查询
-      getGroupClassesPage(this.queryParams).then(response => {
-        this.list = response.data.list;
-        this.total = response.data.total;
-        this.loading = false;
-      });
-    },
-    /** 取消按钮 */
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    /** 表单重置 */
-    reset() {
-      this.form = {
-        id: undefined,
-        code: undefined,
-        name: undefined,
-        startTime: undefined,
-        endTime: undefined,
-        daySpan: undefined,
-        enableTime: undefined,
-        disableTime: undefined,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加班次基础信息";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id;
-      getGroupClasses(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改班次基础信息";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (!valid) {
-          return;
+      getGroupClassesPage(this.queryParams).then(res => {
+        if (res.code === 0 && res.data.list.length > 0) {
+          res.data.list.map(item => {
+            item.enableTimeStr = formatDate(item.enableTime) + '至' + (item.disableTime ? formatDate(item.disableTime) : '永久')
+            item.timeStr = item.startTime.slice(0, 5) + '-' + item.endTime.slice(0, 5)
+            item.status = item.status === true ? '可用' : '不可用'
+          })
+          this.list = res.data.list;
+          this.total = res.data.total;
+        } else {
+          this.list = []
+          this.total = 0
         }
-        // 修改的提交
-        if (this.form.id != null) {
-          updateGroupClasses(this.form).then(response => {
-            this.$modal.msgSuccess("修改成功");
-            this.open = false;
-            this.getList();
       });
-          return;
+    },
+    handleClick(val) {
+      switch (val.type) {
+        case 'edit':
+          this.addOrEditTitle = '编辑'
+          this.$nextTick(() => {
+            this.$refs.classList.init(val.data.id)
+          })
+          this.centervisible = true
+          break
+        case 'cancel':
+          this.discard(val.data)
+          break
+        default:
+        this.handleDelete(val.data)
       }
-        // 添加的提交
-        createGroupClasses(this.form).then(response => {
-          this.$modal.msgSuccess("新增成功");
-          this.open = false;
+    },
+    handleCancel() {
+      this.$refs.classList.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.classList.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getList()
+    },
+    discard(row) {
+      let obj = {}
+      obj.id = row.id
+      obj.startTime = row.startTime
+      obj.endTime = row.endTime
+      obj.enableTime = row.enableTime
+      obj.disableTime = Date.parse(new Date())
+      this.$modal.confirm('是否确认作废班次名称为"' + row.name + '"的数据项?').then(function() {
+          return updateGroupClasses({ ...obj })
+        }).then(() => {
           this.getList();
-        });
-      });
+          this.$modal.msgSuccess("操作成功");
+        }).catch(() => {});
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const id = row.id;
-      this.$modal.confirm('是否确认删除班次基础信息编号为"' + id + '"的数据项?').then(function() {
-          return deleteGroupClasses(id);
+      if (row.status) {
+        let _this = this
+        _this.$modal.confirm('删除的班次"' + row.name + '"可能会影响交接班计划，请点取消再次确认！').then(function() {
+          return _this.$modal.confirm('是否确认删除班次名称为"' + row.name + '"的数据项?').then(function() {
+              return deleteGroupClasses(row.id);
             }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
+              _this.getList();
+              _this.$modal.msgSuccess("删除成功");
             }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      // 处理查询参数
-      let params = {...this.queryParams};
-      params.pageNo = undefined;
-      params.pageSize = undefined;
-      this.$modal.confirm('是否确认导出所有班次基础信息数据项?').then(() => {
-          this.exportLoading = true;
-          return exportGroupClassesExcel(params);
-        }).then(response => {
-          this.$download.excel(response, '班次基础信息.xls');
-          this.exportLoading = false;
+          })
+      } else {
+        _this.$modal.confirm('是否确认删除班次名称为"' + row.name + '"的数据项?').then(function() {
+            return deleteGroupClasses(row.id);
+          }).then(() => {
+            _this.getList();
+            _this.$modal.msgSuccess("删除成功");
           }).catch(() => {});
       }
     }
+  }
 };
 </script>

src/views/group/base/groupTeam/components/groupTeamAdd.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="80px" :model="form">
+    <el-form-item label="班组名称" prop="name">
+      <el-input v-model="form.name"></el-input>
+    </el-form-item>
+    <el-form-item label="班组编码" prop="code">
+      <el-input v-model="form.code" disabled></el-input>
+    </el-form-item>
+    <el-form-item label="班组人数" prop="num">
+      <el-input v-model="form.num"></el-input>
+    </el-form-item>
+    <el-form-item label="班组组长" prop="leaderName">
+      <el-input v-model="form.leaderName"></el-input>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getGroupTeam, updateGroupTeam, createGroupTeam, getCode } from '@/api/base/groupTeam'
+export default {
+  name: 'groupTeamAdd',
+  data() {
+    return {
+      form: {
+        id: '',
+        name: '',
+        code: '',
+        num: null,
+        leaderName: ''
+      },
+      isEdit: false, //是否是编辑
+      rules: {
+        name: [{ required: true, message: '请输入班组名称', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      if (id) {
+        this.isEdit = true
+        this.form.id = id
+        getGroupTeam( id ).then((res) => {
+          if (res.code === 0) {
+            this.form = res.data
+          }
+        })
+      } else {
+        this.isEdit = false
+        this.form.id = ''
+        getCode().then((res) => {
+          this.form.code = res.data
+        })
+      }
+    },
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          if (this.isEdit) {
+            //编辑
+            updateGroupTeam({ ...this.form }).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          } else {
+            createGroupTeam({ ...this.form }).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功");
+                this.$emit('successSubmit')
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    formClear() {
+      this.$refs.form.resetFields()
+      this.isEdit = false
+    }
+  }
+}
+</script>

src/views/group/base/groupTeam/components/statusBtn.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-switch v-model="state" type="text" size="small" :disabled="readonly" @change="changeHandler" />
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      state: false,
+      payload: {}
+    }
+  },
+  computed: {
+    readonly() {
+      return !!this.injectData.readonly
+    }
+  },
+  mounted() {
+    this.mapToState()
+  },
+  methods: {
+    mapToState() {
+      if (this.injectData.prop === 'enabled') {
+        this.state = this.injectData.enabled === 1 ? true : false
+      }
+    },
+    changeHandler() {
+      this.payload.id = this.injectData.id
+      this.payload.enabled = this.state ? '1' : '0'
+      this.$emit('emitData', this.payload)
+    }
+  }
+}
+</script>

src/views/group/base/groupTeam/index.vue

@@ -2,221 +2,223 @@
   <div class="app-container">
 
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="班组编码" prop="code">
-        <el-input v-model="queryParams.code" placeholder="请输入班组编码" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="班组名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入班组名称" clearable @keyup.enter.native="handleQuery"/>
-      </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="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['base:group-team: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="['base:group-team:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
     <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="ID" align="center" prop="id" />
-      <el-table-column label="班组编码" align="center" prop="code" />
-      <el-table-column label="班组名称" align="center" prop="name" />
-      <el-table-column label="班组人数" align="center" prop="num" />
-      <el-table-column label="组长名字" align="center" prop="leaderName" />
-      <el-table-column label="启用状态:0 、停用，1、启用" align="center" prop="enabled" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</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-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['base:group-team:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['base:group-team: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"/>
-
-    <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="班组编码" prop="code">
-          <el-input v-model="form.code" placeholder="请输入班组编码" />
-        </el-form-item>
-        <el-form-item label="班组名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入班组名称" />
-        </el-form-item>
-        <el-form-item label="班组人数" prop="num">
-          <el-input v-model="form.num" placeholder="请输入班组人数" />
-        </el-form-item>
-        <el-form-item label="组长名字" prop="leaderName">
-          <el-input v-model="form.leaderName" placeholder="请输入组长名字" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+      @emitFun="handleTableEvents"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="80"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+    <!-- 新增 -->
+    <base-dialog
+      :dialogTitle="addOrEditTitle"
+      :dialogVisible="centervisible"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :before-close="handleCancel"
+    >
+      <group-team-add ref="groupList" @successSubmit="successSubmit" />
+    </base-dialog>
   </div>
 </template>
 
 <script>
-import { createGroupTeam, updateGroupTeam, deleteGroupTeam, getGroupTeam, getGroupTeamPage, exportGroupTeamExcel } from "@/api/base/groupTeam";
-
+import { getGroupTeamPage, deleteGroupTeam, updateGroupTeam } from "@/api/base/groupTeam";
+import { parseTime } from '@/utils/ruoyi'
+import GroupTeamAdd from './components/groupTeamAdd.vue'
+import StatusBtn from './components/statusBtn.vue'
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: '创建时间',
+    filter: parseTime,
+    minWidth: 150
+  },
+  {
+    prop: 'name',
+    label: '班组名称'
+  },
+  {
+    prop: 'code',
+    label: '班组编码',
+    minWidth: 220
+  },
+  {
+    prop: 'num',
+    label: '班组人数'
+  },
+  {
+    prop: 'leaderName',
+    label: '班组组长'
+  },
+  {
+    prop: 'enabled',
+    label: '班组状态',
+    subcomponent: StatusBtn
+  }
+]
 export default {
   name: "GroupTeam",
-  components: {
-  },
+  components: { GroupTeamAdd },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
+      formConfig: [
+        {
+          type: 'input',
+          label: '名称',
+          placeholder: '名称',
+          param: 'name'
+        },
+        {
+          type: 'input',
+          label: '编码',
+          placeholder: '编码',
+          param: 'code'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('base:group-team:create') ? 'button' : '',
+          btnName: '新增',
+          name: 'add',
+          color: 'success',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableBtn: [
+        this.$auth.hasPermi('base:group-team:update')
+          ? {
+              type: 'edit',
+              btnName: '编辑'
+            }
+          : undefined,
+        this.$auth.hasPermi('base:group-team:delete')
+          ? {
+              type: 'delete',
+              btnName: '删除'
+            }
+          : undefined
+      ].filter((v) => v),
+      tableH: this.tableHeight(260),
       // 总条数
       total: 0,
-      // 班组基础信息列表
+      // 班次基础信息列表
       list: [],
       // 弹出层标题
-      title: "",
+      addOrEditTitle: "",
       // 是否显示弹出层
-      open: false,
+      centervisible: false,
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
-        code: null,
+        pageSize: 20,
         name: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
+        code: null
       }
     };
   },
   created() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(260)
+    })
     this.getList();
   },
   methods: {
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1;
+          this.queryParams.name = val.name
+          this.queryParams.code = val.code
+          this.getList()
+          break
+        default:
+          this.addOrEditTitle = '新增'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.groupList.init()
+          })
+      }
+    },
     /** 查询列表 */
     getList() {
-      this.loading = true;
-      // 执行查询
       getGroupTeamPage(this.queryParams).then(response => {
         this.list = response.data.list;
         this.total = response.data.total;
-        this.loading = false;
       });
     },
-    /** 取消按钮 */
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    /** 表单重置 */
-    reset() {
-      this.form = {
-        id: undefined,
-        code: undefined,
-        name: undefined,
-        num: undefined,
-        leaderName: undefined,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加班组基础信息";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id;
-      getGroupTeam(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改班组基础信息";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (!valid) {
-          return;
+    handleClick(val) {
+      switch (val.type) {
+        case 'edit':
+          this.addOrEditTitle = '编辑'
+          this.$nextTick(() => {
+            this.$refs.groupList.init(val.data.id)
+          })
+          this.centervisible = true
+          break
+        default:
+        this.handleDelete(val.data)
       }
-        // 修改的提交
-        if (this.form.id != null) {
-          updateGroupTeam(this.form).then(response => {
-            this.$modal.msgSuccess("修改成功");
-            this.open = false;
-            this.getList();
-          });
-          return;
+    },
+    // 班组状态
+    handleTableEvents(data) {
+      updateGroupTeam({ ...data }).then((res) => {
+        if (res.code === 0) {
+          this.$modal.msgSuccess("操作成功");
         }
-        // 添加的提交
-        createGroupTeam(this.form).then(response => {
-          this.$modal.msgSuccess("新增成功");
-          this.open = false;
-          this.getList();
-        });
-      });
+      })
+    },
+    handleCancel() {
+      this.$refs.groupList.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.groupList.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getList()
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const id = row.id;
-      this.$modal.confirm('是否确认删除班组基础信息编号为"' + id + '"的数据项?').then(function() {
-          return deleteGroupTeam(id);
+      this.$modal.confirm('是否确认删除班组名称为"' + row.name + '"的数据项?').then(function() {
+          return deleteGroupTeam(row.id);
         }).then(() => {
+          this.queryParams.pageNo = 1;
           this.getList();
           this.$modal.msgSuccess("删除成功");
         }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      // 处理查询参数
-      let params = {...this.queryParams};
-      params.pageNo = undefined;
-      params.pageSize = undefined;
-      this.$modal.confirm('是否确认导出所有班组基础信息数据项?').then(() => {
-          this.exportLoading = true;
-          return exportGroupTeamExcel(params);
-        }).then(response => {
-          this.$download.excel(response, '班组基础信息.xls');
-          this.exportLoading = false;
-        }).catch(() => {});
     }
   }
 };

src/views/group/base/groupTeamScheduling/index copy.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="上班日期" prop="startDay">
+        <el-input v-model="queryParams.startDay" placeholder="请输入上班日期" clearable @keyup.enter.native="handleQuery"/>
+      </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="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['base:group-team-scheduling: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="['base:group-team-scheduling: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="ID" align="center" prop="id" />
+      <el-table-column label="班组ID" align="center" prop="teamId" />
+      <el-table-column label="班次id" align="center" prop="classesId" />
+      <el-table-column label="上班日期" align="center" prop="startDay" />
+      <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="endTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.endTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</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-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['base:group-team-scheduling:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['base:group-team-scheduling: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"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="班组ID" prop="teamId">
+          <el-input v-model="form.teamId" placeholder="请输入班组ID" />
+        </el-form-item>
+        <el-form-item label="班次id" prop="classesId">
+          <el-input v-model="form.classesId" placeholder="请输入班次id" />
+        </el-form-item>
+        <el-form-item label="上班日期" prop="startDay">
+          <el-input v-model="form.startDay" placeholder="请输入上班日期" />
+        </el-form-item>
+        <el-form-item label="上班时间" prop="startTime">
+          <el-date-picker clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择上班时间" />
+        </el-form-item>
+        <el-form-item label="下班时间" prop="endTime">
+          <el-date-picker clearable v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择下班时间" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createGroupTeamScheduling, updateGroupTeamScheduling, deleteGroupTeamScheduling, getGroupTeamScheduling, getGroupTeamSchedulingPage, exportGroupTeamSchedulingExcel } from "@/api/base/groupTeamScheduling";
+
+export default {
+  name: "GroupTeamScheduling",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 排班信息列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        startDay: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        teamId: [{ required: true, message: "班组ID不能为空", trigger: "blur" }],
+        classesId: [{ required: true, message: "班次id不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getGroupTeamSchedulingPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        teamId: undefined,
+        classesId: undefined,
+        startDay: undefined,
+        startTime: undefined,
+        endTime: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加排班信息";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getGroupTeamScheduling(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改排班信息";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateGroupTeamScheduling(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createGroupTeamScheduling(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除排班信息编号为"' + id + '"的数据项?').then(function() {
+          return deleteGroupTeamScheduling(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有排班信息数据项?').then(() => {
+          this.exportLoading = true;
+          return exportGroupTeamSchedulingExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '排班信息.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/quality/base/qualityInspectionBoxBtn/index.vue

@@ -1,120 +1,243 @@
 <template>
 	<div class="app-container">
-
 		<!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <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="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['base:quality-inspection-box-btn: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="['base:quality-inspection-box-btn:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
 
 		<!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="ID" align="center" prop="id" />
-      <el-table-column label="该按钮绑定的检测内容id" align="center" prop="inspectionDetId" />
-      <el-table-column label="检测内容（设备推送消息时，可能无对应id，只填这个字段）" align="center" prop="inspectionDetContent" />
-      <el-table-column label="按钮盒所在产线id" align="center" prop="productionId" />
-      <el-table-column label="按钮盒所在工段id" align="center" prop="sectionId" />
-      <el-table-column label="按钮盒模式" align="center" prop="model" />
-      <el-table-column label="按钮值" align="center" prop="keyValue" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</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-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['base:quality-inspection-box-btn:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['base:quality-inspection-box-btn:delete']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+		<base-table
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
+			@emit-fun="handleEmitFun">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				label="操作"
+				fixed="right"
+				:method-list="tableBtn"
+				@clickBtn="handleTableBtnClick" />
+		</base-table>
+
 		<!-- 分页组件 -->
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
+		<pagination
+			v-show="total > 0"
+			:total="total"
+			:page.sync="queryParams.pageNo"
+			:limit.sync="queryParams.pageSize"
+			@pagination="getList" />
 
 		<!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="该按钮绑定的检测内容id" prop="inspectionDetId">
-          <el-input v-model="form.inspectionDetId" placeholder="请输入该按钮绑定的检测内容id" />
-        </el-form-item>
-        <el-form-item label="检测内容（设备推送消息时，可能无对应id，只填这个字段）" prop="inspectionDetContent">
-          <el-input v-model="form.inspectionDetContent" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="按钮盒所在产线id" prop="productionId">
-          <el-input v-model="form.productionId" placeholder="请输入按钮盒所在产线id" />
-        </el-form-item>
-        <el-form-item label="按钮盒所在工段id" prop="sectionId">
-          <el-input v-model="form.sectionId" placeholder="请输入按钮盒所在工段id" />
-        </el-form-item>
-        <el-form-item label="按钮盒模式" prop="model">
-          <el-input v-model="form.model" placeholder="请输入按钮盒模式" />
-        </el-form-item>
-        <el-form-item label="按钮值" prop="keyValue">
-          <el-input v-model="form.keyValue" placeholder="请输入按钮值" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+		<base-dialog
+			:dialogTitle="title"
+			:dialogVisible="open"
+			width="50%"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm
+				v-if="open"
+				ref="form"
+				:dataForm="form"
+				:rows="[
+					[
+						{
+							select: true,
+							label: '产线',
+							url: '/base/production-line/listAll',
+							prop: 'productionId',
+							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+							bind: {
+								filterable: true,
+							},
+						},
+					],
+					[
+						{
+							select: true,
+							label: '工段',
+							url: '/base/workshop-section/listAll',
+							prop: 'sectionId',
+							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						},
+						// {
+						// 	select: true,
+						//   url: '', //
+						// 	label: '检测内容',
+						// 	prop: 'inspectionDetContent',
+						// 	rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// },
+					],
+					[
+						{
+							input: true,
+							label: '按钮盒识别码',
+							prop: 'buttonId',
+							rules: [
+								{
+									type: 'number',
+									message: '请输入数字',
+									trigger: 'blur',
+									transform: (val) => Number(val),
+								},
+							],
+						},
+					],
+					[{ input: true, label: '按钮盒模式', prop: 'model' }],
+					[
+						{
+							input: true,
+							label: '按钮值',
+							prop: 'keyValue',
+							rules: [
+								{
+									type: 'number',
+									message: '请输入100以内的数字',
+									trigger: 'blur',
+									transform: (val) => Number(val) <= 100 && Number(val),
+								},
+							],
+							bind: { type: 'number', min: 0, max: 100 },
+						},
+					],
+					[
+						{
+							textarea: true,
+							label: '检测内容',
+							prop: 'inspectionDetContent',
+							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						},
+					],
+				]" />
+		</base-dialog>
 	</div>
 </template>
 
 <script>
-import { createQualityInspectionBoxBtn, updateQualityInspectionBoxBtn, deleteQualityInspectionBoxBtn, getQualityInspectionBoxBtn, getQualityInspectionBoxBtnPage, exportQualityInspectionBoxBtnExcel } from "@/api/base/qualityInspectionBoxBtn";
+import {
+	createQualityInspectionBoxBtn,
+	updateQualityInspectionBoxBtn,
+	deleteQualityInspectionBoxBtn,
+	getQualityInspectionBoxBtn,
+	getQualityInspectionBoxBtnPage,
+	exportQualityInspectionBoxBtnExcel,
+} from '@/api/base/qualityInspectionBoxBtn';
+import basicPageMixin from '../../mixin/basicPageMixin';
+import moment from 'moment';
 
 export default {
-  name: "QualityInspectionBoxBtn",
-  components: {
-  },
+	name: 'QualityInspectionBoxBtn',
+	mixins: [basicPageMixin],
+	components: {},
 	data() {
 		return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 安灯按钮16键对应列表
-      list: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '检查内容',
+					placeholder: '请输入检查内容',
+					param: 'inspectionDetContent',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:quality-inspection-box-btn:create')
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+			],
+			tableBtn: [
+				this.$auth.hasPermi('base:quality-inspection-box-btn:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:quality-inspection-box-btn:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{
+					width: 128,
+					prop: 'productionName',
+					label: '产线',
+					align: 'center',
+				},
+				{
+					width: 128,
+					prop: 'sectionName',
+					label: '工段',
+					align: 'center',
+				},
+				{
+					width: 128,
+					prop: 'inspectionDetContent',
+					label: '检测内容',
+					align: 'center',
+				},
+				{
+					width: 160,
+					prop: 'buttonId',
+					label: '按钮盒识别码',
+					align: 'center',
+				},
+				// {
+				// 	width: 256,
+				// 	prop: 'productionId',
+				// 	label: '按钮盒所在产线ID',
+				// 	align: 'center',
+				// },
+				// {
+				// 	width: 256,
+				// 	prop: 'sectionId',
+				// 	label: '按钮盒所在工段ID',
+				// 	align: 'center',
+				// },
+				{ width: 90, prop: 'keyValue', label: '按钮值', align: 'center' },
+				{ width: 128, prop: 'model', label: '按钮盒模式', align: 'center' },
+			],
 			// 查询参数
 			queryParams: {
 				pageNo: 1,
 				pageSize: 10,
 				inspectionDetContent: null,
 			},
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        productionId: [{ required: true, message: "按钮盒所在产线id不能为空", trigger: "blur" }],
-        sectionId: [{ required: true, message: "按钮盒所在工段id不能为空", trigger: "blur" }],
-      }
+			// 搜索框需要的 keys, 与上面 queryParams 的除 pageNo, pageSize 之外的 key 一一对应
+			searchBarKeys: ['inspectionDetContent'],
+			form: {
+				id: undefined,
+				inspectionDetId: undefined,
+				inspectionDetContent: undefined,
+				productionId: undefined,
+				sectionId: undefined,
+				model: undefined,
+				keyValue: undefined,
+			},
 		};
 	},
 	created() {
@@ -125,17 +248,12 @@ export default {
 		getList() {
 			this.loading = true;
 			// 执行查询
-      getQualityInspectionBoxBtnPage(this.queryParams).then(response => {
+			getQualityInspectionBoxBtnPage(this.queryParams).then((response) => {
 				this.list = response.data.list;
 				this.total = response.data.total;
 				this.loading = false;
 			});
 		},
-    /** 取消按钮 */
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
 		/** 表单重置 */
 		reset() {
 			this.form = {
@@ -147,52 +265,42 @@ export default {
 				model: undefined,
 				keyValue: undefined,
 			};
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+			this.resetForm('form');
 		},
 		/** 新增按钮操作 */
 		handleAdd() {
 			this.reset();
 			this.open = true;
-      this.title = "添加安灯按钮16键对应";
+			this.title = '添加安灯按钮16键对应';
 		},
 		/** 修改按钮操作 */
 		handleUpdate(row) {
 			this.reset();
 			const id = row.id;
-      getQualityInspectionBoxBtn(id).then(response => {
+			getQualityInspectionBoxBtn(id).then((response) => {
 				this.form = response.data;
 				this.open = true;
-        this.title = "修改安灯按钮16键对应";
+				this.title = '修改安灯按钮16键对应';
 			});
 		},
 		/** 提交按钮 */
 		submitForm() {
-      this.$refs["form"].validate(valid => {
+			this.$refs['form'].validate((valid) => {
 				if (!valid) {
 					return;
 				}
 				// 修改的提交
 				if (this.form.id != null) {
-          updateQualityInspectionBoxBtn(this.form).then(response => {
-            this.$modal.msgSuccess("修改成功");
+					updateQualityInspectionBoxBtn(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
 						this.open = false;
 						this.getList();
 					});
 					return;
 				}
 				// 添加的提交
-        createQualityInspectionBoxBtn(this.form).then(response => {
-          this.$modal.msgSuccess("新增成功");
+				createQualityInspectionBoxBtn(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
 					this.open = false;
 					this.getList();
 				});
@@ -201,27 +309,35 @@ export default {
 		/** 删除按钮操作 */
 		handleDelete(row) {
 			const id = row.id;
-      this.$modal.confirm('是否确认删除安灯按钮16键对应编号为"' + id + '"的数据项?').then(function() {
+			this.$modal
+				.confirm('是否确认删除安灯按钮16键对应编号为"' + id + '"的数据项?')
+				.then(function () {
 					return deleteQualityInspectionBoxBtn(id);
-        }).then(() => {
+				})
+				.then(() => {
 					this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
 		},
 		/** 导出按钮操作 */
 		handleExport() {
 			// 处理查询参数
-      let params = {...this.queryParams};
+			let params = { ...this.queryParams };
 			params.pageNo = undefined;
 			params.pageSize = undefined;
-      this.$modal.confirm('是否确认导出所有安灯按钮16键对应数据项?').then(() => {
+			this.$modal
+				.confirm('是否确认导出所有安灯按钮16键对应数据项?')
+				.then(() => {
 					this.exportLoading = true;
 					return exportQualityInspectionBoxBtnExcel(params);
-        }).then(response => {
+				})
+				.then((response) => {
 					this.$download.excel(response, '安灯按钮16键对应.xls');
 					this.exportLoading = false;
-        }).catch(() => {});
-    }
-  }
+				})
+				.catch(() => {});
+		},
+	},
 };
 </script>

src/views/quality/base/qualityInspectionDet/index.vue

@@ -17,6 +17,7 @@
 				v-if="tableBtn.length"
 				slot="handleBtn"
 				label="操作"
+				fixed="right"
 				:method-list="tableBtn"
 				@clickBtn="handleTableBtnClick" />
 		</base-table>
@@ -33,28 +34,45 @@
 		<base-dialog
 			:dialogTitle="title"
 			:dialogVisible="open"
+			width="40%"
+			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
-				<el-form-item label="检测类型id" prop="typeId">
-					<el-select v-model="form.typeId" placeholder="请选择检测类型">
-						<el-option
-							v-for="opt in typeList"
-							:key="opt.value"
-							:label="opt.label"
-							:value="opt.value" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="检测内容" prop="content">
-					<el-input v-model="form.content" placeholder="请输入检测内容" />
-				</el-form-item>
-				<el-form-item label="检测编码" prop="code">
-					<el-input v-model="form.code" placeholder="请输入检测编码" />
-				</el-form-item>
-				<el-form-item label="备注" prop="remark">
-					<el-input v-model="form.remark" placeholder="请输入备注" />
-				</el-form-item>
-			</el-form>
+			<DialogForm
+				v-if="open"
+				ref="form"
+				:dataForm="form"
+				:rows="[
+					[
+						{
+							select: true,
+							label: '检测类型',
+							prop: 'typeId',
+							url: '/base/quality-inspection-type/listAll',
+							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+							bind: {
+								filterable: true,
+							},
+						},
+					],
+					[
+						{
+							input: true,
+							label: '检测内容',
+							prop: 'content',
+							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						},
+					],
+					[
+						{
+							input: true,
+							label: '内容编码',
+							prop: 'code',
+							url: '/base/quality-inspection-det/getCode',
+						},
+					],
+					[{ input: true, label: '备注', prop: 'remark' }],
+				]" />
 		</base-dialog>
 	</div>
 </template>
@@ -71,9 +89,11 @@ import {
 
 import moment from 'moment';
 
+import basicPageMixin from '../../mixin/basicPageMixin';
+
 export default {
 	name: 'QualityInspectionDet',
-	components: {},
+	mixins: [basicPageMixin],
 	data() {
 		return {
 			typeList: [], // 检测类型列表
@@ -84,19 +104,20 @@ export default {
 					placeholder: '请输入检测内容',
 					param: 'content',
 				},
-				{
-					type: 'datePicker',
-					label: '创建时间',
-					dateType: 'daterange', // datetimerange
-					format: 'yyyy-MM-dd HH:mm:ss',
-					valueFormat: 'yyyy-MM-ddTHH:mm:ss',
-					rangeSeparator: '-',
-					startPlaceholder: '开始日期',
-					endPlaceholder: '结束日期',
-					defaultTime: ['00:00:00', '23:59:59'],
-					param: 'createTime',
-					width: 350,
-				},
+				// {
+				// 	type: 'datePicker',
+				// 	label: '创建时间',
+				// 	dateType: 'daterange', // datetimerange
+				// 	// format: 'yyyy-MM-dd HH:mm:ss',
+				// 	format: 'yyyy-MM-dd',
+				// 	valueFormat: 'yyyy-MM-dd HH:mm:ss',
+				// 	rangeSeparator: '-',
+				// 	startPlaceholder: '开始日期',
+				// 	endPlaceholder: '结束日期',
+				// 	defaultTime: ['00:00:00', '23:59:59'],
+				// 	param: 'createTime',
+				// 	width: 350,
+				// },
 				{
 					type: 'button',
 					btnName: '查询',
@@ -143,7 +164,6 @@ export default {
 					  }
 					: undefined,
 			].filter((v) => v),
-			tableData: [],
 			tableProps: [
 				{
 					prop: 'createTime',
@@ -152,25 +172,11 @@ export default {
 					width: 180,
 					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
 				},
-				{ prop: 'typeId', label: '检测类型ID', align: 'center' },
-				{ prop: 'content', label: '检测类型内容', align: 'center' },
+				{ prop: 'typeName', label: '类型名称', align: 'center' },
+				{ prop: 'content', label: '检测内容', align: 'center' },
 				{ prop: 'code', label: '检测编码', align: 'center' },
 				{ prop: 'remark', label: '备注', align: 'center' },
 			],
-			// 遮罩层
-			loading: true,
-			// 导出遮罩层
-			exportLoading: false,
-			// 显示搜索条件
-			showSearch: true,
-			// 总条数
-			total: 0,
-			// 质量检测信息基础列表
-			list: [],
-			// 弹出层标题
-			title: '',
-			// 是否显示弹出层
-			open: false,
 			// 查询参数
 			queryParams: {
 				pageNo: 1,
@@ -178,16 +184,14 @@ export default {
 				content: null,
 				createTime: [],
 			},
-			// 表单参数
-			form: {},
-			// 表单校验
-			rules: {
-				typeId: [
-					{ required: true, message: '检测类型id不能为空', trigger: 'change' },
-				],
-				content: [
-					{ required: true, message: '检测内容不能为空', trigger: 'blur' },
-				],
+			// 搜索框需要的 keys, 与上面 queryParams 的除 pageNo, pageSize 之外的 key 一一对应
+			searchBarKeys: ['content', 'createTime'],
+			form: {
+				id: undefined,
+				typeId: undefined,
+				content: undefined,
+				code: undefined,
+				remark: undefined,
 			},
 		};
 	},
@@ -196,59 +200,16 @@ export default {
 		this.getTypeList();
 	},
 	methods: {
-		/** base table related */
-		handleTableBtnClick({ data, type }) {
-			switch (type) {
-				case 'edit':
-					this.handleUpdate(data);
-					break;
-				case 'delete':
-					this.handleDelete(data);
-					break;
-			}
-		},
-		/** search bar related */
-		handleSearchBarBtnClick(btn) {
-			const keys = ['name', 'createTime']; // timeVal
-			switch (btn.btnName) {
-				case 'search':
-					keys.forEach((key) => {
-						if (key == 'timeVal') {
-							this.queryParams['startTime'] = btn.timeVal[0];
-							this.queryParams['endTime'] = btn.timeVal[1];
-							return;
-						}
-						this.queryParams[key] = btn[key] || null;
-					});
-					this.handleQuery();
-					break;
-				case 'add':
-					this.handleAdd();
-					break;
-				case 'export':
-					this.handleExport();
-					break;
-				case 'reset':
-					this.$refs['search-bar'].resetForm();
-					this.resetQuery();
-					break;
-			}
-		},
-		handleEmitFun(val) {
-			console.log('emit unf', val);
-		},
 		/** 获取检测类型id */
 		getTypeList() {
-			this.$axios('/base/quality-inspection-type/listAll').then(
-				(response) => {
+			this.$axios('/base/quality-inspection-type/listAll').then((response) => {
 				this.typeList = response.data.map((item) => {
 					return {
 						label: item.name,
 						value: item.id,
 					};
 				});
-				}
-			);
+			});
 		},
 		/** 查询列表 */
 		getList() {
@@ -260,11 +221,6 @@ export default {
 				this.loading = false;
 			});
 		},
-		/** 取消按钮 */
-		cancel() {
-			this.open = false;
-			this.reset();
-		},
 		/** 表单重置 */
 		reset() {
 			this.form = {
@@ -276,16 +232,6 @@ export default {
 			};
 			this.resetForm('form');
 		},
-		/** 搜索按钮操作 */
-		handleQuery() {
-			this.queryParams.pageNo = 1;
-			this.getList();
-		},
-		/** 重置按钮操作 */
-		resetQuery() {
-			this.resetForm('queryForm');
-			this.handleQuery();
-		},
 		/** 新增按钮操作 */
 		handleAdd() {
 			this.reset();

src/views/quality/base/qualityInspectionType/index.vue

@@ -52,7 +52,14 @@
 							// }
 						},
 					],
-					[{ input: true, label: '检测类型编码', prop: 'code' }],
+					[
+						{
+							input: true,
+							label: '检测类型编码',
+							prop: 'code',
+							url: '/base/quality-inspection-type/getCode',
+						},
+					],
 					[{ input: true, label: '备注', prop: 'remark' }],
 				]" />
 		</base-dialog>
@@ -61,7 +68,6 @@
 
 <script>
 import moment from 'moment';
-import DialogForm from '../../components/dialogForm.vue';
 
 import {
 	createQualityInspectionType,
@@ -71,10 +77,11 @@ import {
 	getQualityInspectionTypePage,
 	exportQualityInspectionTypeExcel,
 } from '@/api/base/qualityInspectionType';
+import basicPageMixin from '../../mixin/basicPageMixin';
 
 export default {
 	name: 'QualityInspectionType',
-	components: { DialogForm },
+	mixins: [basicPageMixin],
 	data() {
 		return {
 			tableBtn: [
@@ -91,7 +98,6 @@ export default {
 					  }
 					: undefined,
 			].filter((v) => v),
-			tableData: [],
 			tableProps: [
 				{
 					prop: 'createTime',
@@ -192,18 +198,6 @@ export default {
 			// 	[{ input: true, label: '检测类型编码', prop: 'code' }],
 			// 	[{ input: true, label: '备注', prop: 'remark' }],
 			// ],
-			// 遮罩层
-			loading: true,
-			// 导出遮罩层
-			exportLoading: false,
-			// 显示搜索条件
-			showSearch: true,
-			// 总条数
-			total: 0,
-			// 质量检测类型基础列表
-			list: [],
-			// 弹出层标题
-			title: '',
 			// 是否显示弹出层
 			open: false,
 			// 查询参数
@@ -261,7 +255,6 @@ export default {
 					break;
 			}
 		},
-
 		/** 查询列表 */
 		getList() {
 			this.loading = true;
@@ -272,11 +265,6 @@ export default {
 				this.loading = false;
 			});
 		},
-		/** 取消按钮 */
-		cancel() {
-			this.open = false;
-			this.reset();
-		},
 		/** 表单重置 */
 		reset() {
 			this.form = {
@@ -287,25 +275,12 @@ export default {
 			};
 			this.resetForm('form');
 		},
-		/** 搜索按钮操作 */
-		handleQuery() {
-			this.queryParams.pageNo = 1;
-			this.getList();
-		},
-		/** 重置按钮操作 */
-		resetQuery() {
-			this.resetForm('queryForm');
-			this.handleQuery();
-		},
 		/** 新增按钮操作 */
 		handleAdd() {
 			this.reset();
 			this.open = true;
 			this.title = '添加质量检测类型基础';
 		},
-		handleEmitFun(val) {
-			console.log('emit unf', val);
-		},
 		/** 修改按钮操作 */
 		handleUpdate(row) {
 			this.reset();

src/views/quality/components/dialogForm.vue

@@ -18,10 +18,19 @@
 						v-if="col.input"
 						v-model="form[col.prop]"
 						@change="$emit('update', form)"
+						:placeholder="`请输入${col.label}`"
+						v-bind="col.bind" />
+					<el-input
+						v-if="col.textarea"
+						type="textarea"
+						v-model="form[col.prop]"
+						@change="$emit('update', form)"
+						:placeholder="`请输入${col.label}`"
 						v-bind="col.bind" />
 					<el-select
 						v-if="col.select"
 						v-model="form[col.prop]"
+						:placeholder="`请选择${col.label}`"
 						@change="$emit('update', form)"
 						v-bind="col.bind">
 						<el-option
@@ -73,7 +82,7 @@ export default {
 	},
 	data() {
 		return {
-			formLoading: false,
+			formLoading: true,
 			optionListOf: {},
 		};
 	},
@@ -90,7 +99,6 @@ export default {
 			},
 			set(val) {
 				console.log('set form', val);
-				// this.$emit('update', val);
 			},
 		},
 	},
@@ -106,21 +114,32 @@ export default {
 		resetFields(args) {
 			return this.$refs.form.resetFields(args);
 		},
-
+		// getCode
+		async getCode(url) {
+			const response = await this.$axios(url);
+			return response.data;
+		},
 		handleOptions() {
+			// console.log("[dialogForm:handleOptions]")
 			const promiseList = [];
 			this.rows.forEach((cols) => {
 				cols.forEach(async (opt) => {
 					if (opt.options) {
 						this.optionListOf[opt.prop] = opt.options;
 					} else if (opt.url) {
+						// 如果是下拉框，或者新增模式下的输入框，才去请求
+						if (opt.select || (opt.input && !this.form?.id)) {
 							promiseList.push(async () => {
 								const response = await this.$axios(opt.url, {
 									method: opt.method ?? 'get',
 								});
 								console.log('[dialogForm:handleOptions:response]', response);
+								if (opt.select) {
+									// 处理下拉框选项
 									const list =
-								'list' in response.data ? response.data.list : response.data;
+										'list' in response.data
+											? response.data.list
+											: response.data;
 									this.$set(
 										this.optionListOf,
 										opt.prop,
@@ -129,11 +148,18 @@ export default {
 											value: item[opt.valueKey ?? 'id'],
 										}))
 									);
+								} else if (opt.input) {
+									// 处理输入框数据
+									this.form[opt.prop] = response.data;
+								}
 							});
+						}
 						try {
-							this.formLoading = true;
-							await Promise.all(promiseList);
+							// this.formLoading = true;
+							// console.log("[dialogForm:handleOptions:promiseList]", promiseList)
+							await Promise.all(promiseList.map((fn) => fn()));
 							this.formLoading = false;
+							// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
 						} catch (error) {
 							console.log('[dialogForm:handleOptions:error]', error);
 							this.formLoading = false;
@@ -141,10 +167,14 @@ export default {
 					}
 				});
 			});
-			// this.formLoading = false;
+			if (!promiseList.length) this.formLoading = false;
 		},
 	},
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.el-select {
+	width: 100%;
+}
+</style>

src/views/quality/mixin/basicPageMixin.js

@@ -1,4 +1,7 @@
+import DialogForm from '../components/dialogForm.vue';
+
 export default {
+	components: { DialogForm },
 	data() {
 		return {
 			// 遮罩层
@@ -15,28 +18,20 @@ export default {
 			title: '',
 			// 是否显示弹出层
 			open: false,
-			// 查询参数
-			queryParams: {
-				pageNo: 1,
-				pageSize: 10,
-			},
-			
 			// 列表数据
 			tableData: [],
-			tableProps: [], // 占位
-			tableBtn: [], // 占位
-			searchBarFormConfig: [], // 占位
-            // 弹窗表单配置
-            dialogFormConfig: [], // 占位
+			// 弹窗的表单
+			// form: {}, // 占位
+			// 搜索框需要的 keys
+			// searchBarKeys: [], // 占位
+			// tableProps: [], // 占位
+			// tableBtn: [], // 占位
+			// searchBarFormConfig: [], // 占位
+			// // 弹窗表单配置
+			// dialogFormConfig: [], // 占位
 		};
 	},
-	mounted() {
-		if (this.prepareSelectOptions) {
-			// 准备列表的options
-			// TODO: 也许需要挪到 dialogForm.vue 里
-			this.prepareSelectOptions();
-		}
-	},
+	mounted() {},
 	methods: {
 		// 处理搜索条件
 		handleSearchBarBtnClick() {},
@@ -53,10 +48,10 @@ export default {
 		},
 		// 处理搜索栏按钮
 		handleSearchBarBtnClick(btn) {
-			const keys = ['name', 'createTime']; // timeVal
+			// const keys = ['name', 'createTime']; // timeVal // 已被 searchBarKeys 替代
 			switch (btn.btnName) {
 				case 'search':
-					keys.forEach((key) => {
+					this.searchBarKeys.forEach((key) => {
 						if (key == 'timeVal') {
 							this.queryParams['startTime'] = btn.timeVal[0];
 							this.queryParams['endTime'] = btn.timeVal[1];
@@ -83,5 +78,20 @@ export default {
 		},
 		// 获取列表数据
 		getList() {},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 取消按钮 */
+		cancel() {
+			this.open = false;
+			this.reset();
+		},
 	},
 };