636 lines
18 KiB
Vue
636 lines
18 KiB
Vue
<template>
|
||
<div class="devfiling">
|
||
<div class="search-wrap">
|
||
<!-- <el-select v-model="devSn" style="width: 156px;margin-right: 15px" size="small" placeholder="设备名称">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select> -->
|
||
<!-- <el-button type="primary" size="small" @click="selectSchemeRecord">查询</el-button> -->
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
icon="el-icon-plus"
|
||
@click="showDialog = true"
|
||
>新增</el-button
|
||
>
|
||
</div>
|
||
<div class="devfilling-table-wrap">
|
||
<el-table
|
||
class="tables"
|
||
:data="tableData"
|
||
height="400"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column
|
||
prop="acceptanceCheckUser"
|
||
label="验收人"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column prop="deviceNo" label="设备编号" align="center">
|
||
</el-table-column>
|
||
<!-- <el-table-column prop="acceptanceCheckContent" label="验收内容" align="center">
|
||
</el-table-column> -->
|
||
<el-table-column
|
||
prop="acceptanceCheckTime"
|
||
label="验收时间"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column prop="addTime" label="添加时间" align="center">
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="acceptanceCheckState" label="验收状态">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.acceptanceCheckState == 1 ? '已验收' : '未验收' }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column width="200" label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
class="primary-btn"
|
||
icon="el-icon-document"
|
||
@click="previewData(scope.row)"
|
||
>详细</el-button
|
||
>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
class="primary-btn"
|
||
icon="el-icon-edit-outline"
|
||
@click="editData(scope.row)"
|
||
>编辑</el-button
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
class="delete-btn"
|
||
icon="el-icon-delete"
|
||
@click="deleteData(scope.row)"
|
||
>删除</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
|
||
<formDialog
|
||
v-if="showDialog"
|
||
:title="dialogTitle"
|
||
@closeDialog="closeDialog"
|
||
>
|
||
<div slot="content" class="dialog-content">
|
||
<vue-scroll style="width: 100%; height: 420px; padding-bottom: 30px">
|
||
<el-form
|
||
ref="addForm"
|
||
class="dialog-form"
|
||
label-position="right"
|
||
label-width="140px"
|
||
:model="formData"
|
||
:rules="rules"
|
||
size="medium"
|
||
>
|
||
<el-form-item label="验收人" prop="acceptanceCheckUser" required>
|
||
<el-input
|
||
:disabled="isDisabled"
|
||
placeholder="请输入验收人"
|
||
v-model="formData.acceptanceCheckUser"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="设备编号" prop="deviceNo" required>
|
||
<el-input
|
||
:disabled="isDisabled"
|
||
placeholder="请输入设备编号"
|
||
v-model="formData.deviceNo"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="验收时间" prop="acceptanceCheckTime" required>
|
||
<el-date-picker
|
||
value-format="yyyy-MM-dd"
|
||
:disabled="isDisabled"
|
||
:picker-options="pickerOptions"
|
||
v-model="formData.acceptanceCheckTime"
|
||
type="date"
|
||
placeholder="选择日期时间"
|
||
style="width: 100%"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="验收状态" prop="acceptanceCheckState" required>
|
||
<el-radio-group
|
||
:disabled="isDisabled"
|
||
v-model="formData.acceptanceCheckState"
|
||
>
|
||
<el-radio :label="1">已验收</el-radio>
|
||
<el-radio :label="2">未验收</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="设备备案状态" prop="filingState" required>
|
||
<el-select v-model="formData.filingState" :disabled="isDisabled" style="width: 100%" size="small" placeholder="请选择策划记录">
|
||
<el-option
|
||
v-for="item in options2"
|
||
:key="item.id"
|
||
:label="item.statusName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item> -->
|
||
<el-form-item
|
||
label="验收内容"
|
||
prop="acceptanceCheckContent"
|
||
required
|
||
>
|
||
<el-input
|
||
type="textarea"
|
||
:disabled="isDisabled"
|
||
resize="none"
|
||
:rows="6"
|
||
v-model="formData.acceptanceCheckContent"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="验收记录" prop="acceptanceCheckFile">
|
||
<el-upload
|
||
class="upload-demo"
|
||
v-if="!isDisabled"
|
||
:action="$store.state.UPLOADURL"
|
||
multiple
|
||
name="files"
|
||
:show-file-list="false"
|
||
:before-upload="handleBeforeUpload"
|
||
:on-success="(res) => handleUploadSuccess(res)"
|
||
:file-list="formData.fileList"
|
||
>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
:class="{ 'dark-upImg': styleType == 2 }"
|
||
><i class="el-icon-picture-outline"></i
|
||
></el-button>
|
||
<div
|
||
slot="tip"
|
||
class="el-upload__tip"
|
||
:class="{ 'dark-tip': styleType == 2 }"
|
||
>
|
||
支持jpg，png，jpeg格式
|
||
</div>
|
||
</el-upload>
|
||
<div class="file-list">
|
||
<div
|
||
class="file-item"
|
||
v-for="(item, index) in formData.fileList"
|
||
:key="index"
|
||
>
|
||
<el-image
|
||
v-if="isDisabled"
|
||
style="width: 100%; height: 100%"
|
||
:src="$store.state.FILEURL + item.url"
|
||
:preview-src-list="[$store.state.FILEURL + item.url]"
|
||
>
|
||
</el-image>
|
||
<img
|
||
v-if="!isDisabled"
|
||
:src="$store.state.FILEURL + item.url"
|
||
/>
|
||
<i
|
||
v-if="!isDisabled"
|
||
class="el-icon-error"
|
||
:class="{ 'dark-close': styleType == 2 }"
|
||
@click="removeImg(index)"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</vue-scroll>
|
||
<div class="btn-box" v-if="!isDisabled">
|
||
<el-button
|
||
class="cancle-btn cancleBtn"
|
||
size="small"
|
||
icon="el-icon-circle-close"
|
||
@click="closeDialog"
|
||
>取消</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
size="small"
|
||
@click="submitForm"
|
||
>确定</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</formDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
selectAcceptanceCheckRecordApi,
|
||
selectByIdAcceptanceCheckRecordApi,
|
||
editAcceptanceCheckRecordApi,
|
||
addAcceptanceCheckRecordApi,
|
||
deleteAcceptanceCheckRecordApi
|
||
} from '@/assets/js/api/towerCrane'
|
||
import formDialog from './../../projectLevel/workstation/compontents/formDialog.vue'
|
||
export default {
|
||
components: {
|
||
formDialog
|
||
},
|
||
props: ['registerId', 'devType'],
|
||
data() {
|
||
return {
|
||
devSn: '',
|
||
options: [],
|
||
options2: [
|
||
{
|
||
id: 1,
|
||
statusName: '已办理'
|
||
},
|
||
{
|
||
id: 2,
|
||
statusName: '未办理'
|
||
}
|
||
],
|
||
tableData: [],
|
||
projectSn: '',
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getTime() < Date.now() - 8.64e7
|
||
}
|
||
},
|
||
showDialog: false,
|
||
dialogTitle: '新增验收管理',
|
||
formData: {
|
||
deviceNo: '',
|
||
acceptanceCheckState: 1,
|
||
acceptanceCheckContent: '',
|
||
acceptanceCheckTime: '',
|
||
acceptanceCheckUser: '',
|
||
acceptanceCheckFile: '',
|
||
fileList: []
|
||
},
|
||
rules: {
|
||
deviceNo: [
|
||
{ required: true, message: '请输入设备编号', trigger: 'blur' },
|
||
{ required: true, message: '请输入设备编号', trigger: 'change' }
|
||
],
|
||
acceptanceCheckContent: [
|
||
{ required: true, message: '请输入验收内容', trigger: 'blur' },
|
||
{ required: true, message: '请输入验收内容', trigger: 'change' }
|
||
],
|
||
acceptanceCheckUser: [
|
||
{ required: true, message: '请输入验收人', trigger: 'blur' },
|
||
{ required: true, message: '请输入验收人', trigger: 'change' }
|
||
],
|
||
acceptanceCheckTime: [
|
||
{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择验收时间',
|
||
trigger: 'blur'
|
||
},
|
||
{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择验收时间',
|
||
trigger: 'change'
|
||
}
|
||
]
|
||
},
|
||
isDisabled: false,
|
||
formType: 1, //1、新增 2、编辑
|
||
styleType: 1
|
||
}
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn
|
||
this.userId = this.$store.state.userInfo.userId
|
||
this.selectAcceptanceCheckRecord()
|
||
this.styleType = 2
|
||
console.log(this.registerId)
|
||
},
|
||
methods: {
|
||
handleBeforeUpload(file) {
|
||
console.log(file.type)
|
||
if (
|
||
file.type == 'image/png' ||
|
||
file.type == 'image/jpg' ||
|
||
file.type == 'image/jpeg'
|
||
) {
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
handleUploadSuccess(res) {
|
||
console.log(this.formData)
|
||
if ((res.status = 'SUCCESS')) {
|
||
if (!this.formData.fileList) {
|
||
this.formData.fileList = []
|
||
}
|
||
this.formData.fileList.push({
|
||
name: res.data[0].filename,
|
||
url: res.data[0].imageUrl
|
||
})
|
||
this.$forceUpdate()
|
||
}
|
||
},
|
||
removeImg(id) {
|
||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
// console.log(this.facilityForm.installImg)
|
||
this.formData.fileList.splice(id, 1)
|
||
this.$forceUpdate()
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
})
|
||
})
|
||
},
|
||
selectAcceptanceCheckRecord() {
|
||
let data = {
|
||
devType: this.devType,
|
||
projectSn: this.projectSn,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize
|
||
}
|
||
console.log(data)
|
||
selectAcceptanceCheckRecordApi(data).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.tableData = res.result.records
|
||
this.total = res.result.total
|
||
}
|
||
})
|
||
},
|
||
submitForm() {
|
||
this.$refs['addForm'].validate((valid) => {
|
||
console.log(valid)
|
||
if (valid) {
|
||
let data = this.formData
|
||
data.projectSn = this.projectSn
|
||
data.registerId = this.registerId
|
||
if (data.fileList && data.fileList.length > 0) {
|
||
data.acceptanceCheckFile = ''
|
||
let arr = []
|
||
data.fileList.forEach((item) => {
|
||
arr.push(item.url)
|
||
})
|
||
data.acceptanceCheckFile = arr.join(',')
|
||
} else {
|
||
this.$message.error('请上传验收记录！')
|
||
return
|
||
}
|
||
console.log(data)
|
||
if (this.formType == 1) {
|
||
addAcceptanceCheckRecordApi(data).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.$message.success('添加成功')
|
||
this.closeDialog()
|
||
this.selectAcceptanceCheckRecord()
|
||
}
|
||
})
|
||
} else if (this.formType == 2) {
|
||
editAcceptanceCheckRecordApi(data).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.$message.success('编辑成功')
|
||
this.closeDialog()
|
||
this.selectAcceptanceCheckRecord()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
resetForm() {
|
||
this.formData = {
|
||
deviceNo: '',
|
||
acceptanceCheckState: 1,
|
||
acceptanceCheckContent: '',
|
||
acceptanceCheckTime: '',
|
||
acceptanceCheckUser: '',
|
||
acceptanceCheckFile: '',
|
||
fileList: []
|
||
}
|
||
},
|
||
closeDialog() {
|
||
this.showDialog = false
|
||
this.isDisabled = false
|
||
this.formType = 1
|
||
this.dialogTitle = '新增验收管理'
|
||
this.resetForm()
|
||
},
|
||
previewData(val) {
|
||
this.showDialog = true
|
||
this.isDisabled = true
|
||
this.dialogTitle = '验收管理详情'
|
||
selectByIdAcceptanceCheckRecordApi({ id: val.id }).then((res) => {
|
||
if (res.code == 200) {
|
||
this.formData = res.result
|
||
if (this.formData.acceptanceCheckFile) {
|
||
let arr = this.formData.acceptanceCheckFile.split(',')
|
||
this.formData.fileList = []
|
||
arr.forEach((item) => {
|
||
this.formData.fileList.push({ url: item })
|
||
})
|
||
}
|
||
}
|
||
console.log(res)
|
||
})
|
||
console.log(val)
|
||
},
|
||
editData(val) {
|
||
this.showDialog = true
|
||
console.log(val)
|
||
selectByIdAcceptanceCheckRecordApi({ id: val.id }).then((res) => {
|
||
if (res.code == 200) {
|
||
this.formData = res.result
|
||
if (this.formData.acceptanceCheckFile) {
|
||
let arr = this.formData.acceptanceCheckFile.split(',')
|
||
this.formData.fileList = []
|
||
arr.forEach((item) => {
|
||
this.formData.fileList.push({ url: item })
|
||
})
|
||
}
|
||
}
|
||
console.log(res)
|
||
})
|
||
this.formType = 2
|
||
this.dialogTitle = '编辑验收管理'
|
||
},
|
||
deleteData(val) {
|
||
this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
deleteAcceptanceCheckRecordApi({ id: val.id }).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.$message.success('删除成功！')
|
||
this.selectAcceptanceCheckRecord()
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
})
|
||
})
|
||
},
|
||
handleSizeChange(val) {
|
||
this.pageSize = val
|
||
this.selectAcceptanceCheckRecord()
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.pageNo = val
|
||
this.selectAcceptanceCheckRecord()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.devfiling {
|
||
width: 100%;
|
||
height: 100%;
|
||
.pagerBox {
|
||
margin-top: 20px;
|
||
}
|
||
.search-wrap {
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
margin-left: 12px;
|
||
}
|
||
.primary-btn {
|
||
color: #9297a2;
|
||
/deep/i {
|
||
color: #88e7f0;
|
||
}
|
||
}
|
||
.delete-btn {
|
||
color: #fe6565;
|
||
}
|
||
.dialog-content {
|
||
width: 678px;
|
||
padding: 40px 0 42px 0;
|
||
}
|
||
.dialog-form {
|
||
width: 60%;
|
||
margin: 0 auto;
|
||
margin-bottom: 60px;
|
||
/deep/.el-form-item {
|
||
margin-bottom: 16px;
|
||
}
|
||
}
|
||
.btn-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
.cancle-btn {
|
||
margin-right: 80px;
|
||
}
|
||
}
|
||
.list-title {
|
||
/deep/.el-form-item__label {
|
||
text-align: left;
|
||
}
|
||
}
|
||
.form-list {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 20px;
|
||
margin-bottom: 20px;
|
||
.deelet-btn {
|
||
margin-left: 10px;
|
||
color: #fe6565;
|
||
cursor: pointer;
|
||
font-size: 20px;
|
||
}
|
||
.add-item {
|
||
color: #409eff;
|
||
font-size: 14px;
|
||
margin-left: 10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.tables {
|
||
min-height: auto;
|
||
}
|
||
.upload-demo {
|
||
width: 300px;
|
||
/deep/ .el-button--small {
|
||
padding: 0;
|
||
background: #eee;
|
||
border: 0;
|
||
color: #ccc;
|
||
width: 58px;
|
||
height: 40px;
|
||
font-size: 22px;
|
||
}
|
||
.dark-upImg {
|
||
background: #19263e;
|
||
}
|
||
/deep/.el-upload__tip {
|
||
margin: 0;
|
||
}
|
||
.dark-tip {
|
||
color: #fff;
|
||
}
|
||
}
|
||
.file-list {
|
||
display: flex;
|
||
align-items: center;
|
||
.file-item {
|
||
width: 58px;
|
||
height: 50px;
|
||
position: relative;
|
||
margin-right: 6px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
i {
|
||
position: absolute;
|
||
right: -6px;
|
||
top: -6px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |