admin-sjzx/src/views/pqs/supervise/retire/deviceQuitPopup.vue

<template>
    <el-dialog
        draggable
        class="cn-operate-dialog"
        v-model="dialogVisible"
        :title="title"
        style="max-width: 450px; "
        top="30vh"
    >
        <el-scrollbar>
            <el-form :inline="false" :model="formData" label-width="120px" :rules="rules" ref="formRef">
                <el-form-item label="设备类型" prop="deviceType">
                    <el-radio-group v-model="formData.deviceType" @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="formData.deviceId"
                        :data="data"
                        filterable
                        :default-expand-all="true"
                        style="width: 260px"
                    />
                </el-form-item>

                <el-form-item label="退役原因" prop="propertyNo">
                    <!-- <el-input
                        v-model='formData.propertyNo'
                        clearable
                        placeholder='请输入退役原因'
                    /> -->
                    <el-input
                        type="textarea"
                        clearable
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        placeholder="请输入退役原因"
                        v-model="formData.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>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, reactive, nextTick } 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'

//下拉数据源
const sourceData = ref()
const deviceList = ref()
const lineList = ref()
const data = ref()
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()

const dialogVisible = ref(false)
// 注意不要和表单ref的命名冲突
const formData = reactive({
    id: '',
    deviceId: '',
    deviceType: '',
    propertyNo: ''
})

//form表单校验规则
const rules = {
    deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
    deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
    propertyNo: [{ required: true, message: '请输入退役原因', trigger: 'blur' }]
}
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

const open = async (text: string, tempData?: any) => {
    title.value = text

    if (tempData) {
        if (tempData.deviceType == 1) {
            //先加载装置数据并赋值
            //终端
            await getTerminalSelectTree(4).then(res => {
                deviceList.value = res.data
            })
            //监测点
            getTerminalSelectTree(6).then(res => {
                lineList.value = res.data
            })
            sourceData.value = deviceList.value
            data.value = deviceList.value
        } else {
            //先加载监测点数据并赋值
            //终端
            getTerminalSelectTree(4).then(res => {
                deviceList.value = res.data
            })
            //监测点
            await getTerminalSelectTree(6).then(res => {
                lineList.value = res.data
            })
            sourceData.value = lineList.value
            data.value = lineList.value
        }
        // 表单赋值
        for (let key in formData) {
            formData[key] = tempData[key]
        }
        formData.deviceType = formData.deviceType + ''
    } else {
        //终端
        await getTerminalSelectTree(4).then(res => {
            deviceList.value = res.data
        })
        //监测点
        getTerminalSelectTree(6).then(res => {
            lineList.value = res.data
        })
        sourceData.value = deviceList.value
        data.value = deviceList.value
        resetForm()
        // 在此处恢复默认表单
        for (let key in formData) {
            formData[key] = ''
        }
        formData.deviceType = '1'
    }
    dialogVisible.value = true
}

/**
 * 提交用户表单数据
 */
const submit = () => {
    formRef.value.validate(async (valid: any) => {
        if (valid) {
            if (formData.id) {
                await quitRunningDeviceUpdate(formData)
                ElMessage.success('重新发起成功')
                tableStore.index()
                dialogVisible.value = false
            } else {
                await addRunningDevice(formData)
                //查询进线数据，避免一直处于loading状态
                ElMessage.success('申请成功')
                tableStore.index()
                dialogVisible.value = false
            }
        }
    })
}

/**
 * 设备类型切换
 */

const changeType = (event: any) => {
    if (event == 1) {
        sourceData.value = deviceList.value
    } else {
        sourceData.value = lineList.value
    }
    formData.deviceId = ''
    data.value = sourceData.value
}

defineExpose({ open })
</script>

<style scoped>
.el-upload-list__item {
    transition: none !important;
}

.el-select {
    min-width: 180px;
}
</style>