Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
2cf87573 by 任超
Options

style:材料上传

1 parent f7048649
Inline Side-by-side
Showing 8 changed files with 229 additions and 163 deletions
...@@ -5,4 +5,4 @@ NODE_ENV=development ...@@ -5,4 +5,4 @@ NODE_ENV=development
5 VUE_APP_BASE_API = '/bdcdj' 5 VUE_APP_BASE_API = '/bdcdj'
6 6
7 # 开发环境 7 # 开发环境
8 VUE_APP_API_BASE_URL = 'http://192.168.2.95:8018' 8 VUE_APP_API_BASE_URL = 'http://192.168.2.88:8018'
......
...@@ -56,4 +56,19 @@ export function getWorkFlowImage (bsmSlsq) { ...@@ -56,4 +56,19 @@ export function getWorkFlowImage (bsmSlsq) {
56 bsmSlsq: bsmSlsq 56 bsmSlsq: bsmSlsq
57 } 57 }
58 }) 58 })
59 }
60 // 上传单个文件
61 export function sjClmxUpload (data) {
62 return request({
63 url: 'zhcx/sjClmx/upload',
64 method: 'post',
65 data
66 })
67 }
68 // 删除上传文件
69 export function sjClmxDelete (bsmClmx) {
70 return request({
71 url: 'zhcx/sjClmx/delete?bsmClmx=' + bsmClmx,
72 method: 'delete'
73 })
59 } 74 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,7 +3,6 @@ import Popup from './index.vue' ...@@ -3,7 +3,6 @@ import Popup from './index.vue'
3 3
4 const PopupBox = Vue.extend(Popup) 4 const PopupBox = Vue.extend(Popup)
5 Popup.install = function (data) { 5 Popup.install = function (data) {
6 console.log(data)
7 let instance = new PopupBox({ 6 let instance = new PopupBox({
8 data 7 data
9 }).$mount() 8 }).$mount()
......
1 <template> 1 <template>
2 <transition name="fade" mode="out-in" v-if="isShow"> 2 <transition name="fade" mode="out-in" v-if="isShow">
3 <div class="ls-mask" v-loading="loading"> 3 <div class="ls-mask" v-loading="loading">
4 <div class="ls-mask-window" :style="{'width':width,'height':height}"> 4 <div class="ls-mask-window" :style="{'width':width,'height':height}">
5 <div :style="{'text-align':titleStyle}"><b >{{title}}</b></div> 5 <div :style="{'text-align':titleStyle}"><b>{{title}}</b></div>
6 <i class="el-icon-close" @click="onCancel" ></i> 6 <i class="el-icon-close" @click="onCancel"></i>
7 <div class="ls-mask-content"> 7 <div class="ls-mask-content">
8 <component :is="editItem" ref='childRef' @loading='loadingFn' :formData='formData' /> 8 <component :is="editItem" ref='childRef' @loading='loadingFn' :formData='formData' />
9 </div> 9 </div>
10 <div class="ls-mask-footer"> 10 <div class="ls-mask-footer">
11 <el-button type="primary" @click="onConfirm">{{confirmText}}</el-button> 11 <el-button type="primary" @click="onConfirm">{{confirmText}}</el-button>
12 <el-button @click="onCancel">{{cancelText}}</el-button> 12 <el-button @click="onCancel">{{cancelText}}</el-button>
13 </div>
14 </div> 13 </div>
15 </div> 14 </div>
16 </transition> 15 </div>
17 </template> 16 </transition>
18 <script> 17 </template>
19 export default { 18 <script>
20 name: 'index', 19 export default {
21 data () { 20 name: 'index',
22 return { 21 data () {
23 title: '提示', 22 return {
24 cancelText: '取消', 23 title: '提示',
25 confirmText: '确认', 24 cancelText: '取消',
26 isSync: false, 25 confirmText: '确认',
27 isShow: false, 26 isSync: false,
28 cancel: function () {}, 27 isShow: false,
29 confirm: function () {}, 28 cancel: function () { },
30 editItem:"", 29 confirm: function () { },
31 titleStyle:'', 30 editItem: "",
32 width:"75%", 31 titleStyle: 'center',
33 height:"500px", 32 width: "75%",
34 formData:"",//父组件传递的参数 负责传给子组件 33 height: "500px",
35 } 34 formData: "",//父组件传递的参数 负责传给子组件
36 }, 35 }
37 props:{ 36 },
38 loading: { type: Boolean, default: false }, 37 props: {
39 }, 38 loading: { type: Boolean, default: false },
40 watch:{ 39 },
41 isShow(a,b){ 40 watch: {
42 this.editItem = this.loadViewFn(this.editItem) 41 isShow (a, b) {
43 }, 42 this.editItem = this.loadViewFn(this.editItem)
44 }, 43 },
45 methods: { 44 },
46 onCancel () { 45 methods: {
47 this.isShow = false 46 onCancel () {
48 this.cancel() 47 this.isShow = false
49 }, 48 this.cancel()
50 onConfirm () { 49 },
51 this.loading = true 50 onConfirm () {
52 let isOk = this.$refs.childRef.childFn() //子组件方法 必须命名一致 51 this.loading = true
53 if(isOk || isOk==undefined){ //如果子组件没有 return false 就代表子组件方法一切正常 52 let isOk = this.$refs.childRef.childFn() //子组件方法 必须命名一致
54 this.isShow = false 53 if (isOk || isOk == undefined) { //如果子组件没有 return false 就代表子组件方法一切正常
55 this.confirm() 54 this.isShow = false
56 }else{ //否则 55 this.confirm()
57 console.log('弹窗不关闭') 56 } else { //否则
58 } 57 console.log('弹窗不关闭')
59 }, 58 }
60 loadingFn(e){ //加载状态 59 },
61 this.loading = e 60 loadingFn (e) { //加载状态
62 }, 61 this.loading = e
63 loadViewFn (view) { 62 },
64 return (r) => 63 loadViewFn (view) {
65 require.ensure([], () => 64 return (r) =>
65 require.ensure([], () =>
66 r(require(`@/views/${view}.vue`)) 66 r(require(`@/views/${view}.vue`))
67 ); 67 );
68 }, 68 },
69 }
70 }
71 </script>
72 <style scoped>
73 #app{
74 overflow: hidden;
75 }
76 .ls-mask{
77 width: 100%;
78 height: 100%;
79 z-index: 2001;
80 position: fixed;
81 left: 0;
82 top: 0;
83 background: rgba(0,0,0,0.3);
84 }
85 .ls-mask-window{
86 padding-top: 20px;
87 background: white;
88 position: absolute;
89 left: 50%;
90 top: 50%;
91 transform: translate(-50%,-50%);
92 }
93 .ls-mask-window b{
94 padding-left: 12px;
95 }
96 .ls-mask-content{
97 padding: 20px;
98 text-align: center;
99 }
100 .ls-mask-footer{
101 height: 45px;
102 border-top: 1px solid #f0f0f0;
103 display: flex;
104 justify-content: end;
105 padding: 2px;
106 position: absolute;
107 width: 98%;
108 bottom: 10px;
109 right: 12px;
110 }
111 /deep/.el-icon-close{
112 position: absolute;
113 top: 20px;
114 right: 12px;
115 font-size: 20px;
116 cursor: pointer;
117 }
118 /deep/.el-loading-mask{
119 background: none;
120 } 69 }
121 </style> 70 }
71 </script>
72 <style scoped>
73 #app {
74 overflow: hidden;
75 }
76
77 .ls-mask {
78 width: 100%;
79 height: 100%;
80 z-index: 2001;
81 position: fixed;
82 left: 0;
83 top: 0;
84 background: rgba(0, 0, 0, 0.3);
85 }
86
87 .ls-mask-window {
88 padding-top: 20px;
89 background: white;
90 position: absolute;
91 left: 50%;
92 top: 50%;
93 transform: translate(-50%, -50%);
94 }
95
96 .ls-mask-window b {
97 padding-left: 12px;
98 }
99
100 .ls-mask-content {
101 padding: 20px;
102 text-align: center;
103 }
104
105 .ls-mask-footer {
106 height: 45px;
107 border-top: 1px solid #f0f0f0;
108 display: flex;
109 justify-content: flex-end;
110 padding: 2px;
111 position: absolute;
112 width: 98%;
113 bottom: 10px;
114 right: 12px;
115 }
116
117 /deep/.el-icon-close {
118 position: absolute;
119 top: 20px;
120 right: 12px;
121 font-size: 20px;
122 cursor: pointer;
123 }
124
125 /deep/.el-loading-mask {
126 background: none;
127 }
128 </style>
122 129
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -11,7 +11,7 @@ const service = axios.create({ ...@@ -11,7 +11,7 @@ const service = axios.create({
11 withCredentials: true, //是否允许跨域 11 withCredentials: true, //是否允许跨域
12 headers: { 12 headers: {
13 'Content-Type': 'application/json; charset=utf-8', 13 'Content-Type': 'application/json; charset=utf-8',
14 'Authorization':'bearer AT-16-oqkOHiUSsDdFA-eAZ49k2rJQDTzQpClO' 14 'Authorization': 'bearer AT-16-oqkOHiUSsDdFA-eAZ49k2rJQDTzQpClO'
15 }, 15 },
16 timeout: 15000 16 timeout: 15000
17 }) 17 })
...@@ -85,6 +85,9 @@ function handleErrorData (errMes) { ...@@ -85,6 +85,9 @@ function handleErrorData (errMes) {
85 case 504: 85 case 504:
86 Message.error("网络超时!"); 86 Message.error("网络超时!");
87 break; 87 break;
88 case 2002:
89 Message.error(errMes.message);
90 break;
88 default: 91 default:
89 Message.error("服务正在联调中，请稍后!"); 92 Message.error("服务正在联调中，请稍后!");
90 break; 93 break;
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 </div> 8 </div>
9 <div class="img-list-wrap"> 9 <div class="img-list-wrap">
10 <div v-for="(img, i) in previewImg.imgList" :key="i"> 10 <div v-for="(img, i) in previewImg.imgList" :key="i">
11 <photo-zoom :url="img.url" :bigWidth="165" v-if="i === previewImg.index" :scale="2" 11 <photo-zoom :url="img.fjurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
12 overlayStyle="width: 100%;height: 563px;"> 12 overlayStyle="width: 100%;height: 563px;">
13 </photo-zoom> 13 </photo-zoom>
14 </div> 14 </div>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
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}"
28 @click="showCurrent(index)"> 28 @click="showCurrent(index)">
29 <img :src="img.url"> 29 <img :src="img.fjurl">
30 </li> 30 </li>
31 </ul> 31 </ul>
32 </div> 32 </div>
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
37 </template> 37 </template>
38 <script> 38 <script>
39 import PhotoZoom from '@/components/photo-zoom' 39 import PhotoZoom from '@/components/photo-zoom'
40 import { sjClmxUpload, sjClmxDelete } from '@/api/jsydsyqFlow'
40 import publicPicture from '@/components/publicPicture/index.vue' 41 import publicPicture from '@/components/publicPicture/index.vue'
41 export default { 42 export default {
42 name: 'PreviewImage', 43 name: 'PreviewImage',
...@@ -57,7 +58,7 @@ export default { ...@@ -57,7 +58,7 @@ export default {
57 degree: 0 58 degree: 0
58 }, 59 },
59 // 缩略图 60 // 缩略图
60 thumbnailImages: this.previewImg.imgList, 61 thumbnailImages: [],
61 showViewer: false, 62 showViewer: false,
62 initialIndex: undefined, 63 initialIndex: undefined,
63 allLi: [], 64 allLi: [],
...@@ -66,11 +67,16 @@ export default { ...@@ -66,11 +67,16 @@ export default {
66 watch: { 67 watch: {
67 previewImg: { 68 previewImg: {
68 handler (newValue, oldValue) { 69 handler (newValue, oldValue) {
69 this.allLi = _.cloneDeep(newValue.imgList).map(item => item.url) 70 this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fjurl)
71 this.thumbnailImages = newValue.imgList
70 }, 72 },
71 deep: true 73 deep: true
72 } 74 }
73 }, 75 },
76 created () {
77 this.allLi = _.cloneDeep(this.previewImg.imgList).map(item => item.fjurl)
78 this.thumbnailImages = this.previewImg.imgList
79 },
74 computed: { 80 computed: {
75 isSingle () { 81 isSingle () {
76 return this.previewImg.imgList.length <= 1 82 return this.previewImg.imgList.length <= 1
...@@ -140,22 +146,43 @@ export default { ...@@ -140,22 +146,43 @@ export default {
140 }, 146 },
141 async handleChange (file) { 147 async handleChange (file) {
142 let data = _.cloneDeep(this.previewImg.imgList[this.previewImg.index]) 148 let data = _.cloneDeep(this.previewImg.imgList[this.previewImg.index])
149 var formdata = new FormData();
150 formdata.append("file", file.raw);
151 formdata.append("bsmSj", this.previewImg.bsmSj);
152 formdata.append("bsmSlsq", this.previewImg.bsmSlsq);
153 sjClmxUpload(formdata).then((res) => {
154 if (res.code == 200) {
155 this.$emit('updateList', res.result)
156 this.$message({
157 message: '上传成功!',
158 type: 'success'
159 })
160 }
161 })
143 }, 162 },
144 handleDelete () { 163 handleDelete () {
145 let _this = this 164 let that = this
146 this.$confirm('此操作将永久该附件, 是否继续?', '提示', { 165 this.$confirm('此操作将永久删除, 是否继续?', '提示', {
147 confirmButtonText: '确定', 166 confirmButtonText: '确定',
148 cancelButtonText: '取消', 167 cancelButtonText: '取消',
149 type: 'warning' 168 type: 'warning'
150 }).then(async () => { 169 }).then(async () => {
151 let bsmFileList = [] 170 let bsmClmx = this.previewImg.imgList[this.previewImg.index].bsmClmx
152 bsmFileList[0] = this.previewImg.imgList[this.previewImg.index].bsmFile 171 sjClmxDelete(bsmClmx).then(res => {
172 if (res.code == 200) {
173 that.$emit('updateList', res.result)
174 that.$message({
175 message: '删除成功!',
176 type: 'success'
177 })
178 }
179 })
153 }).catch(() => { 180 }).catch(() => {
154 this.$message({ 181 this.$message({
155 type: 'info', 182 type: 'info',
156 message: '已取消删除' 183 message: '已取消删除'
157 }); 184 })
158 }); 185 })
159 } 186 }
160 } 187 }
161 } 188 }
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 </el-collapse-transition> 29 </el-collapse-transition>
30 </div> 30 </div>
31 </div> 31 </div>
32 <image-preview :previewImg="previewImg" /> 32 <image-preview :previewImg="previewImg" @updateList="updateList" />
33 </div> 33 </div>
34 </div> 34 </div>
35 <clxxAddDialog v-model="isDialog" /> 35 <clxxAddDialog v-model="isDialog" />
...@@ -40,7 +40,6 @@ import { mapGetters } from "vuex"; ...@@ -40,7 +40,6 @@ import { mapGetters } from "vuex";
40 import clxxAddDialog from "./clxxAddDialog.vue"; 40 import clxxAddDialog from "./clxxAddDialog.vue";
41 import imagePreview from '@/views/components/imagePreview.vue' 41 import imagePreview from '@/views/components/imagePreview.vue'
42 import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js"; 42 import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js";
43 import { async } from "q";
44 export default { 43 export default {
45 components: { clxxAddDialog, imagePreview }, 44 components: { clxxAddDialog, imagePreview },
46 data () { 45 data () {
...@@ -191,11 +190,14 @@ export default { ...@@ -191,11 +190,14 @@ export default {
191 key: 0, 190 key: 0,
192 tableData: [], 191 tableData: [],
193 previewImg: { 192 previewImg: {
193 // 收件标识码
194 bsmSj: '',
195 bsmSlsq: this.$parent.bsmSlsq,
194 index: 0, 196 index: 0,
195 selectedIndex: 0, 197 selectedIndex: 0,
196 imgList: [ 198 imgList: [
197 { 199 {
198 url: 'https://img2.baidu.com/it/u=2955521104,3257476296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1111' 200 fjurl: 'https://img2.baidu.com/it/u=2955521104,3257476296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1111'
199 } 201 }
200 ] 202 ]
201 } 203 }
...@@ -213,21 +215,34 @@ export default { ...@@ -213,21 +215,34 @@ export default {
213 return new Promise(resolve => { 215 return new Promise(resolve => {
214 this.unitData = this.$parent.unitData; 216 this.unitData = this.$parent.unitData;
215 var formdata = new FormData(); 217 var formdata = new FormData();
216 formdata.append("bsmSldy", this.unitData[0].bsmSldy); 218 formdata.append("bsmSldy", this.unitData[0]?.bsmSldy);
217 formdata.append("bsmSlsq", this.$parent.bsmSlsq); 219 formdata.append("bsmSlsq", this.$parent.bsmSlsq);
218 clmlInit(formdata).then((res) => { 220 clmlInit(formdata).then((res) => {
219 resolve(res.code) 221 resolve(res.code)
220 if (res.result.result) { 222 if (res.result.result && res.result.result.length > 0) {
221 this.tableData = res.result.result; 223 this.tableData = res.result.result;
222 this.treeCheckId = this.tableData[0].bsmSj; 224 this.treeCheckId = this.tableData[0].bsmSj;
223 this.title = this.tableData[0].sjmc; 225 this.title = this.tableData[0].sjmc;
224 this.titleYs = 1; 226 this.titleYs = 1;
225 this.titleNum = this.tableData[0].children.length; 227 this.titleNum = this.tableData[0].children.length;
228
229 this.previewImg.imgList = this.tableData[0]?.children;
230 this.previewImg.bsmSj = this.tableData[0]?.bsmSj;
226 } 231 }
227 console.log(this.tableData);
228 }) 232 })
229 }) 233 })
230 }, 234 },
235 updateList (val) {
236 this.tableData.forEach(item => {
237 if (item.bsmSj === val.bsmSj) {
238 item.children = val.children
239 }
240 })
241 this.previewImg.imgList = _.cloneDeep(val.children)
242 if (this.previewImg.index == this.previewImg.imgList.length) {
243 this.previewImg.index = this.previewImg.index - 1
244 }
245 },
231 // 左侧菜单点击 246 // 左侧菜单点击
232 menuClick (item) { 247 menuClick (item) {
233 this.checkedId = item.id 248 this.checkedId = item.id
...@@ -278,15 +293,8 @@ export default { ...@@ -278,15 +293,8 @@ export default {
278 }, 293 },
279 // 新增弹窗保存 294 // 新增弹窗保存
280 addSave (data) { 295 addSave (data) {
281 let maxXh = 0;
282 this.tableData && this.tableData.forEach((item) => {
283 if (item.xh > maxXh) {
284 maxXh = item.xh;
285 }
286 });
287 let obj = { 296 let obj = {
288 bsmSlsq: this.id, 297 bsmSlsq: this.$parent.bsmSlsq,
289 xh: maxXh + 1,
290 isrequired: "1", 298 isrequired: "1",
291 sjmc: data.clmc, 299 sjmc: data.clmc,
292 sjsl: 0, 300 sjsl: 0,
...@@ -295,31 +303,39 @@ export default { ...@@ -295,31 +303,39 @@ export default {
295 sjlx: data.cllx, 303 sjlx: data.cllx,
296 sfxjcl: "1", // 是否必选 304 sfxjcl: "1", // 是否必选
297 }; 305 };
298 save(obj).then((res) => { 306 save(obj).then(async (res) => {
299 console.log(res);
300 if (res.code == 200) { 307 if (res.code == 200) {
301 this.$message({ 308 let res = await this.clmlInitList()
309 if (res == 200) this.$message({
302 message: "新增成功", 310 message: "新增成功",
303 type: "success", 311 type: "success",
304 }); 312 })
305 this.tableData = res.result ? res.result : [];
306 // 加载表格
307 this.clmlmxInit();
308 } 313 }
309 }); 314 });
310 }, 315 },
311 // 材料目录删除 316 // 材料目录删除
312 handleDelete (index, row) { 317 handleDelete (index, row) {
313 clmlDelete({ sjBsm: row.bsmSj }).then((res) => { 318 let that = this
314 if (res.code == 200) { 319 this.$confirm('此操作将永久删除该 是否继续?', '提示', {
315 this.$message({ 320 confirmButtonText: '确定',
316 message: "删除成功", 321 cancelButtonText: '取消',
317 type: "success", 322 type: 'warning'
318 }); 323 }).then(() => {
319 // 加载表格 324 clmlDelete({ sjBsm: row.bsmSj }).then(async (res) => {
320 this.clmlmxInit(); 325 if (res.code == 200) {
321 } 326 let res = await that.clmlInitList()
322 }); 327 if (res == 200) that.$message({
328 message: "删除成功",
329 type: "success",
330 })
331 }
332 })
333 }).catch(() => {
334 this.$message({
335 type: 'info',
336 message: '已取消删除'
337 })
338 })
323 }, 339 },
324 // 材料目录关闭收起 340 // 材料目录关闭收起
325 iconClick () { 341 iconClick () {
...@@ -333,9 +349,8 @@ export default { ...@@ -333,9 +349,8 @@ export default {
333 // 材料目录点击选中 349 // 材料目录点击选中
334 treeClick (item) { 350 treeClick (item) {
335 this.treeCheckId = item.bsmSj; 351 this.treeCheckId = item.bsmSj;
336 this.title = item.sjmc; 352 this.previewImg.imgList = item?.children;
337 this.titleYs = 1; 353 this.previewImg.bsmSj = item?.bsmSj;
338 this.titleNum = item.children.length;
339 }, 354 },
340 // 小图片点击 355 // 小图片点击
341 imgClick (item, index) { 356 imgClick (item, index) {
......
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
57 <zc ref="zcDialogRef" v-model="zcDialog" :queryForm="queryForm" /> 57 <zc ref="zcDialogRef" v-model="zcDialog" :queryForm="queryForm" />
58 <thDialog ref="thdialogRef" v-model="thflag" :bsmBusiness="bsmBusiness" :queryForm="queryForm" /> 58 <thDialog ref="thdialogRef" v-model="thflag" :bsmBusiness="bsmBusiness" :queryForm="queryForm" />
59 <zslqDialog ref="zslqDialog" v-model="zslqDialog" /> 59 <zslqDialog ref="zslqDialog" v-model="zslqDialog" />
60 <zsylDialog v-model="zsylFlag" /> 60 <!-- <zsylDialog v-model="zsylFlag" /> -->
61 </div> 61 </div>
62 </template> 62 </template>
63 <script> 63 <script>
...@@ -65,7 +65,7 @@ import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js"; ...@@ -65,7 +65,7 @@ import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
65 import comMsg from "@/views/components/comMsg.vue"; 65 import comMsg from "@/views/components/comMsg.vue";
66 import zc from "./components/zc.vue"; 66 import zc from "./components/zc.vue";
67 import thDialog from "./components/th.vue"; 67 import thDialog from "./components/th.vue";
68 import zsylDialog from "./components/zsyl"; 68 // import zsylDialog from "./components/zsyl";
69 import zslqDialog from "./components/zslq"; 69 import zslqDialog from "./components/zslq";
70 export default { 70 export default {
71 /**注册组件*/ 71 /**注册组件*/
......