<style scoped>
|
.value-table {
|
width: 100%;
|
height: 100%;
|
overflow-y: auto;
|
}
|
|
.table {
|
width: 100%;
|
height: calc(100% - 42px);
|
}
|
|
.page {
|
width: 100%;
|
height: 30px;
|
text-align: right;
|
margin-top: 10px;
|
}
|
|
.down-left {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.down-right {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.body{
|
overflow-x: hidden;
|
}
|
</style>
|
<style>
|
.value-table .el-upload {
|
width: 100%;
|
}
|
|
.value-table .el-upload-dragger {
|
width: 100%;
|
}
|
</style>
|
|
<template>
|
<div class="value-table">
|
<div class="table">
|
<el-table ref="eltable" :data="tableData" style="width: 100%;" height="100%" tooltip-effect="dark" border
|
@selection-change="selectChange" @select="select" v-loading="loading" @sort-change="sortChange"
|
@row-click="rowClick" :show-summary="data.countFleid!=undefined && data.countFleid.length > 0"
|
:summary-method="getSummaries">
|
<el-table-column type="selection" width="65" v-if="data.showSelect">
|
</el-table-column>
|
<el-table-column type="index" align="center" label="序号" width="70" v-if="data.isIndex">
|
</el-table-column>
|
<el-table-column :prop="a.label" :label="a.value" sortable="custom" v-for="(a, ai) in tableHead" :key="ai"
|
show-overflow-tooltip min-width="160">
|
<template slot-scope="scope">
|
<div v-if="showType(a.label, data.tagField) != null">
|
<el-tag v-for="(b, bi) in data.tagField[a.label].select" :key="bi" v-if="b.value == scope.row[a.label]"
|
:type="b.type" size="medium">{{b.label}}</el-tag>
|
</div>
|
<span v-else>{{scope.row[a.label]}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" align="center" label="操作" :width="60 + data.do.length * 35"
|
v-if="data.do.length > 0">
|
<template slot-scope="scope">
|
<el-button v-for="(a, ai) in data.do" :key="ai" :type="a.type"
|
@click="main(scope.row, a)">{{a.font}}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="page">
|
<el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.current"
|
:page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
<el-dialog title="编辑" :visible.sync="upDia" :width="data.row==1?'500px':500+data.row * 200 + 'px'">
|
<div class="body" v-if="upDia" style="max-height: 550px;overflow-y: auto;padding: 5px 0;">
|
<div v-if="data.row > 1">
|
<div v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;">
|
<el-col :span="6/data.row" style="text-align: right;">
|
<span class="required-span" v-if="showUpReq(a.label)">* </span>{{a.value}}：
|
</el-col>
|
<el-col :span="16/data.row" :offset="1">
|
<el-input v-model="upData[a.label]" size="small" clearable :placeholder="`请输入${a.value}`"
|
v-if="showType(a.label, data.selectField) == null" :disabled="isDisabled(a.label)"></el-input>
|
<el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.selectField) != null"
|
style="width: 100%;" :disabled="isDisabled(a.label)" clearable>
|
<el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value"
|
:label="b.label"></el-option>
|
</el-select>
|
</el-col>
|
</div>
|
</div>
|
<div v-else>
|
<el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;">
|
<el-col :span="6" style="text-align: right;">
|
<span class="required-span" v-if="showUpReq(a.label)">* </span>{{a.value}}：
|
</el-col>
|
<el-col :span="16" :offset="1">
|
<el-input v-model="upData[a.label]" size="small" clearable :placeholder="`请输入${a.value}`"
|
v-if="showType(a.label, data.selectField) == null" :disabled="isDisabled(a.label)"></el-input>
|
<el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.selectField) != null"
|
style="width: 100%;" :disabled="isDisabled(a.label)" clearable>
|
<el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value"
|
:label="b.label"></el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="upDia = false">取 消</el-button>
|
<el-button type="primary" @click="saveUpData" :loading="upLoad">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog title="新增" :visible.sync="addDia" :width="data.row==1?'500px':500+data.row * 200 + 'px'">
|
<div class="body" v-if="addDia" style="max-height: 550px;overflow-y: auto;padding: 5px 0;">
|
<div v-if="data.row > 1">
|
<div v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;">
|
<el-col :span="6/data.row" style="text-align: right;"><span class="required-span"
|
v-if="showAddReq(a.label)">*
|
</span>{{a.value}}：</el-col>
|
<el-col :span="16/data.row" :offset="1">
|
<el-input v-model="upData[a.label]" size="small" clearable :placeholder="`请输入${a.value}`"
|
v-if="showType(a.label, data.selectField) == null"></el-input>
|
<el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.selectField) != null"
|
style="width: 100%;" :placeholder="`请选择${a.value}`" clearable>
|
<el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value"
|
:label="b.label"></el-option>
|
</el-select>
|
</el-col>
|
</div>
|
</div>
|
<div v-else>
|
<el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;">
|
<el-col :span="6" style="text-align: right;"><span class="required-span" v-if="showAddReq(a.label)">*
|
</span>{{a.value}}：</el-col>
|
<el-col :span="16" :offset="1">
|
<el-input v-model="upData[a.label]" size="small" clearable :placeholder="`请输入${a.value}`"
|
v-if="showType(a.label, data.selectField) == null"></el-input>
|
<el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.selectField) != null"
|
style="width: 100%;" :placeholder="`请选择${a.value}`" clearable>
|
<el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value"
|
:label="b.label"></el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="addDia = false">取 消</el-button>
|
<el-button type="primary" @click="saveAddData" :loading="addLoad">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog title="导出" :visible.sync="downDia" width="400px">
|
<div style="display: flex;width: 100%;height: 100px;">
|
<div class="down-left" @click="downFile(true)">
|
<el-button>本页导出</el-button>
|
</div>
|
<div class="down-right" @click="downFile(false)">
|
<el-button>全部导出</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
<el-dialog title="数据导入" :visible.sync="uploadDia" width="500px">
|
<div style="margin: 0 auto;">
|
<el-upload ref="upload" drag :action="javaApi + inputUrl" :headers="token" :file-list="fileList" name="file"
|
:auto-upload="false" accept=".csv" :limit="1" :on-change="beforeUpload" :on-success="onSuccess"
|
:on-error="onError" :data="{param: data.uploadStr}">
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
</el-upload>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="uploadDia = false">取 消</el-button>
|
<el-button type="primary" @click="submitUpload()">上 传</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
Page
|
} from 'iview';
|
export default {
|
props: {
|
url: {
|
type: String,
|
default: () => null
|
},
|
upUrl: {
|
type: String,
|
default: () => null
|
},
|
delUrl: {
|
type: String,
|
default: () => null
|
},
|
downUrl: {
|
type: String,
|
default: () => null
|
},
|
inputUrl: {
|
type: String,
|
default: () => null
|
},
|
componentData: {
|
type: Object,
|
default: () => {
|
return {
|
entity: {
|
orderBy: {
|
field: 'id',
|
order: 'asc'
|
}
|
},
|
isIndex: true,
|
showSelect: false,
|
select: true,
|
row: 1,
|
do: [{
|
id: 'update',
|
font: '编辑',
|
type: 'text',
|
method: 'doDiy'
|
}, {
|
id: 'delete',
|
font: '删除',
|
type: 'text',
|
method: 'doDiy'
|
}],
|
doDiy: true,
|
tagField: [{
|
label: 'state',
|
select: [{
|
value: '1',
|
type: 'success',
|
label: '启用'
|
}, {
|
value: '0',
|
type: 'danger',
|
label: '停用'
|
}]
|
}]
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
data: {
|
entity: {
|
orderBy: {
|
field: 'id',
|
order: 'asc'
|
}
|
},
|
isIndex: true,
|
showSelect: false,
|
select: true,
|
row: 1,
|
do: [{
|
font: '删除',
|
type: 'text'
|
}],
|
type: [],
|
uploadStr: ""
|
},
|
tableHead: [],
|
tableData: [],
|
multipleSelection: [],
|
user: {},
|
page: {
|
current: 1,
|
size: 20,
|
},
|
total: 0,
|
loading: false,
|
upDia: false,
|
upData: {},
|
upHead: [],
|
upLoad: false,
|
addDia: false,
|
addUrl: null,
|
addLoad: false,
|
dataCopy: {},
|
downDia: false,
|
uploadDia: false,
|
token: null,
|
fileList: [],
|
}
|
},
|
watch: {
|
tableData: {
|
deep: true,
|
handler: function() {
|
this.$nextTick(() => {
|
this.$refs.eltable.doLayout()
|
})
|
}
|
}
|
},
|
mounted() {
|
this.data = this.componentData
|
this.dataCopy = this.HaveJson(this.componentData)
|
this.selectList()
|
this.token = {
|
'token': sessionStorage.getItem('token')
|
}
|
},
|
methods: {
|
selectChange(val) {
|
if (this.data.select) {
|
this.multipleSelection = val;
|
} else {
|
this.multipleSelection = val[val.length - 1];
|
}
|
},
|
select(val, row) {
|
if (!this.data.select) {
|
this.$refs['eltable'].clearSelection()
|
this.$refs['eltable'].toggleRowSelection(row, true)
|
}
|
},
|
rowClick(row, column, event) {
|
if (this.data.select) {
|
this.$refs['eltable'].toggleRowSelection(row)
|
} else {
|
this.$refs['eltable'].clearSelection()
|
this.$refs['eltable'].toggleRowSelection(row, true)
|
}
|
},
|
sizeChange(val) {
|
this.page.size = val
|
this.selectList()
|
},
|
currentChange(val) {
|
this.page.current = val
|
this.selectList()
|
},
|
selectList() {
|
this.loading = true
|
this.$axios.post(this.url, {
|
page: this.page,
|
entity: this.data.entity
|
}, {
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
if (res.code === 201) {
|
this.loading = false
|
return
|
}
|
this.total = res.data.body.total
|
this.tableHead = res.data.head
|
this.tableData = res.data.body.records
|
this.loading = false
|
}).catch(e => {
|
this.loading = false
|
this.$message.error('请刷新页面再尝试')
|
})
|
},
|
sortChange(ob) {
|
this.data.entity.orderBy = {}
|
this.data.entity.orderBy.field = ob.prop
|
if (ob.order == 'ascending') {
|
this.data.entity.orderBy.order = 'asc'
|
} else if (ob.order == 'descending') {
|
this.data.entity.orderBy.order = 'desc'
|
} else {
|
if (this.componentData.entity.orderBy != undefined) {
|
this.data.entity.orderBy = this.HaveJson(this.dataCopy.entity.orderBy)
|
}
|
}
|
this.selectList()
|
},
|
showType(val, ob) {
|
var str = ob[val]
|
return str == undefined ? null : ob[val].select
|
},
|
showAddReq(label) {
|
if (this.data.requiredAdd == undefined) {
|
return
|
}
|
for (var i = 0; i < this.data.requiredAdd.length; i++) {
|
if (label == this.data.requiredAdd[i]) {
|
return true
|
}
|
}
|
return false
|
},
|
showUpReq(label) {
|
if (this.data.requiredUp == undefined) {
|
return
|
}
|
for (var i = 0; i < this.data.requiredUp.length; i++) {
|
if (label == this.data.requiredUp[i]) {
|
return true
|
}
|
}
|
return false
|
},
|
main(row, val) {
|
console.log(val);
|
if (val.method == undefined) return
|
else if (val.method == 'doDiy') {
|
if (val.id == 'update') {
|
this.upDia = true,
|
this.upData = this.HaveJson(row)
|
this.upHead = this.HaveJson(this.tableHead)
|
this.upHead = this.upHead.filter(a => a.label != 'createTime' && a.label != 'updateTime')
|
delete this.upData.orderBy
|
delete this.upData.createTime
|
delete this.upData.updateTime
|
delete this.upData.createUser
|
delete this.upData.updateUser
|
val.field.forEach(a => {
|
if (this.upData[a] == undefined) {
|
this.upHead.push({
|
value: a.split('=')[0],
|
label: a.split('=')[1]
|
})
|
} else {
|
delete this.upData[a]
|
for (var i = 0; i < this.upHead.length; i++) {
|
if (this.upHead[i].label == a) {
|
this.upHead.splice(i, 1);
|
i--
|
break
|
}
|
}
|
}
|
})
|
} else if (val.id == 'delete') {
|
if (this.delUrl == null) {
|
this.$message.error('请给删除请求地址')
|
return
|
}
|
this.$confirm('是否删除当前数据?', "警告", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$axios.post(this.delUrl, {
|
id: row.id
|
}).then(res => {
|
if (res.code === 201) {
|
return
|
}
|
this.$message.success('删除成功')
|
this.selectList()
|
}).catch(e => {
|
this.$message.error('删除失败')
|
})
|
}).catch(() => {})
|
}
|
} else {
|
delete row.orderBy
|
this.$emit(val.method, row)
|
}
|
},
|
saveUpData() {
|
if (this.upUrl == null) {
|
this.$message.error('请给修改请求地址')
|
return
|
}
|
for (var i = 0; i < this.data.requiredUp.length; i++) {
|
if (this.upData[this.data.requiredUp[i]] == null || this.upData[this.data.requiredUp[i]] == '') {
|
var list = this.upHead.filter(a => {
|
if (a.label == this.data.requiredUp[i]) return a
|
})
|
if (list[0].value == undefined) continue
|
this.$message.error(list[0].value + '是必填项')
|
return
|
}
|
}
|
this.upLoad = true
|
this.$axios.post(this.upUrl, this.upData, {
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
if (res.code === 201) {
|
this.upLoad = false
|
return
|
}
|
this.$message.success('修改成功')
|
this.upDia = false
|
this.selectList()
|
this.upLoad = false
|
}).catch(e => {
|
this.$message.error('修改失败')
|
this.upDia = false
|
this.upLoad = false
|
})
|
},
|
openAddDia(addUrl) {
|
console.log(addUrl);
|
this.addDia = true
|
this.addUrl = addUrl
|
this.upData = {}
|
this.tableHead.forEach((k, v) => {
|
if (k.label != 'orderBy' && k.label != 'createTime' && k.label != 'updateTime' && k.label !=
|
'createUser' && k.label != 'updateUser')
|
this.upData[k.label] = null
|
})
|
this.upData = this.HaveJson(this.upData)
|
this.upHead = this.HaveJson(this.tableHead)
|
this.upHead = this.upHead.filter(a => a.label != 'createTime' && a.label != 'updateTime')
|
var val = this.data.do.filter(a => a.id == 'update')[0]
|
if (val == undefined) {
|
val = {
|
field: []
|
}
|
}
|
val.field.forEach(a => {
|
if (JSON.stringify(this.upData[a]) == undefined) {
|
this.upHead.push({
|
value: a.split('=')[0],
|
label: a.split('=')[1]
|
})
|
} else {
|
delete this.upData[a]
|
for (var i = 0; i < this.upHead.length; i++) {
|
if (this.upHead[i].label == a) {
|
this.upHead.splice(i, 1);
|
i--
|
break
|
}
|
}
|
}
|
})
|
},
|
saveAddData() {
|
if (this.addUrl == null) {
|
this.$message.error('请给添加请求地址')
|
return
|
}
|
for (var i = 0; i < this.data.requiredAdd.length; i++) {
|
if (this.upData[this.data.requiredAdd[i]] == null || this.upData[this.data.requiredAdd[i]] == '') {
|
var list = this.upHead.filter(a => {
|
if (a.label == this.data.requiredAdd[i]) return a
|
})
|
if (list[0].value == undefined) continue
|
this.$message.error(list[0].value + '是必填项')
|
return
|
}
|
}
|
this.addLoad = true
|
this.$axios.post(this.addUrl, this.upData, {
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
if (res.code === 201) {
|
this.addLoad = false
|
return
|
}
|
this.$message.success('添加成功')
|
this.addDia = false
|
this.selectList()
|
this.addLoad = false
|
}).catch(e => {
|
this.addDia = false
|
this.addLoad = false
|
})
|
},
|
openDownDia() {
|
this.downDia = true
|
},
|
downFile(type) {
|
if (this.downUrl == null) {
|
this.$message.error('请给导出请求地址')
|
return
|
}
|
var page = this.HaveJson(this.page)
|
if (!type) {
|
page.current = 0
|
page.size = this.total
|
}
|
this.loading = true
|
this.$axios.post(this.downUrl, {
|
page: page,
|
entity: this.data.entity
|
}, {
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
if (res.code === 201) {
|
this.loading = false
|
return
|
}
|
this.downDia = false
|
this.loading = false
|
this.$message.success('导出成功')
|
let eleLink = document.createElement('a')
|
eleLink.style.display = 'none'
|
eleLink.download = res.data
|
eleLink.href = this.javaApi + '/outPath/' + res.data
|
document.body.appendChild(eleLink)
|
eleLink.click()
|
document.body.removeChild(eleLink)
|
}).catch(e => {
|
console.log(e);
|
this.loading = false
|
this.$message.error('请刷新页面再尝试')
|
})
|
},
|
openUpload() {
|
if (this.inputUrl == null) {
|
this.$message.error('请给导入请求地址')
|
return
|
}
|
this.uploadDia = true
|
},
|
beforeUpload(file, fileList) {
|
if (file.raw.type != 'text/csv') {
|
this.$message.error('上传文件格式不正确');
|
this.$refs.upload.clearFiles()
|
return false;
|
}
|
},
|
submitUpload() {
|
if (this.$refs.upload.uploadFiles.length == 0) {
|
this.$message.error('未选择文件')
|
return
|
}
|
this.uploading = true
|
this.$refs.upload.submit();
|
},
|
onSuccess(response, file, fileList) {
|
this.$refs.upload.clearFiles()
|
this.uploadDia = false
|
this.uploading = false
|
if (response.code == 201) {
|
this.$message.error(response.message)
|
return
|
}
|
this.$message.success('上传成功')
|
this.selectList()
|
},
|
onError(err, file, fileList) {
|
this.$message.error('上传失败')
|
this.$refs.upload.clearFiles()
|
this.uploading = false
|
},
|
isDisabled(label) {
|
if (this.data.disabledUp == undefined) {
|
return
|
}
|
for (var i = 0; i < this.data.disabledUp.length; i++) {
|
if (label == this.data.disabledUp[i]) {
|
return true
|
}
|
}
|
return false
|
},
|
getSummaries(param) {
|
const {
|
columns,
|
data
|
} = param;
|
const sums = [];
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '合计';
|
return;
|
}
|
const values = data.map(item => Number(item[column.property]));
|
if (this.data.countFleid == undefined) {
|
sums[index] = ''
|
return
|
}
|
if (this.data.countFleid.filter(str => {
|
return str === column.property
|
}).length > 0) {
|
sums[index] = values.reduce((prev, curr) => {
|
const value = Number(curr);
|
if (!isNaN(value)) {
|
return prev + curr;
|
} else {
|
return prev;
|
}
|
}, 0);
|
sums[index] += '';
|
} else {
|
sums[index] = '';
|
}
|
});
|
return sums;
|
}
|
}
|
}
|
</script>
|
