Merge pull request #9853 from ulleo/dev

feat(X-Pack): 数据填报表单日期组件支持设置年/年月

core/backend/src/main/java/io/dataease/service/datafill/CommentWriteHandler.java

@@ -42,7 +42,29 @@ public class CommentWriteHandler implements RowWriteHandler {
                 StringBuilder options = new StringBuilder();
                 switch (field.getSettings().getMapping().getType()) {
                     case datetime:
-                        example = "\n(日期格式: yyyy/MM/dd" + (field.getSettings().isEnableTime() ? " HH:mm:ss" : "") + ")";
+                        String dateFormat = "yyyy/MM/dd";
+                        switch (field.getSettings().getDateType()) {
+                            case "year":
+                                dateFormat = "yyyy";
+                                break;
+                            case "month":
+                            case "monthrange":
+                                dateFormat = "yyyy/MM";
+                                break;
+                            case "datetime":
+                            case "datetimerange":
+                                dateFormat = "yyyy/MM/dd HH:mm:ss";
+                                break;
+                            case "date":
+                            case "daterange":
+                                dateFormat = "yyyy/MM/dd";
+                                break;
+                            default:
+                                if (field.getSettings().isEnableTime()) { //兼容旧版
+                                    dateFormat = "yyyy/MM/dd HH:mm:ss";
+                                }
+                        }
+                        example = "\n(日期格式: " + dateFormat + ")";
                         break;
                     case number:
                         example = "\n(整形数字)";

core/backend/src/main/java/io/dataease/service/datafill/DataFillDataService.java

@@ -934,16 +934,53 @@ public class DataFillDataService {
             return null;
         }
         SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); //默认会拿到这种格式的
-        if (field.getSettings().isEnableTime()) {
+        switch (field.getSettings().getDateType()) {
-            sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+            case "year":
+                sdf = new SimpleDateFormat("yyyy");
+                break;
+            case "month":
+            case "monthrange":
+                sdf = new SimpleDateFormat("yyyy-MM");
+                break;
+            case "datetime":
+            case "datetimerange":
+                sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+                break;
+            case "date":
+            case "daterange":
+                sdf = new SimpleDateFormat("yyyy-MM-dd");
+                break;
+            default:
+                if (field.getSettings().isEnableTime()) { //兼容旧版
+                    sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+                }
         }
+
         Date date = null;
         try {
             date = sdf.parse(excelRowData);
         } catch (ParseException e) {
             sdf = new SimpleDateFormat("yyyy/MM/dd"); //以防万一也加上这种
-            if (field.getSettings().isEnableTime()) {
+            switch (field.getSettings().getDateType()) {
-                sdf = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
+                case "year":
+                    sdf = new SimpleDateFormat("yyyy");
+                    break;
+                case "month":
+                case "monthrange":
+                    sdf = new SimpleDateFormat("yyyy/MM");
+                    break;
+                case "datetime":
+                case "datetimerange":
+                    sdf = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
+                    break;
+                case "date":
+                case "daterange":
+                    sdf = new SimpleDateFormat("yyyy/MM/dd");
+                    break;
+                default:
+                    if (field.getSettings().isEnableTime()) { //兼容旧版
+                        sdf = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
+                    }
             }
             date = sdf.parse(excelRowData);
         }

core/frontend/src/lang/en.js

@@ -648,6 +648,7 @@ export default {
       start_hint_word: 'Start Hint Word',
       end_hint_word: 'End Hint Word',
       input_type: 'Input Type',
+      date_type: 'Date Format',
       check: 'Check',
       set_required: 'Set Required',
       set_unique: 'Set Unique',

core/frontend/src/lang/tw.js

@@ -648,6 +648,7 @@ export default {
       start_hint_word: '開始提示詞',
       end_hint_word: '結束提示詞',
       input_type: '格式類型',
+      date_type: '展示粒度',
       check: '校驗',
       set_required: '設置為必填項',
       set_unique: '不允許重復值',

core/frontend/src/lang/zh.js

@@ -646,6 +646,7 @@ export default {
       start_hint_word: '开始提示词',
       end_hint_word: '结束提示词',
       input_type: '格式类型',
+      date_type: '展示粒度',
       check: '校验',
       set_required: '设置为必填项',
       set_unique: '不允许重复值',

core/frontend/src/views/dataFilling/form/EditFormData.vue

@@ -91,6 +91,12 @@ export default {
     forEach(this.forms, v => {
       if (!v.removed) {
         const f = cloneDeep(v)
+        if (f.type === 'date' && f.settings.dateType === undefined) { // 兼容旧的
+          f.settings.dateType = f.settings.enableTime ? 'datetime' : 'date'
+        }
+        if (f.type === 'dateRange' && f.settings.dateType === undefined) { // 兼容旧的
+          f.settings.dateType = f.settings.enableTime ? 'datetimerange' : 'daterange'
+        }
         if (f.type === 'dateRange') {
           const _start = this.data[f.settings.mapping.columnName1]
           const _end = this.data[f.settings.mapping.columnName2]
@@ -349,46 +355,22 @@ export default {
               </el-checkbox>
             </el-checkbox-group>
             <el-date-picker
-              v-else-if="item.type === 'date' && !item.settings.enableTime"
+              v-else-if="item.type === 'date'"
               v-model="item.value"
               :required="item.settings.required"
               :readonly="readonly"
-              type="date"
+              :type="item.settings.dateType"
               :placeholder="item.settings.placeholder"
               style="width: 100%"
               size="small"
               :picker-options="pickerOptions"
             />
             <el-date-picker
-              v-else-if="item.type === 'date' && item.settings.enableTime"
+              v-else-if="item.type === 'dateRange'"
               v-model="item.value"
               :required="item.settings.required"
               :readonly="readonly"
-              type="datetime"
+              :type="item.settings.dateType"
-              :placeholder="item.settings.placeholder"
-              style="width: 100%"
-              size="small"
-              :picker-options="pickerOptions"
-            />
-            <el-date-picker
-              v-else-if="item.type === 'dateRange' && !item.settings.enableTime"
-              v-model="item.value"
-              :required="item.settings.required"
-              :readonly="readonly"
-              type="daterange"
-              :range-separator="item.settings.rangeSeparator"
-              :start-placeholder="item.settings.startPlaceholder"
-              :end-placeholder="item.settings.endPlaceholder"
-              style="width: 100%"
-              size="small"
-              :picker-options="pickerOptions"
-            />
-            <el-date-picker
-              v-else-if="item.type === 'dateRange' && item.settings.enableTime"
-              v-model="item.value"
-              :required="item.settings.required"
-              :readonly="readonly"
-              type="datetimerange"
               :range-separator="item.settings.rangeSeparator"
               :start-placeholder="item.settings.startPlaceholder"
               :end-placeholder="item.settings.endPlaceholder"

core/frontend/src/views/dataFilling/form/ViewTable.vue

@@ -180,9 +180,9 @@
                 <span
                   v-if="c.date && scope.row.data[c.props]"
                   style="white-space:nowrap; width: fit-content"
-                  :title="formatDate(scope.row.data[c.props], c.enableTime)"
+                  :title="formatDate(scope.row.data[c.props], c.dateType)"
                 >
-                  {{ formatDate(scope.row.data[c.props], c.enableTime) }}
+                  {{ formatDate(scope.row.data[c.props], c.dateType) }}
                 </span>
                 <template v-else-if="(c.type === 'select' && c.multiple || c.type === 'checkbox') && scope.row.data[c.props]">
                   <div
@@ -623,7 +623,7 @@ export default {
             props: f.settings?.mapping?.columnName1,
             label: f.settings?.name,
             date: true,
-            enableTime: f.settings?.enableTime,
+            dateType: f.settings?.dateType ? f.settings?.dateType : (f.settings?.enableTime ? 'datetimerange' : 'daterange'),
             type: f.type,
             multiple: !!f.settings.multiple,
             rangeIndex: 0
@@ -632,7 +632,7 @@ export default {
             props: f.settings?.mapping?.columnName2,
             label: f.settings?.name,
             date: true,
-            enableTime: f.settings?.enableTime,
+            dateType: f.settings?.dateType ? f.settings?.dateType : (f.settings?.enableTime ? 'datetimerange' : 'daterange'),
             type: f.type,
             multiple: !!f.settings.multiple,
             rangeIndex: 1
@@ -642,7 +642,7 @@ export default {
             props: f.settings?.mapping?.columnName,
             label: f.settings?.name,
             date: f.type === 'date',
-            enableTime: f.type === 'date' && f.settings?.enableTime,
+            dateType: f.type === 'date' ? (f.settings?.dateType ? f.settings?.dateType : (f.settings?.enableTime ? 'datetime' : 'date')) : undefined,
             type: f.type,
             multiple: !!f.settings.multiple
           })
@@ -961,14 +961,21 @@ export default {
       }).catch(() => {
       })
     },
-    formatDate(value, enableTime) {
+    formatDate(value, dateType) {
       if (!value) {
         return value
       }
-      if (enableTime) {
+      switch (dateType) {
-        return value.format('yyyy-MM-dd hh:mm:ss')
+        case 'year':
-      } else {
+          return value.format('yyyy')
-        return value.format('yyyy-MM-dd')
+        case 'month':
+        case 'monthrange':
+          return value.format('yyyy-MM')
+        case 'datetime':
+        case 'datetimerange':
+          return value.format('yyyy-MM-dd hh:mm:ss')
+        default:
+          return value.format('yyyy-MM-dd')
       }
     },
 

core/frontend/src/views/dataFilling/form/create.vue

@@ -30,6 +30,17 @@ export default {
       disableCreateIndex: false,
       requiredRule: { required: true, message: this.$t('commons.required'), trigger: ['blur', 'change'] },
       duplicateOptionRule: { validator: checkDuplicateOptionValidator, trigger: ['blur', 'change'] },
+      dateTypes: [
+        { name: this.$t('chart.y'), value: 'year' },
+        { name: this.$t('chart.y_M'), value: 'month' },
+        { name: this.$t('chart.y_M_d'), value: 'date' },
+        { name: this.$t('chart.y_M_d_H_m_s'), value: 'datetime' }
+      ],
+      dateRangeTypes: [
+        { name: this.$t('chart.y_M'), value: 'monthrange' },
+        { name: this.$t('chart.y_M_d'), value: 'daterange' },
+        { name: this.$t('chart.y_M_d_H_m_s'), value: 'datetimerange' }
+      ],
       inputTypes: [
         { type: 'text', name: this.$t('data_fill.form.text'), rules: [] },
         { type: 'number', name: this.$t('data_fill.form.number'), rules: [] },
@@ -150,7 +161,8 @@ export default {
           id: undefined,
           settings: {
             name: this.$t('commons.component.date'),
-            enableTime: false,
+            enableTime: false, // 弃用
+            dateType: 'date',
             placeholder: '',
             required: false,
             mapping: {
@@ -169,7 +181,8 @@ export default {
           id: undefined,
           settings: {
             name: this.$t('commons.component.dateRange'),
-            enableTime: false,
+            enableTime: false, // 弃用
+            dateType: 'daterange',
             rangeSeparator: '-',
             startPlaceholder: '',
             endPlaceholder: '',
@@ -265,13 +278,20 @@ export default {
         this.formSettings = tempData
         this.formSettings.table = tempData.tableName
         this.formSettings.folder = tempData.pid
-        this.formSettings.forms = filter(JSON.parse(res.data.forms), f => !f.removed)
+        const tempForms = filter(JSON.parse(res.data.forms), f => !f.removed)
-        forEach(this.formSettings.forms, f => {
+        forEach(tempForms, f => {
           f.old = true
           if (f.type === 'checkbox' || f.type === 'select' && f.settings.multiple) {
             f.value = []
           }
+          if (f.type === 'date' && f.settings.dateType === undefined) { // 兼容旧的
+            f.settings.dateType = f.settings.enableTime ? 'datetime' : 'date'
+          }
+          if (f.type === 'dateRange' && f.settings.dateType === undefined) { // 兼容旧的
+            f.settings.dateType = f.settings.enableTime ? 'datetimerange' : 'daterange'
+          }
         })
+        this.formSettings.forms = tempForms
         this.formSettings.oldForms = JSON.parse(res.data.forms)
         this.formSettings.tableIndexes = JSON.parse(res.data.tableIndexes)
 
@@ -717,43 +737,21 @@ export default {
                       </el-checkbox>
                     </el-checkbox-group>
                     <el-date-picker
-                      v-else-if="item.type === 'date' && !item.settings.enableTime"
+                      v-else-if="item.type === 'date'"
                       :key="item.id + 'date'"
                       v-model="item.value"
                       :required="item.settings.required"
-                      type="date"
+                      :type="item.settings.dateType"
                       :placeholder="item.settings.placeholder"
                       style="width: 100%"
                       size="small"
                     />
                     <el-date-picker
-                      v-else-if="item.type === 'date' && item.settings.enableTime"
+                      v-else-if="item.type === 'dateRange'"
-                      :key="item.id + 'dateEnableTime'"
+                      :key="item.id + 'dateRange'"
                       v-model="item.value"
                       :required="item.settings.required"
-                      type="datetime"
+                      :type="item.settings.dateType"
-                      :placeholder="item.settings.placeholder"
-                      style="width: 100%"
-                      size="small"
-                    />
-                    <el-date-picker
-                      v-else-if="item.type === 'dateRange' && !item.settings.enableTime"
-                      :key="item.id + 'dateRangeEnableTime'"
-                      v-model="item.value"
-                      :required="item.settings.required"
-                      type="daterange"
-                      :range-separator="item.settings.rangeSeparator"
-                      :start-placeholder="item.settings.startPlaceholder"
-                      :end-placeholder="item.settings.endPlaceholder"
-                      style="width: 100%"
-                      size="small"
-                    />
-                    <el-date-picker
-                      v-else-if="item.type === 'dateRange' && item.settings.enableTime"
-                      :key="item.id + 'datetimerangeRangeEnableTime'"
-                      v-model="item.value"
-                      :required="item.settings.required"
-                      type="datetimerange"
                       :range-separator="item.settings.rangeSeparator"
                       :start-placeholder="item.settings.startPlaceholder"
                       :end-placeholder="item.settings.endPlaceholder"
@@ -918,6 +916,27 @@ export default {
                 </el-select>
               </el-form-item>
 
+              <el-form-item
+                v-if="selectedComponentItem.type === 'date' || selectedComponentItem.type === 'dateRange'"
+                prop="dateType"
+                class="form-item"
+                :label="$t('data_fill.form.date_type')"
+                :rules="[requiredRule]"
+              >
+                <el-select
+                  v-model="selectedComponentItem.settings.dateType"
+                  style="width: 100%"
+                  required
+                >
+                  <el-option
+                    v-for="(x) in selectedComponentItem.type === 'date' ? dateTypes : dateRangeTypes"
+                    :key="x.value"
+                    :label="x.name"
+                    :value="x.value"
+                  />
+                </el-select>
+              </el-form-item>
+
               <div class="right-check-div">
                 <div class="m-label-container">
                   <span style="width: unset; font-weight: bold">
@@ -956,17 +975,6 @@ export default {
                     {{ $t('data_fill.form.set_multiple') }}
                   </el-checkbox>
                 </el-form-item>
-                <el-form-item
-                  v-if="selectedComponentItem.type === 'date' || selectedComponentItem.type === 'dateRange'"
-                  prop="enableTime"
-                  class="form-item"
-                >
-                  <el-checkbox
-                    v-model="selectedComponentItem.settings.enableTime"
-                  >
-                    {{ $t('data_fill.form.use_datetime') }}
-                  </el-checkbox>
-                </el-form-item>
 
               </div>
 

core/frontend/src/views/dataFilling/myTask/index.vue

@@ -212,39 +212,17 @@ export default {
           this.selectedFormTitle = res.data.name
           this.forms = JSON.parse(res.data.forms)
 
-          const _list = []
+          const dateFormatColumns = []
           forEach(this.forms, f => {
             if (f.type === 'dateRange') {
-              _list.push({
+              dateFormatColumns.push(f.settings?.mapping?.columnName1)
-                props: f.settings?.mapping?.columnName1,
+              dateFormatColumns.push(f.settings?.mapping?.columnName2)
-                label: f.settings?.name,
-                date: true,
-                enableTime: f.settings?.enableTime,
-                type: f.type,
-                multiple: !!f.settings.multiple,
-                rangeIndex: 0
-              })
-              _list.push({
-                props: f.settings?.mapping?.columnName2,
-                label: f.settings?.name,
-                date: true,
-                enableTime: f.settings?.enableTime,
-                type: f.type,
-                multiple: !!f.settings.multiple,
-                rangeIndex: 1
-              })
             } else {
-              _list.push({
+              if (f.type === 'date') {
-                props: f.settings?.mapping?.columnName,
+                dateFormatColumns.push(f.settings?.mapping?.columnName)
-                label: f.settings?.name,
+              }
-                date: f.type === 'date',
-                enableTime: f.type === 'date' && f.settings?.enableTime,
-                type: f.type,
-                multiple: !!f.settings.multiple
-              })
             }
           })
-          const dateFormatColumns = map(filter(_list, c => c.date), 'props')
 
           searchTable(row.formId, {
             primaryKeyValue: row.valueId,

sdk/dataease-plugin-common/src/main/java/io/dataease/plugins/common/dto/datafill/ExtTableField.java

@@ -39,6 +39,7 @@ public class ExtTableField implements Serializable {
 
         private ExtTableFieldMapping mapping;
 
+        //弃用
         private boolean enableTime;
 
         private String rangeSeparator;
@@ -47,6 +48,8 @@ public class ExtTableField implements Serializable {
 
         private String inputType;
 
+        private String dateType;
+
         private String placeholder;
         private String startPlaceholder;
         private String endPlaceholder;