agilebuilder-ui 1.0.89 → 1.0.90-temp2

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.
Files changed (12) hide show
  1. package/lib/super-ui.css +1 -1
  2. package/lib/super-ui.js +45 -89
  3. package/lib/super-ui.umd.cjs +3 -3
  4. package/package.json +1 -1
  5. package/packages/super-grid/src/dynamic-input.vue +14 -12
  6. package/packages/super-grid/src/normal-column-content.vue +16 -15
  7. package/packages/super-grid/src/normal-column.vue +8 -16
  8. package/packages/super-grid/src/utils.js +5 -9
  9. package/packages/super-nine-grid/src/super-nine-grid.vue +1032 -1143
  10. package/src/api/sso-service.js +1 -1
  11. package/src/directives/permission/permission.js +4 -3
  12. package/src/utils/i18n-util.js +4 -0
package/packages/super-nine-grid/src/super-nine-grid.vue CHANGED
@@ -1,211 +1,170 @@
1
1
  <template>
2
- <div>
3
- <search-form
4
- v-if="hasLoadedColumns"
5
- v-show="showSearch"
6
- ref="sf"
7
- :code="code"
8
- :columns="columns"
9
- :grid-id="gridId"
10
- :init-search-props="initSearchProps"
11
- :pagination="pagination"
12
- :query="query"
13
- :search-param="searchFormContent"
14
- :url="url"
15
- @reset="resetSearch"
16
- @search="search"
17
- />
18
- <div class="nine-grid-area">
19
- <div
20
- :id="gridId"
21
- :style="'height:' + height + 'px;overflow-y: auto;overflow-x: hidden;'"
22
- >
23
- <el-row :gutter="24">
24
- <el-col
25
- v-if="isHasCreate"
26
- id="_addCardId_"
27
- v-permission="createPermission"
28
- :span="colSpan"
29
- >
30
- <el-card
31
- :body-style="{ padding: '0px' }"
32
- style="
33
- border-radius: 4px;
34
- background: #ffffff;
35
- border: 1px solid #e5e8ef;
36
- "
37
- >
38
- <div class="add-screen" @click="add">
39
- <el-icon>
40
- <Plus/>
41
- </el-icon>
42
- <span style="margin-top: 7px">
43
- {{ $t('superNineGrid.add') }}</span
44
- >
45
- </div>
46
- </el-card>
47
- </el-col>
48
- <el-col
49
- v-for="(params, index) in gridData"
50
- :key="params.id"
51
- :offset="1.5"
52
- :span="colSpan"
53
- >
54
- <el-card
55
- :body-style="{ padding: '0px' }"
56
- :style="{
57
- border:
58
- selectionIds.indexOf(params.id) > -1
59
- ? '1px solid #005EBA'
60
- : '',
61
- position: 'relative'
2
+ <div>
3
+ <search-form
4
+ v-if="hasLoadedColumns"
5
+ v-show="showSearch"
6
+ ref="sf"
7
+ :code="code"
8
+ :columns="columns"
9
+ :grid-id="gridId"
10
+ :init-search-props="initSearchProps"
11
+ :pagination="pagination"
12
+ :query="query"
13
+ :search-param="searchFormContent"
14
+ :url="url"
15
+ @reset="resetSearch"
16
+ @search="search"
17
+ />
18
+ <div class="nine-grid-area">
19
+ <div :id="gridId" :style="'height:' + height + 'px;overflow-y: auto;overflow-x: hidden;'">
20
+ <el-row :gutter="24">
21
+ <el-col v-if="isHasCreate" id="_addCardId_" v-permission="createPermission" :span="colSpan">
22
+ <el-card
23
+ :body-style="{ padding: '0px' }"
24
+ style="border-radius: 4px; background: #ffffff; border: 1px solid #e5e8ef"
25
+ >
26
+ <div class="add-screen" @click="add">
27
+ <el-icon>
28
+ <Plus />
29
+ </el-icon>
30
+ <span style="margin-top: 7px"> {{ $t('superNineGrid.add') }}</span>
31
+ </div>
32
+ </el-card>
33
+ </el-col>
34
+ <el-col v-for="(params, index) in gridData" :key="params.id" :offset="1.5" :span="colSpan">
35
+ <el-card
36
+ :body-style="{ padding: '0px' }"
37
+ :style="{
38
+ border: selectionIds.indexOf(params.id) > -1 ? '1px solid #005EBA' : '',
39
+ position: 'relative'
62
40
  }"
63
- shadow="hover"
64
- >
65
- <div
66
- style="height: 160px"
67
- @click="clickContent(params)"
68
- @mouseenter="enter(index)"
69
- @mouseleave="leave()"
70
- >
71
- <!--<div @click="clickContent(params)">-->
72
- <!--<transition name="fade">-->
73
- <!-- &lt;!&ndash;<div v-if="seen && index === current" class="popContainer">&ndash;&gt;-->
74
- <!-- <div class="popContainer">-->
75
- <!-- <div class="else-button" style="background: rgba(0,0,0,0.5); min-height: 20%;">-->
76
- <!-- &lt;!&ndash;<div class="else-button">&ndash;&gt;-->
77
- <!-- <slot :name="slotBefore" :params="params"/>-->
41
+ shadow="hover"
42
+ >
43
+ <div style="height: 160px" @click="clickContent(params)" @mouseenter="enter(index)" @mouseleave="leave()">
44
+ <!--<div @click="clickContent(params)">-->
45
+ <!--<transition name="fade">-->
46
+ <!-- &lt;!&ndash;<div v-if="seen && index === current" class="popContainer">&ndash;&gt;-->
47
+ <!-- <div class="popContainer">-->
48
+ <!-- <div class="else-button" style="background: rgba(0,0,0,0.5); min-height: 20%;">-->
49
+ <!-- &lt;!&ndash;<div class="else-button">&ndash;&gt;-->
50
+ <!-- <slot :name="slotBefore" :params="params"/>-->
78
51
 
