cloud-web-corejs 1.0.54-dev.652 → 1.0.54-dev.653

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.652",
+  "version": "1.0.54-dev.653",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/components/xform/form-designer/form-widget/field-widget/date-widget.vue

@@ -10,7 +10,7 @@
                     :format="field.options.format" :value-format="field.options.valueFormat"
                     :placeholder="getI18nLabel(field.options.placeholder || '选择日期')"
                     @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                    @change="handleChangeEvent"
+                    @change="handleDateChangeEvent"
                     :picker-options="pickerOptions"
     >
     </el-date-picker>
@@ -25,11 +25,12 @@ import FormItemWrapper from './form-item-wrapper'
 import emitter from '../../../../../components/xform/utils/emitter'
 import i18n from "../../../../../components/xform/utils/i18n";
 import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
+import dateLimitMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/date-limit-mixin";
 
 export default {
   name: "date-widget",
   componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
-  mixins: [emitter, fieldMixin, i18n],
+  mixins: [emitter, fieldMixin, i18n, dateLimitMixin],
   props: {
     field: Object,
     parentWidget: Object,
@@ -73,6 +74,20 @@ export default {
       return this.fieldModel ? this.fieldModel : ''
     },
   },
+  watch: {
+    "field.options.limitStartField"() {
+      this.initDateLimitPickerOptions();
+    },
+    "field.options.limitEndField"() {
+      this.initDateLimitPickerOptions();
+    },
+    "field.options.minDate"() {
+      this.initDateLimitPickerOptions();
+    },
+    "field.options.maxDate"() {
+      this.initDateLimitPickerOptions();
+    },
+  },
   beforeCreate() {
     /* 这里不能访问方法和属性！！ */
   },
@@ -86,19 +101,12 @@ export default {
     this.buildFieldRules()
 
     this.handleOnCreated()
-
-    if(['year','month','date'].includes(this.field.options.type)){
-      this.pickerOptions.shortcuts = [{
-        text: this.$t1('此刻'),
-        onClick(picker) {
-          picker.$emit('pick', new Date());
-        }
-      }]
-    }
+    this.initDateLimitPickerOptions()
   },
 
   mounted() {
     this.handleOnMounted()
+    this.initDateLimitWatch()
   },
 
   beforeDestroy() {
@@ -106,11 +114,16 @@ export default {
   },
 
   methods: {
+    handleDateChangeEvent(value) {
+      if (this.isDateLimitViolated(value)) {
+        this.$message.warning(this.getDateLimitViolationMessage());
+        this.fieldModel = this.oldFieldValue;
+        return;
+      }
+      this.handleChangeEvent(value);
+    },
     setNow() {
       this.$refs.fieldEditor.panel.changeToNow()
-      /*this.selectedDate = new Date();
-      // 可选：点击后自动关闭弹窗
-      this.$refs.datePicker.pickerVisible = false;*/
     }
   }
 }

package/src/components/xform/form-designer/form-widget/field-widget/mixins/date-limit-mixin.js

@@ -0,0 +1,157 @@
+export default {
+  methods: {
+    getDateLimitOptions() {
+      return this.field.options || {};
+    },
+    initDateLimitPickerOptions() {
+      const pickerOptions = { ...(this.pickerOptions || {}) };
+      if (["year", "month", "date", "datetime"].includes(this.field.options.type)) {
+        if (!pickerOptions.shortcuts) {
+          pickerOptions.shortcuts = [
+            {
+              text: this.$t1("此刻"),
+              onClick(picker) {
+                picker.$emit("pick", new Date());
+              },
+            },
+          ];
+        }
+      }
+      pickerOptions.disabledDate = (time) => this.isDateLimitDisabled(time);
+      this.pickerOptions = pickerOptions;
+    },
+    initDateLimitWatch() {
+      if (this.designState) {
+        return;
+      }
+      const { limitStartField, limitEndField } = this.getDateLimitOptions();
+      if (limitStartField) {
+        this.$watch(
+          () => this.getDateLimitLinkedValue(limitStartField),
+          () => {
+            this.initDateLimitPickerOptions();
+          }
+        );
+      }
+      if (limitEndField) {
+        this.$watch(
+          () => this.getDateLimitLinkedValue(limitEndField),
+          () => {
+            this.initDateLimitPickerOptions();
+          }
+        );
+      }
+    },
+    getDateLimitDataSource() {
+      return this.tableParam && this.tableParam.row
+        ? this.tableParam.row
+        : this.formModel;
+    },
+    getDateLimitLinkedValue(fieldName) {
+      if (!fieldName) {
+        return null;
+      }
+      const dataSource = this.getDateLimitDataSource();
+      return dataSource ? dataSource[fieldName] : null;
+    },
+    parseDateLimitValue(val) {
+      if (val === null || val === undefined || val === "") {
+        return null;
+      }
+      const date = new Date(String(val).replace(/-/g, "/"));
+      return isNaN(date.getTime()) ? null : date.getTime();
+    },
+    normalizeDateLimitDayTime(time, isEnd) {
+      const date = new Date(time);
+      if (this.field.options.type === "datetime") {
+        return date.getTime();
+      }
+      date.setHours(isEnd ? 23 : 0, isEnd ? 59 : 0, isEnd ? 59 : 0, isEnd ? 999 : 0);
+      return date.getTime();
+    },
+    isDateLimitDisabled(time) {
+      const options = this.getDateLimitOptions();
+      const currentTime = time.getTime();
+
+      const minDate = this.parseDateLimitValue(options.minDate);
+      if (minDate !== null && currentTime < this.normalizeDateLimitDayTime(minDate, false)) {
+        return true;
+      }
+
+      const maxDate = this.parseDateLimitValue(options.maxDate);
+      if (maxDate !== null && currentTime > this.normalizeDateLimitDayTime(maxDate, true)) {
+        return true;
+      }
+
+      if (options.limitStartField) {
+        const startTime = this.parseDateLimitValue(
+          this.getDateLimitLinkedValue(options.limitStartField)
+        );
+        if (startTime !== null && currentTime < this.normalizeDateLimitDayTime(startTime, false)) {
+          return true;
+        }
+      }
+
+      if (options.limitEndField) {
+        const endTime = this.parseDateLimitValue(
+          this.getDateLimitLinkedValue(options.limitEndField)
+        );
+        if (endTime !== null && currentTime > this.normalizeDateLimitDayTime(endTime, true)) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+    isDateLimitViolated(value) {
+      if (value === null || value === undefined || value === "") {
+        return false;
+      }
+      const currentTime = this.parseDateLimitValue(value);
+      if (currentTime === null) {
+        return false;
+      }
+
+      const options = this.getDateLimitOptions();
+      const minDate = this.parseDateLimitValue(options.minDate);
+      if (minDate !== null && currentTime < this.normalizeDateLimitDayTime(minDate, false)) {
+        return true;
+      }
+
+      const maxDate = this.parseDateLimitValue(options.maxDate);
+      if (maxDate !== null && currentTime > this.normalizeDateLimitDayTime(maxDate, true)) {
+        return true;
+      }
+
+      if (options.limitStartField) {
+        const startTime = this.parseDateLimitValue(
+          this.getDateLimitLinkedValue(options.limitStartField)
+        );
+        if (startTime !== null && currentTime < this.normalizeDateLimitDayTime(startTime, false)) {
+          return true;
+        }
+      }
+
+      if (options.limitEndField) {
+        const endTime = this.parseDateLimitValue(
+          this.getDateLimitLinkedValue(options.limitEndField)
+        );
+        if (endTime !== null && currentTime > this.normalizeDateLimitDayTime(endTime, true)) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+    getDateLimitViolationMessage() {
+      const options = this.getDateLimitOptions();
+      if (options.limitEndField && !options.limitStartField) {
+        return "开始时间不能大于结束时间";
+      }
+      if (options.limitStartField && !options.limitEndField) {
+        return "结束时间不能小于开始时间";
+      }
+      return "日期超出允许范围";
+    },
+  },
+};

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/data-table-editor.vue

@@ -834,6 +834,7 @@ export default {
       this.openWidgetPropertyDialog({
         row: row,
         columnSelectedWidget: selectedWidget,
+        tableColumns: this.optionModel.tableColumns,
         index: index,
         columnEditFields: columnEditFields,
         callback: (columnOption) => {

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/edit-tree-button-group-config-dialog.vue

@@ -13,7 +13,7 @@
     @close="handleClose"
   >
     <div class="cont">
-      <el-form label-width="150px" class="edit-tree-button-group-form">
+      <el-form label-width="166px" class="edit-tree-button-group-form">
         <el-form-item label="新增按钮唯一名称">
           <el-input
             v-model="row.rowAddAuthName"

package/src/components/xform/form-designer/setting-panel/property-editor/field-date/date-dateLimit-editor.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <el-form-item label="关联开始字段">
+      <el-select
+        v-if="dateFieldOptions.length"
+        v-model="optionModel.limitStartField"
+        filterable
+        clearable
+        placeholder="不能小于该字段值"
+      >
+        <el-option
+          v-for="item in dateFieldOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
+      </el-select>
+      <el-input
+        v-else
+        v-model="optionModel.limitStartField"
+        placeholder="请输入开始字段属性名"
+        clearable
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="关联结束字段">
+      <el-select
+        v-if="dateFieldOptions.length"
+        v-model="optionModel.limitEndField"
+        filterable
+        clearable
+        placeholder="不能大于该字段值"
+      >
+        <el-option
+          v-for="item in dateFieldOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
+      </el-select>
+      <el-input
+        v-else
+        v-model="optionModel.limitEndField"
+        placeholder="请输入结束字段属性名"
+        clearable
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="最小日期">
+      <el-date-picker
+        v-model="optionModel.minDate"
+        :type="pickerType"
+        :format="optionModel.format"
+        :value-format="optionModel.valueFormat"
+        style="width: 100%"
+        clearable
+        placeholder="留空则不限制"
+      ></el-date-picker>
+    </el-form-item>
+    <el-form-item label="最大日期">
+      <el-date-picker
+        v-model="optionModel.maxDate"
+        :type="pickerType"
+        :format="optionModel.format"
+        :value-format="optionModel.valueFormat"
+        style="width: 100%"
+        clearable
+        placeholder="留空则不限制"
+      ></el-date-picker>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n";
+import propertyMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/propertyMixin";
+import { loopHandleWidget } from "../../../../../../components/xform/utils/util";
+
+export default {
+  name: "date-dateLimit-editor",
+  mixins: [i18n, propertyMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+    tableColumns: Array,
+  },
+  computed: {
+    pickerType() {
+      return this.optionModel.type || "date";
+    },
+    currentFieldKey() {
+      return this.getFieldKeyByOptions(this.optionModel);
+    },
+    dateFieldOptions() {
+      let options = [];
+      if (this.tableColumns && this.tableColumns.length) {
+        this.collectDateFieldsFromColumns(this.tableColumns, options);
+      } else if (this.designer && this.designer.widgetList) {
+        loopHandleWidget(this.designer.widgetList, (widget) => {
+          if (widget.type !== "date" || widget.id === this.selectedWidget.id) {
+            return;
+          }
+          let fieldKey = this.getFieldKeyByOptions(widget.options);
+          if (fieldKey && fieldKey !== this.currentFieldKey) {
+            options.push({
+              value: fieldKey,
+              label: widget.options.label || fieldKey,
+            });
+          }
+        });
+      }
+      return options;
+    },
+  },
+  methods: {
+    getFieldKeyByOptions(options) {
+      if (!options) {
+        return "";
+      }
+      return (options.keyNameEnabled && options.keyName) || options.name || "";
+    },
+    collectDateFieldsFromColumns(columns, options) {
+      columns.forEach((col) => {
+        if (col.children && col.children.length) {
+          this.collectDateFieldsFromColumns(col.children, options);
+          return;
+        }
+        if (!this.isDateColumn(col)) {
+          return;
+        }
+        let fieldKey = col.prop;
+        if (col.columnOption) {
+          fieldKey = this.getFieldKeyByOptions(col.columnOption) || fieldKey;
+        }
+        if (col.editColumnOption) {
+          fieldKey =
+            this.getFieldKeyByOptions(col.editColumnOption) || fieldKey;
+        }
+        if (fieldKey && fieldKey !== this.currentFieldKey) {
+          options.push({
+            value: fieldKey,
+            label: col.label || fieldKey,
+          });
+        }
+      });
+    },
+    isDateColumn(col) {
+      return (
+        col.formatS === "date" ||
+        col.formatS === "editDate" ||
+        col.editFormatS === "editDate" ||
+        col.widget?.type === "date" ||
+        col.editWidget?.type === "date"
+      );
+    },
+  },
+};
+</script>

package/src/components/xform/form-designer/setting-panel/propertyRegister.js

@@ -43,6 +43,7 @@ const COMMON_PROPERTIES = {
   htmlContent: "htmlContent-editor",
   format: "format-editor",
   valueFormat: "valueFormat-editor",
+  dateLimit: "dateLimit-editor",
   defaultTime: "defaultTime-editor",
   filterable: "filterable-editor",
   allowCreate: "allowCreate-editor",

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -1523,6 +1523,11 @@ export const basicFields = [
       editable: !1,
       format: "yyyy-MM-dd",
       valueFormat: "yyyy-MM-dd",
+      dateLimit: null,
+      limitStartField: null,
+      limitEndField: null,
+      minDate: null,
+      maxDate: null,
       required: !1,
       requiredHint: "",
       validation: "",