Commit 27294a00 authored by qinj's avatar qinj

Merge branch 'dev' of http://120.25.63.219:6088/rex/portalhtml into dev

parents 94d9e1fd 52434ba7
This diff is collapsed.
...@@ -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>
......
/*
* @Descripttion:
* @Author: 薛泽展
* @Date: 2021-10-12 12:29:05
* @Since: JDK1.8
*/
import router from './router' import router from './router'
import store from './store' import store from './store'
import { Message } from 'element-ui' import { Message } from 'element-ui'
...@@ -8,7 +14,7 @@ import getPageTitle from '@/utils/get-page-title' ...@@ -8,7 +14,7 @@ import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist const whiteList = ['/prov-register', '/city-register', '/login', '/auth-redirect'] // no redirect whitelist
router.beforeEach(async(to, from, next) => { router.beforeEach(async(to, from, next) => {
// start progress bar // start progress bar
...@@ -63,11 +69,13 @@ router.beforeEach(async(to, from, next) => { ...@@ -63,11 +69,13 @@ router.beforeEach(async(to, from, next) => {
} }
} else { } else {
/* has no token*/ /* has no token*/
console.info('=========================111' + to.path)
if (whiteList.indexOf(to.path) !== -1) { if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly // in the free login whitelist, go directly
console.info('=========================2222')
next() next()
} else { } else {
console.info('=========================3333')
// other pages that do not have permission to access are redirected to the login page. // other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`) next(`/login?redirect=${to.path}`)
NProgress.done() NProgress.done()
......
...@@ -13,20 +13,29 @@ const customersRouter = { ...@@ -13,20 +13,29 @@ 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' }
......
// 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)
}
}
}
...@@ -9,21 +9,42 @@ const tableConfig = { ...@@ -9,21 +9,42 @@ const tableConfig = {
align: 'center' align: 'center'
}, },
columns: { columns: {
ID: { // ID: {
label: '代理商名称', // label: '代理商名称',
showInSearch: true, // showInSearch: true,
type: 'input', // type: 'input',
fixed: 'left', // fixed: 'left',
renderItem: (h, scope, listeners) => { // renderItem: (h, scope, listeners) => {
return h('el-button', { // return h('el-button', {
on: { // on: {
click: (e) => listeners.handleDetails(scope.row) // click: (e) => listeners.handleDetails(scope.row)
// },
// props: {
// type: 'text'
// }
// }, scope.row.ID)
// }
// },
ExtCustomerID_SDK: {
label: '代理商编码',
type: 'input'
}, },
props: { Name: {
type: 'text' label: '公司名称',
} type: 'input'
}, scope.row.ID) },
} ExtCorporateName_SDK: {
label: '法定人代表',
type: 'input'
},
ExtSocialUnifiedCreditCode_SDK: {
label: '统一社会信用代码',
type: 'input'
},
CreationOn: {
label: '注册时间',
type: 'input'
}, },
// Ext_QuoteOppotunity_KUT: { // Ext_QuoteOppotunity_KUT: {
// type: 'input', // type: 'input',
...@@ -33,7 +54,7 @@ const tableConfig = { ...@@ -33,7 +54,7 @@ const tableConfig = {
handle: { handle: {
label: '操作', label: '操作',
fixed: 'right', fixed: 'right',
minWidth: 200, minWidth: 100,
hideInFilter: true, hideInFilter: true,
renderItem: (h, scope, listeners) => { renderItem: (h, scope, listeners) => {
return h('div', [ return h('div', [
...@@ -46,24 +67,24 @@ const tableConfig = { ...@@ -46,24 +67,24 @@ const tableConfig = {
type: 'text' type: 'text'
} }
}, i18n.t('table.edit')), }, i18n.t('table.edit')),
h('el-button', { // h('el-button', {
on: { // on: {
click: (e) => listeners.handleTakeEffect(scope.row, 'takeEffect') // click: (e) => listeners.handleTakeEffect(scope.row, 'takeEffect')
}, // },
props: { // props: {
icon: 'el-icon-circle-check', // icon: 'el-icon-circle-check',
type: 'text' // type: 'text'
} // }
}, i18n.t('table.takeEffect')), // }, i18n.t('table.takeEffect')),
h('el-button', { // h('el-button', {
on: { // on: {
click: (e) => listeners.handleInvalid(scope.row, 'invalid') // click: (e) => listeners.handleInvalid(scope.row, 'invalid')
}, // },
props: { // props: {
icon: 'el-icon-circle-check', // icon: 'el-icon-circle-check',
type: 'text' // type: 'text'
} // }
}, i18n.t('table.invalid')) // }, i18n.t('table.invalid'))
]) ])
} }
} }
......
...@@ -43,13 +43,22 @@ export default { ...@@ -43,13 +43,22 @@ export default {
}, },
created() { created() {
this.tableListeners = { this.tableListeners = {
handleDetails: this.handleDetails, // 添加 // handleDetails: this.handleDetails, // 添加
handleTakeEffect: this.handleTakeEffect, // 生效 // handleTakeEffect: this.handleTakeEffect, // 生效
handleEdit: this.handleEdit, // 编辑 handleEdit: this.handleEdit, // 编辑
handleInvalid: this.handleInvalid // 失效 // handleInvalid: this.handleInvalid // 失效
} }
}, },
methods: {} methods: {
// 编辑
handleEdit() {
console.log("编辑")
},
// 添加
handleAdd() {
this.$router.push({ path: '/customersAdd' })
}
}
} }
</script> </script>
......
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