79
- <!-- <template v-for="button in operations">-->
80
- <!-- <template v-if="isShowButton(params, button)">-->
81
- <!-- <el-tooltip v-if="button.icon" :key="button.name" v-permission="button.permission?button.permission:'true'" :content="button.name" class="item" effect="dark" placement="top">-->
82
- <!-- &lt;!&ndash;<em :class="button.icon +' icons'" @click.stop="buttonClick(button.event, params)"/>&ndash;&gt;-->
83
- <!-- <em :class="button.icon +' icons'" @click.stop="buttonClick(button.event, params)"/>-->
84
- <!-- </el-tooltip>-->
85
- <!-- &lt;!&ndash;<em v-else :key="button.name" v-permission="button.permission?button.permission:'true'" :class="button.name +' icons'" @click.stop="buttonClick(button.event, params)">{{ button.name }} </em>&ndash;&gt;-->
86
- <!-- <em v-else :key="button.name" v-permission="button.permission?button.permission:'true'" :class="button.name +' icons'" @click.stop="buttonClick(button.event, params)">{{ button.name }} </em>-->
87
- <!-- </template>-->
88
- <!-- </template>-->
89
- <!-- </div>-->
90
- <!-- </div>-->
91
- <!--</transition>-->
92
- <!-- <img v-if="props && props.imageUrl && objectPropValue(params, propCloumns.imageUrl, props.imageUrl)" :src="defaultShowImageAction+objectPropValue(params, propCloumns.imageUrl, props.imageUrl)" alt="加载失败" class="image"> -->
93
- <!-- <img v-if="true || (props && props.imageUrl)" :src="defaultShowImageAction+'fa7ae05e-0f0e-4cc0-b24a-69aea4408233'" alt="加载失败" class="image"> -->
94
- <!-- <div v-else class="image" style="padding: 20px; text-align: center;"> -->
95
- <div
96
- class="image"
97
- style="padding: 15px; box-sizing: border-box"
98
- >
99
- <div>
100
- <el-tooltip
101
- :content="props && props.content?getPropValue('content', params) + '('+ params.code+')':(props && props.title?getPropValue('title', params) + '('+ params.code+')':'')"
102
- effect="dark"
103
- placement="top-start"
104
- >
105
- <div
106
- v-if="props && props.content"
107
- :style="'display: inline-block;width:'+titleWidth"
108
- class="ellipsis cell--span"
109
- >
110
- {{
111
- getPropValue('content', params) + '('+ params.code+')'
112
- }}
113
- </div>
114
- <div
115
- v-else-if="props && props.title"
116
- :style="'display: inline-block;width:'+titleWidth"
117
- class="ellipsis cell--span"
118
- >
119
- {{
120
- getPropValue('title', params) + '('+ params.code+')'
121
- }}
122
- </div>
123
- </el-tooltip>
124
- <div
125
- v-if="showEnableButton(params)"
126
- style="
127
- margin-left: 2px;
128
- color: #00b42a;
129
- background-color: #e8ffea;
130
- width: 68px;
131
- text-align: center;
132
- display: inline-block;
133
- "
134
- >
135
- <el-icon>
136
- <SuccessFilled/>
137
- </el-icon>
138
- <span
139
- :title="getPropValue('subTitle', params)"
140
- style="margin-left: 4px"
141
- >{{ getPropValue('subTitle', params) }}</span
142
- >
143
- </div>
144
- </div>
145
- <div class="button-style">
146
- <div style="padding: 10px;box-sizing: border-box;width: 50px">
147
- {{ $t('imatrixUIPublicModel.edit') }}
148
- </div>
149
- <div style="padding-left: 15px">
150
- <template v-for="button in operations">
151
- <template v-if="isShowButton(params, button)">
152
- <el-tooltip
153
- :key="button.name"
154
- v-if="button.icon"
155
- v-permission="
156
- button.permission ? button.permission : 'true'
157
- "
158
- :content="button.name"
159
- class="item"
160
- effect="dark"
161
- placement="top"
162
- style="background-color: red"
163
- >
164
- <el-icon :class="button.icon + ' icons'" @click.stop="buttonClick(button.event, params)">
165
- <component :is="button.icon"/>
166
- </el-icon>
167
- </el-tooltip>
168
- <em
169
- v-else
170
- :key="button.name"
171
- v-permission="
172
- button.permission ? button.permission : 'true'
173
- "
174
- :class="button.name + ' icons'"
175
- @click.stop="buttonClick(button.event, params)"
176
- >{{ button.name }}
177
- </em>
178
- </template>
179
- </template>
180
- <slot :name="slotBefore" :params="params"/>
181
- </div>
182
- </div>
183
- <div
184
- style="position: absolute;right: 5%;bottom: 9%;"
185
- >
186
- <slot :name="slotState" :params="params"/>
187
- <template v-if="isShowEnableState">
188
- <el-button
189
- v-if="showEnableButton(params)"
190
- class="button--default"
191
- size="default"
192
- @click.stop="changeState(params)"
193
- >
194
- {{ $t('imatrixUIPublicModel.forbidden') }}
195
- </el-button>
196
- <el-button
197
- v-else
198
- size="default"
199
- type="primary"
200
- @click.stop="changeState(params)"
201
- >
202
- {{ $t('imatrixUIPublicModel.startUsing') }}
203
- </el-button>
204
- </template>
205
- </div>
206
- </div>
207
- </div>
208
- <!-- <el-divider />
52
+ <!-- <template v-for="button in operations">-->
53
+ <!-- <template v-if="isShowButton(params, button)">-->
54
+ <!-- <el-tooltip v-if="button.icon" :key="button.name" v-permission="button.permission?button.permission:'true'" :content="button.name" class="item" effect="dark" placement="top">-->
55
+ <!-- &lt;!&ndash;<em :class="button.icon +' icons'" @click.stop="buttonClick(button.event, params)"/>&ndash;&gt;-->
56
+ <!-- <em :class="button.icon +' icons'" @click.stop="buttonClick(button.event, params)"/>-->
57
+ <!-- </el-tooltip>-->
58
+ <!-- &lt;!&ndash;<em v-else :key="button.name" v-permission="button.permission?button.permission:'true'" :class="button.name +' icons'" @click.stop="buttonClick(button.event, params)">{{ button.name }} </em>&ndash;&gt;-->
59
+ <!-- <em v-else :key="button.name" v-permission="button.permission?button.permission:'true'" :class="button.name +' icons'" @click.stop="buttonClick(button.event, params)">{{ button.name }} </em>-->
60
+ <!-- </template>-->
61
+ <!-- </template>-->
62
+ <!-- </div>-->
63
+ <!-- </div>-->
64
+ <!--</transition>-->
65
+ <!-- <img v-if="props && props.imageUrl && objectPropValue(params, propCloumns.imageUrl, props.imageUrl)" :src="defaultShowImageAction+objectPropValue(params, propCloumns.imageUrl, props.imageUrl)" alt="加载失败" class="image"> -->
66
+ <!-- <img v-if="true || (props && props.imageUrl)" :src="defaultShowImageAction+'fa7ae05e-0f0e-4cc0-b24a-69aea4408233'" alt="加载失败" class="image"> -->
67
+ <!-- <div v-else class="image" style="padding: 20px; text-align: center;"> -->
68
+ <div class="image" style="padding: 15px; box-sizing: border-box">
69
+ <div>
70
+ <el-tooltip
71
+ :content="
72
+ props && props.content
73
+ ? getPropValue('content', params) + '(' + params.code + ')'
74
+ : props && props.title
75
+ ? getPropValue('title', params) + '(' + params.code + ')'
76
+ : ''
77
+ "
78
+ effect="dark"
79
+ placement="top-start"
80
+ >
81
+ <div
82
+ v-if="props && props.content"
83
+ :style="'display: inline-block;width:' + titleWidth"
84
+ class="ellipsis cell--span"
85
+ >
86
+ {{ getPropValue('content', params) + '(' + params.code + ')' }}
87
+ </div>
88
+ <div
89
+ v-else-if="props && props.title"
90
+ :style="'display: inline-block;width:' + titleWidth"
91
+ class="ellipsis cell--span"
92
+ >
93
+ {{ getPropValue('title', params) + '(' + params.code + ')' }}
94
+ </div>
95
+ </el-tooltip>
96
+ <div
97
+ v-if="showEnableButton(params)"
98
+ style="
99
+ margin-left: 2px;
100
+ color: #00b42a;
101
+ background-color: #e8ffea;
102
+ width: 68px;
103
+ text-align: center;
104
+ display: inline-block;
105
+ "
106
+ >
107
+ <el-icon>
108
+ <SuccessFilled />
109
+ </el-icon>
110
+ <span :title="getPropValue('subTitle', params)" style="margin-left: 4px">{{
111
+ getPropValue('subTitle', params)
112
+ }}</span>
113
+ </div>
114
+ </div>
115
+ <div class="button-style">
116
+ <div style="padding: 10px; box-sizing: border-box; width: 50px">
117
+ {{ $t('imatrixUIPublicModel.edit') }}
118
+ </div>
119
+ <div style="padding-left: 15px">
120
+ <template v-for="button in operations">
121
+ <template v-if="isShowButton(params, button)">
122
+ <el-tooltip
123
+ :key="button.name"
124
+ v-if="button.icon"
125
+ v-permission="button.permission ? button.permission : 'true'"
126
+ :content="button.name"
127
+ class="item"
128
+ effect="dark"
129
+ placement="top"
130
+ style="background-color: red"
131
+ >
132
+ <el-icon :class="button.icon + ' icons'" @click.stop="buttonClick(button.event, params)">
133
+ <component :is="button.icon" />
134
+ </el-icon>
135
+ </el-tooltip>
136
+ <em
137
+ v-else
138
+ :key="button.name"
139
+ v-permission="button.permission ? button.permission : 'true'"
140
+ :class="button.name + ' icons'"
141
+ @click.stop="buttonClick(button.event, params)"
142
+ >{{ button.name }}
143
+ </em>
144
+ </template>
145
+ </template>
146
+ <slot :name="slotBefore" :params="params" />
147
+ </div>
148
+ </div>
149
+ <div v-if="isShowBottom" style="position: absolute; right: 5%; bottom: 9%">
150
+ <slot :name="slotState" :params="params" />
151
+ <template v-if="isShowEnableState">
152
+ <el-button
153
+ v-if="showEnableButton(params)"
154
+ class="button--default"
155
+ size="default"
156
+ @click.stop="changeState(params)"
157
+ >
158
+ {{ $t('imatrixUIPublicModel.forbidden') }}
159
+ </el-button>
160
+ <el-button v-else size="default" type="primary" @click.stop="changeState(params)">
161
+ {{ $t('imatrixUIPublicModel.startUsing') }}
162
+ </el-button>
163
+ </template>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ <!-- <el-divider />
209
168
  <div style="padding: 10px 10px 10px 10px;">
210
169
  <div class="bottom clearfix">
211
170
  <time class="name">
@@ -235,988 +194,918 @@
235
194
  <span :title="getPropValue('subTitle', params)" style="width: 100%">{{ getPropValue('subTitle', params) }}</span>
236
195
  </time>
237
196
  </div> -->
238
- <!--</div>-->
239
- </el-card>
240
- </el-col>
241
- </el-row>
242
- </div>
243
- <el-pagination
244
- v-if="pagination"
245
- v-model:current-page="currentPage"
246
- v-model:page-size="pagination.pageSize"
247
- :layout="pagination.layout"
248
- :page-sizes="pagination.pageSizes"
249
- :total="pagination.total!==undefined&&pagination.total!==''&&pagination.total!==null?pagination.total:0"
250
- @size-change="handleSizeChange"
251
- @current-change="handleCurrentChange"
252
- />
253
- </div>
254
- </div>
197
+ <!--</div>-->
198
+ </el-card>
199
+ </el-col>
200
+ </el-row>
201
+ </div>
202
+ <el-pagination
203
+ v-if="pagination"
204
+ v-model:current-page="currentPage"
205
+ v-model:page-size="pagination.pageSize"
206
+ :layout="pagination.layout"
207
+ :page-sizes="pagination.pageSizes"
208
+ :total="
209
+ pagination.total !== undefined && pagination.total !== '' && pagination.total !== null ? pagination.total : 0
210
+ "
211
+ @size-change="handleSizeChange"
212
+ @current-change="handleCurrentChange"
213
+ />
214
+ </div>
215
+ </div>
255
216
  </template>
256
217
 
257
218
  <script>
258
- import {$emit} from '../../utils/gogocodeTransfer'
219
+ import { $emit } from '../../utils/gogocodeTransfer'
259
220
  import customFormatter from './custom-formatter'
260
221
  import SearchForm from './search-form.vue'
261
- import {addDynamicProp, getGridParams, getTableHeight, isHasOptionFunction} from './utils'
222
+ import { addDynamicProp, getGridParams, getTableHeight, isHasOptionFunction } from './utils'
262
223
  import store from './store'
263
224
  import superGridService from './super-grid-service'
264
225
  import apis from './apis'
265
226
  import Sortable from 'sortablejs'
266
227
 
