dz2.1/src/components/publicPageForm/index.vue

<template>
  <div class="PublicPageForm">
    <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in formItem" :key="index" :span="formType == 'horizontal' ? formSpan : 24">
          <el-form-item :rules="fromDataReq(item)" :prop="item.columncode" :label="item.columnname">
            <template v-if="item.dropdownlist ||item.dropdownlist == 0">
              <el-select class="input-shadow" size="small" filterable default-first-option style="width: 100%" v-model="tableForm[item.columncode]" @change="changeSelect(item.columncode, item)" placeholder="请选择" clearable @clear="tableForm[item.columncode] = ''">
                <el-option v-for="itemParams in tableOptions[item.columncode]" :key="itemParams[item['dropdownlistid']]" :label="itemParams[item['dropdownlistlable']]" :value="itemParams[item['dropdownlistid']]">
                </el-option>
              </el-select>
            </template>
            <template v-else-if="fromDataType(item.datatype) == 'text'||fromDataType(item.datatype) == 'VARCHAR'">
              <el-input size="small" @change="inputChangeHandler(item.columncode)" v-model="tableForm[item.columncode]"></el-input>
            </template>
            <template v-else-if="fromDataType(item.datatype) == 'date'">
              <el-date-picker class="datetimes" value-format="yyyy-MM-dd" v-model="tableForm[item.columncode]" type="date" placeholder="选择日期" @change="inputChangeHandler(item.columncode)">
              </el-date-picker>
            </template>
            <template v-else-if="fromDataType(item.datatype) == 'datetime'">
              <el-date-picker class="datetimes" value-format="yyyy-MM-dd HH:mm:ss" v-model="tableForm[item.columncode]" type="datetime" placeholder="选择日期时间" @change="inputChangeHandler(item.columncode)">
              </el-date-picker>
            </template>
            <template v-else-if="fromDataType(item.datatype) == 'INT' || fromDataType(item.datatype) == 'tinyint'">
              <el-input size="small" v-model.number="tableForm[item.columncode]" onkeyup="value=value.replace(/[^1-9]/g,'')" @change="inputChangeHandler(item.columncode)"></el-input>
            </template>
            <template v-else>
              <el-input size="small" v-model="tableForm[item.columncode]" @change="inputChangeHandler(item.columncode)"></el-input>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Query } from "@/api/webApi"
export default {
  name: 'PublicPageForm',
  props: {
    formType: {
      type: String,
      default: 'vertical' //horizontal--水平布局 默认一行3列
    },
    formItem: {
      type: Array,
      default: () => new Array()
    },
    formData: {
      type: Object,
      default: () => new Object()
    },
    formSpan: {
      type: Number,
      default: 8
    },
    labelWidth: {
      type: String,
      default: '80px'
    }
  },
  data () {
    return {
      tableForm: {},
      tableOptions: {}
    }
  },
  watch: {
    formItem: {
      handler (array) {
        this.getSelectData(array)
      },
      deep: true
    },
    formData: {
      handler (obj) {
        this.tableForm = obj
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    //设置新增修改表单类型
    fromDataType () {
      return function (type) {
        if (type) {
          return type.replace(/\([^\)]*\)/g, "");
        }
      }
    },
    //设置新增修改表单必填类型
    fromDataReq () {
      return function (item) {
        const { dropdownlist, datatype, columnname, isrequired, formatrule } = item
        const itemType = datatype.replace(/\([^\)]*\)/g, "")
        const itemReq = isrequired ? true : false
        const itemRule = formatrule ? true : false
        if (dropdownlist || dropdownlist == 0) return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'change' }]
        else if (itemType == 'date' || itemType == 'datetime') return [{ required: itemReq, type: 'date', message: `${columnname}不能为空`, trigger: 'change' }]
        else
          if (itemReq && itemRule) return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'blur' }, { pattern: new RegExp(formatrule), message: `请输入合法的${columnname}规则`, trigger: 'blur' }]
        return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'blur' }]
      }
    },
  },
  methods: {
    //获取表单下拉数据
    getSelectData (formItem = []) {
      if (!formItem.length || !Array.isArray(formItem)) return
      const formItemCopy = _.cloneDeep(formItem)
      formItemCopy.map(async ({ dropdownlist, columncode }) => {
        if (dropdownlist || dropdownlist == 0) {
          const datacontent = { filter: { 1: 1 } }
          const { code, returnData } = await Query({ serviceid: dropdownlist, datacontent, event: '0' })
          this.tableOptions[columncode] = code == 0 && returnData?.length ? returnData : []
        }
      })
    },
    //获取表单下拉数据
    changeSelect (code, item) { },
    inputChangeHandler (data) {
      if (!this.tableForm[data]) this.tableForm[data] = null
    },
    restForm () {
      this.$refs['ruleForm'].resetFields()
    },
    // 新增/编辑-确认
    submitClickHandler () {
      let flag = false
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false;
        }
      });
      return flag
    }
  }
}
</script>