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

<template>
  <div>
    <a-form-model-item label="类型">
      <a-select
        v-model="component.attrFD.formItemProps.inputProps.mode"
        :options="[
          { value: '', label: '显示年月日' },
          { value: 'month', label: '显示月' },
          { value: 'year', label: '显示年' },
        ]"
      />
    </a-form-model-item>
    <a-form-model-item label="开始时间字段名称">
      <a-input v-model.trim="component.attrFD.formItemProps.inputProps.starttime" />
    </a-form-model-item>
    <a-form-model-item label="开始时间字段名称">
      <a-input v-model.trim="component.attrFD.formItemProps.inputProps.endtime" />
    </a-form-model-item>
  </div>
</template>

<script>
// import xmTimerangePicker from './xm-timerange-picker'
import components from './_import-components/xm-datetimerange-import'

export const metaInfo = {
  caption: '日期区间',
  icon: 'sd-list',
  component: {
    props: ['designerData'],
    render() {
      const defaultValue = this.designerData.attr?.defaultValue?.split(',') || []
      return <a-range-picker v-model={defaultValue} />
    },
  },
  order: 900,
  category: 'basic',
}

export const fieldProps = {
  dataType: 'string',
  contents: [],
  attr: {
    defaultValue: '',
  },
  attrFD: {
    formItemProps: { inputProps: { label: '', mode: '', starttime: '', endtime: '' } },
  },
}

export default {
  name: 'XmDatetimerange',
  components,
  computed: {
    defaultValue: {
      get() {
        return this.designerData.attr?.defaultValue?.split(',') || []
      },
      set(value) {
        const value1 =
          new Date(value[0]).getTime().toString() + ',' + new Date(value[1]).getTime().toString()
        this.$set(this.component.attr, 'defaultValue', value1)
      },
    },
  },
  methods: {},
}
</script>

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