iview设置table的height,第一次查看没有问题,在esc后再次打开,由于事件触发刷新,会导致格式乱。
是由于空数据时,丢失若干列,标题肥大。解决方式先将height设置为0;在触发时在设置具体高度,退出再设置为0.
<template>
<div v-draggable="options">
<Card style="margin-bottom: 10px">
<p slot="title">下拉列表查询</p>
<Row style="margin-bottom: 10px" type="flex" justify="space-around">
<Col span="4">
字段名称
<Input type="text" v-model="fldNm" placeholder="请输入字段名称" />
</Col>
<Col span="4">
字段描述
<Input type="text" v-model="varDescr" placeholder="请输入字段描述" />
</Col>
</Row>
<Row :gutter="10" type="flex" justify="center">
<Col :lg="2" :md="2">
<Button type="primary" @click="handleQuery">查询</Button>
</Col>
<Col :lg="2" :md="2">
<Button type="warning" @click="handleReset">重置</Button>
</Col>
</Row>
</Card>
<Card>
<div slot="title">
<p style="display: inline">下拉扩展列表</p>
<Button type="primary" style="margin-left: 20px" @click="handleBtnIncrease" :disabled="this.$store.state.user.access === '3'">新增</Button>
</div>
<Table
size="small"
:loading="tableLoading"
:columns="columns2"
:data="tableData"
style="margin-bottom: 10px"
></Table>
<div class="pageContainer">
<Page
:current="parseInt(pageConfig.currentPage)"
:total="parseInt(pageConfig.total)"
:page-size-opts="pageConfig.pageSizeOpt"
:page-size="parseInt(pageConfig.pageSize)"
show-sizer
show-elevator
show-total
@on-change="handlePageChange"
@on-page-size-change="handlePageSizeChange"
></Page>
</div>
</Card>
<Modal
id="drg52"
v-model="modal2"
:mask-closable="false"
@on-cancel="handleModalCancel"
:styles="{'top': '100px','width':'70%'}"
>
<p
slot="header"
>{{(modalOperation === '0') ? '新增下拉列表扩展' : (modalOperation === '1') ? '修改下拉扩展列表' : '复制数据字典'}}</p>
<Form ref="systemForm" :model="systemFormData" :rules="systemFormRules" inline>
<Row :gutter="32" type="flex" justify="center">
<Col push="1" span="12">
<FormItem label="下拉列表扩展编号" prop="listNum">
<Input
type="text"
v-model="systemFormData.listNum"
placeholder="请输入下拉列表扩展编号"
style="width: 190px"
/>
</FormItem>
</Col>
<Col push="1" span="12">
<FormItem label="字段名" prop="listCd">
<Input
:disabled="modalOperation === '1'"
type="text"
v-model="systemFormData.listCd"
placeholder="请输入字段名"
style="width: 190px"
/>
</FormItem>
</Col>
</Row>
</Form>
<Table @on-selection-change="selectChange" ref="selection" :columns="columns4" :data="data1" :height="heightNum"></Table>
<div slot="footer" style="display:flex;justify-content: center">
<Button
v-if="modalOperation === '0' || modalOperation === '2'"
type="primary"
:loading="loading"
icon="checkmark-round"
@click="handleIncreaseSubmit('systemForm')"
>
<span v-if="!loading">新增</span>
<span v-else>提交中...</span>
</Button>
<Button
v-else
type="primary"
:loading="loading"
icon="checkmark-round"
@click="handleModifySubmit('systemForm')"
>
<span v-if="!loading">修改</span>
<span v-else>提交中...</span>
</Button>
<Button
v-if="modalOperation === '0'"
type="warning"
icon="refresh"
@click="handleResetForm('systemForm')"
>重置</Button>
</div>
</Modal>
</div>
</template>
<script>
import { datetimeFormat } from "../Util/DateUtil";
import {download} from '../Util/Download';
export default {
name: "dictLisPower",
data() {
// 系统号校验器
const validateSysNo = (rule, value, callback) => {
this.heightNum = 400
this.data1 = [
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
{
listCd: 'John Brown',
wordListCaptn: 18,
listVal: 'New York No. 1 Lake Park',
},
],
callback()
// 后台请求
// this.$ajax
// .post("", {
// listCd: this.systemFormData.listCd
// })
// .then(
// res => {
// console.log(res)
// callback();
// },
// );
};
return {
selection:"",
// iview的bug
heightNum:0,
columns4: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
type: 'index',
title: '序号',
width: 60,
align: 'center'
},
{
title: '枚举代码',
key: 'listCd',
align: 'center'
},
{
title: '枚举说明',
key: 'wordListCaptn',
align: 'center'
},
{
title: '枚举值',
key: 'listVal',
align: 'center'
},
],
data1:[],
enumFlag: [
{
// 处理方式下拉Option数据
value: "true",
label: "是"
},
{
value: "false",
label: "否"
}
],
dataTpFlg: [
{
// 处理方式下拉Option数据
value: "String",
label: "String"
},
{
value: "BigDecimal",
label: "BigDecimal"
},
{
value: "Time",
label: "Time"
},
{
value: "Date",
label: "Date"
},
{
value: "Long",
label: "Long"
},
{
value: "byte[]",
label: "byte[]"
},
{
value: "Clob",
label: "Clob"
},
{
value: "char",
label: "char"
}
],
options: {
// 拖拽参数
id: "drg52",
recover: true,
isClose: false
},
contactFormData: {
// 新增联系人表单数据对象
},
contactFormRules: {
// 新增联系人表单校验规则
},
tableLoading: false, // Table Loading 遮罩
loading: false, // 按钮Loading
sysNo: "", // 搜索框
fldNm: "",
varDescr: "",
columns2: [
// Table Columns 数据
{
title: "序号",
key: "indexNum",
width: 100,
align: "center"
},
{
title: "字段名称",
key: "fldNm",
width: 233,
align: "center"
},
{
title: "字段描述",
key: "varDescr",
width: 233,
align: "center"
},
{
title: "数据类型",
key: "dataTp",
width: 200,
align: "center"
},
{
title: "长度",
key: "len",
width: 100,
align: "center"
},
{
title: "精确度",
key: "decmPointBit",
width: 100,
align: "center"
},
{
title: "是否枚举",
key: "globalEnumFlg",
width: 133,
align: "center"
},
{
title: "序列号",
key: "recdNo",
width: 300,
align: "center"
},
{
title: "操作",
key: "operation",
width: 263,
align: "center",
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "primary",
size: "small",
disabled: this.$store.state.user.access === '3'
},
on: {
click: () => {
this.handleModifyModal(params.row);
}
}
},
"编辑"
),
h(
"Button",
{
style: {
marginLeft: "5px"
},
props: {
type: "success",
size: "small",
disabled: this.$store.state.user.access === '3'
},
on: {
click: () => {
this.handleCopyJob(params.row);
}
}
},
"复制"
),
h(
"Poptip",
{
props: {
confirm: true,
title: "确定删除字段名为[" + params.row.fldNm + "]的吗?",
transfer: true,
placement: "left"
},
on: {
"on-ok": () => {
this.deleteSystem(params.row.fldNm);
}
}
},
[
h(
"Button",
{
props: {
type: "error",
size: "small",
disabled: this.$store.state.user.access === '3'
},
style: {
marginLeft: "10px"
}
},
"删除"
)
]
)
]);
}
}
],
dictIdTemp: "", // 临时系统ID
searchById: "", // 添加系统维护人员按ID查找搜索框绑定值
searchByName: "", // 添加系统维护人员按姓名查找搜索框绑定值
tableData: [], // Table 数据
option2: [], // ID搜索下拉Option数据
option3: [], // 姓名搜索下拉Option数据
pageConfig: {
// 分页组件数据
pageSizeOpt: [10, 20],
total: "0",
pageSize: "10",
currentPage: "1"
},
contactList: [], // 维护联系人Table数据
loading1: false, // 工号搜索Loading
loading2: false, // 姓名搜索Loading
modal2: false, // 是否显示新增/修改系统信息弹出框
modal3: false, // 是否显示添加/修改系统维护联系人弹出框
modal4: false, // 是否显示添加联系人弹出框
modalOperation: "0", // 新增/编辑系统操作类型
contactModalType: "0", // 添加/修改维护人员操作类型
systemFormData: {
// 新增/修改系统表单
listCd: "",
listNum: "",
},
systemFormRules: {
// 新增/修改系统表单校验规则
listCd: [
{
required: true,
validator: validateSysNo,
trigger: "blur"
}
],
listNum: [
{
required: true,
type: "string",
message: "扩展下拉编号不可以为空",
trigger: "blur"
}
],
}
};
},
methods: {
// 选择触发参数
selectChange(selection){
this.selection = selection
},
// 为数据添加序号字段
addIndexNumForData(arr, pageNum) {
arr.forEach((item, index) => {
item.indexNum = (pageNum - 1) * this.pageConfig.pageSize + index + 1;
});
return arr;
},
// 点击查询按钮
handleQuery() {
this.pageConfig.currentPage = "1";
this.getSystemInfo();
},
// 点击重置按钮
handleReset() {
this.fldNm = "";
this.varDescr = "";
this.pageConfig.currentPage = "1";
this.getSystemInfo();
},
// 系统列表页码变化时
handlePageChange(clickPageNum) {
this.pageConfig.currentPage = "" + clickPageNum;
this.getSystemInfo();
},
// 系统列表分页数据量变换时
handlePageSizeChange(pageSize) {
this.pageConfig.pageSize = pageSize;
if (this.pageConfig.currentPage === "1") {
this.getSystemInfo();
}
},
// 点击新增按钮
handleBtnIncrease() {
this.handleResetForm("systemForm");
this.options.isClose = false;
this.modalOperation = "0";
this.modal2 = true;
},
// 新增/修改系统表单对话框被关闭时
handleModalCancel() {
this.handleResetForm("systemForm");
this.data1 = [],
this.heightNum = 0;
this.options.isClose = true;
},
// 点击编辑按钮弹出修改系统对话框前的处理
handleModifyModal(rowData) {
this.options.isClose = false;
this.modalOperation = "1";
this.systemFormData = {
fldNm: rowData.fldNm,
varDescr: rowData.varDescr,
dataTp: rowData.dataTp,
len: rowData.len,
decmPointBit: rowData.decmPointBit,
globalEnumFlg: rowData.globalEnumFlg
};
this.modal2 = true;
},
// 向后台请求删除系统
deleteSystem(sysNo) {
this.$ajax
.post("/dictDef/delete", {
fldNm: sysNo
})
.then(
res => {
let data = res.data;
if (data.responseCode === "000000") {
this.$Message.success("删除系统[" + sysNo + "]成功!");
this.getSystemInfo();
} else {
this.$Notice.error({
title: "删除系统失败,错误信息",
desc: data.responseMsg,
duration: 0
});
}
},
err => {
this.$Notice.error({
title: "删除系统失败,错误信息",
desc: err.message,
duration: 0
});
}
);
},
// 新增/修改系统表单数据组装
handlePreSendData() {
return {
listCd: this.systemFormData.listCd,
listNum: this.systemFormData.listNum,
selection: this.selection
};
},
// 文件导出
exportDict () {
download(this, '/dict/exportDict',{
},"数据字典");
},
// 新增联系人表单数据组装
handlePerSendContact() {
return {
notiUserid: this.contactFormData.jobId,
notiUsername: this.contactFormData.name,
department: this.contactFormData.department,
phone: this.contactFormData.phone,
email: this.contactFormData.email,
douya: this.contactFormData.douya,
createUser: this.$store.state.user.userName
};
},
// 请求新增系统
handleIncreaseSubmit(name) {
if (name === "systemForm") {
// this.$refs[name].validate(valid => {
// if (valid) {
// this.loading = true;
let sendData = this.handlePreSendData();
console.log(sendData)
// this.$ajax.post("", sendData).then(
// res => {
// this.loading = false;
// },
// err => {
// this.$Notice.error({
// title: "新增数据字典,错误代码",
// desc: err.message,
// duration: 0
// });
// this.loading = false;
// }
// );
// } else {
// this.$Message.error("表单校验失败");
// }
// });
}
},
// 请求修改系统信息
handleModifySubmit(name) {
if (name === "systemForm") {
this.$refs[name].validate(valid => {
if (valid) {
this.loading = true;
let sendData = this.handlePreSendData();
this.$ajax.post("/dictDef/modify", sendData).then(
res => {
let data = res.data;
if (data.responseCode === "000000") {
this.options.isClose = true;
this.$Message.success({
content: "修改数据[" + sendData.fldNm + "]信息成功!",
duration: 5
});
this.modal2 = false;
this.handleResetForm("systemForm");
this.getSystemInfo();
} else {
this.$Notice.error({
title: "修改数据失败,错误信息",
desc: data.responseMsg,
duration: 0
});
}
this.loading = false;
},
err => {
this.$Notice.error({
title: "修改数据失败,错误代码",
desc: err.message,
duration: 0
});
this.loading = false;
}
);
} else {
this.$Message.error("表单校验失败");
}
});
}
},
// 新增/修改系统表单数据重置
handleResetForm(name) {
this.$refs[name].resetFields();
},
// 时间格式化
assembleSystemData(arr) {
for (let sysItem of arr) {
sysItem.createTime = datetimeFormat(sysItem.createTime);
}
return arr;
},
// 获取系统列表数据
getSystemInfo() {
this.tableLoading = true;
let requestUrl = this.fldNm ? "/dictDef/select" : "/dictDef/select";
this.$ajax
.post(requestUrl, {
fldNm: this.fldNm,
varDescr: this.varDescr,
page: this.pageConfig.currentPage,
row: this.pageConfig.pageSize
})
.then(
res => {
let data = res.data;
if (data.responseCode === "000000") {
this.pageConfig.total = data.total;
this.tableData = this.assembleSystemData(
this.addIndexNumForData(data.items, this.pageConfig.currentPage)
);
} else {
this.$Notice.error({
title: "获取数据字典信息失败,错误信息",
desc: data.responseMsg,
duration: 0
});
}
this.tableLoading = false;
},
err => {
this.$Notice.error({
title: "获取数据字典信息失败,错误信息",
desc: err.message,
duration: 0
});
this.tableLoading = false;
}
);
},
//数据字典复制
handleCopyJob(rowData) {
this.options.isClose = false;
this.modalOperation = "2";
this.assembleFormData(rowData);
this.modal2 = true;
},
// 组装新增/修改作业表单数据
assembleFormData(rowData) {
this.systemFormData = {
fldNm: rowData.fldNm,
varDescr: rowData.varDescr,
dataTp: rowData.dataTp,
len: rowData.len,
decmPointBit: rowData.decmPointBit,
globalEnumFlg: rowData.globalEnumFlg
};
}
},
activated() {
this.getSystemInfo();
}
};
</script>
<style scoped>
</style>