odf_new/server/ZR.Vue/src/components/business/OdfCableForm.vue

<!--
 * @Descripttion: 光缆表单组件
 * @Author: (admin)
 * @Date: (2025-01-16)
-->
<template>
  <el-dialog :title="title" :lock-scroll="false" v-model="dialogVisible" @close="handleClose">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :lg="12">
          <el-form-item label="光缆名称" prop="cableName">
            <el-input v-model="form.cableName" :disabled="isView" placeholder="请输入光缆名称" />
          </el-form-item>
        </el-col>

        <el-col :lg="12">
          <el-form-item label="所属部门" prop="deptId">
            <el-tree-select
              v-model="form.deptId"
              :data="deptOptions"
              :disabled="isView"
              :props="{ value: 'id', label: 'label', children: 'children' }"
              value-key="id"
              placeholder="请选择所属部门"
              check-strictly
              :render-after-expand="false" />
          </el-form-item>
        </el-col>

        <!-- 查看模式下显示时间信息 -->
        <template v-if="isView && isEdit">
          <el-col :lg="12">
            <el-form-item label="创建时间">
              <el-input v-model="form.createdAt" disabled />
            </el-form-item>
          </el-col>
          <el-col :lg="12">
            <el-form-item label="修改时间">
              <el-input v-model="form.updatedAt" disabled />
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>

    <template #footer v-if="!isView">
      <el-button text @click="handleClose">{{ $t('btn.cancel') }}</el-button>
      <el-button type="primary" :loading="submitLoading" @click="submitForm">{{ $t('btn.submit') }}</el-button>
    </template>

    <template #footer v-else>
      <el-button text @click="handleClose">{{ $t('btn.close') }}</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="odfCableForm">
import { addOdfCables, updateOdfCables, getOdfCables } from '@/api/business/odfcables.js'
import { treeselect } from '@/api/system/dept'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  id: {
    type: [String, Number],
    default: null
  },
  mode: {
    type: String,
    default: 'edit', // 'add', 'edit', 'view'
    validator: (value) => ['add', 'edit', 'view'].includes(value)
  }
})

const emit = defineEmits(['update:visible', 'success'])

const { proxy } = getCurrentInstance()
const formRef = ref()
const submitLoading = ref(false)
const deptOptions = ref([])

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const isEdit = computed(() => !!props.id)
const isView = computed(() => props.mode === 'view')
const title = computed(() => {
  if (props.mode === 'view') return '查看光缆'
  return isEdit.value ? '修改光缆' : '添加光缆'
})

// 表单数据
const form = ref({
  id: null,
  cableName: null,
  deptId: 0,
  deptName: null,
  createdAt: null,
  updatedAt: null
})

// 表单验证规则
const rules = {
  cableName: [{ required: true, message: '光缆名称不能为空', trigger: 'blur' }]
}

// 获取部门树数据
function getDeptTreeData() {
  treeselect().then((response) => {
    deptOptions.value = [{ id: 0, label: '未知部门', children: [] }, ...response.data]
  })
}

// 重置表单
function resetForm() {
  form.value = {
    id: null,
    cableName: null,
    deptId: 0,
    deptName: null,
    createdAt: null,
    updatedAt: null
  }
  nextTick(() => {
    proxy.resetForm('formRef')
  })
}

// 加载数据
function loadData() {
  if (props.id) {
    getOdfCables(props.id).then((res) => {
      const { code, data } = res
      if (code == 200) {
        form.value = { ...data }
      }
    })
  } else {
    resetForm()
  }
}

// 提交表单
function submitForm() {
  proxy.$refs['formRef'].validate((valid) => {
    if (valid) {
      submitLoading.value = true

      if (isEdit.value) {
        updateOdfCables(form.value)
          .then((res) => {
            proxy.$modal.msgSuccess('修改成功')
            handleSuccess()
          })
          .finally(() => {
            submitLoading.value = false
          })
      } else {
        addOdfCables(form.value)
          .then((res) => {
            proxy.$modal.msgSuccess('新增成功')
            handleSuccess()
          })
          .finally(() => {
            submitLoading.value = false
          })
      }
    }
  })
}

// 成功处理
function handleSuccess() {
  dialogVisible.value = false
  emit('success')
}

// 关闭对话框
function handleClose() {
  dialogVisible.value = false
  resetForm()
}

// 监听对话框显示状态
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      getDeptTreeData()
      loadData()
    }
  }
)
</script>