hi-ucs/back/src/views/modules/activiti/my-work-dynamics.vue

551 lines
17 KiB
Vue
Raw Normal View History

2022-06-14 09:32:49 +08:00
<template>
<el-card class="home">
<el-row :gutter="20">
<el-col :span="4">
<el-input
v-model="queryData.keyworld"
placeholder="请输入关键词进行筛选"
clearable
/>
</el-col>
<el-button type="primary" @click="flashTableData">查询</el-button>
<el-button type="primary" @click="restTableData">重置</el-button>
<div style="float: right">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="deleteData"
>批量删除</el-button>
<el-button
type="primary"
@click="addDataDialogVisabled = true"
>动态发布</el-button>
</div>
</el-row>
<el-row style="margin-top: 20px">
<el-table :data="tableData" border @selection-change="tableChange" >
<el-table-column width="60" type="selection" align="center"></el-table-column> <!-- -->
<el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
<el-table-column label="动态标题" prop="title">
<template slot-scope="scope">
<div class="boxtitle">
{{scope.row.title}}
</div>
</template>
</el-table-column>
<el-table-column label="内容" prop="content">
<template slot-scope="scope">
<div class="boxcontent">
{{scope.row.content}}
</div>
</template>
</el-table-column>
<el-table-column label="图片地址" prop="imageUrl"></el-table-column>
<el-table-column label="创建时间" prop="createDate" sortable></el-table-column>
<el-table-column width="200" label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" @click="openEditDialog(scope.row)" type="text" icon="el-icon-setting"
>编辑</el-button
>
<!-- <el-button size="mini" type="success" icon="el-icon-plus"
>新增图片</el-button
> -->
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="deleteData(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
</el-row><el-pagination
style="margin-top: 20px; text-align: center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryData.pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="queryData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="queryData.total"
>
</el-pagination>
<!-- 新增项目 -->
<el-dialog :close-on-click-modal="false"
title="新增项目"
:visible.sync="addDataDialogVisabled"
@close="addDataDialogClose"
>
<el-form
ref="addDataFormRef"
:model="addDataFrom"
:rules="addDataFromRules"
label-width="100"
>
<el-form-item prop="title" label="标题">
<el-input
v-model="addDataFrom.title"
autocomplete="off"
placeholder="标题"
maxlength="200"
@input="titleExceed"
show-word-limit
></el-input>
</el-form-item>
<el-form-item prop="content" label="内容">
<el-input
v-model="addDataFrom.content"
autocomplete="off"
placeholder="内容"
maxlength="2000"
@input="contentExceed"
show-word-limit
type="textarea"
:rows="5"
></el-input>
</el-form-item>
<el-form-item>
<!-- <el-upload
class="avatar-uploader"
:action="fileUploadUrl"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="this.addDataFrom.imageUrl" :src="this.addDataFrom.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> -->
<el-upload
ref="addUpload"
class="upload-demo"
:action="fileUploadUrl"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-remove="addUploadRemoveFile"
:on-exceed="handleExceed"
:on-preview="showView"
:limit="1"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDataDialogVisabled = false"> </el-button>
<el-button type="primary" @click="addDataDialogConfirm"
> </el-button
>
</div>
</el-dialog>
<!-- 编辑项目 -->
<el-dialog :close-on-click-modal="false"
title="编辑项目"
:visible.sync="editDataDialogVisabled"
@close="editDataDialogClose"
>
<el-form
ref="editDataFormRef"
:model="eidtDataForm"
:rules="eidtDataFromRules"
label-width="100"
>
<el-form-item prop="title" label="标题">
<el-input
v-model="eidtDataForm.title"
autocomplete="off"
placeholder="标题"
maxlength="200"
@input="titleExceed"
show-word-limit
></el-input>
</el-form-item>
<el-form-item prop="content" label="内容">
<el-input
v-model="eidtDataForm.content"
autocomplete="off"
placeholder="内容"
maxlength="2000"
show-word-limit
type="textarea"
@input="contentExceed"
:rows="5"
></el-input>
</el-form-item>
<el-form-item>
<!-- <el-upload
class="avatar-uploader"
:action="fileUploadUrl"
:show-file-list="false"
:on-success="eidtHandleAvatarSuccess"
:before-upload="editBeforeAvatarUpload">
<img v-if="eidtDataForm.imageUrl" :src="eidtDataForm.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> -->
<el-upload
ref="editUpload"
class="upload-demo"
:action="fileUploadUrl"
:on-success="eidtHandleAvatarSuccess"
:before-upload="editBeforeAvatarUpload"
:limit="1"
:file-list="editDialogShowFileList"
:on-remove="editUploadRemoveFile"
:on-exceed="handleExceed"
:on-preview="showView"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editDataDialogVisabled = false"> </el-button>
<el-button type="primary" @click="eidtDataDialogConfirm"> </el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogVisibleImg">
<img width="100%" :src="previewImg" alt="">
</el-dialog>
</el-card>
</template>
<script>
// @ is an alias to /src
export default {
data () {
return {
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
// 表格筛选条件对象
queryData: {
keyworld: '',
pageIndex: 1,
pageSize: 10,
total: 0
},
// 表格数据数组对象
tableData: [],
// 新增数据对话框显示隐藏
addDataDialogVisabled: false,
// 最大可上传图片数
maxImageCount: 3,
// imageUrl: '',
// 新增数据表单对象
addDataFrom: {
title: '',
content: '',
imageUrl: '',
delFlag: 0
},
// 新增数据表单验证对象
addDataFromRules: {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
content: [
{ required: true, message: '请输入内容', trigger: 'blur' }
],
imageUrl: [
{ required: true, message: '请输入图片地址', trigger: 'blur' }
]
},
editDataDialogVisabled: false,
eidtDataForm: {
title: '',
content: '',
imageUrl: ''
},
eidtDataFromRules: {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
content: [
{ required: true, message: '请输入内容', trigger: 'blur' }
],
imageUrl: [
{ required: true, message: '请输入图片地址', trigger: 'blur' }
]
},
previewImg: '', // 预览图片
deleteDataArr: [],
dialogVisibleImg: false
}
},
created () {
this.getTableData()
},
methods: {
tableChange (val) {
this.deleteDataArr = val.map(item => item.id)
console.log(this.deleteDataArr)
},
restTableData () {
this.queryData.keyworld = ''
this.getTableData()
},
showView (file) {
this.previewImg = file.url
this.dialogVisibleImg = true
},
getTableData () {
this.$http.get('/workdynamics/page', {
params: {
limit: this.queryData.pageSize,
page: this.queryData.pageIndex,
name: this.queryData.keyworld
}
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.tableData = res.data.list
this.queryData.total = res.data.total
})
.catch(() => {})
},
flashTableData () {
this.queryData.pageIndex = 1
this.getTableData()
},
// 分页大小更改
handleSizeChange (value) {
this.queryData.pageSize = value
this.getTableData()
},
// 当前索引更改
handleCurrentChange (val) {
this.queryData.pageIndex = val
this.getTableData()
},
// 新增数据窗口关闭事件
addDataDialogClose () {
this.$refs.addDataFormRef.resetFields()
this.addDataFrom.imageUrl = ''
this.$refs.addUpload.clearFiles()
// this.addDataFrom.imagesFiles = []
// this.$refs.addDataFromUploadRef.clearFiles()
},
editDataDialogClose () {
this.$refs.editDataFormRef.resetFields()
this.eidtDataForm.imageUrl = ''
this.$refs.editUpload.clearFiles()
},
// 追加数据
addDataDialogConfirm () {
this.$refs.addDataFormRef.validate(async (valid) => {
if (valid) {
this.$http
.post('/workdynamics/insert', this.addDataFrom)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message.success('新增成功')
this.addDataDialogVisabled = false
this.getTableData()
})
.catch(() => {})
} else {
this.$message.success('表单数据填写不完整')
}
})
},
// 限定图片
handleExceed () {
this.$message({ type: 'error', message: '最多支持一张图片上传' })
},
// 限制标题
titleExceed (str) {
if (str.length >= 200) {
this.$message.error('标题文字不能超过200字')
}
},
// 限制内容
contentExceed (str) {
if (str.length >= 2000) {
this.$message.error('内容文字不能超过2000字')
}
},
// 删除数据
deleteData (row) {
console.log(row)
this.$confirm('此操作将删除当前数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
let ids = []
if (this.deleteDataArr.length > 1) {
ids = this.deleteDataArr
} else {
ids = [row.id]
}
console.log(ids)
this.$http.delete('/workdynamics/delete', {
data: ids
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
type: 'success',
message: '删除成功!'
})
this.getTableData()
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
handleAvatarSuccess (res, file) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.addDataFrom.imageUrl = res.data
// this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload (file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isImage) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isImage && isLt2M
},
eidtHandleAvatarSuccess (res, file) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.eidtDataForm.imageUrl = res.data
// this.imageUrl = URL.createObjectURL(file.raw);
},
editBeforeAvatarUpload (file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isImage) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isImage && isLt2M
},
async openEditDialog (row) {
const { data: res } = await this.$http.get(`workdynamics/select/${row.id}`)
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.eidtDataForm = res.data
this.editDataDialogVisabled = true
},
eidtDataDialogConfirm () {
this.$refs.editDataFormRef.validate(async (valid) => {
if (valid) {
console.log(this.eidtDataForm)
this.$http
.put('/workdynamics/update', this.eidtDataForm)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message.success('编辑成功')
this.editDataDialogVisabled = false
this.getTableData()
})
.catch(() => {})
} else {
this.$message.success('表单数据填写不完整')
}
})
},
addUploadRemoveFile (file, fileList) {
this.$refs.addUpload.clearFiles()
this.addDataFrom.imageUrl = ''
},
editUploadRemoveFile (file, fileList) {
this.$refs.editUpload.clearFiles()
this.eidtDataForm.imageUrl = ''
}
},
computed: {
editDialogShowFileList () {
if (this.eidtDataForm.imageUrl) {
return [{ name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl }]
}
}
}
}
</script>
<style scoped>
.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: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.boxtitle{
width: 100%;
max-height: 200px;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient: vertical;
}
.boxcontent{
width: 100%;
max-height: 200px;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient: vertical;
}
</style>