512 lines
19 KiB
Vue
512 lines
19 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="installTime" label="安装时间" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="filingState" label="备案状态">
|
||
<template slot-scope="scope">
|
||
{{scope.row.filingState == 1 ? "已办理":"未办理"}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="remarks" label="无法办理备案说明" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="useRegisterType" label="是否办理使用登记">
|
||
<template slot-scope="scope">
|
||
{{scope.row.useRegisterType == 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="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="installTime" required>
|
||
<el-date-picker
|
||
value-format="yyyy-MM-dd"
|
||
:disabled="isDisabled"
|
||
:picker-options="pickerOptions"
|
||
v-model="formData.installTime"
|
||
type="date"
|
||
placeholder="选择日期时间"
|
||
style="width: 100%"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="是否办理使用登记" prop="useRegisterType" required>
|
||
<el-radio-group :disabled="isDisabled" v-model="formData.useRegisterType">
|
||
<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="remarks">
|
||
<el-input type="textarea" :disabled="isDisabled" resize="none" :rows="6" v-model="formData.remarks"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="登记证书" prop="registerFile">
|
||
<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 {
|
||
selectSuperviseFilingRecordApi,
|
||
selectByIdSuperviseFilingRecordApi,
|
||
editSuperviseFilingRecordApi,
|
||
addSuperviseFilingRecordApi,
|
||
deleteSuperviseFilingRecordApi,
|
||
} 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:{
|
||
filingState: 1,
|
||
installTime: "",
|
||
registerFile: "",
|
||
remarks: "",
|
||
useRegisterType: 1,
|
||
fileList:[]
|
||
},
|
||
rules: {
|
||
installTime: [{ 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.selectSuperviseFilingRecord()
|
||
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: '已取消删除'
|
||
});
|
||
});
|
||
},
|
||
selectSuperviseFilingRecord(){
|
||
let data = {
|
||
devType: this.devType,
|
||
projectSn: this.projectSn,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize
|
||
}
|
||
console.log(data)
|
||
selectSuperviseFilingRecordApi(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.registerFile = ""
|
||
let arr = []
|
||
data.fileList.forEach(item=>{
|
||
arr.push(item.url)
|
||
})
|
||
data.registerFile = arr.join(',')
|
||
}else{
|
||
this.$message.error("请上传登记证书！")
|
||
return;
|
||
}
|
||
console.log(data)
|
||
if(this.formType == 1){
|
||
addSuperviseFilingRecordApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.$message.success("添加成功")
|
||
this.closeDialog()
|
||
this.selectSuperviseFilingRecord()
|
||
}
|
||
})
|
||
} else if(this.formType == 2){
|
||
editSuperviseFilingRecordApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.$message.success("编辑成功")
|
||
this.closeDialog()
|
||
this.selectSuperviseFilingRecord()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
resetForm(){
|
||
this.formData={
|
||
filingState: 1,
|
||
installTime: "",
|
||
registerFile: "",
|
||
remarks: "",
|
||
useRegisterType: 1,
|
||
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 = "监督备案详情"
|
||
selectByIdSuperviseFilingRecordApi({id: val.id}).then(res=>{
|
||
if(res.code == 200){
|
||
this.formData = res.result
|
||
if(this.formData.registerFile){
|
||
let arr = this.formData.registerFile.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)
|
||
selectByIdSuperviseFilingRecordApi({id: val.id}).then(res=>{
|
||
if(res.code == 200){
|
||
this.formData = res.result
|
||
if(this.formData.registerFile){
|
||
let arr = this.formData.registerFile.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(() => {
|
||
deleteSuperviseFilingRecordApi({id: val.id}).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.$message.success("删除成功！")
|
||
this.selectSuperviseFilingRecord()
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
},
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
this.selectSuperviseFilingRecord();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.pageNo = val;
|
||
this.selectSuperviseFilingRecord();
|
||
},
|
||
}
|
||
}
|
||
</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> |