<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2024-01-18 14:55:20
-->
<template>
<div>
<div>
<div>
<el-form-item label="共有方式：">
<el-radio-group :disabled="!disabled" v-model="sldyData.gyfs" change="gyfsChange">
<el-radio label="0">单独所有</el-radio>
<el-radio label="1">共同共有</el-radio>
<el-radio label="2">按份所有</el-radio>
<el-radio label="3">其它共有</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div v-show="sldyData.gyfs != '0'">
<el-form-item label="是否分别持证：">
<el-radio-group v-model="sldyData.sqfbcz" :disabled="!disabled">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="持证人：" v-show="sldyData.sqfbcz == '0'">
<el-select v-model="czr" placeholder="持证人" :disabled="!disabled">
<el-option
v-for="(item, index) in tableDataList"
:key="index"
:label="item.sqrmc"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</div>
</div>
<lb-table
:column="column"
:pagination="false"
:key="key"
:heightNumSetting="true"
:minHeight="0"
:rowStyleHeight="25"
:data="tableDataList"
>
</lb-table>
<addSqr
v-model="dialog"
:details="details"
:showButton="disabled"
@updateDetail="handleupdateDetail"
/>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { getIdCardInfo } from "@/utils/operation.js";
import addSqr from "./addSqr.vue";
export default {
components: { addSqr },
computed: {
...mapGetters(["dictData"]),
},
props: {
qlrData: {
type: Array,
default: function () {
return [];
},
},
sldyData: {
type: Object,
default: function () {
return {};
},
},
disabled: {
type: Boolean,
default: true,
},
},
data() {
return {
key: 0,
dataIndex: 0,
dialog: false,
isaddupdate: false,
details: {},
tableDataList: [],
InformationTable: [
{
width: "50",
renderHeader: (h, scope) => {
return (
<div>
{" "}
{!this.disabled ? (
"序号"
) : (
<i
class="el-icon-plus pointer"
onClick={() => {
this.addClick();
}}
></i>
)}
</div>
);
},
render: (h, scope) => {
return (
<div>
{!this.disabled ? (
<span>{scope.$index + 1}</span>
) : (
<i
class="el-icon-minus pointer"
onClick={() => {
this.deleClick(scope.$index, scope.row);
}}
></i>
)}
</div>
);
},
},
{
prop: "sqrmc",
label: "姓名/名称",
},
{
prop: "zjzl",
label: "证件种类",
render: (h, scope) => {
return (
this.dictData["A30"] &&
this.dictData["A30"].map((option) => {
if (option.dcode == scope.row.zjzl) {
return <span>{option.dname}</span>;
}
})
);
},
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "dh",
label: "联系电话",
},
{
label: "操作",
render: (h, scope) => {
return (
<div>
{this.disabled ? (
<el-button
icon="el-icon-edit-outline"
type="text"
onClick={() => {
this.editClick(scope.$index, scope.row);
}}
>
编辑
</el-button>
) : (
<el-button
icon="el-icon-view"
type="text"
onClick={() => {
this.queryViewClick(scope.$index, scope.row);
}}
>
{" "}
查看
</el-button>
)}
</div>
);
},
},
],
column: [],
czr: "",
};
},
watch: {
qlrData: {
handler: function (val, oldVal) {
let that = this;
this.$nextTick(() => {
if (val.length == 0 || !val) {
} else {
that.tableDataList = _.cloneDeep(val);
that.key++;
}
});
},
immediate: true,
deep: true,
},
//监听共有方式
"sldyData.gyfs": {
handler(newVal, oldValue) {
let dataList = _.cloneDeep(this.InformationTable);
if (newVal == "0") {
if (this.tableDataList.length > 1) {
this.$message({
showClose: true,
message: "单独所有，只能添加一条权利人记录",
type: "error",
});
sldyData.gyfs = oldValue;
return false;
}
this.ruleForm.qlrList[0].sfczr = "1";
this.column = _.cloneDeep(dataList);
this.tableDataList = _.cloneDeep(this.qlrData);
this.key++;
} else if (newVal == "1" || newVal == "3") {
this.column = dataList;
} else {
this.column = _.cloneDeep(dataList);
this.column.splice(2, 0, {
prop: "qlbl",
label: "份数",
});
}
},
immediate: true,
},
//监听申请分别持证
"sldyData.sqfbcz": {
handler(newVal, oldValue) {
if (newVal == 0) {
let that = this;
if (sldyData.gyfs != "0") {
this.tableDataList.forEach((item) => {
if (item.bsmSqr == that.czr) {
item.sfczr = "1";
} else {
item.sfczr = "0";
}
});
}
} else {
this.tableDataList.forEach((item, index) => {
item.sfczr = "1";
});
this.czr = "";
}
},
immediate: true,
},
},
mounted() {
let that = this;
if (this.sldyData.gyfs != "0" && this.sldyData.sqfbcz == 0) {
this.qlrData.forEach((item) => {
if (item.sfczr == "1") {
that.czr = item.bsmSqr;
}
});
}
},
methods: {
/**
* @description: handleupdateDetail
* @param {*} value
* @author: renchao
*/
handleupdateDetail(value) {
let that = this;
let arr = this.tableData.map((item) => item.zjh);
if (this.isaddupdate) {
if (!_.isEqual(value, this.tableData)) {
this.tableDataList[this.tableDataList.length] = _.cloneDeep(value);
this.$emit("upDateQlrxxList", this.tableDataList);
}
} else {
if (!_.isEqual(value, this.tableData)) {
this.tableDataList[this.dataIndex] = _.cloneDeep(value);
this.$emit("upDateQlrxxList", this.tableDataList);
}
}
this.key++;
},
/**
* @description: 新增
* @author: renchao
*/
addClick() {
if (this.gyfs == "0" && this.tableDataList.length > 0) {
this.$message.warning("当前共有方式为单独所有，无法添加多个权利人");
} else {
this.key++;
this.details = {
sqrmc: "",
zjzl: "1",
zjh: "",
xb: "",
txdz: "",
fzjg: "",
};
this.dialog = true;
this.isaddupdate = true;
}
},
/**
* @description: 删除
* @param {*} index
* @param {*} row
* @author: renchao
*/
deleClick(index, row) {
this.tableDataList.splice(index, 1);
this.$emit("upDateQlrxxList", this.tableDataList);
this.key++;
},
/**
* @description: 身份证读取
* @param {*} row
* @author: renchao
*/
readClick(row) {
function getObjectByValue(arrayOfObjects, value) {
var name = "";
arrayOfObjects.forEach((item) => {
if (item.dname.includes(value)) name = item.dcode;
});
return name;
}
getIdCardInfo(this.BASE_API.gaopaiyi).then((res) => {
if (this.BASE_API.gaopaiyi == "jy") {
const { Name, IdNo, Sex, Address, Agencvy, PhotoB64 } =
JSON.parse(res);
if (Name != "") {
row.sqrmc = Name;
row.zjzl = "1";
row.zjh = IdNo;
row.xb = getObjectByValue(this.dictData["A43"], Sex);
row.txdz = Address;
row.fzjg = Agencvy;
row.avatar = "data:image/png;base64," + PhotoB64;
this.$message({
message: "读取成功！",
type: "success",
});
} else {
this.$message({
message: "请放置身份证",
type: "warning",
});
}
} else {
if (res.data.code == 0) {
let data = res.data.IDCardInfo;
const {
name,
cardID: zjh,
sexCode: xb,
address: txdz,
issueOrgan: fzjg,
photoBase64,
} = data;
row.sqrmc = name;
row.zjzl = "1";
row.zjh = zjh;
row.xb = xb;
row.txdz = txdz;
row.fzjg = fzjg;
row.avatar = "data:image/png;base64," + photoBase64;
this.$message({
message: "读取成功！",
type: "success",
});
} else {
this.$message({
message: res.data.message,
type: "warning",
});
}
}
this.$emit("upDateQlrxxList", this.tableDataList);
});
},
/**
* @description: 修改
* @param {*} index
* @param {*} row
* @author: renchao
*/
editClick(index, row) {
this.details = row;
this.details.gyfs = this.gyfs;
this.dataIndex = index;
this.dialog = true;
this.isaddupdate = false;
},
/**
* @description: queryViewClick
* @param {*} index
* @param {*} row
* @author: renchao
*/
queryViewClick(index, row) {
this.details = row;
this.dialog = true;
},
},
};
</script>
<style scoped lang="scss">
/deep/.el-table--small .el-table__cell {
padding: 0 0 !important;
}
/deep/.el-table th {
height: 30px !important;
}
/deep/.el-table .cell {
padding-right: 12px;
}
</style>