239 lines
8.1 KiB
Vue
239 lines
8.1 KiB
Vue
<template>
|
||
<el-dialog draggable v-model="dialogVisible" :title="title" width="450px" top="20vh">
|
||
<el-scrollbar>
|
||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||
<!-- <el-form-item label="终端类型" prop="deviceType">
|
||
<el-radio-group v-model="form.deviceType" :disabled="title == '监测点退运'" @change="changeType">
|
||
<el-radio border label="1">监测终端</el-radio>
|
||
<el-radio border label="2">监测点</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item> -->
|
||
<el-form-item label="监测点" prop="deviceId">
|
||
<el-tree-select
|
||
v-model="form.deviceId"
|
||
:data="data"
|
||
filterable
|
||
:default-expand-all="true"
|
||
style="width: 100%"
|
||
@change="changeDevStatus"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="监测点当前状态:">
|
||
<el-select v-model="runFlag" disabled placeholder="请选择监测点" clearable class="select">
|
||
<el-option
|
||
v-for="item in runFlagList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="变更状态:" prop="devStatus">
|
||
<el-select v-model="form.devStatus" placeholder="请选择监测点变更状态" clearable class="select">
|
||
<el-option
|
||
v-for="item in runFlagData"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="退运原因" prop="propertyNo">
|
||
<!-- <el-input
|
||
v-model='form.propertyNo'
|
||
clearable
|
||
placeholder='请输入退役原因'
|
||
/> -->
|
||
<el-input
|
||
type="textarea"
|
||
clearable
|
||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
placeholder="请输入退运原因"
|
||
v-model="form.propertyNo"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-scrollbar>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
<!-- <el-button type="primary" @click="submit">确认</el-button> -->
|
||
<el-button type="primary" @click="submit(true)" :loading="loading" >保存</el-button>
|
||
<el-button type="primary" @click="submit(false)" :loading="loading" >提交审批</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, inject } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||
import { getTerminalSelectTree } from '@/api/device-boot/Business'
|
||
import { addRunningDevice, quitRunningDeviceUpdate } from '@/api/supervision-boot/device/quitRunningDev'
|
||
import { getLineDetailData } from '@/api/device-boot/line'
|
||
|
||
//下拉数据源
|
||
const sourceData = ref()
|
||
const lineList = ref()
|
||
const data = ref()
|
||
const title = ref('')
|
||
const loading = ref(false)
|
||
const tableStore = inject('tableStore') as TableStore
|
||
const formRef = ref()
|
||
const runFlag = ref('')
|
||
|
||
const runFlagData: any = ref([])
|
||
const dialogVisible = ref(false)
|
||
// 注意不要和表单ref的命名冲突
|
||
const form = ref({
|
||
id: '',
|
||
deviceId: '',
|
||
deviceType: '2',
|
||
devOriginalStatus: '0',
|
||
devStatus: '',
|
||
saveOrCheckflag: '',
|
||
propertyNo: ''
|
||
})
|
||
const runFlagList = [
|
||
{ id: '0', name: '投运' },
|
||
{ id: '1', name: '检修' },
|
||
{ id: '2', name: '停运' },
|
||
{ id: '3', name: '调试' },
|
||
{ id: '4', name: '退运' }
|
||
]
|
||
|
||
//form表单校验规则
|
||
const rules = {
|
||
deviceId: [{ required: true, message: '终端不能为空', trigger: 'change' }],
|
||
propertyNo: [{ required: true, message: '请输入退役原因', trigger: 'blur' }],
|
||
devStatus: [{ required: true, message: '请选择变更状态', trigger: 'blur' }]
|
||
}
|
||
const resetForm = () => {
|
||
if (formRef.value) {
|
||
formRef.value.resetFields()
|
||
}
|
||
}
|
||
|
||
const open = async (text: string, tempData?: any) => {
|
||
title.value = text
|
||
//监测点
|
||
await getTerminalSelectTree(6).then(res => {
|
||
lineList.value = res.data
|
||
})
|
||
|
||
sourceData.value = lineList.value
|
||
data.value = lineList.value
|
||
if (tempData) {
|
||
// 表单赋值
|
||
for (let key in form.value) {
|
||
form.value[key] = tempData[key]
|
||
}
|
||
form.value.deviceType = form.value.deviceType + ''
|
||
changeDevStatus(form.value.deviceId, true)
|
||
form.value.devStatus = tempData.devStatus != null ? tempData.devStatus + '' : ''
|
||
} else {
|
||
resetForm()
|
||
// 在此处恢复默认表单
|
||
for (let key in form.value) {
|
||
form.value[key] = ''
|
||
}
|
||
form.value.deviceType = '1'
|
||
runFlag.value = ''
|
||
}
|
||
form.value.deviceType = '2'
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
/**
|
||
* 提交用户表单数据
|
||
*/
|
||
const submit = async (flag: boolean) => {
|
||
loading.value = true
|
||
if (flag) {
|
||
form.value.saveOrCheckflag = '1'
|
||
|
||
await addRunningDevice(form.value).then(res => {
|
||
ElMessage.success('保存成功!')
|
||
tableStore.index()
|
||
dialogVisible.value = false
|
||
})
|
||
} else {
|
||
formRef.value.validate(async (valid: any) => {
|
||
if (valid) {
|
||
form.value.saveOrCheckflag = '2'
|
||
{
|
||
if (form.value.id) {
|
||
await quitRunningDeviceUpdate(form.value)
|
||
ElMessage.success('重新发起成功')
|
||
tableStore.index()
|
||
dialogVisible.value = false
|
||
} else {
|
||
await addRunningDevice(form.value)
|
||
//查询进线数据，避免一直处于loading状态
|
||
ElMessage.success('申请成功')
|
||
tableStore.index()
|
||
dialogVisible.value = false
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
await setTimeout(() => {
|
||
loading.value = false
|
||
}, 0)
|
||
}
|
||
|
||
/**
|
||
* 终端类型切换
|
||
*/
|
||
|
||
const changeType = (event: any) => {
|
||
sourceData.value = lineList.value
|
||
form.value.deviceId = ''
|
||
data.value = sourceData.value
|
||
}
|
||
const changeDevStatus = async (event: any, flag?: any) => {
|
||
await getLineDetailData(event).then(res => {
|
||
//给当前终端赋值初始投运状态
|
||
// switch (res.data.runFlag) {
|
||
|
||
// case '投运':
|
||
// form.value.devOriginalStatus = '0'
|
||
// break
|
||
// case '检修':
|
||
// form.value.devOriginalStatus = '1'
|
||
// break
|
||
// case '停运':
|
||
// form.value.devOriginalStatus = '2'
|
||
// break
|
||
// case '调试':
|
||
// form.value.devOriginalStatus = '3'
|
||
// break
|
||
// default:
|
||
// form.value.devOriginalStatus = '4'
|
||
// break
|
||
// }
|
||
runFlag.value = runFlagList.filter(item => item.name == res.data.runFlag)[0].id
|
||
form.value.devOriginalStatus = runFlag.value
|
||
if (!flag) {
|
||
form.value.devStatus = ''
|
||
}
|
||
runFlagData.value = runFlagList.filter(item => item.name != res.data.runFlag)
|
||
})
|
||
}
|
||
|
||
defineExpose({ open })
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-upload-list__item {
|
||
transition: none !important;
|
||
}
|
||
|
||
.el-select {
|
||
min-width: 180px;
|
||
}
|
||
</style>
|