mt-fe-group/11-mes-new
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

'init'

Browse Source
This commit is contained in:
gtz
2022-11-07 08:45:49 +08:00
commit 4d1231adc2
1222 changed files with 194552 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/BackToTop/index.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<transition :name="transitionName">
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
<svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
</div>
</transition>
</template>
<script>
export default {
name: 'BackToTop',
props: {
visibilityHeight: {
type: Number,
default: 400
},
backPosition: {
type: Number,
default: 0
},
customStyle: {
type: Object,
default: function() {
return {
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px',
background: '#e7eaf1'
}
}
},
transitionName: {
type: String,
default: 'fade'
}
},
data() {
return {
visible: false,
interval: null,
isMoving: false
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
if (this.interval) {
clearInterval(this.interval)
}
},
methods: {
handleScroll() {
this.visible = window.pageYOffset > this.visibilityHeight
},
backToTop() {
if (this.isMoving) return
const start = window.pageYOffset
let i = 0
this.isMoving = true
this.interval = setInterval(() => {
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
if (next <= this.backPosition) {
window.scrollTo(0, this.backPosition)
clearInterval(this.interval)
this.isMoving = false
} else {
window.scrollTo(0, next)
}
i++
}, 16.7)
},
easeInOutQuad(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b
return -c / 2 * (--t * (t - 2) - 1) + b
}
}
}
</script>
<style scoped>
.back-to-ceiling {
position: fixed;
display: inline-block;
text-align: center;
cursor: pointer;
}
.back-to-ceiling:hover {
background: #d5dbe7;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0
}
.back-to-ceiling .Icon {
fill: #9aaabf;
background: none;
}
</style>

66
src/components/BaseDrawer/components/SmallTitle.vue Normal file
View File

@@ -0,0 +1,66 @@
<!--
* @Author: lb
* @Date: 2022-05-18 16:00:00
* @LastEditors: lb
* @LastEditTime: 2022-05-18 16:00:00
* @Description:
-->
<template>
<div :class="[className, { 'p-0': noPadding }]">
<slot />
</div>
</template>
<script>
export default {
props: {
size: {
// 取值范围: xl lg md sm
type: String,
default: 'de',
validator: function(val) {
return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1
}
},
noPadding: {
type: Boolean,
default: false
}
},
computed: {
className: function() {
return `${this.size}-title`
}
}
}
</script>
<style lang="scss" scoped>
$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
$mgr: 8px;
@each $size, $height in $pxls {
.#{$size}-title {
padding: 8px 0;
font-size: $height;
line-height: $height;
color: #000;
font-weight: 500;
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
&::before {
content: '';
display: inline-block;
vertical-align: top;
width: 4px;
height: $height + 2px;
border-radius: 1px;
margin-right: $mgr;
background-color: #0b58ff;
}
}
}
.p-0 {
padding: 0;
}
</style>

262
src/components/BaseTable/index-compound.vue Normal file
View File

@@ -0,0 +1,262 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: gtz
* @LastEditTime: 2022-05-30 16:37:44
* @FilePath: \mt-bus-fe\src\components\BaseTable\index-compound.vue
* @Description:
-->
<template>
<div class="base-table-container">
<div class="setting">
<template v-if="topBtnConfig.length > 0">
<!-- table顶部操作按钮区 -->
<div class="action_btn">
<template v-for="(btn, index) in topBtnConfig">
<span
v-if="btn.type === 'add'"
:key="index"
style="display: inline-block;"
@click="clickTopButton(btn.type)"
>
<svg-icon style="width: 14px; height: 14px" class="item-icon" icon-class="table_add" />
<span class="add">{{ 'btn.add' | i18nFilter }}</span>
</span>
</template>
</div>
</template>
<!-- 设置table列的图标 -->
<el-popover placement="bottom-start" width="200" trigger="click">
<div class="setting-box">
<el-checkbox
v-for="(item, index) in tableConfig"
:key="'cb' + index"
v-model="selectedBox[index]"
:label="item.label"
/>
</div>
<i slot="reference" class="el-icon-s-tools" style="color:#0b58ff" />
</el-popover>
</div>
<el-table
v-loading="isLoading"
:header-cell-style="{ background:'#FAFAFA', color: '#000', height: '30px', padding: 0 }"
:data="renderData"
fit
highlight-current-row
style="width: 100%"
:span-method="spanMethod"
:max-height="height ? height : tableHeight(325)"
>
<el-table-column
v-if="page && limit"
v-bind="indexConfig"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
width="70"
/>
<el-table-column
v-for="item in renderTableHeadList"
:key="item.prop || item.label"
v-bind="item"
:show-overflow-tooltip="item.showTip ? true : false"
>
<!-- <el-table-column
v-for="i in item.children"
v-if="item.children && item.children.length"
:key="i.prop"
v-bind="i"
:show-overflow-tooltip="i.showTip ? true : false"
>
<template slot-scope="scope">
<component
:is="i.subcomponent"
v-if="i.subcomponent"
:key="scope.row.id"
:inject-data="{ ...scope.row, ...i }"
@emitData="emitData"
/>
<span v-else>{{ scope.row[i.prop] | commonFilter(i.filter) }}</span>
</template>
</el-table-column>
<template v-else slot-scope="scope">
<h2>测试</h2>
<component
:is="item.subcomponent"
v-if="item.subcomponent"
:key="scope.row.id"
:inject-data="{ ...scope.row, ...item }"
@emitData="emitData"
/>
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
-->
<template v-for="i in item.children">
<el-table-column
:key="i.prop || i.label"
v-bind="i"
:show-overflow-tooltip="i.showTip ? true : false"
>
<template slot-scope="scopeInner">
<component
:is="i.subcomponent"
v-if="i.subcomponent"
:key="scopeInner.row.id"
:inject-data="{ ...scopeInner.row, ...i }"
@emitData="emitData"
/>
<span v-else>{{ scopeInner.row[i.prop] | commonFilter(i.filter) }}</span>
</template>
</el-table-column>
</template>
<template v-if="!item.children" slot-scope="scope">
<component
:is="item.subcomponent"
v-if="item.subcomponent"
:key="scope.row.id"
:inject-data="{ ...scope.row, ...item }"
@emitData="emitData"
/>
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
<slot name="handleBtn" />
</el-table>
</div>
</template>
<script>
import { isObject /** , isString */ } from 'lodash'
import { tableHeight } from '@/utils/index'
export default {
name: 'BaseTableCompound',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
props: {
topBtnConfig: {
type: Array,
default: () => {
return []
}
},
tableData: {
type: Array,
required: true,
validator: val => val.filter(item => !isObject(item)).length === 0
},
tableConfig: {
type: Array,
required: true
// 解决tableConfig验证失败报错:
// validator: (val) => val.filter((item) => !isString(item.prop) || !isString(item.label)).length === 0
},
isLoading: {
type: Boolean,
required: false
},
page: {
type: Number,
required: false,
default: 0
},
limit: {
type: Number,
required: false,
default: 0
},
indexConfig: {
type: Object,
default: () => {
return { align: 'left' }
}
},
spanMethod: {
type: Function,
default: () => {
return function() {
return [0, 0]
}
}
},
height: {
type: Number,
required: false,
default: 0
}
},
data() {
return {
tableConfigBak: [],
selectedBox: new Array(20).fill(true),
tableHeight
}
},
computed: {
renderData() {
return this.tableData.map((item, index) => {
return {
...item,
_pageIndex: (this.page - 1) * this.limit + index + 1
}
})
},
renderTableHeadList() {
return this.tableConfig.filter((item, index) => {
return this.selectedBox[index]
})
}
},
beforeMount() {
this.selectedBox = new Array(20).fill(true)
},
// mounted() {
// this.tableConfigBak = cloneDeep(this.tableConfig).map(item => {
// return {
// ...item,
// selected: true
// }
// })
// },
methods: {
emitData(val) {
this.$emit('emitFun', val)
},
clickTopButton(val) {
this.$emit('clickTopBtn', val)
}
}
}
</script>
<style lang="scss">
@import '~@/styles/index.scss';
.base-table-container {
// .el-table {
// border-top: 1px solid #dfe6ec;
// }
}
.setting {
text-align: right;
padding: 0px 15px 4px;
.action_btn {
display: inline-block;
margin-right: 15px;
font-size: 14px;
@extend .pointer;
.add {
color: #0b58ff;
}
}
.setting-box {
width: 100px;
}
i {
color: #aaa;
@extend .pointer;
}
}
</style>

87
src/components/BaseTable/index.bak.vue Normal file
View File

@@ -0,0 +1,87 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-04-26 13:26:28
* @FilePath: \basic-admin\src\components\BaseTable\index.vue
* @Description:
-->
<template>
<div>
<el-table v-loading="isLoading" :data="renderData" :stripe="true" border fit highlight-current-row style="width: 100%">
<el-table-column v-if="page && limit" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" width="70" align="center" />
<el-table-column
v-for="item in tableConfig"
:key="item.prop"
v-bind="item"
>
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
<slot name="handleBtn" />
</el-table>
</div>
</template>
<script>
import { isObject, isString } from 'lodash'
export default {
name: 'BaseTable',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
props: {
tableData: {
type: Array,
required: true,
validator: val => val.filter(item => !isObject(item)).length === 0
},
tableConfig: {
type: Array,
required: true,
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
},
isLoading: {
type: Boolean,
required: false
},
page: {
type: Number,
required: false,
default: 0
},
limit: {
type: Number,
required: false,
default: 0
}
},
data() {
return {
}
},
computed: {
renderData() {
return this.tableData.map((item, index) => {
return {
...item,
_pageIndex: (this.page - 1) * this.limit + index + 1
}
})
}
},
methods: {
emitData(val) {
this.$emit('emitFun', val)
}
}
}
</script>
<style>
</style>

254
src/components/BaseTable/index.vue Normal file
View File

@@ -0,0 +1,254 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: gtz
* @LastEditTime: 2022-06-13 08:59:21
* @FilePath: \mt-bus-fe\src\components\BaseTable\index.vue
* @Description:
-->
<template>
<div class="base-table-container">
<div class="setting">
<template v-if="topBtnConfig.length > 0">
<!-- table顶部操作按钮区 -->
<div class="action_btn">
<template v-for="(btn,index) in topBtnConfig">
<span v-if="btn.type==='add'" :key="index" style="display: inline-block;" @click="clickTopButton(btn.type)">
<svg-icon style="width: 14px; height: 14px" class="item-icon" icon-class="table_add" />
<span class="add">{{ 'btn.add' | i18nFilter }}</span>
</span>
</template>
</div>
</template>
<!-- 设置table列的图标 -->
<el-popover
placement="bottom-start"
width="200"
trigger="click"
>
<div class="setting-box">
<el-checkbox
v-for="(item, index) in tableConfig"
:key="'cb' + index"
v-model="selectedBox[index]"
:label="item.label"
/>
</div>
<i slot="reference" class="el-icon-s-tools" style="color:#0b58ff" />
</el-popover>
</div>
<el-table
v-loading="isLoading"
:header-cell-style="{background:'#FAFAFA',color:'#606266',height: '40px'}"
:data="renderData"
:show-header="showHeader"
:border="border"
fit
highlight-current-row
:high-index="highIndex"
:row-class-name="tableRowClassName"
:max-height="height ? height : tableHeight(325)"
style="width: 100%"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
>
<el-table-column v-if="sbox" type="selection" width="55" fixed />
<el-table-column v-if="page && limit && !toggleCustomIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" width="70" align="center" fixed />
<el-table-column
v-for="item in renderTableHeadList"
:key="item.prop"
v-bind="item"
:align="item.align?item.align:'left'"
:min-width="item.minWidth?item.minWidth:150"
:fixed="item.isFixed ? true : false"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :key="scope.row.id" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
<slot name="handleBtn" />
</el-table>
</div>
</template>
<script>
import { isObject, isString } from 'lodash'
import { tableHeight } from '@/utils/index'
export default {
name: 'BaseTable',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
props: {
toggleCustomIndex: {
type: Boolean,
default: false
},
topBtnConfig: {
type: Array,
default: () => {
return []
}
},
showHeader: {
type: Boolean,
default: true
},
border: {
type: Boolean,
default: false
},
height: {
type: Number,
required: false,
default: 0
},
tableData: {
type: Array,
required: true,
validator: val => val.filter(item => !isObject(item)).length === 0
},
tableConfig: {
type: Array,
required: true,
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
},
isLoading: {
type: Boolean,
required: false
},
page: {
type: Number,
required: false,
default: 0
},
limit: {
type: Number,
required: false,
default: 0
},
sbox: {
type: Boolean,
required: false
},
highIndex: { // 首行是否默认高亮
type: Boolean,
required: false
}
},
data() {
return {
tableConfigBak: [],
selectedBox: new Array(100).fill(true),
tableHeight,
tableRowIndex: null
}
},
computed: {
renderData() {
return this.tableData.map((item, index) => {
return {
...item,
_pageIndex: (this.page - 1) * this.limit + index + 1
}
})
},
renderTableHeadList() {
return this.tableConfig.filter((item, index) => {
return this.selectedBox[index]
})
}
},
watch: {
tableData: function(val) {
if (this.highIndex) { // 默认高亮行的，重置默认高亮行为第一行
this.tableRowIndex = 0
}
}
},
beforeMount() {
this.selectedBox = new Array(100).fill(true)
if (this.highIndex) {
this.tableRowIndex = 0
}
},
// mounted() {
// this.tableConfigBak = cloneDeep(this.tableConfig).map(item => {
// return {
// ...item,
// selected: true
// }
// })
// },
methods: {
emitData(val) {
this.$emit('emitFun', val)
},
clickTopButton(val) {
this.$emit('clickTopBtn', val)
},
handleSelectionChange(val) {
this.$emit('selectChangeFun', val)
},
handleRowClick(row) {
this.tableRowIndex = this.getArrayIndex(this.tableData, row) // 获取当前点击行下标
this.$emit('selectRow', row)
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex === this.tableRowIndex) {
return 'success-row'
}
return ''
},
getArrayIndex(arr, obj) {
var i = arr.length
while (i--) {
if (arr[i].id === obj.id) {
return i
}
}
return -1
}
}
}
</script>
<style lang="scss">
@import "~@/styles/index.scss";
// .base-table-container {
// .el-table {
// border-top: none;
// border-left: none;
// border-right: none;
// }
// }
.setting {
text-align: right;
padding: 0px 15px 7px;
.action_btn {
display: inline-block;
margin-right: 15px;
font-size: 14px;
@extend .pointer;
.add {
color: #0b58ff;
}
}
.setting-box {
width: 100px;
}
i {
color: #aaa;
@extend .pointer;
}
}
.el-table .success-row {
background: #EAF1FC;
}
</style>

