From 70f019f639cc14bdaf50ad0a3b988ec43da13369 Mon Sep 17 00:00:00 2001
From: Aaron.Liu <427787340@qq.com>
Date: Sat, 15 Jun 2019 11:21:50 +0800
Subject: [PATCH] 新增cform组件及修改点备注

---
 examples/views/index.vue                   |   8 ++++++++
 packages/cform/index.vue                   | 271 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/dist-picker/dist-picker-inner.vue |   8 ++++----
 packages/editor/index.vue                  |  20 ++++++++++----------
 packages/index.js                          |   2 ++
 5 files changed, 295 insertions(+), 14 deletions(-)
 create mode 100644 packages/cform/index.vue

diff --git a/examples/views/index.vue b/examples/views/index.vue
index 5075bb6..a8349b9 100644
--- a/examples/views/index.vue
+++ b/examples/views/index.vue
@@ -60,6 +60,10 @@
     <div class="cpt-content">
       <eagle-tree-select v-model="treeSelectValue" :dataSource="treeSelectDataSource"></eagle-tree-select>
     </div>
+    <div class="cpt-title">表单生成器 eagle-form</div>
+    <div class="cpt-content">
+      <eagle-cform v-model="formValue" :list="formList"></eagle-cform>
+    </div>
   </div>
 </template>
 
@@ -73,6 +77,10 @@ export default {
       treeSelectValue: undefined,
       treeSelectDataSource: [
         { id: 0, label: '一级菜单', children: [{ id: 1, label: '二级菜单-1' }, { id: 2, label: '二级菜单-2', children: [{ id: 3, label: '三级菜单' }] }] }
+      ],
+      formValue: {},
+      formList: [
+        { type: 'el-input' }
       ]
     }
   },
