Commit f049cbf9 authored by rex's avatar rex

Merge branch 'dev' into 'master'

Dev

See merge request !2
parents e053a46c cffd6bda
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
"new": "plop", "new": "plop",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml", "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"test:unit": "jest --clearCache && vue-cli-service test:unit", "test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit" "test:ci": "npm run lint && npm run test:unit",
"start": "node node_modules/@sap/approuter/approuter.js"
}, },
"dependencies": { "dependencies": {
"axios": "0.18.1", "axios": "0.18.1",
...@@ -49,7 +50,8 @@ ...@@ -49,7 +50,8 @@
"vue-splitpane": "1.0.4", "vue-splitpane": "1.0.4",
"vuedraggable": "2.20.0", "vuedraggable": "2.20.0",
"vuex": "3.1.0", "vuex": "3.1.0",
"xlsx": "0.14.1" "xlsx": "0.14.1",
"@sap/approuter": "^9.1.0"
}, },
"devDependencies": { "devDependencies": {
"@fullcalendar/core": "^5.9.0", "@fullcalendar/core": "^5.9.0",
......
import request from '@/utils/request' import request from '@/utils/request'
// 客户模块 // 代理商模块
export const customer = { export const customer = {
createUrl: '/customer/create', createUrl: '/customer/create',
searchUrl: '/customer/search', searchUrl: '/customer/search',
detailUrl: '/customer/getOne', detailUrl: '/customer/getOne',
updateUrl: '/customer/update', updateUrl: '/customer/update',
deleteUrl: '/customer/delete', deleteUrl: '/customer/delete',
endFollowUrl: '/customer/endFollowup', // 取消跟进
toPoolUrl: '/customer/toResourcePool' // 移入资源池
} }
// 客户发布记录 // 查询全部代理商数据
export const releaseRecord = { export function getAllData(data) {
createUrl: '/releaserecord/create',
searchUrl: '/releaserecord/search',
updateUrl: '/releaserecord/update',
customerListUrl: '/releaserecord/searchCustomerDetail' // 客户清单查询
}
// 客户申请记录
export const applicationRecord = {
searchUrl: '/releaserecord/searchApplicationRecordDetail',
createUrl: '/releaserecord/createApplicationRecord'
}
// 客户审批记录
export const approvalRecord = {
searchUrl: '/releaserecord/searchApplicationRecordDetail',
createUrl: '/releaserecord/applicationRecordApproval',
updateUrl: '/releaserecord/updateApplicationRecord'
}
// 查询客户详情
export function fetchPotentialCustomerDetail(data) {
return request({
url: '/customer/getOne',
method: 'post',
data
})
}
// 新增客户基本信息
export function addPotentialCustomer(data) {
return request({
url: '/customer/create',
method: 'POST',
data
})
}
// 更新客户基本信息
export function updatePotentialCustomer(data) {
return request({
url: '/customer/update',
method: 'post',
data
})
}
// 一级分类
export function fetchFirstLevelClassification() {
return request({
method: 'post',
url: '/levelClassification/searchAllOne'
})
}
// 二级分类
export function fetchSecondLevelClassification(data) {
return request({
method: 'post',
url: '/levelClassification/searchAllTwo',
data
})
}
// 三级分类
export function fetchThirdLevelClassification(data) {
return request({ return request({
url: '/customer/search',
method: 'post', method: 'post',
url: '/levelClassification/searchThree',
data data
}) })
} }
// // 客户发布记录
// 客户项目信息 // export const releaseRecord = {
export const project = { // createUrl: '/releaserecord/create',
createUrl: '/project/create', // searchUrl: '/releaserecord/search',
searchUrl: '/project/search', // updateUrl: '/releaserecord/update',
detailUrl: '/project/getOne', // customerListUrl: '/releaserecord/searchCustomerDetail' // 客户清单查询
updateUrl: '/project/update', // }
deleteUrl: '/project/delete'
} // // 客户申请记录
// export const applicationRecord = {
// 客户市场信息 // searchUrl: '/releaserecord/searchApplicationRecordDetail',
export const market = { // createUrl: '/releaserecord/createApplicationRecord'
createUrl: '/market/create', // }
searchUrl: '/market/search',
// detailUrl: '/market/getOne', // // 客户审批记录
updateUrl: '/market/update', // export const approvalRecord = {
deleteUrl: '/market/delete' // searchUrl: '/releaserecord/searchApplicationRecordDetail',
} // createUrl: '/releaserecord/applicationRecordApproval',
// updateUrl: '/releaserecord/updateApplicationRecord'
// 客户地址信息 // }
export const address = {
createUrl: '/address/createByCustomer', // // 查询客户详情
searchUrl: '/address/search', // export function fetchPotentialCustomerDetail(data) {
// detailUrl: '/address/getOne', // return request({
updateUrl: '/address/update', // url: '/customer/getOne',
deleteUrl: '/address/delete' // method: 'post',
} // data
// })
// 客户联系人信息 // }
export const contact = {
createUrl: '/contact/create', // // 新增客户基本信息
searchUrl: '/contact/search', // export function addPotentialCustomer(data) {
// detailUrl: '/contact/getOne', // return request({
updateUrl: '/contact/update' // url: '/customer/create',
// deleteUrl: '/contact/delete' // method: 'POST',
} // data
// })
// 客户行业信息 // }
export const industry = {
createUrl: '/industry/create', // // 更新客户基本信息
searchUrl: '/industry/search', // export function updatePotentialCustomer(data) {
// detailUrl: '/industry/getOne', // return request({
updateUrl: '/industry/update', // url: '/customer/update',
deleteUrl: '/industry/delete' // method: 'post',
} // data
// })
// 客户督办 // }
export const supervise = {
createUrl: '/supervisiontask/create', // // 一级分类
searchUrl: '/supervisiontask/search', // export function fetchFirstLevelClassification() {
// detailUrl: '/supervisiontask/getOne', // return request({
updateUrl: '/supervisiontask/update', // method: 'post',
deleteUrl: '/supervisiontask/delete' // url: '/levelClassification/searchAllOne'
} // })
// }
// 客户跟进记录
export const followRecord = { // // 二级分类
createUrl: '/followupRecord/create', // export function fetchSecondLevelClassification(data) {
searchUrl: '/followupRecord/search' // return request({
} // method: 'post',
// url: '/levelClassification/searchAllTwo',
// 客户跟进任务 // data
export const followTask = { // })
createUrl: '/task/create', // }
searchUrl: '/task/search',
detailUrl: '/task/getOne', // // 三级分类
updateUrl: '/task/update', // export function fetchThirdLevelClassification(data) {
// deleteUrl: '/task/delete' // return request({
} // method: 'post',
// url: '/levelClassification/searchThree',
// 客户开票 // data
export const billing = { // })
createUrl: '/billing/create', // }
searchUrl: '/billing/search',
// detailUrl: '/billing/getOne', // // 客户项目信息
updateUrl: '/billing/update', // export const project = {
deleteUrl: '/billing/delete' // createUrl: '/project/create',
} // searchUrl: '/project/search',
// detailUrl: '/project/getOne',
// 客户商务交货说明 // updateUrl: '/project/update',
export const deliveryinstruction = { // deleteUrl: '/project/delete'
createUrl: '/deliveryinstruction/create', // }
searchUrl: '/deliveryinstruction/search',
// detailUrl: '/deliveryinstruction/getOne', // // 客户市场信息
updateUrl: '/deliveryinstruction/update', // export const market = {
deleteUrl: '/deliveryinstruction/delete' // createUrl: '/market/create',
} // searchUrl: '/market/search',
// // detailUrl: '/market/getOne',
// 客户银行 // updateUrl: '/market/update',
export const customerBank = { // deleteUrl: '/market/delete'
createUrl: '/customerBank/create', // }
searchUrl: '/customerBank/searchAll',
// detailUrl: '/customerBank/getOne', // // 客户地址信息
updateUrl: '/customerBank/update', // export const address = {
deleteUrl: '/customerBank/delete' // createUrl: '/address/createByCustomer',
} // searchUrl: '/address/search',
// // detailUrl: '/address/getOne',
// 客户收付款银行 // updateUrl: '/address/update',
export const collectionAndPaymentbank = { // deleteUrl: '/address/delete'
createUrl: '/collectionAndPaymentbank/create', // }
searchUrl: '/collectionAndPaymentbank/searchAll',
// detailUrl: '/collectionAndPaymentbank/getOne', // // 客户联系人信息
updateUrl: '/collectionAndPaymentbank/update', // export const contact = {
deleteUrl: '/collectionAndPaymentbank/delete' // createUrl: '/contact/create',
} // searchUrl: '/contact/search',
// // detailUrl: '/contact/getOne',
// 客户付款条件 // updateUrl: '/contact/update'
export const paymentTerm = { // // deleteUrl: '/contact/delete'
createUrl: '/paymentTerm/create', // }
searchUrl: '/paymentTerm/searchAll',
// detailUrl: '/paymentTerm/getOne', // // 客户行业信息
updateUrl: '/paymentTerm/update', // export const industry = {
deleteUrl: '/paymentTerm/delete' // createUrl: '/industry/create',
} // searchUrl: '/industry/search',
// // detailUrl: '/industry/getOne',
// 客户付款明细 // updateUrl: '/industry/update',
export const paymentTermDetail = { // deleteUrl: '/industry/delete'
searchUrl: '/paymentTerm/searchAllDetail', // }
updateUrl: '/paymentTerm/updateDetail'
} // // 客户督办
// export const supervise = {
// 客户附件 // createUrl: '/supervisiontask/create',
export const file = { // searchUrl: '/supervisiontask/search',
createUrl: '/file/create', // // detailUrl: '/supervisiontask/getOne',
searchUrl: '/file/search', // updateUrl: '/supervisiontask/update',
detailUrl: '/file/getOne', // deleteUrl: '/supervisiontask/delete'
updateUrl: '/file/update', // }
deleteUrl: '/file/delete',
deleteDetailUrl: '/file/deleteDetail' // // 客户跟进记录
} // export const followRecord = {
// createUrl: '/followupRecord/create',
export const businessLog = { // searchUrl: '/followupRecord/search'
searchUrl: '/businessLog/search' // }
}
// // 客户跟进任务
// export const followTask = {
// createUrl: '/task/create',
// searchUrl: '/task/search',
// detailUrl: '/task/getOne',
// updateUrl: '/task/update',
// // deleteUrl: '/task/delete'
// }
// // 客户开票
// export const billing = {
// createUrl: '/billing/create',
// searchUrl: '/billing/search',
// // detailUrl: '/billing/getOne',
// updateUrl: '/billing/update',
// deleteUrl: '/billing/delete'
// }
// // 客户商务交货说明
// export const deliveryinstruction = {
// createUrl: '/deliveryinstruction/create',
// searchUrl: '/deliveryinstruction/search',
// // detailUrl: '/deliveryinstruction/getOne',
// updateUrl: '/deliveryinstruction/update',
// deleteUrl: '/deliveryinstruction/delete'
// }
// // 客户银行
// export const customerBank = {
// createUrl: '/customerBank/create',
// searchUrl: '/customerBank/searchAll',
// // detailUrl: '/customerBank/getOne',
// updateUrl: '/customerBank/update',
// deleteUrl: '/customerBank/delete'
// }
// // 客户收付款银行
// export const collectionAndPaymentbank = {
// createUrl: '/collectionAndPaymentbank/create',
// searchUrl: '/collectionAndPaymentbank/searchAll',
// // detailUrl: '/collectionAndPaymentbank/getOne',
// updateUrl: '/collectionAndPaymentbank/update',
// deleteUrl: '/collectionAndPaymentbank/delete'
// }
// // 客户付款条件
// export const paymentTerm = {
// createUrl: '/paymentTerm/create',
// searchUrl: '/paymentTerm/searchAll',
// // detailUrl: '/paymentTerm/getOne',
// updateUrl: '/paymentTerm/update',
// deleteUrl: '/paymentTerm/delete'
// }
// // 客户付款明细
// export const paymentTermDetail = {
// searchUrl: '/paymentTerm/searchAllDetail',
// updateUrl: '/paymentTerm/updateDetail'
// }
// // 客户附件
// export const file = {
// createUrl: '/file/create',
// searchUrl: '/file/search',
// detailUrl: '/file/getOne',
// updateUrl: '/file/update',
// deleteUrl: '/file/delete',
// deleteDetailUrl: '/file/deleteDetail'
// }
// export const businessLog = {
// searchUrl: '/businessLog/search'
// }
export const Qcc = {
searchUrl: '/qcc/search',
detailUrl: '/qcc/getOne'
}
export const Country = {
searchPro: '/province/searchAll',
searchCity: '/city/searchAll',
searchDis: '/district/searchAll'
}
export const Customer = {
searchUrl: '/customer/create',
}
...@@ -16,12 +16,12 @@ ...@@ -16,12 +16,12 @@
icon="el-icon-refresh-right" icon="el-icon-refresh-right"
@click="handleReset" @click="handleReset"
>重置</el-button> >重置</el-button>
<el-button <!-- <el-button
v-if="showAdvancedFilter" v-if="showAdvancedFilter"
type="text" type="text"
icon="el-icon-set-up" icon="el-icon-set-up"
@click="handleOpenDialog" @click="handleOpenDialog"
>高级筛选</el-button> >高级筛选</el-button> -->
</template> </template>
</ele-form> </ele-form>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
</div> </div>
<div class="right-btn"> <div class="right-btn">
<slot name="right" /> <slot name="right" />
<template v-if="showConfig"> <!-- <template v-if="showConfig">
<el-button <el-button
plain plain
icon="el-icon-set-up" icon="el-icon-set-up"
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
icon="el-icon-sort" icon="el-icon-sort"
@click="handleSort" @click="handleSort"
>排序</el-button> >排序</el-button>
</template> </template> -->
</div> </div>
</div> </div>
</template> </template>
......
...@@ -66,9 +66,9 @@ export default { ...@@ -66,9 +66,9 @@ export default {
externalLink: '外链', externalLink: '外链',
profile: '个人中心', profile: '个人中心',
customers: '客户', customers: '代理商',
potentialCustomers: '潜在客户', potentialCustomers: '省级代理商管理',
regularCustomers: '正式客户', regularCustomers: '城市级代理商管理',
enterpriseCustomers: '企业客户', enterpriseCustomers: '企业客户',
products: '产品', products: '产品',
......
...@@ -25,7 +25,7 @@ import customersRouter from './modules/customers' ...@@ -25,7 +25,7 @@ import customersRouter from './modules/customers'
// import flowRouter from './modules/flow' // import flowRouter from './modules/flow'
// import quotedPriceRouter from './modules/quotedPrice' // import quotedPriceRouter from './modules/quotedPrice'
// import invoiceRouter from './modules/invoice' // import invoiceRouter from './modules/invoice'
import messageRouter from './modules/message' // import messageRouter from './modules/message'
/** /**
* Note: sub-menu only appear when route children.length >= 1 * Note: sub-menu only appear when route children.length >= 1
...@@ -172,7 +172,7 @@ export const asyncRoutes = [ ...@@ -172,7 +172,7 @@ export const asyncRoutes = [
// forecastRouter, // forecastRouter,
// nestedRouter, // nestedRouter,
// flowRouter, // flowRouter,
messageRouter, // messageRouter,
// { // {
// path: '/permission', // path: '/permission',
// component: Layout, // component: Layout,
......
...@@ -13,91 +13,100 @@ const customersRouter = { ...@@ -13,91 +13,100 @@ const customersRouter = {
icon: 'user' icon: 'user'
}, },
children: [ children: [
// 总代理商管理
{ {
path: 'overview', path: '/overview',
component: () => import('@/views/customers/customers-overview'), component: () => import('@/views/customers/customers-overview'),
name: 'CustomersOverview', name: 'CustomersOverview',
meta: { title: '客户总览' } meta: { title: '总代理商管理' }
}, },
// 添加新代理商
{ {
path: 'potential', path: '/customersAdd',
component: () => import('@/views/customers/customers-add'),
name: 'CustomersAdd',
meta: {title: '代理商新增'},
hidden: true,
},
{
path: '/potential',
component: () => import('@/views/customers/potential-customers'), component: () => import('@/views/customers/potential-customers'),
name: 'PotentialCustomers', name: 'PotentialCustomers',
meta: { title: 'potentialCustomers' } meta: { title: 'potentialCustomers' }
}, },
{ {
path: 'regular', path: '/regular',
component: () => import('@/views/customers/regular-customers'), component: () => import('@/views/customers/regular-customers'),
name: 'RegularCustomers', name: 'RegularCustomers',
meta: { title: 'regularCustomers' } meta: { title: 'regularCustomers' }
}, },
{ // {
path: 'resource', // path: 'resource',
meta: { title: '资源池管理' }, // meta: { title: '资源池管理' },
component: () => import('@/views/customers/resource'), // component: () => import('@/views/customers/resource'),
redirect: '/customers/resource/pool', // redirect: '/customers/resource/pool',
name: 'ResourceManagement', // name: 'ResourceManagement',
children: [ // children: [
{ // {
path: 'pool', // path: 'pool',
component: () => import('@/views/customers/resource-pool'), // component: () => import('@/views/customers/resource-pool'),
name: 'ResourcePool', // name: 'ResourcePool',
meta: { title: '资源池' } // meta: { title: '资源池' }
}, // },
{ // {
path: 'release', // path: 'release',
component: () => import('@/views/customers/release-record'), // component: () => import('@/views/customers/release-record'),
name: 'ReleaseRecord', // name: 'ReleaseRecord',
meta: { title: '发布记录' } // meta: { title: '发布记录' }
}, // },
{ // {
path: 'release-detail', // path: 'release-detail',
component: () => import('@/views/customers/release-record/detail'), // component: () => import('@/views/customers/release-record/detail'),
name: 'ReleaseDetail', // name: 'ReleaseDetail',
hidden: true, // hidden: true,
meta: { title: '发布记录详情' } // meta: { title: '发布记录详情' }
}, // },
{ // {
path: 'detail', // path: 'detail',
component: () => import('@/views/customers/resource-detail/detail.vue'), // component: () => import('@/views/customers/resource-detail/detail.vue'),
name: 'ResourceDetail', // name: 'ResourceDetail',
meta: { title: '资源池客户详情' }, // meta: { title: '资源池客户详情' },
hidden: true // hidden: true
}, // },
{ // {
path: 'application', // path: 'application',
component: () => import('@/views/customers/application-record'), // component: () => import('@/views/customers/application-record'),
name: 'ApplicationRecord', // name: 'ApplicationRecord',
meta: { title: '申请记录' } // meta: { title: '申请记录' }
}, // },
{ // {
path: 'application-detail', // path: 'application-detail',
component: () => import('@/views/customers/application-record/detail.vue'), // component: () => import('@/views/customers/application-record/detail.vue'),
name: 'ApplicationDetail', // name: 'ApplicationDetail',
hidden: true, // hidden: true,
meta: { title: '申请记录详情' } // meta: { title: '申请记录详情' }
}, // },
{ // {
path: 'approval', // path: 'approval',
component: () => import('@/views/customers/approval-record'), // component: () => import('@/views/customers/approval-record'),
name: 'ApprovalRecord', // name: 'ApprovalRecord',
meta: { title: '审批记录' } // meta: { title: '审批记录' }
}, // },
{ // {
path: 'approval-detail', // path: 'approval-detail',
component: () => import('@/views/customers/approval-record/detail'), // component: () => import('@/views/customers/approval-record/detail'),
name: 'ApprovalDetail', // name: 'ApprovalDetail',
hidden: true, // hidden: true,
meta: { title: '审批记录详情' } // meta: { title: '审批记录详情' }
}, // },
{ // {
path: 'contact', // path: 'contact',
component: () => import('@/views/customers/contact'), // component: () => import('@/views/customers/contact'),
name: 'Contact', // name: 'Contact',
meta: { title: '联系人' } // meta: { title: '联系人' }
}, // },
] // ]
}, // },
{ {
path: 'enterprise', path: 'enterprise',
component: () => import('@/views/customers/enterprise-customers'), component: () => import('@/views/customers/enterprise-customers'),
......
// import dictionary from '@/api/dictionary'
const adressConfig = {
labelPosition: 'left',
isShowBackBtn: false,
isShowSubmitBtn: true,
formDesc: {
Name: {
type: 'select',
label: '省份',
layout: 24
},
ExtSecondName_SDK: {
type: 'input',
label: '城市',
layout: 12,
},
ExtSocialUnifiedCreditCode_SDK: {
type: 'input',
label: '县市',
layout: 12
},
ExtAddressDetail_SDK: {
type: 'input',
label: '详细经营地址',
layout: 12,
},
}
}
export default { adressConfig }
<template>
<div>
<!-- <Title :title="title">
<span>*</span>为必填项
</Title> -->
<div class="form-container">
<form-title :title="formTitle" />
<ele-form
ref="form"
v-model="formData"
v-bind="basicConfig"
>
<template v-slot:form-btn>
<el-button
type="primary"
icon="el-icon-right"
:loading="loading"
@click="handleSubmit"
>保存提交</el-button>
</template>
</ele-form>
</div>
</div>
</template>
<script>
import Title from '@/components/Title'
import formConfig from './constant'
export default {
components: {
Title
},
props: {
// 状态判断是由那个页面跳转
status: {
type: String,
default: ''
},
formList: {
type: Object,
default: Function
}
},
data() {
return {
// title: '报价申请',
formTitle: '基础信息',
loading: false,
formData: {},
basicConfig: formConfig.basicConfig,
adressConfig: formConfig.adressConfig
}
},
// watch: {
// formList() {
// this.formData = this.formList
// },
// status: {
// handler(newVal) {
// console.log(newVal)
// },
// immediate: true,
// deep: true
// }
// },
// mounted() {
// // 判断是有那个页面跳转,一个是从报价新增按钮一个是从商机
// if (this.status === '新增') {
// this.formData = {
// Ext_QuoteType_KUT: '预备货报价',
// Ext_QuoteStatus_KUT: '101'
// }
// this.formConfig.formDesc.ProductRecipientPartyName.disabled = false
// } else {
// this.formData = {
// Ext_QuoteType_KUT: '普通报价',
// Ext_QuoteStatus_KUT: '101'
// }
// }
// },
methods: {
// handleSubmit() {
// // console.log('跳转')
// this.stepBmit()
// },
// stepBmit() {
// // 将表单中的存储的数据返回
// this.$emit('changeComponent', 'productInforma', this.formData)
// }
}
}
</script>
<style>
</style>
\ No newline at end of file
// import dictionary from '@/api/dictionary'
const basicConfig = {
labelPosition: 'left',
isShowBackBtn: false,
isShowSubmitBtn: true,
formDesc: {
Name: {
type: 'lov',
label: '公司企称',
layout: 24
},
ExtSecondName_SDK: {
type: 'input',
label: '公司企称曾用名',
layout: 12,
},
ExtSocialUnifiedCreditCode_SDK: {
type: 'input',
label: '社会统一信用代码',
layout: 12
},
ExtRegisteredCapital_SDK: {
type: 'input',
label: '注册资本(万元)',
layout: 12,
},
ExtCorporateName_SDK: {
type: 'input',
label: '法人',
layout: 12,
},
// Ext_QuoteOppotunity_KUT: {
// type: 'input',
// label: '税务登记编号',
// layout: 12
// },
ExtAddressDetail_SDK: {
type: 'input',
label: '详细经营地址',
layout: 12,
},
}
}
export default { basicConfig }
<template>
<div>
<!-- <Title :title="title">
<span>*</span>为必填项
</Title> -->
<div class="form-container">
<form-title :title="formTitle" />
<ele-form
ref="form"
v-model="formData"
v-bind="basicConfig"
>
<template v-slot:form-btn>
<el-button
type="primary"
icon="el-icon-right"
:loading="loading"
@click="handleSubmit"
>保存提交</el-button>
</template>
</ele-form>
</div>
</div>
</template>
<script>
import Title from '@/components/Title'
import formConfig from './constant'
export default {
components: {
Title
},
props: {
// 状态判断是由那个页面跳转
status: {
type: String,
default: ''
},
formList: {
type: Object,
default: Function
}
},
data() {
return {
// title: '报价申请',
formTitle: '基础信息',
loading: false,
formData: {},
basicConfig: formConfig.basicConfig,
adressConfig: formConfig.adressConfig
}
},
// watch: {
// formList() {
// this.formData = this.formList
// },
// status: {
// handler(newVal) {
// console.log(newVal)
// },
// immediate: true,
// deep: true
// }
// },
// mounted() {
// // 判断是有那个页面跳转,一个是从报价新增按钮一个是从商机
// if (this.status === '新增') {
// this.formData = {
// Ext_QuoteType_KUT: '预备货报价',
// Ext_QuoteStatus_KUT: '101'
// }
// this.formConfig.formDesc.ProductRecipientPartyName.disabled = false
// } else {
// this.formData = {
// Ext_QuoteType_KUT: '普通报价',
// Ext_QuoteStatus_KUT: '101'
// }
// }
// },
methods: {
// handleSubmit() {
// // console.log('跳转')
// this.stepBmit()
// },
// stepBmit() {
// // 将表单中的存储的数据返回
// this.$emit('changeComponent', 'productInforma', this.formData)
// }
}
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<div>
</div>
</template>
<script>
import basicConfig from './components/basic-config/index'
export default {
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
}
}],
series: [{
name: 'pageA',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [79, 52, 200, 334, 390, 330, 220],
animationDuration
}, {
name: 'pageB',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [80, 52, 200, 334, 390, 330, 220],
animationDuration
}, {
name: 'pageC',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [30, 52, 200, 334, 390, 330, 220],
animationDuration
}]
})
}
}
}
</script>
<template>
<el-row
:gutter="40"
class="panel-group"
>
<el-col
:xs="12"
:sm="12"
:lg="6"
class="card-panel-col"
>
<div
class="card-panel"
@click="handleSetLineChartData('newVisitis')"
>
<div class="card-panel-icon-wrapper icon-people">
<svg-icon
icon-class="peoples"
class-name="card-panel-icon"
/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
New Visits
</div>
<count-to
:start-val="0"
:end-val="102400"
:duration="2600"
class="card-panel-num"
/>
</div>
</div>
</el-col>
<el-col
:xs="12"
:sm="12"
:lg="6"
class="card-panel-col"
>
<div
class="card-panel"
@click="handleSetLineChartData('messages')"
>
<div class="card-panel-icon-wrapper icon-message">
<svg-icon
icon-class="message"
class-name="card-panel-icon"
/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
Messages
</div>
<count-to
:start-val="0"
:end-val="81212"
:duration="3000"
class="card-panel-num"
/>
</div>
</div>
</el-col>
<el-col
:xs="12"
:sm="12"
:lg="6"
class="card-panel-col"
>
<div
class="card-panel"
@click="handleSetLineChartData('purchases')"
>
<div class="card-panel-icon-wrapper icon-money">
<svg-icon
icon-class="money"
class-name="card-panel-icon"
/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
Purchases
</div>
<count-to
:start-val="0"
:end-val="9280"
:duration="3200"
class="card-panel-num"
/>
</div>
</div>
</el-col>
<el-col
:xs="12"
:sm="12"
:lg="6"
class="card-panel-col"
>
<div
class="card-panel"
@click="handleSetLineChartData('shoppings')"
>
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon
icon-class="shopping"
class-name="card-panel-icon"
/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
Shoppings
</div>
<count-to
:start-val="0"
:end-val="13600"
:duration="3600"
class="card-panel-num"
/>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
components: {
CountTo
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
}
}
</script>
<style lang="scss" scoped>
.panel-group {
.card-panel-col {
margin-bottom: 20px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shopping {
background: #34bfa3;
}
}
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3;
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
@media (max-width: 550px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
</style>
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
bottom: '10',
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
},
series: [
{
name: 'WEEKLY WRITE ARTICLES',
type: 'pie',
roseType: 'radius',
radius: [15, 95],
center: ['50%', '38%'],
data: [
{ value: 320, name: 'Industries' },
{ value: 240, name: 'Technology' },
{ value: 149, name: 'Forex' },
{ value: 100, name: 'Gold' },
{ value: 59, name: 'Forecasts' }
],
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
})
}
}
}
</script>
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 3000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
radar: {
radius: '66%',
center: ['50%', '42%'],
splitNumber: 8,
splitArea: {
areaStyle: {
color: 'rgba(127,95,132,.3)',
opacity: 1,
shadowBlur: 45,
shadowColor: 'rgba(0,0,0,.5)',
shadowOffsetX: 0,
shadowOffsetY: 15
}
},
indicator: [
{ name: 'Sales', max: 10000 },
{ name: 'Administration', max: 20000 },
{ name: 'Information Technology', max: 20000 },
{ name: 'Customer Support', max: 20000 },
{ name: 'Development', max: 20000 },
{ name: 'Marketing', max: 20000 }
]
},
legend: {
left: 'center',
bottom: '10',
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
},
series: [{
type: 'radar',
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1
}
},
data: [
{
value: [5000, 7000, 12000, 11000, 15000, 14000],
name: 'Allocated Budget'
},
{
value: [4000, 9000, 15000, 15000, 13000, 11000],
name: 'Expected Spending'
},
{
value: [5500, 11000, 12000, 15000, 12000, 12000],
name: 'Actual Spending'
}
],
animationDuration: animationDuration
}]
})
}
}
}
</script>
<template>
<li :class="{ completed: todo.done, editing: editing }" class="todo">
<div class="view">
<input
:checked="todo.done"
class="toggle"
type="checkbox"
@change="toggleTodo( todo)"
>
<label @dblclick="editing = true" v-text="todo.text" />
<button class="destroy" @click="deleteTodo( todo )" />
</div>
<input
v-show="editing"
v-focus="editing"
:value="todo.text"
class="edit"
@keyup.enter="doneEdit"
@keyup.esc="cancelEdit"
@blur="doneEdit"
>
</li>
</template>
<script>
export default {
name: 'Todo',
directives: {
focus(el, { value }, { context }) {
if (value) {
context.$nextTick(() => {
el.focus()
})
}
}
},
props: {
todo: {
type: Object,
default: function() {
return {}
}
}
},
data() {
return {
editing: false
}
},
methods: {
deleteTodo(todo) {
this.$emit('deleteTodo', todo)
},
editTodo({ todo, value }) {
this.$emit('editTodo', { todo, value })
},
toggleTodo(todo) {
this.$emit('toggleTodo', todo)
},
doneEdit(e) {
const value = e.target.value.trim()
const { todo } = this
if (!value) {
this.deleteTodo({
todo
})
} else if (this.editing) {
this.editTodo({
todo,
value
})
this.editing = false
}
},
cancelEdit(e) {
e.target.value = this.todo.text
this.editing = false
}
}
}
</script>
.todoapp {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto ;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
background: #fff;
z-index: 1;
position: relative;
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:focus {
outline: 0;
}
.hidden {
display: none;
}
.todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 18px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.new-todo {
padding: 10px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}
.main {
position: relative;
z-index: 2;
border-top: 1px solid #e6e6e6;
}
.toggle-all {
text-align: center;
border: none;
/* Mobile Safari */
opacity: 0;
position: absolute;
}
.toggle-all+label {
width: 60px;
height: 34px;
font-size: 0;
position: absolute;
top: -52px;
left: -13px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toggle-all+label:before {
content: '❯';
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
}
.toggle-all:checked+label:before {
color: #737373;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px solid #ededed;
}
.todo-list li:last-child {
border-bottom: none;
}
.todo-list li.editing {
border-bottom: none;
padding: 0;
}
.todo-list li.editing .edit {
display: block;
width: 506px;
padding: 12px 16px;
margin: 0 0 0 43px;
}
.todo-list li.editing .view {
display: none;
}
.todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border: none;
/* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
.todo-list li .toggle {
opacity: 0;
}
.todo-list li .toggle+label {
/*
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
*/
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center left;
background-size: 36px;
}
.todo-list li .toggle:checked+label {
background-size: 36px;
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}
.todo-list li label {
word-break: break-all;
padding: 15px 15px 15px 50px;
display: block;
line-height: 1.0;
font-size: 14px;
transition: color 0.4s;
}
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
.todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
transition: color 0.2s ease-out;
cursor: pointer;
}
.todo-list li .destroy:hover {
color: #af5b5e;
}
.todo-list li .destroy:after {
content: '×';
}
.todo-list li:hover .destroy {
display: block;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing:last-child {
margin-bottom: -1px;
}
.footer {
color: #777;
position: relative;
padding: 10px 15px;
height: 40px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
.footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 40px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
.todo-count {
float: left;
text-align: left;
}
.todo-count strong {
font-weight: 300;
}
.filters {
margin: 0;
padding: 0;
position: relative;
z-index: 1;
list-style: none;
}
.filters li {
display: inline;
}
.filters li a {
color: inherit;
font-size: 12px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
}
.filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
.clear-completed,
html .clear-completed:active {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
cursor: pointer;
}
.clear-completed:hover {
text-decoration: underline;
}
.info {
margin: 65px auto 0;
color: #bfbfbf;
font-size: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-align: center;
}
.info p {
line-height: 1;
}
.info a {
color: inherit;
text-decoration: none;
font-weight: 400;
}
.info a:hover {
text-decoration: underline;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.toggle-all,
.todo-list li .toggle {
background: none;
}
.todo-list li .toggle {
height: 40px;
}
}
@media (max-width: 430px) {
.footer {
height: 50px;
}
.filters {
bottom: 10px;
}
}
}
<template>
<section class="todoapp">
<!-- header -->
<header class="header">
<input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
</header>
<!-- main section -->
<section v-show="todos.length" class="main">
<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
<label for="toggle-all" />
<ul class="todo-list">
<todo
v-for="(todo, index) in filteredTodos"
:key="index"
:todo="todo"
@toggleTodo="toggleTodo"
@editTodo="editTodo"
@deleteTodo="deleteTodo"
/>
</ul>
</section>
<!-- footer -->
<footer v-show="todos.length" class="footer">
<span class="todo-count">
<strong>{{ remaining }}</strong>
{{ remaining | pluralize('item') }} left
</span>
<ul class="filters">
<li v-for="(val, key) in filters" :key="key">
<a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
</li>
</ul>
<!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
Clear completed
</button> -->
</footer>
</section>
</template>
<script>
import Todo from './Todo.vue'
const STORAGE_KEY = 'todos'
const filters = {
all: todos => todos,
active: todos => todos.filter(todo => !todo.done),
completed: todos => todos.filter(todo => todo.done)
}
const defalutList = [
{ text: 'star this repository', done: false },
{ text: 'fork this repository', done: false },
{ text: 'follow author', done: false },
{ text: 'vue-element-admin', done: true },
{ text: 'vue', done: true },
{ text: 'element-ui', done: true },
{ text: 'axios', done: true },
{ text: 'webpack', done: true }
]
export default {
components: { Todo },
filters: {
pluralize: (n, w) => n === 1 ? w : w + 's',
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
},
data() {
return {
visibility: 'all',
filters,
// todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
todos: defalutList
}
},
computed: {
allChecked() {
return this.todos.every(todo => todo.done)
},
filteredTodos() {
return filters[this.visibility](this.todos)
},
remaining() {
return this.todos.filter(todo => !todo.done).length
}
},
methods: {
setLocalStorage() {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
},
addTodo(e) {
const text = e.target.value
if (text.trim()) {
this.todos.push({
text,
done: false
})
this.setLocalStorage()
}
e.target.value = ''
},
toggleTodo(val) {
val.done = !val.done
this.setLocalStorage()
},
deleteTodo(todo) {
this.todos.splice(this.todos.indexOf(todo), 1)
this.setLocalStorage()
},
editTodo({ todo, value }) {
todo.text = value
this.setLocalStorage()
},
clearCompleted() {
this.todos = this.todos.filter(todo => !todo.done)
this.setLocalStorage()
},
toggleAll({ done }) {
this.todos.forEach(todo => {
todo.done = done
this.setLocalStorage()
})
}
}
}
</script>
<style lang="scss">
@import './index.scss';
</style>
import { debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.$_resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
beforeDestroy() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
deactivated() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}
}
}
import i18n from '@/lang'
import { customer } from '@/api/customers'
const tableConfig = {
url: customer.searchUrl,
defaultColumns: {
minWidth: 120,
showOverflowTooltip: true,
align: 'center'
},
columns: {
// ID: {
// label: '代理商名称',
// showInSearch: true,
// type: 'input',
// fixed: 'left',
// renderItem: (h, scope, listeners) => {
// return h('el-button', {
// on: {
// click: (e) => listeners.handleDetails(scope.row)
// },
// props: {
// type: 'text'
// }
// }, scope.row.ID)
// }
// },
ExtCustomerID_SDK: {
label: '代理商编码',
type: 'input'
},
Name: {
label: '公司名称',
type: 'input'
},
ExtCorporateName_SDK: {
label: '法定人代表',
type: 'input'
},
ExtSocialUnifiedCreditCode_SDK: {
label: '统一社会信用代码',
type: 'input'
},
CreationOn: {
label: '注册时间',
type: 'input'
},
// Ext_QuoteOppotunity_KUT: {
// type: 'input',
// label: '代理商类型',
// showInSearch: true
// },
handle: {
label: '操作',
fixed: 'right',
minWidth: 100,
hideInFilter: true,
renderItem: (h, scope, listeners) => {
return h('div', [
h('el-button', {
on: {
click: (e) => listeners.handleEdit(scope.row, 'edit')
},
props: {
icon: 'el-icon-edit-outline',
type: 'text'
}
}, i18n.t('table.edit')),
// h('el-button', {
// on: {
// click: (e) => listeners.handleTakeEffect(scope.row, 'takeEffect')
// },
// props: {
// icon: 'el-icon-circle-check',
// type: 'text'
// }
// }, i18n.t('table.takeEffect')),
// h('el-button', {
// on: {
// click: (e) => listeners.handleInvalid(scope.row, 'invalid')
// },
// props: {
// icon: 'el-icon-circle-check',
// type: 'text'
// }
// }, i18n.t('table.invalid'))
])
}
}
}
}
export default tableConfig
<template> <template>
<div class="dashboard-editor-container"> <div class="app-container">
<ele-search
<panel-group @handleSetLineChartData="handleSetLineChartData" /> :columns="tableConfig.columns"
@handleSearch="handleSearch"
<el-row :gutter="32"> @handleReset="handleReset"
<el-col @handleFilter="handleFilter"
:xs="24" />
:sm="24" <div class="table-container">
:lg="8" <TableBtns>
> <template v-slot:left>
<div class="chart-wrapper"> <el-button
<raddar-chart /> type="primary"
</div> icon="el-icon-plus"
</el-col> @click="handleAdd"
<el-col >添加</el-button>
:xs="24" </template>
:sm="24" </TableBtns>
:lg="8" <ele-table
> ref="eleTable"
<div class="chart-wrapper"> v-bind="tableConfig"
<pie-chart /> :expand-params="expandParams"
</div> :listeners="tableListeners"
</el-col> @handleSelectionChange="handleSelectionChange"
<el-col />
:xs="24" </div>
:sm="24"
:lg="8"
>
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script> <script>
import PanelGroup from './components/PanelGroup' import constant from './constant'
import RaddarChart from './components/RaddarChart' import tableMixin from '@/mixins/table'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
export default { export default {
name: 'DashboardAdmin', mixins: [tableMixin],
components: { inject: ['reload'],
PanelGroup,
RaddarChart,
PieChart,
BarChart
},
data() { data() {
return { return {
lineChartData: lineChartData.newVisitis expandParams: {}, // 筛选条件
tableListeners: {}, // 事件监听对象,供ele-table内部调用
tableConfig: constant
}
},
created() {
this.tableListeners = {
// handleDetails: this.handleDetails, // 添加
// handleTakeEffect: this.handleTakeEffect, // 生效
handleEdit: this.handleEdit, // 编辑
// handleInvalid: this.handleInvalid // 失效
} }
}, },
methods: { methods: {
handleSetLineChartData(type) { // 编辑
this.lineChartData = lineChartData[type] handleEdit() {
console.log("编辑")
},
// 添加
handleAdd() {
this.$router.push({ path: '/customersAdd' })
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style>
.dashboard-editor-container {
padding: 20px;
background-color: rgb(240, 242, 245);
position: relative;
.github-corner {
position: absolute;
top: 0px;
border: 0;
right: 0;
}
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style> </style>
<template> <template>
<div class="register-container"> <div class="register-container">
<div class="register-main"> <div class="register-main">
<el-row class="border-bottom"><h4>城市代理商注册</h4></el-row> <el-row class="border-bottom">
<el-form id="registerForm" :model="formData" status-icon label-position="right"> <h4>城市代理商注册</h4>
<el-row class="border-bottom"> </el-row>
<el-form id="registerForm"
:model="formData"
status-icon
:rules="supplierBaseRules"
label-position="right">
<el-row class="border-bottom">
<el-col :span="24"> <el-col :span="24">
<el-form-item label="基本信息" /> <el-form-item label="基本信息" />
</el-col> </el-col>
<el-col :span="12" :offset="1" class="padding-bottom"> <el-col :span="13"
<el-form-item label="公司全称:" prop="name" label-width="150px" required> class="padding-bottom">
<el-input v-model="formData.name" placeholder="点击查询获取公司信息,不可编辑" disabled style="width: 80%" class="filter-item" clearable /> <el-form-item label="公司全称:"
prop="Name"
label-width="150px"
>
<el-input v-model="formData.Name"
placeholder='请选择公司'
style="width: 100%">
<i slot="suffix"
class="el-input__icon el-icon-search"
@click="createLovTable" />
</el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5" :offset="1" class="padding-bottom"> <el-col :span="11"
:offset="1"
<el-button type="primary">查询</el-button> class="padding-bottom">
<el-form-item label="公司全称曾用名:"
</el-col> label-width="150px">
<el-col :span="11" :offset="1" class="padding-bottom"> <el-input v-model="formData.extSecondName_SDK"
<el-form-item label="公司全称曾用名:" prop="shortName" label-width="150px"> placeholder=""
<el-input v-model="formData.shortName" placeholder="" style="width: 80%" class="filter-item" clearable /> style="width: 80%"
class="filter-item"
clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11" class="padding-bottom"> <el-col :span="11"
<el-form-item label="统一社会信用代码:" label-width="150px" required> class="padding-bottom">
<el-form-item label="统一社会信用代码:"
label-width="150px"
prop="extSocialUnifiedCreditCode_SDK"
>
<template> <template>
<el-input v-model="formData.englishName" placeholder="企查查获取" style="width: 80%" class="filter-item" clearable /> <el-input v-model="formData.extSocialUnifiedCreditCode_SDK"
placeholder="企查查获取"
style="width: 80%"
readonly
class="filter-item"
clearable />
</template> </template>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11" :offset="1" class="padding-bottom"> <el-col :span="11"
<el-form-item label="注册资本(万元):" label-width="150px" required> :offset="1"
<el-input v-model="formData.enterpriseCode" :disabled="inputEnter" style="width: 80%" placeholder="企查查获取" class="filter-item" clearable /> class="padding-bottom">
<el-form-item label="注册资本(万元):"
label-width="150px"
required>
<el-input v-model="formData.extRegisteredCapital_SDK"
:disabled="inputEnter"
style="width: 80%"
readonly
placeholder="企查查获取"
class="filter-item"
clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11" class="padding-bottom"> <el-col :span="11"
<el-form-item label="法人:" label-width="150px" required> class="padding-bottom">
<el-form-item label="法人:"
label-width="150px"
required>
<template> <template>
<el-input v-model="formData.enterpriseCode" :disabled="inputEnter" style="width: 80%" placeholder="企查查获取" class="filter-item" clearable /> <el-input v-model="formData.extCorporateName_SDK"
:disabled="inputEnter"
style="width: 80%"
readonly
placeholder="企查查获取"
class="filter-item"
clearable />
</template> </template>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -48,39 +95,99 @@ ...@@ -48,39 +95,99 @@
<el-col :span="24"> <el-col :span="24">
<el-form-item label="地址信息" /> <el-form-item label="地址信息" />
</el-col> </el-col>
<el-col :span="7" :offset="1" class="padding-bottom"> <el-col :span="7"
<el-form-item label="省份:" prop="cerInfo.district" label-width="80px" required> :offset="1"
<el-cascader ref="cascader" v-model="countryArea" clearable style="width: 80%"/> class="padding-bottom">
<el-form-item label="省份:"
prop="cerInfo.district"
label-width="80px"
required>
<el-select v-model="formData.extProvinceName_SDK" style="width: 91%" filterable placeholder="请选择省份" no-match-text="无匹配数据" @change="handleSelect">
<el-option
v-for="item in countryOptions"
:key="item.Code"
:label="item.Name"
:value="item.Code"
/>
</el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="7" class="padding-bottom"> <el-col :span="7"
<el-form-item label="地市:" prop="cerInfo.district" label-width="80px" required > class="padding-bottom">
<el-cascader ref="cascader" v-model="countryArea" clearablestyle="width: 80%" /> <el-form-item label="市:"
prop="cerInfo.district"
label-width="80px"
required>
<el-select v-model="formData.extCityName_SDK" style="width: 91%" filterable placeholder="请选择市" @change="handleSelectCity" >
<el-option
v-for="item in cityOptions"
:key="item.Code"
:label="item.Name"
:value="item.Code"
/>
</el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="7" class="padding-bottom"> <el-col :span="7"
<el-form-item label="县市:" prop="cerInfo.district" label-width="80px" required> class="padding-bottom">
<el-cascader ref="cascader" v-model="countryArea" clearable style="width: 80%" /> <el-form-item label="区:"
prop="cerInfo.district"
label-width="80px"
required>
<el-select v-model="formData.extDistrictName_SDK" style="width: 91%" filterable placeholder="请选择区" no-match-text="无匹配数据">
<el-option
v-for="item in disOptions"
:key="item.Code"
:label="item.Name"
:value="item.Code"
/>
</el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="20" :offset="1" class="padding-bottom"> <el-col :span="20"
<el-form-item label="详细经营地址:" label-width="150px" required> :offset="1"
<el-input v-model="formData.cerInfo" placeholder="" autocomplete="off" style="width: 80%" clearable /> class="padding-bottom">
<el-form-item label="详细经营地址:"
label-width="150px"
required>
<el-input v-model="formData.extAddressDetail_SDK"
placeholder=""
autocomplete="off"
style="width: 80%"
clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="border-bottom"> <el-row class="border-bottom">
<el-col :span="24"> <el-col :span="24">
<el-form-item label="联系信息" /> <el-form-item label="联系信息" />
</el-col> </el-col>
<el-col :span="11" :offset="1" class="padding-bottom"> <el-col :span="11"
<el-form-item label="公司负责人姓名:" prop="legalPerson" label-width="150px" required> :offset="1"
<el-input v-model="formData.legalPerson" placeholder="" style="width: 80%" class="filter-item" clearable /> class="padding-bottom">
<el-form-item label="公司负责人姓名:"
prop="legalPerson"
label-width="150px"
required>
<el-input v-model="formData.extLeader_SDK"
placeholder=""
style="width: 80%"
class="filter-item"
clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="padding-bottom"> <el-col :span="12"
<el-form-item label="公司负责人联系电话:" prop="legalEmail" label-width="160px" class="filter-icon-none" required> class="padding-bottom">
<el-input v-model="formData.legalEmail" placeholder="" style="width: 80%" class="filter-item" clearable /> <el-form-item label="公司负责人联系电话:"
prop="legalEmail"
label-width="160px"
class="filter-icon-none"
required>
<el-input v-model="formData.extLeaderPhone_SDK"
placeholder=""
style="width: 80%"
class="filter-item"
clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col v-if="showForm.legalPersonNumber" :span="7" class="padding-bottom"> <!-- <el-col v-if="showForm.legalPersonNumber" :span="7" class="padding-bottom">
...@@ -88,56 +195,142 @@ ...@@ -88,56 +195,142 @@
<el-input v-model="supplierBase.legalIdPhone" placeholder="法人手机号" style="width: 83%" class="filter-item" clearable /> <el-input v-model="supplierBase.legalIdPhone" placeholder="法人手机号" style="width: 83%" class="filter-item" clearable />
</el-form-item> </el-form-item>
</el-col> --> </el-col> -->
<el-col :span="15" :offset="1" class="padding-bottom"> <el-col :span="15"
<el-form-item label="公司负责人邮箱:" prop="legalIdCard" label-width="150px" class="filter-icon-none" required> :offset="1"
<el-input v-model="formData.legalIdCard" placeholder="" style="width: 52%" class="filter-item" clearable /> class="padding-bottom">
<el-form-item label="公司负责人邮箱:"
prop="legalIdCard"
label-width="150px"
class="filter-icon-none"
required>
<el-input v-model="formData.extLeaderEmail_SDK"
placeholder=""
style="width: 52%"
class="filter-item"
clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11" :offset="1" class="padding-bottom"> <el-col :span="11"
<el-form-item label="Unis业务负责人姓名:" prop="email" label-width="160px" required> :offset="1"
<el-input v-model="formData.email" placeholder="" style="width: 80%" class="filter-item" clearable /> class="padding-bottom">
<el-form-item label="Unis业务负责人姓名:"
prop="email"
label-width="160px"
required>
<el-input v-model="formData.extUnis_SDK"
placeholder=""
style="width: 80%"
class="filter-item"
clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11" class="padding-bottom"> <el-col :span="11"
<el-form-item label="Unis业务负责人电话:" prop="mobile" label-width="160px" required> class="padding-bottom">
<el-input v-model="formData.mobile" placeholder="" style="width: 90%" class="filter-item" clearable /> <el-form-item label="Unis业务负责人电话:"
prop="mobile"
label-width="160px"
required>
<el-input v-model="formData.extUnisPhone_SDK"
placeholder=""
style="width: 90%"
class="filter-item"
clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11" :offset="1" class="padding-bottom" > <el-col :span="11"
<el-form-item label="Unis业务负责人邮箱:" prop="financerMobile" label-width="160px" class="filter-icon-none" required> :offset="1"
<el-input v-model="formData.financerMobile" placeholder="" style="width: 80%" class="filter-item" clearable /> class="padding-bottom">
<el-form-item label="Unis业务负责人邮箱:"
prop="financerMobile"
label-width="160px"
class="filter-icon-none"
required>
<el-input v-model="formData.extUnisEmail_SDK"
placeholder=""
style="width: 80%"
class="filter-item"
clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row > <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="上传附件" /> <el-form-item label="上传附件" />
</el-col> </el-col>
<el-col :span="11" :offset="1" class="padding-bottom">
<el-form-item label="营业执照:" prop="financerMobile" label-width="100px" class="filter-icon-none" required>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload> <el-col :span="11"
:offset="1"
class="padding-bottom">
<el-form-item label="营业执照:"
prop="financerMobile"
label-width="100px"
class="filter-icon-none"
required>
<el-upload class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small"
type="primary">点击上传</el-button>
</el-upload>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<el-dialog title="请选择公司"
:visible.sync="dialogTableVisible"
width="50%"
:before-close="handleClose">
<el-form :inline="true"
:model="formInline"
class="demo-form-inline">
<el-form-item label="公司名称:">
<el-input v-model="formInline.Name"
placeholder=""></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="getList">获取企查查信息</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="reSet">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData"
border
@row-click="select"
style="width: 100%">
<el-table-column prop="Status"
label="状态">
</el-table-column>
<el-table-column prop="Name"
label="公司">
</el-table-column>
<el-table-column prop="OperName"
label="法定代表人">
</el-table-column>
<el-table-column prop="CreditCode"
label="社会统一信用代码">
</el-table-column>
</el-table>
<pagination v-show="page.TotalRecords>0"
:total="page.TotalRecords"
:page.sync="page.currentPage"
:limit.sync="page.pageSize"
@pagination="getList" />
</el-dialog>
<el-row> <el-row>
<el-col align="center"> <el-col align="center">
<el-button type="primary" @click="handleNext">提交</el-button> <el-button type="primary" @click="handleApprove">提交</el-button>
</el-col> </el-col>
</el-row> </el-row>
...@@ -146,37 +339,102 @@ ...@@ -146,37 +339,102 @@
</template> </template>
<script> <script>
import { Qcc,Country,Customer } from '@/api/qcc'
import Pagination from '@/components/Pagination'
export default { export default {
name: 'city-register', name: 'city-register',
components: {
Pagination
},
data() { data() {
return { return {
formData:{}, formData: {},
inputEnter:false, inputEnter: false,
countryArea:'', countryArea: '',
title: '城市代理商注册', title: '城市代理商注册',
loading: false, loading: false,
formInline: [],
recordList: [],
tableData: [],
fileList:[], fileList:[],
countryOptions:[],
cityOptions:[],
disOptions:[],
supplierBaseRules: { supplierBaseRules: {
name: [{ required: true, message: '请选择公司全称', trigger: ['change', 'blur'] }], Name: [{ required: true, message: '请选择公司全称', trigger: ['change'] }],
extSocialUnifiedCreditCode_SDK: [{ required: true, message: '请选择公司全称', trigger: ['change'] }],
name: [{ required: true, message: '请选择公司全称', trigger: ['change'] }],
name: [{ required: true, message: '请选择公司全称', trigger: ['change'] }],
name: [{ required: true, message: '请选择公司全称', trigger: ['change'] }],
name: [{ required: true, message: '请选择公司全称', trigger: ['change'] }],
}, },
dialogTableVisible: false,
page: {
currentPage: 0,
pageSize: 0
}
} }
}, },
watch: { watch: {
}, },
created() { created() {
this.selectCountry()
}, },
methods: { methods: {
handlePreview(){}, getList() {
handleRemove(){}, this.page.searchKey=this.formInline.Name
beforeRemove(){}, this.$request(Qcc.searchUrl, this.page).then((resp) => {
handleExceed(){}, this.tableData = resp.results.Result
fileList(){}, this.page = resp.results.Paging
handleNext(){} })
},
selectCountry(){
this.$request(Country.searchPro, this.page).then((resp) => {
this.countryOptions=resp.results
})
},
handleSelect(value){
const app={provinceCode:value}
this.$request(Country.searchCity,app).then((resp) => {
this.cityOptions=resp.results
})
},
handleSelectCity(value){
const app={cityCode:value}
this.$request(Country.searchDis,app).then((resp) => {
this.disOptions=resp.results
})
},
createLovTable() {
this.dialogTableVisible = true
},
select(row, column, event) {
this.page.searchKey=row.CreditCode
this.$request(Qcc.detailUrl, this.page).then((resp) => {
this.formData.extCorporateName_SDK = row.OperName
this.formData.extSocialUnifiedCreditCode_SDK = row.CreditCode
this.formData.Name = row.Name
this.formData.extRegisteredCapital_SDK=resp.results.Result.RegistCapi
this.dialogTableVisible = false
})
},
handleApprove(){
this.$request(Customer.searchUrl,this.formData).then((resp) => {
this.$message.success('提交成功!')
})
},
reSet() { },
handleClose() {
this.dialogTableVisible = false
},
onSubmit() { },
handlePreview() { },
handleRemove() { },
beforeRemove() { },
handleExceed() { },
handleNext() { }
} }
} }
</script> </script>
...@@ -196,6 +454,6 @@ export default { ...@@ -196,6 +454,6 @@ export default {
padding-bottom: 20px; padding-bottom: 20px;
} }
.border-bottom { .border-bottom {
border-bottom: solid 2px #409eff; border-bottom: solid 2px #a22796;
} }
</style> </style>
...@@ -50,7 +50,7 @@ module.exports = { ...@@ -50,7 +50,7 @@ module.exports = {
} }
} }
} }
}, }
}, },
port: port, port: port,
open: true, open: true,
......
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