Scheme支持抽屉弹出框，支持静态数据增删改查

Aaron
1 parent 21d9ec8d
Showing 9 changed files with 110 additions and 84 deletions Show diff stats
examples/components/code-snippet.vue
examples/styles/markdown.scss
examples/views/docs/component/scheme.md
examples/views/docs/guide/installation.md
examples/views/layout/component.vue
package.json
packages/scheme/index.vue
webpack/markdown-loader.js
yarn.lock
@@ -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 {
@@ -8,6 +8,10 @@
     opacity: 0;
     transition: opacity 300ms;
   }
+  .hljs {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
   h1 {
     color: $black;
     font-weight: 500;
@@ -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: 'çŠ¶æ€' },
       ],
     }
   },
@@ -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
@@ -174,7 +174,6 @@ export default {
     width: 150px !important;
     padding: 30px 0;
     .anchor {
-      width: 100%;
       display: inline-block;
       font-size: 12px;
       text-decoration: none;
@@ -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",
@@ -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();
       }
     },
     // 表单取消
@@ -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(",")}
@@ -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"
...	...	@@ -49,9 +49,9 @@ export default {
49	49	text-align: left;
50	50	// element-ui样式冲突
51	51	ul > li {
52		- list-style-type: none;
53		- margin: 0px;
54		- padding: 0px;
	52	+ list-style-type: none !important;
	53	+ margin: 0px !important;
	54	+ padding: 0px !important;
55	55	}
56	56	}
57	57	.eagle-code-snippet--demo {
...	...
...	...	@@ -8,6 +8,10 @@
8	8	opacity: 0;
9	9	transition: opacity 300ms;
10	10	}
	11	+ .hljs {
	12	+ white-space: pre-wrap;
	13	+ word-wrap: break-word;
	14	+ }
