Blame view

ant-design-vue-jeecg/src/views/jeecg/JeecgDemoList.vue 13.1 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="用户名">
              <j-input placeholder="请输入名称模糊查询" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="年龄">
肖超群 authored
16
17
18
              <!-- <a-input placeholder="请输入名称查询" v-model="queryParam.age"></a-input>-->
              <a-input placeholder="最小年龄" type="ge" v-model="queryParam.age_begin"
                       style="width:calc(50% - 15px);"></a-input>
肖超群 authored
19
              <span class="group-query-strig">~</span>
肖超群 authored
20
21
              <a-input placeholder="最大年龄" type="le" v-model="queryParam.age_end"
                       style="width:calc(50% - 15px);"></a-input>
肖超群 authored
22
23
24
25
26
27
28
29
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="生日">
                <a-range-picker v-model="queryParam.birthdayRange"
                                format="YYYY-MM-DD"
                                :placeholder="['开始时间', '结束时间']"
肖超群 authored
30
                                @change="onBirthdayChange"/>
肖超群 authored
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="性别">
                <j-dict-select-tag v-model="queryParam.sex" placeholder="请选择性别" dictCode="sex"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="选择用户">
                <j-dict-select-tag v-model="queryParam.id" placeholder="请选择用户" dictCode="demo,name,id"/>
              </a-form-item>
            </a-col>
          </template>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
46
47
              <a-button type="primary" @click="searchQuery" icon="search">{{ $t('button.search') }}</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('button.reset') }}</a-button>
肖超群 authored
48
              <a @click="handleToggleSearch" style="margin-left: 8px">
49
                {{ toggleSearchStatus ?  $t('button.collapse') : $t('button.expand') }}
肖超群 authored
50
51
52
53
54
55
56
57
58
59
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
60
      <a-button @click="handleAdd" type="primary" icon="plus">{{ $t('button.new') }}</a-button>
肖超群 authored
61
62
      <a-button type="primary" icon="plus" @click="jump">创建单据</a-button>
      <a-button type="primary" icon="plus" @click="onetomany">一对多</a-button>
63
      <a-button type="primary" icon="download" @click="handleExportXls('单表示例')">{{ $t('button.expand') }}</a-button>
肖超群 authored
64
65
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                @change="handleImportExcel">
66
        <a-button type="primary" icon="import">{{ $t('button.import') }}</a-button>
肖超群 authored
67
68
69
70
71
72
      </a-upload>
      <!-- 高级查询区域 -->
      <j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
73
            <a-icon type="delete"/>{{$t('button.delete')}}
肖超群 authored
74
75
          </a-menu-item>
        </a-menu>
76
        <a-button style="margin-left: 8px">{{$t('button.multiSelectActions')}}
肖超群 authored
77
78
79
80
81
82
83
84
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
85
86
87
        <i class="anticon anticon-info-circle ant-alert-icon"></i> {{ $t('button.selected') }}
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a> {{ $t('button.item') }}
        <a style="margin-left: 24px" @click="onClearSelected">{{ $t('button.clearAll') }}</a>
肖超群 authored
88
        <span style="float:right;">
89
          <a @click="loadData()"><a-icon type="sync"/>&nbsp;{{$t('button.refresh')}}</a>
肖超群 authored
90
          <a-divider type="vertical"/>
肖超群 authored
91
92
93
94
          <a-popover title="自定义列" trigger="click" placement="leftBottom">
            <template slot="content">
              <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                <a-row style="width: 400px">
95
                  <template v-for="(item) in defColumns">
肖超群 authored
96
                    <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
97
                        <a-col :span="12"><a-checkbox :value="item.dataIndex"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox></a-col>
肖超群 authored
98
99
100
101
102
                    </template>
                  </template>
                </a-row>
              </a-checkbox-group>
            </template>
肖超群 authored
103
            <a><a-icon type="setting"/>设置</a>
肖超群 authored
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
          </a-popover>
        </span>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <div slot="filterDropdown">
          <a-card>
            <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
              <a-row style="width: 400px">
124
                <template v-for="(item) in defColumns">
肖超群 authored
125
                  <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
肖超群 authored
126
127
128
129
130
                    <a-col :span="12">
                      <a-checkbox :value="item.dataIndex">
                        <j-ellipsis :value="item.title" :length="10"></j-ellipsis>
                      </a-checkbox>
                    </a-col>
肖超群 authored
131
132
133
134
135
136
                  </template>
                </template>
              </a-row>
            </a-checkbox-group>
          </a-card>
        </div>
肖超群 authored
137
        <a-icon slot="filterIcon" type='setting' :style="{ fontSize:'16px',color:  '#108ee9' }"/>
肖超群 authored
138
139

        <span slot="action" slot-scope="text, record">
140
          <a @click="handleEdit(record)">{{$t('button.edit')}}</a>
肖超群 authored
141
142
143

          <a-divider type="vertical"/>
          <a-dropdown>
144
            <a class="ant-dropdown-link">{{$t('button.more')}}&nbsp;<a-icon type="down"/></a>
肖超群 authored
145
146
            <a-menu slot="overlay">
              <a-menu-item>
147
148
                <a-popconfirm :title="$t('button.deletingIt')" @confirm="() => handleDelete(record.id)">
                  <a>{{$t('button.delete')}}</a>
