cnhis-design-vue 2.2.3 → 2.2.6

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

@@ -1,171 +0,0 @@
-<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,68 +0,0 @@
-<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},
-    explicitRequired: {type: Number, default: 0},
-    filterExplicit: {type: Number, default: 0},
-    showMode: {type: String, default: 'DROPDOWN'},
-  },
-  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] : [];
-      }
-    },
-    // 筛选外显, 外显必填并且为平铺时, 最少得一个选项
-    isNotEmpty() {
-      return this.explicitRequired == 1 && this.filterExplicit == 1 && this.showMode === 'TILE'
-    }
-  },
-  methods: {
-    filterNewVal(val) {
-      return val.filter((v) => !this.valueCp.includes(v));
-    },
-    onChange(val) {
-      if(this.isNotEmpty) {
-        if(Array.isArray(val) && (!val || !val.length)){
-          this.$message.warning('至少选中一个');
-          return
-        }
-        if(!Array.isArray(val) && !val){
-          this.$message.warning('至少选中一个');
-          return
-        }
-      }
-      if (!this.multiple && Array.isArray(val)) {
-        this.valueCp = this.filterNewVal(val)[0];
-        this.$emit("change");
-        return;
-      }
-      this.valueCp = val;
-      this.$emit("change");
-    },
-  },
-}
-
-</script>
-<style lang='less'>
-</style>

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

@@ -1,216 +0,0 @@
-<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

@@ -1,209 +0,0 @@
-<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>