修改

components/data-table.vue

@@ -15,7 +15,7 @@
                     type="text"
                     :icon="item.icon || ''"
                     size="mini"
-                    @click="handleOpera(row, item.method, item.confirm, item.methodZh, item.label)"
+                    @click="handleOpera(row, item.method, item.confirm, item.methodZh, item.label, $index)"
                   ></el-button>
                 </el-tooltip>
               </template>
@@ -60,7 +60,7 @@ export default {
         } else return cellValue;
       }
     },
-    handleOpera(data, method, confirm = false, methodZh, label) {
+    handleOpera(data, method, confirm = false, methodZh, label, index) {
       if (!methodZh) {
         methodZh = label;
       }
@@ -71,11 +71,11 @@ export default {
           type: 'warning',
         })
           .then(() => {
-            this.$emit(method, data);
+            this.$emit(method, { data, index });
           })
           .catch(() => {});
       } else {
-        this.$emit(method, data);
+        this.$emit(method, { data, index });
       }
     },
     display(item, row) {

components/form.vue

@@ -1,61 +1,68 @@
 <template>
   <div id="add">
-    <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="form" size="small" @submit.native.prevent>
-      <el-form-item v-for="(item, index) in fields" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
-        <template v-if="!item.custom">
-          <template v-if="item.type === `date` || item.type === `datetime`">
-            <el-date-picker v-model="form[item.model]" :type="item.type" placeholder="选择择" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
-          </template>
-          <template v-else-if="item.type === `year` || item.type === `week` || item.type === `day`">
-            <el-date-picker
-              v-model="form[item.model]"
-              :type="item.type"
-              placeholder="选择择"
-              :format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
-              :value-format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
-            >
-            </el-date-picker>
-          </template>
-          <template v-else-if="item.type === 'radio'">
-            <el-radio-group v-model="form[item.model]" size="mini" v-bind="item.options">
-              <slot name="radios" v-bind="{ item, form, fieldChange }"></slot>
-            </el-radio-group>
-          </template>
-          <template v-else-if="item.type === 'checkbox'">
-            <el-checkbox-group v-model="form[item.model]" v-bind="item.options">
-              <slot name="checkboxs" v-bind="{ item, form, fieldChange }"></slot>
-            </el-checkbox-group>
-          </template>
-          <template v-else-if="item.type === 'select'">
-            <el-select v-model="form[item.model]" v-bind="item.options" filterable>
-              <slot name="options" v-bind="{ item, form, fieldChange }"></slot>
-            </el-select>
-          </template>
-          <template v-else-if="item.type === 'textarea'">
-            <el-input v-model="form[item.model]" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
-          </template>
-          <template v-else-if="item.type === 'editor'">
-            <wang-editor v-model="form[item.model]" v-if="!loading"></wang-editor>
-          </template>
-          <template v-else-if="item.type === 'text'">
-            {{ form[item.model] }}
-          </template>
-          <template v-else>
-            <el-input v-model="form[item.model]" :type="getField('type', item)" :placeholder="getField('placeholder', item)" v-bind="item.options"></el-input>
-          </template>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="form" size="small" @submit.native.prevent :style="styles">
+      <template v-for="(item, index) in fields">
+        <template v-if="!loading">
+          <el-form-item v-if="display(item)" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
+            <template v-if="!item.custom">
+              <template v-if="item.type === `date` || item.type === `datetime`">
+                <el-date-picker v-model="form[item.model]" :type="item.type" placeholder="选择择" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+                </el-date-picker>
+              </template>
+              <template v-else-if="item.type === `year` || item.type === `week` || item.type === `day`">
+                <el-date-picker
+                  v-model="form[item.model]"
+                  :type="item.type"
+                  placeholder="选择择"
+                  :format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
+                  :value-format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
+                >
+                </el-date-picker>
+              </template>
+              <template v-else-if="item.type === 'radio'">
+                <el-radio-group v-model="form[item.model]" size="mini" v-bind="item.options">
+                  <slot name="radios" v-bind="{ item, form, fieldChange }"></slot>
+                </el-radio-group>
+              </template>
+              <template v-else-if="item.type === 'checkbox'">
+                <el-checkbox-group v-model="form[item.model]" v-bind="item.options">
+                  <slot name="checkboxs" v-bind="{ item, form, fieldChange }"></slot>
+                </el-checkbox-group>
+              </template>
+              <template v-else-if="item.type === 'select'">
+                <el-select v-model="form[item.model]" v-bind="item.options" filterable>
+                  <slot name="options" v-bind="{ item, form, fieldChange }"></slot>
+                </el-select>
+              </template>
+              <template v-else-if="item.type === 'textarea'">
+                <el-input v-model="form[item.model]" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
+              </template>
+              <template v-else-if="item.type === 'editor'">
+                <wang-editor v-model="form[item.model]"></wang-editor>
+              </template>
+              <template v-else-if="item.type === 'text'">
+                {{ form[item.model] }}
+              </template>
+              <template v-else>
+                <el-input
+                  v-model="form[item.model]"
+                  :type="getField('type', item)"
+                  :placeholder="getField('placeholder', item)"
+                  v-bind="item.options"
+                ></el-input>
+              </template>
+            </template>
+            <template v-else>
+              <slot name="custom" v-bind="{ item, form, fieldChange }"></slot>
+            </template>
+          </el-form-item>
         </template>
-        <template v-else>
-          <slot name="custom" v-bind="{ item, form, fieldChange }"></slot>
-        </template>
-      </el-form-item>
+      </template>
       <el-form-item>
         <el-row type="flex" align="middle" justify="space-around">
           <el-col :span="6">
             <el-button type="primary" @click="save">保存</el-button>
           </el-col>
-          <!-- <el-col :span="6">
-            <el-button @click="$emit('cancel')">返回</el-button>
-          </el-col> -->
         </el-row>
       </el-form-item>
     </el-form>
@@ -72,13 +79,13 @@ export default {
     rules: { type: Object, default: () => {} },
     isNew: { type: Boolean, default: true },
     data: null,
+    styles: { type: Object, default: () => {} },
   },
   components: {
     wangEditor,
   },
   data: () => ({
     form: {},
-    display: undefined,
     show: false,
     dateShow: false,
     loading: true,
@@ -95,10 +102,12 @@ export default {
     },
     data: {
       handler(val) {
+        this.loading = true;
         if (val) this.$set(this, `form`, this.data);
         this.loading = false;
       },
       immediate: true,
+      deep: true,
     },
   },
   methods: {
@@ -113,7 +122,8 @@ export default {
     save() {
       this.$refs['form'].validate(valid => {
         if (valid) {
-          this.$emit(`save`, { isNew: this.isNew, data: this.form });
+          this.$emit(`save`, { isNew: this.isNew, data: JSON.parse(JSON.stringify(this.form)) });
+          this.$refs.form.resetFields();
         } else {
           console.warn('form validate error!!!');
         }
@@ -130,6 +140,11 @@ export default {
         }
       }
     },
+    display(field) {
+      let dis = _.get(field, `display`);
+      if (!_.isFunction(dis)) return true;
+      else return dis(field, this.form);
+    },
   },
 };
 </script>