From 75ccd5cdeb3d87e89260adee90f17afe42d85113 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Wed, 28 Aug 2019 18:22:08 +0800
Subject: [PATCH] Scheme支持抽屉弹出框，支持静态数据增删改查

---
 examples/components/code-snippet.vue      |  6 +++---
 examples/styles/markdown.scss             |  4 ++++
 examples/views/docs/component/scheme.md   | 65 ++++++++---------------------------------------------------------
 examples/views/docs/guide/installation.md |  6 ++++--
 examples/views/layout/component.vue       |  1 -
 package.json                              |  2 +-
 packages/scheme/index.vue                 | 96 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------
 webpack/markdown-loader.js                |  6 +++---
 yarn.lock                                 |  8 ++++----
 9 files changed, 110 insertions(+), 84 deletions(-)

diff --git a/examples/components/code-snippet.vue b/examples/components/code-snippet.vue
index 4e98c6f..b5d8ad5 100644
--- a/examples/components/code-snippet.vue
+++ b/examples/components/code-snippet.vue
@@ -49,9 +49,9 @@ export default {
   text-align: left;
   // element-ui样式冲突
   ul > li {
-    list-style-type: none;
-    margin: 0px;
-    padding: 0px;
+    list-style-type: none !important;
+    margin: 0px !important;
+    padding: 0px !important;
   }
 }
 .eagle-code-snippet--demo {
diff --git a/examples/styles/markdown.scss b/examples/styles/markdown.scss
index e09e08e..cc26e61 100644
--- a/examples/styles/markdown.scss
+++ b/examples/styles/markdown.scss
@@ -8,6 +8,10 @@
     opacity: 0;
     transition: opacity 300ms;
   }
