first commit
This commit is contained in:
51
base-vue/src/components/icon-svg/index.vue
Normal file
51
base-vue/src/components/icon-svg/index.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<svg
|
||||
:class="getClassName"
|
||||
:width="width"
|
||||
:height="height"
|
||||
aria-hidden="true">
|
||||
<use :xlink:href="getName"></use>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'icon-svg',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
type: String
|
||||
},
|
||||
height: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getName () {
|
||||
return `#icon-${this.name}`
|
||||
},
|
||||
getClassName () {
|
||||
return [
|
||||
'icon-svg',
|
||||
`icon-svg__${this.name}`,
|
||||
this.className && /\S/.test(this.className) ? `${this.className}` : ''
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.icon-svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
84
base-vue/src/components/table-tree-column/index.vue
Normal file
84
base-vue/src/components/table-tree-column/index.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<el-table-column :prop="prop" v-bind="$attrs">
|
||||
<template slot-scope="scope">
|
||||
<span @click.prevent="toggleHandle(scope.$index, scope.row)" :style="childStyles(scope.row)">
|
||||
<i :class="iconClasses(scope.row)" :style="iconStyles(scope.row)"></i>
|
||||
{{ scope.row[prop] }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import isArray from 'lodash/isArray'
|
||||
export default {
|
||||
name: 'table-tree-column',
|
||||
props: {
|
||||
prop: {
|
||||
type: String
|
||||
},
|
||||
treeKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
parentKey: {
|
||||
type: String,
|
||||
default: 'parentId'
|
||||
},
|
||||
levelKey: {
|
||||
type: String,
|
||||
default: '_level'
|
||||
},
|
||||
childKey: {
|
||||
type: String,
|
||||
default: 'children'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
childStyles (row) {
|
||||
return { 'padding-left': (row[this.levelKey] > 1 ? row[this.levelKey] * 7 : 0) + 'px' }
|
||||
},
|
||||
iconClasses (row) {
|
||||
return [ !row._expanded ? 'el-icon-caret-right' : 'el-icon-caret-bottom' ]
|
||||
},
|
||||
iconStyles (row) {
|
||||
return { 'visibility': this.hasChild(row) ? 'visible' : 'hidden' }
|
||||
},
|
||||
hasChild (row) {
|
||||
return (isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false
|
||||
},
|
||||
// 切换处理
|
||||
toggleHandle (index, row) {
|
||||
if (this.hasChild(row)) {
|
||||
var data = this.$parent.store.states.data.slice(0)
|
||||
data[index]._expanded = !data[index]._expanded
|
||||
if (data[index]._expanded) {
|
||||
data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data)
|
||||
} else {
|
||||
data = this.removeChildNode(data, row[this.treeKey])
|
||||
}
|
||||
this.$parent.store.commit('setData', data)
|
||||
this.$nextTick(() => {
|
||||
this.$parent.doLayout()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 移除子节点
|
||||
removeChildNode (data, parentId) {
|
||||
var parentIds = isArray(parentId) ? parentId : [parentId]
|
||||
if (parentId.length <= 0) {
|
||||
return data
|
||||
}
|
||||
var ids = []
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (parentIds.indexOf(data[i][this.parentKey]) !== -1 && parentIds.indexOf(data[i][this.treeKey]) === -1) {
|
||||
data[i]._expanded = false
|
||||
ids.push(data.splice(i, 1)[0][this.treeKey])
|
||||
i--
|
||||
}
|
||||
}
|
||||
return this.removeChildNode(data, ids)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
118
base-vue/src/components/upload/multiUpload.vue
Normal file
118
base-vue/src/components/upload/multiUpload.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
action="http://mashibing-mall.oss-cn-guangzhou.aliyuncs.com"
|
||||
:data="dataObj"
|
||||
list-type="picture-card"
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleUploadSuccess"
|
||||
:on-preview="handlePreview"
|
||||
:limit="maxCount"
|
||||
:on-exceed="handleExceed"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { policy } from "./policy";
|
||||
import { getUUID } from '@/utils'
|
||||
export default {
|
||||
name: "multiUpload",
|
||||
props: {
|
||||
//图片属性数组
|
||||
value: Array,
|
||||
//最大上传图片数量
|
||||
maxCount: {
|
||||
type: Number,
|
||||
default: 30
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataObj: {
|
||||
policy: "",
|
||||
signature: "",
|
||||
key: "",
|
||||
ossaccessKeyId: "",
|
||||
dir: "",
|
||||
host: "",
|
||||
uuid: ""
|
||||
},
|
||||
dialogVisible: false,
|
||||
dialogImageUrl: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
fileList() {
|
||||
let fileList = [];
|
||||
for (let i = 0; i < this.value.length; i++) {
|
||||
fileList.push({ url: this.value[i] });
|
||||
}
|
||||
|
||||
return fileList;
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
emitInput(fileList) {
|
||||
let value = [];
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
value.push(fileList[i].url);
|
||||
}
|
||||
this.$emit("input", value);
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.emitInput(fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
this.dialogVisible = true;
|
||||
this.dialogImageUrl = file.url;
|
||||
},
|
||||
beforeUpload(file) {
|
||||
let _self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
policy()
|
||||
.then(response => {
|
||||
console.log("这是什么${filename}");
|
||||
_self.dataObj.policy = response.data.policy;
|
||||
_self.dataObj.signature = response.data.signature;
|
||||
_self.dataObj.ossaccessKeyId = response.data.accessid;
|
||||
_self.dataObj.key = response.data.dir + "/"+getUUID()+"_${filename}";
|
||||
_self.dataObj.dir = response.data.dir;
|
||||
_self.dataObj.host = response.data.host;
|
||||
resolve(true);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log("出错了...",err)
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleUploadSuccess(res, file) {
|
||||
this.fileList.push({
|
||||
name: file.name,
|
||||
// url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name; 替换${filename}为真正的文件名
|
||||
url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}",file.name)
|
||||
});
|
||||
this.emitInput(this.fileList);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message({
|
||||
message: "最多只能上传" + this.maxCount + "张图片",
|
||||
type: "warning",
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
|
||||
12
base-vue/src/components/upload/policy.js
Normal file
12
base-vue/src/components/upload/policy.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import http from '@/utils/httpRequest.js'
|
||||
export function policy() {
|
||||
return new Promise((resolve,reject)=>{
|
||||
http({
|
||||
url: http.adornUrl("/third/oss/policy"),
|
||||
method: "get",
|
||||
params: http.adornParams({})
|
||||
}).then(({ data }) => {
|
||||
resolve(data);
|
||||
})
|
||||
});
|
||||
}
|
||||
110
base-vue/src/components/upload/singleUpload.vue
Normal file
110
base-vue/src/components/upload/singleUpload.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
action="http://mashibing-mall.oss-cn-guangzhou.aliyuncs.com"
|
||||
:data="dataObj"
|
||||
list-type="picture"
|
||||
:multiple="false" :show-file-list="showFileList"
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleUploadSuccess"
|
||||
:on-preview="handlePreview">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过10MB</div>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="fileList[0].url" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {policy} from './policy'
|
||||
import { getUUID } from '@/utils'
|
||||
|
||||
export default {
|
||||
name: 'singleUpload',
|
||||
props: {
|
||||
value: String
|
||||
},
|
||||
computed: {
|
||||
imageUrl() {
|
||||
return this.value;
|
||||
},
|
||||
imageName() {
|
||||
if (this.value != null && this.value !== '') {
|
||||
return this.value.substr(this.value.lastIndexOf("/") + 1);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
fileList() {
|
||||
return [{
|
||||
name: this.imageName,
|
||||
url: this.imageUrl
|
||||
}]
|
||||
},
|
||||
showFileList: {
|
||||
get: function () {
|
||||
return this.value !== null && this.value !== ''&& this.value!==undefined;
|
||||
},
|
||||
set: function (newValue) {
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataObj: {
|
||||
policy: '',
|
||||
signature: '',
|
||||
key: '',
|
||||
ossaccessKeyId: '',
|
||||
dir: '',
|
||||
host: '',
|
||||
// callback:'',
|
||||
},
|
||||
dialogVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
emitInput(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.emitInput('');
|
||||
},
|
||||
handlePreview(file) {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
beforeUpload(file) {
|
||||
let _self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
policy().then(response => {
|
||||
console.log("--->",response);
|
||||
_self.dataObj.policy = response.data.policy;
|
||||
_self.dataObj.signature = response.data.signature;
|
||||
_self.dataObj.ossaccessKeyId = response.data.accessid;
|
||||
_self.dataObj.key = response.data.dir +getUUID()+'_${filename}';
|
||||
_self.dataObj.dir = response.data.dir;
|
||||
_self.dataObj.host = response.data.host;
|
||||
resolve(true)
|
||||
}).catch(err => {
|
||||
reject(false)
|
||||
})
|
||||
})
|
||||
},
|
||||
handleUploadSuccess(res, file) {
|
||||
console.log("上传成功...")
|
||||
this.showFileList = true;
|
||||
this.fileList.pop();
|
||||
this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });
|
||||
this.emitInput(this.fileList[0].url);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user