31
src/components/BaseTable/subcomponents/CheckDetail.vue Normal file
View File

@@ -0,0 +1,31 @@
<!--
* @Date: 2021-01-07 20:09:37
* @LastEditors: guo
* @LastEditTime: 2021-01-07 20:27:56
* @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
* @Description:
-->
<template>
<span>
<el-button type="text" size="small" @click="emitClick">{{ 'btn.detail' | i18nFilter }}</el-button>
</span>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({})
}
},
methods: {
emitClick() {
console.log(this.injectData)
// if (url) {
// this.$createPicReview({ url })
// }
}
}
}
</script>

32
src/components/BaseTable/subcomponents/CheckPic.vue Normal file
View File

@@ -0,0 +1,32 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: guo
* @LastEditTime: 2021-01-07 20:22:17
* @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckPic.vue
* @Description: 修改查看图片组件的传参形式
-->
<template>
<span>
<el-button type="text" size="small" @click="checkPic(injectData)">{{ 'btn.see' | i18nFilter }}</el-button>
</span>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({
url: ''
})
}
},
methods: {
checkPic(url) {
if (url) {
this.$createPicReview({ url })
}
}
}
}
</script>

36
src/components/BaseTable/subcomponents/ColorSqua.vue Normal file
View File

@@ -0,0 +1,36 @@
<!--
* @Date: 2021-02-20 10:45:21
* @LastEditors: guo
* @LastEditTime: 2021-03-24 11:05:35
* @FilePath: \basic-admin\src\components\BaseTable\subcomponents\ColorSqua.vue
* @Description:
-->
<template>
<div class="color-squa" :style="{'background-color': injectData.equipmentStatusColor}" @click="emitClick" />
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({})
}
},
methods: {
emitClick() {
console.log(this.injectData)
// if (url) {
// this.$createPicReview({ url })
// }
}
}
}
</script>
<style lang="scss">
.color-squa {
height: 15px;
width: 15px;
display: inline-block;
}
</style>

31
src/components/BaseTable/subcomponents/CommonBtn.vue Normal file
View File

@@ -0,0 +1,31 @@
<!--
* @Author: lb
* @Date: 2022-3-8 10:00:00
* @LastEditors: lb
* @LastEditTime: 2022-05-05 10:00:00
* @Description: 查看详情的更新版本，更新日期2022.5.5
-->
<template>
<span>
<el-button style="padding-left: 0;" type="text" @click="emitClick">{{ injectData.buttonContent || '查看详情' }}</el-button>
</span>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({})
}
},
methods: {
emitClick() {
this.$emit('emitData', {
action: this.injectData.actionName || 'view-detail-action',
data: this.injectData.emitFullData ? this.injectData : { id: this.injectData.id }
})
}
}
}
</script>

48
src/components/BaseTable/subcomponents/DataDictFilter.vue Normal file
View File

@@ -0,0 +1,48 @@
<!--
* @Date: 2021-02-20 10:45:21
* @LastEditors: gtz
* @LastEditTime: 2021-04-13 15:07:05
* @FilePath: \basic-admin\src\components\BaseTable\subcomponents\ColorSqua.vue
* @Description:
-->
<template>
<span @click="emitClick">
{{ result }}
</span>
</template>
<script>
import { dictChange } from '@/utils'
export default {
props: {
injectData: {
type: Object,
default: () => ({})
}
},
data() {
return {
dict: {}
}
},
computed: {
result() {
return this.dict[this.injectData[this.injectData.prop]] || '-'
}
},
created() {
this.getDict()
},
methods: {
emitClick() {
console.log(this.injectData)
},
async getDict() {
if (this.injectData.filter) {
const result = await this.injectData.filter()
this.dict = dictChange(result, { key: 'id', value: 'name' })
}
}
}
}
</script>

149
src/components/BaseTable/subcomponents/MethodBtn.vue Normal file
View File

@@ -0,0 +1,149 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: gtz
* @LastEditTime: 2022-07-25 10:23:16
* @FilePath: \mt-bus-fe\src\components\BaseTable\subcomponents\MethodBtn.vue
* @Description: table右侧方法组件
-->
<template>
<el-table-column
v-if="methodList.length > 0"
slot="handleBtn"
prop="operation"
:label="'tableHeader.operation' | i18nFilter"
:width="trueWidth"
align="left"
:fixed="isFixed ? 'right' : false"
>
<template slot-scope="scope">
<span
v-for="(item, index) in methodList"
:key="'btn' + index"
>
<span v-show="item.showParam ? showFilter(item.showParam, scope.row) : (index === 0 ? false : true)" style="margin:0 3px;font-size: 18px;color:#E5E7EB">|</span>
<el-tooltip placement="top" :content="item.btnName | i18nFilter">
<el-button
v-show="item.showParam ? showFilter(item.showParam, scope.row) : true"
type="text"
:style="{color:(item.type === 'delete' ? '#FF5454' : '#0B58FF')}"
size="mini"
@click="clickButton({
data: scope.row,
type: item.type
})"
>
<!-- 此处的icon的名字命名为'table_'加上按钮的type -->
<svg-icon style="width: 18px; height: 18px" class="item-icon" :icon-class="'table_'+item.type" />
<!-- <span>{{ item.btnName | i18nFilter }}</span> -->
</el-button>
</el-tooltip>
</span>
</template>
</el-table-column>
</template>
<script>
/**
* 传入的组件prop格式
* methodList<MethodItem> = []
* Interface MethodItem = {
* btnName: string,
* type: string,
* callback: function (选用)
* }
*
*/
export default {
props: {
methodList: {
type: Array,
default: () => {
return []
}
},
width: {
type: Number,
default: () => 0
},
isFixed: {
type: Boolean,
default: true
}
},
computed: {
trueWidth() {
return this.width ? this.width : this.methodList.length * 80
}
},
methods: {
clickButton(raw) {
this.$emit('clickBtn', {
data: raw.data,
type: raw.type
})
},
showFilter(showParam, row) {
let showStatus = true
const showStatusArr = showParam.data.map(item => {
let showStatusItem = true
if (item.type === 'unequal') {
if (row[item.name] !== item.value) {
showStatusItem = true
} else {
showStatusItem = false
}
}
if (item.type === 'equal') {
if (row[item.name] === item.value) {
showStatusItem = true
} else {
showStatusItem = false
}
}
if (item.type === 'more') {
if (row[item.name] >= item.value) {
showStatusItem = true
} else {
showStatusItem = false
}
}
if (item.type === 'less') {
if (row[item.name] <= item.value) {
showStatusItem = true
} else {
showStatusItem = false
}
}
if (item.type === 'indexof') {
if (item.value.indexOf(row[item.name]) >= 0) {
showStatusItem = true
} else {
showStatusItem = false
}
}
if (item.type === 'unindexof') {
if (item.value.indexOf(row[item.name]) < 0) {
showStatusItem = true
} else {
showStatusItem = false
}
}
return showStatusItem
})
if (showStatusArr.indexOf(false) >= 0 && showParam.type === '&') {
showStatus = false
}
if (showStatusArr.indexOf(true) < 0 && showParam.type === '|') {
showStatus = false
}
return showStatus
}
}
}
</script>
<style>
</style>

77
src/components/BaseTable/subcomponents/StatusSwitch.vue Normal file
View File

@@ -0,0 +1,77 @@
<!--
* @Author: lb
* @Date: 2022-3-8 10:00:00
* @LastEditors: lb
* @LastEditTime: 2022-3-8 10:00:00
* @Description: 启停某个区域的状态
-->
<template>
<el-switch v-model="state" type="text" size="small" :disabled="readonly" @change="changeHandler" />
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({})
}
},
data() {
return {
state: false,
payload: {}
}
},
computed: {
readonly() {
return !!this.injectData.readonly
}
},
mounted() {
this.mapToState()
},
// watch: {
// "injectData.enabled": {
// handler: function (val) {
// this.state = !!this.injectData.enabled;
// },
// deep: true,
// },
// "injectData.currentStatus": {
// handler: function (val) {
// this.state = !!(this.injectData.currentStatus === 'true');
// },
// deep: true,
// },
// },
methods: {
mapToState() {
if (this.injectData.prop === 'currentStatus') {
this.state = !!(this.injectData[this.injectData.prop].toString().trim() === 'true')
return
} else {
// enabled
this.state = !((this.injectData['enabled'] === 0 || this.injectData['enabled'] === '0'))
return
}
},
changeHandler() {
if (this.injectData.prop === 'enabled') {
// 启停区域/缓存区
this.payload.id = this.injectData.id
this.payload.enabled = this.state ? 1 : 0
} else {
// 启停其他实体-该else分支后期可能会被删除
this.payload.id = this.injectData.id
this.payload.code = this.injectData.code
this.payload.name = this.injectData.name
this.payload.currentStatus = this.state
}
this.$emit('emitData', { action: 'toggleEnabled', data: this.payload })
}
}
}
</script>

93
src/components/Breadcrumb/index.vue Normal file
View File

@@ -0,0 +1,93 @@
<!--
* @Author: your name
* @Date: 2021-01-27 10:07:42
* @LastEditTime: 2021-01-28 16:26:15
* @LastEditors: gtz
* @Description: In User Settings Edit
* @FilePath: \mt-bus-fe\src\components\Breadcrumb\index.vue
-->
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="isredirect">{{ item.meta.title }}</span>
<span v-else class="no-redirect">{{ item.meta.title }}</span>
<!-- @click.prevent="handleLink(item)" -->
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
import pathToRegexp from 'path-to-regexp'
export default {
data() {
return {
levelList: null
}
},
watch: {
$route(route) {
// if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) {
return
}
this.getBreadcrumb()
}
},
created() {
this.getBreadcrumb()
},
methods: {
getBreadcrumb() {
// only show routes with meta.title
const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
// const first = matched[0]
// if (!this.isDashboard(first)) {
// matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
// }
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
},
isDashboard(route) {
const name = route && route.name
if (!name) {
return false
}
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
},
pathCompile(path) {
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
const { params } = this.$route
var toPath = pathToRegexp.compile(path)
return toPath(params)
},
handleLink(item) {
const { redirect, path } = item
if (redirect) {
this.$router.push(redirect)
return
}
this.$router.push(this.pathCompile(path))
}
}
}
</script>
<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 48px;
margin-left: 8px;
.isredirect {
color: rgba(0, 0, 0, 0.65);
}
.no-redirect {
color: #8C8C8C;
cursor: text;
}
}
</style>

77
src/components/Charts/BarChart/index.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div ref="chart" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import resize from '../mixins/resize'
import { simpleChart } from '../option'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
},
sizeRatio: {
type: Number,
default: 1
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
testData() {
return [{
name: 'series1',
data: [{
name: '07/20',
value: 10
}, {
name: '07/21',
value: 11
}]
}, {
name: 'series2',
data: [{
name: '07/20',
value: 13
}, {
name: '07/21',
value: 15
}]
}]
},
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.chart.setOption(simpleChart(this.testData(), 1, {
type: 'line',
yAxisName: '大小',
showLegend: true
}))
}
}
}
</script>

155
src/components/Charts/Keyboard.vue Normal file
View File

@@ -0,0 +1,155 @@
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xAxisData = []
const data = []
const data2 = []
for (let i = 0; i < 50; i++) {
xAxisData.push(i)
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
}
this.chart.setOption({
backgroundColor: '#08263a',
grid: {
left: '5%',
right: '5%'
},
xAxis: [{
show: false,
data: xAxisData
}, {
show: false,
data: xAxisData
}],
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
},
yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {
show: false
}
},
series: [{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
}
})
}
}
}
</script>

220
src/components/Charts/LineChart.vue Normal file
View File

@@ -0,0 +1,220 @@
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
const colorList = ['#FFB61F', '#283D68', '#5AD8A6', '#E97466']
const shadowList = ['rgba(255, 179, 24, 0.5)', 'rgba(53, 66, 93, 0.5)', 'rgba(90, 216, 166, 0.6)', 'rgba(233, 116, 102, 0.5)']
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
},
chartData: {
type: Object,
default: () => {}
}
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
handler: function(val) {
this.initChart()
}
// deep: true
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
// backgroundColor: '#394056',
tooltip: {
trigger: 'axis',
padding: 0,
backgroundColor: 'transparent',
renderMode: 'html',
textStyle: {
color: 'rgba(0, 0, 0, 0.85)',
fontSize: 12,
lineHeight: 14
},
formatter: function(param) {
var text = ''
console.log(param)
const paramItem = param.map(item => {
return `<div style="display: flex; min-width: 150px">
<span>
<span style="display: inline-block; width: 4px; height: 4px; border-radius: 4px; background-color: ${item.color}; position: relative; top: -3px"></span>
<span>${item.seriesName}</span>
</span>
<span style="flex: 1;text-align: right">${item.value}</span>
</div>`
})
text = `<div class="line-tooltip">
<p style="margin: 0">${param[0].name}</p>
${paramItem.join('')}
</div>`
return text
}
},
color: colorList,
legend: {
top: 0,
data: ['设备CT', '设备TT', '产线CT', '产线TT'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#8C8C8C'
}
},
grid: {
top: 50,
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
data: this.chartData.timeArr
}],
yAxis: [{
type: 'value',
name: '',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: 'rgba(0, 0, 0, .15)'
}
}
}],
series: [{
name: '设备CT',
type: 'line',
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2,
shadowBlur: 4,
shadowColor: shadowList[0],
shadowOffsetY: 2
}
},
data: this.chartData.eqCT
}, {
name: '设备TT',
type: 'line',
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2,
shadowBlur: 4,
shadowColor: shadowList[1],
shadowOffsetY: 2
}
},
data: this.chartData.eqTT
}, {
name: '产线CT',
type: 'line',
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2,
shadowBlur: 4,
shadowColor: shadowList[2],
shadowOffsetY: 2
}
},
data: this.chartData.lineCT
}, {
name: '产线TT',
type: 'line',
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2,
shadowBlur: 4,
shadowColor: shadowList[3],
shadowOffsetY: 2
}
},
data: this.chartData.lineTT
}]
})
}
}
}
</script>
<style lang="scss">
.line-tooltip{
background: #FFFFFF;
box-shadow: 0px 2px 6px 0px rgba(154, 170, 164, 0.5);
border-radius: 4px;
opacity: 0.85;
backdrop-filter: blur(23px);
padding: 8px;
}
</style>

227
src/components/Charts/LineMarker.vue Normal file
View File

@@ -0,0 +1,227 @@
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
backgroundColor: '#394056',
title: {
top: 20,
text: 'Requests',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '1%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
top: 20,
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['CMCC', 'CTCC', 'CUCC'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
}
},
grid: {
top: 100,
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
}],
yAxis: [{
type: 'value',
name: '(%)',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: '#57617B'
}
}
}],
series: [{
name: 'CMCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(137, 189, 27, 0.3)'
}, {
offset: 0.8,
color: 'rgba(137, 189, 27, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
}
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
}, {
name: 'CTCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}, {
name: 'CUCC',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(219,50,51)',
borderColor: 'rgba(219,50,51,0.2)',
borderWidth: 12
}
},
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
}]
})
}
}
}
</script>

271
src/components/Charts/MixChart.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<div :id="id" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xData = (function() {
const data = []
for (let i = 1; i < 13; i++) {
data.push(i + 'month')
}
return data
}())
this.chart.setOption({
backgroundColor: '#344b58',
title: {
text: 'statistics',
x: '20',
top: '20',
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
textStyle: {
color: '#fff'
}
}
},
grid: {
left: '5%',
right: '5%',
borderWidth: 0,
top: 150,
bottom: 95,
textStyle: {
color: '#fff'
}
},
legend: {
x: '5%',
top: '10%',
textStyle: {
color: '#90979c'
},
data: ['female', 'male', 'average']
},
calculable: true,
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#90979c'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0
},
data: xData
}],
yAxis: [{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#90979c'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
}
}],
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [
0
],
bottom: 30,
start: 10,
end: 80,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: '#d3dee5'
},
textStyle: {
color: '#fff' },
borderColor: '#90979c'
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}],
series: [{
name: 'female',
type: 'bar',
stack: 'total',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: 'rgba(255,144,128,1)',
label: {
show: true,
textStyle: {
color: '#fff'
},
position: 'insideTop',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: [
709,
1917,
2455,
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078
]
},
{
name: 'male',
type: 'bar',
stack: 'total',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: [
327,
1776,
507,
1200,
800,
482,
204,
1390,
1001,
951,
381,
220
]
}, {
name: 'average',
type: 'line',
stack: 'total',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: 'rgba(252,230,48,1)',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : ''
}
}
}
},
data: [
1036,
3693,
2962,
3810,
2519,
1915,
1748,
4675,
6209,
4323,
2865,
4298
]
}
]
})
}
}
}
</script>

56
src/components/Charts/mixins/resize.js Normal file
View File

@@ -0,0 +1,56 @@
import { debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.initListener()
},
activated() {
if (!this.$_resizeHandler) {
// avoid duplication init
this.initListener()
}
// when keep-alive chart activated, auto resize
this.resize()
},
beforeDestroy() {
this.destroyListener()
},
deactivated() {
this.destroyListener()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
initListener() {
this.$_resizeHandler = debounce(() => {
this.resize()
}, 100)
window.addEventListener('resize', this.$_resizeHandler)
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
destroyListener() {
window.removeEventListener('resize', this.$_resizeHandler)
this.$_resizeHandler = null
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
},
resize() {
const { chart } = this
chart && chart.resize()
}
}
}

98
src/components/Charts/option.js Normal file
View File

@@ -0,0 +1,98 @@
/**
*
* @param {*} seriesData 传入的数据
* @param {*} ratio 放大倍率，用于调整图表中字体大小
* @param {*} option 附带的一些配置，可配置为柱状图或者折线图等等
*/
export function simpleChart(seriesData = {
name: '数据系列名',
data: [{
name: '类目名',
value: 123
}]
}, ratio = 1, option = {
type: 'bar',
showLegend: false,
yAxisName: '',
xAxisName: ''
}) {
const xAxisCateList = seriesData[0].data.map(item => item.name)
const seriesNameList = seriesData.map(item => item.name)
return {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
// color: colorList,
legend: {
show: option.showLegend,
data: seriesNameList,
bottom: '-5',
textStyle: {
color: '#eee',
fontSize: 14 * ratio
},
itemWidth: 25 * ratio,
itemHeight: 14 * ratio
},
grid: {
top: '10%',
left: '6%',
right: '4%',
bottom: '8%',
containLabel: true
},
yAxis: {
type: 'value',
name: option.yAxisName,
nameGap: 15,
nameTextStyle: {
color: '#fff',
fontSize: 12 * ratio,
padding: [0, 30, 0, 0]
},
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,0.4)'
}
},
axisLabel: {
margin: 15,
textStyle: {
color: '#eee',
fontSize: 14 * ratio
}
}
},
xAxis: {
type: 'category',
name: option.xAxisName,
axisLine: {
show: false
},
axisLabel: {
margin: 15,
textStyle: {
color: '#eee',
fontSize: 14 * ratio
}
},
data: xAxisCateList
},
series: seriesData.map(item => {
return {
name: item.name,
type: option.type,
data: item.data,
barMaxWidth: 30 * ratio
}
})
}
}

78
src/components/ErrorLog/index.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div v-if="errorLogs.length>0">
<el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true">
<el-button style="padding: 8px 10px;" size="small" type="danger">
<svg-icon icon-class="bug" />
</el-button>
</el-badge>
<el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body>
<div slot="title">
<span style="padding-right: 10px;">Error Log</span>
<el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">Clear All</el-button>
</div>
<el-table :data="errorLogs" border>
<el-table-column label="Message">
<template slot-scope="{row}">
<div>
<span class="message-title">Msg:</span>
<el-tag type="danger">
{{ row.err.message }}
</el-tag>
</div>
<br>
<div>
<span class="message-title" style="padding-right: 10px;">Info: </span>
<el-tag type="warning">
{{ row.vm.$vnode.tag }} error in {{ row.info }}
</el-tag>
</div>
<br>
<div>
<span class="message-title" style="padding-right: 16px;">Url: </span>
<el-tag type="success">
{{ row.url }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="Stack">
<template slot-scope="scope">
{{ scope.row.err.stack }}
</template>
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'ErrorLog',
data() {
return {
dialogTableVisible: false
}
},
computed: {
errorLogs() {
return this.$store.getters.errorLogs
}
},
methods: {
clearAll() {
this.dialogTableVisible = false
this.$store.dispatch('errorLog/clearErrorLog')
}
}
}
</script>
<style scoped>
.message-title {
font-size: 16px;
color: #333;
font-weight: bold;
padding-right: 8px;
}
</style>

35
src/components/Hamburger/index.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div style="padding: 5px 15px 5px 32px;" @click="toggleClick">
<svg-icon style="width: 24px; height: 24px" class="item-icon hamburger" :class="{'is-active':isActive}" icon-class="hamburgerBtn" />
</div>
</template>
<script>
export default {
name: 'Hamburger',
props: {
isActive: {
type: Boolean,
default: false
}
},
methods: {
toggleClick() {
this.$emit('toggleClick')
}
}
}
</script>
<style scoped>
.hamburger {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
}
.hamburger.is-active {
transform: rotate(180deg);
}
</style>

181
src/components/HeaderSearch/index.vue Normal file
View File

@@ -0,0 +1,181 @@
<template>
<div :class="{'show':show}" class="header-search">
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
<el-select
ref="headerSearchSelect"
v-model="search"
:remote-method="querySearch"
filterable
default-first-option
clearable
remote
placeholder="Search"
class="header-search-select"
@change="change"
>
<el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
</el-select>
</div>
</template>
<script>
// fuse is a lightweight fuzzy-search module
// make search results more in line with expectations
import Fuse from 'fuse.js'
import path from 'path'
export default {
name: 'HeaderSearch',
data() {
return {
search: '',
options: [],
searchPool: [],
show: false,
fuse: undefined
}
},
computed: {
routes() {
return this.$store.getters.permission_routes
}
},
watch: {
routes() {
this.searchPool = this.generateRoutes(this.routes)
},
searchPool(list) {
this.initFuse(list)
},
show(value) {
if (value) {
document.body.addEventListener('click', this.close)
} else {
document.body.removeEventListener('click', this.close)
}
}
},
mounted() {
this.searchPool = this.generateRoutes(this.routes)
},
methods: {
click() {
this.show = !this.show
if (this.show) {
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
}
},
close() {
this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
this.options = []
this.show = false
},
change(val) {
this.$router.push(val.path)
this.search = ''
this.options = []
this.$nextTick(() => {
this.show = false
})
},
initFuse(list) {
this.fuse = new Fuse(list, {
shouldSort: true,
threshold: 0.4,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [{
name: 'title',
weight: 0.7
}, {
name: 'path',
weight: 0.3
}]
})
},
// Filter out the routes that can be displayed in the sidebar
// And generate the internationalized title
generateRoutes(routes, basePath = '/', prefixTitle = []) {
let res = []
for (const router of routes) {
// skip hidden router
if (router.hidden) { continue }
const data = {
path: path.resolve(basePath, router.path),
title: [...prefixTitle]
}
if (router.meta && router.meta.title) {
data.title = [...data.title, router.meta.title]
if (router.redirect !== 'noRedirect') {
// only push the routes with title
// special case: need to exclude parent router without redirect
res.push(data)
}
}
// recursive child routes
if (router.children) {
const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
if (tempRoutes.length >= 1) {
res = [...res, ...tempRoutes]
}
}
}
return res
},
querySearch(query) {
if (query !== '') {
this.options = this.fuse.search(query)
} else {
this.options = []
}
}
}
}
</script>
<style lang="scss" scoped>
.header-search {
font-size: 0 !important;
.search-icon {
cursor: pointer;
font-size: 18px;
vertical-align: middle;
}
.header-search-select {
font-size: 18px;
transition: width 0.2s;
width: 0;
overflow: hidden;
background: transparent;
border-radius: 0;
display: inline-block;
vertical-align: middle;
::v-deep .el-input__inner {
border-radius: 0;
border: 0;
padding-left: 0;
padding-right: 0;
box-shadow: none !important;
border-bottom: 1px solid #d9d9d9;
vertical-align: middle;
}
}
&.show {
.header-search-select {
width: 210px;
margin-left: 10px;
}
}
}
</style>

1778
src/components/ImageCropper/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff

19
src/components/ImageCropper/utils/data2blob.js Normal file
View File

@@ -0,0 +1,19 @@
/**
* database64文件格式转换为2进制
*
* @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
* @param {[String]} mime [description]
* @return {[blob]} [description]
*/
export default function(data, mime) {
data = data.split(',')[1]
data = window.atob(data)
var ia = new Uint8Array(data.length)
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i)
}
// canvas.toDataURL 返回的默认格式就是 image/png
return new Blob([ia], {
type: mime
})
}

39
src/components/ImageCropper/utils/effectRipple.js Normal file
View File

@@ -0,0 +1,39 @@
/**
* 点击波纹效果
*
* @param {[event]} e [description]
* @param {[Object]} arg_opts [description]
* @return {[bollean]} [description]
*/
export default function(e, arg_opts) {
var opts = Object.assign({
ele: e.target, // 波纹作用元素
type: 'hit', // hit点击位置扩散center中心点扩展
bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
}, arg_opts)
var target = opts.ele
if (target) {
var rect = target.getBoundingClientRect()
var ripple = target.querySelector('.e-ripple')
if (!ripple) {
ripple = document.createElement('span')
ripple.className = 'e-ripple'
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
target.appendChild(ripple)
} else {
ripple.className = 'e-ripple'
}
switch (opts.type) {
case 'center':
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
break
default:
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
}
ripple.style.backgroundColor = opts.bgc
ripple.className = 'e-ripple z-active'
return false
}
}

232
src/components/ImageCropper/utils/language.js Normal file
View File

@@ -0,0 +1,232 @@
export default {
zh: {
hint: '点击，或拖动图片至此处',
loading: '正在上传……',
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
success: '上传成功',
fail: '图片上传失败',
preview: '头像预览',
btn: {
off: '取消',
close: '关闭',
back: '上一步',
save: '保存'
},
error: {
onlyImg: '仅限图片格式',
outOfSize: '单文件大小不能超过 ',
lowestPx: '图片最低像素为（宽*高）：'
}
},
'zh-tw': {
hint: '點擊，或拖動圖片至此處',
loading: '正在上傳……',
noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！',
success: '上傳成功',
fail: '圖片上傳失敗',
preview: '頭像預覽',
btn: {
off: '取消',
close: '關閉',
back: '上一步',
save: '保存'
},
error: {
onlyImg: '僅限圖片格式',
outOfSize: '單文件大小不能超過 ',
lowestPx: '圖片最低像素為（寬*高）：'
}
},
en: {
hint: 'Click or drag the file here to upload',
loading: 'Uploading…',
noSupported: 'Browser is not supported, please use IE10+ or other browsers',
success: 'Upload success',
fail: 'Upload failed',
preview: 'Preview',
btn: {
off: 'Cancel',
close: 'Close',
back: 'Back',
save: 'Save'
},
error: {
onlyImg: 'Image only',
outOfSize: 'Image exceeds size limit: ',
lowestPx: 'Image\'s size is too low. Expected at least: '
}
},
ro: {
hint: 'Atinge sau trage fișierul aici',
loading: 'Se încarcă',
noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.',
success: 'S-a încărcat cu succes',
fail: 'A apărut o problemă la încărcare',
preview: 'Previzualizează',
btn: {
off: 'Anulează',
close: 'Închide',
back: 'Înapoi',
save: 'Salvează'
},
error: {
onlyImg: 'Doar imagini',
outOfSize: 'Imaginea depășește limita de: ',
loewstPx: 'Imaginea este prea mică; Minim: '
}
},
ru: {
hint: 'Нажмите, или перетащите файл в это окно',
loading: 'Загружаю……',
noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры',
success: 'Загрузка выполнена успешно',
fail: 'Ошибка загрузки',
preview: 'Предпросмотр',
btn: {
off: 'Отменить',
close: 'Закрыть',
back: 'Назад',
save: 'Сохранить'
},
error: {
onlyImg: 'Только изображения',
outOfSize: 'Изображение превышает предельный размер: ',
lowestPx: 'Минимальный размер изображения: '
}
},
'pt-br': {
hint: 'Clique ou arraste o arquivo aqui para carregar',
loading: 'Carregando…',
noSupported: 'Browser não suportado, use o IE10+ ou outro browser',
success: 'Sucesso ao carregar imagem',
fail: 'Falha ao carregar imagem',
preview: 'Pré-visualizar',
btn: {
off: 'Cancelar',
close: 'Fechar',
back: 'Voltar',
save: 'Salvar'
},
error: {
onlyImg: 'Apenas imagens',
outOfSize: 'A imagem excede o limite de tamanho: ',
lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: '
}
},
fr: {
hint: 'Cliquez ou glissez le fichier ici.',
loading: 'Téléchargement…',
noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.',
success: 'Téléchargement réussit',
fail: 'Téléchargement echoué',
preview: 'Aperçu',
btn: {
off: 'Annuler',
close: 'Fermer',
back: 'Retour',
save: 'Enregistrer'
},
error: {
onlyImg: 'Image uniquement',
outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ',
lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: '
}
},
nl: {
hint: 'Klik hier of sleep een afbeelding in dit vlak',
loading: 'Uploaden…',
noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.',
success: 'Upload succesvol',
fail: 'Upload mislukt',
preview: 'Voorbeeld',
btn: {
off: 'Annuleren',
close: 'Sluiten',
back: 'Terug',
save: 'Opslaan'
},
error: {
onlyImg: 'Alleen afbeeldingen',
outOfSize: 'De afbeelding is groter dan: ',
lowestPx: 'De afbeelding is te klein! Minimale afmetingen: '
}
},
tr: {
hint: 'Tıkla veya yüklemek istediğini buraya sürükle',
loading: 'Yükleniyor…',
noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın',
success: 'Yükleme başarılı',
fail: 'Yüklemede hata oluştu',
preview: 'Önizle',
btn: {
off: 'İptal',
close: 'Kapat',
back: 'Geri',
save: 'Kaydet'
},
error: {
onlyImg: 'Sadece resim',
outOfSize: 'Resim yükleme limitini aşıyor: ',
lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: '
}
},
'es-MX': {
hint: 'Selecciona o arrastra una imagen',
loading: 'Subiendo...',
noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes',
success: 'Subido exitosamente',
fail: 'Sucedió un error',
preview: 'Vista previa',
btn: {
off: 'Cancelar',
close: 'Cerrar',
back: 'Atras',
save: 'Guardar'
},
error: {
onlyImg: 'Unicamente imagenes',
outOfSize: 'La imagen excede el tamaño maximo:',
lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:'
}
},
de: {
hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen',
loading: 'Hochladen…',
noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser',
success: 'Upload erfolgreich',
fail: 'Upload fehlgeschlagen',
preview: 'Vorschau',
btn: {
off: 'Abbrechen',
close: 'Schließen',
back: 'Zurück',
save: 'Speichern'
},
error: {
onlyImg: 'Nur Bilder',
outOfSize: 'Das Bild ist zu groß: ',
lowestPx: 'Das Bild ist zu klein. Mindestens: '
}
},
ja: {
hint: 'クリック・ドラッグしてファイルをアップロード',
loading: 'アップロード中...',
noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。',
success: 'アップロード成功',
fail: 'アップロード失敗',
preview: 'プレビュー',
btn: {
off: 'キャンセル',
close: '閉じる',
back: '戻る',
save: '保存'
},
error: {
onlyImg: '画像のみ',
outOfSize: '画像サイズが上限を超えています。上限: ',
lowestPx: '画像が小さすぎます。最小サイズ: '
}
}
}

7
src/components/ImageCropper/utils/mimes.js Normal file
View File

@@ -0,0 +1,7 @@
export default {
'jpg': 'image/jpeg',
'png': 'image/png',
'gif': 'image/gif',
'svg': 'image/svg+xml',
'psd': 'image/photoshop'
}

61
src/components/LangSelect/index.vue Normal file
View File

@@ -0,0 +1,61 @@
<!--
* @Author: your name
* @Date: 2021-01-27 10:07:42
* @LastEditTime: 2021-02-24 11:13:53
* @LastEditors: gtz
* @Description: In User Settings Edit
* @FilePath: \mt-bus-fe\src\components\LangSelect\index.vue
-->
<template>
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
<div>
<svg-icon style="width: 24px; height: 24px; vertical-align: -7px" class-name="international-icon" :icon-class="isShow ? 'language2' : 'language3'" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="language==='zh'" command="zh">
中文
</el-dropdown-item>
<el-dropdown-item :disabled="language==='en'" command="en">
English
</el-dropdown-item>
<!-- <el-dropdown-item :disabled="language==='es'" command="es">
Español
</el-dropdown-item>
<el-dropdown-item :disabled="language==='ja'" command="ja">
日本語
</el-dropdown-item> -->
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: () => {
return true
}
}
},
computed: {
language() {
return this.$store.getters.language
}
},
methods: {
handleSetLanguage(lang) {
this.$i18n.locale = lang
this.$store.dispatch('app/setLanguage', lang)
this.$message({
message: 'Switch Language Success',
type: 'success',
duration: 2000,
onClose: () => {
location.reload()
}
})
}
}
}
</script>

11
src/components/ListDialog/index.js Normal file
View File

@@ -0,0 +1,11 @@
import Vue from 'vue'
// 按照方法调用vue组件，用完即销毁
const ListDialogConstrctor = Vue.extend(require('./main.vue').default)
// 定义原型方法
Vue.prototype.$createListReview = (options) => {
const instance = new ListDialogConstrctor({
data: options
})
instance.vm = instance.$mount()
document.getElementById('app').appendChild(instance.vm.$el)
}

38
src/components/ListDialog/main.vue Normal file
View File

@@ -0,0 +1,38 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: guo
* @LastEditTime: 2020-12-16 15:10:51
* @FilePath: \basic-admin\src\components\ListDialog\main.vue
* @Description:
-->
<template>
<el-dialog :visible="visible" :destroy-on-close="true" :before-close="handleClose" title="查看子变量">
<el-table :data="list" border stripe>
<el-table-column prop="vt" label="数据类型" />
<el-table-column prop="val" label="数据值" />
</el-table>
</el-dialog>
</template>
<script>
export default {
name: 'ListDialog',
data() {
return {
visible: true,
list: []
}
},
methods: {
handleClose() {
this.$destroy(true)
this.$el.parentNode.removeChild(this.$el)
}
}
}
</script>
<style>
#root-pic {
display: none;
}
</style>

360
src/components/MDinput/index.vue Normal file
View File

@@ -0,0 +1,360 @@
<template>
<div :class="computedClasses" class="material-input__component">
<div :class="{iconClass:icon}">
<i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon" />
<input
v-if="type === 'email'"
v-model="currentValue"
:name="name"
:placeholder="fillPlaceHolder"
:readonly="readonly"
:disabled="disabled"
:autocomplete="autoComplete"
:required="required"
type="email"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput"
>
<input
v-if="type === 'url'"
v-model="currentValue"
:name="name"
:placeholder="fillPlaceHolder"
:readonly="readonly"
:disabled="disabled"
:autocomplete="autoComplete"
:required="required"
type="url"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput"
>
<input
v-if="type === 'number'"
v-model="currentValue"
:name="name"
:placeholder="fillPlaceHolder"
:step="step"
:readonly="readonly"
:disabled="disabled"
:autocomplete="autoComplete"
:max="max"
:min="min"
:minlength="minlength"
:maxlength="maxlength"
:required="required"
type="number"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput"
>
<input
v-if="type === 'password'"
v-model="currentValue"
:name="name"
:placeholder="fillPlaceHolder"
:readonly="readonly"
:disabled="disabled"
:autocomplete="autoComplete"
:max="max"
:min="min"
:required="required"
type="password"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput"
>
<input
v-if="type === 'tel'"
v-model="currentValue"
:name="name"
:placeholder="fillPlaceHolder"
:readonly="readonly"
:disabled="disabled"
:autocomplete="autoComplete"
:required="required"
type="tel"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput"
>
<input
v-if="type === 'text'"
v-model="currentValue"
:name="name"
:placeholder="fillPlaceHolder"
:readonly="readonly"
:disabled="disabled"
:autocomplete="autoComplete"
:minlength="minlength"
:maxlength="maxlength"
:required="required"
type="text"
class="material-input"
@focus="handleMdFocus"
@blur="handleMdBlur"
@input="handleModelInput"
>
<span class="material-input-bar" />
<label class="material-label">
<slot />
</label>
</div>
</div>
</template>
<script>
// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
export default {
name: 'MdInput',
props: {
/* eslint-disable */
icon: String,
name: String,
type: {
type: String,
default: 'text'
},
value: [String, Number],
placeholder: String,
readonly: Boolean,
disabled: Boolean,
min: String,
max: String,
step: String,
minlength: Number,
maxlength: Number,
required: {
type: Boolean,
default: true
},
autoComplete: {
type: String,
default: 'off'
},
validateEvent: {
type: Boolean,
default: true
}
},
data() {
return {
currentValue: this.value,
focus: false,
fillPlaceHolder: null
}
},
computed: {
computedClasses() {
return {
'material--active': this.focus,
'material--disabled': this.disabled,
'material--raised': Boolean(this.focus || this.currentValue) // has value
}
}
},
watch: {
value(newValue) {
this.currentValue = newValue
}
},
methods: {
handleModelInput(event) {
const value = event.target.value
this.$emit('input', value)
if (this.$parent.$options.componentName === 'ElFormItem') {
if (this.validateEvent) {
this.$parent.$emit('el.form.change', [value])
}
}
this.$emit('change', value)
},
handleMdFocus(event) {
this.focus = true
this.$emit('focus', event)
if (this.placeholder && this.placeholder !== '') {
this.fillPlaceHolder = this.placeholder
}
},
handleMdBlur(event) {
this.focus = false
this.$emit('blur', event)
this.fillPlaceHolder = null
if (this.$parent.$options.componentName === 'ElFormItem') {
if (this.validateEvent) {
this.$parent.$emit('el.form.blur', [this.currentValue])
}
}
}
}
}
</script>
<style lang="scss" scoped>
// Fonts:
$font-size-base: 16px;
$font-size-small: 18px;
$font-size-smallest: 12px;
$font-weight-normal: normal;
$font-weight-bold: bold;
$apixel: 1px;
// Utils
$spacer: 12px;
$transition: 0.2s ease all;
$index: 0px;
$index-has-icon: 30px;
// Theme:
$color-white: white;
$color-grey: #9E9E9E;
$color-grey-light: #E0E0E0;
$color-blue: #2196F3;
$color-red: #F44336;
$color-black: black;
// Base clases:
%base-bar-pseudo {
content: '';
height: 1px;
width: 0;
bottom: 0;
position: absolute;
transition: $transition;
}
// Mixins:
@mixin slided-top() {
top: - ($font-size-base + $spacer);
left: 0;
font-size: $font-size-base;
font-weight: $font-weight-bold;
}
// Component:
.material-input__component {
margin-top: 36px;
position: relative;
* {
box-sizing: border-box;
}
.iconClass {
.material-input__icon {
position: absolute;
left: 0;
line-height: $font-size-base;
color: $color-blue;
top: $spacer;
width: $index-has-icon;
height: $font-size-base;
font-size: $font-size-base;
font-weight: $font-weight-normal;
pointer-events: none;
}
.material-label {
left: $index-has-icon;
}
.material-input {
text-indent: $index-has-icon;
}
}
.material-input {
font-size: $font-size-base;
padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
display: block;
width: 100%;
border: none;
line-height: 1;
border-radius: 0;
&:focus {
outline: none;
border: none;
border-bottom: 1px solid transparent; // fixes the height issue
}
}
.material-label {
font-weight: $font-weight-normal;
position: absolute;
pointer-events: none;
left: $index;
top: 0;
transition: $transition;
font-size: $font-size-small;
}
.material-input-bar {
position: relative;
display: block;
width: 100%;
&:before {
@extend %base-bar-pseudo;
left: 50%;
}
&:after {
@extend %base-bar-pseudo;
right: 50%;
}
}
// Disabled state:
&.material--disabled {
.material-input {
border-bottom-style: dashed;
}
}
// Raised state:
&.material--raised {
.material-label {
@include slided-top();
}
}
// Active state:
&.material--active {
.material-input-bar {
&:before,
&:after {
width: 50%;
}
}
}
}
.material-input__component {
background: $color-white;
.material-input {
background: none;
color: $color-black;
text-indent: $index;
border-bottom: 1px solid $color-grey-light;
}
.material-label {
color: $color-grey;
}
.material-input-bar {
&:before,
&:after {
background: $color-blue;
}
}
// Active state:
&.material--active {
.material-label {
color: $color-blue;
}
}
// Errors:
&.material--has-errors {
&.material--active .material-label {
color: $color-red;
}
.material-input-bar {
&:before,
&:after {
background: transparent;
}
}
}
}
</style>

104
src/components/Pagination/index.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<div :class="{'hidden':hidden}" class="pagination-container">
<el-pagination
small
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import { scrollTo } from '@/utils/scroll-to'
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 20
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50]
}
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
background: {
type: Boolean,
default: true
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
},
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
},
pageSize: {
get() {
return this.limit
},
set(val) {
this.$emit('update:limit', val)
}
}
},
methods: {
handleSizeChange(val) {
this.$emit('pagination', { page: this.currentPage, limit: val })
if (this.autoScroll) {
scrollTo(0, 800)
}
},
handleCurrentChange(val) {
this.$emit('pagination', { current: val, limit: this.pageSize })
if (this.autoScroll) {
scrollTo(0, 800)
}
}
}
}
</script>
<style scoped>
.pagination-container {
background: #fff;
padding-top: 20px;
text-align: right;
border-radius: 4px;
}
.pagination-container.hidden {
display: none;
}
</style>

11
src/components/PicReview/index.js Normal file
View File

@@ -0,0 +1,11 @@
import Vue from 'vue'
// 按照方法调用vue组件，用完即销毁
const PicConstrctor = Vue.extend(require('./main.vue').default)
// 定义原型方法
Vue.prototype.$createPicReview = (options) => {
const instance = new PicConstrctor({
data: options
})
instance.vm = instance.$mount()
document.getElementById('app').appendChild(instance.vm.$el)
}

41
src/components/PicReview/main.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div>
<img id="root-pic" ref="targetImg" :src="url">
</div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
export default {
name: 'PicDialog',
data() {
return {
instance: null,
url: null
}
},
mounted() {
this.instance = new Viewer(this.$refs.targetImg, {
inline: false,
navbar: false,
// viewed() {
// this.instance.zoomTo(1)
// },
hidden: () => {
console.log('destroy')
this.instance.destroy()
this.$destroy(true)
this.$el.parentNode.removeChild(this.$el)
}
})
this.instance.show()
console.log(this.instance)
}
}
</script>
<style>
#root-pic {
display: none;
}
</style>

145
src/components/RightPanel/index.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
<div class="rightPanel-background" />
<div class="rightPanel">
<div class="handle-button" :style="{'bottom':buttonBottom+'px','background-color':theme}" @click="show=!show">
<i :class="show?'el-icon-close':'el-icon-setting'" />
</div>
<div class="rightPanel-items">
<slot />
</div>
</div>
</div>
</template>
<script>
import { addClass, removeClass } from '@/utils'
export default {
name: 'RightPanel',
props: {
clickNotClose: {
default: false,
type: Boolean
},
buttonBottom: {
default: 55,
type: Number
}
},
data() {
return {
show: false
}
},
computed: {
theme() {
return this.$store.state.settings.theme
}
},
watch: {
show(value) {
if (value && !this.clickNotClose) {
this.addEventClick()
}
if (value) {
addClass(document.body, 'showRightPanel')
} else {
removeClass(document.body, 'showRightPanel')
}
}
},
mounted() {
this.insertToBody()
},
beforeDestroy() {
const elx = this.$refs.rightPanel
elx.remove()
},
methods: {
addEventClick() {
window.addEventListener('click', this.closeSidebar)
},
closeSidebar(evt) {
const parent = evt.target.closest('.rightPanel')
if (!parent) {
this.show = false
window.removeEventListener('click', this.closeSidebar)
}
},
insertToBody() {
const elx = this.$refs.rightPanel
const body = document.querySelector('body')
body.insertBefore(elx, body.firstChild)
}
}
}
</script>
<style>
.showRightPanel {
overflow: hidden;
position: relative;
width: calc(100% - 15px);
}
</style>
<style lang="scss" scoped>
.rightPanel-background {
position: fixed;
top: 0;
left: 0;
opacity: 0;
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
background: rgba(0, 0, 0, .2);
z-index: -1;
}
.rightPanel {
width: 100%;
max-width: 260px;
height: 100vh;
position: fixed;
top: 0;
right: 0;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
transition: all .25s cubic-bezier(.7, .3, .1, 1);
transform: translate(100%);
background: #fff;
z-index: 40000;
}
.show {
transition: all .3s cubic-bezier(.7, .3, .1, 1);
.rightPanel-background {
z-index: 20000;
opacity: 1;
width: 100%;
height: 100%;
}
.rightPanel {
transform: translate(0);
}
}
.handle-button {
width: 48px;
height: 48px;
position: absolute;
left: -48px;
text-align: center;
font-size: 24px;
border-radius: 6px 0 0 6px !important;
z-index: 0;
pointer-events: auto;
cursor: pointer;
color: #fff;
line-height: 48px;
i {
font-size: 24px;
line-height: 48px;
}
}
</style>

60
src/components/Screenfull/index.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<div>
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'Screenfull',
data() {
return {
isFullscreen: false
}
},
mounted() {
this.init()
},
beforeDestroy() {
this.destroy()
},
methods: {
click() {
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle()
},
change() {
this.isFullscreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
screenfull.off('change', this.change)
}
}
}
}
</script>
<style scoped>
.screenfull-svg {
display: inline-block;
cursor: pointer;
fill: #5a5e66;;
width: 20px;
height: 20px;
vertical-align: 10px;
}
</style>

91
src/components/Sticky/index.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<div :style="{height:height+'px',zIndex:zIndex}">
<div
:class="className"
:style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
>
<slot>
<div>sticky</div>
</slot>
</div>
</div>
</template>
<script>
export default {
name: 'Sticky',
props: {
stickyTop: {
type: Number,
default: 0
},
zIndex: {
type: Number,
default: 1
},
className: {
type: String,
default: ''
}
},
data() {
return {
active: false,
position: '',
width: undefined,
height: undefined,
isSticky: false
}
},
mounted() {
this.height = this.$el.getBoundingClientRect().height
window.addEventListener('scroll', this.handleScroll)
window.addEventListener('resize', this.handleResize)
},
activated() {
this.handleScroll()
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
window.removeEventListener('resize', this.handleResize)
},
methods: {
sticky() {
if (this.active) {
return
}
this.position = 'fixed'
this.active = true
this.width = this.width + 'px'
this.isSticky = true
},
handleReset() {
if (!this.active) {
return
}
this.reset()
},
reset() {
this.position = ''
this.width = 'auto'
this.active = false
this.isSticky = false
},
handleScroll() {
const width = this.$el.getBoundingClientRect().width
this.width = width || 'auto'
const offsetTop = this.$el.getBoundingClientRect().top
if (offsetTop < this.stickyTop) {
this.sticky()
return
}
this.handleReset()
},
handleResize() {
if (this.isSticky) {
this.width = this.$el.getBoundingClientRect().width + 'px'
}
}
}
}
</script>

62
src/components/SvgIcon/index.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
return isExternal(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>

113
src/components/TextHoverEffect/Mallki.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<a :class="className" class="link--mallki" href="#">
{{ text }}
<span :data-letters="text" />
<span :data-letters="text" />
</a>
</template>
<script>
export default {
props: {
className: {
type: String,
default: ''
},
text: {
type: String,
default: 'vue-element-admin'
}
}
}
</script>
<style>
/* Mallki */
.link--mallki {
font-weight: 800;
color: #4dd9d5;
font-family: 'Dosis', sans-serif;
-webkit-transition: color 0.5s 0.25s;
transition: color 0.5s 0.25s;
overflow: hidden;
position: relative;
display: inline-block;
line-height: 1;
outline: none;
text-decoration: none;
}
.link--mallki:hover {
-webkit-transition: none;
transition: none;
color: transparent;
}
.link--mallki::before {
content: '';
width: 100%;
height: 6px;
margin: -3px 0 0 0;
background: #3888fa;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.link--mallki:hover::before {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.link--mallki span {
position: absolute;
height: 50%;
width: 100%;
left: 0;
top: 0;
overflow: hidden;
}
.link--mallki span::before {
content: attr(data-letters);
color: red;
position: absolute;
left: 0;
width: 100%;
color: #3888fa;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.link--mallki span:nth-child(2) {
top: 50%;
}
.link--mallki span:first-child::before {
top: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.link--mallki span:nth-child(2)::before {
bottom: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.link--mallki:hover span::before {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
</style>

1
src/components/ThemePicker/index.css Normal file
View File

File diff suppressed because one or more lines are too long

176
src/components/ThemePicker/index.vue Normal file
View File

@@ -0,0 +1,176 @@
<template>
<el-color-picker
v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</template>
<script>
const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color
export default {
data() {
return {
chalk: '', // content of theme-chalk css
theme: ''
}
},
computed: {
defaultTheme() {
return this.$store.state.settings.theme
}
},
watch: {
defaultTheme: {
handler: function(val, oldVal) {
this.theme = val
},
immediate: true
},
async theme(val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
console.log(themeCluster, originalCluster)
const $message = this.$message({
message: ' Compiling the theme',
customClass: 'theme-message',
type: 'success',
duration: 0,
iconClass: 'el-icon-loading'
})
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
let styleTag = document.getElementById(id)
if (!styleTag) {
styleTag = document.createElement('style')
styleTag.setAttribute('id', id)
document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle
}
}
if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
// const url = require('element-ui/lib/theme-chalk/index.css')
await this.getCSSString(url, 'chalk')
}
const chalkHandler = getHandler('chalk', 'chalk-style')
chalkHandler()
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
})
styles.forEach(style => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
})
this.$emit('change', val)
$message.close()
}
},
methods: {
updateStyle(style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
})
return newStyle
},
getCSSString(url, variable) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
resolve()
}
}
xhr.open('GET', url)
xhr.send()
})
},
getThemeCluster(theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue))
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
}
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
}
}
}
</script>
<style>
.theme-message,
.theme-picker-dropdown {
z-index: 99999 !important;
}
.theme-picker .el-color-picker__trigger {
height: 26px !important;
width: 26px !important;
padding: 2px;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>

116
src/components/Tinymce/components/EditorImage.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<div class="upload-container">
<el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
{{ 'btn.uploadpic' | i18nFilter }}
</el-button>
<el-dialog :visible.sync="dialogVisible">
<el-upload
:multiple="true"
:file-list="fileList"
:data="dataObj"
:show-file-list="true"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
class="editor-slide-upload"
:action="uploadPath"
list-type="picture-card"
>
<el-button size="small" type="primary">
{{ 'btn.upload' | i18nFilter }}
</el-button>
</el-upload>
<el-button @click="dialogVisible = false">
{{ 'btn.cancel' | i18nFilter }}
</el-button>
<el-button type="primary" @click="handleSubmit">
{{ 'btn.confirm' | i18nFilter }}
</el-button>
</el-dialog>
</div>
</template>
<script>
// import { getToken } from 'api/qiniu'
import { uploadPath } from '@/api/basic'
export default {
name: 'EditorSlideUpload',
props: {
color: {
type: String,
default: '#1890ff'
}
},
data() {
return {
dialogVisible: false,
listObj: {},
uploadPath,
fileList: [],
dataObj: { typeCode: 'file' }
}
},
methods: {
checkAllSuccess() {
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
},
handleSubmit() {
const arr = Object.keys(this.listObj).map(v => this.listObj[v])
if (!this.checkAllSuccess()) {
this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
return
}
this.$emit('successCBK', arr)
this.listObj = {}
this.fileList = []
this.dialogVisible = false
},
handleSuccess(response, file) {
console.log(response)
console.log(file)
const uid = file.uid
const objKeyArr = Object.keys(this.listObj)
for (let i = 0, len = objKeyArr.length; i < len; i++) {
if (this.listObj[objKeyArr[i]].uid === uid) {
this.listObj[objKeyArr[i]].url = response.files.file
this.listObj[objKeyArr[i]].hasSuccess = true
return
}
}
},
handleRemove(file) {
const uid = file.uid
const objKeyArr = Object.keys(this.listObj)
for (let i = 0, len = objKeyArr.length; i < len; i++) {
if (this.listObj[objKeyArr[i]].uid === uid) {
delete this.listObj[objKeyArr[i]]
return
}
}
},
beforeUpload(file) {
const _self = this
const _URL = window.URL || window.webkitURL
const fileName = file.uid
this.listObj[fileName] = {}
return new Promise((resolve, reject) => {
const img = new Image()
img.src = _URL.createObjectURL(file)
img.onload = function() {
_self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
}
resolve(true)
})
}
}
}
</script>
<style lang="scss" scoped>
.editor-slide-upload {
margin-bottom: 20px;
::v-deep .el-upload--picture-card {
width: 100%;
}
}
</style>

59
src/components/Tinymce/dynamicLoadScript.js Normal file
View File

@@ -0,0 +1,59 @@
let callbacks = []
function loadedTinymce() {
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
// check is successfully downloaded script
return window.tinymce
}
const dynamicLoadScript = (src, callback) => {
const existingScript = document.getElementById(src)
const cb = callback || function() {}
if (!existingScript) {
const script = document.createElement('script')
script.src = src // src url for the third-party library being loaded.
script.id = src
document.body.appendChild(script)
callbacks.push(cb)
const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
onEnd(script)
}
if (existingScript && cb) {
if (loadedTinymce()) {
cb(null, existingScript)
} else {
callbacks.push(cb)
}
}
function stdOnEnd(script) {
script.onload = function() {
// this.onload = null here is necessary
// because even IE9 works not like others
this.onerror = this.onload = null
for (const cb of callbacks) {
cb(null, script)
}
callbacks = null
}
script.onerror = function() {
this.onerror = this.onload = null
cb(new Error('Failed to load ' + src), script)
}
}
function ieOnEnd(script) {
script.onreadystatechange = function() {
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
this.onreadystatechange = null
for (const cb of callbacks) {
cb(null, script) // there is no way to catch loading errors in IE8
}
callbacks = null
}
}
}
export default dynamicLoadScript

243
src/components/Tinymce/index.vue Normal file
View File

@@ -0,0 +1,243 @@
<template>
<div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
<textarea :id="tinymceId" class="tinymce-textarea" />
<div class="editor-custom-btn-container">
<editorImage v-show="false" color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
</div>
</div>
</template>
<script>
/**
* docs:
* https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
*/
import editorImage from './components/EditorImage'
import plugins from './plugins'
import toolbar from './toolbar'
import load from './dynamicLoadScript'
// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
// const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
const tinymceCDN = './tinymce/tinymce.min.js' // updated at : 2022.5.20
// const tinymceCDN = 'https://cdn.bootcdn.net/ajax/libs/tinymce/6.0.2/tinymce.min.js' // updated at : 2022.5.20
export default {
name: 'Tinymce',
components: { editorImage },
props: {
id: {
type: String,
default: function() {
return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
}
},
value: {
type: String,
default: ''
},
toolbar: {
type: Array,
required: false,
default() {
return []
}
},
menubar: {
type: String,
default: 'file edit insert view format table'
},
height: {
type: [Number, String],
required: false,
default: 360
},
width: {
type: [Number, String],
required: false,
default: 'auto'
}
},
data() {
return {
hasChange: false,
hasInit: false,
tinymceId: this.id,
fullscreen: false,
languageTypeList: {
'en': 'en',
'zh': 'zh_CN',
'es': 'es_MX',
'ja': 'ja'
}
}
},
computed: {
containerWidth() {
const width = this.width
if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'`
return `${width}px`
}
return width
}
},
watch: {
value(val) {
if (!this.hasChange && this.hasInit) {
this.$nextTick(() =>
window.tinymce.get(this.tinymceId).setContent(val || ''))
}
}
},
mounted() {
this.init()
},
activated() {
if (window.tinymce) {
this.initTinymce()
}
},
deactivated() {
this.destroyTinymce()
},
destroyed() {
this.destroyTinymce()
},
methods: {
init() {
// dynamic load tinymce from cdn
load(tinymceCDN, (err) => {
if (err) {
this.$message.error(err.message)
return
}
this.initTinymce()
})
},
initTinymce() {
const _this = this
window.tinymce.init({
selector: `#${this.tinymceId}`,
language: this.languageTypeList['zh'],
height: this.height,
body_class: 'panel-body ',
object_resizing: false,
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
menubar: this.menubar,
plugins: plugins,
end_container_on_empty_block: true,
powerpaste_word_import: 'clean',
code_dialog_height: 450,
code_dialog_width: 1000,
advlist_bullet_styles: 'square',
advlist_number_styles: 'default',
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
default_link_target: '_blank',
link_title: false,
nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
}
_this.hasInit = true
editor.on('NodeChange Change KeyUp SetContent', () => {
this.hasChange = true
this.$emit('input', editor.getContent())
})
},
setup(editor) {
editor.on('FullscreenStateChanged', (e) => {
_this.fullscreen = e.state
})
},
// it will try to keep these URLs intact
// https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
// https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions
convert_urls: false
// 整合七牛上传
// images_dataimg_filter(img) {
// setTimeout(() => {
// const $image = $(img);
// $image.removeAttr('width');
// $image.removeAttr('height');
// if ($image[0].height && $image[0].width) {
// $image.attr('data-wscntype', 'image');
// $image.attr('data-wscnh', $image[0].height);
// $image.attr('data-wscnw', $image[0].width);
// $image.addClass('wscnph');
// }
// }, 0);
// return img
// },
// images_upload_handler(blobInfo, success, failure, progress) {
// progress(0);
// const token = _this.$store.getters.token;
// getToken(token).then(response => {
// const url = response.data.qiniu_url;
// const formData = new FormData();
// formData.append('token', response.data.qiniu_token);
// formData.append('key', response.data.qiniu_key);
// formData.append('file', blobInfo.blob(), url);
// upload(formData).then(() => {
// success(url);
// progress(100);
// })
// }).catch(err => {
// failure('出现未知问题，刷新页面，或者联系程序员')
// console.log(err);
// });
// },
})
},
destroyTinymce() {
const tinymce = window.tinymce.get(this.tinymceId)
if (this.fullscreen) {
tinymce.execCommand('mceFullScreen')
}
if (tinymce) {
tinymce.destroy()
}
},
setContent(value) {
window.tinymce.get(this.tinymceId).setContent(value)
},
getContent() {
window.tinymce.get(this.tinymceId).getContent()
},
imageSuccessCBK(arr) {
const _this = this
arr.forEach(v => {
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
})
}
}
}
</script>
<style scoped>
.tinymce-container {
position: relative;
line-height: normal;
}
.tinymce-container>>>.mce-fullscreen {
z-index: 10000;
}
.tinymce-textarea {
visibility: hidden;
z-index: -1;
}
.editor-custom-btn-container {
position: absolute;
right: 4px;
top: 4px;
/*z-index: 2005;*/
}
.fullscreen .editor-custom-btn-container {
z-index: 10000;
position: fixed;
}
.editor-upload-btn {
display: inline-block;
}
</style>

7
src/components/Tinymce/plugins.js Normal file
View File

@@ -0,0 +1,7 @@
// Any plugins you want to use has to be imported
// Detail plugins list see https://www.tinymce.com/docs/plugins/
// Custom builds see https://www.tinymce.com/download/custom-builds/
const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
export default plugins

6
src/components/Tinymce/toolbar.js Normal file
View File

@@ -0,0 +1,6 @@
// Here is a list of the toolbar
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
export default toolbar

54
src/components/TopTitle/index.vue Normal file
View File

@@ -0,0 +1,54 @@
<!--
* @Author: gtz
* @Date: 2022-05-05 14:18:07
* @LastEditors: gtz
* @LastEditTime: 2022-05-06 09:25:52
* @Description: file content
* @FilePath: \mt-bus-fe\src\components\TopTitle\index.vue
-->
<template>
<div class="topTitle-box">
<span style="vertical-align: top;">{{ title }}</span>
</div>
</template>
<script>
export default {
name: 'TopTitle',
props: {
baseTitle: {
type: String,
default: ''
}
},
data() {
return {
title: ''
}
},
mounted() {
if (this.baseTitle) {
this.title = this.baseTitle
} else {
const route = this.$route
const { meta } = route
this.title = meta.title
}
}
}
</script>
<style scoped>
.topTitle-box{
color: #000000;
}
.topTitle-box::before{
display: inline-block;
content: '';
width: 4px;
height: 16px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
}
</style>

91
src/components/Tree/index.vue Normal file
View File

@@ -0,0 +1,91 @@
<!--
* @Author: gtz
* @Date: 2021-04-25 09:07:28
* @LastEditors: gtz
* @LastEditTime: 2021-06-17 15:40:57
* @Description: file content
-->
<template>
<div class="app-tree">
<el-input v-model="filterText" :placeholder="'placeholder.treeSearch' | i18nFilter" />
<el-tree
ref="tree"
:data="treeList"
:show-checkbox="showCheck"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
@check-change="handleCheckChange"
/>
</div>
</template>
<script>
import { getTreeList } from '@/api/tree'
export default {
props: {
showCheck: {
type: Boolean,
default: () => false
},
treeType: {
type: String,
default: () => ''
}
},
data() {
return {
filterText: null,
treeList: []
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val)
}
},
created() {
this.getTree()
},
methods: {
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
async getTree() {
const result = await getTreeList({ type: this.treeType })
if (result.code === 0) {
this.treeList = [result.data]
}
},
handleNodeClick(data, node, components) {
const isLast = this.formatLast(data)
if (isLast) {
this.$emit('lastNodeClick', data, node, components)
} else {
this.$emit('handleNodeClick', data, node, components)
}
},
formatLast(data) {
if (data?.children?.length > 0) {
return false
} else {
return true
}
},
handleCheckChange(data, checked, indeterminate) {
this.$emit('handleCheckChange', data, checked, indeterminate)
}
}
}
</script>
<style lang="scss" scoped>
.app-tree {
border: 2px solid rgb(228, 228, 228);
padding: 10px;
border-radius: 5px;
min-height: 500px;
}
</style>

123
src/components/Upload/MoreFiles.vue Normal file
View File

@@ -0,0 +1,123 @@
<!--
* @Author: gtz
* @Date: 2021-03-22 11:14:39
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-20 09:43:52
* @Description: file content
-->
<template>
<div class="upload-container">
<el-upload
:ref="'upload' + itemId"
:data="dataObj"
name="files"
:disabled="disable"
:file-list="annexfileList"
:action="uploadPath"
:headers="{ token }"
:on-remove="rmImage"
:before-upload="annexBeforeUpload"
:on-success="uploadDone"
:on-preview="downloadFile"
class="btn"
>
<el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
<!-- <span v-if="fileIds" slot="tip" class="el-upload__tip" @click="downloadFile">下载文件</span> -->
</el-upload>
</div>
</template>
<script>
import { cloudPath, uploadPath } from '@/api/basic'
import { getToken } from '@/utils/auth'
export default {
name: 'SingleFileUpload',
props: {
files: {
type: Array,
default: () => {
return []
}
},
disable: {
type: Boolean,
default: () => {
return false
}
},
itemId: {
type: String,
default: () => {
return ''
}
}
},
data() {
return {
tempUrl: '',
dataObj: { typeCode: 'file' },
uploadPath,
cloudPath,
imageUrl: null,
token: getToken(),
imgload: false,
annexfileList: []
}
},
mounted() {
const fileArr = []
this.files.map(item => {
fileArr.push({
id: item.id,
name: item.name
})
})
this.$refs['upload' + this.itemId].uploadFiles = fileArr
this.annexfileList = fileArr
},
methods: {
rmImage(file, fileList) {
this.annexfileList = fileList
},
uploadDone(res) {
if (res.code === 0) {
this.$refs['upload' + this.itemId].uploadFiles[this.$refs['upload' + this.itemId].uploadFiles.length - 1].id = res.data[0].id
this.annexfileList = this.$refs['upload' + this.itemId].uploadFiles
this.$emit('done', res.data)
} else {
this.$message({
type: 'error',
message: '上传失败!'
})
this.$refs['upload' + this.itemId].uploadFiles.pop()
}
},
annexBeforeUpload(file) {
const isRightSize = file.size / 1024 / 1024 < 10
if (!isRightSize) {
this.$message.error('文件大小超过 10MB')
}
return isRightSize
},
downloadFile(file) {
window.open(`${location.origin}/api/common/attachment/downloadFile?type=file&attachmentId=${file.id}`)
},
returnFileList() {
return this.annexfileList
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/index.scss";
.upload-container {
overflow: hidden;
.btn {
float: left;
}
.el-upload__tip {
@extend .pointer;
}
}
</style>

118
src/components/Upload/SingleFile.vue Normal file
View File

@@ -0,0 +1,118 @@
<template>
<div class="upload-container">
<el-upload
:multiple="false"
:data="dataObj"
name="files"
:file-list="annexfileList"
:action="uploadPath"
:headers="{ token }"
:before-upload="annexBeforeUpload"
:on-success="uploadDone"
class="btn"
>
<el-button v-if="showBtn" class="uploadButton" icon="el-icon-upload2">{{ 'btn.upload' | i18nFilter }}</el-button>
<span v-if="fileId" slot="tip" class="el-upload__tip" @click="downloadFile">下载文件</span>
</el-upload>
</div>
</template>
<script>
import { cloudPath, uploadPath } from '@/api/basic'
import { getToken } from '@/utils/auth'
export default {
name: 'SingleFileUpload',
props: {
fileId: {
type: String,
default: () => null
},
showBtn: {
type: Boolean,
default: () => true
}
},
data() {
return {
tempUrl: '',
dataObj: { typeCode: 'file' },
uploadPath,
cloudPath,
imageUrl: null,
token: getToken(),
imgload: false,
annexfileList: []
}
},
// watch: {
// fileId: function(val) {
// if (val) {
// getUrl({
// attachmentId: val,
// type: 0
// }).then(blob => {
// blobToBase64(blob.data).then(res => {
// this.imageUrl = res
// })
// })
// }
// }
// },
methods: {
rmImage() {
this.$confirm(this.$t('upload.delPic'), '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.imageUrl = null
this.emitInput(false)
})
},
emitInput(val) {
this.$emit('input', val)
},
uploadDone(res) {
console.log(res)
if (res.code === 0) {
this.$emit('done', res.data[0].id)
} else {
this.$message({
type: 'error',
message: '上传失败!'
})
}
},
annexBeforeUpload(file) {
const isRightSize = file.size / 1024 / 1024 < 10
if (!isRightSize) {
this.$message.error('文件大小超过 10MB')
}
return isRightSize
},
downloadFile() {
window.open(`${location.origin}/api/common/attachment/downloadFile?type=file&attachmentId=${this.fileId}`)
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/index.scss";
.upload-container {
overflow: hidden;
.btn {
float: left;
}
.el-upload__tip {
@extend .pointer;
}
}
.uploadButton{
width: 106px;
height: 32px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #D9D9D9;
}
</style>

179
src/components/Upload/SingleImage.vue Normal file
View File

@@ -0,0 +1,179 @@
<template>
<div class="upload-container">
<el-upload
:data="dataObj"
name="files"
:multiple="false"
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="handleImageSuccess"
:headers="{ token }"
class="image-uploader"
drag
:action="uploadPath"
>
<i class="el-icon-upload" />
<div class="el-upload__text">
{{ 'upload.text.header' | i18nFilter }}<em>{{ 'upload.text.footer' | i18nFilter }}</em>
</div>
<div class="el-upload__placeholder">
{{ 'upload.placeholder' | i18nFilter }}
</div>
</el-upload>
<div v-loading="imgload" class="image-preview">
<div v-show="imageUrl" class="image-preview-wrapper">
<img :src="imageUrl">
<div class="image-preview-action">
<i class="el-icon-delete" @click="rmImage" />
</div>
</div>
</div>
</div>
</template>
<script>
import { cloudPath, uploadPath } from '@/api/basic'
import { getUrl } from '@/api/file'
import { getToken } from '@/utils/auth'
import { blobToBase64 } from '@/utils/blobToBase64'
export default {
name: 'SingleImageUpload',
props: {
fileId: {
type: String,
default: () => {
return null
}
}
},
data() {
return {
tempUrl: '',
dataObj: { typeCode: '' },
uploadPath,
cloudPath,
imageUrl: null,
token: getToken(),
imgload: false
}
},
watch: {
fileId: function(val) {
if (val) {
getUrl({
attachmentId: val,
type: 0
}).then(blob => {
blobToBase64(blob.data).then(res => {
this.imageUrl = res
})
})
}
}
},
methods: {
rmImage() {
this.$confirm(this.$t('upload.delPic'), '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.imageUrl = null
this.emitInput(false)
})
},
emitInput(val) {
this.$emit('input', val)
},
handleImageSuccess(val) {
this.imgload = true
getUrl({
attachmentId: val.data[0].id,
type: 0
}).then(blob => {
blobToBase64(blob.data).then(res => {
this.imageUrl = res
this.imgload = false
})
})
this.emitInput(val.data[0])
},
beforeUpload(file) {
console.log(file)
this.dataObj.typeCode = this.$route.matched[0].name
const imgData = { accept: 'image/gif, image/jpeg, image/png, image/jpg' }
let isImg = true
if (imgData.accept.indexOf(file.type) === -1) {
isImg = false
this.$message.error(this.$t('upload.picAlarm'))
} else if (file.size > 1024 * 1024 * 10) {
isImg = false
this.$message.error(this.$t('upload.picSizeAlarm'))
}
return isImg
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.upload-container {
width: 100%;
position: relative;
@include clearfix;
.image-uploader {
width: 60%;
float: left;
.el-upload__placeholder{
font-size: 12px;
color: #999;
line-height: 18px;
}
}
.image-preview {
width: 200px;
height: 200px;
position: relative;
border: 1px dashed #d9d9d9;
float: left;
margin-left: 50px;
.image-preview-wrapper {
position: relative;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.image-preview-action {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: default;
text-align: center;
color: #fff;
opacity: 0;
font-size: 20px;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s;
cursor: pointer;
text-align: center;
line-height: 200px;
.el-icon-delete {
font-size: 36px;
}
}
&:hover {
.image-preview-action {
opacity: 1;
}
}
}
}
</style>

130
src/components/Upload/SingleImage2.vue Normal file
View File

@@ -0,0 +1,130 @@
<template>
<div class="singleImageUpload2 upload-container">
<el-upload
:data="dataObj"
:multiple="false"
:show-file-list="false"
:on-success="handleImageSuccess"
class="image-uploader"
drag
action="https://httpbin.org/post"
>
<i class="el-icon-upload" />
<div class="el-upload__text">
Drag或<em>点击上传</em>
</div>
</el-upload>
<div v-show="imageUrl.length>0" class="image-preview">
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl">
<div class="image-preview-action">
<i class="el-icon-delete" @click="rmImage" />
</div>
</div>
</div>
</div>
</template>
<script>
import { getToken } from '@/api/qiniu'
export default {
name: 'SingleImageUpload2',
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
tempUrl: '',
dataObj: { token: '', key: '' }
}
},
computed: {
imageUrl() {
return this.value
}
},
methods: {
rmImage() {
this.emitInput('')
},
emitInput(val) {
this.$emit('input', val)
},
handleImageSuccess() {
this.emitInput(this.tempUrl)
},
beforeUpload() {
const _self = this
return new Promise((resolve, reject) => {
getToken().then(response => {
const key = response.data.qiniu_key
const token = response.data.qiniu_token
_self._data.dataObj.token = token
_self._data.dataObj.key = key
this.tempUrl = response.data.qiniu_url
resolve(true)
}).catch(() => {
reject(false)
})
})
}
}
}
</script>
<style lang="scss" scoped>
.upload-container {
width: 100%;
height: 100%;
position: relative;
.image-uploader {
height: 100%;
}
.image-preview {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
border: 1px dashed #d9d9d9;
.image-preview-wrapper {
position: relative;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.image-preview-action {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: default;
text-align: center;
color: #fff;
opacity: 0;
font-size: 20px;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s;
cursor: pointer;
text-align: center;
line-height: 200px;
.el-icon-delete {
font-size: 36px;
}
}
&:hover {
.image-preview-action {
opacity: 1;
}
}
}
}
</style>

157
src/components/Upload/SingleImage3.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<div class="upload-container">
<el-upload
:data="dataObj"
:multiple="false"
:show-file-list="false"
:on-success="handleImageSuccess"
class="image-uploader"
drag
action="https://httpbin.org/post"
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
<div class="image-preview image-app-preview">
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl">
<div class="image-preview-action">
<i class="el-icon-delete" @click="rmImage" />
</div>
</div>
</div>
<div class="image-preview">
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
<img :src="imageUrl">
<div class="image-preview-action">
<i class="el-icon-delete" @click="rmImage" />
</div>
</div>
</div>
</div>
</template>
<script>
import { getToken } from '@/api/qiniu'
export default {
name: 'SingleImageUpload3',
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
tempUrl: '',
dataObj: { token: '', key: '' }
}
},
computed: {
imageUrl() {
return this.value
}
},
methods: {
rmImage() {
this.emitInput('')
},
emitInput(val) {
this.$emit('input', val)
},
handleImageSuccess(file) {
this.emitInput(file.files.file)
},
beforeUpload() {
const _self = this
return new Promise((resolve, reject) => {
getToken().then(response => {
const key = response.data.qiniu_key
const token = response.data.qiniu_token
_self._data.dataObj.token = token
_self._data.dataObj.key = key
this.tempUrl = response.data.qiniu_url
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.upload-container {
width: 100%;
position: relative;
@include clearfix;
.image-uploader {
width: 35%;
float: left;
}
.image-preview {
width: 200px;
height: 200px;
position: relative;
border: 1px dashed #d9d9d9;
float: left;
margin-left: 50px;
.image-preview-wrapper {
position: relative;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.image-preview-action {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: default;
text-align: center;
color: #fff;
opacity: 0;
font-size: 20px;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s;
cursor: pointer;
text-align: center;
line-height: 200px;
.el-icon-delete {
font-size: 36px;
}
}
&:hover {
.image-preview-action {
opacity: 1;
}
}
}
.image-app-preview {
width: 320px;
height: 180px;
position: relative;
border: 1px dashed #d9d9d9;
float: left;
margin-left: 50px;
.app-fake-conver {
height: 44px;
position: absolute;
width: 100%; // background: rgba(0, 0, 0, .1);
text-align: center;
line-height: 64px;
color: #fff;
}
}
}
</style>

138
src/components/UploadExcel/index.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<div>
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
<div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
Drop excel file here or
<el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
Browse
</el-button>
</div>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
props: {
beforeUpload: Function, // eslint-disable-line
onSuccess: Function// eslint-disable-line
},
data() {
return {
loading: false,
excelData: {
header: null,
results: null
}
}
},
methods: {
generateData({ header, results }) {
this.excelData.header = header
this.excelData.results = results
this.onSuccess && this.onSuccess(this.excelData)
},
handleDrop(e) {
e.stopPropagation()
e.preventDefault()
if (this.loading) return
const files = e.dataTransfer.files
if (files.length !== 1) {
this.$message.error('Only support uploading one file!')
return
}
const rawFile = files[0] // only use files[0]
if (!this.isExcel(rawFile)) {
this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
return false
}
this.upload(rawFile)
e.stopPropagation()
e.preventDefault()
},
handleDragover(e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
handleUpload() {
this.$refs['excel-upload-input'].click()
},
handleClick(e) {
const files = e.target.files
const rawFile = files[0] // only use files[0]
if (!rawFile) return
this.upload(rawFile)
},
upload(rawFile) {
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
if (!this.beforeUpload) {
this.readerData(rawFile)
return
}
const before = this.beforeUpload(rawFile)
if (before) {
this.readerData(rawFile)
}
},
readerData(rawFile) {
this.loading = true
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, { type: 'array' })
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
const header = this.getHeaderRow(worksheet)
const results = XLSX.utils.sheet_to_json(worksheet)
this.generateData({ header, results })
this.loading = false
resolve()
}
reader.readAsArrayBuffer(rawFile)
})
},
getHeaderRow(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r
/* start in the first row */
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
/* find the cell in the first row */
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
},
isExcel(file) {
return /\.(xlsx|xls|csv)$/.test(file.name)
}
}
}
</script>
<style scoped>
.excel-upload-input{
display: none;
z-index: -9999;
}
.drop{
border: 2px dashed #bbb;
width: 600px;
height: 160px;
line-height: 160px;
margin: 0 auto;
font-size: 24px;
border-radius: 5px;
text-align: center;
color: #bbb;
position: relative;
}
</style>

198
src/components/basicData/HeadForm.vue Normal file
View File

@@ -0,0 +1,198 @@
<!--
/*
* @Author: zwq
* @Date: 2020-12-29 16:18:27
* @LastEditTime: 2022-06-15 15:02:29
* @LastEditors: gtz
* @Description:
*/-->
<template>
<el-form :inline="true" :model="formInline" class="blueTip">
<el-form-item v-for="(item,index) in formConfig" :key="index" :label="item.label?item.label:''" style="marginBottom:4px" :required="item.required?item.required:false">
<el-input v-if="item.type==='input'" v-model="formInline[item.param]" size="small" clearable :disabled="item.disabled?item.disabled:false" :style="item.width?'width:'+item.width+'px':'width:200px'" :placeholder="['placeholder.input', item.placeholder ? item.placeholder : ''] | i18nFilterForm" />
<el-select v-if="item.type==='select'" v-model="formInline[item.param]" size="small" :filterable="item.filterable?item.filterable:false" :multiple="item.multiple?item.multiple:false" :clearable="item.clearable===false?false:true" :style="item.width?item.width+'px':'width:200px'" :placeholder="['placeholder.select', item.label] | i18nFilterForm" @change="item.onchange ? $emit('select-changed', { param: item.param, value: formInline[item.param]}) : null">
<el-option v-for="(sub,i) in item.selectOptions" :key="i" :label="item.labelField?sub[item.labelField]:sub['name']" :value="item.valueField?sub[item.valueField]:sub['id']" />
</el-select>
<el-date-picker
v-if="item.type==='datePicker'"
:key="item.elDatePickerKey || Math.random()"
v-model="formInline[item.param]"
size="small"
:type="item.dateType"
:format="item.format?item.format:'yyyy-MM-dd'"
:value-format="item.valueFormat?item.valueFormat:null"
:default-time="item.defaultTime || null"
:range-separator="item.dateType==='daterange' && item.rangeSeparator || null"
:start-placeholder="item.dateType==='daterange' && item.startPlaceholder || null"
:end-placeholder="item.dateType==='daterange' && item.endPlaceholder || null"
:placeholder="item.placeholder"
:picker-options="item.pickerOptions?item.pickerOptions:null"
:style="item.width?'width:'+item.width+'px':'width:250px'"
@change="$forceUpdate()"
/>
<el-autocomplete v-if="item.type==='autocomplete'" v-model="formInline[item.param]" size="small" :value-key="item.valueKey?item.valueKey:'value'" :fetch-suggestions="item.querySearch" :placeholder="['placeholder.input', item.placeholder] | i18nFilterForm" clearable :style="item.width?'width:'+item.width+'px':'width:200px'" filterable />
<el-button v-if="item.type==='button'" :type="item.color" size="small" @click="headBtnClick(item.name)">{{ item.btnName | i18nFilter }}</el-button>
<el-upload
v-if="item.type==='uploadButton'"
style="display: inline-block"
:on-success="importFile"
:on-error="importFileError"
:name="item.nameField || 'file'"
:action="item.action"
:show-file-list="false"
size="small"
>
<el-button :type="item.color">{{ item.btnName | i18nFilter }}</el-button>
</el-upload>
</el-form-item>
</el-form>
</template>
<script>
// formConfig的传入的格式demo
// headFormConfig:[
// {
// type:'input',
// label:this.$t('module.basicData.ScrapInfo.cause'),
// placeholder:this.$t('module.basicData.ScrapInfo.cause'),
// param:'scrap'
// width:200
// },
// {
// type:'select',
// label:this.$t('module.basicData.ScrapInfo.scrapType'),
// selectOptions:[],
// param:'scrapId',
// width:200,
// defaultSelect:'',
// clearable:false//不传默认显示clearable，传false就不显示clearable
// },
// {
// type: 'datePicker',
// label: this.$t('module.equipmentManager.statusSetting.searchPlaceholder2'),
// dateType:"daterange",
// format:"yyyy-MM-dd",
// valueFormat:"yyyy-MM-dd"
// rangeSeparator:"-",
// startPlaceholder:this.$t('module.equipmentManager.repair.startDate'),
// endPlaceholder:this.$t('module.equipmentManager.repair.endDate'),
// param: 'searchTime'
// },
// {
// type:'button',
// btnName:'btn.search',
// name:'search',
// color:'primary'
// }
// ],
export default {
props: {
formConfig: {
type: Array,
default: () => {
return []
}
}
},
data() {
const formInline = {}
let hasExtraOptions = false
for (const obj of this.formConfig) {
if (obj.type !== 'button') {
if (obj.defaultSelect === false || obj.defaultSelect === 0) {
formInline[obj.param] = obj.defaultSelect
} else {
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
}
}
if (obj.extraOptions) {
hasExtraOptions = true
// watchQueue.push('formInline.' + obj.param)
}
}
return {
formInline,
hasExtraOptions
}
},
watch: {
formConfig: {
handler(newVal, oldVal) {
for (const obj of this.formConfig) {
if (obj.defaultSelect) {
this.formInline[obj.param] = obj.defaultSelect
} else if (obj.defaultSelect === null) { // 需要手动从外部清除选项缓存的情况，确保在外部配置项中可直接设置null
this.formInline[obj.param] = ''
}
}
},
deep: true,
immediate: true
},
formInline: {
handler: function(val) {
this.$forceUpdate()
},
deep: true,
immediate: true
}
},
mounted() {
this.$nextTick(() => {
this.init()
})
},
methods: {
init() {
if (this.hasExtraOptions) {
// 如果有额外参数就处理，如果没有就算了
for (const obj of this.formConfig) {
if (obj.extraOptions) {
// 注: 对obj.extraOptions的选择是互斥的!
this.$watch(
`formInline.${obj.param}`,
function(newVal) {
let deleteCount = 0
if (obj.index + 1 < this.formConfig.length) {
// 如果obj不是最后一个配置
const nextConfig = this.formConfig[obj.index + 1]
if (nextConfig.parent && nextConfig.parent === obj.param) deleteCount = 1
}
const currentConfig = Object.assign({}, obj.extraOptions[newVal])
this.formConfig.splice(obj.index + 1, deleteCount, currentConfig)
// 修改 formInline
this.$set(this.formInline, currentConfig.param, '')
},
{ immediate: true }
)
}
}
}
},
headBtnClick(btnName) {
this.formInline.btnName = btnName
this.$emit('headBtnClick', this.formInline)
},
importFile(response, file, fileList) {
this.$emit('importFile', { response, file, fileList })
},
importFileError(response, file, fileList) {
this.$emit('importFileError', { response, file, fileList })
}
}
}
</script>
<style scoped>
.blueTip::before{
display: inline-block;
content: '';
width: 4px;
height: 16px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
</style>