init 二期ACS
This commit is contained in:
USER-20220102CG\noblelift
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="edit-down-modal">
|
||||
<vxe-input v-model="row[column.property]" class="edit-down-input" @keyup="keyupEvent" />
|
||||
<vxe-button class="edit-popup-button" status="primary" @click="popupEvent">选择</vxe-button>
|
||||
<vxe-modal
|
||||
v-model="modalVisible"
|
||||
show-footer
|
||||
class-name="vxe-table--ignore-clear edit-popup-box"
|
||||
title="选择多条"
|
||||
width="800"
|
||||
height="400"
|
||||
@confirm="confirmEvent"
|
||||
>
|
||||
<template #default>
|
||||
<vxe-grid
|
||||
ref="xGrid"
|
||||
highlight-hover-row
|
||||
auto-resize
|
||||
height="auto"
|
||||
:loading="loading"
|
||||
:pager-config="tablePage"
|
||||
:data="tableData"
|
||||
:columns="tableColumn"
|
||||
@page-change="pageChangeEvent"
|
||||
/>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EditDownModal',
|
||||
props: {
|
||||
params: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
row: null,
|
||||
column: null,
|
||||
modalVisible: false,
|
||||
loading: false,
|
||||
tableData: [],
|
||||
tableColumn1: [
|
||||
{ field: 'name', title: 'Name' },
|
||||
{ field: 'role', title: 'Role' },
|
||||
{ field: 'sex', title: 'Sex' }
|
||||
],
|
||||
tableColumn: [
|
||||
{ type: 'checkbox', width: 80 },
|
||||
{ field: 'name', title: 'Name' },
|
||||
{ field: 'role', title: 'Role' },
|
||||
{ field: 'sex', title: 'Sex' }
|
||||
],
|
||||
tablePage: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
const { row, column } = this.params
|
||||
this.row = row
|
||||
this.column = column
|
||||
this.getData().then(data => {
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
getData() {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
const list = [
|
||||
{ name: 'Test1', role: '前端', sex: '男' },
|
||||
{ name: 'Test2', role: '后端', sex: '男' },
|
||||
{ name: 'Test3', role: '测试', sex: '男' },
|
||||
{ name: 'Test4', role: '设计师', sex: '女' },
|
||||
{ name: 'Test5', role: '前端', sex: '男' },
|
||||
{ name: 'Test6', role: '前端', sex: '男' },
|
||||
{ name: 'Test7', role: '前端', sex: '男' }
|
||||
]
|
||||
resolve(list)
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
popupEvent() {
|
||||
this.modalVisible = true
|
||||
},
|
||||
pageChangeEvent({ currentPage, pageSize }) {
|
||||
this.tablePage.currentPage = currentPage
|
||||
this.tablePage.pageSize = pageSize
|
||||
this.loading = true
|
||||
this.getData().then(data => {
|
||||
this.loading = false
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
keyupEvent() {
|
||||
const { row, column } = this
|
||||
const cellValue = row[column.property]
|
||||
this.loading = true
|
||||
this.getData().then(data => {
|
||||
this.loading = false
|
||||
if (cellValue) {
|
||||
this.tableData = data.filter(item => item.name.indexOf(cellValue) > -1)
|
||||
} else {
|
||||
this.tableData = data
|
||||
}
|
||||
})
|
||||
},
|
||||
confirmEvent() {
|
||||
const { row, column } = this
|
||||
const selectRecords = this.$refs.xGrid.getCheckboxRecords()
|
||||
row[column.property] = `${selectRecords.length}条`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-down-modal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.edit-down-pulldown {
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
/*.edit-down-input /deep/ .vxe-input--inner {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}*/
|
||||
.edit-popup-button.vxe-button {
|
||||
flex-shrink: 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="edit-down-table">
|
||||
<vxe-pulldown ref="xDown" class="edit-down-pulldown" transfer>
|
||||
<template>
|
||||
<vxe-input v-model="row[column.property]" class="edit-down-input" suffix-icon="fa fa-caret-down" @keyup="keyupEvent" @click="clickEvent" @suffix-click="suffixClick" />
|
||||
</template>
|
||||
<template #dropdown>
|
||||
<div class="edit-down-wrapper">
|
||||
<vxe-grid
|
||||
highlight-hover-row
|
||||
auto-resize
|
||||
height="auto"
|
||||
:loading="loading"
|
||||
:pager-config="tablePage"
|
||||
:data="tableData"
|
||||
:columns="tableColumn"
|
||||
@cell-click="selectEvent"
|
||||
@page-change="pageChangeEvent"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-pulldown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EditDownTable',
|
||||
props: {
|
||||
params: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
row: null,
|
||||
column: null,
|
||||
loading: false,
|
||||
tableData: [],
|
||||
tableColumn: [
|
||||
{ type: 'seq' },
|
||||
{ field: 'name', title: 'Name' },
|
||||
{ field: 'role', title: 'Role' },
|
||||
{ field: 'sex', title: 'Sex' }
|
||||
],
|
||||
tablePage: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
const { row, column } = this.params
|
||||
this.row = row
|
||||
this.column = column
|
||||
this.getData().then(data => {
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
getData() {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
const list = [
|
||||
{ name: 'Test1', role: '前端', sex: '男' },
|
||||
{ name: 'Test2', role: '后端', sex: '男' },
|
||||
{ name: 'Test3', role: '测试', sex: '男' },
|
||||
{ name: 'Test4', role: '设计师', sex: '女' },
|
||||
{ name: 'Test5', role: '前端', sex: '男' },
|
||||
{ name: 'Test6', role: '前端', sex: '男' },
|
||||
{ name: 'Test7', role: '前端', sex: '男' }
|
||||
]
|
||||
resolve(list)
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
clickEvent() {
|
||||
this.$refs.xDown.showPanel()
|
||||
},
|
||||
keyupEvent() {
|
||||
const { row, column } = this
|
||||
const cellValue = row[column.property]
|
||||
this.loading = true
|
||||
this.getData().then(data => {
|
||||
this.loading = false
|
||||
if (cellValue) {
|
||||
this.tableData = data.filter(item => item.name.indexOf(cellValue) > -1)
|
||||
} else {
|
||||
this.tableData = data
|
||||
}
|
||||
})
|
||||
},
|
||||
suffixClick() {
|
||||
this.$refs.xDown.togglePanel()
|
||||
},
|
||||
pageChangeEvent({ currentPage, pageSize }) {
|
||||
this.tablePage.currentPage = currentPage
|
||||
this.tablePage.pageSize = pageSize
|
||||
this.loading = true
|
||||
this.getData().then(data => {
|
||||
this.loading = false
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
selectEvent(params) {
|
||||
const { row, column } = this
|
||||
row[column.property] = params.row.name
|
||||
this.$refs.xDown.hidePanel()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-down-pulldown {
|
||||
width: 100%;
|
||||
}
|
||||
.edit-down-wrapper {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="edit-popup-modal">
|
||||
<vxe-input v-model="row[column.property]" class="edit-popup-input" placeholder="请选择" />
|
||||
<vxe-button class="edit-popup-button" icon="fa fa-list" type="text" @click="popupEvent" />
|
||||
<vxe-modal
|
||||
v-model="modalVisible"
|
||||
show-footer
|
||||
class-name="vxe-table--ignore-clear edit-popup-box"
|
||||
width="800"
|
||||
height="400"
|
||||
@confirm="confirmEvent"
|
||||
>
|
||||
<template #default>
|
||||
<vxe-grid
|
||||
ref="xGrid"
|
||||
highlight-hover-row
|
||||
auto-resize
|
||||
height="auto"
|
||||
:loading="loading"
|
||||
:pager-config="tablePage"
|
||||
:data="tableData"
|
||||
:columns="tableColumn"
|
||||
@page-change="pageChangeEvent"
|
||||
/>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EditPopupModal',
|
||||
props: {
|
||||
params: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
row: null,
|
||||
column: null,
|
||||
modalVisible: false,
|
||||
loading: false,
|
||||
tableData: [],
|
||||
tableColumn: [
|
||||
{ type: 'checkbox', width: 80 },
|
||||
{ field: 'name', title: 'Name' },
|
||||
{ field: 'role', title: 'Role' },
|
||||
{ field: 'sex', title: 'Sex' }
|
||||
],
|
||||
tablePage: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
const { row, column } = this.params
|
||||
this.row = row
|
||||
this.column = column
|
||||
this.getData().then(data => {
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
getData() {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
const list = [
|
||||
{ name: 'Test1', role: '前端', sex: '男' },
|
||||
{ name: 'Test2', role: '后端', sex: '男' },
|
||||
{ name: 'Test3', role: '测试', sex: '男' },
|
||||
{ name: 'Test4', role: '设计师', sex: '女' },
|
||||
{ name: 'Test5', role: '前端', sex: '男' },
|
||||
{ name: 'Test6', role: '前端', sex: '男' },
|
||||
{ name: 'Test7', role: '前端', sex: '男' }
|
||||
]
|
||||
resolve(list)
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
popupEvent() {
|
||||
this.modalVisible = true
|
||||
},
|
||||
pageChangeEvent({ currentPage, pageSize }) {
|
||||
this.tablePage.currentPage = currentPage
|
||||
this.tablePage.pageSize = pageSize
|
||||
this.loading = true
|
||||
this.getData().then(data => {
|
||||
this.loading = false
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
confirmEvent() {
|
||||
const { row, column } = this
|
||||
const selectRecords = this.$refs.xGrid.getCheckboxRecords()
|
||||
row[column.property] = `${selectRecords.length}条`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-popup-modal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.edit-popup-input {
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.edit-popup-button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="my-filter-complex">
|
||||
<div class="my-fc-type">
|
||||
<vxe-radio v-model="option.data.type" name="fType" label="has">包含</vxe-radio>
|
||||
<vxe-radio v-model="option.data.type" name="fType" label="eq">等于</vxe-radio>
|
||||
</div>
|
||||
<div class="my-fc-name">
|
||||
<vxe-input v-model="option.data.name" type="text" placeholder="请输入名称" @input="changeOptionEvent()" />
|
||||
</div>
|
||||
<div class="my-fc-footer">
|
||||
<vxe-button status="primary" @click="confirmEvent">确认</vxe-button>
|
||||
<vxe-button @click="resetEvent">重置</vxe-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FilterComplex',
|
||||
props: {
|
||||
params: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
size: 'mini', // 被所有子组件继承 size
|
||||
column: null,
|
||||
option: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
const { column } = this.params
|
||||
const option = column.filters[0]
|
||||
this.column = column
|
||||
this.option = option
|
||||
},
|
||||
changeOptionEvent() {
|
||||
const { params, option } = this
|
||||
const { $panel } = params
|
||||
const checked = !!option.data.name
|
||||
$panel.changeOption(null, checked, option)
|
||||
},
|
||||
confirmEvent() {
|
||||
const { $panel } = this.params
|
||||
$panel.confirmFilter()
|
||||
},
|
||||
resetEvent() {
|
||||
const { $panel } = this.params
|
||||
$panel.resetFilter()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-filter-complex {
|
||||
width: 260px;
|
||||
padding: 5px 15px 10px 15px;
|
||||
}
|
||||
.my-filter-complex .my-fc-type {
|
||||
padding: 8px 0;
|
||||
}
|
||||
.my-filter-complex .my-fc-footer {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="my-filter-content">
|
||||
<div class="my-fc-search">
|
||||
<div class="my-fc-search-top">
|
||||
<vxe-input v-model="option.data.sVal" placeholder="搜索" suffix-icon="fa fa-search" />
|
||||
</div>
|
||||
<div class="my-fc-search-content">
|
||||
<template v-if="valList.length">
|
||||
<ul class="my-fc-search-list my-fc-search-list-head">
|
||||
<li class="my-fc-search-item">
|
||||
<vxe-checkbox v-model="isAll" @change="changeAllEvent">全选</vxe-checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="my-fc-search-list my-fc-search-list-body">
|
||||
<li v-for="(item, sIndex) in valList" :key="sIndex" class="my-fc-search-item">
|
||||
<vxe-checkbox v-model="item.checked">{{ item.value }}</vxe-checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="my-fc-search-empty">无匹配项</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-fc-footer">
|
||||
<vxe-button status="primary" @click="confirmFilterEvent">确认</vxe-button>
|
||||
<vxe-button @click="resetFilterEvent">重置</vxe-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XEUtils from 'xe-utils'
|
||||
|
||||
export default {
|
||||
name: 'FilterContent',
|
||||
props: {
|
||||
params: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
size: 'mini',
|
||||
isAll: false,
|
||||
option: null,
|
||||
colValList: [],
|
||||
valList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
const { $table, column } = this.params
|
||||
const { fullData } = $table.getTableData()
|
||||
const option = column.filters[0]
|
||||
const { vals } = option.data
|
||||
const colValList = Object.keys(XEUtils.groupBy(fullData, column.property)).map(val => {
|
||||
return {
|
||||
checked: vals.includes(val),
|
||||
value: val
|
||||
}
|
||||
})
|
||||
this.option = option
|
||||
this.colValList = colValList
|
||||
this.valList = colValList
|
||||
},
|
||||
searchEvent() {
|
||||
const { option, colValList } = this
|
||||
this.valList = option.data.sVal ? colValList.filter(item => item.value.indexOf(option.data.sVal) > -1) : colValList
|
||||
},
|
||||
changeAllEvent() {
|
||||
const { isAll } = this
|
||||
this.valList.forEach(item => {
|
||||
item.checked = isAll
|
||||
})
|
||||
},
|
||||
confirmFilterEvent(evnt) {
|
||||
const { params, option, valList } = this
|
||||
const { data } = option
|
||||
const { $panel } = params
|
||||
data.vals = valList.filter(item => item.checked).map(item => item.value)
|
||||
$panel.changeOption(evnt, true, option)
|
||||
$panel.confirmFilter()
|
||||
},
|
||||
resetFilterEvent() {
|
||||
const { $panel } = this.params
|
||||
$panel.resetFilter()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.my-filter-content {
|
||||
padding: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
.my-filter-content .my-fc-search .my-fc-search-top {
|
||||
position: relative;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.my-filter-content .my-fc-search .my-fc-search-top > input {
|
||||
border: 1px solid #ABABAB;
|
||||
padding: 0 20px 0 2px;
|
||||
width: 200px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.my-filter-content .my-fc-search .my-fc-search-content {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
.my-filter-content .my-fc-search-empty {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.my-filter-content .my-fc-search-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.my-filter-content .my-fc-search-list-body {
|
||||
overflow: auto;
|
||||
height: 120px;
|
||||
}
|
||||
.my-filter-content .my-fc-search-list .my-fc-search-item {
|
||||
padding: 2px 0;
|
||||
display: block;
|
||||
}
|
||||
.my-filter-content .my-fc-footer {
|
||||
text-align: right;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.my-filter-content .my-fc-footer button {
|
||||
padding: 0 15px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="my-filter-excel">
|
||||
<div class="my-fe-top">
|
||||
<ul class="my-fe-menu-group">
|
||||
<li class="my-fe-menu-link">
|
||||
<span>升序</span>
|
||||
</li>
|
||||
<li class="my-fe-menu-link">
|
||||
<span>倒序</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="my-fe-menu-group">
|
||||
<li class="my-fe-menu-link" @click="resetFilterEvent">
|
||||
<span>清除筛选</span>
|
||||
</li>
|
||||
<li class="my-fe-menu-link">
|
||||
<i class="fa fa-filter my-fe-menu-link-left-icon" />
|
||||
<span>筛选条件</span>
|
||||
<i class="fa fa-caret-right my-fe-menu-link-right-icon" />
|
||||
<div class="my-fe-menu-child-list">
|
||||
<ul v-for="(cList, gIndex) in caseGroups" :key="gIndex" class="my-fe-child-menu-group-list">
|
||||
<li v-for="(cItem, cIndex) in cList" :key="cIndex" class="my-fe-child-menu-item" @click="childMenuClickEvent(cItem)">
|
||||
<span>{{ cItem.label }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="my-fe-search">
|
||||
<div class="my-fe-search-top">
|
||||
<input v-model="option.data.sVal" placeholder="搜索">
|
||||
<i class="fa fa-search my-fe-search-icon" />
|
||||
</div>
|
||||
<ul class="my-fe-search-list">
|
||||
<li class="my-fe-search-item" @click="sAllEvent">
|
||||
<i class="fa fa-square-o my-fe-search-item-icon" />
|
||||
<span>(全选)</span>
|
||||
</li>
|
||||
<li v-for="(val, sIndex) in searchList" :key="sIndex" class="my-fe-search-item" @click="sItemEvent(val)">
|
||||
<i :class="[option.data.vals.indexOf(val) === -1 ? 'fa fa-square-o my-fe-search-item-icon' : 'fa fa-check-square-o my-fe-search-item-icon']" />
|
||||
<span>{{ val }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="my-fe-footer">
|
||||
<vxe-button status="primary" @click="confirmFilterEvent">确认</vxe-button>
|
||||
<vxe-button @click="resetFilterEvent">重置</vxe-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XEUtils from 'xe-utils'
|
||||
|
||||
export default {
|
||||
name: 'FilterExcel',
|
||||
props: {
|
||||
params: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
column: null,
|
||||
option: null,
|
||||
colValList: [],
|
||||
caseGroups: [
|
||||
[
|
||||
{ value: 'equal', label: '等于' },
|
||||
{ value: 'ne', label: '不等于' }
|
||||
],
|
||||
[
|
||||
{ value: 'greater', label: '大于' },
|
||||
{ value: 'ge', label: '大于或等于' },
|
||||
{ value: 'less', label: '小于' },
|
||||
{ value: 'le', label: '小于或等于' }
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
searchList() {
|
||||
const { option, colValList } = this
|
||||
return option.data.sVal ? colValList.filter(val => val.indexOf(option.data.sVal) > -1) : colValList
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
const { $table, column } = this.params
|
||||
const { fullData } = $table.getTableData()
|
||||
const option = column.filters[0]
|
||||
const colValList = Object.keys(XEUtils.groupBy(fullData, column.property))
|
||||
this.column = column
|
||||
this.option = option
|
||||
this.colValList = colValList
|
||||
},
|
||||
sAllEvent() {
|
||||
const { data } = this.option
|
||||
if (data.vals.length > 0) {
|
||||
data.vals = []
|
||||
} else {
|
||||
data.vals = this.colValList
|
||||
}
|
||||
},
|
||||
sItemEvent(val) {
|
||||
const { data } = this.option
|
||||
const vIndex = data.vals.indexOf(val)
|
||||
if (vIndex === -1) {
|
||||
data.vals.push(val)
|
||||
} else {
|
||||
data.vals.splice(vIndex, 1)
|
||||
}
|
||||
},
|
||||
confirmFilterEvent(evnt) {
|
||||
const { params, option } = this
|
||||
const { data } = option
|
||||
const { $panel } = params
|
||||
data.f1 = ''
|
||||
data.f2 = ''
|
||||
$panel.changeOption(evnt, true, option)
|
||||
$panel.confirmFilter()
|
||||
},
|
||||
resetFilterEvent() {
|
||||
const { $panel } = this.params
|
||||
$panel.resetFilter()
|
||||
},
|
||||
childMenuClickEvent(cItem) {
|
||||
this.$XModal.alert({ content: cItem.label })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.my-filter-excel {
|
||||
user-select: none;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-bottom: 1px solid #E2E4E7;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link {
|
||||
position: relative;
|
||||
padding: 4px 20px 4px 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover {
|
||||
background-color: #C5C5C5;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-left-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 6px;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-right-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 6px;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover .my-fe-menu-child-list {
|
||||
display: block;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-menu-child-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -120px;
|
||||
width: 120px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #DADCE0;
|
||||
box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list {
|
||||
position: relative;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 90px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-bottom: 1px solid #E2E4E7;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list > .my-fe-child-menu-item {
|
||||
position: relative;
|
||||
padding: 4px 20px 4px 30px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list > .my-fe-child-menu-item:hover {
|
||||
background-color: #C5C5C5;
|
||||
}
|
||||
.my-filter-excel .my-fe-search {
|
||||
padding: 0 10px 0 30px;
|
||||
}
|
||||
.my-filter-excel .my-fe-search .my-fe-search-top {
|
||||
position: relative;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.my-filter-excel .my-fe-search .my-fe-search-top > input {
|
||||
border: 1px solid #ABABAB;
|
||||
padding: 0 20px 0 2px;
|
||||
width: 200px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.my-filter-excel .my-fe-search .my-fe-search-top > .my-fe-search-icon {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
}
|
||||
.my-filter-excel .my-fe-search .my-fe-search-list {
|
||||
margin: 0;
|
||||
border: 1px solid #E2E4E7;
|
||||
padding: 2px 10px;
|
||||
overflow: auto;
|
||||
height: 140px;
|
||||
}
|
||||
.my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item {
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item .my-fe-search-item-icon {
|
||||
width: 16px;
|
||||
}
|
||||
.my-filter-excel .my-fe-footer {
|
||||
text-align: right;
|
||||
padding: 10px 10px 10px 0;
|
||||
}
|
||||
.my-fe-popup .my-fe-popup-filter {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.my-fe-popup .my-fe-popup-filter > .my-fe-popup-filter-select {
|
||||
width: 120px;
|
||||
}
|
||||
.my-fe-popup .my-fe-popup-filter > .my-fe-popup-filter-input {
|
||||
margin-left: 15px;
|
||||
width: 380px;
|
||||
}
|
||||
.my-fe-popup .my-fe-popup-describe {
|
||||
padding: 20px 0 10px 0;
|
||||
}
|
||||
.my-fe-popup .my-fe-popup-concat {
|
||||
padding-left: 50px;
|
||||
}
|
||||
.my-fe-popup .my-fe-popup-footer {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="my-filter-input">
|
||||
<vxe-input v-model="option.data" type="text" placeholder="支持回车筛选" @keyup="keyupEvent" @input="changeOptionEvent" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FilterInput',
|
||||
props: {
|
||||
params: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
column: null,
|
||||
option: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
const { column } = this.params
|
||||
const option = column.filters[0]
|
||||
this.column = column
|
||||
this.option = option
|
||||
},
|
||||
changeOptionEvent() {
|
||||
const { params, option } = this
|
||||
const { $panel } = params
|
||||
const checked = !!option.data
|
||||
$panel.changeOption(null, checked, option)
|
||||
},
|
||||
keyupEvent({ $event }) {
|
||||
const { params } = this
|
||||
const { $panel } = params
|
||||
if ($event.keyCode === 13) {
|
||||
$panel.confirmFilter()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-filter-input {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<vxe-form :data="formData" @submit="searchEvent">
|
||||
<vxe-form-item field="name" title="名称">
|
||||
<template #default="{ data }">
|
||||
<vxe-input v-model="data.name" placeholder="请输入名称" clearable />
|
||||
</template>
|
||||
</vxe-form-item>
|
||||
<vxe-form-item field="sex" title="性别">
|
||||
<template #default="{ data }">
|
||||
<select v-model="data.sex" class="vxe-select">
|
||||
<option v-for="(item, index) in sexList" :key="index" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
</template>
|
||||
</vxe-form-item>
|
||||
<vxe-form-item field="role" title="角色">
|
||||
<template #default="{ data }">
|
||||
<vxe-input v-model="data.role" placeholder="请输入角色" clearable />
|
||||
</template>
|
||||
</vxe-form-item>
|
||||
<vxe-form-item>
|
||||
<template #default>
|
||||
<vxe-button type="submit" status="primary">搜索</vxe-button>
|
||||
</template>
|
||||
</vxe-form-item>
|
||||
</vxe-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormSimple',
|
||||
props: {
|
||||
formData: Object,
|
||||
params: Object,
|
||||
context: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sexList: [
|
||||
{ label: '', value: '' },
|
||||
{ label: '女', value: '0' },
|
||||
{ label: '男', value: '1' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
searchEvent() {
|
||||
const { $grid } = this.context
|
||||
$grid.commitProxy('reload')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
import VXETable from 'vxe-table'
|
||||
|
||||
// 创建一个简单的展开内容渲染
|
||||
VXETable.renderer.add('MyExpand', {
|
||||
renderExpand(h, renderOpts, params) {
|
||||
const { row } = params
|
||||
return [
|
||||
<ul>
|
||||
<li>
|
||||
<span>ID：</span>
|
||||
<span>{row.id}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Name：</span>
|
||||
<span>{row.name}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>UpdateTime：</span>
|
||||
<span>{row.updateTime}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>CreateTime：</span>
|
||||
<span>{row.createTime}</span>
|
||||
</li>
|
||||
</ul>
|
||||
]
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,12 @@
|
||||
import VXETable from 'vxe-table'
|
||||
// 创建一个简单的超链接渲染
|
||||
VXETable.renderer.add('MyLink', {
|
||||
// 默认显示模板
|
||||
renderDefault(h, renderOpts, params) {
|
||||
const { row, column } = params
|
||||
const { events } = renderOpts
|
||||
return [
|
||||
<a class='link' onClick={() => events.click(params)}>{row[column.property]}</a>
|
||||
]
|
||||
}
|
||||
})
|
||||
57
acs2/nladmin-ui/src/views/components/VxeTableRender/edit.js
Normal file
57
acs2/nladmin-ui/src/views/components/VxeTableRender/edit.js
Normal file
@@ -0,0 +1,57 @@
|
||||
import Vue from 'vue'
|
||||
import VXETable from 'vxe-table'
|
||||
import EditDownTable from './components/EditDownTable.vue'
|
||||
import EditPopupModal from './components/EditPopupModal.vue'
|
||||
import EditDownModal from './components/EditDownModal.vue'
|
||||
|
||||
Vue.component(EditDownTable.name, EditDownTable)
|
||||
Vue.component(EditPopupModal.name, EditPopupModal)
|
||||
Vue.component(EditDownModal.name, EditDownModal)
|
||||
|
||||
// 创建一个简单的输入框渲染
|
||||
VXETable.renderer.add('MyInput', {
|
||||
// 激活时自动聚焦
|
||||
autofocus: '.my-cell',
|
||||
// 可编辑激活模板
|
||||
renderEdit(h, renderOpts, { row, column }) {
|
||||
return [
|
||||
<vxe-input class='my-cell' v-model={ row[column.property] } prefix-icon='fa fa-user' suffix-icon='fa fa-search' clearable></vxe-input>
|
||||
]
|
||||
},
|
||||
// 可编辑显示模板
|
||||
renderCell(h, renderOpts, { row, column }) {
|
||||
return [
|
||||
<span>{ row[column.property] }</span>
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个下拉表格渲染
|
||||
VXETable.renderer.add('EditDownTable', {
|
||||
autofocus: '.vxe-input--inner',
|
||||
renderEdit(h, renderOpts, params) {
|
||||
return [
|
||||
<edit-down-table params={ params }></edit-down-table>
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个弹窗渲染
|
||||
VXETable.renderer.add('EditPopupModal', {
|
||||
autofocus: '.vxe-input--inner',
|
||||
renderEdit(h, renderOpts, params) {
|
||||
return [
|
||||
<edit-popup-modal params={ params }></edit-popup-modal>
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个复杂的组合渲染
|
||||
VXETable.renderer.add('EditDownModal', {
|
||||
autofocus: '.vxe-input--inner',
|
||||
renderEdit(h, renderOpts, params) {
|
||||
return [
|
||||
<edit-down-modal params={ params } renderOpts={ renderOpts }></edit-down-modal>
|
||||
]
|
||||
}
|
||||
})
|
||||
13
acs2/nladmin-ui/src/views/components/VxeTableRender/empty.js
Normal file
13
acs2/nladmin-ui/src/views/components/VxeTableRender/empty.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import VXETable from 'vxe-table'
|
||||
// 创建一个简单的空内容渲染
|
||||
VXETable.renderer.add('NotData', {
|
||||
// 空内容模板
|
||||
renderEmpty() {
|
||||
return [
|
||||
<span>
|
||||
<img src='/vxe-table/static/other/img1.gif'/>
|
||||
<p>亲，没有更多数据了！</p>
|
||||
</span>
|
||||
]
|
||||
}
|
||||
})
|
||||
123
acs2/nladmin-ui/src/views/components/VxeTableRender/filter.js
Normal file
123
acs2/nladmin-ui/src/views/components/VxeTableRender/filter.js
Normal file
@@ -0,0 +1,123 @@
|
||||
import Vue from 'vue'
|
||||
import VXETable from 'vxe-table'
|
||||
import FilterInput from './components/FilterInput.vue'
|
||||
import FilterContent from './components/FilterContent.vue'
|
||||
import FilterComplex from './components/FilterComplex.vue'
|
||||
import FilterExcel from './components/FilterExcel.vue'
|
||||
|
||||
Vue.component(FilterInput.name, FilterInput)
|
||||
Vue.component(FilterContent.name, FilterContent)
|
||||
Vue.component(FilterComplex.name, FilterComplex)
|
||||
Vue.component(FilterExcel.name, FilterExcel)
|
||||
|
||||
// 创建一个简单的输入框筛选
|
||||
VXETable.renderer.add('FilterInput', {
|
||||
// 筛选模板
|
||||
renderFilter(h, renderOpts, params) {
|
||||
return [
|
||||
<filter-input params={params}></filter-input>
|
||||
]
|
||||
},
|
||||
// 重置数据方法
|
||||
filterResetMethod({ options }) {
|
||||
options.forEach(option => {
|
||||
option.data = ''
|
||||
})
|
||||
},
|
||||
// 重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
|
||||
filterRecoverMethod({ option }) {
|
||||
option.data = ''
|
||||
},
|
||||
// 筛选方法
|
||||
filterMethod({ option, row, column }) {
|
||||
const { data } = option
|
||||
const cellValue = row[column.property]
|
||||
if (cellValue) {
|
||||
return cellValue.indexOf(data) > -1
|
||||
}
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个条件的渲染器
|
||||
VXETable.renderer.add('FilterComplex', {
|
||||
// 不显示底部按钮，使用自定义的按钮
|
||||
isFooter: false,
|
||||
// 筛选模板
|
||||
renderFilter(h, renderOpts, params) {
|
||||
return [
|
||||
<filter-complex params={params}></filter-complex>
|
||||
]
|
||||
},
|
||||
// 重置数据方法
|
||||
filterResetMethod({ options }) {
|
||||
options.forEach(option => {
|
||||
option.data = { type: 'has', name: '' }
|
||||
})
|
||||
},
|
||||
// 筛选数据方法
|
||||
filterMethod({ option, row, column }) {
|
||||
const cellValue = row[column.property]
|
||||
const { name } = option.data
|
||||
if (cellValue) {
|
||||
return cellValue.indexOf(name) > -1
|
||||
}
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个支持列内容的筛选
|
||||
VXETable.renderer.add('FilterContent', {
|
||||
// 不显示底部按钮，使用自定义的按钮
|
||||
isFooter: false,
|
||||
// 筛选模板
|
||||
renderFilter(h, renderOpts, params) {
|
||||
return [
|
||||
<filter-content params={params}></filter-content>
|
||||
]
|
||||
},
|
||||
// 重置数据方法
|
||||
filterResetMethod({ options }) {
|
||||
options.forEach(option => {
|
||||
option.data = { vals: [], sVal: '' }
|
||||
})
|
||||
},
|
||||
// 筛选数据方法
|
||||
filterMethod({ option, row, column }) {
|
||||
const { vals } = option.data
|
||||
const cellValue = row[column.property]
|
||||
return vals.includes(cellValue)
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个实现Excel的筛选器
|
||||
VXETable.renderer.add('FilterExcel', {
|
||||
// 不显示底部按钮，使用自定义的按钮
|
||||
isFooter: false,
|
||||
// 筛选模板
|
||||
renderFilter(h, renderOpts, params) {
|
||||
return [
|
||||
<filter-excel params={params}></filter-excel>
|
||||
]
|
||||
},
|
||||
// 重置数据方法
|
||||
filterResetMethod({ options }) {
|
||||
options.forEach(option => {
|
||||
option.data = { vals: [], sVal: '', fMenu: '', f1Type: '', f1Val: '', fMode: 'and', f2Type: '', f2Val: '' }
|
||||
})
|
||||
},
|
||||
// 筛选数据方法
|
||||
filterMethod({ option, row, column }) {
|
||||
const cellValue = row[column.property]
|
||||
const { vals, f1Type, f1Val } = option.data
|
||||
if (cellValue) {
|
||||
if (f1Type) {
|
||||
return cellValue.indexOf(f1Val) > -1
|
||||
} else if (vals.length) {
|
||||
// 通过指定值筛选
|
||||
return vals.includes(cellValue)
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
})
|
||||
23
acs2/nladmin-ui/src/views/components/VxeTableRender/form.js
Normal file
23
acs2/nladmin-ui/src/views/components/VxeTableRender/form.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import VXETable from 'vxe-table'
|
||||
// 创建一个简单的表单-输入框渲染
|
||||
VXETable.renderer.add('FormItemInput', {
|
||||
// 项内容模板
|
||||
renderItemContent(h, renderOpts, params) {
|
||||
const { data, property } = params
|
||||
const { props } = renderOpts
|
||||
return [
|
||||
<vxe-input v-model={data[property]} {...{ props }}></vxe-input>
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个简单的表单-按钮组渲染
|
||||
VXETable.renderer.add('FormItemButtonGroup', {
|
||||
// 项内容模板
|
||||
renderItemContent() {
|
||||
return [
|
||||
<vxe-button type='submit' status='primary'>查询</vxe-button>,
|
||||
<vxe-button type='reset'>重置</vxe-button>
|
||||
]
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,7 @@
|
||||
import './default'
|
||||
import './filter'
|
||||
import './edit'
|
||||
import './content'
|
||||
import './toolbar'
|
||||
import './form'
|
||||
import './empty'
|
||||
@@ -0,0 +1,29 @@
|
||||
import VXETable from 'vxe-table'
|
||||
// 创建一个简单的工具栏-左侧按钮渲染
|
||||
VXETable.renderer.add('ToolbarButtonDownload', {
|
||||
renderToolbarButton(h, renderOpts, params) {
|
||||
const { events = {}} = renderOpts
|
||||
const { button } = params
|
||||
return [
|
||||
<vxe-button circle icon='fa fa-cloud-download' onClick={
|
||||
() => {
|
||||
events.click(button)
|
||||
}
|
||||
}></vxe-button>
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个简单的工具栏-右侧工具渲染
|
||||
VXETable.renderer.add('ToolbarToolPrint', {
|
||||
renderToolbarTool(h, renderOpts, params) {
|
||||
const { $table } = params
|
||||
return [
|
||||
<vxe-button circle icon='fa fa-print' onClick={
|
||||
() => {
|
||||
$table.print()
|
||||
}
|
||||
}></vxe-button>
|
||||
]
|
||||
}
|
||||
})
|
||||
41
acs2/nladmin-ui/src/views/components/excel/upload-excel.vue
Normal file
41
acs2/nladmin-ui/src/views/components/excel/upload-excel.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
|
||||
<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
|
||||
<el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'UploadExcel',
|
||||
components: { UploadExcelComponent },
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tableHeader: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeUpload(file) {
|
||||
const isLt1M = file.size / 1024 / 1024 < 1
|
||||
if (isLt1M) {
|
||||
return true
|
||||
}
|
||||
|
||||
this.$message({
|
||||
message: '请不要上传大于1m的文件.',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
},
|
||||
handleSuccess({ results, header }) {
|
||||
this.tableData = results
|
||||
this.tableHeader = header
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
74
acs2/nladmin-ui/src/views/components/icons/element-icons.js
Normal file
74
acs2/nladmin-ui/src/views/components/icons/element-icons.js
Normal file
@@ -0,0 +1,74 @@
|
||||
const elementIcons = [
|
||||
'info',
|
||||
'error',
|
||||
'success',
|
||||
'warning',
|
||||
'question',
|
||||
'back',
|
||||
'arrow-left',
|
||||
'arrow-down',
|
||||
'arrow-right',
|
||||
'arrow-up',
|
||||
'caret-left',
|
||||
'caret-bottom',
|
||||
'caret-top',
|
||||
'caret-right',
|
||||
'd-arrow-left',
|
||||
'd-arrow-right',
|
||||
'minus',
|
||||
'plus',
|
||||
'remove',
|
||||
'circle-plus',
|
||||
'remove-outline',
|
||||
'circle-plus-outline',
|
||||
'close',
|
||||
'check',
|
||||
'circle-close',
|
||||
'circle-check',
|
||||
'circle-close-outline',
|
||||
'circle-check-outline',
|
||||
'zoom-out',
|
||||
'zoom-in',
|
||||
'd-caret',
|
||||
'sort',
|
||||
'sort-down',
|
||||
'sort-up',
|
||||
'tickets',
|
||||
'document',
|
||||
'goods',
|
||||
'sold-out',
|
||||
'news',
|
||||
'message',
|
||||
'date',
|
||||
'printer',
|
||||
'time',
|
||||
'bell',
|
||||
'mobile-phone',
|
||||
'service',
|
||||
'view',
|
||||
'menu',
|
||||
'more',
|
||||
'more-outline',
|
||||
'star-on',
|
||||
'star-off',
|
||||
'location',
|
||||
'location-outline',
|
||||
'phone',
|
||||
'phone-outline',
|
||||
'picture',
|
||||
'picture-outline',
|
||||
'delete',
|
||||
'search',
|
||||
'edit',
|
||||
'edit-outline',
|
||||
'rank',
|
||||
'refresh',
|
||||
'share',
|
||||
'setting',
|
||||
'upload',
|
||||
'upload2',
|
||||
'download',
|
||||
'loading'
|
||||
]
|
||||
|
||||
export default elementIcons
|
||||
97
acs2/nladmin-ui/src/views/components/icons/index.vue
Normal file
97
acs2/nladmin-ui/src/views/components/icons/index.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="icons-container">
|
||||
<aside>
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
|
||||
</a>
|
||||
</aside>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="Icons">
|
||||
<div class="grid">
|
||||
<div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<svg-icon :icon-class="item" class-name="disabled" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Element-UI Icons">
|
||||
<div class="grid">
|
||||
<div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
{{ generateElementIconCode(item) }}
|
||||
</div>
|
||||
<div class="icon-item">
|
||||
<i :class="'el-icon-' + item" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import clipboard from '@/utils/clipboard'
|
||||
import svgIcons from './svg-icons'
|
||||
import elementIcons from './element-icons'
|
||||
export default {
|
||||
name: 'Icons',
|
||||
data() {
|
||||
return {
|
||||
svgIcons,
|
||||
elementIcons
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateIconCode(symbol) {
|
||||
return `<svg-icon icon-class="${symbol}" />`
|
||||
},
|
||||
generateElementIconCode(symbol) {
|
||||
return `<i class="el-icon-${symbol}" />`
|
||||
},
|
||||
handleClipboard(text, event) {
|
||||
clipboard(text, event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icons-container {
|
||||
margin: 10px 20px 0;
|
||||
overflow: hidden;
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
}
|
||||
.icon-item {
|
||||
margin: 20px;
|
||||
height: 85px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
float: left;
|
||||
font-size: 30px;
|
||||
color: #24292e;
|
||||
cursor: pointer;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
10
acs2/nladmin-ui/src/views/components/icons/svg-icons.js
Normal file
10
acs2/nladmin-ui/src/views/components/icons/svg-icons.js
Normal file
@@ -0,0 +1,10 @@
|
||||
const req = require.context('../../../assets/icons/svg', false, /\.svg$/)
|
||||
const requireAll = requireContext => requireContext.keys()
|
||||
|
||||
const re = /\.\/(.*)\.svg/
|
||||
|
||||
const svgIcons = requireAll(req).map(i => {
|
||||
return i.match(re)[1]
|
||||
})
|
||||
|
||||
export default svgIcons
|
||||
Reference in New Issue
Block a user