kuailelunwen_new_houtai/src/components/GuipForm copy.vue

<!-- Dom模板 -->
<template>
    <div>
      <!-- Dom内容 -->
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :label-width="labelWidth"
        class="el-row demo-ruleForm"
        :label-position="labelPosition"
      >
        <el-form-item
          v-for="(item, index) in formList"
          :key="index"
          :label="item.label"
          :prop="item.field"
          :rules="detail ? false : item.rules"
          :class="item.colWidth"
        >
          <!-- 输入框 -->
          <template v-if="item.type === 'input'">
            <el-input
              :placeholder="item.placeholder"
              clearable
              :disabled="disabled"
              v-model="ruleForm[`${item.field}`]"
            />
          </template>
          <!-- 下拉框 -->
          <template v-if="item.type === 'select'">
            <el-select
              v-model="ruleForm[`${item.field}`]"
              :placeholder="item.placeholder"
              :disabled="disabled"
              :multiple="item.multiple"
              style="width: 100%"
              @change="changeSelect"
            >
              <el-option
                v-for="(element, i) in item.options"
                :label="element.label"
                :value="`${element.value}`"
                :key="i"
              />
            </el-select>
          </template>
          <!-- 单选框 -->
          <template v-if="item.type === 'radio'">
            <el-radio-group
              v-model="ruleForm[`${item.field}`]"
              :disabled="disabled"
            >
              <el-radio
                v-for="(element, i) in item.options"
                :key="i"
                :label="`${element.value}`"
              >
                {{ element.label }}
              </el-radio>
            </el-radio-group>
          </template>
          <!-- 复选框 -->
          <template v-if="item.type === 'checkbox'">
            <el-checkbox-group
              v-model="ruleForm[`${item.field}`]"
              :disabled="disabled"
            >
              <el-checkbox
                v-for="(city, i) in item.cities"
                :label="city"
                :name="city"
                :key="i"
              >
                {{ city }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
          <!--文本框  -->
          <template v-if="item.type === 'textarea'">
            <el-input
              :maxlength="item.maxLenght"
              type="textarea"
              :rows="item.rowsHeight"
              :disabled="disabled"
              :placeholder="item.placeholder"
              v-model="ruleForm[`${item.field}`]"
            />
          </template>
          <!-- 时间选择 -->
          <template v-if="item.type === 'date'">
            <el-date-picker
              v-model="ruleForm[`${item.field}`]"
              align="right"
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
              :disabled="disabled"
              type="date"
              placeholder="选择日期"
              :picker-options="item.pickerOptions"
            >
            </el-date-picker>
          </template>
          <!-- 附件 -->
          <template v-if="item.type === 'upload'">
            <el-upload
              :action="item.action"
              list-type="picture-card"
              :headers="item.headers"
              :disabled="disabled"
              class="upload-demo"
              :multiple="item.multiple"
              :data="ruleForm[`${item.field}`]"
              :file-list="ruleForm[`${item.field}`]"
              :on-change="uploadFile"
              :auto-upload="false"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </template>
        </el-form-item>
      </el-form>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
  </template>
  <script>
  export default {
    props: {
      detail: {
        type: Boolean,
        default: () => false,
      },
      disabled: {
        type: Boolean,
        default: () => false,
      },
      //回显数据
      fromItem: {
        type: Object,
        default: () => null,
      },
      labelWidth: {
        type: String,
        default: () => "100px",
      },
      // 表单数据
      formNewList: {
        type: Array,
        default: () => [],
      },
      labelPosition: {
        type: String,
        default: () => "right",
      },
    },
    watch: {
      formNewList: {
        immediate: true, // 立即触发监听函数
        handler() {
          this.formList = this.formNewList;
          this.defaultFun();
        },
      },
    },
    data() {
      return {
        ruleForm: {},
        formList: [],
        dialogImageUrl: "",
        dialogVisible: false,
      };
    },
    methods: {
      //下拉框下拉事件
      changeSelect(row) {
        // console.log(row);
        this.$emit("changeSelect", row);
      },
      //上传附件
      uploadFile(file, fileList) {
        this.formList.forEach((item) => {
          if (item.type === "upload") {
            this.$set(this.ruleForm, item.field, fileList);
          }
        });
      },
      //删除附件
      handleRemove(file) {
        this.formList.forEach((item) => {
          let fileList = this.ruleForm[`${item.field}`];
          if (item.type === "upload") {
            fileList.forEach((element, i) => {
              if (file.uid === element.uid) {
                fileList.splice(i, 1);
              }
            });
          }
          this.$set(this.ruleForm, item.field, fileList);
        });
      },
      //附件预览
      handlePictureCardPreview(file) {
        console.log(file);
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //表单默认状态
      defaultFun() {
        if (this.fromItem !== null) {
          // 数据回显
          this.ruleForm = { ...this.ruleForm, ...this.fromItem };
        } else {
          //设置默认值
          this.formList.forEach((item) => {
            if (item.cities) {
              this.$set(this.ruleForm, item.field, []);
            } else {
              this.$set(this.ruleForm, item.field, "");
            }
            if (item.type === "radio") {
              this.$set(this.ruleForm, item.field, "1");
            }
            if (item.type === "upload") {
              this.$set(this.ruleForm, item.field, []);
            }
          });
        }
        console.log(this.ruleForm);
      },
      //from表单点击事件
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit("headdenForm", this.ruleForm);
          }
        });
      },
      //清空表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
  };
  </script>