hitch-sb-antd/src/views/test/modules/Component.vue

<template>
  <a-col @click="handleSelect" :span="detail.type==='divider'?24:24/config.layout">
    <a-form-item :label="detail.label" v-if="detail.type!=='divider'">
      <!-- 输入框 -->
      <a-input v-if="detail.type==='input'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
      <!-- 数字输入框 -->
      <a-input-number style="width:100%" v-if="detail.type==='number'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
      <!-- 文本域 -->
      <a-textarea v-if="detail.type==='textarea'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
      <!-- 下拉框 -->
      <a-select v-if="detail.type==='select'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" >
        <!-- <a-select-option v-for="item in detail.options" :value="item.value" :key="item.value">
          {{ item.label }}
        </a-select-option> -->
      </a-select>
      <!-- 日期时间 -->
      <a-date-picker style="width:100%" v-if="detail.type==='date'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
      <!-- 文件上传 -->
      <UploadFile v-if="detail.type==='uploadFile'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
      <!-- 图片上传 -->
      <UploadImg v-if="detail.type==='uploadImg'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
      <!-- 选择数据 -->
      <template v-if="detail.type==='dataSelect'">
        <a-input style="width:70%" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
        <a-button style="width:30%" type="primary" @click="handleSelectData">选择</a-button>
      </template>
    </a-form-item>
    <!-- 分割线 -->
    <a-divider v-bind="detail.attrs" v-if="detail.type==='divider'">
      <template v-if="detail.label">
        {{ detail.label }}
      </template>
    </a-divider>
  </a-col>
</template>

<script>
import UploadFile from '@/components/Upload/CUploadFile.vue'
import UploadImg from '@/components/Upload/CUploadImg.vue'
export default {
  name: 'MComponent',
  components: {
    UploadFile,
    UploadImg
  },
  props: {
    detail: {
      type: Object,
      required: true,
      default: () => {}
    },
    config: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleSelect () {
      this.$emit('select', this.detail)
    },
    handleSelectData () {
      this.$emit('selectInfo', this.detail)
    }
  }
}
</script>

<style>

</style>