Merge branch 'qhse_fix' of shuzhihua/pms-iot-vue into master

src/api/pms/qhse/index.ts

@@ -234,6 +234,11 @@ export const IotFailureApi = {
   // 修改故障上报
   updateFailure: async (data) => {
     return await request.put({ url: `/rq/iot-accident-report/update`, data })
+  },
+
+  // 获取详情
+  getFailure: async (id) => {
+    return await request.get({ url: `/rq/iot-accident-report/get?id=` + id })
   }
 }
 

src/views/pms/qhse/faultReport/QhseFaultReportForm.vue

@@ -0,0 +1,275 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 800px">
+    <!-- 表单弹窗 -->
+
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      :disabled="disabled"
+    >
+      <el-row :gutter="20">
+        <el-col :span="24" :xs="24" :sm="24" :md="12">
+          <el-form-item label="事件时间" prop="actualTime">
+            <el-date-picker
+              v-model="formData.actualTime"
+              type="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="x"
+              placeholder="选择事件发生时间"
+              style="width: 100%"
+              :disabled="disabled"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" :xs="24" :sm="24" :md="12">
+          <el-form-item label="事件级别" prop="accidentGrade">
+            <el-input
+              v-model="formData.accidentGrade"
+              placeholder="请输入事件级别"
+              clearable
+              :disabled="disabled"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24" :xs="24" :sm="24" :md="12">
+          <el-form-item label="事件类型" prop="accidentType">
+            <el-input
+              v-model="formData.accidentType"
+              placeholder="请选择事件类型"
+              clearable
+              style="width: 100%"
+              :disabled="disabled"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" :xs="24" :sm="24" :md="12">
+          <el-form-item label="事件地址" prop="accidentAddress">
+            <el-input
+              v-model="formData.accidentAddress"
+              placeholder="请输入事件地址"
+              clearable
+              :disabled="disabled"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24" :xs="24" :sm="24" :md="12">
+          <el-form-item label="现场负责人" prop="dutyPerson">
+            <el-input
+              v-model="formData.dutyPerson"
+              placeholder="请输入现场负责人姓名"
+              clearable
+              :disabled="disabled"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="事件损失情况" prop="lossSituation">
+            <el-input
+              v-model="formData.lossSituation"
+              placeholder="请输入事件损失情况"
+              clearable
+              type="textarea"
+              :rows="2"
+              :disabled="disabled"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="现场采取措施" prop="emergencyMeasure">
+            <el-input
+              v-model="formData.emergencyMeasure"
+              type="textarea"
+              :rows="2"
+              placeholder="请输入现场采取的应急措施"
+              maxlength="500"
+              show-word-limit
+              :disabled="disabled"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="事件简要经过" prop="description">
+            <el-input
+              v-model="formData.description"
+              type="textarea"
+              :rows="2"
+              placeholder="请输入事件详细经过"
+              maxlength="1000"
+              show-word-limit
+              :disabled="disabled"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="附件/现场图片" prop="pic">
+            <UploadImage v-model="formData.pic" width="260px" :disabled="disabled" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="formData.remark"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入备注信息"
+              maxlength="500"
+              show-word-limit
+              :disabled="disabled"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :loading="submitLoading" color="#626aef">
+          确 定
+        </el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { IotFailureApi } from '@/api/pms/qhse/index'
+import UploadImage from '@/components/UploadFile/src/UploadImg.vue'
+
+// Data
+const loading = ref(false)
+const submitLoading = ref(false)
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formRef = ref()
+const disabled = ref(false)
+const { t } = useI18n() // 国际化
+
+// 表单数据
+const formData = ref({
+  actualTime: null, // 使用时间戳格式
+  accidentGrade: '',
+  accidentType: '',
+  accidentAddress: '',
+
+  dutyPerson: '',
+  lossSituation: '',
+  emergencyMeasure: '',
+  description: '',
+  pic: '',
+  remark: ''
+})
+
+// 表单验证规则
+const formRules = reactive({
+  actualTime: [{ required: true, message: '请选择事件时间', trigger: 'change' }],
+  accidentGrade: [{ required: true, message: '请输入事件级别', trigger: 'blur' }],
+  accidentType: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
+  accidentAddress: [{ required: true, message: '请输入事件地址', trigger: 'blur' }],
+  deptId: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
+  deptName: [{ required: true, message: '请输入队伍名称', trigger: 'blur' }],
+  dutyPerson: [{ required: true, message: '请输入现场负责人', trigger: 'blur' }]
+})
+
+const open = async (type, id, disable) => {
+  disabled.value = disable
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  reset()
+
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await IotFailureApi.getFailure(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+const reset = () => {
+  formData.value = {
+    id: undefined,
+    actualTime: null,
+    accidentGrade: '',
+    accidentType: '',
+    accidentAddress: '',
+    // deptId: null,
+    // deptName: '',
+    dutyPerson: '',
+    lossSituation: '',
+    emergencyMeasure: '',
+    description: '',
+    pic: '',
+    remark: ''
+  }
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  if (!formRef.value) return
+
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      submitLoading.value = true
+      try {
+        // 在提交前确保时间是时间戳格式
+        const submitData = { ...formData.value }
+
+        if (formType.value === 'create' && formData.value.id) {
+          // 更新API调用
+          submitData.id = formData.value.id
+          await IotFailureApi.updateFailure(submitData)
+          ElMessage.success('更新成功')
+        } else {
+          // 创建API调用
+          await IotFailureApi.createFailure(submitData)
+          ElMessage.success('新增成功')
+        }
+        dialogVisible.value = false
+        emit('success')
+      } catch (error) {
+        ElMessage.error(error.message || '操作失败')
+      } finally {
+        submitLoading.value = false
+      }
+    } else {
+      ElMessage.error('请填写必填项')
+    }
+  })
+}
+</script>

