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