vue2-client 1.2.62 → 1.2.65

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.
package/CHANGELOG.md CHANGED
@@ -1,11 +1,24 @@
1
1
  # Change Log
2
2
  > 所有关于本项目的变化都在该文档里。
3
3
 
4
- **1.2.57 - 1.2.62 -2022-05-25 @张振宇**
4
+ **1.2.64 - 1.2.65 -2022-05-25 @张振宇**
5
+ - 功能修改:
6
+ - 建档表单配置 bug修改
7
+ - 文件上传框 文件类型以及个数限制可以生效了
8
+ - 表单增加按钮插槽
9
+
10
+ **1.2.3 -2022-05-26 @苗艳强**
11
+ - 功能修改:
12
+ - x-form-table:
13
+ - 修改 afterSubmit 事件增加操作类型
14
+ - 新增 afterDelete 事件
15
+
16
+ **1.2.57 - 1.2.63 -2022-05-25 @张振宇**
5
17
  - 功能修改:
6
18
  - 文件上传 基础表单相关修改
7
19
  - 简单表单生成 数据字段提取出来
8
20
  - 新增修改表单加载时不带出 文件属性
21
+ - 查询表单页面按钮配置
9
22
 
10
23
  **1.2.55 -2022-05-20 @江超**
11
24
  - 问题修复:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue2-client",
3
- "version": "1.2.62",
3
+ "version": "1.2.65",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -440,9 +440,9 @@ export default {
440
440
  delete item.dataModeArray
441
441
  }
442
442
  }
443
- if (this.buttonStateData.length !== 4) {
443
+ // if (this.buttonStateData.length !== 4) {
444
444
  this.result.buttonState = this.buttonState
445
- }
445
+ // }
446
446
  then()
447
447
  },
