<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;
|
}
|
</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">
|
<el-table-column type="selection" width="50" v-if="data.showSelect">
|
</el-table-column>
|
<el-table-column align="center" type="index" 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="145">
|
<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="50 + data.do.length * 30"
|
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="500px">
|
<div class="body" v-if="upDia">
|
<el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;">
|
<el-col :span="5" style="text-align: right;">{{a.value}}：</el-col>
|
<el-col :span="17" :offset="1">
|
<el-input v-model="upData[a.label]" size="small" clearable
|
v-if="showType(a.label, data.tagField) == null"></el-input>
|
<el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.tagField) != null"
|
style="width: 100%;">
|
<el-option v-for="(b, bi) in data.tagField[a.label].select" :key="bi" :value="b.value"
|
:label="b.label"></el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
</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="500px">
|
<div class="body" v-if="addDia">
|
<el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;">
|
<el-col :span="5" style="text-align: right;">{{a.value}}：</el-col>
|
<el-col :span="17" :offset="1">
|
<el-input v-model="upData[a.label]" size="small" clearable :placeholder="`请输入${a.value}`"
|
v-if="showType(a.label, data.tagField) == null"></el-input>
|
<el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.tagField) != null"
|
style="width: 100%;" :placeholder="`请选择${a.value}`">
|
<el-option v-for="(b, bi) in data.tagField[a.label].select" :key="bi" :value="b.value"
|
:label="b.label"></el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
</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>
|
</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
|
},
|
componentData: {
|
type: Object,
|
default: () => {
|
return {
|
entity: {
|
orderBy: {
|
field: 'id',
|
order: 'asc'
|
}
|
},
|
isIndex: true,
|
showSelect: true,
|
select: true,
|
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: true,
|
select: true,
|
do: [{
|
font: '删除',
|
type: 'text'
|
}],
|
type: []
|
},
|
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: {}
|
}
|
},
|
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()
|
},
|
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
|
},
|
main(row, 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
|
}
|
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) {
|
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]
|
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
|
}
|
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
|
})
|
}
|
}
|
}
|
</script>
|
