Blame view

ant-design-vue-jeecg/src/views/jeecg/JeecgDemoList.vue 12.8 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
              </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">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="plus" @click="jump">创建单据</a-button>
      <a-button type="primary" icon="plus" @click="onetomany">一对多</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('单表示例')">导出</a-button>
肖超群 authored
64
65
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                @change="handleImportExcel">
肖超群 authored
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
        <a-button type="primary" icon="import">导入</a-button>
      </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">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
肖超群 authored
87
88
          selectedRowKeys.length
        }}</a>项
肖超群 authored
89
90
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        <span style="float:right;">
肖超群 authored
91
92
          <a @click="loadData()"><a-icon type="sync"/>刷新</a>
          <a-divider type="vertical"/>
肖超群 authored
93
94
95
96
          <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">
97
                  <template v-for="(item) in defColumns">
肖超群 authored
98
                    <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
99
                        <a-col :span="12"><a-checkbox :value="item.dataIndex"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox></a-col>
肖超群 authored
100
101
102
103
104
                    </template>
                  </template>
                </a-row>
              </a-checkbox-group>
            </template>
肖超群 authored
105
            <a><a-icon type="setting"/>设置</a>
肖超群 authored
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
          </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">
126
                <template v-for="(item) in defColumns">
肖超群 authored
127
                  <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
肖超群 authored
128
129
130
131
132
                    <a-col :span="12">
                      <a-checkbox :value="item.dataIndex">
                        <j-ellipsis :value="item.title" :length="10"></j-ellipsis>
                      </a-checkbox>
                    </a-col>
肖超群 authored
133
134
135
136
137
138
                  </template>
                </template>
              </a-row>
            </a-checkbox-group>
          </a-card>
        </div>
肖超群 authored
139
        <a-icon slot="filterIcon" type='setting' :style="{ fontSize:'16px',color:  '#108ee9' }"/>
肖超群 authored
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </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
171
172
173
174
175
176
177
178
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
179
肖超群 authored
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
247
248
//高级查询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
249
250
          }
        },
肖超群 authored
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
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
296
297
        {
          title: '年龄',
          align: "center",
          dataIndex: 'age'
        },
        {
          title: '生日',
          align: "center",
          dataIndex: 'birthday'
        },
        {
          title: '邮箱',
          align: "center",
          dataIndex: 'email'
        },
        {
          title: '个人简介',
          align: "center",
          dataIndex: 'content'
        },
        {
          title: '操作',
          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
298
      }
肖超群 authored
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
      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();
      this.$refs.jeecgDemoTabsModal.title = "编辑";
肖超群 authored
319
    },
肖超群 authored
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
    //跳转单据页面
    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
340
        }
肖超群 authored
341
342
343
344
345
346
347
        return false
      })
      this.columns = cols;
    },
    initColumns() {
      //权限过滤(列权限控制时打开,修改第二个参数为授权码前缀)
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
肖超群 authored
348
肖超群 authored
349
350
351
352
353
354
355
356
357
358
359
      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
360
        const cols = this.defColumns.filter(item => {
肖超群 authored
361
362
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true;
肖超群 authored
363
          }
肖超群 authored
364
365
          if (colSettings.includes(item.dataIndex)) {
            return true;
肖超群 authored
366
          }
肖超群 authored
367
          return false;
肖超群 authored
368
        })
肖超群 authored
369
        this.columns = cols;
肖超群 authored
370
      }
肖超群 authored
371
372
373
374
375
376
    }
  },
  created() {
    this.initColumns();
  },
}
肖超群 authored
377
378
</script>
<style scoped>
肖超群 authored
379
@import '~@assets/less/common.less';
肖超群 authored
380
</style>