267
228
  export default {
268
- name: 'SuperNineGrid',
269
- components: {
270
- SearchForm,
271
- },
272
- props: {
273
- code: {
274
- type: String,
275
- default: '',
276
- },
277
- url: {
278
- type: String,
279
- default: '',
280
- },
281
- options: {
282
- type: Object,
283
- default: function () {
284
- return {}
285
- },
286
- },
287
- publishVersion: {
288
- type: Number,
289
- default: 0
290
- }
291
- },
292
- data() {
293
- let mergeFields = []
294
- if (
295
- this.options &&
296
- this.options.mergeFields &&
297
- this.options.mergeFields !== ''
298
- ) {
299
- mergeFields = this.options.mergeFields.split(',')
300
- }
301
- const defaultShowImageAction =
302
- window.$vueApp.config.globalProperties.baseAPI +
303
- '/component/super-form/show-image?serverPath='
304
- const gridId =
305
- this.options && this.options.id ? this.options.id : '_nineGrid'
306
- const storeId = this.code + '~' + gridId
307
- const isShowRadio =
308
- this.options && this.options.showRadio !== undefined
309
- ? this.options.showRadio
310
- : false
311
- const titleWidth = this.options && this.options.style && this.options.style.titleWidth !== undefined
312
- ? this.options.style.titleWidth:'60%'
313
- return {
314
- isLoading: false,
315
- currentPage: 1,
316
- showColumnConfig: false,
317
- basicInfo: {
318
- summary: 'no',
319
- },
320
- columns: [],
321
- pagination: null,
322
- query: null,
323
- lineEdit: null,
324
- gridData: [],
325
- sortInfo: null,
326
- pageSize: null,
327
- showSearch: false,
328
- height: null,
329
- isSql: false, // 是否是sql查询
330
- hasLoadData: false,
331
- mergeFields,
332
- hasLoadedColumns: false, // 是否已经加载了列配置
333
- seen: false,
334
- current: null,
335
- isHasCreate: true, // 是否需要新建按钮
336
- screenBaseUrl: null,
337
- props: null, // 属性配置
338
- operations: [], // 指向格子时出现的操作按钮集合
339
- propCloumns: null, // 属性字段配置详细信息
340
- multiple: false, // 是否需要多选
341
- createPermission: 'true', // 新建权限编码，默认是有权限的
342
- urlToSaveOrder: null, // 拖动格子后台保存接口路径
343
- selections: [], // 选中的记录集合
344
- selectionIds: [], // 选中的记录id集合
345
- selectionModels: {}, // 选中的记录对象
346
- searchFormContent: null,
347
- initSearchProps: [], // 初始查询的字段属性名集合
348
- defaultShowImageAction, // 显示图片的路径
349
- gridId,
350
- storeId,
351
- currentId: null, // 当前点击的记录id
352
- isShowRadio, // 单选时是否显示单选按钮
353
- titleStyle: null, // 标题的样式对象，格式为：{ color: 'green', fontWeight: 'bold'}
354
- isShowEnableState: false,
355
- colSpan: 6,
356
- slotBefore: 'before',
357
- titleWidth,
358
- slotState: 'bottom'
359
- }
360
- },
361
- computed: {},
362
- provide() {
363
- return {}
364
- },
365
- created() {
366
- store.set(this.code + '~' + this.gridId, getGridParams())
367
- store.set('_nine_list_code', this.code + '~' + this.gridId)
368
- this.initSetting()
369
- this.initialize()
370
- // this.showDemo()
371
- console.log('%c描述-232041', 'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px', this.operations);
372
- },
373
- mounted() {
374
- this.$watch(
375
- 'showSearch',
376
- function (newVal, oldVal) {
377
- this.$nextTick(() => {
378
- let tableHeight = getTableHeight(newVal, this.$refs.sf)
379
- const newHeight = this.resizeHeight()
380
- if (newHeight) {
381
- tableHeight = newHeight
382
- }
383
- this.height = tableHeight
384
- })
385
- },
386
- {
387
- immediate: true,
388
- deep: true,
389
- }
390
- )
229
+ name: 'SuperNineGrid',
230
+ components: {
231
+ SearchForm
232
+ },
233
+ props: {
234
+ code: {
235
+ type: String,
236
+ default: ''
237
+ },
238
+ url: {
239
+ type: String,
240
+ default: ''
241
+ },
242
+ options: {
243
+ type: Object,
244
+ default: function () {
245
+ return {}
246
+ }
247
+ },
248
+ publishVersion: {
249
+ type: Number,
250
+ default: 0
251
+ }
252
+ },
253
+ data() {
254
+ let mergeFields = []
255
+ if (this.options && this.options.mergeFields && this.options.mergeFields !== '') {
256
+ mergeFields = this.options.mergeFields.split(',')
257
+ }
258
+ const defaultShowImageAction =
259
+ window.$vueApp.config.globalProperties.baseAPI + '/component/super-form/show-image?serverPath='
260
+ const gridId = this.options && this.options.id ? this.options.id : '_nineGrid'
261
+ const storeId = this.code + '~' + gridId
262
+ const isShowRadio = this.options && this.options.showRadio !== undefined ? this.options.showRadio : false
263
+ const titleWidth =
264
+ this.options && this.options.style && this.options.style.titleWidth !== undefined
265
+ ? this.options.style.titleWidth
266
+ : '60%'
267
+ return {
268
+ isLoading: false,
269
+ currentPage: 1,
270
+ showColumnConfig: false,
271
+ basicInfo: {
272
+ summary: 'no'
273
+ },
274
+ columns: [],
275
+ pagination: null,
276
+ query: null,
277
+ lineEdit: null,
278
+ gridData: [],
279
+ sortInfo: null,
280
+ pageSize: null,
281
+ showSearch: false,
282
+ height: null,
283
+ isSql: false, // 是否是sql查询
284
+ hasLoadData: false,
285
+ mergeFields,
286
+ hasLoadedColumns: false, // 是否已经加载了列配置
287
+ seen: false,
288
+ current: null,
289
+ isHasCreate: true, // 是否需要新建按钮
290
+ screenBaseUrl: null,
291
+ props: null, // 属性配置
292
+ operations: [], // 指向格子时出现的操作按钮集合
293
+ propCloumns: null, // 属性字段配置详细信息
294
+ multiple: false, // 是否需要多选
295
+ createPermission: 'true', // 新建权限编码，默认是有权限的
296
+ urlToSaveOrder: null, // 拖动格子后台保存接口路径
297
+ selections: [], // 选中的记录集合
298
+ selectionIds: [], // 选中的记录id集合
299
+ selectionModels: {}, // 选中的记录对象
300
+ searchFormContent: null,
301
+ initSearchProps: [], // 初始查询的字段属性名集合
302
+ defaultShowImageAction, // 显示图片的路径
303
+ gridId,
304
+ storeId,
305
+ currentId: null, // 当前点击的记录id
306
+ isShowRadio, // 单选时是否显示单选按钮
307
+ titleStyle: null, // 标题的样式对象，格式为：{ color: 'green', fontWeight: 'bold'}
308
+ isShowEnableState: false,
309
+ colSpan: 6,
310
+ slotBefore: 'before',
311
+ titleWidth,
312
+ slotState: 'bottom',
313
+ isShowBottom: true
314
+ }
315
+ },
316
+ computed: {},
317
+ provide() {
318
+ return {}
319
+ },
320
+ created() {
321
+ store.set(this.code + '~' + this.gridId, getGridParams())
322
+ store.set('_nine_list_code', this.code + '~' + this.gridId)
323
+ this.initSetting()
324
+ this.initialize()
325
+ // this.showDemo()
326
+ console.log('%c描述-232041', 'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px', this.operations)
327
+ },
328
+ mounted() {
329
+ this.$watch(
330
+ 'showSearch',
331
+ function (newVal, oldVal) {
332
+ this.$nextTick(() => {
333
+ let tableHeight = getTableHeight(newVal, this.$refs.sf)
334
+ const newHeight = this.resizeHeight()
335
+ if (newHeight) {
336
+ tableHeight = newHeight
337
+ }
338
+ this.height = tableHeight
339
+ })
340
+ },
341
+ {
342
+ immediate: true,
343
+ deep: true
344
+ }
345
+ )
391
346
 
392
- this.$watch(
393
- 'hasLoadData',
394
- function (newVal, oldVal) {
395
- if (newVal === true) {
396
- this.$nextTick(() => {
397
- // this.rowDrop()
398
- const gridParams = store.get(this.storeId)
399
- if (isHasOptionFunction('gridComplete', this.storeId)) {
400
- gridParams.options.gridComplete.call(this, {
401
- gridData: this.gridData,
402
- columns: gridParams.columns,
403
- superGrid: this.$refs.superGrid,
404
- })
405
- }
406
- const newHeight = this.resizeHeight()
407
- if (newHeight) {
408
- this.height = newHeight
409
- }
410
- })
411
- }
412
- },
413
- {
414
- immediate: true,
415
- deep: true,
416
- }
417
- )
418
- },
419
- methods: {
420
- ...superGridService,
421
- ...apis,
422
- ...customFormatter,
423
- getTitleStyle(entity) {
424
- // 九宫格的标题自定义样式
425
- if (this.options && this.options.titleStyle) {
426
- return this.options.titleStyle.call(this, entity)
427
- }
428
- return {width: '100%'}
429
- },
430
- // 获得属性值
431
- getPropValue(type, entity) {
432
- let value = ''
433
- const gridParams = store.get(this.storeId)
434
- if (type === 'content') {
435
- let content = ''
436
- if (isHasOptionFunction('setContent', this.storeId)) {
437
- content = gridParams.options.getContent.call(this, entity)
438
- }
439
- if (content === undefined || content === '') {
440
- if (this.props && this.props.content) {
441
- content = this.objectPropValue(
442
- entity,
443
- this.propCloumns.content,
444
- this.props.content
445
- )
446
- } else if (this.props && this.props.title) {
447
- content = this.objectPropValue(
448
- entity,
449
- this.propCloumns.title,
450
- this.props.title
451
- )
452
- }
453
- }
454
- value = content
455
- } else if (type === 'title') {
456
- let content = ''
457
- if (isHasOptionFunction('setTitle', this.storeId)) {
458
- content = gridParams.options.setTitle.call(this, entity)
459
- }
460
- if (content === undefined || content === '') {
461
- if (this.props && this.props.title) {
462
- content = this.objectPropValue(
463
- entity,
464
- this.propCloumns.title,
465
- this.props.title
466
- )
467
- } else if (this.props && this.props.content) {
468
- content = this.objectPropValue(
469
- entity,
470
- this.propCloumns.content,
471
- this.props.content
472
- )
473
- }
474
- }
475
- value = content
476
- } else if (type === 'subTitle') {
477
- let content = ''
478
- if (isHasOptionFunction('setSubTitle', this.storeId)) {
479
- content = gridParams.options.setSubTitle.call(this, entity)
480
- }
481
- if (content === undefined || content === '') {
482
- if (this.props && this.props.subTitle) {
483
- content = this.objectPropValue(
484
- entity,
485
- this.propCloumns.subTitle,
486
- this.props.subTitle
487
- )
488
- }
489
- }
490
- value = content
491
- }
492
- if (value === undefined) {
493
- value = ''
494
- }
495
- return value
496
- },
497
- resizeHeight() {
498
- const gridParams = store.get(this.storeId)
499
- if (isHasOptionFunction('resizeHeight', this.storeId)) {
500
- let searchHeight = 0
501
- if (this.showSearch === true) {
502
- if (this.$refs.sf) {
503
- // 获得查询区高度
504
- searchHeight = this.$refs.sf.$el.offsetHeight
505
- }
506
- }
507
- return gridParams.options.resizeHeight.call(this, {
508
- code: this.code,
509
- height: this.height,
510
- searchHeight: searchHeight,
511
- })
512
- }
513
- },
514
- enter(index) {
515
- this.seen = true
516
- this.current = index
517
- },
518
- leave() {
519
- this.seen = false
520
- this.current = null
521
- },
522
- initSetting() {
523
- const gridParams = store.get(this.storeId)
524
- if (typeof this.options !== 'undefined') {
525
- Object.assign(gridParams.options, this.options)
526
- } else {
527
- gridParams.options = {}
528
- }
529
- if (this.options && typeof this.options.isHasCreate !== 'undefined') {
530
- this.isHasCreate = this.options.isHasCreate
531
- }
532
- if (this.options && typeof this.options.props !== 'undefined') {
533
- this.props = this.options.props
534
- }
535
- if (this.options && typeof this.options.operations !== 'undefined') {
536
- this.operations = this.options.operations
537
- }
538
- if (
539
- this.options &&
540
- typeof this.options.createPermission !== 'undefined'
541
- ) {
542
- this.createPermission = this.options.createPermission
543
- }
544
- if (this.options && typeof this.options.multiple !== 'undefined') {
545
- this.multiple = this.options.multiple
546
- }
547
- if (
548
- this.options &&
549
- typeof this.options.isShowEnableState !== 'undefined'
550
- ) {
551
- this.isShowEnableState = this.options.isShowEnableState
552
- }
553
- if (this.options && typeof this.options.colSpan !== 'undefined') {
554
- this.colSpan = this.options.colSpan
555
- }
556
- },
557
- // 获得各属性对应的字段配置
558
- getPropColumns() {
559
- if (this.columns && this.columns.length > 0) {
560
- // imageUrl:{column}, content: {column}, title: {}, subTitle:{}
561
- this.propCloumns = {}
562
- this.columns.forEach((column) => {
563
- if (this.props.imageUrl && this.props.imageUrl === column.prop) {
564
- this.propCloumns.imageUrl = column
565
- }
566
- if (this.props.content && this.props.content === column.prop) {
567
- this.propCloumns.content = column
568
- }
569
- if (this.props.title && this.props.title === column.prop) {
570
- this.propCloumns.title = column
571
- }
572
- if (this.props.subTitle && this.props.subTitle === column.prop) {
573
- this.propCloumns.subTitle = column
574
- }
575
- })
576
- }
577
- },
578
- fetchData(searchParam, isSearch) {
579
- return new Promise((resolve, reject) => {
580
- // 刷新页面数据时，把选中集合清空
581
- this.clearSelections()
582
- // 获得各属性对应的字段配置
583
- this.getPropColumns()
584
- this.isLoading = true
585
- this.hasLoadData = false
586
- if (isSearch === undefined || isSearch === false) {
587
- // 如果不是查询时才需要从缓存中获得结果
588
- // 如果是刷新当前列表，则需要获得缓存中的window.sessionStorage
589
- const isRefreshList = window.sessionStorage.getItem(
590
- 'refreshList-' + this.storeId
591
- )
592
- // console.log('fetchData--isRefreshList--', isRefreshList)
593
- if (isRefreshList !== undefined && isRefreshList === 'true') {
594
- const searchParamJson = window.sessionStorage.getItem(
595
- 'searchParam-' + this.storeId
596
- )
597
- // console.log('fetchData--searchParamJson--', searchParamJson)
598
- // console.log('fetchData--pagination--', this.pagination)
599
- if (
600
- searchParamJson !== undefined &&
601
- searchParamJson !== null &&
602
- searchParamJson !== ''
603
- ) {
604
- searchParam = JSON.parse(searchParamJson)
605
- const pagination = searchParam.pagination
606
- if (pagination) {
607
- this.currentPage = pagination.currentPage
608
- this.pagination.pageSize = pagination.pageSize
609
- this.pagination.showTotal = pagination.showTotal
610
- }
611
- this.getInitSearchForm(searchParam.searchForm)
612
- // this.searchFormContent = searchParam.searchForm
613
- }
614
- }
615
- }
616
- window.sessionStorage.removeItem('refreshList-' + this.storeId)
617
- if (searchParam === undefined) {
618
- searchParam = this.getSearchParam()
619
- }
620
- const gridParams = store.get(this.storeId)
621
- let param = searchParam
622
- if (gridParams.options.extraParam) {
623
- param = {
624
- searchParam: searchParam,
625
- }
626
- if (gridParams.options.extraParam) {
627
- for (const paramName in gridParams.options.extraParam) {
628
- param[paramName] = gridParams.options.extraParam[paramName]
629
- }
630
- }
631
- }
632
- // 导出需要这两个参数
633
- gridParams.searchParam = searchParam
634
- gridParams.url = this.url
635
- const requestUrl = this.url
636
- // 缓存查询条件及当前页数
637
- window.sessionStorage.setItem(
638
- 'searchParam-' + this.storeId,
639
- JSON.stringify(param)
640
- )
641
- this.$http
642
- .post(requestUrl, param)
643
- .then((data) => {
644
- // 对数据做序列化，比如：处理xss攻击
645
- if (isHasOptionFunction('gridDataLoaded', this.storeId)) {
646
- const gridData = gridParams.options.gridDataLoaded.call(this, {
647
- gridData: data.data,
648
- columns: gridParams.columns,
649
- })
650
- if (gridData) {
651
- this.gridData = gridData
652
- } else {
653
- this.gridData = data.data
654
- }
655
- } else {
656
- this.gridData = data.data
657
- }
658
- if (!this.gridData) {
659
- this.gridData = []
660
- }
347
+ this.$watch(
348
+ 'hasLoadData',
349
+ function (newVal, oldVal) {
350
+ if (newVal === true) {
351
+ this.$nextTick(() => {
352
+ // this.rowDrop()
353
+ const gridParams = store.get(this.storeId)
354
+ if (isHasOptionFunction('gridComplete', this.storeId)) {
355
+ gridParams.options.gridComplete.call(this, {
356
+ gridData: this.gridData,
357
+ columns: gridParams.columns,
358
+ superGrid: this.$refs.superGrid
359
+ })
360
+ }
361
+ const newHeight = this.resizeHeight()
362
+ if (newHeight) {
363
+ this.height = newHeight
364
+ }
365
+ })
366
+ }
367
+ },
368
+ {
369
+ immediate: true,
370
+ deep: true
371
+ }
372
+ )
373
+ },
374
+ methods: {
375
+ ...superGridService,
376
+ ...apis,
377
+ ...customFormatter,
378
+ getTitleStyle(entity) {
379
+ // 九宫格的标题自定义样式
380
+ if (this.options && this.options.titleStyle) {
381
+ return this.options.titleStyle.call(this, entity)
382
+ }
383
+ return { width: '100%' }
384
+ },
385
+ // 获得属性值
386
+ getPropValue(type, entity) {
387
+ let value = ''
388
+ const gridParams = store.get(this.storeId)
389
+ if (type === 'content') {
390
+ let content = ''
391
+ if (isHasOptionFunction('setContent', this.storeId)) {
392
+ content = gridParams.options.getContent.call(this, entity)
393
+ }
394
+ if (content === undefined || content === '') {
395
+ if (this.props && this.props.content) {
396
+ content = this.objectPropValue(entity, this.propCloumns.content, this.props.content)
397
+ } else if (this.props && this.props.title) {
398
+ content = this.objectPropValue(entity, this.propCloumns.title, this.props.title)
399
+ }
400
+ }
401
+ value = content
402
+ } else if (type === 'title') {
403
+ let content = ''
404
+ if (isHasOptionFunction('setTitle', this.storeId)) {
405
+ content = gridParams.options.setTitle.call(this, entity)
406
+ }
407
+ if (content === undefined || content === '') {
408
+ if (this.props && this.props.title) {
409
+ content = this.objectPropValue(entity, this.propCloumns.title, this.props.title)
410
+ } else if (this.props && this.props.content) {
411
+ content = this.objectPropValue(entity, this.propCloumns.content, this.props.content)
412
+ }
413
+ }
414
+ value = content
415
+ } else if (type === 'subTitle') {
416
+ let content = ''
417
+ if (isHasOptionFunction('setSubTitle', this.storeId)) {
418
+ content = gridParams.options.setSubTitle.call(this, entity)
419
+ }
420
+ if (content === undefined || content === '') {
421
+ if (this.props && this.props.subTitle) {
422
+ content = this.objectPropValue(entity, this.propCloumns.subTitle, this.props.subTitle)
423
+ }
424
+ }
425
+ value = content
426
+ }
427
+ if (value === undefined) {
428
+ value = ''
429
+ }
430
+ return value
431
+ },
432
+ resizeHeight() {
433
+ const gridParams = store.get(this.storeId)
434
+ if (isHasOptionFunction('resizeHeight', this.storeId)) {
435
+ let searchHeight = 0
436
+ if (this.showSearch === true) {
437
+ if (this.$refs.sf) {
438
+ // 获得查询区高度
439
+ searchHeight = this.$refs.sf.$el.offsetHeight
440
+ }
441
+ }
442
+ return gridParams.options.resizeHeight.call(this, {
443
+ code: this.code,
444
+ height: this.height,
445
+ searchHeight: searchHeight
446
+ })
447
+ }
448
+ },
449
+ enter(index) {
450
+ this.seen = true
451
+ this.current = index
452
+ },
453
+ leave() {
454
+ this.seen = false
455
+ this.current = null
456
+ },
457
+ initSetting() {
458
+ const gridParams = store.get(this.storeId)
459
+ if (typeof this.options !== 'undefined') {
460
+ Object.assign(gridParams.options, this.options)
461
+ } else {
462
+ gridParams.options = {}
463
+ }
464
+ if (this.options && typeof this.options.isHasCreate !== 'undefined') {
465
+ this.isHasCreate = this.options.isHasCreate
466
+ }
467
+ if (this.options && typeof this.options.props !== 'undefined') {
468
+ this.props = this.options.props
469
+ }
470
+ if (this.options && typeof this.options.operations !== 'undefined') {
471
+ this.operations = this.options.operations
472
+ }
473
+ if (this.options && typeof this.options.createPermission !== 'undefined') {
474
+ this.createPermission = this.options.createPermission
475
+ }
476
+ if (this.options && typeof this.options.multiple !== 'undefined') {
477
+ this.multiple = this.options.multiple
478
+ }
479
+ if (this.options && typeof this.options.isShowEnableState !== 'undefined') {
480
+ this.isShowEnableState = this.options.isShowEnableState
481
+ }
482
+ if (this.options && typeof this.options.colSpan !== 'undefined') {
483
+ this.colSpan = this.options.colSpan
484
+ }
485
+ },
486
+ // 获得各属性对应的字段配置
487
+ getPropColumns() {
488
+ if (this.columns && this.columns.length > 0) {
489
+ // imageUrl:{column}, content: {column}, title: {}, subTitle:{}
490
+ this.propCloumns = {}
491
+ this.columns.forEach((column) => {
492
+ if (this.props.imageUrl && this.props.imageUrl === column.prop) {
493
+ this.propCloumns.imageUrl = column
494
+ }
495
+ if (this.props.content && this.props.content === column.prop) {
496
+ this.propCloumns.content = column
497
+ }
498
+ if (this.props.title && this.props.title === column.prop) {
499
+ this.propCloumns.title = column
500
+ }
501
+ if (this.props.subTitle && this.props.subTitle === column.prop) {
502
+ this.propCloumns.subTitle = column
503
+ }
504
+ })
505
+ }
506
+ },
507
+ fetchData(searchParam, isSearch) {
508
+ return new Promise((resolve, reject) => {
509
+ // 刷新页面数据时，把选中集合清空
510
+ this.clearSelections()
511
+ // 获得各属性对应的字段配置
512
+ this.getPropColumns()
513
+ this.isLoading = true
514
+ this.hasLoadData = false
515
+ if (isSearch === undefined || isSearch === false) {
516
+ // 如果不是查询时才需要从缓存中获得结果
517
+ // 如果是刷新当前列表，则需要获得缓存中的window.sessionStorage
518
+ const isRefreshList = window.sessionStorage.getItem('refreshList-' + this.storeId)
519
+ // console.log('fetchData--isRefreshList--', isRefreshList)
520
+ if (isRefreshList !== undefined && isRefreshList === 'true') {
521
+ const searchParamJson = window.sessionStorage.getItem('searchParam-' + this.storeId)
522
+ // console.log('fetchData--searchParamJson--', searchParamJson)
523
+ // console.log('fetchData--pagination--', this.pagination)
524
+ if (searchParamJson !== undefined && searchParamJson !== null && searchParamJson !== '') {
525
+ searchParam = JSON.parse(searchParamJson)
526
+ const pagination = searchParam.pagination
527
+ if (pagination) {
528
+ this.currentPage = pagination.currentPage
529
+ this.pagination.pageSize = pagination.pageSize
530
+ this.pagination.showTotal = pagination.showTotal
531
+ }
532
+ this.getInitSearchForm(searchParam.searchForm)
533
+ // this.searchFormContent = searchParam.searchForm
534
+ }
535
+ }
536
+ }
537
+ window.sessionStorage.removeItem('refreshList-' + this.storeId)
538
+ if (searchParam === undefined) {
539
+ searchParam = this.getSearchParam()
540
+ }
541
+ const gridParams = store.get(this.storeId)
542
+ let param = searchParam
543
+ if (gridParams.options.extraParam) {
544
+ param = {
545
+ searchParam: searchParam
546
+ }
547
+ if (gridParams.options.extraParam) {
548
+ for (const paramName in gridParams.options.extraParam) {
549
+ param[paramName] = gridParams.options.extraParam[paramName]
550
+ }
551
+ }
552
+ }
553
+ // 导出需要这两个参数
554
+ gridParams.searchParam = searchParam
555
+ gridParams.url = this.url
556
+ const requestUrl = this.url
557
+ // 缓存查询条件及当前页数
558
+ window.sessionStorage.setItem('searchParam-' + this.storeId, JSON.stringify(param))
559
+ this.$http
560
+ .post(requestUrl, param)
561
+ .then((data) => {
562
+ // 对数据做序列化，比如：处理xss攻击
563
+ if (isHasOptionFunction('gridDataLoaded', this.storeId)) {
564
+ const gridData = gridParams.options.gridDataLoaded.call(this, {
565
+ gridData: data.data,
566
+ columns: gridParams.columns
567
+ })
568
+ if (gridData) {
569
+ this.gridData = gridData
570
+ } else {
571
+ this.gridData = data.data
572
+ }
573
+ } else {
574
+ this.gridData = data.data
575
+ }
576
+ if (!this.gridData) {
577
+ this.gridData = []
578
+ }
661
579
 
662
- if (this.pagination !== null) {
663
- this.pagination.total = data.total
664
- }
580
+ if (this.pagination !== null) {
581
+ this.pagination.total = data.total
582
+ }
665
583
 
666
- gridParams.gridData = this.gridData
667
- // 完成深拷贝，复制一份对象，行编辑时使用
668
- gridParams.orgGridData = [].concat(
669
- JSON.parse(JSON.stringify(this.gridData))
670
- )
584
+ gridParams.gridData = this.gridData
585
+ // 完成深拷贝，复制一份对象，行编辑时使用
586
+ gridParams.orgGridData = [].concat(JSON.parse(JSON.stringify(this.gridData)))
671
587
 
672
- gridParams.pagination = this.pagination
673
- gridParams.loaded = true
674
- this.hasLoadData = true
675
- resolve()
676
- })
677
- .catch((error) => {
678
- if (isHasOptionFunction('loadError', this.storeId)) {
679
- gridParams.options.loadError.call(this, this.code, error)
680
- }
681
- reject(error)
682
- })
683
- })
684
- },
685
- getLength(paramsData) {
686
- if (paramsData && paramsData.length > 5) {
687
- return '(' + paramsData.substring(0, 5) + '...' + ')'
688
- } else if (paramsData) {
689
- return '(' + paramsData + ')'
690
- } else {
691
- return ''
692
- }
693
- },
694
- // 获得初始查询条件对象
695
- getInitSearchForm(searchFormArr) {
696
- const gridParams = store.get(this.storeId)
697
- if (searchFormArr && searchFormArr.length > 0) {
698
- this.searchFormContent = {}
699
- searchFormArr.forEach((item) => {
700
- // 获得的是"isDeleted"
701
- let prop = item.propName
702
- // 获得的是“deleted”
703
- const columnProp = item.columnProp
704
- const dataType = item.dataType
705
- if (dataType && dataType === 'BOOLEAN') {
706
- prop = columnProp
707
- }
708
- this.initSearchProps.push(prop)
709
- const propValue = item.propValue
710
- if (prop.indexOf('.') > 0) {
711
- // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
712
- addDynamicProp(this.searchFormContent, prop, propValue)
713
- } else {
714
- this.searchFormContent[prop] = propValue
715
- }
716
- })
717
- gridParams.searchForm = searchFormArr
718
- // 调用查询api方法，该方法中调用了@showSearch方法，用于控制“查询”按钮改名为“取消查询”
719
- this.showSearchForm()
720
- } else {
721
- gridParams.searchForm = null
722
- }
723
- },
724
- showDemo() {
725
- this.isLoading = true
726
- this.$http
727
- .get(this.url)
728
- .then((data) => {
729
- Object.assign(this, data)
730
- const gridParams = store.get(this.storeId)
588
+ gridParams.pagination = this.pagination
589
+ gridParams.loaded = true
590
+ this.hasLoadData = true
591
+ resolve()
592
+ })
593
+ .catch((error) => {
594
+ if (isHasOptionFunction('loadError', this.storeId)) {
595
+ gridParams.options.loadError.call(this, this.code, error)
596
+ }
597
+ reject(error)
598
+ })
599
+ })
600
+ },
601
+ getLength(paramsData) {
602
+ if (paramsData && paramsData.length > 5) {
603
+ return '(' + paramsData.substring(0, 5) + '...' + ')'
604
+ } else if (paramsData) {
605
+ return '(' + paramsData + ')'
606
+ } else {
607
+ return ''
608
+ }
609
+ },
610
+ // 获得初始查询条件对象
611
+ getInitSearchForm(searchFormArr) {
612
+ const gridParams = store.get(this.storeId)
613
+ if (searchFormArr && searchFormArr.length > 0) {
614
+ this.searchFormContent = {}
615
+ searchFormArr.forEach((item) => {
616
+ // 获得的是"isDeleted"
617
+ let prop = item.propName
618
+ // 获得的是“deleted”
619
+ const columnProp = item.columnProp
620
+ const dataType = item.dataType
621
+ if (dataType && dataType === 'BOOLEAN') {
622
+ prop = columnProp
623
+ }
624
+ this.initSearchProps.push(prop)
625
+ const propValue = item.propValue
626
+ if (prop.indexOf('.') > 0) {
627
+ // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
628
+ addDynamicProp(this.searchFormContent, prop, propValue)
629
+ } else {
630
+ this.searchFormContent[prop] = propValue
631
+ }
632
+ })
633
+ gridParams.searchForm = searchFormArr
634
+ // 调用查询api方法，该方法中调用了@showSearch方法，用于控制“查询”按钮改名为“取消查询”
635
+ this.showSearchForm()
636
+ } else {
637
+ gridParams.searchForm = null
638
+ }
639
+ },
640
+ showDemo() {
641
+ this.isLoading = true
642
+ this.$http
643
+ .get(this.url)
644
+ .then((data) => {
645
+ Object.assign(this, data)
646
+ const gridParams = store.get(this.storeId)
731
647
 
732
- gridParams.listCode = this.code
648
+ gridParams.listCode = this.code
733
649
 
734
- gridParams.columns = this.columns
735
- if (gridParams.columns && this.options.dynamicColumns) {
736
- for (var i = 0; i < this.options.dynamicColumns.length; i++) {
737
- this.options.dynamicColumns[i].dynamic = true
738
- gridParams.columns.push(this.options.dynamicColumns[i])
739
- }
740
- }
741
- gridParams.lineEdit = this.lineEdit
742
- gridParams.basicInfo = this.basicInfo
743
- gridParams.pagination = this.pagination
744
- gridParams.query = this.query
650
+ gridParams.columns = this.columns
651
+ if (gridParams.columns && this.options.dynamicColumns) {
652
+ for (var i = 0; i < this.options.dynamicColumns.length; i++) {
653
+ this.options.dynamicColumns[i].dynamic = true
654
+ gridParams.columns.push(this.options.dynamicColumns[i])
655
+ }
656
+ }
657
+ gridParams.lineEdit = this.lineEdit
658
+ gridParams.basicInfo = this.basicInfo
659
+ gridParams.pagination = this.pagination
660
+ gridParams.query = this.query
745
661
 
746
- this.gridData = data.gridData
747
- // 对数据做序列化，比如：处理xss攻击
748
- if (isHasOptionFunction('gridDataLoaded', this.storeId)) {
749
- const gridData = gridParams.options.gridDataLoaded.call(
750
- this,
751
- data.gridData
752
- )
753
- if (gridData) {
754
- this.gridData = gridData
755
- } else {
756
- this.gridData = data.gridData
757
- }
758
- } else {
759
- this.gridData = data.gridData
760
- }
662
+ this.gridData = data.gridData
663
+ // 对数据做序列化，比如：处理xss攻击
664
+ if (isHasOptionFunction('gridDataLoaded', this.storeId)) {
665
+ const gridData = gridParams.options.gridDataLoaded.call(this, data.gridData)
666
+ if (gridData) {
667
+ this.gridData = gridData
668
+ } else {
669
+ this.gridData = data.gridData
670
+ }
671
+ } else {
672
+ this.gridData = data.gridData
673
+ }
761
674
 
762
- if (this.pagination != null) {
763
- this.pagination.total = data.total
764
- }
765
- if (!this.gridData) {
766
- this.gridData = []
767
- }
768
- gridParams.gridData = this.gridData
769
- // 完成深拷贝，复制一份对象，行编辑时使用
770
- gridParams.orgGridData = [].concat(
771
- JSON.parse(JSON.stringify(this.gridData))
772
- )
773
- gridParams.pagination = this.pagination
675
+ if (this.pagination != null) {
676
+ this.pagination.total = data.total
677
+ }
678
+ if (!this.gridData) {
679
+ this.gridData = []
680
+ }
681
+ gridParams.gridData = this.gridData
682
+ // 完成深拷贝，复制一份对象，行编辑时使用
683
+ gridParams.orgGridData = [].concat(JSON.parse(JSON.stringify(this.gridData)))
684
+ gridParams.pagination = this.pagination
774
685
 
775
- if (isHasOptionFunction('gridComplete', this.storeId)) {
776
- gridParams.options.gridComplete.call(
777
- this,
778
- this.gridData,
779
- gridParams.columns
780
- )
781
- }
782
- })
783
- .catch((error) => {
784
- if (isHasOptionFunction('loadError', this.storeId)) {
785
- const gridParams = store.get(this.storeId)
786
- gridParams.options.loadError.call(this, this.code, error)
787
- }
788
- })
789
- },
790
- search(searchForm) {
791
- const vm = this
792
- return new Promise((resolve, reject) => {
793
- const gridParams = store.get(vm.storeId)
794
- if (typeof searchForm !== 'undefined' && searchForm !== null) {
795
- gridParams.searchForm = searchForm
796
- } else {
797
- gridParams.searchForm = null
798
- }
686
+ if (isHasOptionFunction('gridComplete', this.storeId)) {
687
+ gridParams.options.gridComplete.call(this, this.gridData, gridParams.columns)
688
+ }
689
+ })
690
+ .catch((error) => {
691
+ if (isHasOptionFunction('loadError', this.storeId)) {
692
+ const gridParams = store.get(this.storeId)
693
+ gridParams.options.loadError.call(this, this.code, error)
694
+ }
695
+ })
696
+ },
697
+ search(searchForm) {
698
+ const vm = this
699
+ return new Promise((resolve, reject) => {
700
+ const gridParams = store.get(vm.storeId)
701
+ if (typeof searchForm !== 'undefined' && searchForm !== null) {
702
+ gridParams.searchForm = searchForm
703
+ } else {
704
+ gridParams.searchForm = null
705
+ }
799
706
 
800
- vm.fetchData(vm.getSearchParam(), true)
801
- .then((data) => {
802
- if (
803
- gridParams.options !== undefined &&
804
- gridParams.options.isHiddenSearchForm !== undefined &&
805
- gridParams.options.isHiddenSearchForm === true
806
- ) {
807
- // 查询时，是否隐藏查询区域，默认是不隐藏查询区域
808
- vm.showSearch = false
809
- $emit(vm, 'cancel-search')
810
- }
811
- if (vm.$refs.sf) {
812
- vm.$refs.sf.loading = false
813
- }
814
- resolve(data)
815
- })
816
- .catch((error) => {
817
- if (vm.$refs.sf) {
818
- vm.$refs.sf.loading = false
819
- }
820
- reject(error)
821
- })
822
- })
823
- },
824
- getSearchParam() {
825
- const searchParam = {
826
- code: this.code,
827
- }
828
- const gridParams = store.get(this.storeId)
829
- if (this.pagination !== null) {
830
- const pagination = {
831
- currentPage: this.currentPage,
832
- pageSize: this.pagination.pageSize,
833
- showTotal: this.pagination.showTotal,
834
- }
835
- if (this.pageSize !== null) {
836
- // 表示更改了每页显示的数据条数
837
- pagination.pageSize = this.pageSize
838
- }
839
- searchParam.pagination = pagination
840
- }
841
- // 排序信息
842
- if (this.sortInfo !== null) {
843
- // 表示更改了排序信息
844
- searchParam.sorts = this.sortInfo
845
- }
846
- if (this.mergeFields && this.mergeFields.length > 0) {
847
- if (!searchParam.sorts) {
848
- searchParam.sorts = []
849
- }
850
- const mergeFieldsArr = []
851
- for (const mergeField of this.mergeFields) {
852
- let flag = true
853
- for (const so of searchParam.sorts) {
854
- if (so.prop === mergeField) {
855
- flag = false
856
- break
857
- }
858
- }
859
- if (flag) {
860
- mergeFieldsArr.push({
861
- prop: mergeField,
862
- order: 'ascending',
863
- })
864
- }
865
- }
866
- mergeFieldsArr.push(...searchParam.sorts)
867
- searchParam.sorts = mergeFieldsArr
868
- }
869
- // 是否有初始过滤条件
870
- if (
871
- gridParams.options &&
872
- typeof gridParams.options.initSearchForm !== 'undefined'
873
- ) {
874
- searchParam.initSearchForm = gridParams.options.initSearchForm
875
- }
876
- if (typeof gridParams.searchForm !== 'undefined') {
877
- searchParam.searchForm = gridParams.searchForm
878
- } else {
879
- searchParam.searchForm = []
880
- }
881
- return searchParam
882
- },
883
- handleSizeChange(val) {
884
- this.pageSize = val
885
- this.fetchData(this.getSearchParam())
886
- },
887
- handleCurrentChange(val) {
888
- this.fetchData(this.getSearchParam())
889
- },
890
- handleSortChange({column, prop, order}) {
891
- if (prop !== null) {
892
- // 当点击第3次时，prop会是空，表示清空排序字段，还原原顺序
893
- this.sortInfo = [
894
- {
895
- prop: prop,
896
- order: order,
897
- },
898
- ]
899
- } else {
900
- this.sortInfo = null
901
- }
902
- this.fetchData(this.getSearchParam())
903
- $emit(this, 'sort-change', {column, prop, order})
904
- },
905
- resetSearch() {
906
- this.search(null, false)
907
- },
908
- // 新建事件
909
- add() {
910
- $emit(this, 'add')
911
- },
912
- // 操作按钮的点击事件
913
- buttonClick(event, data) {
914
- if (event) {
915
- if (typeof event === 'function') {
916
- event.call(this, data)
917
- } else {
918
- $emit(this, event, data)
919
- }
920
- }
921
- },
922
- // 点击内容区域的事件
923
- clickContent(data) {
924
- this.changeSelect(data)
925
- $emit(this, 'click', data)
926
- },
927
- // 格子拖拽
928
- rowDrop() {
929
- if (this.urlToSaveOrder) {
930
- let urlToSaveOrder = this.urlToSaveOrder
931
- if (
932
- urlToSaveOrder.indexOf('http:') < 0 ||
933
- urlToSaveOrder.indexOf('https:') < 0
934
- ) {
935
- // 表示是相对路径，需要拼接全路径
936
- let baseURL = window.$vueApp.config.globalProperties.baseURL
937
- if (baseURL.lastIndexOf('/') === baseURL.length - 1) {
938
- // 表示以斜线结尾
939
- // 去掉斜线
940
- baseURL = baseURL.substring(0, baseURL.length - 1)
941
- }
942
- if (urlToSaveOrder.indexOf('/') > 0) {
943
- // 表示不是以斜线开头，需要开头加“/”
944
- urlToSaveOrder = '/' + urlToSaveOrder
945
- }
946
- urlToSaveOrder = baseURL + urlToSaveOrder
947
- }
948
- const tbody = document.querySelector('#' + this.gridId + ' .el-row')
949
- if (tbody != null) {
950
- const vm = this
951
- Sortable.create(tbody, {
952
- draggable: '.col-content',
953
- onEnd({newIndex, oldIndex}) {
954
- const addCardId = document.querySelector(
955
- '#' + vm.gridId + ' #_addCardId_'
956
- )
957
- if (addCardId != null) {
958
- // 表示存在新建区域，则序号需要减1
959
- if (oldIndex > 0) {
960
- oldIndex = oldIndex - 1
961
- }
962
- if (newIndex > 0) {
963
- newIndex = newIndex - 1
964
- }
965
- }
966
- const params = {
967
- oldIndex: oldIndex,
968
- newIndex: newIndex,
969
- gridData: vm.gridData,
970
- }
971
- vm.$http.post(urlToSaveOrder, params).then((data) => {
972
- const currRow = vm.gridData.splice(oldIndex, 1)[0]
973
- vm.gridData.splice(newIndex, 0, currRow)
974
- vm.refresh().then(() => {
975
- $emit(vm, 'afterDrag', params)
976
- })
977
- })
978
- },
979
- })
980
- }
981
- }
982
- },
983
- // 多选按钮的change事件
984
- changeChecked(label, index) {
985
- const entity = this.gridData[index]
986
- if ((label + '').indexOf('false-') >= 0) {
987
- // 表示取消勾选记录
988
- this.unselect(entity)
989
- } else {
990
- // 表示勾选记录
991
- this.select(entity)
992
- }
993
- },
994
- unselect(entity) {
995
- const id = entity.id
996
- const index = this.selectionIds.indexOf(id)
997
- if (index > -1) {
998
- this.selections.splice(index, 1)
999
- this.selectionIds.splice(index, 1)
1000
- }
1001
- $emit(this, 'unselect', entity, this.selections)
1002
- this.selectionModels['select' + id] = 'false-' + id
1003
- // console.log('unselect---this.selections=', this.selections)
1004
- },
1005
- select(entity) {
1006
- const id = entity.id
1007
- if (this.selectionIds.indexOf(id) < 0) {
1008
- this.selectionIds[this.selectionIds.length] = id
1009
- this.selections[this.selections.length] = entity
1010
- }
1011
- $emit(this, 'select', entity, this.selections)
1012
- this.selectionModels['select' + id] = id
1013
- // console.log('select---this.selections=', this.selections)
1014
- },
1015
- // 单选按钮的change事件
1016
- changeSelectWhenRadio(label, index) {
1017
- const entity = this.gridData[index]
1018
- this.selectionIds = []
1019
- this.selections = []
1020
- this.selectionModels = {}
1021
- this.select(entity)
1022
- },
1023
- changeSelect(data) {
1024
- const id = data.id
1025
- if (this.multiple === true) {
1026
- // 多选时
1027
- if (this.selectionIds && this.selectionIds.indexOf(id) >= 0) {
1028
- // 表示需要取消选中
1029
- this.unselect(data)
1030
- } else {
1031
- // 表示需要选中
1032
- this.select(data)
1033
- }
1034
- } else {
1035
- // 单选时
1036
- this.currentId = id
1037
- this.selectionIds = []
1038
- this.selections = []
1039
- this.selectionModels = {}
1040
- this.select(data)
1041
- }
1042
- },
1043
- isShowButton(entity, button) {
1044
- const val = this.isShowButtonFun(entity, button)
1045
- if (val === undefined) {
1046
- return true
1047
- }
1048
- return val
1049
- },
1050
- // 是否显示启用禁用按钮
1051
- showEnableButton(entity) {
1052
- const gridParams = store.get(this.storeId)
1053
- if (isHasOptionFunction('showEnableButton', this.storeId)) {
1054
- return gridParams.options.showEnableButton.call(this, entity)
1055
- }
1056
- return false
1057
- },
1058
- // 启用禁用按钮显示状态
1059
- changeState(entity) {
1060
- const gridParams = store.get(this.storeId)
1061
- if (isHasOptionFunction('changeState', this.storeId)) {
1062
- return gridParams.options.changeState.call(this, entity)
1063
- }
1064
- return false
1065
- },
1066
- },
1067
- emits: [
1068
- 'sort-change',
1069
- ,
1070
- 'click',
1071
- 'afterDrag',
1072
- 'unselect',
1073
- 'select',
1074
- 'cancel-search',
1075
- 'add',
1076
- ,
1077
- ],
707
+ vm.fetchData(vm.getSearchParam(), true)
708
+ .then((data) => {
709
+ if (
710
+ gridParams.options !== undefined &&
711
+ gridParams.options.isHiddenSearchForm !== undefined &&
712
+ gridParams.options.isHiddenSearchForm === true
713
+ ) {
714
+ // 查询时，是否隐藏查询区域，默认是不隐藏查询区域
715
+ vm.showSearch = false
716
+ $emit(vm, 'cancel-search')
717
+ }
718
+ if (vm.$refs.sf) {
719
+ vm.$refs.sf.loading = false
720
+ }
721
+ resolve(data)
722
+ })
723
+ .catch((error) => {
724
+ if (vm.$refs.sf) {
725
+ vm.$refs.sf.loading = false
726
+ }
727
+ reject(error)
728
+ })
729
+ })
730
+ },
731
+ getSearchParam() {
732
+ const searchParam = {
733
+ code: this.code
734
+ }
735
+ const gridParams = store.get(this.storeId)
736
+ if (this.pagination !== null) {
737
+ const pagination = {
738
+ currentPage: this.currentPage,
739
+ pageSize: this.pagination.pageSize,
740
+ showTotal: this.pagination.showTotal
741
+ }
742
+ if (this.pageSize !== null) {
743
+ // 表示更改了每页显示的数据条数
744
+ pagination.pageSize = this.pageSize
745
+ }
746
+ searchParam.pagination = pagination
747
+ }
748
+ // 排序信息
749
+ if (this.sortInfo !== null) {
750
+ // 表示更改了排序信息
751
+ searchParam.sorts = this.sortInfo
752
+ }
753
+ if (this.mergeFields && this.mergeFields.length > 0) {
754
+ if (!searchParam.sorts) {
755
+ searchParam.sorts = []
756
+ }
757
+ const mergeFieldsArr = []
758
+ for (const mergeField of this.mergeFields) {
759
+ let flag = true
760
+ for (const so of searchParam.sorts) {
761
+ if (so.prop === mergeField) {
762
+ flag = false
763
+ break
764
+ }
765
+ }
766
+ if (flag) {
767
+ mergeFieldsArr.push({
768
+ prop: mergeField,
769
+ order: 'ascending'
770
+ })
771
+ }
772
+ }
773
+ mergeFieldsArr.push(...searchParam.sorts)
774
+ searchParam.sorts = mergeFieldsArr
775
+ }
776
+ // 是否有初始过滤条件
777
+ if (gridParams.options && typeof gridParams.options.initSearchForm !== 'undefined') {
778
+ searchParam.initSearchForm = gridParams.options.initSearchForm
779
+ }
780
+ if (typeof gridParams.searchForm !== 'undefined') {
781
+ searchParam.searchForm = gridParams.searchForm
782
+ } else {
783
+ searchParam.searchForm = []
784
+ }
785
+ return searchParam
786
+ },
787
+ handleSizeChange(val) {
788
+ this.pageSize = val
789
+ this.fetchData(this.getSearchParam())
790
+ },
791
+ handleCurrentChange(val) {
792
+ this.fetchData(this.getSearchParam())
793
+ },
794
+ handleSortChange({ column, prop, order }) {
795
+ if (prop !== null) {
796
+ // 当点击第3次时，prop会是空，表示清空排序字段，还原原顺序
797
+ this.sortInfo = [
798
+ {
799
+ prop: prop,
800
+ order: order
801
+ }
802
+ ]
803
+ } else {
804
+ this.sortInfo = null
805
+ }
806
+ this.fetchData(this.getSearchParam())
807
+ $emit(this, 'sort-change', { column, prop, order })
808
+ },
809
+ resetSearch() {
810
+ this.search(null, false)
811
+ },
812
+ // 新建事件
813
+ add() {
814
+ $emit(this, 'add')
815
+ },
816
+ // 操作按钮的点击事件
817
+ buttonClick(event, data) {
818
+ if (event) {
819
+ if (typeof event === 'function') {
820
+ event.call(this, data)
821
+ } else {
822
+ $emit(this, event, data)
823
+ }
824
+ }
825
+ },
826
+ // 点击内容区域的事件
827
+ clickContent(data) {
828
+ this.changeSelect(data)
829
+ $emit(this, 'click', data)
830
+ },
831
+ // 格子拖拽
832
+ rowDrop() {
833
+ if (this.urlToSaveOrder) {
834
+ let urlToSaveOrder = this.urlToSaveOrder
835
+ if (urlToSaveOrder.indexOf('http:') < 0 || urlToSaveOrder.indexOf('https:') < 0) {
836
+ // 表示是相对路径，需要拼接全路径
837
+ let baseURL = window.$vueApp.config.globalProperties.baseURL
838
+ if (baseURL.lastIndexOf('/') === baseURL.length - 1) {
839
+ // 表示以斜线结尾
840
+ // 去掉斜线
841
+ baseURL = baseURL.substring(0, baseURL.length - 1)
842
+ }
843
+ if (urlToSaveOrder.indexOf('/') > 0) {
844
+ // 表示不是以斜线开头，需要开头加“/”
845
+ urlToSaveOrder = '/' + urlToSaveOrder
846
+ }
847
+ urlToSaveOrder = baseURL + urlToSaveOrder
848
+ }
849
+ const tbody = document.querySelector('#' + this.gridId + ' .el-row')
850
+ if (tbody != null) {
851
+ const vm = this
852
+ Sortable.create(tbody, {
853
+ draggable: '.col-content',
854
+ onEnd({ newIndex, oldIndex }) {
855
+ const addCardId = document.querySelector('#' + vm.gridId + ' #_addCardId_')
856
+ if (addCardId != null) {
857
+ // 表示存在新建区域，则序号需要减1
858
+ if (oldIndex > 0) {
859
+ oldIndex = oldIndex - 1
860
+ }
861
+ if (newIndex > 0) {
862
+ newIndex = newIndex - 1
863
+ }
864
+ }
865
+ const params = {
866
+ oldIndex: oldIndex,
867
+ newIndex: newIndex,
868
+ gridData: vm.gridData
869
+ }
870
+ vm.$http.post(urlToSaveOrder, params).then((data) => {
871
+ const currRow = vm.gridData.splice(oldIndex, 1)[0]
872
+ vm.gridData.splice(newIndex, 0, currRow)
873
+ vm.refresh().then(() => {
874
+ $emit(vm, 'afterDrag', params)
875
+ })
876
+ })
877
+ }
878
+ })
879
+ }
880
+ }
881
+ },
882
+ // 多选按钮的change事件
883
+ changeChecked(label, index) {
884
+ const entity = this.gridData[index]
885
+ if ((label + '').indexOf('false-') >= 0) {
886
+ // 表示取消勾选记录
887
+ this.unselect(entity)
888
+ } else {
889
+ // 表示勾选记录
890
+ this.select(entity)
891
+ }
892
+ },
893
+ unselect(entity) {
894
+ const id = entity.id
895
+ const index = this.selectionIds.indexOf(id)
896
+ if (index > -1) {
897
+ this.selections.splice(index, 1)
898
+ this.selectionIds.splice(index, 1)
899
+ }
900
+ $emit(this, 'unselect', entity, this.selections)
901
+ this.selectionModels['select' + id] = 'false-' + id
902
+ // console.log('unselect---this.selections=', this.selections)
903
+ },
904
+ select(entity) {
905
+ const id = entity.id
906
+ if (this.selectionIds.indexOf(id) < 0) {
907
+ this.selectionIds[this.selectionIds.length] = id
908
+ this.selections[this.selections.length] = entity
909
+ }
910
+ $emit(this, 'select', entity, this.selections)
911
+ this.selectionModels['select' + id] = id
912
+ // console.log('select---this.selections=', this.selections)
913
+ },
914
+ // 单选按钮的change事件
915
+ changeSelectWhenRadio(label, index) {
916
+ const entity = this.gridData[index]
917
+ this.selectionIds = []
918
+ this.selections = []
919
+ this.selectionModels = {}
920
+ this.select(entity)
921
+ },
922
+ changeSelect(data) {
923
+ const id = data.id
924
+ if (this.multiple === true) {
925
+ // 多选时
926
+ if (this.selectionIds && this.selectionIds.indexOf(id) >= 0) {
927
+ // 表示需要取消选中
928
+ this.unselect(data)
929
+ } else {
930
+ // 表示需要选中
931
+ this.select(data)
932
+ }
933
+ } else {
934
+ // 单选时
935
+ this.currentId = id
936
+ this.selectionIds = []
937
+ this.selections = []
938
+ this.selectionModels = {}
939
+ this.select(data)
940
+ }
941
+ },
942
+ isShowButton(entity, button) {
943
+ const val = this.isShowButtonFun(entity, button)
944
+ if (val === undefined) {
945
+ return true
946
+ }
947
+ return val
948
+ },
949
+ // 是否显示启用禁用按钮
950
+ showEnableButton(entity) {
951
+ const gridParams = store.get(this.storeId)
952
+ if (isHasOptionFunction('showEnableButton', this.storeId)) {
953
+ return gridParams.options.showEnableButton.call(this, entity)
954
+ }
955
+ return false
956
+ },
957
+ // 启用禁用按钮显示状态
958
+ changeState(entity) {
959
+ const gridParams = store.get(this.storeId)
960
+ if (isHasOptionFunction('changeState', this.storeId)) {
961
+ return gridParams.options.changeState.call(this, entity)
962
+ }
963
+ return false
964
+ }
965
+ },
966
+ emits: ['sort-change', , 'click', 'afterDrag', 'unselect', 'select', 'cancel-search', 'add', ,]
1078
967
  }
