Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
4c7539c9 by renchao@pashanhoo.com
Options

不动产明细查询

1 parent 1c532392
Inline Side-by-side
Showing 17 changed files with 133 additions and 1379 deletions
1 <template> 1 <template>
2 <dialogBox title="房屋明细查询" @closeDialog="closeDialog" width="75%" :isButton="false" v-model="myValue"> 2 <div v-Loading="Loading">
3 <el-steps :active="activeStep" finish-status="success"> 3 <el-steps :active="activeStep" finish-status="success">
4 <el-step title="条件录入"></el-step> 4 <el-step title="条件录入" @click.native="on_click(0)" class="pointer"></el-step>
5 <el-step title="结果查询"></el-step> 5 <el-step title="查询结果" @click.native="on_click(2)" class="pointer"></el-step>
6 <el-step title="结果展示"></el-step>
7 </el-steps> 6 </el-steps>
8 <div v-if="isSearch"> 7 <div v-if="isSearch">
9 <dydjbInfo ref="dydjbInfo" /> 8 <dydjbInfo ref="dydjbInfo" />
...@@ -42,39 +41,41 @@ ...@@ -42,39 +41,41 @@
42 <lb-table :column="qlrColumns" key="ql2r" :data="form.qlrList" :maxHeight="200" heightNumSetting 41 <lb-table :column="qlrColumns" key="ql2r" :data="form.qlrList" :maxHeight="200" heightNumSetting
43 :pagination="false"> 42 :pagination="false">
44 </lb-table> 43 </lb-table>
45 <div class="submit-button" style="padding-bottom:50px"> 44 </div>
45 <div class="submit-button" style="padding-bottom:50px" v-if="this.formData.sqcxBsm==''">
46 <el-button @click="resetClick" v-show="!isSearch">重置</el-button> 46 <el-button @click="resetClick" v-show="!isSearch">重置</el-button>
47 <el-button type="primary" @click="queryChick" v-show="!isSearch">查询</el-button> 47 <el-button type="primary" @click="queryChick" v-show="!isSearch">查询</el-button>
48 <el-button @click="closeDialog">关闭</el-button> 48 <el-button @click="closeDialog">关闭</el-button>
49 </div> 49 </div>
50 </div> 50 </div>
51 </div> 51 </div>
52 </dialogBox>
53 </template> 52 </template>
54
55 <script> 53 <script>
54 import { mapGetters } from "vuex";
55 import store from '@/store/index.js'
56 import dydjbInfo from "./dydjbInfo.vue";
57 import { getLodop } from "@/utils/LodopFuncs"
58 import { datas, sendThis } from "./dydjbdata";
56 import { addFwmxCxjgXx, getFwmxInfo, printJtcfInfo } from "@/api/jtfc.js"; 59 import { addFwmxCxjgXx, getFwmxInfo, printJtcfInfo } from "@/api/jtfc.js";
57 import { getPrintTemplateByCode } from "@/api/print"; 60 import { getPrintTemplateByCode } from "@/api/print";
58 import { datas, sendThis } from "./dydjbdata";
59 import { getLodop } from "@/utils/LodopFuncs"
60 import dydjbInfo from "./dydjbInfo.vue";
61 import { mapGetters } from "vuex";
62 export default { 61 export default {
63 computed: { 62 computed: {
64 ...mapGetters(["dictData"]), 63 ...mapGetters(["dictData"]),
65 }, 64 },
66 components: { dydjbInfo }, 65 components: { dydjbInfo },
67 props: { 66 props: {
68 value: { type: Boolean, default: false }, 67 formData: {
69 sqcxBsm: { type: String, default: "" }, 68 type: Object,
69 default: () => { },
70 }
70 }, 71 },
71 mounted () { 72 mounted () {
72 sendThis(this); 73 sendThis(this);
73 }, 74 },
74 data () { 75 data () {
75 return { 76 return {
77 Loading: false,
76 activeStep: 0, 78 activeStep: 0,
77 myValue: this.value,
78 //是否查询 79 //是否查询
79 isSearch: false, 80 isSearch: false,
80 //查询结果列表字段 81 //查询结果列表字段
...@@ -99,22 +100,14 @@ ...@@ -99,22 +100,14 @@
99 }, 100 },
100 }; 101 };
101 }, 102 },
102 watch: { 103 mounted () {
103 value (val) { 104 this.loadData()
104 this.myValue = val; 105 if (this.formData.sqcxBsm != '') {
105 let that = this 106 this.activeStep = 2;
106 if (val) { 107 this.isSearch = true;
107 this.form.sqrList = []
108 this.form.qlrList = []
109 this.isSearch = false
110 if (this.sqcxBsm == "") {
111 that.add("sqr");
112 that.add("qlr");
113 } else {
114 that.loadData();
115 }
116 } 108 }
117 }, 109 },
110 watch: {
118 "form.djSqcxDO.ycqrgx" (val) { 111 "form.djSqcxDO.ycqrgx" (val) {
119 if (val == "1") { 112 if (val == "1") {
120 this.form.qlrList = _.cloneDeep(this.form.sqrList); 113 this.form.qlrList = _.cloneDeep(this.form.sqrList);
...@@ -123,13 +116,25 @@ ...@@ -123,13 +116,25 @@
123 this.add("qlr"); 116 this.add("qlr");
124 } 117 }
125 }, 118 },
126 "form.sqrList" (val) { 119 "form.sqrList": {
120 handler: function (val) {
127 if (this.form.djSqcxDO.ycqrgx == '1') { 121 if (this.form.djSqcxDO.ycqrgx == '1') {
128 this.form.qlrList = _.cloneDeep(this.form.sqrList) 122 this.form.qlrList = _.cloneDeep(val)
129 } 123 }
124 },
125 deep: true
130 } 126 }
131 }, 127 },
132 methods: { 128 methods: {
129 // 步骤条
130 on_click (e) {
131 if (e != '' || e != null) { this.activeStep = e }
132 if (e == 0) {
133 this.isSearch = false
134 } else {
135 this.isSearch = true
136 }
137 },
133 /** 138 /**
134 * @description: closeDialog 139 * @description: closeDialog
135 * @author: renchao 140 * @author: renchao
...@@ -145,49 +150,43 @@ ...@@ -145,49 +150,43 @@
145 dyjlList: [], 150 dyjlList: [],
146 } 151 }
147 }, 152 },
148 //加载详细信息
149 /** 153 /**
150 * @description: 加载详细信息 154 * @description: 加载详细信息
151 * @author: renchao 155 * @author: renchao
152 */ 156 */
153 loadData () { 157 loadData () {
154 this.$startLoading(); 158 this.Loading = true
155 getFwmxInfo({ sqcxBsm: this.sqcxBsm }).then((res) => { 159 getFwmxInfo({ sqcxBsm: this.formData.sqcxBsm }).then((res) => {
156 this.$endLoading(); 160 this.Loading = false
157 if (res.code == 200) { 161 if (res.code == 200) {
158 this.activeStep = 2;
159 this.isSearch = true;
160 this.$nextTick(() => { 162 this.$nextTick(() => {
161 this.$refs.dydjbInfo.setResult(res.result) 163 this.$refs.dydjbInfo.setResult(res.result)
162 }) 164 })
163 } 165 }
164 }); 166 }).catch(() => {
167 this.Loading = false
168 })
165 }, 169 },
166 //查询结果
167 /** 170 /**
168 * @description: 查询结果 171 * @description: 查询结果
169 * @author: renchao 172 * @author: renchao
170 */ 173 */
171 queryChick () { 174 queryChick () {
172 this.$startLoading(); 175 this.Loading = true
173 this.activeStep = 1; 176 this.activeStep = 1;
177 store.dispatch('user/reWorkFresh', false)
174 addFwmxCxjgXx(this.form).then((res) => { 178 addFwmxCxjgXx(this.form).then((res) => {
175 this.$endLoading(); 179 this.Loading = false
176 if (res.code == 200) { 180 if (res.code == 200) {
181 store.dispatch('user/reWorkFresh', true)
177 this.activeStep = 2; 182 this.activeStep = 2;
178 this.isSearch = true; 183 this.isSearch = true;
179 this.$nextTick(() => { 184 this.$nextTick(() => {
180 this.$refs.dydjbInfo.setResult(res.result) 185 this.$refs.dydjbInfo.setResult(res.result)
181 }) 186 })
182 this.$parent.queryClick();
183 } 187 }
184 }); 188 })
185 }, 189 },
186 //重置
187 /**
188 * @description: 重置
189 * @author: renchao
190 */
191 resetClick () { 190 resetClick () {
192 this.form.djSqcxDO = { ycqrgx: "1", cxyt: "", bdcqzh: "" }; 191 this.form.djSqcxDO = { ycqrgx: "1", cxyt: "", bdcqzh: "" };
193 this.form.sqrList = _.cloneDeep([this.newData]); 192 this.form.sqrList = _.cloneDeep([this.newData]);
...@@ -214,7 +213,6 @@ ...@@ -214,7 +213,6 @@
214 this.form.qlrList.push(_.cloneDeep(this.newData)); 213 this.form.qlrList.push(_.cloneDeep(this.newData));
215 } 214 }
216 }, 215 },
217 //移除申请人或权利人
218 /** 216 /**
219 * @description: 移除申请人或权利人 217 * @description: 移除申请人或权利人
220 * @param {*} index 218 * @param {*} index
...@@ -229,7 +227,6 @@ ...@@ -229,7 +227,6 @@
229 this.form.qlrList.splice(index, 1); 227 this.form.qlrList.splice(index, 1);
230 } 228 }
231 }, 229 },
232 //电话号码校验
233 /** 230 /**
234 * @description: 电话号码校验 231 * @description: 电话号码校验
235 * @param {*} row 232 * @param {*} row
...@@ -249,9 +246,12 @@ ...@@ -249,9 +246,12 @@
249 }; 246 };
250 </script> 247 </script>
251 <style scoped lang="scss"> 248 <style scoped lang="scss">
252 @import "~@/styles/mixin.scss"; 249 @import "~@/styles/mixin.scss";
253 @import "~@/styles/public.scss"; 250 @import "~@/styles/public.scss";
254 /deep/.dialog_title::before{ 251 /deep/.el-step__title {
252 margin-left: -15px;
253 }
254 /deep/.dialog_title::before {
255 content: ""; 255 content: "";
256 display: block; 256 display: block;
257 width: 4px; 257 width: 4px;
...@@ -261,25 +261,21 @@ ...@@ -261,25 +261,21 @@
261 top: -4px; 261 top: -4px;
262 left: 0px; 262 left: 0px;
263 } 263 }
264 .title { 264 .title {
265 padding-bottom: 10px; 265 padding-bottom: 10px;
266 margin-bottom: 10px; 266 margin-bottom: 10px;
267 display: block; 267 display: block;
268 border-bottom: 1px solid $borderColor; 268 border-bottom: 1px solid $borderColor;
269 } 269 }
270 270 .jtfccx-edit-con {
271 height: 80vh;
272 overflow-y: scroll;
273 }
271 .jtfccx-edit { 274 .jtfccx-edit {
272 @include flex; 275 @include flex;
273 flex-direction: column; 276 flex-direction: column;
274 overflow-y: hidden;
275 max-height: 85vh;
276 padding: 0 2px; 277 padding: 0 2px;
277 278 height: 82vh;
278 .jtfccx-edit-con {
279 flex: 1;
280 height: 100%;
281 overflow-y: scroll;
282 }
283 279
284 .submit-button { 280 .submit-button {
285 text-align: center; 281 text-align: center;
...@@ -289,14 +285,14 @@ ...@@ -289,14 +285,14 @@
289 } 285 }
290 } 286 }
291 287
292 /deep/.el-dialog__headerbtn .el-dialog__close { 288 /deep/.el-dialog__headerbtn .el-dialog__close {
293 color: #6B7A99 !important; 289 color: #6b7a99 !important;
294 position: relative; 290 position: relative;
295 top: -7px; 291 top: -7px;
296 } 292 }
297 /deep/.dialogBox .dialog_title{ 293 /deep/.dialogBox .dialog_title {
298 .el-icon-full-screen{ 294 .el-icon-full-screen {
299 color: #409eff!important; 295 color: #409eff !important;
300 } 296 }
301 b { 297 b {
302 color: white; 298 color: white;
...@@ -304,12 +300,12 @@ ...@@ -304,12 +300,12 @@
304 margin: auto; 300 margin: auto;
305 text-align: center; 301 text-align: center;
306 align-items: center; 302 align-items: center;
307 } 303 }
308 } 304 }
309 /deep/.el-dialog__header { 305 /deep/.el-dialog__header {
310 background: linear-gradient(3deg, #409eff, #a7cbee); 306 background: linear-gradient(3deg, #409eff, #a7cbee);
311 } 307 }
312 /deep/.el-dialog__headerbtn .el-dialog__close{ 308 /deep/.el-dialog__headerbtn .el-dialog__close {
313 color: #409eff!important; 309 color: #409eff !important;
314 } 310 }
315 </style> 311 </style>
......
...@@ -2,31 +2,38 @@ ...@@ -2,31 +2,38 @@
2 <div class="jtfccx-edit-con"> 2 <div class="jtfccx-edit-con">
3 <b class="title"></b> 3 <b class="title"></b>
4 <b class="title">房屋状况</b> 4 <b class="title">房屋状况</b>
5 <lb-table :column="fwColumns" key="fwzk" :data="resultData.hdetailList" :maxHeight="200" heightNumSetting 5 <lb-table :column="fwColumns" key="fwzk" :data="resultData.hdetailList"
6 :heightNumSetting="true" :minHeight="0" :rowStyleHeight='25'
6 :pagination="false"> 7 :pagination="false">
7 </lb-table> 8 </lb-table>
8 <b class="title">土地状况</b> 9 <b class="title">土地状况</b>
9 <lb-table :column="tdColumns" key="tdzk" :data="resultData.zdjbxxDetail" :maxHeight="200" heightNumSetting 10 <lb-table :column="tdColumns" key="tdzk" :data="resultData.zdjbxxDetail"
11 :heightNumSetting="true" :minHeight="100" :rowStyleHeight='25'
10 :pagination="false"> 12 :pagination="false">
11 </lb-table> 13 </lb-table>
12 <b class="title">权属状况</b> 14 <b class="title">权属状况</b>
13 <lb-table :column="qszkColumns" key="qszk" :data="resultData.qsxxDetail" :maxHeight="200" heightNumSetting 15 <lb-table :column="qszkColumns" key="qszk" :data="resultData.qsxxDetail"
16 :heightNumSetting="true" :minHeight="100" :rowStyleHeight='25'
14 :pagination="false"> 17 :pagination="false">
15 </lb-table> 18 </lb-table>
16 <b class="title">抵押登记</b> 19 <b class="title">抵押登记</b>
17 <lb-table :column="diyaColumns" key="dydj" :data="resultData.dyaqDetail" :maxHeight="200" heightNumSetting 20 <lb-table :column="diyaColumns" key="dydj" :data="resultData.dyaqDetail"
21 :heightNumSetting="true" :minHeight="100" :rowStyleHeight='25'
18 :pagination="false"> 22 :pagination="false">
19 </lb-table> 23 </lb-table>
20 <b class="title">预告登记</b> 24 <b class="title">预告登记</b>
21 <lb-table :column="ygdjColumns" key="ygdj" :data="resultData.ygdjDetail" :maxHeight="200" heightNumSetting 25 <lb-table :column="ygdjColumns" key="ygdj" :data="resultData.ygdjDetail"
26 :heightNumSetting="true" :minHeight="100" :rowStyleHeight='25'
22 :pagination="false"> 27 :pagination="false">
23 </lb-table> 28 </lb-table>
24 <b class="title">查封状况</b> 29 <b class="title">查封状况</b>
25 <lb-table :column="cfdjColumns" key="cfdj" :data="resultData.cfdjDetail" :maxHeight="200" heightNumSetting 30 <lb-table :column="cfdjColumns" key="cfdj" :data="resultData.cfdjDetail"
31 :heightNumSetting="true" :minHeight="100" :rowStyleHeight='25'
26 :pagination="false"> 32 :pagination="false">
27 </lb-table> 33 </lb-table>
28 <b class="title">异议登记</b> 34 <b class="title">异议登记</b>
29 <lb-table :column="yydjColumns" key="yydj" :data="resultData.yydjDetail" :maxHeight="200" heightNumSetting 35 <lb-table :column="yydjColumns" key="yydj" :data="resultData.yydjDetail"
36 :heightNumSetting="true" :minHeight="100" :rowStyleHeight='25'
30 :pagination="false"> 37 :pagination="false">
31 </lb-table> 38 </lb-table>
32 </div> 39 </div>
...@@ -98,10 +105,6 @@ ...@@ -98,10 +105,6 @@
98 </script> 105 </script>
99 <style scoped lang="scss"> 106 <style scoped lang="scss">
100 @import "~@/styles/mixin.scss"; 107 @import "~@/styles/mixin.scss";
101 .jtfccx-edit-con {
102 max-height: 85vh;
103 overflow-y: scroll;
104 }
105 .table1 { 108 .table1 {
106 border-spacing: 0; 109 border-spacing: 0;
107 border-collapse: collapse; 110 border-collapse: collapse;
......
...@@ -9,7 +9,7 @@ class data extends filter { ...@@ -9,7 +9,7 @@ class data extends filter {
9 constructor() { 9 constructor() {
10 super() 10 super()
11 } 11 }
12 columns() { 12 columns () {
13 return [ 13 return [
14 { 14 {
15 prop: 'qszt', 15 prop: 'qszt',
...@@ -45,11 +45,11 @@ class data extends filter { ...@@ -45,11 +45,11 @@ class data extends filter {
45 } 45 }
46 ] 46 ]
47 } 47 }
48 fwCol() { 48 fwCol () {
49 return [ 49 return [
50 { 50 {
51 prop: 'zdymc', 51 prop: 'zdymc',
52 label: '幢号111', 52 label: '幢号',
53 }, 53 },
54 { 54 {
55 prop: 'hh', 55 prop: 'hh',
...@@ -85,7 +85,7 @@ class data extends filter { ...@@ -85,7 +85,7 @@ class data extends filter {
85 } 85 }
86 ] 86 ]
87 } 87 }
88 tdCol() { 88 tdCol () {
89 return [ 89 return [
90 { 90 {
91 prop: 'qsxz', 91 prop: 'qsxz',
...@@ -121,13 +121,13 @@ class data extends filter { ...@@ -121,13 +121,13 @@ class data extends filter {
121 } 121 }
122 ] 122 ]
123 } 123 }
124 diyaCol() { 124 diyaCol () {
125 return [ 125 return [
126 { 126 {
127 prop: 'dyfs', 127 prop: 'dyfs',
128 label: '抵押方式', 128 label: '抵押方式',
129 render: (h, scope) => { 129 render: (h, scope) => {
130 switch(scope.row.dyfs) { 130 switch (scope.row.dyfs) {
131 case '1': 131 case '1':
132 return <div>一般抵押</div> 132 return <div>一般抵押</div>
133 case '2': 133 case '2':
...@@ -161,7 +161,7 @@ class data extends filter { ...@@ -161,7 +161,7 @@ class data extends filter {
161 } 161 }
162 ] 162 ]
163 } 163 }
164 ygdjCol() { 164 ygdjCol () {
165 return [ 165 return [
166 { 166 {
167 prop: 'ygdjzl', 167 prop: 'ygdjzl',
...@@ -193,7 +193,7 @@ class data extends filter { ...@@ -193,7 +193,7 @@ class data extends filter {
193 } 193 }
194 ] 194 ]
195 } 195 }
196 cfdjCol() { 196 cfdjCol () {
197 return [ 197 return [
198 { 198 {
199 prop: 'cfjg', 199 prop: 'cfjg',
...@@ -217,7 +217,7 @@ class data extends filter { ...@@ -217,7 +217,7 @@ class data extends filter {
217 } 217 }
218 ] 218 ]
219 } 219 }
220 yydjCol() { 220 yydjCol () {
221 return [ 221 return [
222 { 222 {
223 prop: 'yysqr', 223 prop: 'yysqr',
......
...@@ -34,24 +34,22 @@ ...@@ -34,24 +34,22 @@
34 </el-form> 34 </el-form>
35 </div> 35 </div>
36 <!-- 表格 --> 36 <!-- 表格 -->
37 <div class="from-clues-content"> 37 <div class="from-clues-content loadingtext">
38 <lb-table :page-size="pageData.size" class="loadingtext" border @sort-change="handleSort" 38 <lb-table :page-size="pageData.size" border @sort-change="handleSort"
39 :current-page.sync="pageData.current" :total="tableData.total" @size-change="handleSizeChange" 39 :current-page.sync="pageData.current" :total="tableData.total" @size-change="handleSizeChange"
40 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data"> 40 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
41 </lb-table> 41 </lb-table>
42 </div> 42 </div>
43 <addDydjb v-model="isDialog" :sqcxBsm="sqcxBsm" />
44 </div> 43 </div>
45 </template> 44 </template>
46 <script> 45 <script>
47 import { mapGetters } from "vuex"; 46 import { mapGetters } from "vuex";
48 import table from "@/utils/mixin/table"; 47 import table from "@/utils/mixin/table";
48 import store from '@/store/index.js'
49 import { datas, sendThis } from "./dydjbdata"; 49 import { datas, sendThis } from "./dydjbdata";
50 import addDydjb from "./components/addDydjb.vue";
51 import { getSqcxPage } from "@/api/jtfc.js"; 50 import { getSqcxPage } from "@/api/jtfc.js";
52 export default { 51 export default {
53 name: "dydjb", 52 name: "dydjb",
54 components: { addDydjb },
55 mixins: [table], 53 mixins: [table],
56 mounted () { 54 mounted () {
57 sendThis(this); 55 sendThis(this);
...@@ -79,8 +77,21 @@ ...@@ -79,8 +77,21 @@
79 activated () { 77 activated () {
80 this.queryClick(); 78 this.queryClick();
81 }, 79 },
80 computed: {
81 workFresh () {
82 return store.state.user.workFresh
83 }
84 },
85 watch: {
86 workFresh: {
87 handler (newValue, oldValue) {
88 this.queryClick()
89 },
90 deep: true,
91 immediate: true
92 }
93 },
82 methods: { 94 methods: {
83 // 初始化数据
84 /** 95 /**
85 * @description: 初始化数据 96 * @description: 初始化数据
86 * @author: renchao 97 * @author: renchao
...@@ -102,8 +113,8 @@ ...@@ -102,8 +113,8 @@
102 * @author: renchao 113 * @author: renchao
103 */ 114 */
104 dydjbClick (scope) { 115 dydjbClick (scope) {
105 this.$popupDialog("打印登记薄", "sqcx/dydjb/components/dydjbInfo", { 116 this.$popupDialog("明细详情", "sqcx/dydjb/components/addDydjb", {
106 bsmSqcx: scope.row.bsmSqcx, 117 sqcxBsm: scope.row.bsmSqcx,
107 }) 118 })
108 }, 119 },
109 /** 120 /**
...@@ -120,8 +131,9 @@ ...@@ -120,8 +131,9 @@
120 * @author: renchao 131 * @author: renchao
121 */ 132 */
122 openAddDialog () { 133 openAddDialog () {
123 this.isDialog = true 134 this.$popupDialog("房屋明细查询", "sqcx/dydjb/components/addDydjb", {
124 this.sqcxBsm = '' 135 sqcxBsm: ''
136 })
125 } 137 }
126 }, 138 },
127 }; 139 };
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-11-15 16:28:13 4 * @LastEditTime: 2024-03-27 10:03:15
5 --> 5 -->
6 <template> 6 <template>
7 <div class="from-clues"> 7 <div class="from-clues">
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
109 }, '80%') 109 }, '80%')
110 }, 110 },
111 /** 111 /**
112 * @description: handleAdd 112 * @description: handleViewClick
113 * @param {*} row 113 * @param {*} row
114 * @author: renchao 114 * @author: renchao
115 */ 115 */
......
...@@ -167,8 +167,4 @@ ...@@ -167,8 +167,4 @@
167 /deep/.el-form-item { 167 /deep/.el-form-item {
168 margin-bottom: 0 !important; 168 margin-bottom: 0 !important;
169 } 169 }
170 .sqcxjlInfo {
171 max-height: 85vh;
172 overflow-y: scroll;
173 }
174 </style> 170 </style>
......
1 <!-- 1 <!--
2 * @Description:补充材料通知书 2 * @Description:补充材料通知书
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2024-02-26 09:04:04 4 * @LastEditTime: 2024-03-27 11:24:03
5 --> 5 -->
6 <template> 6 <template>
7 <div class="clmlmx-box"> 7 <div class="clmlmx-box">
...@@ -134,22 +134,20 @@ ...@@ -134,22 +134,20 @@
134 } 134 }
135 getPrintTemplateByCode({ tmpno: 'bdcdjbccltts' }).then(res => { 135 getPrintTemplateByCode({ tmpno: 'bdcdjbccltts' }).then(res => {
136 if (res.code === 200) { 136 if (res.code === 200) {
137 console.log("this.selectListssssssssss",this.selectList);
138 getPrintSupplementalMaterials(this.formData.bsmSldy, this.selectList).then(infoRes => { 137 getPrintSupplementalMaterials(this.formData.bsmSldy, this.selectList).then(infoRes => {
139 this.loading = false 138 this.loading = false
140 if (infoRes.code === 200) { 139 if (infoRes.code === 200) {
141 console.log("infoRes.resultsssssssssss",infoRes.result);
142 if (infoRes.result.fileList && infoRes.result.fileList.length > 0) { 140 if (infoRes.result.fileList && infoRes.result.fileList.length > 0) {
143 infoRes.result.fileList.forEach((it, index) => { 141 infoRes.result.fileList.forEach((it, index) => {
144 let key = index + 1 142 let key = index + 1
145 this.$set(infoRes.result, "file" + key, it.sjmc) 143 this.$set(infoRes.result, "file" + key, it.sjmc)
146 this.$set(infoRes.result, "file" + key + 'ys', it.ys) 144 this.$set(infoRes.result, "file" + key + 'ys', it.ys)
147 this.$set(infoRes.result, "file" + key + 'lx', it.sjlx==1?"原件":"复印件") 145 this.$set(infoRes.result, "file" + key + 'lx', it.sjlx == 1 ? "原件" : "复印件")
148 }) 146 })
149 } 147 }
150 infoRes.result.nownian = this.newDate.split(' ')[0].split('年')[0] 148 infoRes.result.nownian = this.newDate.split(' ')[0].split('年')[0]
151 infoRes.result.nowyue = this.newDate.slice(5,7) 149 infoRes.result.nowyue = this.newDate.slice(5, 7)
152 infoRes.result.nowri = this.newDate.slice(8,10) 150 infoRes.result.nowri = this.newDate.slice(8, 10)
153 let date = infoRes.result.sqrq 151 let date = infoRes.result.sqrq
154 infoRes.result.sqnian = date.split(' ')[0].split('-')[0] 152 infoRes.result.sqnian = date.split(' ')[0].split('-')[0]
155 infoRes.result.sqyue = date.split(' ')[0].split('-')[1] 153 infoRes.result.sqyue = date.split(' ')[0].split('-')[1]
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-10-24 17:18:02 4 * @LastEditTime: 2024-03-27 16:38:39
5 --> 5 -->
6 <template> 6 <template>
7 <div class="clxx"> 7 <div class="clxx">
...@@ -374,7 +374,7 @@ ...@@ -374,7 +374,7 @@
374 display: flex; 374 display: flex;
375 375
376 .menu-tree { 376 .menu-tree {
377 width: 20%; 377 width: 30%;
378 min-width: 160px; 378 min-width: 160px;
379 height: 100%; 379 height: 100%;
380 margin-right: 10px; 380 margin-right: 10px;
...@@ -405,7 +405,8 @@ ...@@ -405,7 +405,8 @@
405 border-radius: 6px; 405 border-radius: 6px;
406 line-height: 20px; 406 line-height: 20px;
407 transition: all 0.3s; 407 transition: all 0.3s;
408 padding: 8px 0; 408 padding: 3px 0;
409 word-wrap: break-word;
409 } 410 }
410 411
411 .child:hover { 412 .child:hover {
...@@ -421,7 +422,7 @@ ...@@ -421,7 +422,7 @@
421 } 422 }
422 423
423 .clyl-img { 424 .clyl-img {
424 width: 75%; 425 width: 70%;
425 height: 100%; 426 height: 100%;
426 background: #f3f4f7; 427 background: #f3f4f7;
427 margin: 0 auto; 428 margin: 0 auto;
......
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
100 }; 100 };
101 import store from '@/store/index.js' 101 import store from '@/store/index.js'
102 import { addQy, update, addYh } from "@/api/xxba.js" 102 import { addQy, update, addYh } from "@/api/xxba.js"
103 import clxx from './clxx/index.vue' 103 import clxx from '../../components/clxx/index.vue'
104 export default { 104 export default {
105 props: { 105 props: {
106 formData: { 106 formData: {
......
1 <template> 1 <template>
2 <div style="height:650px"> 2 <div style="height:650px">
3 <el-tabs v-model="activeName" @tab-click="handleClick"> 3 <el-tabs v-model="activeName" @tab-click="handleClick">
4 <el-tab-pane label="银行信息" name="1"></el-tab-pane> 4 <el-tab-pane label="企业信息" name="1"></el-tab-pane>
5 <el-tab-pane label="材料信息" v-if="formData.isAdd==2" name="2"></el-tab-pane> 5 <el-tab-pane label="材料信息" v-if="formData.isAdd==2" name="2"></el-tab-pane>
6 </el-tabs> 6 </el-tabs>
7 <el-form ref="ruleForm" :model="ruleForm" label-width="100px" style="height:90%" v-if="activeName==1" :rules="rules"> 7 <el-form ref="ruleForm" :model="ruleForm" label-width="100px" style="height:90%" v-if="activeName==1" :rules="rules">
8 <div style="height:90%"> 8 <div style="height:90%">
9 <el-row> 9 <el-row>
10 <el-col :span="12"> 10 <el-col :span="12">
11 <el-form-item label="银行名称:" prop="qymc"> 11 <el-form-item label="企业名称:" prop="qymc">
12 <el-input v-model="ruleForm.qymc"></el-input> 12 <el-input v-model="ruleForm.qymc"></el-input>
13 </el-form-item> 13 </el-form-item>
14 </el-col> 14 </el-col>
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
100 }; 100 };
101 import store from '@/store/index.js' 101 import store from '@/store/index.js'
102 import { addQy, update, addYh } from "@/api/xxba.js" 102 import { addQy, update, addYh } from "@/api/xxba.js"
103 import clxx from './clxx/index.vue' 103 import clxx from '../../components/clxx/index.vue'
104 export default { 104 export default {
105 props: { 105 props: {
106 formData: { 106 formData: {
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
149 ], 149 ],
150 rules: { 150 rules: {
151 qymc: [ 151 qymc: [
152 { required: true, message: '银行名称不能为空', trigger: 'blur' } 152 { required: true, message: '企业名称不能为空', trigger: 'blur' }
153 ], 153 ],
154 dh: [ 154 dh: [
155 { required: true, validator: checkPhone, trigger: ["blur"] }, 155 { required: true, validator: checkPhone, trigger: ["blur"] },
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-09-15 15:50:26
5 -->
6 <template>
7 <dialogBox title="新建材料信息" width="20%" isMain v-model="myValue" @closeDialog="closeDialog" @submitForm="handleSubmit"
8 :isFullscreen="false">
9 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
10 <el-row>
11 <el-col :span="24">
12 <el-form-item label="材料类型" prop="cllx">
13 <el-select v-model="ruleForm.cllx" class="width100" placeholder="请选择">
14 <el-option v-for="item in cllxList" :key="item.dcode" :label="item.dname" :value="item.dcode">
15 </el-option>
16 </el-select>
17 </el-form-item>
18 </el-col>
19 </el-row>
20 <el-row :gutter="20">
21 <el-col :span="24">
22 <el-form-item label="材料名称" prop="clmc">
23 <el-input v-model="ruleForm.clmc"></el-input>
24 </el-form-item>
25 </el-col>
26 </el-row>
27 <el-row :gutter="20">
28 <el-col :span="24">
29 <el-form-item label="材料编码" prop="clbm">
30 <el-input v-model="ruleForm.clbm"></el-input>
31 </el-form-item>
32 </el-col>
33 </el-row>
34 </el-form>
35 </dialogBox>
36 </template>
37 <script>
38 import store from '@/store/index.js'
39 export default {
40 props: {
41 value: { type: Boolean, default: false },
42 },
43 data () {
44 return {
45 cllxList: store.getters.dictData['A40'],
46 myValue: this.value,
47 ruleForm: {
48 cllx: "",
49 clmc: "",
50 clbm: ""
51 },
52 rules: {
53 cllx: [
54 { required: true, message: '请选择材料类型', trigger: 'change' }
55 ],
56 clmc: [
57 { required: true, message: '请输入材料名称', trigger: 'blur' }
58 ],
59 clbm: [
60 { required: true, message: '请输入材料编码', trigger: 'blur' }
61 ],
62 }
63 }
64 },
65 watch: {
66 value (val) {
67 this.myValue = val;
68 },
69 },
70 methods: {
71 /**
72 * @description: closeDialog
73 * @author: renchao
74 */
75 closeDialog () {
76 this.$emit("input", false);
77 this.ruleForm = {
78 cllx: "",
79 clmc: "",
80 }
81 },
82 /**
83 * @description: handleSubmit
84 * @author: renchao
85 */
86 handleSubmit () {
87 this.$refs['ruleForm'].validate((valid) => {
88 if (valid) {
89 this.$parent.addSave(this.ruleForm);
90 this.ruleForm = {
91 cllx: "",
92 clmc: "",
93 }
94 this.$emit("input", false);
95 } else {
96 return false;
97 }
98 })
99 }
100 }
101 };
102 </script>
103 <style scoped lang="scss">
104 .submit-button {
105 text-align: center;
106 height: 52px;
107 padding-top: 10px;
108 background-color: #fff;
109 }
110 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-09-15 15:38:53
5 -->
6 <template>
7 <div class="clmlmx-box">
8 <lb-table :column="column" :key="key" row-key="bsmMaterial" ref="listTable" :heightNumSetting="true" :calcHeight="500" :pagination="false"
9 :data="tableData">
10 </lb-table>
11 <div class="text-center">
12 <el-button @click="handleCancel">取消</el-button>
13 <el-button type="primary" @click="handleSubmit" :loading="loading">保存</el-button>
14 </div>
15 </div>
16 </template>
17 <script>
18 import store from '@/store/index.js'
19 import Sortable from 'sortablejs'
20 import { ywPopupCacel } from "@/utils/popup.js";
21 import { editCompanyMaterialList } from "@/api/company.js";
22 export default {
23 props: {
24 formData: {
25 type: Object,
26 default: () => {
27 return {}
28 }
29 }
30 },
31 data () {
32 return {
33 loading: false,
34 sortable: null,
35 column: [
36 {
37 label: "材料名称",
38 render: (h, scope) => {
39 return (
40 <el-input value={scope.row.clmc} onInput={(val) => { scope.row.clmc = val }}></el-input>
41 )
42 }
43 },
44 {
45 label: "材料编码",
46 render: (h, scope) => {
47 return (
48 <el-input value={scope.row.clbm} onInput={(val) => { scope.row.clbm = val }}></el-input>
49 )
50 }
51 },
52 {
53 label: "材料类型",
54 width: "110",
55 render: (h, scope) => {
56 return (
57 <el-select value={scope.row.cllx}
58 onChange={(val) => { scope.row.cllx = val }}>
59 {
60 store.getters.dictData['A40'].map(option => {
61 return (
62 <el-option label={option.dname} value={option.dcode}></el-option>
63 )
64 })
65 }
66 </el-select>
67 )
68 }
69 },
70 {
71 label: "页数",
72 width: "80",
73 render: (h, scope) => {
74 if (scope.row.count && scope.row.count > 0) {
75 return (
76 <div>
77 <span>{scope.row.count}</span>
78 </div>
79 );
80 } else {
81 return (
82 <div>
83 <span>0</span>
84 </div>
85 );
86 }
87 },
88 },
89 {
90 label: "操作",
91 width: "100",
92 render: (h, scope) => {
93 return (
94 <el-button
95 type="text"
96 icon="el-icon-delete"
97 disabled={scope.row.count != 0}
98 onClick={() => {
99 this.handleDelete(scope.$index, scope.row);
100 }}
101 >
102 删除
103 </el-button>
104 )
105 }
106 }
107 ],
108 key: 0,
109 tableData: []
110 }
111 },
112 mounted () {
113 this.initSort()
114 this.tableData = _.cloneDeep(this.formData.data)
115 },
116 beforeDestroy () {
117 if (this.sortable) {
118 this.sortable.destroy();
119 }
120 },
121 watch: {
122 'formData.data': {
123 handler: function (val, oldVal) {
124 this.tableData = _.cloneDeep(val)
125 },
126 immediate: true,
127 deep: true
128 }
129 },
130 methods: {
131 handleCancel () {
132 ywPopupCacel()
133 },
134 handleSubmit () {
135 this.loading = true
136 store.dispatch('user/reWorkFresh', false)
137 editCompanyMaterialList(this.tableData, this.formData.bsmCompany).then(res => {
138 this.loading = false
139 if (res.code == 200) {
140 this.$message({
141 message: '保存成功',
142 type: 'success'
143 })
144 store.dispatch('user/reWorkFresh', true)
145 ywPopupCacel()
146 }
147 }).catch(() => {
148 this.loading = false
149 })
150 },
151 /**
152 * @description: 材料目录删除
153 * @param {*} index
154 * @param {*} row
155 * @author: renchao
156 */
157 handleDelete (index, row) {
158 this.$confirm('此操作将永久删除该 是否继续?', '提示', {
159 confirmButtonText: '确定',
160 cancelButtonText: '取消',
161 type: 'warning'
162 }).then(() => {
163 this.tableData.splice(index, 1);
164 }).catch(() => {
165 this.$message({
166 type: 'info',
167 message: '已取消删除'
168 })
169 })
170 },
171 initSort () {
172 const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
173 this.sortable = Sortable.create(el, {
174 ghostClass: 'sortable-ghost',
175 setData: function (dataTransfer) {
176 dataTransfer.setData('Text', '')
177 },
178 onEnd: evt => {
179 const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
180 this.tableData.splice(evt.newIndex, 0, targetRow);
181 }
182 })
183 }
184 }
185 }
186 </script>
187 <style scoped lang='scss'>
188 @import "~@/styles/mixin.scss";
189 .clmlmx-box {
190 margin: 0 auto;
191 .title {
192 text-align: center;
193 height: 60px;
194 line-height: 60px;
195 border: 1px solid #dfe6ec;
196 font-size: 20px;
197 background: #81d3f81a;
198 margin-bottom: -1px;
199 }
200 }
201 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-12-15 14:42:21
5 -->
6 <template>
7 <div class="rlPopup">
8 <div class="prev handle-btn" v-if="!isScan" @click="prev()">
9 <i class="el-icon-arrow-left"></i>
10 </div>
11 <div class="next handle-btn" v-if="!isScan" @click="next()">
12 <i class="el-icon-arrow-right"></i>
13 </div>
14 <div class="img-list-wrap" v-Loading="loading">
15 <img id="photo" src="" v-show="isScan && this.BASE_API.gaopaiyi=='jy'" alt="高拍仪捷宇">
16 <img src="http://127.0.0.1:38088/video=stream&camidx=0" v-if="isScan && this.BASE_API.gaopaiyi=='lt'" alt="高拍仪良田">
17 <div v-for="(img, i) in previewImg.imgList" :key="i" v-else>
18 <photo-zoom :url="img.fileurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
19 overlayStyle="width: 100%;height:100%">
20 </photo-zoom>
21 </div>
22 </div>
23 <!--缩略图-->
24 <div class="thumb-wrap">
25 <div class="thumb-wrap-button">
26 <el-button type="primary" @click="clickImage" v-if="previewImg.imgList.length>0">（放大） 显示（缩小）</el-button>
27 <el-upload class="fileUpdate" ref="upload" :key="key" action="" :show-file-list="false" :multiple="true" :auto-upload="false"
28 :on-change="handleChange"
29 accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg">
30 <el-button icon="el-icon-upload" type="primary" :loading="upDateloading" v-if="ableOperation">上传</el-button>
31 </el-upload>
32 <!-- 左移右移 -->
33 <el-button type="primary" @click="handleMove('left')" v-if="ableOperation && thumbnailImages.length>0">左移</el-button>
34 <el-button type="primary" @click="handleMove('right')" v-if="ableOperation && thumbnailImages.length>0">右移</el-button>
35 <el-button type="primary" icon="el-icon-delete-solid" @click="handleDelete"
36 v-if="thumbnailImages.length>0 && ableOperation">删除</el-button>
37 <div v-if="ableOperation" class="pl-5">
38 <el-button type="primary" @click="handleOpenScan" v-if="ableOperation" :loading="loading">{{scanTitle}}</el-button>
39 <el-button type="primary" @click="handleViewScan" v-if="isScan && ableOperation">拍照</el-button>
40 </div>
41 </div>
42 <ul>
43 <li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active: previewImg.index === index }"
44 @click="showCurrent(index)">
45 <img :src="img.fileurl">
46 </li>
47 </ul>
48 </div>
49 <!-- 点开后的视图 -->
50 <publicPicture v-if="showViewer" :url-list="allLi" :initialIndex="initialIndex" @close-viewer="closeViewer">
51 </publicPicture>
52 </div>
53 </template>
54 <script>
55 import PhotoZoom from '@/components/PhotoZoom'
56 import { getAltimeterInfo, getUuid } from '@/utils/operation.js'
57 import { uploadBatch, deleteFile, move, uploadSjClmx } from "@/api/company.js"
58 import publicPicture from '@/components/publicPicture/index.vue'
59 export default {
60 name: 'PreviewImage',
61 props: {
62 previewImg: {
63 type: Object,
64 default: () => { }
65 },
66 ableOperation: {
67 type: Boolean,
68 default: true
69 }
70 },
71 components: {
72 PhotoZoom,
73 publicPicture
74 },
75 data () {
76 return {
77 upDateloading: false,
78 loading: false,
79 key: 0,
80 isScan: false,
81 // 打开高拍仪
82 scanTitle: '打开高拍仪',
83 transform: {
84 scale: 1,
85 degree: 0
86 },
87 maxFileLength: 0,
88 // 缩略图
89 thumbnailImages: [],
90 showViewer: false,
91 initialIndex: 0,
92 allLi: [],
93 webSocket: null
94 }
95 },
96 watch: {
97 previewImg: {
98 handler (newValue, oldValue) {
99 if (newValue.imgList && newValue.imgList.length > 0) {
100 this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fileurl)
101 this.thumbnailImages = newValue.imgList
102 } else {
103 this.allLi = []
104 this.thumbnailImages = []
105 }
106 },
107 deep: true,
108 immediate: true
109 }
110 },
111 created () {
112 this.maxLength = 0;
113 this.allLi = _.cloneDeep(this.previewImg.imgList).map(item => item.fjurl)
114 this.thumbnailImages = this.previewImg.imgList
115 },
116 computed: {
117 isFirst () {
118 return this.previewImg.index === 0
119 },
120 isLast () {
121 return this.previewImg.index === this.previewImg.imgList.length - 1
122 }
123 },
124 methods: {
125 /**
126 * @description: 打开高拍仪
127 * @author: renchao
128 */
129 handleOpenScan () {
130 let that = this
131 this.isScan = !this.isScan
132 if (this.isScan) {
133 this.loading = true
134 this.$message({
135 message: '正在启动程序请稍等',
136 type: 'success'
137 })
138 setTimeout(() => {
139 this.scanTitle = '关闭高拍仪'
140 this.loading = false
141 }, 3000)
142 } else {
143 this.scanTitle = '打开高拍仪'
144 }
145 if (this.BASE_API.gaopaiyi == 'jy') {
146 let webSocket = new WebSocket('ws://localhost:1818');
147 this.webSocket = webSocket
148 webSocket.onopen = function (event) {
149 webSocket.send('bStartPlay')
150 webSocket.send('vSetPreviewRect(1600,1200)')
151 }
152 webSocket.onmessage = function (event) {
153 let begin_data = "data:image/jpeg;base64,";
154 document.getElementById('photo').src = begin_data + event.data;
155 if (event.data.indexOf('BeginsGetBase64') >= 0) {
156 let blob = that.dataURLtoBlob('data:image/png;base64,' + event.data.replace('BeginsGetBase64', '').replace('EndsGetBase64', ''));
157 let file = that.blobToFile(blob);
158 var formData = new FormData();
159 formData.append('file', file)
160 if (that.previewImg.imgList.length > 0) {
161 formData.append("index", that.previewImg.imgList[that.previewImg.index].sxh);
162 }
163 uploadSjClmx(formData, that.previewImg.bsmMaterial).then((res) => {
164 if (res.code == 200) {
165 that.$emit('updateList', { children: res.result, bsmMaterial: that.previewImg.bsmMaterial })
166 that.$message({
167 message: '上传成功!',
168 type: 'success'
169 })
170 }
171 })
172 }
173 }
174 }
175 },
176 /**
177 * @description: 左右移动
178 * @param {*} direction
179 * @author: renchao
180 */
181 handleMove (direction) {
182 move(this.previewImg.imgList[this.previewImg.index].bsmFile, direction).then(res => {
183 if (res.code == 200) {
184 if (direction == 'left') {
185 this.previewImg.index = this.previewImg.index - 1
186 } else {
187 this.previewImg.index = this.previewImg.index + 1
188 }
189 this.initialIndex = this.previewImg.index
190 this.$emit('updateList', { children: res.result, bsmMaterial: this.previewImg.bsmMaterial })
191 this.$message({
192 message: '移动成功!',
193 type: 'success'
194 })
195 } else {
196 this.$message.error(res.message);
197 }
198 })
199 },
200 /**
201 * @description: 拍照
202 * @author: renchao
203 */
204 dataURLtoBlob (base64String) {
205 const arr = base64String.split(',');
206 if (arr.length !== 2) {
207 throw new Error('Invalid Base64 format');
208 }
209 const mime = arr[0].match(/:(.*?);/)[1];
210 if (!mime) {
211 throw new Error('Cannot retrieve MIME type');
212 }
213 const bstr = atob(arr[1]);
214 const n = bstr.length;
215 const u8arr = new Uint8Array(n);
216 for (let i = 0; i < n; i++) {
217 u8arr[i] = bstr.charCodeAt(i);
218 }
219 return new Blob([u8arr], { type: mime });
220 },
221 blobToFile (blob) {
222 let name = getUuid(8) + '.jpg'
223 const file = new File([blob], name);
224 return file;
225 },
226 handleViewScan () {
227 if (this.BASE_API.gaopaiyi == 'jy') {
228 this.webSocket.send('sGetBase64');
229 return
230 }
231 getAltimeterInfo().then(res => {
232 let blob = dataURLtoBlob('data:image/png;base64,' + res.data.photoBase64);
233 let file = blobToFile(blob);
234 var formData = new FormData();
235 formData.append('file', file)
236 if (this.previewImg.imgList.length > 0) {
237 formData.append("index", this.previewImg.imgList[this.previewImg.index].sxh);
238 }
239 uploadSjClmx(formData, this.previewImg.bsmMaterial).then((res) => {
240 if (res.code == 200) {
241 this.$emit('updateList', { children: res.result, bsmMaterial: this.previewImg.bsmMaterial })
242 this.$message({
243 message: '上传成功!',
244 type: 'success'
245 })
246 }
247 })
248 })
249 },
250 /**
251 * @description: prev
252 * @author: renchao
253 */
254 prev () {
255 let len = this.previewImg.imgList.length
256 if (this.isFirst || len == 0) {
257 this.$emit('prevPriview')
258 } else {
259 this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
260 }
261 },
262 /**
263 * @description: next
264 * @author: renchao
265 */
266 next () {
267 let len = this.previewImg.imgList.length
268 if (this.isLast || len == 0) {
269 this.$emit('nextPriview')
270 } else {
271 this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
272 }
273 },
274 /**
275 * @description: showCurrent
276 * @param {*} index
277 * @author: renchao
278 */
279 showCurrent (index) {
280 this.previewImg.index = index
281 this.initialIndex = index
282 },
283 /**
284 * @description: closeViewer
285 * @author: renchao
286 */
287 closeViewer () {
288 this.showViewer = false
289 },
290 /**
291 * @description: clickImage
292 * @author: renchao
293 */
294 clickImage () {
295 this.showViewer = true
296 },
297 /**
298 * @description: handleChange
299 * @param {*} file
300 * @param {*} files
301 * @author: renchao
302 */
303 async handleChange (file, fileList) {
304 let length = fileList.length;
305 this.maxFileLength = Math.max(length, this.maxFileLength)
306 var formData = new FormData();
307 setTimeout(() => {
308 if (this.maxFileLength !== length) {
309 return
310 }
311 let num = 0, max = 0;
312 const isLt5M = file.size / 1024 / 1024 < 5;
313 fileList.forEach(item => {
314 if (!isLt5M) {
315 max++
316 }
317 if (!['image/jpeg', 'image/png', 'image/jpg', 'image/gif'].includes(item.raw.type)) {
318 num++
319 } else {
320 formData.append('file', item.raw)
321 }
322 })
323 if (num >= 1) {
324 this.$message.error("请选择jpeg/png/jpg/bmp/gif格式的图片后重试")
325 // 移除不支持的文件类型
326 this.key++
327 return;
328 }
329 if (max >= 1) {
330 this.$message.error('上传图片大小不能超过 5MB!');
331 this.key++
332 return;
333 }
334 this.upDateloading = true
335 formData.append("bsmMaterial", this.previewImg.bsmMaterial);
336 if (this.previewImg.imgList.length > 0) {
337 formData.append("index", this.previewImg.imgList[this.previewImg.index].sxh);
338 }
339 uploadBatch(formData).then((res) => {
340 if (res.code == 200) {
341 this.$emit('updateList', { children: res.result, bsmMaterial: this.previewImg.bsmMaterial })
342 this.$message({
343 message: '上传成功!',
344 type: 'success'
345 })
346 this.upDateloading = false
347 this.$refs.upload.clearFiles();
348 this.maxFileLength = 0
349 }
350 })
351 }, 0)
352 },
353 /**
354 * @description: handleDelete
355 * @author: renchao
356 */
357 handleDelete () {
358 let that = this
359 this.$confirm('此操作将永久删除, 是否继续?', '提示', {
360 confirmButtonText: '确定',
361 cancelButtonText: '取消',
362 type: 'warning'
363 }).then(async () => {
364 let bsmFile = this.previewImg.imgList[this.previewImg.index].bsmFile
365 let bsmMaterial = this.previewImg.imgList[this.previewImg.index].bsmMaterial
366 this.previewImg.imgList = this.previewImg.imgList.filter(item => item.bsmFile != bsmFile)
367 deleteFile(bsmFile).then(res => {
368 if (res.code == 200) {
369 that.$emit('updateList', { children: this.previewImg.imgList, bsmMaterial: bsmMaterial })
370 that.initialIndex = that.previewImg.index
371 that.$message({
372 message: '删除成功!',
373 type: 'success'
374 })
375 }
376 })
377 }).catch(() => {
378 this.$message({
379 type: 'info',
380 message: '已取消删除'
381 })
382 })
383 }
384 }
385 }
386 </script>
387 <style lang="scss" scoped>
388 // 查看大图
389 .rlPopup {
390 position: relative;
391 width: 100%;
392 text-align: center;
393 height: 100%;
394
395 .handle-btn {
396 position: absolute;
397 top: 50%;
398 transform: translateY(-100%);
399 width: 66px;
400 height: 66px;
401 line-height: 75px;
402 color: #fff;
403 background-color: #ccc;
404 border-radius: 50%;
405 cursor: pointer;
406 text-align: center;
407 transition: all 0.3s;
408
409 i {
410 font-size: 24px;
411 }
412 }
413
414 .handle-btn:hover {
415 background-color: rgb(185, 183, 183);
416 }
417
418 .prev {
419 left: 1%;
420 }
421
422 .next {
423 right: 1%;
424 }
425
426 .img-list-wrap {
427 width: 100%;
428 display: flex;
429 justify-content: center;
430 height: calc(100% - 80px);
431 align-items: center;
432 background: rgba(194, 190, 190, 0.1);
433 overflow: scroll;
434
435 img {
436 display: block;
437 object-fit: scale-down;
438 transition: all 0.3s;
439 width: 100%;
440 height: 100%;
441 }
442 }
443
444 .thumb-wrap {
445 &-button {
446 display: flex;
447 justify-content: center;
448
449 .fileUpdate {
450 margin: 0 10px;
451 }
452 }
453
454 li {
455 float: left;
456 width: 60px;
457 height: 45px;
458 border: solid 1px #ececec;
459 position: relative;
460 margin-right: 5px;
461 cursor: pointer;
462
463 &:last-child {
464 margin-right: 0;
465 }
466
467 img {
468 max-width: 57px;
469 max-height: 42px;
470 display: block;
471 object-fit: scale-down;
472 position: absolute;
473 top: 50%;
474 left: 50%;
475 transform: translate(-50%, -50%);
476 }
477 }
478
479 .active {
480 border-color: #409eff;
481 }
482 }
483 }
484 </style>
485 <style>
486 .zoom-on-hover {
487 position: relative;
488 overflow: hidden;
489 }
490
491 .zoom-on-hover .normal {
492 width: 100%;
493 }
494
495 .zoom-on-hover .zoom {
496 position: absolute;
497 opacity: 0;
498 transform-origin: top left;
499 }
500
501 .zoom-on-hover.zoomed .zoom {
502 opacity: 1;
503 }
504
505 .zoom-on-hover.zoomed .normal {
506 opacity: 0;
507 }
508 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-10-24 17:18:02
5 -->
6 <template>
7 <div class="clxx">
8 <div class="right">
9 <!-- 材料预览 -->
10 <div class="clyl-box">
11 <div class="menu-tree">
12 <el-button
13 type="primary"
14 native-type="submit"
15 @click="viewDetail"
16 style="width: 100%; margin-top: 10px" v-if="tableData.length > 0">申请材料目录</el-button>
17 <div class="item">
18 材料目录({{ tableData.length }})
19 <div style="margin-top: 10px">
20 <div
21 style="
22 text-align: center;
23 line-height: 20px;
24 color: black;
25 font-size: 14px;
26 "
27 v-if="tableData.length == 0">
28 暂无数据
29 </div>
30 <div
31 v-for="(item, index) in tableData"
32 :key="item.bsmMaterial"
33 :class="['child', treeCheckId == item.bsmMaterial ? 'checked' : '']"
34 @click="treeClick(item, index)">
35 {{ item.clmc }}
36 <span class="cl_number" :key="key" v-if="item.count">({{ item.count }})</span>
37 <span class="cl_number" :key="key" v-else>(0)</span>
38 </div>
39 </div>
40 </div>
41 <el-button
42 type="primary"
43 native-type="submit"
44 style="width: 100%"
45 @click="handleAdd()">新增</el-button>
46 </div>
47 <image-preview
48 ref="imageRef"
49 :key="imgKey"
50 v-if="tableData.length > 0"
51 :previewImg="previewImg"
52 @updateList="updateList"
53 @nextPriview="nextPriview"
54 @prevPriview="prevPriview" />
55 </div>
56 </div>
57 <clxxAddDialog v-model="isDialog" />
58 </div>
59 </template>
60 <script>
61 import store from '@/store/index.js'
62 import { ywPopupDialog } from "@/utils/popup.js";
63 import imagePreview from "./dialog/imagePreview.vue";
64 import clxxAddDialog from "./dialog/clxxAddDialog.vue";
65 import clxxDetailDialog from "./dialog/clxxDetailDialog.vue";
66 import { getCompanyMaterialList, addCompanyMaterial, getFileListByBsmMaterial } from "@/api/company.js";
67 export default {
68 components: { clxxAddDialog, imagePreview, clxxDetailDialog },
69 props: {
70 formData: {
71 type: Object,
72 default: () => {
73 return {}
74 }
75 }
76 },
77 data () {
78 return {
79 imgKey: 0,
80 isDialog: false,
81 iclass: "",
82 // 材料目录选中
83 treeCheckIndex: 0,
84 treeCheckId: "",
85 key: 0,
86 tableData: [],
87 previewImg: {
88 bsmMaterial: "",
89 index: 0,
90 selectedIndex: 0,
91 imgList: []
92 }
93 }
94 },
95 computed: {
96 workFresh () {
97 return store.state.user.workFresh
98 }
99 },
100 watch: {
101 workFresh: {
102 handler (newValue, oldValue) {
103 this.clmlInitList(1)
104 },
105 deep: true,
106 immediate: true
107 }
108 },
109 created () {
110 this.clmlInitList(1)
111 },
112 methods: {
113 /**
114 * @description: 自动预览
115 * @author: renchao
116 */
117 nextPriview () {
118 if (this.treeCheckIndex < this.tableData.length) {
119 this.treeCheckIndex++;
120 if (this.tableData[this.treeCheckIndex]) {
121 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
122 // 判断页数
123 let ys = this.tableData[this.treeCheckIndex].ys
124 this.previewImg.index = 0;
125 // 获取材料明细
126 if (ys > 0) {
127 getFileListByBsmMaterial(this.treeCheckId).then(res => {
128 this.previewImg.imgList = res.result ? res.result : []
129 })
130 } else {
131 this.previewImg.imgList = []
132 }
133 this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
134 } else {
135 this.$message.error('没有最后一张了');
136 }
137 }
138 },
139 /**
140 * @description: prevPriview
141 * @author: renchao
142 */
143 prevPriview () {
144 if (this.treeCheckIndex >= 1) {
145 this.treeCheckIndex--;
146 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
147 // 判断页数
148 let ys = this.tableData[this.treeCheckIndex].ys
149 if (ys > 0) {
150 getFileListByBsmMaterial(this.treeCheckId).then(res => {
151 this.previewImg.imgList = res.result ? res.result : []
152 this.previewImg.index = this.previewImg.imgList.length - 1;
153 })
154 } else {
155 this.previewImg.imgList = [];
156 this.previewImg.index = 0
157 }
158 this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
159 } else {
160 this.$message.error('没有第一张了');
161 }
162 },
163 /**
164 * @description: 材料目录明细初始化
165 * @param {*} type
166 * @author: renchao
167 */
168 clmlInitList (type) {
169 // 1：列表初始化 2：新增材料
170 return new Promise((resolve) => {
171 getCompanyMaterialList(this.formData.bsmCompany).then((res) => {
172 if (res.code == 200) {
173 resolve(res.code);
174 if (res.result && res.result.length > 0) {
175 this.tableData = res.result;
176 if (type == 1) {
177 this.treeClick(this.tableData[0], 0);
178 } else if (type == 2) {
179 //新增材料后刷新列表焦点置于新增的对象上
180 this.treeClick(
181 this.tableData[this.tableData.length - 1],
182 this.tableData.length - 1
183 );
184 }
185 }
186 } else {
187 this.$message.error(res.message);
188 }
189 })
190 })
191 },
192 /**
193 * @description: setChecked
194 * @param {*} item
195 * @author: renchao
196 */
197 setChecked (item) {
198 this.treeCheckId = item.bsmMaterial;
199 this.title = item.sjmc;
200 this.titleYs = 1;
201 this.titleNum = item.children.length;
202 this.previewImg.imgList = item.children;
203 this.previewImg.bsmMaterial = item.bsmMaterial;
204 },
205 /**
206 * @description: updateList
207 * @param {*} val
208 * @author: renchao
209 */
210 updateList (val) {
211 let that = this;
212 if (val.children.length != 0) {
213 //删除最后一张图片时 val=null
214 this.tableData.forEach((item) => {
215 if (item.bsmMaterial == val.bsmMaterial) {
216 item.count = val.children.length
217 }
218 });
219 this.previewImg.imgList = _.cloneDeep(val.children);
220 if (this.previewImg.index == this.previewImg.imgList.length) {
221 this.previewImg.index = this.previewImg.index - 1;
222 }
223 this.key++
224 } else {
225 this.previewImg.imgList = [];
226 this.tableData.forEach((item, index) => {
227 if (this.treeCheckId == item.bsmMaterial) {
228 item.count = 0;
229 that.treeCheckIndex = index;
230 }
231 })
232 }
233 },
234 /**
235 * @description: 添加材料目录
236 * @author: renchao
237 */
238 handleAdd () {
239 this.isDialog = true;
240 },
241 /**
242 * @description: 新增弹窗保存
243 * @param {*} data
244 * @author: renchao
245 */
246 addSave (data) {
247 let obj = {
248 bsmCompany: this.formData.bsmCompany,
249 clmc: data.clmc,
250 cllx: data.cllx
251 };
252 addCompanyMaterial(obj).then(async (res) => {
253 if (res.code == 200) {
254 let res = await this.clmlInitList(2);
255 if (res == 200)
256 this.$message({
257 message: "新增成功",
258 type: "success"
259 })
260 }
261 })
262 },
263 /**
264 * @description: 材料目录点击选中
265 * @param {*} item
266 * @param {*} index
267 * @author: renchao
268 */
269 treeClick (item, index) {
270 this.previewImg.index = 0;
271 this.treeCheckId = item?.bsmMaterial;
272 this.treeCheckIndex = index;
273 getFileListByBsmMaterial(item.bsmMaterial).then(res => {
274 this.previewImg.imgList = res.result ? res.result : []
275 })
276 this.previewImg.bsmMaterial = item?.bsmMaterial;
277 if (this.$refs.imageRef) {
278 this.$refs.imageRef.initialIndex = 0
279 }
280 this.imgKey++
281 },
282 /**
283 * @description: 小图片点击
284 * @param {*} item
285 * @param {*} index
286 * @author: renchao
287 */
288 imgClick (item, index) {
289 this.showImg = item;
290 this.titleYs = index + 1;
291 },
292 //查看明细
293 async viewDetail () {
294 await this.clmlInitList();
295 store.dispatch("user/reWorkFresh", false);
296 ywPopupDialog("申请材料目录", "xxba/components/clxx/dialog/clxxDetailDialog", {
297 data: this.tableData,
298 bsmCompany: this.formData.bsmCompany
299 }, "60%", true, false)
300 },
301 //设置tableData
302 setTableData (tableData) {
303 this.$nextTick((res) => {
304 this.tableData = tableData;
305 })
306 }
307 }
308 }
309 </script>
310 <style scoped lang="scss">
311 @import "~@/styles/mixin.scss";
312 .active {
313 background: $light-blue !important;
314 color: #fff;
315 }
316
317 .required {
318 font-size: 12px;
319 color: $pink;
320 float: left;
321 }
322
323 .cl_number {
324 float: right;
325 }
326
327 .clxx {
328 width: 100%;
329 height: 94%;
330 display: flex;
331 padding-left: 5px;
332 .left {
333 display: flex;
334 flex-direction: column;
335 justify-content: space-between;
336
337 .item {
338 width: 28px;
339 height: 49%;
340 @include flex-center;
341 background-color: #e4e7ed;
342 border-bottom-right-radius: 10px;
343 padding: 5px;
344 cursor: pointer;
345 transition: all 0.3s;
346
347 &:hover {
348 @extend .active;
349 }
350 }
351 }
352
353 .right {
354 width: 100%;
355 height: 100%;
356
357 .clmlmx-box {
358 margin: 0 auto;
359
360 .title {
361 text-align: center;
362 height: 60px;
363 line-height: 60px;
364 border: 1px solid #dfe6ec;
365 font-size: 20px;
366 background: #81d3f81a;
367 margin-bottom: -1px;
368 }
369 }
370
371 .clyl-box {
372 width: 100%;
373 height: 100%;
374 display: flex;
375
376 .menu-tree {
377 width: 20%;
378 min-width: 160px;
379 height: 100%;
380 margin-right: 10px;
381 border-right: 1px dotted #d9d9d9;
382 padding: 0 15px;
383
384 .item {
385 line-height: 30px;
386 padding-top: 5px;
387 border-bottom: 1px solid #e8e8e8;
388 font-size: 16px;
389 text-align: center;
390 color: $light-blue;
391
392 .itemIcon {
393 float: right;
394 line-height: 60px;
395 cursor: pointer;
396 }
397
398 .child {
399 line-height: 32px;
400 border-bottom: 1px solid #e8e8e8;
401 padding-left: 10px;
402 color: #6b6b6b;
403 cursor: pointer;
404 box-sizing: border-box;
405 border-radius: 6px;
406 line-height: 20px;
407 transition: all 0.3s;
408 padding: 8px 0;
409 }
410
411 .child:hover {
412 color: $light-blue;
413 transform: scale(1.1);
414 }
415
416 .checked {
417 border: 1px solid $light-blue;
418 color: $light-blue;
419 }
420 }
421 }
422
423 .clyl-img {
424 width: 75%;
425 height: 100%;
426 background: #f3f4f7;
427 margin: 0 auto;
428 position: relative;
429 }
430 }
431 }
432 }
433 </style>