+  .hljs {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
   h1 {
     color: $black;
     font-weight: 500;
diff --git a/examples/views/docs/component/scheme.md b/examples/views/docs/component/scheme.md
index 2681ff6..b8759ff 100644
--- a/examples/views/docs/component/scheme.md
+++ b/examples/views/docs/component/scheme.md
@@ -10,72 +10,23 @@ Scheme是一个数据驱动的解决方案，通过既定的业务配置参数�
 
 ```html
 <template>
-  <eagle-scheme :list="schemeList" :option="{ auto: false }">
-    <!-- <div slot="action-bar" slot-scope="{ handleNew }">
-      <el-button type="warn" @click="handleNew">新增</el-button>
-    </div> -->
-    <el-button slot="action-button" type="success" plain size="small">启用</el-button>
-    <el-button slot="action-button" type="danger" plain size="small">禁用</el-button>
-    <el-table-column type="selection" width="50" align="center"></el-table-column>
-    <template #table-status="{ setDialog }">
-      <el-table-column prop="status" label="激活状态" min-width="120">
-        <el-tag @click="setDialog({ title: 'Status模式', type: 'dialog-status' })" slot-scope="{ row: { status } }" :type="status === 'active' ? 'success' : 'danger'">{{ status === 'active' ? '激活' : '禁用' }}</el-tag>
-      </el-table-column>
-    </template>
-    <template #search-status="{ model }">
-      <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
-    </template>
-    <template #form-group-setting >
-      <div style="padding: 10px 0px;margin-bottom: 30px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
-        <span>哎哟 - 设置 - 不错哦</span>
-        <el-button size="mini" type="primary">这是一个按钮</el-button>
-      </div>
-    </template>
-    <template #form-item-status="{ model }">
-      <el-input-number v-model="model.status"></el-input-number>
-    </template>
-    <template #view-item-code="{ model }">
-      <el-input disabled :value="model.code"></el-input>
-    </template>
-    <!-- <template #dialog-view="{ row }">
-      <div>这是一个自定义弹出框内容</div>
-      <div>{{ row }}</div>
-    </template> -->
-    <template #dialog-status>
-      <div>这是Status的内容</div>
-    </template>
-    <!-- 自定义按钮组 -->
-    <!-- <el-table-column slot="table-operation" prop="$operation" label="操作" min-width="140">
-      <el-tag>自定义按钮组</el-tag>
-    </el-table-column> -->
-    <!-- 在操作按钮组前加上新的按钮 -->
-    <!-- <template slot="table-operation-btn">
-      <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
-      <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
-    </template> -->
-    <!-- 在操作按钮组后追加新的按钮 -->
-    <!-- <template slot="table-operation-btn-append">
-      <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
-      <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
-    </template> -->
-  </eagle-scheme>
+  <eagle-scheme v-model="tableData" :list="schemeList"></eagle-scheme>
 </template>
 
 <script>
 export default {
   data() {
     return {
+      tableData: [
+        { name: '产品A', code: 'P0001', type: 'NORMAL', sort: 0, status: '0' },
+        { name: '产品B', code: 'P0002', type: 'BROKEN', sort: 1, status: '1' },
+      ],
       schemeList: [
         { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
-        { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }],
-          exclude: 'search', group: { label: '设置', key: 'setting', tip: { content: '哇哦', placement: 'left' } }, tip: '编码为数字' },
-        { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting', icon: 'edit' }, formScheme: { tip: '类型随便填' } },
+        { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }], exclude: 'search' },
+        { type: 'el-input', key: 'type', label: '类型' },
         { type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },
-        { type: 'el-input', key: 'status', label: '状态', group: { label: '信息', key: 'info', icon: 'info' }, formScheme: { label: '状态码' } },
-      ],
-      dataSource: [
-        { label: '选项A', value: 'A' },
-        { label: '选项B', value: 'B' },
+        { type: 'el-input', key: 'status', label: '状态' },
       ],
     }
   },
diff --git a/examples/views/docs/guide/installation.md b/examples/views/docs/guide/installation.md
index 7ce3fa2..4422592 100644
--- a/examples/views/docs/guide/installation.md
+++ b/examples/views/docs/guide/installation.md
@@ -5,11 +5,13 @@
 > 注意：由于yunweidashi.com服务器的SSL证书未经过第三方机构签署，因此在使用本私有库时，需要在git中设置忽略ssl验证`git config http.sslVerify "false"`
 
 ## npm安装
+
 ```bash
-npm install --save git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#{{ appVersion }}
+npm install --save git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#版本号
 ```
 
 ## yarn安装
+
 ```bash
-yarn add git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#{{ appVersion }}
+yarn add git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#版本号
 ```
\ No newline at end of file
diff --git a/examples/views/layout/component.vue b/examples/views/layout/component.vue
index 51f764b..52ab204 100644
--- a/examples/views/layout/component.vue
+++ b/examples/views/layout/component.vue
@@ -174,7 +174,6 @@ export default {
     width: 150px !important;
     padding: 30px 0;
     .anchor {
-      width: 100%;
       display: inline-block;
       font-size: 12px;
       text-decoration: none;
diff --git a/package.json b/package.json
index 1766535..d483ea1 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
-    "element-ui": "^2.10.0",
+    "element-ui": "^2.11.0",
     "nprogress": "^0.2.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue
index c0285b5..bfde832 100644
--- a/packages/scheme/index.vue
+++ b/packages/scheme/index.vue
@@ -127,8 +127,15 @@
           :page-size="pageSize" :total="totalCount" v-bind="{ 'page-sizes': [10, 20, 50], layout: 'total, sizes, prev, pager, next, jumper', ...paginationProps }"></el-pagination>
       </div>
     </div>
-    <el-dialog v-loading="dialogLoading" element-loading-background="rgba(255, 255, 255, 0.3)" :custom-class="dialogProps['custom-class'] || 'eagle-scheme__dialog'" :title="dialogProps.title || dialogTitle" :visible.sync="dialogVisible" v-bind="{ width: '65%', ...dialogProps }">
-      <component :is="_formComponent" v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']" ref="eagle-form" :list="_formList" v-model="formModel" :params="{ formMode }" :span="formProps.span || 12" :formProps="formProps" @submit="handleSubmit" @cancel="handleCancel">
+    <!-- 弹出框 -->
+    <component :is="dialogComponent || 'el-dialog'" v-loading="dialogLoading" element-loading-background="rgba(255, 255, 255, 0.3)"
+      :custom-class="dialogProps['custom-class'] || 'eagle-scheme__dialog'" :title="dialogProps.title || dialogTitle"
+      :visible.sync="dialogVisible" v-bind="{ width: '65%', size: dialogComponent === 'el-drawer' ? '50%' : undefined, ...dialogProps }"
+    >
+      <component :is="_formComponent" v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']"
+        ref="eagle-form" :list="_formList" v-model="formModel" :params="{ formMode }" :span="formProps.span || 12" :formProps="formProps"
+        @submit="handleSubmit" @cancel="handleCancel" :style="dialogComponent === 'el-drawer' ? 'padding: 0 50px 0 10px;' : undefined"
+      >
         <!-- 表单分组具名插槽 -->
         <template v-for="key in formGroupSlotsKeys">
           <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot>
@@ -139,7 +146,7 @@
           <slot v-if="$scopedSlots[`form-label-${item.key}`] || $slots[`form-label-${item.key}`]" :name="`form-label-${item.key}`" :slot="`label-${item.key}`" :model="formModel" v-bind="item"></slot>
         </template>
       </component>
-      <component :is="_detailComponent" v-else-if="dialogType === 'dialog-view' && !$scopedSlots['dialog-view'] && !$slots['dialog-view']" v-model="formModel" :list="list || detailList || _formList" :span="detailProps.span || 8" :formProps="detailProps">
+      <component :is="_detailComponent" v-else-if="dialogType === 'dialog-view' && !$scopedSlots['dialog-view'] && !$slots['dialog-view']" v-model="formModel" :list="list || detailList || _formList" :span="detailProps.span || dialogComponent === 'el-drawer' ? 12 : 8" :formProps="detailProps">
         <!-- 表单分组具名插槽 -->
         <template v-for="key in formGroupSlotsKeys">
           <slot v-if="$scopedSlots[`view-${key}`] || $slots[`view-${key}`]" :name="`view-${key}`" :slot="key" :model="formModel"></slot>
@@ -151,7 +158,7 @@
       </component>
       <!-- 自定义弹出框内容插槽 -->
       <slot v-else :name="dialogType" :row="tableCurrentRow" :hideDialog="hideDialog"></slot>
-    </el-dialog>
+    </component>
   </div>
 </template>
 
@@ -164,6 +171,12 @@ let _$http = null;
 export default {
   name: 'Scheme',
   props: {
+    value: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
     // 配置列表
     list: Array,
     // 配置选项
@@ -209,6 +222,11 @@ export default {
       type: Object,
       default() { return {} }
     },
+    // 弹出框类型
+    dialogComponent: {
+      type: String,
+      default: 'el-dialog'
+    },
     // 弹出框参数
     dialogProps: {
       type: Object,
@@ -271,6 +289,9 @@ export default {
     }
   },
   mounted() {
+    this.tableData = this.value;
+    this.totalCount = this.value.length;
+    this.tableDataOrigin = this.value;
     // 设置自动加载数据
     if (this.option.auto !== false) {
       this.handleSearch();
@@ -313,6 +334,18 @@ export default {
       }
     }
   },
+  watch: {
+    value(val) {
+      this.tableData = val;
+    },
+    tableData: {
+      handler(val) {
+        this.$emit("input", val);
+        this.$emit("change", val);
+      },
+      deep: true
+    }
+  },
   methods: {
     // 查询数据
     async handleSearch(value) {
@@ -356,14 +389,35 @@ export default {
         });
       } else {
         this.tableLoading = true;
-        setTimeout(() => { this.tableLoading = false; }, 1500);
+        this.$nextTick(() => {
+          let searchModelCount = false;
+          for (let modelKey in this.searchModel) {
+            let modelValue = this.searchModel[modelKey];
+            if (modelValue) {
+              searchModelCount += 1;
+              break;
+            }
+          }
+          this.tableData = searchModelCount > 0 ? this.tableDataOrigin.filter(data => {
+            let result = false;
+            for (let modelKey in this.searchModel) {
+              let modelValue = this.searchModel[modelKey];
+              if (data[modelKey] === modelValue) {
+                result = true;
+                break;
+              }
+            }
+            return result;
+          }) : this.tableDataOrigin;
+          this.tableLoading = false;
+        });
       }
     },
     // 查看按钮
-    handleView({ row }) {
+    handleView({ row, $index }) {
       this.dialogTitle = this.i18n('eagle.scheme.detail') || '详情';
       this.dialogType = 'dialog-view';
-      this.tableCurrentRow = row;
+      this.tableCurrentRow = { ...row, $index };
       this.resetFormModel();
       this.formMode = "view";
       this.$emit('dialog-change', this.dialogType);
@@ -396,7 +450,11 @@ export default {
           this.dialogLoading = false;
         });
       } else {
-        this.setFormModel(param);
+        this.dialogLoading = true;
+        this.$nextTick(() => {
+          this.setFormModel(param);
+          this.dialogLoading = false;
+        });
       }
     },
     // 新增按钮
@@ -410,10 +468,10 @@ export default {
       this.showDialog();
     },
     // 编辑按钮
-    async handleEdit({ row }) {
+    async handleEdit({ row, $index }) {
       this.dialogTitle = this.i18n('eagle.scheme.edit') || '编辑';
       this.dialogType = 'dialog-form';
-      this.tableCurrentRow = row;
+      this.tableCurrentRow = { ...row, $index };
       this.resetFormModel();
       this.formMode = "edit";
       this.$emit('dialog-change', this.dialogType);
@@ -447,14 +505,16 @@ export default {
         });
       } else {
         this.dialogLoading = true;
-        this.setFormModel(param);
-        setTimeout(() => { this.dialogLoading = false; }, 1500);
+        this.$nextTick(() => {
+          this.setFormModel(param);
+          this.dialogLoading = false;
+        });
       }
     },
     // 删除按钮
     handleDelete(type, scope) {
       if (type === 'one') {
-        this.doDelete([scope.row]);
+        this.doDelete([{ ...scope.row, $index: scope['$index'] }]);
       } else if (type === 'more') {
         this.$confirm(`${this.i18n('eagle.scheme.mulDeleteConfirm') || '是否删除已选中的'} [ ${this.tableSelection.length} ] ${this.i18n('eagle.scheme.item') || '项'}`, this.i18n('eagle.scheme.tip') || '提示', {
           confirmButtonText: this.i18n('eagle.scheme.confirm') || '确定',
@@ -500,6 +560,9 @@ export default {
         .finally(() => {
           this.dialogLoading = false;
         });
+      } else {
+        this.tableDataOrigin.splice(selection[0].$index, 1);
+        this.hideDialog();
       }
     },
     // 重置表单值
@@ -577,6 +640,10 @@ export default {
         .finally(() => {
           this.dialogLoading = false;
         });
+      } else {
+        this.tableDataOrigin.push(param);
+        this.totalCount = this.tableDataOrigin.length;
+        this.hideDialog();
       }
     },
     // 编辑提交逻辑
@@ -609,6 +676,9 @@ export default {
         .finally(() => {
           this.dialogLoading = false;
         });
+      } else {
+        this.$set(this.tableDataOrigin, this.tableCurrentRow.$index, param);
+        this.hideDialog();
       }
     },
     // 表单取消
diff --git a/webpack/markdown-loader.js b/webpack/markdown-loader.js
index 3c67ef1..c0a44a8 100644
--- a/webpack/markdown-loader.js
+++ b/webpack/markdown-loader.js
@@ -15,11 +15,11 @@ module.exports = function(source) {
     // 将markdown中的代码块用hljs高亮显示
     highlight: function(str, lang) {
       if (lang && hljs.getLanguage(lang)) {
-        return `<pre class="hljs" style="white-space: pre-wrap;word-wrap: break-word;"><code>${
+        return `<pre class="hljs"><code>${
           hljs.highlight(lang, str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }'), true).value
         }</code></pre>`;
       }
-      return `<pre class="hljs" style="white-space: pre-wrap;word-wrap: break-word;"><code>${markdownIt.utils.escapeHtml(
+      return `<pre class="hljs"><code>${markdownIt.utils.escapeHtml(
         str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }')
       )}</code></pre>`;
     }
@@ -114,7 +114,7 @@ module.exports = function(source) {
       </div>
     </template>
     <script>
-        export default {
+      export default {
         name: 'eagle-component-doc',
         components: {
           ${componentCodeList.join(",")}
diff --git a/yarn.lock b/yarn.lock
index 737b238..0bc91be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2869,10 +2869,10 @@ electron-to-chromium@^1.3.164:
   resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.186.tgz#17d87e7661121724ea4c81c9960c3f26a5228c0c"
   integrity sha1-F9h+dmESFyTqTIHJlgw/JqUijAw=
 
-element-ui@^2.10.0:
-  version "2.10.1"
-  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.10.1.tgz?cache=0&sync_timestamp=1562053824530&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-ui%2Fdownload%2Felement-ui-2.10.1.tgz#1011016e50e76f5dae6fbf9c86e53b6e53fcb9eb"
-  integrity sha1-EBEBblDnb12ub7+chuU7blP8ues=
+element-ui@^2.11.0:
+  version "2.11.1"
+  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.11.1.tgz#2b67f9eee3eda2e6884873c1c589cbe30d9a9d60"
+  integrity sha1-K2f57uPtouaISHPBxYnL4w2anWA=
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
--
libgit2 0.21.0