Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
e530fb71 by 蔡俊立
Options

材料信息

1 parent 2e4dc723
Inline Side-by-side
Showing 7 changed files with 753 additions and 3 deletions
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
19 <el-button type="primary" @click="clickImage">（放大） 显示（缩小）</el-button> 19 <el-button type="primary" @click="clickImage">（放大） 显示（缩小）</el-button>
20 <el-upload class="fileUpdate" action="" :show-file-list="false" multiple :auto-upload="false" 20 <el-upload class="fileUpdate" action="" :show-file-list="false" multiple :auto-upload="false"
21 :on-change="handleChange" accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :before-upload="beforeUpload"> 21 :on-change="handleChange" accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :before-upload="beforeUpload">
22 <el-button icon="el-icon-upload" type="primary">上传</el-button> 22 <el-button icon="el-icon-upload" type="primary" v-if="!this.$route.query.viewtype">上传</el-button>
23 </el-upload> 23 </el-upload>
24 <el-button type="primary" icon="el-icon-delete-solid" @click="handleDelete">删除</el-button> 24 <el-button type="primary" icon="el-icon-delete-solid" @click="handleDelete" v-if="!this.$route.query.viewtype">删除</el-button>
25 </div> 25 </div>
26 <ul> 26 <ul>
27 <li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active: previewImg.index === index }" 27 <li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active: previewImg.index === index }"
......
...@@ -49,6 +49,10 @@ export default { ...@@ -49,6 +49,10 @@ export default {
49 methods: { 49 methods: {
50 closeDialog () { 50 closeDialog () {
51 this.$emit("input", false); 51 this.$emit("input", false);
52 this.ruleForm = {
53 cllx: "",
54 clmc: "",
55 }
52 }, 56 },
53 handleSubmit () { 57 handleSubmit () {
54 this.$parent.addSave(this.ruleForm); 58 this.$parent.addSave(this.ruleForm);
......
1 <template>
2 <dialogBox title="材料明细" width="60%" v-model="value" @closeDialog="closeDialog" :isButton="false">
3 <div class="clxx">
4 <div class="right">
5 <!-- 材料目录明细 -->
6 <div class="clmlmx-box">
7 <div class="title">申请材料目录</div>
8 <lb-table :column="column" :key="key" :heightNum="150" :pagination="false" :data="data">
9 </lb-table>
10 </div>
11 </div>
12 </div>
13 </dialogBox>
14 </template>
15 <script>
16 import { mapGetters } from "vuex";
17 import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js";
18 export default {
19 components: { },
20 props: {
21 value: { type: Boolean, default: false },
22 data: { type: Array, default: () => {} },
23 },
24 data () {
25 return {
26 isDialog: false,
27 iclass: "",
28 column: [
29 {
30 width: "50",
31 renderHeader: (h, scope) => {
32 return (
33 <div>
34 {
35 ''
36 }
37 </div>
38 )
39 },
40 render: (h, scope) => {
41 return (
42 <div>
43 {
44 this.$route.query.viewtype || scope.row.sfxjcl == '0' ? <span>{}</span> :
45 <i class="el-icon-minus pointer"
46 onClick={() => {
47 this.handleDelete(scope.$index, scope.row);
48 }}
49 ></i>
50 }
51 </div>
52 )
53 }
54 },
55 {
56 width: "50",
57 label: '序号',
58 render: (h, scope) => {
59 return <span>{scope.$index + 1}</span>
60 }
61 },
62 {
63 prop: "isrequired",
64 label: "是否必选",
65 width: "50",
66 render: (h, scope) => {
67 if (scope.row.sfxjcl === "1") {
68 return (
69 <div>
70 <span>可选</span>
71 </div>
72 );
73 }
74 else {
75 return (
76 <div>
77 <span>必选</span>
78 </div>
79 );
80 }
81 },
82 },
83 {
84 prop: "sjmc",
85 label: "材料名称",
86 },
87 {
88 prop: "sjlx",
89 label: "材料类型",
90 width: "80",
91 render: (h, scope) => {
92 return (
93 <div>
94 <span>{this.dicStatus(scope.row.sjlx, "A40")}</span>
95 </div>
96 );
97 },
98 },
99 {
100 prop: "sjsl",
101 label: "份数",
102 width: "50"
103 },
104 {
105 prop: "smzt",
106 label: "扫描状态",
107 width: "80",
108 render: (h, scope) => {
109 if (scope.row.children.length > 0) {
110 return (
111 <div>
112 <span>已扫描</span>
113 </div>
114 );
115 } else {
116 return (
117 <div>
118 <span>未扫描</span>
119 </div>
120 );
121 }
122 },
123 },
124 {
125 prop: "ys",
126 label: "扫描页数",
127 width: "50"
128 },
129 {
130 label: "操作",
131 width: "80",
132 render: (h, scope) => {
133 return (
134 <div>
135 <el-button
136 type="text"
137 disabled={scope.$index == 0}
138 onClick={() => {
139 this.moveUpward(scope.$index, scope.row);
140 }}
141 >
142 上移
143 </el-button>
144 <el-button
145 type="text"
146 disabled={scope.$index + 1 == this.tableData.length}
147 onClick={() => {
148 this.moveDown(scope.$index, scope.row);
149 }}
150 >
151 下移
152 </el-button>
153 </div>
154 );
155 },
156 },
157 ],
158 key: 0,
159 tableData: [],
160 }
161 },
162 computed: {
163 ...mapGetters(["dictData"])
164 },
165 created () {
166
167 },
168 methods: {
169 // 材料目录明细初始化
170 clmlInitList () {
171 return new Promise(resolve => {
172 this.unitData = this.$parent.unitData;
173 var formdata = new FormData();
174 formdata.append("bsmSldy", this.unitData[0]?.bsmSldy);
175 formdata.append("bsmSlsq", this.$route.query.bsmSlsq);
176 clmlInit(formdata).then((res) => {
177 if(res.code == 200){
178 resolve(res.code)
179 if(res.result && res.result.length > 0){
180 this.data = res.result;
181 }else{
182 this.data = []
183 }
184 }else{
185 this.$message.error(res.message)
186 }
187 })
188 })
189 },
190 // 上移
191 moveUpward (index, row) {
192 let obj = {
193 xh: row.xh,
194 bsmSlsq: row.bsmSlsq,
195 moveDirection: "UP",
196 };
197 // 接口待调
198 move(obj).then(async (res) => {
199 if (res.code == 200) {
200 let res = await this.clmlInitList()
201 if (res == 200) {
202 this.$message({
203 message: '上移成功',
204 type: 'success'
205 })
206 this.$parent.setTableData(this.data)
207 }
208 } else {
209 this.$message.error(res.message);
210 }
211 })
212 },
213 // 下移
214 moveDown (index, row) {
215 let obj = {
216 xh: row.xh,
217 bsmSlsq: row.bsmSlsq,
218 moveDirection: "DOWN",
219 }
220 // 接口待调
221 move(obj).then(async (res) => {
222 if (res.code == 200) {
223 let res = await this.clmlInitList()
224 if (res == 200) {
225 this.$message({
226 message: '下移成功',
227 type: 'success'
228 })
229 this.$parent.setTableData(this.data)
230 }
231 } else {
232 this.$message.error(res.message);
233 }
234 })
235 },
236 // 材料目录删除
237 handleDelete (index, row) {
238 let that = this
239 this.$confirm('此操作将永久删除该 是否继续?', '提示', {
240 confirmButtonText: '确定',
241 cancelButtonText: '取消',
242 type: 'warning'
243 }).then(() => {
244 clmlDelete({ sjBsm: row.bsmSj }).then(async (res) => {
245 if (res.code == 200) {
246 let res = await that.clmlInitList()
247 if (res == 200) {
248 that.$message({
249 message: "删除成功",
250 type: "success",
251 })
252 this.$parent.setTableData(this.data)
253 }
254 }
255 })
256 }).catch(() => {
257 this.$message({
258 type: 'info',
259 message: '已取消删除'
260 })
261 })
262 },
263 // 字典
264 dicStatus (val, code) {
265 let data = this.$store.getters.dictData[code],
266 name = "暂无";
267 if (data) {
268 data.map((item) => {
269 if (item.dcode == val) {
270 name = item.dname;
271 }
272 });
273 return name;
274 }
275 },
276 closeDialog(){
277 this.$emit("input", false);
278 },
279 },
280 };
281 </script>
282 <style scoped lang='scss'>
283 @import "~@/styles/mixin.scss";
284
285 .active {
286 background: $light-blue !important;
287 color: #fff;
288 }
289
290 .required {
291 font-size: 12px;
292 color: $pink;
293 float: left;
294 }
295
296 .cl_number {
297 float: right;
298 }
299
300 .clxx {
301 width: 100%;
302 display: flex;
303 padding-left: 5px;
304 height: calc(100vh - 125px);
305
306 .left {
307 display: flex;
308 flex-direction: column;
309 justify-content: space-between;
310
311 .item {
312 width: 28px;
313 height: 49%;
314 @include flex-center;
315 background-color: #E4E7ED;
316 border-bottom-right-radius: 10px;
317 padding: 5px;
318 cursor: pointer;
319 transition: all 0.3s;
320
321 &:hover {
322 @extend .active;
323 }
324 }
325 }
326
327 .right {
328 width: 100%;
329 height: 100%;
330
331 .clmlmx-box {
332 margin: 0 auto;
333
334 .title {
335 text-align: center;
336 height: 60px;
337 line-height: 60px;
338 border: 1px solid #dfe6ec;
339 font-size: 20px;
340 background: #81d3f81a;
341 margin-bottom: -1px;
342 }
343 }
344
345 .clyl-box {
346 width: 100%;
347 height: 100%;
348 display: flex;
349
350 .menu-tree {
351 width: 20%;
352 min-width: 160px;
353 height: 100%;
354 margin-right: 10px;
355 border-right: 1px dotted #d9d9d9;
356 padding: 0 15px;
357
358
359 .item {
360 line-height: 30px;
361 padding-top: 5px;
362 border-bottom: 1px solid #e8e8e8;
363 font-size: 16px;
364 text-align: center;
365 color: $light-blue;
366
367 .itemIcon {
368 float: right;
369 line-height: 60px;
370 cursor: pointer;
371 }
372
373 .child {
374 line-height: 32px;
375 border-bottom: 1px solid #e8e8e8;
376 padding-left: 10px;
377 color: #6b6b6b;
378 cursor: pointer;
379 box-sizing: border-box;
380 border-radius: 6px;
381 line-height: 20px;
382 transition: all 0.3s;
383 padding: 8px 0;
384 }
385
386 .child:hover {
387 color: $light-blue;
388 transform: scale(1.1);
389 }
390
391 .checked {
392 border: 1px solid $light-blue;
393 color: $light-blue;
394 }
395 }
396 }
397
398 .clyl-img {
399 width: 75%;
400 height: 100%;
401 background: #f3f4f7;
402 margin: 0 auto;
403 position: relative;
404 }
405 }
406 }
407 }
408 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="clxx">
3 <div class="right">
4 <!-- 材料预览 -->
5 <div class="clyl-box">
6 <div class="menu-tree">
7 <el-button type="primary" native-type="submit" @click="viewDetail" style="width:100%;margin-top:10px;">查看明细</el-button>
8 <div class="item">
9 材料目录({{tableData.length}})
10 <div style="margin-top:10px">
11 <div style="text-align: center;line-height:20px;color:black;font-size:14px" v-if="tableData.length == 0">暂无数据</div>
12 <div v-for="(item,index) in tableData" :key="item.bsmSj"
13 :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item,index)">
14 <span v-if="item.isrequired==1" class="required">必选</span>
15 {{ item.sjmc }}
16 <span class="cl_number">({{item.children ? item.children.length : 0}})</span>
17 </div>
18 </div>
19 </div>
20 <el-button type="primary" native-type="submit" style="width:100%" @click="handleAdd()" v-if="!this.$route.query.viewtype">新增</el-button>
21 </div>
22 <image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" @nextPriview="nextPriview"
23 @prevPriview="prevPriview" />
24 </div>
25 </div>
26 <clxxAddDialog v-model="isDialog" />
27 <clxxDetailDialog v-model="detailDialog" :data="tableData"/>
28 </div>
29 </template>
30 <script>
31 import { mapGetters } from "vuex";
32 import clxxAddDialog from "./clxxAddDialog.vue";
33 import clxxDetailDialog from "./clxxDetailDialog.vue";
34 import imagePreview from '@/views/components/imagePreview.vue'
35 import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js";
36 import { popupDialog } from "@/utils/popup.js";
37 export default {
38 components: { clxxAddDialog, imagePreview,clxxDetailDialog },
39 data () {
40 return {
41 isDialog: false,
42 detailDialog: false,
43 iclass: "",
44 // 材料目录选中
45 treeCheckIndex: 0,
46 treeCheckId: "",
47 key: 0,
48 tableData: [],
49 previewImg: {
50 // 收件标识码
51 bsmSj: '',
52 bsmSlsq: this.$parent.bsmSlsq,
53 index: 0,
54 selectedIndex: 0,
55 imgList: []
56 }
57 }
58 },
59 computed: {
60 ...mapGetters(["dictData"])
61 },
62 created () {
63 this.clmlInitList(1)
64 },
65 methods: {
66 // 自动预览
67 nextPriview () {
68 if (this.treeCheckIndex < this.tableData.length) {
69 this.treeCheckIndex++
70 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
71 this.previewImg.index = 0
72 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
73 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
74 }
75 },
76 prevPriview () {
77 if (this.treeCheckIndex >= 1) {
78 this.treeCheckIndex--
79 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
80 this.previewImg.index = this.previewImg.imgList.length
81 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
82 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
83 }
84 },
85 // 材料目录明细初始化
86 clmlInitList (type) {
87 //type 1：列表初始化 2：新增材料
88 return new Promise(resolve => {
89 this.unitData = this.$parent.unitData;
90 var formdata = new FormData();
91 formdata.append("bsmSldy", this.unitData[0]?.bsmSldy);
92 formdata.append("bsmSlsq", this.$parent.bsmSlsq);
93 clmlInit(formdata).then((res) => {
94 if(res.code == 200){
95 resolve(res.code)
96 if (res.result && res.result.length > 0) {
97 this.tableData = res.result;
98 if(type == 1){
99 this.treeClick(this.tableData[0],0);
100 }else{
101 //新增材料后刷新列表焦点置于新增的对象上
102 this.treeClick(this.tableData[this.tableData.length - 1],this.tableData.length - 1);
103 }
104 }
105 }else{
106 this.$message.error(res.message)
107 }
108 })
109 })
110 },
111 setChecked(item){
112 this.treeCheckId = item.bsmSj;
113 this.title = item.sjmc;
114 this.titleYs = 1;
115 this.titleNum = item.children.length;
116 this.previewImg.imgList = item.children;
117 this.previewImg.bsmSj = item.bsmSj;
118 },
119 updateList (val) {
120 let that = this
121 if (val != null) { //删除最后一张图片时 val=null
122 this.tableData.forEach(item => {
123 if (item.bsmSj === val.bsmSj) {
124 item.children = val.children
125 }
126 })
127 this.previewImg.imgList = _.cloneDeep(val.children)
128 if (this.previewImg.index == this.previewImg.imgList.length) {
129 this.previewImg.index = this.previewImg.index - 1
130 }
131 } else {
132 this.previewImg.imgList = []
133 this.tableData.forEach((item, index) => {
134 if (this.treeCheckId == item.bsmSj) {
135 item.children = []
136 that.treeCheckIndex = index
137 }
138 })
139 }
140
141 },
142 // 添加材料目录
143 handleAdd () {
144 this.isDialog = true;
145 },
146 // 新增弹窗保存
147 addSave (data) {
148 let obj = {
149 bsmSlsq: this.$parent.bsmSlsq,
150 isrequired: "1",
151 sjmc: data.clmc,
152 sjsl: 0,
153 smzt: '',
154 ys: 0,
155 sjlx: data.cllx,
156 sfxjcl: "1", // 是否必选
157 };
158 save(obj).then(async (res) => {
159 if (res.code == 200) {
160 let res = await this.clmlInitList(2)
161 if (res == 200) this.$message({
162 message: "新增成功",
163 type: "success",
164 })
165 }
166 });
167 },
168 // 材料目录点击选中
169 treeClick (item, index) {
170 this.previewImg.index = 0
171 this.treeCheckId = item?.bsmSj
172 this.treeCheckIndex = index
173 this.previewImg.imgList = item?.children
174 this.previewImg.bsmSj = item?.bsmSj
175 },
176 // 小图片点击
177 imgClick (item, index) {
178 this.showImg = item;
179 this.titleYs = index + 1;
180 },
181 // 字典
182 dicStatus (val, code) {
183 let data = this.$store.getters.dictData[code],
184 name = "暂无";
185 if (data) {
186 data.map((item) => {
187 if (item.dcode == val) {
188 name = item.dname;
189 }
190 });
191 return name;
192 }
193 },
194 //查看明细
195 viewDetail(){
196 this.detailDialog = true;
197 },
198 //设置tableData
199 setTableData(tableData){
200 this.$nextTick(res => {
201 this.tableData = tableData;
202 })
203 },
204 },
205 };
206 </script>
207 <style scoped lang='scss'>
208 @import "~@/styles/mixin.scss";
209
210 .active {
211 background: $light-blue !important;
212 color: #fff;
213 }
214
215 .required {
216 font-size: 12px;
217 color: $pink;
218 float: left;
219 }
220
221 .cl_number {
222 float: right;
223 }
224
225 .clxx {
226 width: 100%;
227 display: flex;
228 padding-left: 5px;
229 height: calc(100vh - 125px);
230
231 .left {
232 display: flex;
233 flex-direction: column;
234 justify-content: space-between;
235
236 .item {
237 width: 28px;
238 height: 49%;
239 @include flex-center;
240 background-color: #E4E7ED;
241 border-bottom-right-radius: 10px;
242 padding: 5px;
243 cursor: pointer;
244 transition: all 0.3s;
245
246 &:hover {
247 @extend .active;
248 }
249 }
250 }
251
252 .right {
253 width: 100%;
254 height: 100%;
255
256 .clmlmx-box {
257 margin: 0 auto;
258
259 .title {
260 text-align: center;
261 height: 60px;
262 line-height: 60px;
263 border: 1px solid #dfe6ec;
264 font-size: 20px;
265 background: #81d3f81a;
266 margin-bottom: -1px;
267 }
268 }
269
270 .clyl-box {
271 width: 100%;
272 height: 100%;
273 display: flex;
274
275 .menu-tree {
276 width: 20%;
277 min-width: 160px;
278 height: 100%;
279 margin-right: 10px;
280 border-right: 1px dotted #d9d9d9;
281 padding: 0 15px;
282
283
284 .item {
285 line-height: 30px;
286 padding-top: 5px;
287 border-bottom: 1px solid #e8e8e8;
288 font-size: 16px;
289 text-align: center;
290 color: $light-blue;
291
292 .itemIcon {
293 float: right;
294 line-height: 60px;
295 cursor: pointer;
296 }
297
298 .child {
299 line-height: 32px;
300 border-bottom: 1px solid #e8e8e8;
301 padding-left: 10px;
302 color: #6b6b6b;
303 cursor: pointer;
304 box-sizing: border-box;
305 border-radius: 6px;
306 line-height: 20px;
307 transition: all 0.3s;
308 padding: 8px 0;
309 }
310
311 .child:hover {
312 color: $light-blue;
313 transform: scale(1.1);
314 }
315
316 .checked {
317 border: 1px solid $light-blue;
318 color: $light-blue;
319 }
320 }
321 }
322
323 .clyl-img {
324 width: 75%;
325 height: 100%;
326 background: #f3f4f7;
327 margin: 0 auto;
328 position: relative;
329 }
330 }
331 }
332 }
333 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
13 import { datas } from "../javascript/zsyl.js"; 13 import { datas } from "../javascript/zsyl.js";
14 import { getSlsqBdcqzList,bdcqzPreview} from "@/api/bdcqz.js" 14 import { getSlsqBdcqzList,bdcqzPreview} from "@/api/bdcqz.js"
15 export default { 15 export default {
16 name: "zsyl",
16 components: { 17 components: {
17 }, 18 },
18 props: { 19 props: {
...@@ -85,7 +86,9 @@ export default { ...@@ -85,7 +86,9 @@ export default {
85 this.getBdcqzPreview(); 86 this.getBdcqzPreview();
86 }, 87 },
87 getBdcqzPreview(){ 88 getBdcqzPreview(){
89 this.$startLoading()
88 bdcqzPreview(this.bdcqz).then(res => { 90 bdcqzPreview(this.bdcqz).then(res => {
91 this.$endLoading()
89 let blob = new Blob([res]); 92 let blob = new Blob([res]);
90 let url = window.URL.createObjectURL(blob); 93 let url = window.URL.createObjectURL(blob);
91 this.previewImage = url; 94 this.previewImage = url;
......
...@@ -37,7 +37,7 @@ export function getForm (tabName, djywbm) { ...@@ -37,7 +37,7 @@ export function getForm (tabName, djywbm) {
37 break; 37 break;
38 38
39 case "clxx": 39 case "clxx":
40 form = require("@/views/workflow/components/clxx.vue"); 40 form = require("@/views/workflow/components/clxxUnify.vue");
41 break; 41 break;
42 case "spyj": 42 case "spyj":
43 form = require("@/views/workflow/components/spyj.vue"); 43 form = require("@/views/workflow/components/spyj.vue");
......
...@@ -37,6 +37,8 @@ export default { ...@@ -37,6 +37,8 @@ export default {
37 }, 37 },
38 methods: { 38 methods: {
39 loadView (view) { 39 loadView (view) {
40 console.log(this.djqxObj);
41
40 this.title = "申请业务：" + this.djqxObj.djywmc; 42 this.title = "申请业务：" + this.djqxObj.djywmc;
41 return r => require.ensure([], () => r(require(`./components/${view}.vue`))) 43 return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
42 }, 44 },
......