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