雷海东 / factory-web · 提交

转到一个项目

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

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

内嵌 并排对比
正在显示 2 个修改的文件 包含 277 行增加 和 89 行删除
... ... @@ -51,29 +51,99 @@
<th scop="col" class="table_lable">已派发工时：</th>
<th scop="col">{{model.dispatchedWorkingHours}}</th>
</tr>
<tr v-if="model.files">
<th scop="col" class="table_lable">文件：</th>
<tr v-if="model.files != null">
<th scop="col" class="table_lable">生产图文件：</th>
<th scop="col">
<div v-for="(item,index) in model.files.split(',')" :key="index">
<a :href=httpUrl+item target="_blank">{{index+1}}. {{item.replace("temp/","")}}</a><br>
</div>
</th>
</tr>
<tr v-if="model.designFile != null">
<th scop="col" class="table_lable">设计图文件：</th>
<th scop="col">
<div v-for="(item,index) in model.designFile.split(',')" :key="index">
<a :href=httpUrl+item target="_blank">{{index+1}}. {{item.replace("temp/","")}}</a><br>
</div>
</th>
</tr>
</table>
</div>
<div style="display:inline-block;width:45%;" v-if="model.pics">
<!-- <div class="imgDiv" v-if="model.pics">
<div class="show" >
<!-- <img :src="getImgView(show)" :preview="num" alt="" height="100px"> -->
<img :src="httpUrl+show" :preview="num" alt="" height="100px">
<img :src="httpUrl+showPic" :preview="num" alt="" height="100px">
</div>
<div class="imgBox">
<div :class="[num == index?'borderShow':'']" v-for="(item,index) of picList" :key="index" @click="onImg(index)">
<!-- <img :src="getImgView(item)" height="25px" alt="" style="margin-left: 20px;"> -->
<img :src="httpUrl +(item)" height="25px" alt="" style="margin-left: 20px;">
</div>
</div>
</div>
<div class="tipCss">生产图</div>
</div> -->
<!-- <div class="imgDiv" v-if="model.designPic">
<div class="show" >
<img :src="httpUrl+showDesignPic" :preview="numDesign" alt="" height="100px">
</div>
<div class="imgBox">
<div :class="[numDesign == index?'borderShow':'']" v-for="(item,index) of designPicList" :key="index" @click="onDesignImg(index)">
<img :src="httpUrl +(item)" height="25px" alt="" style="margin-left: 20px;">
</div>
</div>
<div class="tipCss">设计图</div>
</div> -->
<!-- <div class="imgDiv" v-if="model.designPic">
<div class="show" >
<img :src="httpUrl+showDesignPic" :preview="numDesign" alt="" height="100px">
</div>
<div class="imgBox">
<div :class="[numDesign == index?'borderShow':'']" v-for="(item,index) of designPicList" :key="index" @click="onDesignImg(index)">
<img :src="httpUrl +(item)" height="25px" alt="" style="margin-left: 20px;">
</div>
</div>
</div> -->
<div class="imgDiv">
<div v-if="model.pics">
<a-carousel arrows>
<div
slot="prevArrow"
slot-scope="props"
class="custom-slick-arrow"
style="left: 10px;zIndex: 1"
>
<a-icon type="left-circle" />
</div>
<div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
<a-icon type="right-circle" />
</div>
<div v-for="(item,index) in picList" :key="index" @click="onImg(index)">
<img :src="httpUrl +(item)" class="imgg" :preview="num" />
</div>
</a-carousel>
<div class="tipCss">生产图</div>
</div>
<div v-if="model.designPic != null" style="margin-top: 50px;">
<a-carousel arrows>
<div
slot="prevArrow"
slot-scope="props"
class="custom-slick-arrow"
style="left: 10px;zIndex: 1"
>
<a-icon type="left-circle" />
</div>
<div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
<a-icon type="right-circle" />
</div>
<div v-for="(item, index) in designPicList" :key="index" @click="onDesignImg(index)">
<img :src="httpUrl +(item)" class="imgg" :preview="numDesign" />
</div>
</a-carousel>
<div class="tipCss">设计图</div>
</div>
</div>
</div>
</a-spin>
</j-modal>
</template>
... ... @@ -111,8 +181,11 @@ export default {
confirmLoading: false,
picList:"",
show:"",
designPicList:"",
showPic:"",
showDesignPic:"",
num: 0,
numDesign:0,
// url: {
// list: "/order_form/tblOrderForm/list",
// delete: "/order_form/tblOrderForm/delete",
... ... @@ -135,15 +208,22 @@ export default {
},
edit(record) {
this.picList = ""
this.designPicList=""
this.model = Object.assign({}, record);
console.log('this.model',this.model)
if(this.model.pics){
var picList = this.model.pics.split(',')
console.log('picList',picList)
this.picList = picList
this.show = this.picList[0];
var picTemp = this.model.pics.split(',')
// console.log('pics',picTemp)
this.picList = picTemp
this.showPic = this.picList[0];
}
if(this.model.designPic){
var designPicTemp = this.model.designPic.split(',')
// console.log('designPic',designPicTemp)
this.designPicList = designPicTemp
this.showDesignPic = this.designPicList[0];
}
this.visible = true;
this.loadTree()
},
... ... @@ -151,15 +231,19 @@ export default {
var that = this;
listProductType().then((res)=>{
if(res.success){
// that.treeData = [];
that.options = res.result
}
});
},
onImg(e){
this.show = this.picList[e];
console.log('e==',e)
this.showPic = this.picList[e];
this.num = e
},
onDesignImg(e){
this.showDesignPic = this.designPicList[e];
this.numDesign = e
},
close() {
this.$emit('close');
this.visible = false;
... ... @@ -194,6 +278,41 @@ export default {
}
</script>
<style scoped>
.ant-carousel >>> .slick-slide {
text-align: center;
height: 200px;
line-height: 160px;
/* background: #e7e7e8d2; */
overflow: hidden;
}
.ant-carousel >>> .custom-slick-arrow {
width: 25px;
height: 25px;
font-size: 25px;
color: #cbc9c9;
/* background-color: rgba(31, 45, 61, 0.11); */
opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
opacity: 0.5;
}
.ant-carousel >>> .slick-slide h3 {
color: #cbc9c9;
}
.imgg{
/* width: 200px; */
height: 160px;
margin: auto
}
.imgg:hover{
cursor: pointer;
}
tr {
height: 30px; /* 设置行高为50px */
/* padding: 10px; 设置行内填充为10px */
... ... @@ -220,13 +339,23 @@ tr {
.borderShow{
border: 2px solid rgb(141, 134, 134);
}
.imgDiv{
display:inline-block;
width:40%;
}
.show img{
margin-bottom: 10px;
height: 200px;
width: 200px;
margin-left: 12%;
}
.show:hover{
cursor: pointer;
}
.tipCss{
font-weight: bold;
/* padding-top: 13px; */
padding-left: 46%;
margin-top: -15px;
}
</style>
\ No newline at end of file
... ...
... ... @@ -2,76 +2,84 @@
<a-spin :spinning="confirmLoading">
<j-form-container :disabled="formDisabled">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
<div class="align-colon">
<p style="margin-bottom: -5px; margin-left: 50px">
<span>订单号：</span
><a-input v-model="model.orderId" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<p style="margin-bottom: -5px; margin-left: 50px">
<span>订货单位：</span
><a-input v-model="model.orderCompany" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<p style="margin-bottom: -5px; margin-left: 50px">
<span>工作令：</span
><a-input v-model="model.workOrder" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<p style="margin-bottom: -5px; margin-left: 50px">
<span>产品名称：</span
><a-input v-model="model.productName" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<p style="margin-bottom: -5px; margin-left: 50px">
<span>产品类型：</span
><a-input v-model="this.productType" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<p style="margin-bottom: -5px; margin-left: 50px">
<span>任务下达时间：</span
><a-input v-model="model.orderDate" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<p style="margin-bottom: -5px; margin-left: 50px">
<span>派工时间：</span
><a-input v-model="model.dispatchDate" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<p style="margin-bottom: -5px; margin-left: 50px">
<span>交货时间：</span
><a-input v-model="model.deliveryDate" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<p style="margin-bottom: -5px; margin-left: 50px">
<span>数量（套）：</span
><a-input v-model="model.quantity" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<p style="margin-bottom: -5px; margin-left: 50px">
<span>总工时：</span
><a-input v-model="model.totalWorkingHours" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<p style="margin-left: 50px">
<span>已派发工时：</span><a-input v-model="model.dispatchedWorkingHours" style="width: 200px; border: 0px; font-weight: bold"></a-input>
</p>
<!-- 图片容器 -->
<div class="image-container-wrapper">
<!-- <div class="image-container">
<j-image-upload isMultiple v-model="files" class="custom-image"></j-image-upload>
</div>
<div class="image-container">
<j-image-upload isMultiple v-model="imageSrc"></j-image-upload>
</div> -->
<div style="display: inline-block; width: 45%">
<div class="show">
<img :src="getImgView(show)" :preview="num" alt="" height="100px" />
</div>
<div class="imgBox">
<div
:class="[num == index ? 'borderShow' : '']"
v-for="(item, index) of picList"
:key="index"
@click="onImg(index)"
>
<img :src="getImgView(item)" height="25px" alt="" style="margin-left: 20px" />
<div style="display:inline-block;width:50%;margin: auto;">
<table style="margin: auto;">
<tr>
<th scop="col" class="table_lable">订单号：</th>
<th scop="col">{{model.orderId}}</th>
</tr>
<tr>
<th scop="col" class="table_lable">订货单位：</th>
<th scop="col">{{model.orderCompany}}</th>
</tr>
<tr>
<th scop="col" class="table_lable">工作令：</th>
<th scop="col">{{model.workOrder}}</th>
</tr>
<tr>
<th scop="col" class="table_lable">产品名称：</th>
<th scop="col">{{model.productName}}</th>
</tr>
<tr>
<th scop="col" class="table_lable">产品类型：</th>
<th scop="col">
{{model.productType}}
</th>
</tr>
<tr>
<th scop="col" class="table_lable">任务下达时间：</th>
<th scop="col">{{model.orderDate}}</th>
</tr>
<tr>
<th scop="col" class="table_lable">派工时间：</th>
<th scop="col">{{model.dispatchDate}}</th>
</tr>
<tr>
<th scop="col" class="table_lable">交货时间：</th>
<th scop="col">{{model.deliveryDate}}</th>
</tr>
<tr>
<th scop="col" class="table_lable">数量（套）：</th>
<th scop="col">{{model.quantity}}</th>
</tr>
<tr>
<th scop="col" class="table_lable">总工时：</th>
<th scop="col">{{model.totalWorkingHours}}</th>
</tr>
<tr>
<th scop="col" class="table_lable">已派发工时：</th>
<th scop="col">{{model.dispatchedWorkingHours}}</th>
</tr>
<tr v-if="model.files != null">
<th scop="col" class="table_lable">设计图文件：</th>
<th scop="col">
<div v-for="(item,index) in model.files.split(',')" :key="index">
<a :href=httpUrl+item target="_blank">{{index+1}}. {{item.replace("temp/","")}}</a><br>
</div>
</div>
</th>
</tr>
</table>
</div>
<div class="imgDiv">
<div v-if="model.pics">
<a-carousel arrows>
<div
slot="prevArrow"
slot-scope="props"
class="custom-slick-arrow"
style="left: 10px;zIndex: 1"
>
<a-icon type="left-circle" />
</div>
</div>
<div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
<a-icon type="right-circle" />
</div>
<div v-for="(item,index) in picList" :key="index" @click="onImg(index)">
<img :src="getImgView(item)" class="imgg" alt="" :preview="num"/>
</div>
</a-carousel>
<div class="tipCss">设计图</div>
</div>
</div>
<a-table
ref="table"
... ... @@ -111,6 +119,7 @@ export default {
},
data() {
return {
httpUrl:window._CONFIG['staticDomainURL']+'/',
productType:'',
picList: '',
show: '',
... ... @@ -338,6 +347,44 @@ export default {
</script>
<style scoped>
.ant-carousel >>> .slick-slide {
text-align: center;
height: 200px;
line-height: 200px;
/* background: #e7e7e8d2; */
overflow: hidden;
}
.ant-carousel >>> .custom-slick-arrow {
width: 50px;
height: 50px;
font-size: 50px;
color: #cbc9c9;
/* background-color: rgba(31, 45, 61, 0.11); */
opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
opacity: 0.5;
}
.ant-carousel >>> .slick-slide h3 {
color: #cbc9c9;
}
.imgg{
/* width: 200px; */
height: 200px;
margin: auto
}
.imgg:hover{
cursor: pointer;
}
.align-colon{
display:inline-block;width:50%;margin: auto;
}
.align-colon p {
display: flex;
align-items: center;
... ... @@ -349,12 +396,24 @@ export default {
margin-right: -0px; /* 调整冒号后的空白间距 */
font-weight: bold; /* 将文本加粗 */
}
/* 图片容器及其包裹器的样式 */
.image-container-wrapper {
width: 50%; /* 将图片容器包裹器宽度设置为一半 */
float: right; /* 右浮动 */
margin-top: -300px; /* 调整顶部外边距以与其他内容对齐 */
.imgDiv{
display:inline-block;
width:40%;
}
.tipCss{
font-weight: bold;
/* padding-top: 13px; */
padding-left: 46%;
margin-top: 30px;
margin-bottom: 20px;
}
/* 图片容器及其包裹器的样式 */
/* .image-container-wrapper {
width: 50%; 将图片容器包裹器宽度设置为一半
float: right; 右浮动
margin-top: -300px; 调整顶部外边距以与其他内容对齐
} */
.imgBox {
display: flex;
}
... ...