<template>
<div class="province">
<div class="province-box" ref="main" id="main">
<div class="top" :style="`height:${height.top}px`">
<div class="top-search">
<el-input size="mini" v-model="search.word" placeholder="输入代码/名称/拼音" style="width:300px" clearable>
</el-input>
<el-button size="mini" type="primary" style="margin-left:10px" icon="el-icon-search" title="搜索"
@click="loadProvince">搜索
</el-button>
</div>
<div class="top-button">
<el-button-group>
<el-button size="mini" type="primary" icon="el-icon-plus" title="新增" v-if="hasPower('新增')"
@click="addClick">
</el-button>
<el-button size="mini" type="warning" icon="el-icon-edit" title="编辑" v-if="hasPower('编辑')"
@click="editClick">
</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" title="删除" v-if="hasPower('删除')"
@click="removeClick">
</el-button>
</el-button-group>
</div>
</div>
<div class="center" :style="`height:${height.center}px`">
<el-table :data="tableData" border style="width: 100%" :height="`${height.center}`" size="mini"
@selection-change="selectTableDataChange">
<el-table-column type="selection" label="" align="center" width="40">
</el-table-column>
<el-table-column type="index" label="#" align="center" width="55">
</el-table-column>
<el-table-column prop="code" label="代码" align="center">
</el-table-column>
<el-table-column prop="fullname" label="全称" align="center">
</el-table-column>
<el-table-column prop="simplename" label="简称" align="center">
</el-table-column>
</el-table>
</div>
<div class="bottom" :style="`height:${height.bottom}px`">
<el-pagination @size-change="sizeChange" @current-change="indexChange" :current-page="page.index"
:page-sizes="page.sizes" :page-size="page.size" layout="total, slot, prev, pager, next, jumper"
:total="page.total">
<el-select size="mini" v-model="page.size" @change="sizeChange">
<el-option v-for="(item, index) in page.sizes" :key="index" :label="item===0?'全部':`${item}条/页`"
:value="item"></el-option>
</el-select>
</el-pagination>
</div>
</div>
<el-dialog :title="dialog.mode" :visible.sync="dialog.visible" center>
<el-form label-position="right" label-width="80px" :model="dialog.data" :rules="dialog.rules" ref="form"
:show-message="false" size="mini">
<el-form-item label="代码" prop="code">
<el-input v-model="dialog.data.code" placeholder="请输入代码" :disabled="dialog.mode==='编辑'"></el-input>
</el-form-item>
<el-form-item label="全称" prop="fullname">
<el-input v-model="dialog.data.fullname" placeholder="请输入全称"></el-input>
</el-form-item>
<el-form-item label="简称" prop="simplename">
<el-input v-model="dialog.data.simplename" placeholder="请输入简称"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialog.visible = false">取 消</el-button>
<el-button type="primary" @click="okClick">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ProvinceAPI } from '@/apis/ProvinceAPI'
@Component({
components: {}
})
export default class Province extends Vue {
// 表格数据
tableData: any[] = []
// 已选择的表格数据
selectedTableData: any[] = []
// 搜索参数
search: any = {
word: ''
}
// 分页参数
page: { index: number; size: number; total: number; sizes: number[] } = {
size: 20,
index: 1,
total: 400,
sizes: [10, 20, 30, 40, 50, 0]
}
// dialog参数
dialog: any = {
mode: '新增',
visible: false,
data: {},
rules: {
contractCode: [{ required: true }],
code: [{ required: true }]
}
}
// dialog 确定按钮
okClick() {
const form = this.$refs.form as any
form.validate((valid: any) => {
if (valid) {
if (this.dialog.mode === '新增') {
// 调用新增接口
ProvinceAPI.add(this.dialog.data, (res) => {
this.dialog.visible = false
this.$message.success('新增成功')
this.loadProvince()
})
}
if (this.dialog.mode === '编辑') {
// 调用编辑接口
ProvinceAPI.update(this.dialog.data, (res) => {
this.dialog.visible = false
this.$message.success('修改成功')
this.loadProvince()
})
}
} else {
return false
}
})
}
// 新增
addClick() {
this.dialog.mode = '新增'
this.dialog.data = {}
this.dialog.visible = true
}
// 编辑
editClick() {
if (this.selectedTableData.length === 0) {
this.$message.info('请选中要修改的数据')
return
}
if (this.selectedTableData.length > 1) {
this.$message.info('同时只能修改一条数据')
return
}
this.dialog.mode = '编辑'
this.dialog.data = JSON.parse(JSON.stringify(this.selectedTableData[0]))
this.dialog.visible = true
}
// 删除
removeClick() {
if (this.selectedTableData.length === 0) {
this.$message.info('请选中要删除的数据')
return
}
const ids: any[] = []
this.selectedTableData.forEach((i) => {
ids.push(i.id)
})
// 调用删除接口
}
// 选择表格数据
selectTableDataChange(value: any[]) {
this.selectedTableData = value
}
sizeChange() {
this.loadProvince()
}
indexChange(val: any) {
this.page.index = val
this.loadProvince()
}
// 加载省份
loadProvince() {
if (this.page.size === 0) {
ProvinceAPI.getAll(this.search, (res) => {
this.tableData = res.data
this.page.total = res.data.length
})
return
}
this.search.index = this.page.index
this.search.size = this.page.size
ProvinceAPI.getPage(this.search, (res) => {
this.tableData = res.data
this.page.total = res.total
})
}
// 权限名称
powerName = ''
// 是否有权限
hasPower(name: string) {
return true
}
height: { top: number; center: number; bottom: number } = {
top: 60,
center: 0,
bottom: 30
}
elementResizeDetectorMaker = require('element-resize-detector')
mounted() {
this.$nextTick(() => {
this.setTableHeight()
})
const erd = this.elementResizeDetectorMaker()
erd.listenTo(document.getElementById('main'), () => {
this.setTableHeight()
})
this.loadProvince()
}
// 设置表的高度
setTableHeight() {
const main = this.$refs.main as any
this.height.center =
main.clientHeight - this.height.top - this.height.bottom
}
}
</script>
<style lang="scss" scoped>
.province {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 2px 5px 2px 5px;
.province-box {
width: 100%;
height: 100%;
.top {
width: 100%;
.top-search {
height: 50%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.top-button {
height: 50%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
}
.center {
width: 100%;
}
.bottom {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>
网友评论