Commit 00b9008f authored by 余苗苗's avatar 余苗苗

增加新页面

parent 74c20c0f
...@@ -103,6 +103,7 @@ ...@@ -103,6 +103,7 @@
.dialog-content .edict-icon{ .dialog-content .edict-icon{
position: absolute;right: 20px; position: absolute;right: 20px;
top:0; top:0;
z-index: 200;
} }
.dialog-content .edict-icon i{ .dialog-content .edict-icon i{
font-size: 24px; font-size: 24px;
...@@ -230,3 +231,26 @@ ...@@ -230,3 +231,26 @@
font-size: 12px; font-size: 12px;
color: #999; color: #999;
} }
.add-operate{
height: 700px !important;
}
.add-operate form{
/*width: 500px;*/
height: 560px;
overflow: auto;
}
.add-operate .el-input__inner,.add-operate .seach-input {
width: 220px;
height: 28px;
/*margin-right: 20px;*/
}
.add-operate textarea{
width: 420px;
height: 28px;
}
.add-operate form .el-form-item {
margin-bottom: 12px;
}
.addoperate-icon {
margin-left: 3px;
}
...@@ -3,11 +3,12 @@ ...@@ -3,11 +3,12 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <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/main.css">
<link rel="stylesheet" href="./static/css/cooperate.css"> <link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="./cooperate.css">
</head> </head>
<body> <body>
<div id="app" v-loading='loading' > <div id="app" >
<common-header :modal-data="active_header" ></common-header> <common-header :modal-data="active_header" ></common-header>
<div class="content" > <div class="content" >
<div class="cooperate"> <div class="cooperate">
...@@ -30,7 +31,7 @@ ...@@ -30,7 +31,7 @@
</el-select> </el-select>
<el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入名称、联系人或区域'></el-input> <el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入名称、联系人或区域'></el-input>
<el-button type='primary' class='button-color'>搜索</el-button> <el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' class='button-color addbutton' @click=''>新增授权点</el-button> <el-button type='primary' class='button-color addbutton' @click='addOperate()'>新增授权点</el-button>
</div> </div>
<div class="cooperate-content"> <div class="cooperate-content">
<el-table :data="tableData" style="width: 100%" @row-click='checkData'> <el-table :data="tableData" style="width: 100%" @row-click='checkData'>
...@@ -69,16 +70,18 @@ ...@@ -69,16 +70,18 @@
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 --> <!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script> <script src="./../static/js/common.js"></script>
<script src="./static/js/cooperate/detail.js"></script> <script src="./js/detail.js"></script>
<script src="./js/addOperate.js"></script>
<script> <script>
new Vue({ new Vue({
el: '#app', el: '#app',
components: {commonHeader,vDetail}, components: {commonHeader,vDetail,addOperate},
data: function() { data: function() {
return { return {
activeIndex:'3',tabindex:'3',modal:null,loading:true, activeIndex:'3',tabindex:'3',modal:null,
active_header:'./cooperate.html',modalData:[], active_header:'./../cooperate/index.html',modalData:[],
menus:[ menus:[
{name:'正常',value:'1',icon:'el-icon-upload2'}, {name:'正常',value:'1',icon:'el-icon-upload2'},
{name:'停用',value:'2',icon:'el-icon-sort'}, {name:'停用',value:'2',icon:'el-icon-sort'},
...@@ -128,9 +131,6 @@ ...@@ -128,9 +131,6 @@
} }
}, },
created(){ created(){
setTimeout(()=>{
this.loading = false;
},1000)
}, },
methods:{ methods:{
handleSelect(key, keyPath) { handleSelect(key, keyPath) {
...@@ -148,14 +148,16 @@ ...@@ -148,14 +148,16 @@
}, },
checkData(row,event, column){ checkData(row,event, column){
// debugger
this.modalData = row; this.modalData = row;
this.modal = vDetail; this.modal = vDetail;
console.log(this.modal)
}, },
closeChild(){ closeChild(){
this.modal = null this.modal = null
}, },
addOperate(){
this.modalData = {type:'creat'};
this.modal = addOperate;
}
} }
}) })
......
var addOperate={
template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='cooperate-detail add-operate animated slideInRight' @close="handleClose" :lock-scroll="false" :show-close='true'>
<div class="dialog-content">
<div class="edict-icon">
<el-button type="primary" size="mini" @click="saveFun('form1')">保存</el-button>
</div>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" >
<el-form ref="form1" :model="form" :rules="rules" label-width="130px">
<el-form-item prop="title" label="名称:">
<el-input v-model="form.title" ></el-input>
</el-form-item>
<el-form-item prop="name" label="负责人姓名:">
<el-input v-model="form.name" ></el-input>
</el-form-item>
<el-form-item prop="phone" label="负责人手机:">
<el-input v-model="form.phone" ></el-input>
</el-form-item>
<el-form-item label="地址:">
<el-input v-model="form.address" type='textarea' ></el-input>
</el-form-item>
<el-form-item label="结算方式:">
<el-select v-model="form.type" >
<el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="结算渠道:">
<el-input v-model="form.channel" ></el-input>
</el-form-item>
<el-form-item label="收款人:">
<el-input v-model="form.collection" ></el-input>
</el-form-item>
<el-form-item label="收款账号:">
<el-input v-model="form.collection_name" ></el-input>
</el-form-item>
<el-form-item label="认证方式:">
<el-select v-model="form.auth" >
<el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称:">
<el-input v-model="form.company_name" ></el-input>
</el-form-item>
<el-form-item label="证件号:">
<el-input v-model="form.number" ></el-input>
</el-form-item>
<el-form-item label="认证图片:">
<img src="../static/images/man.jpg" alt="" width="50px" height="82px">
<img src="../static/images/man.jpg" alt="" width="50px" height="82px">
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="范围" name="2">
<h2>服务区域</h2>
<div class='cooperate-detail-tab' style="padding:20px;line-height:3">
<span class='tag' v-for='(item,index) in select_address' :key='index'>
{{item.name}}
<i @click="delete_address(index)" class='el-icon-close addoperate-icon'></i>
</span>
<el-row class='add-input'>
<el-col :span="3">
<div class="text_right"> 增加范围:</div>
</el-col>
<el-col :span="21">
<el-cascader :options="options" v-model="check_address" @change="change_address()"></el-cascader>
</el-col>
</el-row>
</div>
<h2>服务品类</h2>
<div class='cooperate-detail-tab' style="padding:20px;line-height:3;border:none">
<span class="tag" v-for="(item,index) in select_names" :key="index">
{{item.name}}
<i @click="delete_name(index)" class='el-icon-close addoperate-icon'></i>
</span>
<el-row class='add-input'>
<el-col :span="3">
<div class="text_right"> 增加品类:</div>
</el-col>
<el-col :span="21">
<el-select v-model="check_name" @change="change_name()" >
<el-option :label="item.name" :value="item.name" :key="item.index" v-for="(item,index) in name_options" ></el-option>
</el-select>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog> `,
props: {
modalData: Object
},
data(){
return{
detail:{ },
dialog:{
show:true,title:'',tab:'1',
},
form:{
title:'',
name:'',
phone:'',
address:'',
type:'',
channel:'',
collection:'',
collection_name:'',
auth:'',
company_name:'',
number:'',
},
rules:{
title:[{required: true, message: '请输入名称', trigger: 'blur' }],
phone:[{required: true, message: '请输入电话号码', trigger: 'blur' }],
name:[{required: true, message: '请输入姓名', trigger: 'blur' }],
},
options1:[],
options2:[],
select_names:[ {name:'空调'} ],check_name:'',name_options:[{name:'空调'},{name:'洗衣机'}],
select_address:[{name:'深圳'}],check_address:[],address_options:[{name:'深圳'},{name:'北京'},{name:'上海'}],
options: [
{
value: '安徽省',
label: '安徽省',
children: [
{
value: '合肥市',
label: '合肥市',
children: [
{
value: '政务区',
label: '政务区'
},
]
}
]
},
],
}
},
created(){
if(this.modalData.type=='creat'){
this.dialog.title = '新增授权点';
this.isCreat = true;
}else{
this.dialog.title = '编辑授权点';
this.isCreat = false;
this.getinfo()
}
},
methods:{
getinfo(){
},
handleClose() {
this.$emit('close')
},
handleClick(){
},
saveFun(formName){
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)
}
}
}
...@@ -26,7 +26,7 @@ var vDetail={ ...@@ -26,7 +26,7 @@ var vDetail={
<p>认证方式: <span>企业认证</span></p> <p>认证方式: <span>企业认证</span></p>
<p>认证信息:<span>深圳市精诚家电维修有限公司 0102198902010215</span></p> <p>认证信息:<span>深圳市精诚家电维修有限公司 0102198902010215</span></p>
<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="60px" height="60px" style="vertical-align: text-top;">
</p> </p>
</div> </div>
</el-tab-pane> </el-tab-pane>
......
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <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/main.css">
<link rel="stylesheet" href="./static/css/animate.css"> <link rel="stylesheet" href="./../static/css/animate.css">
</head> </head>
<body> <body>
<div id="app"> <div id="app">
...@@ -17,14 +17,14 @@ ...@@ -17,14 +17,14 @@
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 --> <!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script> <script src="./../static/js/common.js"></script>
<script> <script>
new Vue({ new Vue({
el: '#app', el: '#app',
components: {commonHeader}, components: {commonHeader},
data: function() { data: function() {
return { return {
activeIndex:'1',tabindex:'1',active_header:'./main.html', activeIndex:'1',tabindex:'1',active_header:'./../main/index.html',
} }
}, },
methods:{ methods:{
......
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <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/main.css">
<link rel="stylesheet" href="./static/css/animate.css"> <link rel="stylesheet" href="./../static/css/animate.css">
</head> </head>
<body> <body>
<div id="app"> <div id="app">
...@@ -17,14 +17,14 @@ ...@@ -17,14 +17,14 @@
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 --> <!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script> <script src="./../static/js/common.js"></script>
<script> <script>
new Vue({ new Vue({
el: '#app', el: '#app',
components: {commonHeader}, components: {commonHeader},
data: function() { data: function() {
return { return {
activeIndex:'1',tabindex:'1',active_header:'./message.html', activeIndex:'1',tabindex:'1',active_header:'./../message/index.html',
} }
}, },
methods:{ methods:{
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <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/main.css">
<link rel="stylesheet" href="./static/css/order.css"> <link rel="stylesheet" href="./order.css">
<link rel="stylesheet" href="./static/css/animate.css"> <link rel="stylesheet" href="./../static/css/animate.css">
</head> </head>
<body> <body>
<div id="app"> <div id="app">
...@@ -32,10 +32,10 @@ ...@@ -32,10 +32,10 @@
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 --> <!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script> <script src="./../static/js/common.js"></script>
<script src="./static/js/order.js"></script> <script src="./js/order.js"></script>
<script src="./static/js/order/addOne.js"></script> <script src="./js/addOne.js"></script>
<script src="./static/js/order/addAll.js"></script> <script src="./js/addAll.js"></script>
<script> <script>
new Vue({ new Vue({
el: '#app', el: '#app',
......
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <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/main.css">
<link rel="stylesheet" href="./static/css/order.css"> <link rel="stylesheet" href="./order.css">
<link rel="stylesheet" href="./static/css/animate.css"> <link rel="stylesheet" href="./../static/css/animate.css">
</head> </head>
<body> <body>
<div id="app"> <div id="app">
...@@ -99,15 +99,15 @@ ...@@ -99,15 +99,15 @@
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 --> <!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script> <script src="./../static/js/common.js"></script>
<script src="./static/js/order.js"></script> <script src="./js/orderDetail.js"></script>
<script> <script>
new Vue({ new Vue({
el: '#app', el: '#app',
components: {commonHeader,Detail}, components: {commonHeader,Detail},
data: function() { data: function() {
return { return {
activeIndex:'9',tabindex:'9',modal:null,active_header:'./order.html', activeIndex:'9',tabindex:'9',modal:null,active_header:'./../order/index.html',
menus:[ menus:[
{name:'待派单',value:'1',icon:'el-icon-upload2'}, {name:'待派单',value:'1',icon:'el-icon-upload2'},
{name:'未分配',value:'2',icon:'el-icon-sort'}, {name:'未分配',value:'2',icon:'el-icon-sort'},
...@@ -146,7 +146,8 @@ ...@@ -146,7 +146,8 @@
}, },
checkDetail(item){ checkDetail(item){
this.modalData = item; console.log(item)
this.modalData = {status:item.id,statusText:item.statusText};
this.modal = Detail; this.modal = Detail;
}, },
closeChild(){ closeChild(){
......
...@@ -109,7 +109,7 @@ var addOne={ ...@@ -109,7 +109,7 @@ var addOne={
}); });
}, },
reback(){ reback(){
window.location.href = './order.html' window.location.href = './index.html'
} }
}, },
} }
...@@ -35,12 +35,12 @@ var Detail={ ...@@ -35,12 +35,12 @@ var Detail={
<div class="right-response-text" >{{item.value}}</div> <div class="right-response-text" >{{item.value}}</div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<img src="./static/images/man.jpg" alt="" width="42px" height="42px"> <img src="../static/images/man.jpg" alt="" width="42px" height="42px">
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if='item.type==0' class="left-response"> <el-row v-if='item.type==0' class="left-response">
<el-col :span="2"> <el-col :span="2">
<img src="./static/images/women.jpg" alt="" width="42px" height="42px"> <img src="../static/images/women.jpg" alt="" width="42px" height="42px">
</el-col> </el-col>
<el-col :span="22"> <el-col :span="22">
<div class="left-response-text" >{{item.value}}</div> <div class="left-response-text" >{{item.value}}</div>
...@@ -110,9 +110,24 @@ var Detail={ ...@@ -110,9 +110,24 @@ var Detail={
完工图片: <span>(6张)</span> 完工图片: <span>(6张)</span>
</p> </p>
<div class="order-carousel"> <div class="order-carousel">
<el-carousel :interval="4000" type="card" height="100px" :autoplay='false' arrow="always"> <el-carousel :interval="4000" type="card" height="120px" :autoplay='false' arrow="always">
<el-carousel-item v-for="item in 6" :key="item"> <el-carousel-item >
<h3>{{ item }}</h3> <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-item>
</el-carousel> </el-carousel>
</div> </div>
...@@ -176,12 +191,18 @@ var Detail={ ...@@ -176,12 +191,18 @@ var Detail={
message:{ }, message:{ },
dialog:{ dialog:{
show:true, show:true,
title:'工单(GLDQ0019211237)--'+this.modalData.statusText, title:'',
tab:'1', tab:'1',
status:''
}, },
} }
}, },
created(){
console.log(this.modalData)
this.dialog.title = '工单(GLDQ0019211237)--'+this.modalData.statusText ;
this.dialog.status = this.modalData.status;
},
methods:{ methods:{
handleClose() { handleClose() {
this.$emit('close') this.$emit('close')
......
...@@ -32,14 +32,10 @@ ...@@ -32,14 +32,10 @@
background: #50B5FC background: #50B5FC
} }
.order-right{ .order-right{
/* float: right;
width: 1180px;*/
float: right; float: right;
width: 1180px; width: 1180px;
height: 100%; height: 100%;
position: relative; position: relative;
} }
.all-order .all-order-serch{ .all-order .all-order-serch{
background: #ffffff; background: #ffffff;
...@@ -318,7 +314,7 @@ ...@@ -318,7 +314,7 @@
background-color: #d3dce6; background-color: #d3dce6;
} }
.order-carousel{ .order-carousel{
width: 600px; width: 260px;
margin: auto; margin: auto;
} }
/*******************************范围start******************************/ /*******************************范围start******************************/
......
This diff is collapsed.
var Detail={
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="../../../assets/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="../../../assets/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">
<p>
基 本: <span>安装--新机安装*1¥200.00</span>
</p>
<p>
其 他:
<el-input class="seach-input" placeholder='其他项目'></el-input>
</p>
<p>
金 额:
<el-input class="seach-input" placeholder='其他项目'></el-input>
</p>
</div>
<div class='order-detail-tab' style="line-height:2.5">
<p>
备 注:
<el-input class="seach-area" placeholder='打回必填'></el-input>
<el-button size='mini'>确权</el-button>
<el-button size='mini'>返回</el-button>
</p>
</div>
<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="100px" :autoplay='false' arrow="always">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<p>
完工备注注:
<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span>
</p>
</div>
</el-tab-pane>
<el-tab-pane label="范围" name="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'>
<i class='el-icon-location'></i>广东-深圳
</span>
</div>
<h2>服务品类</h2>
<div class='order-detail-tab' style="padding:20px;line-height:3;border:none">
<span class='tag' v-for='(item,index) in 2' :key='index'>
空调
</span>
</div>
</el-tab-pane>
<el-tab-pane label="授权码" name="5">
<h2>授权信息</h2>
<div class='order-detail-tab' style="border:none">
<p>授权ID:<span>31E8792IWE73</span></p>
<p>授权密钥:<span>31E8792IWE7331E8792IWE7331E8792IWE73</span></p>
<p>接单方式一:<span>API对接</span></p>
<p>接单方式二:<span>小程序</span></p>
</div>
<div class="wechat"></div>
<div class="wechatTip">扫一扫,登录小程序</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:'工单(GLDQ0019211237)--'+this.modalData.statusText,
tab:'1',
},
}
},
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************/
}
}
set.html
\ No newline at end of file
...@@ -5,11 +5,12 @@ ...@@ -5,11 +5,12 @@
<!-- 引入样式 --> <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <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/main.css">
<link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="./set.css"> <link rel="stylesheet" href="./set.css">
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<common-header></common-header> <common-header :modal-data="active_header"></common-header>
<div class="settle"> <div class="settle">
<div class='settle-left'> <div class='settle-left'>
<div class="settle-title">系统设置</div> <div class="settle-title">系统设置</div>
...@@ -37,14 +38,17 @@ ...@@ -37,14 +38,17 @@
<script src="./dialog/product/AddType.js"></script> <script src="./dialog/product/AddType.js"></script>
<script src="./dialog/product/AddCate.js"></script> <script src="./dialog/product/AddCate.js"></script>
<script src="./dialog/product/AddModel.js"></script> <script src="./dialog/product/AddModel.js"></script>
<script src="./dialog/server/AddServer.js"></script>
<script src="./dialog/server/EdictName.js"></script>
<script src="./dialog/protect/Edict.js"></script>
<script> <script>
new Vue({ new Vue({
el: '#app', el: '#app',
components: {commonHeader,Product,Server,Protect}, components: {commonHeader,Product,Server,Protect,AddServer,EdictName,EdictProtect},
data(){ data(){
return{ return{
activeIndex:'1',tabindex:'1',modal:Product, activeIndex:'1',tabindex:'1',modal:Product,active_header:'./../set/index.html',
menus:[ menus:[
{name:'产品维护',value:'1',icon:'el-icon-upload2'}, {name:'产品维护',value:'1',icon:'el-icon-upload2'},
{name:'服务维护',value:'2',icon:'el-icon-upload2'}, {name:'服务维护',value:'2',icon:'el-icon-upload2'},
......
...@@ -62,7 +62,7 @@ var Product={ ...@@ -62,7 +62,7 @@ var Product={
</tr> </tr>
</table> </table>
</div> </div>
<component :is="modal" @close="closeChild" :modal-Data="modalData"></component> <component :is="modal" @close="closeChild" :modal-data="modalData"></component>
</div>`, </div>`,
data(){ data(){
return{ return{
...@@ -187,6 +187,7 @@ var Product={ ...@@ -187,6 +187,7 @@ var Product={
this.modal = AddProduct; this.modal = AddProduct;
}, },
AddCardfun(){ AddCardfun(){
console.log(444)
this.modalData = {type:'creat'}; this.modalData = {type:'creat'};
this.modal = AddCard; this.modal = AddCard;
}, },
......
...@@ -10,7 +10,7 @@ var Protect ={ ...@@ -10,7 +10,7 @@ var Protect ={
</el-select> </el-select>
<!-- <el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入项目名,合作商名查询'></el-input> --> <!-- <el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入项目名,合作商名查询'></el-input> -->
<el-button type='primary' class='button-color'>搜索</el-button> <el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' class='button-color addbutton' @click=''>新建</el-button> <el-button type='primary' class='button-color addbutton' @click="addProtect()">新建</el-button>
</div> </div>
<div class="settle-content"> <div class="settle-content">
<table class="table-header"> <table class="table-header">
...@@ -24,7 +24,8 @@ var Protect ={ ...@@ -24,7 +24,8 @@ var Protect ={
<table > <table >
<tr> <tr>
<td style="width:20%"> <div class="text_center">服务分类</div></td> <td style="width:20%"> <div class="text_center">服务分类</div></td>
<td style="width:70%" class='third-table-center'><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> <td style="width:10%"><div class="text_center">操作</div></td>
</tr> </tr>
</table> </table>
...@@ -48,14 +49,15 @@ var Protect ={ ...@@ -48,14 +49,15 @@ var Protect ={
<tr v-for='(child,key) in items.type' :key='key'> <tr v-for='(child,key) in items.type' :key='key'>
<td style="width:20%"> <td style="width:20%">
<div class="text_center">{{child.name}}</div> <div class="text_center">{{child.name}}</div>
</td> </td>
<td style="width:70%" class='third-table-center'> <td style="width:0%" class='third-table-center'>
<div class="text_center">{{child.cate}}</div> <div class="text_center">{{child.cate}}</div>
</td>
<td style="width:30%" class='third-table-center'>
<div class="text_center">¥{{child.price}}</div>
</td> </td>
<td style="width:10%"> <td style="width:10%">
<div class="text_center"><el-button type='text'>操作</el-button></div> <div class="text_center"><el-button type='text' @click="edictProtect()">操作</el-button></div>
</td> </td>
</tr> </tr>
...@@ -69,7 +71,7 @@ var Protect ={ ...@@ -69,7 +71,7 @@ var Protect ={
</tr> </tr>
</table> </table>
</div> </div>
<component :is="modal" @close="closeChild" :modal-Data="modalData"></component> <component :is="modal" @close="closeChild" :modal-data="modalData"></component>
</div>`, </div>`,
data(){ data(){
return{ return{
...@@ -197,7 +199,14 @@ var Protect ={ ...@@ -197,7 +199,14 @@ var Protect ={
}else{ }else{
this.$message({ message: '请选择数据', type: 'warning' }); this.$message({ message: '请选择数据', type: 'warning' });
} }
},
addProtect(){
this.modalData = {type:'creat'};
this.modal = EdictProtect;
},
edictProtect(){
this.modalData = {type:'edict'};
this.modal = EdictProtect;
} }
} }
} }
......
...@@ -23,9 +23,8 @@ var Server={ ...@@ -23,9 +23,8 @@ var Server={
<td style="width:85%; "> <td style="width:85%; ">
<table > <table >
<tr> <tr>
<td style="width:20%"> <div class="text_center">服务分类</div></td> <td style="width:30%"> <div class="text_center">服务分类</div></td>
<td style="width:70%" class='third-table-center'><div class="text_center">服务措施</div></td> <td style="width:70%" class='third-table-center'><div class="text_center">服务措施</div></td>
<td style="width:10%"><div class="text_center">操作</div></td>
</tr> </tr>
</table> </table>
</td> </td>
...@@ -38,7 +37,7 @@ var Server={ ...@@ -38,7 +37,7 @@ var Server={
<tr v-for='(item,index) in tableData' :key='index'> <tr v-for='(item,index) in tableData' :key='index'>
<td style="width:15%"> <td style="width:15%">
<div class="text_center"> <div class="text_center">
<el-button type='text' style='color:#333'>{{item.name}}</el-button> <el-button type='text' style='color:#333' @click='EdictName()'>{{item.name}}</el-button>
</div> </div>
</td> </td>
<td style="width:85%;"> <td style="width:85%;">
...@@ -67,7 +66,7 @@ var Server={ ...@@ -67,7 +66,7 @@ var Server={
</tr> </tr>
</table> </table>
</div> </div>
<component :is="modal" @close="closeChild" :modalData="modalData"></component> <component :is="modal" @close="closeChild" :modal-data="modalData"></component>
</div>`, </div>`,
data(){ data(){
return{ return{
...@@ -199,6 +198,11 @@ var Server={ ...@@ -199,6 +198,11 @@ var Server={
AddServerFun(){ AddServerFun(){
this.modalData = {type:'creat',name:'空调'}; this.modalData = {type:'creat',name:'空调'};
this.modal = AddServer; this.modal = AddServer;
},
EdictName(){
this.modalData = {type:'edict',name:''};
this.modal = EdictName;
} }
} }
} }
......
...@@ -36,7 +36,7 @@ var AddProduct={ ...@@ -36,7 +36,7 @@ var AddProduct={
</template> </template>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<component :is="modal" @close="closeChild" :modal-Data="innerData"></component> <component :is="modal" @close="closeChild" :modal-data="innerData"></component>
</el-dialog>`, </el-dialog>`,
props: { props: {
//父组件调用时传进来的参数 //父组件调用时传进来的参数
......
...@@ -49,7 +49,6 @@ var AddType={ ...@@ -49,7 +49,6 @@ var AddType={
methods:{ methods:{
getinfo(){ getinfo(){
this.form.name = '空调'; this.form.name = '空调';
this.form.img = require('../../../../assets/images/man.jpg');
}, },
handleClose() { handleClose() {
this.$emit('close') this.$emit('close')
......
var EdictProtect={
template: `
<el-dialog width="420px" :title="dialog.title" custom-class='addcate add-protect animated slideInRight' :visible.sync="dialog.show" @close="handleClose" append-to-body>
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="品类名称:">
<el-select v-model="form.name" placeholder="选择品类">
<el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="服务类型:">
<el-select v-model="form.type" placeholder="选择类型">
<el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="服务分类:">
<el-select v-model="form.area" placeholder="选择分类">
<el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="产品规格:">
<el-select v-model="form.cate" placeholder="选择规格">
<el-option :label="item.label" :value="item.value" :key="item.label" v-for="(item,index) in options4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="保内结算:">
<el-input v-model="form.price" placeholder='请输入金额'></el-input>
</el-form-item>
</el-form>
<div class='button-box'>
<el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' v-if='!isCreat'>删除</el-button>
</div>
</el-dialog> `,
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
uploadApi:'',isCreat:true,
dialog:{
show:true,title:'产品品类',type:1
},
form:{
name:'',
type:'',
area:'',
cate:'',
price:''
},
options1:[],
options2:[],
options3:[],
options4:[],
}
},
created(){
if(this.modalData.type=='creat'){
this.dialog.title = '新增';
this.isCreat = true;
}else{
this.dialog.title = '编辑';
this.isCreat = false;
this.getinfo()
}
},
methods:{
getinfo(){
},
handleClose() {
this.$emit('close')
},
}
}
var AddServer={ var AddServer={
template: ` template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'> <el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail add-server animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<h2 style="margin-bottom:15px">品类名称:{{modalData.name}}</h2> <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" @tab-click="handleClick">
<el-tab-pane label="服务类型" name="1"> <el-tab-pane label="服务类型" name="1">
......
...@@ -10,8 +10,7 @@ var EdictName={ ...@@ -10,8 +10,7 @@ var EdictName={
<el-button type='primary' class='primary_btcolor' >保存</el-button> <el-button type='primary' class='primary_btcolor' >保存</el-button>
<el-button type='danger' >删除</el-button> <el-button type='danger' >删除</el-button>
</div> </div>
</el-dialog> ` </el-dialog> `,
export default{
props: { props: {
//父组件调用时传进来的参数 //父组件调用时传进来的参数
modalData: Object modalData: Object
...@@ -23,7 +22,7 @@ var EdictName={ ...@@ -23,7 +22,7 @@ var EdictName={
show:true,title:'',type:1 show:true,title:'',type:1
}, },
form:{ form:{
name:'大修', name:'空调',
cate:'' cate:''
} }
} }
...@@ -39,4 +38,4 @@ var EdictName={ ...@@ -39,4 +38,4 @@ var EdictName={
this.$emit('close') this.$emit('close')
}, },
} }
} }
...@@ -24,6 +24,9 @@ ...@@ -24,6 +24,9 @@
border-left: 1px solid #ececec; border-left: 1px solid #ececec;
border-right: 1px solid #ececec; border-right: 1px solid #ececec;
} }
.settle-content .third-table .third-table-center:nth-child(2){
border-right: none;
}
.settle-content .table-header{ .settle-content .table-header{
background: #EEF1FB; background: #EEF1FB;
...@@ -31,19 +34,19 @@ ...@@ -31,19 +34,19 @@
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
} }
.settle-right{ .settle-right{
float: right; float: right;
width: 1180px; width: 1180px;
height: 100%; height: 100%;
position: relative; position: relative;
background: #ffffff; background: #ffffff;
} }
.settle-right .all-settle-serch{ .settle-right .all-settle-serch{
background: #ffffff; background: #ffffff;
padding: 10px; padding: 10px;
position: relative; position: relative;
} }
.all-settle-serch:after{ .all-settle-serch:after{
position: absolute; position: absolute;
content: ''; content: '';
left: 20px; left: 20px;
...@@ -51,35 +54,35 @@ ...@@ -51,35 +54,35 @@
bottom: 0; bottom: 0;
height:1px; height:1px;
background: #ececec; background: #ececec;
} }
.settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{ .settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{
width: 120px !important; width: 120px !important;
background: #F1F3F9; background: #F1F3F9;
border: none; border: none;
} }
.settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input { .settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input {
width: 298px; width: 298px;
} }
.button-color{ .button-color{
background: #5874D8; background: #5874D8;
} }
.button-icon{ .button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px; background: rgba(88,116,216,0.1) ; padding: 10px 8px;
border-radius: 4px; border-radius: 4px;
} }
.button-icon i { .button-icon i {
font-size: 22px;color: #5874D8; font-size: 22px;color: #5874D8;
vertical-align:middle; vertical-align:middle;
} }
.addbutton{float: right;} .addbutton{float: right;}
.settle-right .settle-bottom{ .settle-right .settle-bottom{
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
bottom: 15px; bottom: 15px;
} }
.settle-right .settle-content{ .settle-right .settle-content{
position: absolute; position: absolute;
left: 0; left: 0;
right:0; right:0;
...@@ -87,7 +90,7 @@ ...@@ -87,7 +90,7 @@
bottom: 50px; bottom: 50px;
overflow: auto; overflow: auto;
padding: 15px; padding: 15px;
} }
.addcate form{ .addcate form{
width: 300px; width: 300px;
...@@ -189,8 +192,6 @@ ...@@ -189,8 +192,6 @@
height: 120px; height: 120px;
display: block; display: block;
} }
.settle-content table{ .settle-content table{
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
...@@ -212,30 +213,25 @@ ...@@ -212,30 +213,25 @@
.settle-content .third-table td{ .settle-content .third-table td{
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
} }
.settle-content .third-table .third-table-center{
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.settle-content .table-header{ .settle-content .table-header{
background: #EEF1FB; background: #EEF1FB;
text-align: center; text-align: center;
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
} }
.settle-right{ .settle-right{
float: right; float: right;
width: 1180px; width: 1180px;
height: 100%; height: 100%;
position: relative; position: relative;
background: #ffffff; background: #ffffff;
} }
.settle-right .all-settle-serch{ .settle-right .all-settle-serch{
background: #ffffff; background: #ffffff;
padding: 10px; padding: 10px;
position: relative; position: relative;
} }
.all-settle-serch:after{ .all-settle-serch:after{
position: absolute; position: absolute;
content: ''; content: '';
left: 20px; left: 20px;
...@@ -243,35 +239,35 @@ ...@@ -243,35 +239,35 @@
bottom: 0; bottom: 0;
height:1px; height:1px;
background: #ececec; background: #ececec;
} }
.settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{ .settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{
width: 120px !important; width: 120px !important;
background: #F1F3F9; background: #F1F3F9;
border: none; border: none;
} }
.settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input { .settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input {
width: 298px; width: 298px;
} }
.button-color{ .button-color{
background: #5874D8; background: #5874D8;
} }
.button-icon{ .button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px; background: rgba(88,116,216,0.1) ; padding: 10px 8px;
border-radius: 4px; border-radius: 4px;
} }
.button-icon i { .button-icon i {
font-size: 22px;color: #5874D8; font-size: 22px;color: #5874D8;
vertical-align:middle; vertical-align:middle;
} }
.addbutton{float: right;} .addbutton{float: right;}
.settle-right .settle-bottom{ .settle-right .settle-bottom{
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
bottom: 15px; bottom: 15px;
} }
.settle-right .settle-content{ .settle-right .settle-content{
position: absolute; position: absolute;
left: 0; left: 0;
right:0; right:0;
...@@ -279,9 +275,9 @@ ...@@ -279,9 +275,9 @@
bottom: 50px; bottom: 50px;
overflow: auto; overflow: auto;
padding: 15px; padding: 15px;
} }
.settle-content table{ .settle-content table{
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0px 0px; border-spacing: 0px 0px;
...@@ -302,10 +298,6 @@ ...@@ -302,10 +298,6 @@
.settle-content .third-table td{ .settle-content .third-table td{
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
} }
.settle-content .third-table .third-table-center{
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.settle-content .table-header{ .settle-content .table-header{
background: #EEF1FB; background: #EEF1FB;
...@@ -313,19 +305,19 @@ ...@@ -313,19 +305,19 @@
height: 38px; height: 38px;
line-height: 38px; line-height: 38px;
} }
.settle-right{ .settle-right{
float: right; float: right;
width: 1180px; width: 1180px;
height: 100%; height: 100%;
position: relative; position: relative;
background: #ffffff; background: #ffffff;
} }
.settle-right .all-settle-serch{ .settle-right .all-settle-serch{
background: #ffffff; background: #ffffff;
padding: 10px; padding: 10px;
position: relative; position: relative;
} }
.all-settle-serch:after{ .all-settle-serch:after{
position: absolute; position: absolute;
content: ''; content: '';
left: 20px; left: 20px;
...@@ -333,35 +325,35 @@ ...@@ -333,35 +325,35 @@
bottom: 0; bottom: 0;
height:1px; height:1px;
background: #ececec; background: #ececec;
} }
.settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{ .settle-right .all-settle-serch .seach-select .el-input__inner,.settle-right .all-settle-serch .seach-select .el-input{
width: 120px !important; width: 120px !important;
background: #F1F3F9; background: #F1F3F9;
border: none; border: none;
} }
.settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input { .settle-right .all-settle-serch .seach-input .el-input__inner,.settle-right .all-settle-serch .seach-input {
width: 298px; width: 298px;
} }
.button-color{ .button-color{
background: #5874D8; background: #5874D8;
} }
.button-icon{ .button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px; background: rgba(88,116,216,0.1) ; padding: 10px 8px;
border-radius: 4px; border-radius: 4px;
} }
.button-icon i { .button-icon i {
font-size: 22px;color: #5874D8; font-size: 22px;color: #5874D8;
vertical-align:middle; vertical-align:middle;
} }
.addbutton{float: right;} .addbutton{float: right;}
.settle-right .settle-bottom{ .settle-right .settle-bottom{
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
bottom: 15px; bottom: 15px;
} }
.settle-right .settle-content{ .settle-right .settle-content{
position: absolute; position: absolute;
left: 0; left: 0;
right:0; right:0;
...@@ -369,60 +361,70 @@ ...@@ -369,60 +361,70 @@
bottom: 50px; bottom: 50px;
overflow: auto; overflow: auto;
padding: 15px; padding: 15px;
} }
.order-detail{ .order-detail{
width: 720px; width: 720px;
height: 670px; height: 670px;
} }
.order-detail h2{ .order-detail h2{
padding-left: 20px; padding-left: 20px;
} }
.order-detail .add-input{ .order-detail .add-input{
margin-top: 10px; margin-top: 10px;
} }
.order-detail .add-input i{ .order-detail .add-input i{
color: #81C868; color: #81C868;
font-size: 30px; font-size: 30px;
vertical-align: middle; vertical-align: middle;
margin-left: 10px; margin-left: 10px;
} }
.order-detail .el-tabs--card>.el-tabs__header{ .order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px; padding: 0 20px;
} }
.order-detail .order-detail-tab{ .order-detail .order-detail-tab{
/*margin-top: 5px;*/ /*margin-top: 5px;*/
line-height: 2; line-height: 2;
/*border-bottom: 1px solid #ececec;*/ /*border-bottom: 1px solid #ececec;*/
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 20px; padding-left: 20px;
} }
.order-detail .el-radio__input{ .order-detail .el-radio__input{
display: none; display: none;
} }
.order-detail .el-radio{ .order-detail .el-radio{
/*margin-right: 0;*/
/*background: #F1F3F8;*/
padding: 7px 15px 9px 3px; padding: 7px 15px 9px 3px;
border-radius: 3px; border-radius: 3px;
margin-right: 20px; margin-right: 20px;
color: #999999 !important; color: #999999 !important;
height: 30px; height: 30px;
} }
/*******************************范围start******************************/ /*******************************范围start******************************/
.order-detail-tab .tag{ .order-detail-tab .tag{
/*background: #F1F3F8;*/
padding: 5px 24px; padding: 5px 24px;
border-radius: 3px; border-radius: 3px;
margin-right: 20px; margin-right: 20px;
color:#999999 !important; color:#999999 !important;
border:1px solid #ececec; border:1px solid #ececec;
} }
.order-detail-tab .tag i{ .order-detail-tab .tag i{
color: #3B4B84; color: #3B4B84;
font-size: 14px; font-size: 14px;
} }
.add-server .el-dialog__body{
padding:15px 0 !important;
}
.add-protect form{
width: 480px;
}
.add-protect form{
width: 320px;
margin-left: 20px;
}
\ No newline at end of file
...@@ -3,13 +3,14 @@ ...@@ -3,13 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <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/main.css">
<link rel="stylesheet" href="./static/css/settlement.css"> <link rel="stylesheet" href="./../static/css/animate.css">
<link rel="stylesheet" href="./settlement.css">
</head> </head>
<body> <body>
<div id="app" > <div id="app" >
<common-header :modal-data="active_header"></common-header> <common-header :modal-data="active_header"></common-header>
<div class="content" v-loading='loading' v-if='!loading'> <div class="content" >
<div class="settle"> <div class="settle">
<div class='settle-left'> <div class='settle-left'>
<div class="settle-title">结算中心</div> <div class="settle-title">结算中心</div>
...@@ -94,22 +95,22 @@ ...@@ -94,22 +95,22 @@
</div> </div>
</body> </body>
<!-- 先引入 Vue --> <!-- 先引入 Vue -->
<script src="./static/js/vue.js"></script> <script src="./../static/js/vue.js"></script>
<!-- 引入组件库 --> <!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script> <script src="./../static/js/common.js"></script>
<script src="./static/js/settlement/pay.js"></script> <script src="./js/pay.js"></script>
<script src="./static/js/settlement/payDetail.js"></script> <script src="./js/payDetail.js"></script>
<script src="./static/js/settlement/settle.js"></script> <script src="./js/settle.js"></script>
<script src="./static/js/settlement/settleDetail.js"></script> <script src="./js/settleDetail.js"></script>
<script> <script>
new Vue({ new Vue({
el: '#app', el: '#app',
components: {commonHeader,vPay,payDetail,vSettle,settleDetail}, components: {commonHeader,vPay,payDetail,vSettle,settleDetail},
data: function() { data: function() {
return { return {
activeIndex:'1',tabindex:'1',modal:null,loading:true, activeIndex:'1',tabindex:'1',modal:null,
active_header:'./settlement.html',modalData:[], active_header:'./../settlement/index.html',modalData:[],
menus:[ menus:[
{name:'待结算',value:'1',icon:'el-icon-upload2'}, {name:'待结算',value:'1',icon:'el-icon-upload2'},
{name:'全部结算单',value:'2',icon:'el-icon-sort'}, {name:'全部结算单',value:'2',icon:'el-icon-sort'},
...@@ -160,9 +161,6 @@ ...@@ -160,9 +161,6 @@
} }
}, },
created(){ created(){
setTimeout(()=>{
this.loading = false;
},300)
}, },
methods:{ methods:{
handleSelect(key, keyPath) { handleSelect(key, keyPath) {
......
...@@ -178,7 +178,6 @@ ...@@ -178,7 +178,6 @@
} }
.settle-dialog{ .settle-dialog{
width: 420px; width: 420px;
height: 260px;
} }
.el-dialog__wrapper{ .el-dialog__wrapper{
overflow: hidden !important; overflow: hidden !important;
...@@ -203,83 +202,83 @@ ...@@ -203,83 +202,83 @@
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
} }
/********************详情start*******************/ /********************详情start*******************/
.order-detail{ .order-detail{
width: 720px; width: 720px;
height: 670px; height: 670px;
} }
.dialog-content{ .dialog-content{
position: relative; position: relative;
} }
.dialog-content .edict-icon{ .dialog-content .edict-icon{
position: absolute;right: 20px; position: absolute;right: 20px;
top:0;z-index: 3000; top:0;z-index: 3000;
} }
.dialog-content .edict-icon i{ .dialog-content .edict-icon i{
font-size: 24px; font-size: 24px;
color: #5874D8; color: #5874D8;
cursor: pointer; cursor: pointer;
} }
.dialog-content .edict-icon i:nth-child(1){ .dialog-content .edict-icon i:nth-child(1){
margin-right: 15px; margin-right: 15px;
} }
.el-dialog__wrapper{ .el-dialog__wrapper{
overflow: hidden !important; overflow: hidden !important;
} }
.order-detail h2{ .order-detail h2{
padding-left: 20px; padding-left: 20px;
} }
.order-detail .el-tabs--card>.el-tabs__header{ .order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px; padding: 0 20px;
} }
.order-detail .el-dialog__body{ .order-detail .el-dialog__body{
padding:30px 0; padding:30px 0;
} }
.order-detail .el-dialog__header{ .order-detail .el-dialog__header{
background: #6C8BF8; background: #6C8BF8;
} }
.order-detail .el-dialog__header .el-dialog__title,.order-detail .el-dialog__header .el-dialog__headerbtn i{ .order-detail .el-dialog__header .el-dialog__title,.order-detail .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff; color: #ffffff;
} }
.order-detail .order-detail-tab{ .order-detail .order-detail-tab{
margin-top: 5px; margin-top: 5px;
line-height: 2; line-height: 2;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 20px; padding-left: 20px;
} }
.order-detail .order-detail-tab p{ .order-detail .order-detail-tab p{
color: #999; color: #999;
font-size: 12px; font-size: 12px;
} }
.order-detail .order-detail-tab span{ .order-detail .order-detail-tab span{
color: #333; color: #333;
font-size: 12px; font-size: 12px;
} }
.order-detail .seach-input .el-input__inner,.order-detail .seach-input { .order-detail .seach-input .el-input__inner,.order-detail .seach-input {
width: 200px; width: 200px;
height: 25px; height: 25px;
} }
/************************确权start******************************/ /************************确权start******************************/
.el-carousel__item h3 { .el-carousel__item h3 {
color: #475669; color: #475669;
font-size: 14px; font-size: 14px;
opacity: 0.75; opacity: 0.75;
line-height: 100px; line-height: 100px;
margin: 0; margin: 0;
} }
.el-carousel__item:nth-child(2n) { .el-carousel__item:nth-child(2n) {
background-color: #99a9bf; background-color: #99a9bf;
} }
.el-carousel__item:nth-child(2n+1) { .el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6; background-color: #d3dce6;
} }
.order-carousel{ .order-carousel{
width: 600px; width: 600px;
margin: auto; margin: auto;
} }
\ No newline at end of file \ No newline at end of file
...@@ -29,6 +29,9 @@ button,.el-button{ ...@@ -29,6 +29,9 @@ button,.el-button{
.text_center{ .text_center{
text-align: center; text-align: center;
} }
.text_right{
text-align: right;
}
.primary_btcolor{ .primary_btcolor{
background: #5874D8; background: #5874D8;
border: #5874D8; border: #5874D8;
......
...@@ -2,7 +2,7 @@ var commonHeader={ ...@@ -2,7 +2,7 @@ var commonHeader={
template: `<div class="header"> template: `<div class="header">
<div class="header-content"> <div class="header-content">
<div class="header-logo"> <div class="header-logo">
<img src="./static/images/dog.jpeg" alt="" width="42px" height="42px"> <img src="./../static/images/dog.jpeg" alt="" width="42px" height="42px">
<p class="header-title">Hi!隔壁老王</p> <p class="header-title">Hi!隔壁老王</p>
</div> </div>
<div class="header-side"> <div class="header-side">
...@@ -19,12 +19,12 @@ var commonHeader={ ...@@ -19,12 +19,12 @@ var commonHeader={
return{ return{
onRoutes:'' , onRoutes:'' ,
headmenus:[ headmenus:[
{name:'首页',value:'./main.html',icon:'el-icon-menu'}, {name:'首页',value:'./../main/index.html',icon:'el-icon-menu'},
{name:'工单',value:'./order.html',icon:'el-icon-tickets'}, {name:'工单',value:'./../order/index.html',icon:'el-icon-tickets'},
{name:'结算',value:'./settlement.html',icon:'el-icon-printer'}, {name:'结算',value:'./../settlement/index.html',icon:'el-icon-printer'},
{name:'合作',value:'./cooperate.html',icon:'el-icon-refresh'}, {name:'合作',value:'./../cooperate/index.html',icon:'el-icon-refresh'},
{name:'消息',value:'./message.html',icon:'el-icon-service'}, {name:'消息',value:'./../message/index.html',icon:'el-icon-service'},
{name:'设置',value:'./set.html',icon:'el-icon-setting'}, {name:'设置',value:'./../set/index.html',icon:'el-icon-setting'},
], ],
} }
}, },
......
<template> <template>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'> <el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail addserver animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<h2 style="margin-bottom:15px">品类名称:{{modalData.name}}</h2> <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" @tab-click="handleClick">
<el-tab-pane label="服务类型" name="1"> <el-tab-pane label="服务类型" name="1">
......
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