|
@@ -1,14 +1,18 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div>
|
|
<div>
|
|
|
<div class="filters-container">
|
|
<div class="filters-container">
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
|
|
<el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
|
|
|
- <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
|
|
|
|
|
- </el-button>
|
|
|
|
|
- <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small" icon="el-icon-search" class="filter-item">高级查询
|
|
|
|
|
|
|
+ <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
|
|
|
</el-button>
|
|
</el-button>
|
|
|
-
|
|
|
|
|
- <el-button @click="$router.push('/testaaaone')" type="primary" size="small" icon="el-icon-edit"
|
|
|
|
|
|
|
+ <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
|
|
|
|
|
+ icon="el-icon-search" class="filter-item">高级查询
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
|
|
|
|
|
+ icon="el-icon-sort" class="filter-item">排序
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-button @click="$router.push('/testaaaone')" type="primary"
|
|
|
|
|
+ size="small" icon="el-icon-edit"
|
|
|
class="filter-item">添加
|
|
class="filter-item">添加
|
|
|
</el-button>
|
|
</el-button>
|
|
|
<el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
|
|
<el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
|
|
@@ -39,25 +43,28 @@
|
|
|
min-width="50"
|
|
min-width="50"
|
|
|
align="center">
|
|
align="center">
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
|
|
- v-if="isColumnShow('delFlag')"
|
|
|
|
|
- prop="delFlag"
|
|
|
|
|
- label="删除标识"
|
|
|
|
|
- min-width="100">
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column
|
|
|
|
|
- v-if="isColumnShow('testName')"
|
|
|
|
|
- prop="testName"
|
|
|
|
|
- label="名字"
|
|
|
|
|
- min-width="100">
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column
|
|
|
|
|
- v-if="isColumnShow('remark')"
|
|
|
|
|
- prop="remark"
|
|
|
|
|
- label="备注"
|
|
|
|
|
- min-width="100">
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ v-if="isColumnShow('testName')"
|
|
|
|
|
+ prop="testName"
|
|
|
|
|
+ label="名字"
|
|
|
|
|
+ min-width="100">
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ v-if="isColumnShow('remark')"
|
|
|
|
|
+ prop="remark"
|
|
|
|
|
+ label="备注"
|
|
|
|
|
+ min-width="100">
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ v-if="isColumnShow('multiSelect')"
|
|
|
|
|
+ prop="multiSelect"
|
|
|
|
|
+ label="多选"
|
|
|
|
|
+ min-width="100">
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column
|
|
|
label="操作"
|
|
label="操作"
|
|
|
align="center"
|
|
align="center"
|
|
|
fixed="right"
|
|
fixed="right"
|
|
@@ -107,14 +114,16 @@
|
|
|
<template slot-scope="{row}">
|
|
<template slot-scope="{row}">
|
|
|
<el-select v-model="row.name">
|
|
<el-select v-model="row.name">
|
|
|
|
|
|
|
|
- <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value" :key="item.value"></el-option>
|
|
|
|
|
|
|
+ <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
|
|
|
|
|
+ :key="item.value"></el-option>
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
<el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
|
|
<el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
|
|
|
<template slot-scope="{row}">
|
|
<template slot-scope="{row}">
|
|
|
<el-select v-model="row.searchMethod">
|
|
<el-select v-model="row.searchMethod">
|
|
|
- <el-option v-for="item in searchMethods" :label="item" :value="item" :key="item"></el-option>
|
|
|
|
|
|
|
+ <el-option v-for="item in searchMethods" :label="item" :value="item"
|
|
|
|
|
+ :key="item"></el-option>
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
@@ -136,10 +145,52 @@
|
|
|
</span>
|
|
</span>
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
+ <el-dialog title="排序" :visible.sync="showTableSortDialog">
|
|
|
|
|
+ <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
|
|
|
|
|
+ <el-table :data="tableSortFields">
|
|
|
|
|
+
|
|
|
|
|
+ <el-table-column prop="name" label="字段" align="center">
|
|
|
|
|
+ <template slot-scope="{row}">
|
|
|
|
|
+ <el-select v-model="row.name">
|
|
|
|
|
+
|
|
|
|
|
+ <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
|
|
|
|
|
+ :key="item.value"></el-option>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="order" label="排序" align="center">
|
|
|
|
|
+ <template slot-scope="{row}">
|
|
|
|
|
+ <el-select v-model="row.order">
|
|
|
|
|
+ <el-option label="降序" value="desc">
|
|
|
|
|
+ </el-option>
|
|
|
|
|
+ <el-option label="升序" value="asc">
|
|
|
|
|
+ </el-option>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column width="60" align="center">
|
|
|
|
|
+ <template slot-scope="{ row, column, $index }">
|
|
|
|
|
+ <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+
|
|
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
|
|
+
|
|
|
|
|
+ <el-button @click="tableSortQuery" :loading="$store.state.fetchingData">确定</el-button>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+
|
|
|
|
|
+ <el-dialog title="查看图片" :visible.sync="imageDialogVisible" size="small">
|
|
|
|
|
+ <img width="100%" :src="imgSrc" alt="">
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
|
import {mapState} from 'vuex'
|
|
import {mapState} from 'vuex'
|
|
|
|
|
+ import {format} from 'date-fns'
|
|
|
|
|
+ import zh from 'date-fns/locale/zh_cn'
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
created() {
|
|
created() {
|
|
@@ -155,41 +206,46 @@
|
|
|
filter1: '',
|
|
filter1: '',
|
|
|
filter2: '',
|
|
filter2: '',
|
|
|
tableColumns: [
|
|
tableColumns: [
|
|
|
- {
|
|
|
|
|
- label: '删除标识',
|
|
|
|
|
- value: 'delFlag',
|
|
|
|
|
- show: true
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: '名字',
|
|
|
|
|
- value: 'testName',
|
|
|
|
|
- show: true
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: '备注',
|
|
|
|
|
- value: 'remark',
|
|
|
|
|
- show: true
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '名字',
|
|
|
|
|
+ value: 'testName',
|
|
|
|
|
+ show: true
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '备注',
|
|
|
|
|
+ value: 'remark',
|
|
|
|
|
+ show: true
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '多选',
|
|
|
|
|
+ value: 'multiSelect',
|
|
|
|
|
+ show: true
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
multipleMode: false,
|
|
multipleMode: false,
|
|
|
showAdvancedQueryDialog: false,
|
|
showAdvancedQueryDialog: false,
|
|
|
advancedQueryFields: [],
|
|
advancedQueryFields: [],
|
|
|
|
|
+ showTableSortDialog: false,
|
|
|
|
|
+ tableSortFields: [],
|
|
|
searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
|
|
searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
|
|
|
advancedQueryColumns: [
|
|
advancedQueryColumns: [
|
|
|
- {
|
|
|
|
|
- label: '删除标识',
|
|
|
|
|
- value: 'del_flag'
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
|
|
+ {
|
|
|
label: '名字',
|
|
label: '名字',
|
|
|
value: 'test_name'
|
|
value: 'test_name'
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: '备注',
|
|
label: '备注',
|
|
|
value: 'remark'
|
|
value: 'remark'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '多选',
|
|
|
|
|
+ value: 'multi_select'
|
|
|
},
|
|
},
|
|
|
],
|
|
],
|
|
|
advancedQuerySearchKey: '',
|
|
advancedQuerySearchKey: '',
|
|
|
|
|
+ orderByStr: '',
|
|
|
|
|
+ imgSrc: '',
|
|
|
|
|
+ imageDialogVisible: false,
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -210,13 +266,14 @@
|
|
|
},
|
|
},
|
|
|
getData() {
|
|
getData() {
|
|
|
this.$http.get({
|
|
this.$http.get({
|
|
|
- url: '/testaaaone/page',
|
|
|
|
|
- data: {
|
|
|
|
|
- currentPage: this.currentPage,
|
|
|
|
|
- pageNumber: this.pageSize,
|
|
|
|
|
- searchKey: this.filter1,
|
|
|
|
|
- advancedQuery: this.advancedQuerySearchKey,
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ url: '/testaaaone/page',
|
|
|
|
|
+ data: {
|
|
|
|
|
+ currentPage: this.currentPage,
|
|
|
|
|
+ pageNumber: this.pageSize,
|
|
|
|
|
+ searchKey: this.filter1,
|
|
|
|
|
+ advancedQuery: this.advancedQuerySearchKey,
|
|
|
|
|
+ orderByStr: this.orderByStr,
|
|
|
|
|
+ }
|
|
|
}).then(res => {
|
|
}).then(res => {
|
|
|
if (res.success) {
|
|
if (res.success) {
|
|
|
this.totalNumber = res.data.page.totalNumber;
|
|
this.totalNumber = res.data.page.totalNumber;
|
|
@@ -288,18 +345,54 @@
|
|
|
this.getData();
|
|
this.getData();
|
|
|
this.showAdvancedQueryDialog = false;
|
|
this.showAdvancedQueryDialog = false;
|
|
|
},
|
|
},
|
|
|
|
|
+ addSortField() {
|
|
|
|
|
+ this.tableSortFields.push({
|
|
|
|
|
+ name: '',
|
|
|
|
|
+ order: 'asc',
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ removeSortField(i) {
|
|
|
|
|
+ if (this.tableSortFields.length > 0) {
|
|
|
|
|
+ this.tableSortFields.splice(i, 1);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ tableSortQuery() {
|
|
|
|
|
+
|
|
|
|
|
+ this.orderByStr = '';
|
|
|
|
|
+
|
|
|
|
|
+ if (this.tableSortFields.length > 0) {
|
|
|
|
|
+
|
|
|
|
|
+ var templist = [];
|
|
|
|
|
+
|
|
|
|
|
+ this.tableSortFields.forEach(item => {
|
|
|
|
|
+ if (item.name && item.order) {
|
|
|
|
|
+ var tempItem = item.name + '_,' + item.order;
|
|
|
|
|
+ templist.push(tempItem);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ if (templist.length > 0) {
|
|
|
|
|
+
|
|
|
|
|
+ this.orderByStr = templist.join('_;');
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ this.getData();
|
|
|
|
|
+ this.showTableSortDialog = false;
|
|
|
|
|
+ },
|
|
|
exportExcel() {
|
|
exportExcel() {
|
|
|
- window.location.href = this.$baseUrl + "/testaaaone/exportExcel?searchKey=" + this.filter1 + "&advancedQuery=" + this.advancedQuerySearchKey
|
|
|
|
|
|
|
+ window.location.href = this.$baseUrl + "/testaaaone/exportExcel?searchKey="
|
|
|
|
|
+ + this.filter1 + "&advancedQuery=" + this.advancedQuerySearchKey+"&orderByStr=" + this.orderByStr;
|
|
|
},
|
|
},
|
|
|
searchData() {
|
|
searchData() {
|
|
|
this.currentPage = 1;
|
|
this.currentPage = 1;
|
|
|
this.getData();
|
|
this.getData();
|
|
|
},
|
|
},
|
|
|
deleteRow(row) {
|
|
deleteRow(row) {
|
|
|
- this.$alert('删除将无法恢复,确认要删除么?', '警告', { type: 'error' }).then(() => {
|
|
|
|
|
|
|
+ this.$alert('删除将无法恢复,确认要删除么?', '警告', {type: 'error'}).then(() => {
|
|
|
return this.$http.post({
|
|
return this.$http.post({
|
|
|
- url: '/testaaaone/del',
|
|
|
|
|
- data: { id: row.id }
|
|
|
|
|
|
|
+ url: '/testaaaone/del',
|
|
|
|
|
+ data: {id: row.id}
|
|
|
})
|
|
})
|
|
|
}).then(() => {
|
|
}).then(() => {
|
|
|
this.$message.success('删除成功');
|
|
this.$message.success('删除成功');
|
|
@@ -312,6 +405,22 @@
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
|
|
+ DateTimeFormatter(row, column, cellValue) {
|
|
|
|
|
+ if (cellValue) {
|
|
|
|
|
+ return format(cellValue, 'YYYY/MM/DD HH:mm', {locale: zh})
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ DateFormatter(row, column, cellValue) {
|
|
|
|
|
+ if (cellValue) {
|
|
|
|
|
+ return format(cellValue, 'YYYY/MM/DD', {locale: zh})
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ showImg(img) {
|
|
|
|
|
+ this.imgSrc = img;
|
|
|
|
|
+ this.imageDialogVisible = true;
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|