<template>
|
<div class="table_list_main">
|
<SearchCondition
|
ref="condRef"
|
:info="condtions"
|
:conForm="conForm"
|
:buttonsList="[1, 2, 3]"
|
:isShowDetail="isShowDetail"
|
:screenWidth="screenWidth"
|
@handleOnSeach="handleOnSeach"
|
@handleOnRest="handleOnRest"
|
@handleClick="isShowDetail = !isShowDetail"
|
/>
|
<div />
|
<el-row class="add-button" v-if="!userDefined">
|
<el-col :span="24">
|
<el-button
|
type="primary"
|
size="small"
|
icon="el-icon-circle-plus-outline"
|
@click="handleAddPage"
|
class="add-btn"
|
>新增</el-button
|
>
|
</el-col>
|
</el-row>
|
<el-row class="add-button" v-if="userDefined">
|
<el-col :span="24">
|
<el-button
|
v-for="button in buttonsArr"
|
:key="button.type"
|
type="primary"
|
size="small"
|
:icon="button.icon"
|
@click="$emit('handleBtnClick', button.type)"
|
class="add-btn"
|
>{{ button.value }}</el-button
|
>
|
</el-col>
|
</el-row>
|
<ProTable
|
:pageInfo="pageInfo"
|
@doAction="doAction"
|
@handleSelectionChange="handleSelectionChange"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
:isAutoIndex="isAutoIndex"
|
:isMultipleSelect="isMultipleSelect"
|
:rowKeyName="this.rowKeyName"
|
:list="records"
|
:header="tableHeader"
|
:loading="loading"
|
/>
|
<el-dialog
|
:title="dialogstatusTitle"
|
:visible.sync="dialogVisible"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
:show-close="false"
|
width="1000"
|
center
|
custom-class="dialog_footer_set"
|
>
|
<CreateForms
|
ref="dialogForm"
|
v-if="dialogVisible"
|
:isReset="true"
|
:isView="isView"
|
:isShowBorder="isShowBorder"
|
:screenWidth="1000"
|
:formItems="formItems"
|
:defValues="defValues"
|
:formRules="formRules"
|
/>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleDialogCancel">{{
|
isView ? "关 闭" : "取 消"
|
}}</el-button>
|
<el-button type="primary" v-if="!isView" @click="submitForm">{{
|
subTitle
|
}}</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="删除确认"
|
:visible.sync="delDialogVisible"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:destroy-on-close="true"
|
:show-close="false"
|
width="450"
|
center
|
custom-class="dialog_footer_set del_dialog"
|
>
|
<div style="text-align: center">
|
请确认是否删除
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="delDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="deleteListItem">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import ProTable from "./ProTable";
|
import SearchCondition from "./SearchCondition";
|
import CreateForms from "./CreateForms";
|
import * as api from "@/http/api";
|
export default {
|
name: "TableList",
|
props: {
|
// 搜索条件配置项
|
condtionConfig: {
|
type: Array,
|
default: () => []
|
},
|
// 是否显示序号
|
isAutoIndex: {
|
type: Boolean,
|
default: true
|
},
|
// 是否支持多选
|
isMultipleSelect: {
|
type: Boolean,
|
default: false
|
},
|
// 搜索条件默认值配置项
|
condformdefConfig: {
|
type: Object,
|
default: () => {}
|
},
|
// 表格对应的列配置项
|
columnConfig: {
|
type: Array,
|
default: () => []
|
},
|
// 弹窗表单form配置项
|
formItemsConfig: {
|
type: Array,
|
default: () => []
|
},
|
// 弹窗表单form默认值配置项
|
defValuesConfig: {
|
type: Object,
|
default: () => {}
|
},
|
// 弹窗表单form校验配置项
|
formRulesConfig: {
|
type: Object,
|
default: () => {}
|
},
|
// 表格操作按钮
|
operateBtns: {
|
type: Array,
|
default: () => []
|
},
|
// 下拉选项对应的Code
|
optionsArr: {
|
type: Array,
|
default: () => []
|
},
|
// 列表获取接口名
|
listApiName: {
|
type: String,
|
default: ""
|
},
|
// 保存数据接口名
|
saveApiName: {
|
type: String,
|
default: ""
|
},
|
// 删除数据接口名
|
delApiName: {
|
type: String,
|
default: ""
|
},
|
// 弹窗title
|
dialogTitle: {
|
type: String,
|
default: ""
|
},
|
// 是否父组建处理行操作
|
isParentOperate: {
|
type: Boolean,
|
default: false
|
},
|
// row-key
|
rowKeyName: {
|
type: String,
|
default: ""
|
},
|
// 删除行的传参字段
|
deleteKey: {
|
type: String,
|
default: ""
|
},
|
// user-defined
|
userDefined: {
|
type: Boolean,
|
default: false
|
},
|
// 表格上方按钮定义
|
buttonsArr: {
|
type: Array,
|
default: () => []
|
},
|
// 保存表单额外字段
|
saveOtherkey: {
|
type: String,
|
default: ""
|
}
|
},
|
data() {
|
return {
|
condtions: [...this.condtionConfig],
|
restFormItems: [...this.condtionConfig],
|
tableHeader: [...this.columnConfig],
|
formItems: [...this.formItemsConfig],
|
defValues: { ...this.defValuesConfig },
|
formRules: { ...this.formRulesConfig },
|
conForm: { ...this.condformdefConfig },
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
records: [],
|
smsNo: "",
|
delKey: "",
|
subTitle: "新增",
|
dialogstatusTitle: this.dialogTitle,
|
screenWidth: document.body.offsetWidth,
|
condtionValue: {}, // 表单value集合
|
isShowBorder: false,
|
isShowDetail: false, // 是否显示所有表单项
|
isView: false,
|
loading: false,
|
btnLoading: false,
|
optionsData: {},
|
passValidate: false,
|
delDialogVisible: false,
|
dialogVisible: false
|
};
|
},
|
components: {
|
SearchCondition,
|
ProTable,
|
CreateForms
|
},
|
async mounted() {
|
window.addEventListener("resize", this.getScreenWidth);
|
await this.getTableList();
|
},
|
destroyed() {
|
window.removeEventListener("resize", this.getScreenWidth);
|
},
|
methods: {
|
getScreenWidth() {
|
this.$set(this, "screenWidth", document.body.offsetWidth);
|
},
|
// 获取列表
|
async getTableList() {
|
const { currentPage, pageSize } = this.pageInfo;
|
const loading = this.$loading({
|
lock: true,
|
text: "",
|
background: "hsla(0,0%,100%,.9)"
|
});
|
setTimeout(() => {
|
loading.close();
|
}, 1500);
|
const params = {
|
currentPage,
|
pageSize,
|
...this.condtionValue
|
};
|
const listRes = await api[this.listApiName](params);
|
loading.close();
|
if (listRes.code && listRes.code === "00") {
|
const newList =
|
listRes.result &&
|
listRes.result.records.map(item => {
|
const newItem = { ...item };
|
newItem.operationOption = this.operateBtns;
|
return newItem;
|
});
|
this.$set(this, "records", newList);
|
this.$set(
|
this.pageInfo,
|
"total",
|
listRes.result && listRes.result.total
|
);
|
}
|
},
|
// 搜索列表
|
handleOnSeach() {
|
const conRef = this.$refs.condRef;
|
this.$set(this, "condtionValue", conRef.$refs["conform"].model);
|
this.$set(this, "pageInfo", { currentPage: 1, pageSize: 10, total: 0 });
|
this.getTableList();
|
},
|
// 删除行
|
async deleteListItem() {
|
const selRes = await api[this.delApiName]({
|
[this.deleteKey]: this.delKey
|
});
|
if (!selRes || selRes.code !== "00") {
|
return false;
|
}
|
this.delDialogVisible = false;
|
this.getTableList();
|
this.$message.success("删除成功");
|
},
|
// 获取筛选条件value
|
setValueInfo(condtions) {
|
this.$set(this, "condtionValue", condtions);
|
},
|
|
// 重置
|
handleOnRest() {
|
this.$set(this, "condtionValue", {});
|
// this.$set(this, 'pageInfo', { currentPage: 1, pageSize: 10, total: 0 })
|
},
|
// 表单事件回调
|
async doAction(name, item, { type }) {
|
if (this.isParentOperate) {
|
this.$emit("handleClickRowBtn", type, item);
|
return false;
|
}
|
if (type === "EDIT") {
|
const oldValues = {};
|
this.subTitle = "确定";
|
Object.keys(this.defValues).forEach(el => {
|
oldValues[el] = item[el];
|
});
|
this.defValues = oldValues;
|
this.dialogVisible = true;
|
}
|
if (type === "DELETE") {
|
this.delKey = item[this.deleteKey];
|
this.delDialogVisible = true;
|
}
|
},
|
handleDialogCancel() {
|
this.formItems = [...this.formItemsConfig];
|
this.defValues = { ...this.defValuesConfig };
|
this.formRules = { ...this.formRulesConfig };
|
this.dialogVisible = false;
|
},
|
vailateForm() {
|
const formRef = this.$refs.dialogForm;
|
formRef.$refs["createForm"].validate(async valid => {
|
if (valid) {
|
this.passValidate = true;
|
return true;
|
} else {
|
this.passValidate = false;
|
this.$message.error("请完善必填项！");
|
return false;
|
}
|
});
|
},
|
async submitForm() {
|
await this.vailateForm();
|
const { passValidate } = this;
|
if (!passValidate) {
|
return false;
|
}
|
const formRef = this.$refs.dialogForm;
|
const params = {
|
...formRef.$refs["createForm"].model
|
};
|
if (this.saveOtherkey) {
|
params[this.saveOtherkey] = this.subTitle === "新增" ? "ADD" : "UPDATE";
|
}
|
const saveRes = await api[this.saveApiName](params);
|
if (saveRes && saveRes.code === "00") {
|
this.$message.success("保存成功");
|
this.getTableList();
|
}
|
this.handleDialogCancel();
|
},
|
handleSelectionChange(val) {
|
this.$emit("handleSelectionChange", val);
|
},
|
// 新增
|
handleAddPage() {
|
if (this.isParentOperate) {
|
this.$emit("operateHandleClick");
|
return false;
|
}
|
this.isView = false;
|
this.subTitle = "新增";
|
this.dialogVisible = true;
|
},
|
// 修改翻页条数
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val;
|
this.getTableList();
|
},
|
|
// 修改翻页数
|
handleCurrentChange(val) {
|
this.pageInfo.currentPage = val;
|
this.getTableList();
|
}
|
}
|
};
|
</script>
|
|
<style lang="less">
|
.table_list_main {
|
padding: 16px 0px 0 20px;
|
& .dialog_footer_set {
|
width: 1000px;
|
& .el-dialog__footer {
|
& .dialog-footer {
|
& .el-button--default {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
border-radius: 4px;
|
border: 1px solid rgba(204, 204, 204, 1);
|
}
|
& .el-button--primary {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
background: #0081f0;
|
border-color: #0081f0;
|
border-radius: 4px;
|
margin-left: 40px;
|
}
|
}
|
}
|
}
|
& .del_dialog {
|
width: 450px;
|
}
|
& .add-button {
|
padding: 2px 0 30px 0;
|
}
|
}
|
</style>
|