448
448
  view () {
@@ -325,6 +325,7 @@ export default {
325
325
  },
326
326
  formType: 'input',
327
327
  accept: undefined,
328
+ acceptCount: 3,
328
329
  pathKey: undefined,
329
330
  groupIndexView: undefined,
330
331
  selectType: undefined,
@@ -370,6 +371,7 @@ export default {
370
371
  required: 'false'
371
372
  },
372
373
  selectKey: undefined,
374
+ acceptCount: 3,
373
375
  formType: 'input',
374
376
  fileRootPath: undefined,
375
377
  pathKey: undefined,
@@ -516,7 +518,7 @@ export default {
516
518
  if (!this.selectDataShow) {
517
519
  this.delKey(this.item, 'selectType', 'selectKey', 'lazyLoad', 'selectKeyName')
518
520
  }
519
- this.delKey(this.item, 'addOrEdit', 'queryType', 'default', 'silencePurpose', 'silenceSource', 'rule', 'lazyLoad')
521
+ this.delKey(this.item, 'addOrEdit', 'queryType', 'default', 'silencePurpose', 'silenceSource', 'lazyLoad')
520
522
  this.item.dataModeArray = ['addOrEditForm']
521
523
  this.$emit('itemHandle', this.item, this.type)
522
524
  this.initItem()
@@ -4,6 +4,7 @@
4
4
  v-if="model.type === 'file'"
5
5
  name="file"
6
6
  :multiple="true"
7
+ :accept="model.accept.join('')"
7
8
  :remove="deleteFileItem"
8
9
  :customRequest="uploadFiles"
9
10
  :file-list="uploadedFileList">
@@ -20,6 +21,7 @@
20
21
  <a-upload
21
22
  v-if=" model.type === 'image'"
22
23
  list-type="picture-card"
24
+ :accept="model.accept.join('')"
23
25
  :customRequest="uploadFiles"
24
26
  :remove="deleteFileItem"
25
27
  :file-list="uploadedFileList">
@@ -72,6 +74,10 @@ export default {
72
74
  },
73
75
  methods: {
74
76
  uploadFiles (info) {
77
+ if (this.uploadedFileList.length >= this.model.acceptCount) {
78
+ this.$message.error(`当前表单限制仅可上传 ${this.model.acceptCount} 个文件`)
79
+ return
80
+ }
75
81
  // 初始化文件信息
76
82
  const fileInfo = {
77
83
  uid: info.file.uid,
@@ -23,6 +23,7 @@
23
23
  @toggleIsFormShow="toggleIsFormShow"
24
24
  @selectRow="selectRow"
25
25
  :queryParams="queryParams"
26
+ :buttonState="buttonState"
26
27
  :queryParamsName="queryParamsName"
27
28
  :fixedQueryForm="fixedQueryForm"
28
29
  @loadData="loadData"
@@ -45,7 +46,7 @@
45
46
  <a-button :disabled="!isDelete" type="danger" @click="deleteItem" v-if="!buttonState || buttonState.delete">
46
47
  <a-icon :style="iconStyle" type="delete"/>删除
47
48
  </a-button>
48
-
49
+ <slot name="button" :selectedRowKeys="selectedRowKeys"></slot>
49
50
  </a-space>
50
51
  <slot name="expand"></slot>
51
52
  </template>
@@ -282,7 +283,7 @@ export default {
282
283
  this.modelVisible = false
283
284
  this.$refs.xTable.refresh(true)
284
285
  // commit
285
- this.$emit('afterSubmit', res)
286
+ this.$emit('afterSubmit', { type: this.businessType, id: res.id })
286
287
  }).catch(e => {
287
288
  this.loading = false
288
289
  this.modelVisible = false
@@ -366,8 +367,8 @@ export default {
366
367
  this.$message.success('删除成功!')
367
368
  this.$refs.xTable.clearRowKeys()
368
369
  this.$refs.xTable.refresh(true)
369
- // commit
370
- this.$emit('afterSubmit', res)
370
+ // afterDelete
371
+ this.$emit('afterDelete', { idList: requestParameters.idList })
371
372
  }).catch(e => {
372
373
  this.loading = false
373
374
  this.$message.error('删除失败!')
@@ -45,7 +45,8 @@ export default {
45
45
  | isExports | 是否显示导出按钮 | Boolean | true |
46
46
  | viewMode | 是否为预览模式 | Boolean | false |
47
47
  | @action | 表格详情列的单击事件 | event | - |
48
- | @afterSubmit | 增删改提交后的回调方法 | event | - |
48
+ | @afterSubmit | 增改提交后的回调方法 | event | - |
49
+ | @afterDelete | 删除提交后的回调方法 | event | - |
49
50
  | @afterSearchSubmit | 查询提交后的回调方法 | event | - |
50
51
  | @afterQuery | 表格查询后的回调方法 | event | - |
51
52
  ## 例子1
@@ -1,262 +1,269 @@
1
- <template>
2
- <div>
3
- <custom-columns-drawer
4
- :visible.sync="visible"
5
- :columns.sync="tableColumns"
6
- :columns-meta="jsonData"/>
7
- <a-row :gutter="48">
8
- <a-col>
9
- <span :style="{ float: 'left', overflow: 'hidden', marginBottom: '8px' }">
10
- <slot name="expand"></slot>
11
- </span>
12
- </a-col>
13
- <a-col>
14
- <span :style="{ float: 'right', overflow: 'hidden', marginBottom: '8px' }">
15
- <a-button-group>
16
- <a-button @click="toggleIsFormShow">
17
- <a-icon :style="iconStyle" type="vertical-align-top"/>
18
- </a-button>
19
- <a-button @click="refresh(true)">
20
- <a-icon :style="iconStyle" type="reload" />
21
- </a-button>
22
- <a-button @click="showDrawer">
23
- <a-icon :style="iconStyle" type="table" />
24
- </a-button>
25
- <a-button @click="exports">
26
- <a-icon :style="iconStyle" type="cloud-download"/>
27
- </a-button>
28
- </a-button-group>
29
- </span>
30
- </a-col>
31
- </a-row>
32
- <s-table
33
- ref="table"
34
- size="default"
35
- :rowKey="rowKey"
36
- :columns="tableColumns"
37
- :data="loadData"
38
- :alert="true"
39
- :rowSelection="rowSelection"
40
- showPagination="auto"
41
- :scroll="{ x: scrollXWidth, y: scrollYWidth }"
42
- >
43
- <template
44
- v-for="(item, index) in tableColumns"
45
- :slot="item.dataIndex"
46
- slot-scope="text, record">
47
- <!-- 文本溢出省略(ellipsis) -->
48
- <span :key="index" v-if="item.slotType === 'ellipsis'">
49
- <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
50
- </span>
51
- <!-- 徽标(badge) -->
52
- <span :key="index" v-else-if="item.slotType === 'badge'">
53
- <x-badge :badge-key="item.slotKeyMap" :value="text" />
54
- </span>
55
- <!-- 日期(date) -->
56
- <span :key="index" v-else-if="item.slotType === 'date'">
57
- {{ format(text,'yyyy-MM-dd') }}
58
- </span>
59
- <!-- 日期时间(datetime) -->
60
- <span :key="index" v-else-if="item.slotType === 'dateTime'">
61
- {{ format(text,'yyyy-MM-dd hh:mm:ss') }}
62
- </span>
63
- <!-- 操作列(action) -->
64
- <span :key="index" v-else-if="item.slotType === 'action'">
65
- <a @click="action(record)">{{ item.slotValue }}</a>
66
- </span>
67
- </template>
68
- </s-table>
69
- </div>
70
- </template>
71
- <script>
72
- import { Ellipsis, STable } from '@vue2-client/components'
73
- import { formatDate } from '@vue2-client/utils/util'
74
- import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
75
-
76
- export default {
77
- name: 'XTable',
78
- components: {
79
- STable,
80
- Ellipsis
81
- },
82
- data () {
83
- return {
84
- // 加载数据方法 必须为 Promise 对象
85
- loadData: parameter => {
86
- // 取到表格携带的表单参数
87
- const requestParameters = Object.assign({}, parameter)
88
- // 取到父组件传入的表单参数
89
- const conditionParams = Object.assign(this.fixedQueryForm, this.form)
90
- // 如果适用了综合筛选表单,则进行数据处理
91
- if (conditionParams.rowIdName) {
92
- const rowIdName = conditionParams.rowIdName
93
- const rowIdValue = conditionParams.rowIdValue
94
- delete conditionParams.rowIdName
95
- delete conditionParams.rowIdValue
96
- if (rowIdValue) {
97
- conditionParams[rowIdName] = rowIdValue
98
- }
99
- }
100
- // 如果传了燃气公司字段,则进行数据处理
101
- if (conditionParams.orgName) {
102
- requestParameters.orgName = conditionParams.orgName
103
- delete conditionParams.orgName
104
- }
105
- requestParameters.conditionParams = conditionParams
106
- requestParameters.queryParamsName = this.queryParamsName
107
- requestParameters.queryParams = this.queryParams
108
- // 加载数据
109
- return this.loadTableData(requestParameters)
110
- },
111
- rowKey: undefined,
112
- scrollXWidth: 1600,
113
- scrollYWidth: 437,
114
- selectedRowKeys: [],
115
- selectedRows: [],
116
- // 数据列
117
- tableColumns: this.jsonData,
118
- // 是否显示展示列抽屉
119
- visible: false,
120
- dataSource: [],
121
- // 图标样式
122
- iconStyle: {
123
- position: 'relative',
124
- top: '1px'
125
- }
126
- }
127
- },
128
- watch: {
129
- form (rel) {
130
- this.form = rel
131
- this.refresh(true)
132
- },
133
- jsonData () {
134
- this.initTableParams()
135
- }
136
- },
137
- props: {
138
- jsonData: {
139
- type: Array,
140
- default: () => {
141
- return []
142
- }
143
- },
144
- queryParamsName: {
145
- type: String,
146
- default: () => {
147
- return ''
148
- }
149
- },
150
- // 查询参数对象, 用于没有对应查询配置文件名时
151
- queryParams: {
152
- type: Object,
153
- default: null
154
- },
155
- form: {
156
- type: Object,
157
- default: () => {
158
- return {}
159
- }
160
- },
161
- // 固定查询表单
162
- fixedQueryForm: {
163
- type: Object,
164
- default: () => {
165
- return {}
166
- }
167
- }
168
- },
169
- computed: {
170
- rowSelection () {
171
- return {
172
- selectedRowKeys: this.selectedRowKeys,
173
- onChange: this.onSelectChange
174
- }
175
- }
176
- },
177
- mounted () {
178
- this.initTableParams()
179
- },
180
- methods: {
181
- exports () {
182
- const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
183
- const filterVal = this.tableColumns.map(res => res.dataIndex)
184
- const list = this.dataSource
185
- const data = this.formatJson(filterVal, list)
186
- exportJson(tHeader, data, new Date())
187
- },
188
- formatJson (filterVal, jsonData) {
189
- return jsonData.map(v => filterVal.map(j => v[j]))
190
- },
191
- badgeFilter (key, value) {
192
- return this.$appdata.getParam(key, value)
193
- },
194
- initTableParams () {
195
- let totalWidth = 0
196
- this.rowKey = this.tableColumns[0].dataIndex
197
- for (let i = 0; i < this.tableColumns.length; i++) {
198
- const item = this.tableColumns[i]
199
- if (item.dataIndex === 'action') {
200
- item.fixed = 'right'
201
- item.width = 70
202
- }
203
- if (item.width) {
204
- totalWidth = totalWidth + item.width
205
- } else {
206
- totalWidth = totalWidth + 180
207
- }
208
- }
209
- const width = document.documentElement.clientWidth
210
- if (width >= 1600) {
211
- this.scrollYWidth = 429
212
- } else if (width >= 1200) {
213
- this.scrollYWidth = 390
214
- } else {
215
- this.scrollYWidth = 343
216
- }
217
- // 横向滚动长度大于所有宽度,才能实现固定表头
218
- this.scrollXWidth = totalWidth
219
- },
220
- loadTableData (requestParameters) {
221
- let data = []
222
- this.$emit('loadData', requestParameters, val => {
223
- data = val
224
- })
225
- const _this = this
226
- data.then(res => {
227
- _this.dataSource = res.data
228
- })
229
- return data
230
- },
231
- action (record) {
232
- this.$emit('action', record, record[this.jsonData[0].dataIndex])
233
- },
234
- onSelectChange (selectedRowKeys, selectedRows) {
235
- this.selectedRowKeys = selectedRowKeys
236
- this.selectedRows = selectedRows
237
- this.$emit('selectRow', selectedRowKeys)
238
- },
239
- clearRowKeys () {
240
- this.$refs.table.clearSelected()
241
- },
242
- /**
243
- * 表格重新加载方法
244
- * 如果参数为 true, 则强制刷新到第一页
245
- */
246
- refresh (bool) {
247
- this.$refs.table.refresh(bool)
248
- },
249
- format (date, format) {
250
- return formatDate(date, format)
251
- },
252
- showDrawer () {
253
- this.visible = true
254
- },
255
- toggleIsFormShow () {
256
- this.$emit('toggleIsFormShow')
257
- }
258
- }
259
- }
260
- </script>
261
- <style lang="less" scoped>
262
- </style>
1
+ <template>
2
+ <div>
3
+ <custom-columns-drawer
4
+ :visible.sync="visible"
5
+ :columns.sync="tableColumns"
6
+ :columns-meta="jsonData"/>
7
+ <a-row :gutter="48">
8
+ <a-col>
9
+ <span :style="{ float: 'left', overflow: 'hidden', marginBottom: '8px' }">
10
+ <slot name="expand"></slot>
11
+ </span>
12
+ </a-col>
13
+ <a-col>
14
+ <span :style="{ float: 'right', overflow: 'hidden', marginBottom: '8px' }">
15
+ <a-button-group>
16
+ <a-button @click="toggleIsFormShow">
17
+ <a-icon :style="iconStyle" type="vertical-align-top"/>
18
+ </a-button>
19
+ <a-button @click="refresh(true)">
20
+ <a-icon :style="iconStyle" type="reload" />
21
+ </a-button>
22
+ <a-button @click="showDrawer">
23
+ <a-icon :style="iconStyle" type="table" />
24
+ </a-button>
25
+ <a-button @click="exports" v-if="!buttonState || buttonState.export">
26
+ <a-icon :style="iconStyle" type="cloud-download"/>
27
+ </a-button>
28
+ </a-button-group>
29
+ </span>
30
+ </a-col>
31
+ </a-row>
32
+ <s-table
33
+ ref="table"
34
+ size="default"
35
+ :rowKey="rowKey"
36
+ :columns="tableColumns"
37
+ :data="loadData"
38
+ :alert="true"
39
+ :rowSelection="rowSelection"
40
+ showPagination="auto"
41
+ :scroll="{ x: scrollXWidth, y: scrollYWidth }"
42
+ >
43
+ <template
44
+ v-for="(item, index) in tableColumns"
45
+ :slot="item.dataIndex"
46
+ slot-scope="text, record">
47
+ <!-- 文本溢出省略(ellipsis) -->
48
+ <span :key="index" v-if="item.slotType === 'ellipsis'">
49
+ <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
50
+ </span>
51
+ <!-- 徽标(badge) -->
52
+ <span :key="index" v-else-if="item.slotType === 'badge'">
53
+ <x-badge :badge-key="item.slotKeyMap" :value="text" />
54
+ </span>
55
+ <!-- 日期(date) -->
56
+ <span :key="index" v-else-if="item.slotType === 'date'">
57
+ {{ format(text,'yyyy-MM-dd') }}
58
+ </span>
59
+ <!-- 日期时间(datetime) -->
60
+ <span :key="index" v-else-if="item.slotType === 'dateTime'">
61
+ {{ format(text,'yyyy-MM-dd hh:mm:ss') }}
62
+ </span>
63
+ <!-- 操作列(action) -->
64
+ <span :key="index" v-else-if="item.slotType === 'action'">
65
+ <a @click="action(record)">{{ item.slotValue }}</a>
66
+ </span>
67
+ </template>
68
+ </s-table>
69
+ </div>
70
+ </template>
71
+ <script>
72
+ import { Ellipsis, STable } from '@vue2-client/components'
73
+ import { formatDate } from '@vue2-client/utils/util'
74
+ import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
75
+
76
+ export default {
77
+ name: 'XTable',
78
+ components: {
79
+ STable,
80
+ Ellipsis
81
+ },
82
+ data () {
83
+ return {
84
+ // 加载数据方法 必须为 Promise 对象
85
+ loadData: parameter => {
86
+ // 取到表格携带的表单参数
87
+ const requestParameters = Object.assign({}, parameter)
88
+ // 取到父组件传入的表单参数
89
+ const conditionParams = Object.assign(this.fixedQueryForm, this.form)
90
+ // 如果适用了综合筛选表单,则进行数据处理
91
+ if (conditionParams.rowIdName) {
92
+ const rowIdName = conditionParams.rowIdName
93
+ const rowIdValue = conditionParams.rowIdValue
94
+ delete conditionParams.rowIdName
95
+ delete conditionParams.rowIdValue
96
+ if (rowIdValue) {
97
+ conditionParams[rowIdName] = rowIdValue
98
+ }
99
+ }
100
+ // 如果传了燃气公司字段,则进行数据处理
101
+ if (conditionParams.orgName) {
102
+ requestParameters.orgName = conditionParams.orgName
103
+ delete conditionParams.orgName
104
+ }
105
+ requestParameters.conditionParams = conditionParams
106
+ requestParameters.queryParamsName = this.queryParamsName
107
+ requestParameters.queryParams = this.queryParams
108
+ // 加载数据
109
+ return this.loadTableData(requestParameters)
110
+ },
111
+ rowKey: undefined,
112
+ scrollXWidth: 1600,
113
+ scrollYWidth: 437,
114
+ selectedRowKeys: [],
115
+ selectedRows: [],
116
+ // 数据列
117
+ tableColumns: this.jsonData,
118
+ // 是否显示展示列抽屉
119
+ visible: false,
120
+ dataSource: [],
121
+ // 图标样式
122
+ iconStyle: {
123
+ position: 'relative',
124
+ top: '1px'
125
+ }
126
+ }
127
+ },
128
+ watch: {
129
+ form (rel) {
130
+ this.form = rel
131
+ this.refresh(true)
132
+ },
133
+ jsonData () {
134
+ this.initTableParams()
135
+ }
136
+ },
137
+ props: {
138
+ jsonData: {
139
+ type: Array,
140
+ default: () => {
141
+ return []
142
+ }
143
+ },
144
+ queryParamsName: {
145
+ type: String,
146
+ default: () => {
147
+ return ''
148
+ }
149
+ },
150
+ // 查询参数对象, 用于没有对应查询配置文件名时
151
+ queryParams: {
152
+ type: Object,
153
+ default: null
154
+ },
155
+ form: {
156
+ type: Object,
157
+ default: () => {
158
+ return {}
159
+ }
160
+ },
161
+ // 固定查询表单
162
+ fixedQueryForm: {
163
+ type: Object,
164
+ default: () => {
165
+ return {}
166
+ }
167
+ },
168
+ // 按钮
169
+ buttonState: {
170
+ type: Object,
171
+ default: () => {
172
+ return undefined
173
+ }
174
+ }
175
+ },
176
+ computed: {
177
+ rowSelection () {
178
+ return {
179
+ selectedRowKeys: this.selectedRowKeys,
180
+ onChange: this.onSelectChange
181
+ }
182
+ }
183
+ },
184
+ mounted () {
185
+ this.initTableParams()
186
+ },
187
+ methods: {
188
+ exports () {
189
+ const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
190
+ const filterVal = this.tableColumns.map(res => res.dataIndex)
191
+ const list = this.dataSource
192
+ const data = this.formatJson(filterVal, list)
193
+ exportJson(tHeader, data, new Date())
194
+ },
195
+ formatJson (filterVal, jsonData) {
196
+ return jsonData.map(v => filterVal.map(j => v[j]))
197
+ },
198
+ badgeFilter (key, value) {
199
+ return this.$appdata.getParam(key, value)
200
+ },
201
+ initTableParams () {
202
+ let totalWidth = 0
203
+ this.rowKey = this.tableColumns[0].dataIndex
204
+ for (let i = 0; i < this.tableColumns.length; i++) {
205
+ const item = this.tableColumns[i]
206
+ if (item.dataIndex === 'action') {
207
+ item.fixed = 'right'
208
+ item.width = 70
209
+ }
210
+ if (item.width) {
211
+ totalWidth = totalWidth + item.width
212
+ } else {
213
+ totalWidth = totalWidth + 180
214
+ }
215
+ }
216
+ const width = document.documentElement.clientWidth
217
+ if (width >= 1600) {
218
+ this.scrollYWidth = 429
219
+ } else if (width >= 1200) {
220
+ this.scrollYWidth = 390
221
+ } else {
222
+ this.scrollYWidth = 343
223
+ }
224
+ // 横向滚动长度大于所有宽度,才能实现固定表头
225
+ this.scrollXWidth = totalWidth
226
+ },
227
+ loadTableData (requestParameters) {
228
+ let data = []
229
+ this.$emit('loadData', requestParameters, val => {
230
+ data = val
231
+ })
232
+ const _this = this
233
+ data.then(res => {
234
+ _this.dataSource = res.data
235
+ })
236
+ return data
237
+ },
238
+ action (record) {
239
+ this.$emit('action', record, record[this.jsonData[0].dataIndex])
240
+ },
241
+ onSelectChange (selectedRowKeys, selectedRows) {
242
+ this.selectedRowKeys = selectedRowKeys
243
+ this.selectedRows = selectedRows
244
+ this.$emit('selectRow', selectedRowKeys)
245
+ },
246
+ clearRowKeys () {
247
+ this.$refs.table.clearSelected()
248
+ },
249
+ /**
250
+ * 表格重新加载方法
251
+ * 如果参数为 true, 则强制刷新到第一页
252
+ */
253
+ refresh (bool) {
254
+ this.$refs.table.refresh(bool)
255
+ },
256
+ format (date, format) {
257
+ return formatDate(date, format)
258
+ },
259
+ showDrawer () {
260
+ this.visible = true
261
+ },
262
+ toggleIsFormShow () {
263
+ this.$emit('toggleIsFormShow')
264
+ }
265
+ }
266
+ }
267
+ </script>
268
+ <style lang="less" scoped>
269
+ </style>
@@ -367,6 +367,13 @@ export default {
367
367
  width: 1400px;
368
368
  margin: 0 auto;
369
369
  }
370
+ > div > div > .ant-card:first-of-type > .ant-card-body {
371
+ max-height: calc(100vh - 64px - 48px - 24px);
372
+ overflow-y: auto;
373
+ &::-webkit-scrollbar {
374
+ display: none;
375
+ }
376
+ }
370
377
  }
371
378
  }
372
379
  </style>
@@ -1,58 +1,58 @@
1
- <template>
2
- <div>
3
- <create-query
4
- :visible.sync="visible"
5
- @saveQueryParams="saveQueryParams"
6
- />
7
- <create-simple-form-query
8
- :visible.sync="createSimpleFormVisible"
9
- @saveSimpleFormQueryParams="saveSimpleFormQueryParams"
10
- />
11
- <a-button type="primary" style="margin-top: 10px;margin-left: 10px;" @click="showDrawer">打开完整查询配置生成工具</a-button>
12
- <a-button type="primary" style="margin-top: 10px;margin-left: 10px;" @click="showSimpleFormQueryParamsDrawer">打开基础表单配置生成工具</a-button>
13
- </div>
14
- </template>
15
-
16
- <script>
17
- import { post } from '@vue2-client/services/api/restTools'
18
-
19
- export default {
20
- name: 'CreateQueryPage',
21
- data () {
22
- return {
23
- visible: false,
24
- createSimpleFormVisible: false
25
- }
26
- },
27
- methods: {
28
- showDrawer () {
29
- this.visible = true
30
- },
31
- showSimpleFormQueryParamsDrawer () {
32
- this.createSimpleFormVisible = true
33
- },
34
- // 存储查询配置信息
35
- saveQueryParams (source) {
36
- return post('/webmeterapi/addOrEditQueryParams', {
37
- source: source
38
- }).then(res => {
39
- this.$message.success('保存查询配置成功')
40
- }, err => {
41
- console.error(err)
42
- })
43
- },
44
- // 存储基础表单配置信息
45
- saveSimpleFormQueryParams (source) {
46
- return post('/webmeterapi/addOrEditSimpleFormQueryParams', {
47
- source: source
48
- }).then(res => {
49
- this.$message.success('保存基础表单配置成功')
50
- }, err => {
51
- console.error(err)
52
- })
53
- }
54
- }
55
- }
56
- </script>
57
- <style lang="less" scoped>
58
- </style>
1
+ <template>
2
+ <div>
3
+ <create-query
4
+ :visible.sync="visible"
5
+ @saveQueryParams="saveQueryParams"
6
+ />
7
+ <create-simple-form-query
8
+ :visible.sync="createSimpleFormVisible"
9
+ @saveSimpleFormQueryParams="saveSimpleFormQueryParams"
10
+ />
11
+ <a-button type="primary" style="margin-top: 10px;margin-left: 10px;" @click="showDrawer">打开完整查询配置生成工具</a-button>
12
+ <a-button type="primary" style="margin-top: 10px;margin-left: 10px;" @click="showSimpleFormQueryParamsDrawer">打开基础表单配置生成工具</a-button>
13
+ </div>
14
+ </template>
15
+
16
+ <script>
17
+ import { post } from '@vue2-client/services/api/restTools'
18
+
19
+ export default {
20
+ name: 'CreateQueryPage',
21
+ data () {
22
+ return {
23
+ visible: false,
24
+ createSimpleFormVisible: false
25
+ }
26
+ },
27
+ methods: {
28
+ showDrawer () {
29
+ this.visible = true
30
+ },
31
+ showSimpleFormQueryParamsDrawer () {
32
+ this.createSimpleFormVisible = true
33
+ },
34
+ // 存储查询配置信息
35
+ saveQueryParams (source) {
36
+ return post('/webmeterapi/addOrEditQueryParams', {
37
+ source: source
38
+ }).then(res => {
39
+ this.$message.success('保存查询配置成功')
40
+ }, err => {
41
+ console.error(err)
42
+ })
43
+ },
44
+ // 存储基础表单配置信息
45
+ saveSimpleFormQueryParams (source) {
46
+ return post('/webmeterapi/addOrEditSimpleFormQueryParams', {
47
+ source: source
48
+ }).then(res => {
49
+ this.$message.success('保存基础表单配置成功')
50
+ }, err => {
51
+ console.error(err)
52
+ })
53
+ }
54
+ }
55
+ }
56
+ </script>
57
+ <style lang="less" scoped>
58
+ </style>
package/vue.config.js CHANGED
@@ -1,153 +1,153 @@
1
- const path = require('path')
2
- const webpack = require('webpack')
3
- const ThemeColorReplacer = require('webpack-theme-color-replacer')
4
- const { getThemeColors, modifyVars } = require('./src/utils/themeUtil')
5
- const { resolveCss } = require('./src/utils/theme-color-replacer-extend')
6
- const CompressionWebpackPlugin = require('compression-webpack-plugin')
7
-
8
- const productionGzipExtensions = ['js', 'css']
9
- const isProd = process.env.NODE_ENV === 'production'
10
-
11
- // const assetsCDN = {
12
- // // webpack build externals
13
- // externals: {
14
- // vue: 'Vue',
15
- // 'vue-router': 'VueRouter',
16
- // vuex: 'Vuex',
17
- // axios: 'axios',
18
- // nprogress: 'NProgress',
19
- // clipboard: 'ClipboardJS',
20
- // '@antv/data-set': 'DataSet',
21
- // 'js-cookie': 'Cookies'
22
- // },
23
- // css: [
24
- // ],
25
- // js: [
26
- // '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
27
- // '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
28
- // '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
29
- // '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
30
- // '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
31
- // '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
32
- // '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
33
- // '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js'
34
- // ]
35
- // }
36
-
37
- const server = 'http://121.36.106.17:8400'
38
- // const local = 'http://localhost:8445/webmeter'
39
- const local = 'http://123.60.214.109:8405/webmeter'
40
-
41
- module.exports = {
42
- devServer: {
43
- // development server port 8000
44
- port: 8001,
45
- // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
46
- proxy: {
47
- '/rs': {
48
- target: server,
49
- ws: false,
50
- changeOrigin: true
51
- },
52
- '/image': {
53
- target: server,
54
- ws: false,
55
- changeOrigin: true
56
- },
57
- '/webapps': {
58
- target: server,
59
- ws: false,
60
- changeOrigin: true
61
- },
62
- '/webmeterapi': {
63
- pathRewrite: { '^/webmeterapi': '/rs/logic' },
64
- target: local,
65
- changeOrigin: true
66
- },
67
- '/webmeteruploadapi': {
68
- pathRewrite: { '^/webmeteruploadapi': '/rs/file' },
69
- target: local,
70
- changeOrigin: true
71
- },
72
- '/webmeterresourceapi': {
73
- pathRewrite: { '^/webmeterresourceapi': '/rs/resource' },
74
- target: local,
75
- changeOrigin: true
76
- },
77
- '/resource': {
78
- pathRewrite: { '^/resource': '/' },
79
- target: 'http://127.0.0.1:4789',
80
- changeOrigin: true
81
- }
82
- }
83
- },
84
- pluginOptions: {
85
- 'style-resources-loader': {
86
- preProcessor: 'less',
87
- patterns: [path.resolve(__dirname, './src/theme/theme.less')]
88
- }
89
- },
90
- configureWebpack: config => {
91
- config.entry.app = ['babel-polyfill', 'whatwg-fetch', './src/main.js']
92
- config.performance = {
93
- hints: false
94
- }
95
- config.plugins.push(
96
- new ThemeColorReplacer({
97
- fileName: 'css/theme-colors-[contenthash:8].css',
98
- matchColors: getThemeColors(),
99
- injectCss: true,
100
- resolveCss
101
- })
102
- )
103
- // Ignore all locale files of moment.js
104
- config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
105
- // 生产环境下将资源压缩成gzip格式
106
- if (isProd) {
107
- // add `CompressionWebpack` plugin to webpack plugins
108
- config.plugins.push(new CompressionWebpackPlugin({
109
- algorithm: 'gzip',
110
- test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
111
- threshold: 10240,
112
- minRatio: 0.8
113
- }))
114
- }
115
- // if prod, add externals
116
- // if (isProd) {
117
- // config.externals = assetsCDN.externals
118
- // }
119
- },
120
- chainWebpack: config => {
121
- // 生产环境下关闭css压缩的 colormin 项,因为此项优化与主题色替换功能冲突
122
- if (isProd) {
123
- config.plugin('optimize-css')
124
- .tap(args => {
125
- args[0].cssnanoOptions.preset[1].colormin = false
126
- return args
127
- })
128
- }
129
- // 生产环境下使用CDN
130
- // if (isProd) {
131
- // config.plugin('html')
132
- // .tap(args => {
133
- // args[0].cdn = assetsCDN
134
- // return args
135
- // })
136
- // }
137
- config.resolve.alias.set('@vue2-client', path.resolve(__dirname, 'src'))
138
- },
139
- css: {
140
- loaderOptions: {
141
- less: {
142
- lessOptions: {
143
- modifyVars: modifyVars(),
144
- javascriptEnabled: true
145
- }
146
- }
147
- }
148
- },
149
- publicPath: process.env.VUE_APP_PUBLIC_PATH,
150
- outputDir: 'dist',
151
- assetsDir: 'static',
152
- productionSourceMap: false
153
- }
1
+ const path = require('path')
2
+ const webpack = require('webpack')
3
+ const ThemeColorReplacer = require('webpack-theme-color-replacer')
4
+ const { getThemeColors, modifyVars } = require('./src/utils/themeUtil')
5
+ const { resolveCss } = require('./src/utils/theme-color-replacer-extend')
6
+ const CompressionWebpackPlugin = require('compression-webpack-plugin')
7
+
8
+ const productionGzipExtensions = ['js', 'css']
9
+ const isProd = process.env.NODE_ENV === 'production'
10
+
11
+ // const assetsCDN = {
12
+ // // webpack build externals
13
+ // externals: {
14
+ // vue: 'Vue',
15
+ // 'vue-router': 'VueRouter',
16
+ // vuex: 'Vuex',
17
+ // axios: 'axios',
18
+ // nprogress: 'NProgress',
19
+ // clipboard: 'ClipboardJS',
20
+ // '@antv/data-set': 'DataSet',
21
+ // 'js-cookie': 'Cookies'
22
+ // },
23
+ // css: [
24
+ // ],
25
+ // js: [
26
+ // '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
27
+ // '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
28
+ // '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
29
+ // '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
30
+ // '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
31
+ // '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
32
+ // '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
33
+ // '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js'
34
+ // ]
35
+ // }
36
+
37
+ const server = 'http://121.36.106.17:8400'
38
+ // const local = 'http://localhost:8445/webmeter'
39
+ const local = 'http://123.60.214.109:8405/webmeter'
40
+
41
+ module.exports = {
42
+ devServer: {
43
+ // development server port 8000
44
+ port: 8001,
45
+ // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
46
+ proxy: {
47
+ '/rs': {
48
+ target: server,
49
+ ws: false,
50
+ changeOrigin: true
51
+ },
52
+ '/image': {
53
+ target: server,
54
+ ws: false,
55
+ changeOrigin: true
56
+ },
57
+ '/webapps': {
58
+ target: server,
59
+ ws: false,
60
+ changeOrigin: true
61
+ },
62
+ '/webmeterapi': {
63
+ pathRewrite: { '^/webmeterapi': '/rs/logic' },
64
+ target: local,
65
+ changeOrigin: true
66
+ },
67
+ '/webmeteruploadapi': {
68
+ pathRewrite: { '^/webmeteruploadapi': '/rs/file' },
69
+ target: local,
70
+ changeOrigin: true
71
+ },
72
+ '/webmeterresourceapi': {
73
+ pathRewrite: { '^/webmeterresourceapi': '/rs/resource' },
74
+ target: local,
75
+ changeOrigin: true
76
+ },
77
+ '/resource': {
78
+ pathRewrite: { '^/resource': '/' },
79
+ target: 'http://127.0.0.1:4789',
80
+ changeOrigin: true
81
+ }
82
+ }
83
+ },
84
+ pluginOptions: {
85
+ 'style-resources-loader': {
86
+ preProcessor: 'less',
87
+ patterns: [path.resolve(__dirname, './src/theme/theme.less')]
88
+ }
89
+ },
90
+ configureWebpack: config => {
91
+ config.entry.app = ['babel-polyfill', 'whatwg-fetch', './src/main.js']
92
+ config.performance = {
93
+ hints: false
94
+ }
95
+ config.plugins.push(
96
+ new ThemeColorReplacer({
97
+ fileName: 'css/theme-colors-[contenthash:8].css',
98
+ matchColors: getThemeColors(),
99
+ injectCss: true,
100
+ resolveCss
101
+ })
102
+ )
103
+ // Ignore all locale files of moment.js
104
+ config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
105
+ // 生产环境下将资源压缩成gzip格式
106
+ if (isProd) {
107
+ // add `CompressionWebpack` plugin to webpack plugins
108
+ config.plugins.push(new CompressionWebpackPlugin({
109
+ algorithm: 'gzip',
110
+ test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
111
+ threshold: 10240,
112
+ minRatio: 0.8
113
+ }))
114
+ }
115
+ // if prod, add externals
116
+ // if (isProd) {
117
+ // config.externals = assetsCDN.externals
118
+ // }
119
+ },
120
+ chainWebpack: config => {
121
+ // 生产环境下关闭css压缩的 colormin 项,因为此项优化与主题色替换功能冲突
122
+ if (isProd) {
123
+ config.plugin('optimize-css')
124
+ .tap(args => {
125
+ args[0].cssnanoOptions.preset[1].colormin = false
126
+ return args
127
+ })
128
+ }
129
+ // 生产环境下使用CDN
130
+ // if (isProd) {
131
+ // config.plugin('html')
132
+ // .tap(args => {
133
+ // args[0].cdn = assetsCDN
134
+ // return args
135
+ // })
136
+ // }
137
+ config.resolve.alias.set('@vue2-client', path.resolve(__dirname, 'src'))
138
+ },
139
+ css: {
140
+ loaderOptions: {
141
+ less: {
142
+ lessOptions: {
143
+ modifyVars: modifyVars(),
144
+ javascriptEnabled: true
145
+ }
146
+ }
147
+ }
148
+ },
149
+ publicPath: process.env.VUE_APP_PUBLIC_PATH,
150
+ outputDir: 'dist',
151
+ assetsDir: 'static',
152
+ productionSourceMap: false
153
+ }