<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-10-08 09:46:31
-->
<template>
<!-- 受理信息 -->
<div class="slxx">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
:class="{ readonly: editDisabled }"
v-Loading="loading"
:show-message="false"
:label-position="flag ? 'top' : ''"
:inline="flag"
label-width="145px">
<div class="slxx_con" v-if="isShow" :class="flag ? 'formMarginBot0' : ''">
<div class="slxx_title title-block">
补录信息
<div class="triangle"></div>
</div>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="补录编号：">
<el-input disabled v-model="ruleForm.repair.ywh"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="补录人员：">
<el-input disabled v-model="ruleForm.repair.slry"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="补录时间：">
<el-input disabled v-model="ruleForm.repair.slsj"></el-input>
</el-form-item>
</el-col>
</el-row>
<div class="slxx_title title-block bdcqk">
土地所有权信息
<div class="count" v-if="ssqlxxshow">
<el-form-item
label="上手权利信息："
prop="ssQlxx.bdcqzh"
:rules="rules.ssQlxxrules">
<select-table
v-model="ruleForm.ssQlxx"
:table-width="730"
:tableData="ssQlxxList"
:props="props"
@change="ssQlxxchange">
<el-table-column
prop="qllxmc"
width="130"
label="权利类型"></el-table-column>
<el-table-column
prop="bdcqzh"
width="160"
label="不动产权证书"></el-table-column>
<el-table-column prop="qlrmc" label="权利人"></el-table-column>
<el-table-column prop="mjmc" label="面积"></el-table-column>
<el-table-column prop="ytmc" label="用途"></el-table-column>
<el-table-column prop="zl" label="坐落"></el-table-column>
</select-table>
</el-form-item>
</div>
<div class="triangle"></div>
</div>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="上手业务号：">
<el-input disabled v-model="ruleForm.qlxx.ssywh"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="登记类型："
prop="qlxx.djlx"
:rules="rules.djlxrules">
<el-select v-model="ruleForm.qlxx.djlx" @change="djlxchange">
<el-option
v-for="item in djlxlist"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="不动产单元号：">
<el-input disabled v-model="ruleForm.qlxx.bdcdyh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item
label="业务号："
prop="qlxx.ywh"
:rules="rules.ywhrules">
<el-input maxlength="20" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');" v-model="ruleForm.qlxx.ywh"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="权利类型：">
<el-input disabled v-model="ruleForm.qlxx.qllxmc"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="登簿人："
prop="qlxx.dbr"
:rules="rules.dbrrules">
<el-input v-model="ruleForm.qlxx.dbr"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="登记机构："
prop="qlxx.djjg"
:rules="rules.djjgrules">
<el-input v-model="ruleForm.qlxx.djjg"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="不动产权证号："
prop="qlxx.bdcqzh"
:rules="rules.bdcqzhrules">
<el-input v-model="ruleForm.qlxx.bdcqzh"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="权属状态：">
<el-select v-model="ruleForm.qlxx.qszt">
<el-option
v-for="item in qsztlist"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="登记原因：">
<el-input v-model="ruleForm.tdsyq.djyy"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="农用地面积：">
<div class="flex">
<el-input
maxlength="12"
v-model="ruleForm.tdsyq.nydmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="ruleForm.tdsyq.mjdw"
:disabled="!ableOperation"
style="width: 68px">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="耕地面积：">
<div class="flex">
<el-input
maxlength="12"
v-model="ruleForm.tdsyq.gdmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="ruleForm.tdsyq.mjdw"
:disabled="!ableOperation"
style="width: 68px">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="林地面积：">
<div class="flex">
<el-input
maxlength="12"
v-model="ruleForm.tdsyq.ldmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="ruleForm.tdsyq.mjdw"
:disabled="!ableOperation"
style="width: 68px">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="草地面积：">
<div class="flex">
<el-input
maxlength="12"
v-model="ruleForm.tdsyq.cdmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"></el-input>
<el-select
v-model="ruleForm.tdsyq.mjdw"
:disabled="!ableOperation"
style="width: 68px">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="其他农用地面积：">
<div class="flex">
<el-input
maxlength="12"
v-model="ruleForm.tdsyq.qtnydmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="ruleForm.tdsyq.mjdw"
:disabled="!ableOperation"
style="width: 68px">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="建筑使用面积：">
<div class="flex">
<el-input
maxlength="12"
v-model="ruleForm.tdsyq.jsydmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="ruleForm.tdsyq.mjdw"
:disabled="!ableOperation"
style="width: 68px">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="未利用地面积：">
<div class="flex">
<el-input
maxlength="12"
v-model="ruleForm.tdsyq.wlydmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="ruleForm.tdsyq.mjdw"
:disabled="!ableOperation"
style="width: 68px">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="登记时间："
prop="qlxx.djsj"
:rules="rules.djsjrules">
<el-date-picker
v-model="ruleForm.qlxx.djsj"
type="date"
class="width100"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="附记：">
<el-input v-model="ruleForm.tdsyq.fj" type="textarea" maxlength="500" show-word-limit></el-input>
</el-form-item>
</el-col>
</el-row>
<div class="slxx_title title-block">
土地用途
<div class="triangle"></div>
</div>
<tdytTable
:tableData="ruleForm.tdytqxList"
@upDateTdytxxList="upDateTdytxxList"
:ableOperation="ableOperation" />
<div class="slxx_title title-block">
权利人信息
<div class="triangle"></div>
</div>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="共有方式：">
<el-radio-group
:disabled="!ableOperation"
v-model="ruleForm.qlxx.gyfs">
<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>
</el-col>
</el-row>
<qlrCommonTable
:tableData="ruleForm.qlrData"
@upDateQlrxxList="upDateQlrxxList"
:key="key"
:ableOperation="ableOperation"
:gyfs="ruleForm.qlxx.gyfs" />
</div>
<el-row class="btn" v-if="ableOperation">
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-row>
</el-form>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import store from "@/store/index.js";
import ywmix from "@/views/ywbl/mixin/index";
import { init, getSsQlxx, getQlxxByQlxxBsm, save } from "@/api/djbRepair.js";
import qlrCommonTable from "@/views/djbworkflow/components/qlrCommonTable";
import selectTable from "@/components/selectTable/index.vue";
import tdytTable from "@/views/workflow/components/tdytTable";
export default {
mixins: [ywmix],
components: { qlrCommonTable, tdytTable, selectTable },
computed: {
...mapGetters(["dictData", "flag"]),
// 根据流程判断表单是否为只读
editDisabled () {
if (!this.ableOperation) {
//只读状态
return true;
}
return false;
},
},
data () {
return {
loading: false,
ssqlxxshow: true,
props: {
label: "bdcqzh",
value: "bdcdyid",
},
// 键名转换，方法默认是label和children进行树状渲染
normalizer (node) {
//方法
if (node.children == null || node.children == "null") {
delete node.children;
}
return {
id: node.dcode,
label: node.dname,
};
},
//表单是否可操作
propsParam: this.$attrs,
key: 0,
// 登记类型
djlxlist: [
{
dcode: "100",
dname: "首次登记",
},
{
dcode: "200",
dname: "转移登记",
},
{
dcode: "300",
dname: "变更登记",
},
{
dcode: "500",
dname: "更正登记",
},
{
dcode: "901",
dname: "补证",
},
{
dcode: "902",
dname: "换证",
},
],
// 权属状态
qsztlist: [
{
dcode: "1",
dname: "现势",
},
{
dcode: "2",
dname: "历史",
},
],
isShow: false,
disabled: true,
ssQlxxList: [],
ruleForm: {},
ableOperation: false,
//传递参数\
rules: {
ssQlxxrules: [
{ required: true, message: "上手权利信息", trigger: "blur" },
],
bdcqzhrules: [
{ required: true, message: "不动产权证号：", trigger: "blur" },
],
// qxdmrules: [{ required: true, message: "区县代码", trigger: "blur" }],
djjgrules: [{ required: true, message: "登记机构", trigger: "blur" }],
dbrrules: [{ required: true, message: "登簿人", trigger: "blur" }],
djsjrules: [{ required: true, message: "登记时间", trigger: "blur" }],
djlxrules: [{ required: true, message: "登记类型", trigger: "change" }],
ywhrules: [{ required: true, message: "业务号", trigger: "blur" }],
},
};
},
created () { },
mounted () {
this.loadData();
this.ableOperation = this.$parent.ableOperation;
},
methods: {
/**
* @description: ssQlxxchange
* @param {*} val
* @author: renchao
*/
ssQlxxchange (val) {
this.ruleForm.ssQlxx = val;
this.ruleForm.qlxx.ssywh = val.ywh;
this.ssQlxxchangediolog(val);
},
/**
* @description: 弹框事件
* @param {*} val
* @author: renchao
*/
ssQlxxchangediolog (val) {
this.$confirm("是否将上手权利信息同步到表单", "提示", {
iconClass: "el-icon-question", //自定义图标样式
confirmButtonText: "确认", //确认按钮文字更换
cancelButtonText: "取消", //取消按钮文字更换
showClose: true, //是否显示右上角关闭按钮
type: "warning",
})
.then(() => {
getQlxxByQlxxBsm({ qlxxBsm: val.bsmQlxx }).then((res) => {
if (res.code == 200) {
this.nowlist = res.result;
for (var key in this.ruleForm.tdsyq) {
if (
this.ruleForm.tdsyq[key] == "" ||
this.ruleForm.tdsyq[key] == null
) {
this.ruleForm.tdsyq[key] = this.nowlist.tdsyq[key];
}
}
for (var key in this.ruleForm.qlxx) {
if (
this.ruleForm.qlxx[key] == "" ||
this.ruleForm.qlxx[key] == null &&
key != "ywh" &&
key != "dbr" &&
key != "djsj" &&
key != "ssywh" &&
key != "ssywh" &&
key != "bdcqzh") {
this.ruleForm.qlxx[key] = this.nowlist.qlxx[key];
}
}
this.ruleForm.qlxx.gyfs = this.nowlist.qlxx.gyfs
if (!this.ruleForm.tdytqxList.length) {
this.ruleForm.tdytqxList = this.nowlist.tdytqxList;
}
if (!this.ruleForm.qlrData.length) {
this.ruleForm.qlrData = this.nowlist.qlrData;
}
if (!this.ruleForm.ywrData.length) {
this.ruleForm.ywrData = this.nowlist.ywrData;
}
this.$message({
type: "success",
message: "同步成功!",
});
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消同步",
});
});
},
/**
* @description: djlxchange
* @param {*} val
* @author: renchao
*/
djlxchange (val) {
if (val == null || val == 100) {
this.ssqlxxshow = false;
} else {
this.ssqlxxshow = true;
}
},
// 字典
/**
* @description: 字典
* @param {*} val
* @author: renchao
*/
getDictData (val) {
return store.getters.dictData[val];
},
/**
* @description: loadData
* @author: renchao
*/
loadData () {
this.loading = true
this.propsParam.isEdit = this.$parent.isEdit;
init(this.propsParam).then((res) => {
this.loading = false
if (res.code == 200) {
this.ruleForm = res.result;
this.ruleForm.tdsyq.mjdw = "1"
let djlx = this.ruleForm.qlxx.djlx;
if (djlx == null || djlx == 100) {
this.ssqlxxshow = false;
}
this.isShow = true;
//获取主体信息
getSsQlxx({
bdcdyid: this.propsParam.bdcdyid,
qllx: this.propsParam.qllx,
bsmQlxx: this.ruleForm.qlxx.bsmQlxx,
}).then((res) => {
if (res.code == 200) {
this.ssQlxxList = res.result;
}
});
}
});
},
// 更新土地用途信息
/**
* @description: 更新土地用途信息
* @param {*} val
* @author: renchao
*/
upDateTdytxxList (val) {
this.ruleForm.tdytqxList && (this.ruleForm.tdytqxList = _.cloneDeep(val));
this.key++;
},
/**
* @description: 更新权利人信息
* @param {*} val
* @author: renchao
*/
upDateQlrxxList (val) {
if (!_.isEqual(val, this.ruleForm.qlrData)) {
this.ruleForm.qlrData && (this.ruleForm.qlrData = _.cloneDeep(val));
this.czrOptions = this.ruleForm.qlrData;
}
},
/**
* @description: onSubmit
* @author: renchao
*/
onSubmit () {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
let arr = this.ruleForm.tdytqxList.filter(item => !item.yt)
if (arr.length > 0) {
this.$message({
showClose: true,
message: "土地用途不能为空",
type: "error",
});
return false;
}
if (this.ruleForm.qlrData.length == 0) {
this.$message({
showClose: true,
message: "请确认权利人信息",
type: "error",
});
return false;
}
if (this.ruleForm.qlxx.gyfs == "0") {
if (this.ruleForm.qlrData.length > 1) {
this.$message({
showClose: true,
message: "共有方式：单独所有，权利人只能是一个人",
type: "error",
});
return false;
}
} else {
if (this.ruleForm.qlrData.length <= 1) {
this.$message({
showClose: true,
message: "共有方式：共同所有，按份所有，其他所有，权利人必须是两个以上",
type: "error",
});
return false;
}
}
save(this.ruleForm).then((res) => {
if (res.code === 200) {
this.$message({
showClose: true,
message: "保存成功！",
type: "success",
});
this.$parent.changeywh();
this.$store.dispatch("user/refreshPage", true);
} else {
this.$message({
showClose: true,
message: res.message,
type: "error",
});
}
});
} else {
return false;
}
});
},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
@import "~@/styles/slxx/slxx.scss";
/deep/.el-form {
display: flex;
flex-direction: column;
height: calc(100vh - 130px);
}
/deep/.el-form-item__label {
padding: 0;
}
/deep/.el-radio {
margin-right: 10px;
}
/deep/.el-select {
width: 100%;
}
/deep/.el-form-item {
margin-bottom: 8px;
}
.marginBot0 {
margin-bottom: 0 !important;
}
.slxx {
box-sizing: border-box;
}
.slxx_con {
flex: 1;
height: 100%;
background-color: #ffffff;
overflow-y: auto;
padding-right: 3px;
overflow-x: hidden;
}
.submit_btn {
height: 50px;
}
.slxx_title {
border-bottom: 1px solid $borderColor;
padding-left: 10px;
padding-bottom: 5px;
margin-bottom: 10px;
margin-top: 5px;
font-size: 16px;
font-weight: 500;
color: #4a4a4a;
}
.btn {
text-align: center;
padding-top: 10px;
height: 36px;
background-color: #ffffff;
padding: 5px 0;
}
.textArea {
/deep/.el-textarea__inner {
min-height: 90px !important;
}
}
/deep/.el-form-item__label {
padding-bottom: 0px;
}
</style>