liumin
/
zkPCproject
0
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

init

newStyle
wangxiaohua 3 years ago
parent
a3bf8cd258
commit
42dc7994ac
3 changed files with 793 additions and 0 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +431
    -0
      src/views/Customer/index.vue
  2. +0
    -0
      src/views/ReceivingRecords/index.vue
  3. +362
    -0
      src/views/building/index.vue

+ 431
- 0
src/views/Customer/index.vue View File

@@ -0,0 +1,431 @@
<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 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>
<el-button 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"
@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>
<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;">详情</div>
<div style="color: #2671E2;">转交</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>
</div>
</template>

<script>
export default {
data() {
return {
TimetoAhoose: 2,
options: [
{
value: "1",
label: "全部",
},
{
value: "2",
label: "服务器内",
},
{
value: "3",
label: "已失效",
},
],
options2: [
{
value: "1",
label: "A",
},
{
value: "2",
label: "B",
},
{
value: "3",
label: "C",
},
{
value: "4",
label: "D",
},
],
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: "三次以上",
},
],
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: {
//删除
toinifodelete(){
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;
}
.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
src/views/ReceivingRecords/index.vue View File


+ 362
- 0
src/views/building/index.vue View File

@@ -0,0 +1,362 @@
<template>
<div class="box-center">
<!-- 头 -->
<div class="app-top">
<div class="app-titel" style="margin-top: 10px">
<div class="label">服务到期：</div>
<div class="toptimeqhuan">
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">
7天内
</div>
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)">
15天内
</div>
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">
30天内
</div>
</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: 10px">
<div class="label">楼盘名称：</div>
<div>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</div>
</div>
<div class="app-titel" style="margin-top: 10px">
<div class="label" style="color: #ffffff">筛选相关：</div>
<div>
<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;" @click="toinfoadd()">添加员工</div>
<div style="color: #2671E2;" @click="toinfoeditor()">编辑</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="100px" 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>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editor">保存</el-button>
</div>
</el-dialog>

<el-dialog title="新增用户" :visible.sync="dialogVisible2" >
<el-form :model="ruleForm" label-position="labelPosition" ref="ruleForm" label-width="100px" 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-radio-group v-model="ruleForm.resource">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</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-select v-model="ruleForm.region" placeholder="请选择角色">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="部门：" prop="areaName">
<el-select v-model="ruleForm.region" placeholder="请选择部门">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2 = false">取 消</el-button>
<el-button type="primary" @click="add">保存</el-button>
</div>
</el-dialog>
</div>
</template>

<script>
export default {
data() {
return {
TimetoAhoose: 2,
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,
ruleForm:{
areaName:'',
provinceItem:[],
},
};
},
mounted() {},
methods: {
//删除
toinifodelete(){
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//添加
toinfoadd(){
this.dialogVisible2=true;
},
//确认添加
add(){
this.dialogVisible2=false;
},
//编辑
toinfoeditor(){
this.dialogVisible=true;
},
//确认编辑
editor(){
this.dialogVisible=false;
},
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>

Write Preview
Loading…
Cancel
Save