Skip to content

bdc / bdcdj-web

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

style:材料目录

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