优化前端页面 (flipped-aurora#1439)

* fix: 点击重置按钮时表格未刷新; 修复点击重置按钮时，筛选项被清空，但是下方表格未刷新的问题; * fix: 未限制输入范围导致的报错; 后端使用了int类型，未限制输入会导致输入过大的数字时报错； * fix: 未限制输入类型; 使用文本框会导致输入内容的类型未被限制，后端使用了int类型，输入非数字字符时会导致json绑定错误; * feat: 添加创建时间验证规则; 后端仅在开始时间和结束时间同时有值时才进行搜索，所以前端会出现只选择一项内容时，搜索结果不符合预期的问题。添加验证规则使搜索结果符合预期。 * feat: 优化创建时间搜索项; 选择开始时间后，自动禁用结束时间中早于开始时间的选项；选择结束时间后，自动禁用开始时间中晚于结束时间的选项；增加校验规则，校验开始时间是否早于结束时间；点击搜索按钮时如果未通过校验则不进行搜索； * fix: 角色id输入非数字字符时点击提交按钮后变为NaN; * fix: 角色ID输入超大数字时报错; 后端使用int，输入的数字溢出会导致报错，所以限制输入长度； * feat: 时间类型的选项增加验证规则; 选择开始时间后，自动禁用结束时间中早于开始时间的选项；选择结束时间后，自动禁用开始时间中晚于结束时间的选项；增加校验规则，校验开始时间是否早于结束时间；点击搜索按钮时如果未通过校验则不进行搜索； * fix: 补全搜索form的ref引用; * feat: 添加时间类型的搜索范围提示; 时间类型的搜索范围是开始时间（包含）至结束时间（不包含），为避免歧义，增加相关提示； * feat: 将"时间"修改为"日期"确保字段名称一致性; * feat: 将列名称从"按钮组"修改为更友好的"操作"; * feat: 将dialog标题修改为更友好的内容; * fix: 使用了计算值的属性没有进行绑定; * fix: 必填字段可以只填写空格; --------- Co-authored-by: 奇淼（piexlmax <[email protected]>
Robtzz · Jun 10, 2023 · e59296d · e59296d
1 parent 852cb47
commit e59296d
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 34 deletions.
diff --git a/server/resource/autocode_template/web/table.vue.tpl b/server/resource/autocode_template/web/table.vue.tpl
@@ -1,11 +1,19 @@
 <template>
   <div>
     <div class="gva-search-box">
-      <el-form :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter="onSubmit">
-      <el-form-item label="创建时间">
-      <el-date-picker v-model="searchInfo.startCreatedAt" type="datetime" placeholder="开始时间"></el-date-picker>
+      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" :rules="searchRule" @keyup.enter="onSubmit">
+      <el-form-item label="创建日期" prop="createdAt">
+      <template #label>
+        <span>
+          创建日期
+          <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
+            <el-icon><QuestionFilled /></el-icon>
+          </el-tooltip>
+        </span>
+      </template>
+      <el-date-picker v-model="searchInfo.startCreatedAt" type="datetime" placeholder="开始日期" :disabled-date="time=> searchInfo.endCreatedAt ? time.getTime() > searchInfo.endCreatedAt.getTime() : false"></el-date-picker>
        —
-      <el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束时间"></el-date-picker>
+      <el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
       </el-form-item>
            {{- range .Fields}}  {{- if .FieldSearchType}} {{- if eq .FieldType "bool" }}
             <el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
@@ -29,7 +37,7 @@
             </el-select>
             </el-form-item>
             {{- else}}
-        <el-form-item label="{{.FieldDesc}}">
+        <el-form-item label="{{.FieldDesc}}" prop="{{.FieldJson}}">
 
 
         {{- if eq .FieldType "float64" "int"}}
@@ -48,9 +56,17 @@
           {{- end}}
         {{- else if eq .FieldType "time.Time"}}
             {{if eq .FieldSearchType "BETWEEN" "NOT BETWEEN"}}
-            <el-date-picker v-model="searchInfo.start{{.FieldName}}" type="datetime" placeholder="搜索条件（起）"></el-date-picker>
+            <template #label>
+            <span>
+              {{.FieldDesc}}
+              <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
+                <el-icon><QuestionFilled /></el-icon>
+              </el-tooltip>
+            </span>
+          </template>
+            <el-date-picker v-model="searchInfo.start{{.FieldName}}" type="datetime" placeholder="开始日期" :disabled-date="time=> searchInfo.end{{.FieldName}} ? time.getTime() > searchInfo.end{{.FieldName}}.getTime() : false"></el-date-picker>
             —
-            <el-date-picker v-model="searchInfo.end{{.FieldName}}" type="datetime" placeholder="搜索条件（止）"></el-date-picker>
+            <el-date-picker v-model="searchInfo.end{{.FieldName}}" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.start{{.FieldName}} ? time.getTime() < searchInfo.start{{.FieldName}}.getTime() : false"></el-date-picker>
            {{- else}}
            <el-date-picker v-model="searchInfo.{{.FieldJson}}" type="datetime" placeholder="搜索条件"></el-date-picker>
           {{- end}}
@@ -127,7 +143,7 @@
         <el-table-column {{- if .Sort}} sortable{{- end}} align="left" label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120" />
         {{- end }}
         {{- end }}
-        <el-table-column align="left" label="按钮组">
+        <el-table-column align="left" label="操作">
             <template #default="scope">
             <el-button type="primary" link icon="edit" class="table-button" @click="update{{.StructName}}Func(scope.row)">变更</el-button>
             <el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
@@ -146,7 +162,7 @@
             />
         </div>
     </div>
-    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作" destroy-on-close>
+    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type==='create'?'添加':'修改'" destroy-on-close>
       <el-form :model="formData" label-position="right" ref="elFormRef" :rules="rule" label-width="80px">
     {{- range .Fields}}
         <el-form-item label="{{.FieldDesc}}:"  prop="{{.FieldJson}}" >
@@ -260,13 +276,51 @@ const rule = reactive({
                    required: true,
                    message: '{{ .ErrorText }}',
                    trigger: ['input','blur'],
-               }],
+               },
+               {
+                   whitespace: true,
+                   message: '不能只输入空格',
+                   trigger: ['input', 'blur'],
+              }],
             {{- end }}
     {{- end }}
 })
 
