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

<template>
  <el-dialog
    v-model="dialogVisible"
    title="编辑"
    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="props.formRules">
        <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'"
                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 } from 'vue'
import { ElDialog,ElMessage } from 'element-plus'
import { getCommonInfoById } from '@/api/common/index'

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 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()
  dialogVisible.value = true
  formConfig.value = configs
  getFormData(row.uId)
}

/** 关闭弹窗 */
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 getFormData = async (uId) => {
  formLoading.value = true
  getCommonInfoById(props.apiName,uId)
    .then(res=>{
      formData.value = res.data
      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',formData.value,formConfig.value)
}


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