肖超群 authored
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <jeecgDemo-modal ref="modalForm" @ok="modalFormOk"></jeecgDemo-modal>

    <!-- 一对多表单区域 -->
    <JeecgDemoTabsModal ref="jeecgDemoTabsModal" @ok="modalFormOk"></JeecgDemoTabsModal>

  </a-card>
</template>

<script>
肖超群 authored
169
170
171
172
173
174
175
176
import JeecgDemoModal from './modules/JeecgDemoModal'
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue';
import JInput from '@/components/jeecg/JInput.vue';
import JeecgDemoTabsModal from './modules/JeecgDemoTabsModal'
import {initDictOptions, filterDictText, filterDictTextByCache} from '@/components/dict/JDictSelectUtil'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import Vue from 'vue'
import {filterObj} from '@/utils/util';
肖超群 authored
177
肖超群 authored
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
//高级查询modal需要参数
const superQueryFieldList = [
  {
    type: "string",
    value: "name",
    text: "用户名"
  }, {
    type: "int",
    value: "age",
    text: "年龄"
  }, {
    type: "date",
    value: "birthday",
    text: "生日"
  }
]
export default {
  name: "JeecgDemoList",
  mixins: [JeecgListMixin],
  components: {
    JeecgDemoModal,
    JSuperQuery,
    JeecgDemoTabsModal,
    JInput
  },
  data() {
    return {
      description: '单表示例列表',
      //字典数组缓存
      sexDictOptions: [],
      importExcelUrl: `${window._CONFIG['domianURL']}/test/jeecgDemo/importExcel`,
      //表头
      columns: [],
      //列设置
      settingColumns: [],
      //列定义
      defColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '姓名',
          align: "center",
          dataIndex: 'name'
        },
        {
          title: '关键词',
          align: "center",
          dataIndex: 'keyWord'
        },
        {
          title: '打卡时间',
          align: "center",
          dataIndex: 'punchTime'
        },
        {
          title: '性别',
          align: "center",
          dataIndex: 'sex',
          customRender: (text) => {
            //字典值替换通用方法
            return filterDictTextByCache('sex', text);
肖超群 authored
247
248
          }
        },
肖超群 authored
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
        {
          title: '年龄',
          align: "center",
          dataIndex: 'age'
        },
        {
          title: '生日',
          align: "center",
          dataIndex: 'birthday'
        },
        {
          title: '邮箱',
          align: "center",
          dataIndex: 'email'
        },
        {
          title: '个人简介',
          align: "center",
          dataIndex: 'content'
        },
        {
270
          title: this.$t('system.options'),
肖超群 authored
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
          dataIndex: 'action',
          align: "center",
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action'
          },
        }
      ],
      url: {
        list: "/test/jeecgDemo/list",
        delete: "/test/jeecgDemo/delete",
        deleteBatch: "/test/jeecgDemo/deleteBatch",
        exportXlsUrl: "/test/jeecgDemo/exportXls"
      },
      fieldList: superQueryFieldList
    }
  },
  methods: {
    getQueryParams() {
      //高级查询器
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
肖超群 authored
296
      }
肖超群 authored
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);

      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      delete param.birthdayRange; //范围参数不传递后台
      return filterObj(param);
    },
    initDictConfig() {
      console.log("--我才是真的方法!--")
      //初始化字典 - 性别
      initDictOptions('sex').then((res) => {
        if (res.success) {
          this.sexDictOptions = res.result;
        }
      });
    },
    onetomany: function () {
      this.$refs.jeecgDemoTabsModal.add();
316
      this.$refs.jeecgDemoTabsModal.title = this.$ls.get('button.edit');
肖超群 authored
317
    },
肖超群 authored
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
    //跳转单据页面
    jump() {
      this.$router.push({path: '/jeecg/helloworld'})
    },
    onBirthdayChange: function (value, dateString) {
      console.log(dateString[0], dateString[1]);
      this.queryParam.birthday_begin = dateString[0];
      this.queryParam.birthday_end = dateString[1];
    },
    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ":colsettings";
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues;
      const cols = this.defColumns.filter(item => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
肖超群 authored
338
        }
肖超群 authored
339
340
341
342
343
344
345
        return false
      })
      this.columns = cols;
    },
    initColumns() {
      //权限过滤(列权限控制时打开,修改第二个参数为授权码前缀)
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
肖超群 authored
346
肖超群 authored
347
348
349
350
351
352
353
354
355
356
357
      var key = this.$route.name + ":colsettings";
      let colSettings = Vue.ls.get(key);
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = [];
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex);
        })
        this.settingColumns = allSettingColumns;
        this.columns = this.defColumns;
      } else {
        this.settingColumns = colSettings;
肖超群 authored
358
        const cols = this.defColumns.filter(item => {
肖超群 authored
359
360
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true;
肖超群 authored
361
          }
肖超群 authored
362
363
          if (colSettings.includes(item.dataIndex)) {
            return true;
肖超群 authored
364
          }
肖超群 authored
365
          return false;
肖超群 authored
366
        })
肖超群 authored
367
        this.columns = cols;
肖超群 authored
368
      }
肖超群 authored
369
370
371
372
373
374
    }
  },
  created() {
    this.initColumns();
  },
}
肖超群 authored
375
376
</script>
<style scoped>
肖超群 authored
377
@import '~@assets/less/common.less';
肖超群 authored
378
</style>