Skip to content

bdc / bdcdj-web

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

style:宗地基本信息

1 parent 7f417239
Inline Side-by-side
Showing 5 changed files with 1036 additions and 1009 deletions
...@@ -17,8 +17,9 @@ ...@@ -17,8 +17,9 @@
17 <div class="thumb-wrap"> 17 <div class="thumb-wrap">
18 <div class="thumb-wrap-button"> 18 <div class="thumb-wrap-button">
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" ref="upload" action="" :show-file-list="false" :multiple="true" :auto-upload="false"
21 :on-change="handleChange" accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :before-upload="beforeUpload"> 21 :on-change="handleChange"
22 accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :before-upload="beforeUpload">
22 <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>
23 </el-upload> 24 </el-upload>
24 <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" v-if="!this.$route.query.viewtype">删除</el-button>
...@@ -36,262 +37,273 @@ ...@@ -36,262 +37,273 @@
36 </div> 37 </div>
37 </template> 38 </template>
38 <script> 39 <script>
39 import PhotoZoom from '@/components/PhotoZoom' 40 import PhotoZoom from '@/components/PhotoZoom'
40 import { uploadSjClmx, deleteClmx } from "@/api/clxx.js"; 41 import { uploadSjClmx, deleteClmx } from "@/api/clxx.js";
41 import publicPicture from '@/components/publicPicture/index.vue' 42 import publicPicture from '@/components/publicPicture/index.vue'
42 export default { 43 export default {
43 name: 'PreviewImage', 44 name: 'PreviewImage',
44 props: { 45 props: {
45 previewImg: { 46 previewImg: {
46 type: Object, 47 type: Object,
47 default: () => { } 48 default: () => { }
48 }
49 },
50 components: {
51 PhotoZoom,
52 publicPicture
53 },
54 data () {
55 return {
56 transform: {
57 scale: 1,
58 degree: 0
59 },
60 // 缩略图
61 thumbnailImages: [],
62 showViewer: false,
63 initialIndex: undefined,
64 allLi: [],
65 }
66 },
67 watch: {
68 previewImg: {
69 handler (newValue, oldValue) {
70 this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fjurl)
71 this.thumbnailImages = newValue.imgList
72 },
73 deep: true
74 }
75 },
76 created () {
77 this.allLi = _.cloneDeep(this.previewImg.imgList).map(item => item.fjurl)
78 this.thumbnailImages = this.previewImg.imgList
79 },
80 computed: {
81 isFirst () {
82 return this.previewImg.index === 0
83 },
84 isLast () {
85 return this.previewImg.index === this.previewImg.imgList.length - 1
86 }
87 },
88 methods: {
89 prev () {
90 let len = this.previewImg.imgList.length
91 if (this.isFirst || len == 0) {
92 this.$emit('prevPriview')
93 } else {
94 this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
95 } 49 }
96 }, 50 },
97 next () { 51 components: {
98 let len = this.previewImg.imgList.length 52 PhotoZoom,
99 if (this.isLast || len == 0) { 53 publicPicture
100 this.$emit('nextPriview')
101 } else {
102 this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
103 }
104 }, 54 },
105 showCurrent (index) { 55 data () {
106 this.previewImg.index = index 56 return {
57 transform: {
58 scale: 1,
59 degree: 0
60 },
61 maxLength: 0,
62 // 缩略图
63 thumbnailImages: [],
64 showViewer: false,
65 initialIndex: undefined,
66 allLi: [],
67 }
107 }, 68 },
108 closeViewer () { 69 watch: {
109 this.showViewer = false 70 previewImg: {
71 handler (newValue, oldValue) {
72 this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fjurl)
73 this.thumbnailImages = newValue.imgList
74 },
75 deep: true
76 }
110 }, 77 },
111 clickImage () { 78 created () {
112 this.showViewer = true 79 this.maxLength = 0;
80 this.allLi = _.cloneDeep(this.previewImg.imgList).map(item => item.fjurl)
81 this.thumbnailImages = this.previewImg.imgList
113 }, 82 },
114 // 上传 83 computed: {
115 beforeUpload (file) { 84 isFirst () {
116 const isJPEG = file.type === 'image/jpeg' 85 return this.previewImg.index === 0
117 const isPNG = file.type === 'image/png' 86 },
118 const isJPG = file.type === 'image/jpg' 87 isLast () {
119 const isGIF = file.type === 'image/gif' 88 return this.previewImg.index === this.previewImg.imgList.length - 1
120 const isLt5M = file.size / 1024 / 1024 < 5
121 if (!isJPEG && !isGIF && !isPNG && !isJPG && !isGIF) {
122 this.$message.error('请选择jpeg/png/jpg/bmp/gif格式的图片后重试')
123 this.loading = false
124 }
125 if (!isLt5M) {
126 this.$message.error('上传图片大小不能超过 5MB!')
127 this.loading = false
128 } 89 }
129 this.imgHidden = (isJPG || isJPEG || isPNG || isGIF) && isLt5M
130 return this.imgHidden
131 }, 90 },
132 async handleChange (file) { 91 methods: {
133 let data = _.cloneDeep(this.previewImg.imgList[this.previewImg.index]) 92 prev () {
134 var formdata = new FormData(); 93 let len = this.previewImg.imgList.length
135 formdata.append("file", file.raw); 94 if (this.isFirst || len == 0) {
136 formdata.append("bsmSj", this.previewImg.bsmSj); 95 this.$emit('prevPriview')
137 formdata.append("bsmSlsq", this.previewImg.bsmSlsq); 96 } else {
138 uploadSjClmx(formdata).then((res) => { 97 this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
139 if (res.code == 200) {
140 this.$emit('updateList', res.result)
141 this.$message({
142 message: '上传成功!',
143 type: 'success'
144 })
145 } 98 }
146 }) 99 },
147 }, 100 next () {
148 handleDelete () { 101 let len = this.previewImg.imgList.length
149 let that = this 102 if (this.isLast || len == 0) {
150 this.$confirm('此操作将永久删除, 是否继续?', '提示', { 103 this.$emit('nextPriview')
151 confirmButtonText: '确定', 104 } else {
152 cancelButtonText: '取消', 105 this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
153 type: 'warning' 106 }
154 }).then(async () => { 107 },
155 let bsmClmx = this.previewImg.imgList[this.previewImg.index].bsmClmx 108 showCurrent (index) {
156 deleteClmx(bsmClmx).then(res => { 109 this.previewImg.index = index
157 if (res.code == 200) { 110 },
158 that.$emit('updateList', res.result) 111 closeViewer () {
159 that.$message({ 112 this.showViewer = false
160 message: '删除成功!', 113 },
161 type: 'success' 114 clickImage () {
162 }) 115 this.showViewer = true
163 } 116 },
117 // 上传
118 beforeUpload (file) {
119 const isJPEG = file.type === 'image/jpeg'
120 const isPNG = file.type === 'image/png'
121 const isJPG = file.type === 'image/jpg'
122 const isGIF = file.type === 'image/gif'
123 const isLt5M = file.size / 1024 / 1024 < 5
124 if (!isJPEG && !isGIF && !isPNG && !isJPG && !isGIF) {
125 this.$message.error('请选择jpeg/png/jpg/bmp/gif格式的图片后重试')
126 this.loading = false
127 }
128 if (!isLt5M) {
129 this.$message.error('上传图片大小不能超过 5MB!')
130 this.loading = false
131 }
132 this.imgHidden = (isJPG || isJPEG || isPNG || isGIF) && isLt5M
133 return this.imgHidden
134 },
135 async handleChange (file, files) {
136 // 清空 fileList 数组
137 let length = files.length;
138 this.maxLength = Math.max(length, this.maxLength)
139 this.$refs.upload.clearFiles();
140 setTimeout(() => {
141 if (length !== this.maxLength) return
142 console.log(files);
143 // let data = _.cloneDeep(this.previewImg.imgList[this.previewImg.index])
144 var formData = new FormData();
145 files.forEach(file => {
146 formData.append('file', file.raw)
147 })
148 formData.append("bsmSj", this.previewImg.bsmSj);
149 formData.append("bsmSlsq", this.previewImg.bsmSlsq);
150 uploadSjClmx(formData).then((res) => {
151 if (res.code == 200) {
152 this.$emit('updateList', res.result)
153 this.$message({
154 message: '上传成功!',
155 type: 'success'
156 })
157
158 }
159 })
164 }) 160 })
165 }).catch(() => { 161 },
166 this.$message({ 162 handleDelete () {
167 type: 'info', 163 let that = this
168 message: '已取消删除' 164 this.$confirm('此操作将永久删除, 是否继续?', '提示', {
165 confirmButtonText: '确定',
166 cancelButtonText: '取消',
167 type: 'warning'
168 }).then(async () => {
169 let bsmClmx = this.previewImg.imgList[this.previewImg.index].bsmClmx
170 deleteClmx(bsmClmx).then(res => {
171 if (res.code == 200) {
172 that.$emit('updateList', res.result)
173 that.$message({
174 message: '删除成功!',
175 type: 'success'
176 })
177 }
178 })
179 }).catch(() => {
180 this.$message({
181 type: 'info',
182 message: '已取消删除'
183 })
169 }) 184 })
170 }) 185 }
171 } 186 }
172 } 187 }
173 }
174 </script> 188 </script>
175
176 <style lang="scss" scoped> 189 <style lang="scss" scoped>
177 // 查看大图 190 // 查看大图
178 .rlPopup { 191 .rlPopup {
179 position: relative; 192 position: relative;
180 width: 100%; 193 width: 100%;
181 text-align: center;
182 height: 100%;
183
184 .handle-btn {
185 position: absolute;
186 top: 50%;
187 transform: translateY(-100%);
188 width: 66px;
189 height: 66px;
190 line-height: 75px;
191 color: #fff;
192 background-color: rgb(239, 239, 239);
193 border-radius: 50%;
194 cursor: pointer;
195 text-align: center; 194 text-align: center;
196 transition: all 0.3s; 195 height: 100%;
197
198 i {
199 font-size: 24px;
200 }
201 }
202
203 .handle-btn:hover {
204 background-color: rgb(185, 183, 183);
205 }
206 196
197 .handle-btn {
198 position: absolute;
199 top: 50%;
200 transform: translateY(-100%);
201 width: 66px;
202 height: 66px;
203 line-height: 75px;
204 color: #fff;
205 background-color: rgb(239, 239, 239);
206 border-radius: 50%;
207 cursor: pointer;
208 text-align: center;
209 transition: all 0.3s;
207 210
208 .prev { 211 i {
209 left: 1%; 212 font-size: 24px;
210 } 213 }
214 }
211 215
212 .next { 216 .handle-btn:hover {
213 right: 1%; 217 background-color: rgb(185, 183, 183);
214 } 218 }
215 219
216 .img-list-wrap { 220 .prev {
217 width: 100%; 221 left: 1%;
218 display: flex; 222 }
219 justify-content: center;
220 height: calc(100% - 80px);
221 align-items: center;
222 background: rgba(194, 190, 190, 0.1);
223 overflow: scroll;
224 223
225 img { 224 .next {
226 display: block; 225 right: 1%;
227 object-fit: scale-down;
228 transition: all 0.3s;
229 max-width: 100%;
230 } 226 }
231 }
232 227
233 .thumb-wrap { 228 .img-list-wrap {
234 &-button { 229 width: 100%;
235 display: flex; 230 display: flex;
236 justify-content: center; 231 justify-content: center;
232 height: calc(100% - 80px);
233 align-items: center;
234 background: rgba(194, 190, 190, 0.1);
235 overflow: scroll;
237 236
238 .fileUpdate { 237 img {
239 margin: 0 10px; 238 display: block;
239 object-fit: scale-down;
240 transition: all 0.3s;
241 max-width: 100%;
240 } 242 }
241 } 243 }
242 244
243 li { 245 .thumb-wrap {
244 float: left; 246 &-button {
245 width: 60px; 247 display: flex;
246 height: 45px; 248 justify-content: center;
247 border: solid 1px #ececec;
248 position: relative;
249 margin-right: 5px;
250 cursor: pointer;
251 249
252 &:last-child { 250 .fileUpdate {
253 margin-right: 0; 251 margin: 0 10px;
252 }
254 } 253 }
255 254
256 img { 255 li {
257 max-width: 57px; 256 float: left;
258 max-height: 42px; 257 width: 60px;
259 display: block; 258 height: 45px;
260 object-fit: scale-down; 259 border: solid 1px #ececec;
261 position: absolute; 260 position: relative;
262 top: 50%; 261 margin-right: 5px;
263 left: 50%; 262 cursor: pointer;
264 transform: translate(-50%, -50%); 263
264 &:last-child {
265 margin-right: 0;
266 }
267
268 img {
269 max-width: 57px;
270 max-height: 42px;
271 display: block;
272 object-fit: scale-down;
273 position: absolute;
274 top: 50%;
275 left: 50%;
276 transform: translate(-50%, -50%);
277 }
265 } 278 }
266 }
267 279
268 .active { 280 .active {
269 border-color: #409eff; 281 border-color: #409eff;
282 }
270 } 283 }
271 } 284 }
272 }
273 </style> 285 </style>
274 <style> 286 <style>
275 .zoom-on-hover { 287 .zoom-on-hover {
276 position: relative; 288 position: relative;
277 overflow: hidden; 289 overflow: hidden;
278 } 290 }
279 291
280 .zoom-on-hover .normal { 292 .zoom-on-hover .normal {
281 width: 100%; 293 width: 100%;
282 } 294 }
283 295
284 .zoom-on-hover .zoom { 296 .zoom-on-hover .zoom {
285 position: absolute; 297 position: absolute;
286 opacity: 0; 298 opacity: 0;
287 transform-origin: top left; 299 transform-origin: top left;
288 } 300 }
289 301
290 .zoom-on-hover.zoomed .zoom { 302 .zoom-on-hover.zoomed .zoom {
291 opacity: 1; 303 opacity: 1;
292 } 304 }
293 305
294 .zoom-on-hover.zoomed .normal { 306 .zoom-on-hover.zoomed .normal {
295 opacity: 0; 307 opacity: 0;
296 } 308 }
297 </style> 309 </style>
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
39 </tr> 39 </tr>
40 <tr> 40 <tr>
41 <td>权利设定方式</td> 41 <td>权利设定方式</td>
42 <td>{{ zdjbxx.qlsdfs }}</td> 42 <td>{{zdjbxx.qlsdfs | qlsdfs}}</td>
43 <td>容积率</td> 43 <td>容积率</td>
44 <td>{{ zdjbxx.rjl }}</td> 44 <td>{{ zdjbxx.rjl }}</td>
45 </tr> 45 </tr>
...@@ -122,79 +122,87 @@ ...@@ -122,79 +122,87 @@
122 <td>{{ zdbhqks[0].dbr }}</td> 122 <td>{{ zdbhqks[0].dbr }}</td>
123 </tr> --> 123 </tr> -->
124 124
125
126
127 </table> 125 </table>
128 </div> 126 </div>
129 </template> 127 </template>
130 128
131 <script> 129 <script>
132 import { getZdjjxxBybdcdyid } from "@/api/registerBook.js"; 130 import store from '@/store/index.js'
131 import { getZdjjxxBybdcdyid } from "@/api/registerBook.js";
133 132
134 export default { 133 export default {
135 data () { 134 data () {
136 return { 135 return {
137 bhqkColumns: [ 136 bhqkColumns: [
138 { 137 {
139 prop: "ssywh", 138 prop: "ssywh",
140 label: "上手业务号", 139 label: "上手业务号",
141 }, 140 },
142 { 141 {
143 prop: "zddm", 142 prop: "zddm",
144 label: "宗地代码", 143 label: "宗地代码",
145 }, 144 },
146 { 145 {
147 prop: "bhqzddm", 146 prop: "bhqzddm",
148 label: "变化前宗地代码", 147 label: "变化前宗地代码",
149 }, 148 },
150 { 149 {
151 prop: "bhnr", 150 prop: "bhnr",
152 label: "变化内容", 151 label: "变化内容",
153 }, 152 },
154 { 153 {
155 prop: "bhyy", 154 prop: "bhyy",
156 label: "变化原因", 155 label: "变化原因",
157 }, 156 },
158 { 157 {
159 prop: "djsj", 158 prop: "djsj",
160 label: "登记时间", 159 label: "登记时间",
161 }, 160 },
162 { 161 {
163 prop: "dbr", 162 prop: "dbr",
164 label: "登簿人", 163 label: "登簿人",
165 }, 164 },
166 { 165 {
167 prop: "fj", 166 prop: "fj",
168 label: "附记", 167 label: "附记",
169 }, 168 },
170 ], 169 ],
171 bhqkTableWidth: 745, 170 bhqkTableWidth: 745,
172 zdjbxx: {}, 171 zdjbxx: {},
173 zdbhqks: [], 172 zdbhqks: [],
174 propsParam: this.$attrs, 173 propsParam: this.$attrs,
175 showGroup: false, 174 showGroup: false,
176 bdclxList: ["", "宗地", "宗海", "自然幢", "多幢", "构筑物", "林权", "户"], 175 bdclxList: ["", "宗地", "宗海", "自然幢", "多幢", "构筑物", "林权", "户"],
177 }; 176 };
178 }, 177 },
179 created () { 178 filters: {
180 this.loadData(); 179 qlsdfs: function (value) {
181 }, 180 const foundItem = store.getters.dictData['A10'].find(item => item.dcode === String(value));
182 methods: { 181 if (foundItem) {
183 loadData () { 182 console.log(foundItem.dname, 'foundItem.dname');
184 getZdjjxxBybdcdyid({ bdcdyid: this.propsParam.bdcdyid }).then((res) => { 183 return foundItem.dname;
185 if (res.code === 200) {
186 this.zdjbxx = res.result.zdjbxx;
187 this.zdbhqks = res.result.zdbhqkList;
188 if (this.zdbhqks != null && this.zdbhqks.length > 0) {
189 this.showGroup = true;
190 }
191 } 184 }
192 }); 185 }
186 },
187 created () {
188 this.loadData();
189 },
190 methods: {
191 loadData () {
192 getZdjjxxBybdcdyid({ bdcdyid: this.propsParam.bdcdyid }).then((res) => {
193 if (res.code === 200) {
194 this.zdjbxx = res.result.zdjbxx;
195 this.zdbhqks = res.result.zdbhqkList;
196 if (this.zdbhqks != null && this.zdbhqks.length > 0) {
197 this.showGroup = true;
198 }
199 }
200 });
201 },
193 }, 202 },
194 }, 203 };
195 };
196 </script> 204 </script>
197 205
198 <style lang="scss" scoped> 206 <style lang="scss" scoped>
199 @import "~@/styles/tablecss.scss"; 207 @import "~@/styles/tablecss.scss";
200 </style> 208 </style>
......
...@@ -36,497 +36,496 @@ ...@@ -36,497 +36,496 @@
36 </div> 36 </div>
37 </template> 37 </template>
38 <script> 38 <script>
39 import { mapGetters } from "vuex"; 39 import { mapGetters } from "vuex";
40 import clxxAddDialog from "./clxxAddDialog.vue"; 40 import clxxAddDialog from "./dialog/clxxAddDialog.vue";
41 import imagePreview from '@/views/components/imagePreview.vue' 41 import imagePreview from '@/views/components/imagePreview.vue'
42 import {InitClml,saveClml,deleteSjClml,moveClml} from "@/api/clxx.js"; 42 import { InitClml, saveClml, deleteSjClml, moveClml } from "@/api/clxx.js";
43 export default { 43 export default {
44 components: { clxxAddDialog, imagePreview }, 44 components: { clxxAddDialog, imagePreview },
45 data () { 45 data () {
46 return { 46 return {
47 isDialog: false, 47 isDialog: false,
48 menuList: [ 48 menuList: [
49 { 49 {
50 id: "1", 50 id: "1",
51 label: "材料目录明细", 51 label: "材料目录明细",
52 },
53 {
54 id: "2",
55 label: "材料预览",
56 },
57 ],
58 iclass: "",
59 // 材料目录选中
60 treeCheckIndex: 0,
61 treeCheckId: "",
62 checkedId: "1",
63 column: [
64 {
65 width: "50",
66 renderHeader: (h, scope) => {
67 return (
68 <div>
69 {
70 this.$route.query.viewtype == 1 ? '序号' :
71 <i
72 class="el-icon-plus pointer"
73 onClick={() => {
74 this.handleAdd()
75 }}
76 ></i>
77 }
78 </div>
79 )
80 }, 52 },
81 render: (h, scope) => { 53 {
82 // 新建的材料,可删除 54 id: "2",
83 // v-show='scope.row.sfxjcl == 1' 55 label: "材料预览",
84 return ( 56 },
85 <div> 57 ],
86 { 58 iclass: "",
87 this.$route.query.viewtype == 1 ? <span>{scope.$index + 1}</span> : 59 // 材料目录选中
88 <i 60 treeCheckIndex: 0,
89 class="el-icon-minus pointer" 61 treeCheckId: "",
90 62 checkedId: "1",
91 onClick={() => { 63 column: [
92 this.handleDelete(scope.$index, scope.row); 64 {
93 }} 65 width: "50",
94 ></i> 66 renderHeader: (h, scope) => {
95 }
96 </div>
97 )
98 }
99 },
100 {
101 prop: "isrequired",
102 label: "是否必选",
103 width: "50",
104 render: (h, scope) => {
105 if (scope.row.sfxjcl === "1") {
106 return ( 67 return (
107 <div> 68 <div>
108 <span>可选</span> 69 {
70 this.$route.query.viewtype == 1 ? '序号' :
71 <i
72 class="el-icon-plus pointer"
73 onClick={() => {
74 this.handleAdd()
75 }}
76 ></i>
77 }
109 </div> 78 </div>
110 ); 79 )
111 } 80 },
112 else { 81 render: (h, scope) => {
82 // 新建的材料,可删除
83 // v-show='scope.row.sfxjcl == 1'
113 return ( 84 return (
114 <div> 85 <div>
115 <span>必选</span> 86 {
87 this.$route.query.viewtype == 1 ? <span>{scope.$index + 1}</span> :
88 <i
89 class="el-icon-minus pointer"
90
91 onClick={() => {
92 this.handleDelete(scope.$index, scope.row);
93 }}
94 ></i>
95 }
116 </div> 96 </div>
117 ); 97 )
118 } 98 }
119 }, 99 },
120 }, 100 {
121 { 101 prop: "isrequired",
122 prop: "sjmc", 102 label: "是否必选",
123 label: "材料名称", 103 width: "50",
124 }, 104 render: (h, scope) => {
125 { 105 if (scope.row.sfxjcl === "1") {
126 prop: "sjlx", 106 return (
127 label: "材料类型", 107 <div>
128 width: "80", 108 <span>可选</span>
129 render: (h, scope) => { 109 </div>
130 return ( 110 );
131 <div> 111 }
132 <span>{this.dicStatus(scope.row.sjlx, "A40")}</span> 112 else {
133 </div> 113 return (
134 ); 114 <div>
115 <span>必选</span>
116 </div>
117 );
118 }
119 },
120 },
121 {
122 prop: "sjmc",
123 label: "材料名称",
135 }, 124 },
136 }, 125 {
137 { 126 prop: "sjlx",
138 prop: "sjsl", 127 label: "材料类型",
139 label: "份数", 128 width: "80",
140 width: "50" 129 render: (h, scope) => {
141 },
142 {
143 prop: "smzt",
144 label: "扫描状态",
145 width: "80",
146 render: (h, scope) => {
147 if (scope.row.children.length > 0) {
148 return ( 130 return (
149 <div> 131 <div>
150 <span>已扫描</span> 132 <span>{this.dicStatus(scope.row.sjlx, "A40")}</span>
151 </div> 133 </div>
152 ); 134 );
153 } else { 135 },
136 },
137 {
138 prop: "sjsl",
139 label: "份数",
140 width: "50"
141 },
142 {
143 prop: "smzt",
144 label: "扫描状态",
145 width: "80",
146 render: (h, scope) => {
147 if (scope.row.children.length > 0) {
148 return (
149 <div>
150 <span>已扫描</span>
151 </div>
152 );
153 } else {
154 return (
155 <div>
156 <span>未扫描</span>
157 </div>
158 );
159 }
160 },
161 },
162 {
163 prop: "ys",
164 label: "扫描页数",
165 width: "50"
166 },
167 {
168 label: "操作",
169 width: "80",
170 render: (h, scope) => {
154 return ( 171 return (
155 <div> 172 <div>
156 <span>未扫描</span> 173 <el-button
174 type="text"
175 disabled={scope.$index == 0}
176 onClick={() => {
177 this.moveUpward(scope.$index, scope.row);
178 }}
179 >
180 上移
181 </el-button>
182 <el-button
183 type="text"
184 disabled={scope.$index + 1 == this.tableData.length}
185 onClick={() => {
186 this.moveDown(scope.$index, scope.row);
187 }}
188 >
189 下移
190 </el-button>
157 </div> 191 </div>
158 ); 192 );
159 } 193 },
160 }, 194 },
161 }, 195 ],
162 { 196 key: 0,
163 prop: "ys", 197 tableData: [],
164 label: "扫描页数", 198 previewImg: {
165 width: "50" 199 // 收件标识码
166 }, 200 bsmSj: '',
167 { 201 bsmSlsq: this.$parent.bsmSlsq,
168 label: "操作", 202 index: 0,
169 width: "80", 203 selectedIndex: 0,
170 render: (h, scope) => { 204 imgList: []
171 return ( 205 }
172 <div>
173 <el-button
174 type="text"
175 disabled={scope.$index == 0}
176 onClick={() => {
177 this.moveUpward(scope.$index, scope.row);
178 }}
179 >
180 上移
181 </el-button>
182 <el-button
183 type="text"
184 disabled={scope.$index + 1 == this.tableData.length}
185 onClick={() => {
186 this.moveDown(scope.$index, scope.row);
187 }}
188 >
189 下移
190 </el-button>
191 </div>
192 );
193 },
194 },
195 ],
196 key: 0,
197 tableData: [],
198 previewImg: {
199 // 收件标识码
200 bsmSj: '',
201 bsmSlsq: this.$parent.bsmSlsq,
202 index: 0,
203 selectedIndex: 0,
204 imgList: []
205 }
206 }
207 },
208 computed: {
209 ...mapGetters(["dictData"])
210 },
211 created () {
212 this.clmlInitList()
213 },
214 methods: {
215 // 自动预览
216 nextPriview () {
217 if (this.treeCheckIndex < this.tableData.length) {
218 this.treeCheckIndex++
219 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
220 this.previewImg.index = 0
221 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
222 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
223 } 206 }
224 }, 207 },
225 prevPriview () { 208 computed: {
226 if (this.treeCheckIndex >= 1) { 209 ...mapGetters(["dictData"])
227 this.treeCheckIndex--
228 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
229 this.previewImg.index = this.previewImg.imgList.length
230 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
231 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
232 }
233 }, 210 },
234 // 材料目录明细初始化 211 created () {
235 clmlInitList () { 212 this.clmlInitList()
236 return new Promise(resolve => {
237 this.unitData = this.$parent.unitData;
238 var formdata = new FormData();
239 formdata.append("bsmSldy", this.unitData[0]?.bsmSldy);
240 formdata.append("bsmSlsq", this.$parent.bsmSlsq);
241 InitClml(formdata).then((res) => {
242 if(res.result.code == 200){
243 resolve(res.code)
244 if (res.result.result && res.result.result.length > 0) {
245 this.tableData = res.result.result;
246 this.treeCheckId = this.tableData[0].bsmSj;
247 this.title = this.tableData[0].sjmc;
248 this.titleYs = 1;
249 this.titleNum = this.tableData[0].children.length;
250
251 this.previewImg.imgList = this.tableData[0]?.children;
252 this.previewImg.bsmSj = this.tableData[0]?.bsmSj;
253 }
254 }else{
255 this.$message.error(res.result.message)
256 }
257 })
258 })
259 }, 213 },
260 updateList (val) { 214 methods: {
261 let that = this 215 // 自动预览
262 if (val != null) { //删除最后一张图片时 val=null 216 nextPriview () {
263 this.tableData.forEach(item => { 217 if (this.treeCheckIndex < this.tableData.length) {
264 if (item.bsmSj === val.bsmSj) { 218 this.treeCheckIndex++
265 item.children = val.children 219 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
266 } 220 this.previewImg.index = 0
267 }) 221 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
268 this.previewImg.imgList = _.cloneDeep(val.children) 222 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
269 if (this.previewImg.index == this.previewImg.imgList.length) {
270 this.previewImg.index = this.previewImg.index - 1
271 } 223 }
272 } else { 224 },
273 this.previewImg.imgList = [] 225 prevPriview () {
274 this.tableData.forEach((item, index) => { 226 if (this.treeCheckIndex >= 1) {
275 if (this.treeCheckId == item.bsmSj) { 227 this.treeCheckIndex--
276 item.children = [] 228 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
277 that.treeCheckIndex = index 229 this.previewImg.index = this.previewImg.imgList.length
278 } 230 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
279 }) 231 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
280 } 232 }
233 },
234 // 材料目录明细初始化
235 clmlInitList () {
236 return new Promise(resolve => {
237 this.unitData = this.$parent.unitData;
238 var formdata = new FormData();
239 formdata.append("bsmSldy", this.unitData[0]?.bsmSldy);
240 formdata.append("bsmSlsq", this.$parent.bsmSlsq);
241 InitClml(formdata).then((res) => {
242 if (res.result.code == 200) {
243 resolve(res.code)
244 if (res.result.result && res.result.result.length > 0) {
245 this.tableData = res.result.result;
246 this.treeCheckId = this.tableData[0].bsmSj;
247 this.title = this.tableData[0].sjmc;
248 this.titleYs = 1;
249 this.titleNum = this.tableData[0].children.length;
281 250
282 }, 251 this.previewImg.imgList = this.tableData[0]?.children;
283 // 左侧菜单点击 252 this.previewImg.bsmSj = this.tableData[0]?.bsmSj;
284 menuClick (item) { 253 }
285 this.checkedId = item.id 254 } else {
286 }, 255 this.$message.error(res.result.message)
287 // 添加材料目录 256 }
288 handleAdd () {
289 this.isDialog = true;
290 },
291 // 上移
292 moveUpward (index, row) {
293 let obj = {
294 xh: row.xh,
295 bsmSlsq: row.bsmSlsq,
296 moveDirection: "UP",
297 };
298 // 接口待调
299 moveClml(obj).then(async (res) => {
300 if (res.code == 200) {
301 let res = await this.clmlInitList()
302 if (res == 200) this.$message({
303 message: '上移成功',
304 type: 'success'
305 }) 257 })
306 } else { 258 })
307 this.$message.error(res.message); 259 },
308 } 260 updateList (val) {
309 }) 261 let that = this
310 }, 262 if (val != null) { //删除最后一张图片时 val=null
311 // 下移 263 this.tableData.forEach(item => {
312 moveDown (index, row) { 264 if (item.bsmSj === val.bsmSj) {
313 let obj = { 265 item.children = val.children
314 xh: row.xh, 266 }
315 bsmSlsq: row.bsmSlsq,
316 moveDirection: "DOWN",
317 }
318 // 接口待调
319 moveClml(obj).then(async (res) => {
320 if (res.code == 200) {
321 let res = await this.clmlInitList()
322 if (res == 200) this.$message({
323 message: '下移成功',
324 type: 'success'
325 }) 267 })
268 this.previewImg.imgList = _.cloneDeep(val.children)
269 if (this.previewImg.index == this.previewImg.imgList.length) {
270 this.previewImg.index = this.previewImg.index - 1
271 }
326 } else { 272 } else {
327 this.$message.error(res.message); 273 this.previewImg.imgList = []
328 } 274 this.tableData.forEach((item, index) => {
329 }) 275 if (this.treeCheckId == item.bsmSj) {
330 }, 276 item.children = []
331 // 新增弹窗保存 277 that.treeCheckIndex = index
332 addSave (data) { 278 }
333 let obj = {
334 bsmSlsq: this.$parent.bsmSlsq,
335 isrequired: "1",
336 sjmc: data.clmc,
337 sjsl: 0,
338 smzt: '',
339 ys: 0,
340 sjlx: data.cllx,
341 sfxjcl: "1", // 是否必选
342 };
343 saveClml(obj).then(async (res) => {
344 if (res.code == 200) {
345 let res = await this.clmlInitList()
346 if (res == 200) this.$message({
347 message: "新增成功",
348 type: "success",
349 }) 279 })
350 } 280 }
351 }); 281
352 }, 282 },
353 // 材料目录删除 283 // 左侧菜单点击
354 handleDelete (index, row) { 284 menuClick (item) {
355 let that = this 285 this.checkedId = item.id
356 this.$confirm('此操作将永久删除该 是否继续?', '提示', { 286 },
357 confirmButtonText: '确定', 287 // 添加材料目录
358 cancelButtonText: '取消', 288 handleAdd () {
359 type: 'warning' 289 this.isDialog = true;
360 }).then(() => { 290 },
361 deleteSjClml({ sjBsm: row.bsmSj }).then(async (res) => { 291 // 上移
292 moveUpward (index, row) {
293 let obj = {
294 xh: row.xh,
295 bsmSlsq: row.bsmSlsq,
296 moveDirection: "UP",
297 };
298 // 接口待调
299 moveClml(obj).then(async (res) => {
362 if (res.code == 200) { 300 if (res.code == 200) {
363 let res = await that.clmlInitList() 301 let res = await this.clmlInitList()
364 if (res == 200) that.$message({ 302 if (res == 200) this.$message({
365 message: "删除成功", 303 message: '上移成功',
366 type: "success", 304 type: 'success'
367 }) 305 })
306 } else {
307 this.$message.error(res.message);
368 } 308 }
369 }) 309 })
370 }).catch(() => { 310 },
371 this.$message({ 311 // 下移
372 type: 'info', 312 moveDown (index, row) {
373 message: '已取消删除' 313 let obj = {
314 xh: row.xh,
315 bsmSlsq: row.bsmSlsq,
316 moveDirection: "DOWN",
317 }
318 // 接口待调
319 moveClml(obj).then(async (res) => {
320 if (res.code == 200) {
321 let res = await this.clmlInitList()
322 if (res == 200) this.$message({
323 message: '下移成功',
324 type: 'success'
325 })
326 } else {
327 this.$message.error(res.message);
328 }
374 }) 329 })
375 }) 330 },
376 }, 331 // 新增弹窗保存
377 // 材料目录点击选中 332 addSave (data) {
378 treeClick (item, index) { 333 let obj = {
379 this.previewImg.index = 0 334 bsmSlsq: this.$parent.bsmSlsq,
380 this.treeCheckId = item?.bsmSj 335 isrequired: "1",
381 this.treeCheckIndex = index 336 sjmc: data.clmc,
382 this.previewImg.imgList = item?.children 337 sjsl: 0,
383 this.previewImg.bsmSj = item?.bsmSj 338 smzt: '',
384 }, 339 ys: 0,
385 // 小图片点击 340 sjlx: data.cllx,
386 imgClick (item, index) { 341 sfxjcl: "1", // 是否必选
387 this.showImg = item; 342 };
388 this.titleYs = index + 1; 343 saveClml(obj).then(async (res) => {
389 }, 344 if (res.code == 200) {
390 // 字典 345 let res = await this.clmlInitList()
391 dicStatus (val, code) { 346 if (res == 200) this.$message({
392 let data = this.$store.getters.dictData[code], 347 message: "新增成功",
393 name = "暂无"; 348 type: "success",
394 if (data) { 349 })
395 data.map((item) => {
396 if (item.dcode == val) {
397 name = item.dname;
398 } 350 }
399 }); 351 });
400 return name; 352 },
401 } 353 // 材料目录删除
354 handleDelete (index, row) {
355 let that = this
356 this.$confirm('此操作将永久删除该 是否继续?', '提示', {
357 confirmButtonText: '确定',
358 cancelButtonText: '取消',
359 type: 'warning'
360 }).then(() => {
361 deleteSjClml({ sjBsm: row.bsmSj }).then(async (res) => {
362 if (res.code == 200) {
363 let res = await that.clmlInitList()
364 if (res == 200) that.$message({
365 message: "删除成功",
366 type: "success",
367 })
368 }
369 })
370 }).catch(() => {
371 this.$message({
372 type: 'info',
373 message: '已取消删除'
374 })
375 })
376 },
377 // 材料目录点击选中
378 treeClick (item, index) {
379 this.previewImg.index = 0
380 this.treeCheckId = item?.bsmSj
381 this.treeCheckIndex = index
382 this.previewImg.imgList = item?.children
383 this.previewImg.bsmSj = item?.bsmSj
384 },
385 // 小图片点击
386 imgClick (item, index) {
387 this.showImg = item;
388 this.titleYs = index + 1;
389 },
390 // 字典
391 dicStatus (val, code) {
392 let data = this.$store.getters.dictData[code],
393 name = "暂无";
394 if (data) {
395 data.map((item) => {
396 if (item.dcode == val) {
397 name = item.dname;
398 }
399 });
400 return name;
401 }
402 },
402 }, 403 },
403 }, 404 };
404 };
405 </script> 405 </script>
406 <style scoped lang='scss'> 406 <style scoped lang='scss'>
407 @import "~@/styles/mixin.scss"; 407 @import "~@/styles/mixin.scss";
408
409 .active {
410 background: $light-blue !important;
411 color: #fff;
412 }
413
414 .required {
415 font-size: 12px;
416 color: $pink;
417 float: left;
418 }
419 408
420 .cl_number { 409 .active {
421 float: right; 410 background: $light-blue !important;
422 } 411 color: #fff;
423 412 }
424 .clxx {
425 width: 100%;
426 display: flex;
427 padding-left: 5px;
428 height: calc(100vh - 125px);
429
430 .left {
431 display: flex;
432 flex-direction: column;
433 justify-content: space-between;
434 413
435 .item { 414 .required {
436 width: 28px; 415 font-size: 12px;
437 height: 49%; 416 color: $pink;
438 @include flex-center; 417 float: left;
439 background-color: #E4E7ED; 418 }
440 border-bottom-right-radius: 10px;
441 padding: 5px;
442 cursor: pointer;
443 transition: all 0.3s;
444 419
445 &:hover { 420 .cl_number {
446 @extend .active; 421 float: right;
447 }
448 }
449 } 422 }
450 423
451 .right { 424 .clxx {
452 width: 100%; 425 width: 100%;
453 height: 100%; 426 display: flex;
427 padding-left: 5px;
428 height: calc(100vh - 125px);
454 429
455 .clmlmx-box { 430 .left {
456 margin: 0 auto; 431 display: flex;
432 flex-direction: column;
433 justify-content: space-between;
457 434
458 .title { 435 .item {
459 text-align: center; 436 width: 28px;
460 height: 60px; 437 height: 49%;
461 line-height: 60px; 438 @include flex-center;
462 border: 1px solid #dfe6ec; 439 background-color: #e4e7ed;
463 font-size: 20px; 440 border-bottom-right-radius: 10px;
464 background: #81d3f81a; 441 padding: 5px;
465 margin-bottom: -1px; 442 cursor: pointer;
443 transition: all 0.3s;
444
445 &:hover {
446 @extend .active;
447 }
466 } 448 }
467 } 449 }
468 450
469 .clyl-box { 451 .right {
470 width: 100%; 452 width: 100%;
471 height: 100%; 453 height: 100%;
472 display: flex;
473
474 .menu-tree {
475 width: 20%;
476 min-width: 160px;
477 height: 100%;
478 margin-right: 10px;
479 border-right: 1px dotted #d9d9d9;
480 padding: 0 15px;
481 454
455 .clmlmx-box {
456 margin: 0 auto;
482 457
483 .item { 458 .title {
484 line-height: 30px;
485 padding-top: 5px;
486 border-bottom: 1px solid #e8e8e8;
487 font-size: 16px;
488 text-align: center; 459 text-align: center;
489 color: $light-blue; 460 height: 60px;
461 line-height: 60px;
462 border: 1px solid #dfe6ec;
463 font-size: 20px;
464 background: #81d3f81a;
465 margin-bottom: -1px;
466 }
467 }
490 468
491 .itemIcon { 469 .clyl-box {
492 float: right; 470 width: 100%;
493 line-height: 60px; 471 height: 100%;
494 cursor: pointer; 472 display: flex;
495 }
496 473
497 .child { 474 .menu-tree {
498 line-height: 32px; 475 width: 20%;
499 border-bottom: 1px solid #e8e8e8; 476 min-width: 160px;
500 padding-left: 10px; 477 height: 100%;
501 color: #6b6b6b; 478 margin-right: 10px;
502 cursor: pointer; 479 border-right: 1px dotted #d9d9d9;
503 box-sizing: border-box; 480 padding: 0 15px;
504 border-radius: 6px;
505 line-height: 20px;
506 transition: all 0.3s;
507 padding: 8px 0;
508 }
509 481
510 .child:hover { 482 .item {
483 line-height: 30px;
484 padding-top: 5px;
485 border-bottom: 1px solid #e8e8e8;
486 font-size: 16px;
487 text-align: center;
511 color: $light-blue; 488 color: $light-blue;
512 transform: scale(1.1);
513 }
514 489
515 .checked { 490 .itemIcon {
516 border: 1px solid $light-blue; 491 float: right;
517 color: $light-blue; 492 line-height: 60px;
493 cursor: pointer;
494 }
495
496 .child {
497 line-height: 32px;
498 border-bottom: 1px solid #e8e8e8;
499 padding-left: 10px;
500 color: #6b6b6b;
501 cursor: pointer;
502 box-sizing: border-box;
503 border-radius: 6px;
504 line-height: 20px;
505 transition: all 0.3s;
506 padding: 8px 0;
507 }
508
509 .child:hover {
510 color: $light-blue;
511 transform: scale(1.1);
512 }
513
514 .checked {
515 border: 1px solid $light-blue;
516 color: $light-blue;
517 }
518 } 518 }
519 } 519 }
520 }
521 520
522 .clyl-img { 521 .clyl-img {
523 width: 75%; 522 width: 75%;
524 height: 100%; 523 height: 100%;
525 background: #f3f4f7; 524 background: #f3f4f7;
526 margin: 0 auto; 525 margin: 0 auto;
527 position: relative; 526 position: relative;
527 }
528 } 528 }
529 } 529 }
530 } 530 }
531 }
532 </style> 531 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <!-- 材料预览 --> 4 <!-- 材料预览 -->
5 <div class="clyl-box"> 5 <div class="clyl-box">
6 <div class="menu-tree"> 6 <div class="menu-tree">
7 <el-button type="primary" native-type="submit" @click="viewDetail" style="width:100%;margin-top:10px;">查看明细</el-button> 7 <el-button type="primary" native-type="submit" @click="viewDetail" style="width:100%;margin-top:10px;">查看明细</el-button>
8 <div class="item"> 8 <div class="item">
9 材料目录({{tableData.length}}) 9 材料目录({{tableData.length}})
10 <div style="margin-top:10px"> 10 <div style="margin-top:10px">
...@@ -24,310 +24,309 @@ ...@@ -24,310 +24,309 @@
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 "./clxxAddDialog.vue"; 32 import clxxAddDialog from "./dialog/clxxAddDialog.vue";
33 import clxxDetailDialog from "./clxxDetailDialog.vue"; 33 import clxxDetailDialog from "./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";
37 export default { 37 export default {
38 components: { clxxAddDialog, imagePreview,clxxDetailDialog }, 38 components: { clxxAddDialog, imagePreview, clxxDetailDialog },
39 data () { 39 data () {
40 return { 40 return {
41 isDialog: false, 41 isDialog: false,
42 detailDialog: false, 42 detailDialog: false,
43 iclass: "", 43 iclass: "",
44 // 材料目录选中 44 // 材料目录选中
45 treeCheckIndex: 0, 45 treeCheckIndex: 0,
46 treeCheckId: "", 46 treeCheckId: "",
47 key: 0, 47 key: 0,
48 tableData: [], 48 tableData: [],
49 previewImg: { 49 previewImg: {
50 // 收件标识码 50 // 收件标识码
51 bsmSj: '', 51 bsmSj: '',
52 bsmSlsq: this.$parent.bsmSlsq, 52 bsmSlsq: this.$parent.bsmSlsq,
53 index: 0, 53 index: 0,
54 selectedIndex: 0, 54 selectedIndex: 0,
55 imgList: [] 55 imgList: []
56 } 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 } 57 }
75 }, 58 },
76 prevPriview () { 59 computed: {
77 if (this.treeCheckIndex >= 1) { 60 ...mapGetters(["dictData"])
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 }, 61 },
85 // 材料目录明细初始化 62 created () {
86 clmlInitList (type) { 63 this.clmlInitList(1)
87 //type 1：列表初始化 2：新增材料 64 },
88 return new Promise(resolve => { 65 methods: {
89 this.unitData = this.$parent.unitData; 66 // 自动预览
90 var formdata = new FormData(); 67 nextPriview () {
91 formdata.append("bsmSldy", this.unitData[0]?.bsmSldy); 68 if (this.treeCheckIndex < this.tableData.length) {
92 formdata.append("bsmSlsq", this.$parent.bsmSlsq); 69 this.treeCheckIndex++
93 InitClml(formdata).then((res) => { 70 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
94 if(res.code == 200){ 71 this.previewImg.index = 0
95 resolve(res.code) 72 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
96 if (res.result && res.result.length > 0) { 73 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
97 this.tableData = res.result; 74 }
98 if(type == 1){ 75 },
99 this.treeClick(this.tableData[0],0); 76 prevPriview () {
100 }else{ 77 if (this.treeCheckIndex >= 1) {
101 //新增材料后刷新列表焦点置于新增的对象上 78 this.treeCheckIndex--
102 this.treeClick(this.tableData[this.tableData.length - 1],this.tableData.length - 1); 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 InitClml(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 }
103 } 104 }
105 } else {
106 this.$message.error(res.message)
104 } 107 }
105 }else{ 108 })
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 }) 109 })
127 this.previewImg.imgList = _.cloneDeep(val.children) 110 },
128 if (this.previewImg.index == this.previewImg.imgList.length) { 111 setChecked (item) {
129 this.previewImg.index = this.previewImg.index - 1 112 this.treeCheckId = item.bsmSj;
130 } 113 this.title = item.sjmc;
131 } else { 114 this.titleYs = 1;
132 this.previewImg.imgList = [] 115 this.titleNum = item.children.length;
133 this.tableData.forEach((item, index) => { 116 this.previewImg.imgList = item.children;
134 if (this.treeCheckId == item.bsmSj) { 117 this.previewImg.bsmSj = item.bsmSj;
135 item.children = [] 118 },
136 that.treeCheckIndex = index 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
137 } 130 }
138 }) 131 } else {
139 } 132 this.previewImg.imgList = []
140 133 this.tableData.forEach((item, index) => {
141 }, 134 if (this.treeCheckId == item.bsmSj) {
142 // 添加材料目录 135 item.children = []
143 handleAdd () { 136 that.treeCheckIndex = index
144 this.isDialog = true; 137 }
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 saveClml(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 }) 138 })
165 } 139 }
166 }); 140
167 }, 141 },
168 // 材料目录点击选中 142 // 添加材料目录
169 treeClick (item, index) { 143 handleAdd () {
170 this.previewImg.index = 0 144 this.isDialog = true;
171 this.treeCheckId = item?.bsmSj 145 },
172 this.treeCheckIndex = index 146 // 新增弹窗保存
173 this.previewImg.imgList = item?.children 147 addSave (data) {
174 this.previewImg.bsmSj = item?.bsmSj 148 let obj = {
175 }, 149 bsmSlsq: this.$parent.bsmSlsq,
176 // 小图片点击 150 isrequired: "1",
177 imgClick (item, index) { 151 sjmc: data.clmc,
178 this.showImg = item; 152 sjsl: 0,
179 this.titleYs = index + 1; 153 smzt: '',
180 }, 154 ys: 0,
181 // 字典 155 sjlx: data.cllx,
182 dicStatus (val, code) { 156 sfxjcl: "1", // 是否必选
183 let data = this.$store.getters.dictData[code], 157 };
184 name = "暂无"; 158 saveClml(obj).then(async (res) => {
185 if (data) { 159 if (res.code == 200) {
186 data.map((item) => { 160 let res = await this.clmlInitList(2)
187 if (item.dcode == val) { 161 if (res == 200) this.$message({
188 name = item.dname; 162 message: "新增成功",
163 type: "success",
164 })
189 } 165 }
190 }); 166 });
191 return name; 167 },
192 } 168 // 材料目录点击选中
193 }, 169 treeClick (item, index) {
194 //查看明细 170 this.previewImg.index = 0
195 viewDetail(){ 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; 196 this.detailDialog = true;
197 }, 197 },
198 //设置tableData 198 //设置tableData
199 setTableData(tableData){ 199 setTableData (tableData) {
200 this.$nextTick(res => { 200 this.$nextTick(res => {
201 this.tableData = tableData; 201 this.tableData = tableData;
202 }) 202 })
203 },
203 }, 204 },
204 }, 205 };
205 };
206 </script> 206 </script>
207 <style scoped lang='scss'> 207 <style scoped lang='scss'>
208 @import "~@/styles/mixin.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 209
221 .cl_number { 210 .active {
222 float: right; 211 background: $light-blue !important;
223 } 212 color: #fff;
224 213 }
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 214
236 .item { 215 .required {
237 width: 28px; 216 font-size: 12px;
238 height: 49%; 217 color: $pink;
239 @include flex-center; 218 float: left;
240 background-color: #E4E7ED; 219 }
241 border-bottom-right-radius: 10px;
242 padding: 5px;
243 cursor: pointer;
244 transition: all 0.3s;
245 220
246 &:hover { 221 .cl_number {
247 @extend .active; 222 float: right;
248 }
249 }
250 } 223 }
251 224
252 .right { 225 .clxx {
253 width: 100%; 226 width: 100%;
254 height: 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;
255 235
256 .clmlmx-box { 236 .item {
257 margin: 0 auto; 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;
258 245
259 .title { 246 &:hover {
260 text-align: center; 247 @extend .active;
261 height: 60px; 248 }
262 line-height: 60px;
263 border: 1px solid #dfe6ec;
264 font-size: 20px;
265 background: #81d3f81a;
266 margin-bottom: -1px;
267 } 249 }
268 } 250 }
269 251
270 .clyl-box { 252 .right {
271 width: 100%; 253 width: 100%;
272 height: 100%; 254 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 255
256 .clmlmx-box {
257 margin: 0 auto;
283 258
284 .item { 259 .title {
285 line-height: 30px;
286 padding-top: 5px;
287 border-bottom: 1px solid #e8e8e8;
288 font-size: 16px;
289 text-align: center; 260 text-align: center;
290 color: $light-blue; 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 }
291 269
292 .itemIcon { 270 .clyl-box {
293 float: right; 271 width: 100%;
294 line-height: 60px; 272 height: 100%;
295 cursor: pointer; 273 display: flex;
296 }
297 274
298 .child { 275 .menu-tree {
299 line-height: 32px; 276 width: 20%;
300 border-bottom: 1px solid #e8e8e8; 277 min-width: 160px;
301 padding-left: 10px; 278 height: 100%;
302 color: #6b6b6b; 279 margin-right: 10px;
303 cursor: pointer; 280 border-right: 1px dotted #d9d9d9;
304 box-sizing: border-box; 281 padding: 0 15px;
305 border-radius: 6px;
306 line-height: 20px;
307 transition: all 0.3s;
308 padding: 8px 0;
309 }
310 282
311 .child:hover { 283 .item {
284 line-height: 30px;
285 padding-top: 5px;
286 border-bottom: 1px solid #e8e8e8;
287 font-size: 16px;
288 text-align: center;
312 color: $light-blue; 289 color: $light-blue;
313 transform: scale(1.1);
314 }
315 290
316 .checked { 291 .itemIcon {
317 border: 1px solid $light-blue; 292 float: right;
318 color: $light-blue; 293 line-height: 60px;
294 cursor: pointer;
295 }
296
297 .child {
298 line-height: 32px;
299 border-bottom: 1px solid #e8e8e8;
300 padding-left: 10px;
301 color: #6b6b6b;
302 cursor: pointer;
303 box-sizing: border-box;
304 border-radius: 6px;
305 line-height: 20px;
306 transition: all 0.3s;
307 padding: 8px 0;
308 }
309
310 .child:hover {
311 color: $light-blue;
312 transform: scale(1.1);
313 }
314
315 .checked {
316 border: 1px solid $light-blue;
317 color: $light-blue;
318 }
319 } 319 }
320 } 320 }
321 }
322 321
323 .clyl-img { 322 .clyl-img {
324 width: 75%; 323 width: 75%;
325 height: 100%; 324 height: 100%;
326 background: #f3f4f7; 325 background: #f3f4f7;
327 margin: 0 auto; 326 margin: 0 auto;
328 position: relative; 327 position: relative;
328 }
329 } 329 }
330 } 330 }
331 } 331 }
332 }
333 </style> 332 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-05-09 09:20:10
5 -->
1 <template> 6 <template>
2 <dialogBox title="新建材料信息" width="20%" isMain v-model="myValue" @closeDialog="closeDialog" @submitForm="handleSubmit" 7 <dialogBox title="新建材料信息" width="20%" isMain v-model="myValue" @closeDialog="closeDialog" @submitForm="handleSubmit"
3 :isFullscreen="false"> 8 :isFullscreen="false">
...@@ -24,48 +29,52 @@ ...@@ -24,48 +29,52 @@
24 </template> 29 </template>
25 30
26 <script> 31 <script>
27 import { mapGetters } from "vuex"; 32 import { mapGetters } from "vuex";
28 export default { 33 export default {
29 props: { 34 props: {
30 value: { type: Boolean, default: false }, 35 value: { type: Boolean, default: false },
31 }, 36 },
32 data () { 37 data () {
33 return { 38 return {
34 myValue: this.value, 39 myValue: this.value,
35 ruleForm: { 40 ruleForm: {
36 cllx: "", 41 cllx: "",
37 clmc: "", 42 clmc: "",
38 }, 43 },
39 }; 44 };
40 }, 45 },
41 computed: { 46 computed: {
42 ...mapGetters(["dictData"]), 47 ...mapGetters(["dictData"]),
43 },
44 watch: {
45 value (val) {
46 this.myValue = val;
47 }, 48 },
48 }, 49 watch: {
49 methods: { 50 value (val) {
50 closeDialog () { 51 this.myValue = val;
51 this.$emit("input", false); 52 },
52 this.ruleForm = {
53 cllx: "",
54 clmc: "",
55 }
56 }, 53 },
57 handleSubmit () { 54 methods: {
58 this.$parent.addSave(this.ruleForm); 55 closeDialog () {
59 this.$emit("input", false); 56 this.$emit("input", false);
57 this.ruleForm = {
58 cllx: "",
59 clmc: "",
60 }
61 },
62 handleSubmit () {
63 this.$parent.addSave(this.ruleForm);
64 this.ruleForm = {
65 cllx: "",
66 clmc: "",
67 }
68 this.$emit("input", false);
69 },
60 }, 70 },
61 }, 71 };
62 };
63 </script> 72 </script>
64 <style scoped lang="scss"> 73 <style scoped lang="scss">
65 .submit-button { 74 .submit-button {
66 text-align: center; 75 text-align: center;
67 height: 52px; 76 height: 52px;
68 padding-top: 10px; 77 padding-top: 10px;
69 background-color: #fff; 78 background-color: #fff;
70 } 79 }
71 </style> 80 </style>
......