Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
855d01f9 by tianhaohao@pashanhoo.com
Options

111

1 parent f2e6d2d2
Inline Side-by-side
Showing 15 changed files with 3574 additions and 156 deletions
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-17 13:51:29
-->
<template>
<lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData">
</lb-table>
</template>
<script>
import addQlr from '../../../components/dialog/addQlr.vue'
import { mapGetters } from 'vuex'
export default {
components: {
addQlr
},
computed: {
...mapGetters(["dictData"]),
},
props: {
tableData: {
type: Array,
default: function () {
return []
}
},
gyfs: {
type: String,
default: '1'
}
},
data () {
return {
key: 0,
dataIndex: 0,
dialog: false,
details: {},
tableDataList: [],
qlrCommonTable: [
{
label: '序号',
type: 'index',
width: '50',
render: (h, scope) => {
return (
<div>
{scope.$index + 1}
</div>
)
}
},
{
prop: "qllxmc",
label: "权利类型"
},
{
prop: "bdcqzh",
label: "不动产权证号"
},
{
prop: "qlrmc",
label: "权利人"
},
{
prop: "qlrzjhm",
label: "证件号码"
},
{
prop: "bdcdyh",
label: "不动产单元号"
},
{
prop: "qlxzmc",
label: "权利性质"
},
{
prop: "qlytmc",
label: "用途"
},
{
prop: "qlmjmc",
label: "面积"
},
{
prop: "zl",
label: "坐落"
},
],
column: this.qlrCommonTable
}
},
watch: {
tableData: {
handler: function (val, oldVal) {
let that = this
if (val.length == 0 || !val) {
that.tableDataList = _.cloneDeep([{
sqrmc: '',
dlrzjlx: '',
dlrzjh: '',
fr: ''
}])
} else {
that.tableDataList = _.cloneDeep(val)
}
},
immediate: true,
deep: true
},
gyfs: {
handler (newVal, oldValue) {
let dataList = _.cloneDeep(this.qlrCommonTable)
if (newVal == '1') {
this.column = _.cloneDeep(dataList).slice(1, dataList.length)
} else if ((newVal == '2')) {
this.column = dataList
} else {
this.column = _.cloneDeep(dataList)
this.column.splice(
2, 0, {
prop: "qlbl",
label: "份数"
})
}
},
immediate: true
}
},
methods: {
}
}
</script>
<style scoped lang='scss'>
/deep/.el-table th {
height: 30px !important;
}
/deep/.el-table--small .el-table__cell {
padding: 5px;
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-17 13:51:29
-->
<template>
<lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData">
</lb-table>
</template>
<script>
import addQlr from './dialog/addQlr.vue'
import { mapGetters } from 'vuex'
export default {
components: {
addQlr
},
computed: {
...mapGetters(["dictData"]),
},
props: {
tableData: {
type: Array,
default: function () {
return []
}
},
gyfs: {
type: String,
default: '1'
}
},
data () {
return {
key: 0,
dataIndex: 0,
dialog: false,
details: {},
tableDataList: [],
qlrCommonTable: [
{
label: '序号',
type: 'index',
width: '50',
render: (h, scope) => {
return (
<div>
{scope.$index + 1}
</div>
)
}
},
{
prop: "yg",
label: "原告"
},
{
prop: "cfjg",
label: "查封机关"
},
{
prop: "cfwh",
label: "查封文号"
},
{
prop: "cfqssj",
label: "查封开始时间"
},
{
prop: "cfjssj",
label: "查封结束时间"
},
{
prop: "cflxmc",
label: "查封类型"
},
{
prop: "ywrmc",
label: "被执行人"
},
{
prop: "bcfzh",
label: "被查封证号"
},
{
prop: "bdcdyh",
label: "不动产单元号"
},
{
prop: "zl",
label: "坐落"
},
],
column: this.qlrCommonTable
}
},
watch: {
tableData: {
handler: function (val, oldVal) {
let that = this
if (val.length == 0 || !val) {
that.tableDataList = _.cloneDeep([{
sqrmc: '',
dlrzjlx: '',
dlrzjh: '',
fr: ''
}])
} else {
that.tableDataList = _.cloneDeep(val)
}
},
immediate: true,
deep: true
},
gyfs: {
handler (newVal, oldValue) {
let dataList = _.cloneDeep(this.qlrCommonTable)
if (newVal == '1') {
this.column = _.cloneDeep(dataList).slice(1, dataList.length)
} else if ((newVal == '2')) {
this.column = dataList
} else {
this.column = _.cloneDeep(dataList)
this.column.splice(
2, 0, {
prop: "qlbl",
label: "份数"
})
}
},
immediate: true
}
},
methods: {
}
}
</script>
<style scoped lang='scss'>
/deep/.el-table th {
height: 30px !important;
}
/deep/.el-table--small .el-table__cell {
padding: 5px;
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-17 13:51:29
-->
<template>
<lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData">
</lb-table>
</template>
<script>
import addQlr from '../../../components/dialog/addQlr.vue'
import { mapGetters } from 'vuex'
export default {
components: {
addQlr
},
computed: {
...mapGetters(["dictData"]),
},
props: {
tableData: {
type: Array,
default: function () {
return []
}
},
gyfs: {
type: String,
default: '1'
}
},
data () {
return {
key: 0,
dataIndex: 0,
dialog: false,
details: {},
tableDataList: [],
qlrCommonTable: [
{
label: '序号',
type: 'index',
width: '50',
render: (h, scope) => {
return (
<div>
{scope.$index + 1}
</div>
)
}
},
{
prop: "qlrmc",
label: "抵押权人"
},
{
prop: "ywrmc",
label: "抵押人"
},
{
prop: "bdcqzh",
label: "不动产登记证明号"
},
{
prop: "dyjelx",
label: "抵押金额类型"
},
{
prop: "dyfsmc",
label: "抵押方式"
},
{
prop: "qdjgmc",
label: "抵押金额"
},
{
prop: "qlmjmc",
label: "抵押面积"
},
{
prop: "zwlxqssj",
label: "债务履行开始时间"
},
{
prop: "zwlxjssj",
label: "债务履行结束时间"
},
{
prop: "bdcdyh",
label: "不动产单元号"
},
{
prop: "zl",
label: "坐落"
},
],
column: this.qlrCommonTable
}
},
watch: {
tableData: {
handler: function (val, oldVal) {
let that = this
if (val.length == 0 || !val) {
that.tableDataList = _.cloneDeep([{
sqrmc: '',
dlrzjlx: '',
dlrzjh: '',
fr: ''
}])
} else {
that.tableDataList = _.cloneDeep(val)
}
},
immediate: true,
deep: true
},
gyfs: {
handler (newVal, oldValue) {
let dataList = _.cloneDeep(this.qlrCommonTable)
if (newVal == '1') {
this.column = _.cloneDeep(dataList).slice(1, dataList.length)
} else if ((newVal == '2')) {
this.column = dataList
} else {
this.column = _.cloneDeep(dataList)
this.column.splice(
2, 0, {
prop: "qlbl",
label: "份数"
})
}
},
immediate: true
}
},
methods: {
}
}
</script>
<style scoped lang='scss'>
/deep/.el-table th {
height: 30px !important;
}
/deep/.el-table--small .el-table__cell {
padding: 5px;
}
</style>
<!--
* @Description: 房屋多幢明细
* @Autor:
* @LastEditTime: 2023-09-01 13:29:29
-->
<template>
<div>
<el-table
:data="tableDataList"
border
:pagination="false"
:key="key"
:header-cell-style="{ 'text-align': 'center' }"
:heightNumSetting="true"
:minHeight="150"
height="150"
style="width: 100%">
<el-table-column prop="index" width="50" :render-header="renderHeader">
<template slot-scope="scope">
<div style="text-align: center">{{ scope.$index + 1 }}</div>
</template>
</el-table-column>
<el-table-column prop="bdcdyh" label="不动产单元号" min-width="100">
<template slot-scope="scope">
<div style="text-align: center">{{ scope.row.bdcdyh }}</div>
</template>
</el-table-column>
<el-table-column prop="xmmc" label="项目名称" min-width="100">
<template slot-scope="scope">
<el-input
class="item"
:disabled="!ableOperation"
v-model="scope.row.xmmc"
placeholder="请输入内容"
@input="updaterow(scope.row)">
</el-input>
</template>
</el-table-column>
<el-table-column prop="fwxz" label="房屋性质" min-width="100">
<template slot-scope="scope">
<treeselect
v-model="scope.row.fwxz"
:disabled="!ableOperation"
noOptionsText="暂无数据"
placeholder=""
:show-count="true"
:options="dictData['A19']"
:normalizer="normalizer"
:appendToBody="true"
z-index="9999"
@input="updaterow(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="ghyt" label="房屋用途" min-width="100">
<template slot-scope="scope">
<treeselect
v-model="scope.row.ghyt"
:disabled="!ableOperation"
noOptionsText="暂无数据"
placeholder=""
:show-count="true"
:options="dictData['A17']"
:normalizer="normalizer"
:appendToBody="true"
z-index="9999"
@input="updaterow(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="fwjg" label="房屋结构" min-width="100">
<template slot-scope="scope">
<treeselect
v-model="scope.row.fwjg"
:disabled="!ableOperation"
noOptionsText="暂无数据"
placeholder=""
:show-count="true"
:options="dictData['A46']"
:normalizer="normalizer"
:appendToBody="true"
z-index="9999"
@input="updaterow(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="jzmj" label="建筑面积" min-width="100">
<template slot-scope="scope">
<el-input
maxlength="12"
class="item"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
v-model="scope.row.jzmj"
placeholder="请输入内容"
@input="updaterow(scope.row)">
</el-input>
</template>
</el-table-column>
<el-table-column prop="jgsj" label="竣工时间" min-width="100">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.jgsj"
type="date"
:disabled="!ableOperation"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
@input="updaterow(scope.row)">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="zcs" label="总层数" min-width="100">
<template slot-scope="scope">
<el-input
class="item"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
v-model="scope.row.zcs"
placeholder="请输入内容"
@input="updaterow(scope.row)">
</el-input>
</template>
</el-table-column>
<el-table-column prop="zts" label="总套数" min-width="100">
<template slot-scope="scope">
<el-input
class="item"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
v-model="scope.row.zts"
placeholder="请输入内容"
@input="updaterow(scope.row)">
</el-input>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["dictData"]),
},
props: {
tableData: {
type: Array,
default: function () {
return [];
},
},
ableOperation: {
type: Boolean,
default: false,
},
},
data () {
return {
// 键名转换，方法默认是label和children进行树状渲染
key: 0,
tableDataList: [],
normalizer (node) {
if (node.children == null || node.children == "null") {
delete node.children;
}
return {
id: node.dcode,
label: node.dname,
children: node.children,
};
},
};
},
mounted () {
},
watch: {
tableData: {
handler: function (val, oldVal) {
let that = this;
this.$nextTick(() => {
if (val.length == 0 || !val) {
that.tableDataList = _.cloneDeep([
{
yt: null,
qssj: "",
jssj: "",
tdsyqx: "",
},
]);
} else {
that.tableDataList = _.cloneDeep(val);
}
});
},
immediate: true,
deep: true,
},
},
methods: {
/**
* @description: renderHeader
* @author: renchao
*/
renderHeader () {
return (
<div>
{"序号"}
</div>
);
},
updaterow (a) {
this.$emit("updateFdcwxmList", this.tableDataList);
}
}
}
</script>
<style scoped lang="scss">
.el-input {
border: none !important;
}
/deep/ .el-table__row {
border: none !important;
}
.el-date-editor.el-input {
width: 100%;
}
/deep/ .el-table th {
height: 30px !important;
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-17 13:50:53
-->
<template>
<lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData">
</lb-table>
</template>
<script>
import addQlr from './dialog/addQlr.vue'
import { mapGetters } from 'vuex'
export default {
components: {
addQlr
},
computed: {
...mapGetters(["dictData"]),
},
props: {
tableData: {
type: Array,
default: function () {
return []
}
},
gyfs: {
type: String,
default: '1'
}
},
data () {
return {
key: 0,
dataIndex: 0,
dialog: false,
details: {},
tableDataList: [],
qlrCommonTable: [
{
label: '序号',
type: 'index',
width: '50',
render: (h, scope) => {
return (
<div>
{scope.$index + 1}
</div>
)
}
},
// {
// prop: "bdcdyh",
// label: "不动产单元号"
// },
{
prop: "zl",
label: "坐落"
},
{
prop: "shbw",
label: "室号部位"
},
{
prop: "fwxzmc",
label: "房屋性质"
},
{
prop: "sjc",
label: "层号"
},
{
prop: "jzmj",
label: "建筑面积"
},
{
prop: "fwlxmc",
label: "房屋类型"
},
{
prop: "showfwyt",
label: "房屋用途"
},
{
prop: "showfwjg",
label: "房屋结构"
},
],
column: this.qlrCommonTable
}
},
watch: {
tableData: {
handler: function (val, oldVal) {
let that = this;
if (val.length == 0 || !val) {
} else {
that.tableDataList = _.cloneDeep(val)
}
},
immediate: true,
deep: true
},
gyfs: {
handler (newVal, oldValue) {
let dataList = _.cloneDeep(this.qlrCommonTable)
if (newVal == '1') {
this.column = _.cloneDeep(dataList).slice(1, dataList.length)
} else if ((newVal == '2')) {
this.column = dataList
} else {
this.column = _.cloneDeep(dataList)
this.column.splice(
2, 0, {
prop: "qlbl",
label: "份数"
})
}
},
immediate: true
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
/deep/.el-table th {
height: 30px !important;
}
/deep/.el-table--small .el-table__cell {
padding: 5px;
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2024-01-18 14:13:02
-->
<template>
<div>
<el-table
:data="tableDataList"
border
:pagination="false"
:key="key"
:header-cell-style="{ 'text-align': 'center' }"
:heightNumSetting="true"
style="width: 100%">
<el-table-column prop="index" width="50" :render-header="renderHeader">
<template slot-scope="scope">
<i
class="el-icon-minus pointer"
@click="deleClick(scope.$index, scope.row)"
v-if="ableOperation"></i>
<div style="text-align: center" v-else>
{{ scope.$index + 1 }}
</div>
</template>
</el-table-column>
<el-table-column prop="yt" label="土地用途" min-width="100">
<template slot-scope="scope">
<treeselect
v-model="scope.row.yt"
:disabled="!ableOperation"
noOptionsText="暂无数据"
placeholder=""
:show-count="true"
:options="dictData['tdyt']"
:normalizer="normalizer"
:appendToBody="true"
z-index="9999"
@input="addrow(scope.row)" />
</template>
</el-table-column>
<el-table-column prop="qssj" label="土地使用起始时间" min-width="100">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.qssj"
type="date"
:disabled="!ableOperation"
:picker-options="scope.row.pickerStart"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
@input="startTime(scope.$index)">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="jssj" label="土地使用结束时间" min-width="100">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.jssj"
type="date"
:disabled="!ableOperation"
:picker-options="scope.row.pickerEnd"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
@input="endTime(scope.$index)">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="tdsyqx" label="土地使用期限" min-width="100">
<template slot-scope="scope">
<el-input
class="item"
:disabled="!ableOperation"
v-model="scope.row.tdsyqx"
oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
placeholder="请输入内容"
@input="sumTime(scope.$index, scope.row.tdsyqx)">
></el-input>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["dictData"]),
},
props: {
tableData: {
type: Array,
default: function () {
return [];
},
},
ableOperation: {
type: Boolean,
default: true,
},
},
data () {
return {
// 键名转换，方法默认是label和children进行树状渲染
key: 0,
newdata: {
yt: null,
qssj: "",
jssj: "",
tdsyqx: "",
},
tableDataList: [],
// 起始时间选择范围
pickerStart: {},
pickerEnd: {},
normalizer (node) {
if (node.children == null || node.children == "null") {
delete node.children;
}
return {
id: node.dcode,
label: node.dname,
children: node.children,
};
},
};
},
mounted () { },
watch: {
tableData: {
handler: function (val, oldVal) {
let that = this;
this.$nextTick(() => {
if (!val || val.length == 0) {
that.tableDataList = _.cloneDeep([
{
yt: null,
qssj: "",
jssj: "",
tdsyqx: "",
},
]);
} else {
that.tableDataList = _.cloneDeep(val);
}
});
},
immediate: true,
deep: true,
},
},
methods: {
/**
* @description: renderHeader
* @author: renchao
*/
renderHeader () {
return (
<div>
{" "}
{!this.ableOperation ? (
"序号"
) : (
<i
class="el-icon-plus pointer"
onClick={() => {
this.addClick();
}}
></i>
)}
</div>
);
},
// 修改事件
/**
* @description: 修改事件
* @author: renchao
*/
addrow (a) {
// this.tableDataList = this.tableDataList.map((item) => {
// return {
// ...item,
// yt: a.yt,
// };
// });
this.$emit("upDateTdytxxList", this.tableDataList);
},
/**
* @description: startTime
* @param {*} index
* @author: renchao
*/
startTime (index) {
console.log("index", index);
// let startTime = this.tableDataList[index].tdsyqssj;
let endTime = this.tableDataList[index].jssj;
let startTime = this.tableDataList[index].qssj;
this.tableDataList[index].pickerEnd = {
disabledDate: (time) => {
if (Object.keys(startTime).length > 0) {
return new Date(startTime).getTime() > time.getTime();
} else {
return time.getTime() < Date.now();
}
},
};
if (startTime && endTime) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
this.tableDataList[index].tdsyqx = endYear - startYear;
}
this.$emit("upDateTdytxxList", this.tableDataList);
},
/**
* @description: endTime
* @param {*} index
* @author: renchao
*/
endTime (index) {
// let startTime = this.tableDataList[index].tdsyqssj;
let startTime = this.tableDataList[index].qssj;
let endTime = this.tableDataList[index].jssj;
this.tableDataList[index].pickerStart = {
disabledDate: (time) => {
if (Object.keys(endTime).length > 0) {
return new Date(endTime).getTime() < time.getTime();
} else {
return time.getTime() > Date.now();
}
},
};
if (startTime && endTime) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
this.tableDataList[index].tdsyqx = endYear - startYear;
}
this.$emit("upDateTdytxxList", this.tableDataList);
},
/**
* @description: sumTime
* @param {*} index
* @param {*} tdsyqx
* @author: renchao
*/
sumTime (index, tdsyqx) {
let startTime = this.tableDataList[index].qssj;
this.tableDataList[index].jssj =
Number(startTime.substring(0, 4)) +
Number(tdsyqx) +
startTime.slice(4, 19);
this.$emit("upDateTdytxxList", this.tableDataList);
},
// 新增
/**
* @description: 新增
* @author: renchao
*/
addClick () {
// this.tableDataList[this.tableDataList.length] = _.cloneDeep(this.newdata);
this.tableDataList.push(_.cloneDeep(this.newdata))
this.$emit("upDateTdytxxList", this.tableDataList);
},
// 删除
/**
* @description: 删除
* @param {*} index
* @param {*} row
* @author: renchao
*/
deleClick (index, row) {
this.$confirm("确定要删除吗, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.tableDataList.splice(index, 1);
this.$emit("upDateTdytxxList", this.tableDataList);
})
.catch(() => { });
},
},
};
</script>
<style scoped lang="scss">
.el-input {
border: none !important;
}
/deep/.el-table__row {
border: none !important;
}
.el-date-editor.el-input {
width: 100%;
}
/deep/.el-table th {
height: 30px !important;
}
/deep/ .el-table--border .el-table__cell:first-child .cell {
text-align: center;
}
/deep/.el-table--small .el-table__cell {
padding: 3px 0 !important;
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-24 16:15:50
-->
<template>
<div class="djxxTable" :style="{'max-height': this.timeLineHeight + 'px' }"
style="overflow-y:scroll;">
<div class="tableBox">
<div class="title">
<span>{{ title }}</span>
</div>
<div class="xxTableBox">
<table class="xxTable">
<tr>
<td></td>
<td>变更前2</td>
<td>变更后</td>
</tr>
<tr v-for="(item, colindex) in columns" :key="colindex">
<td>
{{ item.label }}
</td>
<td
v-for="(row, index) in tableData"
:key="index"
:class="[
row.qszt == '2' ? 'lishi' : '',
row.qszt == '0' ? 'linshi' : '',
row.qlzt == '4' ? 'linshi' : '',
item.prop == 'qszt' && row.qlzt == '3' ? 'linshiIcon' : '',
item.prop == 'qszt' && row.qlzt == '2' ? 'linshiIcon' : '',
item.prop == 'qszt' && row.qlzt == '1' ? 'xianshiIcon' : '',
item.prop == 'qszt' && row.qlzt == '4' ? 'zhuxiaoIcon' : ''
]">
<div class="icon" v-if="item.prop == 'qszt' &&row.qlzt == '1'">
有效
</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '2'">
正在补录
</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '3'">
正在申请
</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '4'">
正在注销
</div>
<p v-if="!['djyy','fj'].includes(item.prop)">
<span v-if="item.prop == 'qszt'">
{{ getQsztName(row[item.prop]) }}
</span>
<span v-else>{{ row[item.prop] }}</span>
</p>
<el-tooltip v-else effect="dark" :content="row[item.prop]" placement="top" popper-class="tooltip-width">
<span class="ellipsis-line">
{{ row[item.prop] }}
</span>
</el-tooltip>
</td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
import { getFdcqLSInfo } from "@/api/djbDetail.js";
import { datas } from "@/views/registerBook/qlxxFormData.js";
export default {
data () {
return {
title: "房地产权登记信息（独幢、层、套、间房屋）",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
//传递参数
propsParam: this.$attrs,
//列表数据
tableData: [],
//空列值个数
emptycolNum: 1,
//列名称对象
columns: datas.columns().FDCQ2,
tdColumns: datas.columns().JSYDSYQ
};
},
created () {
this.loadData();
},
mounted () {
this.timeLineHeight = document.documentElement.clientHeight - 210;
window.onresize = () => {
this.timeLineHeight = document.documentElement.clientHeight - 210;
};
},
methods: {
/**
* @description: loadData
* @author: renchao
*/
loadData () {
var formdata = new FormData();
formdata.append("bsmSldy", this.propsParam.formData.bsmSldy);
formdata.append("qllx", this.propsParam.formData.qllx);
formdata.append("isEdit", this.ableOperation);
getFdcqLSInfo(formdata).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
if (this.tableData.length < datas.columns().emptycolNum) {
this.emptycolNum =
datas.columns().emptycolNum - this.tableData.length;
} else {
this.emptycolNum = 0;
}
}
});
},
/**
* @description: checkChange
* @author: renchao
*/
checkChange () {
if (this.checkList.length === 0) {
this.tableData = [];
this.emptycolNum = datas.columns().emptycolNum;
} else {
this.loadData();
}
},
/**
* @description: getQsztName
* @param {*} code
* @author: renchao
*/
getQsztName (code) {
let name = "";
for (let item of this.qsztList) {
if (item.value == code) {
name = item.label;
break;
}
}
return name;
},
},
};
</script>
<style lang="scss" scoped>
@import "~@/views/registerBook/qlxxCommon.scss";
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-02 14:24:20
-->
<template>
<div class="from-clues">
<!-- 表单部分 -->
<div class="from-clues-header">
<div class="title">请选择要退回到的环节：</div>
<el-form ref="queryForm" label-width="90px">
<ul style="margin-bottom: 15px">
<li
v-for="(item, index) in dataList"
class="listDetail"
:key="index"
@click="changeSelectItem(item)">
<p class="icon">
<el-radio
v-model="selectActivity"
:label="item.activityId"
@change="changeSelectItem(item)"></el-radio>
</p>
<p>{{ item.activityName }}</p>
<p v-for="(child, childIndex) in item.assignee" :key="childIndex">
{{ child.name }}
</p>
</li>
</ul>
<div class="title">退回意见：</div>
<el-form-item>
<el-input
class="textArea"
type="textarea"
v-model="outstepopinion"
placeholder="请输入退回意见"></el-input>
</el-form-item>
<el-form-item>
<el-button style="float:right" @click="cancelBack">取消</el-button>
<el-button type="primary" @click="onSubmit" style="float:right">退回</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { getTaskBackNode, sendBackTask } from "@/api/workFlow.js"
import { popupCacel } from "@/utils/popup.js";
export default {
props: {
formData: {
type: Object,
default: {},
},
},
data () {
return {
selectActivity: "",
dataList: [],
outstepopinion: "",
selectItem: {},
};
},
created () {
this.getBackNode();
},
methods: {
/**
* @description: onSubmit
* @author: renchao
*/
onSubmit () {
if (!this.outstepopinion) {
this.$message.error("请填写退回意见");
} else {
sendBackTask({
bsmSlsq: this.formData.bsmSlsq,
backNodeList: [this.selectItem],
message: this.outstepopinion
}).then((res) => {
if (res.code == 200) {
this.$message.success("退回成功");
setTimeout(() => {
if (window.opener && window.opener.getBpageList) {
window.opener.getBpageList();
} else {
window.opener.frames[0].getBpageList();
}
window.close();
this.$emit("input", false);
}, 1000);
} else {
this.$message.error(res.message);
}
});
}
},
/**
* @description: changeSelectItem
* @param {*} item
* @author: renchao
*/
changeSelectItem (item) {
this.selectItem = item;
this.selectActivity = item.activityId;
},
//获取可回退环节信息
/**
* @description: 获取可回退环节信息
* @author: renchao
*/
getBackNode () {
getTaskBackNode(this.formData).then((res) => {
if (res.code == 200) {
this.dataList = res.result;
console.log("this.dataList", this.dataList);
if (res.result) {
this.selectActivity = res.result[0].activityId;
this.selectItem = res.result[0];
}
}
});
},
/**
* @description: cancelBack
* @author: renchao
*/
cancelBack () {
popupCacel();
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.listDetail {
display: flex;
align-items: center;
width: 100%;
p {
line-height: 30px;
height: 30px;
@include flex-center;
flex: 1;
width: 100%;
border: 1px solid rgb(233, 235, 237);
margin-top: -1px;
margin-left: -1px;
}
.icon {
flex: 0 0 60px;
}
}
.title {
margin-bottom: 10px;
}
.textArea {
/deep/.el-textarea__inner {
min-height: 90px !important;
}
}
/deep/.el-radio .el-radio__label {
display: none;
}
</style>
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2024-01-23 14:07:58
*/
/**
* @description: 按钮操作
* @param attribute:按钮属性
* @param address:地址栏数据
* @param sldy:受理单元数据
* @author: renchao
*/
export function buttonOnclike(attribute, address, sldy) {
//按钮 B0:选择不动产单元 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书 B7:证书领取 B8:楼盘表 B9:登簿,B10:打印回执 ZSXG: 证书修改
//操作按钮 登簿：record 转件：transfer 退回：back 退出：signout
let that = this;
switch (item.value) {
case "B0":
btn_add(attribute, address, sldy);
break;
case "B1":
btn_flow(attribute, address, sldy);
break;
case "B2": //材料分屏按钮
btn_clfp(attribute, address, sldy);
break;
case "B3": //材料导入
btn_cldr(attribute, address, sldy);
break;
case "B4":
btn_djb(attribute, address, sldy);
break;
case "B5":
btn_zsyl(attribute, address, sldy);
break;
case "B-ZSXG":
btn_zsxg(attribute, address, sldy);
break;
case "B6":
btn_dysqs(attribute, address, sldy);
break;
case "B7":
btn_zslq(attribute, address, sldy);
break;
case "B8":
btn_houses(attribute, address, sldy);
break;
// 图形定位
case "B-TXDW":
btn_map(attribute, address, sldy);
break;
case "back": //退回按钮
btn_back(attribute, address, sldy);
break;
case "transfer": //转件按钮
btn_transfer(attribute, address, sldy);
break;
case "stop": //终止按钮
btn_stop(attribute, address, sldy);
break;
case "signout":
btn_signout(attribute, address, sldy);
break;
case "B9":
btn_record(attribute, address, sldy);
break;
case "B10":
break;
case "rm":
btn_deleteFlow();
break;
// 互联网数据共享
case "B-HLGXSJ":
btn_dataShare(attribute, address, sldy);
break;
default:
console.log("未开发！");
break;
}
}
//新增受理单元
function btn_add(attribute, address, sldy) {
this.openDialog(attribute);
}
//流程图
function btn_flow(attribute, address, sldy) {
getWorkFlowImage(this.bsmSlsq, this.bestepid ? this.bestepid : '').then(res => {
let { result } = res
this.$popupDialog("流程图", "workflow/components/processViewer", {
xml: result.xml,
finishedInfo: {
finishedTaskSet: result.finishedActivityIds,
unfinishedTaskSet: result.runningActivityIds,
rejectedTaskSet: result.rejectedActivityIds,
finishedSequenceFlowSet: result.finishedSequenceFlowIds
},
handlinglist: result.runningTasks,
allCommentList: result.finishedTasks
}, '80%', true)
})
}
//材料分屏
function btn_clfp(attribute, address, sldy) {
this.splitScreen = this.splitScreen ? false : true;
this.$store.dispatch("app/settScreen", this.splitScreen);
if (this.splitScreen) {
//如果当前选项卡为材料信息内容，递减到上一个选项卡内容
if (this.tabName == this.clxxTab.value) {
this.tabName = this.tabList[this.clxxIndex - 1].value;
this.getFromRouter(this.tabList[this.clxxIndex - 1].value);
}
//删除材料信息选项卡数据
this.tabList.splice(this.clxxIndex, 1);
} else {
//新增材料信息选项卡数据
this.tabList.splice(this.clxxIndex, 0, this.clxxTab);
}
}
//材料导入
function btn_cldr(attribute, address, sldy) {
document.getElementById("cldr").click();
}
//登记簿
function btn_djb(attribute, address, sldy) {
this.$popupDialog("登记簿详情", "registerBook/djbFrame", this.currentSelectProps, '80%', true)
}
//打印申请书
function btn_dysqs(attribute, address, sldy) {
this.$popupDialog("打印申请书", "workflow/components/dialog/sqs",
{ bsmSldy: this.currentSelectProps.bsmSldy }, '30%', true
)
}
//证书预览
function btn_zsyl(attribute, address, sldy) {
this.$popupDialog("证书证明预览", "workflow/components/dialog/zsyl", {
bsmSlsq: this.bsmSlsq,
entryType: '1'
}, '1230px', true)
}
//证书修改
function btn_zsxg(attribute, address, sldy) {
this.$popupDialog("证书修改", "workflow/components/dialog/zsxg", { bsmSlsq: this.bsmSlsq, }, '55%', true);
}
//证书领取
function btn_zslq(attribute, address, sldy) {
this.$popupDialog("证书领取", "workflow/components/dialog/zslq",
{ bsmSlsq: this.$route.query.bsmSlsq }, '70%', true
)
}
//楼盘表
function btn_houses(attribute, address, sldy) {
!window.djlx && getZrzbsmList(this.bsmSlsq).then((res) => {
if (res.code === 200) {
ywPopupDialog('楼盘表', 'lpb/index', {
bsm: res.result[0],
onlyShow: false,
unitData: window.unitData,
bsmSlsq: this.bsmSlsq,
showSave: true,
djlx: window.djlx
}, '85%', true, false)
} else {
this.$message.error(res.message)
}
})
.catch((err) => {
this.$message.error(err)
});
window.djlx && ywPopupDialog('楼盘表', 'lpb/zjgcdy', {
onlyShow: false,
unitData: window.unitData,
bsmSlsq: this.bsmSlsq,
showSave: true,
djlx: window.djlx
}, '85%', true, false)
}
//登簿
function btn_record(attribute, address, sldy) {
var formdata = new FormData();
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid ? this.bestepid : '');
this.$confirm("请确认是否登簿", "提示", {
iconClass: "el-icon-info", //自定义图标样式
confirmButtonText: "确认", //确认按钮文字更换
cancelButtonText: "取消", //取消按钮文字更换
showClose: true, //是否显示右上角关闭按钮
type: "warning", //提示类型 success/info/warning/error
}).then(function () {
record(formdata).then((res) => {
if (res.code === 200) {
if (res.result.length === 1) {
res.result[0].state ? that.$message({
message: '登簿成功',
type: 'success'
}) : ywPopupDialog("登簿错误明细", "workflow/components/dialog/dblist", { result: res.result }, '30%', true)
}
else {
ywPopupDialog("登簿错误明细", "workflow/components/dialog/dblist", { result: res.result }, '30%', true)
}
} else {
that.$message.error(res.message)
}
})
})
}
//转件
function btn_transfer(attribute, address, sldy) {
getNextLinkInfo({
bsmSlsq: this.bsmSlsq,
bestepid: this.bestepid ? this.bestepid : ''
}).then((res) => {
if (res.code === 200) {
if (res.result) {
this.sendToNext(res.result);
} else {
this.sendToEnd();
}
}
});
}
//退回
function btn_back(attribute, address, sldy) {
this.$popupDialog("退回", "workflow/components/th", {
bsmSlsq: this.bsmSlsq,
bestepid: this.bestepid ? this.bestepid : ''
}, '800px', true)
}
//退出
function btn_signout(attribute, address, sldy) {
window.close();
//取消认领
unClaimTask(this.bsmSlsq, this.bestepid ? this.bestepid : '')
}
//终止流程
function btn_stop(attribute, address, sldy) {
this.$popupDialog("终止", "workflow/components/stop", {
bsmSlsq: this.bsmSlsq,
bestepid: this.bestepid ? this.bestepid : ''
}, '600px', true);
}
//删除流程
function btn_deleteFlow(attribute, address, sldy) {
this.del();
}
//数据共享
function btn_dataShare(attribute, address, sldy) {
this.$popupDialog("互联网数据共享", "sjgx/gbmhlgxsjgx/gbmhlgxsjgx", {}, '90%', true)
}
//图形定位
function btn_map(attribute, address, sldy) {
getZdInfo(this.currentSelectProps.bdcdyid).then(res => {
this.bsmZd = res?.result[0]?.bsmZd;
this.$popupDialog('图形定位', 'workflow/components/dialog/txdw', { bsmZd: this.bsmZd }, '85%', true)
})
}
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-11-23 17:20:01
-->
<template>
<iframe :src="ip +'/txdw/#/' + formData.bsmZd" frameborder="0" style="width: 100%; height:710px;"></iframe>
</template>
<script>
export default {
props: {
formData: {
type: Object,
default: () => {
return {}
}
}
},
data () {
return {
ip: window._config.services.management
}
}
}
</script>
\ No newline at end of file
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-05-17 10:41:15
-->
<template>
<div>
<div class="process-viewer">
<div
v-show="!isLoading"
ref="processCanvas"
class="process-canvas"
style="height: 280px"
/>
<!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
<defs ref="customSuccessDefs">
<marker
id="sequenceflow-end-white-success"
view-box="0 0 20 20"
ref-x="11"
ref-y="10"
marker-width="10"
marker-height="10"
orient="auto"
>
<path
class="success-arrow"
d="M 1 5 L 11 10 L 1 15 Z"
style="
stroke-width: 1px;
stroke-linecap: round;
stroke-dasharray: 10000, 1;
"
/>
</marker>
<marker
id="conditional-flow-marker-white-success"
view-box="0 0 20 20"
ref-x="-1"
ref-y="10"
marker-width="10"
marker-height="10"
orient="auto"
>
<path
class="success-conditional"
d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
style="
stroke-width: 1px;
stroke-linecap: round;
stroke-dasharray: 10000, 1;
"
/>
</marker>
</defs>
<!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
<defs ref="customFailDefs">
<marker
id="sequenceflow-end-white-fail"
view-box="0 0 20 20"
ref-x="11"
ref-y="10"
marker-width="10"
marker-height="10"
orient="auto"
>
<path
class="fail-arrow"
d="M 1 5 L 11 10 L 1 15 Z"
style="
stroke-width: 1px;
stroke-linecap: round;
stroke-dasharray: 10000, 1;
"
/>
</marker>
<marker
id="conditional-flow-marker-white-fail"
view-box="0 0 20 20"
ref-x="-1"
ref-y="10"
marker-width="10"
marker-height="10"
orient="auto"
>
<path
class="fail-conditional"
d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
style="
stroke-width: 1px;
stroke-linecap: round;
stroke-dasharray: 10000, 1;
"
/>
</marker>
</defs>
<div style="position: absolute; top: 0px; left: 0px; width: 100%">
<el-row type="flex" justify="end">
<el-button-group key="scale-control" size="medium">
<el-button
size="medium"
type="default"
:plain="true"
:disabled="defaultZoom <= 0.3"
icon="el-icon-zoom-out"
@click="processZoomOut()"
/>
<el-button size="medium" type="default" style="width: 90px">{{
Math.floor(this.defaultZoom * 10 * 10) + "%"
}}</el-button>
<el-button
size="medium"
type="default"
:plain="true"
:disabled="defaultZoom >= 3.9"
icon="el-icon-zoom-in"
@click="processZoomIn()"
/>
<el-button
size="medium"
type="default"
icon="el-icon-c-scale-to-original"
@click="processReZoom()"
/>
<slot />
</el-button-group>
</el-row>
</div>
</div>
<!-- 已完成节点悬浮弹窗 -->
<div class="information-list">
<el-select v-model="selectValue" @change="handleSelect">
<el-option
v-for="item in selectOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<div class="cutline">
<p class="cutlines">图例</p>
<div v-for="item in cutlinelist" :key="item.value" class="concent" :style="{ backgroundColor: item.backgroundColor,borderColor:item.color }">
{{item.value}}
</div>
</div>
<el-table
height="190"
:data="taskCommentList"
size="mini"
border
header-cell-class-name="table-header-gray"
>
<el-table-column
label="序号"
header-align="center"
align="center"
type="index"
width="55px"
/>
<el-table-column label="环节" prop="name" align="center" />
<el-table-column
label="转入时间"
prop="createTime"
:formatter="formatDate"
width="160"
align="center"
/>
<el-table-column
label="认领时间"
prop="claimTime"
:formatter="formatDate"
width="160"
align="center"
/>
<el-table-column
label="转出时间"
prop="endTime"
:formatter="formatDate"
width="160"
align="center"
/>
<el-table-column label="经办人" prop="agent" align="center" />
<el-table-column label="操作方式" prop="controls" align="center" />
<el-table-column label="意见" prop="idea" align="center" />
</el-table>
</div>
</div>
</template>
<script>
import "@/styles/package/theme/index.scss";
import BpmnViewer from "bpmn-js/lib/Viewer";
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
export default {
props: {
formData: {
type: Object,
default: {},
},
},
data() {
return {
dlgTitle: undefined,
defaultZoom: 1,
// 是否正在加载流程图
isLoading: true,
bpmnViewer: undefined,
// 已完成流程元素
processNodeInfo: undefined,
// 当前任务id
selectTaskId: undefined,
// 任务节点审批记录
taskList: [],
taskCommentList: [],
// 已完成任务悬浮延迟Timer
hoverTimer: null,
// 下拉
selectValue: "",
selectOptions: [],
cutlinelist:[
{
value: "完成节点",
color: "#4eb819",
backgroundColor :"rgba(78, 184, 25,0.2)"
},
{
value: "当前节点",
color: "#409EFF",
backgroundColor :"rgba(64, 158, 255,0.2)"
},
{
value: "挂起节点",
color: "#E6A23C",
backgroundColor :"rgba(230, 162, 60,0.2)"
},
{
value: "阻塞节点",
color: "#F56C6C",
backgroundColor :"rgb(245, 108, 108,0.2)"
},
{
value: "未激活节点",
color: "#000000",
backgroundColor :"none",
}
],
};
},
created() {
this.$nextTick(() => {
// 获取流程记录
this.getCommentList();
this.setProcessStatus(this.formData.finishedInfo);
this.importXML(this.formData.xml);
});
},
destroyed() {
this.clearViewer();
},
methods: {
/**
* @description: formatDate
* @param {*} row
* @param {*} column
* @author: renchao
*/
formatDate(row, column) {
let data = row[column.property];
if (data == null) {
return null;
}
let dt = new Date(data);
return (
dt.getFullYear() +
"-" +
(dt.getMonth() + 1) +
"-" +
dt.getDate() +
" " +
dt.getHours() +
":" +
dt.getMinutes() +
":" +
dt.getSeconds()
);
},
/**
* @description: processReZoom
* @author: renchao
*/
processReZoom() {
this.defaultZoom = 1;
this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
},
/**
* @description: processZoomIn
* @param {*} zoomStep
* @author: renchao
*/
processZoomIn(zoomStep = 0.1) {
const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
if (newZoom > 4) {
throw new Error(
"[Process Designer Warn ]: The zoom ratio cannot be greater than 4"
);
}
this.defaultZoom = newZoom;
this.bpmnViewer.get("canvas").zoom(this.defaultZoom);
},
/**
* @description: processZoomOut
* @param {*} zoomStep
* @author: renchao
*/
processZoomOut(zoomStep = 0.1) {
const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
if (newZoom < 0.2) {
throw new Error(
"[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2"
);
}
this.defaultZoom = newZoom;
this.bpmnViewer.get("canvas").zoom(this.defaultZoom);
},
/**
* @description: getOperationTagType
* @param {*} type
* @author: renchao
*/
getOperationTagType(type) {
return "success";
},
// 流程图预览清空
/**
* @description: 流程图预览清空
* @param {*} e
* @author: renchao
*/
clearViewer(a) {
if (this.$refs.processCanvas) {
this.$refs.processCanvas.innerHTML = "";
}
if (this.bpmnViewer) {
this.bpmnViewer.destroy();
}
this.bpmnViewer = null;
},
// 添加自定义箭头
/**
* @description: 添加自定义箭头
* @author: renchao
*/
addCustomDefs() {
const canvas = this.bpmnViewer.get("canvas");
const svg = canvas._svg;
const customSuccessDefs = this.$refs.customSuccessDefs;
const customFailDefs = this.$refs.customFailDefs;
svg.appendChild(customSuccessDefs);
svg.appendChild(customFailDefs);
},
// 任务悬浮弹窗
/**
* @description: 任务悬浮弹窗
* @param {*} element
* @author: renchao
*/
onSelectElement(element) {
this.selectTaskId = undefined;
this.dlgTitle = undefined;
let allfinishedTaskSet = [
...this.processNodeInfo.finishedTaskSet,
...this.processNodeInfo.unfinishedTaskSet,
];
if (this.processNodeInfo == null || allfinishedTaskSet == null) return;
if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) {
return;
}
this.selectTaskId = element.id;
this.selectValue = element.id;
this.dlgTitle = element.businessObject
? element.businessObject.name
: undefined;
// 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
this.taskCommentList = (this.taskList || []).filter((item) => {
return item.taskDefinitionKey === this.selectTaskId;
});
if (this.taskCommentList.length == 0) {
this.taskCommentList = this.taskList;
}
},
// 下拉列表切换
/**
* @description: 下拉列表切换
* @param {*} val
* @author: renchao
*/
handleSelect(val) {
this.taskCommentList = (this.taskList || []).filter((item) => {
return item.taskDefinitionKey === val;
});
if (this.taskCommentList.length == 0) {
this.taskCommentList = this.taskList;
}
},
// 显示流程图
/**
* @description: 显示流程图
* @param {*} xml
* @author: renchao
*/
async importXML(xml) {
let xmlData = this.$x2js.xml2js(xml).definitions.process;
this.selectOptions = xmlData.userTask.map((item) => {
return { value: item._id, label: item._name };
});
this.selectOptions = [
{ value: xmlData.startEvent._id, label: "浏览记录" },
...this.selectOptions,
];
this.selectOptions = this.selectOptions
.map((item) => {
if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) {
return item;
}
if (
this.formData.finishedInfo.unfinishedTaskSet.includes(item.value)
) {
return item;
}
})
.filter(Boolean);
this.selectValue = xmlData.startEvent._id;
this.clearViewer("a");
if (xml != null && xml !== "") {
try {
this.bpmnViewer = new BpmnViewer({
additionalModules: [
// 移动整个画布
MoveCanvasModule,
],
container: this.$refs.processCanvas,
});
// 任务节点悬浮事件
this.bpmnViewer.on("element.click", ({ element }) => {
this.onSelectElement(element);
});
await this.bpmnViewer.importXML(xml);
this.isLoading = true;
this.addCustomDefs();
} catch (e) {
this.clearViewer("b");
} finally {
this.isLoading = false;
this.setProcessStatus(this.processNodeInfo);
this.$nextTick(() => {
this.processReZoom();
});
}
}
},
// 获取流程记录
/**
* @description: 获取流程记录
* @author: renchao
*/
getCommentList() {
this.formData.allCommentList.forEach(async (item, index) => {
// item.comments.forEach(element => {
// if(element.type=="COMPLETE"){
// this.formData.allCommentList[index].idea=element.message
// this.formData.allCommentList[index].controls="完成"
// }
// });
let type = item.comments[item.comments.length - 1].type;
this.formData.allCommentList[index].idea =
item.comments[item.comments.length - 1].message;
// 操作方式
let controls = "";
// 正在办理
// 已完结
// 已退回
switch (type) {
case "COMPLETE":
controls = "完成";
break;
case "CLAIM":
controls = "完成";
break;
case "ASSIGN":
controls = "转办";
break;
case "DELEGATE":
controls = "委派";
break;
case "UNCLAIM":
controls = "取消认领";
break;
case "STOP":
controls = "终止";
break;
case "BACK":
controls = "退回";
break;
}
this.formData.allCommentList[index].controls = controls;
this.formData.allCommentList[index].agent = item.assignee.name;
});
this.formData.handlinglist.forEach(async (item, index) => {
if (item.assignee.name) {
this.formData.handlinglist[index].agent = item.assignee.name;
} else {
let str = "";
item.countersign.forEach((item) => {
str += item.name + ",";
});
str = str.slice(0, -1);
this.formData.allCommentList[index].agent = str;
}
});
this.taskList = [
...this.formData.allCommentList,
...this.formData.handlinglist,
];
// this.taskList =this.formData.allCommentList;
// 处理数据之后赋值
this.taskCommentList = this.taskList;
this.taskCommentList = this.taskCommentList.sort(this.sortDownDate);
},
/**
* 时间排序函数
* @description: formatDate
* @param {*} row
* @param {*} column
* @author: renchao
*/
sortDownDate(a, b) {
return Date.parse(a.createTime) - Date.parse(b.createTime);
},
// 设置流程图元素状态
/**
* @description: 设置流程图元素状态
* @param {*} processNodeInfo
* @author: renchao
*/
setProcessStatus(processNodeInfo) {
this.processNodeInfo = processNodeInfo;
if (
this.isLoading ||
this.processNodeInfo == null ||
this.bpmnViewer == null
)
return;
const {
finishedTaskSet,
rejectedTaskSet,
unfinishedTaskSet,
finishedSequenceFlowSet,
} = this.processNodeInfo;
const canvas = this.bpmnViewer.get("canvas");
const elementRegistry = this.bpmnViewer.get("elementRegistry");
if (Array.isArray(finishedSequenceFlowSet)) {
finishedSequenceFlowSet.forEach((item) => {
if (item != null) {
canvas.addMarker(item, "success");
const element = elementRegistry.get(item);
const conditionExpression =
element.businessObject.conditionExpression;
if (conditionExpression) {
canvas.addMarker(item, "condition-expression");
}
}
});
}
if (Array.isArray(finishedTaskSet)) {
finishedTaskSet.forEach((item) => canvas.addMarker(item, "success"));
}
if (Array.isArray(unfinishedTaskSet)) {
unfinishedTaskSet.forEach((item) => canvas.addMarker(item, "primary"));
}
if (Array.isArray(rejectedTaskSet)) {
rejectedTaskSet.forEach((item) => {
if (item != null) {
const element = elementRegistry.get(item);
if (element.type.includes("Task")) {
canvas.addMarker(item, "danger");
} else {
canvas.addMarker(item, "warning");
}
}
});
}
},
},
};
</script>
<style scoped lang="scss">
.information-list {
height: 220px;
margin-top: 10px;
p {
font-size: 16px;
line-height: 24px;
}
}
/deep/.bjs-powered-by {
display: none;
}
// /deep/.information-list {
// height: 170px;
// overflow: visible;
// }
.cutline {
float: right;
width: 30%;
height: 30px;
display: flex;
margin-right: 30px;
justify-content: space-between;
.cutlines{
line-height: 30px;
font-weight: 600;
margin-right: 50px;
}
.concent{
line-height: 30px;
line-height: 14px;
text-align: center;
align-items: center;
margin: auto;
padding: 3px;
border-radius: 4px;
border:1px solid #fff;
}
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-27 08:51:13
-->
<template>
<div class="from-clues">
<div class="invalid-title">
<i class="el-icon-question invalid-icon"></i>
<div class="invalid-body">您是否确定终止该业务办理？</div>
</div>
<div class="invalid-reson">退件原因：</div>
<el-input
v-model="stopMessage"
placeholder="请输入终止原因"
type="textarea"
:rows="4"></el-input>
<div style="overflow:hidden;text-align:center;margin-top:10px">
<el-button @click="cancelBack">取消</el-button>
<el-button type="primary" @click="onSubmit">退件</el-button>
</div>
</div>
</template>
<script>
import { stopTask } from "@/api/workFlow.js";
import { popupCacel } from "@/utils/popup.js";
export default {
props: {
formData: {
type: Object,
default: {},
},
},
data () {
return {
stopMessage: "",
};
},
methods: {
/**
* @description: onSubmit
* @author: renchao
*/
onSubmit () {
stopTask({
bsmSlsq: this.formData.bsmSlsq,
bestepid: this.formData.bestepid,
stopMessage: this.stopMessage,
}).then((res) => {
this.$message.success("终止成功");
setTimeout(() => {
// window.opener.location.reload(); //刷新父窗口
if (window.opener && window.opener.getBpageList) {
window.opener.getBpageList();
} else {
window.opener.frames[0].getBpageList();
}
window.close();
this.$emit("input", false);
}, 1000);
});
},
/**
* @description: closeDialog
* @author: renchao
*/
cancelBack () {
popupCacel();
},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.invalid-title {
display: flex;
align-content: center;
.invalid-icon {
color: rgb(254, 148, 0);
font-size: 34px;
margin-right: 10px;
}
.invalid-body {
line-height: 40px;
margin-bottom: 10px;
}
}
.invalid-reson {
margin-bottom: 10px;
}
.dialog-footer {
margin-top: 10px;
display: flex;
justify-content: flex-end;
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2024-01-19 14:45:09
-->
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-row>
<el-col :span="8">
<el-form-item label="发证人姓名">
<el-input v-model="ruleForm.fzrmc" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发证时间">
<el-input v-model="ruleForm.fzsj" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发证数量">
<el-input v-model="ruleForm.fzsl" disabled></el-input>
</el-form-item>
</el-col>
</el-row>
<lb-table :column="tableData.columns" @row-dblclick="handleRowClick" ref="table" @selection-change="handleSelectionChange"
:data="tableData.data"
:pagination="false"
:calcHeight="300">
</lb-table>
<el-row>
<el-col :span="3">
<el-form-item label="身份证读卡器">
<el-button type="text" icon="el-icon-tickets" @click="readClick">读取</el-button>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="领证人" prop="lzrxm" label-width="70px">
<el-input v-model="ruleForm.lzrxm"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="证件类型" prop="lzrzjlb" label-width="80px">
<el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择">
<el-option v-for="item in lzrzjlbData" :key="item.dcode" :label="item.dname" :value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="证件号" prop="lzrzjh" label-width="70px">
<el-input v-model="ruleForm.lzrzjh"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="领证人电话" prop="lzrdh">
<el-input v-model="ruleForm.lzrdh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item class="text-center">
<el-button @click="$popupCacel">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</el-form-item>
</el-form>
</template>
<script>
const checkPhone = (rule, value, callback) => {
let regPone = null
let mobile = /^(1[3456789]\d{9})$/ //手机号
let tel = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/ // 座机
if (value && value[0] === '0') {// 检查 value 是否存在并且不是 null 或者 undefined
regPone = tel
} else if (value && value[0] !== '0') {
regPone = mobile
}
if (regPone === null) {
return callback(
new Error('请输入电话')
)
} else if (!regPone.test(value)) {
return callback(
new Error("请输入正确的电话格式,其中座机格式'区号-座机号码'")
)
} else {
callback()
}
};
import Vue from 'vue'
import store from '@/store/index.js'
import table from "@/utils/mixin/table";
import { getIdCardInfo } from '@/utils/operation.js'
import { getUnclaimedBdcqz, issueCertificate, getBdcqzQlr } from "@/api/bdcqz.js";
import { datas } from "../../javascript/fzxxdata";
import { log } from 'bpmn-js-token-simulation';
export default {
props: {
formData: {
type: Object,
default: () => {
return {}
}
}
},
mixins: [table],
data () {
return {
lzrzjlbData: store.getters.dictData['A30'],
ruleForm: {
fzrmc: '',
fzsj: '',
fzsl: '',
bdcqzList: [],
lzrxm: '',
lzrzjlb: '',
lzrzjh: '',
lzrdh: ''
},
rules: {
lzrxm: [
{ required: true, message: '请输入领证人', trigger: 'blur' }
],
lzrzjlb: [
{ required: true, message: '请选择证件类型', trigger: 'change' }
],
lzrzjh: [
{ required: true, message: '请输入证件号', trigger: 'blur' }
],
lzrdh: [
{ required: true, validator: checkPhone, trigger: ["blur"] }
]
},
tableData: {
total: 0,
columns: datas.columns().lzgrid,
data: []
}
}
},
mounted () {
this.$nextTick(() => {
this.loadGrid()
})
},
methods: {
/**
* @description: 身份证打卡器
* @author: renchao
*/
readClick () {
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,
} = JSON.parse(res)
if (Name) {
this.ruleForm.lzrxm = Name;
this.ruleForm.lzrzjlb = '1';
this.ruleForm.lzrzjh = IdNo;
this.$message({
message: '读取成功！',
type: 'success'
})
} else {
this.$message({
message: '请放置身份证',
type: 'warning'
})
}
} else {
if (res.data.code == 0) {
let data = res.data.IDCardInfo
this.ruleForm.lzrxm = data.name
this.ruleForm.lzrzjlb = '1'
this.ruleForm.lzrzjh = data.cardID
this.$message({
message: '读取成功！',
type: 'success'
})
} else {
this.$message({
message: res.data.message,
type: 'warning'
})
}
}
})
},
/**
* @description: 列表初始化
* @author: renchao
*/
loadGrid () {
let that = this
getUnclaimedBdcqz({ bsmSlsq: Vue.prototype.$currentRoute.query.bsmSlsq }).then(res => {
if (res.code === 200) {
this.tableData.data = res.result.list;
this.$nextTick(() => {
this.tableData.data.forEach(item => {
that.$refs.table.toggleRowSelection(item)
})
})
this.ruleForm.fzrmc = res.result.fzrmc
this.ruleForm.fzsj = res.result.fzsj
this.ruleForm.fzsl = res.result.fzsl
this.ruleForm.bdcqzList = res.result.list;
res.result.list.length && this.getQlr(res.result.list[0].bsmBdcqz)
}
})
},
/**
* @description: 获取权利人信息
* @author: renchao
*/
getQlr (bsmBdcqz) {
getBdcqzQlr(bsmBdcqz).then(res => {
if (res.code === 200) {
this.ruleForm.lzrxm = res.result.qlrmc;
this.ruleForm.lzrzjlb = res.result.zjzl;
this.ruleForm.lzrzjh = res.result.zjh;
this.ruleForm.lzrdh = res.result.dh;
}
})
},
/**
* @description: handleSelectionChange
* @param {*} val
* @author: renchao
*/
handleSelectionChange (val) {
this.ruleForm.bdcqzList = val
},
/**
* @description: handleRowClick
* @param {*} row
* @author: renchao
*/
handleRowClick (row) {
this.$refs.table.toggleRowSelection(row)
},
/**
* @description: handleSubmit
* @author: renchao
*/
handleSubmit () {
this.$refs.ruleForm.validate(valid => {
if (valid) {
issueCertificate(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success('保存成功');
//刷新列表
store.dispatch('user/reWorkFresh', true)
this.$popupCacel()
} else {
this.$message.error(res.message)
}
})
} else {
return false;
}
})
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-11-15 15:41:43
-->
<template>
<div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中...">
<!-- 表单部分 -->
<el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1" style="margin-top:-15px">
<el-tab-pane :label="item.qlr + (item.bdcqzh !== null ? '(' + item.bdcqzh + ')' : '')" :name="item.bsmBdcqz"
v-for="(item, index) in headTabBdcqz" :key="index">
</el-tab-pane>
</el-tabs>
<el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty>
<div v-else>
<div style="height:540px">
<el-form class="zs" :model="bdcqz" v-if="this.bdcqz.bdcqzlx==1" ref="ruleForm" label-width="100px">
<el-row>
<el-col :span="24">
<el-form-item label="权利人">
<el-input v-model="bdcqz.qlr"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="共有情况">
<el-select v-model="bdcqz.gyqk" class="width100" placeholder="请选择">
<el-option
v-for="item in gyqkList"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="坐落">
<el-input v-model="bdcqz.zl"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="不动产单元号">
<el-input v-model="bdcqz.bdcdyh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利类型">
<el-input v-model="bdcqz.qllx"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利性质 ">
<el-input v-model="bdcqz.qlxz"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="用途">
<el-input v-model="bdcqz.yt"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="面积">
<el-input v-model="bdcqz.mj"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="使用期限 ">
<el-input v-model="bdcqz.syqx"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利其他状况">
<el-input v-model="bdcqz.qlqtzk" :rows="4" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="附记">
<el-input v-model="bdcqz.fj" :rows="4" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form :model="bdcqz" class="zm" v-else ref="ruleForm" label-width="110px">
<el-row>
<el-col :span="24">
<el-form-item label="证明权利或事项">
<el-input v-model="bdcqz.zmqlhsx"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利人(申请人)">
<el-input v-model="bdcqz.qlr"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="义务人">
<el-input v-model="bdcqz.ywr"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="坐落">
<el-input v-model="bdcqz.zl"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="不动产单元号">
<el-input v-model="bdcqz.bdcdyh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="其他状况">
<el-input v-model="bdcqz.qlqtzk" :rows="6" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="附记">
<el-input v-model="bdcqz.fj" :rows="6" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div style="text-align:center">
<el-button @click="$popupCacel">取消</el-button>
<el-button type="primary" @click="handleSubmit">保存</el-button>
</div>
</div>
</div>
</template>
<script>
import store from '@/store/index.js'
import { getSlsqBdcqzList, editBdcqz } from "@/api/bdcqz.js"
export default {
name: "zsxg",
props: {
formData: {
type: Object,
default: {}
}
},
data () {
return {
gyqkList: store.getters.dictData['A34'],
key: 0,
noData: false,
loading: false,
bdcqz: {},
//tab切换栏数组
headTabBdcqz: [],
//tab选择绑定值
activeName: '',
}
},
mounted () {
this.getHeadTabBdcqz()
},
methods: {
/**
* @description: 获取受理申请下全部不动产权证
* @author: renchao
*/
getHeadTabBdcqz () {
this.loading = true
getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
if (res.code == 200) {
this.noData = true
if (res.result && res.result.length > 0) {
this.bdcqz = res.result[0]
this.headTabBdcqz = _.cloneDeep(res.result)
if (this.formData.bsmBdcqz) {
this.activeName = this.formData.bsmBdcqz
} else {
this.activeName = res.result[0].bsmBdcqz
}
}
}
this.loading = false
})
},
handleClick (tab) {
this.bdcqz = _.cloneDeep(this.headTabBdcqz[tab.index])
},
handleSubmit () {
editBdcqz(this.bdcqz).then(res => {
if (res.code == 200) {
this.$message.success('保存成功');
//刷新列表
this.$popupCacel()
} else {
this.$message.error(res.message)
}
})
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2024-02-06 13:23:44
-->
<template>
<div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="text-align: center;">
<!-- 表单部分 -->
<div style="margin-top:-20px">
<el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1">
<el-tab-pane :label="item.qlr + (item.bdcqzh !== null ? '(' + item.bdcqzh + ')' : '')" :name="item.bsmBdcqz"
v-for="(item, index) in headTabBdcqz" :key="index">
</el-tab-pane>
</el-tabs>
</div>
<el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty>
<div style="max-height:89vh;overflow-y:auto">
<div v-show="this.bdcqz.bdcqzlx==1">
<el-tabs v-model="activeTitle">
<el-tab-pane label="第一页" name="title1"></el-tab-pane>
<el-tab-pane label="第二页" name="title2"></el-tab-pane>
</el-tabs>
<div style="width:1169px;overflow-x: hidden;">
<canvas ref="zs1" width="1024" v-show="activeTitle=='title1'" height="739"></canvas>
<canvas ref="zs" width="1024" v-show="activeTitle=='title2'" height="739"></canvas>
</div>
</div>
<div style="width:1169px;overflow-x: hidden;" v-show="this.bdcqz.bdcqzlx==2">
<canvas ref="zm" width="1169" height="828"></canvas>
</div>
</div>
</div>
</template>
<script>
import QRCode from 'qrcode'
import { datas } from "../../javascript/zsyl.js";
import { getSlsqBdcqzList } from "@/api/bdcqz.js"
export default {
name: "zsyl",
props: {
formData: {
type: Object,
default: {}
}
},
data () {
return {
activeTitle: 'title1',
key: 0,
noData: false,
imgSrc1: require('@/image/bdcqz/bdcqzs1.jpg'),
imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
loading: false,
//印刷序列号集合
ysxlh: [],
//列名称对象
columns: [],
//选择的不动产权证文件
bdcqz: '',
//证书打开类型 是否需要展示打印按钮
isToPrint: false,
//tab切换栏数组
headTabBdcqz: [],
//tab选择绑定值
activeName: '',
//证书图片预览
previewImage: '',
ruleForm: {
bsmBdcqz: '',
szmc: '不动产权证书',
szzh: '',
ysxlh: '',
},
}
},
mounted () {
this.columns = datas.columns();
if (this.formData.bdcqz) {
//从缮证进入
this.bdcqz = this.formData.bdcqz
} else {
//从按钮进入
this.getHeadTabBdcqz();
}
},
methods: {
/**
* @description: 获取证书内容
* @param {*} code
* @author: renchao
*/
getRowValue (code) {
var value = this.bdcqz[code];
return value;
},
/**
* @description: 获取受理申请下全部不动产权证
* @author: renchao
*/
getHeadTabBdcqz () {
this.loading = true
getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
if (res.code == 200) {
this.noData = true
if (res.result && res.result.length > 0) {
this.bdcqz = res.result[0]
this.headTabBdcqz = res.result
if (this.formData.bsmBdcqz) {
this.activeName = this.formData.bsmBdcqz
} else {
this.activeName = res.result[0].bsmBdcqz
}
if (this.bdcqz.bdcqzlx == 1) {
this.drawTextOnImage()
} else {
this.drawTextzmImage()
}
}
}
this.loading = false
})
},
/**
* @description: tab表头切换方法
* @param {*} e
* @author: renchao
*/
handleClick (tab, event) {
this.bdcqz = this.headTabBdcqz[tab.index]
if (this.bdcqz.bdcqzlx == 1) {
this.drawTextOnImage()
} else {
this.drawTextzmImage()
}
},
/**
* @description: 不动产证书
* @author: renchao
*/
drawTextOnImage1 () {
const canvas = this.$refs.zs1;
const context = canvas.getContext('2d');
const image = new Image();
image.onload = () => {
context.drawImage(image, 0, 0);
context.font = '18px 楷体';
context.fillStyle = '#000000';
let date = this.bdcqz.djsj.split(' ')[0].split('/');
let nian = date[0]
let yue = date[1]
let ri = date[2]
this.bdcqz.nian = nian
this.bdcqz.yue = yue
this.bdcqz.ri = ri
context.fillText(nian ? nian : '', 780, 499);
context.fillText(yue ? yue : '', 840, 499);
context.fillText(ri ? ri : '', 885, 499);
QRCode.toDataURL(this.bdcqz.bdcqzh, { margin: 0 })
.then(url => {
const qrImage = new Image();
this.bdcqz.qrImage = url; // 将二维码图片的 URL 存储到 bdcqz 对象的 qrImage 属性中
qrImage.onload = () => {
context.drawImage(qrImage, 670, 400, 100, 100);
};
qrImage.src = url;
})
.catch(error => {
console.error(error);
});
context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 745, 633);
};
image.src = this.imgSrc1;
},
drawTextOnImage () {
this.drawTextOnImage1()
function getByteLen (val) {
var len = 0;
if (!val) return len;
for (var i = 0; i < val.length; i++) {
var length = val.charCodeAt(i);
if (length >= 0 && length <= 128) {
len += 1;
} else {
len += 2;
}
}
return len;
}
const canvas = this.$refs.zs;
const context = canvas.getContext('2d');
const image = new Image();
image.onload = () => {
context.drawImage(image, 0, 0);
context.font = '18px 楷体';
context.fillStyle = '#000000';
context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56);
context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56);
if (getByteLen(this.bdcqz.sxqc) > 14) {
const originalFont = context.font;
// 设置新的字体大小
context.font = '14px 楷体'; // 替换为你想要的字体和大小
// 绘制 bdcdyh
context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 165, 56);
// 恢复原始字体设置
context.font = originalFont;
} else {
context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 170, 56);
}
context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56);
context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 129, 97);
context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 129, 136);
this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' +
this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length)
context.fillText(this.bdcdyh ? this.bdcdyh : '', 129, 223);
context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263);
context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303);
context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346);
// context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : [];
if (getByteLen(this.bdcqz.mj) > 37) {
lines6.forEach((line, index) => {
const y = 378 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
} else {
lines6.forEach((line, index) => {
const y = 386 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
}
// 权利其他状态
let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n').filter(i => i && i.trim()) : [];
for (let i = 0; i < lines.length; i++) {
let num = Math.ceil(getByteLen(lines[i]) / 38)
if (getByteLen(lines[i]) > 37) {
let currentLine = '';
let arr = [];
for (let word of lines[i]) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 323) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
if (i > 0) {
arr.forEach((line, index) => {
context.fillText(line, 129, 495 + (29 * (i - 1)) + 4 * num + (index * 14)); // 调整行高
})
} else {
arr.forEach((line, index) => {
context.fillText(line, 129, 493 + (26 * (i - 1)) + (index * 14)); // 调整行高
})
}
} else {
if (i > 0) {
context.fillText(lines[i] ? lines[i] : '', 129, 500 + 4 * num + (29 * (i - 1)));
} else {
context.fillText(lines[i] ? lines[i] : '', 129, 505 + (27 * (i - 1)));
}
}
}
let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n').filter(i => i && i.trim()) : [];
lines1.forEach((line, index) => {
const y = 100 + (index * 30); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 395) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 580, y + (index * 30)); // 调整行高
})
})
let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : [];
if (getByteLen(this.bdcqz.syqx) > 37) {
lines3.forEach((line, index) => {
const y = 423 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 330) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
} else {
lines3.forEach((line, index) => {
const y = 430 + (index * 27); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 315) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
}
let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
if (getByteLen(this.bdcqz.zl) > 37) {
lines2.forEach((line, index) => {
const y = 170 + (index * 20); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 336) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
} else {
lines2.forEach((line, index) => {
const y = 180 + (index * 20); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 336) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 129, y + (index * 20)); // 调整行高
})
})
}
}
image.src = this.imgSrc
},
/**
* @description: 不动产证明
* @author: renchao
*/
drawTextzmImage () {
function getByteLen (val) {
var len = 0;
if (!val) return len;
for (var i = 0; i < val.length; i++) {
var length = val.charCodeAt(i);
if (length >= 0 && length <= 128) {
len += 1;
} else {
len += 2;
}
}
return len;
}
const canvas = this.$refs.zm;
const context = canvas.getContext('2d');
const image = new Image();
image.onload = () => {
context.drawImage(image, 0, 0);
context.font = '18px 楷体';
context.fillStyle = '#000000';
// ysxlh
context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : '', 280, 712);
// djsj
if (this.bdcqz.djsj) {
let djsjList = this.bdcqz.djsj.split(' ')[0].split('/')
context.fillText(djsjList[0] ? djsjList[0] : '', 327, 580);
context.fillText(djsjList[1] ? djsjList[1] : '', 393, 580);
context.fillText(djsjList[2] ? djsjList[2] : '', 443, 580);
}
context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 620, 125);
context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 665, 125);
if (getByteLen(this.bdcqz.sxqc) > 14) {
const originalFont = context.font;
// 设置新的字体大小
context.font = '14px 楷体'; // 替换为你想要的字体和大小
// 绘制 bdcdyh
context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 725, 125);
// 恢复原始字体设置
context.font = originalFont;
} else {
context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 755, 125);
}
context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123);
context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180);
// context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228);
// 权利人
let qlrlines = this.bdcqz.qlr
if (getByteLen(this.bdcqz.qlr) > 32) {
let currentLine = '';
let arr = [];
for (let word of qlrlines) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 295) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine); // 将最后一行添加到数组
// 绘制所有行
for (let i = 0; i < arr.length; i++) {
context.fillText(arr[i], 775, 218 + i * 20); // lineHeight 为行高
}
} else {
context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228);
}
// 义务人
// context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275);
let ywrlines = this.bdcqz.ywr
if (getByteLen(this.bdcqz.ywr) > 32) {
let currentLine = '';
let arr = [];
for (let word of ywrlines) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 295) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine); // 将最后一行添加到数组
// 绘制所有行
for (let i = 0; i < arr.length; i++) {
context.fillText(arr[i], 775, 268 + i * 20); // lineHeight 为行高
}
} else {
context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275);
}
// context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325);
let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
if (getByteLen(this.bdcqz.zl) > 32) {
lines2.forEach((line, index) => {
const y = 315 + (index * 20); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 295) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 775, y + (index * 20)); // 调整行高
})
})
} else {
lines2.forEach((line, index) => {
const y = 325 + (index * 20); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= 295) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 775, y + (index * 20)); // 调整行高
})
})
}
// bdcdyh
this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' +
this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length)
// context.fillText(this.bdcdyh ? this.bdcdyh : '', 775, 373);
// 保存当前字体设置
const originalFont = context.font;
// 设置新的字体大小
context.font = '16px 楷体'; // 替换为你想要的字体和大小
// 绘制 bdcdyh
context.fillText(this.bdcdyh ? this.bdcdyh : '', 775, 373);
// 恢复原始字体设置
context.font = originalFont;
// qlqtzk
function getByteLenBdcdy (val) {
var encoder = new TextEncoder('utf-8');
return encoder.encode(val).length;
}
const maxWidth = 295; // 最大宽度限制
let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n').filter(i => i && i.trim()) : [];
let bdcdyNum = Math.ceil(getByteLenBdcdy(lines[0]) / 43)
// 单独处理不动产单元号
let linesBdcdy = lines[0] ? lines[0].split(' ') : [];
if (getByteLenBdcdy(lines[0]) > 43) {
linesBdcdy.forEach((line, index) => {
const y = 412 + (index * 17); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= maxWidth) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 770, y + (index * 17)); // 调整行高
})
})
} else {
linesBdcdy.forEach((line, index) => {
const y = 418 + (index * 17); // 每行文本的垂直位置
let currentLine = '';
let arr = [];
for (let word of line) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= maxWidth) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
arr.forEach((line, index) => {
context.fillText(line, 770, y + (index * 17)); // 调整行高
})
})
}
for (let i = 1; i < lines.length; i++) {
let num = Math.ceil(getByteLen(lines[i]) / 32)
if (getByteLen(lines[i]) > 32) {
let currentLine = '';
let arr = [];
for (let word of lines[i]) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= maxWidth) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
if (i > 0) {
arr.forEach((line, index) => {
context.fillText(line, 770, 408 + (bdcdyNum * 15) + (24 * (i - 1)) + 5 * num + (index * 17)); // 调整行高
})
} else {
arr.forEach((line, index) => {
context.fillText(line, 770, 408 + (bdcdyNum * 15) + (24 * (i - 1)) + (index * 17)); // 调整行高
})
}
} else {
if (i > 0) {
context.fillText(lines[i] ? lines[i] : '', 770, 417 + (bdcdyNum * 15) + 6 * num + (25 * (i - 1)));
} else {
context.fillText(lines[i] ? lines[i] : '', 770, 417 + (bdcdyNum * 15) + (25 * (i - 1)));
}
}
}
// fj
let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n').filter(i => i && i.trim()) : [];
for (let i = 0; i < lines1.length; i++) {
let num = Math.ceil(getByteLen(lines1[i]) / 37)
if (getByteLen(lines1[i]) > 37) {
let currentLine = '';
let arr = [];
for (let word of lines1[i]) {
const testLine = currentLine + word;
const lineWidth = context.measureText(testLine).width;
if (lineWidth <= maxWidth) {
currentLine = testLine;
} else {
arr.push(currentLine);
currentLine = word;
}
}
arr.push(currentLine);
if (i > 0) {
arr.forEach((line, index) => {
context.fillText(line, 770, 605 + (24 * (i - 1)) + 5 * num + (index * 17)); // 调整行高
})
} else {
arr.forEach((line, index) => {
context.fillText(line, 770, 605 + (24 * (i - 1)) + (index * 17)); // 调整行高
})
}
} else {
if (i > 0) {
context.fillText(lines1[i] ? lines1[i] : '', 770, 616 + 6 * num + (25 * (i - 1)));
} else {
context.fillText(lines1[i] ? lines1[i] : '', 770, 616 + (25 * (i - 1)));
}
}
}
}
image.src = this.bdczmSrc;
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
/deep/.el-tabs__nav-wrap::after {
display: none;
}
/deep/.el-tabs__header {
margin: 0;
}
/deep/.el-form-item--small.el-form-item {
margin-bottom: 0;
}
/deep/.mask-content {
padding-top: 10px !important;
}
.imgClass {
display: inline-block;
height: auto;
max-width: 100%;
}
.middle_padding {
padding-bottom: 10px;
}
.zsyl-button {
text-align: center;
margin-top: 20px;
.operation_button {
width: 100px;
border: 1px solid rgb(0, 121, 254);
}
.dy-button {
color: white;
background-color: rgb(0, 121, 254);
}
}
.table-column {
border-spacing: 1px;
width: 100%;
tr td {
border: 1px solid #ccc;
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
background: rgb(251, 249, 229);
}
}
.zsyl-title {
background: #fafbe5;
text-align: center;
padding: 5px 0px;
font-size: 20px;
}
.no-data {
font-size: 18px;
display: flex;
text-align: center;
justify-content: center;
}
</style>