307 lines
11 KiB
Vue
307 lines
11 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div class="searchBox whiteBlock">
|
||
<el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
|
||
<el-form-item label="预案类型" prop="name">
|
||
<el-select v-model="typeId" placeholder="请选择" clearable @change="getList">
|
||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button size="medium" type="primary" @click="addBefore()">新增应急预案 </el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="table_wrap whiteBlock" style="margin-top: 15px">
|
||
<vue-scroll>
|
||
<el-table class="tables" :data="dataList">
|
||
<el-table-column
|
||
type="index"
|
||
width="50"
|
||
align="center"
|
||
:label="$t('message.personnelPosition.beaconManage.table.index')"
|
||
></el-table-column>
|
||
<el-table-column prop="name" label="预案名称" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.name }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="typeName" label="预案类型" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.typeName }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createBy" label="创建人" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.createBy }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createTime" label="编制时间" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.createTime }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="updateTime" label="修订时间" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.updateTime }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="version" label="版本" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.version }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="附件" align="center">
|
||
<template slot-scope="scope">
|
||
<div
|
||
v-if="JSON.parse(scope.row.fileUrl).length"
|
||
style="display: flex; align-items: center; justify-content: center; cursor: pointer"
|
||
@click="editBefore(scope.row)"
|
||
>
|
||
<i class="el-icon-paperclip" style="color: #5e81ee; margin-right: 4px"></i>
|
||
<span style="color: #5e81ee">{{ JSON.parse(scope.row.fileUrl).length }}</span>
|
||
</div>
|
||
<div v-else>-</div>
|
||
<!-- <el-link type="primary" v-for="(item, index) in JSON.parse(scope.row.fileUrl)" :key="index" @click="handleDownload(item)">
|
||
{{ item.name }}
|
||
</el-link> -->
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="$t('message.docManage.table.operation')" width="160" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="tableBtns">
|
||
<div @click="editBefore(scope.row)" class="operationText">
|
||
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
|
||
<span>{{ $t('message.workType.edit') }}</span>
|
||
</div>
|
||
<div @click="deleteBefore(scope.row)" class="operationText">
|
||
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
|
||
<span>{{ $t('message.workType.delete') }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</vue-scroll>
|
||
</div>
|
||
<el-dialog :modal-append-to-body="false" :title="$t('message.workType.operate')[type]" :visible.sync="dialogVisible" width="667px">
|
||
<div class="dialog_content">
|
||
<el-form label-width="120px" size="medium" class="dialogFormBox" ref="addEditForm" :model="dataInfo">
|
||
<el-form-item label="预案类型" prop="typeId">
|
||
<el-select v-model="dataInfo.typeId" placeholder="请选择" clearable>
|
||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="预案名称"
|
||
prop="name"
|
||
:rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
|
||
>
|
||
<el-input v-model="dataInfo.name" :placeholder="$t('message.workType.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="创建人" prop="createBy">
|
||
{{ dataInfo.createBy }}
|
||
</el-form-item>
|
||
<el-form-item label="版本" prop="version">
|
||
<el-input v-model="dataInfo.version" :placeholder="$t('message.workType.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="编制时间" prop="createTime">
|
||
<el-date-picker v-model="dataInfo.createTime" type="datetime" placeholder="选择日期时间"> </el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="附件">
|
||
<el-upload
|
||
class="upload-demo"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-remove="handleRemove"
|
||
:on-success="handleSuccess"
|
||
:on-preview="handlePreview"
|
||
:before-upload="beforeAvatarUpload"
|
||
multiple
|
||
name="files"
|
||
ref="upload"
|
||
:file-list="dataInfo.fileUrl"
|
||
>
|
||
<el-button size="small" type="primary"> 上传附件 </el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button class="cancleBtn" @click="dialogVisible = false" icon="el-icon-circle-close" size="medium"
|
||
>{{ $t('message.personnelPosition.cancel') }}
|
||
</el-button>
|
||
<el-button type="primary" icon="el-icon-circle-check" @click="addWorker" size="medium"
|
||
>{{ $t('message.personnelPosition.determine') }}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getUrgentEventTypeListApi,
|
||
getUrgentEventScenariosApi,
|
||
addUrgentEventScenariosApi,
|
||
editUrgentEventScenariosApi,
|
||
deleteUrgentEventScenariosApi
|
||
} from '@/assets/js/api/emergency'
|
||
import { download } from '@/util/index.js'
|
||
import SelectTree from '@/components/selectTree/selectTree'
|
||
export default {
|
||
mounted() {
|
||
this.getSelectList()
|
||
this.getList()
|
||
},
|
||
components: {
|
||
SelectTree
|
||
},
|
||
data() {
|
||
return {
|
||
type: 'add',
|
||
dataInfo: {},
|
||
dataList: [],
|
||
searchForm: {
|
||
name: ''
|
||
},
|
||
typeList: [],
|
||
typeId: '',
|
||
dialogVisible: false
|
||
}
|
||
},
|
||
methods: {
|
||
addWorker() {
|
||
if (this.type === 'add') {
|
||
this.$refs['addEditForm'].validate(valid => {
|
||
if (valid) {
|
||
let data = JSON.parse(JSON.stringify(this.dataInfo))
|
||
data.fileUrl = JSON.stringify(this.dataInfo.fileUrl)
|
||
addUrgentEventScenariosApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
...data
|
||
}).then(result => {
|
||
if (result.success) {
|
||
this.dialogVisible = false
|
||
this.$message.success(result.message)
|
||
this.getList()
|
||
}
|
||
})
|
||
} else {
|
||
console.log('error submit!!')
|
||
return false
|
||
}
|
||
})
|
||
} else if (this.type === 'edit') {
|
||
this.$refs['addEditForm'].validate(valid => {
|
||
if (valid) {
|
||
let data = JSON.parse(JSON.stringify(this.dataInfo))
|
||
data.fileUrl = JSON.stringify(this.dataInfo.fileUrl)
|
||
editUrgentEventScenariosApi(data).then(result => {
|
||
if (result.success) {
|
||
this.dialogVisible = false
|
||
this.$message.success(result.message)
|
||
this.getList()
|
||
}
|
||
})
|
||
} else {
|
||
console.log('error submit!!')
|
||
return false
|
||
}
|
||
})
|
||
} else if (this.type === 'delete') {
|
||
deleteUrgentEventScenariosApi({ id: this.dataInfo.id }).then(result => {
|
||
if (result.success) {
|
||
this.$message.success(result.message)
|
||
this.getList()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
PopupBefore(type, worker) {
|
||
this.dialogVisible = true
|
||
this.$refs['addEditForm']?.resetFields()
|
||
this.type = type
|
||
this.dataInfo = JSON.parse(JSON.stringify(worker))
|
||
this.dataInfo.fileUrl = JSON.parse(worker.fileUrl || '[]')
|
||
},
|
||
addBefore(parentId) {
|
||
this.PopupBefore('add', {
|
||
createBy: this.$store.state.userInfo.realName
|
||
})
|
||
console.log('添加前', this.type)
|
||
},
|
||
editBefore(worker) {
|
||
this.dataInfo = JSON.parse(JSON.stringify(worker))
|
||
this.PopupBefore('edit', worker)
|
||
console.log('编辑前', this.dataInfo)
|
||
},
|
||
deleteBefore(worker) {
|
||
// this.PopupBefore('delete', worker);
|
||
this.type = 'delete'
|
||
this.dataInfo = worker
|
||
console.log('删除前', this.type)
|
||
this.$confirm(
|
||
this.$t('message.personnelPosition.beaconManage.table.confirmText') + '【' + worker.name + '】?',
|
||
this.$t('message.personnelPosition.beaconManage.table.Tips'),
|
||
{
|
||
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
|
||
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
|
||
type: 'warning'
|
||
}
|
||
)
|
||
.then(() => {
|
||
this.addWorker()
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
getSelectList() {
|
||
getUrgentEventTypeListApi({ pageNo: -1, sn: this.$store.state.userInfo.headquartersSn }).then(res => {
|
||
this.typeList = res.result
|
||
})
|
||
},
|
||
getList() {
|
||
getUrgentEventScenariosApi({ pageNo: -1, typeId: this.typeId }).then(res => {
|
||
this.dataList = res.result.records
|
||
})
|
||
},
|
||
|
||
beforeAvatarUpload() {
|
||
return true
|
||
},
|
||
//上传成功
|
||
handleSuccess(e, file, fileList) {
|
||
if (fileList.every(it => it.status == 'success')) {
|
||
//等待所有文件都上传完成，这里注意fileList是所有的文件（包含已上传的）
|
||
fileList.map(item => {
|
||
item.response &&
|
||
this.dataInfo.fileUrl.push({
|
||
name: item.response.data[0].fileInfo.originalFilename,
|
||
url: item.response.data[0].imageUrl
|
||
}) //只push新上传的 （带有response）
|
||
})
|
||
}
|
||
},
|
||
//删除成功
|
||
handleRemove(file) {
|
||
let url = file.url ? file.url : file.response.data[0].imageUrl
|
||
for (let i = 0; i < this.dataInfo.fileUrl.length; i++) {
|
||
if (this.dataInfo.fileUrl[i].url == url) {
|
||
this.dataInfo.fileUrl.splice(i, 1)
|
||
}
|
||
}
|
||
},
|
||
// 下载附件
|
||
handlePreview(file) {
|
||
download(this.$store.state.FILEURL + file.url, file.name)
|
||
},
|
||
handleDownload(data) {
|
||
download(this.$store.state.FILEURL + data.url, data.name)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.primaryText {
|
||
text-decoration: none;
|
||
}
|
||
</style>
|