Commit 992d9391 authored by 余苗苗's avatar 余苗苗

界面优化,根据ui意见修改

parent 00b9008f
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./static/css/main.css">
<link rel="stylesheet" href="./static/css/cooperate.css">
</head>
<body>
<div id="app" v-loading='loading' >
<common-header :modal-data="active_header" ></common-header>
<div class="content" >
<div class="cooperate">
<div class='cooperate-left'>
<div class="cooperate-title">合作资源</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='cooperate-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
</div>
<div class="cooperate-right">
<div class="all-cooperate-serch">
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select>
<el-select class="seach-select" v-model="search.area" @change='' placeholder="选择区域">
<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='输入名称、联系人或区域'></el-input>
<el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' class='button-color addbutton' @click=''>新增授权点</el-button>
</div>
<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="负责人" >
<template slot-scope="scope" >
<span class='cursor' style=' color: #5B76D1; '>
{{scope.row.name }}
</span>
<span style=' color: #999;'>{{scope.row.phone}}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="合作区域"> </el-table-column>
<el-table-column prop="type" label="合作品类"> </el-table-column>
<el-table-column label="合作状态" width='80px'>
<template slot-scope="scope" >
<div class='text_center'>
<i class='el-icon-success' v-if='scope.row.status==1' style='color:#6FC152;font-size:16px;'></i>
<i class='el-icon-success' v-else style='color:#F05050;font-size:16px'></i>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="cooperate-bottom">
<el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" layout="total, prev, pager, next" :page-size="15" :pager-count="table.page_count" :total="table.total">
</el-pagination>
</div>
</div>
</div>
<component :modal-Data="modalData" :is="modal" @close="closeChild"></component>
</div>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script>
<script src="./static/js/cooperate/detail.js"></script>
<script>
new Vue({
el: '#app',
components: {commonHeader,vDetail},
data: function() {
return {
activeIndex:'3',tabindex:'3',modal:null,loading:true,
active_header:'./cooperate.html',modalData:[],
menus:[
{name:'正常',value:'1',icon:'el-icon-upload2'},
{name:'停用',value:'2',icon:'el-icon-sort'},
{name:'全部',value:'3',icon:'el-icon-date'},
],
search:{
type:'',area:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
},
tableData:[
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:1
},
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:0
},
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:1
},
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:0
},
]
}
},
created(){
setTimeout(()=>{
this.loading = false;
},1000)
},
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){
// debugger
this.modalData = row;
this.modal = vDetail;
console.log(this.modal)
},
closeChild(){
this.modal = null
},
}
})
</script>
</html>
......@@ -11,15 +11,14 @@
float: left;
}
.cooperate-left .cooperate-title{
color: #5874D8;
text-align: center;
font-size: 18px;
font-size: 22px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.cooperate-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
background-color: #eef1fa !important;
position: relative;
}
.cooperate-menu .el-menu-item.is-active:before{
......@@ -38,6 +37,12 @@
position: relative;
background: #ffffff;
}
.cooperate-right .el-table .cell{
font-size: 12px;
}
.cooperate-right .el-table .el-table td, .cooperate-right .el-table .el-table th{
padding: 5px 0;
}
.cooperate-right .all-cooperate-serch{
background: #ffffff;
padding: 10px;
......
......@@ -6,6 +6,7 @@
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="./cooperate.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_r8hwtw2voe.css">
</head>
<body>
<div id="app" >
......@@ -13,10 +14,10 @@
<div class="content" >
<div class="cooperate">
<div class='cooperate-left'>
<div class="cooperate-title">合作资源</div>
<div class="cooperate-title firsttext_blue">合作资源</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='cooperate-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
<i :class="'iconfont '+item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
......@@ -30,18 +31,18 @@
<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='输入名称、联系人或区域'></el-input>
<el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' class='button-color addbutton' @click='addOperate()'>新增授权点</el-button>
<el-button type='primary' class='firstbackgroud_blue'>搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click="addOperate()">新增授权点</el-button>
</div>
<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="负责人" >
<template slot-scope="scope" >
<span class='cursor' style=' color: #5B76D1; '>
<span class='cursor firsttext_blue' >
{{scope.row.name }}
</span>
<span style=' color: #999;'>{{scope.row.phone}}</span>
<span clas="thirdtext_font">{{scope.row.phone}}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="合作区域"> </el-table-column>
......@@ -49,15 +50,15 @@
<el-table-column label="合作状态" width='80px'>
<template slot-scope="scope" >
<div class='text_center'>
<i class='el-icon-success' v-if='scope.row.status==1' style='color:#6FC152;font-size:16px;'></i>
<i class='el-icon-success' v-else style='color:#F05050;font-size:16px'></i>
<i class='iconfont iconzhengchang' v-if='scope.row.status==1' style='color:#6FC152;font-size:22px;'></i>
<i class='iconfont icontingyong' v-else style='color:#F05050;font-size:22px'></i>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="cooperate-bottom">
<el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" layout="total, prev, pager, next" :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">
</el-pagination>
</div>
</div>
......@@ -83,15 +84,15 @@
activeIndex:'3',tabindex:'3',modal:null,
active_header:'./../cooperate/index.html',modalData:[],
menus:[
{name:'正常',value:'1',icon:'el-icon-upload2'},
{name:'停用',value:'2',icon:'el-icon-sort'},
{name:'全部',value:'3',icon:'el-icon-date'},
{name:'正常',value:'1',icon:'iconzhengchang'},
{name:'停用',value:'2',icon:'icontingyong'},
{name:'全部',value:'3',icon:'iconquanbugongdan'},
],
search:{
type:'',area:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
current_page:1,page_count:7,total:100,
},
tableData:[
{
......
......@@ -5,6 +5,7 @@
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_r8hwtw2voe.css">
</head>
<body>
<div id="app">
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./static/css/main.css">
<link rel="stylesheet" href="./static/css/animate.css">
</head>
<body>
<div id="app">
<common-header :modal-data="active_header"></common-header>
<div class="content">
</div>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script>
<script>
new Vue({
el: '#app',
components: {commonHeader},
data: function() {
return {
activeIndex:'1',tabindex:'1',active_header:'./message.html',
}
},
methods:{
}
})
</script>
</html>
......@@ -5,6 +5,7 @@
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_r8hwtw2voe.css">
</head>
<body>
<div id="app">
......
......@@ -6,6 +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_r8hwtw2voe.css">
</head>
<body>
<div id="app">
......@@ -13,10 +14,10 @@
<div class="content">
<div class="order">
<div class='add-order-left'>
<div class="add-order-title">工单中心</div>
<div class="add-order-title firsttext_blue">工单中心</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='add-order-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
<i :class="'iconfont '+item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
......@@ -33,7 +34,6 @@
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./../static/js/common.js"></script>
<script src="./js/order.js"></script>
<script src="./js/addOne.js"></script>
<script src="./js/addAll.js"></script>
<script>
......@@ -44,11 +44,11 @@
return {
activeIndex:'1',tabindex:'1',active_header:'./order.html',
menus:[
{name:'逐条新建',value:'1',icon:'el-icon-upload2'},
{name:'智能新建',value:'2',icon:'el-icon-sort'},
{name:'批量导出',value:'3',icon:'el-icon-date'},
{name:'天猫导出',value:'4',icon:'el-icon-warning'},
{name:'京东导出',value:'5',icon:'el-icon-upload'},
{name:'逐条新建',value:'1',icon:'iconzhutiaoxinjian'},
{name:'智能新建',value:'2',icon:'iconzhinengxinjian'},
{name:'批量导出',value:'3',icon:'iconpiliangdaoru'},
{name:'天猫导出',value:'4',icon:'icontianmaodaoru'},
{name:'京东导出',value:'5',icon:'iconjingdongdaoru'},
],
modal:addOne,modalData:{},
}
......
This diff is collapsed.
......@@ -24,7 +24,7 @@ var addAll={
},
methods:{
reback(){
this.$router.back(-1)
window.location.href = './index.html'
}
}
}
......@@ -13,7 +13,7 @@ var addOne={
<el-input v-model='addData.form.tel' placeholder='请输入电话号码'></el-input>
</el-form-item>
</el-col>
<el-col :span='14' >
<el-col :span='14' style="padding-top:8px" >
<el-input v-model='addData.form.phone' placeholder='备用电话'></el-input>
</el-col>
</el-row>
......@@ -30,18 +30,18 @@ var addOne={
<el-input v-model='addData.form.address' placeholder='请选择地址'></el-input>
</el-form-item>
</el-col>
<el-col :span='14' >
<el-col :span='14' style="padding-top:8px" >
<el-input v-model='addData.form.local' placeholder='详细地址'></el-input>
</el-col>
</el-row>
<el-form-item prop="type" label='服务类型:' style=" " >
<el-radio v-model="addData.form.type" label="1" border size="medium">安装</el-radio>
<el-radio v-model="addData.form.type" label="2" border size="medium">维修</el-radio>
<el-radio v-model="addData.form.type" label="3" border size="medium">检查</el-radio>
<el-radio v-model="addData.form.type" label="1" 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-form-item>
<el-form-item prop="date" label='质 保 期:' style=" " >
<el-radio v-model="addData.form.date" label="1" border size="medium">保内</el-radio>
<el-radio v-model="addData.form.date" label="2" border size="medium">保外</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-form-item>
<el-row :gutter="20">
<el-col :span='10' >
......@@ -61,7 +61,7 @@ var addOne={
</el-col>
</el-row>
<el-form-item label='描述:' style=" " >
<el-input v-model='addData.form.remark' type='textarea'></el-input>
<el-input v-model='addData.form.remark' :autosize="{ minRows: 1, maxRows: 5}" type='textarea'></el-input>
</el-form-item>
<el-row :gutter="20">
<el-col :span='10' >
......
var beCompleting={
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-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" >
<h2>派单信息</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>工单履历</h2>
<div>
<div class="order-detail-steps" style="">
<el-steps direction="vertical" :active="1">
<el-step title="客服:结算确权 " description='03-13 18:30:02'></el-step>
<el-step title="张师傅:完工" description=' 03-13 18:30:02'></el-step>
<el-step title="张师傅:改预约时间(03-13 10:00),备注:用户明天回 " description='03-13 18:30:02'></el-step>
<el-step title="张师傅:改预约时间(03-12 11:00),备注:用户出差不在家,已经协调修改预约时间" description='03-13 18:30:02'></el-step>
<el-step title="客服:结算确权" description='03-13 18:30:02'></el-step>
<el-step title="系统:派单给唯修汇 " description='03-13 18:30:02'></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">
<div v-for='(item,index) in resdata.talks' :key='index'>
<el-row v-if='item.type==1' class="right-response">
<el-col :span="22">
<div class="right-response-text" >{{item.value}}</div>
</el-col>
<el-col :span="2">
<img src="../static/images/man.jpg" alt="" width="42px" height="42px">
</el-col>
</el-row>
<el-row v-if='item.type==0' class="left-response">
<el-col :span="2">
<img src="../static/images/women.jpg" alt="" width="42px" height="42px">
</el-col>
<el-col :span="22">
<div class="left-response-text" >{{item.value}}</div>
</el-col>
</el-row>
<div v-if='item.type==2' class="timestep">2019-5-16-09</div>
</div>
</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>
</div>
<el-input class='order-input-area' v-model='resdata.inputValue'></el-input>
<el-button style="margin-left:10px">发送</el-button>
</div>
</div>
</el-tab-pane>
</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:''
},
}
},
created(){
this.dialog.title = '工单(GLDQ0019211237)--待完工';
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
/*********上传图片 start************/
handleAvatarSuccess1(res, file) {
},
beforeAvatarUpload1(file) {
const isJPG = (file.type == 'image/jpeg' || file.type == 'image/png');
var limit = 200;
const isLimit = file.size / 1024 <= limit;
if (!isLimit) {
this.$message({ duration:3000,message:'上传图片大小不能超过'+limit+'k!', type: 'error' });
}
if (!isJPG) {
this.$message.error('支持jpg/png格式!');
}
return isLimit && isJPG;
},
uploaderror(err, file, fileList){
var res = JSON.parse(err.message)
this.$message({ duration:3000,message:res.message, type: 'error' });
},
/*********上传图片 end************/
}
}
var beRighting={
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-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" >
<h2>派单信息</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>工单履历</h2>
<div>
<div class="order-detail-steps" style="">
<el-steps direction="vertical" :active="1">
<el-step title="客服:结算确权 " description='03-13 18:30:02'></el-step>
<el-step title="张师傅:完工" description=' 03-13 18:30:02'></el-step>
<el-step title="张师傅:改预约时间(03-13 10:00),备注:用户明天回 " description='03-13 18:30:02'></el-step>
<el-step title="张师傅:改预约时间(03-12 11:00),备注:用户出差不在家,已经协调修改预约时间" description='03-13 18:30:02'></el-step>
<el-step title="客服:结算确权" description='03-13 18:30:02'></el-step>
<el-step title="系统:派单给唯修汇 " description='03-13 18:30:02'></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">
<div v-for='(item,index) in resdata.talks' :key='index'>
<el-row v-if='item.type==1' class="right-response">
<el-col :span="22">
<div class="right-response-text" >{{item.value}}</div>
</el-col>
<el-col :span="2">
<img src="../static/images/man.jpg" alt="" width="42px" height="42px">
</el-col>
</el-row>
<el-row v-if='item.type==0' class="left-response">
<el-col :span="2">
<img src="../static/images/women.jpg" alt="" width="42px" height="42px">
</el-col>
<el-col :span="22">
<div class="left-response-text" >{{item.value}}</div>
</el-col>
</el-row>
<div v-if='item.type==2' class="timestep">2019-5-16-09</div>
</div>
</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>
</div>
<el-input class='order-input-area' v-model='resdata.inputValue'></el-input>
<el-button style="margin-left:10px">发送</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="结算" name="3" >
<h2>完工信息</h2>
<div class='order-detail-tab' style="line-height:2.5;">
<el-row>
<el-col :span="12">
<p>授 权 点: <span> 唯修汇 (张三 15599991111)</span></p>
</el-col>
<el-col :span="12">
<p>内 机 码: <span>421362871684921</span> </p>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<p>完 工: <span>03-28 10:09:12</span> </p>
</el-col>
<el-col :span="12">
<p>外 机 码: <span>421362871684921</span></p>
</el-col>
</el-row>
<p>
产品信息: <span>格力 空调 KFR-35GW/NhEaB1W</span>
</p>
<p>
完工图片: <span>(6张)</span>
</p>
<div class="order-carousel">
<el-carousel :interval="4000" type="card" height="120px" :autoplay='false' arrow="always">
<el-carousel-item >
<img src="../static/images/women.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-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>
<p>
完工备注注:
<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span>
</p>
</div>
<h2>待结明细</h2>
<div class='order-detail-tab' style="border:none">
<span>(基本)安装--新机安装</span>
<span>1</span>
<span>¥200</span>
</div>
<el-button type='primary' class='primary_btcolor' style="margin-left:20px" @click="settleFun()" >确权结算</el-button>
<el-button type='danger' @click="refuse()" >打回</el-button>
</el-tab-pane>
</el-tabs>
<component :is="modal" @close="closeChild" :modal-data="innerData"></component>
</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:''
},
innerData:{},modal:null,
}
},
created(){
this.dialog.title = '工单(GLDQ0019211237)--待确权' ;
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
refuse(){
this.innerData = {};
this.modal = VRefuse;
},
closeChild(){
this.modal = null;
},
settleFun(){
this.innerData = {};
this.modal = settlePrice;
},
/*********上传图片 start************/
handleAvatarSuccess1(res, file) {
},
beforeAvatarUpload1(file) {
const isJPG = (file.type == 'image/jpeg' || file.type == 'image/png');
var limit = 200;
const isLimit = file.size / 1024 <= limit;
if (!isLimit) {
this.$message({ duration:3000,message:'上传图片大小不能超过'+limit+'k!', type: 'error' });
}
if (!isJPG) {
this.$message.error('支持jpg/png格式!');
}
return isLimit && isJPG;
},
uploaderror(err, file, fileList){
var res = JSON.parse(err.message)
this.$message({ duration:3000,message:res.message, type: 'error' });
},
/*********上传图片 end************/
}
}
var Deliver={
template: `
<el-dialog :title="dialog.title" width='420px' :visible.sync="dialog.show" custom-class='settle-dialog animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content">
<el-form ref="form" :model="form" label-width="130px">
<el-form-item label="可派授权点:">
<el-select v-model="form.address" placeholder="请选择">
<el-option v-for="item in form.options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div class="bt-center">
<el-button class='background-blue text-white' >确定派单</el-button>
</div>
</div>
</el-dialog>`,
props: {
modalData: Object
},
data(){
return{
detail:{ },uploadApi:'',
dialog:{
show:true,title:'派单',tab:'1',
},
form:{
address:'',options:[]
}
}
},
created(){
console.log(this.modalData)
},
methods:{
handleClose() {
this.$emit('close')
},
},
}
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'>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" >
<h2>派单信息</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>工单履历</h2>
<div>
<div class="order-detail-steps" style="">
<el-steps direction="vertical" :active="1">
<el-step title="客服:结算确权 " description='03-13 18:30:02'></el-step>
<el-step title="张师傅:完工" description=' 03-13 18:30:02'></el-step>
<el-step title="张师傅:改预约时间(03-13 10:00),备注:用户明天回 " description='03-13 18:30:02'></el-step>
<el-step title="张师傅:改预约时间(03-12 11:00),备注:用户出差不在家,已经协调修改预约时间" description='03-13 18:30:02'></el-step>
<el-step title="客服:结算确权" description='03-13 18:30:02'></el-step>
<el-step title="系统:派单给唯修汇 " description='03-13 18:30:02'></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">
<div v-for='(item,index) in resdata.talks' :key='index'>
<el-row v-if='item.type==1' class="right-response">
<el-col :span="22">
<div class="right-response-text" >{{item.value}}</div>
</el-col>
<el-col :span="2">
<img src="../static/images/man.jpg" alt="" width="42px" height="42px">
</el-col>
</el-row>
<el-row v-if='item.type==0' class="left-response">
<el-col :span="2">
<img src="../static/images/women.jpg" alt="" width="42px" height="42px">
</el-col>
<el-col :span="22">
<div class="left-response-text" >{{item.value}}</div>
</el-col>
</el-row>
<div v-if='item.type==2' class="timestep">2019-5-16-09</div>
</div>
</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>
</div>
<el-input class='order-input-area' v-model='resdata.inputValue'></el-input>
<el-button style="margin-left:10px">发送</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="结算" name="6">
<h2>结算信息</h2>
<div class='order-detail-tab'>
<p>
结算状态: <span>已付款 </span>
</p>
<p>结算金额:¥<span>200</span></p>
</div>
<h2>结算明细</h2>
<div></div>
<el-row class="text_center order-detail-tab" style="margin-bottom:10px;width:340px">
<el-col :span="12">(基本)安装--新机安装</el-col>
<el-col :span="4">1</el-col>
<el-col :span="8">¥200</el-col>
</el-row>
<h2>完工信息</h2>
<div class='order-detail-tab' style="line-height:2.5;border:none">
<el-row>
<el-col :span="12">
<p>授 权 点: <span> 唯修汇 (张三 15599991111)</span></p>
</el-col>
<el-col :span="12">
<p>内 机 码: <span>421362871684921</span> </p>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<p>完 工: <span>03-28 10:09:12</span> </p>
</el-col>
<el-col :span="12">
<p>外 机 码: <span>421362871684921</span></p>
</el-col>
</el-row>
<p>
产品信息: <span>格力 空调 KFR-35GW/NhEaB1W</span>
</p>
<p>
完工图片: <span>(6张)</span>
</p>
<div class="order-carousel">
<el-carousel :interval="4000" type="card" height="120px" :autoplay='false' arrow="always">
<el-carousel-item >
<img src="../static/images/women.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-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>
<p>
完工备注注:
<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span>
</p>
</div>
</el-tab-pane>
</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:''
},
}
},
created(){
console.log(this.modalData)
this.dialog.title = '工单(GLDQ0019211237)--已完成' ;;
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
/*********上传图片 start************/
handleAvatarSuccess1(res, file) {
},
beforeAvatarUpload1(file) {
const isJPG = (file.type == 'image/jpeg' || file.type == 'image/png');
var limit = 200;
const isLimit = file.size / 1024 <= limit;
if (!isLimit) {
this.$message({ duration:3000,message:'上传图片大小不能超过'+limit+'k!', type: 'error' });
}
if (!isJPG) {
this.$message.error('支持jpg/png格式!');
}
return isLimit && isJPG;
},
uploaderror(err, file, fileList){
var res = JSON.parse(err.message)
this.$message({ duration:3000,message:res.message, type: 'error' });
},
/*********上传图片 end************/
}
}
......@@ -62,7 +62,7 @@ var Detail={
</div>
</div>
</el-tab-pane>
<el-tab-pane label="确权" name="3">
<el-tab-pane label="确权" name="3" v-if="!(dialog.status==3 || dialog.status==4)">
<h2>结算信息</h2>
<div class='order-detail-tab' style="line-height:2.5">
<p>
......@@ -137,7 +137,7 @@ var Detail={
</p>
</div>
</el-tab-pane>
<el-tab-pane label="范围" name="4">
<el-tab-pane label="范围" name="4" v-if="!(dialog.status==3 || dialog.status==4)">
<h2>服务区域</h2>
<div class='order-detail-tab' style="padding:20px;line-height:3">
<span class='tag' v-for='(item,index) in 9' :key='index'>
......@@ -151,7 +151,7 @@ var Detail={
</span>
</div>
</el-tab-pane>
<el-tab-pane label="授权码" name="5">
<el-tab-pane label="授权码" name="5" v-if="!(dialog.status==3 || dialog.status==4)">
<h2>授权信息</h2>
<div class='order-detail-tab' style="border:none">
<p>授权ID:<span>31E8792IWE73</span></p>
......@@ -162,7 +162,69 @@ var Detail={
<div class="wechat"></div>
<div class="wechatTip">扫一扫,登录小程序</div>
</el-tab-pane>
<el-tab-pane label="结算" name="6" v-if=" dialog.status==4">
<h2>完工信息</h2>
<div class='order-detail-tab' style="line-height:2.5;">
<el-row>
<el-col :span="12">
<p>授 权 点: <span> 唯修汇 (张三 15599991111)</span></p>
</el-col>
<el-col :span="12">
<p>内 机 码: <span>421362871684921</span> </p>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<p>完 工: <span>03-28 10:09:12</span> </p>
</el-col>
<el-col :span="12">
<p>外 机 码: <span>421362871684921</span></p>
</el-col>
</el-row>
<p>
产品信息: <span>格力 空调 KFR-35GW/NhEaB1W</span>
</p>
<p>
完工图片: <span>(6张)</span>
</p>
<div class="order-carousel">
<el-carousel :interval="4000" type="card" height="120px" :autoplay='false' arrow="always">
<el-carousel-item >
<img src="../static/images/women.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-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>
<p>
完工备注注:
<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span>
</p>
</div>
<h2>待结明细</h2>
<div class='order-detail-tab' style="border:none">
<span>(基本)安装--新机安装</span>
<span>1</span>
<span>¥200</span>
</div>
<el-button type='primary' class='primary_btcolor' style="margin-left:20px">确权结算</el-button>
<el-button type='danger' class="firstbackgroud_red" @click="refuse()" >打回</el-button>
</el-tab-pane>
</el-tabs>
<component :is="modal" @close="closeChild" :modal-data="innerData"></component>
</el-dialog> `,
props: {
//父组件调用时传进来的参数
......@@ -195,13 +257,14 @@ var Detail={
tab:'1',
status:''
},
innerData:{}
}
},
created(){
console.log(this.modalData)
this.dialog.title = '工单(GLDQ0019211237)--'+this.modalData.statusText ;
this.dialog.status = this.modalData.status;
this.dialog.status = Number(this.modalData.status);
},
methods:{
handleClose() {
......@@ -210,6 +273,13 @@ var Detail={
handleClick(){
},
refuse(){
this.innerData = {};
this.modal = VRefuse;
},
closeChild(){
this.modal = null;
},
/*********上传图片 start************/
handleAvatarSuccess1(res, file) {
},
......
var VRefuse={
template: `
<el-dialog :title="dialog.title" width='420px' :visible.sync="dialog.show" custom-class='settle-dialog animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content">
<h2 style="margin-bottom:10px">打回后,需重新完工!</h2>
<el-form ref="form" :model="form" label-width="60px">
<el-form-item label="备注:">
<el-input v-model='form.remark'></el-input>
</el-form-item>
</el-form>
<div class="bt-center">
<el-button class='background-blue text-white' >确定打回</el-button>
</div>
</div>
</el-dialog>`,
props: {
modalData: Object
},
data(){
return{
detail:{ },uploadApi:'',
dialog:{
show:true,title:'打回',tab:'1',
},
form:{
remark:''
}
}
},
created(){
console.log(this.modalData)
},
methods:{
handleClose() {
this.$emit('close')
},
},
}
var settlePrice={
template: `
<el-dialog :title="dialog.title" width='420px' :visible.sync="dialog.show" custom-class='settle-dialog animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content">
<el-row class="text_center" style="margin-bottom:10px">
<el-col :span="12">(基本)安装--新机安装</el-col>
<el-col :span="4">1</el-col>
<el-col :span="8">¥200</el-col>
</el-row>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="调整金额:">
<el-input v-model='form.price'></el-input>
</el-form-item>
<el-form-item label="调整说明:">
<el-input v-model='form.remark'></el-input>
</el-form-item>
<el-form-item label="合计金额:">
¥{{200}}
</el-form-item>
</el-form>
<div class="bt-center">
<el-button class='background-blue text-white' >确定结算</el-button>
</div>
</div>
</el-dialog>`,
props: {
modalData: Object
},
data(){
return{
detail:{ },uploadApi:'',
dialog:{
show:true,title:'确权结算',tab:'1',
},
form:{
remark:'',price:''
}
}
},
created(){
console.log(this.modalData)
},
methods:{
handleClose() {
this.$emit('close')
},
},
}
......@@ -11,15 +11,14 @@
float: left;
}
.order-left .order-title{
color: #5874D8;
text-align: center;
font-size: 18px;
font-size: 22px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.order-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
background-color: #eef1fa !important;
position: relative;
}
.order-menu .el-menu-item.is-active:before{
......@@ -79,7 +78,6 @@
}
.all-order-box{
width: 100%;
background: #EEF1FB;
height: 104px;
margin-top: 10px;
box-shadow: 3px 0px 5px 0px rgba(43,67,153,0.2);
......@@ -89,7 +87,7 @@
line-height: 42px;
}
.all-box-top .type{
background: #486DED;
font-size: 14px;
color: #ffffff;
padding: 3px 6px;
margin-right: 10px;
......@@ -97,8 +95,16 @@
.all-box-topright{
float: right;
}
.all-box-topright i {
color: #5874D8;margin-right: 20px;
.all-box-topright i:nth-child(1) {
margin-right: 20px;
font-size: 20px;
}
.all-box-topright i:nth-child(2) {
margin-right: 20px;
font-size: 20px;
}
.all-box-topright i:nth-child(3) {
margin-right: 20px;
font-size: 20px;
}
.all-box-bottom{
......@@ -114,7 +120,7 @@
border-right: 1px solid #ececec;
}
.all-box-bottom .all-box-mess1 p{
color: #5874D8;padding-top: 8px;
padding-top: 8px;
}
.all-box-bottom .all-box-mess1 span{
font-size: 12px;
......@@ -130,7 +136,6 @@
padding-top: 8px;
}
.all-box-bottom .all-box-mess2 p span,.all-box-bottom .all-box-mess3 p span{
color: #333;
font-size: 12px;
}
.all-box-bottom .all-box-status{
......@@ -358,7 +363,7 @@
.add-order-left .add-order-title{
color: #5874D8;
text-align: center;
font-size: 18px;
font-size: 22px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
......@@ -407,12 +412,25 @@
right: 0;
bottom: 0;
top: 64px;
padding: 20px;
padding: 10px 20px;
overflow: auto;
}
.add-order-right .add-order-content form{
width: 800px;
}
.add-order-right .add-order-content form .el-input__inner,.add-order-right .add-order-content form .el-input{
height: 28px;
font-size: 12px;
}
.add-order-right .add-order-content form .el-form-item{
margin-bottom: 15px;
}
.add-order-right .add-order-content form .el-form-item__error{
padding-top: 0;
}
.add-order-right .add-order-content form .el-input__icon{
line-height: 28px;
}
.add-order-right .add-order-content form .el-radio__input{
display: none;
}
......@@ -440,4 +458,25 @@
}
.add-order-right .add-order-content button{
margin-top: 20px;background: rgb(87, 116, 216);width: 90px;
}
.settle-dialog .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.settle-dialog .el-dialog__body{
padding:30px 0;
}
.settle-dialog .el-dialog__header{
background: #6C8BF8;
}
.settle-dialog .el-dialog__header .el-dialog__title,.settle-dialog .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff;
}
.settle-dialog .dialog-content{
padding: 0 20px;
line-height: 2;
}
.bt-center{
text-align: center;
margin-top: 20px;
}
\ No newline at end of file
......@@ -7,22 +7,26 @@
<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">
</head>
<body>
<div id="app">
<common-header :modal-data="active_header"></common-header>
<div class="settle">
<div class='settle-left'>
<div class="settle-title">系统设置</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='settle-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
<div class="content" >
<div class="settle">
<div class='settle-left'>
<div class="settle-title firsttext_blue">系统设置</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='settle-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="'iconfont '+item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
</div>
<component :is="modal"></component>
</div>
<component :is="modal"></component>
</div>
</div>
</div>
</body>
<!-- 先引入 Vue -->
......@@ -50,9 +54,9 @@
return{
activeIndex:'1',tabindex:'1',modal:Product,active_header:'./../set/index.html',
menus:[
{name:'产品维护',value:'1',icon:'el-icon-upload2'},
{name:'服务维护',value:'2',icon:'el-icon-upload2'},
{name:'包内结算',value:'3',icon:'el-icon-sort'},
{name:'产品维护',value:'1',icon:'iconchanpinku'},
{name:'服务维护',value:'2',icon:'iconfuwu'},
{name:'保内结算',value:'3',icon:'iconbaoneijiesuan'},
],
}
},
......@@ -84,38 +88,3 @@
}
})
</script>
<style>
.settle{
width: 1400px;
height: 100%;
margin: auto;
}
.settle-left{
width: 198px;
height: 100%;
background: #ffffff;
float: left;
}
.settle-left .settle-title{
color: #5874D8;
text-align: center;
font-size: 18px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.settle-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
position: relative;
}
.settle-menu .el-menu-item.is-active:before{
content: '';
position: absolute;
width: 3px;
height: 20px;
left: 0;
top: 20px;
background: #50B5FC
}
</style>
......@@ -8,28 +8,28 @@ var Product={
</el-select>
<el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入规格,型号名查询'></el-input>
<el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' plain class='button-color addbutton' @click='AddCardfun()'>新建品牌</el-button>
<el-button type='primary' class='button-color addbutton' @click='creatProduct()'>新建产品</el-button>
<el-button type='primary' plain class='firstbackgroud_blue addbutton' @click='AddCardfun()'>新建品牌</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click='creatProduct()'>新建产品</el-button>
</div>
<div class="settle-content">
<table class="table-header">
<tr >
<td style="width:15%"><div class="text_center">产品品类</div></td>
<td style="width:85%;">
<th style="width:15%"><div class="text_center">产品品类</div></th>
<th style="width:85%;">
<table >
<tr>
<td style="width:25%;"><div class="text_center">产品规格</div></td>
<td style="width:75%; ">
<th style="width:25%;"><div class="text_center">产品规格</div></th>
<th style="width:75%; ">
<table >
<tr>
<td style="width:70%" class='third-table-center'><div class="text_center">产品型号</div></td>
<td style="width:30%"><div class="text_center">品牌</div></td>
<th style="width:70%" class='third-table-center'><div class="text_center">产品型号</div></th>
<th style="width:30%"><div class="text_center">品牌</div></th>
</tr>
</table>
</td>
</th>
</tr>
</table>
</td>
</th>
</tr>
</table>
<table class="first-table">
......
......@@ -9,30 +9,30 @@ var Protect ={
<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='输入项目名,合作商名查询'></el-input> -->
<el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' class='button-color addbutton' @click="addProtect()">新建</el-button>
<el-button type='primary' class='firstbackgroud_blue'>搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click="addProtect()">新建</el-button>
</div>
<div class="settle-content">
<table class="table-header">
<tr >
<td style="width:15%"><div class="text_center">品类名称</div></td>
<td style="width:85%;">
<th style="width:15%"><div class="text_center">品类名称</div></th>
<th style="width:85%;">
<table >
<tr>
<td style="width:15%;"><div class="text_center">服务类型</div></td>
<td style="width:85%; ">
<th style="width:15%;"><div class="text_center">服务类型</div></th>
<th style="width:85%; ">
<table >
<tr>
<td style="width:20%"> <div class="text_center">服务分类</div></td>
<td style="width:40%" class='third-table-center'><div class="text_center">服务措施</div></td>
<td style="width:30%" class='third-table-center'><div class="text_center">金额</div></td>
<td style="width:10%"><div class="text_center">操作</div></td>
<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:10%"><div class="text_center">操作</div></th>
</tr>
</table>
</td>
</th>
</tr>
</table>
</td>
</th>
</tr>
</table>
<table class="first-table">
......
......@@ -9,28 +9,28 @@ var Server={
<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='输入项目名,合作商名查询'></el-input> -->
<el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' class='button-color addbutton' @click='AddServerFun()'>新建服务</el-button>
<el-button type='primary' class='firstbackgroud_blue'>搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click='AddServerFun()'>新建服务</el-button>
</div>
<div class="settle-content">
<table class="table-header">
<tr >
<td style="width:15%"><div class="text_center">品类名称</div></td>
<td style="width:85%;">
<th style="width:15%"><div class="text_center">品类名称</div></th>
<th style="width:85%;">
<table >
<tr>
<td style="width:15%;"><div class="text_center">服务类型</div></td>
<td style="width:85%; ">
<th style="width:15%;"><div class="text_center">服务类型</div></th>
<th style="width:85%; ">
<table >
<tr>
<td style="width:30%"> <div class="text_center">服务分类</div></td>
<td style="width:70%" class='third-table-center'><div class="text_center">服务措施</div></td>
<th style="width:30%"> <div class="text_center">服务分类</div></th>
<th style="width:70%" class='third-table-center'><div class="text_center">服务措施</div></th>
</tr>
</table>
</td>
</th>
</tr>
</table>
</td>
</th>
</tr>
</table>
<table class="first-table">
......
......@@ -11,7 +11,7 @@ var AddCate={
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' v-if='!isCreat'>删除</el-button>
<el-button type='danger' class="firstbackgroud_red" v-if='!isCreat'>删除</el-button>
</div>
</el-dialog>`,
props: {
......
......@@ -17,7 +17,7 @@ var AddModel={
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' v-if='!isCreat'>删除</el-button>
<el-button type='danger' class="firstbackgroud_red" v-if='!isCreat'>删除</el-button>
</div>
</el-dialog>`,
props: {
......
......@@ -17,7 +17,7 @@ var AddType={
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' v-if='!isCreat'>删除</el-button>
<el-button type='danger' class="firstbackgroud_red" v-if='!isCreat'>删除</el-button>
</div>
</el-dialog> `,
props: {
......
......@@ -29,7 +29,7 @@ var EdictProtect={
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' v-if='!isCreat'>删除</el-button>
<el-button type='danger' class="firstbackgroud_red" v-if='!isCreat'>删除</el-button>
</div>
</el-dialog> `,
props: {
......
......@@ -8,7 +8,7 @@ var EdictName={
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' >删除</el-button>
<el-button type='danger' class="firstbackgroud_red" >删除</el-button>
</div>
</el-dialog> `,
props: {
......
.settle{
width: 1400px;
height: 100%;
margin: auto;
}
.settle-left{
width: 198px;
height: 100%;
background: #ffffff;
float: left;
}
.settle-left .settle-title{
text-align: center;
font-size: 22px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.settle-menu .el-menu-item.is-active{
background-color: #eef1fa !important;
position: relative;
}
.settle-menu .el-menu-item.is-active:before{
content: '';
position: absolute;
width: 3px;
height: 20px;
left: 0;
top: 20px;
background: #50B5FC
}
.settle-content table{
width: 100%;
border-collapse: separate;
......@@ -299,12 +330,14 @@
border-bottom: 1px solid #ececec;
}
.settle-content .table-header{
background: #EEF1FB;
background: #eef1fa;
text-align: center;
height: 38px;
line-height: 38px;
}
.settle-content .table-header td div,.settle-content .table-header th div{
font-size: 12px;
}
.settle-right{
float: right;
width: 1180px;
......
......@@ -6,6 +6,7 @@
<link rel="stylesheet" href="./../static/css/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="./settlement.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1195086_r8hwtw2voe.css">
</head>
<body>
<div id="app" >
......@@ -13,10 +14,10 @@
<div class="content" >
<div class="settle">
<div class='settle-left'>
<div class="settle-title">结算中心</div>
<div class="settle-title firsttext_blue">结算中心</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='settle-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
<i :class="'iconfont '+item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
......@@ -30,12 +31,10 @@
<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='输入项目名,合作商名查询'></el-input>
<el-button type='primary' class='button-color'>搜索</el-button>
<span class='button-icon'><i class='el-icon-d-caret'></i></span>
<span class='button-icon'><i class='el-icon-d-caret'></i></span>
<el-button type='primary' class='button-color addbutton' @click='settleFun()'>结算</el-button>
<el-button type='primary' class='firstbackgroud_blue'>搜索</el-button>
<el-button type='primary' class='firstbackgroud_blue addbutton' @click='settleFun()'>结算</el-button>
</div>
<div class="settle-content">
<div class="settle-content firsttext_font">
<el-table :data="tableData" style="width: 100%" @row-click='checkData' row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
......@@ -47,7 +46,7 @@
</el-table-column>
<el-table-column label="组成" >
<template slot-scope="scope" >
<span class='blue-text'>{{scope.row.construst }}</span>
<span class='firsttext_blue'>{{scope.row.construst }}</span>
</template>
</el-table-column>
<el-table-column label="完工信息" >
......@@ -59,7 +58,7 @@
</el-table-column>
<el-table-column label="工单号" >
<template slot-scope="scope" >
<span class='blue-text'>{{scope.row.number }}</span>
<span class='firsttext_blue'>{{scope.row.number }}</span>
</template>
</el-table-column>
......@@ -67,16 +66,13 @@
<el-table-column label="结算状态" width='80px'>
<template slot-scope="scope" >
<div class='text_center' @click='opendialog(scope.row)'>
<span v-if='scope.row.status==1'>
<i class='el-icon-date' style='color:#F7BF57;font-size:18px;'></i>
<span class='circle-yellow' v-if='scope.row.status==1'>
待结
</span>
<span v-if='scope.row.status==2' >
<i class='el-icon-message' style='color:#F05050;font-size:18px'></i>
<span class="circle-red" v-if='scope.row.status==2' >
待付
</span>
<span v-if='scope.row.status==3'>
<i class='el-icon-message' style='color:#71C255;font-size:18px'></i>
<span class="circle-green" v-if='scope.row.status==3'>
已付
</span>
</div>
......@@ -85,7 +81,7 @@
</el-table>
</div>
<div class="settle-bottom">
<el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" layout="total, prev, pager, next" :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">
</el-pagination>
</div>
</div>
......@@ -112,16 +108,16 @@
activeIndex:'1',tabindex:'1',modal:null,
active_header:'./../settlement/index.html',modalData:[],
menus:[
{name:'待结算',value:'1',icon:'el-icon-upload2'},
{name:'全部结算单',value:'2',icon:'el-icon-sort'},
{name:'待付款',value:'3',icon:'el-icon-date'},
{name:'全部付款单',value:'4',icon:'el-icon-date'},
{name:'待结算',value:'1',icon:'icondaijiesuan1'},
{name:'全部结算单',value:'2',icon:'iconquanbujiesuandan'},
{name:'待付款',value:'3',icon:'icondaifukuan'},
{name:'全部付款单',value:'4',icon:'iconquanbufukuan'},
],
search:{
type:'',date:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
current_page:1,page_count:7,total:100,
},
tableData:[
{
......
......@@ -11,15 +11,14 @@
float: left;
}
.settle-left .settle-title{
color: #5874D8;
text-align: center;
font-size: 18px;
font-size: 22px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.settle-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
background-color: #eef1fa !important;
position: relative;
}
.settle-menu .el-menu-item.is-active:before{
......@@ -38,6 +37,12 @@
position: relative;
background: #ffffff;
}
.settle-right .el-table .cell{
font-size: 12px;
}
.settle-right .el-table td, .settle-right .el-table th{
padding: 5px 0;
}
.settle-right .all-settle-serch{
background: #ffffff;
padding: 10px;
......@@ -64,7 +69,7 @@
background: #5874D8;
}
.button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px;
padding: 10px 8px;
border-radius: 4px;
}
.button-icon i {
......@@ -92,7 +97,7 @@
text-align: center;
}
.settle-right .settle-content table th{
background: #EEF1FC;
background: #eef1fa;
color: #666;
text-align: center;
}
......@@ -182,7 +187,7 @@
.el-dialog__wrapper{
overflow: hidden !important;
}
.settle-dialog .el-tabs--card>.el-tabs__header{
/*.settle-dialog .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.settle-dialog .el-dialog__body{
......@@ -197,11 +202,11 @@
.settle-dialog .dialog-content{
padding: 0 20px;
line-height: 2;
}
.bt-center{
}*/
/*.bt-center{
text-align: center;
margin-top: 20px;
}
}*/
/********************详情start*******************/
.order-detail{
width: 720px;
......
......@@ -7,7 +7,7 @@ html,body,#app,.wrapper{
width:100%;
height:100%;
overflow: auto;
background: #F5F5F5;
background: #f5f5f5;
position: relative;
}
#app{
......@@ -37,16 +37,83 @@ button,.el-button{
border: #5874D8;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #5874D8;
background-color: #f5f5f5;
color: #5874d8;
border:1px solid #5874d8;
border-color: #5874d8;
}
.el-pagination .el-select .el-input .el-input__inner{
background: #f5f5f5;
}
.background-blue{
background: #5874D8;
background: #5874d8;
}
.text-white{
color: #ffffff;
}
.el-dialog__wrapper{
/********************主配色 start******************/
.firstbackgroud_blue{
background: #5874d8
}
.firsttext_blue{
color: #5874d8
}
.secondbackground_blue{
background: #50b5fc
}
.secondtext_blue{
color: #50b5fc
}
.thirdbackground_blue{
background: #eef1fa
}
.thirdtext_blue{
color: #eef1fa
}
.firstbackgroud_red{
background: #f37373
}
.firsttext_red{
color: #f37373
}
.firstbackgroud_green{
background: #71c255
}
.firsttext_green{
color: #71c255
}
.firstbackgroud_back{
background: #ffffff
}
.firsttext_back{
color: #ffffff
}
.secondbackgroud_back{
background: #f5f5f5
}
.secondtext_back{
color: #f5f5f5
}
.firstbackgroud_font{
background: #333333 !important;
}
.firsttext_font{
color: #333333 !important;
}
.secondbackgroud_font{
background: #666666
}
.secondtext_font{
color: #666666
}
.thirdbackgroud_font{
background: #8f97a4
}
.thirdtext_font{
color: #8f97a4
}
/********************主配色 end******************/
.el-dialog__wrapper{
overflow: hidden !important;
}
.el-dialog__body{
......@@ -60,7 +127,7 @@ button,.el-button{
}
.header{
height:60px;
background:rgba(112,141,241,1);
/*background:rgba(112,141,241,1);*/
}
.header-content{
width: 1400px;
......@@ -88,7 +155,6 @@ button,.el-button{
float: right;
height: 100%;
line-height: 60px;
background: rgba(112,141,241,1);
}
.header .header-side .mian_side{
height: 40px;
......@@ -97,14 +163,16 @@ button,.el-button{
border-bottom: none;
}
.header .header-side .mian_side .el-menu-item{
line-height: 3;
line-height: 2.5;
height: 40px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #ffffff;
}
.header .header-side .mian_side .el-menu-item i{
color: #ffffff
color: #ffffff;
vertical-align: middle;
margin-right: 2px;
}
.header .header-side .mian_side .el-menu-item.is-active{
border-bottom: 2px solid #F5F5F5;
......@@ -115,16 +183,56 @@ button,.el-button{
border-top-right-radius: 5px;
}
.header .header-side .mian_side .el-menu-item.is-active i{
color: #708DF1
color: #708DF1;
}
.content{
/*background: #ffffff;*/
/*width: 1400px;*/
margin: auto;
position: absolute;
top: 80px;
bottom: 15px;
left: 0;
right: 0;
/*overflow: auto;*/
}
.content .el-table .cell{
color: #333333 !important;
}
.font_12px{
font-size: 12px;
}
ul .iconfont {
font-size: 15px;
}
.circle-red,.circle-yellow,.circle-green{
position: relative;
padding-left: 15px;
}
.circle-red:before{
position: absolute;
content: '';
width:10px;
height: 10px;
border-radius: 50%;
background: #f37373;
top: 5px;
left: 0;
}
.circle-yellow:before{
position: absolute;
content: '';
width:10px;
height: 10px;
border-radius: 50%;
background: rgb(247, 191, 87);
top: 5px;
left: 0;
}
.circle-green:before{
position: absolute;
content: '';
width:10px;
height: 10px;
border-radius: 50%;
background: rgb(113, 194, 85);
top: 5px;
left: 0;
}
\ No newline at end of file
var commonHeader={
template: `<div class="header">
template: `<div class="header firstbackgroud_blue">
<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>
</div>
<div class="header-side">
<el-menu mode="horizontal" :router="false" :unique-opened="true" @select="selectRoute" :default-active="onRoutes" background-color="#708DF1" text-color="#ffffff" active-text-color="#708DF1" class="mian_side">
<el-menu-item :index="item.value" :key="index" v-for="(item,index) in headmenus"><i :class="item.icon"></i>{{item.name}}</el-menu-item>
<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">
<el-menu-item :index="item.value" :key="index" v-for="(item,index) in headmenus"><i :class="'iconfont '+item.icon"></i>{{item.name}}</el-menu-item>
</el-menu>
</div>
</div>
......@@ -19,12 +19,12 @@ var commonHeader={
return{
onRoutes:'' ,
headmenus:[
{name:'首页',value:'./../main/index.html',icon:'el-icon-menu'},
{name:'工单',value:'./../order/index.html',icon:'el-icon-tickets'},
{name:'结算',value:'./../settlement/index.html',icon:'el-icon-printer'},
{name:'合作',value:'./../cooperate/index.html',icon:'el-icon-refresh'},
{name:'消息',value:'./../message/index.html',icon:'el-icon-service'},
{name:'设置',value:'./../set/index.html',icon:'el-icon-setting'},
{name:'首页',value:'./../main/index.html',icon:'iconshouye'},
{name:'工单',value:'./../order/index.html',icon:'icongongdan'},
{name:'结算',value:'./../settlement/index.html',icon:'iconjiesuan'},
{name:'合作',value:'./../cooperate/index.html',icon:'iconhezuo'},
{name:'消息',value:'./../message/index.html',icon:'iconxiaoxi'},
{name:'设置',value:'./../set/index.html',icon:'iconshezhi'},
],
}
},
......
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