Skip to content

A
apaas-ui
Commit 826c65fc authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

表格组件，上传组件

parent 16942806
Hide whitespace changes
Inline Side-by-side
Showing with 479 additions and 123 deletions
src/components/updatefile.vue → src/components/cropper.vue
View file @ 826c65fc
<template>
<div class="footerBtn">
<img
v-if="attach.laterUrl"
:src="attach.laterUrl"
class="preview"
style="width:200px;height:200px"
/>
<el-button @click="dialogVisible=true">上传头像</el-button>
<div class="add_img">
<div class="add_pic">
<i class="el-icon-plus add_icon"></i>
<input
type="file"
id="uploads"
class="up_input"
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="uploadImg($event,1)"
/>
</div>
<!-- 弹出层-裁剪 -->
<el-dialog title="编辑头像" :visible.sync="dialogVisible" :before-close="handleClose">
<span>
<el-row>
<input
type="file"
id="uploads"
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="uploadImg($event,1)"
class="el-button"
style="margin-bottom:15px"
/>
</el-row>
<el-row>
<el-col :span="16">
<!-- 裁剪 -->
<el-dialog
title="编辑图片"
:visible.sync="dialogVisible"
:before-close="handleClose"
:close-on-click-modal="false"
class="cropper_dia"
>
<div style="width； 100%">
<div class="cropper_container">
<!-- 裁剪 -->
<div class="croppers">
<vueCropper
style="width:100%;height:300px"
ref="cropper"
......@@ -36,21 +34,17 @@
:centerBox="options.centerBox"
@realTime="realTime"
></vueCropper>
</el-col>
<el-col :span="8">
<h2 align="center">头像预览</h2>
<div class="show-preview">
<div :style="previews.div" class="preview">
<img :src="previews.url" :style="previews.img" />
</div>
</div>
</el-col>
</el-row>
</div>
<!-- 实时裁剪结果 -->
<div :style="previews.div" class="preview">
<img :src="previews.url" :style="previews.img" />
</div>
</div>
<el-row class="footerBtn" align="center">
<el-button type="primary" size="small" round @click="cut('blob')">确认</el-button>
<el-button type="primary" size="small" round @click="handleClose">取消</el-button>
</el-row>
</span>
</div>
</el-dialog>
</div>
</template>
......@@ -67,18 +61,17 @@ export default {
options: {
autoCrop: true, //默认生成截图框
fixedBox: true, //固定截图框大小
canMoveBox: false, //截图框不能拖动
canMoveBox: true, //截图框不能拖动
autoCropWidth: 200, //截图框宽度
autoCropHeight: 200, //截图框高度
centerBox: false //截图框被限制在图片里面
},
previews: {}, //实时预览图数据
attach: {
//后端附件表
id: "",
userId: "",
customaryUrl: "", //原图片路径
laterUrl: "", //裁剪后图片路径 /static/logo.png
laterUrl: "", //裁剪后图片路径
attachType: "photo" //附件类型
},
fileName: "", //本机文件地址
......@@ -94,10 +87,10 @@ export default {
realTime(data) {
this.previews = data;
},
//加载头像信息
//加载图片信息
find() {
this.userId = sessionStorage.getItem("userId");
this.$axios.post("/api/attach/find", this.attach).then(res => {
this.$http.post("ssapi", this.attach).then(res => {
console.log(res);
});
},
......@@ -108,7 +101,7 @@ export default {
this.$message.error("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
return false;
}
console.log(e.target.result);
// console.log(e.target);
//fileReader 接口，用于异步读取文件数据
var reader = new FileReader();
reader.readAsDataURL(file); //重要 以dataURL形式读取文件
......@@ -122,6 +115,7 @@ export default {
// reader.readAsDataURL(file)
// 转化为blob
};
this.dialogVisible = true;
},
//确认截图,上传
cut(type) {
......@@ -129,13 +123,17 @@ export default {
this.$refs.cropper.getCropBlob(res => {
//res是裁剪后图片的bolb对象
formData.append("file", res, this.userId);
this.$axios
.put("ssapi", formData, {
let url = "ssurl";
this.$http
.post(url, formData, {
contentType: false,
processData: false,
headers: { "Content-Type": "multipart/form-data" }
})
.then(res => {});
.then(res => {
// 上传图片后服务器返回访问路径
this.$emit("getNewUrl", res.data.visitUrl);
});
});
}
}
......@@ -143,21 +141,52 @@ export default {
</script>
<style scoped>
/* 弹性布局 水平居中 */
.show-preview {
display: flex;
justify-content: center;
.add_img {
display: inline-block;
margin-left: 10px;
}
.add_pic {
width: 100px;
height: 100px;
border: 1px #409eff solid;
border-radius: 5px;
position: relative;
}
.add_icon {
position: absolute;
top: calc((100% - 40px) / 2);
left: calc((100% - 40px) / 2);
color: #409eff;
font-size: 40px;
}
.up_input {
display: inline-block;
width: 100%;
height: 100%;
opacity: 0;
}
.cropper_container {
width: 100%;
}
.croppers {
display: inline-block;
width: 400px;
}
.preview {
border-radius: 50%;
display: inline-block;
overflow: hidden;
border: 1px solid #cccccc;
background: #cccccc;
margin-left: 20px;
}
.footerBtn {
display: flex;
justify-content: center;
margin-top: 15px;
}
</style>
<style>
.cropper_dia .el-dialog {
width: 860px;
}
</style>
\ No newline at end of file
src/components/table-input.vue
View file @ 826c65fc
<template>
<div class="text-xs-center" @click="changeStatus">
<input ref="inp" v-show="inputStatus" v-model="inputText" @blur="changeStatus" class="table_in_input" />
<span v-show="!inputStatus">{{ item }}</span>
<div class="text-xs-center">
<el-input ref="inp" v-model="inputText" size="small" @input="changeValue" class="table_in_input"></el-input>
</div>
</template>
<script>
import helper from "@/services/helper";
export default {
props: ["item", "header", "rowId"],
props: {
item: {
type: String,
default: ""
},
header: {
type: String,
default: ""
},
rowId: {
type: Number,
default: 0
}
},
data: () => ({
inputStatus: false,
inputText: ""
}),
mounted() {
this.inputText = this.item;
},
methods: {
changeStatus() {
this.inputStatus = !this.inputStatus;
if (this.inputStatus) {
// 聚焦事件需要延时
setTimeout(() => {
this.$refs.inp.focus();
}, 100);
this.inputText = this.item;
} else {
this.$emit("changeInputValue", {
rowId: this.rowId,
header: this.header,
inputValue: this.inputText
});
}
changeValue() {
this.$emit("changeInputValue", {
rowId: this.rowId,
header: this.header,
inputValue: this.inputText
});
}
}
};
</script>
<style scoped>
.text-xs-center {
height: 24px;
height: 32px;
}
.text-xs-center input {
width: 100%;
......
src/components/table-um.vue
View file @ 826c65fc
......@@ -25,18 +25,20 @@
<el-table
:data="selectedTabsPage"
:size="size"
:border="isBorder"
:border="border"
@select="select"
@select-all="selectAll"
:defaultSelections="defaultSelections"
element-loading-text="加载中..."
:empty-text="emptyText"
:stripe="stripe"
ref="cesTable"
:class="radius?'table_radius':''"
v-cloak
>
<el-table-column v-if="isSelection" type="selection" align="center"></el-table-column>
<!-- 序号 -->
<el-table-column v-if="isIndex" type="index" :label="indexLabel" width="40" align="center"></el-table-column>
<el-table-column v-if="isIndex" type="index" :label="indexLabel" width="80" align="center"></el-table-column>
<!-- 数据栏 -->
<el-table-column
......@@ -86,9 +88,9 @@
</el-table>
</section>
<!-- 分页 -->
<section class="ces-pagination" v-if="selectedTabsPage && selectedTabsPage.length != 0">
<section class="ces-pagination" v-if="paginationShow">
<div class="ces_page_total">共 {{ pagination.total }} 个条目</div>
<div class="ces_page_num">
<div class="ces_page_num" v-if="pageSizeShow">
<div class="ces_page_num_sel">
<el-select
v-model="pagination.rowsPerPage"
......@@ -150,7 +152,6 @@ export default {
props: {
// 表格型号：mini,medium,small
size: { type: String, default: "medium" },
isBorder: { type: Boolean, default: false },
loading: { type: Boolean, default: false },
// 表格数据
headers: { type: Array, default: () => [] },
......@@ -216,6 +217,34 @@ export default {
type: String,
default: "暂无数据"
},
autoAdd: {
type: Boolean,
default: false
},
border: {
type: Boolean,
default: false
},
stripe: {
type: Boolean,
default: false
},
radius: {
type: Boolean,
default: false
},
pageSizeShow: {
type: Boolean,
default: false
},
paginationShow: {
type: Boolean,
default: false
},
couldEditStyle: {
type: Boolean,
default: false
}
},
data() {
return {
......@@ -298,11 +327,17 @@ export default {
if (this.url == "") {
this.selectedTabsPage = this.tableData;
this.pagination.total = this.selectedTabsPage.length;
if (this.autoAdd) {
this.addRow();
}
} else {
this.getDataFromApi().then(
data => {
this.selectedTabsPage = JSON.parse(JSON.stringify(data.newArr));
this.pagination.total = data.total;
if (this.autoAdd) {
this.addRow();
}
},
err => {
console.log("失败" + err);
......@@ -314,24 +349,13 @@ export default {
getDataFromApi() {
return new Promise((resolve, reject) => {
const { page, rowsPerPage } = this.pagination;
this.all_url = `${this.url}?filterBy=${
this.searchNoName
? this.search
: this.search && this.search.length > 0
? "name," + this.search
: ""
}&itemsPerPage=${rowsPerPage}&page=${page}&sortBy=${
this.sortBy != null && this.sortBy.length != ""
? this.sortBy
: "d,creationTimestamp"
}`;
this.all_url = `${this.url}`;
this.$http
.get(this.all_url)
.then(response => {
let newArr = response.data[this.rowprop];
let total = response.data.listMeta.totalItems;
resolve({ newArr, total });
this.$emit("userInfo", response.data);
})
.catch(function(response) {
// this.loading = false;
......@@ -389,7 +413,16 @@ export default {
},
// 表格编辑修改数据
changeInputValue(val) {
// You can delete the row when the row of data is empty, but I didn't do that
// console.log(this.$refs.cesTable)
this.selectedTabsPage[val.rowId][val.header] = val.inputValue;
if (
this.autoAdd &&
val.inputValue != "" &&
val.rowId + 1 == this.selectedTabsPage.length
) {
this.addRow();
}
},
// 新增表格行
addRow() {
......@@ -415,13 +448,14 @@ export default {
.ces-table .el-table colgroup.gutter {
display: table-cell !important;
}
.ces-table .el-table tbody tr:nth-child(odd) {
background: #f8f9fd;
}
.ces-table .el-table td,
.ces-table .el-table th.is-leaf {
border-bottom: none !important;
}
.ces-table .el-table--border td,
.ces-table .el-table th.is-leaf {
border-bottom: 1px solid #ebeef5 !important;
}
/* .ces-table .el-table--enable-row-hover, */
.ces-table .el-table tbody tr:hover > td {
background-color: #e4ecf8 !important;
......@@ -458,10 +492,6 @@ em {
.ces-table .el-table::before {
background: #fff;
}
.ces-table .el-table .cell,
.ces-table .el-table th div {
padding-right: 0 !important;
}
.ces-table .switchStyle .el-switch__label {
position: absolute;
display: none;
......@@ -524,9 +554,15 @@ em {
.ces-table .disture {
color: #bcc1d0 !important;
}
.el-table__row--striped td {
background: #f8f9fd !important;
}
/* .el-table th>.cell {
padding-left: 14px;
} */
.could_edit {
background-color: #5c82ff;
}
</style>
<style scoped>
.ces-table {
......@@ -563,4 +599,7 @@ em {
.ces_page_num_sel {
width: 66px;
}
.table_radius {
border-radius: 10px;
}
</style>
\ No newline at end of file
src/components/upload_file.vue 0 → 100644
View file @ 826c65fc
<template>
<div>
<div v-if="!needCropper">
<el-upload
action="ssurl"
:file-list="fileArray"
:list-type="type=='picture'?'picture-card':''"
:limit="max"
:multiple="multiple"
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:class="{hide:hideUpload || readOnly}"
:readOnly="readOnly"
:data="anotherData"
>
<el-button size="small" type="primary" v-if="type=='mp3'">上传文件</el-button>
<div slot="tip" class="el-upload__tip" v-if="type=='mp3'">支持文件格式：.mp3，单个文件不能超过20M。</div>
<i class="el-icon-plus" v-if="type=='picture'"></i>
</el-upload>
</div>
<div class="img_crop" v-else>
<div v-for="(item, index) in fileArray" :key="'img' + index" class="list_img">
<div v-if="!readOnly" @click="deleteImg(item, index)" class="list_img_back">
<i class="el-icon-delete img_del"></i>
</div>
<el-image class="list_img_item" :src="item.url" :fit="fit"></el-image>
</div>
<cropper v-if="fileArray.length <= max" @getNewUrl="getNewUrl"></cropper>
</div>
</div>
</template>
<script>
import cropper from "@/components/cropper";
export default {
components: {
cropper
},
data() {
return {
hideUpload: false,
fileArray: [],
anotherData: {}
};
},
props: {
multiple: {
type: Boolean,
default: false
},
max: {
type: Number,
default: 1
},
needCropper: {
type: Boolean,
default: false
},
list: {
type: Array,
default: []
},
type: {
type: String,
default: ""
},
readOnly: {
type: Boolean,
default: false
},
fit: {
type: String,
default: ""
}
},
watch: {
list(value) {
var getListImg = [];
if (value && value.length != 0) {
for (var i = 0; i < value.length; i++) {
getListImg.push({
name: value[i],
url: value[i]
});
}
}
this.fileArray = [...getListImg];
this.hideUpload = this.fileArray.length >= this.max;
}
},
methods: {
beforeAvatarUpload(file) {
if (this.type == "mp3") {
const isMP3 = file.type === "audio/mp3";
const isLt10M = file.size / 1024 / 1024 < 20;
if (!isMP3) {
this.$message.error("只支持 MP3 格式!");
}
if (!isLt10M) {
this.$message.error("上传 MP3 文件大小不能超过 20MB!");
}
return isMP3 && isLt10M;
} else if (this.type == "picture") {
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isJPG) {
this.$message.error("上传图片只能是 JPG 和 PNG 格式!");
}
if (!isLt10M) {
this.$message.error("上传图片大小不能超过 10MB!");
}
return isJPG && isLt10M;
}
},
handleAvatarSuccess(response, file, fileList) {
// 上传图片
if (this.type == "mp3") {
if (response.success == 1) {
this.fileArray.push({
url: response.data.dbUrl,
name: response.data.fileName
});
}
this.$emit("getNewList", this.fileArray);
} else if (this.type == "picture") {
if (response.success == 1) {
this.fileArray.push({
url: response.data.dbUrl,
name: response.data.fileName
});
}
this.$emit("getNewList", this.fileArray);
}
this.hideUpload = fileList.length >= this.max;
},
handleRemove(file, fileList) {
let url = file.url;
let detection = true;
// 等于 true 说明是刚刚上传的
// 判断方法有很多 随便用一种。
if (url) detection = url.indexOf("blob") != -1;
if (detection) {
this.fileArray.forEach((item, i, arr) => {
if (item.url === file.response.data.dbUrl) {
this.fileArray.splice(i, 1);
}
});
} else {
this.fileArray.forEach((item, i, arr) => {
if (item.url === file.url) {
this.fileArray.splice(i, 1);
}
});
}
this.hideUpload = fileList.length >= this.max;
this.$emit("getNewList", this.fileArray);
},
getNewUrl(val) {
this.fileArray.push({ name: val, url: val });
this.$emit("getNewList", this.fileArray);
},
deleteImg(item, index) {
this.fileArray.splice(index, 1);
this.$emit("getNewList", this.fileArray);
}
}
};
</script>
<style>
.hide .el-upload--picture-card {
display: none;
}
</style>
<style scoped>
.list_img {
width: 100px;
height: 100px;
border-radius: 5px;
overflow: hidden;
margin-left: 10px;
position: relative;
cursor: pointer;
}
.list_img_back {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0;
}
.list_img:hover .list_img_back {
opacity: 0.5;
}
.list_img_item {
width: 100%;
height: 100%;
}
.img_crop {
display: flex;
align-items: center;
}
.img_del {
position: absolute;
top: calc((100% - 24px) / 2);
left: calc((100% - 24px) / 2);
color: #fff;
font-size: 24px;
}
</style>
\ No newline at end of file
src/pages/table_example.vue
View file @ 826c65fc
<template>
<div class="index_container">
<div style="height: 100px"></div>
<div class="tab_ex_container">
<div style="height: 60px"></div>
<h3>常规表格</h3>
<ces-table
class="r_yhgl_table"
size="mini"
:border="false"
:headers="headers"
:url="url"
:searchShow="true"
:addRowBtn="addRowBtn"
:autoAdd="true"
:isDialog="true"
:isSelection="true"
:isIndex="true"
......@@ -15,6 +18,30 @@
:detailsUrl="detailsUrl"
@primary-edit="editItem"
:emptyText="emptyText"
:stripe="true"
:pageSizeShow="true"
></ces-table>
<h3>可编辑表格，供服务测试用</h3>
<ces-table
class="r_yhgl_table"
size="mini"
:border="true"
:headers="headers1"
:url="url"
:searchShow="false"
:addRowBtn="false"
:autoAdd="true"
:isDialog="false"
:isSelection="false"
:isIndex="true"
:confirmOptions="confirmOptions"
:detailsUrl="detailsUrl"
:radius="true"
@primary-edit="editItem"
:emptyText="emptyText"
:stripe="false"
:paginationShow="false"
:pageSizeShow="false"
></ces-table>
</div>
</template>
......@@ -25,8 +52,8 @@ export default {
data: () => ({
headers: [
{ label: "服务url", prop: "date", type: "href", align: "left" },
{ label: "服务名称", prop: "name", type: "input", align: "center" },
{ label: "中文名", prop: "address", type: "input", align: "right" },
{ label: "服务名称", prop: "name", type: "href", align: "center" },
{ label: "中文名", prop: "address", type: "href", align: "right" },
{
label: "操作",
type: "Button",
......@@ -44,16 +71,21 @@ export default {
]
}
],
headers1: [
{ label: "服务url", prop: "date", type: "input", align: "center" },
{ label: "服务名称", prop: "name", type: "input", align: "center" },
{ label: "中文名", prop: "address", type: "input", align: "center" },
],
url: "",
detailsUrl: "ss/",
addRowBtn: true,
confirmOptions: {
title: "提示", //提示
message: "确认删除该条数据？", //""
btnCancelText: "取消", //取消
btnSubmitText: "确定" //确定
},
emptyText: "暂时没数据"
title: "提示", //提示
message: "确认删除该条数据？", //""
btnCancelText: "取消", //取消
btnSubmitText: "确定" //确定
},
emptyText: "暂时没数据"
}),
components: {
cesTable
......@@ -67,8 +99,9 @@ export default {
</script>
<style scoped>
.index_container {
height: 100%;
.tab_ex_container {
padding: 20px 0;
margin-top: 84px;
overflow-x: hidden;
overflow-y: auto;
}
......
src/pages/upload_example.vue
View file @ 826c65fc
<template>
<div>
<update-file
<div class="up_ex_container">
<h3>带有裁剪功能的图片上传</h3>
<upload-file
:multiple="false"
:max="1"
:list="imgList1"
@getUrl="getImgList1"
></update-file>
:max="4"
:needCropper="true"
type="cropper"
:readOnly="false"
:list="imgList"
@getNewList="getNewList"
></upload-file>
<h3>element的图片上传</h3>
<upload-file
:multiple="false"
:max="4"
:needCropper="false"
type="picture"
:readOnly="false"
fit="fill"
:list="imgList"
@getNewList="getNewList"
></upload-file>
<h3>其他类型的文件上传，</h3>
<upload-file
:multiple="false"
:max="4"
:needCropper="false"
type="mp3"
:readOnly="false"
fit="fill"
:list="imgList"
@getNewList="getNewList"
></upload-file>
</div>
</template>
<script>
import updateFile from "../components/updatefile";
import uploadFile from "@/components/upload_file";
export default {
data() {
return {
imgList1: []
imgList: [],
imgList1: [
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
]
};
},
mounted() {},
mounted() {
setTimeout(() => {
this.imgList = this.imgList1;
}, 1000);
},
methods: {
getImgList1(url) {
this.form.pic_path = url
.map((v, k) => {
return this.tranlateUrl(v.url);
})
.join(",");
// get a new file list as an array
getNewList(val) {
console.log(val);
}
},
components: {
updateFile
uploadFile
}
};
</script>
<style scoped>
.up_ex_container {
padding: 20px 0;
margin-top: 84px;
overflow-x: hidden;
overflow-y: auto;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment