|
@@ -2,20 +2,20 @@
|
|
|
<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-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
|
|
|
|
|
|
|
+ <el-input v-if="isModulesShow('search')" placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
|
|
|
|
|
+ <el-button v-if="isModulesShow('search')" @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
|
|
|
</el-button>
|
|
</el-button>
|
|
|
- <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
|
|
|
|
|
|
|
+ <el-button v-if="isModulesShow('query')" @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
|
|
|
icon="el-icon-search" class="filter-item">高级查询
|
|
icon="el-icon-search" class="filter-item">高级查询
|
|
|
</el-button>
|
|
</el-button>
|
|
|
- <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
|
|
|
|
|
|
|
+ <el-button v-if="isModulesShow('orders')" @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
|
|
|
icon="el-icon-sort" class="filter-item">排序
|
|
icon="el-icon-sort" class="filter-item">排序
|
|
|
</el-button>
|
|
</el-button>
|
|
|
- <el-button @click="$router.push('/testaaaone')" type="primary"
|
|
|
|
|
|
|
+ <el-button v-if="isModulesShow('add')" @click="editRow({id:0,column:$route.query.column})" type="primary"
|
|
|
size="small" icon="el-icon-edit"
|
|
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 v-if="isModulesShow('excel')" @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
|
|
|
</el-button>
|
|
</el-button>
|
|
|
<el-dropdown trigger="click" size="medium" class="table-column-filter">
|
|
<el-dropdown trigger="click" size="medium" class="table-column-filter">
|
|
|
<span>
|
|
<span>
|
|
@@ -32,6 +32,7 @@
|
|
|
:height="tableHeight"
|
|
:height="tableHeight"
|
|
|
row-key="id"
|
|
row-key="id"
|
|
|
ref="table">
|
|
ref="table">
|
|
|
|
|
+ <el-table-column label="Testaaaone" align="center" >
|
|
|
<el-table-column
|
|
<el-table-column
|
|
|
v-if="multipleMode"
|
|
v-if="multipleMode"
|
|
|
align="center"
|
|
align="center"
|
|
@@ -43,41 +44,31 @@
|
|
|
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
|
|
|
label="操作"
|
|
label="操作"
|
|
|
align="center"
|
|
align="center"
|
|
|
fixed="right"
|
|
fixed="right"
|
|
|
min-width="150"
|
|
min-width="150"
|
|
|
>
|
|
>
|
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
|
- <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
|
|
|
|
|
- <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <el-button v-if="isModulesShow('edit')" @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
|
|
|
|
|
+ <el-button v-if="isModulesShow('del')" @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
|
|
|
|
|
+ <el-dropdown>
|
|
|
|
|
+ <el-button type="primary" size="mini" plain>
|
|
|
|
|
+ 更多
|
|
|
|
|
+ <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
|
|
+ </el-dropdown-menu>
|
|
|
|
|
+ </el-dropdown>
|
|
|
|
|
+
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
</el-table>
|
|
|
<div class="pagination-wrapper">
|
|
<div class="pagination-wrapper">
|
|
|
- <div class="multiple-mode-wrapper">
|
|
|
|
|
|
|
+ <div class="multiple-mode-wrapper" v-if="0">
|
|
|
<el-button size="small" v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
|
|
<el-button size="small" v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
|
|
|
<el-button-group v-else>
|
|
<el-button-group v-else>
|
|
|
<el-button size="small" @click="operation1">批量操作1</el-button>
|
|
<el-button size="small" @click="operation1">批量操作1</el-button>
|
|
@@ -185,19 +176,26 @@
|
|
|
<img width="100%" :src="imgSrc" alt="">
|
|
<img width="100%" :src="imgSrc" alt="">
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
+ <el-dialog title="编辑Testaaaone" top='10px' :visible.sync="editDialogVisible">
|
|
|
|
|
+ <testaaaone :formData='editRowInfo' @changeEditDialogVisible='changeEditDialogVisible' @changeEdit='changeEdit'></testaaaone>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
|
import {mapState} from 'vuex'
|
|
import {mapState} from 'vuex'
|
|
|
import {format} from 'date-fns'
|
|
import {format} from 'date-fns'
|
|
|
import zh from 'date-fns/locale/zh_cn'
|
|
import zh from 'date-fns/locale/zh_cn'
|
|
|
-
|
|
|
|
|
|
|
+ import testaaaone from '../pages/Testaaaone'
|
|
|
export default {
|
|
export default {
|
|
|
created() {
|
|
created() {
|
|
|
this.getData();
|
|
this.getData();
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
|
|
+ editRowInfo: {
|
|
|
|
|
+ },
|
|
|
|
|
+ editDialogVisible: false,
|
|
|
totalNumber: 0,
|
|
totalNumber: 0,
|
|
|
totalPage: 10,
|
|
totalPage: 10,
|
|
|
currentPage: 1,
|
|
currentPage: 1,
|
|
@@ -206,42 +204,18 @@
|
|
|
filter1: '',
|
|
filter1: '',
|
|
|
filter2: '',
|
|
filter2: '',
|
|
|
tableColumns: [
|
|
tableColumns: [
|
|
|
- {
|
|
|
|
|
- label: '删除标识',
|
|
|
|
|
- value: 'delFlag',
|
|
|
|
|
- show: true
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: '名字',
|
|
|
|
|
- value: 'testName',
|
|
|
|
|
- show: true
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: '备注',
|
|
|
|
|
- value: 'remark',
|
|
|
|
|
- show: true
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
|
|
+ ],
|
|
|
|
|
+ modules: 'search,query,orders,excel,edit,add,del'.split(',').map(i => String(i))
|
|
|
|
|
+ ,
|
|
|
multipleMode: false,
|
|
multipleMode: false,
|
|
|
showAdvancedQueryDialog: false,
|
|
showAdvancedQueryDialog: false,
|
|
|
advancedQueryFields: [],
|
|
advancedQueryFields: [],
|
|
|
showTableSortDialog: false,
|
|
showTableSortDialog: false,
|
|
|
- tableSortFields: [],
|
|
|
|
|
|
|
+ tableSortFields: [
|
|
|
|
|
+ ],
|
|
|
searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
|
|
searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
|
|
|
advancedQueryColumns: [
|
|
advancedQueryColumns: [
|
|
|
- {
|
|
|
|
|
- label: '删除标识',
|
|
|
|
|
- value: 'del_flag'
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: '名字',
|
|
|
|
|
- value: 'test_name'
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: '备注',
|
|
|
|
|
- value: 'remark'
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
|
|
+ ],
|
|
|
advancedQuerySearchKey: '',
|
|
advancedQuerySearchKey: '',
|
|
|
orderByStr: '',
|
|
orderByStr: '',
|
|
|
imgSrc: '',
|
|
imgSrc: '',
|
|
@@ -249,12 +223,19 @@
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
- ...mapState(['tableHeight']),
|
|
|
|
|
|
|
+ ...mapState(['tableHeight','userInfo']),
|
|
|
selection() {
|
|
selection() {
|
|
|
return this.$refs.table.selection.map(i => i.id);
|
|
return this.$refs.table.selection.map(i => i.id);
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ changeEditDialogVisible(value) {
|
|
|
|
|
+ this.editDialogVisible = value
|
|
|
|
|
+ },
|
|
|
|
|
+ changeEdit() {
|
|
|
|
|
+ this.editDialogVisible = false
|
|
|
|
|
+ this.getData();
|
|
|
|
|
+ },
|
|
|
pageSizeChange(size) {
|
|
pageSizeChange(size) {
|
|
|
this.currentPage = 1;
|
|
this.currentPage = 1;
|
|
|
this.pageSize = size;
|
|
this.pageSize = size;
|
|
@@ -265,15 +246,59 @@
|
|
|
this.getData();
|
|
this.getData();
|
|
|
},
|
|
},
|
|
|
getData() {
|
|
getData() {
|
|
|
|
|
+
|
|
|
|
|
+ if (this.advancedQueryFields.length > 0) {
|
|
|
|
|
+
|
|
|
|
|
+ var templist = [];
|
|
|
|
|
+
|
|
|
|
|
+ this.advancedQueryFields.forEach(item => {
|
|
|
|
|
+ if (item.link && item.name && item.searchMethod && item.value) {
|
|
|
|
|
+ var tempItem = item.link + '_,' + item.name + '_,' + item.searchMethod + '_,' + item.value;
|
|
|
|
|
+ templist.push(tempItem);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ if (templist.length > 0) {
|
|
|
|
|
+
|
|
|
|
|
+ this.advancedQuerySearchKey = templist.join('_;');
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ 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('_;');
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ var data = {
|
|
|
|
|
+ currentPage: this.currentPage,
|
|
|
|
|
+ pageNumber: this.pageSize,
|
|
|
|
|
+ searchKey: this.filter1,
|
|
|
|
|
+ advancedQuery: this.advancedQuerySearchKey,
|
|
|
|
|
+ orderByStr: this.orderByStr,
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (this.$route.query.column) {
|
|
|
|
|
+ var tempColumn = this.$route.query.column;
|
|
|
|
|
+ data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
this.$http.get({
|
|
this.$http.get({
|
|
|
url: '/testaaaone/page',
|
|
url: '/testaaaone/page',
|
|
|
- data: {
|
|
|
|
|
- currentPage: this.currentPage,
|
|
|
|
|
- pageNumber: this.pageSize,
|
|
|
|
|
- searchKey: this.filter1,
|
|
|
|
|
- advancedQuery: this.advancedQuerySearchKey,
|
|
|
|
|
- orderByStr: this.orderByStr,
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ data: data
|
|
|
}).then(res => {
|
|
}).then(res => {
|
|
|
if (res.success) {
|
|
if (res.success) {
|
|
|
this.totalNumber = res.data.page.totalNumber;
|
|
this.totalNumber = res.data.page.totalNumber;
|
|
@@ -285,6 +310,10 @@
|
|
|
var row = this.tableColumns.find(i => i.value === column);
|
|
var row = this.tableColumns.find(i => i.value === column);
|
|
|
return row ? row.show : false;
|
|
return row ? row.show : false;
|
|
|
},
|
|
},
|
|
|
|
|
+ isModulesShow(column) {
|
|
|
|
|
+ var row = this.modules.find(i => i === column);
|
|
|
|
|
+ return row ? true : false;
|
|
|
|
|
+ },
|
|
|
toggleMultipleMode(multipleMode) {
|
|
toggleMultipleMode(multipleMode) {
|
|
|
this.multipleMode = multipleMode;
|
|
this.multipleMode = multipleMode;
|
|
|
if (!multipleMode) {
|
|
if (!multipleMode) {
|
|
@@ -292,12 +321,20 @@
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
editRow(row) {
|
|
editRow(row) {
|
|
|
- this.$router.push({
|
|
|
|
|
- path: '/testaaaone',
|
|
|
|
|
- query: {
|
|
|
|
|
- id: row.id
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ var jsonp = { ...row }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ if (this.$route.query.column) {
|
|
|
|
|
+ jsonp.subColumn = this.$route.query.column.split(',')[1];
|
|
|
|
|
+ jsonp.subValue = this.$route.query.column.split(',')[0];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (this.$route.query.column) {
|
|
|
|
|
+ jsonp[jsonp.subColumn] = jsonp.subValue;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ this.editRowInfo = jsonp
|
|
|
|
|
+ this.editDialogVisible = true
|
|
|
},
|
|
},
|
|
|
operation1() {
|
|
operation1() {
|
|
|
this.$notify({
|
|
this.$notify({
|
|
@@ -325,23 +362,6 @@
|
|
|
|
|
|
|
|
this.advancedQuerySearchKey = '';
|
|
this.advancedQuerySearchKey = '';
|
|
|
|
|
|
|
|
- if (this.advancedQueryFields.length > 0) {
|
|
|
|
|
-
|
|
|
|
|
- var templist = [];
|
|
|
|
|
-
|
|
|
|
|
- this.advancedQueryFields.forEach(item => {
|
|
|
|
|
- if (item.link && item.name && item.searchMethod && item.value) {
|
|
|
|
|
- var tempItem = item.link + '_,' + item.name + '_,' + item.searchMethod + '_,' + item.value;
|
|
|
|
|
- templist.push(tempItem);
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
- if (templist.length > 0) {
|
|
|
|
|
-
|
|
|
|
|
- this.advancedQuerySearchKey = templist.join('_;');
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
this.getData();
|
|
this.getData();
|
|
|
this.showAdvancedQueryDialog = false;
|
|
this.showAdvancedQueryDialog = false;
|
|
|
},
|
|
},
|
|
@@ -360,23 +380,6 @@
|
|
|
|
|
|
|
|
this.orderByStr = '';
|
|
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.getData();
|
|
|
this.showTableSortDialog = false;
|
|
this.showTableSortDialog = false;
|
|
|
},
|
|
},
|
|
@@ -422,7 +425,10 @@
|
|
|
this.imageDialogVisible = true;
|
|
this.imageDialogVisible = true;
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ components: {
|
|
|
|
|
+ testaaaone
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|