cnhis-design-vue 2.1.78 → 2.1.80

package/packages/table-filter/src/components/range-age/index.vue

@@ -1,172 +1,171 @@
-<template>
-  <a-input-group>
-    <a-row :gutter="8">
-      <a-col :span="11">
-        <age-com
-          :disabled="disabled"
-          :format="format"
-          @change="ageStartOnChange"
-          :defaultValue="startValue"
-        ></age-com>
-      </a-col>
-      <a-col :span="1">
-        <div class="middle-tips">—</div>
-      </a-col>
-      <a-col :span="11">
-        <age-com
-          :disabled="disabled"
-          :format="format"
-          @change="ageEndOnChange"
-          :defaultValue="endValue"
-        ></age-com>
-      </a-col>
-    </a-row>
-  </a-input-group>
-</template>
-
-<script>
-import {Row,Col,Input} from 'ant-design-vue';
-import ageCom from "../age-com/index.vue";
-export default {
-  name: "rangeAge",
-  data() {
-    return {
-      valueObj: {
-        star_val: 0,
-        end_val: 0
-      },
-      startValue: {
-        // year: "",
-        // month: "",
-        // day: "",
-        // days: ""
-      },
-      endValue: {
-        // year: "",
-        // month: "",
-        // day: "",
-        // days: ""
-      }
-    };
-  },
-  props: {
-    value: [String, Number, Object],
-    options: {
-      type: Array,
-      default: () => []
-    },
-    item: {
-      type: Object,
-      default: () => ({})
-    },
-    defaultValue: {
-      type: Object,
-      default: () => ({})
-    },
-    format: {
-      type: String,
-      default: "YYYY-MM-DD"
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    isDisabled() {
-      return this.disabled || false;
-    }
-  },
-  watch: {
-    value: {
-      immediate: true,
-      handler(val) {
-        if (typeof val === "object" && Object.keys(val).length > 0) {
-          const { star_val, end_val } = this.value || {};
-          // this.startValue = startObj;
-          if (+star_val) {
-            let startObj = this.diffTime(+star_val);
-            this.$set(this, "startValue", startObj);
-          }
-          if (+end_val) {
-            let endObj = this.diffTime(+end_val);
-            this.$set(this, "endValue", endObj);
-          }
-          // this.endValue = endObj;
-        }
-      }
-    }
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {
-    this.initDefaultValue();
-  },
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    initDefaultValue() {
-      const { star_val, end_val } = this.defaultValue || {};
-
-      let startObj = this.diffTime(+star_val);
-      let endObj = this.diffTime(+end_val);
-      this.startValue = startObj;
-      this.$set(this, "endValue", endObj);
-      this.$set(this, "startValue", startObj);
-      this.endValue = endObj;
-    },
-
-    diffTime(days) {
-      if (isNaN(days)) return {};
-      if (typeof days == "number") {
-        let next = 0;
-        let year = Math.floor(days / 365);
-        next = days % 365;
-        let month = Math.floor(next / 30);
-        next = next % 30;
-        let day = next;
-
-        return {
-          year: year || "",
-          month: month || "",
-          day: day || "",
-          days: days || ""
-        };
-      }
-      return {};
-    },
-
-    ageStartOnChange(obj) {
-      this.$emit("change", Object.assign(this.valueObj, { star_val: obj.days }));
-    },
-
-    ageEndOnChange(obj) {
-      this.$emit("change", Object.assign(this.valueObj, { end_val: obj.days }));
-    },
-
-    reset() {
-      let obj = { year: "", month: "", day: "", days: "" };
-      this.startValue = { ...obj };
-      this.endValue = { ...obj };
-    }
-  },
-  components: {
-    ageCom,
-    [Row.name]:Row,
-    [Col.name]:Col,
-    [Input.Group.name]:Input.Group,
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.middle-tips {
-  height: 30px;
-  line-height: 30px;
-  text-align: center;
-}
-</style>
+<template>
+  <a-input-group class="rang-age-input-group">
+        <age-com
+          :disabled="disabled"
+          :format="format"
+          @change="ageStartOnChange"
+          :defaultValue="startValue"
+        ></age-com><div class="middle-tips">—</div><age-com
+          :disabled="disabled"
+          :format="format"
+          @change="ageEndOnChange"
+          :defaultValue="endValue"
+        ></age-com>
+  </a-input-group>
+</template>
+
+<script>
+import {Row,Col,Input} from 'ant-design-vue';
+import ageCom from "../age-com/index.vue";
+export default {
+  name: "rangeAge",
+  data() {
+    return {
+      valueObj: {
+        star_val: 0,
+        end_val: 0
+      },
+      startValue: {
+        // year: "",
+        // month: "",
+        // day: "",
+        // days: ""
+      },
+      endValue: {
+        // year: "",
+        // month: "",
+        // day: "",
+        // days: ""
+      }
+    };
+  },
+  props: {
+    value: [String, Number, Object],
+    options: {
+      type: Array,
+      default: () => []
+    },
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    defaultValue: {
+      type: Object,
+      default: () => ({})
+    },
+    format: {
+      type: String,
+      default: "YYYY-MM-DD"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    isDisabled() {
+      return this.disabled || false;
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        if (typeof val === "object" && Object.keys(val).length > 0) {
+          const { star_val, end_val } = this.value || {};
+          // this.startValue = startObj;
+          if (+star_val) {
+            let startObj = this.diffTime(+star_val);
+            this.$set(this, "startValue", startObj);
+          }
+          if (+end_val) {
+            let endObj = this.diffTime(+end_val);
+            this.$set(this, "endValue", endObj);
+          }
+          // this.endValue = endObj;
+        }
+      }
+    }
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+    this.initDefaultValue();
+  },
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  activated() {},
+  methods: {
+    initDefaultValue() {
+      const { star_val, end_val } = this.defaultValue || {};
+
+      let startObj = this.diffTime(+star_val);
+      let endObj = this.diffTime(+end_val);
+      this.startValue = startObj;
+      this.$set(this, "endValue", endObj);
+      this.$set(this, "startValue", startObj);
+      this.endValue = endObj;
+    },
+
+    diffTime(days) {
+      if (isNaN(days)) return {};
+      if (typeof days == "number") {
+        let next = 0;
+        let year = Math.floor(days / 365);
+        next = days % 365;
+        let month = Math.floor(next / 30);
+        next = next % 30;
+        let day = next;
+
+        return {
+          year: year || "",
+          month: month || "",
+          day: day || "",
+          days: days || ""
+        };
+      }
+      return {};
+    },
+
+    ageStartOnChange(obj) {
+      this.$emit("change", Object.assign(this.valueObj, { star_val: obj.days }));
+    },
+
+    ageEndOnChange(obj) {
+      this.$emit("change", Object.assign(this.valueObj, { end_val: obj.days }));
+    },
+
+    reset() {
+      let obj = { year: "", month: "", day: "", days: "" };
+      this.startValue = { ...obj };
+      this.endValue = { ...obj };
+    }
+  },
+  components: {
+    ageCom,
+    [Row.name]:Row,
+    [Col.name]:Col,
+    [Input.Group.name]:Input.Group,
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.rang-age-input-group {
+  display: inline-flex;
+  width: 100%;
+  /deep/ .age-com {
+    max-width: calc(50% - 16px);
+    width: unset;
+  }
+}
+.middle-tips {
+  width: 32px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+}
+</style>

package/packages/table-filter/src/components/render-widget/components/CheckboxGroup.vue

@@ -1,52 +1,52 @@
-<template>
-  <CheckboxGroup v-bind="$attrs" :value="valueCp" @change="onChange"></CheckboxGroup>
-</template>
-
-<script>
-import { Checkbox } from 'ant-design-vue';
-
-export default {
-  inheritAttrs: false,
-  components: {
-    CheckboxGroup: Checkbox.Group,
-  },
-  props: {
-    value: {
-      type: [Array, String, Number],
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  model: {
-    prop: "value",
-    event: "update:value"
-  },
-  computed: {
-    valueCp: {
-      set(val) {
-        this.$emit("update:value", val);
-      },
-      get() {
-        return Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
-      }
-    }
-  },
-  methods: {
-    filterNewVal(val) {
-      return val.filter((v) => !this.valueCp.includes(v));
-    },
-    onChange(val) {
-      if (!this.multiple && Array.isArray(val)) {
-        this.valueCp = this.filterNewVal(val)[0];
-        return;
-      }
-      this.valueCp = val;
-    },
-  },
-}
-
-</script>
-<style lang='less'>
+<template>
+  <CheckboxGroup v-bind="$attrs" :value="valueCp" @change="onChange"></CheckboxGroup>
+</template>
+
+<script>
+import { Checkbox } from 'ant-design-vue';
+
+export default {
+  inheritAttrs: false,
+  components: {
+    CheckboxGroup: Checkbox.Group,
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  computed: {
+    valueCp: {
+      set(val) {
+        this.$emit("update:value", val);
+      },
+      get() {
+        return Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
+      }
+    }
+  },
+  methods: {
+    filterNewVal(val) {
+      return val.filter((v) => !this.valueCp.includes(v));
+    },
+    onChange(val) {
+      if (!this.multiple && Array.isArray(val)) {
+        this.valueCp = this.filterNewVal(val)[0];
+        return;
+      }
+      this.valueCp = val;
+    },
+  },
+}
+
+</script>
+<style lang='less'>
 </style>

package/packages/table-filter/src/components/render-widget/components/DateRangeQuick.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="filter-date-range">
+    <a-radio-group v-model="con" buttonStyle="solid">
+      <a-radio-button
+        v-for="date in dateTeam0"
+        v-show="!showDate"
+        @click="clickRadioGroup(date.con)"
+        :key="date.con"
+        :value="date.con"
+      >
+        {{ getI18nText(date.title, date.name) }}
+      </a-radio-button>
+      <span :class="['check-date-btn', marginx]" @click="checkDate">
+        {{ getI18nText('1.1.4.52', '选择时间') }}
+      </span>
+      <div class="check-date" v-show="showDate">
+        <a-date-picker
+          v-model="value_start"
+          :format="format"
+          :show-time="showTimeStart"
+          :placeholder="placeholderS"
+          style="width: 120px"
+          allowClear
+          :disabledDate="current => disabledDatePicker(current, 'start')"
+          @change="dateChangeStr"
+        />
+        &nbsp;
+        <a-date-picker
+          v-model="value_end"
+          :format="format"
+          :show-time="showTimeEnd"
+          :placeholder="placeholderE"
+          style="width: 120px"
+          allowClear
+          :disabledDate="current => disabledDatePicker(current, 'end')"
+          @change="dateChangeEnd"
+        />
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import { Radio, DatePicker } from 'ant-design-vue';
+import { dataOptions } from '~/table-filter/src/const/dataOptions';
+import moment from 'moment';
+
+export default {
+  inheritAttrs: false,
+  components: {
+    [DatePicker.name]: DatePicker,
+    [Radio.Button.name]: Radio.Button,
+    [Radio.Group.name]: Radio.Group,
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    componentCfg: { type: Object },
+    placeholderS: String,
+    placeholderE: String,
+    fieldType: String
+  },
+  data(){
+    return {
+      showDate: false,
+      marginx: 'ml',
+      con: null,
+      value_start: null,
+      value_end: null,
+      ...dataOptions
+    }
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  computed: {
+    showTimeStart(){
+      if(this.fieldType === 'DATE') return false;
+      return { defaultValue: moment('00:00:00', 'HH:mm:ss') }
+    },
+    showTimeEnd(){
+      if(this.fieldType === 'DATE') return false;
+      return { defaultValue: moment('23:59:59', 'HH:mm:ss') }
+    },
+    format(){
+      if(this.fieldType === 'DATE') return 'YYYY-MM-DD';
+      return 'YYYY-MM-DD HH:mm:ss'
+    },
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        if(!val && !this.componentCfg?.con) {
+          this.clearData()
+        }
+      }
+    }
+  },
+  created(){
+    this.init();
+  },
+  methods: {
+    handleMoment(val) {
+      if(!val || !val._isAMomentObject) return null;
+      return val.format(this.format) || null;
+    },
+    init(){
+      if(!this.value) return;
+      let resVal = this.value
+      if (
+        resVal?.length === 1 &&
+        resVal[0] &&
+        typeof resVal[0] === "string" &&
+        resVal[0].includes("~")
+      ) {
+        resVal = resVal[0].split("~");
+      }
+      if(!Array.isArray(resVal)) return;
+      this.value_start = resVal[0];
+      this.value_end = resVal[1];
+    },
+    // 单选按钮组合点击取消选中状态
+    clickRadioGroup(con) {
+      this.$emit("update:value", []);
+      this.value_start = null;
+      this.value_end = null;
+      if (this.con == con) {
+        this.con = null;
+      } else {
+        this.con = con;
+      }
+      this.$emit('setCfgCon', this.con);
+    },
+    checkDate() {
+      this.showDate = !this.showDate;
+      this.showDate ? (this.marginx = "mr") : (this.marginx = "ml");
+    },
+    clearData(){
+      this.con = null;
+      this.value_start = null;
+      this.value_end = null;
+      this.marginx = 'ml';
+      this.showDate = false;
+      this.$emit('setCfgCon', this.con);
+    },
+    dateChangeStr(date){
+      this.$emit('setCfgCon', 'EQ')
+      let str = `${this.handleMoment(date) || ''}~${this.handleMoment(this.value_end) || ''}`
+      this.$emit("update:value", str);
+    },
+    dateChangeEnd(date){
+      this.$emit('setCfgCon', 'EQ')
+      let str = `${this.handleMoment(this.value_start) || ''}~${this.handleMoment(date) || ''}`
+      this.$emit("update:value", str);
+    },
+    /**
+     * 限制日期填写
+     */
+    disabledDatePicker(current, t){
+      let f = false;
+      if(t=== 'start'){
+         const end_val = this.value_end;
+         f = end_val && current.valueOf() > end_val.valueOf();
+      } else if(t=== 'end') {
+        const start_val = this.value_start;
+         f = start_val && current.valueOf() <= start_val.valueOf();
+      }
+      /**
+       * 2 过去时间
+       * 3 未来时间
+       */
+      let type = String(this.componentCfg?.advanceOptionSetting);
+      if(!['2','3'].includes(type)) return f;
+      if(type === '2'){
+         return current >= moment().endOf('day') || f;
+      } else if(type==='3'){
+         return current && current < moment().startOf('day') || f;
+      }
+      return f
+    },
+    getI18nText(i, d) {
+      if (Array.isArray(i)) {
+        return this.$t ? this.$t.apply(this, i) : d;
+      }
+      return this.$t ? this.$t(i) : d;
+    },
+  },
+}
+</script>
+<style lang='less' scoped>
+.check-date-btn {
+  display: inline-block;
+  line-height: 32px;
+  height: 32px;
+  padding: 0 10px;
+  background-color: #ddd;
+  cursor: pointer;
+  &.ml {
+    margin-left: 12px;
+  }
+  &.mr {
+    margin-right: 12px;
+  }
+}
+.check-date {
+  display: inline-block;
+  line-height: 33px;
+}
+</style>