<template> <div class="admin-authorize-editInfo"> <el-dialog :title="formData.titleText" v-model="formData.isShowDialog" draggable width="769px"> <el-form :model="formData.editData" :rules="rules" ref="formRef" v-loading="formData.loading" size="default" label-width="80px"> <el-row :gutter="35"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="油站名称" prop="oilStation"> <el-input v-model="formData.editData.oilStation" placeholder="格式:message.router.xxx" clearable></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="项目名称" prop="projectName"> <el-input v-model="formData.editData.projectName" placeholder="格式:message.router.xxx" clearable></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="设备SN" prop="sn"> <el-input v-model="formData.editData.sn" placeholder="格式:message.router.xxx" clearable></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="授权码" prop="key"> <el-input v-model="formData.editData.key" placeholder="格式:message.router.xxx" clearable></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="有效时间" prop="expiedTime"> <el-date-picker v-model="formData.editData.expiedTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择有效时间" /> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="状态" prop="state"> <el-select v-model="formData.editData.state" class="m-2" placeholder="选择状态" > <el-option v-for="item in formData.options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="备注" prop="remark"> <el-input v-model="formData.editData.remark" placeholder="格式:message.router.xxx" clearable type="textarea"></el-input> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="onCancel" size="default">取 消</el-button> <el-button type="primary" @click="onSubmit" size="default">{{formData.buttonText}}</el-button> </span> </template> </el-dialog> </div> </template> <script setup lang="ts"> import {reactive, ref, watch} from "vue"; import {oilSdkTableModel} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto"; import {OilSdkAuthorAPI} from "/@/api/admin/deviceAuthorization/oilSdkAuthor"; import eventBus from "/@/utils/mitt"; import {FormRules} from "element-plus"; enum Form { ADD, UPDATE } /**数据对象 */ const formData = reactive({ loading: false, formType: Form, titleText:'', buttonText:'', isShowDialog: false, editData:{} as oilSdkTableModel, /**动态表头 */ dynamicColumns: [ { prop: 'oilStation', label: '油站名称' }, { prop: 'projectName', label: '项目名称' }, { prop: 'sn', label: '设备SN号' }, { prop: 'key', label: '授权码' }, { prop: 'expiedTime', label: '过期时间' }, { prop: 'formData', label: '状态' }, { prop: 'remark', label: '备注' }, ], options:[ {label:'正常',value:'正常'}, {label:'未授权',value:'未授权'}, ] }) /**有效时间选择校验*/ const validateDate = (rule: any, value: any, callback: any) => { if(new Date(value).getTime() > Date.now()){ callback() }else{ callback(new Error('选择的时间已失效')) } } /**表单校验*/ const rules = reactive<FormRules>({ oilStation: [ { required: true, message: '请输入油站名称', trigger: 'blur' }, ], projectName: [ { required: true, message: '请输入项目名称', trigger: 'blur' }, ], sn: [ { required: true, message: '请输入设备SN号', trigger: 'blur' }, ], key: [ { required: true, message: '请输入设备授权码', trigger: 'blur' }, ], expiedTime: [ { type: 'date', required: true, message: '请选择有效期', trigger: 'blur' }, { validator: validateDate, trigger: 'blur' } ], state: [ { required: true, message: '请选择状态', trigger: 'blur' }, ], }) const formRef = ref() const openDialog = (val) => { if(val){ formData.editData = JSON.parse(JSON.stringify(val)) formData.titleText = '更新授权' formData.buttonText = '更新' //更新操作 formData.formType = Form.UPDATE }else { formData.editData = {} as oilSdkTableModel formData.titleText = '添加授权' formData.buttonText = '添加' //添加操作 formData.formType = Form.ADD } formData.isShowDialog = true formData.isShowDialog = true } const onCancel = () => { formData.editData = {} as oilSdkTableModel formData.isShowDialog = false } /***监听弹窗关闭表单验证*/ watch(() => formData.isShowDialog,(newVal) => { if(newVal) formRef.value?.resetFields() }) const onSubmit = () => { formRef.value.validate(async (valid: boolean) =>{ if(!valid) return formData.loading = true // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars const { projectName, state, ...newData} = formData.editData let res = {} as any if(formData.formType === Form.UPDATE){ res = await new OilSdkAuthorAPI().updateForm({project: formData.editData.projectName, state: formData.editData.state === '正常' ? 1 : 0 ?? 0, ...newData},{ showSuccessMessage: true }).catch(() => { formData.loading = false }) }else if(formData.formType === Form.ADD){ res = await new OilSdkAuthorAPI().addForm({project: formData.editData.projectName, state: formData.editData.state === '正常' ? 1 : 0 ?? 0, ...newData},{ showSuccessMessage: true }).catch(() => { formData.loading = false }) }else { formData.loading = false return } if(res?.success){ eventBus.emit('refreshView') formData.isShowDialog = false } formData.loading = false }) } defineExpose({ openDialog, }) </script> <style scoped lang="scss"> </style>