Joe
1 year ago
13 changed files with 421 additions and 271 deletions
@ -1,243 +0,0 @@ |
|||||
<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'; |
|
||||
import { getSelectOptionsStation } from "@screen/pages/control/event/businessDataManagement/utils.js"; |
|
||||
|
|
||||
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: { |
|
||||
async getOptions() { |
|
||||
const result = await getSelectOptionsStation(1) |
|
||||
|
|
||||
this.formList[0].options.options = result || []; |
|
||||
}, |
|
||||
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> |
|
||||
@ -0,0 +1,156 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" :title="data ? '修改' : '新增'"> |
||||
|
<div class='AddNEditDialog'> |
||||
|
<Form :value="formData" class="form" ref="FormConfigRef" :formList="formList" column="1" labelWidth="120px" /> |
||||
|
</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 request from "@/utils/request"; |
||||
|
import { Message } from "element-ui"; |
||||
|
import { addEditFormList } from "./../data" |
||||
|
import { stakeMarkToArray, findPathIdByTreeId } from "@screen/utils/index.js" |
||||
|
|
||||
|
export default { |
||||
|
name: 'AddNEditDialog', |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Form |
||||
|
}, |
||||
|
model: { |
||||
|
prop: 'visible', |
||||
|
event: "update:value" |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
data: Object |
||||
|
}, |
||||
|
inject: ['setCurrentPage'], |
||||
|
data() { |
||||
|
return { |
||||
|
submitting: false, |
||||
|
formData: {}, |
||||
|
formList: addEditFormList |
||||
|
} |
||||
|
}, |
||||
|
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 = { |
||||
|
...this.data, |
||||
|
deptId: [], |
||||
|
endStakeMark: stakeMarkToArray(this.data.endStakeMark), |
||||
|
startStakeMark: stakeMarkToArray(this.data.startStakeMark), |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.getSelectOptions(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getSelectOptions() { |
||||
|
Promise.allSettled([ |
||||
|
request({ |
||||
|
url: `/system/dept/treeselect`, |
||||
|
method: "GET", |
||||
|
}), |
||||
|
request({ |
||||
|
url: `/business/roadSection/roadList`, |
||||
|
method: "POST", |
||||
|
data: {} |
||||
|
}), |
||||
|
]) |
||||
|
.then(([departmentData, roadData]) => { |
||||
|
|
||||
|
if (departmentData.status != 'rejected' && departmentData.value.code == 200) { |
||||
|
this.formList[0].options.options = departmentData.value.data; |
||||
|
|
||||
|
this.formData.deptId = findPathIdByTreeId(departmentData.value.data, this.data.deptId); |
||||
|
|
||||
|
this.$refs.FormConfigRef.reset(true) |
||||
|
} |
||||
|
if (roadData.status != 'rejected' && roadData.value.code == 200) { |
||||
|
this.formList[1].options.options = roadData.value.data.map(item => ({ key: item.id, label: item.roadName })); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
handleSubmit() { |
||||
|
this.$refs.FormConfigRef.validate() |
||||
|
.then((data) => { |
||||
|
this.submitting = true; |
||||
|
|
||||
|
if (data.startStakeMark?.[0]) data.startStakeMark = `K${data.startStakeMark[0]}+${data.startStakeMark[1]}`; |
||||
|
if (data.endStakeMark?.[0]) data.endStakeMark = `K${data.endStakeMark[0]}+${data.endStakeMark[1]}`; |
||||
|
if (data.deptId) data.deptId = data.deptId.slice(-1)[0]; |
||||
|
if (this.data) data.id = this.data.id; |
||||
|
|
||||
|
request({ |
||||
|
url: `/business/roadSection`, |
||||
|
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> |
||||
|
.AddNEditDialog { |
||||
|
width: 450px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
|
||||
|
.tips { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue