diantou/src_custom/_form-designer/component-library/xm-datetimerange-render.vue

<template>
  <a-range-picker v-bind="$attrs" @change="change" v-model="defaultValue" :mode="modes" />
</template>

<script>
import components from './_import-components/xm-datetimerange-render-import'

const XmDatetimerangeRender = {
  name: 'XmDatetimerangeRender',
  metaInfo: {
    title: 'XmDatetimerangeRender',
  },
  components: {
    ...components,
  },
  computed: {},
  props: {
    label: {
      type: String,
      default: '',
    },
    mode: {
      type: String,
      default: '',
    },
    field: {
      type: Object,
      default: () => {},
    },
    starttime: {
      type: String,
      default: '',
    },
    endtime: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      expanded: true,
      defaultValue: this.$attrs?.value?.split(',') || [],
      modes:
        this.mode === 'month' ? ['month', 'month'] : this.mode === 'year' ? ['year', 'year'] : '',
    }
  },
  inject: {
    webflow: { default: () => ({}) },
    SdFormContext: { default: () => ({}) },
  },
  created() {},
  methods: {
    change(date, dateString) {
      const value = new Date(dateString[0]).toString() + ',' + new Date(dateString[1]).toString()
      this.$emit('input', value)
      if (this.starttime !== '') {
        const obj = this.webflow.FlowData.processFormData.processFormPropertyValues.find(
          (i) => i.caption === this.starttime
        )
        this.SdFormContext.setFieldValue(obj.name, new Date(dateString[0]).getTime().toString())
      }
      if (this.endtime !== '') {
        const obj = this.webflow.FlowData.processFormData.processFormPropertyValues.find(
          (i) => i.caption === this.endtime
        )
        this.SdFormContext.setFieldValue(obj.name, new Date(dateString[1]).getTime().toString())
      }
    },
  },
}

// 默认导出：编辑模式的组件
export default XmDatetimerangeRender
// forDisplay导出：只读模式的组件
export { XmDatetimerangeRender as forDisplay }
</script>

<style module lang="scss">
@use '@/common/design' as *;

.expandicon {
  // color: #0b75f3;#40a9ff
  // color: rgba(0, 0, 0, 0.85);
  color: #40a9ff;
  line-height: 22px;
  cursor: pointer;
}
.maingroupdiv {
  position: relative;
  .groupstyle {
    float: left;
    position: relative;
    z-index: 11;
  }
  .expandCount {
    // float: right;
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>