@@ -0,0 +1,417 @@ | |||||
<template> | |||||
<div class="box-center"> | |||||
<!-- 头 --> | |||||
<div class="app-top"> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label">合同结束日期:</div> | |||||
<div> | |||||
<el-date-picker | |||||
v-model="value1" | |||||
type="daterange" | |||||
range-separator="至" | |||||
start-placeholder="开始日期" | |||||
end-placeholder="结束日期"> | |||||
</el-date-picker> | |||||
</div> | |||||
<div class="label">服务状态:</div> | |||||
<div> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label">代理商:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div class="label">运营人员:</div> | |||||
<div > | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label" style="color: #ffffff">筛选相关:</div> | |||||
<div> | |||||
<el-button @click="infoadd()" style="background: #2671e2; color: #ffffff" | |||||
>新增</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button style="background: #2671e2; color: #ffffff" | |||||
>筛选</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button>清空筛选条件</el-button> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 表格 --> | |||||
<div class="cen-tab"> | |||||
<el-table | |||||
:data="tableData" | |||||
stripe | |||||
height="400" | |||||
style="width: 100%"> | |||||
<el-table-column | |||||
prop="date" | |||||
label="代理商" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="地址" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="联系人信息" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="运营人员" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="管理员账号" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="添加日期" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="合同开始日期" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="合同结束日期" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="剩余天数" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="服务状态" | |||||
align="center"> | |||||
</el-table-column> | |||||
<!-- scope --> | |||||
<el-table-column label="操作" align="center"> | |||||
<template slot-scope=""> | |||||
<div style="color: #2671E2;" @click="infoeditor()">编辑</div> | |||||
<div style="color: #2671E2;" @click="inforeplace()">更换账号</div> | |||||
<div style="color: #2671E2;" @click="toinifodelete()">删除</div> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<div style="display: flex;justify-content:flex-end;margin-top: 10px;"> | |||||
<el-pagination | |||||
@size-change="handleSizeChange" | |||||
@current-change="handleCurrentChange" | |||||
:current-page="currentPage4" | |||||
:page-sizes="[100, 200, 300, 400]" | |||||
:page-size="100" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="400"> | |||||
</el-pagination> | |||||
</div> | |||||
</div> | |||||
<el-dialog title="新增代理" :visible.sync="dialogVisible" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="代理商名称:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="合同起止日期:" prop="areaName"> | |||||
<el-date-picker | |||||
v-model="value1" | |||||
type="daterange" | |||||
range-separator="至" | |||||
start-placeholder="开始日期" | |||||
end-placeholder="结束日期"> | |||||
</el-date-picker> | |||||
</el-form-item> | |||||
<el-form-item label="联系人:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="联系手机:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="地区:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="详细地址:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="运营人员:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="管理员账号:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="密码:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="add()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<el-dialog title="编辑" :visible.sync="dialogVisible2" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="代理商名称:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="合同起止日期:" prop="areaName"> | |||||
<el-date-picker | |||||
v-model="value1" | |||||
type="daterange" | |||||
range-separator="至" | |||||
start-placeholder="开始日期" | |||||
end-placeholder="结束日期"> | |||||
</el-date-picker> | |||||
</el-form-item> | |||||
<el-form-item label="联系人:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="联系手机:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="地区:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="详细地址:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="运营人员:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible2 = false">取 消</el-button> | |||||
<el-button type="primary" @click="editor()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<el-dialog title="更换账号" :visible.sync="dialogVisible3" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="管理员账号:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="密码:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible3 = false">取 消</el-button> | |||||
<el-button type="primary" @click="replace()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
options: [ | |||||
{ | |||||
value: "1", | |||||
label: "全部", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "服务器内", | |||||
}, | |||||
{ | |||||
value: "3", | |||||
label: "已失效", | |||||
}, | |||||
], | |||||
currentPage4:4, | |||||
value: "", | |||||
input: "", | |||||
tableData: [ | |||||
{ | |||||
date: "2016-05-03", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-02", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-04", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-01", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-08", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-06", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-07", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
], | |||||
dialogVisible:false, | |||||
dialogVisible2:false, | |||||
dialogVisible3:false, | |||||
ruleForm:{ | |||||
areaName:'', | |||||
provinceItem:[], | |||||
}, | |||||
}; | |||||
}, | |||||
mounted() {}, | |||||
methods: { | |||||
//更换 | |||||
inforeplace(){ | |||||
this.dialogVisible3=true | |||||
}, | |||||
//确认更换 | |||||
replace(){ | |||||
this.dialogVisible3=false | |||||
}, | |||||
//编辑 | |||||
infoeditor(){ | |||||
this.dialogVisible2=true | |||||
}, | |||||
//确认编辑 | |||||
editor(){ | |||||
this.dialogVisible2=false | |||||
}, | |||||
//新增 | |||||
infoadd(){ | |||||
this.dialogVisible=true | |||||
}, | |||||
//确认新增 | |||||
add(){ | |||||
this.dialogVisible=false | |||||
}, | |||||
//删除 | |||||
toinifodelete(){ | |||||
this.$confirm('此操作将永久删除, 是否继续?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.$message({ | |||||
type: 'success', | |||||
message: '删除成功!' | |||||
}); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消删除' | |||||
}); | |||||
}); | |||||
}, | |||||
handleSizeChange(val) { | |||||
console.log(`每页 ${val} 条`); | |||||
}, | |||||
handleCurrentChange(val) { | |||||
console.log(`当前页: ${val}`); | |||||
} | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped="scoped" lang="scss" > | |||||
.box-center { | |||||
width: 100%; | |||||
padding: 15px; | |||||
min-width: 1200px; | |||||
padding-bottom: 100px; | |||||
} | |||||
.cen-tab{ | |||||
width: 100%; | |||||
padding: 15px; | |||||
background: #FFFFFF; | |||||
margin-top: 15px; | |||||
} | |||||
.tophove { | |||||
color: #ffffff; | |||||
background: #2671e2; | |||||
} | |||||
.app-top { | |||||
width: 100%; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | |||||
border-radius: 4px; | |||||
padding-top: 15px; | |||||
padding-bottom: 15px; | |||||
.app-titel { | |||||
width: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
.label { | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #32363d; | |||||
line-height: 14px; | |||||
margin-left: 15px; | |||||
} | |||||
.toptimeqhuan { | |||||
height: 30px; | |||||
background: #ffffff; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.toptimeqhuan div { | |||||
padding-left: 20px; | |||||
padding-right: 20px; | |||||
text-align: center; | |||||
line-height: 30px; | |||||
font-size: 14px; | |||||
margin-right: 15px; | |||||
border-radius: 4px; | |||||
border: 1px solid #e0e0e0; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,369 @@ | |||||
<template> | |||||
<div class="box-center"> | |||||
<!-- 头 --> | |||||
<div class="app-top"> | |||||
<div class="app-titel" style="margin-top: 5px"> | |||||
<div class="label">代理商:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div class="label">公司:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div class="label">运营人员:</div> | |||||
<div > | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label" style="color: #ffffff">筛选相关:</div> | |||||
<div> | |||||
<el-button @click="infoadd()" style="background: #2671e2; color: #ffffff" | |||||
>新增</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button style="background: #2671e2; color: #ffffff" | |||||
>筛选</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button>清空筛选条件</el-button> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 表格 --> | |||||
<div class="cen-tab"> | |||||
<el-table | |||||
:data="tableData" | |||||
stripe | |||||
height="400" | |||||
style="width: 100%"> | |||||
<el-table-column | |||||
prop="date" | |||||
label="公司名称" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="代理商" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="运营人员" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="公司地址" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="管理员信息" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="管理员账号" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="服务期楼盘" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<!-- scope --> | |||||
<el-table-column label="操作" align="center"> | |||||
<template slot-scope=""> | |||||
<div style="color: #2671E2;" @click="infoeditor()">编辑</div> | |||||
<div style="color: #2671E2;" @click="inforeplace()">更换账号</div> | |||||
<div style="color: #2671E2;" @click="toinifodelete()">删除</div> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<div style="display: flex;justify-content:flex-end;margin-top: 10px;"> | |||||
<el-pagination | |||||
@size-change="handleSizeChange" | |||||
@current-change="handleCurrentChange" | |||||
:current-page="currentPage4" | |||||
:page-sizes="[100, 200, 300, 400]" | |||||
:page-size="100" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="400"> | |||||
</el-pagination> | |||||
</div> | |||||
</div> | |||||
<el-dialog title="新增代理" :visible.sync="dialogVisible" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="代理商名称:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="公司名称:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="联系人:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="联系手机:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="地区:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="详细地址:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="运营人员:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="管理员账号:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="密码:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="add()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<el-dialog title="编辑" :visible.sync="dialogVisible2" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="代理商:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="公司名称:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="联系人:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="联系手机:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="地区:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="详细地址:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="运营人员:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible2 = false">取 消</el-button> | |||||
<el-button type="primary" @click="editor()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<el-dialog title="更换账号" :visible.sync="dialogVisible3" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="管理员账号:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="密码:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible3 = false">取 消</el-button> | |||||
<el-button type="primary" @click="replace()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
options: [ | |||||
{ | |||||
value: "1", | |||||
label: "全部", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "服务器内", | |||||
}, | |||||
{ | |||||
value: "3", | |||||
label: "已失效", | |||||
}, | |||||
], | |||||
currentPage4:4, | |||||
value: "", | |||||
input: "", | |||||
tableData: [ | |||||
{ | |||||
date: "2016-05-03", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-02", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-04", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-01", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-08", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-06", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-07", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
], | |||||
dialogVisible:false, | |||||
dialogVisible2:false, | |||||
dialogVisible3:false, | |||||
ruleForm:{ | |||||
areaName:'', | |||||
provinceItem:[], | |||||
}, | |||||
}; | |||||
}, | |||||
mounted() {}, | |||||
methods: { | |||||
//更换 | |||||
inforeplace(){ | |||||
this.dialogVisible3=true | |||||
}, | |||||
//确认更换 | |||||
replace(){ | |||||
this.dialogVisible3=false | |||||
}, | |||||
//编辑 | |||||
infoeditor(){ | |||||
this.dialogVisible2=true | |||||
}, | |||||
//确认编辑 | |||||
editor(){ | |||||
this.dialogVisible2=false | |||||
}, | |||||
//新增 | |||||
infoadd(){ | |||||
this.dialogVisible=true | |||||
}, | |||||
//确认新增 | |||||
add(){ | |||||
this.dialogVisible=false | |||||
}, | |||||
//删除 | |||||
toinifodelete(){ | |||||
this.$confirm('此操作将永久删除, 是否继续?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.$message({ | |||||
type: 'success', | |||||
message: '删除成功!' | |||||
}); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消删除' | |||||
}); | |||||
}); | |||||
}, | |||||
handleSizeChange(val) { | |||||
console.log(`每页 ${val} 条`); | |||||
}, | |||||
handleCurrentChange(val) { | |||||
console.log(`当前页: ${val}`); | |||||
} | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped="scoped" lang="scss" > | |||||
.box-center { | |||||
width: 100%; | |||||
padding: 15px; | |||||
min-width: 1200px; | |||||
padding-bottom: 100px; | |||||
} | |||||
.cen-tab{ | |||||
width: 100%; | |||||
padding: 15px; | |||||
background: #FFFFFF; | |||||
margin-top: 15px; | |||||
} | |||||
.tophove { | |||||
color: #ffffff; | |||||
background: #2671e2; | |||||
} | |||||
.app-top { | |||||
width: 100%; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | |||||
border-radius: 4px; | |||||
padding-top: 15px; | |||||
padding-bottom: 15px; | |||||
.app-titel { | |||||
width: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
.label { | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #32363d; | |||||
line-height: 14px; | |||||
margin-left: 15px; | |||||
} | |||||
.toptimeqhuan { | |||||
height: 30px; | |||||
background: #ffffff; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.toptimeqhuan div { | |||||
padding-left: 20px; | |||||
padding-right: 20px; | |||||
text-align: center; | |||||
line-height: 30px; | |||||
font-size: 14px; | |||||
margin-right: 15px; | |||||
border-radius: 4px; | |||||
border: 1px solid #e0e0e0; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -1,4 +1,5 @@ | |||||
<template> | <template> | ||||
<div class="box-center"> | <div class="box-center"> | ||||
<!-- 头 --> | <!-- 头 --> | ||||
<div class="app-top"> | <div class="app-top"> | ||||
@@ -203,7 +204,6 @@ | |||||
<template slot-scope=""> | <template slot-scope=""> | ||||
<div style="color: #2671E2;">详情</div> | <div style="color: #2671E2;">详情</div> | ||||
<div style="color: #2671E2;">转交</div> | <div style="color: #2671E2;">转交</div> | ||||
<div style="color: #2671E2;" @click="toinifodelete()">删除</div> | |||||
</template> | </template> | ||||
</el-table-column> | </el-table-column> | ||||
</el-table> | </el-table> | ||||
@@ -0,0 +1,253 @@ | |||||
<template> | |||||
<div class="box-center"> | |||||
<!-- 头 --> | |||||
<div class="app-top"> | |||||
<div class="app-titel" style="margin-top: 5px"> | |||||
<div class="label">批次号:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button style="background: #2671e2; color: #ffffff" | |||||
>筛选</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button>清空筛选条件</el-button> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button @click="editorinfo()" style="background: #2671e2; color: #ffffff" | |||||
>添加批次</el-button | |||||
> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 表格 --> | |||||
<div class="cen-tab"> | |||||
<el-table | |||||
:data="tableData" | |||||
stripe | |||||
height="400" | |||||
@selection-change="handleSelectionChange" | |||||
style="width: 100%"> | |||||
<el-table-column | |||||
type="selection" | |||||
width="55"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="批次号" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="设备号" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="应收设备数量" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="实收设备数量" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="已验收设备数量" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="创建时间" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="备注" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<!-- scope --> | |||||
<el-table-column label="操作" align="center"> | |||||
<template slot-scope=""> | |||||
<div style="color: #2671E2;">修改</div> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<div style="display: flex;justify-content:flex-end;margin-top: 10px;"> | |||||
<el-pagination | |||||
@size-change="handleSizeChange" | |||||
@current-change="handleCurrentChange" | |||||
:current-page="currentPage4" | |||||
:page-sizes="[100, 200, 300, 400]" | |||||
:page-size="100" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="400"> | |||||
</el-pagination> | |||||
</div> | |||||
</div> | |||||
<el-dialog title="绑定" :visible.sync="dialogVisible" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="应收设备数量" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="实收设备数量" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="设备号开头" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="设备号结尾" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="备注:" prop="areaName"> | |||||
<el-input type="textarea" v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="editor()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
currentPage4:4, | |||||
value: "", | |||||
input: "", | |||||
tableData: [ | |||||
{ | |||||
date: "2016-05-03", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-02", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-04", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-01", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-08", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-06", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-07", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
], | |||||
multipleSelection:[], | |||||
dialogVisible:false, | |||||
ruleForm:{ | |||||
areaName:'', | |||||
provinceItem:[], | |||||
}, | |||||
}; | |||||
}, | |||||
mounted() {}, | |||||
methods: { | |||||
editorinfo(){ | |||||
this.dialogVisible=true; | |||||
}, | |||||
editor(){ | |||||
this.dialogVisible=false; | |||||
}, | |||||
handleSelectionChange(val) { | |||||
this.multipleSelection = val; | |||||
}, | |||||
handleSizeChange(val) { | |||||
console.log(`每页 ${val} 条`); | |||||
}, | |||||
handleCurrentChange(val) { | |||||
console.log(`当前页: ${val}`); | |||||
} | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped="scoped" lang="scss" > | |||||
.box-center { | |||||
width: 100%; | |||||
padding: 15px; | |||||
min-width: 1200px; | |||||
padding-bottom: 100px; | |||||
} | |||||
.cen-tab{ | |||||
width: 100%; | |||||
padding: 15px; | |||||
background: #FFFFFF; | |||||
margin-top: 15px; | |||||
} | |||||
.tophove { | |||||
color: #ffffff; | |||||
background: #2671e2; | |||||
} | |||||
.app-top { | |||||
width: 100%; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | |||||
border-radius: 4px; | |||||
padding-top: 15px; | |||||
padding-bottom: 15px; | |||||
.app-titel { | |||||
width: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
.label { | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #32363d; | |||||
line-height: 14px; | |||||
margin-left: 15px; | |||||
} | |||||
.toptimeqhuan { | |||||
height: 30px; | |||||
background: #ffffff; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.toptimeqhuan div { | |||||
padding-left: 20px; | |||||
padding-right: 20px; | |||||
text-align: center; | |||||
line-height: 30px; | |||||
font-size: 14px; | |||||
margin-right: 15px; | |||||
border-radius: 4px; | |||||
border: 1px solid #e0e0e0; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,615 @@ | |||||
<template> | |||||
<div class="box-center"> | |||||
<!-- 头 --> | |||||
<div class="app-top"> | |||||
<div class="app-titel" style="margin-top: 5px"> | |||||
<div class="label">设备编号:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div class="label">设备名称:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div class="label">领用人姓名:</div> | |||||
<div > | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label">楼盘:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div class="label">领用状态:</div> | |||||
<div> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label" style="color: #ffffff">筛选相关:</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button style="background: #2671e2; color: #ffffff" | |||||
>筛选</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button>清空筛选条件</el-button> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label" style="color: #ffffff">筛选相关:</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button @click="Batchreturn()" style="background: #2671e2; color: #ffffff" | |||||
>批量归还</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button @click="infoMasstransfer()" style="background: #2671e2; color: #ffffff" | |||||
>批量转移</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button @click="infoBulkbinding()" style="background: #2671e2; color: #ffffff" | |||||
>批量绑定批次号</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button @click="infoadd()" style="background: #2671e2; color: #ffffff" | |||||
>添加</el-button | |||||
> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 表格 --> | |||||
<div class="cen-tab"> | |||||
<el-table | |||||
:data="tableData" | |||||
stripe | |||||
height="400" | |||||
@selection-change="handleSelectionChange" | |||||
style="width: 100%"> | |||||
<el-table-column | |||||
type="selection" | |||||
width="55"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="序号" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="设备编号" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="设备名称" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="自动转写" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="领用人" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="领用状态" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="设备类型" | |||||
align="center" | |||||
> </el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="楼盘名称" | |||||
align="center" | |||||
> </el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="更新时间" | |||||
align="center" | |||||
> </el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="批次号" | |||||
align="center" | |||||
> </el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="验收状态" | |||||
align="center" | |||||
> </el-table-column> | |||||
<!-- scope --> | |||||
<el-table-column label="操作" align="center"> | |||||
<template slot-scope=""> | |||||
<div style="color: #2671E2;" @click="toinifoThereturn()">归还</div> | |||||
<div style="color: #2671E2;" @click="infotranscription()">转写开关</div> | |||||
<div style="color: #2671E2;" @click="acceptance()">验收</div> | |||||
<div style="color: #2671E2;" @click="toinfobinding()">绑定</div> | |||||
<div style="color: #2671E2;" @click="infoeditor()">修改</div> | |||||
<div style="color: #2671E2;" @click="toinifodelete()">删除</div> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<div style="display: flex;justify-content:flex-end;margin-top: 10px;"> | |||||
<el-pagination | |||||
@size-change="handleSizeChange" | |||||
@current-change="handleCurrentChange" | |||||
:current-page="currentPage4" | |||||
:page-sizes="[100, 200, 300, 400]" | |||||
:page-size="100" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="400"> | |||||
</el-pagination> | |||||
</div> | |||||
</div> | |||||
<el-dialog title="新增设备" :visible.sync="dialogVisible" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="设备号:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="设备名称:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="批次号:" prop="areaName"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="楼盘:" prop="areaName"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="关联手机号:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="设备类型:" prop="areaName"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible = false">取 消</el-button> | |||||
<el-button type="primary" @click="add()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<el-dialog title="编辑" :visible.sync="dialogVisible2" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="设备号:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="设备名称:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="批次号:" prop="areaName"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="楼盘:" prop="areaName"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="关联手机号:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="设备类型:" prop="areaName"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="描述:" prop="areaName"> | |||||
<el-input type="textarea" v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible2 = false">取 消</el-button> | |||||
<el-button type="primary" @click="editor()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<el-dialog title="绑定" :visible.sync="dialogVisible3" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="用户:" prop="areaName"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="设备:" prop="areaName"> | |||||
<el-input v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
<el-form-item label="领用时间:" prop="areaName"> | |||||
<el-date-picker | |||||
v-model="value1" | |||||
type="date" | |||||
placeholder="选择日期"> | |||||
</el-date-picker> | |||||
</el-form-item> | |||||
<el-form-item label="备注:" prop="areaName"> | |||||
<el-input type="textarea" v-model="ruleForm.areaName"></el-input> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible3 = false">取 消</el-button> | |||||
<el-button type="primary" @click="binding()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<el-dialog title="批量绑定批次号" :visible.sync="dialogVisible4" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="批次号:" prop="areaName"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible4 = false">取 消</el-button> | |||||
<el-button type="primary" @click="Bulkbinding()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<el-dialog title="批量转移" :visible.sync="dialogVisible5" > | |||||
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;"> | |||||
<el-form-item label="楼盘:" prop="areaName"> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="dialogVisible5 = false">取 消</el-button> | |||||
<el-button type="primary" @click="Masstransfer()">保存</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
options: [ | |||||
{ | |||||
value: "1", | |||||
label: "全部", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "服务器内", | |||||
}, | |||||
{ | |||||
value: "3", | |||||
label: "已失效", | |||||
}, | |||||
], | |||||
currentPage4:4, | |||||
value: "", | |||||
input: "", | |||||
tableData: [ | |||||
{ | |||||
date: "2016-05-03", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-02", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-04", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-01", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-08", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-06", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-07", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
], | |||||
dialogVisible:false, | |||||
dialogVisible2:false, | |||||
dialogVisible3:false, | |||||
dialogVisible4:false, | |||||
dialogVisible5:false, | |||||
ruleForm:{ | |||||
areaName:'', | |||||
provinceItem:[], | |||||
}, | |||||
multipleSelection:[], | |||||
}; | |||||
}, | |||||
mounted() {}, | |||||
methods: { | |||||
//批量绑定 | |||||
infoBulkbinding(){ | |||||
this.dialogVisible4=true | |||||
}, | |||||
//批量绑定确认 | |||||
Bulkbinding(){ | |||||
this.dialogVisible4=false | |||||
}, | |||||
//批量转移 | |||||
infoMasstransfer(){ | |||||
this.dialogVisible5=true | |||||
}, | |||||
//批量转移确认 | |||||
Masstransfer(){ | |||||
this.dialogVisible5=false | |||||
}, | |||||
//批量归还 | |||||
Batchreturn(){ | |||||
this.$confirm('确认批量归还吗?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.$message({ | |||||
type: 'success', | |||||
message: '批量归还成功!' | |||||
}); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消批量归还' | |||||
}); | |||||
}); | |||||
}, | |||||
handleSelectionChange(val) { | |||||
this.multipleSelection = val; | |||||
}, | |||||
//绑定 | |||||
toinfobinding(){ | |||||
this.dialogVisible3=true | |||||
}, | |||||
//确认绑定 | |||||
binding(){ | |||||
this.dialogVisible3=false | |||||
}, | |||||
//编辑 | |||||
infoeditor(){ | |||||
this.dialogVisible2=true | |||||
}, | |||||
//确认编辑 | |||||
editor(){ | |||||
this.dialogVisible2=false | |||||
}, | |||||
//新增 | |||||
infoadd(){ | |||||
this.dialogVisible=true | |||||
}, | |||||
//确认新增 | |||||
add(){ | |||||
this.dialogVisible=false | |||||
}, | |||||
//验收 | |||||
acceptance(){ | |||||
this.$confirm('确认验收吗?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.$message({ | |||||
type: 'success', | |||||
message: '验收成功!' | |||||
}); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消验收' | |||||
}); | |||||
}); | |||||
}, | |||||
// 转写开关 | |||||
infotranscription(){ | |||||
this.$confirm('确认开启或关闭吗?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.$message({ | |||||
type: 'success', | |||||
message: '成功!' | |||||
}); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消' | |||||
}); | |||||
}); | |||||
}, | |||||
//归还 | |||||
toinifoThereturn(){ | |||||
this.$confirm('确认归还吗?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.$message({ | |||||
type: 'success', | |||||
message: '归还成功!' | |||||
}); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消归还' | |||||
}); | |||||
}); | |||||
}, | |||||
//删除 | |||||
toinifodelete(){ | |||||
this.$confirm('此操作将永久删除, 是否继续?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.$message({ | |||||
type: 'success', | |||||
message: '删除成功!' | |||||
}); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '已取消删除' | |||||
}); | |||||
}); | |||||
}, | |||||
handleSizeChange(val) { | |||||
console.log(`每页 ${val} 条`); | |||||
}, | |||||
handleCurrentChange(val) { | |||||
console.log(`当前页: ${val}`); | |||||
} | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped="scoped" lang="scss" > | |||||
.box-center { | |||||
width: 100%; | |||||
padding: 15px; | |||||
min-width: 1200px; | |||||
padding-bottom: 100px; | |||||
} | |||||
.cen-tab{ | |||||
width: 100%; | |||||
padding: 15px; | |||||
background: #FFFFFF; | |||||
margin-top: 15px; | |||||
} | |||||
.tophove { | |||||
color: #ffffff; | |||||
background: #2671e2; | |||||
} | |||||
.app-top { | |||||
width: 100%; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | |||||
border-radius: 4px; | |||||
padding-top: 15px; | |||||
padding-bottom: 15px; | |||||
.app-titel { | |||||
width: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
.label { | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #32363d; | |||||
line-height: 14px; | |||||
margin-left: 15px; | |||||
} | |||||
.toptimeqhuan { | |||||
height: 30px; | |||||
background: #ffffff; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.toptimeqhuan div { | |||||
padding-left: 20px; | |||||
padding-right: 20px; | |||||
text-align: center; | |||||
line-height: 30px; | |||||
font-size: 14px; | |||||
margin-right: 15px; | |||||
border-radius: 4px; | |||||
border: 1px solid #e0e0e0; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,317 @@ | |||||
<template> | |||||
<div class="box-center"> | |||||
<!-- 头 --> | |||||
<div class="app-top"> | |||||
<div class="app-titel" style="margin-top: 5px"> | |||||
<div class="label">设备编号:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div class="label">领用人姓名:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div class="label">楼盘名称:</div> | |||||
<div > | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label">设备电量:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div class="label">是否在线:</div> | |||||
<div> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value"> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label" style="color: #ffffff">筛选相关:</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button style="background: #2671e2; color: #ffffff" | |||||
>筛选</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button>清空筛选条件</el-button> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button>批量开启指示灯</el-button> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button>批量关闭指示灯</el-button> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 表格 --> | |||||
<div class="cen-tab"> | |||||
<div class="tongji">在线数量:0 离线数量:279</div> | |||||
<el-table | |||||
:data="tableData" | |||||
stripe | |||||
height="400" | |||||
@selection-change="handleSelectionChange" | |||||
style="width: 100%"> | |||||
<el-table-column | |||||
type="selection" | |||||
width="55"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="序号" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="设备编号" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="是否在线" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="领用人" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="录音状态" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="指示灯状态" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="设备电量" | |||||
align="center" | |||||
> </el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="信号强度" | |||||
align="center" | |||||
> </el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="楼盘名称" | |||||
align="center" | |||||
> </el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="更新时间" | |||||
align="center" | |||||
> </el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="开机时间" | |||||
align="center" | |||||
> </el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="关机时间" | |||||
align="center" | |||||
> </el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="关机状态" | |||||
align="center" | |||||
> </el-table-column> | |||||
<!-- scope --> | |||||
<el-table-column label="操作" align="center"> | |||||
<template slot-scope=""> | |||||
<div style="color: #2671E2;" @click="toinifoThereturn()">修改指示灯状态</div> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<div style="display: flex;justify-content:flex-end;margin-top: 10px;"> | |||||
<el-pagination | |||||
@size-change="handleSizeChange" | |||||
@current-change="handleCurrentChange" | |||||
:current-page="currentPage4" | |||||
:page-sizes="[100, 200, 300, 400]" | |||||
:page-size="100" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="400"> | |||||
</el-pagination> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
options: [ | |||||
{ | |||||
value: "1", | |||||
label: "全部", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "在线", | |||||
}, | |||||
{ | |||||
value: "3", | |||||
label: "离线", | |||||
}, | |||||
], | |||||
currentPage4:4, | |||||
value: "", | |||||
input: "", | |||||
tableData: [ | |||||
{ | |||||
date: "2016-05-03", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-02", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-04", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-01", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-08", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-06", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-07", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
], | |||||
multipleSelection:[], | |||||
}; | |||||
}, | |||||
mounted() {}, | |||||
methods: { | |||||
//批量归还 | |||||
toinifoThereturn(){ | |||||
this.$confirm('确认更改吗?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning' | |||||
}).then(() => { | |||||
this.$message({ | |||||
type: 'success', | |||||
message: '更改成功!' | |||||
}); | |||||
}).catch(() => { | |||||
this.$message({ | |||||
type: 'info', | |||||
message: '更改归还' | |||||
}); | |||||
}); | |||||
}, | |||||
handleSelectionChange(val) { | |||||
this.multipleSelection = val; | |||||
}, | |||||
handleSizeChange(val) { | |||||
console.log(`每页 ${val} 条`); | |||||
}, | |||||
handleCurrentChange(val) { | |||||
console.log(`当前页: ${val}`); | |||||
} | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped="scoped" lang="scss" > | |||||
.box-center { | |||||
width: 100%; | |||||
padding: 15px; | |||||
min-width: 1200px; | |||||
padding-bottom: 100px; | |||||
} | |||||
.tongji{ | |||||
padding-bottom: 10px; | |||||
font-size: 16px; | |||||
color: red; | |||||
} | |||||
.cen-tab{ | |||||
width: 100%; | |||||
padding: 15px; | |||||
background: #FFFFFF; | |||||
margin-top: 15px; | |||||
} | |||||
.tophove { | |||||
color: #ffffff; | |||||
background: #2671e2; | |||||
} | |||||
.app-top { | |||||
width: 100%; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | |||||
border-radius: 4px; | |||||
padding-top: 15px; | |||||
padding-bottom: 15px; | |||||
.app-titel { | |||||
width: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
.label { | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #32363d; | |||||
line-height: 14px; | |||||
margin-left: 15px; | |||||
} | |||||
.toptimeqhuan { | |||||
height: 30px; | |||||
background: #ffffff; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.toptimeqhuan div { | |||||
padding-left: 20px; | |||||
padding-right: 20px; | |||||
text-align: center; | |||||
line-height: 30px; | |||||
font-size: 14px; | |||||
margin-right: 15px; | |||||
border-radius: 4px; | |||||
border: 1px solid #e0e0e0; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,413 @@ | |||||
<template> | |||||
<div class="box-center"> | |||||
<!-- 头 --> | |||||
<div class="app-top"> | |||||
<div class="app-titel"> | |||||
<div class="label" style="color: #32363D;font-weight: 400;font-size: 16px;">楼盘选择:</div> | |||||
<div> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label">时间:</div> | |||||
<div class="toptimeqhuan"> | |||||
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)"> | |||||
全部 | |||||
</div> | |||||
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> | |||||
15天内 | |||||
</div> | |||||
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)"> | |||||
30天内 | |||||
</div> | |||||
</div> | |||||
<div> | |||||
<el-date-picker | |||||
v-model="value1" | |||||
type="daterange" | |||||
range-separator="至" | |||||
start-placeholder="开始日期" | |||||
end-placeholder="结束日期"> | |||||
</el-date-picker> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label">客户名称:</div> | |||||
<div> | |||||
<el-input v-model="value"></el-input> | |||||
</div> | |||||
<div class="label">客户意向:</div> | |||||
<div > | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
<div class="label">录音类型:</div> | |||||
<div> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options2" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label">置业顾问:</div> | |||||
<div> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
<div class="label">标注顾问:</div> | |||||
<div > | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options5" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
<div class="label">接待时长:</div> | |||||
<div > | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options3" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
<div class="label">到访次数:</div> | |||||
<div> | |||||
<el-select v-model="value" placeholder="请选择"> | |||||
<el-option | |||||
v-for="item in options4" | |||||
:key="item.value" | |||||
:label="item.label" | |||||
:value="item.value" | |||||
> | |||||
</el-option> | |||||
</el-select> | |||||
</div> | |||||
</div> | |||||
<div class="app-titel" style="margin-top: 15px"> | |||||
<div class="label" style="color: #ffffff">筛选相关:</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button style="background: #2671e2; color: #ffffff" | |||||
>筛选</el-button | |||||
> | |||||
</div> | |||||
<div style="margin-left: 20px"> | |||||
<el-button>清空筛选条件</el-button> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- 表格 --> | |||||
<div class="cen-tab"> | |||||
<el-table | |||||
:data="tableData" | |||||
stripe | |||||
height="400" | |||||
style="width: 100%"> | |||||
<el-table-column | |||||
prop="date" | |||||
label="接待开始时间" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="顾问" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="客户" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="录音时长" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="录音类型" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="标注顾问" | |||||
align="center"> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="date" | |||||
label="客户意向" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="name" | |||||
label="执行率" | |||||
align="center" | |||||
> | |||||
</el-table-column> | |||||
<el-table-column | |||||
prop="address" | |||||
label="禁忌执行率" | |||||
align="center"> | |||||
</el-table-column> | |||||
<!-- scope --> | |||||
<el-table-column label="操作" align="center"> | |||||
<template slot-scope=""> | |||||
<div style="color: #2671E2;">查看</div> | |||||
<div style="color: #2671E2;">下载文本</div> | |||||
<div style="color: #2671E2;">下载录音</div> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<div style="display: flex;justify-content:flex-end;margin-top: 10px;"> | |||||
<el-pagination | |||||
@size-change="handleSizeChange" | |||||
@current-change="handleCurrentChange" | |||||
:current-page="currentPage4" | |||||
:page-sizes="[100, 200, 300, 400]" | |||||
:page-size="100" | |||||
layout="total, sizes, prev, pager, next, jumper" | |||||
:total="400"> | |||||
</el-pagination> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
TimetoAhoose: 2, | |||||
options: [ | |||||
{ | |||||
value: "1", | |||||
label: "全部", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "服务器内", | |||||
}, | |||||
{ | |||||
value: "3", | |||||
label: "已失效", | |||||
}, | |||||
], | |||||
options2: [ | |||||
{ | |||||
value: "1", | |||||
label: "有效录音", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "无效录音", | |||||
}, | |||||
], | |||||
options3: [ | |||||
{ | |||||
value: "1", | |||||
label: "0-15分钟", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "16-30分钟", | |||||
}, | |||||
{ | |||||
value: "3", | |||||
label: "31-60分钟", | |||||
}, | |||||
{ | |||||
value: "4", | |||||
label: "61-90分钟", | |||||
}, | |||||
{ | |||||
value: "5", | |||||
label: "90分钟以上", | |||||
}, | |||||
], | |||||
options4: [ | |||||
{ | |||||
value: "1", | |||||
label: "首次到访", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "2次到访", | |||||
}, | |||||
{ | |||||
value: "3", | |||||
label: "3次到访", | |||||
}, | |||||
{ | |||||
value: "4", | |||||
label: "三次以上", | |||||
}, | |||||
], | |||||
options5: [ | |||||
{ | |||||
value: "1", | |||||
label: "已标注", | |||||
}, | |||||
{ | |||||
value: "2", | |||||
label: "未标注", | |||||
}, | |||||
{ | |||||
value: "3", | |||||
label: "全部", | |||||
}, | |||||
], | |||||
currentPage4:4, | |||||
value: "", | |||||
input: "", | |||||
tableData: [ | |||||
{ | |||||
date: "2016-05-03", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-02", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-04", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-01", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-08", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-06", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
{ | |||||
date: "2016-05-07", | |||||
name: "王小虎", | |||||
address: " 1518 弄", | |||||
}, | |||||
], | |||||
}; | |||||
}, | |||||
mounted() {}, | |||||
methods: { | |||||
handleSizeChange(val) { | |||||
console.log(`每页 ${val} 条`); | |||||
}, | |||||
handleCurrentChange(val) { | |||||
console.log(`当前页: ${val}`); | |||||
} | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped="scoped" lang="scss" > | |||||
.box-center { | |||||
width: 100%; | |||||
padding: 15px; | |||||
min-width: 1200px; | |||||
padding-bottom: 100px; | |||||
} | |||||
.cen-tab{ | |||||
width: 100%; | |||||
padding: 15px; | |||||
background: #FFFFFF; | |||||
margin-top: 15px; | |||||
} | |||||
.tophove { | |||||
color: #ffffff; | |||||
background: #2671e2; | |||||
} | |||||
.app-top { | |||||
width: 100%; | |||||
background: #ffffff; | |||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); | |||||
border-radius: 4px; | |||||
padding-top: 15px; | |||||
padding-bottom: 15px; | |||||
.app-titel { | |||||
width: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
.label { | |||||
font-size: 14px; | |||||
font-weight: 400; | |||||
color: #32363d; | |||||
line-height: 14px; | |||||
margin-left: 15px; | |||||
} | |||||
.toptimeqhuan { | |||||
height: 30px; | |||||
background: #ffffff; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.toptimeqhuan div { | |||||
padding-left: 20px; | |||||
padding-right: 20px; | |||||
text-align: center; | |||||
line-height: 30px; | |||||
font-size: 14px; | |||||
margin-right: 15px; | |||||
border-radius: 4px; | |||||
border: 1px solid #e0e0e0; | |||||
} | |||||
} | |||||
} | |||||
</style> |