cnhis-design-vue 2.1.79 → 2.1.81

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

@@ -1,26 +1,16 @@
 <template>
-  <a-input-group>
-    <a-row :gutter="8">
-      <a-col :span="11">
+  <a-input-group class="rang-age-input-group">
         <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
+        ></age-com><div class="middle-tips">—</div><age-com
           :disabled="disabled"
           :format="format"
           @change="ageEndOnChange"
           :defaultValue="endValue"
         ></age-com>
-      </a-col>
-    </a-row>
   </a-input-group>
 </template>
 
@@ -164,7 +154,16 @@ export default {
 </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;

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

@@ -0,0 +1,216 @@
+<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">
+        {{ checkText }}
+      </span>
+      <div class="check-date" v-show="showDate">
+        <a-date-picker
+          v-model="value_start"
+          :format="format"
+          :show-time="showTimeStart"
+          :placeholder="placeholderS"
+          style="width: 200px;min-width: 195px;"
+          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: 200px;min-width: 195px;"
+          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: {
+    checkText() {
+      if(this.fieldType === 'DATE') return '选择日期'
+      return '选择时间'
+    },
+    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>

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

@@ -0,0 +1,209 @@
+<template>
+   <div class="label-attr-filter-container">
+    <div class="edit-labels-content"
+      v-for="categoryItem in categoryList"
+      :key="categoryItem.classifyId"
+    >
+      <span class="edit-f-label">{{ categoryItem.classifyName }}：</span>
+      <div
+        class="edit-f-content"
+        :class="{
+          'label-select-height': !categoryItem.isUnfold && categoryItem.labelList && categoryItem.isShowBtn
+        }"
+      >
+        <div class="label-f-content" v-resize="el => onResize(el, categoryItem)">
+          <a-checkable-tag
+            v-for="item in categoryItem.labelList"
+            :key="item.labelCode"
+            v-model="item.isSelect"
+            @change="handleLabelChange($event, item, categoryItem)"
+            :style="formatStyle(item)"
+          >
+            <a-tooltip placement="topLeft" :mouseEnterDelay="0.5" :mouseLeaveDelay="0">
+              <template slot="title">
+                <span>{{ item.labelShowText }}</span>
+              </template>
+              {{ item.labelShowText }}
+            </a-tooltip>
+          </a-checkable-tag>
+        </div>
+      </div>
+      <div class="label-f-unfold-btn" v-if="categoryItem.labelList && categoryItem.isShowBtn">
+        <span @click.stop="handleLabelUpfold(categoryItem)">
+          <template v-if="categoryItem.isUnfold">
+            <span>收起</span>
+            <a-icon
+              type="up-square"
+            />
+          </template>
+          <template v-else>
+            <span>展开</span>
+            <a-icon
+              type="down-square"
+            />
+          </template>
+        </span>
+      </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import { Tag, Icon, Tooltip } from 'ant-design-vue';
+import resize from 'vue-resize-directive';
+
+const baseActiveColor = 'rgb(85, 133, 245)';
+export default {
+  inheritAttrs: false,
+  components: {
+    [Icon.name]: Icon,
+    [Tag.name]: Tag,
+    [Tag.CheckableTag.name]: Tag.CheckableTag,
+    [Tooltip.name]: Tooltip,
+  },
+  directives: { resize },
+  props: {
+    componentCfg: { type: Object },
+    value: {
+      type: [Array, String, Number],
+    },
+    getLabelListMethodRender: Function,
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  data() {
+    return {
+      // 选中项
+      selectedList: [],
+    }
+  },
+  computed: {
+    categoryList() {
+      const {
+        tagList = []
+      } = this.componentCfg;
+      if (tagList && tagList.length > 0) {
+        return tagList.map(category => {
+          category.labelList.map(label => {
+            const valueList = this.value ? this.value.split('|#|') : [];
+            this.selectedList = valueList;
+            // 初始化isSelect的状态
+            if (valueList.length > 0) {
+              label.isSelect = valueList.includes(label.labelShowText);
+            }
+          })
+          return category
+        })
+      }
+      return []
+    }
+  },
+  created() {
+    this.getLabelListMethodRender(this.componentCfg)
+  },
+  methods: {
+    onResize(el, categoryItem) {
+      this.$nextTick(() => {
+        let height = el.offsetHeight || 0;
+        if (!height) {
+          return;
+        }
+        if (height > 80) {
+          this.$set(categoryItem, 'isShowBtn', true);
+        } else {
+          this.$set(categoryItem, 'isShowBtn', false);
+          this.$set(categoryItem, 'isUnfold', false);
+        }
+      })
+    },
+    handleLabelUpfold(categoryItem) {
+      this.$set(categoryItem, 'isUnfold', !categoryItem.isUnfold);
+    },
+    formatStyle(item) {
+      return item.isSelect ? {
+        background: item.backgroundColor || baseActiveColor,
+        borderColor: item.backgroundColor || baseActiveColor
+      } : {}
+    },
+    handleLabelChange(isSelect, item) {
+      item.isSelect = isSelect;
+      if (isSelect) {
+        this.selectedList.push(item.labelShowText)
+      } else {
+        const index = this.selectedList.findIndex(labelText => labelText === item.labelShowText);
+        if (index > -1) {
+          this.selectedList.splice(index, 1);
+        }
+      }
+      // 将数据向外抛出
+      this.$emit("update:value", this.selectedList.join('|#|'));
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+.label-attr-filter-container {
+  .edit-labels-content{
+    .edit-f-label {
+      color: #000;
+      font-size: 14px;
+      line-height: 32px;
+      padding-left: 0;
+    }
+    .edit-f-content{
+      padding: 0 !important;
+      &.label-select-height{
+        overflow: hidden;
+        height: 74px;
+        flex: none !important;
+      }
+      .label-f-content{
+        display: flex;
+        flex-wrap: wrap;
+        line-height: 34px;
+        .ant-tag-checkable{
+          cursor: pointer;
+          position: relative;
+          height: 32px;
+          line-height: 32px;
+          text-align: center;
+          min-width: 108px;
+          max-width: 108px;
+          color: rgba(33, 33, 33, 0.6);
+          background: rgb(250, 250, 250);
+          border-color: rgba(213, 213, 213, 0.8);
+          font-size: 14px;
+          border-radius: 4px;
+          margin-bottom: 8px;
+          box-sizing: border-box;
+          span {
+            display: inline-block;
+            width: 80px;
+            height: 100%;
+            line-height: 30px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        .ant-tag-checkable-checked {
+          color: #fff !important;
+        }
+      }
+    }
+    .label-f-unfold-btn{
+      margin: 8px 0;
+      color: rgba(0, 0, 0, 0.6);
+      cursor: pointer;
+      .anticon{
+        font-size: 16px;
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+</style>

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

@@ -0,0 +1,147 @@
+<template>
+   <div class="filter-number-range">
+    <span
+      class="ant-calendar-picker-input ant-input num-picker"
+      :class="{ 'num-picker-unit': componentCfg.inputUnit }"
+    >
+      <input
+        v-model="lessValue"
+        :title="placeholderS"
+        :placeholder="placeholderS"
+        @keyup.enter="changeFilterNumber"
+        @change="changeFilterNumber"
+        class="ant-calendar-range-picker-input"/>
+      <span class="ant-calendar-range-picker-separator"> ~ &nbsp;</span>
+      <input
+        v-model="bigValue"
+        :title="placeholderE"
+        :placeholder="placeholderE"
+        @keyup.enter="changeFilterNumber"
+        @change="changeFilterNumber"
+        class="ant-calendar-range-picker-input"/>
+      <template v-if="componentCfg.inputUnit">&nbsp;{{ componentCfg.inputUnit }}</template>
+      <span
+        class="ant-input-suffix clear-number-icon"
+        v-if="lessValue || bigValue"
+        @click="clearFilterNumber"
+        ><i
+          aria-label="图标: close-circle"
+          tabindex="-1"
+          class="anticon anticon-close-circle ant-input-clear-icon"
+          ><svg
+            viewBox="64 64 896 896"
+            data-icon="close-circle"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            aria-hidden="true"
+            focusable="false"
+            class=""
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            ></path></svg></i></span
+    ></span>
+  </div>
+</template>
+
+<script>
+import { Select } from 'ant-design-vue';
+
+export default {
+  inheritAttrs: false,
+  components: {
+    Select,
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    componentCfg: {
+      type: Object
+    },
+    placeholderS: String,
+    placeholderE: String,
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        if(!val) {
+          this.clearFilterNumber()
+        }
+      }
+    }
+  },
+  data(){
+    return {
+      lessValue: undefined,
+      bigValue: undefined
+    }
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  computed: {},
+  created(){
+    this.init();
+  },
+  methods: {
+    init(){
+      // 参数查询会被处理为["1~22"]
+      if(!this.value || !Array.isArray(this.value)) {
+        this.clearFilterNumber();
+        return;
+      }
+      let resVal = this.value[0]
+      if(!resVal || typeof resVal !== 'string' || !resVal.includes('~')) {
+        this.clearFilterNumber();
+        return;
+      }
+      this.lessValue = resVal.split('~')?.[0] ?? undefined;
+      this.bigValue = resVal.split('~')?.[1] ?? undefined;
+    },
+    changeFilterNumber() {
+      let res = `${this.lessValue ?? ''}~${this.bigValue ?? ''}`
+      if (this.lessValue && this.bigValue && this.lessValue > this.bigValue) {
+        res = `${this.bigValue}~${this.lessValue}`
+      }
+      this.$emit("update:value", res);
+    },
+    clearFilterNumber() {
+      this.lessValue = undefined;
+      this.bigValue = undefined;
+      this.$emit("update:value", '');
+    },
+  },
+}
+</script>
+<style lang='less' scoped>
+/deep/ .num-picker {
+  position: relative;
+  display: flex;
+  &.num-picker-unit {
+    padding-right: 20px;
+  }
+  input {
+    text-align: left !important;
+  }
+  &:hover {
+    .clear-number-icon {
+      display: block;
+    }
+  }
+  /deep/ .ant-calendar-range-picker-input {
+    text-align: left;
+  }
+  .clear-number-icon {
+    position: absolute;
+    right: 5px;
+    top: 6px;
+    display: none;
+    cursor: pointer;
+    z-index: 1000;
+  }
+}
+</style>