进度信息模块封装ui代码优化

src/api/business/article.js

@@ -14,7 +14,10 @@ export function listAllArticle(data) {
   return request({
     url: '/business/article/list-all',
     method: 'post',
-    data
+    data,
+    headers: {
+      repeatSubmit: false
+    }
   })
 }
 

src/components/ImageUpload/index.vue

@@ -56,7 +56,7 @@ export default {
     // 大小限制(MB)
     fileSize: {
       type: Number,
-      default: 5
+      default: 4
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {

src/plugins/modal.js

@@ -59,6 +59,13 @@ export default {
       type: 'warning'
     })
   },
+  confirmAllConfig(content, title = '系统提示', options = {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }) {
+    return MessageBox.confirm(content, title, options)
+  },
   // 提交内容
   prompt(content) {
     return MessageBox.prompt(content, '系统提示', {

src/router/index.js

@@ -141,51 +141,6 @@ export const constantRoutes = [
       }
     ]
   },
-  // 文章
-  {
-    path: '/article-management',
-    component: Layout,
-    hidden: true,
-    permissions: ['*:*:*'],
-    children: [
-      {
-        path: 'index',
-        props: true,
-        component: () => import('@/views/article-management/article-management'),
-        name: 'Article-management',
-        meta: { title: '文章管理', icon: 'component' }
-      },
-      // 文章编辑路由
-      {
-        path: 'article-edit/:id',
-        props: true,
-        component: () => import('@/views/article-management/article-edit'),
-        name: 'Article-edit',
-        meta: { title: '文章编辑', icon: 'component' }
-      },
-      // 文章详情路由
-      {
-        path: 'article-detail/:id',
-        component: () => import('@/views/article-management/article-detail'),
-        name: 'ArticleDetail',
-        props: true,
-        meta: {
-          title: '文章详情', icon: 'component'
-        }
-      },
-      // 文章添加路由
-      {
-        path: 'article-insert',
-        component: () => import('@/views/article-management/article-insert'),
-        name: 'ArticleInsert',
-        props: true,
-        meta: {
-          title: '新增文章',
-          activeMenu: '/article-management'
-        }
-      }
-    ]
-  },
   // 病历管理
   {
     path: '/medical-record-management',
@@ -301,7 +256,7 @@ export const constantRoutes = [
   },
   // 文章
   {
-    path: '/article-management',
+    path: '/article/management',
     component: Layout,
     hidden: true,
     permissions: ['*:*:*'],

src/views/article-management/article-edit.vue

@@ -23,7 +23,7 @@ color: #333333;"
           <div style="display:flex;">
             <el-form ref="form" :model="form" :rules="rules" label-width="80px">
               <el-form-item label="文章标题" prop="articleTitle">
-                <el-input v-model="form.articleTitle" placeholder="请输入文章标题" />
+                <el-input v-model="form.articleTitle" maxlength="60" placeholder="请输入文章标题" />
               </el-form-item>
               <el-form-item label="权重" prop="articleWeight">
                 <el-input-number

src/views/article-management/article-insert.vue

@@ -23,13 +23,13 @@ color: #333333;"
           <div style="display:flex;">
             <el-form ref="form" :model="form" :rules="rules" label-width="80px">
               <el-form-item label="文章标题" prop="articleTitle">
-                <el-input v-model="form.articleTitle" maxlength="40" placeholder="请输入文章标题" show-word-limit />
+                <el-input v-model.trim="form.articleTitle" maxlength="60" placeholder="请输入文章标题" />
               </el-form-item>
               <el-form-item label="权重" prop="articleWeight">
-                <el-input-number v-model="form.articleWeight" :max="9999" :min="1" controls-position="right" />
+                <el-input-number v-model="form.articleWeight" :max="9999" :min="0" controls-position="right" />
               </el-form-item>
               <el-form-item label="文章封面" prop="articleCover">
-                <image-upload v-model="form.articleCover" limit="1" />
+                <image-upload v-model="form.articleCover" :limit="1" />
               </el-form-item>
               <el-form-item label="状态" prop="articleStatus">
                 <div style="display: flex;">
@@ -47,13 +47,17 @@ color: #333333;"
                 </div>
               </el-form-item>
               <el-form-item label="文章内容" prop="articleContent">
-                <editor v-model="form.articleContent" :min-height="192" />
+                <editor
+                  v-model.trim="form.articleContent"
+                  :min-height="192"
+                  @change="changeQuillEditor('articleContent')"
+                />
               </el-form-item>
             </el-form>
           </div>
         </div>
         <div slot="footer" class="dialog-footer">
-          <el-button class="queryBtn" @click="submitForm">提交</el-button>
+          <el-button :loading="submitLoading" class="queryBtn" @click="submitForm">提交</el-button>
           <el-button class="resetBtn" @click="goBack">返回</el-button>
         </div>
       </div>
@@ -75,8 +79,7 @@ export default {
   props: {
     id: {
       // 防止接受状态类型不兼容
-      type: [Number, String],
-      required: true
+      type: [Number, String]
     }
   },
   data() {
@@ -90,12 +93,14 @@ export default {
       // 表单参数
       form: {
         // 权重
-        articleWeight: '0',
+        articleWeight: 0,
         // 状态位
         articleStatus: '0',
         // 创建时间
         articleCreateTime: ''
       },
+      // 提交中状态
+      submitLoading: false,
       // 表单校验
       rules: {
         // 文章标题判空校验
@@ -104,7 +109,8 @@ export default {
         ],
         // 文章权重判空校验
         articleWeight: [
-          { required: true, message: '文章权重不能为空', trigger: 'change' }
+          { required: true, message: '文章权重不能为空', trigger: 'change' },
+          { min: 1, max: 9999, type: 'number', message: '文章权重需要在1~9999之间', trigger: 'change' }
         ],
         // 文章封面判空校验
         articleCover: [
@@ -125,6 +131,10 @@ export default {
     this.addDate()
   },
   methods: {
+    // change事件，验证表单内容，val是当前需要验证的字段名
+    changeQuillEditor(val) {
+      this.$refs['form'].validateField(val)
+    },
     // 获取当前年月日
     addDate() {
       const nowDate = new Date()
@@ -141,19 +151,15 @@ export default {
     submitForm() {
       this.$refs['form'].validate(valid => {
         if (valid) {
-          this.$confirm('确认新增?', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
+          this.submitLoading = true
           addArticle(this.form).then(response => {
             this.$message({
               type: 'success',
               message: '新增成功!'
             })
             this.goBack()
-            })
-            this.getList()
+          }).finally(_ => {
+            this.submitLoading = false
           })
         }
       })
@@ -162,9 +168,7 @@ export default {
     selectDictLabel,
     /** 返回跳转列表页 */
     goBack() {
-      this.$router.push({
-        path: '/article-management/index'
-      })
+      this.$router.back()
     }
   }
 }

src/views/article-management/article-management.vue

 <template>
   <div style="background-color: #FFFFFF;">
     <div class="app-container">
+      <el-tabs v-model="activeName">
+        <el-tab-pane name="article" label="文章管理">
           <!--顶部搜索区-->
-      <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
+          <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
             <el-form-item prop="articleTitle">
               <el-input
-            v-model="queryParams.articleTitle"
+                v-model.trim="queryParams.articleTitle"
                 clearable
                 placeholder="请输入文章标题关键字"
                 @keyup.enter.native="handleQuery"
@@ -13,7 +15,7 @@
             </el-form-item>
             <el-form-item prop="articleCreateTime">
               <el-date-picker
-            v-model="queryParams.articleCreateTime"
+                v-model.trim="queryParams.articleCreateTime"
                 clearable
                 placeholder="请选择创建时间"
                 type="date"
@@ -21,7 +23,7 @@
               />
             </el-form-item>
             <el-form-item prop="articleStatus">
-          <el-select v-model="queryParams.articleStatus" clearable placeholder="请选择文章状态">
+              <el-select v-model.trim="queryParams.articleStatus" clearable placeholder="请选择文章状态">
                 <el-option
                   v-for="item in dict.type.article_status"
                   :key="item.value"
@@ -32,7 +34,7 @@
             </el-form-item>
             <el-form-item prop="sort">
               <el-select
-            v-model="queryParams.params.sort"
+                v-model.trim="queryParams.params.sort"
                 clearable
                 placeholder="请选择排序方式"
               >
@@ -44,6 +46,7 @@
                 />
               </el-select>
             </el-form-item>
+            <div>
               <!--顶部操作按钮-->
               <el-form-item>
                 <!--新增文章-->
@@ -55,9 +58,6 @@
                   @click="handleAdd"
                 >新增文章
                 </el-button>
-          <!--搜索  重置-->
-          <el-button class="queryBtn" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
-          <el-button class="resetBtn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                 <!--选择全部-->
                 <el-button
                   v-hasPermi="['system:manage:export']"
@@ -95,8 +95,13 @@
                 >批量导出
                 </el-button>
               </el-form-item>
+              <el-form-item style="position: absolute;right: 0.6%;">
+                <!--搜索  重置-->
+                <el-button class="queryBtn" icon="el-icon-search" @click="handleQuery">查询</el-button>
+                <el-button class="resetBtn" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </div>
           </el-form>
-
           <!--列表-->
           <el-table
             ref="table"
@@ -105,7 +110,6 @@
             :header-cell-style="{background:'#E8E9E8'}"
             border
             row-key="id"
-        :header-cell-class-name="cellClass"
             @selection-change="handleSelectionChange"
             @select-all="selectAll($event, false)"
           >
@@ -201,6 +205,8 @@
             :total="total"
             @pagination="getList"
           />
+        </el-tab-pane>
+      </el-tabs>
 
       <!-- 添加或修改文章对话框 -->
       <el-dialog :title="title" :visible.sync="open" append-to-body width="60%">
@@ -250,22 +256,31 @@
 <script>
 import { listArticle, delArticle, addArticle, updateArticle, listAllArticle } from '@/api/business/article'
 import { parseTime } from '../../utils/ruoyi'
-import dict from '@/utils/dict'
 
 export default {
   name: 'Article',
   dicts: ['article_status'],
   data() {
     return {
+      // tab激活
+      activeName: 'article',
       // 排序方式下拉框字典写死
       sortList: [
         {
           label: '按创建时间倒序',
-          value: '1'
+          value: '01'
         },
         {
           label: '按创建时间正序',
-          value: '2'
+          value: '02'
+        },
+        {
+          label: '按权重倒序',
+          value: '11'
+        },
+        {
+          label: '按权重正序',
+          value: '12'
         }
       ],
       // 遮罩层
@@ -317,7 +332,6 @@ export default {
         return 'disabledCheck'
       }
     },
-    dict,
     parseTime,
     /** 首先进界面---查询文章列表 */
     getList() {
@@ -357,7 +371,7 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除文章编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirmAllConfig('是否确认删除此条数据，删除后不可恢复', '删除').then(function() {
         return delArticle(ids)
       }).then(() => {
         this.getList()
@@ -367,19 +381,17 @@ export default {
     },
     /**  下架操作(改变状态位) */
     handleChange(row) {
+      // eslint-disable-next-line no-unused-vars
       const ids = row.id || this.ids
       // 创建对象给修改接口
       const articleObj = {
         id: row.id,
         articleStatus: '1'
       }
-      console.log('articleobj', articleObj)
-      this.$modal.confirm('是否确认下架文章编号为"' + ids + '"的数据项？').then(
       // 调用修改接口
       updateArticle(articleObj).then(rows => {
         console.log('这是调取出来的内容:', rows)
-        })
-      ).then(() => {
+      }).then(() => {
         this.$modal.msgSuccess('下架成功')
         this.getList()
       }).catch(() => {
@@ -504,6 +516,10 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.app-container {
+  padding: 0 0.5rem;
+  margin-bottom: 0.5em;
+}
 /*表格超出行宽省略号显示并悬浮状态显示全文*/
 ::v-deep .el-tooltip__popper .is-dark {
   background: #f1f1f1 !important;
@@ -526,6 +542,7 @@ export default {
 ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
   background-color: #F6FCF5 !important;
 }
+
 ::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
   display: none;
 }

src/views/equipment-management/use-management/use-management.vue

@@ -105,13 +105,16 @@
         <template slot-scope="scope">
           <span
             v-if="scope.row.status === '1'"
-          style="color: #5FB54B;">{{ showStatus(scope.row.status)}}</span>
+            style="color: #5FB54B;"
+          >{{ showStatus(scope.row.status) }}</span>
           <span
             v-else-if="scope.row.status === '2'"
-          style="color: #FF9D4E;">{{ showStatus(scope.row.status)}}</span>
+            style="color: #FF9D4E;"
+          >{{ showStatus(scope.row.status) }}</span>
           <span
             v-else
-          style="color: #DB4747;">{{ showStatus(scope.row.status) || '-' }}</span>
+            style="color: #DB4747;"
+          >{{ showStatus(scope.row.status) || '-' }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="left" class-name="small-padding fixed-width">

src/views/medical-record-management/reservation-equipment.vue

 <template>
-<!--  -->
+  <!--  -->
   <div class="app-container">
     <div style="background-color: #fff">
       <div class="headerTitle">

src/views/service-management/medical-record-management/check-subscribe.vue

@@ -129,7 +129,7 @@
       </el-row>
     </el-form>
     <!-- 设备表格 -->
-    <el-table >
+    <el-table>
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="设备名称" align="center" prop="petNickname" />
       <el-table-column label="检查日期" align="center" prop="petBreed" />