8 changed files with 257 additions and 24 deletions
@ -0,0 +1,189 @@ |
|||
<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 request from "@/utils/request"; |
|||
|
|||
import { Message } from "element-ui"; |
|||
|
|||
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: "name", |
|||
required: true |
|||
}, |
|||
{ |
|||
label: "手机号码:", |
|||
key: "contactNumber", |
|||
required: true, |
|||
rules: [ |
|||
{ |
|||
type: 'phone' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
label: "岗位:", |
|||
key: "postId", |
|||
required: true, |
|||
type: "select", |
|||
options: { |
|||
options: [] |
|||
} |
|||
}, |
|||
{ |
|||
label: "机构:", |
|||
key: "organizationId", |
|||
required: true, |
|||
type: "select", |
|||
options: { |
|||
options: [] |
|||
} |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:value', val) |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
modelVisible: { |
|||
immediate: true, |
|||
handler(bool) { |
|||
if (!bool) return; |
|||
|
|||
this.formData = { |
|||
...this.data |
|||
} |
|||
|
|||
this.getOptions(); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
getOptions() { |
|||
Promise.allSettled([ |
|||
// 岗位 |
|||
request({ |
|||
url: `/business/employees/sysPost`, |
|||
method: "post", |
|||
data: {} |
|||
}), |
|||
|
|||
// 机构 |
|||
request({ |
|||
url: `/business/employees/organization`, |
|||
method: "post", |
|||
data: {} |
|||
}) |
|||
]) |
|||
.then(([post, organization]) => { |
|||
if (post.status === 'fulfilled' && post.value.code == 200) { |
|||
this.formList[2].options.options = post.value.data.map(item => ({ |
|||
key: item.postId + "", |
|||
label: item.postName, |
|||
})) |
|||
} |
|||
if (organization.status === 'fulfilled' && organization.value.code == 200) { |
|||
this.formList[3].options.options = organization.value.data.map(item => ({ |
|||
key: item.id, |
|||
label: item.organizationName, |
|||
})) |
|||
} |
|||
}) |
|||
}, |
|||
handleSubmit() { |
|||
this.$refs.FormConfigRef.validate() |
|||
.then((data) => { |
|||
this.submitting = true; |
|||
|
|||
if (this.data) data.id = this.data.id; |
|||
|
|||
request({ |
|||
url: `/business/employees`, |
|||
method: this.data ? 'PUT' : 'POST', |
|||
data |
|||
}) |
|||
.then(() => { |
|||
this.$parent.getData(); |
|||
|
|||
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; |
|||
height: 150px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.tips { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue