去除多余的文件
This commit is contained in:
parent
24e40a360b
commit
9141c5649f
@ -1,100 +1,91 @@
|
|||||||
<!--
|
<!--
|
||||||
<template>
|
<template>
|
||||||
<div :class="[prefixCls]">
|
<div :class="[prefixCls]">
|
||||||
<ul>
|
<ul>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template>
|
<template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template>
|
||||||
|
|
||||||
|
|
||||||
<template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength">
|
<template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength">
|
||||||
<avatar-item :size="size">
|
<avatar-item :size="size">
|
||||||
<avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
|
<avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
|
||||||
</avatar-item>
|
</avatar-item>
|
||||||
</template>
|
</template>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Avatar from 'ant-design-vue/es/avatar'
|
import Avatar from 'ant-design-vue/es/avatar'
|
||||||
import AvatarItem from './Item'
|
import AvatarItem from './Item'
|
||||||
import { filterEmpty } from '@/components/_util/util'
|
|
||||||
|
export default {
|
||||||
export default {
|
AvatarItem,
|
||||||
AvatarItem,
|
name: "AvatarList",
|
||||||
name: "AvatarList",
|
components: {
|
||||||
components: {
|
Avatar,
|
||||||
Avatar,
|
AvatarItem
|
||||||
AvatarItem
|
},
|
||||||
},
|
props: {
|
||||||
props: {
|
prefixCls: {
|
||||||
prefixCls: {
|
type: String,
|
||||||
type: String,
|
default: 'ant-pro-avatar-list'
|
||||||
default: 'ant-pro-avatar-list'
|
},
|
||||||
},
|
/**
|
||||||
/**
|
* 头像大小 类型: large、small 、mini, default
|
||||||
* 头像大小 类型: large、small 、mini, default
|
* 默认值: default
|
||||||
* 默认值: default
|
*/
|
||||||
*/
|
size: {
|
||||||
size: {
|
type: [String, Number],
|
||||||
type: [String, Number],
|
default: 'default'
|
||||||
default: 'default'
|
},
|
||||||
},
|
/**
|
||||||
/**
|
* 要显示的最大项目
|
||||||
* 要显示的最大项目
|
*/
|
||||||
*/
|
maxLength: {
|
||||||
maxLength: {
|
type: Number,
|
||||||
type: Number,
|
default: 0
|
||||||
default: 0
|
},
|
||||||
},
|
/**
|
||||||
/**
|
* 多余的项目风格
|
||||||
* 多余的项目风格
|
*/
|
||||||
*/
|
excessItemsStyle: {
|
||||||
excessItemsStyle: {
|
type: Object,
|
||||||
type: Object,
|
default: () => {
|
||||||
default: () => {
|
return {
|
||||||
return {
|
color: '#f56a00',
|
||||||
color: '#f56a00',
|
backgroundColor: '#fde3cf'
|
||||||
backgroundColor: '#fde3cf'
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
data () {
|
||||||
data () {
|
return {}
|
||||||
return {}
|
},
|
||||||
},
|
methods: {
|
||||||
methods: {
|
getItems(items) {
|
||||||
getItems(items) {
|
const classString = {
|
||||||
const classString = {
|
[`${this.prefixCls}-item`]: true,
|
||||||
[`${this.prefixCls}-item`]: true,
|
[`${this.size}`]: true
|
||||||
[`${this.size}`]: true
|
}
|
||||||
}
|
|
||||||
|
if (this.maxLength > 0) {
|
||||||
if (this.maxLength > 0) {
|
items = items.slice(0, this.maxLength)
|
||||||
items = items.slice(0, this.maxLength)
|
items.push((<Avatar size={ this.size } style={ this.excessItemsStyle }>{`+${this.maxLength}`}</Avatar>))
|
||||||
items.push((<Avatar size={ this.size } style={ this.excessItemsStyle }>{`+${this.maxLength}`}</Avatar>))
|
}
|
||||||
}
|
const itemList = items.map((item) => (
|
||||||
const itemList = items.map((item) => (
|
<li class={ classString }>{ item }</li>
|
||||||
<li class={ classString }>{ item }</li>
|
))
|
||||||
))
|
return itemList
|
||||||
return itemList
|
}
|
||||||
}
|
},
|
||||||
},
|
render () {
|
||||||
render () {
|
const { prefixCls, size } = this.$props
|
||||||
const { prefixCls, size } = this.$props
|
const classString = {
|
||||||
const classString = {
|
[`${prefixCls}`]: true,
|
||||||
[`${prefixCls}`]: true,
|
[`${size}`]: true,
|
||||||
[`${size}`]: true,
|
}
|
||||||
}
|
}
|
||||||
const items = filterEmpty(this.$slots.default)
|
}
|
||||||
const itemsDom = items && items.length ? <ul class={`${prefixCls}-items`}>{ this.getItems(items) }</ul> : null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class={ classString }>
|
|
||||||
{ itemsDom }
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
@ -1,49 +1,36 @@
|
|||||||
<script>
|
<script>
|
||||||
import { cutStrByFullLength, getStrFullLength } from '@/components/_util/StringUtil'
|
export default {
|
||||||
|
name: 'Ellipsis',
|
||||||
export default {
|
props: {
|
||||||
name: 'Ellipsis',
|
prefixCls: {
|
||||||
props: {
|
type: String,
|
||||||
prefixCls: {
|
default: 'ant-pro-ellipsis'
|
||||||
type: String,
|
},
|
||||||
default: 'ant-pro-ellipsis'
|
tooltip: {
|
||||||
},
|
type: Boolean,
|
||||||
tooltip: {
|
default: true,
|
||||||
type: Boolean,
|
},
|
||||||
default: true,
|
length: {
|
||||||
},
|
type: Number,
|
||||||
length: {
|
default: 25,
|
||||||
type: Number,
|
},
|
||||||
default: 25,
|
lines: {
|
||||||
},
|
type: Number,
|
||||||
lines: {
|
default: 1
|
||||||
type: Number,
|
},
|
||||||
default: 1
|
fullWidthRecognition: {
|
||||||
},
|
type: Boolean,
|
||||||
fullWidthRecognition: {
|
default: false
|
||||||
type: Boolean,
|
}
|
||||||
default: false
|
},
|
||||||
}
|
methods: {},
|
||||||
},
|
render() {
|
||||||
methods: {},
|
const { tooltip, length } = this.$props
|
||||||
render() {
|
let text = ''
|
||||||
const { tooltip, length } = this.$props
|
// 处理没有default插槽时的特殊情况
|
||||||
let text = ''
|
if (this.$slots.default) {
|
||||||
// 处理没有default插槽时的特殊情况
|
text = this.$slots.default.map(vNode => vNode.text).join('')
|
||||||
if (this.$slots.default) {
|
}
|
||||||
text = this.$slots.default.map(vNode => vNode.text).join('')
|
}
|
||||||
}
|
}
|
||||||
// 判断是否显示 tooltip
|
|
||||||
if (tooltip && getStrFullLength(text) > length) {
|
|
||||||
return (
|
|
||||||
<a-tooltip>
|
|
||||||
<template slot="title">{text}</template>
|
|
||||||
<span>{cutStrByFullLength(text, this.length) + '…'}</span>
|
|
||||||
</a-tooltip>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return (<span>{text}</span>)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
@ -1,79 +0,0 @@
|
|||||||
import { pcaa } from 'area-data'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 省市区
|
|
||||||
*/
|
|
||||||
export default class Area {
|
|
||||||
/**
|
|
||||||
* 构造器
|
|
||||||
* @param express
|
|
||||||
*/
|
|
||||||
constructor() {
|
|
||||||
let arr = []
|
|
||||||
const province = pcaa['86']
|
|
||||||
Object.keys(province).map(key=>{
|
|
||||||
arr.push({id:key, text:province[key], pid:'86'});
|
|
||||||
const city = pcaa[key];
|
|
||||||
Object.keys(city).map(key2=>{
|
|
||||||
arr.push({id:key2, text:city[key2], pid:key});
|
|
||||||
const qu = pcaa[key2];
|
|
||||||
Object.keys(qu).map(key3=>{
|
|
||||||
arr.push({id:key3, text:qu[key3], pid:key2});
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
this.all = arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
get pca(){
|
|
||||||
return this.all;
|
|
||||||
}
|
|
||||||
|
|
||||||
getCode(text){
|
|
||||||
if(!text || text.length==0){
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
for(let item of this.all){
|
|
||||||
if(item.text === text){
|
|
||||||
return item.id;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getText(code){
|
|
||||||
if(!code || code.length==0){
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
let arr = []
|
|
||||||
this.getAreaBycode(code,arr);
|
|
||||||
return arr.join('/')
|
|
||||||
}
|
|
||||||
|
|
||||||
getRealCode(code){
|
|
||||||
let arr = []
|
|
||||||
this.getPcode(code, arr)
|
|
||||||
return arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
getPcode(id, arr){
|
|
||||||
for(let item of this.all){
|
|
||||||
if(item.id === id){
|
|
||||||
arr.unshift(id)
|
|
||||||
if(item.pid != '86'){
|
|
||||||
this.getPcode(item.pid,arr)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getAreaBycode(code,arr){
|
|
||||||
//console.log("this.all.length",this.all)
|
|
||||||
for(let item of this.all){
|
|
||||||
if(item.id === code){
|
|
||||||
arr.unshift(item.text);
|
|
||||||
this.getAreaBycode(item.pid,arr)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
/**
|
|
||||||
* 获取字符串的长度ascii长度为1 中文长度为2
|
|
||||||
* @param str
|
|
||||||
* @returns {number}
|
|
||||||
*/
|
|
||||||
export const getStrFullLength = (str = '') =>
|
|
||||||
str.split('').reduce((pre, cur) => {
|
|
||||||
const charCode = cur.charCodeAt(0)
|
|
||||||
if (charCode >= 0 && charCode <= 128) {
|
|
||||||
return pre + 1
|
|
||||||
}
|
|
||||||
return pre + 2
|
|
||||||
}, 0)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 给定一个字符串和一个长度,将此字符串按指定长度截取
|
|
||||||
* @param str
|
|
||||||
* @param maxLength
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
export const cutStrByFullLength = (str = '', maxLength) => {
|
|
||||||
let showLength = 0
|
|
||||||
return str.split('').reduce((pre, cur) => {
|
|
||||||
const charCode = cur.charCodeAt(0)
|
|
||||||
if (charCode >= 0 && charCode <= 128) {
|
|
||||||
showLength += 1
|
|
||||||
} else {
|
|
||||||
showLength += 2
|
|
||||||
}
|
|
||||||
if (showLength <= maxLength) {
|
|
||||||
return pre + cur
|
|
||||||
}
|
|
||||||
return pre
|
|
||||||
}, '')
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
/**
|
|
||||||
* components util
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 清理空值,对象
|
|
||||||
* @param children
|
|
||||||
* @returns {*[]}
|
|
||||||
*/
|
|
||||||
export function filterEmpty (children = []) {
|
|
||||||
return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
|
|
||||||
}
|
|
||||||
@ -1,156 +1,155 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="!reloading" class="j-area-linkage">
|
<div v-if="!reloading" class="j-area-linkage">
|
||||||
<area-cascader
|
<area-cascader
|
||||||
v-if="_type === enums.type[0]"
|
v-if="_type === enums.type[0]"
|
||||||
:value="innerValue"
|
:value="innerValue"
|
||||||
:data="pcaa"
|
:data="pcaa"
|
||||||
:level="1"
|
:level="1"
|
||||||
:style="{width}"
|
:style="{width}"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
v-on="_listeners"
|
v-on="_listeners"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
/>
|
/>
|
||||||
<area-select
|
<area-select
|
||||||
v-else-if="_type === enums.type[1]"
|
v-else-if="_type === enums.type[1]"
|
||||||
:value="innerValue"
|
:value="innerValue"
|
||||||
:data="pcaa"
|
:data="pcaa"
|
||||||
:level="2"
|
:level="2"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
v-on="_listeners"
|
v-on="_listeners"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
/>
|
/>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<span style="color:red;"> Bad type value: {{_type}}</span>
|
<span style="color:red;"> Bad type value: {{_type}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { pcaa } from 'area-data'
|
import { pcaa } from 'area-data'
|
||||||
import Area from '@/components/_util/Area'
|
|
||||||
|
export default {
|
||||||
export default {
|
name: 'JAreaLinkage',
|
||||||
name: 'JAreaLinkage',
|
props: {
|
||||||
props: {
|
value: {
|
||||||
value: {
|
type: String,
|
||||||
type: String,
|
required:false
|
||||||
required:false
|
},
|
||||||
},
|
// 组件的类型,可选值:
|
||||||
// 组件的类型,可选值:
|
// select 下拉样式
|
||||||
// select 下拉样式
|
// cascader 级联样式(默认)
|
||||||
// cascader 级联样式(默认)
|
type: {
|
||||||
type: {
|
type: String,
|
||||||
type: String,
|
default: 'cascader'
|
||||||
default: 'cascader'
|
},
|
||||||
},
|
width: {
|
||||||
width: {
|
type: String,
|
||||||
type: String,
|
default: '100%'
|
||||||
default: '100%'
|
}
|
||||||
}
|
},
|
||||||
},
|
data() {
|
||||||
data() {
|
return {
|
||||||
return {
|
pcaa,
|
||||||
pcaa,
|
innerValue: [],
|
||||||
innerValue: [],
|
usedListeners: ['change'],
|
||||||
usedListeners: ['change'],
|
enums: {
|
||||||
enums: {
|
type: ['cascader', 'select']
|
||||||
type: ['cascader', 'select']
|
},
|
||||||
},
|
reloading: false,
|
||||||
reloading: false,
|
areaData:''
|
||||||
areaData:''
|
}
|
||||||
}
|
},
|
||||||
},
|
computed: {
|
||||||
computed: {
|
_listeners() {
|
||||||
_listeners() {
|
let listeners = { ...this.$listeners }
|
||||||
let listeners = { ...this.$listeners }
|
// 去掉已使用的事件,防止冲突
|
||||||
// 去掉已使用的事件,防止冲突
|
this.usedListeners.forEach(key => {
|
||||||
this.usedListeners.forEach(key => {
|
delete listeners[key]
|
||||||
delete listeners[key]
|
})
|
||||||
})
|
return listeners
|
||||||
return listeners
|
},
|
||||||
},
|
_type() {
|
||||||
_type() {
|
if (this.enums.type.includes(this.type)) {
|
||||||
if (this.enums.type.includes(this.type)) {
|
return this.type
|
||||||
return this.type
|
} else {
|
||||||
} else {
|
console.error(`JAreaLinkage的type属性只能接收指定的值(${this.enums.type.join('|')})`)
|
||||||
console.error(`JAreaLinkage的type属性只能接收指定的值(${this.enums.type.join('|')})`)
|
return this.enums.type[0]
|
||||||
return this.enums.type[0]
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
},
|
watch: {
|
||||||
watch: {
|
value: {
|
||||||
value: {
|
immediate: true,
|
||||||
immediate: true,
|
handler() {
|
||||||
handler() {
|
this.loadDataByValue(this.value)
|
||||||
this.loadDataByValue(this.value)
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
},
|
created() {
|
||||||
created() {
|
this.initAreaData();
|
||||||
this.initAreaData();
|
},
|
||||||
},
|
methods: {
|
||||||
methods: {
|
/** 通过 value 反推 options */
|
||||||
/** 通过 value 反推 options */
|
loadDataByValue(value) {
|
||||||
loadDataByValue(value) {
|
if(!value || value.length==0){
|
||||||
if(!value || value.length==0){
|
this.innerValue = []
|
||||||
this.innerValue = []
|
this.reloading = true;
|
||||||
this.reloading = true;
|
setTimeout(()=>{
|
||||||
setTimeout(()=>{
|
this.reloading = false
|
||||||
this.reloading = false
|
},100)
|
||||||
},100)
|
}else{
|
||||||
}else{
|
this.initAreaData();
|
||||||
this.initAreaData();
|
let arr = this.areaData.getRealCode(value);
|
||||||
let arr = this.areaData.getRealCode(value);
|
this.innerValue = arr
|
||||||
this.innerValue = arr
|
}
|
||||||
}
|
},
|
||||||
},
|
/** 通过地区code获取子级 */
|
||||||
/** 通过地区code获取子级 */
|
loadDataByCode(value) {
|
||||||
loadDataByCode(value) {
|
let options = []
|
||||||
let options = []
|
let data = pcaa[value]
|
||||||
let data = pcaa[value]
|
if (data) {
|
||||||
if (data) {
|
for (let key in data) {
|
||||||
for (let key in data) {
|
if (data.hasOwnProperty(key)) {
|
||||||
if (data.hasOwnProperty(key)) {
|
options.push({ value: key, label: data[key], })
|
||||||
options.push({ value: key, label: data[key], })
|
}
|
||||||
}
|
}
|
||||||
}
|
return options
|
||||||
return options
|
} else {
|
||||||
} else {
|
return []
|
||||||
return []
|
}
|
||||||
}
|
},
|
||||||
},
|
/** 判断是否有子节点 */
|
||||||
/** 判断是否有子节点 */
|
hasChildren(options) {
|
||||||
hasChildren(options) {
|
options.forEach(option => {
|
||||||
options.forEach(option => {
|
let data = this.loadDataByCode(option.value)
|
||||||
let data = this.loadDataByCode(option.value)
|
option.isLeaf = data.length === 0
|
||||||
option.isLeaf = data.length === 0
|
})
|
||||||
})
|
},
|
||||||
},
|
handleChange(values) {
|
||||||
handleChange(values) {
|
let value = values[values.length - 1]
|
||||||
let value = values[values.length - 1]
|
this.$emit('change', value)
|
||||||
this.$emit('change', value)
|
},
|
||||||
},
|
initAreaData(){
|
||||||
initAreaData(){
|
if(!this.areaData){
|
||||||
if(!this.areaData){
|
this.areaData = new Area();
|
||||||
this.areaData = new Area();
|
}
|
||||||
}
|
},
|
||||||
},
|
|
||||||
|
},
|
||||||
},
|
model: { prop: 'value', event: 'change' },
|
||||||
model: { prop: 'value', event: 'change' },
|
}
|
||||||
}
|
</script>
|
||||||
</script>
|
|
||||||
|
<style lang="less" scoped>
|
||||||
<style lang="less" scoped>
|
.j-area-linkage {
|
||||||
.j-area-linkage {
|
height:40px;
|
||||||
height:40px;
|
/deep/ .area-cascader-wrap .area-select {
|
||||||
/deep/ .area-cascader-wrap .area-select {
|
width: 100%;
|
||||||
width: 100%;
|
}
|
||||||
}
|
|
||||||
|
/deep/ .area-select .area-selected-trigger {
|
||||||
/deep/ .area-select .area-selected-trigger {
|
line-height: 1.15;
|
||||||
line-height: 1.15;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -70,13 +70,6 @@ module.exports = {
|
|||||||
deleteOriginalAssets: false // 删除源文件
|
deleteOriginalAssets: false // 删除源文件
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
// 配置 webpack 识别 markdown 为普通的文件
|
|
||||||
// config.module
|
|
||||||
// .rule('markdown')
|
|
||||||
// .test(/\.md$/)
|
|
||||||
// .use()
|
|
||||||
// .loader('file-loader')
|
|
||||||
// .end()
|
|
||||||
},
|
},
|
||||||
css: {
|
css: {
|
||||||
loaderOptions: {
|
loaderOptions: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user