WidgetFormItem.vue

<template>
  <div class="flex">
    <div>
      <span
        v-if="item.type == 'title'"
        :style="item.styles"
        style="margin-left: 5px"
      >
        {{ item.value }}
      </span>

      <!-- 输入框 -->
      <el-input
        v-if="item.type === 'input'"
        v-model="form[item.prop]"
        :readonly="item.readonly"
        :disabled="item.disabled"
        :placeholder="item.placeholder || `请输入 ${item.label || ''}`"
        @focus="item.focus ? item.focus($event) : {}"
        @change="item.change ? item.change($event) : {}"
        @blur="item.change ? item.change($event) : {}"
        clearable
        :maxlength="item.maxlength"
        :class="item.toothBit ? 'toothBit' : ''"
      >
        <!-- 牙位按钮 -->
        <el-button slot="append" v-if="item.toothBit" class="toothBit">{{
          item.append || "牙位"
        }}</el-button>
        <template slot="append" v-else-if="item.append">{{
          item.append
        }}</template>
        <template slot="prepend" v-if="item.prepend">{{
          item.prepend
        }}</template>
      </el-input>

      <!-- 密码框 -->
      <el-input
        v-if="item.type === 'password'"
        v-model="form[item.prop]"
        type="password"
        :placeholder="item.placeholder || `请输入 ${item.label || ''}`"
        :readonly="item.readonly"
        :disabled="item.disabled"
        @focus="item.focus ? item.focus($event) : {}"
        @change="item.change ? item.change($event) : {}"
        @blur="item.change ? item.change($event) : {}"
        :show-password="item.showPassword"
        clearable
        :maxlength="item.maxlength"
      >
        <template slot="append" v-if="item.append">{{ item.append }}</template>
        <template slot="prepend" v-if="item.prepend">{{
          item.prepend
        }}</template>
      </el-input>

      <!-- 文本域 -->
      <template v-if="item.type === 'textarea'">
        <el-input
          type="textarea"
          :placeholder="item.placeholder || `请输入 ${item.label || ''}`"
          :autosize="{ minRows: item.minRows, maxRows: item.maxRows }"
          v-model="form[item.prop]"
          :minlength="item.minlength"
          :disabled="item.disabled"
          :maxlength="item.maxlength"
          :show-word-limit="item.showWordLimit"
        ></el-input>
      </template>

      <!-- 计算器 -->
      <template v-if="item.type === 'number'" style="display: inline-table">
        <el-input-number
          v-model="form[item.prop]"
          :readonly="item.readonly"
          :disabled="item.disabled"
          :controls="item.controls ? true : false"
          :controls-position="item.controlsPosition"
          :placeholder="item.placeholder || `${item.label || ''}`"
          :step="item.step"
          :precision="item.precision"
          :min="item.minRows"
          :max="item.maxRows"
          style="display: table-cell"
        >
        </el-input-number>
        <span
          v-if="item.append"
          class="el-input-group__append"
          style="line-height: 28px"
          >{{ item.append }}</span
        >
      </template>

      <!-- 单选框 -->
      <template v-if="item.type === 'radio'">
        <el-radio-group v-model="form[item.prop]" :disabled="item.disabled">
          <el-radio
            v-for="(opt, optIndex) in item.dicData"
            :key="optIndex"
            :label="opt.value"
            >{{ opt.label }}
          </el-radio>
        </el-radio-group>
      </template>

      <!-- 多选框 -->
      <template v-if="item.type === 'checkbox'">
        <el-checkbox
          v-for="(opt, optIndex) in item.dicData"
          :key="optIndex"
          :label="opt.value"
          >{{ opt.label }}
        </el-checkbox>
      </template>

      <!-- 下拉框 -->
      <template v-if="item.type === 'select'">
        <el-select
          :clearable="item.clearable"
          :filterable="item.filterable"
          :disabled="item.disabled"
          v-model="form[item.prop]"
          :placeholder="
            item.placeholder ? item.placeholder : `请选择 ${item.label || ''}`
          "
          :multiple="item.multiple"
          :multiple-limit="item.limit"
        >
          <el-option
            v-for="(opt, optIndex) in item.dicData"
            :key="optIndex"
            :label="opt.label"
            :value="opt.value"
          >
          </el-option>
        </el-select>
      </template>
      <!-- 级联 -->
      <el-cascader
        v-else-if="item.type === 'cascader'"
        v-model="form[item.prop]"
        :disabled="item.disabled"
        clearable
        :filterable="item.filterable"
        :props="{ multiple: item.multiple }"
        :options="item.dicData"
        :show-all-levels="item.showAllLevels"
        :separator="item.separator"
        style="width: 100%"
      ></el-cascader>

      <!-- 时间 -->
      <el-time-picker
        v-else-if="item.type === 'time'"
        v-model="form[item.prop]"
        :placeholder="item.placeholder ? item.placeholder : '请选择'"
        :value-format="item.valueFormat"
        :format="item.format"
        :disabled="item.disabled"
        style="width: 100%"
        clearable
      >
      </el-time-picker>
      <!-- 时间范围 -->
      <el-time-picker
        v-else-if="item.type === 'timerange'"
        is-range
        v-model="form[item.prop]"
        range-separator="至"
        :start-placeholder="item.startPlaceholder"
        :end-placeholder="item.endPlaceholder"
        :unlink-panels="item.unlinkPanels"
        :value-format="item.valueFormat"
        :format="item.format"
        :disabled="item.disabled"
        clearable
      >
      </el-time-picker>
      <!-- 日期 -->
      <el-date-picker
        v-else-if="item.type === 'date'"
        v-model="form[item.prop]"
        :placeholder="item.placeholder ? item.placeholder : '请选择'"
        :value-format="item.valueFormat"
        :format="item.format"
        :disabled="item.disabled"
        clearable
      >
      </el-date-picker>
      <!-- 年 -->
      <el-date-picker
        v-else-if="item.type === 'year'"
        type="year"
        v-model="form[item.prop]"
        :placeholder="item.placeholder ? item.placeholder : '请选择'"
        :value-format="item.valueFormat"
        :format="item.format"
        :disabled="item.disabled"
        clearable
      >
      </el-date-picker>
      <!-- 月 -->

      <el-date-picker
        type="month"
        v-else-if="item.type === 'month'"
        v-model="form[item.prop]"
        :placeholder="item.placeholder ? item.placeholder : '请选择'"
        :value-format="item.valueFormat"
        :format="item.format"
        :disabled="item.disabled"
        clearable
      >
      </el-date-picker>
      <!-- 周 -->

      <el-date-picker
        type="week"
        v-else-if="item.type === 'week'"
        v-model="form[item.prop]"
        :placeholder="item.placeholder ? item.placeholder : '请选择'"
        :value-format="item.valueFormat || 'yyyy-ww'"
        :format="item.format || 'yyyy 第 WW 周'"
        :disabled="item.disabled"
        clearable
      >
      </el-date-picker>
      <!-- 日期范围 -->

      <el-date-picker
        v-else-if="item.type === 'daterange'"
        type="daterange"
        range-separator="至"
        :start-placeholder="item.startPlaceholder"
        :end-placeholder="item.endPlaceholder"
        :unlink-panels="item.unlinkPanels"
        v-model="form[item.prop]"
        :value-format="item.valueFormat"
        :format="item.format"
        :disabled="item.disabled"
        clearable
      >
      </el-date-picker>

      <!-- 日期时间 -->
      <el-date-picker
        v-model="form[item.prop]"
        v-else-if="item.type === 'datetime'"
        type="datetime"
        :placeholder="item.placeholder ? item.placeholder : '请选择'"
        clearable
        :disabled="item.disabled"
        :value-format="item.valueFormat"
        :format="item.format"
      >
      </el-date-picker>

      <!-- 日期时间范围 -->
      <el-date-picker
        v-else-if="item.type === 'datetimerange'"
        v-model="form[item.prop]"
        type="datetimerange"
        range-separator="至"
        clearable
        :disabled="item.disabled"
        :start-placeholder="item.startPlaceholder"
        :end-placeholder="item.endPlaceholder"
        :value-format="item.valueFormat"
        :format="item.format"
        align="right"
      >
      </el-date-picker>

      <!-- 子表单 -->
      <div v-else-if="item.type == 'dynamic'">
        <el-table height="200" border style="width: 100%">
          <el-table-column
            label="add"
            width="60"
            v-if="item.children && item.children.addBtn"
          >
            <template v-slot:header>
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                circle
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column
            :label="column.label"
            v-for="(column, columnIndex) in item.children.column"
            :key="columnIndex"
          >
          </el-table-column>
        </el-table>
      </div>

      <!-- 上传 -->
      <el-upload-self
        v-else-if="item.type === 'upload'"
        v-bind="item"
        v-model="form[item.prop]"
      ></el-upload-self>
    </div>
    <span class="important_field" v-if="item.importantField">{{
      item.importantFieldDesc || "*"
    }}</span>
  </div>
</template>
<script>
import ElUploadSelf from "@/components/Upload"

export default {
  name: "widget-form-item",
  components: { ElUploadSelf },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      form: {},
    }
  },
}
</script>
<style lang="scss" scoped>
.important_field {
  color: #ff4d4f;
  padding-left: 10px;
  display: inline-block;
  max-width: 150px;
  line-height: 1.2;
}
::v-deep .toothBit {
  background-color: #1890ff;
  color: #fff;
}
.flex {
  align-items: center;
  .toothBit {
    ::v-deep .el-input-group__append {
      background-color: #1890ff;
      border-color: #1890ff;
      color: #fff;
    }
  }
  // border: 1px dashed #ccc;
  > div {
    flex: 1;
  }
}
</style>