src/views/pms/qhse/faultReport/QhseFaultReportInfo.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-form ref="formRef" :model="formData" label-width="120px">
+    <el-row :gutter="20">
+      <el-col :span="24" :xs="24" :sm="24" :md="12">
+        <el-form-item label="事件时间" prop="actualTime">
+          <el-date-picker
+            v-model="formData.actualTime"
+            type="datetime"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="x"
+            placeholder="选择事件发生时间"
+            style="width: 100%"
+            :disabled="true"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="24" :xs="24" :sm="24" :md="12">
+        <el-form-item label="事件级别" prop="accidentGrade">
+          <el-input
+            v-model="formData.accidentGrade"
+            placeholder="请输入事件级别"
+            clearable
+            :disabled="true"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="24" :xs="24" :sm="24" :md="12">
+        <el-form-item label="事件类型" prop="accidentType">
+          <el-input
+            v-model="formData.accidentType"
+            placeholder="请选择事件类型"
+            clearable
+            style="width: 100%"
+            :disabled="true"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="24" :xs="24" :sm="24" :md="12">
+        <el-form-item label="事件地址" prop="accidentAddress">
+          <el-input
+            v-model="formData.accidentAddress"
+            placeholder="请输入事件地址"
+            clearable
+            :disabled="true"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="24" :xs="24" :sm="24" :md="12">
+        <el-form-item label="现场负责人" prop="dutyPerson">
+          <el-input
+            v-model="formData.dutyPerson"
+            placeholder="请输入现场负责人姓名"
+            clearable
+            :disabled="true"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-form-item label="事件损失情况" prop="lossSituation">
+          <el-input
+            v-model="formData.lossSituation"
+            placeholder="请输入事件损失情况"
+            clearable
+            type="textarea"
+            :rows="2"
+            :disabled="true"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-form-item label="现场采取措施" prop="emergencyMeasure">
+          <el-input
+            v-model="formData.emergencyMeasure"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入现场采取的应急措施"
+            maxlength="500"
+            show-word-limit
+            :disabled="true"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-form-item label="事件简要经过" prop="description">
+          <el-input
+            v-model="formData.description"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入事件详细经过"
+            maxlength="1000"
+            show-word-limit
+            :disabled="true"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="附件/现场图片" prop="pic">
+          <UploadImage v-model="formData.pic" width="260px" :disabled="true" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="formData.remark"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注信息"
+            maxlength="500"
+            show-word-limit
+            :disabled="true"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { IotFailureApi } from '@/api/pms/qhse/index'
+/** 故障上报 表单 */
+defineOptions({ name: 'QhseFaultReportInfo' })
+
+const message = useMessage() // 消息弹窗
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+
+const { params } = useRoute() // 查询参数
+const props = defineProps<{ id?: number }>()
+const formData = ref({
+  actualTime: null, // 使用时间戳格式
+  accidentGrade: '',
+  accidentType: '',
+  accidentAddress: '',
+  dutyPerson: '',
+  lossSituation: '',
+  emergencyMeasure: '',
+  description: '',
+  pic: '',
+  remark: ''
+})
+onMounted(async () => {
+  const id = props.id || params.id
+  if (!id) {
+    message.warning('参数错误，事故事件上报不能为空！')
+    close()
+    return
+  }
+  await getFailureData(id)
+})
+const getFailureData = async (id) => {
+  formLoading.value = true
+  try {
+    formData.value = await IotFailureApi.getFailure(id)
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>

src/views/pms/qhse/faultReport/index.vue

@@ -36,7 +36,7 @@
               <el-button @click="resetQuery" :icon="Refresh">重置</el-button>
               <el-button
                 type="primary"
-                @click="openForm('create')"
+                @click="openForm('create', undefined, false)"
                 color="#626aef"
                 v-hasPermi="['rq:iot-accident-report:create']"
               >
@@ -100,39 +100,15 @@
 
         <el-table-column label="操作" align="center" width="150" fixed="right">
           <template #default="{ row }">
-            <!-- <el-button
-              link
-              type="primary"
-              @click="openForm('update', row)"
-              :icon="TopRight"
-              v-hasPermi="['rq:iot-accident-report:approval']"
-              >上报审批</el-button
-            > -->
             <el-button
               link
               type="primary"
-              @click="openForm('detail', row)"
+              @click="openForm('detail', row.id, true)"
               :icon="View"
               v-hasPermi="['rq:iot-accident-report:query']"
               >详情</el-button
             >
-            <el-button link type="primary" @click="openApprovalDialog(row)"> 流转信息 </el-button>
-            <!-- <el-button
-              link
-              type="primary"
-              @click="openForm('update', row)"
-              :icon="Edit"
-              v-hasPermi="['rq:iot-accident-report:update']"
-              >编辑</el-button
-            > -->
-            <!-- <el-button
-              link
-              type="danger"
-              @click="handleDelete(row)"
-              :icon="Delete"
-              v-hasPermi="['rq:iot-accident-report:delete']"
-              >删除</el-button
-            > -->
+            <!-- <el-button link type="primary" @click="openApprovalDialog(row)"> 流转信息 </el-button> -->
           </template>
         </el-table-column>
       </el-table>
@@ -152,186 +128,8 @@
     </ContentWrap>
 
     <!-- 表单弹窗 -->
-    <el-dialog
-      :title="title"
-      v-model="open"
-      width="800px"
-      :fullscreen="isMobile"
-      append-to-body
-      :close-on-click-modal="false"
-      destroy-on-close
-      custom-class="self-dialog"
-    >
-      <template #title>
-        <div
-          style="
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid #ebeef5;
-            padding-bottom: 20px;
-            padding-left: 20px;
-            width: 108%;
-            margin-left: -15px;
-          "
-        >
-          <span>{{ title }}</span>
-        </div>
-      </template>
-      <el-form
-        ref="formRef"
-        :model="formData"
-        :rules="formRules"
-        label-width="120px"
-        :disabled="mode === 'detail'"
-      >
-        <el-row :gutter="20">
-          <el-col :span="24" :xs="24" :sm="24" :md="12">
-            <el-form-item label="事件时间" prop="actualTime">
-              <el-date-picker
-                v-model="formData.actualTime"
-                type="datetime"
-                format="YYYY-MM-DD HH:mm:ss"
-                value-format="x"
-                placeholder="选择事件发生时间"
-                style="width: 100%"
-                :disabled="mode === 'detail'"
-              />
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="24" :xs="24" :sm="24" :md="12">
-            <el-form-item label="事件级别" prop="accidentGrade">
-              <el-input
-                v-model="formData.accidentGrade"
-                placeholder="请输入事件级别"
-                clearable
-                :disabled="mode === 'detail'"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="24" :xs="24" :sm="24" :md="12">
-            <el-form-item label="事件类型" prop="accidentType">
-              <el-input
-                v-model="formData.accidentType"
-                placeholder="请选择事件类型"
-                clearable
-                style="width: 100%"
-                :disabled="mode === 'detail'"
-              />
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="24" :xs="24" :sm="24" :md="12">
-            <el-form-item label="事件地址" prop="accidentAddress">
-              <el-input
-                v-model="formData.accidentAddress"
-                placeholder="请输入事件地址"
-                clearable
-                :disabled="mode === 'detail'"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="24" :xs="24" :sm="24" :md="12">
-            <el-form-item label="现场负责人" prop="dutyPerson">
-              <el-input
-                v-model="formData.dutyPerson"
-                placeholder="请输入现场负责人姓名"
-                clearable
-                :disabled="mode === 'detail'"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="24">
-            <el-form-item label="事件损失情况" prop="lossSituation">
-              <el-input
-                v-model="formData.lossSituation"
-                placeholder="请输入事件损失情况"
-                clearable
-                type="textarea"
-                :rows="2"
-                :disabled="mode === 'detail'"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="24">
-            <el-form-item label="现场采取措施" prop="emergencyMeasure">
-              <el-input
-                v-model="formData.emergencyMeasure"
-                type="textarea"
-                :rows="2"
-                placeholder="请输入现场采取的应急措施"
-                maxlength="500"
-                show-word-limit
-                :disabled="mode === 'detail'"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="24">
-            <el-form-item label="事件简要经过" prop="description">
-              <el-input
-                v-model="formData.description"
-                type="textarea"
-                :rows="2"
-                placeholder="请输入事件详细经过"
-                maxlength="1000"
-                show-word-limit
-                :disabled="mode === 'detail'"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="附件/现场图片" prop="pic">
-              <UploadImage v-model="formData.pic" width="260px" :disabled="mode === 'detail'" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
-            <el-form-item label="备注" prop="remark">
-              <el-input
-                v-model="formData.remark"
-                type="textarea"
-                :rows="3"
-                placeholder="请输入备注信息"
-                maxlength="500"
-                show-word-limit
-                :disabled="mode === 'detail'"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-
-      <template #footer>
-        <div class="dialog-footer" v-if="mode !== 'detail'">
-          <el-button @click="cancel">取 消</el-button>
-          <el-button type="primary" @click="submitForm" :loading="submitLoading" color="#626aef">
-            确 定
-          </el-button>
-        </div>
-        <div class="dialog-footer" v-else>
-          <el-button @click="cancel">关 闭</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <!-- 表单弹窗：添加/修改 -->
+    <QhseFaultReportForm ref="formRef" @success="getList" />
 
     <el-drawer
       :title="approvalDialogTitle"
@@ -429,6 +227,7 @@ import UploadImage from '@/components/UploadFile/src/UploadImg.vue'
 import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import { IotApprovalApi } from '@/api/pms/qhse/index'
+import QhseFaultReportForm from './QhseFaultReportForm.vue'
 
 // Data
 const loading = ref(false)
@@ -535,48 +334,53 @@ const handleQuery = () => {
 }
 
 // 打开表单 - 支持新增、编辑和详情
-const openForm = async (modeVal, row = {}) => {
-  reset()
-  mode.value = modeVal
-
-  if (modeVal === 'create') {
-    title.value = '添加事故事件上报'
-    open.value = true
-  } else if (modeVal === 'update') {
-    title.value = '修改事故事件上报'
-
-    // 直接使用列表中的数据，不需要调用详情接口
-    formData.value = { ...row }
-
-    // 如果是字符串或日期格式的时间，转换为时间戳
-    if (typeof row.actualTime === 'string' && row.actualTime) {
-      formData.value.actualTime = new Date(row.actualTime).getTime()
-    } else if (row.actualTime instanceof Date) {
-      formData.value.actualTime = row.actualTime.getTime()
-    } else if (typeof row.actualTime === 'number') {
-      // 如果已经是时间戳格式，直接使用
-      formData.value.actualTime = row.actualTime
-    }
-
-    open.value = true
-  } else if (modeVal === 'detail') {
-    title.value = '事故事件上报详情'
-
-    // 直接使用列表中的数据
-    formData.value = { ...row }
-
-    // 如果是字符串或日期格式的时间，转换为时间戳
-    if (typeof row.actualTime === 'string' && row.actualTime) {
-      formData.value.actualTime = new Date(row.actualTime).getTime()
-    } else if (row.actualTime instanceof Date) {
-      formData.value.actualTime = row.actualTime.getTime()
-    } else if (typeof row.actualTime === 'number') {
-      // 如果已经是时间戳格式，直接使用
-      formData.value.actualTime = row.actualTime
-    }
-
-    open.value = true
-  }
+// const openForm = async (modeVal, row = {}) => {
+//   reset()
+//   mode.value = modeVal
+
+//   if (modeVal === 'create') {
+//     title.value = '添加事故事件上报'
+//     open.value = true
+//   } else if (modeVal === 'update') {
+//     title.value = '修改事故事件上报'
+
+//     // 直接使用列表中的数据，不需要调用详情接口
+//     formData.value = { ...row }
+
+//     // 如果是字符串或日期格式的时间，转换为时间戳
+//     if (typeof row.actualTime === 'string' && row.actualTime) {
+//       formData.value.actualTime = new Date(row.actualTime).getTime()
+//     } else if (row.actualTime instanceof Date) {
+//       formData.value.actualTime = row.actualTime.getTime()
+//     } else if (typeof row.actualTime === 'number') {
+//       // 如果已经是时间戳格式，直接使用
+//       formData.value.actualTime = row.actualTime
+//     }
+
+//     open.value = true
+//   } else if (modeVal === 'detail') {
+//     title.value = '事故事件上报详情'
+
+//     // 直接使用列表中的数据
+//     formData.value = { ...row }
+
+//     // 如果是字符串或日期格式的时间，转换为时间戳
+//     if (typeof row.actualTime === 'string' && row.actualTime) {
+//       formData.value.actualTime = new Date(row.actualTime).getTime()
+//     } else if (row.actualTime instanceof Date) {
+//       formData.value.actualTime = row.actualTime.getTime()
+//     } else if (typeof row.actualTime === 'number') {
+//       // 如果已经是时间戳格式，直接使用
+//       formData.value.actualTime = row.actualTime
+//     }
+
+//     open.value = true
+//   }
+// }
+
+/** 添加/修改操作 */
+const openForm = (type, id, disable) => {
+  formRef.value.open(type, id, disable)
 }
 
 const handleDelete = async (row) => {