yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/dynamictbcol/DynamicTbColForm.vue

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="表单ID" prop="tbId">
        <el-input v-model="formData.tbId" placeholder="空值" :disabled="!isChange" />
      </el-form-item>
      <el-form-item label="字段名称" prop="colName">
        <el-input v-model="formData.colName" placeholder="请输入字段名称" />
      </el-form-item>
      <el-form-item label="字段范围" prop="colRound">
        <!-- <el-select v-model="formData.colRound" :disabled="!isChange" placeholder="请选择字段范围"> -->
        <el-select v-model="formData.colRound"  placeholder="请选择字段范围">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.PRESSURE2_COL_ROUND)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="字段标识" prop="colCode">
        <el-input v-model="formData.colCode" placeholder="请输入字段标识" />
      </el-form-item>
      <el-form-item label="字段类型" prop="colValType">
        <el-select v-model="formData.colValType" placeholder="请选择字段值类型">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.PRESSURE2_COL_VAL_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否可编辑" prop="isEdit">
        <el-switch v-model="formData.isEdit" />
      </el-form-item>
      <el-form-item :label="formData.colRound == 2 ? '值' : '备注'" prop="note">
        <el-input v-model="formData.note" type="textarea" :placeholder="formData.colRound == 2 ? '请输入值' : '请输入备注'" />
      </el-form-item>
      <el-form-item label="附加值" prop="creatorName">
        <el-input v-model="formData.creatorName" placeholder="请输入附加值" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button v-if="formType === 'create'" @click="submitFormAndOpen" type="success" :disabled="formLoading">保存并继续</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { DynamicTbColApi, DynamicTbColVO } from '@/api/pressure2/dynamictbcol'
import {useUserStore} from "@/store/modules/user";
import {string} from "vue-types";

/** 承压动态报表字段 表单 */
defineOptions({ name: 'DynamicTbColForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  tbId: undefined,
  colName: undefined,
  colRound: undefined,
  colCode: undefined,
  colValType: getIntDictOptions(DICT_TYPE.PRESSURE2_COL_VAL_TYPE)?.[0]?.value,
  isEdit: true,
  note: undefined,
  creatorName: undefined,
})
const formRules = reactive({
  colName: [{ required: true, message: '字段名字不能为空', trigger: 'blur' }],
  colCode: [{ required: true, message: '字段编号不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

const isChange=ref(false);

/** 打开弹窗 */
const open = async (type: string, id?: number, tdId?:string) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await DynamicTbColApi.getDynamicTbCol(id)
    } finally {
      formLoading.value = false
    }
  } else {

      formData.value.tbId = tdId;
      if(formData.value.tbId){
        formData.value.colRound=1;
      } else {
        formData.value.colRound=3;
        formData.value.tbId=null;
      }
      //isChange.value=formData.value.tbId.length<=0;

  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as DynamicTbColVO
    if (formType.value === 'create') {
      await DynamicTbColApi.createDynamicTbCol(data)
      message.success(t('common.createSuccess'))
    } else {
      await DynamicTbColApi.updateDynamicTbCol(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const submitFormAndOpen = async () => {
// 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  const data = formData.value as unknown as DynamicTbColVO
  try {
    if (formType.value === 'create') {
      await DynamicTbColApi.createDynamicTbCol(data)
      message.success(t('common.createSuccess'))
    } else {
      await DynamicTbColApi.updateDynamicTbCol(data)
      message.success(t('common.updateSuccess'))
    }
    emit('success')
  } finally {
    formLoading.value = false
    open('create', undefined, data.tbId)
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    tbId: undefined,
    colName: undefined,
    colRound: undefined,
    colCode: undefined,
    colValType: getIntDictOptions(DICT_TYPE.PRESSURE2_COL_VAL_TYPE)?.[0]?.value,
    note: undefined,
    isEdit: true,
    creatorName: undefined,
  }
  formRef.value?.resetFields()
}
</script>