<template>
|
<div class="property-info">
|
<!-- <p class="title">房产基本信息</p> -->
|
<CreateForms
|
ref="houseList"
|
:isReset="true"
|
:isView="true"
|
:screenWidth="1000"
|
:isShowBorder="isShowBorder"
|
:formItems="formItems"
|
:defValues="defValues"
|
:formRules="formRules"
|
@handleInputChange="handleInputChange"
|
@handleSelOnChange="handleSelOnChange"
|
/>
|
<!-- <p class="title" style="margin-top:20px">产权人信息</p> -->
|
<el-row class="add-button">
|
<el-col :span="24">
|
<el-button
|
type="primary"
|
size="small"
|
icon="el-icon-circle-plus-outline"
|
@click="handleAddCus"
|
class="add_btn"
|
>新增</el-button>
|
</el-col>
|
</el-row>
|
<EditTable
|
ref="cusForm"
|
:isAutoIndex="true"
|
:rules="rules"
|
:tableData="records"
|
:columns="columns"
|
:noHistory="noHistory"
|
:pageInfo="editPageInfo"
|
operateLabel="操作"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
@handleOperateClick="handleOperateClick"
|
/>
|
<el-row class="close-botton">
|
<el-col :span="24">
|
<el-button size="small" @click="handleDialogCancel" class="close">关闭</el-button>
|
</el-col>
|
</el-row>
|
<Dialog
|
v-model="isCancle"
|
title="取消确认"
|
:buttons="[{text: '否'},{text: '是', type: 'primary'}]"
|
@handleClick="clickCancle"
|
:contentText="`当前有数据未保存，是否放弃保存?`"
|
></Dialog>
|
</div>
|
</template>
|
|
<script>
|
import EditTable from "@/views/components/EditTable";
|
import CreateForms from "@/views/components/CreateForms";
|
|
import {
|
getDictionaryList,
|
qryPropertyInfoList,
|
propertyInfoUpdate,
|
delPropertyInfo,
|
houseInfoUpdate
|
} from "@/http/api.js";
|
|
import { mainTainDetail } from "../config/formItem.config";
|
import { mainTainDetailCol } from "../config/column.config";
|
import { mainTainDefault } from "../config/defValues.config";
|
|
const ADDITEMS = {
|
operationTime: "",
|
changeRemark: "",
|
operationUserName: "",
|
operationOrgName: "",
|
isEidt: true,
|
operate: [
|
{ label: "保存", type: "save", isShow: true },
|
{ label: "修改", type: "edit", isShow: false },
|
{ label: "删除", type: "delete", isShow: true }
|
]
|
};
|
|
export default {
|
components: {
|
CreateForms,
|
EditTable
|
},
|
props: {
|
tempRecord: {
|
type: Object,
|
default: () => {}
|
},
|
noHistory: {
|
type: Boolean,
|
default: () => {
|
return false;
|
}
|
}
|
},
|
created() {
|
this.init();
|
this.initTable();
|
},
|
data() {
|
return {
|
editPageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
isShowBorder: false,
|
formItems: [...mainTainDetail],
|
defValues: { ...mainTainDefault },
|
formRules: {},
|
columns: [...mainTainDetailCol],
|
records: [],
|
rules: {},
|
index: "",
|
isCancle: false
|
};
|
},
|
methods: {
|
init() {
|
// this.formItems = [...mainTainDetail];
|
// this.defValues = { ...mainTainDefault };
|
// this.columns = [...mainTainDetailCol];
|
const { defValues, tempRecord } = this;
|
for (let key in defValues) {
|
for (let tempKey in tempRecord) {
|
if (key === tempKey) {
|
defValues[key] = tempRecord[tempKey] ? tempRecord[tempKey] : "--";
|
}
|
}
|
}
|
this.setSelectOptions();
|
},
|
async initTable() {
|
const { editPageInfo, houseSerialno = "" } = this;
|
const params = {
|
...editPageInfo,
|
houseSerialno
|
};
|
const { result } = await qryPropertyInfoList(params);
|
const records = result.records.map(item => {
|
const newItem = { ...item };
|
// 原同事封装的组件。下拉框有描述值时,将描述值字段赋值给isdeleteValue,否则无法显示下拉框的值
|
newItem.isdeleteValue = newItem.certTypeDesc;
|
newItem.operate = [
|
{ label: "保存", type: "save", isShow: false },
|
{ label: "修改", type: "edit", isShow: true },
|
{ label: "删除", type: "delete", isShow: true }
|
];
|
return newItem;
|
});
|
this.$set(this, "records", records);
|
this.$set(this.editPageInfo, "total", result.total);
|
},
|
setSelectOptions() {
|
const { columns } = this;
|
columns.forEach(({ name }) => {
|
if (name === "operationType") {
|
this.getDictionaryList(name);
|
}
|
});
|
},
|
async getDictionaryList(name) {
|
const codeNo = name.substring(0, 1).toUpperCase() + name.substring(1);
|
const { result } = await getDictionaryList({ codeNo });
|
const list = result.map(item => {
|
return {
|
label: item.itemname,
|
value: item.itemno
|
};
|
});
|
if (name === "certType") {
|
this.tempOptions = [...list];
|
}
|
this.updateValue(name, { options: list });
|
},
|
async getCityCodeList(name, value) {
|
const { result } = await getCityCodeList({
|
codeNo: "AreaCode",
|
itmeNo: value
|
});
|
const list = result.map(item => {
|
return {
|
label: item.itemName,
|
value: item.itemNo
|
};
|
});
|
this.updateValue(name, { options: list });
|
},
|
async getAreaCodeList(name, value) {
|
const { result } = await getAreaCodeList({
|
codeNo: "AreaCode",
|
itmeNo: value
|
});
|
const list = result.map(item => {
|
return {
|
label: item.itemName,
|
value: item.itemNo
|
};
|
});
|
this.updateValue(name, { options: list });
|
},
|
updateValue(index, info) {
|
// console.log(index, info);
|
const { formItems } = this;
|
const nameIndex = formItems.findIndex(({ name }) => name === index);
|
if (nameIndex > -1) {
|
const preInfo = formItems[nameIndex];
|
this.$set(formItems, nameIndex, { ...preInfo, ...info });
|
} else {
|
const { columns } = this;
|
const tempIndex = columns.findIndex(({ name }) => name === index);
|
if (tempIndex > -1) {
|
const preInfo1 = columns[tempIndex];
|
this.$set(columns, tempIndex, { ...preInfo1, ...info });
|
// console.log(columns);
|
}
|
}
|
},
|
handleAddCus() {
|
const { records, $set } = this;
|
if (records.length > 0 && records.some(da => da.isEidt)) {
|
this.$message.error("您还有未保存的客群清单，请先保存");
|
return false;
|
}
|
let newList = [{ ...ADDITEMS }, ...records];
|
const newColumns = [...this.columns];
|
if (newList.length > 10) {
|
newList = newList.slice(0, 10);
|
}
|
$set(this.editPageInfo, "total", this.editPageInfo.total + 1);
|
$set(this, "columns", newColumns);
|
$set(this, "records", newList);
|
},
|
handleDialogCancel() {
|
this.$emit("closeDialog", "close");
|
},
|
async saveInfo() {
|
const { records } = this;
|
const { defValues } = this.$refs.houseList;
|
// const { houseSerialno } = defValues
|
// records.forEach(item => {
|
// item.houseSerialno = houseSerialno
|
// })
|
const params = {
|
...defValues,
|
propertyList: [...records]
|
};
|
const res = await houseInfoUpdate(params);
|
this.$message.success("新增成功");
|
this.$emit("closeDialog", "add");
|
},
|
handleInputChange() {},
|
handleSelOnChange(name, value) {},
|
// 修改翻页条数
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val;
|
this.getBoardList();
|
},
|
// 修改翻页数
|
handleCurrentChange(val) {
|
this.pageInfo.currentPage = val;
|
this.getBoardList();
|
},
|
// 表单事件回调
|
// 操作
|
async handleOperateClick(type, data, index) {
|
const { records, $set, columns, houseSerialno = "" } = this;
|
|
if (type === "save") {
|
const { propertyName, certType, certId } = data;
|
const params = {
|
propertyName,
|
certType,
|
certId,
|
houseSerialno,
|
propertyNo: ""
|
};
|
if (propertyName && certType && certId) {
|
await propertyInfoUpdate(params);
|
this.$message.success("保存成功");
|
this.initTable();
|
} else {
|
this.$message.warning("表格信息不能为空,请仔细检查!");
|
}
|
}
|
if (type === "edit") {
|
const newData = [...this.records];
|
const newDataItem = newData.filter((item, i) => i === index)[0];
|
newDataItem.isEidt = true;
|
newDataItem.operate = [
|
{ label: "保存", type: "save", isShow: true },
|
{ label: "修改", type: "edit", isShow: false },
|
{ label: "取消", type: "cancle", isShow: true }
|
];
|
newData[index] = newDataItem;
|
const newColumns = [...columns];
|
$set(this, "columns", newColumns);
|
$set(this, "records", [...newData]);
|
}
|
if (type === "delete") {
|
const newData = records.filter((item, i) => i !== index);
|
const { isEidt = false, propertyNo } = data;
|
if (!isEidt) {
|
this.toDelete(propertyNo);
|
}
|
this.initTable();
|
$set(this, "records", [...newData]);
|
}
|
if (type === "cancle") {
|
this.isCancle = true;
|
}
|
},
|
async toDelete(propertyNo) {
|
const delRes = await delPropertyInfo({ propertyNo });
|
if (delRes.code !== "00") {
|
return;
|
}
|
this.$message({
|
showClose: true,
|
message: "删除成功",
|
type: "success"
|
});
|
},
|
clickCancle(index) {
|
if (index === 0) {
|
this.isCancle = false;
|
} else {
|
this.isCancle = false;
|
this.initTable();
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.property-info {
|
& .title {
|
margin: 0 0 20px;
|
color: #222;
|
}
|
& .add-button {
|
margin-bottom: 20px;
|
}
|
& .dialog-footer {
|
width: 100%;
|
display: inline-block;
|
margin-top: 20px;
|
text-align: center;
|
& button {
|
width: 120px;
|
height: 30px;
|
border-radius: 4px;
|
line-height: 2px;
|
border: 1px solid #409eff;
|
}
|
& .el-button--default {
|
margin-right: 10px;
|
border-color: rgba(204, 204, 204, 1);
|
}
|
}
|
& .close-botton {
|
margin-top: 20px;
|
text-align: center;
|
& .close {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
font-size: 14px;
|
border-radius: 4px;
|
border: 1px solid rgba(204, 204, 204, 1);
|
}
|
& .save-bottom {
|
width: 120px;
|
height: 30px;
|
line-height: 7px;
|
font-size: 14px;
|
border-radius: 4px;
|
border: 1px solid rgba(204, 204, 204, 1);
|
}
|
}
|
}
|
</style>
|
