Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
2d3f7fe3 by renchao@pashanhoo.com
Options

style:企业银行

1 parent 7bd46e67
Inline Side-by-side
Showing 13 changed files with 1573 additions and 7 deletions
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
106 * @author: renchao 106 * @author: renchao
107 */ 107 */
108 handleAdd () { 108 handleAdd () {
109 this.$popupDialog("添加企业", "xxba/components/addDialog", { isAdd: 1 }, "75%") 109 this.$popupDialog("添加企业", "xxba/qyxxba/components/addDialog", { isAdd: 1 }, "75%")
110 }, 110 },
111 /** 111 /**
112 * @description: handleDelete 112 * @description: handleDelete
......
1 <template>
2 <div style="height:650px">
3 <el-tabs v-model="activeName" @tab-click="handleClick">
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>
6 </el-tabs>
7 <el-form ref="ruleForm" :model="ruleForm" label-width="100px" style="height:90%" v-if="activeName==1" :rules="rules">
8 <div style="height:90%">
9 <el-row>
10 <el-col :span="12">
11 <el-form-item label="银行名称:" prop="qymc">
12 <el-input v-model="ruleForm.qymc"></el-input>
13 </el-form-item>
14 </el-col>
15 <el-col :span="12">
16 <el-form-item label="电话:" prop="dh">
17 <el-input v-model.number="ruleForm.dh" maxlength="11"></el-input>
18 </el-form-item>
19 </el-col>
20 </el-row>
21 <el-row>
22 <el-col :span="12">
23 <el-form-item label="证件种类:" prop="zjzl">
24 <el-select
25 clearable
26 v-model="ruleForm.zjzl"
27 class="width100"
28 placeholder="请选择">
29 <el-option
30 v-for="item in zjzlList"
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-col :span="12">
39 <el-form-item label="证件号:" prop="zjh">
40 <el-input v-model="ruleForm.zjh" maxlength="18"></el-input>
41 </el-form-item>
42 </el-col>
43 </el-row>
44
45 <el-row>
46 <el-col :span="12">
47 <el-form-item label="法人名称:" prop="frmc">
48 <el-input v-model="ruleForm.frmc"></el-input>
49 </el-form-item>
50 </el-col>
51 <el-col :span="12">
52 <el-form-item label="法人电话:" prop="frdh">
53 <el-input v-model="ruleForm.frdh" maxlength="11"></el-input>
54 </el-form-item>
55 </el-col>
56 </el-row>
57 <el-row>
58 <el-col :span="12">
59 <el-form-item label="单位地址:" prop="dwdz">
60 <el-input v-model="ruleForm.dwdz"></el-input>
61 </el-form-item>
62 </el-col>
63 <el-col :span="12">
64 <el-form-item label="邮编:" prop="yb">
65 <el-input v-model="ruleForm.yb"></el-input>
66 </el-form-item>
67 </el-col>
68 </el-row>
69 </div>
70 <el-form-item style="text-align:center">
71 <el-button @click="closeDialog">取消</el-button>
72 <el-button type="primary" @click="submitForm">保存</el-button>
73 </el-form-item>
74 </el-form>
75 <clxx v-if="activeName==2" :formData="formData" />
76 </div>
77 </template>
78
79 <script>
80 const checkPhone = (rule, value, callback) => {
81 let regPone = null
82 let mobile = /^(1[3456789]\d{9})$/ //手机号
83 let tel = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/ // 座机
84 if (value && value[0] === '0') {// 检查 value 是否存在并且不是 null 或者 undefined
85 regPone = tel
86 } else if (value && value[0] !== '0') {
87 regPone = mobile
88 }
89 if (regPone === null) {
90 return callback(
91 new Error('请输入电话')
92 )
93 } else if (!regPone.test(value)) {
94 return callback(
95 new Error("请输入正确的电话格式,其中座机格式'区号-座机号码'")
96 )
97 } else {
98 callback()
99 }
100 };
101 import store from '@/store/index.js'
102 import { addQy, update } from "@/api/xxba.js"
103 import clxx from './clxx/index.vue'
104 export default {
105 props: {
106 formData: {
107 type: Object,
108 default: () => { },
109 },
110 },
111 components: {
112 clxx
113 },
114 data () {
115 return {
116 zjzlList: store.getters.dictData['A30'],
117 activeName: "1",
118 DJJGLIST: store.getters.dictData['ywly'],
119 readOnly: false,
120 //表单提交数据
121 ruleForm: {
122 batchno: '',
123 djjg: '',
124 operationtime: '',
125 bz: '',
126 zsstarno: '',
127 zsendno: '',
128 zsnum: '',
129 zmstarno: '',
130 zmendno: '',
131 zmnum: ''
132 },
133 //表格数据
134 tableForm: [
135 {
136 name: '不动产权证书',
137 ksysxlh: '',
138 jsysxlh: '',
139 bs: 0,
140 zslx: 1
141 },
142 {
143 name: '不动产登记证明',
144 ksysxlh: '',
145 jsysxlh: '',
146 bs: 0,
147 zslx: 2
148 }
149 ],
150 rules: {
151 qymc: [
152 { required: true, message: '企业名称不能为空', trigger: 'blur' }
153 ],
154 dh: [
155 { required: true, validator: checkPhone, trigger: ["blur"] },
156 ],
157 zjzl: [
158 { required: true, message: '请选择证件种类', trigger: 'change' }
159 ],
160 zjh: [
161 { required: true, message: '请输入证件号', trigger: 'blur' }
162 ],
163 frmc: [
164 { required: true, message: '请输入法人名称', trigger: 'blur' }
165 ],
166 frdh: [
167 { required: true, validator: checkPhone, trigger: ["blur"] },
168 ],
169 dwdz: [
170 { required: true, message: '请输入单位地址', trigger: 'blur' }
171 ]
172 }
173 }
174 },
175 mounted () {
176 if (this.formData.bsmBatch) {
177 this.tableForm[0].bs = null;
178 this.tableForm[1].bs = null;
179 this.getDetailInfo(this.formData.bsmBatch)
180 }
181 let list = Object.keys(this.formData).length
182 if (list > 0) {
183 this.ruleForm = this.formData
184 }
185 },
186 methods: {
187 handleClick () { },
188 /**
189 * @description: 表单提交
190 * @author: renchao
191 */
192 submitForm () {
193 let that = this
194 this.tableForm.forEach((item, index) => {
195 if (item.bs < 0) {
196 return;
197 }
198 })
199 if (this.formData.isAdd != 1) {
200 store.dispatch("user/refreshPage", false);
201 update(this.ruleForm).then(res => {
202 if (res.code == 200) {
203 this.$message.success('保存成功')
204 this.$emit("input", false);
205 this.$refs['ruleForm'].resetFields();
206 this.resetTableFields();
207 this.closeDialog();
208 //刷新列表
209 store.dispatch("user/refreshPage", true);
210 } else {
211 this.$message.error(res.message);
212 }
213 })
214 } else {
215 that.$refs['ruleForm'].validate((valid) => {
216 if (valid) {
217 store.dispatch("user/refreshPage", false);
218 addQy(this.ruleForm).then(res => {
219 if (res.code == 200) {
220 that.$message.success('保存成功')
221 that.$emit("input", false);
222 that.$refs['ruleForm'].resetFields();
223 that.resetTableFields();
224 that.closeDialog();
225 //刷新列表
226 store.dispatch("user/refreshPage", true);
227 } else {
228 that.$message.error(res.message);
229 }
230 })
231 } else {
232 this.$message.error('请完善表单');
233 return false;
234 }
235 })
236 }
237 },
238 /**
239 * @description: 获取详情信息
240 * @param {*} bsmBatch
241 * @author: renchao
242 */
243 getDetailInfo (bsmBatch) {
244 getZsglInfo({ "bsmBatch": bsmBatch }).then(res => {
245 if (res.code == 200) {
246 this.ruleForm = res.result;
247 this.readOnly = false;
248 this.tableForm[0].ksysxlh = res.result.zsstarno;
249 this.tableForm[0].jsysxlh = res.result.zsendno;
250 this.tableForm[0].bs = res.result.zsnum;
251 this.tableForm[1].ksysxlh = res.result.zmstarno;
252 this.tableForm[1].jsysxlh = res.result.zmendno;
253 this.tableForm[1].bs = res.result.zmnum;
254 }
255 })
256 },
257 /**
258 * @description: resetTableFields
259 * @author: renchao
260 */
261 resetTableFields () {
262 this.tableForm = [
263 {
264 name: '不动产权证书',
265 ksysxlh: '',
266 jsysxlh: '',
267 bs: 0,
268 zslx: 1
269 },
270 {
271 name: '不动产权登记证明',
272 ksysxlh: '',
273 jsysxlh: '',
274 bs: 0,
275 zslx: 2
276 }
277 ]
278 },
279 /**
280 * @description: closeDialog
281 * @author: renchao
282 */
283 closeDialog () {
284 this.$popupCacel()
285 this.$refs['ruleForm'].resetFields();
286 this.resetTableFields();
287 }
288 }
289 }
290 </script>
291 <style scoped lang="scss">
292 @import "~@/styles/mixin.scss";
293 @import "~@/styles/dialogBoxheader.scss";
294
295 .font-red {
296 color: red;
297 }
298
299 .middle-margin-bottom {
300 margin-top: 20px;
301 }
302 </style>
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>
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-11-10 13:43:21 4 * @LastEditTime: 2024-01-17 08:55:41
5 --> 5 -->
6 <template> 6 <template>
7 <div class="from-clues"> 7 <div class="from-clues">
...@@ -54,13 +54,14 @@ ...@@ -54,13 +54,14 @@
54 this.queryClick() 54 this.queryClick()
55 }, 55 },
56 computed: { 56 computed: {
57 ...mapGetters(['workFresh']) 57 ...mapGetters(['isRefresh'])
58 }, 58 },
59 watch: { 59 watch: {
60 workFresh: { 60 isRefresh: {
61 handler (newVal, oldVal) { 61 handler (newVal, oldVal) {
62 if (newVal) this.queryClick() 62 if (newVal) this.queryClick()
63 } 63 },
64 immediate: true
64 } 65 }
65 }, 66 },
66 data () { 67 data () {
...@@ -105,7 +106,7 @@ ...@@ -105,7 +106,7 @@
105 * @author: renchao 106 * @author: renchao
106 */ 107 */
107 handleAdd () { 108 handleAdd () {
108 this.$popupDialog("添加银行", "xxba/components/addDialog", { isAdd: 1 }, "75%") 109 this.$popupDialog("添加银行", "xxba/yhjgba/components/addDialog", { isAdd: 1 }, "75%")
109 }, 110 },
110 /** 111 /**
111 * @description: handleDelete 112 * @description: handleDelete
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-10-24 15:00:35 4 * @LastEditTime: 2024-01-17 08:43:05
5 --> 5 -->
6 <template> 6 <template>
7 <div class="from-clues"> 7 <div class="from-clues">
...@@ -183,6 +183,17 @@ ...@@ -183,6 +183,17 @@
183 } 183 }
184 }, 184 },
185 methods: { 185 methods: {
186 resetForm () {
187 this.queryzrzForm = {
188 zddm: '',
189 bdcqzh: '',
190 zl: '',
191 zrzh: '',
192 xmmc: '',
193 jzwmc: ''
194 }
195 this.queryClick()
196 },
186 /** 197 /**
187 * @description: queryClick 198 * @description: queryClick
188 * @author: renchao 199 * @author: renchao
......