雷海东 / factory-web · 提交

转到一个项目

作者 张晓杰
提交 7293ff825ceccde64f35b340252610f1e85dbc82 1 个父辈 4259b42e

修改生产计划查看详情样式

内嵌 并排对比
正在显示 2 个修改的文件 包含 269 行增加 和 81 行删除
@@ -51,27 +51,97 @@ @@ -51,27 +51,97 @@
51 <th scop="col" class="table_lable">已派发工时：</th> 51 <th scop="col" class="table_lable">已派发工时：</th>
52 <th scop="col">{{model.dispatchedWorkingHours}}</th> 52 <th scop="col">{{model.dispatchedWorkingHours}}</th>
53 </tr> 53 </tr>
54 - <tr v-if="model.files">  
55 - <th scop="col" class="table_lable">文件：</th> 54 + <tr v-if="model.files != null">
  55 + <th scop="col" class="table_lable">生产图文件：</th>
56 <th scop="col"> 56 <th scop="col">
57 <div v-for="(item,index) in model.files.split(',')" :key="index"> 57 <div v-for="(item,index) in model.files.split(',')" :key="index">
58 <a :href=httpUrl+item target="_blank">{{index+1}}. {{item.replace("temp/","")}}</a><br> 58 <a :href=httpUrl+item target="_blank">{{index+1}}. {{item.replace("temp/","")}}</a><br>
59 </div> 59 </div>
60 </th> 60 </th>
61 </tr> 61 </tr>
  62 + <tr v-if="model.designFile != null">
  63 + <th scop="col" class="table_lable">设计图文件：</th>
  64 + <th scop="col">
  65 + <div v-for="(item,index) in model.designFile.split(',')" :key="index">
  66 + <a :href=httpUrl+item target="_blank">{{index+1}}. {{item.replace("temp/","")}}</a><br>
  67 + </div>
  68 + </th>
  69 + </tr>
62 </table> 70 </table>
63 </div> 71 </div>
64 - <div style="display:inline-block;width:45%;" v-if="model.pics"> 72 + <!-- <div class="imgDiv" v-if="model.pics">
65 <div class="show" > 73 <div class="show" >
66 - <!-- <img :src="getImgView(show)" :preview="num" alt="" height="100px"> -->  
67 - <img :src="httpUrl+show" :preview="num" alt="" height="100px"> 74 + <img :src="httpUrl+showPic" :preview="num" alt="" height="100px">
68 </div> 75 </div>
69 <div class="imgBox"> 76 <div class="imgBox">
70 <div :class="[num == index?'borderShow':'']" v-for="(item,index) of picList" :key="index" @click="onImg(index)"> 77 <div :class="[num == index?'borderShow':'']" v-for="(item,index) of picList" :key="index" @click="onImg(index)">
71 - <!-- <img :src="getImgView(item)" height="25px" alt="" style="margin-left: 20px;"> -->  
72 <img :src="httpUrl +(item)" height="25px" alt="" style="margin-left: 20px;"> 78 <img :src="httpUrl +(item)" height="25px" alt="" style="margin-left: 20px;">
73 </div> 79 </div>
74 </div> 80 </div>
  81 + <div class="tipCss">生产图</div>
  82 + </div> -->
  83 + <!-- <div class="imgDiv" v-if="model.designPic">
  84 +
  85 + <div class="show" >
  86 + <img :src="httpUrl+showDesignPic" :preview="numDesign" alt="" height="100px">
  87 + </div>
  88 + <div class="imgBox">
  89 + <div :class="[numDesign == index?'borderShow':'']" v-for="(item,index) of designPicList" :key="index" @click="onDesignImg(index)">
  90 + <img :src="httpUrl +(item)" height="25px" alt="" style="margin-left: 20px;">
  91 + </div>
  92 + </div>
  93 +
  94 + <div class="tipCss">设计图</div>
  95 + </div> -->
  96 + <!-- <div class="imgDiv" v-if="model.designPic">
  97 + <div class="show" >
  98 + <img :src="httpUrl+showDesignPic" :preview="numDesign" alt="" height="100px">
  99 + </div>
  100 + <div class="imgBox">
  101 + <div :class="[numDesign == index?'borderShow':'']" v-for="(item,index) of designPicList" :key="index" @click="onDesignImg(index)">
  102 + <img :src="httpUrl +(item)" height="25px" alt="" style="margin-left: 20px;">
  103 + </div>
  104 + </div>
  105 + </div> -->
  106 + <div class="imgDiv">
  107 + <div v-if="model.pics">
  108 + <a-carousel arrows>
  109 + <div
  110 + slot="prevArrow"
  111 + slot-scope="props"
  112 + class="custom-slick-arrow"
  113 + style="left: 10px;zIndex: 1"
  114 + >
  115 + <a-icon type="left-circle" />
  116 + </div>
  117 + <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
  118 + <a-icon type="right-circle" />
  119 + </div>
  120 + <div v-for="(item,index) in picList" :key="index" @click="onImg(index)">
  121 + <img :src="httpUrl +(item)" class="imgg" :preview="num" />
  122 + </div>
  123 + </a-carousel>
  124 + <div class="tipCss">生产图</div>
  125 + </div>
  126 + <div v-if="model.designPic != null" style="margin-top: 50px;">
  127 + <a-carousel arrows>
  128 + <div
  129 + slot="prevArrow"
  130 + slot-scope="props"
  131 + class="custom-slick-arrow"
  132 + style="left: 10px;zIndex: 1"
  133 + >
  134 + <a-icon type="left-circle" />
  135 + </div>
  136 + <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
  137 + <a-icon type="right-circle" />
  138 + </div>
  139 + <div v-for="(item, index) in designPicList" :key="index" @click="onDesignImg(index)">
  140 + <img :src="httpUrl +(item)" class="imgg" :preview="numDesign" />
  141 + </div>
  142 + </a-carousel>
  143 + <div class="tipCss">设计图</div>
  144 + </div>
