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

<template>
  <a-date-picker
    v-bind="$attrs"
    v-model="defaultValue"
    mode="year"
    picker="YYYY"
    format="YYYY"
    :allow-clear="false"
    placeholder="选择年度"
    :input-read-only="true"
    :open="endOpen"
    @panelChange="yearChange"
    @openChange="handleEndOpenChange"
    v-if="!readOnly"
  />
  <span v-else>{{ defaultValue ? new Date(defaultValue).getFullYear() : '' }}</span>
</template>

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

const XmDatetimeforyearRender = {
  name: 'XmDatetimeforyearRender',
  metaInfo: {
    title: 'XmDatetimeforyearRender',
  },
  components: {
    ...components,
  },
  computed: {},
  props: {
    label: {
      type: String,
      default: '',
    },
    field: {
      type: Object,
      default: () => {},
    },
    currentAsDefaultValue: {
      type: Boolean,
      default: undefined,
    },
  },
  data() {
    return {
      endOpen: false,
      defaultValue: this.$attrs?.value
        ? this.$attrs?.value
        : this.currentAsDefaultValue
        ? moment()
        : this.$attrs?.value || '',
      readOnly: this.$attrs ? this.$attrs['read-only'] : false,
      // readOnly: false,
    }
  },
  inject: {
    webflow: { default: () => ({}) },
    SdFormContext: { default: () => ({}) },
  },
  created() {
    if (this.currentAsDefaultValue) {
      this.$emit('input', moment().format('YYYY'))
    }
  },
  methods: {
    yearChange(value) {
      this.defaultValue = value
      this.$emit('input', value.format('YYYY'))
      this.$emit('change', value.format('YYYY'))
      if (document.getElementsByClassName('ant-calendar-picker-container').length > 0) {
        for (
          let i = 0;
          i < document.getElementsByClassName('ant-calendar-picker-container').length;
          i++
        ) {
          document.getElementsByClassName('ant-calendar-picker-container')[i].style.display = 'none'
        }
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open
    },
  },
}
export function updateOnPreview(component) {
  // 处理“当前日期”
  if (component.attr.currentAsDefaultValue === 'true') {
    component.attr.defaultValue = Date.now().toString()
  }
}
// 默认导出：编辑模式的组件
export default XmDatetimeforyearRender
// forDisplay导出：只读模式的组件
export { XmDatetimeforyearRender 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>