<template>
|
<div>
|
<slot name="function"/>
|
|
<div class="content-container">
|
<a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-row>
|
<a-col :span="24">
|
<a-form-model-item prop="equipmentIdList" label="设备组">
|
<a-select v-model="model.equipmentIdList" mode="multiple" placeholder="请选择设备" :maxTagCount="3"
|
allow-clear>
|
<a-select-option v-for="item in equipmentList" :key="item.equipmentId">
|
{{item.equipmentId+`[${item.equipmentName}]`}}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row>
|
<a-col :span="24">
|
<a-form-model-item label="呼叫原因" prop="callReason">
|
<a-textarea placeholder="请输入呼叫原因" v-model="model.callReason" allowClear/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row>
|
<a-col :span="24">
|
<a-form-model-item label="呼叫用户" prop="operator">
|
<a-select v-model="model.operator" placeholder="请选择呼叫用户">
|
<a-select-option v-for="item in userList" :key="item.id">{{item.realname+`[${item.username}]`}}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
|
<div style="text-align: center">
|
<a-button @click="handleSubmit" icon="phone" :loading="loading" type="primary">呼叫</a-button>
|
</div>
|
</a-form-model>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getAction, postAction } from '@/api/manage'
|
|
export default {
|
name: 'ProcedureCall',
|
components: {},
|
data() {
|
return {
|
model: {},
|
equipmentList: [],
|
userList: [],
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
validateRules: {
|
equipmentIdList: [
|
{ required: true, message: '请选择设备!', trigger: 'change' }
|
],
|
callReason: [
|
{ required: true, message: '请输入呼叫原因!', trigger: 'change' }
|
],
|
operator: [
|
{ required: true, message: '请选择呼叫用户!', trigger: 'change' }
|
]
|
},
|
loading: false,
|
url: {
|
equipmentList: '/mdc/mdcEquipment/getEquipmentList',
|
userList: '/sys/user/list',
|
submit: '/mdc/andonOrder/procedureCall'
|
}
|
}
|
},
|
created() {
|
this.getEquipmentListByApi()
|
this.getUserListByApi()
|
},
|
methods: {
|
// 获取设备列表
|
getEquipmentListByApi() {
|
const that = this
|
getAction(this.url.equipmentList)
|
.then(res => {
|
if (res.success) that.equipmentList = res.result
|
})
|
},
|
|
// 获取用户列表
|
getUserListByApi() {
|
const that = this
|
getAction(this.url.userList, { pageNo: 1, pageSize: 9999 })
|
.then(res => {
|
console.log('res', res)
|
if (res.success) that.userList = res.result.records
|
})
|
},
|
|
// 提交表单
|
handleSubmit() {
|
const that = this
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
that.loading = true
|
that.model.equipmentId = that.model.equipmentIdList.join()
|
postAction(that.url.submit, that.model)
|
.then(res => {
|
if (res.success) {
|
that.$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.finally(() => {
|
that.loading = false
|
})
|
} else {
|
return false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.content-container {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
/deep/ .ant-form {
|
width: 75%;
|
}
|
}
|
</style>
|