75 </div> 145 </div>
76 </div> 146 </div>
77 </a-spin> 147 </a-spin>
@@ -111,8 +181,11 @@ export default { @@ -111,8 +181,11 @@ export default {
111 181
112 confirmLoading: false, 182 confirmLoading: false,
113 picList:"", 183 picList:"",
114 - show:"", 184 + designPicList:"",
  185 + showPic:"",
  186 + showDesignPic:"",
115 num: 0, 187 num: 0,
  188 + numDesign:0,
116 // url: { 189 // url: {
117 // list: "/order_form/tblOrderForm/list", 190 // list: "/order_form/tblOrderForm/list",
118 // delete: "/order_form/tblOrderForm/delete", 191 // delete: "/order_form/tblOrderForm/delete",
@@ -135,13 +208,20 @@ export default { @@ -135,13 +208,20 @@ export default {
135 }, 208 },
136 edit(record) { 209 edit(record) {
137 this.picList = "" 210 this.picList = ""
  211 + this.designPicList=""
138 this.model = Object.assign({}, record); 212 this.model = Object.assign({}, record);
139 console.log('this.model',this.model) 213 console.log('this.model',this.model)
140 if(this.model.pics){ 214 if(this.model.pics){
141 - var picList = this.model.pics.split(',')  
142 - console.log('picList',picList)  
143 - this.picList = picList  
144 - this.show = this.picList[0]; 215 + var picTemp = this.model.pics.split(',')
  216 + // console.log('pics',picTemp)
  217 + this.picList = picTemp
  218 + this.showPic = this.picList[0];
  219 + }
  220 + if(this.model.designPic){
  221 + var designPicTemp = this.model.designPic.split(',')
  222 + // console.log('designPic',designPicTemp)
  223 + this.designPicList = designPicTemp
  224 + this.showDesignPic = this.designPicList[0];
145 } 225 }
146 226
147 this.visible = true; 227 this.visible = true;
@@ -151,15 +231,19 @@ export default { @@ -151,15 +231,19 @@ export default {
151 var that = this; 231 var that = this;
152 listProductType().then((res)=>{ 232 listProductType().then((res)=>{
153 if(res.success){ 233 if(res.success){
154 - // that.treeData = [];  
155 that.options = res.result 234 that.options = res.result
156 } 235 }
157 }); 236 });
158 }, 237 },
159 onImg(e){ 238 onImg(e){
160 - this.show = this.picList[e]; 239 + console.log('e==',e)
  240 + this.showPic = this.picList[e];
161 this.num = e 241 this.num = e
162 }, 242 },
  243 + onDesignImg(e){
  244 + this.showDesignPic = this.designPicList[e];
  245 + this.numDesign = e
  246 + },
163 close() { 247 close() {
164 this.$emit('close'); 248 this.$emit('close');
165 this.visible = false; 249 this.visible = false;
@@ -194,6 +278,41 @@ export default { @@ -194,6 +278,41 @@ export default {
194 } 278 }
195 </script> 279 </script>
196 <style scoped> 280 <style scoped>
  281 +
  282 +.ant-carousel >>> .slick-slide {
  283 + text-align: center;
  284 + height: 200px;
  285 + line-height: 160px;
  286 + /* background: #e7e7e8d2; */
  287 + overflow: hidden;
  288 +}
  289 +
  290 +.ant-carousel >>> .custom-slick-arrow {
  291 + width: 25px;
  292 + height: 25px;
  293 + font-size: 25px;
  294 + color: #cbc9c9;
  295 + /* background-color: rgba(31, 45, 61, 0.11); */
  296 + opacity: 0.3;
  297 +}
  298 +.ant-carousel >>> .custom-slick-arrow:before {
  299 + display: none;
  300 +}
  301 +.ant-carousel >>> .custom-slick-arrow:hover {
  302 + opacity: 0.5;
  303 +}
  304 +
  305 +.ant-carousel >>> .slick-slide h3 {
  306 + color: #cbc9c9;
  307 +}
  308 +.imgg{
  309 + /* width: 200px; */
  310 + height: 160px;
  311 + margin: auto
  312 +}
  313 +.imgg:hover{
  314 + cursor: pointer;
  315 + }
197 tr { 316 tr {
198 height: 30px; /* 设置行高为50px */ 317 height: 30px; /* 设置行高为50px */
199 /* padding: 10px; 设置行内填充为10px */ 318 /* padding: 10px; 设置行内填充为10px */
@@ -220,13 +339,23 @@ tr { @@ -220,13 +339,23 @@ tr {
220 .borderShow{ 339 .borderShow{
221 border: 2px solid rgb(141, 134, 134); 340 border: 2px solid rgb(141, 134, 134);
222 } 341 }
223 - 342 +.imgDiv{
  343 + display:inline-block;
  344 + width:40%;
  345 +}
224 .show img{ 346 .show img{
225 margin-bottom: 10px; 347 margin-bottom: 10px;
226 height: 200px; 348 height: 200px;
227 width: 200px; 349 width: 200px;
  350 + margin-left: 12%;
228 } 351 }
229 .show:hover{ 352 .show:hover{
230 cursor: pointer; 353 cursor: pointer;
231 } 354 }
  355 +.tipCss{
  356 + font-weight: bold;
  357 + /* padding-top: 13px; */
  358 + padding-left: 46%;
  359 + margin-top: -15px;
  360 + }
232 </style> 361 </style>
@@ -2,75 +2,83 @@ @@ -2,75 +2,83 @@
2 <a-spin :spinning="confirmLoading"> 2 <a-spin :spinning="confirmLoading">
3 <j-form-container :disabled="formDisabled"> 3 <j-form-container :disabled="formDisabled">
4 <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail"> 4 <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
5 - <div class="align-colon">  
6 - <p style="margin-bottom: -5px; margin-left: 50px">  
7 - <span>订单号：</span  
8 - ><a-input v-model="model.orderId" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
9 - </p>  
10 - <p style="margin-bottom: -5px; margin-left: 50px">  
11 - <span>订货单位：</span  
12 - ><a-input v-model="model.orderCompany" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
13 - </p>  
14 - <p style="margin-bottom: -5px; margin-left: 50px">  
15 - <span>工作令：</span  
16 - ><a-input v-model="model.workOrder" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
17 - </p>  
18 - <p style="margin-bottom: -5px; margin-left: 50px">  
19 - <span>产品名称：</span  
20 - ><a-input v-model="model.productName" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
21 - </p>  
22 - <p style="margin-bottom: -5px; margin-left: 50px">  
23 - <span>产品类型：</span  
24 - ><a-input v-model="this.productType" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
25 - </p>  
26 - <p style="margin-bottom: -5px; margin-left: 50px">  
27 - <span>任务下达时间：</span  
28 - ><a-input v-model="model.orderDate" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
29 - </p>  
30 - <p style="margin-bottom: -5px; margin-left: 50px">  
31 - <span>派工时间：</span  
32 - ><a-input v-model="model.dispatchDate" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
33 - </p>  
34 - <p style="margin-bottom: -5px; margin-left: 50px">  
35 - <span>交货时间：</span  
36 - ><a-input v-model="model.deliveryDate" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
37 - </p>  
38 - <p style="margin-bottom: -5px; margin-left: 50px">  
39 - <span>数量（套）：</span  
40 - ><a-input v-model="model.quantity" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
41 - </p>  
42 - <p style="margin-bottom: -5px; margin-left: 50px">  
43 - <span>总工时：</span  
44 - ><a-input v-model="model.totalWorkingHours" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
45 - </p>  
46 - <p style="margin-left: 50px">  
47 - <span>已派发工时：</span><a-input v-model="model.dispatchedWorkingHours" style="width: 200px; border: 0px; font-weight: bold"></a-input>  
48 - </p>  
49 - <!-- 图片容器 -->  
50 -  
51 - <div class="image-container-wrapper">  
52 - <!-- <div class="image-container">  
53 - <j-image-upload isMultiple v-model="files" class="custom-image"></j-image-upload>  
54 - 5 + <div style="display:inline-block;width:50%;margin: auto;">
  6 + <table style="margin: auto;">
  7 + <tr>
  8 + <th scop="col" class="table_lable">订单号：</th>
  9 + <th scop="col">{{model.orderId}}</th>
  10 + </tr>
  11 + <tr>
  12 + <th scop="col" class="table_lable">订货单位：</th>
  13 + <th scop="col">{{model.orderCompany}}</th>
  14 + </tr>
  15 + <tr>
  16 + <th scop="col" class="table_lable">工作令：</th>
  17 + <th scop="col">{{model.workOrder}}</th>
  18 + </tr>
  19 + <tr>
  20 + <th scop="col" class="table_lable">产品名称：</th>
  21 + <th scop="col">{{model.productName}}</th>
  22 + </tr>
  23 + <tr>
  24 + <th scop="col" class="table_lable">产品类型：</th>
  25 + <th scop="col">
  26 + {{model.productType}}
  27 + </th>
  28 + </tr>
  29 + <tr>
  30 + <th scop="col" class="table_lable">任务下达时间：</th>
  31 + <th scop="col">{{model.orderDate}}</th>
  32 + </tr>
  33 + <tr>
  34 + <th scop="col" class="table_lable">派工时间：</th>
  35 + <th scop="col">{{model.dispatchDate}}</th>
  36 + </tr>
  37 + <tr>
  38 + <th scop="col" class="table_lable">交货时间：</th>
  39 + <th scop="col">{{model.deliveryDate}}</th>
  40 + </tr>
  41 + <tr>
  42 + <th scop="col" class="table_lable">数量（套）：</th>
  43 + <th scop="col">{{model.quantity}}</th>
  44 + </tr>
  45 + <tr>
  46 + <th scop="col" class="table_lable">总工时：</th>
  47 + <th scop="col">{{model.totalWorkingHours}}</th>
  48 + </tr>
  49 + <tr>
  50 + <th scop="col" class="table_lable">已派发工时：</th>
  51 + <th scop="col">{{model.dispatchedWorkingHours}}</th>
  52 + </tr>
  53 + <tr v-if="model.files != null">
  54 + <th scop="col" class="table_lable">设计图文件：</th>
  55 + <th scop="col">
  56 + <div v-for="(item,index) in model.files.split(',')" :key="index">
  57 + <a :href=httpUrl+item target="_blank">{{index+1}}. {{item.replace("temp/","")}}</a><br>
55 </div> 58 </div>
56 - <div class="image-container">  
57 - <j-image-upload isMultiple v-model="imageSrc"></j-image-upload>  
58 - </div> -->  
59 - <div style="display: inline-block; width: 45%">  
60 - <div class="show">  
61 - <img :src="getImgView(show)" :preview="num" alt="" height="100px" /> 59 + </th>
  60 + </tr>
  61 + </table>
62 </div> 62 </div>
63 - <div class="imgBox"> 63 + <div class="imgDiv">
  64 + <div v-if="model.pics">
  65 + <a-carousel arrows>
64 <div 66 <div
65 - :class="[num == index ? 'borderShow' : '']"  
66 - v-for="(item, index) of picList"  
67 - :key="index"  
68 - @click="onImg(index)" 67 + slot="prevArrow"
  68 + slot-scope="props"
  69 + class="custom-slick-arrow"
  70 + style="left: 10px;zIndex: 1"
69 > 71 >
70 - <img :src="getImgView(item)" height="25px" alt="" style="margin-left: 20px" /> 72 + <a-icon type="left-circle" />
71 </div> 73 </div>
  74 + <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
  75 + <a-icon type="right-circle" />
72 </div> 76 </div>
  77 + <div v-for="(item,index) in picList" :key="index" @click="onImg(index)">
  78 + <img :src="getImgView(item)" class="imgg" alt="" :preview="num"/>
73 </div> 79 </div>
  80 + </a-carousel>
  81 + <div class="tipCss">设计图</div>
74 </div> 82 </div>
75 </div> 83 </div>
76 <a-table 84 <a-table
@@ -111,6 +119,7 @@ export default { @@ -111,6 +119,7 @@ export default {
111 }, 119 },
112 data() { 120 data() {
113 return { 121 return {
  122 + httpUrl:window._CONFIG['staticDomainURL']+'/',
114 productType:'', 123 productType:'',
115 picList: '', 124 picList: '',
116 show: '', 125 show: '',
@@ -338,6 +347,44 @@ export default { @@ -338,6 +347,44 @@ export default {
338 </script> 347 </script>
339 348
340 <style scoped> 349 <style scoped>
  350 +
  351 +.ant-carousel >>> .slick-slide {
  352 + text-align: center;
  353 + height: 200px;
  354 + line-height: 200px;
  355 + /* background: #e7e7e8d2; */
  356 + overflow: hidden;
  357 +}
  358 +
  359 +.ant-carousel >>> .custom-slick-arrow {
  360 + width: 50px;
  361 + height: 50px;
  362 + font-size: 50px;
  363 + color: #cbc9c9;
  364 + /* background-color: rgba(31, 45, 61, 0.11); */
  365 + opacity: 0.3;
  366 +}
  367 +.ant-carousel >>> .custom-slick-arrow:before {
  368 + display: none;
  369 +}
  370 +.ant-carousel >>> .custom-slick-arrow:hover {
  371 + opacity: 0.5;
  372 +}
  373 +
  374 +.ant-carousel >>> .slick-slide h3 {
  375 + color: #cbc9c9;
  376 +}
  377 +.imgg{
  378 + /* width: 200px; */
  379 + height: 200px;
  380 + margin: auto
  381 +}
  382 +.imgg:hover{
  383 + cursor: pointer;
  384 + }
  385 + .align-colon{
  386 + display:inline-block;width:50%;margin: auto;
  387 + }
341 .align-colon p { 388 .align-colon p {
342 display: flex; 389 display: flex;
343 align-items: center; 390 align-items: center;
@@ -349,12 +396,24 @@ export default { @@ -349,12 +396,24 @@ export default {
349 margin-right: -0px; /* 调整冒号后的空白间距 */ 396 margin-right: -0px; /* 调整冒号后的空白间距 */
350 font-weight: bold; /* 将文本加粗 */ 397 font-weight: bold; /* 将文本加粗 */
351 } 398 }
352 -/* 图片容器及其包裹器的样式 */  
353 -.image-container-wrapper {  
354 - width: 50%; /* 将图片容器包裹器宽度设置为一半 */  
355 - float: right; /* 右浮动 */  
356 - margin-top: -300px; /* 调整顶部外边距以与其他内容对齐 */ 399 +.imgDiv{
  400 + display:inline-block;
  401 + width:40%;
357 } 402 }
  403 +
  404 +.tipCss{
  405 + font-weight: bold;
  406 + /* padding-top: 13px; */
  407 + padding-left: 46%;
  408 + margin-top: 30px;
  409 + margin-bottom: 20px;
  410 + }
  411 +/* 图片容器及其包裹器的样式 */
  412 +/* .image-container-wrapper {
  413 + width: 50%; 将图片容器包裹器宽度设置为一半
  414 + float: right; 右浮动
  415 + margin-top: -300px; 调整顶部外边距以与其他内容对齐
  416 +} */
358 .imgBox { 417 .imgBox {
359 display: flex; 418 display: flex;
360 } 419 }