QRAPI/Web/src/components/apiEditPop/index.vue

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="handleType=='create' ? '新增' : '编辑'"
    width="70%"
    :close-on-click-modal="false"
    top="10vh"
  >
    <div v-loading="formLoading" style="height:calc(70vh - 50px);overflow:auto">
      <el-form 
        ref="editFormRef"
        v-if="!formLoading"
        :model="formData"
        :size="'large'"
        :rules="formRulesData">
        <el-row :gutter="40">
          <el-col
            v-for="(item, index) in formConfig"
            :span="getItemConfig(item,'colSpan') || 12"
            :key="index"
          >
            <el-form-item 
              :prop="getItemConfig(item,'prop')"
              :label="getItemConfig(item,'title')"
              :label-width="getItemConfig(item,'labelWidth') || 180"
            >
              <!-- 文本 -->
              <el-input 
                v-if="!getItemConfig(item) || getItemConfig(item) == 'input'"
                v-model="formData[getItemConfig(item,'prop')]" 
                :placeholder="'请输入'" 
                :clearable="!getItemConfig(item,'noClear')"
                :disabled="getItemConfig(item,'disabled')"
              />
              <!-- 数字 -->
              <el-input-number 
                v-if="getItemConfig(item) == 'number'"
                v-model="formData[getItemConfig(item,'prop')]" 
                :min="getItemConfig(item,'min')" 
                :max="getItemConfig(item,'max')" 
                :clearable="!getItemConfig(item,'noClear')"
                :disabled="getItemConfig(item,'disabled')"
              />
              <!-- 时间 -->
              <el-date-picker
                v-if="getItemConfig(item) == 'datetime'"
                v-model="formData[getItemConfig(item,'prop')]"
                style="width:100%"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :clearable="!getItemConfig(item,'noClear')"
                :disabled="getItemConfig(item,'disabled')"
              />
              <!-- 选择框 -->
              <el-select
                v-if="getItemConfig(item) == 'select' || getItemConfig(item) == 'tagFilter' || getItemConfig(item) == 'filter'"
                v-model="formData[getItemConfig(item,'prop')]"
                :filterable="!getItemConfig(item,'noSearch')"
                placeholder="请选择"
                :clearable="!getItemConfig(item,'noClear')"
                :disabled="getItemConfig(item,'disabled')"
              >
                <el-option
                  v-for="(op,op_index) in getItemConfig(item,'options')"
                  :key="op_index"
                  :label="op.label"
                  :value="op.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div style="padding:10px">
        <el-button el-button @click="close">取消</el-button>
        <el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
defineOptions({ name: 'apiEditPop' })
import { reactive, ref, onMounted,nextTick } from 'vue'
import { ElDialog,ElMessage } from 'element-plus'
import { getCommonInfoById } from '@/api/common/index'
import apiTableColumns from '@/utils/common/apiTableColumns'

import { useRoute } from 'vue-router'
const route = useRoute()

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const formData = ref(null)//表单数据
const formConfig = ref(null)//表单配置
const handleType = ref(null)//操作方式
const formRulesData = ref(null)

const props = defineProps({
  // api名称
  apiName: {
    type: String,
    default: null
  },
  // 表单规则
  formRules:{
    type: Object,
    default: null
  }
})

/** 重置表单 */
const resetForm = () => {
  // 重置上传状态和文件
  formLoading.value = false
  formData.value = null
  formConfig.value = null
}

/** 打开弹窗 */
const open = (configs,row) => {
  resetForm()
  getFormRules()
  nextTick(() => {
    dialogVisible.value = true
    formConfig.value = configs
    // 编辑数据处理
    if(row){
      handleType.value='edit'
      getFormData(row.uId)
    }else{
      handleType.value='create'
      // 新增数据处理
      formData.value = {}
      configs.forEach(item=>{
        if(item.type && item.type == 'number'){
          formData.value[item.prop] = 0
        }else{
          formData.value[item.prop] = ""
        }
      })
    }
  })
}

/** 关闭弹窗 */
const close = () => {
  // 重置上传状态和文件
  resetForm()
  dialogVisible.value = false
}

// 更改加载
const changeLoading = (data) => {
  formLoading.value = data
}

const editFormRef = ref(null)//表单配置
// 获取验证是否通过
const validate = (data) => {
  return editFormRef.value.validate(data)
}

defineExpose({ open,close,changeLoading,validate }) 

// 获取规则
const getFormRules = () => {
  if(props.formRules) {
    formRulesData.value = props.formRules
  }else{
    formRulesData.value = {}
    apiTableColumns[props.apiName].forEach(item=>{
      if(item.required || (item.searchFilter && item.searchFilter.required)){
        formRulesData.value[item.prop] = [{ required: true, message: '必填项', trigger: 'blur' }]
      }
    })
  }
}

/** 获取表单 */
const getFormData = async (uId) => {
  formLoading.value = true
  getCommonInfoById(props.apiName,uId)
    .then(res=>{
      formData.value = res.data
      formLoading.value = false
    })
    .catch(err=>{
      dialogVisible.value = false
      ElMessage.error('获取失败，请重试')
    })
    .finally(()=>{formLoading.value = false})
}

// 获取类型
const getItemConfig = (item,type='type') => {
  if(item.formConfig && item.formConfig[type]){
    return item.formConfig[type]
  }else{
    return item[type]
  }
}

const emits = defineEmits(['submitEditForm'])
/** 提交表单 */
const submitForm = async () => {
  emits('submitEditForm',handleType.value,formData.value,formConfig.value)
}


</script>
<style lang="scss" scoped>
::v-deep .el-row{
  margin:0 !important
}
</style>