2024-01-24 18:40:54 +08:00

352 lines
12 KiB
Vue

<template>
<div class="fullHeight">
<div class="searchBox whiteBlock">
<!-- 工程档案 施工图 -->
<el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
<el-form-item label="月份">
<el-input v-model="searchForm.constructionDrawName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="getList">查询</el-button>
<el-button type="warning" plain @click="refresh">刷新</el-button>
<el-button type="primary" size="medium" @click="add">新增</el-button>
</el-form-item>
</el-form>
</div>
<div class="table_wrap whiteBlock">
<el-table class="tables" :data="List">
<el-table-column prop="constructionDrawName" align="center" label="月份"></el-table-column>
<el-table-column align="center" label="工资明细">
<template slot-scope="scope" v-if="scope.row.constructionDrawShow.length > 2">
<!-- {{ JSON.parse(scope.row.constructionDrawShow)[0].url }} -->
<el-image
style="
margin-right: 8px;
width: 50px;
height: 50px;
cursor: pointer;
border-radius: 4px;
"
fit="cover"
:src="JSON.parse(scope.row.constructionDrawShow)[0].url"
:preview-src-list="[JSON.parse(scope.row.constructionDrawShow)[0].url]"
/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="250px">
<template slot-scope="scope">
<div class="tableBtns">
<!-- <div class="operationText" @click.stop="openDetail(scope.row)">
<i class="el-icon-tickets" style="color: #8dacfa; font-size: 16px; margin-right: 2px"></i>
<span style="white-space: nowrap;">详情</span>
</div> -->
<div @click="edit(scope.row)" class="operationText">
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
<span style="white-space: nowrap;">编辑</span>
</div>
<div @click="deleteDev(scope.row)" class="operationText">
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
<span style="white-space: nowrap;">删除</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagerBox"
@size-change="SizeChange"
@current-change="CurrentChange"
:current-page="pagInfo.pageNo"
:page-sizes="$store.state.PAGESIZRS"
:page-size="pagInfo.pageSize"
layout="total, sizes, prev, pager, next"
:total="Number(pagInfo.total)"
background
></el-pagination>
</div>
<el-dialog :modal-append-to-body="false" @close="close" :title="title" :visible.sync="dialogShow" width="667px">
<div class="dialog_content">
<el-form size="medium" ref="addEditForm" :model="addEditForm" :rules="addEditRules" label-width="135px" class="dialogFormBox">
<el-form-item label="月份" prop="constructionDrawName">
<el-input :disabled="isDetail" v-model="addEditForm.constructionDrawName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="工资明细">
<el-upload
:disabled="isDetail"
:action="$store.state.UPLOADURL"
list-type="picture-card"
multiple
name="files"
:limit="1"
accept=".png, .jpg, .jpeg"
:file-list="fileUploadList"
:on-exceed="(file, fileList) => handleExceed(file, fileList)"
:on-success="(res, file) => handleSuccess(res, file)"
:on-remove="(file, fileList) => handleRemove(file, fileList)"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<div class="dialog-footer">
<el-button class="cancleBtn" @click="dialogShow = false" icon="el-icon-circle-close" size="medium"
>{{ $t('message.deviceManage.cancel') }}
</el-button>
<el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium"
>{{ $t('message.deviceManage.save') }}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import {
rtConstructionDrawAdd,
rtConstructionDrawEdit,
rtConstructionDrawDelete,
rtConstructionDrawPage
} from '@/assets/js/api/workTicketManage'
import { checkPhone } from '@/assets/js/util.js'
export default {
mounted() {},
created() {
this.getList()
// this.getDutyPerson()
},
data() {
return {
daterange: [],
isDetail: false, //是否详情
dutyList: [], // 负责人
fileUploadList: [],
title: '',
dialogShow: false,
pagInfo: {
pageNo: 1, //页数
pageSize: 10, //条数
total: 0 //总条数
},
List: [],
addEditForm: {
constructionDrawName: "",
constructionDrawShow: "",
projectSn: "",
updateTime: ""
},
addEditRules: {
constructionDrawName: [
{
required: true,
message: '必填',
trigger: 'blur'
}
]
},
searchForm: {
constructionDrawName: ''
}
}
},
methods: {
// 负责人下拉回调
dutySelectChange(e) {
const item = this.dutyList.find(item => item.userId === e)
this.addEditForm.dutyUserName = item.realName
console.log('下拉选择', e, this.addEditForm.dutyUserName)
},
//查询负责人下拉
getDutyPerson() {
let data = {
projectSn: this.$store.state.projectSn
}
getCrewListDataApi(data).then(res => {
if (res.code == 200) {
this.dutyList = res.result
console.log('获取负责人下拉', this.dutyList)
} else {
this.$message.error(res.message)
}
})
},
//查询列表
getList() {
rtConstructionDrawPage({
pageNo: this.pagInfo.pageNo,
pageSize: this.pagInfo.pageSize,
projectSn: this.$store.state.projectSn,
constructionDrawName: this.searchForm.constructionDrawName,
}).then(result => {
if (result.success) {
// result.result.records.map(item => {
// if (item.image.includes('[')) {
// item.image = JSON.parse(item.image)
// if (item.image.length !== 0 && !item.image[0].url.includes(this.$store.state.FILEURL)) {
// item.image[0].url = this.$store.state.FILEURL + item.image[0].url
// }
// } else {
// let url = item.image
// if (url.length !== 0 && !url.includes(this.$store.state.FILEURL)) {
// item.image = [{}]
// item.image[0].url = this.$store.state.FILEURL + url
// }
// }
// })
this.List = result.result.records
this.pagInfo.total = result.result.total
}
})
},
add() {
this.title = '新增'
this.dialogShow = true
this.fileUploadList = []
this.close()
},
edit(obj) {
this.title = '编辑'
this.dialogShow = true
this.addEditForm = JSON.parse(JSON.stringify(obj))
this.fileUploadList = JSON.parse(obj.constructionDrawShow)
},
openDetail(obj) {
this.title = '详情'
this.dialogShow = true
this.isDetail = true
this.addEditForm = JSON.parse(JSON.stringify(obj))
this.fileUploadList = JSON.parse(obj.constructionDrawShow)
},
submit() {
// if (this.addEditForm.contactNumber) {
// if (!checkPhone(this.addEditForm.contactNumber)) {
// this.$message.error('请输入正确的手机号码')
// return
// }
// }
let params = JSON.parse(JSON.stringify(this.addEditForm))
params.projectSn = this.$store.state.projectSn
params.constructionDrawShow = JSON.stringify(this.fileUploadList)
// if (this.fileUploadList.length > 0) {
// this.$message.error('请上传照片')
// return false
// }
this.$refs.addEditForm.validate(valid => {
if (valid) {
if (this.title == '新增') {
rtConstructionDrawAdd(params).then(result => {
if (result.success) {
this.$message.success(result.message)
this.getList()
}
})
} else if (this.title == '编辑') {
rtConstructionDrawEdit(params).then(result => {
if (result.success) {
this.$message.success(result.message)
this.getList()
}
})
}
this.dialogShow = false
} else {
return false
}
})
},
deleteDev(obj) {
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
rtConstructionDrawDelete({ id: obj.id }).then(res => {
if (res.success) {
this.getList()
this.$message({
type: 'success',
message: '删除成功!'
})
} else {
this.$message({
type: 'error',
message: res.message
})
}
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
// 删除
handleRemove(file, fileList) {
this.fileUploadList = fileList
},
handleExceed(file, fileList) {
console.log('超出限制', file)
this.$message.warning('只能上传一张图片')
},
handleSuccess(res, file, type) {
if (res.status == 'SUCCESS') {
this.fileUploadList.push({
name: file.name,
url: this.$store.state.FILEURL + file.response.data[0].imageUrl
})
}
},
close() {
this.isDetail = false
this.addEditForm = {}
this.fileUploadList = []
this.$nextTick(() => {
this.$refs.addEditForm.clearValidate()
})
},
SizeChange(val) {
this.pagInfo.pageSize = val
this.getList()
},
CurrentChange(val) {
this.pagInfo.pageNo = val
this.getList()
},
refresh() {
this.searchForm = {}
this.daterange = []
this.pagInfo.pageNo = 1 //页数
this.pagInfo.pageSize = 10 //条数
this.getList()
},
changeDate() {
if (this.daterange) {
this.searchForm.actualStartDate = this.daterange[0]
this.searchForm.actualFinishDate = this.daterange[1]
} else {
this.searchForm.actualStartDate = ''
this.searchForm.actualFinishDate = ''
}
}
}
}
</script>
<style lang="less" scoped>
.tables2 {
min-height: auto;
}
.textStyle {
display: -webkit-box;
-webkit-line-clamp: 2; /* 控制显示的行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>