-const elFormRef = ref()
+const searchRule = reactive({
+  createdAt: [
+    { validator: (rule, value, callback) => {
+      if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
+        callback(new Error('请填写结束日期'))
+      } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
+        callback(new Error('请填写开始日期'))
+      } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
+        callback(new Error('开始日期应当早于结束日期'))
+      } else {
+        callback()
+      }
+    }, trigger: 'change' }
+  ],
+  {{- range .Fields }}
+    {{- if .FieldSearchType}} 
+      {{- if eq .FieldType "time.Time" }}
+        {{.FieldJson }} : [{ validator: (rule, value, callback) => {
+        if (searchInfo.value.start{{.FieldName}} && !searchInfo.value.end{{.FieldName}}) {
+          callback(new Error('请填写结束日期'))
+        } else if (!searchInfo.value.start{{.FieldName}} && searchInfo.value.end{{.FieldName}}) {
+          callback(new Error('请填写开始日期'))
+        } else if (searchInfo.value.start{{.FieldName}} && searchInfo.value.end{{.FieldName}} && (searchInfo.value.start{{.FieldName}}.getTime() === searchInfo.value.end{{.FieldName}}.getTime() || searchInfo.value.start{{.FieldName}}.getTime() > searchInfo.value.end{{.FieldName}}.getTime())) {
+          callback(new Error('开始日期应当早于结束日期'))
+        } else {
+          callback()
+        }
+      }, trigger: 'change' }],
+      {{- end }}
+    {{- end }}
+  {{- end }}
+})
 
+const elFormRef = ref()
+const elSearchFormRef = ref()
 
 // =========== 表格控制部分 ===========
 const page = ref(1)
