Skip to content

C
CRM
Commit d6849564 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent e189a143
Hide whitespace changes
Inline Side-by-side
Showing with 757 additions and 58 deletions
src/App.vue
View file @ d6849564
......@@ -10,9 +10,15 @@ export default {
}
},
mounted() {
this.$router.push({
name: "Home"
});
if (!this.getLocalStorage()) {
this.$router.push({
path: '/login'
})
}else{
this.$router.push({
name: "Home"
});
}
},
methods: {
......@@ -22,7 +28,7 @@ export default {
<style>
@import './assets/global/font.css';
@import '//at.alicdn.com/t/font_1627123_b01m6uprnb.css';
@import '//at.alicdn.com/t/font_1627123_6rkscxbqh43.css';
/* @import './assets/css/common.css'; */
@import './assets/css/init.css';
body,html{
......
src/assets/css/init.css
View file @ d6849564
......@@ -21,4 +21,76 @@ table { border-collapse:collapse; border-spacing:0; }
}
.perfectFont{
font-family: 'perfectFont';
}
\ No newline at end of file
}
.crm-btn.query-btn{
background:rgba(13,36,129,1);
border-color: rgba(13,36,129,1);
color: white;
}
.crm-btn.query-btn:hover{
background:rgba(13,36,129,.8);
border-color: rgba(13,36,129,.8);
color: white;
}
.crm-btn.easy-btn{
background: white;
border-color: rgba(13,36,129,1);
color: rgba(13,36,129,1);
}
.crm-btn.easy-btn:hover{
background: white;
border-color: rgba(13,36,129,.8);
color: rgba(13,36,129,.8);
}
.crm-btn.org-btn{
background: white;
border-color: rgba(255, 164, 117, 1);
color: rgba(255, 164, 117, 1);
}
.crm-btn.org-btn:hover{
background: white;
border-color: rgba(255, 164, 117, .8);
color: rgba(255, 164, 117, .8);;
}
.el-input__inner{
border-radius: 0 !important;
}
.MyEditForm .el-form-item .label {
font-size: 10px;
color: #888888;
padding-left: 15px;
font-family: "Microsoft YaHei";
}
.MyEditForm .MyEditForm-item{
padding: 9px 19px;
background-color: white;
margin-bottom: 20px;
}
.MyEditForm .MyEditForm-item .el-form-item{
margin-bottom: 0;
}
.MyEditForm .el-form-item .el-form-item__content {
line-height: initial;
}
.MyEditForm .el-form-item .el-input__inner {
border: none;
outline: none;
width: 200px;
height: 14px;
line-height: 14px;
padding-left: 10px;
font-size: 12px;
}
.MyEditForm .el-form-item .el-form-item__label{
line-height: initial;
color: rgba(136, 136, 136, 1);
font-size: 12px;
}
.MyEditForm .el-form-item .el-form-item__error {
top: 0;
right: 0;
left: initial;
font-size: 12px;
padding-top: 2px;
}
src/components/HomeNav/HomeNavLeft.vue
View file @ d6849564
......@@ -86,7 +86,8 @@ export default {
navList: [
{
class: "iconfont iconyibiaopan",
name: "仪表盘"
name: "仪表盘",
path: '/Home'
},
{
class: "iconfont icondaiban",
......@@ -98,7 +99,8 @@ export default {
},
{
class: "iconfont iconkehu",
name: "客户"
name: "客户",
path: '/customerManage'
},
{
class: "iconfont iconkehu1",
......@@ -119,10 +121,18 @@ export default {
]
};
},
mounted() {},
mounted() {
let $this = this
this.MsgBus.$on('setLeftNav', function (val){
$this.activeIndex = val;
})
},
methods: {
changeMenu: function(it, ind) {
changeMenu: function(item, ind) {
this.activeIndex = ind;
this.$router.push({
path: item.path
});
}
}
};
......
src/components/HomeNav/HomeNavTop.vue
View file @ d6849564
......@@ -77,7 +77,7 @@
<div class="nav-right">
<div class="nav-right-menu">
<ul>
<li :class="{'active':chosenMenuId==item.id}" v-for="(item, index) in menuList" :key="index" @click="chosenFirstLeaveMenu(item.id)">
<li :class="{'active':chosenMenuId==item.id}" v-for="(item, index) in menuList" :key="index" @click="chosenFirstLeaveMenu(item)">
<i class="iconfont" :class="[item.icon]"></i>{{item.name}}
</li>
</ul>
......@@ -88,11 +88,11 @@
</div>
<div class="right-item">
<span class="welcomne-txt">Good Job,</span>
<span class="usr-name">吴彦祖</span>
<span class="usr-name">{{userInfo.EmName}}</span>
</div>
<div class="right-item">
<el-avatar :size="34" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580985297255&di=d10539f3a69a8507564aaa3ac4fc131b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_mini%2Cc_zoom%2Cw_640%2Fimages%2F20170728%2F5843abd8cdb74745a2fe2349879cb055.jpeg" @error="errorHandler">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
<el-avatar :size="34" src="../../assets/img/default_head_img.jpg" @error="errorHandler">
<img :src="userInfo.Icon"/>
</el-avatar>
</div>
</div>
......@@ -108,7 +108,7 @@ export default {
{
id:1,
name: "客户管理",
path: "/home",
path: "/Home",
icon: "iconcompany"
},
{
......@@ -136,13 +136,24 @@ export default {
icon: "iconareachart"
}
],
chosenMenuId:0
chosenMenuId: 0,
userInfo: {
EmName: '',
Icon: '',
}
};
},
mounted() {},
mounted() {
let userInfo = this.getLocalStorage()
this.userInfo = userInfo
},
methods: {
chosenFirstLeaveMenu(id){
this.chosenMenuId=id
chosenFirstLeaveMenu(item){
this.chosenMenuId = item.id
this.MsgBus.$emit('setLeftNav', 0)
this.$router.push({
path: item.path
});
},
errorHandler() {
return false
......
src/components/customerManage/customerManage.vue 0 → 100644
View file @ d6849564
<style>
.customerManage .tools{
display: flex;
justify-content: space-between;
padding-bottom: 25px;
border-bottom: 1px solid rgba(226,228,235,1);
}
.customerManage .tools h1{
font-weight: bold;
font-size: 18px;
}
.customerManage .tools .rightmenu{
display: flex;
align-items: center;
}
.customerManage .tools .rightmenu .el-button{
border-radius: 0;
padding: 9px 30px;
margin-right: 20px;
}
.customerManage .tools .gaoji{
font-size:12px;
font-weight:400;
color:rgba(13,36,129,1);
margin-right: 35px;
cursor: pointer;
}
.customerManage .tools .gaoji:hover{
color:rgba(13,36,129,.8);
}
.customerManage .tools .gaoji .iconfont{
font-size: 12px;
padding-left: 5px;
}
.customerManage .query-box{
padding: 25px 0;
}
.customerManage .table-btn{
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
cursor: pointer;
margin-right: 10px;
}
.customerManage .table-btn.blue{
color: rgba(13, 36, 129, 1);
background-color: rgba(13, 36, 129, .3);
}
.customerManage .table-btn.org{
color: #FFA475;
background-color: rgba(255, 164, 117, .3);
}
.customerManage .table-btn.green{
color: rgba(148, 184, 119, 1);
background-color: rgba(148, 184, 119, .3);
}
.customerManage .table-btn.blue:hover{
background-color: rgba(13, 36, 129, .5);
}
.customerManage .table-btn.org:hover{
background-color: rgba(255, 164, 117, .5);
}
.customerManage .table-btn.green:hover{
background-color: rgba(148, 184, 119, .5);
}
.customerManage .add-box .add-tit{
display: flex;
justify-content: space-between;
align-items: center;
height: 20px;
}
.customerManage .add-box .add-tit p{
display: flex;
align-items: center;
font-weight: bold;
color:rgba(17,17,17,1);
font-size:14px;
}
.customerManage .add-box .add-tit p span{
display: inline-block;
width:6px;
height:6px;
background:rgba(13,36,129,1);
border-radius:50%;
margin-right: 10px;
}
.customerManage .add-box .el-dialog__header{
padding: 15px 20px;
background:rgba(255,255,255,1);
}
.customerManage .add-box .dialog-footer{
text-align: center;
background-color: rgba(248,250,251,1);
padding-bottom: 20px;
}
.customerManage .add-box .el-dialog__footer{
padding: 0;
}
.customerManage .add-box .el-dialog__body{
background-color: rgba(248,250,251,1);
padding-top: 20px;
}
.customerManage .add-box-btn.el-button{
border-radius: 0;
background-color: rgba(13, 36, 129, .8);
border-color: rgba(13, 36, 129, .8);
color: white;
padding: 12px 43px;
}
.customerManage .add-box-btn.el-button:hover{
background-color: rgba(13, 36, 129, 1);
border-color: rgba(13, 36, 129, 1);
color: white;
}
.customerManage .add-box-btn.el-button.add-box-cancel{
color: rgba(13, 36, 129, .8);
background-color: white;
}
.customerManage .add-box-btn.el-button.add-box-cancel:hover{
color: rgba(13, 36, 129, 1);
background-color: white;
}
.customerManage .form-box .form-box-tit{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.customerManage .form-box .radius{
display: flex;
width:4px;
height:4px;
background:rgba(255,164,117,1);
border-radius:50%;
margin-right: 10px;
}
</style>
<template>
<div class="customerManage">
<div class="tools">
<h1>客户管理</h1>
<div class="rightmenu">
<div class="gaoji">高级查询 <i class="iconfont iconjiantou_xia"></i></div>
<el-button class="crm-btn query-btn" @click="getList">查询</el-button>
<el-button icon="el-icon-plus" class="crm-btn easy-btn" @click="dialogTableVisible=true">新增</el-button>
<el-button class="crm-btn easy-btn">导入</el-button>
<el-button class="crm-btn org-btn">导出</el-button>
</div>
</div>
<div class="query-box">
<el-row :gutter="20">
<el-col :span="4">
<el-select v-model="value" placeholder="请选择客户来源">
<el-option
v-for="item in SourceEnum"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-select v-model="value" placeholder="请选择客户来源">
<el-option
v-for="item in SourceEnum"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-select v-model="value" placeholder="请选择客户来源">
<el-option
v-for="item in SourceEnum"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-select v-model="value" placeholder="请选择客户来源">
<el-option
v-for="item in SourceEnum"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-select v-model="value" placeholder="请选择客户来源">
<el-option
v-for="item in SourceEnum"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-select v-model="value" placeholder="请选择客户来源">
<el-option
v-for="item in SourceEnum"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
</el-col>
</el-row>
</div>
<el-table
v-loading="loading"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
border
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column
prop="NowSellName"
label="负责人"
width="120"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="CustomerName"
label="客户名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="Contact"
label="联系人"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="ContactNumber"
label="联系电话"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="UpdateTime"
label="更新时间"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="CustomerLevelStr"
label="客户级别"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="MainSourceStr"
label="客户来源"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="CustomerPublic"
label="距进入公海天数"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="提醒" placement="top">
<i class="table-btn blue iconfont icontishi"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="联系客户" placement="top">
<i class="table-btn org iconfont icondianhua"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="客户详情" placement="top">
<i class="table-btn green iconfont iconsuosou"></i>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogTableVisible" custom-class="add-box">
<div class="add-tit" slot="title">
<p><span></span>新建客户</p>
<span icon="el-icon-close"></span>
</div>
<div class="form-box">
<el-form :model="form" class="MyEditForm" :rules="rules">
<p class="form-box-tit"><span class="radius"></span> 基本信息</p>
<el-row :gutter="30">
<el-col :span="8">
<div class="MyEditForm-item">
<el-form-item label="客户名称" prop="CustomerName">
<el-input placeholder="请输入客户姓名" v-model="form.CustomerName"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="MyEditForm-item">
<el-form-item label="客户级别" prop="CustomerLevel">
<!-- placeholder="请选择客户级别" -->
<el-select v-model="form.CustomerLevel" placeholder="请选择客户级别">
<el-option
v-for="item in SourceEnum"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="MyEditForm-item">
<el-form-item label="客户来源" prop="CustomerSourceType">
<el-select v-model="form.CustomerSourceType" placeholder="请选择客户来源">
<el-option
v-for="item in SourceEnum"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="8">
<div class="MyEditForm-item">
<el-form-item label="联系人" prop="Contact">
<el-input placeholder="请输入联系人" v-model="form.Contact"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="MyEditForm-item">
<el-form-item label="电话" prop="ContactNumber">
<el-input placeholder="请输入联系电话" v-model="form.ContactNumber"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="MyEditForm-item">
<el-form-item label="客户来源" prop="CustomerSourceType">
<el-select v-model="form.CustomerSourceType" placeholder="请选择客户来源">
<el-option
v-for="item in SourceEnum"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" class="add-box-btn" @click="dialogFormVisible = false">确 定</el-button>
<el-button class="add-box-btn add-box-cancel" @click="dialogFormVisible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
rules:{
CustomerName: [
{ required: true, message: '请输入客户名称', trigger: 'blur' }
],
CustomerLevel: [
{ required: true, message: '请选择客户级别', trigger: 'change' }
],
CustomerSourceType: [
{ required: true, message: '请选择客户来源', trigger: 'change' }
],
Contact: [
{ required: true, message: '请输入联系人', trigger: 'blur' }
],
ContactNumber: [
{ required: true, message: '请输入联系电话', trigger: 'blur' }
],
},
loading: true,
dialogTableVisible: true,
tableData: [],
multipleSelection: [],
value: '',
SourceEnum: [],
msg: {
CustomerName: '',
Contact: '',
pageIndex: 1,
pageSize: 10,
ContactNumber: '',
WhereType: -1,
OrderBy: ''
},
form: {
CustomerId: 0,
CustomerName: '',
CustomerLevel: '',
Contact: '',
ContactNumber: '',
Address: '',
Remark: '',
Premises: '',
CustomerStatus: '',
CustomerSourceType: '',
CustomerSource: '',
Country: '',
Province: '',
City: '',
District: '',
BrandIds: '',
Images: '',
BusinessCardPhotos: '',
HousePhotos: ''
},
WhereTypeList: [
{
id: -1,
name: '全部'
},{
id: 1,
name: '我负责的'
},{
id: 2,
name: '下属的'
},{
id: 3,
name: '我参与的'
},{
id: 4,
name: '我关注的'
},
]
};
},
mounted() {
this.getList()
this.GetCustomerSourceEnum()
},
methods: {
getList: function (){
this.loading = true
this.apipost('/api/Customer/GetCustomerPage', this.msg, res=>{
if (res.data.resultCode == 1) {
this.tableData = res.data.data.pageData
this.loading = false
}
})
},
GetCustomerSourceEnum(){
this.apipost('/api/Customer/GetCustomerSourceEnum', {}, res=>{
if (res.data.resultCode == 1) {
this.SourceEnum = res.data.data
}
})
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
};
</script>
src/plugins/index.js
View file @ d6849564
......@@ -11,15 +11,7 @@ export default {
},
//域名管理对象
Vue.prototype.domainManager = function () {
// var domainUrl = "http://test_reborn.oytour.com";//主域名
// var domainUrl = "http://reborn.oytour.com"; //主域名
//var domainUrl = "http://192.168.2.65:8025"//主域名
// let domainUrl = "https://reborn.oytour.com";
// let domainUrl = "http://testapi.oytour.com"
let domainUrl = "http://192.168.2.65:8069"
//let domainUrl = "http://192.168.0.106"
// let domainUrl = "http://192.168.2.214:8082"
// var domainUrl = "http://reborn.oytour.com";
let domainUrl = "http://crm.oytour.com"
let locationName = window.location.hostname;
if (this.isOnline()) {
if (window.location.host.indexOf('testb2b.oytour.com') != -1)
......@@ -31,15 +23,10 @@ export default {
//主地址
DomainUrl: domainUrl,
//常用提交数据URL
PostUrl: domainUrl + "/api/common/post",
// javaUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('testb2b.oytour.com') !== -1 ? (locationName.indexOf('oytour') !== -1 ? "http://efficient.oytour.com" : "http://47.96.12.235:9001") : "http://192.168.2.215:9000",
PostUrl: domainUrl,
javaUrl: locationName.indexOf('testb2b') == -1 ? "http://efficient.oytour.com" : locationName.indexOf('testb2b.oytour.com') !== -1 ? "http://47.96.12.235:9001" : "http://192.168.2.215:9000",
//javaUrl:'http://192.168.2.215:9000',
// javaUrl: "http://efficient.oytour.com",
// javaUrl: "http://47.96.12.235:9001",
ViittoFileUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('testb2b.oytour.com') !== -1 ? "http://staticfile.oytour.com" : 'http://192.168.2.214:8130',
UploadUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('testb2b.oytour.com') !== -1 ? "http://uploadfile.oytour.com" : "http://192.168.2.214:8130",
// UploadUrl: "http://uploadfile.oytour.com",
LocalFileStreamDownLoadUrl: domainUrl + "/api/file/GetFileFromWebApi",
};
return obj;
......@@ -171,22 +158,19 @@ export default {
if (msg == null || msg == "") {
msg = {}
}
var apiurl = this.domainManager().PostUrl;
var apiurl = this.domainManager().PostUrl + cmd;
var timestamp = (new Date()).valueOf();
this.apiurl = apiurl;
var token = "";
var key = "";
if (this.getLocalStorage() != null) {
token = this.getLocalStorage().token;
key = this.getLocalStorage().secretKey;
}
var encodeMsg = encodeURIComponent(JSON.stringify(msg)).toLowerCase();
var md5Str = md5(`cmd=${cmd}&msg=${encodeMsg}&timestamp=${timestamp}&token=${token}&key=${key}`);
var postData = {
"msg": msg,
"cmd": cmd,
// "cmd": cmd,
"timestamp": timestamp,
"token": token,
"sign": md5Str
......
src/router.js
View file @ d6849564
......@@ -3,6 +3,7 @@ import Router from "vue-router";
import index from "./views/index";
import login from "./views/login";
import Home from "./components/Home"
import customerManage from "./components/customerManage/customerManage"
Vue.use(Router);
export default new Router({
......@@ -46,6 +47,14 @@ export default new Router({
meta: {
title: "CRM-仪表盘",
},
},
{
path: "/customerManage",
name: "customerManage",
component: customerManage,
meta: {
title: "客户管理"
}
}
]
},
......
src/views/login.vue
View file @ d6849564
......@@ -2,7 +2,7 @@
<div class="login">
<div class="login-box">
<div class="left-card">
<el-carousel trigger="click" height="560px" interval="10000" width="100%" arrow="never">
<el-carousel trigger="click" height="560px" :interval="10000" width="100%" arrow="never">
<el-carousel-item v-for="item in 2" :key="item">
<div class="item-card">
<div class="head-icon">
......@@ -49,7 +49,7 @@
<div class="mu-text-field-content">
<div class="mu-text-field-label">密码</div>
<input
type="text"
type="password"
v-model="pwd"
class="mu-text-field-input"
@focus="pwdStatus=true"
......@@ -67,6 +67,7 @@
<el-button
type="primary"
:loading="isLogining"
@click="goLogin()"
style="width:100%; font-family:perfectFont;font-size: 16px;"
>立即登录</el-button>
</div>
......@@ -105,6 +106,53 @@ export default {
isLogining: false,
isAutoLogin: false
};
},created (){
let autoLogin = localStorage.autoLogin ? JSON.parse(localStorage.autoLogin) : null
this.account = autoLogin ? autoLogin.acc : ''
this.pwd = autoLogin ? autoLogin.pwd : ''
this.isAutoLogin = autoLogin ? true : false
},methods: {
goLogin(){
if(this.account == "") {
return this.$message({
message: '请输入账号!',
type: 'warning'
});
}
if(this.pwd == "") {
return this.$message({
message: '请输入密码!',
type: 'warning'
});
}
var msg = {
EmAccount: this.account,
EmPassword: this.pwd,
Domain: 'crmtesterp.oytour.com'
};
this.apipost('/api/Login/UserLogin', msg, res=>{
var jsonData = res.data;
if (jsonData.resultCode == 1) {
//登录成功
let autoLogin = this.isAutoLogin ? {
acc: this.account,
pwd: this.pwd,
} : null ;
localStorage.autoLogin = JSON.stringify(autoLogin)
var userData = jsonData.data;
var userJson = JSON.stringify(userData);
localStorage.userInfo = userJson;
this.loginState = 0;
this.$router.push({ path: "/Home" });
} else {
this.$message({
message: res.data.message,
type: 'error'
});
this.loginState = 0;
}
})
}
}
};
</script>
......@@ -274,6 +322,9 @@ export default {
font-family: inherit;
position: relative;
}
.field_wrap .el-button,.field_wrap .el-checkbox__inner{
border-radius: 0;
}
.mu-text-field-line {
background-color: rgba(0, 0, 0, 0.4);
margin: 0;
......
src/views/table.vue
View file @ d6849564
<template>
<div>
<div style="width:60%;margin:100px auto;">
<vxe-table border height="300" highlight-hover-row show-overflow :data="tableData">
<vxe-table-column type="seq" width="60" fixed="left"></vxe-table-column>
<vxe-table-column field="name" title="Name" width="300"></vxe-table-column>
<vxe-table-column field="role" title="Role" width="300"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>
<vxe-table-column field="date" title="Date" width="300"></vxe-table-column>
<vxe-table-column title="操作" fixed="right" width="200">
<template>
<vxe-button status="primary">按钮1</vxe-button>
<vxe-button>按钮2</vxe-button>
</template>
</vxe-table-column>
</vxe-table>
<vxe-table
border
resizable
highlight-hover-row
highlight-current-row
height="500"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :formatter="formatterSex"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
<vxe-table-column title="操作" width="100" show-overflow>
<template v-slot="{ row }">
<vxe-button type="text" icon="fa fa-edit" @click="editEvent(row)"></vxe-button>
<vxe-button type="text" icon="fa fa-trash-o"></vxe-button>
</template>
</vxe-table-column>
</vxe-table>
<vxe-modal ref="xModal" v-model="showEdit" title="编辑&保存" width="800" resize destroy-on-close>
<vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
<vxe-form-item title="Basic information" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
<vxe-form-item title="Name" field="name" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
<vxe-form-item title="Nickname" field="nickname" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入昵称'}}"></vxe-form-item>
<vxe-form-item title="Role" field="role" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入角色'}}"></vxe-form-item>
<vxe-form-item title="Sex" field="sex" span="12" :item-render="{name: 'select', options: sexList}"></vxe-form-item>
<vxe-form-item title="Age" field="age" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入年龄'}}"></vxe-form-item>
<vxe-form-item title="Other information" span="24" title-align="left" title-width="200px" :title-prefix="{message: '请填写必填项', icon: 'fa fa-info-circle'}"></vxe-form-item>
<vxe-form-item title="Number" field="num" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入数值'}}"></vxe-form-item>
<vxe-form-item title="Date" field="date3" span="12" :item-render="{name: 'input', attrs: {type: 'date', placeholder: '请选择日期'}}"></vxe-form-item>
<vxe-form-item title="Address" field="address" span="24" :title-prefix="{message: '啦啦啦，就是这么强大！！！', icon: 'fa fa-question-circle'}" :item-render="{name: 'textarea', attrs: {placeholder: '请输入地址'}}"></vxe-form-item>
<vxe-form-item align="center" span="24">
<vxe-button type="submit" status="primary">保存</vxe-button>
<vxe-button type="reset">重置</vxe-button>
<vxe-button @click="$refs.xModal.close()">取消</vxe-button>
</vxe-form-item>
</vxe-form>
</vxe-modal>
</div>
</div>
</template>
......@@ -22,11 +48,57 @@
export default {
data() {
return {
tableData: []
};
tableData: [
{"id":1000000,"name":"TT0","nickname":"徐徐0","role":"前端","role1":"","key":"home.label.key0","language":"zh_CN","content":"内容0","checked":false,"checked1":true,"checked2":true,"checked3":true,"checked4":true,"checkedList":[],"flag":true,"flag1":"Y","flag2":"N","date":"2020-02-07T03:24:54.299Z","date1":"2020-02-07T03:24:54.299Z","date2":"09:00:00","date3":"2020-02-07","date4":"2020-02-07T03:24:54.299Z","date5":"09:00","date6":null,"date7":"2020-02-07T03:24:54.299Z","date8":"2020-02-07T03:24:54.299Z","date9":"2020-02-07T03:24:54.299Z","date10":"2020-02-07T03:24:54.299Z","date11":[],"date12":"2020-02-07","date13":"2020-02-07","num":"0","num1":"0","num2":"0.0","num3":"0.0","num4":"0.00","num5":"0.00","num6":"0","color":"rgba(255, 0, 0, 0.8)","slider":40,"list":[],"time":1581046254299,"sex":"1","sex1":["1"],"sex2":"1","sex3":1,"sex4":1,"sex5":"1","amount":94667600,"bankCard":"6200000100000000","age":16,"age1":"18","region":[19,199,1773],"rate":2,"rate1":"2","state":"value:Washington","address":"vxe-table 从入门到放弃 - 地址0","address2":"地址 地址地址 地址0","img":"static/other/img2.gif","img1":"static/other/img2.gif","html1":"<span style=\"color:red;\">我是一段Html代码</span><br><span style=\"color:blue;\">vxe-table 从入门到放弃0</span><br><span style=\"color:green;\">绿到你发慌！</span>","html2":"<span style=\"color:red;\">我是一段Html代码</span><span style=\"color:blue;\">vxe-table 从入门到住院0</span><span style=\"color:green;\">绿到你发慌！</span>","html3":"0 -> <span style=\"color:red;\">我是一段Html代码</span><span style=\"color:blue;\">vxe-table 从入门到放弃0</span><span style=\"color:green;\">绿到你发慌！</span><br><span style=\"color:green;\">绿到你发慌！</span><br><span style=\"color:green;\">我是一段Html代码,我是一段Html代码，我是一段Html代码，绿到你发慌！</span><br><span style=\"color:red;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style=\"color:red;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style=\"color:green;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span>","text":"0 -> 徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv","updateTime":1581045894299,"createTime":1581045894299,"attr1":"","attr2":[],"attr3":"","attr4":"","attr5":0,"loading":false,"info":{"name2":"name2_0","more":{"sex2":"1","age2":26}},"_XID":"row_1"},{"id":1000001,"name":"dd1","nickname":"蒋蒋1","role":"项目经理","role1":"1","key":"home.label.key1","language":"en_US","content":"Content1","checked":false,"checked1":false,"checked2":false,"checked3":false,"checked4":false,"checkedList":[],"flag":false,"flag1":"N","flag2":"Y","date":"2020-02-07T05:24:54.299Z","date1":"2020-02-07T05:24:54.299Z","date2":"09:00:00","date3":"","date4":"2020-02-07T05:24:54.299Z","date5":"09:00","date6":null,"date7":"2020-02-07T05:24:54.299Z","date8":"2020-02-07T05:24:54.299Z","date9":"2020-02-07T05:24:54.299Z","date10":"2020-02-07T05:24:54.299Z","date11":[],"date12":"","date13":"","num":"0","num1":"0","num2":"0.6","num3":"0.8","num4":"0.35","num5":"0.97","num6":"0","color":null,"slider":0,"list":[],"time":1581053454299,"sex":"0","sex1":["0"],"sex2":"0","sex3":0,"sex4":0,"sex5":"0","amount":76566532,"bankCard":"6200000100000001","age":30,"age1":"30","region":[1,1,5],"rate":0,"rate1":"0","state":"","address":"vxe-table 从入门到放弃 - 地址1","address2":"地址 地址地址 地址1","img":"static/other/img1.gif","img1":"","html1":"","html2":"","html3":"1 -> <span style=\"color:red;\">我是一段Html代码</span><span style=\"color:blue;\">vxe-table 从入门到放弃1</span><span style=\"color:green;\">绿到你发慌！</span><br><span style=\"color:green;\">绿到你发慌！</span><br><span style=\"color:green;\">我是一段Html代码,我是一段Html代码，我是一段Html代码，绿到你发慌！</span><br><span style=\"color:red;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style=\"color:red;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style=\"color:green;\">我是一段Html代码,我是一段Html代码，我是一段Html代码</span>","text":"1 -> 徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv徐蒋赵嬴杨杜老马项蔡雷孙胡钱徐李叼吕TdHpUbkzNxcaseGrfv","updateTime":1581053094299,"createTime":1581053094299,"attr1":"","attr2":[],"attr3":"1","attr4":"","attr5":0,"loading":false,"info":{"name2":"name2_1","more":{"sex2":"0","age2":30}},"_XID":"row_2"},
],
selectRow: null,
showEdit: false,
sexList: [
{ label: '', value: '' },
{ label: '女', value: '0' },
{ label: '男', value: '1' }
],
formData: null,
formRules: {
name: [
{ required: true, message: '请输入名称' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符' }
],
nickname: [
{ required: true, message: '请输入昵称' }
],
sex: [
{ required: true, message: '请选择性别' }
]
}
}
},
created () {
this.tableData = window.MOCK_DATA_LIST.slice(0, 20)
},
created() {
this.tableData = window.MOCK_DATA_LIST.slice(0, 20);
methods: {
formatterSex ({ cellValue }) {
let item = this.sexList.find(item => item.value === cellValue)
return item ? item.label : ''
},
editEvent (row) {
this.formData = {
name: row.name,
nickname: row.nickname,
role: row.role,
sex: row.sex,
age: row.age,
num: row.num,
date3: row.date3,
address: row.address
}
this.showEdit = true
},
submitEvent () {
this.showEdit = false
this.$XModal.message({ message: '保存成功', status: 'success' })
Object.assign(this.selectRow, this.formData)
}
}
};
</script>
......
vue.config.js
View file @ d6849564
......@@ -8,7 +8,8 @@ module.exports = {
}
},
devServer: {
// host: 'www.B2B.com',
host: 'crmyx.oytour.com',
port: 8080,
},
externals: [
'BMap',
......
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