qa-prevention-gwj-vue/src/views/firefighting/device/components/info.vue

235 lines
7.4 KiB
Vue

<template>
<div>
<div class="app-container">
<el-table v-loading="listLoading" ref="multipleTable" :data="varList" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="DEVICE_NAME" label="消防器材名称" />
<el-table-column prop="FIRE_CHECK_STANDARD_ITEM" label="检查项" />
<el-table-column prop="EMPLOYER" label="单位名" />
<el-table-column label="操作" align="center" width="200">
<template slot-scope="{row}">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">修改</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.FIRE_CHECK_STANDARD_ID)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="ui-height" />
<div class="ui-foot">
<el-button type="success" @click="importData">导 入</el-button>
<el-button plain type="info" @click="goBack">返 回</el-button>
</div>
<el-dialog :visible.sync="dialogFormEdit" :title="修改" width="700px">
<el-form ref="form" :rules="rules" :model="form" label-width="120px" style="padding:0 40px 0 20px">
<el-form-item label="消防器材名称" prop="DEVICE_NAME">
<el-input id="DEVICE_NAME" ref="DEVICE_NAME" :rows="3" v-model="form.DEVICE_NAME" />
</el-form-item>
<el-form-item label="检查项" prop="FIRE_CHECK_STANDARD_ITEM">
<el-input id="FIRE_CHECK_STANDARD_ITEM" ref="FIRE_CHECK_STANDARD_ITEM" :rows="3" v-model="form.FIRE_CHECK_STANDARD_ITEM" type="textarea" />
</el-form-item>
<el-form-item label="单位名称" prop="EMPLOYER">
<el-input id="EMPLOYER" ref="EMPLOYER" :rows="3" v-model="form.EMPLOYER" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormEdit = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogFormDaoru" title="导入" width="1000px">
<template>
<div class="app-container">
<el-form ref="form" :model="daoruFrom" label-width="110px" class="in-uploader">
<el-form-item label="上传附件" prop="FIELDS">
<div class="uploader">
<el-input v-model="daoruFrom.FFILEName" :disabled="true" />
<el-upload :before-upload="beforeFileUpload" class="avatar-uploader" action="#">
<el-button type="primary" icon="el-icon-upload" style="margin-left:10px">上传附件</el-button>
</el-upload>
<el-button v-waves type="success" icon="el-icon-right" style="margin-left:10px" @click="getExcelModel">
导出模板
</el-button>
</div>
</el-form-item>
</el-form>
</div>
</template>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormDaoru = false">取 消</el-button>
<el-button type="primary" @click="goUpload"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
import waves from '@/directive/waves' // waves directive
import { upload } from '@/utils/upload'
export default {
components: { Pagination, SelectTree },
directives: { waves },
data() {
return {
dialogFormDaoru: false,
FIRE_DEVICE_ID: this.$parent.FIRE_DEVICE_ID,
listLoading: true,
listQuery: {
page: 1,
limit: 20
},
total: 0,
dialogFormEdit: false,
dialogType: 'add',
varList: [],
form: {
FIRE_CHECK_STANDARD_ID: '',
DEVICE_NAME: '',
FIRE_CHECK_STANDARD_ITEM: '',
EMPLOYER: ''
},
daoruFrom: {
FFILEName: '',
FFILE: ''
},
rules: {
CHECK_CONTENT: [{ required: true, message: '检查内容不能为空', trigger: 'blur' }]
}
}
},
created() {
this.getList()
console.log('c')
console.log(this.FIRE_DEVICE_ID)
},
methods: {
handleDelete(id) {
this.$confirm('确定要删除吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = true
requestFN(
'/fireCheckStandard/delByIds',
{
FIRE_CHECK_STANDARD_ID: id
}
).then(() => {
this.$message({
message: '删除成功',
type: 'success'
})
this.listLoading = false
this.varList = []
this.listQuery.page = 1
this.getList()
}).catch((e) => {
this.listLoading = false
})
}).catch(() => {
})
},
beforeFileUpload(file) {
this.daoruFrom.FFILE = file
this.daoruFrom.FFILEName = file.name
this.daoruFrom.FIRE_DEVICE_ID = this.FIRE_DEVICE_ID
this.$forceUpdate()
return false
},
goUpload() {
const formData = new FormData()
Object.keys(this.daoruFrom).map(key => {
formData.append(key, this.daoruFrom[key])
})
upload(
'/fireCheckStandard/importExcelTemplate',
formData
).then((data) => {
this.getList()
this.dialogFormDaoru = false
}).catch((e) => {
this.listLoading = false
})
},
getExcelModel() {
this.$confirm('确定要下载excel模板吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = false
window.location.href = config.httpurl + '/riskpoint/excelModel'
}).catch(() => {
this.listLoading = false
})
this.listLoading = false
},
getList() {
this.listLoading = true
requestFN(
'/fireCheckStandard/list',
{
FIRE_DEVICE_ID: this.FIRE_DEVICE_ID
}
).then((data) => {
this.listLoading = false
this.varList = data.varList
this.total = data.page.totalResult
}).catch((e) => {
this.listLoading = false
})
},
handleEdit(row) {
this.dialogType = 'edit'
this.form = Object.assign({}, row) // copy obj
this.dialogFormEdit = true
},
confirm() {
this.$refs.form.validate(valid => {
if (valid) {
this.listLoading = true
requestFN(
'/fireCheckStandard/updById',
this.form
).then((data) => {
this.listLoading = false
this.dialogFormEdit = false
this.getList()
}).catch((e) => {
this.listLoading = false
})
} else {
return false
}
})
},
goBack() {
this.$parent.activeName = 'List'
},
importData() {
this.dialogFormDaoru = true
}
}
}
</script>
<style lang="sass" scoped>
.filter-container
position: relative
.filter-flot
position: absolute
right: 0
top: 0
.uploader
width: 570px
display: flex
align-items: center
.el-form-item__content
line-height: 1
</style>