376 lines
14 KiB
Vue
376 lines
14 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="scenariosId" 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="scenariosName" label="预案名称">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.scenariosName }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="typeName" label="预案类型">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.typeName }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="groupName" label="应急联系机构">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.groupName }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="workerName" label="联系人">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.workerName }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="workerPhone" label="联系方式">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.workerPhone }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createTime" label="编制时间">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.createTime }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="isContract" label="是否签订合同协议或备忘录">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.isContract === 1 ? '是' : '否' }}
|
||
</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">
|
||
<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="scenariosId">
|
||
<el-select v-model="dataInfo.scenariosId" placeholder="请选择" clearable @change="handleChangeType">
|
||
<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="groupName"
|
||
:rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
|
||
>
|
||
<el-input v-model="dataInfo.groupName" :placeholder="$t('message.workType.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="联系人"
|
||
prop="workerName"
|
||
:rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
|
||
>
|
||
<el-input v-model="dataInfo.workerName" :placeholder="$t('message.workType.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="联系方式"
|
||
prop="workerPhone"
|
||
:rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
|
||
>
|
||
<el-input v-model="dataInfo.workerPhone" :placeholder="$t('message.workType.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="地址"
|
||
prop="address"
|
||
:rules="[{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }]"
|
||
>
|
||
<div style="display: flex">
|
||
<el-input v-model="dataInfo.address" placeholder="请输入">
|
||
<i slot="suffix" style="cursor: pointer" class="el-input__icon el-icon-location" @click="handleMap"></i>
|
||
</el-input>
|
||
<!-- <el-button type="primary" @click="handleMap">获取位置</el-button> -->
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="是否签订合同协议或备忘录">
|
||
<!-- <el-radio-group v-model="dataInfo.isContract">
|
||
<el-radio :label="1">是</el-radio>
|
||
<el-radio :label="0">否</el-radio>
|
||
</el-radio-group> -->
|
||
<el-select v-model="dataInfo.isContract" placeholder="请选择" clearable>
|
||
<el-option label="是" :value="1"> </el-option>
|
||
<el-option label="否" :value="0"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="编制时间" prop="createTime">
|
||
<el-date-picker v-model="dataInfo.createTime" value-format="yyyy-MM-dd HH:mm:ss" 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>
|
||
<gd-map v-if="showMap" :addProjectForm="mapForm" @closeMap="closeMap" @save="getLngLat"></gd-map>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getUrgentEventScenariosListApi,
|
||
getUrgentEventInfoApi,
|
||
addUrgentEventInfoApi,
|
||
editUrgentEventInfoApi,
|
||
deleteUrgentEventInfoApi
|
||
} from '@/assets/js/api/emergency'
|
||
import { download } from '@/util/index.js'
|
||
import gdMap from '@/components/map/gd-map'
|
||
import SelectTree from '@/components/selectTree/selectTree'
|
||
export default {
|
||
mounted() {
|
||
this.getSelectList()
|
||
this.getList()
|
||
},
|
||
components: {
|
||
SelectTree,
|
||
gdMap
|
||
},
|
||
data() {
|
||
return {
|
||
showMap: false,
|
||
mapForm: {
|
||
id: 'mapDom',
|
||
areaName: '',
|
||
longitude: '',
|
||
latitude: '',
|
||
address: ''
|
||
},
|
||
stateTypes: ['未演练', '演练中', '已演练'],
|
||
type: 'add',
|
||
dataInfo: {},
|
||
dataList: [],
|
||
searchForm: {
|
||
name: ''
|
||
},
|
||
typeList: [],
|
||
scenariosId: '',
|
||
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)
|
||
addUrgentEventInfoApi({
|
||
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)
|
||
editUrgentEventInfoApi(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') {
|
||
deleteUrgentEventInfoApi({ 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', {})
|
||
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() {
|
||
getUrgentEventScenariosListApi({ pageNo: -1, sn: this.$store.state.userInfo.headquartersSn }).then(res => {
|
||
this.typeList = res.result
|
||
})
|
||
},
|
||
getList() {
|
||
getUrgentEventInfoApi({ pageNo: -1, scenariosId: this.scenariosId }).then(res => {
|
||
this.dataList = res.result.records
|
||
})
|
||
},
|
||
handleChangeType(data) {
|
||
console.info(data, '======')
|
||
this.typeList.forEach(item => {
|
||
if (item.id == data) {
|
||
this.dataInfo.scenariosName = item.name
|
||
}
|
||
})
|
||
},
|
||
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)
|
||
},
|
||
handleMap() {
|
||
// this.mapForm.longitude = this.dataInfo.longitude || ''
|
||
// this.mapForm.latitude = this.dataInfo.latitude || ''
|
||
this.showMap = true
|
||
},
|
||
closeMap(val) {
|
||
this.showMap = val
|
||
console.log('打印子组件', val)
|
||
},
|
||
getLngLat(v) {
|
||
this.showMap = false
|
||
console.info(v, '======')
|
||
// this.dataInfo.longitude = v.lng
|
||
// this.dataInfo.latitude = v.lat
|
||
this.dataInfo.address = v.address
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.primaryText {
|
||
text-decoration: none;
|
||
}
|
||
</style>
|