vue组件封装——公用基础form组件

查询、新增、重置按钮自带，其他按钮通过插槽自定义
hasPage参数控制是否添加分页参数，查询功能自动将page改为1
重置功能默认恢复表单初始化
行内样式表单

<template>
  <!-- :label-width="labelwidth" -->
  <el-form
    :model="formData"
    :rules="rules"
    :size="size"
    ref="queryForm"
    :inline="inline"
    class="publi-form publi-flex"
  >
    <div v-for="column in columns" :key="column.prop">
      <el-form-item :label="column.label" :prop="column.prop" v-if="column.type == 'input'">
        <!-- 普通输入框 -->
        <el-input
          v-model="formData[column.prop]"
          :clearable="column.clearable || true"
          :disabled="column.disabled || false"
          :placeholder="column.placeholder"
        ></el-input>
      </el-form-item>
      <el-form-item :label="column.label" :prop="column.prop" v-if="column.type == 'select'">
        <el-select
          v-model="formData[column.prop]"
          :placeholder="column.placeholder"
          :clearable="column.clearable || true"
          :disabled="column.disabled || false"
          :filterable="column.filterable || false"
          :multiple="column.multiple || false"
        >
          <el-option
            v-for="(options, index) in column.options"
            :label="column.optionsDefault ? options[column.optionsDefault[0]] : options"
            :value="column.optionsDefault ? options[column.optionsDefault[1]] : options"
            :key="column.optionsDefault ? options[column.optionsDefault[1]] : index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="column.label" :prop="column.prop" v-if="column.type == 'cascader'">
        <el-cascader
          v-model="formData[column.prop]"
          :placeholder="column.placeholder"
          :clearable="column.clearable || true"
          :disabled="column.disabled || false"
          :options="column.options"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item :label="column.label" :prop="column.prop" v-if="column.type == 'datetimerange'">
        <el-date-picker
          v-model="formData[column.prop]"
          :format="column.format || 'yyyy-MM-dd HH:mm:ss'"
          :value-format="column.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
          :type="column.rangeType || 'datetimerange'"
          :range-separator="column.range || '至'"
          :unlink-panels="column.unlinkPanels || false"
          :start-placeholder="column.rangePlaceholder ? column.rangePlaceholder[0] : '开始时间'"
          :placeholder="column.placeholder"
          :end-placeholder="column.rangePlaceholder ? column.rangePlaceholder[1] : '结束时间'"
          :clearable="column.clearable || true"
          :disabled="column.disabled || false"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        :label="column.label"
        :prop="column.prop"
        v-if="column.type == 'slot' && column.show == true"
      >
        <slot :name="column.prop"></slot>
      </el-form-item>
    </div>
    <el-form-item class="func-btn">
      <!-- 查询按钮 -->
      <template v-if="queryPerm">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="queryByWord()"
          v-if="hasPerm(queryStr)"
          >查询</el-button
        >
      </template>
      <template v-else>
        <el-button type="primary" icon="el-icon-search" @click="queryByWord()">查询</el-button>
      </template>
      <!-- 新增按钮 -->
      <template v-if="addPerm && addBtn">
        <el-button type="success" icon="el-icon-plus" @click="add()" v-if="hasPerm(addStr)">{{
          addLabel
        }}</el-button>
      </template>
      <template v-else>
        <el-button type="success" icon="el-icon-plus" @click="add()" v-if="addBtn">{{
          addLabel
        }}</el-button>
      </template>
      <!-- 重置按钮 -->
      <el-button @click="onReset" v-if="resetBtn" icon="el-icon-refresh">重置</el-button>
      <!-- 其他功能按钮插槽 -->
      <slot name="btnSlot" :form="formData"></slot>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  props: {
    columns: {
      //表单配置项
      type: Array,
      default: () => [],
    },
    rules: {
      //验证规则
      type: Object,
      default: () => {
        return {};
      },
    },
    size: {
      //表单内组件尺寸
      type: String,
      default: 'mini',
    },
    resetBtn: {
      //显示重置按钮
      type: Boolean,
      default: false,
    },
    addBtn: {
      //显示新增按钮
      type: Boolean,
      default: false,
    },
    labelwidth: {
      //label宽度
      type: String,
      default: '120px',
    },
    inline: {
      //是否为行内式表单
      type: Boolean,
      default: true,
    },
    hasPage: {
      //是否包含分页参数
      type: Boolean,
      default: true,
    },
    addLabel: {
      type: String,
      default: '新增',
    },
    queryPerm: {
      //查询是否存在权限限制
      type: Boolean,
      default: false,
    },
    queryStr: {
      //查询权限字符
      type: String,
      default: '',
    },
    addPerm: {
      //新增是否存在权限限制
      type: Boolean,
      default: false,
    },
    addStr: {
      //新增权限字符
      type: String,
      default: '',
    },
  },
  data() {
    return {
      formData: {},
    };
  },
  methods: {
    handleChange(value) {
      console.log(value, 454545);
    },
    // 查询
    queryByWord() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          console.log('queryData:', this.formData);
          if (this.formData.hasOwnProperty('pageNo')) {
            // 默认返回表格第一页
            this.formData.pageNo = 1;
          }
          this.$emit('query', this.formData);
        }
      });
    },
    // 重置
    onReset() {
      this.$refs['queryForm'].resetFields();
      console.log(this.formData, 66666);
    },
    // 新增
    add() {
      this.$emit('add', this.formData, 'create');//传'create'，是为了区分新增/编辑等功能按钮，公用函数使用
    },
    // 处理表单数据
    handleProp(columns) {
      this.formData = {};
      for (let i = 0; i < columns.length; i++) {
        const element = columns[i];
        // 去除插槽
        if (element.type != 'slot') {
          // this.formData初始值不能设置为null,新增属性会报错
          this.$set(this.formData, element.prop, element.default);
        }
      }
      // 是否添加分页参数
      if (this.hasPage) {
        this.$set(this.formData, 'pageNo', 1);
        this.$set(this.formData, 'pageSize', 20);
      }
      console.log('formData：', this.formData);
    },
    pageChange(value) {
      this.formData.pageNo = value.pageNo;
      this.formData.pageSize = value.pageSize;
    },
  },
  watch: {
    columns: {
      handler(newVal) {
        this.handleProp(newVal);
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.publi-form {
  // padding-top: 20px;
}
.el-form-item__label-wrap {
  margin-left: 10px;
}
.publi-form /deep/ .el-date-editor.el-input,
.el-input__inner,
.el-input {
  width: 200px;
}
.publi-form /deep/ .el-range-editor.el-input__inner {
  width: 350px;
}
.publi-flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}
.func-btn /deep/ .el-form-item__content {
  display: flex;
  justify-content: flex-start;
}
</style>

配置项

export function formColumns() {
  return [
    {
      prop: 'doctorName',
      label: '姓名',
      placeholder: '请输入医生姓名',
      type: 'input',
      default: '',
    },
    {
      prop: 'departmentId',//属性名
      label: '所属科室',//label
      placeholder: '请选择科室',//占位
      type: 'select',//表单类型
      default: '',//默认值
      options: [],//接口请求数据后再赋值
      optionsDefault: ['departmentName', 'departmentId'],//[label,value]
      filterable: true,//可搜索
    },
    {
      prop: 'approvalStatus',
      label: '审批状态',
      placeholder: '请选择审批状态',
      type: 'select',
      default: '',
      options: [
        {
          label: '已审批',
          value: 1,
        },
        {
          label: '未审批',
          value: 0,
        },
      ],
      optionsDefault: ['label', 'value'],
    },
    {
      prop: 'doctorNum',
      label: '编号',
      placeholder: '请输入医生编号',
      type: 'input',
      default: '',
    },
  ];
}