Joe
1 year ago
4 changed files with 277 additions and 122 deletions
@ -0,0 +1,266 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" :title="data ? '编辑' : '新增'"> |
|||
<div class='DeviceControlDialog'> |
|||
<Form v-model="formData" class="form" ref="FormConfigRef" :formList="formList" column="1" labelWidth="90px" /> |
|||
</div> |
|||
|
|||
<template #footer> |
|||
<Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false, submitting = false"> |
|||
取消 |
|||
</Button> |
|||
<Button @click.native="handleSubmit" :loading="submitting"> |
|||
确定 |
|||
</Button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue" |
|||
import Form from '@screen/components/FormConfig'; |
|||
|
|||
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
|||
import request from "@/utils/request"; |
|||
import { CameraDirectionEnumList } from "@screen/utils/enum.js" |
|||
import { Message } from "element-ui"; |
|||
import { cloneDeep, merge } from 'lodash'; |
|||
|
|||
export default { |
|||
name: 'DeviceControlDialog', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Form |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: "update:value" |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
data: Object |
|||
}, |
|||
inject: ['setCurrentPage'], |
|||
data() { |
|||
return { |
|||
submitting: false, |
|||
formData: {}, |
|||
formList: [ |
|||
{ |
|||
label: "父级:", |
|||
key: "parentId", |
|||
type: 'select', |
|||
options: { |
|||
clearable: true, |
|||
options: [] |
|||
} |
|||
}, |
|||
{ |
|||
label: "机构类型:", |
|||
key: "organizationType", |
|||
required: true, |
|||
type: 'select', |
|||
ons: { |
|||
change: (value, { data }) => { |
|||
if (value == 1) { |
|||
data.parentId = null; |
|||
} |
|||
|
|||
this.formList[0].options.options.forEach((item, index) => { |
|||
item.disabled = value == 1 |
|||
}) |
|||
} |
|||
}, |
|||
options: { |
|||
options: [ |
|||
{ |
|||
key: 1, |
|||
label: "路管中心" |
|||
}, |
|||
{ |
|||
key: 2, |
|||
label: "驻点" |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
label: "机构名称:", |
|||
key: "organizationName", |
|||
required: true |
|||
}, |
|||
{ |
|||
label: "方向:", |
|||
key: "direction", |
|||
required: true, |
|||
type: 'select', |
|||
options: { |
|||
options: CameraDirectionEnumList, |
|||
} |
|||
}, |
|||
{ |
|||
label: "地址:", |
|||
key: "organizationAddress", |
|||
}, |
|||
merge(cloneDeep(PresetFormItems.station), { |
|||
required: false, |
|||
options: { |
|||
options: [ |
|||
{ |
|||
rules: [ |
|||
{ |
|||
message: "请补全桩号", |
|||
callback(value, data) { |
|||
if (!value?.trim() && data.stakeMark[1]?.trim()) return false |
|||
else return true |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
rules: [ |
|||
{ |
|||
message: "请补全桩号", |
|||
callback(value, data) { |
|||
if (!value?.trim() && data.stakeMark[0]?.trim()) return false |
|||
else return true |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
] |
|||
} |
|||
}), |
|||
{ |
|||
label: "救援单位:", |
|||
key: "rescueUnit" |
|||
}, |
|||
{ |
|||
label: "描述:", |
|||
key: "description", |
|||
isAlone: true, |
|||
options: { |
|||
type: "textarea", |
|||
autosize: true, |
|||
maxlength: 150, |
|||
autosize: { minRows: 6, maxRows: 6 }, |
|||
showWordLimit: true, |
|||
}, |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:value', val) |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
modelVisible: { |
|||
immediate: true, |
|||
handler(bool) { |
|||
if (!bool) return; |
|||
|
|||
if (this.data) { |
|||
this.formData = |
|||
{ |
|||
"parentId": this.data.dcOrganizations.parentId, |
|||
"organizationType": this.data.dcOrganizations.organizationType, |
|||
"organizationName": this.data.dcOrganizations.organizationName, |
|||
"direction": this.data.dcOrganizations.direction, |
|||
"organizationAddress": this.data.dcOrganizations.organizationAddress, |
|||
"stakeMark": [...(this.data.dcOrganizations.stakeMark || "").match(/[0-9]+/g)], |
|||
"rescueUnit": this.data.dcOrganizations.rescueUnit, |
|||
"description": this.data.dcOrganizations.description |
|||
} |
|||
} |
|||
|
|||
this.getOptions(); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
getOptions() { |
|||
// 机构 |
|||
request({ |
|||
url: `/business/employees/organization`, |
|||
method: "post", |
|||
data: {} |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return; |
|||
|
|||
const data = []; |
|||
|
|||
result.data.forEach(item => { |
|||
|
|||
if (item.organizationType == 1) { |
|||
data.push({ |
|||
key: item.id, |
|||
label: item.organizationName, |
|||
disabled: false |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
this.formList[0].options.options = data; |
|||
}) |
|||
.catch((err) => { |
|||
|
|||
}); |
|||
}, |
|||
handleSubmit() { |
|||
this.$refs.FormConfigRef.validate() |
|||
.then((data) => { |
|||
this.submitting = true; |
|||
|
|||
if (this.data) data.id = this.data.dcOrganizations.id; |
|||
|
|||
if (typeof data.parentId != 'number') data.parentId = 0; |
|||
if (data.stakeMark[0]) data.stakeMark = `K${data.stakeMark[0]}+${data.stakeMark[1]}`; |
|||
|
|||
request({ |
|||
url: `/business/organization`, |
|||
method: this.data ? 'PUT' : 'POST', |
|||
data |
|||
}) |
|||
.then(result => { |
|||
if (result.code != 200) return Message.error(`提交失败!`); |
|||
|
|||
Message.success(`提交成功!`); |
|||
|
|||
this.modelVisible = false; |
|||
|
|||
this.setCurrentPage(1) |
|||
}) |
|||
.catch((err) => { |
|||
console.log("%c [ err ]-110-「DeviceControlDialog.vue」", "font-size:15px; background:#547bf2; color:#98bfff;", err); |
|||
Message.error(`提交失败!`); |
|||
}) |
|||
.finally(() => { |
|||
this.submitting = false; |
|||
}) |
|||
}) |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.DeviceControlDialog { |
|||
width: 450px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.tips { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,39 +0,0 @@ |
|||
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
|||
|
|||
export const formConfigList = [ |
|||
{ |
|||
label: "事故类型:", |
|||
key: "key13", |
|||
type: "select", |
|||
}, |
|||
PresetFormItems.trafficAccidentType, |
|||
PresetFormItems.callPolicePersonName, |
|||
PresetFormItems.callPolicePersonPhone, |
|||
PresetFormItems.route, |
|||
PresetFormItems.direction, |
|||
PresetFormItems.eventLevel, |
|||
PresetFormItems.station, |
|||
PresetFormItems.locationMode, |
|||
PresetFormItems.pressure, |
|||
PresetFormItems.eventHappenTime, |
|||
PresetFormItems.aEstimatedReleaseTime, |
|||
PresetFormItems.weatherConditions, |
|||
PresetFormItems.effect, |
|||
PresetFormItems.isMaintenanceAccident, |
|||
PresetFormItems.isCongestionAhead, |
|||
PresetFormItems.isCurveRoad, |
|||
PresetFormItems.isInTunnel, |
|||
PresetFormItems.isArrives, |
|||
PresetFormItems.isForkRoad, |
|||
PresetFormItems.emptyLine, |
|||
PresetFormItems.trafficPolicePhone, |
|||
{ |
|||
...PresetFormItems.emptyLine, |
|||
key: "096993", |
|||
}, |
|||
PresetFormItems.wreckerCalls, |
|||
PresetFormItems.spillName, |
|||
PresetFormItems.ownerPhone, |
|||
PresetFormItems.laneOccupancy, |
|||
PresetFormItems.vehicleCondition, |
|||
]; |
|||
@ -1,72 +0,0 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="修改事件信息"> |
|||
<div class="EditEventInformationDialog"> |
|||
<Form class="form" :formList="formConfigList" column="2" labelWidth="120px" /> |
|||
|
|||
<div class="footer"> |
|||
<Button>保存</Button> |
|||
<Button style="background: #C9C9C9;">关闭</Button> |
|||
</div> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Form from '@screen/components/FormConfig'; |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
|
|||
import { formConfigList } from "./data.js" |
|||
|
|||
export default { |
|||
name: 'EditEventInformationDialog', |
|||
components: { |
|||
Dialog, |
|||
Form, |
|||
Button |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: 'close' |
|||
}, |
|||
props: { |
|||
visible: Boolean |
|||
}, |
|||
data() { |
|||
return { |
|||
formConfigList |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit('close', val) |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.EditEventInformationDialog { |
|||
gap: 9px; |
|||
width: 810px; |
|||
height: 771px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.form { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue