Commit dd41f436 authored by 余苗苗's avatar 余苗苗

根据UI修改页面

parent 34ed3557
...@@ -17,6 +17,9 @@ ...@@ -17,6 +17,9 @@
line-height: 64px; line-height: 64px;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
} }
.cooperate-menu{
border:none;
}
.cooperate-menu .el-menu-item.is-active{ .cooperate-menu .el-menu-item.is-active{
background-color: #eef1fa !important; background-color: #eef1fa !important;
position: relative; position: relative;
...@@ -43,27 +46,37 @@ ...@@ -43,27 +46,37 @@
.cooperate-right .el-table .el-table td, .cooperate-right .el-table .el-table th{ .cooperate-right .el-table .el-table td, .cooperate-right .el-table .el-table th{
padding: 5px 0; padding: 5px 0;
} }
.cooperate-right .all-cooperate-serch{ .cooperate .all-cooperate-serch{
background: #ffffff; background: #ffffff;
padding: 10px; padding:12px 10px;
height: 30px;
position: relative; position: relative;
}
.all-cooperate-serch:after{
position: absolute;
content: '';
left: 20px;
right: 20px;
bottom: 0;
height:1px;
background: #ececec;
} }
.cooperate-right .all-cooperate-serch .seach-select .el-input__inner,.cooperate-right .all-cooperate-serch .seach-select .el-input{ .cooperate .all-cooperate-serch .seach-select{
margin-right: 8px;
}
.cooperate .all-cooperate-serch .seach-select .el-input__inner,.cooperate .all-cooperate-serch .seach-select .el-input{
width: 120px !important; width: 120px !important;
background: #F1F3F9; background: #F1F3F9;
border: none; border: none;
height: 30px;
} }
.cooperate-right .all-cooperate-serch .seach-input .el-input__inner,.cooperate-right .all-cooperate-serch .seach-input { .cooperate .all-cooperate-serch .seach-input {
margin-right: 8px;
}
.cooperate .all-cooperate-serch .seach-input .el-input__inner,.cooperate .all-cooperate-serch .seach-input {
width: 298px; width: 298px;
height: 30px;
}
.all-cooperate-serch:after {
position: absolute;
content: '';
left: 20px;
right: 20px;
bottom: 0;
height: 1px;
background: #ececec;
} }
.button-color{ .button-color{
background: #5874D8; background: #5874D8;
...@@ -89,18 +102,67 @@ ...@@ -89,18 +102,67 @@
overflow: auto; overflow: auto;
padding: 15px; padding: 15px;
} }
.cooperate-right .cooperate-content table{
text-align: center;
width: 100%;
}
.cooperate-right .cooperate-content .table-header{
background: #eef1fa;
height: 38px;
line-height: 38px;
}
.cooperate-right .cooperate-content .table-body td:nth-child(1),.cooperate-right .cooperate-content .table-header th:nth-child(1){
width: 20%;
}
.cooperate-right .cooperate-content .table-body td:nth-child(2),.cooperate-right .cooperate-content .table-header th:nth-child(2){
width: 20%;
}
.cooperate-right .cooperate-content .table-body td:nth-child(3),.cooperate-right .cooperate-content .table-header th:nth-child(3){
width: 20%;
}
.cooperate-right .cooperate-content .table-body td:nth-child(4),.cooperate-right .cooperate-content .table-header th:nth-child(4){
width: 20%;
}
.cooperate-right .cooperate-content .table-body td:nth-child(5),.cooperate-right .cooperate-content .table-header th:nth-child(5){
width: 20%;
}
.cooperate-right .cooperate-content .table-cell{
border: 1px solid #E2E2E2;
margin: 5px 0;
border-radius: 5px;
height: 74px;
font-size: 12px;
}
.cooperate-right .cooperate-content .table-cell:nth-of-type(odd){
background: #f5f5f5;
}
.cooperate-right .cooperate-content .table-cell .detail{
font-size: 12px;
color: #999;
}
.cooperate-right .cooperate-content table th{ .cooperate-right .cooperate-content table th{
background: #EEF1FC; background: #eef1fa;
color: #666; color: #666;
text-align: center;
} }
.cooperate-right .cooperate-content table td{ .cooperate-right .cooperate-content table td .cell{
/*font-size: 12px;*/
text-align: center;
}
.cooperate-right .cooperate-content table td .cell .detail{
font-size: 12px; font-size: 12px;
color: #999;
}
.cooperate-right .cooperate-content table td .cell .blue-text{
color: #5B76D1;
} }
/********************详情start*******************/ /********************详情start*******************/
.cooperate-detail{ .cooperate-detail{
width: 720px; width: 720px;
height: 630px; height: 630px;
float: right;
} }
.dialog-content{ .dialog-content{
position: relative; position: relative;
...@@ -121,11 +183,6 @@ ...@@ -121,11 +183,6 @@
.el-dialog__wrapper{ .el-dialog__wrapper{
overflow: hidden !important; overflow: hidden !important;
} }
.cooperate-detail h2{
padding-left: 15px;
position: relative;
margin-left: 20px;
}
.cooperate-detail h2:before{ .cooperate-detail h2:before{
position: absolute; position: absolute;
content: ''; content: '';
...@@ -135,9 +192,6 @@ ...@@ -135,9 +192,6 @@
height: 20px; height: 20px;
background: #50B5FC; background: #50B5FC;
} }
.cooperate-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.cooperate-detail .el-dialog__body{ .cooperate-detail .el-dialog__body{
padding:30px 0; padding:30px 0;
} }
...@@ -148,6 +202,48 @@ ...@@ -148,6 +202,48 @@
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 16px;
} }
.cooperate-detail .el-tabs__header{
border:none;
}
.cooperate-detail .el-dialog__body{
padding: 0;
}
.cooperate-detail .el-dialog__header{
background: #eef1fa;
}
.cooperate-detail .el-dialog__header .el-dialog__title{
color: #5874d8;
font-size: 18px;
}
.cooperate-detail .el-dialog__header .el-dialog__headerbtn i{
color:#8F97A4;
font-size: 24px;
}
.operate-detail h2{
padding-left: 30px;
}
.cooperate-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
background: #eef1fa;
}
.cooperate-detail .el-tabs--card>.el-tabs__header .el-tabs__item{
background: #f5f5f5;
margin-bottom: -1px;
margin-right: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #BFCAEB;
}
.cooperate-detail .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
background: #ffffff;
border: 1px solid #5874d8;
border-bottom: #ffffff;
color: #5874d8;
}
.cooperate-detail .el-tabs--card>.el-tabs__header .el-tabs__nav{
border:none;
}
.cooperate-detail .cooperate-detail-tab{ .cooperate-detail .cooperate-detail-tab{
margin-top: 5px; margin-top: 5px;
line-height: 2.5; line-height: 2.5;
...@@ -212,16 +308,62 @@ ...@@ -212,16 +308,62 @@
} }
/*******************************范围start******************************/ /*******************************范围start******************************/
.cooperate-detail-tab .tag{ .cooperate-detail-tab .tag{
background: #F1F3F8; background: #eef1fa;
padding: 5px 14px; padding: 5px 10px;
border-radius: 5px;
margin-right: 10px;
color: #8F97A4 !important;
border: 1px solid #5874D8;
display: inline-block;
height: 25px;
line-height: 25px;
margin-top: 5px;
}
.cooperate-detail-tab .tag i{
color: #5874D8;
font-size: 14px;
}
.cooperate-detail-tab .tag-range{
background: #F7F9FF;
padding: 0px 14px;
border-radius: 3px; border-radius: 3px;
margin-right: 20px; margin-right: 20px;
color:#999999 !important; color: #8F97A4 !important;
float: left;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
} }
.cooperate-detail-tab .tag i{ .cooperate-detail-tab .tag-range i{
color: #3B4B84; color: #5874D8;
font-size: 14px; font-size: 14px;
} }
.cooperate-detail .cooperate-detail-tab{
margin-top: 5px;
line-height: 2;
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.cooperate-detail .cooperate-detail-tab p{
color: #999;
font-size: 12px;
}
.cooperate-detail .cooperate-detail-tab span{
color: #333;
font-size: 12px;
}
.cooperate-detail h2{
padding-left: 15px;
line-height: 1.5;
margin-left: 20px;
}
.cooperate-detail .add-operate h2{
padding-left: 15px;
line-height: 1.5;
margin-left: 0
}
/*******************************授权start******************************/ /*******************************授权start******************************/
.el-tabs .wechat{ .el-tabs .wechat{
width: 180px; width: 180px;
...@@ -236,12 +378,9 @@ ...@@ -236,12 +378,9 @@
font-size: 12px; font-size: 12px;
color: #999; color: #999;
} }
.add-operate{
height: 700px !important;
}
.add-operate form{ .add-operate form{
/*width: 500px;*/ /*width: 500px;*/
height: 560px; height: 523px;
overflow: auto; overflow: auto;
} }
.add-operate .el-input__inner,.add-operate .seach-input { .add-operate .el-input__inner,.add-operate .seach-input {
...@@ -250,12 +389,48 @@ ...@@ -250,12 +389,48 @@
/*margin-right: 20px;*/ /*margin-right: 20px;*/
} }
.add-operate textarea{ .add-operate textarea{
width: 420px; width: 220px;
height: 28px; height: 28px;
} }
.add-operate form .el-form-item { /*.add-operate form .el-form-item {
margin-bottom: 12px; margin-bottom: 12px;
} }*/
.addoperate-icon { .addoperate-icon {
margin-left: 3px; margin-left: 3px;
} }
.add-operate .save {
text-align: center;
margin-top: 20px;
}
.add-operate .save button{
background: #5774D8;
color: #ffffff;
width: 180px;
}
.add-operate .save button span{
color: #ffffff !important;
}
.add-operate form .el-input__inner,.add-operate form .el-input{
height: 28px;
font-size: 12px;
}
.el-dialog .el-form-item{
margin-bottom: 15px !important;
}
.add-operate form .el-form-item__error{
padding-top: 0;
}
.add-operate form .pre_space .el-form-item__error{
padding-top: 0;
left: -34px;
top: 28px;
}
.add-operate form .el-input__icon{
line-height: 28px;
}
.add-operate form .el-radio__input{
display: none;
}
.add-operate form .el-radio{
margin-right: 0;
}
...@@ -24,38 +24,51 @@ ...@@ -24,38 +24,51 @@
</div> </div>
<div class="cooperate-right"> <div class="cooperate-right">
<div class="all-cooperate-serch"> <div class="all-cooperate-serch">
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类"> <el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类" size="mini">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option> <el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select> </el-select>
<el-select class="seach-select" v-model="search.area" @change='' placeholder="选择区域"> <el-select class="seach-select" v-model="search.area" @change='' placeholder="选择区域" size="mini">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option> <el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select> </el-select>
<el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入名称、联系人或区域'></el-input> <el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入名称、联系人或区域' size="mini"></el-input>
<el-button type='primary' class='firstbackgroud_blue'>搜索</el-button> <el-button type='primary' class='firstbackgroud_blue' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click="addOperate()">新增授权点</el-button> <el-button type='primary' class='firstbackgroud_blue addbutton' @click="addOperate()" size="mini">新增授权点</el-button>
</div> </div>
<div class="cooperate-content"> <div class="cooperate-content">
<el-table :data="tableData" style="width: 100%" @row-click='checkData'>
<el-table-column prop="date" label="授权点" ></el-table-column>
<el-table-column label="负责人" > <table class="table-header">
<template slot-scope="scope" > <tr >
<th>授权点</th>
<th>负责人</th>
<th>合作区域</th>
<th>合作品类</th>
<th>合作状态</th>
</tr>
</table>
<table class="table-body table-cell" v-for="(item,index) in tableData" :key='index'>
<tr >
<td>{{item.date}}</td>
<td>
<span class='cursor firsttext_blue' > <span class='cursor firsttext_blue' >
{{scope.row.name }} {{item.name }}
</span> </span>
<span clas="thirdtext_font">{{scope.row.phone}}</span> <span clas="thirdtext_font">{{item.phone}}</span>
</template> </td>
</el-table-column> <td>
<el-table-column prop="address" label="合作区域"> </el-table-column> <span>{{item.address }}</span>
<el-table-column prop="type" label="合作品类"> </el-table-column> </td>
<el-table-column label="合作状态" width='80px'> <td>
<template slot-scope="scope" > <span>{{item.type }}</span>
</td>
<td @click='checkData(item)' class="cursor">
<div class='text_center'> <div class='text_center'>
<i class='iconfont iconzhengchang' v-if='scope.row.status==1' style='color:#6FC152;font-size:22px;'></i> <i class='iconfont iconzhengchang' v-if='item.status==1' style='color:#6FC152;font-size:22px;'></i>
<i class='iconfont icontingyong' v-else style='color:#F05050;font-size:22px'></i> <i class='iconfont icontingyong' v-else style='color:#F05050;font-size:22px'></i>
</div> </div>
</template> </td>
</el-table-column> </tr>
</el-table> </table>
</div> </div>
<div class="cooperate-bottom"> <div class="cooperate-bottom">
<el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="sizes, prev, pager, next,total" :page-size="15" :pager-count="table.page_count" :total="table.total"> <el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="sizes, prev, pager, next,total" :page-size="15" :pager-count="table.page_count" :total="table.total">
...@@ -82,7 +95,7 @@ ...@@ -82,7 +95,7 @@
data: function() { data: function() {
return { return {
activeIndex:'3',tabindex:'3',modal:null, activeIndex:'3',tabindex:'3',modal:null,
active_header:'./../cooperate/index.html',modalData:[], active_header:'./../cooperate/index.html',modalData:{},
menus:[ menus:[
{name:'正常',value:'1',icon:'iconzhengchang'}, {name:'正常',value:'1',icon:'iconzhengchang'},
{name:'停用',value:'2',icon:'icontingyong'}, {name:'停用',value:'2',icon:'icontingyong'},
......
This diff is collapsed.
var vDetail={ var vDetail={
template: ` template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='cooperate-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'> <el-dialog :visible.sync="dialog.show" custom-class='cooperate-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div slot='title' class="el-dialog__title">
<i class="iconfont iconhezuo"></i>
{{dialog.title}}
</div>
<div class="dialog-content"> <div class="dialog-content">
<div class="edict-icon"> <div class="edict-icon" v-if="dialog.tab==3">
<i class="el-icon-edit-outline"></i> <i class="el-icon-edit-outline"></i>
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick"> <el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" > <el-tab-pane label="详情" name="1" >
<h2>基本信息</h2> <h2 class="line-left">基本信息</h2>
<div class='cooperate-detail-tab'> <div class='cooperate-detail-tab'>
<p>名 称: <span> 精诚维修</span></p> <p>名 称: <span> 精诚维修</span></p>
<p>负 责 人:<span>张三(13800001111)</span></p> <p>负 责 人:<span>张三(13800001111)</span></p>
<p>状 态:<span>正常(已开通接口 )</span></p> <p>状 态:<span>正常(已开通接口 )</span></p>
<p>地 址:<span>深圳市精诚家电维修有限公司</span> </p> <p>地 址:<span>深圳市精诚家电维修有限公司</span> </p>
</div> </div>
<h2>结算信息</h2> <h2 class="line-left">结算信息</h2>
<div class='cooperate-detail-tab'> <div class='cooperate-detail-tab'>
<p>周期: <span> 日结</span></p> <p>周期: <span> 日结</span></p>
<p>结算方式:<span>银行卡(13800001111)</span></p> <p>结算方式:<span>银行卡(13800001111)</span></p>
<p>收款信息:<span>张三 中国建设银行宝安支行 6222212132881212</span></p> <p>收款信息:<span>张三 中国建设银行宝安支行 6222212132881212</span></p>
</div> </div>
<h2>认证信息</h2> <h2 class="line-left">认证信息</h2>
<div class='cooperate-detail-tab' style="border:none"> <div class='cooperate-detail-tab' style="border:none">
<p>认证方式: <span>企业认证</span></p> <p>认证方式: <span>企业认证</span></p>
<p>认证信息:<span>深圳市精诚家电维修有限公司 0102198902010215</span></p> <p>认证信息:<span>深圳市精诚家电维修有限公司 0102198902010215</span></p>
...@@ -31,25 +35,29 @@ var vDetail={ ...@@ -31,25 +35,29 @@ var vDetail={
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="范围" name="2"> <el-tab-pane label="范围" name="2">
<h2>服务区域</h2> <h2 class="line-left">服务区域</h2>
<div class='cooperate-detail-tab' style="padding:20px;line-height:3"> <div class='cooperate-detail-tab' style="padding:20px;line-height:3">
<span class='tag' v-for='(item,index) in 9' :key='index'> <div style="height: 190px;overflow-y: auto;">
<i class='el-icon-location'></i>广东-深圳 <div class='tag-range' v-for='(item,index) in 9' :key='index'>
</span> <i class='el-icon-location'></i>广东-深圳
</div>
</div>
</div> </div>
<h2>服务品类</h2> <h2 class="line-left">服务品类</h2>
<div class='cooperate-detail-tab' style="padding:20px;line-height:3;border:none"> <div class='cooperate-detail-tab' style="padding:20px;line-height:3;border:none">
<span class='tag' v-for='(item,index) in 2' :key='index'> <div style="height: 190px;overflow-y: auto;">
空调 <div class='tag-range' v-for='(item,index) in 2' :key='index'>
</span> 空调
</div>
</div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="授权码" name="3"> <el-tab-pane label="授权码" name="3">
<h2>授权信息</h2> <h2 class="line-left">授权信息</h2>
<div class='cooperate-detail-tab' style="border:none"> <div class='cooperate-detail-tab' style="border:none">
<p>授权ID:<span>31E8792IWE73</span></p> <p>授权ID:<span>31E8792IWE73</span></p>
<p>授权密钥:<span>31E8792IWE7331E8792IWE7331E8792IWE73</span></p> <p>授权密钥:<span>31E8792IWE7331E8792IWE7331E8792IWE73</span></p>
<p>接单方式一:<span>API对接</span></p> <p>接单方式一:<span style="color: #5874D8;text-decoration: underline">API对接</span></p>
<p>接单方式二:<span>小程序</span></p> <p>接单方式二:<span>小程序</span></p>
</div> </div>
<div class="wechat"></div> <div class="wechat"></div>
......
...@@ -27,21 +27,23 @@ ...@@ -27,21 +27,23 @@
<div class="order-right"> <div class="order-right">
<div class="all-order"> <div class="all-order">
<div class="all-order-serch"> <div class="all-order-serch">
<el-select class="seach-select" v-model="search.time" @change='' placeholder="创建时间"> <el-select class="seach-select" v-model="search.time" @change='' placeholder="创建时间" size="mini">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option> <el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select> </el-select>
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类"> <el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类" size="mini">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option> <el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select> </el-select>
<el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='请输入项目名、合作商名查询'></el-input> <el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='请输入项目名、合作商名查询' size="mini"></el-input>
<el-button type='primary' class='firstbackgroud_blue firstborder_blue'>搜索</el-button> <el-button type='primary' class='firstbackgroud_blue firstborder_blue' size="mini" style="width:72px;margin-right:8px">搜索</el-button>
<span class='button-icon'><i class='iconfont iconloudou'></i></span> <span class='button-icon'><i class='iconfont iconloudou'></i></span>
<span class='button-icon' v-popover:popover2><i class='iconfont iconpaixu'></i></span> <span class='button-icon' v-popover:popover2><i class='iconfont iconpaixu'></i></span>
<el-button type='primary' class='firstbackgroud_blue firstborder_blue addbutton' @click='creatOrder()'>新建工单</el-button> <el-button type='primary' class='firstbackgroud_blue firstborder_blue addbutton' @click='creatOrder()' size='mini'>新建工单</el-button>
<el-popover ref="popover2" placement="bottom" title="" width="120" trigger="click" > <el-popover ref="popover2" placement="bottom" title="" width="120" trigger="click" >
<div class="popover-box"> <div class="popover-box">
<div v-for="(item,index) in filters" :key='index'> <div v-for="(item,index) in filters" :key='index'>
{{item.name}} {{item.name}}
<i class='el-icon-caret-top' v-if="item.id==1 || item.id==6 || item.id==8"></i>
<i class='el-icon-caret-bottom' v-if="item.id==2 || item.id==7 ||item.id==9"></i>
</div> </div>
</div> </div>
...@@ -51,7 +53,7 @@ ...@@ -51,7 +53,7 @@
<div class="all-order-content"> <div class="all-order-content">
<div class="all-order-box thirdbackground_blue" v-for='(item,index) in tableData' :key='index' @click='checkDetail(item)'> <div class="all-order-box thirdbackground_blue" v-for='(item,index) in tableData' :key='index' @click='checkDetail(item)'>
<div class="all-box-top firsttext_font"> <div class="all-box-top firsttext_font">
<span :class="item.id==1?'type1':'type2'">保内</span> <span :class="item.id==1?'type1':'type2'">{{item.server}}</span>
美的洗衣机--清理 美的洗衣机--清理
<div class="all-box-topright firsttext_blue"> <div class="all-box-topright firsttext_blue">
<i class='iconfont iconfenpei' @click.stop=''></i> <i class='iconfont iconfenpei' @click.stop=''></i>
...@@ -146,20 +148,35 @@ ...@@ -146,20 +148,35 @@
type:'',time:'',options1:[],options2:[],name:'' type:'',time:'',options1:[],options2:[],name:''
}, },
tableData:[ tableData:[
{id:'1',statusText:'待派单'}, {id:'1',statusText:'待派单',server:'保内'},
{id:'2',statusText:'待分配'}, {id:'2',statusText:'待分配',server:'保外'},
{id:'3',statusText:'待完工'}, {id:'3',statusText:'待完工',server:'保外'},
{id:'4',statusText:'待确权'}, {id:'4',statusText:'待确权',server:'保外'},
{id:'5',statusText:'已完成'}, {id:'5',statusText:'已完成',server:'保外'},
{id:'6',statusText:'已退回'} {id:'6',statusText:'已退回',server:'保外'},
{id:'1',statusText:'待派单',server:'保内'},
{id:'2',statusText:'待分配',server:'保外'},
{id:'3',statusText:'待完工',server:'保外'},
{id:'4',statusText:'待确权',server:'保外'},
{id:'5',statusText:'已完成',server:'保外'},
{id:'6',statusText:'已退回',server:'保外'},
{id:'1',statusText:'待派单',server:'保内'},
{id:'2',statusText:'待分配',server:'保外'},
{id:'3',statusText:'待完工',server:'保外'},
{id:'4',statusText:'待确权',server:'保外'},
{id:'5',statusText:'已完成',server:'保外'},
{id:'6',statusText:'已退回',server:'保外'},
], ],
filters:[ filters:[
{id:'1',name:'创建时间'}, {id:'1',name:'创建时间'},
{id:'2',name:'用户地址'}, {id:'2',name:'创建时间'},
{id:'3',name:'用户电话'}, {id:'3',name:'用户地址'},
{id:'4',name:'授权点'}, {id:'4',name:'用户电话'},
{id:'5',name:'预约时间'}, {id:'5',name:'授权点'},
{id:'6',name:'完工时间'}, {id:'6',name:'预约时间'},
{id:'7',name:'预约时间'},
{id:'8',name:'完工时间'},
{id:'9',name:'完工时间'},
], ],
table:{ table:{
current_page:1,page_count:7,total:100, current_page:1,page_count:7,total:100,
......
...@@ -26,7 +26,7 @@ var addOne={ ...@@ -26,7 +26,7 @@ var addOne={
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span='10' > <el-col :span='10' >
<el-form-item prop="address" label='地址:' style=" " > <el-form-item prop="address" label='地 址:' class="pre_space" >
<el-input v-model='addData.form.address' placeholder='请选择地址'></el-input> <el-input v-model='addData.form.address' placeholder='请选择地址'></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -39,7 +39,7 @@ var addOne={ ...@@ -39,7 +39,7 @@ var addOne={
<el-radio v-model="addData.form.type" label="2" border size="mini">维修</el-radio> <el-radio v-model="addData.form.type" label="2" border size="mini">维修</el-radio>
<el-radio v-model="addData.form.type" label="3" border size="mini">检查</el-radio> <el-radio v-model="addData.form.type" label="3" border size="mini">检查</el-radio>
</el-form-item> </el-form-item>
<el-form-item prop="date" label='质 保 期:' style=" " > <el-form-item prop="date" label='质 保 期:' class="pre_space" >
<el-radio v-model="addData.form.date" label="1" border size="mini">保内</el-radio> <el-radio v-model="addData.form.date" label="1" border size="mini">保内</el-radio>
<el-radio v-model="addData.form.date" label="2" border size="mini">保外</el-radio> <el-radio v-model="addData.form.date" label="2" border size="mini">保外</el-radio>
</el-form-item> </el-form-item>
...@@ -55,12 +55,12 @@ var addOne={ ...@@ -55,12 +55,12 @@ var addOne={
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span='10' > <el-col :span='10' >
<el-form-item prop="num" label='数量:' style=" " > <el-form-item prop="num" label='数 量:' class="pre_space" >
<el-input v-model='addData.form.num' placeholder='请输入数量' type='number'></el-input> <el-input v-model='addData.form.num' placeholder='请输入数量' type='number'></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-form-item label='描述:' style=" " > <el-form-item label='描 述:' class="pre_space">
<el-input v-model='addData.form.remark' :autosize="{ minRows: 1, maxRows: 5}" type='textarea'></el-input> <el-input v-model='addData.form.remark' :autosize="{ minRows: 1, maxRows: 5}" type='textarea'></el-input>
</el-form-item> </el-form-item>
<el-row :gutter="20"> <el-row :gutter="20">
......
...@@ -117,7 +117,6 @@ var beRighting={ ...@@ -117,7 +117,6 @@ var beRighting={
<img src="../static/images/man.jpg" alt="" width="120px" height="120px"> <img src="../static/images/man.jpg" alt="" width="120px" height="120px">
<img src="../static/images/man.jpg" alt="" width="120px" height="120px"> <img src="../static/images/man.jpg" alt="" width="120px" height="120px">
</div> </div>
</div> </div>
<p> <p>
完工备注注: 完工备注注:
......
...@@ -24,13 +24,16 @@ ...@@ -24,13 +24,16 @@
background-color: #eef1fa !important; background-color: #eef1fa !important;
position: relative; position: relative;
} }
.order .el-menu{
border-right: none;
}
.order-menu .el-menu-item.is-active:before{ .order-menu .el-menu-item.is-active:before{
content: ''; content: '';
position: absolute; position: absolute;
width: 3px; width: 3px;
height: 20px; height: 20px;
left: 0; left: 0;
top: 20px; top: 17px;
background: #50B5FC background: #50B5FC
} }
.order-right{ .order-right{
...@@ -41,25 +44,33 @@ ...@@ -41,25 +44,33 @@
} }
.all-order .all-order-serch{ .all-order .all-order-serch{
background: #ffffff; background: #ffffff;
padding: 10px; padding:12px 10px;
height: 30px;
} }
.all-order .all-order-serch .seach-select{ .all-order .all-order-serch .seach-select{
margin-right: 8px;
} }
.all-order .all-order-serch .seach-select .el-input__inner,.all-order .all-order-serch .seach-select .el-input{ .all-order .all-order-serch .seach-select .el-input__inner,.all-order .all-order-serch .seach-select .el-input{
width: 120px !important; width: 120px !important;
background: #F1F3F9; background: #F1F3F9;
border: none; border: none;
height: 30px;
}
.all-order .all-order-serch .seach-input {
margin-right: 8px;
} }
.all-order .all-order-serch .seach-input .el-input__inner,.all-order .all-order-serch .seach-input { .all-order .all-order-serch .seach-input .el-input__inner,.all-order .all-order-serch .seach-input {
width: 298px; width: 298px;
height: 30px;
} }
.button-color{ .button-color{
background: #5874D8; background: #5874D8;
} }
.button-icon{ .button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px; background: rgba(88,116,216,0.1) ; padding: 5px 8px;
border-radius: 4px; border-radius: 4px;
margin-right: 8px;
} }
.button-icon i { .button-icon i {
font-size: 22px;color: #5874D8; font-size: 22px;color: #5874D8;
...@@ -71,8 +82,9 @@ ...@@ -71,8 +82,9 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 50px; bottom: 50px;
top: 64px; top: 54px;
overflow: auto; overflow-y: auto;
overflow-x: hidden;
} }
.all-order-content{ .all-order-content{
width: 1178px; width: 1178px;
...@@ -82,18 +94,18 @@ ...@@ -82,18 +94,18 @@
} }
.all-order-box{ .all-order-box{
width: 100%; width: 100%;
height: 104px; height: 94px;
margin-top: 10px; margin-top: 10px;
box-shadow: 3px 0px 5px 0px rgba(43,67,153,0.2); box-shadow: 3px 0px 5px 0px rgba(43,67,153,0.2);
} }
.all-box-top{ .all-box-top{
height: 42px; height: 30px;
line-height: 42px; line-height: 30px;
} }
.all-box-top .type1{ .all-box-top .type1{
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
padding: 6px; padding:5px 6px;
margin-right: 10px; margin-right: 10px;
background: url('../static/images/order-set1.png'); background: url('../static/images/order-set1.png');
background-size: 100% 100%; background-size: 100% 100%;
...@@ -102,7 +114,7 @@ ...@@ -102,7 +114,7 @@
.all-box-top .type2{ .all-box-top .type2{
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
padding: 6px; padding:5px 6px;
margin-right: 10px; margin-right: 10px;
background: url('../static/images/order-set2.png'); background: url('../static/images/order-set2.png');
background-size: 100% 100%; background-size: 100% 100%;
...@@ -113,15 +125,15 @@ ...@@ -113,15 +125,15 @@
} }
.all-box-topright i:nth-child(1) { .all-box-topright i:nth-child(1) {
margin-right: 20px; margin-right: 20px;
font-size: 20px; font-size: 18px;
} }
.all-box-topright i:nth-child(2) { .all-box-topright i:nth-child(2) {
margin-right: 20px; margin-right: 20px;
font-size: 20px; font-size: 18px;
} }
.all-box-topright i:nth-child(3) { .all-box-topright i:nth-child(3) {
margin-right: 20px; margin-right: 20px;
font-size: 20px; font-size: 18px;
} }
.all-box-topright i.start2{ .all-box-topright i.start2{
color: #50B5FC color: #50B5FC
...@@ -242,7 +254,7 @@ ...@@ -242,7 +254,7 @@
} }
.order-detail .el-dialog__header .el-dialog__headerbtn i{ .order-detail .el-dialog__header .el-dialog__headerbtn i{
color:#8F97A4; color:#8F97A4;
font-size: 14px; font-size: 24px;
} }
.order-detail .order-detail-tab{ .order-detail .order-detail-tab{
margin-top: 5px; margin-top: 5px;
...@@ -575,6 +587,11 @@ ...@@ -575,6 +587,11 @@
.add-order-right .add-order-content form .el-form-item__error{ .add-order-right .add-order-content form .el-form-item__error{
padding-top: 0; padding-top: 0;
} }
.add-order-right .add-order-content form .pre_space .el-form-item__error{
padding-top: 0;
left: -34px;
top: 28px;
}
.add-order-right .add-order-content form .el-input__icon{ .add-order-right .add-order-content form .el-input__icon{
line-height: 28px; line-height: 28px;
} }
...@@ -601,6 +618,7 @@ ...@@ -601,6 +618,7 @@
} }
.add-order-right .add-order-content .title span{ .add-order-right .add-order-content .title span{
color: #5B76D1; color: #5B76D1;
font-size: 12px;
} }
.add-order-right .add-order-content .textarea{ .add-order-right .add-order-content .textarea{
margin-top: 20px; margin-top: 20px;
...@@ -646,13 +664,13 @@ ...@@ -646,13 +664,13 @@
} }
.deliver-dialog .el-dialog__header .el-dialog__headerbtn i{ .deliver-dialog .el-dialog__header .el-dialog__headerbtn i{
color: #8F97A4 ; color: #8F97A4 ;
font-size: 14px; font-size: 24px;
} }
.deliver-dialog .el-dialog__body{ .deliver-dialog .el-dialog__body{
padding: 30px; padding: 30px 21px;
} }
.deliver-dialog .deliver-dialog-title{ .deliver-dialog .deliver-dialog-title{
font-size:7px; font-size:14px;
font-family:PingFangSC-Medium; font-family:PingFangSC-Medium;
font-weight:500; font-weight:500;
color:rgba(143,151,164,1); color:rgba(143,151,164,1);
...@@ -661,7 +679,7 @@ ...@@ -661,7 +679,7 @@
.deliver-dialog select{ .deliver-dialog select{
} }
.deliver-dialog .el-input__inner,.deliver-dialog .el-input{ .deliver-dialog .el-input__inner,.deliver-dialog .el-input{
width: 360px; width: 402px;
height: 36px; height: 36px;
font-size: 12px; font-size: 12px;
} }
...@@ -673,7 +691,7 @@ ...@@ -673,7 +691,7 @@
} }
.deliver-dialog .bt-center button{ .deliver-dialog .bt-center button{
width: 180px; width: 180px;
border-clo border:none;
} }
/*******派单弹框end************/ /*******派单弹框end************/
/*******确权结算************/ /*******确权结算************/
......
...@@ -3,13 +3,13 @@ var Product={ ...@@ -3,13 +3,13 @@ var Product={
template: ` template: `
<div class="settle-right"> <div class="settle-right">
<div class="all-settle-serch"> <div class="all-settle-serch">
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类"> <el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类" size="mini">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option> <el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select> </el-select>
<el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入规格,型号名查询'></el-input> <el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入规格,型号名查询' size="mini"></el-input>
<el-button type='primary' class='button-color'>搜索</el-button> <el-button type='primary' class='button-color' size="mini">搜索</el-button>
<el-button type='primary' plain class='firstbackgroud_blue addbutton' @click='AddCardfun()'>新建品牌</el-button> <el-button type='primary' plain class='firstbackgroud_blue addbutton' @click="AddCardfun('creat')" size="mini">新建品牌</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click='creatProduct()'>新建产品</el-button> <el-button type='primary' class='firstbackgroud_blue addbutton' @click='creatProduct()' size="mini">新建产品</el-button>
</div> </div>
<div class="settle-content"> <div class="settle-content">
<table class="table-header"> <table class="table-header">
...@@ -47,7 +47,7 @@ var Product={ ...@@ -47,7 +47,7 @@ var Product={
<td style="width:70%" class='third-table-center'> <td style="width:70%" class='third-table-center'>
<div class="text_center"><el-button type='text' @click='edictModel(items,child)'>{{child.type}}</el-button></div> <div class="text_center"><el-button type='text' @click='edictModel(items,child)'>{{child.type}}</el-button></div>
</td> </td>
<td style="width:30%"> <td style="width:30%" @click="AddCardfun('edict')">
<div class="text_center"><div class="text_center">{{child.name}}</div></div> <div class="text_center"><div class="text_center">{{child.name}}</div></div>
</td> </td>
...@@ -186,9 +186,8 @@ var Product={ ...@@ -186,9 +186,8 @@ var Product={
this.modalData = {}; this.modalData = {};
this.modal = AddProduct; this.modal = AddProduct;
}, },
AddCardfun(){ AddCardfun(type){
console.log(444) this.modalData = {type:type};
this.modalData = {type:'creat'};
this.modal = AddCard; this.modal = AddCard;
}, },
edictType(item){ edictType(item){
......
...@@ -2,15 +2,14 @@ var Protect ={ ...@@ -2,15 +2,14 @@ var Protect ={
template: ` template: `
<div class="settle-right"> <div class="settle-right">
<div class="all-settle-serch"> <div class="all-settle-serch">
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类"> <el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类" size="mini">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option> <el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select> </el-select>
<el-select class="seach-select" v-model="search.status" @change='' placeholder="选择类型"> <el-select class="seach-select" v-model="search.status" @change='' placeholder="选择类型" size="mini">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option> <el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select> </el-select>
<!-- <el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入项目名,合作商名查询'></el-input> --> <el-button type='primary' class='firstbackgroud_blue' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue'>搜索</el-button> <el-button type='primary' class='firstbackgroud_blue addbutton' @click="addProtect()" size="mini">新建</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click="addProtect()">新建</el-button>
</div> </div>
<div class="settle-content"> <div class="settle-content">
<table class="table-header"> <table class="table-header">
......
...@@ -2,15 +2,14 @@ var Server={ ...@@ -2,15 +2,14 @@ var Server={
template: ` template: `
<div class="settle-right"> <div class="settle-right">
<div class="all-settle-serch"> <div class="all-settle-serch">
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类"> <el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类" size="mini">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option> <el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select> </el-select>
<el-select class="seach-select" v-model="search.status" @change='' placeholder="选择状态"> <el-select class="seach-select" v-model="search.status" @change='' placeholder="选择状态" size="mini">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option> <el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select> </el-select>
<!-- <el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入项目名,合作商名查询'></el-input> --> <el-button type='primary' class='firstbackgroud_blue' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue'>搜索</el-button> <el-button type='primary' class='firstbackgroud_blue addbutton' @click='AddServerFun()' size="mini">新建服务</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click='AddServerFun()'>新建服务</el-button>
</div> </div>
<div class="settle-content"> <div class="settle-content">
<table class="table-header"> <table class="table-header">
......
var AddCard={ var AddCard={
template: ` template: `
<el-dialog width="420px" :title="dialog.title" custom-class='addcate animated slideInRight' :visible.sync="dialog.show" @close="handleClose" append-to-body> <el-dialog width='444px' :title="dialog.title" custom-class='addcate' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px"> <div class="dialog-content">
<el-form-item label="品牌名称:"> <div class="deliver-dialog-title">品牌名称:</div>
<el-input v-model='form.name'></el-input> <el-input v-model="form.name"></el-input>
</el-form-item>
</el-form> <div class="bt-center">
<div class='button-box'> <el-button type="primary" class='firstbackgroud_blue text-white firstborder_blue' >保存</el-button>
<el-button type='primary' class='primary_btcolor' >保存</el-button> <el-button type="danger" class='firstbackgroud_red text-white firstborder_red' v-if="isEdcit">删除</el-button>
</div> </div>
</div>
</el-dialog>`, </el-dialog>`,
props: { props: {
...@@ -17,7 +18,7 @@ var AddCard={ ...@@ -17,7 +18,7 @@ var AddCard={
}, },
data(){ data(){
return{ return{
uploadApi:'', uploadApi:'',isEdcit:false,
dialog:{ dialog:{
show:true,title:'新建品牌',type:1 show:true,title:'新建品牌',type:1
}, },
...@@ -31,6 +32,10 @@ var AddCard={ ...@@ -31,6 +32,10 @@ var AddCard={
if(this.modalData.type=='creat'){ if(this.modalData.type=='creat'){
this.dialog.title = '新增品牌' this.dialog.title = '新增品牌'
} }
if(this.modalData.type=='edict'){
this.isEdcit = true;
this.dialog.title = '编辑品牌'
}
}, },
methods:{ methods:{
handleClose() { handleClose() {
......
// 产品规格
var AddCate={ var AddCate={
template: ` template: `
<el-dialog width="420px" :title="dialog.title" custom-class='addcate animated slideInRight' :visible.sync="dialog.show" @close="handleClose" append-to-body> <el-dialog width="444px" :title="dialog.title" custom-class='addcate ' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px"> <div class="dialog-content">
<el-form-item label="产品品类:"> <div class="deliver-dialog-title">产品品类:</div>
{{form.name}} <el-input v-model="form.name"></el-input>
</el-form-item> <div class="deliver-dialog-title">产品规格:</div>
<el-form-item label="产品规格:"> <el-input v-model="form.cate"></el-input>
<el-input v-model='form.cate'></el-input>
</el-form-item> <div class="bt-center">
</el-form> <el-button type="primary" class='firstbackgroud_blue text-white firstborder_blue' >保存</el-button>
<div class='button-box'> <el-button type="danger" class='firstbackgroud_red text-white firstborder_red' v-if="!isCreat">删除</el-button>
<el-button type='primary' class='primary_btcolor' >保存</el-button> </div>
<el-button type='danger' class="firstbackgroud_red" v-if='!isCreat'>删除</el-button> </div>
</div>
</el-dialog>`, </el-dialog>`,
props: { props: {
//父组件调用时传进来的参数 //父组件调用时传进来的参数
...@@ -25,7 +25,7 @@ var AddCate={ ...@@ -25,7 +25,7 @@ var AddCate={
show:true,title:'产品规格',type:1 show:true,title:'产品规格',type:1
}, },
form:{ form:{
name:'', name:'空调',
cate:'' cate:''
} }
} }
......
// 产品型号
var AddModel={ var AddModel={
template: ` template: `
<el-dialog width="420px" :title="dialog.title" custom-class='addcate' :visible.sync="dialog.show" @close="handleClose" append-to-body> <el-dialog width="444px" :title="dialog.title" custom-class='addcate' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="规格分类:">
{{form.name}}
</el-form-item> <div class="dialog-content">
<el-form-item label="归属品牌:"> <div class="deliver-dialog-title">规格分类:</div>
<el-select v-model="form.card" placeholder="请选择"> <el-input v-model="form.name"></el-input>
<el-option label="海尔" value="海尔"></el-option> <div class="deliver-dialog-title">归属品牌:</div>
<el-option label="美的" value="美的"></el-option> <el-select v-model="form.card" placeholder="请选择" style="width:100%">
</el-select> <el-option label="海尔" value="海尔"></el-option>
</el-form-item> <el-option label="美的" value="美的"></el-option>
<el-form-item label="输入型号:"> </el-select>
<el-input v-model='form.cate'></el-input> <div class="deliver-dialog-title">输入型号:</div>
</el-form-item> <el-input v-model="form.model" type="textarea" placeholder="型号名称(多个用逗号隔开)"></el-input>
</el-form>
<div class='button-box'> <div class="bt-center">
<el-button type='primary' class='primary_btcolor' >保存</el-button> <el-button type="primary" class='firstbackgroud_blue text-white firstborder_blue' >保存</el-button>
<el-button type='danger' class="firstbackgroud_red" v-if='!isCreat'>删除</el-button> <el-button type="danger" class='firstbackgroud_red text-white firstborder_red' v-if="!isCreat">删除</el-button>
</div> </div>
</div>
</el-dialog>`, </el-dialog>`,
props: { props: {
//父组件调用时传进来的参数 //父组件调用时传进来的参数
...@@ -33,7 +35,7 @@ var AddModel={ ...@@ -33,7 +35,7 @@ var AddModel={
form:{ form:{
name:'', name:'',
card:'', card:'',
cate:'' model:''
} }
} }
}, },
......
var AddProduct={ var AddProduct={
template: ` template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'> <el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail' @close="handleClose" :append-to-body="true" :show-close='true'>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick"> <el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick" >
<el-tab-pane label="品类" name="1"> <el-tab-pane label="品类" name="1">
<div class='order-detail-tab' style="padding:20px;line-height:3"> <div class='order-detail-tab' style="padding:20px;line-height:3">
<el-radio v-model="choose_type" v-for='(item,index) in products' :key='index' :label="item.id" @change='clickType(item)' border size="medium">{{item.name}}</el-radio> <el-radio v-model="choose_type" v-for='(item,index) in products' :key='index' :label="item.id" @change='clickType(item)' border size="medium">{{item.name}}</el-radio>
...@@ -91,7 +91,7 @@ var AddProduct={ ...@@ -91,7 +91,7 @@ var AddProduct={
this.modal = AddCate; this.modal = AddCate;
}, },
addModel(){ addModel(){
this.innerData = {title:'新增类型',name:this.choose_cateName,show:true}; this.innerData = {title:'新增类型',name:this.choose_cateName,show:true,type:'creat'};
this.modal = AddModel; this.modal = AddModel;
}, },
closeChild(){ closeChild(){
......
// 新增编辑品类
var AddType={ var AddType={
template: ` template: `
<el-dialog width="420px" :title="dialog.title" custom-class='addcate animated slideInRight' :visible.sync="dialog.show" @close="handleClose" append-to-body> <el-dialog width="444px" :title="dialog.title" custom-class='addcate ' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px"> <div class="dialog-content">
<el-form-item label="品类名称:"> <div class="deliver-dialog-title">品类名称:</div>
<el-input v-model="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> <div class="deliver-dialog-title">上传图片:</div>
<el-form-item label="图片:"> <el-upload class="addtype-uploader" :action="uploadApi" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<el-upload class="avatar-uploader" :action="uploadApi" <img v-if="form.img" :src="form.img" class="addtype">
:show-file-list="false" <i v-else class="el-icon-plus addtype-uploader-icon"></i>
:on-success="handleAvatarSuccess" </el-upload>
:before-upload="beforeAvatarUpload">
<img v-if="form.img" :src="form.img" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <div class="bt-center">
</el-upload> <el-button type="primary" class='firstbackgroud_blue text-white firstborder_blue' >保存</el-button>
</el-form-item> <el-button type="danger" class='firstbackgroud_red text-white firstborder_red' v-if="!isCreat">删除</el-button>
</el-form> </div>
<div class='button-box'> </div>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' class="firstbackgroud_red" v-if='!isCreat'>删除</el-button>
</div>
</el-dialog> `, </el-dialog> `,
props: { props: {
//父组件调用时传进来的参数 //父组件调用时传进来的参数
......
var EdictProtect={ var EdictProtect={
template: ` template: `
<el-dialog width="420px" :title="dialog.title" custom-class='addcate add-protect animated slideInRight' :visible.sync="dialog.show" @close="handleClose" append-to-body> <el-dialog width="444px" :title="dialog.title" custom-class='addcate add-protect ' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<div class="dialog-content">
<el-form ref="form" :model="form" label-width="100px"> <el-form ref="form" :model="form" label-width="100px">
<el-form-item label="品类名称:"> <el-form-item label="品类名称:">
<el-select v-model="form.name" placeholder="选择品类"> <el-select v-model="form.name" placeholder="选择品类" style="width:100%">
<el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options1"></el-option> <el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options1"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="服务类型:"> <el-form-item label="服务类型:">
<el-select v-model="form.type" placeholder="选择类型"> <el-select v-model="form.type" placeholder="选择类型" style="width:100%">
<el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options2"></el-option> <el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options2"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="服务分类:"> <el-form-item label="服务分类:">
<el-select v-model="form.area" placeholder="选择分类"> <el-select v-model="form.area" placeholder="选择分类" style="width:100%">
<el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options3"></el-option> <el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options3"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="产品规格:"> <el-form-item label="产品规格:">
<el-select v-model="form.cate" placeholder="选择规格"> <el-select v-model="form.cate" placeholder="选择规格(多选)" style="width:100%" @change="chooseFun">
<el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options4"></el-option> <el-option :label="item.label" :value="item" :key="item.label" v-for="(item,index) in options4"></el-option>
</el-select> </el-select>
<div style="max-height:122px;overflow-y:auto">
<span class="tag" v-for="(item,index) in chooseList" :key="index">
{{item.label}}
<i @click="deleteFun(index)" class='el-icon-close addoperate-icon'></i>
</span>
</div>
</el-form-item>
<el-form-item label="已 选:" class="pre_space">
<el-input placeholder='请输入金额'></el-input>
</el-form-item> </el-form-item>
<el-form-item label="保内结算:"> <el-form-item label="保内结算:">
<el-input v-model="form.price" placeholder='请输入金额'></el-input> <el-input v-model="form.price" placeholder='请输入金额'></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class='button-box'> <div class="protect-center">
<el-button type='primary' class='primary_btcolor' >保存</el-button> <el-button type="primary" class='firstbackgroud_blue text-white firstborder_blue' >保存</el-button>
<el-button type='danger' class="firstbackgroud_red" v-if='!isCreat'>删除</el-button> <el-button type="danger" class='firstbackgroud_red text-white firstborder_red' v-if="!isCreat">删除</el-button>
</div>
</div> </div>
</el-dialog> `, </el-dialog> `,
props: { props: {
...@@ -52,7 +64,13 @@ var EdictProtect={ ...@@ -52,7 +64,13 @@ var EdictProtect={
options1:[], options1:[],
options2:[], options2:[],
options3:[], options3:[],
options4:[], options4:[
{value:1,label:'定频1.5P1'},
{value:2,label:'定频1.5P2'},
{value:3,label:'定频1.5P3'},
{value:4,label:'定频1.5P4'},
],
chooseList:[]
} }
}, },
created(){ created(){
...@@ -71,6 +89,13 @@ var EdictProtect={ ...@@ -71,6 +89,13 @@ var EdictProtect={
handleClose() { handleClose() {
this.$emit('close') this.$emit('close')
}, },
chooseFun(value){
console.log(value,this.chooseList)
this.chooseList.push(value)
},
deleteFun(index){
this.chooseList.splice(index,1)
},
} }
} }
...@@ -11,7 +11,7 @@ var AddServer={ ...@@ -11,7 +11,7 @@ var AddServer={
<el-input v-model='input_first' ></el-input> <el-input v-model='input_first' ></el-input>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<i class='el-icon-success cursor' @click='addFirst()'></i> <i class='el-icon-success cursor' @click='addFirst()' style="color: #5da75d;font-size: 22px;margin-left: 7px;margin-top: 10px;"></i>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -26,7 +26,7 @@ var AddServer={ ...@@ -26,7 +26,7 @@ var AddServer={
<el-input v-model='input_second' ></el-input> <el-input v-model='input_second' ></el-input>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<i class='el-icon-success cursor' @click='addSecond()'></i> <i class='el-icon-success cursor' @click='addSecond()' style="color: #5da75d;font-size: 22px;margin-left: 7px;margin-top: 10px;"></i>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -43,7 +43,7 @@ var AddServer={ ...@@ -43,7 +43,7 @@ var AddServer={
<el-input v-model='input_third' type='textarea'></el-input> <el-input v-model='input_third' type='textarea'></el-input>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<i class='el-icon-success cursor' @click='addThird()'></i> <i class='el-icon-success cursor' @click='addThird()' style="color: #5da75d;font-size: 22px;margin-left: 7px;margin-top: 10px;"></i>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
......
var EdictName={ var EdictName={
template: ` template: `
<el-dialog width="420px" title="编辑" custom-class='addcate animated slideInRight' :visible.sync="dialog.show" @close="handleClose" append-to-body> <el-dialog width='444px' :title="dialog.title" custom-class='addcate' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px"> <div class="dialog-content">
<el-form-item label="名称:"> <div class="deliver-dialog-title">品牌名称:</div>
<el-input v-model='form.name'></el-input> <el-input v-model="form.name"></el-input>
</el-form-item>
</el-form> <div class="bt-center">
<div class='button-box'> <el-button type="primary" class='firstbackgroud_blue text-white firstborder_blue' >保存</el-button>
<el-button type='primary' class='primary_btcolor' >保存</el-button> <el-button type="danger" class='firstbackgroud_red text-white firstborder_red' >删除</el-button>
<el-button type='danger' class="firstbackgroud_red" >删除</el-button> </div>
</div> </div>
</el-dialog> `, </el-dialog> `,
props: { props: {
//父组件调用时传进来的参数 //父组件调用时传进来的参数
...@@ -19,11 +19,10 @@ var EdictName={ ...@@ -19,11 +19,10 @@ var EdictName={
return{ return{
uploadApi:'', uploadApi:'',
dialog:{ dialog:{
show:true,title:'',type:1 show:true,title:'编辑',type:1
}, },
form:{ form:{
name:'空调', name:'空调',
cate:''
} }
} }
}, },
......
...@@ -30,6 +30,9 @@ ...@@ -30,6 +30,9 @@
top: 20px; top: 20px;
background: #50B5FC background: #50B5FC
} }
.settle-menu{
border:none;
}
.settle-content table{ .settle-content table{
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
...@@ -72,27 +75,29 @@ ...@@ -72,27 +75,29 @@
position: relative; position: relative;
background: #ffffff; background: #ffffff;
} }
.settle-right .all-settle-serch{
background: #ffffff; .settle .all-settle-serch{
padding: 10px; background: #ffffff;
position: relative; padding:12px 10px;
height: 30px;
position: relative;
} }
.all-settle-serch:after{ .settle .all-settle-serch .seach-select{
position: absolute; margin-right: 8px;
content: '';
left: 20px;
right: 20px;
bottom: 0;
height:1px;
background: #ececec;
} }
.settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{ .settle .all-settle-serch .seach-select .el-input__inner,.settle .all-settle-serch .seach-select .el-input{
width: 120px !important; width: 120px !important;
background: #F1F3F9; background: #F1F3F9;
border: none; border: none;
height: 30px;
} }
.settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input { .settle .all-settle-serch .seach-input {
width: 298px; margin-right: 8px;
}
.settle .all-settle-serch .seach-input .el-input__inner,.settle .all-settle-serch .seach-input {
width: 298px;
height: 30px;
} }
.button-color{ .button-color{
background: #5874D8; background: #5874D8;
...@@ -144,31 +149,13 @@ ...@@ -144,31 +149,13 @@
.addcate .button-box button{ .addcate .button-box button{
width: 100px; width: 100px;
} }
.order-detail{ /*********dialog 样式********************/
width: 720px;
height: 670px;
}
.order-detail h2{
padding-left: 20px;
}
.order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.order-detail .order-detail-tab{
margin-top: 5px;
line-height: 2;
/*border-bottom: 1px solid #ececec;*/
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.order-detail .el-radio__input{ .order-detail .el-radio__input{
display: none; display: none;
} }
.order-detail .el-radio{ .order-detail .el-radio{
/*margin-right: 0;*/
/*background: #F1F3F8;*/
padding: 7px 15px 9px 3px; padding: 7px 15px 9px 3px;
border-radius: 3px; border-radius: 3px;
margin-right: 20px; margin-right: 20px;
...@@ -176,6 +163,64 @@ ...@@ -176,6 +163,64 @@
height: 30px; height: 30px;
} }
.order-detail .el-dialog__body{
padding:30px 0;
}
.order-detail .el-dialog__header{
background: #6C8BF8;
}
.order-detail .el-dialog__header .el-dialog__title,.order-detail .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff;
font-size: 16px;
}
.order-detail .el-tabs__header{
border:none;
}
.order-detail .el-dialog__body{
padding: 0;
}
.order-detail .el-dialog__header{
background: #eef1fa;
}
.order-detail .el-dialog__header .el-dialog__title{
color: #5874d8;
font-size: 18px;
}
.order-detail .el-dialog__header .el-dialog__headerbtn i{
color:#8F97A4;
font-size: 24px;
}
.order-detail h2{
padding-left: 30px;
}
.order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
background: #eef1fa;
padding-top: 10px;
}
.order-detail .el-tabs--card>.el-tabs__header .el-tabs__item{
background: #f5f5f5;
margin-bottom: -1px;
margin-right: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #BFCAEB;
}
.order-detail .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
background: #ffffff;
border: 1px solid #5874d8;
border-bottom: #ffffff;
color: #5874d8;
}
.order-detail .el-tabs--card>.el-tabs__header .el-tabs__nav{
border:none;
}
/*******************************范围start******************************/ /*******************************范围start******************************/
.order-detail-tab .tag{ .order-detail-tab .tag{
...@@ -200,27 +245,87 @@ ...@@ -200,27 +245,87 @@
.addcate .button-box button{ .addcate .button-box button{
width: 100px; width: 100px;
} }
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
/*******增加品牌start************/
.addcate{
height: 492px;
}
.addcate .el-dialog__header{
background: #ffffff ;
padding-left: 30px;
}
.addcate .el-dialog__header .el-dialog__title{
color: #5B76D1 ;
font-size:24px;
font-family:PingFangSC-Medium;
font-weight:500;
line-height:35px
}
.addcate .el-dialog__header .el-dialog__headerbtn i{
color: #8F97A4 ;
font-size: 24px;
}
.addcate .el-dialog__body{
padding: 30px 21px;
}
.addcate .deliver-dialog-title{
font-size:14px;
font-family:PingFangSC-Medium;
font-weight:500;
color:rgba(143,151,164,1);
line-height:35px;
}
.addcate select{
}
.addcate .el-input__inner,.deliver-dialog .el-input{
height: 36px;
font-size: 12px;
}
.addcate .bt-center{
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
}
.addcate .protect-center{
text-align: center;margin-top: 20px;
}
.addcate .bt-center button,.addcate .protect-center button{
width: 180px;
border:none;
}
/*******增加品牌end************/
/************上传***********************/
.addtype-uploader {
width: 100%
}
.addtype-uploader .el-upload {
border: 1px dashed #5774D8;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%;
} }
.avatar-uploader .el-upload:hover { .addtype-uploader .el-upload:hover {
border-color: #409EFF; border-color: #409EFF;
} }
.avatar-uploader-icon { .addtype-uploader-icon {
font-size: 28px; font-size: 28px;
color: #8c939d; color:#5774D8;
width: 120px; width: 100%;
height: 120px; height: 180px;
line-height: 120px; line-height: 180px;
text-align: center; text-align: center;
} }
.avatar { .addtype {
width: 120px; width: 100%;
height: 120px; height: 180px;
display: block; display: block;
} }
.settle-content table{ .settle-content table{
...@@ -396,44 +501,6 @@ ...@@ -396,44 +501,6 @@
padding: 15px; padding: 15px;
} }
.order-detail{
width: 720px;
height: 670px;
}
.order-detail h2{
padding-left: 20px;
}
.order-detail .add-input{
margin-top: 10px;
}
.order-detail .add-input i{
color: #81C868;
font-size: 30px;
vertical-align: middle;
margin-left: 10px;
}
.order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.order-detail .order-detail-tab{
/*margin-top: 5px;*/
line-height: 2;
/*border-bottom: 1px solid #ececec;*/
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.order-detail .el-radio__input{
display: none;
}
.order-detail .el-radio{
padding: 7px 15px 9px 3px;
border-radius: 3px;
margin-right: 20px;
color: #999999 !important;
height: 30px;
}
/*******************************范围start******************************/ /*******************************范围start******************************/
...@@ -452,12 +519,30 @@ ...@@ -452,12 +519,30 @@
.add-server .el-dialog__body{ .add-server .el-dialog__body{
padding:15px 0 !important; padding:15px 0 !important;
} }
.add-protect{
height: auto !important;
max-height: 580px;
}
.add-protect form{ .add-protect form{
width: 480px; width: 480px;
} }
.add-protect form{ .add-protect form{
width: 320px; width: 365px;
margin-left: 20px; margin-left: 20px;
} }
.add-protect .el-form-item{
\ No newline at end of file margin-bottom: 7px;
}
.add-protect .tag{
background: #eef1fa;
padding: 5px ;
border-radius: 3px;
margin-right: 10px;
color: #8F97A4 !important;
border: 1px solid #5874D8;
display: inline-block;
height: 25px;
line-height: 25px;
margin-top: 5px;
}
This diff is collapsed.
var vPay={ var vPay={
template: ` template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='settle-dialog animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'> <el-dialog :title="dialog.title" width='444px' :visible.sync="dialog.show" custom-class='settle-dialog' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content"> <div class="pay-detail-tab">
<p> <p>
<span>授权点数:</span> <span class="settle-dialog-title">授权点数:</span>
<span>唯修汇(张三 15599991111)</span> <span>基 本:安装--新机 *1 ¥200.00</span>
</p> </p>
<p> <p>
<span>收款方式:</span> <span class="settle-dialog-title">其他金额:</span>
<span>银行卡(中国银行高新支行)</span> <el-input v-model="price"></el-input>
</p> </p>
<p>收款人:<span>张三(62220998678123)</span></p>
<p> <p>
<span>金额:</span> <span class="settle-dialog-title">金额说明:</span>
<span>¥120000</span> <el-input v-model="remark"></el-input>
</p> </p>
<div class="bt-center"> <p>
<el-button class='background-blue text-white' >确定付款</el-button> <span class="settle-dialog-title">合计金额:</span>
<el-input v-model="total"></el-input>
</p>
<div class="bt-center" style="bottom:25px !important">
<el-button class='background-blue text-white' >确定</el-button>
</div> </div>
</div> </div>
</el-dialog>`, </el-dialog>`,
props: { props: {
modalData: Array modalData: Array
...@@ -26,9 +30,9 @@ var vPay={ ...@@ -26,9 +30,9 @@ var vPay={
data(){ data(){
return{ return{
detail:{ },uploadApi:'', detail:{ },uploadApi:'',
price:'',remark:'',total:'',
dialog:{ dialog:{
show:true,title:'结算付款',tab:'1', show:true,title:'工单结算',tab:'1',
}, },
} }
}, },
......
var payDetail={ var payDetail={
template: ` template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'> <el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='pay-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick"> <el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1"> <el-tab-pane label="详情" name="1">
<h2>付款信息</h2> <h2 class="line-left">付款信息</h2>
<div class='order-detail-tab' style="line-height:2.5;border:none"> <div class='pay-detail-tab' style="border:none">
<p> <p>
付款状态: <span>已付</span> <span class="pay-dialog-title">付款状态:</span>
<span>已付款</span>
</p> </p>
</div> <p>
<span class="pay-dialog-title">创建日期:</span>
<span>2019-05-22</span>
</p>
<p>
<span class="pay-dialog-title">收款方式:</span>
<span>线上</span>
</p>
<p>
<span class="pay-dialog-title">授 权 点:</span>
<span>银行卡</span>
</p>
<p>
<span class="pay-dialog-title">金 额:</span>
<span>¥1200</span>
</p>
<p>
<span class="pay-dialog-title">付款日期:</span>
<span>2019-05-01</span>
</p>
<p>
<span class="pay-dialog-title">付款流水:</span>
<span>12739854065765</span>
</p>
<p>
<span class="pay-dialog-title">完工备注:</span>
<el-input type="textarea" v-model="remark"></el-input>
</p>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-dialog> `, </el-dialog> `,
...@@ -19,7 +48,7 @@ var payDetail={ ...@@ -19,7 +48,7 @@ var payDetail={
}, },
data(){ data(){
return{ return{
detail:{ },uploadApi:'',isdedict:false,other:'',price:'', detail:{ },uploadApi:'',isdedict:false,other:'',price:'',remark:'',
dialog:{ dialog:{
show:true,title:'付款单(GLDQ0019211237)',tab:'1', show:true,title:'付款单(GLDQ0019211237)',tab:'1',
}, },
......
var vSettle={ var vSettle={
template: ` template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='settle-dialog animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'> <el-dialog :title="dialog.title" width='444px' :visible.sync="dialog.show" custom-class='settle-dialog ' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content"> <div class="dialog-content">
<p> <p>
<span>授权点数:</span> <span class="settle-dialog-title">授权点数:</span>
<span>3</span> <span>唯修汇(张三 15599991111)</span>
</p> </p>
<p> <p>
<span>工单数量:</span> <span class="settle-dialog-title">收款方式:</span>
<span>300</span> <span>银行卡(中国银行高新支行)</span>
</p> </p>
<p> <p>
<span>结算金额:</span> <span class="settle-dialog-title">收 款 人:</span>
<span>张三(62220998678123)</span>
</p>
<p>
<span class="settle-dialog-title">金 额:</span>
<span>¥120000</span> <span>¥120000</span>
</p> </p>
<div class="settle-dialog-title">付款流水:</div>
<el-input v-model='form.number'></el-input>
<div class="settle-dialog-title">备 注:</div>
<el-input v-model='form.remark'></el-input>
<div class="bt-center"> <div class="bt-center">
<el-button class='background-blue text-white' >确定结算</el-button> <el-button class='background-blue text-white' >确定付款</el-button>
</div> </div>
</div> </div>
</el-dialog> `, </el-dialog> `,
...@@ -27,7 +35,7 @@ var vSettle={ ...@@ -27,7 +35,7 @@ var vSettle={
data(){ data(){
return{ return{
detail:{ },uploadApi:'', detail:{ },uploadApi:'',
form:{number:'',remark:''},
dialog:{ dialog:{
show:true,title:'结算工单',tab:'1', show:true,title:'结算工单',tab:'1',
}, },
......
var settleDetail={ var settleDetail={
template: ` template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'> <el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='pay-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content"> <div class="dialog-content">
<div class="edict-icon"> <div class="edict-icon">
<i class="el-icon-edit-outline" @click='edictFun()' v-show='!isdedict'></i> <i class="el-icon-edit-outline" @click='edictFun()' ></i>
</div> </div>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick"> <el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="结算信息" name="1"> <el-tab-pane label="结算信息" name="1">
<h2>结算信息</h2> <h2 class="line-left">结算信息</h2>
<div class='order-detail-tab' style="line-height:2.5"> <div class='pay-detail-tab' style="line-height:2.5">
<p> <p>
基 本: <span>安装--新机安装*1¥200.00</span> 基 本: <span>安装--新机安装*1¥200.00</span>
</p> </p>
<p> <p>
其 他: 其 他:
<el-input class="seach-input" placeholder='其他项目' v-model='other' :disabled='!isdedict'></el-input> <span>高空补贴 *1 ¥100.00</span>
</p> </p>
<p> <p>
金 额: 合计:
<el-input class="seach-input" placeholder='其他项目' v-model='price' :disabled='!isdedict'></el-input> <span>¥1500</span>
</p> </p>
</div> </div>
<h2>完工信息</h2> <h2 class="line-left">完工信息</h2>
<div class='order-detail-tab' style="line-height:2.5;border:none"> <div class='pay-detail-tab' style="line-height:2.5;border:none">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<p>授 权 点: <span> 唯修汇 (张三 15599991111)</span></p> <p>授 权 点: <span> 唯修汇 (张三 15599991111)</span></p>
...@@ -45,27 +45,15 @@ var settleDetail={ ...@@ -45,27 +45,15 @@ var settleDetail={
<p> <p>
完工图片: <span>(6张)</span> 完工图片: <span>(6张)</span>
</p> </p>
<div class="order-carousel"> <div class="pay-carousel">
<el-carousel :interval="4000" type="card" height="120px" :autoplay='false' arrow="always"> <i class="el-icon-arrow-left"></i>
<el-carousel-item > <i class="el-icon-arrow-right"></i>
<img src="../static/images/women.jpg" alt="" width="100%" height="100%"> <div class="pay-carousel-content">
</el-carousel-item> <img src="../static/images/man.jpg" alt="" width="120px" height="120px" class="one">
<el-carousel-item > <img src="../static/images/man.jpg" alt="" width="120px" height="120px">
<img src="../static/images/man.jpg" alt="" width="100%" height="100%"> <img src="../static/images/man.jpg" alt="" width="120px" height="120px">
</el-carousel-item> <img src="../static/images/man.jpg" alt="" width="120px" height="120px">
<el-carousel-item > </div>
<img src="../static/images/man.jpg" alt="" width="100%" height="100%">
</el-carousel-item>
<el-carousel-item >
<img src="../static/images/man.jpg" alt="" width="100%" height="100%">
</el-carousel-item>
<el-carousel-item >
<img src="../static/images/man.jpg" alt="" width="100%" height="100%">
</el-carousel-item>
<el-carousel-item >
<img src="../static/images/man.jpg" alt="" width="100%" height="100%">
</el-carousel-item>
</el-carousel>
</div> </div>
<p> <p>
完工备注注: 完工备注注:
...@@ -75,6 +63,7 @@ var settleDetail={ ...@@ -75,6 +63,7 @@ var settleDetail={
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<component :is="modal" @close="closeChild" :modal-data="innerData"></component>
</el-dialog>`, </el-dialog>`,
props: { props: {
...@@ -83,7 +72,7 @@ var settleDetail={ ...@@ -83,7 +72,7 @@ var settleDetail={
}, },
data(){ data(){
return{ return{
detail:{ },uploadApi:'',isdedict:false,other:'',price:'', detail:{ },uploadApi:'',other:'',price:'',modal:null,innerData:{},
dialog:{ dialog:{
show:true,title:'工单(GLDQ0019211237)--待结',tab:'1', show:true,title:'工单(GLDQ0019211237)--待结',tab:'1',
}, },
...@@ -97,7 +86,12 @@ var settleDetail={ ...@@ -97,7 +86,12 @@ var settleDetail={
}, },
edictFun(){ edictFun(){
this.isdedict = true; this.innerData = {};
this.modal = vSettle;
},
closeChild(){
this.modal = null;
} }
} }
} }
...@@ -17,6 +17,9 @@ ...@@ -17,6 +17,9 @@
line-height: 64px; line-height: 64px;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
} }
.settle-left .settle-menu .el-menu-item .settle-number{
float: right;
}
.settle-menu .el-menu-item.is-active{ .settle-menu .el-menu-item.is-active{
background-color: #eef1fa !important; background-color: #eef1fa !important;
position: relative; position: relative;
...@@ -27,9 +30,13 @@ ...@@ -27,9 +30,13 @@
width: 3px; width: 3px;
height: 20px; height: 20px;
left: 0; left: 0;
top: 20px; top: 17px;
background: #50B5FC background: #50B5FC
} }
.settle .el-menu{
border-right: none;
}
.settle-right{ .settle-right{
float: right; float: right;
width: 1180px; width: 1180px;
...@@ -47,6 +54,7 @@ ...@@ -47,6 +54,7 @@
background: #ffffff; background: #ffffff;
padding: 10px; padding: 10px;
position: relative; position: relative;
height: 34px
} }
.all-settle-serch:after{ .all-settle-serch:after{
position: absolute; position: absolute;
...@@ -57,13 +65,20 @@ ...@@ -57,13 +65,20 @@
height:1px; height:1px;
background: #ececec; background: #ececec;
} }
.all-settle-serch .seach-select{
margin-right: 8px;
}
.settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{ .settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{
width: 120px !important; width: 120px !important;
background: #F1F3F9; background: #F1F3F9;
border: none; border: none;
height: 30px;
} }
.settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input { .settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input {
width: 298px; width: 298px;
height: 30px;
margin-right: 8px;
} }
.button-color{ .button-color{
background: #5874D8; background: #5874D8;
...@@ -92,10 +107,55 @@ ...@@ -92,10 +107,55 @@
bottom: 50px; bottom: 50px;
overflow: auto; overflow: auto;
padding: 15px; padding: 15px;
} }
.settle-right .settle-content table{ .settle-right .settle-content table{
text-align: center; text-align: center;
width: 100%;
}
.settle-right .settle-content .table-header{
background: #eef1fa;
height: 38px;
line-height: 38px;
}
.settle-right .settle-content .table-body td:nth-child(1),.settle-right .settle-content .table-header th:nth-child(1){
width: 5.5%;
}
.settle-right .settle-content .table-body td:nth-child(2),.settle-right .settle-content .table-header th:nth-child(2){
width: 11.5%;
}
.settle-right .settle-content .table-body td:nth-child(3),.settle-right .settle-content .table-header th:nth-child(3){
width: 11.5%;
}
.settle-right .settle-content .table-body td:nth-child(4),.settle-right .settle-content .table-header th:nth-child(4){
width: 13.5%;
}
.settle-right .settle-content .table-body td:nth-child(5),.settle-right .settle-content .table-header th:nth-child(5){
width: 18.5%;
} }
.settle-right .settle-content .table-body td:nth-child(6),.settle-right .settle-content .table-header th:nth-child(6){
width: 16.5%;
}
.settle-right .settle-content .table-body td:nth-child(7),.settle-right .settle-content .table-header th:nth-child(7){
width: 13.5%;
}
.settle-right .settle-content .table-body td:nth-child(8),.settle-right .settle-content .table-header th:nth-child(8){
width: 8.5%;
}
.settle-right .settle-content .table-cell{
border: 1px solid #E2E2E2;
margin: 5px 0;
border-radius: 5px;
height: 74px;
font-size: 12px;
}
.settle-right .settle-content .table-cell:nth-of-type(odd){
background: #f5f5f5;
}
.settle-right .settle-content .table-cell .detail{
font-size: 12px;
color: #999;
}
.settle-right .settle-content table th{ .settle-right .settle-content table th{
background: #eef1fa; background: #eef1fa;
color: #666; color: #666;
...@@ -112,103 +172,190 @@ ...@@ -112,103 +172,190 @@
.settle-right .settle-content table td .cell .blue-text{ .settle-right .settle-content table td .cell .blue-text{
color: #5B76D1; color: #5B76D1;
} }
/*******付款弹框tart************/
.settle-dialog{ .settle-dialog{
width: 420px; height: 492px;
height: 290px;
}
.el-dialog__wrapper{
overflow: hidden !important;
} }
.settle-dialog .el-tabs--card>.el-tabs__header{ .settle-dialog .el-dialog__header{
padding: 0 20px; background: #ffffff ;
padding-left: 30px;
}
.settle-dialog .el-dialog__header .el-dialog__title{
color: #5B76D1 ;
font-size:24px;
font-family:PingFangSC-Medium;
font-weight:500;
line-height:35px
}
.settle-dialog .el-dialog__header .el-dialog__headerbtn i{
color: #8F97A4 ;
font-size: 24px;
} }
.settle-dialog .el-dialog__body{ .settle-dialog .el-dialog__body{
padding:30px 0; padding: 30px 21px;
} }
.settle-dialog .el-dialog__header{ .settle-dialog .settle-dialog-title{
background: #6C8BF8; font-size:14px;
font-family:PingFangSC-Medium;
font-weight:500;
color:rgba(143,151,164,1);
line-height:35px;
white-space:pre;
} }
.settle-dialog .el-dialog__header .el-dialog__title,.settle-dialog .el-dialog__header .el-dialog__headerbtn i{ .settle-dialog .dialog-content{
color: #ffffff; position: relative;
} height: 368px;
.settle-dialog .dialog-content{ }
padding: 0 20px; .settle-dialog .el-input__inner,.settle-dialog .el-input{
line-height: 2; width: 402px;
height: 36px;
font-size: 12px;
} }
.bt-center{ .settle-dialog .bt-center{
position: absolute;
bottom: 0px;
left: 0;
right: 0;
text-align: center; text-align: center;
margin-top: 20px;
} }
.settle-dialog .bt-center button{
width: 180px;
border-clo
}
/*******付款弹框end************/
/********************详情start*******************/ /********************详情start*******************/
.order-detail{
width: 420px; .el-dialog__wrapper{
height: 260px; overflow: hidden !important;
} }
.el-dialog__wrapper{ .pay-detail{
overflow: hidden !important; width: 720px;
height: 638px;
float: right;
}
.pay-detail .el-tabs__header{
border:none;
} }
.order-detail h2{ .pay-detail .el-dialog__body{
padding-left: 20px; padding: 0;
} }
.order-detail .el-tabs--card>.el-tabs__header{ .pay-detail .el-dialog__header{
padding: 0 20px; background: #eef1fa;
} }
.order-detail .el-dialog__body{ .pay-detail .el-dialog__header .el-dialog__title{
padding:30px 0; color: #5874d8;
font-size: 18px;
} }
.order-detail .el-dialog__header{ .pay-detail .el-dialog__header .el-dialog__headerbtn i{
background: #6C8BF8; color:#8F97A4;
font-size: 24px;
} }
.order-detail .el-dialog__header .el-dialog__title,.order-detail .el-dialog__header .el-dialog__headerbtn i{ .pay-detail .pay-detail-tab{
color: #ffffff; margin-top: 5px;
line-height: 2;
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
} }
.order-detail .order-detail-tab{ .pay-detail .pay-detail-tab p{
margin-top: 5px; /*font-size: 12px;*/
line-height: 2;
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
} }
.order-detail .order-detail-tab p{ /*.pay-detail .pay-detail-tab span{
color: #999; color: #333;
font-size: 12px; font-size: 12px;
}*/
.pay-detail h2{
padding-left: 30px;
} }
.order-detail .order-detail-tab span{ .pay-detail .el-tabs--card>.el-tabs__header{
color: #333; padding: 0 20px;
font-size: 12px; background: #eef1fa;
} }
.settle-dialog{ .pay-detail .el-tabs--card>.el-tabs__header .el-tabs__item{
width: 420px; background: #f5f5f5;
margin-bottom: -1px;
margin-right: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #BFCAEB;
}
.pay-detail .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
background: #ffffff;
border: 1px solid #5874d8;
border-bottom: #ffffff;
color: #5874d8;
}
.pay-detail .el-tabs--card>.el-tabs__header .el-tabs__nav{
border:none;
}
.pay-detail .pay-dialog-title{
font-size:12px;
font-family:PingFangSC-Medium;
font-weight:500;
color:rgba(143,151,164,1);
white-space: pre
}
.pay-detail-tab .el-textarea{
width: 564px;
vertical-align: text-top;
}
.pay-detail .edict-icon{
position: absolute;right: 20px;
top:60px;z-index: 3000;
} }
.el-dialog__wrapper{ .pay-detail .edict-icon i{
overflow: hidden !important; font-size: 24px;
color: #5874D8;
cursor: pointer;
} }
/*.settle-dialog .el-tabs--card>.el-tabs__header{ .pay-detail .pay-detail-tab{
padding: 0 20px; margin-top: 5px;
line-height: 2;
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.pay-detail .pay-detail-tab p{
color: #999;
font-size: 12px;
}
.pay-detail .pay-detail-tab span{
color: #333;
font-size: 12px;
}
.pay-carousel{
height: 135px;
margin: auto;
padding: 0 100px;
position: relative;
}
.pay-carousel-content{
/*width: 520px;*/
/*border: 1px solid #ececec;*/
margin: auto;
height: 135px;
overflow: hidden;
} }
.settle-dialog .el-dialog__body{ .pay-carousel i:nth-child(1){
padding:30px 0; position: absolute;
left: 0;
top: 35%;
font-size: 28px;
} }
.settle-dialog .el-dialog__header{ .pay-carousel i:nth-child(2){
background: #6C8BF8; position: absolute;
right: 20px;
top: 35%;
font-size: 28px;
} }
.settle-dialog .el-dialog__header .el-dialog__title,.settle-dialog .el-dialog__header .el-dialog__headerbtn i{ /*.order-detail{
color: #ffffff;
}
.settle-dialog .dialog-content{
padding: 0 20px;
line-height: 2;
}*/
/*.bt-center{
text-align: center;
margin-top: 20px;
}*/
/********************详情start*******************/
.order-detail{
width: 720px; width: 720px;
height: 670px; height: 670px;
} }
...@@ -266,7 +413,7 @@ ...@@ -266,7 +413,7 @@
.order-detail .seach-input .el-input__inner,.order-detail .seach-input { .order-detail .seach-input .el-input__inner,.order-detail .seach-input {
width: 200px; width: 200px;
height: 25px; height: 25px;
} }*/
/************************确权start******************************/ /************************确权start******************************/
......
...@@ -11,7 +11,9 @@ html,body,#app,.wrapper{ ...@@ -11,7 +11,9 @@ html,body,#app,.wrapper{
position: relative; position: relative;
} }
#app{ #app{
opacity:0 opacity:0 ;
overflow-y: hidden;
overflow-x: auto;
} }
body{ body{
...@@ -26,6 +28,9 @@ button,.el-button{ ...@@ -26,6 +28,9 @@ button,.el-button{
.cursor{ .cursor{
cursor: pointer; cursor: pointer;
} }
.pre_space{
white-space: pre;
}
.text_center{ .text_center{
text-align: center; text-align: center;
} }
...@@ -250,6 +255,13 @@ ul .iconfont { ...@@ -250,6 +255,13 @@ ul .iconfont {
line-height: 2.4; line-height: 2.4;
color: #8F97A4; color: #8F97A4;
} }
.el-popover .popover-box i{
float: right;
margin-right: 15px;
margin-top: 8px;
font-size: 18px;
}
.el-popover .popover-box div{ .el-popover .popover-box div{
cursor: pointer; cursor: pointer;
padding-left: 12px; padding-left: 12px;
...@@ -281,10 +293,15 @@ ul .iconfont { ...@@ -281,10 +293,15 @@ ul .iconfont {
background: red; background: red;
} }
/****表单样式************/ /****表单样式************/
.el-form-item__label{
position: relative !important;
}
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after{ .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after{
content: '*'; content: '*';
color: #F56C6C; color: #F56C6C;
margin-right: 4px; margin-right: 4px;
position: absolute;
left: 82px;
} }
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{ .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
content: ''; content: '';
...@@ -293,4 +310,29 @@ ul .iconfont { ...@@ -293,4 +310,29 @@ ul .iconfont {
border:1px solid #5874d8; border:1px solid #5874d8;
color: #5874d8; color: #5874d8;
background: #f5f5f5; background: #f5f5f5;
}
/************上传***********************/
.avatar-uploader .el-upload {
border: 1px dashed #5774D8;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color:#5774D8;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
}
.avatar {
width: 120px;
height: 120px;
display: block;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment