demo-web-ui
This commit is contained in:
liupopo
151
demo-web-ui/src/components/AreaPicker/index.vue
Normal file
151
demo-web-ui/src/components/AreaPicker/index.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="AreaPicker">
|
||||
<el-select v-model="form.province"
|
||||
@change="changeProvince(form.province)"
|
||||
filterable
|
||||
placeholder="请选择省份"
|
||||
:loading="loading == 'province'">
|
||||
<el-option
|
||||
v-for="item in province_list"
|
||||
:key="item.sid"
|
||||
:label="item.name"
|
||||
:value="item.sid"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="form.city"
|
||||
@change='changeCity(form.city)'
|
||||
filterable
|
||||
placeholder="请选择市"
|
||||
:loading="loading == 'city'"
|
||||
style="margin-left: 8px;">
|
||||
<el-option
|
||||
v-for="item in city_list"
|
||||
:key="item.sid"
|
||||
:label="item.name"
|
||||
:value="item.sid">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="form.county"
|
||||
@change='changeCounty(form.county)'
|
||||
filterable
|
||||
:loading="loading == 'county'"
|
||||
placeholder="请选择县/区"
|
||||
style="margin-left: 8px;">
|
||||
<el-option
|
||||
v-for="item in county_list"
|
||||
:key="item.sid"
|
||||
:label="item.name"
|
||||
:value="item.sid">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getProvince,
|
||||
getCity,
|
||||
getCounty
|
||||
} from '@/api/Common/areaPicker.js'
|
||||
export default {
|
||||
props:{
|
||||
province:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
city:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
county:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
province_list: [],
|
||||
city_list: [],
|
||||
county_list: [],
|
||||
form:{
|
||||
province: this.province,
|
||||
city: this.city,
|
||||
county: this.county
|
||||
},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
province:function(newVal,oldVal){
|
||||
this.form.province = newVal
|
||||
},
|
||||
city:function(newVal,oldVal){
|
||||
this.form.city = newVal
|
||||
},
|
||||
county:function(newVal,oldVal){
|
||||
this.form.county = newVal
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
let provincelist = await getProvince()
|
||||
this.province_list = provincelist.data
|
||||
if(this.province){
|
||||
let citylist = await getCity({ sid: this.province })
|
||||
this.city_list = citylist.data
|
||||
}
|
||||
if(this.city){
|
||||
let countylist = await getCounty({ sid: this.city })
|
||||
this.county_list = countylist.data
|
||||
}
|
||||
this.loading = false
|
||||
},
|
||||
methods: {
|
||||
changeProvince(val){
|
||||
console.log(val)
|
||||
getCity({ sid: val }).then(res => {
|
||||
this.city_list = res.data
|
||||
this.loading = false
|
||||
})
|
||||
let obj = {};
|
||||
obj = this.province_list.find((item)=>{
|
||||
return item.sid === val;//筛选出匹配数据
|
||||
});
|
||||
console.log(obj)
|
||||
this.form.city = ''
|
||||
this.form.county = ''
|
||||
this.city_list = []
|
||||
this.county_list = []
|
||||
this.loading = 'city'
|
||||
this.$emit('areaPicker', obj.sidPath)
|
||||
},
|
||||
changeCity(val){
|
||||
let obj = {};
|
||||
obj = this.city_list.find((item)=>{
|
||||
return item.sid === val;//筛选出匹配数据
|
||||
});
|
||||
console.log(obj)
|
||||
this.form.county = ''
|
||||
this.county_list = []
|
||||
this.loading = 'county'
|
||||
this.$emit('areaPicker', obj.sidPath)
|
||||
getCounty({ sid: val }).then(res => {
|
||||
this.county_list = res.data
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
changeCounty(val){
|
||||
let obj = {};
|
||||
obj = this.county_list.find((item)=>{
|
||||
return item.sid === val;//筛选出匹配数据
|
||||
});
|
||||
this.$emit('areaPicker', obj.sidPath)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
78
demo-web-ui/src/components/Breadcrumb/index.vue
Normal file
78
demo-web-ui/src/components/Breadcrumb/index.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<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="no-redirect">{{ item.meta.title }}</span>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pathToRegexp from 'path-to-regexp'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
levelList: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getBreadcrumb()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getBreadcrumb()
|
||||
},
|
||||
methods: {
|
||||
getBreadcrumb() {
|
||||
// only show routes with meta.title
|
||||
let 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: 50px;
|
||||
margin-left: 8px;
|
||||
|
||||
.no-redirect {
|
||||
color: #97a8be;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
demo-web-ui/src/components/ButtonBar/index.vue
Normal file
130
demo-web-ui/src/components/ButtonBar/index.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<!--标题按钮部分开始-->
|
||||
<div class="tab-header webtop">
|
||||
<!--标题-->
|
||||
<div>{{ viewTitle }}<span style="padding-left: 10px">{{ version }}</span><span style="padding-left: 10px">{{ time }}</span></div>
|
||||
<!--start 按钮部分开始 :icon="item.icon"-->
|
||||
<div>
|
||||
<el-button v-for="item in btnList" :key="item.btnKey" :type="item.type" :size="item.size" :disabled="btndisabled" @click="btnHandle(item.btnKey)">
|
||||
<svg-icon v-if="item.icon" :iconClass="item.icon"/>{{ item.btnLabel }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!--end 按钮部分结束-->
|
||||
</div>
|
||||
<!--标题按钮部分结束-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonBar',
|
||||
props: {
|
||||
viewTitle: String,
|
||||
version: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
time: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
btndisabled: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPath: this.$route.path,
|
||||
userSid: this.$store.getters.userInfo ? this.$store.getters.userInfo.userSid : '',
|
||||
btnList: [
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
icon: 'plus',
|
||||
btnKey: 'toAdd',
|
||||
btnLabel: '新增'
|
||||
},
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
icon: 'edit',
|
||||
btnKey: 'toEdit',
|
||||
btnLabel: '编辑'
|
||||
},
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
icon: 'submit',
|
||||
btnKey: 'doSubmit',
|
||||
btnLabel: '提交'
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
size: 'small',
|
||||
icon: 'del',
|
||||
btnKey: 'doDel',
|
||||
btnLabel: '删除'
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
size: 'small',
|
||||
icon: 'Import',
|
||||
btnKey: 'doImport',
|
||||
btnLabel: '导入'
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
size: 'small',
|
||||
icon: 'export',
|
||||
btnKey: 'build',
|
||||
btnLabel: '导出'
|
||||
},
|
||||
{
|
||||
type: 'info',
|
||||
size: 'small',
|
||||
icon: 'cross',
|
||||
btnKey: 'doClose',
|
||||
btnLabel: '关闭'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.initPermission()
|
||||
},
|
||||
methods: {
|
||||
initPermission() {
|
||||
console.log('*******************当前路径 ' + this.currentPath)
|
||||
console.log('*******************当前用户 ' + this.userSid)
|
||||
const params = {
|
||||
currentPath: this.currentPath,
|
||||
userSid: this.userSid
|
||||
}
|
||||
// req
|
||||
// .buttonPermission(params)
|
||||
// .then(resp => {
|
||||
// if (resp.success) {
|
||||
// this.btnList = resp.data
|
||||
// }
|
||||
// })
|
||||
// .catch(e => {
|
||||
// console.log('请求权限按钮组出错：' + e)
|
||||
// })
|
||||
},
|
||||
btnHandle(btnKey) {
|
||||
this.$emit('btnhandle', btnKey)
|
||||
},
|
||||
setButtonList(value) {
|
||||
this.btnList = value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.16em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
margin-right: 3px;
|
||||
}
|
||||
</style>
|
||||
45
demo-web-ui/src/components/E-image/index.vue
Normal file
45
demo-web-ui/src/components/E-image/index.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-image
|
||||
:preview-src-list="[url]"
|
||||
class="block-img"
|
||||
:src="url"
|
||||
@click.stop="handleClickItem"></el-image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickItem() {
|
||||
// 获取遮罩层dom
|
||||
let domImageMask = document.querySelector(".el-image-viewer__mask");
|
||||
if (!domImageMask) {
|
||||
return;
|
||||
}
|
||||
domImageMask.addEventListener("click", () => {
|
||||
// 点击遮罩层时调用关闭按钮的 click 事件
|
||||
document.querySelector(".el-image-viewer__close").click();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.block-img{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.el-icon-circle-close{
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
78
demo-web-ui/src/components/ErrorLog/index.vue
Normal file
78
demo-web-ui/src/components/ErrorLog/index.vue
Normal 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>
|
||||
44
demo-web-ui/src/components/Hamburger/index.vue
Normal file
44
demo-web-ui/src/components/Hamburger/index.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div style="padding: 0 15px;" @click="toggleClick">
|
||||
<svg
|
||||
:class="{'is-active':isActive}"
|
||||
class="hamburger"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="64"
|
||||
height="64"
|
||||
>
|
||||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
||||
</svg>
|
||||
</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>
|
||||
73
demo-web-ui/src/components/Pagging/index.vue
Normal file
73
demo-web-ui/src/components/Pagging/index.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12"><div style="height: 30px;" class="grid-content bg-purple" /> </el-col>
|
||||
<el-col :span="12" style="display: flex;justify-content: center;align-items: center;">
|
||||
<el-button v-if="notshowdelete == false" type="danger" size="mini" :disabled="multipleselection.length == 0" @click="delList">批量删除</el-button>
|
||||
<el-pagination
|
||||
:page-size="queryparams.size"
|
||||
:current-page="queryparams.current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="queryparams.total"
|
||||
background
|
||||
layout="total,sizes,prev,pager,next,jumper"
|
||||
@size-change="pageSizeChange"
|
||||
@current-change="pageNoChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <div style="display: flex;">
|
||||
|
||||
</div> -->
|
||||
<!-- <el-pagination @current-change="pageNoChange" :page-size="queryparams.size" :current-page="queryparams.current" background layout="total,prev, pager, next,jumper" :total="queryparams.total"></el-pagination> -->
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Pagging',
|
||||
props: {
|
||||
notshowdelete: Boolean,
|
||||
queryparams: Object,
|
||||
multipleselection: Array,
|
||||
idname: String
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
delete() {
|
||||
const id_name = this.idname || 'id'
|
||||
this.$confirm('此操作将删除[' + this.multipleselection.length + ']条数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
let ids = ''
|
||||
for (let i = 0; i < this.multipleselection.length; i++) {
|
||||
ids += this.multipleselection[i][id_name] + ','
|
||||
}
|
||||
this.$emit('dodelete', ids)
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
pageSizeChange(val) {
|
||||
this.queryparams.size = val
|
||||
this.$emit('reloading')
|
||||
},
|
||||
pageNoChange(val) {
|
||||
this.queryparams.current = val
|
||||
this.$emit('reloading')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.el-row {
|
||||
border-bottom: #dfe6ec 1px solid;
|
||||
border-left: #dfe6ec 1px solid;
|
||||
border-right: #dfe6ec 1px solid;
|
||||
padding: 10px 0 10px 0;
|
||||
}
|
||||
.el-pagination {
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
59
demo-web-ui/src/components/Screenfull/index.vue
Normal file
59
demo-web-ui/src/components/Screenfull/index.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
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>
|
||||
57
demo-web-ui/src/components/SizeSelect/index.vue
Normal file
57
demo-web-ui/src/components/SizeSelect/index.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="handleSetSize">
|
||||
<div>
|
||||
<svg-icon class-name="size-icon" icon-class="size" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
|
||||
{{
|
||||
item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sizeOptions: [
|
||||
{ label: 'Default', value: 'default' },
|
||||
{ label: 'Medium', value: 'medium' },
|
||||
{ label: 'Small', value: 'small' },
|
||||
{ label: 'Mini', value: 'mini' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
size() {
|
||||
return this.$store.getters.size
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetSize(size) {
|
||||
this.$ELEMENT.size = size
|
||||
this.$store.dispatch('app/setSize', size)
|
||||
this.refreshView()
|
||||
this.$message({
|
||||
message: 'Switch Size Success',
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
refreshView() {
|
||||
// In order to make the cached page re-rendered
|
||||
this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
|
||||
|
||||
const { fullPath } = this.$route
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$router.replace({
|
||||
path: '/redirect' + fullPath
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
62
demo-web-ui/src/components/SvgIcon/index.vue
Normal file
62
demo-web-ui/src/components/SvgIcon/index.vue
Normal 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>
|
||||
175
demo-web-ui/src/components/ThemePicker/index.vue
Normal file
175
demo-web-ui/src/components/ThemePicker/index.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<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`
|
||||
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>
|
||||
224
demo-web-ui/src/components/amap/amap.vue
Normal file
224
demo-web-ui/src/components/amap/amap.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<el-dialog top="5vh" :append-to-body="true" title="获取地图坐标" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px">
|
||||
<div class="amap-page-container">
|
||||
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />
|
||||
<div class="toolbar">
|
||||
<span>当前坐标: {{ lng }}, {{ lat }}</span>
|
||||
<span>地址: {{ address }}</span>
|
||||
<el-button type="primary" @click="select" class="btn">确定</el-button>
|
||||
|
||||
</div>
|
||||
<el-amap
|
||||
class="amap-demo"
|
||||
vid="amapDemo2"
|
||||
:zoom="zoom"
|
||||
:center="mapCenter"
|
||||
:events="events"
|
||||
:plugin="plugin"
|
||||
>
|
||||
<el-amap-marker v-for="(marker,index) in markers"
|
||||
:key="index"
|
||||
:position="marker"
|
||||
:events="markerEvents"
|
||||
/>
|
||||
<!-- <el-amap-marker v-for="marker in markers" :position="marker" /> -->
|
||||
</el-amap>
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AMapManager } from 'vue-amap'
|
||||
export default {
|
||||
name: 'AmapPage',
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
address:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
makerPosition: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
const self = this
|
||||
return {
|
||||
zoom: 14,
|
||||
mapCenter: [114.508905, 38.004099],
|
||||
searchOption: {
|
||||
city: '石家庄',
|
||||
citylimit: false
|
||||
},
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
loaded: false,
|
||||
plugin: [{
|
||||
pName: 'Geolocation',
|
||||
resizeEnable: true, //是否使用高精度定位，默认:true
|
||||
timeout: 100, //超过10秒后停止定位，默认：无穷大
|
||||
events: {
|
||||
init(o) {
|
||||
// o 是高德地图定位插件实例
|
||||
o.getCurrentPosition((status, result) => {
|
||||
if (result && result.position) {
|
||||
if (self.makerPosition.length == 0) {
|
||||
self.$emit('update:address', result.formattedAddress)
|
||||
// 设置经度
|
||||
self.lng = result.position.lng;
|
||||
// 设置维度
|
||||
self.lat = result.position.lat;
|
||||
// 设置坐标
|
||||
self.mapCenter = [self.lng, self.lat];
|
||||
}else{
|
||||
let maker = self.makerPosition.split(",")
|
||||
self.lng = maker[0]
|
||||
self.lat = maker[1]
|
||||
}
|
||||
// load
|
||||
self.loaded = true
|
||||
// 页面渲染好后
|
||||
self.$nextTick()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
events: {
|
||||
click(e) {
|
||||
const { lng, lat } = e.lnglat
|
||||
self.lng = lng
|
||||
self.lat = lat
|
||||
self.markers[0] = [lng, lat]
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
self.$emit('update:address', address)
|
||||
self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
markerEvents:{ // marker点点击事件
|
||||
click: e => {
|
||||
const { lng, lat } = e.lnglat
|
||||
self.lng = lng
|
||||
self.lat = lat
|
||||
// self.markers[0] = [lng, lat]
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
self.$emit('update:address', address)
|
||||
self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
markers: {
|
||||
get: function () {
|
||||
return [[this.lng, this.lat]]
|
||||
},
|
||||
set: function (newValue) {
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearchResult(pois) {
|
||||
let latSum = 0
|
||||
let lngSum = 0
|
||||
let _self = this
|
||||
this.markers = []
|
||||
if (pois.length > 0) {
|
||||
const { lng, lat } = pois[0]
|
||||
_self.lng = lng
|
||||
_self.lat = lat
|
||||
_self.mapCenter = [lng, lat];
|
||||
|
||||
// 这里通过高德 SDK 完成。
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 1000,
|
||||
extensions: 'all'
|
||||
})
|
||||
geocoder.getAddress([lng, lat], (status, result) => {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (result && result.regeocode) {
|
||||
let addressComponent = result.regeocode.addressComponent
|
||||
let address = addressComponent.province + addressComponent.city + addressComponent.district + addressComponent.street + addressComponent.streetNumber
|
||||
_self.$emit('update:address', address)
|
||||
_self.$nextTick()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$emit('update:dialogVisible', false)
|
||||
this.$nextTick(() => {
|
||||
done()
|
||||
})
|
||||
},
|
||||
select() {
|
||||
this.$emit('update:dialogVisible', false)
|
||||
this.$emit('update:makerPosition', this.markers[0].toString())
|
||||
this.$emit('update:address', this.address)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.amap-demo {
|
||||
height: 450px;
|
||||
}
|
||||
.search-box {
|
||||
z-index: 999;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 100px;
|
||||
}
|
||||
.amap-page-container {
|
||||
position: relative;
|
||||
}
|
||||
.toolbar{
|
||||
padding-bottom: 10px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
.btn{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
span{
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
32
demo-web-ui/src/components/flow/flow.vue
Normal file
32
demo-web-ui/src/components/flow/flow.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<bpmn-modeler
|
||||
ref="refNode"
|
||||
:xml="xmlData"
|
||||
:is-view="true"
|
||||
:taskList="taskData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import bpmnModeler from '@/views/Process/index'
|
||||
export default {
|
||||
name: "Flow",
|
||||
components: {
|
||||
bpmnModeler
|
||||
},
|
||||
props: {
|
||||
xmlData: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
taskData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
130
demo-web-ui/src/components/flow/flowRecord.vue
Normal file
130
demo-web-ui/src/components/flow/flowRecord.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--流程流转记录-->
|
||||
<el-card style="overflow: auto;height: 600px">
|
||||
<el-col :span="24">
|
||||
<div>
|
||||
<div style="width:50%;float:left;">
|
||||
<span class="el-icon-picture-outline">流程图</span>
|
||||
<flow :xmlData="xmlData" :taskData="taskData"></flow>
|
||||
</div>
|
||||
<div style="width:50%;;float:left;border-left: 1px solid blue">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item,index ) in flowRecordList" :key="index" :icon="setIcon(item.time)" :color="setColor(item.time)">
|
||||
<div v-if="item.flowableRecordVo !== null">
|
||||
<p style="font-weight: 700">{{ item.flowableRecordVo.taskName }}</p>
|
||||
<el-card :body-style="{ padding: '10px' }">
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start">
|
||||
<div>
|
||||
<label v-if="item.flowableRecordVo.taskUserInfos" style="font-weight: normal;margin-right: 30px;">实际办理：
|
||||
<span v-for="(items, index ) in item.flowableRecordVo.taskUserInfos" :key="index">{{ items.assigneeName }},</span>
|
||||
<!-- <el-tag type="info" size="mini">{{item.deptName}}</el-tag>-->
|
||||
</label>
|
||||
<label v-if="item.flowableRecordVo.candidate" style="font-weight: normal;margin-right: 30px;">候选办理：{{ item.flowableRecordVo.candidate }}</label><br>
|
||||
<label style="font-weight: normal">接收时间： </label><label style="color:#8a909c;font-weight: normal">{{ item.flowableRecordVo.createTime }}</label><br>
|
||||
<label v-if="item.flowableRecordVo.finishTime" style="font-weight: normal">办理时间： </label>
|
||||
<label style="color:#8a909c;font-weight: normal">{{ item.flowableRecordVo.finishTime }}</label><br>
|
||||
</div>
|
||||
<div>
|
||||
<label v-if="item.flowableRecordVo.duration" style="font-weight: normal">耗时：</label>
|
||||
<label style="color:red;font-weight: normal">{{ item.flowableRecordVo.duration }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p v-if="item.flowableRecordVo.comment">
|
||||
<el-tag type="success" v-if="item.flowableRecordVo.comment.type === '1'"> {{ item.flowableRecordVo.comment.comment }}</el-tag>
|
||||
<el-tag type="warning" v-if="item.flowableRecordVo.comment.type === '2'"> {{ item.flowableRecordVo.comment.comment }}</el-tag>
|
||||
<el-tag type="danger" v-if="item.flowableRecordVo.comment.type === '3'"> {{ item.flowableRecordVo.comment.comment }}</el-tag>
|
||||
<el-tag type="danger" v-if="item.flowableRecordVo.comment.type === '7'"> {{ item.flowableRecordVo.comment.comment }}</el-tag>
|
||||
<el-tag type="danger" v-if="item.flowableRecordVo.comment.type === '6'"> {{ item.flowableRecordVo.comment.comment }}</el-tag>
|
||||
</p>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p style="font-weight: 700">{{ item.processCommentVo.title }}</p>
|
||||
<el-card :body-style="{ padding: '10px' }">
|
||||
<div>
|
||||
<div>
|
||||
<label style="font-weight: normal">评论时间： </label><label style="color:#8a909c;font-weight: normal">{{ item.processCommentVo.time }}</label><br>
|
||||
<label style="font-weight: normal">评论内容： </label><label style="color:#8a909c;font-weight: normal">{{ item.processCommentVo.content }}</label><br>
|
||||
<label style="font-weight: normal" v-show="item.processCommentVo.fileList.length > 0">评论图片： </label><label style="color:#0294d7;font-weight: normal" v-show="item.processCommentVo.fileList.length > 0" @click="handLook(item.processCommentVo.fileList)">查看</label>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-dialog :visible="dialogViseble" append-to-body :before-close="handleClose">
|
||||
<el-image style="width: 178px;height: 178px" v-for="(item,index) in imgList" :key="index" :src="item" :preview-src-list="imgList"></el-image>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import flow from '@C/flow/flow'
|
||||
|
||||
export default {
|
||||
name: 'flowRecords',
|
||||
components: {
|
||||
flow
|
||||
},
|
||||
props: {
|
||||
xmlData: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
taskData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
flowRecordList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogViseble: false,
|
||||
imgList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
handLook(value) {
|
||||
console.log(value)
|
||||
this.dialogViseble = true
|
||||
this.imgList = value
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogViseble = false
|
||||
this.imgList = []
|
||||
},
|
||||
setIcon(val) {
|
||||
if (val) {
|
||||
return 'el-icon-check'
|
||||
} else {
|
||||
return 'el-icon-time'
|
||||
}
|
||||
},
|
||||
setColor(val) {
|
||||
if (val) {
|
||||
return '#2bc418'
|
||||
} else {
|
||||
return '#b3bdbb'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-tag {
|
||||
white-space: normal;
|
||||
height: auto;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
147
demo-web-ui/src/components/imgCodeRole/index.vue
Normal file
147
demo-web-ui/src/components/imgCodeRole/index.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="big-box" id="BigBox"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||||
<img class="codeimg" :src="imgCodeUrl" alt="">
|
||||
<div class="click-box" @click="clickBox"></div>
|
||||
</div>
|
||||
<div class="wordList">
|
||||
请在上图依次点击:
|
||||
<i>{{wordList[0]}}</i>
|
||||
<i>{{wordList[1]}}</i>
|
||||
<i>{{wordList[2]}}</i>
|
||||
<span class="restcode" @click="getCodeImage">换一换</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import qs from 'qs'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rndNum: '', //随机数
|
||||
imgCodeUrl: '', //图片地址
|
||||
cssCode: '', //验证码样式
|
||||
isSubmit: true, //提交开关
|
||||
zuobiaoNum: 0, //点击数
|
||||
zuobiaoArr: [], //坐标数组
|
||||
tempElement: [] ,//记录追加标签，删除时使用
|
||||
wordList: [] ,// 要选择的文字
|
||||
uuid: '',
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getCodeImage() //获取验证码
|
||||
},
|
||||
methods: {
|
||||
// 获取图片验证码
|
||||
getCodeImage() {
|
||||
this.zuobiaoNum = 0
|
||||
this.zuobiaoArr = []
|
||||
let BigBox = document.getElementById("BigBox");
|
||||
for (let i = 0; i < this.tempElement.length; i++) {
|
||||
BigBox.removeChild(this.tempElement[i]);
|
||||
}
|
||||
this.tempElement = []
|
||||
axios.get('api/portal/v1/captcha/clickWord',{ params:{_t: Date.parse(new Date()) / 1000} }).then(res =>{
|
||||
console.log(res);
|
||||
this.loading = false
|
||||
this.imgCodeUrl = "data:image/gif;base64," + res.data.data.dataVO.originalImageBase64
|
||||
this.wordList = res.data.data.dataVO.wordList
|
||||
this.uuid = res.data.data.uuid
|
||||
})
|
||||
this.rndNum = this.getRndNum()
|
||||
},
|
||||
//获取随机数,
|
||||
getRndNum() {
|
||||
return Math.random()
|
||||
.toString()
|
||||
.split('.')[1]
|
||||
},
|
||||
clickBox(event) {
|
||||
|
||||
this.zuobiaoArr[this.zuobiaoNum] = event.offsetX + ',' + event.offsetY
|
||||
this.zuobiaoArr[this.zuobiaoNum] = { 'x': parseInt(event.offsetX)-20, 'y': parseInt(event.offsetY)-20 }
|
||||
this.zuobiaoNum++
|
||||
|
||||
let BigBox = document.getElementById("BigBox");
|
||||
let addSpan = document.createElement("span");
|
||||
addSpan.innerText = this.zuobiaoNum
|
||||
addSpan.setAttribute('style', 'left: ' + event.offsetX + 'px; top:' + event.offsetY + 'px;')
|
||||
|
||||
BigBox.appendChild(addSpan)
|
||||
this.tempElement.push(addSpan)
|
||||
|
||||
if (this.zuobiaoNum == 3) {
|
||||
let data = {
|
||||
uuid: this.uuid,
|
||||
verifyCode: '['
|
||||
}
|
||||
for (var i = 0; i < this.zuobiaoArr.length; i++) {
|
||||
data.verifyCode += "{'x':" + this.zuobiaoArr[i].x + ",'y':" + this.zuobiaoArr[i].y + "}"
|
||||
}
|
||||
data.verifyCode = data.verifyCode + ']'
|
||||
console.log(this.zuobiaoArr,data)
|
||||
this.$emit("login", data)
|
||||
data = qs.stringify(data)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.big-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.codeimg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.click-box {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 92;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
.wordList{
|
||||
font-size: 18px;
|
||||
padding-top: 5px;
|
||||
i{
|
||||
padding: 0 8px;
|
||||
color: #018ad2;
|
||||
}
|
||||
.restcode{
|
||||
float: right;
|
||||
color: #018ad2;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
demo-web-ui/src/components/pagination/index.vue
Normal file
136
demo-web-ui/src/components/pagination/index.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div :class="{'hidden':hidden}" class="pagination-container e-pagination">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page.sync="current"
|
||||
:page-size.sync="Size"
|
||||
:layout="layout"
|
||||
:page-sizes="pageSizes"
|
||||
:total="total"
|
||||
v-bind="$attrs"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* props 参数
|
||||
* @total 默认数据总数
|
||||
* @page 默认开始页面
|
||||
* @limit 每页的数据条数
|
||||
* @pageSizes 分组
|
||||
* */
|
||||
|
||||
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 [5, 10, 15, 20, 30, 50]
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'prev, pager, next, sizes, total, jumper'
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
/**
|
||||
* page-size 每页显示条目个数，支持 .sync 修饰符
|
||||
* current-page 当前页数，支持 .sync 修饰符
|
||||
* */
|
||||
computed: {
|
||||
current: {
|
||||
get() {
|
||||
return this.page
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:page', val)
|
||||
}
|
||||
},
|
||||
Size: {
|
||||
get() {
|
||||
return this.limit
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:limit', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* pagination 父定义请求函数 getList
|
||||
* */
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
this.$emit('pagination', { pageNum: this.curren, pageSize: val })
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.$emit('pagination', { pageNum: val, pageSize: this.Size })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pagination-container.pagesize{
|
||||
float: right;
|
||||
padding: 0;
|
||||
}
|
||||
.pagination-container {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0 16px;
|
||||
float: right;
|
||||
}
|
||||
.pagination-container.hidden {
|
||||
display: none;
|
||||
}
|
||||
.el-pagination {
|
||||
white-space: nowrap;
|
||||
color: #303133;
|
||||
font-weight: bold;
|
||||
height: 28px;
|
||||
}
|
||||
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev{
|
||||
padding: 0 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.e-pagination{
|
||||
.el-icon-arrow-left:before,
|
||||
.el-icon-arrow-right:before{
|
||||
content: '下一页';
|
||||
color: #727272;
|
||||
}
|
||||
.el-icon-arrow-left:before{
|
||||
content: '上一页';
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
124
demo-web-ui/src/components/pagination/pageye.vue
Normal file
124
demo-web-ui/src/components/pagination/pageye.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div :class="{'hidden':hidden}" class="pagination-container e-pagination">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page.sync="current"
|
||||
:page-size.sync="Size"
|
||||
:layout="layout"
|
||||
:page-sizes="pageSizes"
|
||||
:total="total"
|
||||
v-bind="$attrs"
|
||||
@size-chage="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* props 参数
|
||||
* @total 默认数据总数
|
||||
* @page 默认开始页面
|
||||
* @limit 每页的数据条数
|
||||
* @pageSizes 分组
|
||||
* */
|
||||
|
||||
export default {
|
||||
name:"Pageination",
|
||||
props:{
|
||||
total:{
|
||||
required:true,
|
||||
type:Number
|
||||
},
|
||||
page:{
|
||||
type:Number,
|
||||
default:1
|
||||
},
|
||||
limit:{
|
||||
type:Number,
|
||||
default:20
|
||||
},
|
||||
pageSizes:{
|
||||
type:Array,
|
||||
default(){
|
||||
return[5,10,15,20,30,50]
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
// default: 'prev, pager, next, sizes, total, jumper'
|
||||
default: 'sizes'
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
current:{
|
||||
get(){
|
||||
return this.page
|
||||
},
|
||||
set(val){
|
||||
this.$emit('update:page',val)
|
||||
}
|
||||
},
|
||||
Size:{
|
||||
get(){
|
||||
return this.limit
|
||||
},
|
||||
set(){
|
||||
this.$emit('update:limit',val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleSizeChange(val){
|
||||
this.$emit('pagination',{pageNum:this.current,pageSize:val})
|
||||
},
|
||||
handleCurrentChange(val){
|
||||
this.$emit('pagination',{pageNum: val, pageSize: this.Size})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pagination-container.pagesize{
|
||||
float: right;
|
||||
padding: 0;
|
||||
}
|
||||
.pagination-container {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0 16px;
|
||||
float: right;
|
||||
}
|
||||
.pagination-container.hidden {
|
||||
display: none;
|
||||
}
|
||||
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev{
|
||||
padding: 0 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.e-pagination{
|
||||
.el-icon-arrow-left:before,
|
||||
.el-icon-arrow-right:before{
|
||||
content: '下一页';
|
||||
color: #727272;
|
||||
}
|
||||
.el-icon-arrow-left:before{
|
||||
content: '上一页';
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
70
demo-web-ui/src/components/passwordSafe/index.vue
Normal file
70
demo-web-ui/src/components/passwordSafe/index.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input :type="type" v-model="localValue" @input="onInput" :placeholder="placeholder" autocomplete="off"
|
||||
:maxlength="maxlength" show-password>
|
||||
</el-input>
|
||||
<div class="pasTips" v-if="pastips">
|
||||
<span :class="{'opcity':isopcity == 1}">弱</span> <span :class="{'opcity':isopcity == 2}">中</span> <span :class="{'opcity':isopcity == 3}">强</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "passwordInput",
|
||||
props: {
|
||||
//传进来的value值，只显示不修改
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxlength:{
|
||||
type: Number,
|
||||
default: 18
|
||||
},
|
||||
pastips:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// 获取props中value的值，并与el-input绑定，过程中不修改props中value的值，保证了单向数据流原则
|
||||
localValue: this.value,
|
||||
isopcity: 0,
|
||||
type: 'password'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput(e) {
|
||||
this.$emit('input', e)
|
||||
let $test = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,30}$/;
|
||||
let $test1 = /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+){6,12}$/; // 弱：纯数字，纯字母，纯特殊字符
|
||||
let $test2 = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/; //中：字母+数字，字母+特殊字符，数字+特殊字符
|
||||
let $test3 = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/; //强：字母+数字+特殊字符
|
||||
if(e.length < 1){ this.isopcity = 0; return;}
|
||||
if($test1.test(e)){
|
||||
this.isopcity = 1
|
||||
if($test.test(e)){
|
||||
if($test2.test(e)){
|
||||
this.isopcity = 2
|
||||
if($test3.test(e)){
|
||||
this.isopcity = 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}else{//没满足 弱 条件就依旧显示红色
|
||||
this.isopcity = 1
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
80
demo-web-ui/src/components/tab-search/index.vue
Normal file
80
demo-web-ui/src/components/tab-search/index.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="tab-header">
|
||||
<div class="tab-btn clearfix">
|
||||
<div class="search-from">
|
||||
<slot name="from"></slot>
|
||||
</div>
|
||||
<div class="search-bth">
|
||||
<slot name="btn"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
search:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form:{},
|
||||
showsearch: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~@/styles/variables.scss";
|
||||
.tab-header {
|
||||
background-color: $search-bg;
|
||||
padding: 8px 20px;
|
||||
margin-bottom: 15px;
|
||||
.tab-search{
|
||||
padding: 8px 0px;
|
||||
}
|
||||
.tab-btn{
|
||||
.search-from{
|
||||
float: left;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.search-bth{
|
||||
float: right;
|
||||
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 0px;
|
||||
.el-input__icon,
|
||||
.el-form-item__content{
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-input__inner,
|
||||
.el-form-item__label{
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: $text-color;
|
||||
}
|
||||
.el-select .el-input.is-focus .el-input__inner{
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
.el-button{
|
||||
padding: 8px 20px;
|
||||
background-color: $color-primary;
|
||||
color: $text-color-inverse;
|
||||
}
|
||||
.el-select{
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
118
demo-web-ui/src/components/uploadFile/index.vue
Normal file
118
demo-web-ui/src/components/uploadFile/index.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<el-upload class="avatar-uploader" ref="upload" action="fakeaction"
|
||||
:show-file-list="false"
|
||||
:on-change="uploadchangeFile"
|
||||
:http-request="uploadSectionFile">
|
||||
<!-- <el-button size="small" type="primary">点击上传</el-button> -->
|
||||
<img v-if="Photo" :src="Photo" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
<div slot="tip" class="el-upload__tip">{{tip}}</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { imageUpload } from '@/api/Common/Upload.js'
|
||||
export default {
|
||||
props:{
|
||||
tip:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
FrontPhoto:{
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Photo: this.FrontPhoto,
|
||||
loading: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openFullScreen2() {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
},
|
||||
// 上传文件 FrontPhoto
|
||||
uploadSectionFile(params) {
|
||||
const file = params.file,
|
||||
fileType = file.type,
|
||||
isImage = fileType.indexOf("image") != -1,
|
||||
isLt2M = file.size / 1024 / 1024 < 10;
|
||||
this.openFullScreen2()
|
||||
console.log(params)
|
||||
// 这里常规检验，看项目需求而定
|
||||
if (!isImage) {
|
||||
this.$message.error("只能上传图片格式png、jpg、gif!");
|
||||
this.loading.close();
|
||||
return;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("只能上传图片大小小于10M");
|
||||
this.loading.close();
|
||||
return;
|
||||
}
|
||||
// 根据后台需求数据格式
|
||||
const form = new FormData();
|
||||
console.log(form)
|
||||
// 文件对象
|
||||
form.append("file", file);
|
||||
|
||||
// 项目封装的请求方法，下面做简单介绍
|
||||
imageUpload(form).then(res => {
|
||||
//自行处理各种情况
|
||||
console.log(res)
|
||||
this.$emit('imgUrl', res.data)
|
||||
this.Photo = res.data.fullUrl
|
||||
if(res.code == 200){
|
||||
this.loading.close();
|
||||
this.$message({
|
||||
message: '上传成功！',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
});
|
||||
},
|
||||
uploadchangeFile(file){
|
||||
// this.Photo = URL.createObjectURL(file.raw)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 200px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
217
demo-web-ui/src/components/uploadFile/upload.vue
Normal file
217
demo-web-ui/src/components/uploadFile/upload.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken" :action="uploadFile" :accept="accept" list-type="picture-card" :file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview" :on-progress="uploadProgrees" :on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
|
||||
<i class="el-icon-plus avatar-uploader-icon"/>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" title="查看图片">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadImgFile } from '@/api/Common/Upload'
|
||||
import { getStorage } from '@/utils/auth.js'
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: '.jpg,.jpeg,.png,.JPG,.JPEG,'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadImgFile,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadImgFile // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImg(imgList) {
|
||||
this.files = imgList
|
||||
console.log('123123123', this.files)
|
||||
},
|
||||
view() {
|
||||
// window.open(this.filedUrl)
|
||||
},
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogVisible = true
|
||||
this.dialogImageUrl = file.url
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
console.log('您选择的file:', file)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
this.files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', this.files)
|
||||
this.$emit('eett', this.files)
|
||||
}
|
||||
},
|
||||
|
||||
removeImage(file, ImageFileList) {
|
||||
this.files.splice(this.files.indexOf(file), 1)
|
||||
const imgFiles = []
|
||||
this.files.forEach((o) => {
|
||||
imgFiles.push(o.url)
|
||||
})
|
||||
this.$emit('fileChange', this.files)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
this.enclosure = ''
|
||||
// 1. 保存新增文件id(this.file_add)
|
||||
this.getNewFileId(fileList)
|
||||
// 2. 保存数据库读取的已有文件id(this.file_catch)
|
||||
this.getCatchFileId(file)
|
||||
// 3. 保存并拼接id
|
||||
this.getFileId()
|
||||
// 4. 返回拼接id
|
||||
this.$emit('change', this.enclosure)
|
||||
},
|
||||
// 返回this.file_add(新上传文件的id拼接集合)
|
||||
getNewFileId(fileList) {
|
||||
// debugger
|
||||
this.file_add = ''
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if (fileList[i].response && fileList[i].response.code === '200') {
|
||||
this.file_add = this.file_add + fileList[i].response.data + ','
|
||||
}
|
||||
}
|
||||
if (this.file_add !== '') {
|
||||
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
|
||||
}
|
||||
// console.log('1. this.file_add: ' + this.file_add)
|
||||
},
|
||||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合）
|
||||
getCatchFileId(file) {
|
||||
for (var i = 0; i < this.files_list.length; i++) {
|
||||
if (this.file_catch !== '') {
|
||||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
|
||||
if (this.files_list[i].name === file.name) {
|
||||
// 2. 拆开file_catch到fils_arry
|
||||
var fils_arry = this.file_catch.split(',')
|
||||
// 3. 从fils_arry去除 this.files_list[i].id
|
||||
var arry = []
|
||||
fils_arry.forEach((element) => {
|
||||
// 不加载文件里面的
|
||||
if (element !== this.files_list[i].id) {
|
||||
arry.push(element)
|
||||
}
|
||||
})
|
||||
// 4. 重新拼接成file_catch
|
||||
this.file_catch = arry.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('2. this.file_catch:' + this.file_catch)
|
||||
},
|
||||
// 保存并拼接id
|
||||
getFileId() {
|
||||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
|
||||
if (this.file_catch !== '') {
|
||||
if (this.file_add !== '') {
|
||||
this.enclosure = this.file_catch + ',' + this.file_add
|
||||
} else {
|
||||
this.enclosure = this.file_catch
|
||||
}
|
||||
} else {
|
||||
this.enclosure = this.file_add
|
||||
}
|
||||
},
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.loadding = false
|
||||
},
|
||||
uploadProgrees(event, file, fileList) {
|
||||
if (Number(event.percent) > 0) {
|
||||
this.loadding = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
55
demo-web-ui/src/components/uploadFile/upload_apk.vue
Normal file
55
demo-web-ui/src/components/uploadFile/upload_apk.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
:action="uploadFile"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleSuccess"
|
||||
:file-list="fileList"
|
||||
:limit="1"
|
||||
name="multipartFile"
|
||||
:data="fileInfo"
|
||||
:auto-upload="false">
|
||||
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { uploadFile } from '@/api/Common/Upload'
|
||||
export default {
|
||||
props: {
|
||||
fileInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
uploadFile: uploadFile
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fileList = []
|
||||
this.uploadFile = uploadFile
|
||||
},
|
||||
methods: {
|
||||
handleSuccess(event, file, fileList) {
|
||||
console.log(file)
|
||||
this.$emit('change', file)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList)
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file)
|
||||
},
|
||||
submitUpload() {
|
||||
console.log(this.fileInfo)
|
||||
this.$refs.upload.submit()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
54
demo-web-ui/src/components/uploadFile/upload_frameApk.vue
Normal file
54
demo-web-ui/src/components/uploadFile/upload_frameApk.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
:action="uploadFile"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleSuccess"
|
||||
:file-list="fileList"
|
||||
:limit="1"
|
||||
name="file"
|
||||
:data="fileInfo"
|
||||
:auto-upload="false">
|
||||
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { upload_frameFile } from '@/api/Common/Upload'
|
||||
export default {
|
||||
props: {
|
||||
fileInfo: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
uploadFile: upload_frameFile
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fileList = []
|
||||
this.uploadFile = upload_frameFile
|
||||
},
|
||||
methods: {
|
||||
handleSuccess(event, file, fileList) {
|
||||
console.log(file)
|
||||
this.$emit('change', file)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList)
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file)
|
||||
},
|
||||
submitUpload() {
|
||||
console.log(this.fileInfo)
|
||||
this.$refs.upload.submit()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
144
demo-web-ui/src/components/uploadFile/upload_icon.vue
Normal file
144
demo-web-ui/src/components/uploadFile/upload_icon.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div><!---->
|
||||
<el-upload class="avatar-uploader" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData" :on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :limit="1" :file-list="files" list-type="picture-card" :on-preview="handlePictureCardPreview">
|
||||
<i class="el-icon-plus avatar-uploader-icon"/>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFileIcon } from '@/api/Common/Upload'
|
||||
import { getStorage } from '@/utils/auth.js' // token
|
||||
|
||||
export default {
|
||||
model: {
|
||||
prop: 'name',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
bucket: {
|
||||
type: String,
|
||||
default: 'abc'
|
||||
},
|
||||
// 长度
|
||||
width: {
|
||||
type: String,
|
||||
default: '270px'
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default:
|
||||
'.jpg,.jpeg,.png,.JPG,.JPEG,'
|
||||
},
|
||||
// 文件名称
|
||||
name: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
uploadData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
accessToken: null,
|
||||
uploadFile: uploadFileIcon,
|
||||
fileList_FuJian: [],
|
||||
enclosure: '',
|
||||
file_add: '',
|
||||
file_catch: '',
|
||||
files: [],
|
||||
files_list: [],
|
||||
filedUrl: '',
|
||||
// fileUrl: fileUrl,
|
||||
// showpicture:false,
|
||||
isview: false,
|
||||
nameArr: '',
|
||||
loadding: false,
|
||||
stateName: '',
|
||||
/* uploadData: { modelSid: '' },*/
|
||||
sid: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
name: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
console.log('aaaa1', newVal)
|
||||
this.files = newVal
|
||||
console.log('aaaa2', this.files)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.Init()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.uploadFile = uploadFileIcon // 接口
|
||||
this.accessToken = {
|
||||
token: getStorage()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 页面第一次加载
|
||||
Init() {
|
||||
if (this.name !== undefined) {
|
||||
this.files = []
|
||||
for (var i = 0; i < this.name.length; i++) {
|
||||
this.files.push({
|
||||
name: this.name[i],
|
||||
url: this.name[i]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传方案--成功后执行
|
||||
uploadImgSuccess_FuJian(response, file, fileList) {
|
||||
let _this = this
|
||||
console.log('您选择的file:', file)
|
||||
// console.log('您传递的data:', _this.uploadData)
|
||||
if (file.response.code === '200') {
|
||||
this.loadding = false
|
||||
// 返显图片
|
||||
this.filedUrl = this.fileUrl + file.response.data
|
||||
// var uid = file.response.data
|
||||
const files = []
|
||||
files.push({
|
||||
name: file.response.data.sourceFileName,
|
||||
url: file.response.data.fullUrl,
|
||||
size: file.response.data.size
|
||||
})
|
||||
this.$emit('change', files)
|
||||
}
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log('file:' + JSON.stringify(file))
|
||||
console.log('fileList:' + JSON.stringify(fileList))
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogVisible = true
|
||||
this.dialogImageUrl = file.url
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
54
demo-web-ui/src/components/uploadFile/upload_updateApk.vue
Normal file
54
demo-web-ui/src/components/uploadFile/upload_updateApk.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
:action="uploadFile"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleSuccess"
|
||||
:file-list="fileList"
|
||||
:limit="1"
|
||||
name="multipartFile"
|
||||
:data="fileInfo"
|
||||
:auto-upload="false">
|
||||
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { upload_UpdateFile } from '@/api/Common/Upload'
|
||||
export default {
|
||||
props: {
|
||||
fileInfo: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
uploadFile: upload_UpdateFile
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fileList = []
|
||||
this.uploadFile = upload_UpdateFile
|
||||
},
|
||||
methods: {
|
||||
handleSuccess(event, file, fileList) {
|
||||
console.log(file)
|
||||
this.$emit('change', file)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList)
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file)
|
||||
},
|
||||
submitUpload() {
|
||||
console.log(this.fileInfo)
|
||||
this.$refs.upload.submit()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
104
demo-web-ui/src/components/uploadFileimg/index.vue
Normal file
104
demo-web-ui/src/components/uploadFileimg/index.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<el-upload class="avatar-uploader" ref="upload" action="fakeaction"
|
||||
:show-file-list="false"
|
||||
:on-change="uploadchangeFile"
|
||||
:http-request="uploadSectionFile">
|
||||
<img v-if="FrontPhoto" :src="FrontPhoto" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
<div slot="tip" class="el-upload__tip">{{tip}}</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { imageUpload } from '@/api/Upload.js'
|
||||
export default {
|
||||
props:{
|
||||
tip:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
FrontPhoto: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 上传文件 FrontPhoto
|
||||
uploadSectionFile(params) {
|
||||
const file = params.file,
|
||||
fileType = file.type,
|
||||
isImage = fileType.indexOf("image") != -1,
|
||||
isLt2M = file.size / 1024 / 1024 < 2;
|
||||
console.log(params)
|
||||
// 这里常规检验，看项目需求而定
|
||||
if (!isImage) {
|
||||
this.$message.error("只能上传图片格式png、jpg、gif!");
|
||||
return;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("只能上传图片大小小于2M");
|
||||
return;
|
||||
}
|
||||
// 根据后台需求数据格式
|
||||
const form = new FormData();
|
||||
console.log(form)
|
||||
// 文件对象
|
||||
form.append("file", file);
|
||||
|
||||
// 项目封装的请求方法，下面做简单介绍
|
||||
imageUpload(form).then(res => {
|
||||
//自行处理各种情况
|
||||
console.log(res)
|
||||
this.$emit('imgUrl',res.filePath)
|
||||
// this.FrontPhoto = res.fullUrl
|
||||
if(res.msg == '操作成功'){
|
||||
this.$message({
|
||||
message: '上传成功！',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
});
|
||||
},
|
||||
uploadchangeFile(file){
|
||||
this.FrontPhoto = URL.createObjectURL(file.raw)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 200px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
.el-upload__tip{
|
||||
line-height: 25px;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
55
demo-web-ui/src/components/viewerjs/index.vue
Normal file
55
demo-web-ui/src/components/viewerjs/index.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div id="index">
|
||||
<ul>
|
||||
<li v-for="(item,index) of imgArr"><img :src="item" alt="图片描述"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Viewer from 'viewerjs';
|
||||
import 'viewerjs/dist/viewer.css';
|
||||
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
data() {
|
||||
return {
|
||||
imgArr:[
|
||||
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2181711937,4147085500&fm=26&gp=0.jpg',
|
||||
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1403641414,3238219543&fm=26&gp=0.jpg',
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
const ViewerDom = document.getElementById('index');
|
||||
const viewer = new Viewer(ViewerDom, {
|
||||
// 相关配置项,详情见下面
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
/* ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
ul li{
|
||||
width:265px;
|
||||
height: 180px;
|
||||
list-style: none;
|
||||
border:2px solid #CCC;
|
||||
border-radius: 3px;
|
||||
padding: 1px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
} */
|
||||
ul li img{
|
||||
width:100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user