初始化
This commit is contained in:
hezhidong
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="newlyClick" type="primary" size="mini" icon="el-icon-plus"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button @click="resetClick" type="info" size="mini" icon="iconfont icon-biaodan"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button @click="searchClick" type="warning" size="mini" icon="el-icon-search"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-input
|
||||
v-if="false"
|
||||
v-model="searchData"
|
||||
size="mini"
|
||||
style="width: 20%"
|
||||
placeholder="请输入搜索的关键字"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonHead",
|
||||
data() {
|
||||
return {
|
||||
searchData: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
newlyClick() {
|
||||
// 在此处调用父组件传入的方法叫父组件做事情
|
||||
this.$emit("newly-data");
|
||||
},
|
||||
resetClick() {
|
||||
this.$emit("reset-data");
|
||||
},
|
||||
searchClick() {
|
||||
this.$emit("search-data", this.searchData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-table
|
||||
border
|
||||
:header-cell-style="{
|
||||
background: '#f5f7fa',
|
||||
}"
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
height="650"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
align="left"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
></el-table-column>
|
||||
<el-table-column align="left" prop="zip" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<el-table
|
||||
border
|
||||
:header-cell-style="{
|
||||
background: '#f5f7fa',
|
||||
}"
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
height="650"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
align="left"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'signUp'">
|
||||
<el-tag size="small" v-if="scope.row[column.prop] == 0">已到</el-tag>
|
||||
<el-tag size="small" type="success" v-else-if="scope.row[column.prop] == 1"
|
||||
>迟到</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else-if="scope.row[column.prop] == 2"
|
||||
>旷课</el-tag
|
||||
>
|
||||
<el-tag size="small" type="warning" v-else-if="scope.row[column.prop] == 3"
|
||||
>请假</el-tag
|
||||
>
|
||||
<el-tag size="small" type="warning" v-else-if="scope.row[column.prop] == 4"
|
||||
>早退</el-tag
|
||||
>
|
||||
</div>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 200px; height: 100px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="left" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<el-dialog title="图片剪裁" width="630px" :visible.sync="dialogVisible" append-to-body>
|
||||
<div class="cropper-content">
|
||||
<div class="cropper" style="text-align: center">
|
||||
<!-- 这个组件vueCropper就是我们刚才引入在main.js里面的那个 直接拿来用 就好 -->
|
||||
<vueCropper
|
||||
ref="cropper"
|
||||
:img="option.img"
|
||||
:output-size="option.size"
|
||||
:output-type="option.outputType"
|
||||
:info="true"
|
||||
:full="option.full"
|
||||
:can-move="option.canMove"
|
||||
:can-move-box="option.canMoveBox"
|
||||
:original="option.original"
|
||||
:auto-crop="option.autoCrop"
|
||||
:fixed="option.fixed"
|
||||
:fixed-number="option.fixedNumber"
|
||||
:center-box="option.centerBox"
|
||||
:info-true="option.infoTrue"
|
||||
:fixed-box="option.fixedBox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
list-type="picture"
|
||||
action=""
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:on-change="changeUpload"
|
||||
>
|
||||
<i class="el-icon-refresh" style="margin-right: 5px" />换图片
|
||||
</el-upload>
|
||||
</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="finish">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import axios from "axios"; //你们有封装接口了的 就直接用你们封装的方法来写 我这里是为了做样式 就直接用了axios请求
|
||||
// 发送到服务器的请求
|
||||
import { rqUploadImages } from "../../views/growthAlbumSection/pictureSetConfiguration/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
// 这都是需要用到的参数看个人需求 用不到的可以删除 可以去官网参考一下
|
||||
option: {
|
||||
name: "",
|
||||
img: "",
|
||||
info: true,
|
||||
outputSize: 1,
|
||||
outputType: "png",
|
||||
canScale: false,
|
||||
autoCrop: true,
|
||||
fixedBox: false,
|
||||
fixed: false,
|
||||
fixedNumber: [150, 240],
|
||||
full: true,
|
||||
canMoveBox: true,
|
||||
original: false,
|
||||
centerBox: false,
|
||||
infoTrue: true,
|
||||
},
|
||||
// 上传线上地址的数据
|
||||
form: {
|
||||
files: [],
|
||||
type: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
changeUpload(file) {
|
||||
let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
const isJPG = testmsg === "jpg";
|
||||
const isJPEG = testmsg === "jpeg";
|
||||
const isPNG = testmsg === "png";
|
||||
if (!isJPG && !isPNG && !isJPEG) {
|
||||
this.$message.error("上传图片只能是 JPG/JPEG 或 PNG 格式!");
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.option.img = file.url;
|
||||
this.option.name = file.name;
|
||||
this.dialogVisible = true;
|
||||
});
|
||||
},
|
||||
// 上传
|
||||
async Upload() {
|
||||
let json = "";
|
||||
let newJson = JSON.stringify(this.form);
|
||||
json = newJson;
|
||||
try {
|
||||
let result = await rqUploadImages(json);
|
||||
if (result.code == 200) {
|
||||
this.$message.success("新增成功");
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
finish() {
|
||||
this.$refs.cropper.getCropBlob(async (data) => {
|
||||
let file = new FormData(); //转formData格式 因为我们获取的是blob类型 我后端只支持文件类型所以转了 如果你们后端什么格式都接受 这里就不用走了
|
||||
var abc = new File([data], this.option.name, { type: "image/jpg" });
|
||||
file.append("img", abc);
|
||||
axios
|
||||
.post(this.$store.state.imgUrl, file, {
|
||||
// headers: {
|
||||
// "Content-Type": "application/x-www-form-urlencoded",
|
||||
// token: "这里是token 后端需要的话就带 不需要这个可以删掉",
|
||||
// },
|
||||
headers: this.$store.state.uploadHeader,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(this.form);
|
||||
console.log(res.data.data); //后端返回来的图片地址
|
||||
this.form.files.push(res.data.data);
|
||||
this.Upload();
|
||||
this.dialogVisible = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cropper {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!-- page-size 每页数据 -->
|
||||
<template>
|
||||
<div class="pagination-box">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageNum"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
total: {
|
||||
required: true,
|
||||
type: Number
|
||||
},
|
||||
pageNum: {
|
||||
type: Number
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
this.$emit('clickSize',val)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.$emit('clickCurrent',val)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
created(){
|
||||
console.log('分液器')
|
||||
// 阿莎积分拉萨见附件当了
|
||||
},
|
||||
mounted(){
|
||||
console.log('mounted')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pagination-box{
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user