吉安感知网项目-前端
chenyao
17 hours ago c567cbca3b78a7e06a827acbab56a46657e31aa1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
    <el-dialog class="command-page-view-dialog" v-model="visible" :title="dialogTitle" @closed="handleClosed" destroy-on-close
        :close-on-click-modal="false">
        <el-form class="dialog-form" ref="formRef" :model="formData" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="报废原因" prop="scrapReason">
                        <el-input class="command-input" v-model="formData.scrapReason" maxlength="200" type="textarea" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="处置方式" prop="disposeWay">
                        <el-input class="command-input" v-model="formData.disposeWay" maxlength="200" type="textarea" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <div v-if="checkAreaBind" class="warning-text"> 注:该设备已绑定{{checkAreaBind}}区域,报废设备该区域无法正常使用,是否报废?</div>
            </el-row>
        </el-form>
        <template #footer>
            <el-button v-if="dialogMode != 'view'" color="#2B2B4C" @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
            <el-button
                v-if="!dialogReadonly"
                type="primary"
                color="#284FE3"
                :loading="submitting"
                :disabled="submitting"
                @click="handleSubmit"
            >
                确定
            </el-button>
        </template>
    </el-dialog>
</template>
 
<script setup>
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { fieldRules } from '@ztzf/utils'
import { fwDeviceScrapSaveApi,fivDevicelcheckAreaBindApi } from '@/views/basicManage/deviceStock/fwDeviceScrapApi'
import dayjs from 'dayjs'
import { saveOperationLog } from '@ztzf/apis'
import { useRoute } from 'vue-router'
 
const initForm = () => ({
    deviceId: '', // 设备ID
    disposeWay: '', //处置方式
    scrapReason: '', //       报废原因
    scrapTime: '', //  报废时间
})
const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
const visible = ref(false) // 弹框显隐
const dialogMode = ref('add') // 弹框模式
const submitting = ref(false)
const route = useRoute()
const dialogReadonly = computed(() => dialogMode.value === 'view')
const dialogTitle = computed(() => {
    if (dialogMode.value === 'edit') {
        return '报废'
    } else if (dialogMode.value === 'view') {
        return '查看'
    } else {
        return '新增'
    }
})
 
const rules = {
    scrapReason: fieldRules(true, 200),
    disposeWay: fieldRules(true, 200),
}
 
// 关闭弹框
function handleCancel() {
    visible.value = false
}
 
// 提交新增/编辑
async function handleSubmit() {
    const isValid = await formRef.value?.validate().catch(() => false)
    if (!isValid) return
    submitting.value = true
    try {
        formData.value.scrapTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
        await fwDeviceScrapSaveApi(formData.value)
        saveOperationLog({
            requestUri: route.path,
            title: `${route.name || '设备出入库'}-报废`,
            type: 1
        })
        ElMessage.success('报废成功')
        visible.value = false
        emit('success')
    } finally {
        submitting.value = false
    }
}
 
// 关闭后重置
function handleClosed() {
    formData.value = initForm()
}
 
// 打开弹框
async function open({ mode, row } = {}) {
    dialogMode.value = mode || 'add'
    visible.value = true
    formData.value.deviceId = row.id
    getCheckAreaBind()
}
const checkAreaBind = ref('')
function getCheckAreaBind() {
    fivDevicelcheckAreaBindApi({
        deviceId: formData.value.deviceId
    }).then(res => {
        checkAreaBind.value = res.data.data
    })
}
 
onMounted(() => {
})
 
defineExpose({ open })
</script>
 
<style scoped lang="scss">
.warning-text {
    width: 100%;
    color: red;
    font-size: 14px;
    text-align: center;
    margin: -10px 0 10px 0;
}
</style>