bri-components 1.2.54 → 1.2.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,18 +7,15 @@
7
7
  :transfer="true"
8
8
  >
9
9
  <!-- 编辑 -->
10
- <bri-control-input
10
+ <dsh-control-input
11
11
  v-if="canEdit"
12
- :class="{
13
- ...commonClass
14
- }"
15
- :canEdit="finalCanEdit"
12
+ :class="commonClass"
16
13
  :value="curVal"
17
- :inputIcon="inputIcon"
14
+ :disabled="selfPropsObj._disabled"
18
15
  :propsObj="selfPropsObj"
19
16
  @clear="clickClear"
20
17
  @click.native="clickInput"
21
- ></bri-control-input>
18
+ ></dsh-control-input>
22
19
 
23
20
  <!-- 查看 -->
24
21
  <div
@@ -194,6 +191,8 @@
194
191
  computed: {
195
192
  selfPropsObj () {
196
193
  return {
194
+ _icon: "ios-map-outline",
195
+
197
196
  ...this.propsObj,
198
197
  ...this.commonDealPropsObj
199
198
  };
@@ -201,9 +200,6 @@
201
200
  showType () {
202
201
  return this.selfPropsObj._showType;
203
202
  },
204
- inputIcon () {
205
- return "ios-map-outline";
206
- },
207
203
 
208
204
  curVal: {
209
205
  get () {
@@ -29,19 +29,18 @@
29
29
  @on-change="changeVal($event, 0)"
30
30
  @on-open-change="changeOpen($event, 0)"
31
31
  >
32
- <bri-control-input
32
+ <dsh-control-input
33
33
  :class="{
34
34
  ...commonClass,
35
35
  'bri-control-nodata': this.$isEmptyData(this.showVal0),
36
36
  'DshDaterange-item': true
37
37
  }"
38
- :canEdit="finalCanEdit"
39
38
  :value="showVal0"
40
- inputIcon="ios-calendar-outline"
39
+ :disabled="selfPropsObj._disabled"
41
40
  :propsObj="selfPropsObj"
42
41
  @clear="clickClear('', 0)"
43
42
  @click.native="changeOpen(true, 0)"
44
- ></bri-control-input>
43
+ ></dsh-control-input>
45
44
  </DatePicker>
46
45
 
47
46
  <span class="DshDaterange-center"> — </span>
@@ -59,19 +58,18 @@
59
58
  @on-change="changeVal($event, 1)"
60
59
  @on-open-change="changeOpen($event, 1)"
61
60
  >
62
- <bri-control-input
61
+ <dsh-control-input
63
62
  :class="{
64
63
  ...commonClass,
65
64
  'bri-control-nodata': this.$isEmptyData(this.showVal1),
66
65
  'DshDaterange-item': true
67
66
  }"
68
- :canEdit="finalCanEdit"
69
67
  :value="showVal1"
70
- inputIcon="ios-calendar-outline"
68
+ :disabled="selfPropsObj._disabled"
71
69
  :propsObj="selfPropsObj"
72
70
  @clear="clickClear('', 1)"
73
71
  @click.native="changeOpen(true, 1)"
74
- ></bri-control-input>
72
+ ></dsh-control-input>
75
73
  </DatePicker>
76
74
  </template>
77
75
  </div>
@@ -212,12 +210,11 @@
212
210
  computed: {
213
211
  selfPropsObj () {
214
212
  return {
213
+ _icon: "ios-calendar-outline",
215
214
  _useShortcuts: true,
216
215
 
217
216
  ...this.propsObj,
218
- ...this.commonDealPropsObj,
219
-
220
- _type: "date"
217
+ ...this.commonDealPropsObj
221
218
  };
222
219
  },
223
220
  subType () {
@@ -310,7 +307,13 @@
310
307
  return val
311
308
  ? this.isDynDateKey(val)
312
309
  ? true
313
- : !this.$isComparedAccord(this.selfPropsObj, this.selfPropsObj, date, val, config).bool
310
+ : !this.$isComparedAccord({
311
+ ...this.selfPropsObj,
312
+ _type: "date"
313
+ }, {
314
+ ...this.selfPropsObj,
315
+ _type: "date"
316
+ }, date, val, config).bool
314
317
  : false;
315
318
  }
316
319
  };
@@ -85,6 +85,9 @@ export default {
85
85
  controlType () {
86
86
  return this.propsObj._type;
87
87
  },
88
+ controlName () {
89
+ return this.propsObj._name;
90
+ },
88
91
  finalCanEdit () {
89
92
  return this.canEdit && (this.propsObj.canEdit == undefined ? true : this.propsObj.canEdit);
90
93
  },
@@ -92,7 +95,7 @@ export default {
92
95
  multipleMode () {
93
96
  return this.isOnDftSearch || this.isOnSearch
94
97
  ? true
95
- : ["texts", "numberange", "daterange", "checkbox", "regions", "cascaders"].includes(this.controlType) || !!this.propsObj._multiple;
98
+ : ["texts", "numberange", "daterange", "checkbox", "regions", "cascaders", "file"].includes(this.controlType) || !!this.propsObj._multiple;
96
99
  },
97
100
  commonDealPropsObj () {
98
101
  const selectControlTypes = ["date", "switch", "select", "checkbox", "file", "region", "regions", "cascader", "cascaders", "coordinates", "users", "departments"];
@@ -12,18 +12,15 @@
12
12
  @on-clickoutside="clickInput"
13
13
  >
14
14
  <!-- 可编辑 -->
15
- <bri-control-input
16
- :class="{
17
- ...commonClass
18
- }"
19
- :canEdit="finalCanEdit"
15
+ <dsh-control-input
16
+ :class="commonClass"
20
17
  :value="curValList"
21
- :inputIcon="inputIcon"
18
+ :disabled="selfPropsObj._disabled"
22
19
  :propsObj="selfPropsObj"
23
20
  @deleteItem="clickDeleteItem"
24
21
  @clear="clickClear"
25
22
  @click.native="clickInput"
26
- ></bri-control-input>
23
+ ></dsh-control-input>
27
24
 
28
25
  <template #list>
29
26
  <DropdownMenu class="BriLabels-dropdown-menu">
@@ -137,6 +134,7 @@
137
134
  computed: {
138
135
  selfPropsObj () {
139
136
  return {
137
+ _icon: this.isVisible ? "ios-arrow-up" : "ios-arrow-down",
140
138
  _labelType: "entity",
141
139
  _onlySelect: false,
142
140
  _originLabels: [],
@@ -154,9 +152,6 @@
154
152
  originLabels () {
155
153
  return this.selfPropsObj._originLabels;
156
154
  },
157
- inputIcon () {
158
- return this.isVisible ? "ios-arrow-up" : "ios-arrow-down";
159
- },
160
155
 
161
156
  showVal () {
162
157
  return this.$isEmptyData(this.curValList)
@@ -39,7 +39,7 @@
39
39
  <dsh-buttons
40
40
  class="flatTable-btns"
41
41
  itemClass="flatTable-btns-item"
42
- :list="$getOperationList(['canEnlarge'])"
42
+ :list="$getOperationList(operationFieldList)"
43
43
  @click="$dispatchEvent($event)"
44
44
  ></dsh-buttons>
45
45
 
@@ -75,6 +75,14 @@
75
75
  </template>
76
76
  </template>
77
77
  </template>
78
+
79
+ <flat-table-import-modal
80
+ v-if="showBatchImportModal"
81
+ :value="showBatchImportModal"
82
+ :propsObj="propsObj"
83
+ :importParams="importParams"
84
+ @input="toggleBatchImportModal"
85
+ ></flat-table-import-modal>
78
86
  </div>
79
87
  </template>
80
88
 
@@ -82,6 +90,7 @@
82
90
  import controlMixin from "../controlMixin.js";
83
91
  import DshBtnModal from "../../small/DshBtnModal.vue";
84
92
  import BriFlatTable from "../../list/BriFlatTable.vue";
93
+ import flatTableImportModal from "./flatTableImportModal.vue";
85
94
 
86
95
  export default {
87
96
  name: "flatTable",
@@ -90,7 +99,8 @@
90
99
  ],
91
100
  components: {
92
101
  DshBtnModal,
93
- BriFlatTable
102
+ BriFlatTable,
103
+ flatTableImportModal
94
104
  },
95
105
  props: {},
96
106
  data () {
@@ -105,8 +115,28 @@
105
115
  size: "small",
106
116
  btnType: "text",
107
117
  event: "enlarge"
118
+ },
119
+ canImport: {
120
+ name: "导入",
121
+ type: "canImport",
122
+ icon: "ios-create-outline",
123
+ size: "small",
124
+ btnType: "text",
125
+ event: "clickBatchImport"
126
+ },
127
+ canExport: {
128
+ name: "导出",
129
+ type: "canExport",
130
+ icon: "md-share-alt",
131
+ size: "small",
132
+ btnType: "text",
133
+ disabled: false,
134
+ event: "clickExport"
108
135
  }
109
- }
136
+ },
137
+
138
+ showBatchImportModal: false,
139
+ timer: null
110
140
  };
111
141
  },
112
142
  computed: {
@@ -129,10 +159,97 @@
129
159
  showSlotClose: false,
130
160
  closable: true
131
161
  };
162
+ },
163
+
164
+ operationFieldList () {
165
+ let btnList = ["canEnlarge"];
166
+ if (this.propsObj._isExport) {
167
+ btnList.unshift("canExport");
168
+ }
169
+ // if (this.propsObj._isImport && this.finalCanEdit) {
170
+ // btnList.unshift("canImport");
171
+ // }
172
+
173
+ return btnList;
174
+ },
175
+ screenKey () {
176
+ return this.propsObj.screenKey;
177
+ },
178
+ importParams () {
179
+ return {
180
+ _key: this.controlKey,
181
+ _id: this.value._id
182
+ };
132
183
  }
133
184
  },
134
185
  created () {},
135
186
  methods: {
187
+ clickBatchImport () {
188
+ // this.openBatchImportModal();
189
+ },
190
+ openBatchImportModal () {
191
+ // this.showBatchImportModal = true;
192
+ },
193
+ // 关闭批量导入模态框
194
+ closeBatchImportModal () {
195
+ this.showBatchImportModal = false;
196
+ },
197
+ // 切换批量导入模态框
198
+ toggleBatchImportModal (bool) {
199
+ bool ? this.openBatchImportModal() : this.closeBatchImportModal();
200
+ },
201
+ // 导出点击
202
+ clickExport (operationItem) {
203
+ operationItem.disabled = true;
204
+ this.$https({
205
+ url: {
206
+ module: "sheet",
207
+ name: "exportFlatTableExcel"
208
+ },
209
+ params: {
210
+ _key: this.controlKey,
211
+ _id: this.value._id,
212
+ screenKey: this.screenKey
213
+ },
214
+ callback: data => {
215
+ setTimeout(() => {
216
+ operationItem.disabled = false;
217
+ }, 500);
218
+ this.timer = setInterval(this.getTransitStatus(data.jobId, data.excel_url), 1000);
219
+ }
220
+ });
221
+ },
222
+ getTransitStatus (id, url) {
223
+ let that = this;
224
+ return function () {
225
+ that.getJobStatus(id, url);
226
+ };
227
+ },
228
+ getJobStatus (id, url) {
229
+ this.$https({
230
+ url: {
231
+ module: "sheet",
232
+ name: "getJobStatus"
233
+ },
234
+ params: {
235
+ jobId: id
236
+ },
237
+ callback: data => {
238
+ if (data.status === "completed") {
239
+ clearInterval(this.timer);
240
+ window.location.href = data.url;
241
+ } else if (data.status === "failed") {
242
+ clearInterval(this.timer);
243
+ // this.exportBtnLoading = false;
244
+ this.$Message.info({ content: "操作失败,请稍后再试" });
245
+ }
246
+ },
247
+ error: data => {
248
+ this.timer = null;
249
+ }
250
+ });
251
+ },
252
+
136
253
  // 校验方法 -供外部使用
137
254
  validate () {
138
255
  return this.$refs.dshFatTable.validate();
@@ -0,0 +1,280 @@
1
+ <template>
2
+ <div class="flatTableImportModal">
3
+ <dsh-modal
4
+ class="flatTableImportModal-modal"
5
+ v-model="showModal"
6
+ :mode="modalPropsObj.mode"
7
+ :propsObj="modalPropsObj"
8
+ >
9
+ <div style="padding: 20px;">
10
+ <Upload
11
+ style="margin-bottom: 20px;"
12
+ :action="window.config.apiUrl+`/app/${this.appKey}/xMod/${modKey}/member/importExcel`"
13
+ :headers="undefined"
14
+ :data="importParams"
15
+ :name="'file_stream'"
16
+ :multiple="false"
17
+ :paste="false"
18
+ :disabled="false"
19
+ type="drag"
20
+ :with-credentials="false"
21
+ accept="xlsx"
22
+ :format="format"
23
+ :show-upload-list="true"
24
+ :default-file-list="[]"
25
+ :max-size="20480"
26
+ :on-format-error="handleImportFormatError"
27
+ :before-upload="beforeUpload"
28
+ >
29
+ <Icon
30
+ type="md-cloud-upload"
31
+ size="60"
32
+ />
33
+ <p>点击或者拖拽文件到此处上传</p>
34
+ </Upload>
35
+
36
+ <div v-if="file !== null">
37
+ <div class="flatTableImportModal-file">
38
+ <span>文件名称: {{ file.name }}</span>
39
+ <Icon
40
+ class="flatTableImportModal-file-cancel"
41
+ type="ios-close"
42
+ @click="cacelUpload"
43
+ />
44
+ </div>
45
+ <Button
46
+ type="primary"
47
+ :loading="loadingStatus"
48
+ @click="handleUpload"
49
+ >
50
+ {{ loadingStatus ? '上传中' : '上传' }}
51
+ </Button>
52
+ </div>
53
+
54
+ <!-- 导入说明 -->
55
+ <div>
56
+ <p style="display: flex; padding: 5px 0px;">
57
+ <strong style="width: 75px;">新增记录:</strong>
58
+ <span style="flex: 1;">
59
+ 下载
60
+ <a @click="handleExportTemplate()">
61
+ 《{{ tempName }}模板》
62
+ </a>
63
+ ,在本地新增记录后,导入文件
64
+ </span>
65
+ </p>
66
+ <p style="display: flex; padding: 5px 0px;">
67
+ <strong style="width: 75px;">更新记录:</strong>
68
+ <span style="flex: 1;">在工作表中选择需要更新的记录导出,在本地更新记录后,导入文件</span>
69
+ </p>
70
+ </div>
71
+ </div>
72
+ </dsh-modal>
73
+ </div>
74
+ </template>
75
+
76
+ <script>
77
+ export default {
78
+ name: "flatTableImportModal",
79
+ props: {
80
+ value: {
81
+ type: Boolean,
82
+ default: false
83
+ },
84
+ propsObj: {
85
+ type: Object,
86
+ default () {
87
+ return {};
88
+ }
89
+ },
90
+ importParams: {
91
+ type: Object,
92
+ default () {
93
+ return {};
94
+ }
95
+ }
96
+ },
97
+ data () {
98
+ return {
99
+ modalPropsObj: {
100
+ mode: "middle",
101
+ title: "导入excel数据",
102
+ width: "960",
103
+ className: "vertical-center-modal",
104
+ footerHide: true
105
+ },
106
+
107
+ format: ["xlsx"],
108
+ file: null,
109
+ loadingStatus: false,
110
+ window: window,
111
+ timer: null
112
+ };
113
+ },
114
+ computed: {
115
+ showModal: {
116
+ get () {
117
+ return this.value;
118
+ },
119
+ set (val) {
120
+ this.$emit("input", val);
121
+ }
122
+ },
123
+ tempName () {
124
+ return this.propsObj._name || "";
125
+ },
126
+ modKey () {
127
+ return this.propsObj.modKey;
128
+ },
129
+ screenKey () {
130
+ return this.propsObj.screenKey;
131
+ },
132
+ appKey () {
133
+ return this.propsObj.appKey;
134
+ }
135
+ },
136
+ created () {},
137
+ methods: {
138
+ // 接口 -下载excel模板
139
+ handleExportTemplate () {
140
+ if (this.timer) return;
141
+ this.$https({
142
+ url: {
143
+ module: "sheet",
144
+ name: "exportTemplate"
145
+ },
146
+ params: {
147
+ screenKey: this.screenKey,
148
+ ...this.importParams
149
+ },
150
+ callback: data => {
151
+ this.timer = setInterval(this.getTransitStatus(data.jobId), 1000);
152
+ }
153
+ });
154
+ },
155
+ // 上传文件before函数
156
+ beforeUpload (file) {
157
+ this.file = file;
158
+ return false;
159
+ },
160
+
161
+ cacelUpload () {
162
+ this.file = null;
163
+ },
164
+ // 监控上传文件的类型
165
+ handleImportFormatError (file) {
166
+ this.$Notice.warning({
167
+ title: "文件格式不正确!",
168
+ desc: `<span style="color: red;">${file.name}</span> 的文件格式不正确。<br/>请上传${this.format}的文件类型!`,
169
+ duration: 0
170
+ });
171
+ },
172
+ handleUpload () {
173
+ this.loadingStatus = true;
174
+ let formData = new FormData();
175
+ formData.append("file_stream", this.file);
176
+ formData.append("modKey", this.modKey);
177
+ formData.append("importType", "flatTable");
178
+ this.importParams._key && formData.append("_key", this.importParams._key);
179
+ this.importParams._id && formData.append("_id", this.importParams._id);
180
+ this.$https({
181
+ url: {
182
+ module: "sheet",
183
+ name: "importExcel"
184
+ },
185
+ params: formData,
186
+ content: {
187
+ headers: { "Content-Type": "multipart/form-data" }
188
+ },
189
+ callback: data => {
190
+ this.timer = setInterval(this.getTransitStatus(data.jobId, "import"), 1000);
191
+ },
192
+ error: data => {
193
+ this.$Message.error("导入失败:" + data.msg);
194
+ this.file = null;
195
+ this.file = null;
196
+ this.loadingStatus = false;
197
+ }
198
+ });
199
+ },
200
+
201
+ getTransitStatus (id, type) {
202
+ let that = this;
203
+ return function () {
204
+ if (type && type === "import") {
205
+ that.getImportJobStatus(id);
206
+ } else {
207
+ that.getJobStatus(id);
208
+ }
209
+ };
210
+ },
211
+ // 状态查询
212
+ getJobStatus (id) {
213
+ this.$https({
214
+ url: {
215
+ module: "sheet",
216
+ name: "getJobStatus"
217
+ },
218
+ params: {
219
+ jobId: id
220
+ },
221
+ callback: data => {
222
+ if (data.status === "completed") {
223
+ clearInterval(this.timer);
224
+ window.location.href = data.url;
225
+ } else if (data.status === "failed") {
226
+ clearInterval(this.timer);
227
+ this.$Message.info({ content: "操作失败,请稍后再试" });
228
+ }
229
+ },
230
+ error: data => {
231
+ this.timer = null;
232
+ }
233
+ });
234
+ },
235
+ // 导入状态查询
236
+ getImportJobStatus (id) {
237
+ this.$https({
238
+ url: {
239
+ module: "sheet",
240
+ name: "getImportJobStatus"
241
+ },
242
+ params: {
243
+ jobId: id
244
+ },
245
+ callback: data => {
246
+ if (data.status === "over") {
247
+ clearInterval(this.timer);
248
+ this.$Message.success("导入成功");
249
+ this.file = null;
250
+ this.loadingStatus = false;
251
+ this.showModal = false;
252
+ this.$emit("importCb");
253
+ } else if (data.status === "check-fai" || data.status === "fai") {
254
+ clearInterval(this.timer);
255
+ this.$Message.info({ content: data.faiMsg });
256
+ this.loadingStatus = false;
257
+ }
258
+ },
259
+ error: data => {
260
+ this.timer = null;
261
+ }
262
+ });
263
+ }
264
+ }
265
+ };
266
+ </script>
267
+
268
+ <style lang="less">
269
+ .sheetBatchImportModal {
270
+ &-file {
271
+ position: relative;
272
+
273
+ &-cancel {
274
+ cursor: pointer;
275
+ float: right;
276
+ font-size: @titleSize;
277
+ }
278
+ }
279
+ }
280
+ </style>
@@ -9,18 +9,15 @@
9
9
  <div @click.stop="clickInput">
10
10
  <slot>
11
11
  <!-- 编辑 -->
12
- <bri-control-input
12
+ <dsh-control-input
13
13
  v-if="canEdit"
14
- :class="{
15
- ...commonClass
16
- }"
17
- :canEdit="finalCanEdit"
14
+ :class="commonClass"
18
15
  :value="curValList"
19
- :inputIcon="inputIcon"
16
+ :disabled="selfPropsObj._disabled"
20
17
  :propsObj="selfPropsObj"
21
18
  @deleteItem="clickDeleteItem"
22
19
  @clear="clickClear"
23
- ></bri-control-input>
20
+ ></dsh-control-input>
24
21
 
25
22
  <!-- 查看 -->
26
23
  <div
@@ -171,7 +168,7 @@
171
168
  computed: {
172
169
  selfPropsObj () {
173
170
  return {
174
- _multiple: false,
171
+ _icon: this.multipleMode ? "ios-people" : "ios-person",
175
172
  _highSearch: false,
176
173
  _changeOnSelect: true,
177
174
  _searchString: "",
@@ -189,9 +186,6 @@
189
186
  searchString () {
190
187
  return this.selfPropsObj._searchString;
191
188
  },
192
- inputIcon () {
193
- return this.multipleMode ? "ios-people" : "ios-person";
194
- },
195
189
 
196
190
  modalPropsObj () {
197
191
  return {