meixioacomponent 0.1.0

package/packages/components/proForm/proForm/pro_form.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="pro_form_content" ref="proFormWrap">
+    <el-form
+      ref="form"
+      :rules="rules"
+      :model="formdata"
+      :label-width="labelWidth"
+      :label-position="labelPosition"
+    >
+      <div
+        :key="index"
+        class="form-line-box"
+        v-for="(item, index) in formLineList"
+      >
+        <el-form-item
+          :key="cindex"
+          :prop="citem.key"
+          :label="citem.label"
+          v-for="(citem, cindex) in item"
+          :class="[`chunk-${chunkLength}`, `${flexClass}`]"
+        >
+          <span slot="label" class="item-label">{{ citem.label }}</span>
+          <pro_form_itemVue
+            :config="citem"
+            :form="form"
+            v-if="formType == 'default' && citem.type != 'area'"
+            @formItemConfirm="formItemConfirm"
+            v-model="formdata[`${citem.key}`]"
+          >
+            <template slot="template" v-if="citem.type == 'template'">
+              <slot :name="`form-${citem.key}`" :scope="formdata"></slot>
+            </template>
+          </pro_form_itemVue>
+          <baseAreaVue
+            :disable="citem.disabled"
+            v-model="formdata[`${citem.key}`]"
+            v-if="citem.type == 'area'"
+          ></baseAreaVue>
+          <baseUploadVue
+            :max="formConfig.max"
+            v-if="formType == `upload`"
+            v-model="formdata[`${citem.key}`]"
+          ></baseUploadVue>
+        </el-form-item>
+      </div>
+
+      <baseButtonHandleVue
+        v-if="footer"
+        :align="`end`"
+        :size="`mini`"
+        class="form-footer"
+        :config="handleConfig"
+      ></baseButtonHandleVue>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import pro_form_itemVue from "./pro_form_item.vue";
+import baseAreaVue from "../../base/baseArea/baseArea.vue";
+import baseUploadVue from "../../base/baseUpload/baseUpload.vue";
+import baseButtonHandleVue from "../../base/baseButtonHandle/baseButtonHandle.vue";
+//
+import { ArrayChunk } from "../../../utils/utils";
+export default {
+  name: "baseForm",
+  data() {
+    return {
+      formdata: {},
+      handleConfig: [],
+      formLineList: [],
+      chunkLength: null,
+    };
+  },
+  created() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.init();
+      this.setFormData();
+      this.setFormLineList();
+    });
+  },
+  props: {
+    rules: {
+      type: Object,
+    },
+    labelPosition: {
+      type: String,
+      default: `right`,
+    },
+    formList: {
+      type: Array,
+      require: true,
+    },
+
+    form: {
+      type: Boolean,
+      default: true,
+    },
+
+    labelWidth: {
+      type: String,
+      default: "100px",
+    },
+
+    footer: {
+      type: Boolean,
+      default: true,
+    },
+
+    formType: {
+      type: String,
+      default: "default",
+    },
+
+    formConfig: {
+      type: Object,
+      require: true,
+    },
+  },
+  components: {
+    baseAreaVue,
+    baseUploadVue,
+    pro_form_itemVue,
+    baseButtonHandleVue,
+  },
+  computed: {
+    flexClass() {
+      let labelPosition = this.$props.labelPosition;
+      if (labelPosition == "top") {
+        return "flex-column";
+      } else {
+        return "flex-row";
+      }
+    },
+  },
+  methods: {
+    init() {
+      if (this.$props.form) {
+        this.handleConfig = [
+          {
+            text: "取消",
+            type: "info",
+            plain: true,
+            click: () => {
+              this.onCancel();
+            },
+          },
+          {
+            text: "确定",
+            type: "primary",
+            plain: false,
+            click: () => {
+              this.onSubmit();
+            },
+          },
+        ];
+      }
+
+      let width = this.$refs.proFormWrap.clientWidth;
+      if (this.$props.formType != "default") {
+        this.chunkLength = 1;
+        return;
+      }
+      if (width < 1240) {
+        this.chunkLength = 2;
+        return;
+      }
+
+      this.chunkLength = 3;
+    },
+    formItemConfirm(params) {
+      // element 验证单条表单修改
+      const rulesItem = this.$props.rules[params.config.key];
+      if (rulesItem) {
+        this.$refs.form.validateField([`${params.config.key}`], (errorMsg) => {
+          console.log(errorMsg);
+          if (!errorMsg) {
+            params.this.handleConfirm();
+            this.$emit("formItemConfirm", params.config);
+          }
+        });
+      } else {
+        params.this.handleConfirm();
+        this.$emit("formItemConfirm", params.config);
+      }
+    },
+    setFormData() {
+      this.formdata = {};
+      this.$props.formList.forEach((item) => {
+        this.$set(this.formdata, `${item.key}`, item.value);
+      });
+    },
+    setFormLineList() {
+      this.formLineList = ArrayChunk(this.$props.formList, this.chunkLength);
+      console.log(this.formLineList);
+    },
+    // 返回form表单值
+    returnFormValue() {
+      return this.formdata;
+    },
+    // 重置表单的值
+    reset() {
+      this.$refs.form.resetFields();
+    },
+
+    checkValidate() {
+      return new Promise((resolve, reject) => {
+        this.$refs.form.validate((validate) => {
+          resolve(validate);
+        });
+      });
+    },
+
+    async onSubmit() {
+      if (this.$props.rules) {
+        let validate = await this.checkValidate();
+        if (validate) {
+          this.$emit("formSubmit", true);
+        } else {
+          this.$emit("formSubmit", false);
+        }
+      } else {
+        this.$emit("formSubmit", true);
+      }
+    },
+    // 取消按钮
+    onCancel() {
+      this.$emit("onCancel");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.pro_form_content {
+  width: 100%;
+  height: auto;
+  .form-line-box {
+    height: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    .item-label {
+      font-size: var(--font-size-base);
+      color: var(--form-label-color) !important;
+    }
+  }
+  /deep/ .el-form-item__content {
+    width: 100% !important;
+    box-sizing: border-box;
+    padding-right: var(--padding-5);
+    margin-left: 0px !important;
+  }
+  .chunk-1 {
+    width: 100%;
+  }
+  .chunk-2 {
+    width: 50%;
+  }
+  .chunk-3 {
+    width: 33%;
+  }
+  .flex-row {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+  .flex-column {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: flex-start;
+  }
+  .form-footer {
+    margin-top: var(--margin-5);
+  }
+}
+</style>