@@ -292,13 +346,16 @@ const onReset = () => {
 
 // 搜索
 const onSubmit = () => {
-  page.value = 1
-  pageSize.value = 10
-{{- range .Fields}}{{- if eq .FieldType "bool" }}
-  if (searchInfo.value.{{.FieldJson}} === ""){
-      searchInfo.value.{{.FieldJson}}=null
-  }{{ end }}{{ end }}
-  getTableData()
+  elSearchFormRef.value?.validate(async(valid) => {
+    if (!valid) return
+    page.value = 1
+    pageSize.value = 10
+    {{- range .Fields}}{{- if eq .FieldType "bool" }}
+    if (searchInfo.value.{{.FieldJson}} === ""){
+        searchInfo.value.{{.FieldJson}}=null
+    }{{ end }}{{ end }}
+    getTableData()
+  })
 }
 
 // 分页

diff --git a/web/src/view/example/customer/customer.vue b/web/src/view/example/customer/customer.vue
@@ -21,7 +21,7 @@
         <el-table-column align="left" label="姓名" prop="customerName" width="120" />
         <el-table-column align="left" label="电话" prop="customerPhoneData" width="120" />
         <el-table-column align="left" label="接入人ID" prop="sysUserId" width="120" />
-        <el-table-column align="left" label="按钮组" min-width="160">
+        <el-table-column align="left" label="操作" min-width="160">
           <template #default="scope">
             <el-button type="primary" link icon="edit" @click="updateCustomer(scope.row)">变更</el-button>
             <el-popover v-model="scope.row.visible" placement="top" width="160">

diff --git a/web/src/view/superAdmin/authority/authority.vue b/web/src/view/superAdmin/authority/authority.vue
@@ -69,7 +69,7 @@
           />
         </el-form-item>
         <el-form-item label="角色ID" prop="authorityId">
-          <el-input v-model="form.authorityId" :disabled="dialogType==='edit'" autocomplete="off" />
+          <el-input v-model="form.authorityId" :disabled="dialogType==='edit'" autocomplete="off" maxlength="15" />
         </el-form-item>
         <el-form-item label="角色姓名" prop="authorityName">
           <el-input v-model="form.authorityName" autocomplete="off" />
@@ -253,16 +253,9 @@ const closeDialog = () => {
 // 确定弹窗
 
 const enterDialog = () => {
-  form.value.authorityId = Number(form.value.authorityId)
-  if (form.value.authorityId === 0) {
-    ElMessage({
-      type: 'error',
-      message: '角色id不能为0'
-    })
-    return false
-  }
   authorityForm.value.validate(async valid => {
     if (valid) {
+      form.value.authorityId = Number(form.value.authorityId)
       switch (dialogType.value) {
         case 'add':
           {

diff --git a/web/src/view/superAdmin/dictionary/sysDictionary.vue b/web/src/view/superAdmin/dictionary/sysDictionary.vue
@@ -80,7 +80,7 @@
 
         <el-table-column align="left" label="描述" prop="desc" width="280" />
 
-        <el-table-column align="left" label="按钮组">
+        <el-table-column align="left" label="操作">
           <template #default="scope">
             <el-button
 
@@ -145,7 +145,7 @@
     <el-dialog
       v-model="dialogFormVisible"
       :before-close="closeDialog"
-      title="弹窗操作"
+      :title="type==='create'?'添加字典':'修改字典'"
     >
       <el-form
         ref="dialogForm"

diff --git a/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue b/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
@@ -6,7 +6,7 @@
           <el-input v-model="searchInfo.label" placeholder="搜索条件" />
         </el-form-item>
         <el-form-item label="字典值">
-          <el-input v-model="searchInfo.value" placeholder="搜索条件" />
+          <el-input-number v-model="searchInfo.value" placeholder="搜索条件" min="-2147483648" max="2147483647"/>
         </el-form-item>
         <el-form-item label="启用状态" prop="status">
           <el-select v-model="searchInfo.status" placeholder="请选择">
@@ -46,7 +46,7 @@
 
         <el-table-column align="left" label="排序标记" prop="sort" width="120" />
 
-        <el-table-column align="left" label="按钮组">
+        <el-table-column align="left" label="操作">
           <template #default="scope">
             <el-button type="primary" link icon="edit" @click="updateSysDictionaryDetailFunc(scope.row)">变更</el-button>
             <el-popover v-model="scope.row.visible" placement="top" width="160">
@@ -76,7 +76,7 @@
       </div>
     </div>
 
-    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
+    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type==='create'?'添加字典项':'修改字典项'">
       <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="110px">
         <el-form-item label="展示值" prop="label">
           <el-input
@@ -94,6 +94,8 @@
             placeholder="请输入字典值"
             clearable
             :style="{width: '100%'}"
+            min="-2147483648"
+            max="2147483647"
           />
         </el-form-item>
         <el-form-item label="启用状态" prop="status" required>
@@ -177,6 +179,7 @@ const tableData = ref([])
 const searchInfo = ref({ sysDictionaryID: Number(route.params.id) })
 const onReset = () => {
   searchInfo.value = { sysDictionaryID: Number(route.params.id) }
+  getTableData()
 }
 
 // 条件搜索前端看此方法

diff --git a/web/src/view/superAdmin/operation/sysOperationRecord.vue b/web/src/view/superAdmin/operation/sysOperationRecord.vue
@@ -89,7 +89,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="按钮组">
+        <el-table-column align="left" label="操作">
           <template #default="scope">
             <el-popover v-model="scope.row.visible" placement="top" width="160">
               <p>确定要删除吗？</p>