【PC端优化】前端优化（附带格式校验js）-王公峰-2020-07-28

src/i18n/zh-CN.js

@@ -371,6 +371,7 @@ t.role.analysisMenuList = '数据端菜单授权'
 
 t.user = {}
 t.user.username = '用户名'
+t.user.identityNo = '身份证号码'
 t.user.deptName = '所属部门'
 t.user.email = '邮箱'
 t.user.mobile = '手机号'

src/utils/validate.js

@@ -29,3 +29,11 @@ export function isPhone (s) {
 export function isURL (s) {
   return /^http[s]?:\/\/.*/.test(s)
 }
+
+/**
+ * 身份证号
+ * @param {*} s
+ */
+export function isIdentityNo (s) {
+  return /(^\d{15}$)|bai(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(s)
+}

src/views/modules/analysis/item/difficult-Item-list.vue

@@ -27,8 +27,7 @@
           </el-select>
         </el-form-item>
         <br/>
-        <el-form-item label="转项目时间"
+        <el-form-item label="转项目时间" prop="changeItemStartTime" label-width="95px">
-                      prop="changeItemStartTime" label-width="95px">
           <el-date-picker v-model="dataForm.changeItemStartTime"
                           type="date"
                           :picker-options="pickerBeginDateBefore"
@@ -37,9 +36,7 @@
                           placeholder="选择日期时间">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="至"
+        <el-form-item label="至" label-width="25px" prop="changeItemEndTime">
-                      label-width="25px"
-                      prop="changeItemEndTime">
           <el-date-picker v-model="dataForm.changeItemEndTime"
                           type="date"
                           :picker-options="pickerBeginDateAfter"
@@ -59,22 +56,19 @@
           </el-select>
         </el-form-item>
         <br/>
-        <el-form-item label="处理完毕时间"
+        <el-form-item label="处理完毕时间" prop="processedStartTime" >
-                      prop="processedStartTime" >
           <el-date-picker v-model="dataForm.processedStartTime"
                           type="date"
-                          :picker-options="pickerBeginDateBefore1"
+                          :picker-options="pickerBeginDateBeforeProcessed"
                           value-format="yyyy-MM-dd"
                           format="yyyy-MM-dd"
                           placeholder="选择日期时间">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="至"
+        <el-form-item label="至" label-width="25px" prop="processedEndTime">
-                      label-width="25px"
-                      prop="processedEndTime">
           <el-date-picker v-model="dataForm.processedEndTime"
                           type="date"
-                          :picker-options="pickerBeginDateAfter1"
+                          :picker-options="pickerBeginDateAfterProcessed"
                           value-format="yyyy-MM-dd"
                           format="yyyy-MM-dd"
                           placeholder="选择日期时间">
@@ -91,7 +85,7 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataListSearch()" type='primary'>{{ $t('query') }}</el-button>
+          <el-button @click="getDataListSearch()" type='success'>{{ $t('query') }}</el-button>
         </el-form-item>
       </el-form>
       <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
@@ -194,33 +188,33 @@ export default {
       },
       pickerBeginDateBefore: {
         disabledDate: (time) => {
-          let beginDateVal = this.dataForm.changeItemStartTime
+          let beginDateVal = this.dataForm.changeItemEndTime
           if (beginDateVal) {
-            return time.getTime() > new Date(beginDateVal).getTime()
+            return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
           }
         }
       },
       pickerBeginDateAfter: {
         disabledDate: (time) => {
-          let EndDateVal = this.dataForm.changeItemEndTime
+          let EndDateVal = this.dataForm.changeItemStartTime
           if (EndDateVal) {
-            return time.getTime() < new Date(EndDateVal).getTime()
+            return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
           }
         }
       },
-      pickerBeginDateBefore1: {
+      pickerBeginDateBeforeProcessed: {
         disabledDate: (time) => {
-          let beginDateVal = this.dataForm.processedStartTime
+          let beginDateVal = this.dataForm.processedEndTime
           if (beginDateVal) {
-            return time.getTime() > new Date(beginDateVal).getTime()
+            return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
           }
         }
       },
-      pickerBeginDateAfter1: {
+      pickerBeginDateAfterProcessed: {
         disabledDate: (time) => {
-          let EndDateVal = this.dataForm.processedEndTime
+          let EndDateVal = this.dataForm.processedStartTime
           if (EndDateVal) {
-            return time.getTime() < new Date(EndDateVal).getTime()
+            return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
           }
         }
       },

src/views/modules/analysis/item/report-solved-item-list.vue

@@ -12,29 +12,28 @@
           <el-input v-model="dataForm.searchContent" placeholder="项目摘要" clearable @keyup.native="btKeyUpsearchContent"></el-input>
         </el-form-item>
         <div class="block">
-        <el-form-item label="上报网格化平台时间"
+          <el-form-item label="上报网格化平台时间" prop="reportStartTime" label-width="166px">
-                      prop="reportStartTime" label-width="166px">
           <el-date-picker v-model="dataForm.reportStartTime"
                           type="date"
                           :picker-options="pickerBeginDateBefore"
                           value-format="yyyy-MM-dd"
                           format="yyyy-MM-dd"
-                          placeholder="选择日期时间">
+                          placeholder="选择日期时间"
+                          style="width:200px">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="至"
+        <el-form-item label="至" prop="reportEndTime">
-                      label-width="25px"
-                      prop="reportEndTime">
           <el-date-picker v-model="dataForm.reportEndTime"
                           type="date"
                           :picker-options="pickerBeginDateAfter"
                           value-format="yyyy-MM-dd"
                           format="yyyy-MM-dd"
-                          placeholder="选择日期时间">
+                          placeholder="选择日期时间"
+                          style="width:200px">
           </el-date-picker>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="getDataListSearch()">{{ $t('query') }}</el-button>
+          <el-button type="success" @click="getDataListSearch()">{{ $t('query') }}</el-button>
         </el-form-item>
         </div>
       </el-form>
@@ -115,17 +114,17 @@ export default {
       },
       pickerBeginDateBefore: {
         disabledDate: (time) => {
-          let beginDateVal = this.dataForm.startTime
+          let beginDateVal = this.dataForm.reportEndTime
           if (beginDateVal) {
-            return time.getTime() > new Date(beginDateVal).getTime()
+            return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
           }
         }
       },
       pickerBeginDateAfter: {
         disabledDate: (time) => {
-          let EndDateVal = this.dataForm.endTime
+          let EndDateVal = this.dataForm.reportStartTime
           if (EndDateVal) {
-            return time.getTime() < new Date(EndDateVal).getTime()
+            return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
           }
         }
       },

src/views/modules/custom/evaluateofficer.vue

@@ -13,25 +13,24 @@
         <el-form-item label="干部姓名" prop="fullName">
           <el-input v-model="dataForm.fullName" @keyup.native="btKeyUpUsername" placeholder="干部姓名" clearable></el-input>
         </el-form-item>
-        <el-form-item label="时间"
+        <el-form-item label="时间" prop="startTime" label-width="90px">
-                      prop="startTime">
           <el-date-picker v-model="dataForm.startTime"
                           type="date"
                           :picker-options="pickerBeginDateBefore"
                           value-format="yyyy-MM-dd"
                           format="yyyy-MM-dd"
-                          placeholder="选择日期时间">
+                          placeholder="选择日期时间"
+                          style="width:200px">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="至"
+        <el-form-item label="至" prop="endTime">
-                      label-width="25px"
-                      prop="endTime">
           <el-date-picker v-model="dataForm.endTime"
                           type="date"
                           :picker-options="pickerBeginDateAfter"
                           value-format="yyyy-MM-dd"
                           format="yyyy-MM-dd"
-                          placeholder="选择日期时间">
+                          placeholder="选择日期时间"
+                          style="width:200px">
           </el-date-picker>
         </el-form-item>
         <el-form-item>
@@ -118,17 +117,17 @@ export default {
       },
       pickerBeginDateBefore: {
         disabledDate: (time) => {
-          let beginDateVal = this.dataForm.startTime
+          let beginDateVal = this.dataForm.endTime
           if (beginDateVal) {
-            return time.getTime() > new Date(beginDateVal).getTime()
+            return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
           }
         }
       },
       pickerBeginDateAfter: {
         disabledDate: (time) => {
-          let EndDateVal = this.dataForm.endTime
+          let EndDateVal = this.dataForm.startTime
           if (EndDateVal) {
-            return time.getTime() < new Date(EndDateVal).getTime()
+            return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
           }
         }
       },

src/views/modules/custom/gridoperatorinfo-add-or-update.vue

@@ -11,7 +11,7 @@
       <el-form-item label="姓名"
                     prop="realName">
         <el-input v-model="dataForm.realName"
-                  placeholder="姓名"></el-input>
+                  placeholder="姓名" maxlength="10"></el-input>
       </el-form-item>
       <el-form-item label="性别"
                     prop="sex">
@@ -107,6 +107,7 @@
 <script>
 import Cookies from 'js-cookie'
 import debounce from 'lodash/debounce'
+import { isIdentityNo } from '@/utils/validate'
 export default {
   data () {
     return {
@@ -137,6 +138,17 @@ export default {
   },
   computed: {
     dataRule () {
+      var validateIdentityNo = (rule, value, callback) => {
+        if (value === null || value === '') {
+          // 未填写不做校验
+          callback()
+        } else if (!isIdentityNo(value)) {
+          // 填写做身份证号码格式校验
+          return callback(new Error(this.$t('validate.format', { 'attr': this.$t('user.identityNo') })))
+        } else {
+          callback()
+        }
+      }
       return {
         realName: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -145,7 +157,8 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         mobile: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确号码格式', trigger: 'blur' }
         ],
         dutyCategoryId: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -155,6 +168,10 @@ export default {
         ],
         faceImg: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        identityNo: [
+          { required: false, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: validateIdentityNo, trigger: 'blur' }
         ]
       }
     }

src/views/modules/events/item-deal-detail-view.vue

@@ -502,19 +502,27 @@ export default {
       }).catch(() => { })
     },
     deleteComment (val) {
-      this.$http['post']('/events/item/deleteComment', { commentIds: [val] }).then(({ data: res }) => {
+      this.$confirm('确定要屏蔽该评论吗？屏蔽后不可恢复。', '提示', {
-        if (res.code !== 0) {
+      confirmButtonText: '确定',
-          return this.$message.error(res.msg)
+      cancelButtonText: '取消',
-        }
+      type: 'warning'
-        this.$message({
+      }).then(() => {
-          message: this.$t('prompt.success'),
+          this.$http['post']('/events/item/deleteComment', { commentIds: [val] }).then(({ data: res }) => {
-          type: 'success',
+          if (res.code !== 0) {
-          duration: 500,
+            return this.$message.error(res.msg)
-          onClose: () => {
-            this.getCommentList()
           }
-        })
+          this.$message({
-      }).catch(() => { })
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.getCommentList()
+            }
+          })
+        }).catch(() => { })
+      }).catch(() => {
+                      
+      })
     },
     pageSizeChangeHandleNew (val) {
       this.pageIndex = 1

src/views/modules/events/item-timeout-detail-view.vue

@@ -240,19 +240,27 @@
                 this.previewImgList.push(url)
             },
             deleteComment (val) {
-                this.$http['post']('/events/item/deleteComment', { commentIds: [val] }).then(({ data: res }) => {
+                this.$confirm('确定要屏蔽该评论吗？屏蔽后不可恢复。', '提示', {
-                    if (res.code !== 0) {
+                confirmButtonText: '确定',
-                        return this.$message.error(res.msg)
+                cancelButtonText: '取消',
-                    }
+                type: 'warning'
-                    this.$message({
+                }).then(() => {
-                        message: this.$t('prompt.success'),
+                    this.$http['post']('/events/item/deleteComment', { commentIds: [val] }).then(({ data: res }) => {
-                        type: 'success',
+                        if (res.code !== 0) {
-                        duration: 500,
+                            return this.$message.error(res.msg)
-                        onClose: () => {
-                            this.getCommentList()
                         }
-                    })
+                        this.$message({
-                }).catch(() => {})
+                            message: this.$t('prompt.success'),
+                            type: 'success',
+                            duration: 500,
+                            onClose: () => {
+                                this.getCommentList()
+                            }
+                        })
+                    }).catch(() => {})
+                }).catch(() => {
+                                
+                })
             },
             getInfo () {
                 this.$http.get(`/events/item/contentDetail/${this.dataForm.id}`).then(({ data: res }) => {

src/views/modules/sys/resourcestotalrelation-list.vue

@@ -10,10 +10,10 @@
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataListSearch()">
             <div>
                 <el-form-item label="统计名称" prop="totalName">
-                    <el-input v-model="dataForm.totalName" placeholder="统计名称" clearable></el-input>
+                    <el-input v-model="dataForm.totalName" placeholder="统计名称" clearable @keyup.native="btKeyUpTotalName"></el-input>
                 </el-form-item>
                 <el-form-item label="统计类型" prop="totalType">
-                    <el-input v-model="dataForm.totalType" placeholder="统计类型" clearable></el-input>
+                    <el-input v-model="dataForm.totalType" placeholder="统计类型" clearable @keyup.native="btKeyUpTotalType"></el-input>
                 </el-form-item>
             </div>
             <div>
@@ -31,10 +31,10 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" @click="getDataListSearch()">{{ $t('query') }}</el-button>
+                    <el-button type="success" @click="getDataListSearch()">{{ $t('query') }}</el-button>
                 </el-form-item>
                 <el-form-item>
-                    <el-button v-if="$hasPermission('workRecord:relation:save')" type="success" @click="selectHandle()">{{ "新增" }}</el-button>
+                    <el-button v-if="$hasPermission('workRecord:relation:save')" type="primary" @click="selectHandle()">{{ "新增" }}</el-button>
                 </el-form-item>
             </div>
         </el-form>
@@ -104,12 +104,24 @@ export default {
   methods: {
     init () {
       this.visible = true
+      this.dataForm.totalName = ''
+      this.dataForm.totalType = ''
+      this.dataForm.totalStyle = ''
+      this.dataForm.autoFlag = ''
       this.$nextTick(() => {
         if (this.dataForm.resourceId) {
           this.getDataList()
         }
       })
     },
+    btKeyUpTotalName (e) {
+      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '')
+      this.dataForm.totalName = e.target.value
+    },
+    btKeyUpTotalType (e) {
+      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '')
+      this.dataForm.totalType = e.target.value
+    },
     selectData(){
         this.page = 1
         this.getDataList()

src/views/modules/user/partymembers-add-or-update.vue

@@ -12,7 +12,7 @@
       <el-form-item label="姓名"
                     prop="realName">
         <el-input v-model="dataForm.realName"
-                  placeholder="姓名" style="width:90%;"></el-input>
+                  placeholder="姓名" style="width:90%;" maxlength="10"></el-input>
       </el-form-item>
       <el-form-item label="手机号"
                     prop="mobile">
@@ -127,10 +127,12 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         mobile: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确号码格式', trigger: 'blur' }
         ],
         identityNo: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /(^\d{15}$)|bai(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确身份证号', trigger: 'blur' }
         ],
         streetId: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }

src/views/modules/user/partymembers.vue

@@ -77,7 +77,7 @@
         </el-form-item>
         <el-form-item>
           <el-button v-if="$hasPermission('partymembers:save')"
-                     type="success"
+                     type="primary"
                      @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
         </el-form-item>
         <!-- <el-form-item>
@@ -90,7 +90,7 @@
                      @click="exportHandle()">{{ $t('export') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" v-if="$hasPermission('partymembers:exporttemplate')"
+          <el-button type="success" v-if="$hasPermission('partymembers:exporttemplate')"
                      @click="exportMoudleHandle()">导出模板</el-button>
         </el-form-item>
         <el-form-item>