1079
968
  </script>
1080
969
 
1081
970
  <style lang="scss" rel="stylesheet/scss" scoped>
1082
971
  .nine-grid-area {
1083
- padding: 10px;
972
+ padding: 10px;
1084
973
 
1085
- .el-row {
1086
- margin-bottom: 20px;
974
+ .el-row {
975
+ margin-bottom: 20px;
1087
976
 
1088
- &:last-child {
1089
- margin-bottom: 0;
1090
- }
1091
- }
977
+ &:last-child {
978
+ margin-bottom: 0;
979
+ }
980
+ }
1092
981
 
1093
- .el-col-5 {
1094
- width: 20%;
1095
- max-width: 20%;
1096
- padding-left: 12px;
1097
- padding-right: 12px;
1098
- }
982
+ .el-col-5 {
983
+ width: 20%;
984
+ max-width: 20%;
985
+ padding-left: 12px;
986
+ padding-right: 12px;
987
+ }
1099
988
 
1100
- .el-col {
1101
- border-radius: 4px;
1102
- margin-bottom: 10px;
1103
- }
989
+ .el-col {
990
+ border-radius: 4px;
991
+ margin-bottom: 10px;
992
+ }
1104
993
 
1105
- .name {
1106
- font-size: 12px;
1107
- color: #555;
1108
- float: left;
1109
- width: 80%;
1110
- text-align: left;
1111
- }
994
+ .name {
995
+ font-size: 12px;
996
+ color: #555;
997
+ float: left;
998
+ width: 80%;
999
+ text-align: left;
1000
+ }
1112
1001
 
1113
- .bottom {
1114
- // margin-top: 13px;
1115
- line-height: 13px;
1116
- // background: aquamarine;
1117
- }
1002
+ .bottom {
1003
+ // margin-top: 13px;
1004
+ line-height: 13px;
1005
+ // background: aquamarine;
1006
+ }
1118
1007
 
1119
- .state {
1120
- font-size: 12px;
1121
- margin-top: 1.5px;
1122
- float: right;
1123
- line-height: 1;
1124
- display: flex;
1125
- align-items: right;
1126
- color: #999;
1127
- width: 20%;
1128
- text-align: right;
1129
- }
1008
+ .state {
1009
+ font-size: 12px;
1010
+ margin-top: 1.5px;
1011
+ float: right;
1012
+ line-height: 1;
1013
+ display: flex;
1014
+ align-items: right;
1015
+ color: #999;
1016
+ width: 20%;
1017
+ text-align: right;
1018
+ }
1130
1019
 
1131
- .image {
1132
- width: 100%;
1133
- display: block;
1134
- height: 200px;
1135
- }
1020
+ .image {
1021
+ width: 100%;
1022
+ display: block;
1023
+ height: 200px;
1024
+ }
1136
1025
 
1137
- .clearfix:before,
1138
- .clearfix:after {
1139
- display: table;
1140
- content: '';
1141
- }
1026
+ .clearfix:before,
1027
+ .clearfix:after {
1028
+ display: table;
1029
+ content: '';
1030
+ }
1142
1031
 
1143
- .clearfix:after {
1144
- clear: both;
1145
- }
1032
+ .clearfix:after {
1033
+ clear: both;
1034
+ }
1146
1035
 
1147
- .input-with-select {
1148
- // background-color: #fff;
1149
- width: 200px;
1150
- float: right;
1151
- }
1036
+ .input-with-select {
1037
+ // background-color: #fff;
1038
+ width: 200px;
1039
+ float: right;
1040
+ }
1152
1041
 
1153
- .popContainer {
1154
- position: absolute;
1155
- width: 23.15%;
1156
- display: block;
1157
- height: 200px;
1158
- //background: rgba(0, 0, 0, 0.5);
1159
- text-align: right;
1160
- }
1042
+ .popContainer {
1043
+ position: absolute;
1044
+ width: 23.15%;
1045
+ display: block;
1046
+ height: 200px;
1047
+ //background: rgba(0, 0, 0, 0.5);
1048
+ text-align: right;
1049
+ }
1161
1050
 
1162
- .fade-enter-active,
1163
- .fade-leave-active {
1164
- transition: opacity 0.5s;
1165
- }
1051
+ .fade-enter-active,
1052
+ .fade-leave-active {
1053
+ transition: opacity 0.5s;
1054
+ }
1166
1055
 
1167
- .fade-enter,
1168
- .fade-leave-to {
1169
- opacity: 0;
1170
- }
1056
+ .fade-enter,
1057
+ .fade-leave-to {
1058
+ opacity: 0;
1059
+ }
1171
1060
 
1172
- .icons {
1173
- color: #adb5bd;
1174
- margin: 10px 10px 0px 0px;
1175
- cursor: pointer;
1176
- }
1061
+ .icons {
1062
+ color: #adb5bd;
1063
+ margin: 10px 10px 0px 0px;
1064
+ cursor: pointer;
1065
+ }
1177
1066
 
1178
- .release-status {
1179
- display: block;
1180
- width: 8px;
1181
- height: 8px;
1182
- margin-right: 8px;
1183
- border-radius: 100%;
1184
- }
1067
+ .release-status {
1068
+ display: block;
1069
+ width: 8px;
1070
+ height: 8px;
1071
+ margin-right: 8px;
1072
+ border-radius: 100%;
1073
+ }
1185
1074
 
1186
- .add-screen {
1187
- display: flex;
1188
- flex-direction: column;
1189
- justify-content: center;
1190
- align-items: center;
1191
- cursor: pointer;
1192
- height: 160px;
1193
- // background-color: #fff;
1194
- // border: 1px solid #7693f5;
1195
- // box-shadow: 0 2px 8px 0 rgba(104,130,218,.4);
1196
- color: #666666;
1197
- font-family: Source Han Sans CN;
1198
- font-weight: 400;
1199
- font-size: 14px;
1200
- line-height: 14px;
1201
- letter-spacing: 0px;
1202
- text-align: left;
1203
- }
1075
+ .add-screen {
1076
+ display: flex;
1077
+ flex-direction: column;
1078
+ justify-content: center;
1079
+ align-items: center;
1080
+ cursor: pointer;
1081
+ height: 160px;
1082
+ // background-color: #fff;
1083
+ // border: 1px solid #7693f5;
1084
+ // box-shadow: 0 2px 8px 0 rgba(104,130,218,.4);
1085
+ color: #666666;
1086
+ font-family: Source Han Sans CN;
1087
+ font-weight: 400;
1088
+ font-size: 14px;
1089
+ line-height: 14px;
1090
+ letter-spacing: 0px;
1091
+ text-align: left;
1092
+ }
1204
1093
 
1205
- .el-divider--horizontal {
1206
- margin: 5px 0;
1207
- }
1094
+ .el-divider--horizontal {
1095
+ margin: 5px 0;
1096
+ }
1208
1097
 
1209
- .button-style {
1210
- margin-top: 28px;
1211
- color: #606266;
1212
- font-family: Source Han Sans CN;
1213
- font-weight: 400;
1214
- font-size: 14px;
1215
- //line-height: 14px;
1216
- //letter-spacing: 0px;
1217
- //text-align: left;
1218
- display: grid;
1219
- grid-template-columns: 20% 80%;
1220
- }
1098
+ .button-style {
1099
+ margin-top: 28px;
1100
+ color: #606266;
1101
+ font-family: Source Han Sans CN;
1102
+ font-weight: 400;
1103
+ font-size: 14px;
1104
+ //line-height: 14px;
1105
+ //letter-spacing: 0px;
1106
+ //text-align: left;
1107
+ display: grid;
1108
+ grid-template-columns: 20% 80%;
1109
+ }
1221
1110
  }
1222
1111
  </style>