zhonghan2.0/src/components/confirm/form/index.vue

<template>
  <div>
    <Modal
      draggable
      class-name="vertical-center-modal"
      :title="title"
      v-model="show"
      :width="400"
    >
      <Form :label-width="labelWidth || 100">
        <FormItem
          v-for="(item, index) of forms"
          :key="index"
          :label="item.title"
        >
          <div
            :is="item.name"
            v-model="item.value"
            :placeholder="item.placeholder || ''"
            :class="[
              item.name == 'RadioGroup' || item.name == 'CheckboxGroup'
                ? 'checkbox-item'
                : '',
            ]"
            :key="index"
            :size="item.size ? item.size : 'default'"
            :clearable="!item.clearable ? true : false"
            :disabled="item.disabled"
            :filterable="item.filterable"
            :multiple="item.multiple"
            :type="item.type"
            v-if="!item.isDate"
            :style="item.width ? 'width:' + item.width + 'px' : ''"
            @on-change="item.change == true ? change(forms, index) : ''"
          >
            <Option
              v-for="(row, key) of item.option"
              :key="key"
              :label="row.label || row[item.optionName]"
              :value="row.value || row[item.optionValue]"
            ></Option>
            <Checkbox
              v-for="(_item, _index) in item.checklist"
              :key="_index"
              :label="_item.value || _item[item.checkValue]"
              >{{ _item.label || _item[item.checkName] }}</Checkbox
            >
            <Radio
              v-for="(_item, _index) in item.radiolist"
              :key="_index"
              :label="_item.value"
              >{{ _item.label }}</Radio
            >
          </div>

          <div class="items" v-if="item.isDate">
            <DatePicker
              :type="item.type ? item.type : 'date'"
              v-model="item.start_value"
              :placeholder="item.start_placeholder"
            ></DatePicker>
            ~
            <DatePicker
              :type="item.type ? item.type : 'date'"
              v-model="item.end_value"
              :placeholder="item.end_placeholder"
            ></DatePicker>
          </div>
        </FormItem>
      </Form>
      <div class="modal-footer" slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="then">确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  methods: {
    then() {
      this.$emit('then')
    },
    cancel() {
      this.$emit('cancel')
    },
    change(forms, index) {
      forms.forEach(element => element.select = false)
      forms[index].select = true
      this.$emit('change')
    }
  }

}
</script>
<style lang="scss" scoped>
.margin {
  width: 150px;
  margin: 10px;
}
.checkbox-item,
.items {
  width: auto;
  display: inline-block;
}
.iten-title {
  color: #333;
}
</style>