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

根据UI调整页面

parent dd41f436
......@@ -61,6 +61,7 @@
background: #F1F3F9;
border: none;
height: 30px;
border-radius: 4px;
}
.cooperate .all-cooperate-serch .seach-input {
margin-right: 8px;
......@@ -118,19 +119,22 @@
width: 20%;
}
.cooperate-right .cooperate-content .table-body td:nth-child(3),.cooperate-right .cooperate-content .table-header th:nth-child(3){
width: 20%;
width: 30%;
}
.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%;
width: 10%;
}
.cooperate-right .cooperate-content .table-body td {
font-size: 12px;
}
.cooperate-right .cooperate-content .table-cell{
border: 1px solid #E2E2E2;
margin: 5px 0;
border-radius: 5px;
height: 74px;
height: 40px;
font-size: 12px;
}
.cooperate-right .cooperate-content .table-cell:nth-of-type(odd){
......@@ -143,8 +147,10 @@
.cooperate-right .cooperate-content table th{
background: #eef1fa;
color: #666;
color: #666666;
text-align: center;
font-size: 12px;
font-weight: normal;
}
.cooperate-right .cooperate-content table td .cell{
/*font-size: 12px;*/
......@@ -160,7 +166,7 @@
/********************详情start*******************/
.cooperate-detail{
width: 720px;
/*width: 570px;*/
height: 630px;
float: right;
}
......@@ -378,6 +384,9 @@
font-size: 12px;
color: #999;
}
.add-operate{
float: none !important;
}
.add-operate form{
/*width: 500px;*/
height: 523px;
......
......@@ -31,12 +31,10 @@
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select>
<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' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click="addOperate()" size="mini">新增授权点</el-button>
<el-button type='primary' class='firstbackgroud_blue firstborder_blue' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton firstborder_blue' @click="addOperate()" size="mini">新增授权点</el-button>
</div>
<div class="cooperate-content">
<table class="table-header">
<tr >
<th>授权点</th>
......@@ -81,7 +79,8 @@
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./../static/js/vue.js"></script>
<script src="./../static/js/jquery.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
......@@ -147,27 +146,24 @@
created(){
},
methods:{
//左侧切换
handleSelect(key, keyPath) {
this.tabindex = key;
switch(Number(key)){
case 1:
// this.modal = VAll
break;
default:
this.modal = null
break;
}
},
// 分页
handleCurrentChange(page) {
},
checkData(row,event, column){
// 详情
checkData(row){
this.modalData = row;
this.modal = vDetail;
},
closeChild(){
this.modal = null
},
//新增授权
addOperate(){
this.modalData = {type:'creat'};
this.modal = addOperate;
......
// 新增授权点
var addOperate={
template: `
<el-dialog :visible.sync="dialog.show" custom-class='cooperate-detail add-operate ' @close="handleClose" :lock-scroll="false" :show-close='true'>
<el-dialog width="660px" :visible.sync="dialog.show" custom-class='cooperate-detail add-operate ' @close="handleClose" :append-to-body="true" :show-close='true'>
<div slot='title' class="el-dialog__title">
<i class="iconfont iconhezuo"></i>
{{dialog.title}}
......@@ -187,7 +188,6 @@ var addOperate={
}
},
created(){
if(this.modalData.type=='creat'){
this.dialog.title = '新增授权点';
this.isCreat = true;
......@@ -211,24 +211,30 @@ var addOperate={
const self = this;
self.$refs[formName].validate((valid) => {
if (valid) {
//提交表单
} else {
return false;
}
});
},
// 增加品类
change_name(){
this.select_names.push({name:this.check_name})
},
// 删除品类
delete_name(index){
this.select_names.splice(index,1)
},
// 新增区域
change_address(){
this.select_address.push({name:this.check_address[2]})
console.log(this.check_address,this.select_address)
},
// 删除区域
delete_address(index){
this.select_address.splice(index,1)
},
//上传图片
handleAvatarSuccess(res, file) {
this.form.imageUrl = URL.createObjectURL(file.raw);
},
......
// 详情
var vDetail={
template: `
<el-dialog :visible.sync="dialog.show" custom-class='cooperate-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<el-dialog width="570px" :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}}
......@@ -30,7 +31,7 @@ var vDetail={
<p>认证方式: <span>企业认证</span></p>
<p>认证信息:<span>深圳市精诚家电维修有限公司 0102198902010215</span></p>
<p>认证图片:
<img src="../static/images/dog.jpeg" alt="" width="60px" height="60px" style="vertical-align: text-top;">
<img src="../static/images/dog.jpeg" alt="" width="120px" height="120px" style="vertical-align: text-top;">
</p>
</div>
</el-tab-pane>
......@@ -58,10 +59,7 @@ var vDetail={
<p>授权ID:<span>31E8792IWE73</span></p>
<p>授权密钥:<span>31E8792IWE7331E8792IWE7331E8792IWE73</span></p>
<p>接单方式一:<span style="color: #5874D8;text-decoration: underline">API对接</span></p>
<p>接单方式二:<span>小程序</span></p>
</div>
<div class="wechat"></div>
<div class="wechatTip">扫一扫,登录小程序</div>
</el-tab-pane>
</el-tabs>
</div>
......
......@@ -15,7 +15,8 @@
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./../static/js/vue.js"></script>
<script src="./../static/js/jquery.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
......
......@@ -15,7 +15,8 @@
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./../static/js/vue.js"></script>
<script src="./../static/js/jquery.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
......
......@@ -30,7 +30,7 @@
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./../static/js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
......@@ -54,19 +54,7 @@
}
},
methods:{
handleSelect:function(){
},
handleCurrentChange:function(){
},
checkDetail(item){
this.modalData = item;
this.modal = Detail;
},
closeChild(){
this.modal = null
},
//切换
handleSelect(key, keyPath) {
this.tabindex = key;
switch(Number(key)){
......
......@@ -6,8 +6,7 @@
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./order.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_k054bf1kprn.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_hi1wus9dyiu.css">
</head>
<body>
<div id="app">
......@@ -45,7 +44,6 @@
<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>
</el-popover>
</div>
......@@ -56,14 +54,22 @@
<span :class="item.id==1?'type1':'type2'">{{item.server}}</span>
美的洗衣机--清理
<div class="all-box-topright firsttext_blue">
<i class='iconfont iconfenpei' @click.stop=''></i>
<span v-if="item.id=='1'">
<i class='iconfont iconxing start1' @click.stop=''></i>
<template>
<span v-if="item.status==1 || item.status==2 || item.status==3 || item.staus==6">
<i class='iconfont iconfenpei' @click.stop=''></i>
</span>
<span v-else-if="item.status==4">
<i class='iconfont iconquequan' @click.stop=''></i>
</span>
<span v-else-if="item.status==5"></span>
</template>
<span v-if="index==0">
<i class='iconfont iconloudou1 start2' @click.stop='' ></i>
</span>
<span v-else>
<i class='iconfont iconloudou1 start2' @click.stop='' ></i>
<i class='iconfont iconxing start1' @click.stop=''></i>
</span>
<i class='iconfont iconxiaoxi1' @click.stop=''></i>
</div>
</div>
......@@ -114,12 +120,12 @@
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script src="./../static/js/vue.js"></script>
<script src="./../static/js/jquery.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
<script src="./js/orderDetail.js"></script>
<script src="./js/beCompleting.js"></script>
<script src="./js/beRighting.js"></script>
<script src="./js/refuse.js"></script>
......@@ -129,7 +135,7 @@
<script>
new Vue({
el: '#app',
components: {commonHeader,Detail,beCompleting,beRighting,VRefuse,settlePrice,hasDone,Deliver},
components: {commonHeader,beCompleting,beRighting,VRefuse,settlePrice,hasDone,Deliver},
data: function() {
return {
activeIndex:'9',tabindex:'9',modal:null,active_header:'./../order/index.html',
......@@ -148,24 +154,12 @@
type:'',time:'',options1:[],options2:[],name:''
},
tableData:[
{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:'保外'},
{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:'保内',status:1},
{id:'2',statusText:'待分配',server:'保外',status:2},
{id:'3',statusText:'待完工',server:'保外',status:3},
{id:'4',statusText:'待确权',server:'保外',status:4},
{id:'5',statusText:'已完成',server:'保外',status:5},
{id:'6',statusText:'已退回',server:'保外',status:6},
],
filters:[
{id:'1',name:'创建时间'},
......@@ -184,44 +178,39 @@
modal:null,modalData:{},
}
},
mounted(){
},
methods:{
handleSelect:function(){
},
handleCurrentChange:function(){
// 分页
handleCurrentChange(){
},
//工单操作
checkDetail(item){
if(item.id=='1'){
if(item.status=='1'){
//待派单
this.modalData = item;
this.modal = Deliver;
}
if(item.id=='3'){
if(item.status=='3'){
//待完工
this.modalData = item;
this.modal = beCompleting;
}
if(item.id=='4'){
if(item.status=='4'){
//待确权
this.modalData = item;
this.modal = beRighting;
}
if(item.id=='5'){
if(item.status=='5'){
//已完成
this.modalData = item;
this.modal = hasDone;
}
return
console.log(item)
this.modalData = {status:item.id,statusText:item.statusText};
this.modal = Detail;
},
// 关闭子组件
closeChild(){
this.modal = null
},
// 新建工单
creatOrder(){
window.location.href = './addOrder.html'
}
......
//智能新建
var addAll={
template: `
<div>
......
// 单条新建
var addOne={
template: `
<div >
......@@ -96,13 +97,13 @@ var addOne={
}
},
created(){
console.log(this.modalData)
},
methods:{
saveFun(formName){
const self = this;
self.$refs[formName].validate((valid) => {
if (valid) {
//提交表单
} else {
return false;
}
......
// 待完工
var beCompleting={
template: `
<el-dialog :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<el-dialog width="570px" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div slot='title' class="el-dialog__title">
<i class="iconfont icongongdan"></i>
{{dialog.title}}
</div>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" >
<h2 class="line-left">派单信息</h2>
<div class='order-detail-tab'>
<p>
用 户: <span>张女士 13711387865</span>
</p>
<p>地 址:<span>广东深圳福田深南大道招商银行大厦1101</span></p>
<p>产 品:<span>格力 空调 KFR-35GW/NhEaB1W (安装1台)</span></p>
<p>授权点:<span>唯修汇(张师傅 13644442222)</span></p>
<p>描述:<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span></p>
</div>
<h2 class="line-left">工单履历</h2>
<div>
<div class="order-detail-steps" style="">
<el-steps direction="vertical" :active="1">
<el-step title="客服:结算确权 " description='03-13 18:30:02' icon='1'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i>
</el-step>
<el-step title="张师傅:完工" description=' 03-13 18:30:02'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i></el-step>
<el-step title="张师傅:改预约时间(03-13 10:00),备注:用户明天回 " description='03-13 18:30:02'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i></el-step>
</el-step>
<el-step title="张师傅:改预约时间(03-12 11:00),备注:用户出差不在家,已经协调修改预约时间" description='03-13 18:30:02'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i></el-step>
</el-step>
<el-step title="客服:结算确权" description='03-13 18:30:02'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i></el-step>
</el-step>
<el-step title="系统:派单给唯修汇 " description='03-13 18:30:02'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i></el-step>
</el-step>
</el-steps>
</div>
</div>
</el-tab-pane>
<div class="edict-icon" v-if="dialog.tab=='1'">
<i class="el-icon-edit-outline" ></i>
<i class="el-icon-delete" ></i>
</div>
<el-tabs v-model="dialog.tab" type="card" >
<el-tab-pane label="详情" name="1" >
<h2 class="line-left">派单信息</h2>
<div class='order-detail-tab'>
<p>
用 户: <span>张女士 13711387865</span>
</p>
<p>地 址:<span>广东深圳福田深南大道招商银行大厦1101</span></p>
<p>产 品:<span>格力 空调 KFR-35GW/NhEaB1W (安装1台)</span></p>
<p>授权点:<span>唯修汇(张师傅 13644442222)</span></p>
<p>描述:<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span></p>
</div>
<h2 class="line-left">工单履历</h2>
<div>
<div class="order-detail-steps" style="">
<el-steps direction="vertical" :active="1">
<el-step title="客服:结算确权 " description='03-13 18:30:02' icon='1'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i>
</el-step>
<el-step title="张师傅:完工" description=' 03-13 18:30:02'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i></el-step>
<el-step title="张师傅:改预约时间(03-13 10:00),备注:用户明天回 " description='03-13 18:30:02'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i></el-step>
</el-step>
<el-step title="张师傅:改预约时间(03-12 11:00),备注:用户出差不在家,已经协调修改预约时间" description='03-13 18:30:02'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i></el-step>
</el-step>
<el-step title="客服:结算确权" description='03-13 18:30:02'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i></el-step>
</el-step>
<el-step title="系统:派单给唯修汇 " description='03-13 18:30:02'>
<i class="iconfont iconshixinyuanxing" slot="icon"></i></el-step>
</el-step>
</el-steps>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="反馈" name="2">
<div class="order-request-box">
<div class="order-detail-response">
......@@ -89,41 +93,41 @@ var beCompleting={
</div>
</div>
</el-tab-pane>
</el-tabs>
</el-tabs>
</el-dialog>`,
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
detail:{ },uploadApi:'',
resdata:{
inputValue:"",
talks:[
{
type:'1',value:'不制冷 用户报修麻烦处理',
},
{
type:'0',value:'用户不同意维修,想换机',
},
{
type:'2',value:'2019-5-16-09',
},
{
type:'1',value:'新机已发:申通快递,5313865831164,请把机器寄回总部请把机器寄回总部请把机器寄回总部请把机器寄回总部请把机器寄回总',
}
]
},
message:{ },
dialog:{
show:true,
title:'',
tab:'1',
status:''
},
return{
uploadApi:'',
resdata:{
inputValue:"",
talks:[
{
type:'1',value:'不制冷 用户报修麻烦处理',
},
{
type:'0',value:'用户不同意维修,想换机',
},
{
type:'2',value:'2019-5-16-09',
},
{
type:'1',value:'新机已发:申通快递,5313865831164,请把机器寄回总部请把机器寄回总部请把机器寄回总部请把机器寄回总部请把机器寄回总',
}
]
},
message:{ },
dialog:{
show:true,
title:'',
tab:'1',
status:''
},
}
}
},
created(){
this.dialog.title = '工单(GLDQ0019211237)--待完工';
......@@ -131,9 +135,6 @@ var beCompleting={
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
/*********上传图片 start************/
handleAvatarSuccess1(res, file) {
......
This diff is collapsed.
......@@ -8,7 +8,6 @@ var Deliver={
<el-option v-for="item in form.options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<div class="bt-center">
<el-button class='background-blue text-white firstborder_blue' >确定</el-button>
</div>
......@@ -19,8 +18,6 @@ var Deliver={
},
data(){
return{
detail:{ },uploadApi:'',
dialog:{
show:true,title:'派单',tab:'1',
},
......@@ -30,7 +27,6 @@ var Deliver={
}
},
created(){
console.log(this.modalData)
},
methods:{
handleClose() {
......
// 已完工
var hasDone={
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'>
template: `<el-dialog width="570px" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div slot='title' class="el-dialog__title">
<i class="iconfont icongongdan"></i>
{{dialog.title}}
</div>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" >
<h2 class="line-left">派单信息</h2>
......@@ -72,11 +77,10 @@ var hasDone={
</div>
<div class="order-detail-request">
<div class="plus" style=''>
<el-upload title="点击选取或更换图片" :action="uploadApi" name="img" :show-file-list="false" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload1" :on-error='uploaderror'>
<i class='el-icon-plus' ></i>
</el-upload>
<el-upload title="点击选取或更换图片" :action="uploadApi" name="img" :show-file-list="false" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload1" :on-error='uploaderror'>
<i class='el-icon-plus' ></i>
</el-upload>
</div>
<el-input class='order-input-area' v-model='resdata.inputValue'></el-input>
<el-button style="margin-left:10px">发送</el-button>
......@@ -98,7 +102,6 @@ var hasDone={
<el-col :span="4">1</el-col>
<el-col :span="8">¥200</el-col>
</el-row>
</div>
<h2 class="line-left">完工信息</h2>
<div class='order-detail-tab' style="line-height:2.5;border:none">
......@@ -128,10 +131,10 @@ var hasDone={
<i class="el-icon-arrow-left"></i>
<i class="el-icon-arrow-right"></i>
<div class="order-carousel-content">
<img src="../static/images/man.jpg" alt="" width="120px" height="120px" class="one">
<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="100px" height="120px" class="one">
<img src="../static/images/man.jpg" alt="" width="100px" height="120px">
<img src="../static/images/man.jpg" alt="" width="100px" height="120px">
<img src="../static/images/man.jpg" alt="" width="100px" height="120px">
</div>
</div>
<p>
......@@ -148,7 +151,7 @@ var hasDone={
},
data(){
return{
detail:{ },uploadApi:'',
uploadApi:'',
resdata:{
inputValue:"",
talks:[
......@@ -177,10 +180,10 @@ var hasDone={
}
},
created(){
console.log(this.modalData)
this.dialog.title = '工单(GLDQ0019211237)--已完成' ;;
},
methods:{
// 传递事件
handleClose() {
this.$emit('close')
},
......
// 打回
var VRefuse={
template: `
<el-dialog :title="dialog.title" width='444px' :visible.sync="dialog.show" custom-class='deliver-dialog' @close="handleClose" :append-to-body="true" :show-close='true'>
......@@ -28,7 +29,6 @@ var VRefuse={
}
},
created(){
console.log(this.modalData)
},
methods:{
handleClose() {
......
//结算
var settlePrice={
template: `
<el-dialog :title="dialog.title" width='444px' :visible.sync="dialog.show" custom-class='deliver-dialog' @close="handleClose" :append-to-body="true" :show-close='true'>
......@@ -14,8 +15,6 @@ var settlePrice={
<el-input v-model='form.remark'></el-input>
<div class="deliver-dialog-title">合计金额(元):</div>
<el-input v-model='form.total_price'></el-input>
<div class="bt-center">
<el-button class='background-blue text-white' >确定结算</el-button>
</div>
......@@ -37,7 +36,6 @@ var settlePrice={
}
},
created(){
console.log(this.modalData)
},
methods:{
handleClose() {
......
......@@ -56,6 +56,7 @@
background: #F1F3F9;
border: none;
height: 30px;
border-radius: 4px;
}
.all-order .all-order-serch .seach-input {
margin-right: 8px;
......@@ -72,9 +73,15 @@
border-radius: 4px;
margin-right: 8px;
}
.button-icon i {
font-size: 22px;color: #5874D8;
vertical-align:middle;
.button-icon i.iconloudou {
font-size: 22px;
color: #5874D8;
vertical-align: sub;
}
.button-icon i.iconpaixu {
font-size: 20px;
color: #5874D8;
vertical-align: sub;
}
.addbutton{float: right;}
.all-orders-box{
......@@ -94,13 +101,14 @@
}
.all-order-box{
width: 100%;
height: 94px;
height: 92px;
margin-top: 10px;
box-shadow: 3px 0px 5px 0px rgba(43,67,153,0.2);
}
.all-box-top{
height: 30px;
line-height: 30px;
font-size: 12px;
}
.all-box-top .type1{
font-size: 14px;
......@@ -174,7 +182,7 @@
line-height: 62px;
padding-right:20px;
cursor: pointer;
font-size:16px;
font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
}
......@@ -192,7 +200,7 @@
}
.order-detail{
width: 720px;
/*width: 720px;*/
height: 638px;
float: right;
}
......@@ -276,9 +284,10 @@
height: 300px;
margin-top: 10px;
padding-left: 20px;
padding-right: 24px;
}
.order-detail-steps .el-step.is-vertical .el-step__title{
font-size: 14px;
font-size: 12px;
}
.order-detail .order-request-box{
position: relative;
......@@ -304,7 +313,7 @@
font-size: 29px;
}
.order-detail .order-detail-request .order-input-area .seach-input .el-input__inner,.order-detail .order-detail-request .order-input-area {
width: 540px;
width: 396px;
margin-top: 6px;
margin-left: 20px;
}
......@@ -318,6 +327,17 @@
height: 28px;
margin-right: 20px;
}
/*********************编辑start**************************/
.order-detail .edict-icon{
position: absolute;right: 20px;
top:60px;z-index: 3000;
}
.order-detail .edict-icon i{
font-size: 24px;
color: #5874D8;
cursor: pointer;
}
/**********************反馈start*************************/
.order-detail .order-detail-response{
position: absolute;
......@@ -356,7 +376,7 @@
border-radius: 4px;
position: relative;
top: 0;
right: 0;
right: 5px;
font-size: 12px;
line-height: 1.5;
}
......@@ -387,7 +407,7 @@
border-radius: 4px;
position: relative;
top: 0;
left: 0;
left: 5px;
border: 1px solid #e2e2e2;
font-size: 12px;
line-height: 1.5;
......@@ -425,22 +445,22 @@
margin-bottom:15px;
}
.order-detail .order-detail-response .timestep::before{
content: '';
position: absolute;
width: 200px;
height: 1px;
left: 87px;
top: 8px;
background: #ececec;
content: '';
position: absolute;
width: 160px;
height: 1px;
left: 60px;
top: 8px;
background: #ececec;
}
.order-detail .order-detail-response .timestep::after{
content: '';
position: absolute;
width: 200px;
height: 1px;
right: 87px;
top: 8px;
background: #ececec;
content: '';
position: absolute;
width: 160px;
height: 1px;
right: 60px;
top: 8px;
background: #ececec;
}
/************************确权start******************************/
.el-carousel__item h3 {
......@@ -457,10 +477,11 @@
background-color: #d3dce6;
}
.order-carousel{
height: 135px;
margin: auto;
padding: 0 100px;
position: relative;
height: 135px;
margin: auto;
position: relative;
padding-left: 30px;
padding-right: 50px;
}
.order-carousel-content{
/*width: 520px;*/
......@@ -468,6 +489,7 @@
margin: auto;
height: 135px;
overflow: hidden;
text-align: center;
}
.order-carousel i:nth-child(1){
position: absolute;
......@@ -716,8 +738,6 @@
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
......
......@@ -7,7 +7,7 @@
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="./set.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_r8hwtw2voe.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_uybvbn4h3b.css">
</head>
<body>
<div id="app">
......@@ -30,10 +30,11 @@
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./../static/js/vue.js"></script>
<script src="./../static/js/jquery.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
<script src="./Server.js"></script>
<script src="./Product.js"></script>
<script src="./Protect.js"></script>
......
//产品维护
var Product={
template: `
<div class="settle-right">
......@@ -7,9 +8,9 @@ var Product={
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select>
<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' size="mini">搜索</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()' size="mini">新建产品</el-button>
<el-button type='primary' class='button-color firstborder_blue' size="mini">搜索</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 firstborder_blue' @click='creatProduct()' size="mini">新建产品</el-button>
</div>
<div class="settle-content">
<table class="table-header">
......@@ -34,21 +35,28 @@ var Product={
</table>
<table class="first-table">
<tr v-for='(item,index) in tableData' :key='index'>
<td style="width:15%"><div class="text_center cursor" @click='edictType(item)'>{{item.name}}</div></td>
<td style="width:15%">
<div class="text_center cursor" @click='edictType(item)'>
<img src="../static/images/man.jpg" width="78px" height="78px"></img>
<div><el-button class="text_underline" type='text'>{{item.name}}</el-button></div>
</div>
</td>
<td style="width:85%;">
<table class="second-table">
<tr v-for='(items,indexs) in item.type' :key='indexs'>
<td style="width:25%;">
<div class="text_center cursor" @click='edictCate(item,items)'>{{items.cate}}</div>
<div class="text_center cursor text_underline" @click='edictCate(item,items)'>{{items.cate}}</div>
</td>
<td style="width:75%; ">
<table class="third-table" >
<tr v-for='(child,key) in items.type' :key='key'>
<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 class="firsttext_font text_underline" type='text' @click='edictModel(items,child)'>{{child.type}}</el-button>
</div>
</td>
<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 firsttext_font text_underline">{{child.name}}</div></div>
</td>
</tr>
......@@ -68,7 +76,7 @@ var Product={
return{
modal:null,modalData:[],
search:{
type:'',status:'',options1:[],options2:[],name:''
type:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
......@@ -92,7 +100,6 @@ var Product={
type:'KFR-25GW/NFW+2',
name:'海尔'
},
]
},
{
......@@ -156,53 +163,41 @@ var Product={
}
]
},
],
chooseData:[]
}
},
wacth:{
},
methods:{
opendialog(row){
if(row.status==1){
this.modalData = row;
this.modal = SettleDetail;
}else if(row.status==3){
this.modalData = row;
this.modal = PayDetail;
}else if(row.status==2){
this.modalData = row;
this.modal = Pay;
}
},
closeChild(){
this.modal = null;
},
//新增产品
creatProduct(){
this.modalData = {};
this.modal = AddProduct;
},
//新增品牌
AddCardfun(type){
this.modalData = {type:type};
this.modal = AddCard;
},
//编辑品类
edictType(item){
this.modalData = {type:'edict',id:item.id};
this.modal = AddType;
},
//编辑规格
edictCate(item,items){
this.modalData = {type:'edict',id:items.id,cate:items.cate,name:item.name};
this.modal = AddCate;
},
//编辑型号
edictModel(item,items){
this.modalData = {type:'edict',id:items.id,name:item.cate,cate:items.type,card:items.name};
console.log(this.modalData,items)
this.modal = AddModel;
}
},
//关闭组件
closeChild(){
this.modal = null;
},
}
}
......
// 保内结算
var Protect ={
template: `
<div class="settle-right">
......@@ -8,8 +9,8 @@ var Protect ={
<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-select>
<el-button type='primary' class='firstbackgroud_blue' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click="addProtect()" size="mini">新建</el-button>
<el-button type='primary' class='firstbackgroud_blue firstborder_blue' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton firstborder_blue' @click="addProtect()" size="mini">新建</el-button>
</div>
<div class="settle-content">
<table class="table-header">
......@@ -23,8 +24,8 @@ var Protect ={
<table >
<tr>
<th style="width:20%"> <div class="text_center">服务分类</div></th>
<th style="width:40%" class='third-table-center'><div class="text_center">服务措施</div></th>
<th style="width:30%" class='third-table-center'><div class="text_center">金额</div></th>
<th style="width:60%" class='third-table-center'><div class="text_center">服务措施</div></th>
<th style="width:10%" class='third-table-center'><div class="text_center">金额</div></th>
<th style="width:10%"><div class="text_center">操作</div></th>
</tr>
</table>
......@@ -36,7 +37,10 @@ var Protect ={
</table>
<table class="first-table">
<tr v-for='(item,index) in tableData' :key='index'>
<td style="width:15%"><div class="text_center">{{item.name}}</div></td>
<td style="width:15%" class="text_center ">
<img src="../static/images/man.jpg" width="78px" height="78px"></img>
<div><el-button type='text'>{{item.name}}</el-button></div>
</td>
<td style="width:85%;">
<table class="second-table">
<tr v-for='(items,indexs) in item.type' :key='indexs'>
......@@ -49,11 +53,11 @@ var Protect ={
<td style="width:20%">
<div class="text_center">{{child.name}}</div>
</td>
<td style="width:0%" class='third-table-center'>
<td style="width:60%" class='third-table-center'>
<div class="text_center">{{child.cate}}</div>
</td>
<td style="width:30%" class='third-table-center'>
<div class="text_center">¥{{child.price}}</div>
<td style="width:10%" class='third-table-center'>
<div class="text_right" style="margin-right:5px">¥{{child.price}}</div>
</td>
<td style="width:10%">
<div class="text_center"><el-button type='text' @click="edictProtect()">操作</el-button></div>
......@@ -76,10 +80,7 @@ var Protect ={
return{
modal:null,modalData:[],
search:{
type:'',status:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
type:'',options1:[],options2:[],name:''
},
tableData:[
{
......@@ -98,7 +99,6 @@ var Protect ={
cate:'定频1.5p',price:'8'
},
]
},
{
......@@ -160,53 +160,22 @@ var Protect ={
],
chooseData:[]
}
},
wacth:{
},
methods:{
handleCurrentChange(page) {
},
checkData(row,event, column){
console.log(row.status)
},
opendialog(row){
if(row.status==1){
this.modalData = row;
this.modal = SettleDetail;
}else if(row.status==3){
this.modalData = row;
this.modal = PayDetail;
}else if(row.status==2){
this.modalData = row;
this.modal = Pay;
}
},
closeChild(){
this.modal = null;
},
handleSelectionChange(val){
this.chooseData = val;
console.log(val)
},
settleFun(){
if(this.chooseData.length>0){
this.modalData = this.chooseData;
this.modal = Settle
}else{
this.$message({ message: '请选择数据', type: 'warning' });
}
},
//新增保内结算
addProtect(){
this.modalData = {type:'creat'};
this.modal = EdictProtect;
},
//编辑保内结算
edictProtect(){
this.modalData = {type:'edict'};
this.modal = EdictProtect;
}
},
// 关闭组件
closeChild(){
this.modal = null;
},
}
}
// 服务维护
var Server={
template: `
<div class="settle-right">
......@@ -8,8 +9,8 @@ var Server={
<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-select>
<el-button type='primary' class='firstbackgroud_blue' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click='AddServerFun()' size="mini">新建服务</el-button>
<el-button type='primary' class='firstbackgroud_blue firstborder_blue' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton firstborder_blue' @click='AddServerFun()' size="mini">新建服务</el-button>
</div>
<div class="settle-content">
<table class="table-header">
......@@ -35,8 +36,9 @@ var Server={
<table class="first-table">
<tr v-for='(item,index) in tableData' :key='index'>
<td style="width:15%">
<div class="text_center">
<el-button type='text' style='color:#333' @click='EdictName()'>{{item.name}}</el-button>
<div class="text_center cursor" @click='EdictName()'>
<img src="../static/images/man.jpg" width="78px" height="78px"></img>
<div><el-button class="text_underline" type='text'>{{item.name}}</el-button></div>
</div>
</td>
<td style="width:85%;">
......@@ -53,7 +55,7 @@ var Server={
</td>
<td style="width:70%" class='third-table-center'>
<div class="text_center">
<el-button type='text' style='color:#333'>{{child.cate}}</el-button>
<el-button type='text' style='color:#333;cursor:default'>{{child.cate}}</el-button>
</div>
</td>
</tr>
......@@ -71,10 +73,7 @@ var Server={
return{
modal:null,modalData:[],
search:{
type:'',status:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
type:'',options1:[],options2:[],name:''
},
tableData:[
{
......@@ -93,7 +92,6 @@ var Server={
cate:'定频1.5p',price:'8'
},
]
},
{
......@@ -150,59 +148,26 @@ var Server={
}
]
},
],
chooseData:[]
}
},
wacth:{
},
methods:{
handleCurrentChange(page) {
},
checkData(row,event, column){
console.log(row.status)
},
opendialog(row){
if(row.status==1){
this.modalData = row;
this.modal = SettleDetail;
}else if(row.status==3){
this.modalData = row;
this.modal = PayDetail;
}else if(row.status==2){
this.modalData = row;
this.modal = Pay;
}
},
closeChild(){
this.modal = null;
},
handleSelectionChange(val){
this.chooseData = val;
console.log(val)
},
settleFun(){
if(this.chooseData.length>0){
this.modalData = this.chooseData;
this.modal = Settle
}else{
this.$message({ message: '请选择数据', type: 'warning' });
}
},
//新增服务
AddServerFun(){
this.modalData = {type:'creat',name:'空调'};
this.modal = AddServer;
},
//编辑品牌
EdictName(){
this.modalData = {type:'edict',name:''};
this.modal = EdictName;
}
},
//关闭组件
closeChild(){
this.modal = null;
},
}
}
......@@ -4,27 +4,24 @@ var AddCard={
<div class="dialog-content">
<div class="deliver-dialog-title">品牌名称:</div>
<el-input v-model="form.name"></el-input>
<div class="bt-center">
<el-button type="primary" class='firstbackgroud_blue text-white firstborder_blue' >保存</el-button>
<el-button type="danger" class='firstbackgroud_red text-white firstborder_red' v-if="isEdcit">删除</el-button>
</div>
</div>
</el-dialog>`,
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
uploadApi:'',isEdcit:false,
isEdcit:false,
dialog:{
show:true,title:'新建品牌',type:1
},
form:{
name:'',
cate:''
}
}
},
......
......@@ -7,7 +7,6 @@ var AddCate={
<el-input v-model="form.name"></el-input>
<div class="deliver-dialog-title">产品规格:</div>
<el-input v-model="form.cate"></el-input>
<div class="bt-center">
<el-button type="primary" class='firstbackgroud_blue text-white firstborder_blue' >保存</el-button>
<el-button type="danger" class='firstbackgroud_red text-white firstborder_red' v-if="!isCreat">删除</el-button>
......@@ -20,7 +19,7 @@ var AddCate={
},
data(){
return{
uploadApi:'',isCreat:true,
isCreat:true,
dialog:{
show:true,title:'产品规格',type:1
},
......@@ -44,7 +43,6 @@ var AddCate={
methods:{
getinfo(){
this.form.cate = this.modalData.cate;
},
handleClose() {
this.$emit('close')
......
......@@ -2,9 +2,6 @@
var AddModel={
template: `
<el-dialog width="444px" :title="dialog.title" custom-class='addcate' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<div class="dialog-content">
<div class="deliver-dialog-title">规格分类:</div>
<el-input v-model="form.name"></el-input>
......@@ -15,7 +12,6 @@ var AddModel={
</el-select>
<div class="deliver-dialog-title">输入型号:</div>
<el-input v-model="form.model" type="textarea" placeholder="型号名称(多个用逗号隔开)"></el-input>
<div class="bt-center">
<el-button type="primary" class='firstbackgroud_blue text-white firstborder_blue' >保存</el-button>
<el-button type="danger" class='firstbackgroud_red text-white firstborder_red' v-if="!isCreat">删除</el-button>
......@@ -28,7 +24,7 @@ var AddModel={
},
data(){
return{
uploadApi:'',isCreat:true,
isCreat:true,
dialog:{
show:true,title:'产品型号',type:1
},
......@@ -40,7 +36,6 @@ var AddModel={
}
},
created(){
this.form.name = this.modalData.name;
if(this.modalData.type=='creat'){
this.dialog.title = '新增型号';
......
// 新增产品
var AddProduct={
template: `
<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-dialog width="570px" :visible.sync="dialog.show" custom-class='order-detail' @close="handleClose" :append-to-body="true" :show-close='true'>
<div slot='title' class="el-dialog__title">
<i class="iconfont iconrenzhengdunpaianquanbaozhangzhibao-xianxing"></i>
{{dialog.title}}
</div>
<el-tabs v-model="dialog.tab" type="card" >
<el-tab-pane label="品类" name="1">
<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>
......@@ -14,7 +19,7 @@ var AddProduct={
<el-tab-pane :label="'【' +choose_typeName+'】下的产品规格'" >
<div class='order-detail-tab' style="padding:20px;line-height:3;">
<el-radio v-model="choose_cate" v-for='(item,index) in cates' :key='index' :label="item.id" @change='clickCate(item)' border size="medium">{{item.name}}</el-radio>
<span class='tag cursor' @click='addType()'>
<span class='tag cursor' @click='addCate()'>
<i class='el-icon-plus'></i>
</span>
......@@ -44,7 +49,6 @@ var AddProduct={
},
data(){
return{
detail:{ },
modal:null,innerData:{},
products:[
{id:1,name:'空调'},
......@@ -69,31 +73,29 @@ var AddProduct={
dialog:{
show:true,title:'新增产品信息',tab:'1',
},
innerDialog1:{
show:false,title:'',type:1
}
}
},
methods:{
//传递关闭事件
handleClose() {
this.$emit('close')
},
handleClick(){
},
//新增品类
addType(){
this.innerData = {type:'creat'};
this.modal = AddType;
},
//新增规格
addCate(){
this.innerData = {type:'creat',name:this.choose_typeName};
this.modal = AddCate;
},
//新增型号
addModel(){
this.innerData = {title:'新增类型',name:this.choose_cateName,show:true,type:'creat'};
this.modal = AddModel;
},
//关闭子组件
closeChild(){
this.modal = null;
},
......
......@@ -10,8 +10,6 @@ var AddType={
<img v-if="form.img" :src="form.img" class="addtype">
<i v-else class="el-icon-plus addtype-uploader-icon"></i>
</el-upload>
<div class="bt-center">
<el-button type="primary" class='firstbackgroud_blue text-white firstborder_blue' >保存</el-button>
<el-button type="danger" class='firstbackgroud_red text-white firstborder_red' v-if="!isCreat">删除</el-button>
......@@ -46,6 +44,7 @@ var AddType={
},
methods:{
getinfo(){
//modalData获取数据
this.form.name = '空调';
},
handleClose() {
......
//新增编辑保内结算
var EdictProtect={
template: `
<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="82px">
<el-form-item label="品类名称:">
<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>
......@@ -22,16 +23,13 @@ var EdictProtect={
<el-select v-model="form.cate" placeholder="选择规格(多选)" style="width:100%" @change="chooseFun">
<el-option :label="item.label" :value="item" :key="item.label" v-for="(item,index) in options4"></el-option>
</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>
<div style="max-height:122px;overflow-y:auto;margin-bottom:8px">
<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 label="保内结算:">
<el-input v-model="form.price" placeholder='请输入金额'></el-input>
</el-form-item>
......@@ -50,9 +48,9 @@ var EdictProtect={
},
data(){
return{
uploadApi:'',isCreat:true,
isCreat:true,
dialog:{
show:true,title:'产品品类',type:1
show:true,title:'',type:1
},
form:{
name:'',
......@@ -85,12 +83,12 @@ var EdictProtect={
},
methods:{
getinfo(){
//modalData获取数据
},
handleClose() {
this.$emit('close')
},
chooseFun(value){
console.log(value,this.chooseList)
this.chooseList.push(value)
},
deleteFun(index){
......
// 新增服务
var AddServer={
template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail add-server animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<el-dialog width="570px" :visible.sync="dialog.show" custom-class='order-detail add-server animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div slot='title' class="el-dialog__title">
<i class="iconfont iconrenzhengdunpaianquanbaozhangzhibao-xianxing"></i>
{{dialog.title}}
</div>
<h2 style="margin-bottom:15px">品类名称:{{modalData.name}}</h2>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tabs v-model="dialog.tab" type="card" >
<el-tab-pane label="服务类型" name="1">
<div class='order-detail-tab' style="padding:10px 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>
......@@ -60,9 +65,8 @@ var AddServer={
},
data(){
return{
detail:{ },isCreat:true,
input_first:'',input_second:'',
input_third:'',
isCreat:true,
input_first:'',input_second:'',input_third:'',
modal:null,innerData:{},
products:[
{id:1,name:'安装'},
......@@ -81,15 +85,11 @@ var AddServer={
models:[
{id:1,name:'咨询'},
{id:2,name:'维修'},
],
choose_model:'',
dialog:{
show:true,title:'新增产品信息',tab:'1',
},
innerDialog1:{
show:false,title:'',type:1
}
}
},
......@@ -104,31 +104,31 @@ var AddServer={
}
},
methods:{
//关闭组件
handleClose() {
this.$emit('close')
},
handleClick(){
},
//服务类型
addFirst(){
if(this.input_first.length>0){
this.products.push({id:this.products.length+1,name:this.input_first});
this.input_first = '';
}
},
// 服务分类
addSecond(){
if(this.input_second.length>0){
this.cates.push({id:this.products.length+1,name:this.input_second});
this.input_second = '';
}
},
// 服务措施
addThird(){
if(this.input_third.length>0){
this.models.push({id:this.models.length+1,name:this.input_third});
this.input_third = '';
}
},
closeChild(){
this.modal = null;
},
......
// 编辑品类
var EdictName={
template: `
<el-dialog width='444px' :title="dialog.title" custom-class='addcate' :visible.sync="dialog.show" @close="handleClose" append-to-body>
......@@ -17,7 +18,6 @@ var EdictName={
},
data(){
return{
uploadApi:'',
dialog:{
show:true,title:'编辑',type:1
},
......@@ -27,10 +27,7 @@ var EdictName={
}
},
created(){
// this.dialog.title = this.modalData.title;
// this.form.name = this.modalData.name;
// this.dialog.show = this.modalData.show;
// console.log(this.modalData)
},
methods:{
handleClose() {
......
......@@ -91,6 +91,7 @@
background: #F1F3F9;
border: none;
height: 30px;
border-radius: 4px;
}
.settle .all-settle-serch .seach-input {
margin-right: 8px;
......@@ -186,6 +187,10 @@
color: #5874d8;
font-size: 18px;
}
.order-detail .el-dialog__header .el-dialog__title i{
color: #5874d8;
font-size: 20px;
}
.order-detail .el-dialog__header .el-dialog__headerbtn i{
color:#8F97A4;
font-size: 24px;
......@@ -217,11 +222,6 @@
}
/*******************************范围start******************************/
.order-detail-tab .tag{
/*background: #F1F3F8;*/
......@@ -246,16 +246,13 @@
width: 100px;
}
/*******增加品牌start************/
.addcate{
height: 492px;
}
.addcate .el-dialog__header{
background: #ffffff ;
padding-left: 30px;
padding-left: 21px;
}
.addcate .el-dialog__header .el-dialog__title{
color: #5B76D1 ;
......@@ -501,8 +498,6 @@
padding: 15px;
}
/*******************************范围start******************************/
.order-detail-tab .tag{
padding: 5px 24px;
......@@ -528,8 +523,7 @@
}
.add-protect form{
width: 365px;
margin-left: 20px;
width: 402px;
}
.add-protect .el-form-item{
margin-bottom: 7px;
......@@ -539,7 +533,7 @@
padding: 5px ;
border-radius: 3px;
margin-right: 10px;
color: #8F97A4 !important;
color: #333333 !important;
border: 1px solid #5874D8;
display: inline-block;
height: 25px;
......
......@@ -32,8 +32,8 @@
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select>
<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' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click='settleFun()' size="mini">结算</el-button>
<el-button type='primary' class='firstbackgroud_blue firstborder_blue' size="mini">搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton firstborder_blue' @click='settleFun()' size="mini">结算</el-button>
</div>
<div class="settle-content firsttext_font">
<table class="table-header">
......@@ -61,7 +61,7 @@
<span class='firsttext_blue'>{{item.construst }}</span>
</td>
<td>
<p>{{item.info }}</p>
<p class="info">{{item.info }}</p>
<p class="detail">{{item.detail }}</p>
</td>
<td>
......@@ -95,7 +95,8 @@
</div>
</body>
<!-- 先引入 Vue -->
<script src="./../static/js/vue.js"></script>
<script src="./../static/js/vue.js"></script>
<script src="./../static/js/jquery.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
......@@ -144,28 +145,21 @@
},
],
// chooseData:[],
}
},
created(){
},
methods:{
//处理左侧切换
handleSelect(key, keyPath) {
this.tabindex = key;
switch(Number(key)){
case 1:
// this.modal = VAll
break;
default:
this.modal = null
break;
}
this.tabindex = key;
},
//单个选择
select_data(item){
console.log(item, this.table.chooseData)
this.table.chooseData.push(item);
},
//全选
select_all(){
if(this.table.checked_all){
this.table.chooseData = this.tableData;
......@@ -180,16 +174,11 @@
}
},
// 分页
handleCurrentChange(page) {
},
checkData(row,event, column){
console.log(row.status)
},
handleSelectionChange(val){
// this.chooseData = val;
// console.log(val)
},
//结算
settleFun(){
if(this.table.chooseData.length>0){
this.modalData = this.chooseData;
......@@ -197,19 +186,22 @@
}else{
this.$message({ message: '请选择数据', type: 'warning' });
}
},
// 关闭子组件
closeChild(){
this.modal = null
},
opendialog(row){
if(row.status==1){
//结算详情
this.modalData = row;
this.modal = settleDetail;
}else if(row.status==3){
//结算工单
this.modalData = row;
this.modal = payDetail;
}else if(row.status==2){
//待解工单
this.modalData = row;
this.modal = vSettle;
}
......
// 结算
var vPay={
template: `
<el-dialog :title="dialog.title" width='444px' :visible.sync="dialog.show" custom-class='settle-dialog' @close="handleClose" :append-to-body="true" :show-close='true'>
......@@ -29,7 +30,6 @@ var vPay={
},
data(){
return{
detail:{ },uploadApi:'',
price:'',remark:'',total:'',
dialog:{
show:true,title:'工单结算',tab:'1',
......@@ -37,9 +37,9 @@ var vPay={
}
},
created(){
console.log(this.modalData)
},
methods:{
// 传递事件
handleClose() {
this.$emit('close')
},
......
// 付款详情
var payDetail={
template: `
<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-dialog width="570px" :visible.sync="dialog.show" custom-class='pay-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div slot='title' class="el-dialog__title">
<i class="iconfont iconjiesuan"></i>
{{dialog.title}}
</div>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1">
<h2 class="line-left">付款信息</h2>
......@@ -61,8 +66,5 @@ var payDetail={
handleClick(){
},
edictFun(){
this.isdedict = true;
}
}
}
\ No newline at end of file
// 结算工单
var vSettle={
template: `
<el-dialog :title="dialog.title" width='444px' :visible.sync="dialog.show" custom-class='settle-dialog ' @close="handleClose" :append-to-body="true" :show-close='true'>
......@@ -34,7 +35,6 @@ var vSettle={
},
data(){
return{
detail:{ },uploadApi:'',
form:{number:'',remark:''},
dialog:{
show:true,title:'结算工单',tab:'1',
......
// 待结工单
var settleDetail={
template: `
<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-dialog width="570px" :visible.sync="dialog.show" custom-class='pay-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div slot='title' class="el-dialog__title">
<i class="iconfont iconjiesuan"></i>
{{dialog.title}}
</div>
<div class="dialog-content">
<div class="edict-icon">
<i class="el-icon-edit-outline" @click='edictFun()' ></i>
......@@ -49,10 +54,10 @@ var settleDetail={
<i class="el-icon-arrow-left"></i>
<i class="el-icon-arrow-right"></i>
<div class="pay-carousel-content">
<img src="../static/images/man.jpg" alt="" width="120px" height="120px" class="one">
<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="100px" height="120px" class="one">
<img src="../static/images/man.jpg" alt="" width="100px" height="120px">
<img src="../static/images/man.jpg" alt="" width="100px" height="120px">
<img src="../static/images/man.jpg" alt="" width="100px" height="120px">
</div>
</div>
<p>
......@@ -85,10 +90,10 @@ var settleDetail={
handleClick(){
},
//待解工单
edictFun(){
this.innerData = {};
this.modal = vSettle;
},
closeChild(){
this.modal = null;
......
......@@ -74,6 +74,7 @@
background: #F1F3F9;
border: none;
height: 30px;
border-radius: 4px;
}
.settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input {
width: 298px;
......@@ -141,11 +142,14 @@
.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-body td,.settle-right .settle-content .table-cell .info{
font-size: 12px;
}
.settle-right .settle-content .table-cell{
border: 1px solid #E2E2E2;
margin: 5px 0;
border-radius: 5px;
height: 74px;
height: 40px;
font-size: 12px;
}
.settle-right .settle-content .table-cell:nth-of-type(odd){
......@@ -154,12 +158,14 @@
.settle-right .settle-content .table-cell .detail{
font-size: 12px;
color: #999;
}
}
.settle-right .settle-content table th{
background: #eef1fa;
color: #666;
color: #666666;
text-align: center;
font-size: 12px;
font-weight: normal;
}
.settle-right .settle-content table td .cell{
/*font-size: 12px;*/
......@@ -233,7 +239,7 @@
}
.pay-detail{
width: 720px;
/*width: 720px;*/
height: 638px;
float: right;
}
......@@ -331,14 +337,14 @@
font-size: 12px;
}
.pay-carousel{
height: 135px;
margin: auto;
padding: 0 100px;
position: relative;
height: 135px;
margin: auto;
position: relative;
padding-left: 30px;
padding-right: 50px;
text-align: center;
}
.pay-carousel-content{
/*width: 520px;*/
/*border: 1px solid #ececec;*/
margin: auto;
height: 135px;
overflow: hidden;
......@@ -355,66 +361,6 @@
top: 35%;
font-size: 28px;
}
/*.order-detail{
width: 720px;
height: 670px;
}
.dialog-content{
position: relative;
}
.dialog-content .edict-icon{
position: absolute;right: 20px;
top:0;z-index: 3000;
}
.dialog-content .edict-icon i{
font-size: 24px;
color: #5874D8;
cursor: pointer;
}
.dialog-content .edict-icon i:nth-child(1){
margin-right: 15px;
}
.el-dialog__wrapper{
overflow: hidden !important;
}
.order-detail h2{
padding-left: 20px;
}
.order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.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;
}
.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 .order-detail-tab p{
color: #999;
font-size: 12px;
}
.order-detail .order-detail-tab span{
color: #333;
font-size: 12px;
}
.order-detail .seach-input .el-input__inner,.order-detail .seach-input {
width: 200px;
height: 25px;
}*/
/************************确权start******************************/
.el-carousel__item h3 {
......
......@@ -41,6 +41,9 @@ button,.el-button{
background: #5874D8;
border: #5874D8;
}
.text_underline{
text-decoration: underline;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #f5f5f5;
color: #5874d8;
......@@ -161,6 +164,16 @@ button,.el-button{
float: left;
line-height: 60px;
margin-left: 10px;
width: 125px;
}
.popover-content{
line-height: 2;
padding: 0 20px;
}
.header-title i{
float: right;
font-size: 18px;
margin-top: 20px;
}
.header-side{
float: right;
......@@ -183,7 +196,7 @@ button,.el-button{
.header .header-side .mian_side .el-menu-item i{
color: #ffffff;
vertical-align: middle;
margin-right: 2px;
margin-right: 6px;
}
.header .header-side .mian_side .el-menu-item.is-active{
border-bottom: 2px solid #F5F5F5;
......@@ -216,6 +229,7 @@ ul .iconfont {
.circle-red,.circle-yellow,.circle-green{
position: relative;
padding-left: 15px;
font-size: 12px;
}
.circle-red:before{
position: absolute;
......@@ -335,4 +349,17 @@ ul .iconfont {
width: 120px;
height: 120px;
display: block;
}
.el-select ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #666666 !important;
}
.el-select :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #666666 !important;
}
.el-select ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #666666 !important;
}
.el-select :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #666666 !important;
}
\ No newline at end of file
......@@ -3,7 +3,15 @@ var commonHeader={
<div class="header-content">
<div class="header-logo">
<img src="./../static/images/dog.jpeg" alt="" width="42px" height="42px">
<p class="header-title">Hi!隔壁老王</p>
<p class="header-title">
Hi!隔壁老王
<i class="el-icon-caret-bottom" v-popover:popoverHeader></i>
<el-popover ref="popoverHeader" placement="bottom" width="110" trigger="click" >
<div class="popover-content">
<div>退出登录</div>
</div>
</el-popover>
</p>
</div>
<div class="header-side firstbackgroud_blue">
<el-menu mode="horizontal" :router="false" :unique-opened="true" @select="selectRoute" :default-active="onRoutes" background-color="#5874d8" text-color="#ffffff" active-text-color="#708DF1" class="mian_side">
......
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