diff --git a/packages/cform/index.vue b/packages/cform/index.vue
new file mode 100644
index 0000000..4b60524
--- /dev/null
+++ b/packages/cform/index.vue
@@ -0,0 +1,271 @@
+<style scoped>
+.edit-form {
+  padding-right: 30px;
+}
+.group-title {
+  font-weight: bold;
+  padding: 15px 5px;
+  border-bottom: 1px solid #d9d9d9;
+  margin-bottom: 30px;
+  /* margin-top: 15px;
+  margin-bottom: 30px; */
+}
+/* .group-title:first-child {
+  margin-top: 0px;
+} */
+
+.group-content {
+  margin: 15px 0px;
+}
+</style>
+
+<template>
+  <el-form class="edit-form" size="small" ref="form" :model="model" :label-width="labelWidth">
+    <template v-if="groupList.group">
+      <!-- 这里可以合为一个代码段判断 -->
+      <template v-for="(data, index) in groupList.data">
+        <template v-if="data.list.length > 0">
+          <!-- 这里可以判断是否满足分组条件决定显示title，另外下面content的class也可以判断，div可以换满span的col代替 -->
+          <!-- 加上选项tips提示判断，类似avue -->
+          <div class="group-title" :key="index + 'title'">{{ data.title }}</div>
+          <el-row class="group-content" :key="index + 'list'" :gutter="15">
+            <template v-for="(item, index) in data.list">
+              <el-col v-if="componentVisible(item.visible)" v-show="componentShow(item.show)" :key="index + 'data'" :span="!item.span ? 24 : item.span">
+                <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="item.rules">
+                  <component @input="(e) => handleComponentInput(e, item)" :is="item.type" @change="(e) => handleComponentChange(e, item)" v-on="handleComponentOn(item)" :style="componentStyle(item.style)" v-model="model[item.key]" v-bind="componentProps(item)"></component>
+                </el-form-item>
+              </el-col>
+            </template>
+          </el-row>
+        </template>
+      </template>
+    </template>
+    <template v-else>
+      <el-row :gutter="15">
+        <template v-for="(item, index) in list">
+          <el-col v-if="componentVisible(item.visible)" v-show="componentShow(item.show)" :key="index" :span="!item.span ? 24 : item.span">
+            <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="item.rules">
+              <component @input="(e) => handleComponentInput(e, item)" :is="item.type" @change="(e) => handleComponentChange(e, item)" v-on="handleComponentOn(item)" :style="componentStyle(item.style)" v-model="model[item.key]" v-bind="componentProps(item)"></component>
+            </el-form-item>
+          </el-col>
+        </template>
+      </el-row>
+    </template>
+    <!-- 使用slot，不用slot时可定义对齐位置 -->
+    <div style="text-align: right">
+      <el-button type="primary" size="small" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+      <el-button plain size="small" @click="handleCancel" style="margin-left: 8px">取消</el-button>
+    </div>
+  </el-form>
+</template>
+
+<script>
+export default { // ------------------------------------ 解决外部的v-model绑定值失效问题
+  name: 'Cform',
+  props: {
+    // 用于实例化本组件绑定v-model的值
+    value: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    // 配置列表 --------------------------------------------可换成对象，传list的同时传其它参数？是否跟formProps重复？？？
+    list: {
+      type: Array,
+      required: true
+    },
+    // 提交加载状态
+    submitLoading: Boolean, // --------------------------------- isLoading 或者loading，考虑骨架屏？
+    // 表单模式，一般结合外部模态框判断新增或修改使用 ------------------------------尽量去掉mode，在外部隐藏时销毁组件，避免历史值遗留问题
+    mode: String,
+    // 标签宽度 ------------------------------- form的props可以用单独的字段如formProps表示，动态传入，使用v-bind绑定
+    labelWidth: {
+      type: String,
+      default: '90px'
+    }
+  },
+  data() {
+    return {
+      // 编辑器表单模型
+      model: {}
+    };
+  },
+  watch: {
+    value: function(val) {
+      if (val) {
+        Object.keys(this.model).forEach(key => {
+          this.model[key] = val[key];
+        });
+      }
+    },
+    // 配置列表又改动时初始化表单模型
+    list: function(value) {
+      this.initModel(value);
+      const obj = {};
+      this.list.forEach(data => {
+        if (data.group) {
+          obj[data.group] = true;
+        }
+      });
+    }
+  },
+  computed: {
+    groupList() {
+      const obj = {};
+      this.list.forEach(data => {
+        if (data.group) {
+          if (!obj[data.group]) {
+            obj[data.group] = [];
+          }
+          obj[data.group].push(data);
+        }
+      });
+      return {
+        group: Object.keys(obj).length > 0,
+        data: Object.keys(obj).map(key => {
+          return { title: key, list: obj[key] };
+        })
+      };
+    }
+  },
+  created() {
+    // 初始化表单模型
+    this.initModel(this.list);
+  },
+  methods: {
+    handleComponentInput(e, item) {
+      if (item.oninput) {
+        item.oninput(e, this.model, this.mode);
+      }
+      this.emitModel();
+    },
+    handleComponentChange(e, item) {
+      if (item.onchange) {
+        item.onchange(e, this.model, this.mode);
+      }
+    },
+    handleComponentOn(item) {
+      if (item.on) {
+        if (typeof item.on === 'function') {
+          return item.on(this.model, this.mode);
+        } else {
+          return item.on
+        }
+      } else {
+        return undefined
+      }
+    },
+    // 向上推送表单值到实例化的组件的v-model中
+    emitModel() {
+      const result = {};
+      Object.keys(this.model).forEach(key => {
+        if (this.componentIsVisible(key)) {
+          let value = this.model[key];
+          if (this.model[key] === null) {
+            value = undefined;
+          }
+          result[key] = value;
+        }
+      });
+      this.$emit("input", result);
+    },
+    // 初始化表单模型
+    initModel(list) {
+      const model = {};
+      list.forEach(item => {
+        model[item.key] = item.default;
+      });
+      this.model = model;
+      this.emitModel();
+    },
+    // 设置表单模型值
+    setValue(value) {
+      this.reset();
+      Object.keys(value).forEach(key => {
+        this.model[key] = value[key];
+      });
+      this.emitModel();
+    },
+    // 判断名称为key的组件v-if是否为true
+    componentIsVisible(key) {
+      let visible = true;
+      this.list.forEach((item) => {
+        if (item.key === key) {
+          if (typeof item.visible === 'function') {
+            visible = item.visible(this.model, this.mode);
+          } else {
+            visible = item.visible === undefined ? true : item.visible;
+          }
+        }
+      });
+      return visible;
+    },
+    // 判断组件v-if状态
+    componentVisible(visible = true) {
+      let componentVisible = visible;
+      if (typeof visible === 'function') {
+        componentVisible = visible(this.model, this.mode);
+      }
+      return componentVisible;
+    },
+    // 判断组件v-show状态
+    componentShow(show = true) {
+      let componentShow = show;
+      if (typeof show === 'function') {
+        componentShow = show(this.model, this.mode);
+      }
+      return componentShow;
+    },
+    // 判断组件参数
+    componentProps(item) {
+      const { props = {}, propsEditor = {} } = item;
+      let connectedProps = { ...props, ...propsEditor };
+      Object.keys(connectedProps).forEach(key => {
+        if (typeof connectedProps[key] === 'function') {
+          connectedProps[key] = connectedProps[key](this.model, this.mode);
+        }
+      });
+      return connectedProps;
+    },
+    // 判断组件样式
+    componentStyle(style = {}) {
+      return {
+        width: "100%",
+        ...style
+      };
+    },
+    // 点击确定提交表单的操作
+    handleSubmit(name) {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          const result = {};
+          Object.keys(this.model).forEach(key => {
+            if (this.componentIsVisible(key)) {
+              let value = this.model[key];
+              if (this.model[key] === null) {
+                value = undefined;
+              }
+              result[key] = value;
+            }
+          });
+          this.$emit("submit", result);
+        }
+      });
+    },
+    // 重置表单
+    reset() {
+      Object.keys(this.model).forEach(key => {
+        this.model[key] = (this.list.find(item => item.key === key) || {}).default;
+      });
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate();
+      });
+    },
+    // 点击取消的操作
+    handleCancel() {
+      this.$emit("cancel");
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/packages/dist-picker/dist-picker-inner.vue b/packages/dist-picker/dist-picker-inner.vue
index 51010bb..ea3ee00 100644
--- a/packages/dist-picker/dist-picker-inner.vue
+++ b/packages/dist-picker/dist-picker-inner.vue
@@ -114,7 +114,7 @@ export default {
     }
   },
   created() {
-    if (this.type != 'mobile') {
+    if (this.type !== 'mobile') {
       this.provinces = this.getDistricts()
       this.cities = this.province ? this.getDistricts(this.getAreaCode(this.determineType(this.province))) : []
       this.areas = this.city ? this.getDistricts(this.getAreaCode(this.determineType(this.city), this.area)) : []
@@ -140,11 +140,11 @@ export default {
     },
     currentCity(value) {
       this.$emit('city', this.setData(value, this.currentProvince))
-      if (value != this.placeholders.city && this.hideArea) this.emit('selected')
+      if (value !== this.placeholders.city && this.hideArea) this.emit('selected')
     },
     currentArea(value) {
       this.$emit('area', this.setData(value, this.currentProvince))
-      if (value != this.placeholders.area) this.emit('selected')
+      if (value !== this.placeholders.area) this.emit('selected')
     },
     province(value) {
       this.currentProvince = this.province || this.placeholders.province
@@ -240,7 +240,7 @@ export default {
       if (codes.length > 1) {
         let index
         codes.forEach((item, i) => {
-          if (item.slice(0, 2) == preCode) {
+          if (item.slice(0, 2) === preCode) {
             index = i
           }
         })
diff --git a/packages/editor/index.vue b/packages/editor/index.vue
index 9cbca10..565b556 100644
--- a/packages/editor/index.vue
+++ b/packages/editor/index.vue
@@ -93,16 +93,16 @@ export default {
             container: [
               ['bold', 'italic', 'underline', 'strike'],
               ['blockquote', 'code-block'],
-              [{'header': 1}, {'header': 2}],
-              [{'list': 'ordered'}, {'list': 'bullet'}],
-              [{'script': 'sub'}, {'script': 'super'}],
-              [{'indent': '-1'}, {'indent': '+1'}],
-              [{'direction': 'rtl'}],
-              [{'size': ['12px', '14px', '16px', '18px', '20px', '24px', '32px']}],
-              [{'header': [1, 2, 3, 4, 5, 6, false]}],
-              [{'color': []}, {'background': []}],
-              [{'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']}],
-              [{'align': []}],
+              [{ 'header': 1 }, { 'header': 2 }],
+              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+              [{ 'script': 'sub' }, { 'script': 'super' }],
+              [{ 'indent': '-1' }, { 'indent': '+1' }],
+              [{ 'direction': 'rtl' }],
+              [{ 'size': ['12px', '14px', '16px', '18px', '20px', '24px', '32px'] }],
+              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+              [{ 'color': [] }, { 'background': [] }],
+              [{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'] }],
+              [{ 'align': [] }],
               ['clean'],
               ['link', 'image', 'video']
             ],
diff --git a/packages/index.js b/packages/index.js
index a7ca4b0..c17e6a2 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -3,6 +3,7 @@ import Confirm from './confirm'
 import DistPicker from './dist-picker'
 import Editor from './editor'
 import FileUpload from './file-upload'
+import Cform from './cform'
 import ImageUpload from './Image-upload'
 import ImageUploadMultiple from './Image-upload/multiple'
 import ImageView from './image-view'
@@ -13,6 +14,7 @@ import SwitchButton from './switch-button'
 import TreeSelect from './tree-select'
 
 const components = {
+  Cform,
   Code,
   Confirm,
   DistPicker,
--
libgit2 0.21.0