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
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-17 13:51:29
5 -->
6 <template>
7 <lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData">
8 </lb-table>
9 </template>
10 <script>
11 import addQlr from '../../../components/dialog/addQlr.vue'
12 import { mapGetters } from 'vuex'
13 export default {
14 components: {
15 addQlr
16 },
17 computed: {
18 ...mapGetters(["dictData"]),
19 },
20 props: {
21 tableData: {
22 type: Array,
23 default: function () {
24 return []
25 }
26 },
27 gyfs: {
28 type: String,
29 default: '1'
30 }
31 },
32 data () {
33 return {
34 key: 0,
35 dataIndex: 0,
36 dialog: false,
37 details: {},
38 tableDataList: [],
39 qlrCommonTable: [
40 {
41 label: '序号',
42 type: 'index',
43 width: '50',
44 render: (h, scope) => {
45 return (
46 <div>
47 {scope.$index + 1}
48 </div>
49 )
50 }
51 },
52 {
53 prop: "qllxmc",
54 label: "权利类型"
55 },
56 {
57 prop: "bdcqzh",
58 label: "不动产权证号"
59 },
60 {
61 prop: "qlrmc",
62 label: "权利人"
63 },
64 {
65 prop: "qlrzjhm",
66 label: "证件号码"
67 },
68 {
69 prop: "bdcdyh",
70 label: "不动产单元号"
71 },
72 {
73 prop: "qlxzmc",
74 label: "权利性质"
75 },
76 {
77 prop: "qlytmc",
78 label: "用途"
79 },
80 {
81 prop: "qlmjmc",
82 label: "面积"
83 },
84 {
85 prop: "zl",
86 label: "坐落"
87 },
88 ],
89 column: this.qlrCommonTable
90 }
91 },
92 watch: {
93 tableData: {
94 handler: function (val, oldVal) {
95 let that = this
96 if (val.length == 0 || !val) {
97 that.tableDataList = _.cloneDeep([{
98 sqrmc: '',
99 dlrzjlx: '',
100 dlrzjh: '',
101 fr: ''
102 }])
103 } else {
104 that.tableDataList = _.cloneDeep(val)
105 }
106 },
107 immediate: true,
108 deep: true
109 },
110 gyfs: {
111 handler (newVal, oldValue) {
112 let dataList = _.cloneDeep(this.qlrCommonTable)
113 if (newVal == '1') {
114 this.column = _.cloneDeep(dataList).slice(1, dataList.length)
115 } else if ((newVal == '2')) {
116 this.column = dataList
117 } else {
118 this.column = _.cloneDeep(dataList)
119 this.column.splice(
120 2, 0, {
121 prop: "qlbl",
122 label: "份数"
123 })
124 }
125 },
126 immediate: true
127 }
128 },
129 methods: {
130 }
131 }
132 </script>
133 <style scoped lang='scss'>
134 /deep/.el-table th {
135 height: 30px !important;
136 }
137 /deep/.el-table--small .el-table__cell {
138 padding: 5px;
139 }
140 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-17 13:51:29
5 -->
6 <template>
7 <lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData">
8 </lb-table>
9 </template>
10 <script>
11 import addQlr from './dialog/addQlr.vue'
12 import { mapGetters } from 'vuex'
13 export default {
14 components: {
15 addQlr
16 },
17 computed: {
18 ...mapGetters(["dictData"]),
19 },
20 props: {
21 tableData: {
22 type: Array,
23 default: function () {
24 return []
25 }
26 },
27 gyfs: {
28 type: String,
29 default: '1'
30 }
31 },
32 data () {
33 return {
34 key: 0,
35 dataIndex: 0,
36 dialog: false,
37 details: {},
38 tableDataList: [],
39 qlrCommonTable: [
40 {
41 label: '序号',
42 type: 'index',
43 width: '50',
44 render: (h, scope) => {
45 return (
46 <div>
47 {scope.$index + 1}
48 </div>
49 )
50 }
51 },
52 {
53 prop: "yg",
54 label: "原告"
55 },
56 {
57 prop: "cfjg",
58 label: "查封机关"
59 },
60 {
61 prop: "cfwh",
62 label: "查封文号"
63 },
64 {
65 prop: "cfqssj",
66 label: "查封开始时间"
67 },
68 {
69 prop: "cfjssj",
70 label: "查封结束时间"
71 },
72 {
73 prop: "cflxmc",
74 label: "查封类型"
75 },
76 {
77 prop: "ywrmc",
78 label: "被执行人"
79 },
80 {
81 prop: "bcfzh",
82 label: "被查封证号"
83 },
84 {
85 prop: "bdcdyh",
86 label: "不动产单元号"
87 },
88 {
89 prop: "zl",
90 label: "坐落"
91 },
92
93
94 ],
95 column: this.qlrCommonTable
96 }
97 },
98 watch: {
99 tableData: {
100 handler: function (val, oldVal) {
101 let that = this
102 if (val.length == 0 || !val) {
103 that.tableDataList = _.cloneDeep([{
104 sqrmc: '',
105 dlrzjlx: '',
106 dlrzjh: '',
107 fr: ''
108 }])
109 } else {
110 that.tableDataList = _.cloneDeep(val)
111 }
112 },
113 immediate: true,
114 deep: true
115 },
116 gyfs: {
117 handler (newVal, oldValue) {
118 let dataList = _.cloneDeep(this.qlrCommonTable)
119 if (newVal == '1') {
120 this.column = _.cloneDeep(dataList).slice(1, dataList.length)
121 } else if ((newVal == '2')) {
122 this.column = dataList
123 } else {
124 this.column = _.cloneDeep(dataList)
125 this.column.splice(
126 2, 0, {
127 prop: "qlbl",
128 label: "份数"
129 })
130 }
131 },
132 immediate: true
133 }
134 },
135 methods: {
136 }
137 }
138 </script>
139 <style scoped lang='scss'>
140 /deep/.el-table th {
141 height: 30px !important;
142 }
143 /deep/.el-table--small .el-table__cell {
144 padding: 5px;
145 }
146 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-17 13:51:29
5 -->
6 <template>
7 <lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData">
8 </lb-table>
9 </template>
10 <script>
11 import addQlr from '../../../components/dialog/addQlr.vue'
12 import { mapGetters } from 'vuex'
13 export default {
14 components: {
15 addQlr
16 },
17 computed: {
18 ...mapGetters(["dictData"]),
19 },
20 props: {
21 tableData: {
22 type: Array,
23 default: function () {
24 return []
25 }
26 },
27 gyfs: {
28 type: String,
29 default: '1'
30 }
31 },
32 data () {
33 return {
34 key: 0,
35 dataIndex: 0,
36 dialog: false,
37 details: {},
38 tableDataList: [],
39 qlrCommonTable: [
40 {
41 label: '序号',
42 type: 'index',
43 width: '50',
44 render: (h, scope) => {
45 return (
46 <div>
47 {scope.$index + 1}
48 </div>
49 )
50 }
51 },
52 {
53 prop: "qlrmc",
54 label: "抵押权人"
55 },
56 {
57 prop: "ywrmc",
58 label: "抵押人"
59 },
60 {
61 prop: "bdcqzh",
62 label: "不动产登记证明号"
63 },
64 {
65 prop: "dyjelx",
66 label: "抵押金额类型"
67 },
68 {
69 prop: "dyfsmc",
70 label: "抵押方式"
71 },
72 {
73 prop: "qdjgmc",
74 label: "抵押金额"
75 },
76 {
77 prop: "qlmjmc",
78 label: "抵押面积"
79 },
80 {
81 prop: "zwlxqssj",
82 label: "债务履行开始时间"
83 },
84 {
85 prop: "zwlxjssj",
86 label: "债务履行结束时间"
87 },
88 {
89 prop: "bdcdyh",
90 label: "不动产单元号"
91 },
92 {
93 prop: "zl",
94 label: "坐落"
95 },
96
97
98 ],
99 column: this.qlrCommonTable
100 }
101 },
102 watch: {
103 tableData: {
104 handler: function (val, oldVal) {
105 let that = this
106 if (val.length == 0 || !val) {
107 that.tableDataList = _.cloneDeep([{
108 sqrmc: '',
109 dlrzjlx: '',
110 dlrzjh: '',
111 fr: ''
112 }])
113 } else {
114 that.tableDataList = _.cloneDeep(val)
115 }
116 },
117 immediate: true,
118 deep: true
119 },
120 gyfs: {
121 handler (newVal, oldValue) {
122 let dataList = _.cloneDeep(this.qlrCommonTable)
123 if (newVal == '1') {
124 this.column = _.cloneDeep(dataList).slice(1, dataList.length)
125 } else if ((newVal == '2')) {
126 this.column = dataList
127 } else {
128 this.column = _.cloneDeep(dataList)
129 this.column.splice(
130 2, 0, {
131 prop: "qlbl",
132 label: "份数"
133 })
134 }
135 },
136 immediate: true
137 }
138 },
139 methods: {
140 }
141 }
142 </script>
143 <style scoped lang='scss'>
144 /deep/.el-table th {
145 height: 30px !important;
146 }
147 /deep/.el-table--small .el-table__cell {
148 padding: 5px;
149 }
150 </style>
1 <!--
2 * @Description: 房屋多幢明细
3 * @Autor:
4 * @LastEditTime: 2023-09-01 13:29:29
5 -->
6 <template>
7 <div>
8 <el-table
9 :data="tableDataList"
10 border
11 :pagination="false"
12 :key="key"
13 :header-cell-style="{ 'text-align': 'center' }"
14 :heightNumSetting="true"
15 :minHeight="150"
16 height="150"
17 style="width: 100%">
18 <el-table-column prop="index" width="50" :render-header="renderHeader">
19 <template slot-scope="scope">
20 <div style="text-align: center">{{ scope.$index + 1 }}</div>
21 </template>
22 </el-table-column>
23 <el-table-column prop="bdcdyh" label="不动产单元号" min-width="100">
24 <template slot-scope="scope">
25 <div style="text-align: center">{{ scope.row.bdcdyh }}</div>
26 </template>
27 </el-table-column>
28 <el-table-column prop="xmmc" label="项目名称" min-width="100">
29 <template slot-scope="scope">
30 <el-input
31 class="item"
32 :disabled="!ableOperation"
33 v-model="scope.row.xmmc"
34 placeholder="请输入内容"
35 @input="updaterow(scope.row)">
36 </el-input>
37 </template>
38 </el-table-column>
39 <el-table-column prop="fwxz" label="房屋性质" min-width="100">
40 <template slot-scope="scope">
41 <treeselect
42 v-model="scope.row.fwxz"
43 :disabled="!ableOperation"
44 noOptionsText="暂无数据"
45 placeholder=""
46 :show-count="true"
47 :options="dictData['A19']"
48 :normalizer="normalizer"
49 :appendToBody="true"
50 z-index="9999"
51 @input="updaterow(scope.row)" />
52 </template>
53 </el-table-column>
54 <el-table-column prop="ghyt" label="房屋用途" min-width="100">
55 <template slot-scope="scope">
56 <treeselect
57 v-model="scope.row.ghyt"
58 :disabled="!ableOperation"
59 noOptionsText="暂无数据"
60 placeholder=""
61 :show-count="true"
62 :options="dictData['A17']"
63 :normalizer="normalizer"
64 :appendToBody="true"
65 z-index="9999"
66 @input="updaterow(scope.row)" />
67 </template>
68 </el-table-column>
69 <el-table-column prop="fwjg" label="房屋结构" min-width="100">
70 <template slot-scope="scope">
71 <treeselect
72 v-model="scope.row.fwjg"
73 :disabled="!ableOperation"
74 noOptionsText="暂无数据"
75 placeholder=""
76 :show-count="true"
77 :options="dictData['A46']"
78 :normalizer="normalizer"
79 :appendToBody="true"
80 z-index="9999"
81 @input="updaterow(scope.row)" />
82 </template>
83 </el-table-column>
84 <el-table-column prop="jzmj" label="建筑面积" min-width="100">
85 <template slot-scope="scope">
86 <el-input
87 maxlength="12"
88 class="item"
89 :disabled="!ableOperation"
90 oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
91 v-model="scope.row.jzmj"
92 placeholder="请输入内容"
93 @input="updaterow(scope.row)">
94 </el-input>
95 </template>
96 </el-table-column>
97 <el-table-column prop="jgsj" label="竣工时间" min-width="100">
98 <template slot-scope="scope">
99 <el-date-picker
100 v-model="scope.row.jgsj"
101 type="date"
102 :disabled="!ableOperation"
103 placeholder="选择日期"
104 value-format="yyyy-MM-dd HH:mm:ss"
105 format="yyyy-MM-dd"
106 @input="updaterow(scope.row)">
107 </el-date-picker>
108 </template>
109 </el-table-column>
110 <el-table-column prop="zcs" label="总层数" min-width="100">
111 <template slot-scope="scope">
112 <el-input
113 class="item"
114 :disabled="!ableOperation"
115 oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
116 v-model="scope.row.zcs"
117 placeholder="请输入内容"
118 @input="updaterow(scope.row)">
119 </el-input>
120 </template>
121 </el-table-column>
122 <el-table-column prop="zts" label="总套数" min-width="100">
123 <template slot-scope="scope">
124 <el-input
125 class="item"
126 :disabled="!ableOperation"
127 oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
128 v-model="scope.row.zts"
129 placeholder="请输入内容"
130 @input="updaterow(scope.row)">
131 </el-input>
132 </template>
133 </el-table-column>
134 </el-table>
135 </div>
136 </template>
137 <script>
138 import { mapGetters } from "vuex";
139
140 export default {
141 computed: {
142 ...mapGetters(["dictData"]),
143 },
144 props: {
145 tableData: {
146 type: Array,
147 default: function () {
148 return [];
149 },
150 },
151 ableOperation: {
152 type: Boolean,
153 default: false,
154 },
155
156 },
157 data () {
158 return {
159 // 键名转换，方法默认是label和children进行树状渲染
160 key: 0,
161 tableDataList: [],
162 normalizer (node) {
163 if (node.children == null || node.children == "null") {
164 delete node.children;
165 }
166 return {
167 id: node.dcode,
168 label: node.dname,
169 children: node.children,
170 };
171 },
172 };
173 },
174 mounted () {
175 },
176 watch: {
177 tableData: {
178 handler: function (val, oldVal) {
179 let that = this;
180 this.$nextTick(() => {
181 if (val.length == 0 || !val) {
182 that.tableDataList = _.cloneDeep([
183 {
184 yt: null,
185 qssj: "",
186 jssj: "",
187 tdsyqx: "",
188 },
189 ]);
190 } else {
191 that.tableDataList = _.cloneDeep(val);
192 }
193 });
194 },
195 immediate: true,
196 deep: true,
197 },
198 },
199 methods: {
200 /**
201 * @description: renderHeader
202 * @author: renchao
203 */
204 renderHeader () {
205 return (
206 <div>
207 {"序号"}
208 </div>
209 );
210 },
211 updaterow (a) {
212 this.$emit("updateFdcwxmList", this.tableDataList);
213 }
214 }
215 }
216 </script>
217 <style scoped lang="scss">
218 .el-input {
219 border: none !important;
220 }
221
222 /deep/ .el-table__row {
223 border: none !important;
224 }
225
226 .el-date-editor.el-input {
227 width: 100%;
228 }
229
230 /deep/ .el-table th {
231 height: 30px !important;
232 }
233 </style>
234
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-17 13:50:53
5 -->
6 <template>
7 <lb-table :column="column" :maxHeight="200" :heightNumSetting="true" :pagination="false" :key="key" :data="tableData">
8 </lb-table>
9 </template>
10 <script>
11 import addQlr from './dialog/addQlr.vue'
12 import { mapGetters } from 'vuex'
13 export default {
14 components: {
15 addQlr
16 },
17 computed: {
18 ...mapGetters(["dictData"]),
19 },
20 props: {
21 tableData: {
22 type: Array,
23 default: function () {
24 return []
25 }
26 },
27 gyfs: {
28 type: String,
29 default: '1'
30 }
31 },
32 data () {
33 return {
34 key: 0,
35 dataIndex: 0,
36 dialog: false,
37 details: {},
38 tableDataList: [],
39 qlrCommonTable: [
40 {
41 label: '序号',
42 type: 'index',
43 width: '50',
44 render: (h, scope) => {
45 return (
46 <div>
47 {scope.$index + 1}
48 </div>
49 )
50 }
51 },
52 // {
53 // prop: "bdcdyh",
54 // label: "不动产单元号"
55 // },
56 {
57 prop: "zl",
58 label: "坐落"
59 },
60 {
61 prop: "shbw",
62 label: "室号部位"
63 },
64 {
65 prop: "fwxzmc",
66 label: "房屋性质"
67 },
68 {
69 prop: "sjc",
70 label: "层号"
71 },
72 {
73 prop: "jzmj",
74 label: "建筑面积"
75 },
76 {
77 prop: "fwlxmc",
78 label: "房屋类型"
79 },
80 {
81 prop: "showfwyt",
82 label: "房屋用途"
83 },
84 {
85 prop: "showfwjg",
86 label: "房屋结构"
87 },
88 ],
89 column: this.qlrCommonTable
90 }
91 },
92 watch: {
93 tableData: {
94 handler: function (val, oldVal) {
95 let that = this;
96 if (val.length == 0 || !val) {
97 } else {
98 that.tableDataList = _.cloneDeep(val)
99 }
100 },
101 immediate: true,
102 deep: true
103 },
104 gyfs: {
105 handler (newVal, oldValue) {
106 let dataList = _.cloneDeep(this.qlrCommonTable)
107 if (newVal == '1') {
108 this.column = _.cloneDeep(dataList).slice(1, dataList.length)
109 } else if ((newVal == '2')) {
110 this.column = dataList
111 } else {
112 this.column = _.cloneDeep(dataList)
113 this.column.splice(
114 2, 0, {
115 prop: "qlbl",
116 label: "份数"
117 })
118 }
119 },
120 immediate: true
121 }
122 },
123 methods: {
124 }
125 }
126 </script>
127 <style scoped lang="scss">
128 /deep/.el-table th {
129 height: 30px !important;
130 }
131 /deep/.el-table--small .el-table__cell {
132 padding: 5px;
133 }
134 </style>
135
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2024-01-18 14:13:02
5 -->
6 <template>
7 <div>
8 <el-table
9 :data="tableDataList"
10 border
11 :pagination="false"
12 :key="key"
13 :header-cell-style="{ 'text-align': 'center' }"
14 :heightNumSetting="true"
15 style="width: 100%">
16 <el-table-column prop="index" width="50" :render-header="renderHeader">
17 <template slot-scope="scope">
18 <i
19 class="el-icon-minus pointer"
20 @click="deleClick(scope.$index, scope.row)"
21 v-if="ableOperation"></i>
22 <div style="text-align: center" v-else>
23 {{ scope.$index + 1 }}
24 </div>
25 </template>
26 </el-table-column>
27 <el-table-column prop="yt" label="土地用途" min-width="100">
28 <template slot-scope="scope">
29 <treeselect
30 v-model="scope.row.yt"
31 :disabled="!ableOperation"
32 noOptionsText="暂无数据"
33 placeholder=""
34 :show-count="true"
35 :options="dictData['tdyt']"
36 :normalizer="normalizer"
37 :appendToBody="true"
38 z-index="9999"
39 @input="addrow(scope.row)" />
40 </template>
41 </el-table-column>
42 <el-table-column prop="qssj" label="土地使用起始时间" min-width="100">
43 <template slot-scope="scope">
44 <el-date-picker
45 v-model="scope.row.qssj"
46 type="date"
47 :disabled="!ableOperation"
48 :picker-options="scope.row.pickerStart"
49 placeholder="选择日期"
50 value-format="yyyy-MM-dd HH:mm:ss"
51 format="yyyy-MM-dd"
52 @input="startTime(scope.$index)">
53 </el-date-picker>
54 </template>
55 </el-table-column>
56 <el-table-column prop="jssj" label="土地使用结束时间" min-width="100">
57 <template slot-scope="scope">
58 <el-date-picker
59 v-model="scope.row.jssj"
60 type="date"
61 :disabled="!ableOperation"
62 :picker-options="scope.row.pickerEnd"
63 placeholder="选择日期"
64 value-format="yyyy-MM-dd HH:mm:ss"
65 format="yyyy-MM-dd"
66 @input="endTime(scope.$index)">
67 </el-date-picker>
68 </template>
69 </el-table-column>
70 <el-table-column prop="tdsyqx" label="土地使用期限" min-width="100">
71 <template slot-scope="scope">
72 <el-input
73 class="item"
74 :disabled="!ableOperation"
75 v-model="scope.row.tdsyqx"
76 oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
77 placeholder="请输入内容"
78 @input="sumTime(scope.$index, scope.row.tdsyqx)">
79 ></el-input>
80 </template>
81 </el-table-column>
82 </el-table>
83 </div>
84 </template>
85 <script>
86 import { mapGetters } from "vuex";
87 export default {
88 computed: {
89 ...mapGetters(["dictData"]),
90 },
91 props: {
92 tableData: {
93 type: Array,
94 default: function () {
95 return [];
96 },
97 },
98 ableOperation: {
99 type: Boolean,
100 default: true,
101 },
102 },
103 data () {
104 return {
105 // 键名转换，方法默认是label和children进行树状渲染
106 key: 0,
107 newdata: {
108 yt: null,
109 qssj: "",
110 jssj: "",
111 tdsyqx: "",
112 },
113 tableDataList: [],
114 // 起始时间选择范围
115 pickerStart: {},
116 pickerEnd: {},
117 normalizer (node) {
118 if (node.children == null || node.children == "null") {
119 delete node.children;
120 }
121 return {
122 id: node.dcode,
123 label: node.dname,
124 children: node.children,
125 };
126 },
127 };
128 },
129 mounted () { },
130 watch: {
131 tableData: {
132 handler: function (val, oldVal) {
133 let that = this;
134 this.$nextTick(() => {
135 if (!val || val.length == 0) {
136 that.tableDataList = _.cloneDeep([
137 {
138 yt: null,
139 qssj: "",
140 jssj: "",
141 tdsyqx: "",
142 },
143 ]);
144 } else {
145 that.tableDataList = _.cloneDeep(val);
146 }
147 });
148 },
149 immediate: true,
150 deep: true,
151 },
152 },
153 methods: {
154 /**
155 * @description: renderHeader
156 * @author: renchao
157 */
158 renderHeader () {
159 return (
160 <div>
161 {" "}
162 {!this.ableOperation ? (
163 "序号"
164 ) : (
165 <i
166 class="el-icon-plus pointer"
167 onClick={() => {
168 this.addClick();
169 }}
170 ></i>
171 )}
172 </div>
173 );
174 },
175 // 修改事件
176 /**
177 * @description: 修改事件
178 * @author: renchao
179 */
180 addrow (a) {
181 // this.tableDataList = this.tableDataList.map((item) => {
182 // return {
183 // ...item,
184 // yt: a.yt,
185 // };
186 // });
187 this.$emit("upDateTdytxxList", this.tableDataList);
188 },
189 /**
190 * @description: startTime
191 * @param {*} index
192 * @author: renchao
193 */
194 startTime (index) {
195 console.log("index", index);
196 // let startTime = this.tableDataList[index].tdsyqssj;
197 let endTime = this.tableDataList[index].jssj;
198 let startTime = this.tableDataList[index].qssj;
199 this.tableDataList[index].pickerEnd = {
200 disabledDate: (time) => {
201 if (Object.keys(startTime).length > 0) {
202 return new Date(startTime).getTime() > time.getTime();
203 } else {
204 return time.getTime() < Date.now();
205 }
206 },
207 };
208 if (startTime && endTime) {
209 let startYear = new Date(startTime).getFullYear();
210 let endYear = new Date(endTime).getFullYear();
211 this.tableDataList[index].tdsyqx = endYear - startYear;
212 }
213 this.$emit("upDateTdytxxList", this.tableDataList);
214 },
215 /**
216 * @description: endTime
217 * @param {*} index
218 * @author: renchao
219 */
220 endTime (index) {
221 // let startTime = this.tableDataList[index].tdsyqssj;
222 let startTime = this.tableDataList[index].qssj;
223 let endTime = this.tableDataList[index].jssj;
224 this.tableDataList[index].pickerStart = {
225 disabledDate: (time) => {
226 if (Object.keys(endTime).length > 0) {
227 return new Date(endTime).getTime() < time.getTime();
228 } else {
229 return time.getTime() > Date.now();
230 }
231 },
232 };
233 if (startTime && endTime) {
234 let startYear = new Date(startTime).getFullYear();
235 let endYear = new Date(endTime).getFullYear();
236 this.tableDataList[index].tdsyqx = endYear - startYear;
237 }
238 this.$emit("upDateTdytxxList", this.tableDataList);
239 },
240 /**
241 * @description: sumTime
242 * @param {*} index
243 * @param {*} tdsyqx
244 * @author: renchao
245 */
246 sumTime (index, tdsyqx) {
247 let startTime = this.tableDataList[index].qssj;
248 this.tableDataList[index].jssj =
249 Number(startTime.substring(0, 4)) +
250 Number(tdsyqx) +
251 startTime.slice(4, 19);
252 this.$emit("upDateTdytxxList", this.tableDataList);
253 },
254 // 新增
255 /**
256 * @description: 新增
257 * @author: renchao
258 */
259 addClick () {
260 // this.tableDataList[this.tableDataList.length] = _.cloneDeep(this.newdata);
261 this.tableDataList.push(_.cloneDeep(this.newdata))
262 this.$emit("upDateTdytxxList", this.tableDataList);
263 },
264
265 // 删除
266 /**
267 * @description: 删除
268 * @param {*} index
269 * @param {*} row
270 * @author: renchao
271 */
272 deleClick (index, row) {
273 this.$confirm("确定要删除吗, 是否继续?", "提示", {
274 confirmButtonText: "确定",
275 cancelButtonText: "取消",
276 type: "warning",
277 })
278 .then(() => {
279 this.tableDataList.splice(index, 1);
280 this.$emit("upDateTdytxxList", this.tableDataList);
281 })
282 .catch(() => { });
283 },
284 },
285 };
286 </script>
287 <style scoped lang="scss">
288 .el-input {
289 border: none !important;
290 }
291 /deep/.el-table__row {
292 border: none !important;
293 }
294 .el-date-editor.el-input {
295 width: 100%;
296 }
297 /deep/.el-table th {
298 height: 30px !important;
299 }
300 /deep/ .el-table--border .el-table__cell:first-child .cell {
301 text-align: center;
302 }
303 /deep/.el-table--small .el-table__cell {
304 padding: 3px 0 !important;
305 }
306 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-24 16:15:50
5 -->
6 <template>
7 <div class="djxxTable" :style="{'max-height': this.timeLineHeight + 'px' }"
8 style="overflow-y:scroll;">
9 <div class="tableBox">
10 <div class="title">
11 <span>{{ title }}</span>
12 </div>
13 <div class="xxTableBox">
14 <table class="xxTable">
15 <tr>
16 <td></td>
17 <td>变更前2</td>
18 <td>变更后</td>
19 </tr>
20 <tr v-for="(item, colindex) in columns" :key="colindex">
21 <td>
22 {{ item.label }}
23 </td>
24 <td
25 v-for="(row, index) in tableData"
26 :key="index"
27 :class="[
28 row.qszt == '2' ? 'lishi' : '',
29 row.qszt == '0' ? 'linshi' : '',
30 row.qlzt == '4' ? 'linshi' : '',
31
32 item.prop == 'qszt' && row.qlzt == '3' ? 'linshiIcon' : '',
33 item.prop == 'qszt' && row.qlzt == '2' ? 'linshiIcon' : '',
34 item.prop == 'qszt' && row.qlzt == '1' ? 'xianshiIcon' : '',
35 item.prop == 'qszt' && row.qlzt == '4' ? 'zhuxiaoIcon' : ''
36 ]">
37 <div class="icon" v-if="item.prop == 'qszt' &&row.qlzt == '1'">
38 有效
39 </div>
40 <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '2'">
41 正在补录
42 </div>
43 <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '3'">
44 正在申请
45 </div>
46 <div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '4'">
47 正在注销
48 </div>
49
50 <p v-if="!['djyy','fj'].includes(item.prop)">
51 <span v-if="item.prop == 'qszt'">
52 {{ getQsztName(row[item.prop]) }}
53 </span>
54 <span v-else>{{ row[item.prop] }}</span>
55 </p>
56
57 <el-tooltip v-else effect="dark" :content="row[item.prop]" placement="top" popper-class="tooltip-width">
58 <span class="ellipsis-line">
59 {{ row[item.prop] }}
60 </span>
61 </el-tooltip>
62 </td>
63 </tr>
64 </table>
65 </div>
66 </div>
67 </div>
68 </template>
69
70 <script>
71 import { getFdcqLSInfo } from "@/api/djbDetail.js";
72 import { datas } from "@/views/registerBook/qlxxFormData.js";
73
74 export default {
75 data () {
76 return {
77 title: "房地产权登记信息（独幢、层、套、间房屋）",
78 qsztList: datas.columns().qsztList,
79 checkList: datas.columns().checkList,
80 //传递参数
81 propsParam: this.$attrs,
82 //列表数据
83 tableData: [],
84 //空列值个数
85 emptycolNum: 1,
86 //列名称对象
87 columns: datas.columns().FDCQ2,
88 tdColumns: datas.columns().JSYDSYQ
89
90 };
91 },
92 created () {
93 this.loadData();
94 },
95 mounted () {
96 this.timeLineHeight = document.documentElement.clientHeight - 210;
97 window.onresize = () => {
98 this.timeLineHeight = document.documentElement.clientHeight - 210;
99 };
100 },
101 methods: {
102 /**
103 * @description: loadData
104 * @author: renchao
105 */
106 loadData () {
107 var formdata = new FormData();
108 formdata.append("bsmSldy", this.propsParam.formData.bsmSldy);
109 formdata.append("qllx", this.propsParam.formData.qllx);
110 formdata.append("isEdit", this.ableOperation);
111 getFdcqLSInfo(formdata).then((res) => {
112 if (res.code === 200) {
113 this.tableData = res.result;
114 if (this.tableData.length < datas.columns().emptycolNum) {
115 this.emptycolNum =
116 datas.columns().emptycolNum - this.tableData.length;
117 } else {
118 this.emptycolNum = 0;
119 }
120 }
121 });
122 },
123 /**
124 * @description: checkChange
125 * @author: renchao
126 */
127 checkChange () {
128 if (this.checkList.length === 0) {
129 this.tableData = [];
130 this.emptycolNum = datas.columns().emptycolNum;
131 } else {
132 this.loadData();
133 }
134 },
135 /**
136 * @description: getQsztName
137 * @param {*} code
138 * @author: renchao
139 */
140 getQsztName (code) {
141 let name = "";
142 for (let item of this.qsztList) {
143 if (item.value == code) {
144 name = item.label;
145 break;
146 }
147 }
148 return name;
149 },
150 },
151 };
152 </script>
153
154 <style lang="scss" scoped>
155 @import "~@/views/registerBook/qlxxCommon.scss";
156 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-02 14:24:20
5 -->
6 <template>
7 <div class="from-clues">
8 <!-- 表单部分 -->
9 <div class="from-clues-header">
10 <div class="title">请选择要退回到的环节：</div>
11 <el-form ref="queryForm" label-width="90px">
12 <ul style="margin-bottom: 15px">
13 <li
14 v-for="(item, index) in dataList"
15 class="listDetail"
16 :key="index"
17 @click="changeSelectItem(item)">
18 <p class="icon">
19 <el-radio
20 v-model="selectActivity"
21 :label="item.activityId"
22 @change="changeSelectItem(item)"></el-radio>
23 </p>
24 <p>{{ item.activityName }}</p>
25 <p v-for="(child, childIndex) in item.assignee" :key="childIndex">
26 {{ child.name }}
27 </p>
28 </li>
29 </ul>
30 <div class="title">退回意见：</div>
31 <el-form-item>
32 <el-input
33 class="textArea"
34 type="textarea"
35 v-model="outstepopinion"
36 placeholder="请输入退回意见"></el-input>
37 </el-form-item>
38 <el-form-item>
39 <el-button style="float:right" @click="cancelBack">取消</el-button>
40 <el-button type="primary" @click="onSubmit" style="float:right">退回</el-button>
41 </el-form-item>
42 </el-form>
43 </div>
44 </div>
45 </template>
46
47 <script>
48
49 import { getTaskBackNode, sendBackTask } from "@/api/workFlow.js"
50 import { popupCacel } from "@/utils/popup.js";
51
52 export default {
53 props: {
54 formData: {
55 type: Object,
56 default: {},
57 },
58 },
59 data () {
60 return {
61 selectActivity: "",
62 dataList: [],
63 outstepopinion: "",
64 selectItem: {},
65 };
66 },
67 created () {
68 this.getBackNode();
69 },
70 methods: {
71 /**
72 * @description: onSubmit
73 * @author: renchao
74 */
75 onSubmit () {
76 if (!this.outstepopinion) {
77 this.$message.error("请填写退回意见");
78 } else {
79 sendBackTask({
80 bsmSlsq: this.formData.bsmSlsq,
81 backNodeList: [this.selectItem],
82 message: this.outstepopinion
83 }).then((res) => {
84 if (res.code == 200) {
85 this.$message.success("退回成功");
86 setTimeout(() => {
87 if (window.opener && window.opener.getBpageList) {
88 window.opener.getBpageList();
89 } else {
90 window.opener.frames[0].getBpageList();
91 }
92 window.close();
93 this.$emit("input", false);
94 }, 1000);
95 } else {
96 this.$message.error(res.message);
97 }
98 });
99 }
100 },
101 /**
102 * @description: changeSelectItem
103 * @param {*} item
104 * @author: renchao
105 */
106 changeSelectItem (item) {
107 this.selectItem = item;
108 this.selectActivity = item.activityId;
109 },
110 //获取可回退环节信息
111 /**
112 * @description: 获取可回退环节信息
113 * @author: renchao
114 */
115 getBackNode () {
116 getTaskBackNode(this.formData).then((res) => {
117 if (res.code == 200) {
118 this.dataList = res.result;
119 console.log("this.dataList", this.dataList);
120 if (res.result) {
121 this.selectActivity = res.result[0].activityId;
122 this.selectItem = res.result[0];
123 }
124 }
125 });
126 },
127
128 /**
129 * @description: cancelBack
130 * @author: renchao
131 */
132 cancelBack () {
133 popupCacel();
134 }
135 }
136 }
137 </script>
138 <style scoped lang="scss">
139 @import "~@/styles/mixin.scss";
140
141 .listDetail {
142 display: flex;
143 align-items: center;
144 width: 100%;
145
146 p {
147 line-height: 30px;
148 height: 30px;
149 @include flex-center;
150 flex: 1;
151 width: 100%;
152 border: 1px solid rgb(233, 235, 237);
153 margin-top: -1px;
154 margin-left: -1px;
155 }
156
157 .icon {
158 flex: 0 0 60px;
159 }
160 }
161
162 .title {
163 margin-bottom: 10px;
164 }
165
166 .textArea {
167 /deep/.el-textarea__inner {
168 min-height: 90px !important;
169 }
170 }
171 /deep/.el-radio .el-radio__label {
172 display: none;
173 }
174 </style>
1 /*
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2024-01-23 14:07:58
5 */
6 /**
7 * @description: 按钮操作
8 * @param attribute:按钮属性
9 * @param address:地址栏数据
10 * @param sldy:受理单元数据
11 * @author: renchao
12 */
13 export function buttonOnclike(attribute, address, sldy) {
14 //按钮 B0:选择不动产单元 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书 B7:证书领取 B8:楼盘表 B9:登簿,B10:打印回执 ZSXG: 证书修改
15 //操作按钮 登簿：record 转件：transfer 退回：back 退出：signout
16 let that = this;
17 switch (item.value) {
18 case "B0":
19 btn_add(attribute, address, sldy);
20 break;
21 case "B1":
22 btn_flow(attribute, address, sldy);
23 break;
24 case "B2": //材料分屏按钮
25 btn_clfp(attribute, address, sldy);
26 break;
27 case "B3": //材料导入
28 btn_cldr(attribute, address, sldy);
29 break;
30 case "B4":
31 btn_djb(attribute, address, sldy);
32 break;
33 case "B5":
34 btn_zsyl(attribute, address, sldy);
35 break;
36 case "B-ZSXG":
37 btn_zsxg(attribute, address, sldy);
38 break;
39 case "B6":
40 btn_dysqs(attribute, address, sldy);
41 break;
42 case "B7":
43 btn_zslq(attribute, address, sldy);
44 break;
45 case "B8":
46 btn_houses(attribute, address, sldy);
47 break;
48 // 图形定位
49 case "B-TXDW":
50 btn_map(attribute, address, sldy);
51 break;
52 case "back": //退回按钮
53 btn_back(attribute, address, sldy);
54 break;
55 case "transfer": //转件按钮
56 btn_transfer(attribute, address, sldy);
57 break;
58 case "stop": //终止按钮
59 btn_stop(attribute, address, sldy);
60 break;
61 case "signout":
62 btn_signout(attribute, address, sldy);
63 break;
64 case "B9":
65 btn_record(attribute, address, sldy);
66 break;
67 case "B10":
68 break;
69 case "rm":
70 btn_deleteFlow();
71 break;
72 // 互联网数据共享
73 case "B-HLGXSJ":
74 btn_dataShare(attribute, address, sldy);
75 break;
76 default:
77 console.log("未开发！");
78 break;
79 }
80 }
81 //新增受理单元
82 function btn_add(attribute, address, sldy) {
83 this.openDialog(attribute);
84 }
85 //流程图
86 function btn_flow(attribute, address, sldy) {
87 getWorkFlowImage(this.bsmSlsq, this.bestepid ? this.bestepid : '').then(res => {
88 let { result } = res
89 this.$popupDialog("流程图", "workflow/components/processViewer", {
90 xml: result.xml,
91 finishedInfo: {
92 finishedTaskSet: result.finishedActivityIds,
93 unfinishedTaskSet: result.runningActivityIds,
94 rejectedTaskSet: result.rejectedActivityIds,
95 finishedSequenceFlowSet: result.finishedSequenceFlowIds
96 },
97 handlinglist: result.runningTasks,
98 allCommentList: result.finishedTasks
99 }, '80%', true)
100 })
101 }
102 //材料分屏
103 function btn_clfp(attribute, address, sldy) {
104 this.splitScreen = this.splitScreen ? false : true;
105 this.$store.dispatch("app/settScreen", this.splitScreen);
106 if (this.splitScreen) {
107 //如果当前选项卡为材料信息内容，递减到上一个选项卡内容
108 if (this.tabName == this.clxxTab.value) {
109 this.tabName = this.tabList[this.clxxIndex - 1].value;
110 this.getFromRouter(this.tabList[this.clxxIndex - 1].value);
111 }
112 //删除材料信息选项卡数据
113 this.tabList.splice(this.clxxIndex, 1);
114 } else {
115 //新增材料信息选项卡数据
116 this.tabList.splice(this.clxxIndex, 0, this.clxxTab);
117 }
118 }
119 //材料导入
120 function btn_cldr(attribute, address, sldy) {
121 document.getElementById("cldr").click();
122 }
123 //登记簿
124 function btn_djb(attribute, address, sldy) {
125 this.$popupDialog("登记簿详情", "registerBook/djbFrame", this.currentSelectProps, '80%', true)
126 }
127 //打印申请书
128 function btn_dysqs(attribute, address, sldy) {
129 this.$popupDialog("打印申请书", "workflow/components/dialog/sqs",
130 { bsmSldy: this.currentSelectProps.bsmSldy }, '30%', true
131 )
132 }
133 //证书预览
134 function btn_zsyl(attribute, address, sldy) {
135 this.$popupDialog("证书证明预览", "workflow/components/dialog/zsyl", {
136 bsmSlsq: this.bsmSlsq,
137 entryType: '1'
138 }, '1230px', true)
139 }
140 //证书修改
141 function btn_zsxg(attribute, address, sldy) {
142 this.$popupDialog("证书修改", "workflow/components/dialog/zsxg", { bsmSlsq: this.bsmSlsq, }, '55%', true);
143 }
144 //证书领取
145 function btn_zslq(attribute, address, sldy) {
146 this.$popupDialog("证书领取", "workflow/components/dialog/zslq",
147 { bsmSlsq: this.$route.query.bsmSlsq }, '70%', true
148 )
149 }
150 //楼盘表
151 function btn_houses(attribute, address, sldy) {
152 !window.djlx && getZrzbsmList(this.bsmSlsq).then((res) => {
153 if (res.code === 200) {
154 ywPopupDialog('楼盘表', 'lpb/index', {
155 bsm: res.result[0],
156 onlyShow: false,
157 unitData: window.unitData,
158 bsmSlsq: this.bsmSlsq,
159 showSave: true,
160 djlx: window.djlx
161 }, '85%', true, false)
162 } else {
163 this.$message.error(res.message)
164 }
165 })
166 .catch((err) => {
167 this.$message.error(err)
168 });
169 window.djlx && ywPopupDialog('楼盘表', 'lpb/zjgcdy', {
170 onlyShow: false,
171 unitData: window.unitData,
172 bsmSlsq: this.bsmSlsq,
173 showSave: true,
174 djlx: window.djlx
175 }, '85%', true, false)
176 }
177 //登簿
178 function btn_record(attribute, address, sldy) {
179 var formdata = new FormData();
180 formdata.append("bsmSlsq", this.bsmSlsq);
181 formdata.append("bestepid", this.bestepid ? this.bestepid : '');
182 this.$confirm("请确认是否登簿", "提示", {
183 iconClass: "el-icon-info", //自定义图标样式
184 confirmButtonText: "确认", //确认按钮文字更换
185 cancelButtonText: "取消", //取消按钮文字更换
186 showClose: true, //是否显示右上角关闭按钮
187 type: "warning", //提示类型 success/info/warning/error
188 }).then(function () {
189 record(formdata).then((res) => {
190 if (res.code === 200) {
191 if (res.result.length === 1) {
192 res.result[0].state ? that.$message({
193 message: '登簿成功',
194 type: 'success'
195 }) : ywPopupDialog("登簿错误明细", "workflow/components/dialog/dblist", { result: res.result }, '30%', true)
196 }
197 else {
198 ywPopupDialog("登簿错误明细", "workflow/components/dialog/dblist", { result: res.result }, '30%', true)
199 }
200 } else {
201 that.$message.error(res.message)
202 }
203 })
204 })
205 }
206 //转件
207 function btn_transfer(attribute, address, sldy) {
208 getNextLinkInfo({
209 bsmSlsq: this.bsmSlsq,
210 bestepid: this.bestepid ? this.bestepid : ''
211 }).then((res) => {
212 if (res.code === 200) {
213 if (res.result) {
214 this.sendToNext(res.result);
215 } else {
216 this.sendToEnd();
217 }
218 }
219 });
220 }
221 //退回
222 function btn_back(attribute, address, sldy) {
223 this.$popupDialog("退回", "workflow/components/th", {
224 bsmSlsq: this.bsmSlsq,
225 bestepid: this.bestepid ? this.bestepid : ''
226 }, '800px', true)
227 }
228 //退出
229 function btn_signout(attribute, address, sldy) {
230 window.close();
231 //取消认领
232 unClaimTask(this.bsmSlsq, this.bestepid ? this.bestepid : '')
233 }
234 //终止流程
235 function btn_stop(attribute, address, sldy) {
236 this.$popupDialog("终止", "workflow/components/stop", {
237 bsmSlsq: this.bsmSlsq,
238 bestepid: this.bestepid ? this.bestepid : ''
239 }, '600px', true);
240 }
241 //删除流程
242 function btn_deleteFlow(attribute, address, sldy) {
243 this.del();
244 }
245 //数据共享
246 function btn_dataShare(attribute, address, sldy) {
247 this.$popupDialog("互联网数据共享", "sjgx/gbmhlgxsjgx/gbmhlgxsjgx", {}, '90%', true)
248 }
249 //图形定位
250 function btn_map(attribute, address, sldy) {
251 getZdInfo(this.currentSelectProps.bdcdyid).then(res => {
252 this.bsmZd = res?.result[0]?.bsmZd;
253 this.$popupDialog('图形定位', 'workflow/components/dialog/txdw', { bsmZd: this.bsmZd }, '85%', true)
254 })
255 }
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-11-23 17:20:01
5 -->
6 <template>
7 <iframe :src="ip +'/txdw/#/' + formData.bsmZd" frameborder="0" style="width: 100%; height:710px;"></iframe>
8 </template>
9 <script>
10 export default {
11 props: {
12 formData: {
13 type: Object,
14 default: () => {
15 return {}
16 }
17 }
18 },
19 data () {
20 return {
21 ip: window._config.services.management
22 }
23 }
24 }
25 </script>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-05-17 10:41:15
5 -->
6 <template>
7 <div>
8 <div class="process-viewer">
9 <div
10 v-show="!isLoading"
11 ref="processCanvas"
12 class="process-canvas"
13 style="height: 280px"
14 />
15 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
16 <defs ref="customSuccessDefs">
17 <marker
18 id="sequenceflow-end-white-success"
19 view-box="0 0 20 20"
20 ref-x="11"
21 ref-y="10"
22 marker-width="10"
23 marker-height="10"
24 orient="auto"
25 >
26 <path
27 class="success-arrow"
28 d="M 1 5 L 11 10 L 1 15 Z"
29 style="
30 stroke-width: 1px;
31 stroke-linecap: round;
32 stroke-dasharray: 10000, 1;
33 "
34 />
35 </marker>
36 <marker
37 id="conditional-flow-marker-white-success"
38 view-box="0 0 20 20"
39 ref-x="-1"
40 ref-y="10"
41 marker-width="10"
42 marker-height="10"
43 orient="auto"
44 >
45 <path
46 class="success-conditional"
47 d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
48 style="
49 stroke-width: 1px;
50 stroke-linecap: round;
51 stroke-dasharray: 10000, 1;
52 "
53 />
54 </marker>
55 </defs>
56 <!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
57 <defs ref="customFailDefs">
58 <marker
59 id="sequenceflow-end-white-fail"
60 view-box="0 0 20 20"
61 ref-x="11"
62 ref-y="10"
63 marker-width="10"
64 marker-height="10"
65 orient="auto"
66 >
67 <path
68 class="fail-arrow"
69 d="M 1 5 L 11 10 L 1 15 Z"
70 style="
71 stroke-width: 1px;
72 stroke-linecap: round;
73 stroke-dasharray: 10000, 1;
74 "
75 />
76 </marker>
77 <marker
78 id="conditional-flow-marker-white-fail"
79 view-box="0 0 20 20"
80 ref-x="-1"
81 ref-y="10"
82 marker-width="10"
83 marker-height="10"
84 orient="auto"
85 >
86 <path
87 class="fail-conditional"
88 d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
89 style="
90 stroke-width: 1px;
91 stroke-linecap: round;
92 stroke-dasharray: 10000, 1;
93 "
94 />
95 </marker>
96 </defs>
97
98 <div style="position: absolute; top: 0px; left: 0px; width: 100%">
99 <el-row type="flex" justify="end">
100 <el-button-group key="scale-control" size="medium">
101 <el-button
102 size="medium"
103 type="default"
104 :plain="true"
105 :disabled="defaultZoom <= 0.3"
106 icon="el-icon-zoom-out"
107 @click="processZoomOut()"
108 />
109 <el-button size="medium" type="default" style="width: 90px">{{
110 Math.floor(this.defaultZoom * 10 * 10) + "%"
111 }}</el-button>
112 <el-button
113 size="medium"
114 type="default"
115 :plain="true"
116 :disabled="defaultZoom >= 3.9"
117 icon="el-icon-zoom-in"
118 @click="processZoomIn()"
119 />
120 <el-button
121 size="medium"
122 type="default"
123 icon="el-icon-c-scale-to-original"
124 @click="processReZoom()"
125 />
126 <slot />
127 </el-button-group>
128 </el-row>
129 </div>
130 </div>
131 <!-- 已完成节点悬浮弹窗 -->
132 <div class="information-list">
133 <el-select v-model="selectValue" @change="handleSelect">
134 <el-option
135 v-for="item in selectOptions"
136 :key="item.value"
137 :label="item.label"
138 :value="item.value"
139 >
140 </el-option>
141 </el-select>
142 <div class="cutline">
143 <p class="cutlines">图例</p>
144 <div v-for="item in cutlinelist" :key="item.value" class="concent" :style="{ backgroundColor: item.backgroundColor,borderColor:item.color }">
145 {{item.value}}
146 </div>
147 </div>
148 <el-table
149 height="190"
150 :data="taskCommentList"
151 size="mini"
152 border
153 header-cell-class-name="table-header-gray"
154 >
155 <el-table-column
156 label="序号"
157 header-align="center"
158 align="center"
159 type="index"
160 width="55px"
161 />
162 <el-table-column label="环节" prop="name" align="center" />
163 <el-table-column
164 label="转入时间"
165 prop="createTime"
166 :formatter="formatDate"
167 width="160"
168 align="center"
169 />
170 <el-table-column
171 label="认领时间"
172 prop="claimTime"
173 :formatter="formatDate"
174 width="160"
175 align="center"
176 />
177 <el-table-column
178 label="转出时间"
179 prop="endTime"
180 :formatter="formatDate"
181 width="160"
182 align="center"
183 />
184 <el-table-column label="经办人" prop="agent" align="center" />
185 <el-table-column label="操作方式" prop="controls" align="center" />
186 <el-table-column label="意见" prop="idea" align="center" />
187 </el-table>
188 </div>
189 </div>
190 </template>
191 <script>
192 import "@/styles/package/theme/index.scss";
193 import BpmnViewer from "bpmn-js/lib/Viewer";
194 import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
195 export default {
196 props: {
197 formData: {
198 type: Object,
199 default: {},
200 },
201 },
202 data() {
203 return {
204 dlgTitle: undefined,
205 defaultZoom: 1,
206 // 是否正在加载流程图
207 isLoading: true,
208 bpmnViewer: undefined,
209 // 已完成流程元素
210 processNodeInfo: undefined,
211 // 当前任务id
212 selectTaskId: undefined,
213 // 任务节点审批记录
214 taskList: [],
215 taskCommentList: [],
216 // 已完成任务悬浮延迟Timer
217 hoverTimer: null,
218 // 下拉
219 selectValue: "",
220 selectOptions: [],
221 cutlinelist:[
222 {
223 value: "完成节点",
224 color: "#4eb819",
225 backgroundColor :"rgba(78, 184, 25,0.2)"
226 },
227 {
228 value: "当前节点",
229 color: "#409EFF",
230 backgroundColor :"rgba(64, 158, 255,0.2)"
231 },
232 {
233 value: "挂起节点",
234 color: "#E6A23C",
235 backgroundColor :"rgba(230, 162, 60,0.2)"
236 },
237 {
238 value: "阻塞节点",
239 color: "#F56C6C",
240 backgroundColor :"rgb(245, 108, 108,0.2)"
241 },
242 {
243 value: "未激活节点",
244 color: "#000000",
245 backgroundColor :"none",
246 }
247 ],
248 };
249 },
250 created() {
251 this.$nextTick(() => {
252 // 获取流程记录
253 this.getCommentList();
254 this.setProcessStatus(this.formData.finishedInfo);
255 this.importXML(this.formData.xml);
256 });
257 },
258 destroyed() {
259 this.clearViewer();
260 },
261 methods: {
262 /**
263 * @description: formatDate
264 * @param {*} row
265 * @param {*} column
266 * @author: renchao
267 */
268 formatDate(row, column) {
269 let data = row[column.property];
270 if (data == null) {
271 return null;
272 }
273 let dt = new Date(data);
274 return (
275 dt.getFullYear() +
276 "-" +
277 (dt.getMonth() + 1) +
278 "-" +
279 dt.getDate() +
280 " " +
281 dt.getHours() +
282 ":" +
283 dt.getMinutes() +
284 ":" +
285 dt.getSeconds()
286 );
287 },
288 /**
289 * @description: processReZoom
290 * @author: renchao
291 */
292 processReZoom() {
293 this.defaultZoom = 1;
294 this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
295 },
296 /**
297 * @description: processZoomIn
298 * @param {*} zoomStep
299 * @author: renchao
300 */
301 processZoomIn(zoomStep = 0.1) {
302 const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
303 if (newZoom > 4) {
304 throw new Error(
305 "[Process Designer Warn ]: The zoom ratio cannot be greater than 4"
306 );
307 }
308 this.defaultZoom = newZoom;
309 this.bpmnViewer.get("canvas").zoom(this.defaultZoom);
310 },
311 /**
312 * @description: processZoomOut
313 * @param {*} zoomStep
314 * @author: renchao
315 */
316 processZoomOut(zoomStep = 0.1) {
317 const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
318 if (newZoom < 0.2) {
319 throw new Error(
320 "[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2"
321 );
322 }
323 this.defaultZoom = newZoom;
324 this.bpmnViewer.get("canvas").zoom(this.defaultZoom);
325 },
326 /**
327 * @description: getOperationTagType
328 * @param {*} type
329 * @author: renchao
330 */
331 getOperationTagType(type) {
332 return "success";
333 },
334 // 流程图预览清空
335 /**
336 * @description: 流程图预览清空
337 * @param {*} e
338 * @author: renchao
339 */
340 clearViewer(a) {
341 if (this.$refs.processCanvas) {
342 this.$refs.processCanvas.innerHTML = "";
343 }
344 if (this.bpmnViewer) {
345 this.bpmnViewer.destroy();
346 }
347 this.bpmnViewer = null;
348 },
349 // 添加自定义箭头
350 /**
351 * @description: 添加自定义箭头
352 * @author: renchao
353 */
354 addCustomDefs() {
355 const canvas = this.bpmnViewer.get("canvas");
356 const svg = canvas._svg;
357 const customSuccessDefs = this.$refs.customSuccessDefs;
358 const customFailDefs = this.$refs.customFailDefs;
359 svg.appendChild(customSuccessDefs);
360 svg.appendChild(customFailDefs);
361 },
362 // 任务悬浮弹窗
363 /**
364 * @description: 任务悬浮弹窗
365 * @param {*} element
366 * @author: renchao
367 */
368 onSelectElement(element) {
369 this.selectTaskId = undefined;
370 this.dlgTitle = undefined;
371 let allfinishedTaskSet = [
372 ...this.processNodeInfo.finishedTaskSet,
373 ...this.processNodeInfo.unfinishedTaskSet,
374 ];
375 if (this.processNodeInfo == null || allfinishedTaskSet == null) return;
376 if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) {
377 return;
378 }
379 this.selectTaskId = element.id;
380 this.selectValue = element.id;
381 this.dlgTitle = element.businessObject
382 ? element.businessObject.name
383 : undefined;
384 // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
385 this.taskCommentList = (this.taskList || []).filter((item) => {
386 return item.taskDefinitionKey === this.selectTaskId;
387 });
388 if (this.taskCommentList.length == 0) {
389 this.taskCommentList = this.taskList;
390 }
391 },
392 // 下拉列表切换
393 /**
394 * @description: 下拉列表切换
395 * @param {*} val
396 * @author: renchao
397 */
398 handleSelect(val) {
399 this.taskCommentList = (this.taskList || []).filter((item) => {
400 return item.taskDefinitionKey === val;
401 });
402 if (this.taskCommentList.length == 0) {
403 this.taskCommentList = this.taskList;
404 }
405 },
406 // 显示流程图
407 /**
408 * @description: 显示流程图
409 * @param {*} xml
410 * @author: renchao
411 */
412 async importXML(xml) {
413 let xmlData = this.$x2js.xml2js(xml).definitions.process;
414 this.selectOptions = xmlData.userTask.map((item) => {
415 return { value: item._id, label: item._name };
416 });
417 this.selectOptions = [
418 { value: xmlData.startEvent._id, label: "浏览记录" },
419 ...this.selectOptions,
420 ];
421 this.selectOptions = this.selectOptions
422 .map((item) => {
423 if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) {
424 return item;
425 }
426 if (
427 this.formData.finishedInfo.unfinishedTaskSet.includes(item.value)
428 ) {
429 return item;
430 }
431 })
432 .filter(Boolean);
433 this.selectValue = xmlData.startEvent._id;
434 this.clearViewer("a");
435 if (xml != null && xml !== "") {
436 try {
437 this.bpmnViewer = new BpmnViewer({
438 additionalModules: [
439 // 移动整个画布
440 MoveCanvasModule,
441 ],
442 container: this.$refs.processCanvas,
443 });
444 // 任务节点悬浮事件
445 this.bpmnViewer.on("element.click", ({ element }) => {
446 this.onSelectElement(element);
447 });
448 await this.bpmnViewer.importXML(xml);
449 this.isLoading = true;
450 this.addCustomDefs();
451 } catch (e) {
452 this.clearViewer("b");
453 } finally {
454 this.isLoading = false;
455 this.setProcessStatus(this.processNodeInfo);
456 this.$nextTick(() => {
457 this.processReZoom();
458 });
459 }
460 }
461 },
462 // 获取流程记录
463 /**
464 * @description: 获取流程记录
465 * @author: renchao
466 */
467 getCommentList() {
468 this.formData.allCommentList.forEach(async (item, index) => {
469 // item.comments.forEach(element => {
470 // if(element.type=="COMPLETE"){
471 // this.formData.allCommentList[index].idea=element.message
472 // this.formData.allCommentList[index].controls="完成"
473 // }
474 // });
475 let type = item.comments[item.comments.length - 1].type;
476 this.formData.allCommentList[index].idea =
477 item.comments[item.comments.length - 1].message;
478 // 操作方式
479 let controls = "";
480 // 正在办理
481 // 已完结
482 // 已退回
483 switch (type) {
484 case "COMPLETE":
485 controls = "完成";
486 break;
487 case "CLAIM":
488 controls = "完成";
489 break;
490 case "ASSIGN":
491 controls = "转办";
492 break;
493 case "DELEGATE":
494 controls = "委派";
495 break;
496 case "UNCLAIM":
497 controls = "取消认领";
498 break;
499 case "STOP":
500 controls = "终止";
501 break;
502 case "BACK":
503 controls = "退回";
504 break;
505 }
506 this.formData.allCommentList[index].controls = controls;
507 this.formData.allCommentList[index].agent = item.assignee.name;
508 });
509 this.formData.handlinglist.forEach(async (item, index) => {
510 if (item.assignee.name) {
511 this.formData.handlinglist[index].agent = item.assignee.name;
512 } else {
513 let str = "";
514 item.countersign.forEach((item) => {
515 str += item.name + ",";
516 });
517 str = str.slice(0, -1);
518 this.formData.allCommentList[index].agent = str;
519 }
520 });
521 this.taskList = [
522 ...this.formData.allCommentList,
523 ...this.formData.handlinglist,
524 ];
525 // this.taskList =this.formData.allCommentList;
526 // 处理数据之后赋值
527 this.taskCommentList = this.taskList;
528 this.taskCommentList = this.taskCommentList.sort(this.sortDownDate);
529 },
530 /**
531 * 时间排序函数
532 * @description: formatDate
533 * @param {*} row
534 * @param {*} column
535 * @author: renchao
536 */
537
538 sortDownDate(a, b) {
539 return Date.parse(a.createTime) - Date.parse(b.createTime);
540 },
541 // 设置流程图元素状态
542 /**
543 * @description: 设置流程图元素状态
544 * @param {*} processNodeInfo
545 * @author: renchao
546 */
547 setProcessStatus(processNodeInfo) {
548 this.processNodeInfo = processNodeInfo;
549 if (
550 this.isLoading ||
551 this.processNodeInfo == null ||
552 this.bpmnViewer == null
553 )
554 return;
555 const {
556 finishedTaskSet,
557 rejectedTaskSet,
558 unfinishedTaskSet,
559 finishedSequenceFlowSet,
560 } = this.processNodeInfo;
561 const canvas = this.bpmnViewer.get("canvas");
562 const elementRegistry = this.bpmnViewer.get("elementRegistry");
563 if (Array.isArray(finishedSequenceFlowSet)) {
564 finishedSequenceFlowSet.forEach((item) => {
565 if (item != null) {
566 canvas.addMarker(item, "success");
567 const element = elementRegistry.get(item);
568 const conditionExpression =
569 element.businessObject.conditionExpression;
570 if (conditionExpression) {
571 canvas.addMarker(item, "condition-expression");
572 }
573 }
574 });
575 }
576 if (Array.isArray(finishedTaskSet)) {
577 finishedTaskSet.forEach((item) => canvas.addMarker(item, "success"));
578 }
579 if (Array.isArray(unfinishedTaskSet)) {
580 unfinishedTaskSet.forEach((item) => canvas.addMarker(item, "primary"));
581 }
582 if (Array.isArray(rejectedTaskSet)) {
583 rejectedTaskSet.forEach((item) => {
584 if (item != null) {
585 const element = elementRegistry.get(item);
586 if (element.type.includes("Task")) {
587 canvas.addMarker(item, "danger");
588 } else {
589 canvas.addMarker(item, "warning");
590 }
591 }
592 });
593 }
594 },
595 },
596 };
597 </script>
598 <style scoped lang="scss">
599 .information-list {
600 height: 220px;
601 margin-top: 10px;
602
603 p {
604 font-size: 16px;
605 line-height: 24px;
606 }
607 }
608 /deep/.bjs-powered-by {
609 display: none;
610 }
611 // /deep/.information-list {
612 // height: 170px;
613 // overflow: visible;
614 // }
615 .cutline {
616
617 float: right;
618 width: 30%;
619 height: 30px;
620 display: flex;
621 margin-right: 30px;
622 justify-content: space-between;
623 .cutlines{
624 line-height: 30px;
625 font-weight: 600;
626 margin-right: 50px;
627 }
628 .concent{
629 line-height: 30px;
630 line-height: 14px;
631 text-align: center;
632 align-items: center;
633 margin: auto;
634 padding: 3px;
635 border-radius: 4px;
636 border:1px solid #fff;
637 }
638
639 }
640 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-09-27 08:51:13
5 -->
6 <template>
7 <div class="from-clues">
8 <div class="invalid-title">
9 <i class="el-icon-question invalid-icon"></i>
10 <div class="invalid-body">您是否确定终止该业务办理？</div>
11 </div>
12 <div class="invalid-reson">退件原因：</div>
13 <el-input
14 v-model="stopMessage"
15 placeholder="请输入终止原因"
16 type="textarea"
17 :rows="4"></el-input>
18 <div style="overflow:hidden;text-align:center;margin-top:10px">
19 <el-button @click="cancelBack">取消</el-button>
20 <el-button type="primary" @click="onSubmit">退件</el-button>
21 </div>
22 </div>
23 </template>
24
25 <script>
26 import { stopTask } from "@/api/workFlow.js";
27 import { popupCacel } from "@/utils/popup.js";
28 export default {
29 props: {
30 formData: {
31 type: Object,
32 default: {},
33 },
34 },
35 data () {
36 return {
37 stopMessage: "",
38 };
39 },
40 methods: {
41 /**
42 * @description: onSubmit
43 * @author: renchao
44 */
45 onSubmit () {
46 stopTask({
47 bsmSlsq: this.formData.bsmSlsq,
48 bestepid: this.formData.bestepid,
49 stopMessage: this.stopMessage,
50 }).then((res) => {
51 this.$message.success("终止成功");
52 setTimeout(() => {
53 // window.opener.location.reload(); //刷新父窗口
54 if (window.opener && window.opener.getBpageList) {
55 window.opener.getBpageList();
56 } else {
57 window.opener.frames[0].getBpageList();
58 }
59 window.close();
60 this.$emit("input", false);
61 }, 1000);
62 });
63 },
64 /**
65 * @description: closeDialog
66 * @author: renchao
67 */
68 cancelBack () {
69 popupCacel();
70 },
71 },
72 };
73 </script>
74 <style scoped lang="scss">
75 @import "~@/styles/mixin.scss";
76 .invalid-title {
77 display: flex;
78 align-content: center;
79
80 .invalid-icon {
81 color: rgb(254, 148, 0);
82 font-size: 34px;
83 margin-right: 10px;
84 }
85
86 .invalid-body {
87 line-height: 40px;
88 margin-bottom: 10px;
89 }
90 }
91
92 .invalid-reson {
93 margin-bottom: 10px;
94 }
95
96 .dialog-footer {
97 margin-top: 10px;
98 display: flex;
99 justify-content: flex-end;
100 }
101 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2024-01-19 14:45:09
5 -->
6 <template>
7 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
8 <el-row>
9 <el-col :span="8">
10 <el-form-item label="发证人姓名">
11 <el-input v-model="ruleForm.fzrmc" disabled></el-input>
12 </el-form-item>
13 </el-col>
14 <el-col :span="8">
15 <el-form-item label="发证时间">
16 <el-input v-model="ruleForm.fzsj" disabled></el-input>
17 </el-form-item>
18 </el-col>
19 <el-col :span="8">
20 <el-form-item label="发证数量">
21 <el-input v-model="ruleForm.fzsl" disabled></el-input>
22 </el-form-item>
23 </el-col>
24 </el-row>
25 <lb-table :column="tableData.columns" @row-dblclick="handleRowClick" ref="table" @selection-change="handleSelectionChange"
26 :data="tableData.data"
27 :pagination="false"
28 :calcHeight="300">
29 </lb-table>
30 <el-row>
31 <el-col :span="3">
32 <el-form-item label="身份证读卡器">
33 <el-button type="text" icon="el-icon-tickets" @click="readClick">读取</el-button>
34 </el-form-item>
35 </el-col>
36 <el-col :span="5">
37 <el-form-item label="领证人" prop="lzrxm" label-width="70px">
38 <el-input v-model="ruleForm.lzrxm"></el-input>
39 </el-form-item>
40 </el-col>
41 <el-col :span="5">
42 <el-form-item label="证件类型" prop="lzrzjlb" label-width="80px">
43 <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择">
44 <el-option v-for="item in lzrzjlbData" :key="item.dcode" :label="item.dname" :value="item.dcode">
45 </el-option>
46 </el-select>
47 </el-form-item>
48 </el-col>
49 <el-col :span="5">
50 <el-form-item label="证件号" prop="lzrzjh" label-width="70px">
51 <el-input v-model="ruleForm.lzrzjh"></el-input>
52 </el-form-item>
53 </el-col>
54 <el-col :span="5">
55 <el-form-item label="领证人电话" prop="lzrdh">
56 <el-input v-model="ruleForm.lzrdh"></el-input>
57 </el-form-item>
58 </el-col>
59 </el-row>
60 <el-form-item class="text-center">
61 <el-button @click="$popupCacel">取消</el-button>
62 <el-button type="primary" @click="handleSubmit">确定</el-button>
63 </el-form-item>
64 </el-form>
65 </template>
66 <script>
67 const checkPhone = (rule, value, callback) => {
68 let regPone = null
69 let mobile = /^(1[3456789]\d{9})$/ //手机号
70 let tel = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/ // 座机
71 if (value && value[0] === '0') {// 检查 value 是否存在并且不是 null 或者 undefined
72 regPone = tel
73 } else if (value && value[0] !== '0') {
74 regPone = mobile
75 }
76 if (regPone === null) {
77 return callback(
78 new Error('请输入电话')
79 )
80 } else if (!regPone.test(value)) {
81 return callback(
82 new Error("请输入正确的电话格式,其中座机格式'区号-座机号码'")
83 )
84 } else {
85 callback()
86 }
87 };
88 import Vue from 'vue'
89 import store from '@/store/index.js'
90 import table from "@/utils/mixin/table";
91 import { getIdCardInfo } from '@/utils/operation.js'
92 import { getUnclaimedBdcqz, issueCertificate, getBdcqzQlr } from "@/api/bdcqz.js";
93 import { datas } from "../../javascript/fzxxdata";
94 import { log } from 'bpmn-js-token-simulation';
95 export default {
96 props: {
97 formData: {
98 type: Object,
99 default: () => {
100 return {}
101 }
102 }
103 },
104 mixins: [table],
105 data () {
106 return {
107 lzrzjlbData: store.getters.dictData['A30'],
108 ruleForm: {
109 fzrmc: '',
110 fzsj: '',
111 fzsl: '',
112 bdcqzList: [],
113 lzrxm: '',
114 lzrzjlb: '',
115 lzrzjh: '',
116 lzrdh: ''
117 },
118 rules: {
119 lzrxm: [
120 { required: true, message: '请输入领证人', trigger: 'blur' }
121 ],
122 lzrzjlb: [
123 { required: true, message: '请选择证件类型', trigger: 'change' }
124 ],
125 lzrzjh: [
126 { required: true, message: '请输入证件号', trigger: 'blur' }
127 ],
128 lzrdh: [
129 { required: true, validator: checkPhone, trigger: ["blur"] }
130 ]
131 },
132 tableData: {
133 total: 0,
134 columns: datas.columns().lzgrid,
135 data: []
136 }
137 }
138 },
139 mounted () {
140 this.$nextTick(() => {
141 this.loadGrid()
142 })
143 },
144 methods: {
145 /**
146 * @description: 身份证打卡器
147 * @author: renchao
148 */
149 readClick () {
150 function getObjectByValue (arrayOfObjects, value) {
151 var name = ''
152 arrayOfObjects.forEach(item => {
153 if (item.dname.includes(value)) name = item.dcode
154 })
155 return name
156 }
157 getIdCardInfo(this.BASE_API.gaopaiyi).then(res => {
158 if (this.BASE_API.gaopaiyi == 'jy') {
159 const {
160 Name,
161 IdNo,
162 } = JSON.parse(res)
163 if (Name) {
164 this.ruleForm.lzrxm = Name;
165 this.ruleForm.lzrzjlb = '1';
166 this.ruleForm.lzrzjh = IdNo;
167 this.$message({
168 message: '读取成功！',
169 type: 'success'
170 })
171 } else {
172 this.$message({
173 message: '请放置身份证',
174 type: 'warning'
175 })
176 }
177 } else {
178 if (res.data.code == 0) {
179 let data = res.data.IDCardInfo
180 this.ruleForm.lzrxm = data.name
181 this.ruleForm.lzrzjlb = '1'
182 this.ruleForm.lzrzjh = data.cardID
183 this.$message({
184 message: '读取成功！',
185 type: 'success'
186 })
187 } else {
188 this.$message({
189 message: res.data.message,
190 type: 'warning'
191 })
192 }
193 }
194 })
195 },
196 /**
197 * @description: 列表初始化
198 * @author: renchao
199 */
200 loadGrid () {
201 let that = this
202 getUnclaimedBdcqz({ bsmSlsq: Vue.prototype.$currentRoute.query.bsmSlsq }).then(res => {
203 if (res.code === 200) {
204 this.tableData.data = res.result.list;
205 this.$nextTick(() => {
206 this.tableData.data.forEach(item => {
207 that.$refs.table.toggleRowSelection(item)
208 })
209 })
210 this.ruleForm.fzrmc = res.result.fzrmc
211 this.ruleForm.fzsj = res.result.fzsj
212 this.ruleForm.fzsl = res.result.fzsl
213 this.ruleForm.bdcqzList = res.result.list;
214 res.result.list.length && this.getQlr(res.result.list[0].bsmBdcqz)
215 }
216 })
217 },
218 /**
219 * @description: 获取权利人信息
220 * @author: renchao
221 */
222 getQlr (bsmBdcqz) {
223 getBdcqzQlr(bsmBdcqz).then(res => {
224 if (res.code === 200) {
225 this.ruleForm.lzrxm = res.result.qlrmc;
226 this.ruleForm.lzrzjlb = res.result.zjzl;
227 this.ruleForm.lzrzjh = res.result.zjh;
228 this.ruleForm.lzrdh = res.result.dh;
229 }
230 })
231 },
232 /**
233 * @description: handleSelectionChange
234 * @param {*} val
235 * @author: renchao
236 */
237 handleSelectionChange (val) {
238 this.ruleForm.bdcqzList = val
239 },
240 /**
241 * @description: handleRowClick
242 * @param {*} row
243 * @author: renchao
244 */
245 handleRowClick (row) {
246 this.$refs.table.toggleRowSelection(row)
247 },
248 /**
249 * @description: handleSubmit
250 * @author: renchao
251 */
252 handleSubmit () {
253 this.$refs.ruleForm.validate(valid => {
254 if (valid) {
255 issueCertificate(this.ruleForm).then(res => {
256 if (res.code == 200) {
257 this.$message.success('保存成功');
258 //刷新列表
259 store.dispatch('user/reWorkFresh', true)
260 this.$popupCacel()
261 } else {
262 this.$message.error(res.message)
263 }
264 })
265 } else {
266 return false;
267 }
268 })
269 }
270 }
271 }
272 </script>
273 <style scoped lang="scss">
274 @import "~@/styles/mixin.scss";
275 </style>
276
277
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-11-15 15:41:43
5 -->
6 <template>
7 <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中...">
8 <!-- 表单部分 -->
9 <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1" style="margin-top:-15px">
10 <el-tab-pane :label="item.qlr + (item.bdcqzh !== null ? '(' + item.bdcqzh + ')' : '')" :name="item.bsmBdcqz"
11 v-for="(item, index) in headTabBdcqz" :key="index">
12 </el-tab-pane>
13 </el-tabs>
14 <el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty>
15 <div v-else>
16 <div style="height:540px">
17 <el-form class="zs" :model="bdcqz" v-if="this.bdcqz.bdcqzlx==1" ref="ruleForm" label-width="100px">
18 <el-row>
19 <el-col :span="24">
20 <el-form-item label="权利人">
21 <el-input v-model="bdcqz.qlr"></el-input>
22 </el-form-item>
23 </el-col>
24 </el-row>
25 <el-row>
26 <el-col :span="24">
27 <el-form-item label="共有情况">
28 <el-select v-model="bdcqz.gyqk" class="width100" placeholder="请选择">
29 <el-option
30 v-for="item in gyqkList"
31 :key="item.dcode"
32 :label="item.dname"
33 :value="item.dcode">
34 </el-option>
35 </el-select>
36 </el-form-item>
37 </el-col>
38 </el-row>
39 <el-row>
40 <el-col :span="24">
41 <el-form-item label="坐落">
42 <el-input v-model="bdcqz.zl"></el-input>
43 </el-form-item>
44 </el-col>
45 </el-row>
46 <el-row>
47 <el-col :span="24">
48 <el-form-item label="不动产单元号">
49 <el-input v-model="bdcqz.bdcdyh"></el-input>
50 </el-form-item>
51 </el-col>
52 </el-row>
53 <el-row>
54 <el-col :span="24">
55 <el-form-item label="权利类型">
56 <el-input v-model="bdcqz.qllx"></el-input>
57 </el-form-item>
58 </el-col>
59 </el-row>
60 <el-row>
61 <el-col :span="24">
62 <el-form-item label="权利性质 ">
63 <el-input v-model="bdcqz.qlxz"></el-input>
64 </el-form-item>
65 </el-col>
66 </el-row>
67 <el-row>
68 <el-col :span="24">
69 <el-form-item label="用途">
70 <el-input v-model="bdcqz.yt"></el-input>
71 </el-form-item>
72 </el-col>
73 </el-row>
74 <el-row>
75 <el-col :span="24">
76 <el-form-item label="面积">
77 <el-input v-model="bdcqz.mj"></el-input>
78 </el-form-item>
79 </el-col>
80 </el-row>
81 <el-row>
82 <el-col :span="24">
83 <el-form-item label="使用期限 ">
84 <el-input v-model="bdcqz.syqx"></el-input>
85 </el-form-item>
86 </el-col>
87 </el-row>
88 <el-row>
89 <el-col :span="24">
90 <el-form-item label="权利其他状况">
91 <el-input v-model="bdcqz.qlqtzk" :rows="4" type="textarea"></el-input>
92 </el-form-item>
93 </el-col>
94 </el-row>
95 <el-row>
96 <el-col :span="24">
97 <el-form-item label="附记">
98 <el-input v-model="bdcqz.fj" :rows="4" type="textarea"></el-input>
99 </el-form-item>
100 </el-col>
101 </el-row>
102 </el-form>
103 <el-form :model="bdcqz" class="zm" v-else ref="ruleForm" label-width="110px">
104 <el-row>
105 <el-col :span="24">
106 <el-form-item label="证明权利或事项">
107 <el-input v-model="bdcqz.zmqlhsx"></el-input>
108 </el-form-item>
109 </el-col>
110 </el-row>
111 <el-row>
112 <el-col :span="24">
113 <el-form-item label="权利人(申请人)">
114 <el-input v-model="bdcqz.qlr"></el-input>
115 </el-form-item>
116 </el-col>
117 </el-row>
118 <el-row>
119 <el-col :span="24">
120 <el-form-item label="义务人">
121 <el-input v-model="bdcqz.ywr"></el-input>
122 </el-form-item>
123 </el-col>
124 </el-row>
125 <el-row>
126 <el-col :span="24">
127 <el-form-item label="坐落">
128 <el-input v-model="bdcqz.zl"></el-input>
129 </el-form-item>
130 </el-col>
131 </el-row>
132 <el-row>
133 <el-col :span="24">
134 <el-form-item label="不动产单元号">
135 <el-input v-model="bdcqz.bdcdyh"></el-input>
136 </el-form-item>
137 </el-col>
138 </el-row>
139 <el-row>
140 <el-col :span="24">
141 <el-form-item label="其他状况">
142 <el-input v-model="bdcqz.qlqtzk" :rows="6" type="textarea"></el-input>
143 </el-form-item>
144 </el-col>
145 </el-row>
146 <el-row>
147 <el-col :span="24">
148 <el-form-item label="附记">
149 <el-input v-model="bdcqz.fj" :rows="6" type="textarea"></el-input>
150 </el-form-item>
151 </el-col>
152 </el-row>
153 </el-form>
154 </div>
155 <div style="text-align:center">
156 <el-button @click="$popupCacel">取消</el-button>
157 <el-button type="primary" @click="handleSubmit">保存</el-button>
158 </div>
159 </div>
160 </div>
161 </template>
162
163 <script>
164 import store from '@/store/index.js'
165 import { getSlsqBdcqzList, editBdcqz } from "@/api/bdcqz.js"
166 export default {
167 name: "zsxg",
168 props: {
169 formData: {
170 type: Object,
171 default: {}
172 }
173 },
174 data () {
175 return {
176 gyqkList: store.getters.dictData['A34'],
177 key: 0,
178 noData: false,
179 loading: false,
180 bdcqz: {},
181 //tab切换栏数组
182 headTabBdcqz: [],
183 //tab选择绑定值
184 activeName: '',
185 }
186 },
187 mounted () {
188 this.getHeadTabBdcqz()
189 },
190 methods: {
191 /**
192 * @description: 获取受理申请下全部不动产权证
193 * @author: renchao
194 */
195 getHeadTabBdcqz () {
196 this.loading = true
197 getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
198 if (res.code == 200) {
199 this.noData = true
200 if (res.result && res.result.length > 0) {
201 this.bdcqz = res.result[0]
202 this.headTabBdcqz = _.cloneDeep(res.result)
203 if (this.formData.bsmBdcqz) {
204 this.activeName = this.formData.bsmBdcqz
205 } else {
206 this.activeName = res.result[0].bsmBdcqz
207 }
208 }
209 }
210 this.loading = false
211 })
212 },
213 handleClick (tab) {
214 this.bdcqz = _.cloneDeep(this.headTabBdcqz[tab.index])
215 },
216 handleSubmit () {
217 editBdcqz(this.bdcqz).then(res => {
218 if (res.code == 200) {
219 this.$message.success('保存成功');
220 //刷新列表
221 this.$popupCacel()
222 } else {
223 this.$message.error(res.message)
224 }
225 })
226 }
227 }
228 }
229 </script>
230 <style scoped lang="scss">
231 @import "~@/styles/mixin.scss";
232 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2024-02-06 13:23:44
5 -->
6 <template>
7 <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="text-align: center;">
8 <!-- 表单部分 -->
9 <div style="margin-top:-20px">
10 <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1">
11 <el-tab-pane :label="item.qlr + (item.bdcqzh !== null ? '(' + item.bdcqzh + ')' : '')" :name="item.bsmBdcqz"
12 v-for="(item, index) in headTabBdcqz" :key="index">
13 </el-tab-pane>
14 </el-tabs>
15 </div>
16 <el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty>
17 <div style="max-height:89vh;overflow-y:auto">
18 <div v-show="this.bdcqz.bdcqzlx==1">
19 <el-tabs v-model="activeTitle">
20 <el-tab-pane label="第一页" name="title1"></el-tab-pane>
21 <el-tab-pane label="第二页" name="title2"></el-tab-pane>
22 </el-tabs>
23 <div style="width:1169px;overflow-x: hidden;">
24 <canvas ref="zs1" width="1024" v-show="activeTitle=='title1'" height="739"></canvas>
25 <canvas ref="zs" width="1024" v-show="activeTitle=='title2'" height="739"></canvas>
26 </div>
27 </div>
28 <div style="width:1169px;overflow-x: hidden;" v-show="this.bdcqz.bdcqzlx==2">
29 <canvas ref="zm" width="1169" height="828"></canvas>
30 </div>
31 </div>
32 </div>
33 </template>
34
35 <script>
36 import QRCode from 'qrcode'
37 import { datas } from "../../javascript/zsyl.js";
38 import { getSlsqBdcqzList } from "@/api/bdcqz.js"
39 export default {
40 name: "zsyl",
41 props: {
42 formData: {
43 type: Object,
44 default: {}
45 }
46 },
47 data () {
48 return {
49 activeTitle: 'title1',
50 key: 0,
51 noData: false,
52 imgSrc1: require('@/image/bdcqz/bdcqzs1.jpg'),
53 imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
54 bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
55 loading: false,
56 //印刷序列号集合
57 ysxlh: [],
58 //列名称对象
59 columns: [],
60 //选择的不动产权证文件
61 bdcqz: '',
62 //证书打开类型 是否需要展示打印按钮
63 isToPrint: false,
64 //tab切换栏数组
65 headTabBdcqz: [],
66 //tab选择绑定值
67 activeName: '',
68 //证书图片预览
69 previewImage: '',
70 ruleForm: {
71 bsmBdcqz: '',
72 szmc: '不动产权证书',
73 szzh: '',
74 ysxlh: '',
75 },
76 }
77 },
78 mounted () {
79 this.columns = datas.columns();
80 if (this.formData.bdcqz) {
81 //从缮证进入
82 this.bdcqz = this.formData.bdcqz
83 } else {
84 //从按钮进入
85 this.getHeadTabBdcqz();
86 }
87
88 },
89 methods: {
90 /**
91 * @description: 获取证书内容
92 * @param {*} code
93 * @author: renchao
94 */
95 getRowValue (code) {
96 var value = this.bdcqz[code];
97 return value;
98 },
99 /**
100 * @description: 获取受理申请下全部不动产权证
101 * @author: renchao
102 */
103 getHeadTabBdcqz () {
104 this.loading = true
105 getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
106 if (res.code == 200) {
107 this.noData = true
108 if (res.result && res.result.length > 0) {
109 this.bdcqz = res.result[0]
110 this.headTabBdcqz = res.result
111 if (this.formData.bsmBdcqz) {
112 this.activeName = this.formData.bsmBdcqz
113 } else {
114 this.activeName = res.result[0].bsmBdcqz
115 }
116 if (this.bdcqz.bdcqzlx == 1) {
117 this.drawTextOnImage()
118 } else {
119 this.drawTextzmImage()
120 }
121 }
122 }
123 this.loading = false
124 })
125 },
126 /**
127 * @description: tab表头切换方法
128 * @param {*} e
129 * @author: renchao
130 */
131 handleClick (tab, event) {
132 this.bdcqz = this.headTabBdcqz[tab.index]
133 if (this.bdcqz.bdcqzlx == 1) {
134 this.drawTextOnImage()
135 } else {
136 this.drawTextzmImage()
137 }
138 },
139 /**
140 * @description: 不动产证书
141 * @author: renchao
142 */
143 drawTextOnImage1 () {
144 const canvas = this.$refs.zs1;
145 const context = canvas.getContext('2d');
146 const image = new Image();
147 image.onload = () => {
148 context.drawImage(image, 0, 0);
149 context.font = '18px 楷体';
150 context.fillStyle = '#000000';
151 let date = this.bdcqz.djsj.split(' ')[0].split('/');
152 let nian = date[0]
153 let yue = date[1]
154 let ri = date[2]
155 this.bdcqz.nian = nian
156 this.bdcqz.yue = yue
157 this.bdcqz.ri = ri
158 context.fillText(nian ? nian : '', 780, 499);
159 context.fillText(yue ? yue : '', 840, 499);
160 context.fillText(ri ? ri : '', 885, 499);
161 QRCode.toDataURL(this.bdcqz.bdcqzh, { margin: 0 })
162 .then(url => {
163 const qrImage = new Image();
164 this.bdcqz.qrImage = url; // 将二维码图片的 URL 存储到 bdcqz 对象的 qrImage 属性中
165 qrImage.onload = () => {
166 context.drawImage(qrImage, 670, 400, 100, 100);
167 };
168 qrImage.src = url;
169 })
170 .catch(error => {
171 console.error(error);
172 });
173 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 745, 633);
174 };
175 image.src = this.imgSrc1;
176 },
177 drawTextOnImage () {
178 this.drawTextOnImage1()
179 function getByteLen (val) {
180 var len = 0;
181 if (!val) return len;
182 for (var i = 0; i < val.length; i++) {
183 var length = val.charCodeAt(i);
184 if (length >= 0 && length <= 128) {
185 len += 1;
186 } else {
187 len += 2;
188 }
189 }
190 return len;
191 }
192 const canvas = this.$refs.zs;
193 const context = canvas.getContext('2d');
194 const image = new Image();
195 image.onload = () => {
196 context.drawImage(image, 0, 0);
197 context.font = '18px 楷体';
198 context.fillStyle = '#000000';
199 context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56);
200 context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56);
201 if (getByteLen(this.bdcqz.sxqc) > 14) {
202 const originalFont = context.font;
203 // 设置新的字体大小
204 context.font = '14px 楷体'; // 替换为你想要的字体和大小
205 // 绘制 bdcdyh
206 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 165, 56);
207 // 恢复原始字体设置
208 context.font = originalFont;
209 } else {
210 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 170, 56);
211 }
212 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56);
213 context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 129, 97);
214 context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 129, 136);
215
216 this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' +
217 this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length)
218 context.fillText(this.bdcdyh ? this.bdcdyh : '', 129, 223);
219
220 context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263);
221 context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303);
222 context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346);
223 // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
224 let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : [];
225 if (getByteLen(this.bdcqz.mj) > 37) {
226 lines6.forEach((line, index) => {
227 const y = 378 + (index * 27); // 每行文本的垂直位置
228 let currentLine = '';
229 let arr = [];
230 for (let word of line) {
231 const testLine = currentLine + word;
232 const lineWidth = context.measureText(testLine).width;
233 if (lineWidth <= 330) {
234 currentLine = testLine;
235 } else {
236 arr.push(currentLine);
237 currentLine = word;
238 }
239 }
240 arr.push(currentLine);
241 arr.forEach((line, index) => {
242 context.fillText(line, 129, y + (index * 20)); // 调整行高
243 })
244 })
245 } else {
246 lines6.forEach((line, index) => {
247 const y = 386 + (index * 27); // 每行文本的垂直位置
248 let currentLine = '';
249 let arr = [];
250 for (let word of line) {
251 const testLine = currentLine + word;
252 const lineWidth = context.measureText(testLine).width;
253 if (lineWidth <= 330) {
254 currentLine = testLine;
255 } else {
256 arr.push(currentLine);
257 currentLine = word;
258 }
259 }
260 arr.push(currentLine);
261 arr.forEach((line, index) => {
262 context.fillText(line, 129, y + (index * 20)); // 调整行高
263 })
264 })
265 }
266 // 权利其他状态
267 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n').filter(i => i && i.trim()) : [];
268 for (let i = 0; i < lines.length; i++) {
269 let num = Math.ceil(getByteLen(lines[i]) / 38)
270 if (getByteLen(lines[i]) > 37) {
271 let currentLine = '';
272 let arr = [];
273 for (let word of lines[i]) {
274 const testLine = currentLine + word;
275 const lineWidth = context.measureText(testLine).width;
276 if (lineWidth <= 323) {
277 currentLine = testLine;
278 } else {
279 arr.push(currentLine);
280 currentLine = word;
281 }
282 }
283 arr.push(currentLine);
284 if (i > 0) {
285 arr.forEach((line, index) => {
286 context.fillText(line, 129, 495 + (29 * (i - 1)) + 4 * num + (index * 14)); // 调整行高
287 })
288 } else {
289 arr.forEach((line, index) => {
290 context.fillText(line, 129, 493 + (26 * (i - 1)) + (index * 14)); // 调整行高
291 })
292 }
293 } else {
294 if (i > 0) {
295 context.fillText(lines[i] ? lines[i] : '', 129, 500 + 4 * num + (29 * (i - 1)));
296 } else {
297 context.fillText(lines[i] ? lines[i] : '', 129, 505 + (27 * (i - 1)));
298 }
299 }
300 }
301
302 let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n').filter(i => i && i.trim()) : [];
303 lines1.forEach((line, index) => {
304 const y = 100 + (index * 30); // 每行文本的垂直位置
305 let currentLine = '';
306 let arr = [];
307 for (let word of line) {
308 const testLine = currentLine + word;
309 const lineWidth = context.measureText(testLine).width;
310 if (lineWidth <= 395) {
311 currentLine = testLine;
312 } else {
313 arr.push(currentLine);
314 currentLine = word;
315 }
316 }
317 arr.push(currentLine);
318 arr.forEach((line, index) => {
319 context.fillText(line, 580, y + (index * 30)); // 调整行高
320 })
321 })
322 let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : [];
323 if (getByteLen(this.bdcqz.syqx) > 37) {
324 lines3.forEach((line, index) => {
325 const y = 423 + (index * 27); // 每行文本的垂直位置
326 let currentLine = '';
327 let arr = [];
328 for (let word of line) {
329 const testLine = currentLine + word;
330 const lineWidth = context.measureText(testLine).width;
331 if (lineWidth <= 330) {
332 currentLine = testLine;
333 } else {
334 arr.push(currentLine);
335 currentLine = word;
336 }
337 }
338 arr.push(currentLine);
339 arr.forEach((line, index) => {
340 context.fillText(line, 129, y + (index * 20)); // 调整行高
341 })
342 })
343 } else {
344 lines3.forEach((line, index) => {
345 const y = 430 + (index * 27); // 每行文本的垂直位置
346 let currentLine = '';
347 let arr = [];
348 for (let word of line) {
349 const testLine = currentLine + word;
350 const lineWidth = context.measureText(testLine).width;
351 if (lineWidth <= 315) {
352 currentLine = testLine;
353 } else {
354 arr.push(currentLine);
355 currentLine = word;
356 }
357 }
358 arr.push(currentLine);
359 arr.forEach((line, index) => {
360 context.fillText(line, 129, y + (index * 20)); // 调整行高
361 })
362 })
363 }
364
365 let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
366 if (getByteLen(this.bdcqz.zl) > 37) {
367 lines2.forEach((line, index) => {
368 const y = 170 + (index * 20); // 每行文本的垂直位置
369 let currentLine = '';
370 let arr = [];
371 for (let word of line) {
372 const testLine = currentLine + word;
373 const lineWidth = context.measureText(testLine).width;
374 if (lineWidth <= 336) {
375 currentLine = testLine;
376 } else {
377 arr.push(currentLine);
378 currentLine = word;
379 }
380 }
381 arr.push(currentLine);
382 arr.forEach((line, index) => {
383 context.fillText(line, 129, y + (index * 20)); // 调整行高
384 })
385 })
386 } else {
387 lines2.forEach((line, index) => {
388 const y = 180 + (index * 20); // 每行文本的垂直位置
389 let currentLine = '';
390 let arr = [];
391 for (let word of line) {
392 const testLine = currentLine + word;
393 const lineWidth = context.measureText(testLine).width;
394 if (lineWidth <= 336) {
395 currentLine = testLine;
396 } else {
397 arr.push(currentLine);
398 currentLine = word;
399 }
400 }
401 arr.push(currentLine);
402 arr.forEach((line, index) => {
403 context.fillText(line, 129, y + (index * 20)); // 调整行高
404 })
405 })
406 }
407 }
408 image.src = this.imgSrc
409 },
410 /**
411 * @description: 不动产证明
412 * @author: renchao
413 */
414 drawTextzmImage () {
415 function getByteLen (val) {
416 var len = 0;
417 if (!val) return len;
418 for (var i = 0; i < val.length; i++) {
419 var length = val.charCodeAt(i);
420 if (length >= 0 && length <= 128) {
421 len += 1;
422 } else {
423 len += 2;
424 }
425 }
426 return len;
427 }
428 const canvas = this.$refs.zm;
429 const context = canvas.getContext('2d');
430 const image = new Image();
431 image.onload = () => {
432 context.drawImage(image, 0, 0);
433 context.font = '18px 楷体';
434 context.fillStyle = '#000000';
435 // ysxlh
436 context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : '', 280, 712);
437 // djsj
438 if (this.bdcqz.djsj) {
439 let djsjList = this.bdcqz.djsj.split(' ')[0].split('/')
440 context.fillText(djsjList[0] ? djsjList[0] : '', 327, 580);
441 context.fillText(djsjList[1] ? djsjList[1] : '', 393, 580);
442 context.fillText(djsjList[2] ? djsjList[2] : '', 443, 580);
443 }
444 context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 620, 125);
445 context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 665, 125);
446 if (getByteLen(this.bdcqz.sxqc) > 14) {
447 const originalFont = context.font;
448 // 设置新的字体大小
449 context.font = '14px 楷体'; // 替换为你想要的字体和大小
450 // 绘制 bdcdyh
451 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 725, 125);
452 // 恢复原始字体设置
453 context.font = originalFont;
454 } else {
455 context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 755, 125);
456 }
457
458 context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123);
459 context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180);
460 // context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228);
461 // 权利人
462 let qlrlines = this.bdcqz.qlr
463 if (getByteLen(this.bdcqz.qlr) > 32) {
464 let currentLine = '';
465 let arr = [];
466 for (let word of qlrlines) {
467 const testLine = currentLine + word;
468 const lineWidth = context.measureText(testLine).width;
469 if (lineWidth <= 295) {
470 currentLine = testLine;
471 } else {
472 arr.push(currentLine);
473 currentLine = word;
474 }
475 }
476 arr.push(currentLine); // 将最后一行添加到数组
477 // 绘制所有行
478 for (let i = 0; i < arr.length; i++) {
479 context.fillText(arr[i], 775, 218 + i * 20); // lineHeight 为行高
480 }
481 } else {
482 context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228);
483 }
484
485 // 义务人
486 // context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275);
487 let ywrlines = this.bdcqz.ywr
488 if (getByteLen(this.bdcqz.ywr) > 32) {
489 let currentLine = '';
490 let arr = [];
491 for (let word of ywrlines) {
492 const testLine = currentLine + word;
493 const lineWidth = context.measureText(testLine).width;
494 if (lineWidth <= 295) {
495 currentLine = testLine;
496 } else {
497 arr.push(currentLine);
498 currentLine = word;
499 }
500 }
501 arr.push(currentLine); // 将最后一行添加到数组
502 // 绘制所有行
503 for (let i = 0; i < arr.length; i++) {
504 context.fillText(arr[i], 775, 268 + i * 20); // lineHeight 为行高
505 }
506 } else {
507 context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275);
508 }
509
510 // context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325);
511 let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
512 if (getByteLen(this.bdcqz.zl) > 32) {
513 lines2.forEach((line, index) => {
514 const y = 315 + (index * 20); // 每行文本的垂直位置
515 let currentLine = '';
516 let arr = [];
517 for (let word of line) {
518 const testLine = currentLine + word;
519 const lineWidth = context.measureText(testLine).width;
520 if (lineWidth <= 295) {
521 currentLine = testLine;
522 } else {
523 arr.push(currentLine);
524 currentLine = word;
525 }
526 }
527 arr.push(currentLine);
528 arr.forEach((line, index) => {
529 context.fillText(line, 775, y + (index * 20)); // 调整行高
530 })
531 })
532 } else {
533 lines2.forEach((line, index) => {
534 const y = 325 + (index * 20); // 每行文本的垂直位置
535 let currentLine = '';
536 let arr = [];
537 for (let word of line) {
538 const testLine = currentLine + word;
539 const lineWidth = context.measureText(testLine).width;
540 if (lineWidth <= 295) {
541 currentLine = testLine;
542 } else {
543 arr.push(currentLine);
544 currentLine = word;
545 }
546 }
547 arr.push(currentLine);
548 arr.forEach((line, index) => {
549 context.fillText(line, 775, y + (index * 20)); // 调整行高
550 })
551 })
552 }
553
554 // bdcdyh
555 this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' +
556 this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length)
557 // context.fillText(this.bdcdyh ? this.bdcdyh : '', 775, 373);
558 // 保存当前字体设置
559 const originalFont = context.font;
560 // 设置新的字体大小
561 context.font = '16px 楷体'; // 替换为你想要的字体和大小
562 // 绘制 bdcdyh
563 context.fillText(this.bdcdyh ? this.bdcdyh : '', 775, 373);
564 // 恢复原始字体设置
565 context.font = originalFont;
566 // qlqtzk
567 function getByteLenBdcdy (val) {
568 var encoder = new TextEncoder('utf-8');
569 return encoder.encode(val).length;
570 }
571 const maxWidth = 295; // 最大宽度限制
572 let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n').filter(i => i && i.trim()) : [];
573 let bdcdyNum = Math.ceil(getByteLenBdcdy(lines[0]) / 43)
574 // 单独处理不动产单元号
575 let linesBdcdy = lines[0] ? lines[0].split(' ') : [];
576 if (getByteLenBdcdy(lines[0]) > 43) {
577 linesBdcdy.forEach((line, index) => {
578 const y = 412 + (index * 17); // 每行文本的垂直位置
579 let currentLine = '';
580 let arr = [];
581 for (let word of line) {
582 const testLine = currentLine + word;
583 const lineWidth = context.measureText(testLine).width;
584 if (lineWidth <= maxWidth) {
585 currentLine = testLine;
586 } else {
587 arr.push(currentLine);
588 currentLine = word;
589 }
590 }
591 arr.push(currentLine);
592 arr.forEach((line, index) => {
593 context.fillText(line, 770, y + (index * 17)); // 调整行高
594 })
595 })
596 } else {
597 linesBdcdy.forEach((line, index) => {
598 const y = 418 + (index * 17); // 每行文本的垂直位置
599 let currentLine = '';
600 let arr = [];
601 for (let word of line) {
602 const testLine = currentLine + word;
603 const lineWidth = context.measureText(testLine).width;
604 if (lineWidth <= maxWidth) {
605 currentLine = testLine;
606 } else {
607 arr.push(currentLine);
608 currentLine = word;
609 }
610 }
611 arr.push(currentLine);
612 arr.forEach((line, index) => {
613 context.fillText(line, 770, y + (index * 17)); // 调整行高
614 })
615 })
616 }
617
618 for (let i = 1; i < lines.length; i++) {
619 let num = Math.ceil(getByteLen(lines[i]) / 32)
620 if (getByteLen(lines[i]) > 32) {
621 let currentLine = '';
622 let arr = [];
623 for (let word of lines[i]) {
624 const testLine = currentLine + word;
625 const lineWidth = context.measureText(testLine).width;
626 if (lineWidth <= maxWidth) {
627 currentLine = testLine;
628 } else {
629 arr.push(currentLine);
630 currentLine = word;
631 }
632 }
633 arr.push(currentLine);
634 if (i > 0) {
635 arr.forEach((line, index) => {
636 context.fillText(line, 770, 408 + (bdcdyNum * 15) + (24 * (i - 1)) + 5 * num + (index * 17)); // 调整行高
637 })
638 } else {
639 arr.forEach((line, index) => {
640 context.fillText(line, 770, 408 + (bdcdyNum * 15) + (24 * (i - 1)) + (index * 17)); // 调整行高
641 })
642 }
643 } else {
644 if (i > 0) {
645 context.fillText(lines[i] ? lines[i] : '', 770, 417 + (bdcdyNum * 15) + 6 * num + (25 * (i - 1)));
646 } else {
647 context.fillText(lines[i] ? lines[i] : '', 770, 417 + (bdcdyNum * 15) + (25 * (i - 1)));
648 }
649 }
650 }
651 // fj
652 let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n').filter(i => i && i.trim()) : [];
653 for (let i = 0; i < lines1.length; i++) {
654 let num = Math.ceil(getByteLen(lines1[i]) / 37)
655 if (getByteLen(lines1[i]) > 37) {
656 let currentLine = '';
657 let arr = [];
658 for (let word of lines1[i]) {
659 const testLine = currentLine + word;
660 const lineWidth = context.measureText(testLine).width;
661 if (lineWidth <= maxWidth) {
662 currentLine = testLine;
663 } else {
664 arr.push(currentLine);
665 currentLine = word;
666 }
667 }
668 arr.push(currentLine);
669 if (i > 0) {
670 arr.forEach((line, index) => {
671 context.fillText(line, 770, 605 + (24 * (i - 1)) + 5 * num + (index * 17)); // 调整行高
672 })
673 } else {
674 arr.forEach((line, index) => {
675 context.fillText(line, 770, 605 + (24 * (i - 1)) + (index * 17)); // 调整行高
676 })
677 }
678 } else {
679 if (i > 0) {
680 context.fillText(lines1[i] ? lines1[i] : '', 770, 616 + 6 * num + (25 * (i - 1)));
681 } else {
682 context.fillText(lines1[i] ? lines1[i] : '', 770, 616 + (25 * (i - 1)));
683 }
684 }
685 }
686 }
687
688 image.src = this.bdczmSrc;
689 }
690 }
691 }
692 </script>
693 <style scoped lang="scss">
694 @import "~@/styles/mixin.scss";
695 /deep/.el-tabs__nav-wrap::after {
696 display: none;
697 }
698 /deep/.el-tabs__header {
699 margin: 0;
700 }
701 /deep/.el-form-item--small.el-form-item {
702 margin-bottom: 0;
703 }
704 /deep/.mask-content {
705 padding-top: 10px !important;
706 }
707 .imgClass {
708 display: inline-block;
709 height: auto;
710 max-width: 100%;
711 }
712
713 .middle_padding {
714 padding-bottom: 10px;
715 }
716
717 .zsyl-button {
718 text-align: center;
719 margin-top: 20px;
720
721 .operation_button {
722 width: 100px;
723 border: 1px solid rgb(0, 121, 254);
724 }
725
726 .dy-button {
727 color: white;
728 background-color: rgb(0, 121, 254);
729 }
730 }
731
732 .table-column {
733 border-spacing: 1px;
734 width: 100%;
735
736 tr td {
737 border: 1px solid #ccc;
738 text-align: center;
739 height: 40px;
740 padding: 4px;
741 font-size: 13px;
742 background: rgb(251, 249, 229);
743 }
744 }
745
746 .zsyl-title {
747 background: #fafbe5;
748 text-align: center;
749 padding: 5px 0px;
750 font-size: 20px;
751 }
752
753 .no-data {
754 font-size: 18px;
755 display: flex;
756 text-align: center;
757 justify-content: center;
758 }
759 </style>