新增表单自定义布局 #34

yidalh · yidalh · commit a19d9224a76d · 2020-09-19T17:52:26.000+08:00
diff --git a/public/app.js b/public/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=d686e3c8b0aaf5de7960",
+    "/app.js": "/app.js?id=d84a73a821faafc47d53",
     "/manifest.js": "/manifest.js?id=8991394a854ee5cdffc3",
     "/vendor.js": "/vendor.js?id=df0be4950fcb717193ba"
 }
diff --git a/resources/js/components.js b/resources/js/components.js
@@ -9,10 +9,15 @@ Vue.component("Column", require("@/components/layout/Column").default);
 Vue.component("Grid", require("@/components/grid/Table").default);
 Vue.component("Tree", require("@/components/grid/Tree").default);
 Vue.component("Form", require("@/components/form/Form").default);
+Vue.component("FormItem", require("@/components/form/FormItem").default);
+
 Vue.component("BaseForm", require("@/components/form/BaseForm").default);
 Vue.component("MenuItem", require("@/components/layout/MenuItem").default);
 
 //Form
+
+
+
 Vue.component("Input", require("@/components/widgets/Form/Input").default);
 Vue.component(
     "RadioGroup",
diff --git a/resources/js/components/form/Form.vue b/resources/js/components/form/Form.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="form-page">
-    <component
-      v-if="attrs.top"
-      :is="attrs.top.componentName"
-      :attrs="attrs.top"
-    />
+    <component v-if="attrs.top" :is="attrs.top.componentName" :attrs="attrs.top" />
     <component
       :is="attrs.attrs.isDialog ? 'div' : 'el-card'"
       shadow="never"
@@ -37,73 +33,18 @@
             v-for="tab in attrs.tabs"
             :key="tab"
           >
-            <template v-for="(item, index) in attrs.formItems">
-              <ItemIf
-                v-if="tab == item.tab"
-                :key="index"
-                :form_item="item"
-                :form_items="attrs.formItems"
-                :form_data="formData"
-              >
-                <component
-                  v-if="item.topComponent"
-                  :is="item.topComponent.componentName"
-                  :attrs="item.topComponent"
-                />
-
-                <el-form-item
-                  :prop="item.prop"
-                  :label-width="item.labelWidth"
-                  :error="item.error"
-                  :show-message="item.showMessage"
-                  :inline-message="item.inlineMessage"
-                  :size="item.size"
-                >
-                  <span slot="label" v-if="!item.hideLabel">
-                    {{ item.label }}
-                  </span>
-                  <template>
-                    <el-col :span="item.inputWidth">
-                      <template v-if="item.relationName">
-                        <ItemDiaplsy
-                          v-model="
-                            formData[item.relationName][item.relationValueKey]
-                          "
-                          :form-item="item"
-                          :form-items="attrs.formItems"
-                          :form-data="formData"
-                        />
-                      </template>
-                      <template v-else>
-                        <ItemDiaplsy
-                          v-model="formData[item.prop]"
-                          :form-item="item"
-                          :form-items="attrs.formItems"
-                          :form-data="formData"
-                        />
-                      </template>
-
-                      <div
-                        v-if="item.help"
-                        class="form-item-help"
-                        v-html="item.help"
-                      ></div>
-                    </el-col>
-                  </template>
-                </el-form-item>
-                <component
-                  v-if="item.footerComponent"
-                  :is="item.footerComponent.componentName"
-                  :attrs="item.footerComponent"
-                />
-              </ItemIf>
-            </template>
+            <component
+              v-for="(row, index) in attrs.formItemLayout"
+              :key="index"
+              :is="row.componentName"
+              :attrs="row"
+              :formData="formData"
+              :formItems="attrs.formItems"
+              :tab="tab"
+            />
           </component>
         </component>
-        <component
-          :is="attrs.actions.fixed ? 'Affix' : 'div'"
-          :offset-bottom="20"
-        >
+        <component :is="attrs.actions.fixed ? 'Affix' : 'div'" :offset-bottom="20">
           <div
             class="form-bottom-actions flex padding-tb"
             :class="{ 'form-bottom-actions-fixedxxx': attrs.actions.fixed }"
@@ -137,9 +78,12 @@
                 :autofocus="attrs.actions.cancelButton.autofocus"
                 :loading="loading"
                 @click="onCancel"
-                ><template v-if="attrs.actions.cancelButton.content">{{
+              >
+                <template v-if="attrs.actions.cancelButton.content">
+                  {{
                   attrs.actions.cancelButton.content
-                }}</template>
+                  }}
+                </template>
               </el-button>
 
               <el-button
@@ -156,33 +100,29 @@
                 :autofocus="attrs.actions.submitButton.autofocus"
                 :loading="loading"
                 @click="submitForm(attrs.ref || 'form')"
-                ><template v-if="attrs.actions.submitButton.content">{{
+              >
+                <template v-if="attrs.actions.submitButton.content">
+                  {{
                   attrs.actions.submitButton.content
-                }}</template>
+                  }}
+                </template>
               </el-button>
             </div>
           </div>
         </component>
       </el-form>
     </component>
-    <component
-      v-if="attrs.bottom"
-      :is="attrs.bottom.componentName"
-      :attrs="attrs.bottom"
-    />
+    <component v-if="attrs.bottom" :is="attrs.bottom.componentName" :attrs="attrs.bottom" />
   </div>
 </template>
 <script>
 import { BaseComponent } from "@/mixins.js";
-import ItemDiaplsy from "./ItemDiaplsy";
-import ItemIf from "./ItemIf";
+
 import { isNull } from "../../utils";
 import Affix from "../widgets/common/affix";
 export default {
   mixins: [BaseComponent],
   components: {
-    ItemDiaplsy,
-    ItemIf,
     Affix,
   },
   props: {
@@ -192,14 +132,6 @@ export default {
     isEdit() {
       return this.attrs.mode == "edit";
     },
-    ignoreKey() {
-      return this._.map(
-        this.attrs.formItems.filter(
-          (e) => !e.ignoreEmpty || !isNull(this.formData[e.prop])
-        ),
-        "prop"
-      );
-    },
   },
   data() {
     return {
@@ -250,7 +182,8 @@ export default {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.loading = true;
-          const formatData = this._.pick(this.formData, this.ignoreKey);
+          console.log(this.ignoreKey);
+          const formatData = this._.omit(this.formData, this.attrs.ignoreEmptyProps);
           if (this.isEdit) {
             this.$http
               .put(this.attrs.action, formatData)
diff --git a/resources/js/components/form/FormItem.vue b/resources/js/components/form/FormItem.vue
@@ -0,0 +1,68 @@
+<template>
+  <ItemIf v-if="tab == item.tab" :form_item="item" :form_items="formItems" :form_data="formData">
+    <component
+      v-if="item.topComponent"
+      :is="item.topComponent.componentName"
+      :attrs="item.topComponent"
+    />
+
+    <el-form-item
+      :prop="item.prop"
+      :label-width="item.labelWidth"
+      :error="item.error"
+      :show-message="item.showMessage"
+      :inline-message="item.inlineMessage"
+      :size="item.size"
+    >
+      <span slot="label" v-if="!item.hideLabel">{{ item.label }}</span>
+      <template>
+        <el-col :span="item.inputWidth">
+          <template v-if="item.relationName">
+            <ItemDiaplsy
+              v-model="
+                            formData[item.relationName][item.relationValueKey]
+                          "
+              :form-item="item"
+              :form-items="formItems"
+              :form-data="formData"
+              v-bind="$attrs"
+            />
+          </template>
+          <template v-else>
+            <ItemDiaplsy
+              v-model="formData[item.prop]"
+              :form-item="item"
+              :form-items="formItems"
+              :form-data="formData"
+              v-bind="$attrs"
+            />
+          </template>
+
+          <div v-if="item.help" class="form-item-help" v-html="item.help"></div>
+        </el-col>
+      </template>
+    </el-form-item>
+    <component
+      v-if="item.footerComponent"
+      :is="item.footerComponent.componentName"
+      :attrs="item.footerComponent"
+    />
+  </ItemIf>
+</template>
+<script>
+import ItemDiaplsy from "./ItemDiaplsy";
+import ItemIf from "./ItemIf";
+export default {
+  props: ["attrs", "tab", "formData", "formItems"],
+  components: {
+    ItemDiaplsy,
+    ItemIf,
+  },
+  mounted() {},
+  computed: {
+    item() {
+      return this.attrs;
+    },
+  },
+};
+</script>
diff --git a/resources/js/components/grid/ColumnDisplay.vue b/resources/js/components/grid/ColumnDisplay.vue
@@ -2,24 +2,24 @@
   <div class="display-column">
     <template v-if="_.isArray(value)">
       <template v-for="(item, key) in value">
-        <Value :value="item" :column-attr="columnAttr" :key="key" :row="row" :column-value="value" />
+        <Column :value="item" :column-attr="columnAttr" :key="key" :row="row" :column-value="value" />
       </template>
     </template>
     <template v-else>
-      <Value :value="value" :column-attr="columnAttr" :row="row" :column-value="value" />
+      <Column :value="value" :column-attr="columnAttr" :row="row" :column-value="value" />
     </template>
   </div>
 </template>
 <script>
 import { getArrayValue } from "@/utils";
-import Value from "./Column";
+import Column from "./Column";
 export default {
   props: {
     scope: Object,
     columns: Array
   },
   components: {
-    Value
+    Column
   },
   data() {
     return {};
diff --git a/resources/js/components/grid/Table.vue b/resources/js/components/grid/Table.vue
@@ -515,10 +515,10 @@ export default {
     background-color: #ebeef5;
   }
   .filter-form {
-    padding: 10px;
+    padding: 10px 10px 0 10px;
     background-color: #ffffff;
     .el-form-item {
-      margin-bottom: 0px;
+      margin-bottom: 10px;
       .el-form-item__label {
         padding: 0;
       }
diff --git a/resources/js/components/layout/Column.vue b/resources/js/components/layout/Column.vue
@@ -13,7 +13,7 @@
       :key="index"
       :is="content.componentName"
       :attrs="content"
-      v-bind="$props"
+      v-bind="$attrs"
     />
   </el-col>
 </template>
diff --git a/resources/js/components/layout/Content.vue b/resources/js/components/layout/Content.vue
@@ -13,7 +13,7 @@
         :key="index"
         :is="row.componentName"
         :attrs="row"
-        v-bind="$props"
+        v-bind="$attrs"
       />
     </div>
   </div>
diff --git a/resources/js/components/layout/Row.vue b/resources/js/components/layout/Row.vue
@@ -13,7 +13,7 @@
       :key="index"
       :is="column.componentName"
       :attrs="column"
-      v-bind="$props"
+      v-bind="$attrs"
     />
   </el-row>
 </template>
diff --git a/resources/js/components/widgets/Base/Button.vue b/resources/js/components/widgets/Base/Button.vue
@@ -85,6 +85,7 @@
         v-if="attrs.dialog.slot"
         :is="attrs.dialog.slot.componentName"
         :attrs="attrs.dialog.slot"
+        v-bind="$attrs"
       />
     </el-dialog>
   </span>
diff --git a/resources/js/components/widgets/Base/Card.vue b/resources/js/components/widgets/Base/Card.vue
@@ -11,12 +11,14 @@
         v-if="attrs.header"
         :is="attrs.header.componentName"
         :attrs="attrs.header"
+        v-bind="$attrs"
       />
     </div>
     <component
       v-if="attrs.content"
       :is="attrs.content.componentName"
       :attrs="attrs.content"
+      v-bind="$attrs"
     />
   </el-card>
 </template>
diff --git a/resources/js/components/widgets/Base/Tooltip.vue b/resources/js/components/widgets/Base/Tooltip.vue
@@ -17,6 +17,7 @@
       v-if="attrs.slot"
       :is="attrs.slot.componentName"
       :attrs="attrs.slot"
+      v-bind="$attrs"
     />
   </el-tooltip>
 </template>
diff --git a/resources/js/styles/admin.scss b/resources/js/styles/admin.scss
diff --git a/src/Controllers/UserController.php b/src/Controllers/UserController.php
diff --git a/src/Form.php b/src/Form.php
diff --git a/src/Form/FormItem.php b/src/Form/FormItem.php
diff --git a/src/Form/HasRef.php b/src/Form/HasRef.php

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "/app.js": "/app.js?id=d686e3c8b0aaf5de7960",`
	`2`	`+ "/app.js": "/app.js?id=d84a73a821faafc47d53",`
`3`	`3`	`"/manifest.js": "/manifest.js?id=8991394a854ee5cdffc3",`
`4`	`4`	`"/vendor.js": "/vendor.js?id=df0be4950fcb717193ba"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -515,10 +515,10 @@ export default {`
`515`	`515`	`background-color: #ebeef5;`
`516`	`516`	`}`
`517`	`517`	`.filter-form {`
`518`		`- padding: 10px;`
	`518`	`+ padding: 10px 10px 0 10px;`
`519`	`519`	`background-color: #ffffff;`
`520`	`520`	`.el-form-item {`
`521`		`- margin-bottom: 0px;`
	`521`	`+ margin-bottom: 10px;`
`522`	`522`	`.el-form-item__label {`
`523`	`523`	`padding: 0;`
`524`	`524`	`}`