11	15	h1 {
12	16	color: $black;
13	17	font-weight: 500;
...	...
...	...	@@ -10,72 +10,23 @@ Schemeæ˜¯ä¸€ä¸ªæ•°æ®é©±åŠ¨çš„è§£å†³æ–¹æ¡ˆï¼Œé€šè¿‡æ—¢å®šçš„ä¸šåŠ¡é…ç½®å‚æ•°ï¼
10	10
11	11	```html
12	12	<template>
13		- <eagle-scheme :list="schemeList" :option="{ auto: false }">
14		- <!-- <div slot="action-bar" slot-scope="{ handleNew }">
15		- <el-button type="warn" @click="handleNew">æ–°å¢ž</el-button>
16		- </div> -->
17		- <el-button slot="action-button" type="success" plain size="small">å¯ç”¨</el-button>
18		- <el-button slot="action-button" type="danger" plain size="small">ç¦ç”¨</el-button>
19		- <el-table-column type="selection" width="50" align="center"></el-table-column>
20		- <template #table-status="{ setDialog }">
21		- <el-table-column prop="status" label="æ¿€æ´»çŠ¶æ€" min-width="120">
22		- <el-tag @click="setDialog({ title: 'Statusæ¨¡å¼', type: 'dialog-status' })" slot-scope="{ row: { status } }" :type="status === 'active' ? 'success' : 'danger'">{{ status === 'active' ? 'æ¿€æ´»' : 'ç¦ç”¨' }}</el-tag>
23		- </el-table-column>
24		- </template>
25		- <template #search-status="{ model }">
26		- <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
27		- </template>
28		- <template #form-group-setting >
29		- <div style="padding: 10px 0px;margin-bottom: 30px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
30		- <span>å“Žå“Ÿ - è®¾ç½® - ä¸é”™å“¦</span>
31		- <el-button size="mini" type="primary">è¿™æ˜¯ä¸€ä¸ªæŒ‰é’®</el-button>
32		- </div>
33		- </template>
34		- <template #form-item-status="{ model }">
35		- <el-input-number v-model="model.status"></el-input-number>
36		- </template>
37		- <template #view-item-code="{ model }">
38		- <el-input disabled :value="model.code"></el-input>
39		- </template>
40		- <!-- <template #dialog-view="{ row }">
41		- <div>è¿™æ˜¯ä¸€ä¸ªè‡ªå®šä¹‰å¼¹å‡ºæ¡†å†…å®¹</div>
42		- <div>{{ row }}</div>
43		- </template> -->
44		- <template #dialog-status>
45		- <div>è¿™æ˜¯Statusçš„å†…å®¹</div>
46		- </template>
47		- <!-- è‡ªå®šä¹‰æŒ‰é’®ç»„ -->
48		- <!-- <el-table-column slot="table-operation" prop="$operation" label="æ“ä½œ" min-width="140">
49		- <el-tag>è‡ªå®šä¹‰æŒ‰é’®ç»„</el-tag>
50		- </el-table-column> -->
51		- <!-- åœ¨æ“ä½œæŒ‰é’®ç»„å‰åŠ ä¸Šæ–°çš„æŒ‰é’® -->
52		- <!-- <template slot="table-operation-btn">
53		- <el-button class="eagle-scheme__table-btn" type="text" title="å¯ç”¨">å¯ç”¨</el-button>
54		- <el-button class="eagle-scheme__table-btn" type="text" title="ç¦ç”¨">ç¦ç”¨</el-button>
55		- </template> -->
56		- <!-- åœ¨æ“ä½œæŒ‰é’®ç»„åŽè¿½åŠ æ–°çš„æŒ‰é’® -->
57		- <!-- <template slot="table-operation-btn-append">
58		- <el-button class="eagle-scheme__table-btn" type="text" title="å¯ç”¨">å¯ç”¨</el-button>
59		- <el-button class="eagle-scheme__table-btn" type="text" title="ç¦ç”¨">ç¦ç”¨</el-button>
60		- </template> -->
61		- </eagle-scheme>
	13	+ <eagle-scheme v-model="tableData" :list="schemeList"></eagle-scheme>
62	14	</template>
63	15
64	16	<script>
65	17	export default {
66	18	data() {
67	19	return {
	20	+ tableData: [
	21	+ { name: 'äº§å“A', code: 'P0001', type: 'NORMAL', sort: 0, status: '0' },
	22	+ { name: 'äº§å“B', code: 'P0002', type: 'BROKEN', sort: 1, status: '1' },
	23	+ ],
68	24	schemeList: [
69	25	{ type: 'el-input', key: 'name', label: 'åç§°', rules: [{ required: true, message: 'è¯·è¾“å…¥åç§°' }] },
70		- { type: 'el-input', key: 'code', label: 'ç¼–ç ', rules: [{ required: true, message: 'è¯·è¾“å…¥ç¼–ç ' }],
71		- exclude: 'search', group: { label: 'è®¾ç½®', key: 'setting', tip: { content: 'å“‡å“¦', placement: 'left' } }, tip: 'ç¼–ç ä¸ºæ•°å—' },
72		- { type: 'el-input', key: 'type', label: 'ç±»åž‹', group: { label: 'è®¾ç½®', key: 'setting', icon: 'edit' }, formScheme: { tip: 'ç±»åž‹éšä¾¿å¡«' } },
	26	+ { type: 'el-input', key: 'code', label: 'ç¼–ç ', rules: [{ required: true, message: 'è¯·è¾“å…¥ç¼–ç ' }], exclude: 'search' },
	27	+ { type: 'el-input', key: 'type', label: 'ç±»åž‹' },
73	28	{ type: 'el-input-number', key: 'sort', label: 'æŽ’åº', include: ['form', 'table'], sortable: true },
74		- { type: 'el-input', key: 'status', label: 'çŠ¶æ€', group: { label: 'ä¿¡æ¯', key: 'info', icon: 'info' }, formScheme: { label: 'çŠ¶æ€ç ' } },
75		- ],
76		- dataSource: [
77		- { label: 'é€‰é¡¹A', value: 'A' },
78		- { label: 'é€‰é¡¹B', value: 'B' },
	29	+ { type: 'el-input', key: 'status', label: 'çŠ¶æ€' },
79	30	],
80	31	}
81	32	},
...	...
...	...	@@ -5,11 +5,13 @@
5	5	> 注意：由于yunweidashi.com服务器的SSL证书未经过第三方机构签署，因此在使用本私有库时，需要在git中设置忽略ssl验证`git config http.sslVerify "false"`
6	6
7	7	## npm安装
	8	+
8	9	```bash
9		-npm install --save git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#{{ appVersion }}
	10	+npm install --save git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#版本号
10	11	```
11	12
12	13	## yarn安装
	14	+
13	15	```bash
14		-yarn add git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#{{ appVersion }}
	16	+yarn add git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#版本号
15	17	```
16	18	\ No newline at end of file
...	...
...	...	@@ -174,7 +174,6 @@ export default {
174	174	width: 150px !important;
175	175	padding: 30px 0;
176	176	.anchor {
177		- width: 100%;
178	177	display: inline-block;
179	178	font-size: 12px;
180	179	text-decoration: none;
...	...
...	...	@@ -11,7 +11,7 @@
11	11	"dependencies": {
12	12	"axios": "^0.19.0",
13	13	"core-js": "^2.6.5",
14		- "element-ui": "^2.10.0",
	14	+ "element-ui": "^2.11.0",
15	15	"nprogress": "^0.2.0",
16	16	"vue": "^2.6.10",
17	17	"vue-router": "^3.0.3",
...	...
...	...	@@ -127,8 +127,15 @@
127	127	:page-size="pageSize" :total="totalCount" v-bind="{ 'page-sizes': [10, 20, 50], layout: 'total, sizes, prev, pager, next, jumper', ...paginationProps }"></el-pagination>
128	128	</div>
129	129	</div>
130		- <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 }">
131		- <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">
	130	+ <!-- 弹出框 -->
	131	+ <component :is="dialogComponent \|\| 'el-dialog'" v-loading="dialogLoading" element-loading-background="rgba(255, 255, 255, 0.3)"
	132	+ :custom-class="dialogProps['custom-class'] \|\| 'eagle-scheme__dialog'" :title="dialogProps.title \|\| dialogTitle"
	133	+ :visible.sync="dialogVisible" v-bind="{ width: '65%', size: dialogComponent === 'el-drawer' ? '50%' : undefined, ...dialogProps }"
	134	+ >
	135	+ <component :is="_formComponent" v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']"
	136	+ ref="eagle-form" :list="_formList" v-model="formModel" :params="{ formMode }" :span="formProps.span \|\| 12" :formProps="formProps"
	137	+ @submit="handleSubmit" @cancel="handleCancel" :style="dialogComponent === 'el-drawer' ? 'padding: 0 50px 0 10px;' : undefined"
	138	+ >
132	139	<!-- 表单分组具名插槽 -->
133	140	<template v-for="key in formGroupSlotsKeys">
134	141	<slot v-if="$scopedSlots[`form-${key}`] \|\| $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot>
...	...	@@ -139,7 +146,7 @@
139	146	<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>
140	147	</template>
141	148	</component>
142		- <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">
	149	+ <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">
143	150	<!-- 表单分组具名插槽 -->
144	151	<template v-for="key in formGroupSlotsKeys">
145	152	<slot v-if="$scopedSlots[`view-${key}`] \|\| $slots[`view-${key}`]" :name="`view-${key}`" :slot="key" :model="formModel"></slot>
...	...	@@ -151,7 +158,7 @@
151	158	</component>
152	159	<!-- 自定义弹出框内容插槽 -->
153	160	<slot v-else :name="dialogType" :row="tableCurrentRow" :hideDialog="hideDialog"></slot>
154		- </el-dialog>
	161	+ </component>
155	162	</div>
156	163	</template>
157	164
...	...	@@ -164,6 +171,12 @@ let _$http = null;
164	171	export default {
165	172	name: 'Scheme',
166	173	props: {
	174	+ value: {
	175	+ type: Array,
	176	+ default: () => {
	177	+ return [];
	178	+ }
	179	+ },
167	180	// 配置列表
168	181	list: Array,
169	182	// 配置选项
...	...	@@ -209,6 +222,11 @@ export default {
209	222	type: Object,
210	223	default() { return {} }
211	224	},
	225	+ // 弹出框类型
	226	+ dialogComponent: {
	227	+ type: String,
	228	+ default: 'el-dialog'
	229	+ },
212	230	// 弹出框参数
213	231	dialogProps: {
214	232	type: Object,
...	...	@@ -271,6 +289,9 @@ export default {
271	289	}
272	290	},
273	291	mounted() {
	292	+ this.tableData = this.value;
	293	+ this.totalCount = this.value.length;
	294	+ this.tableDataOrigin = this.value;
274	295	// 设置自动加载数据
275	296	if (this.option.auto !== false) {
276	297	this.handleSearch();
...	...	@@ -313,6 +334,18 @@ export default {
313	334	}
314	335	}
315	336	},
	337	+ watch: {
	338	+ value(val) {
	339	+ this.tableData = val;
	340	+ },
	341	+ tableData: {
	342	+ handler(val) {
	343	+ this.$emit("input", val);
	344	+ this.$emit("change", val);
	345	+ },
	346	+ deep: true
	347	+ }
	348	+ },
316	349	methods: {
317	350	// 查询数据
318	351	async handleSearch(value) {
...	...	@@ -356,14 +389,35 @@ export default {
356	389	});
357	390	} else {
358	391	this.tableLoading = true;
359		- setTimeout(() => { this.tableLoading = false; }, 1500);
	392	+ this.$nextTick(() => {
	393	+ let searchModelCount = false;
	394	+ for (let modelKey in this.searchModel) {
	395	+ let modelValue = this.searchModel[modelKey];
	396	+ if (modelValue) {
	397	+ searchModelCount += 1;
	398	+ break;
	399	+ }
	400	+ }
	401	+ this.tableData = searchModelCount > 0 ? this.tableDataOrigin.filter(data => {
	402	+ let result = false;
	403	+ for (let modelKey in this.searchModel) {
	404	+ let modelValue = this.searchModel[modelKey];
	405	+ if (data[modelKey] === modelValue) {
	406	+ result = true;
	407	+ break;
	408	+ }
	409	+ }
	410	+ return result;
	411	+ }) : this.tableDataOrigin;
	412	+ this.tableLoading = false;
	413	+ });
360	414	}
361	415	},
362	416	// 查看按钮
363		- handleView({ row }) {
	417	+ handleView({ row, $index }) {
364	418	this.dialogTitle = this.i18n('eagle.scheme.detail') \|\| '详情';
365	419	this.dialogType = 'dialog-view';
366		- this.tableCurrentRow = row;
	420	+ this.tableCurrentRow = { ...row, $index };
367	421	this.resetFormModel();
368	422	this.formMode = "view";
369	423	this.$emit('dialog-change', this.dialogType);
...	...	@@ -396,7 +450,11 @@ export default {
396	450	this.dialogLoading = false;
397	451	});
398	452	} else {
399		- this.setFormModel(param);
	453	+ this.dialogLoading = true;
	454	+ this.$nextTick(() => {
	455	+ this.setFormModel(param);
	456	+ this.dialogLoading = false;
	457	+ });
400	458	}
401	459	},
402	460	// 新增按钮
...	...	@@ -410,10 +468,10 @@ export default {
410	468	this.showDialog();
411	469	},
412	470	// 编辑按钮
413		- async handleEdit({ row }) {
	471	+ async handleEdit({ row, $index }) {
414	472	this.dialogTitle = this.i18n('eagle.scheme.edit') \|\| '编辑';
415	473	this.dialogType = 'dialog-form';
416		- this.tableCurrentRow = row;
	474	+ this.tableCurrentRow = { ...row, $index };
417	475	this.resetFormModel();
418	476	this.formMode = "edit";
419	477	this.$emit('dialog-change', this.dialogType);
...	...	@@ -447,14 +505,16 @@ export default {
447	505	});
448	506	} else {
449	507	this.dialogLoading = true;
450		- this.setFormModel(param);
451		- setTimeout(() => { this.dialogLoading = false; }, 1500);
	508	+ this.$nextTick(() => {
	509	+ this.setFormModel(param);
	510	+ this.dialogLoading = false;
	511	+ });
452	512	}
453	513	},
454	514	// 删除按钮
455	515	handleDelete(type, scope) {
456	516	if (type === 'one') {
457		- this.doDelete([scope.row]);
	517	+ this.doDelete([{ ...scope.row, $index: scope['$index'] }]);
458	518	} else if (type === 'more') {
459	519	this.$confirm(`${this.i18n('eagle.scheme.mulDeleteConfirm') \|\| '是否删除已选中的'} [ ${this.tableSelection.length} ] ${this.i18n('eagle.scheme.item') \|\| '项'}`, this.i18n('eagle.scheme.tip') \|\| '提示', {
460	520	confirmButtonText: this.i18n('eagle.scheme.confirm') \|\| '确定',
...	...	@@ -500,6 +560,9 @@ export default {
500	560	.finally(() => {
501	561	this.dialogLoading = false;
502	562	});
	563	+ } else {
	564	+ this.tableDataOrigin.splice(selection[0].$index, 1);
	565	+ this.hideDialog();
503	566	}
504	567	},
505	568	// 重置表单值
...	...	@@ -577,6 +640,10 @@ export default {
577	640	.finally(() => {
578	641	this.dialogLoading = false;
579	642	});
	643	+ } else {
	644	+ this.tableDataOrigin.push(param);
	645	+ this.totalCount = this.tableDataOrigin.length;
	646	+ this.hideDialog();
580	647	}
581	648	},
582	649	// 编辑提交逻辑
...	...	@@ -609,6 +676,9 @@ export default {
609	676	.finally(() => {
610	677	this.dialogLoading = false;
611	678	});
	679	+ } else {
	680	+ this.$set(this.tableDataOrigin, this.tableCurrentRow.$index, param);
	681	+ this.hideDialog();
612	682	}
613	683	},
614	684	// 表单取消
...	...
...	...	@@ -15,11 +15,11 @@ module.exports = function(source) {
15	15	// 将markdown中的代码块用hljs高亮显示
16	16	highlight: function(str, lang) {
17	17	if (lang && hljs.getLanguage(lang)) {
18		- return `<pre class="hljs" style="white-space: pre-wrap;word-wrap: break-word;"><code>${
	18	+ return `<pre class="hljs"><code>${
19	19	hljs.highlight(lang, str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }'), true).value
20	20	}</code></pre>`;
21	21	}
22		- return `<pre class="hljs" style="white-space: pre-wrap;word-wrap: break-word;"><code>${markdownIt.utils.escapeHtml(
	22	+ return `<pre class="hljs"><code>${markdownIt.utils.escapeHtml(
23	23	str.replace(/\{\{/g, '{ {').replace(/\}\}/g, '} }')
24	24	)}</code></pre>`;
25	25	}
...	...	@@ -114,7 +114,7 @@ module.exports = function(source) {
114	114	</div>
115	115	</template>
116	116	<script>
117		- export default {
	117	+ export default {
118	118	name: 'eagle-component-doc',
119	119	components: {
120	120	${componentCodeList.join(",")}
...	...
...	...	@@ -2869,10 +2869,10 @@ electron-to-chromium@^1.3.164:
2869	2869	resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.186.tgz#17d87e7661121724ea4c81c9960c3f26a5228c0c"
2870	2870	integrity sha1-F9h+dmESFyTqTIHJlgw/JqUijAw=
2871	2871
2872		-element-ui@^2.10.0:
2873		- version "2.10.1"
2874		- 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"
2875		- integrity sha1-EBEBblDnb12ub7+chuU7blP8ues=
	2872	+element-ui@^2.11.0:
	2873	+ version "2.11.1"
	2874	+ resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.11.1.tgz#2b67f9eee3eda2e6884873c1c589cbe30d9a9d60"
	2875	+ integrity sha1-K2f57uPtouaISHPBxYnL4w2anWA=
2876	2876	dependencies:
2877	2877	async-validator "~1.8.1"
2878	2878	babel-helper-vue-jsx-merge-props "^2.0.0"
...	...