zky_mandate_ui/src/views/businesses/speciesName/ApiV1BusinessesSpeciesNameEdit.vue

<template>  
  <div class="demo-speciesName-edit">
    <!-- 添加或修改对话框 -->
    <el-dialog v-model="isShowDialog" width="800px" :close-on-click-modal="false" :destroy-on-close="true">
      <template #header>
        <div v-drag="['.demo-speciesName-edit .el-dialog', '.demo-speciesName-edit .el-dialog__header']">{{(!formData.id || formData.id==0?'添加':'修改')+''}}</div>
      </template>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">        
        <el-form-item label="物种编号" prop="speciesCode">
          <el-input v-model="formData.speciesCode" placeholder="请输入物种编号" />
        </el-form-item>        
        <el-form-item label="物种名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入物种名称" />
        </el-form-item>        
        <el-form-item label="物种名称内容" prop="content">
          <el-input v-model="formData.content" placeholder="请输入物种名称内容" />
        </el-form-item>        
        <el-form-item label="数据来源" prop="sourcesData">
          <el-input v-model="formData.sourcesData" placeholder="请输入数据来源" />
        </el-form-item>        
        <el-form-item label="数据采集人" prop="createUser">
          <el-input v-model="formData.createUser" placeholder="请输入数据采集人" />
        </el-form-item>        
        <el-form-item label="数据采集信息" prop="createDate">
          <el-date-picker clearable  style="width: 200px"
            v-model="formData.createDate"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择数据采集信息">
          </el-date-picker>
        </el-form-item>        
        <el-form-item label="数据核查人" prop="auditUser">
          <el-input v-model="formData.auditUser" placeholder="请输入数据核查人" />
        </el-form-item>        
        <el-form-item label="数据核查日期" prop="auditDate">
          <el-date-picker clearable  style="width: 200px"
            v-model="formData.auditDate"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择数据核查日期">
          </el-date-picker>
        </el-form-item>        
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入备注" />
        </el-form-item>       
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="onSubmit" :disabled="loading">确 定</el-button>
          <el-button @click="onCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs, ref,unref,getCurrentInstance,computed } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
import {
  listSpeciesName,
  getSpeciesName,
  delSpeciesName,
  addSpeciesName,
  updateSpeciesName,  
} from "./api";
import {
  SpeciesNameTableColumns,
  SpeciesNameInfoData,
  SpeciesNameTableDataState,
  SpeciesNameEditState
} from "./type"
defineOptions({ name: "ApiV1BusinessesSpeciesNameEdit"})
const emit = defineEmits(['speciesNameList'])
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<SpeciesNameEditState>({
  loading:false,
  isShowDialog: false,
  formData: {    
    id: undefined,    
    speciesCode: undefined,    
    name: undefined,    
    content: undefined,    
    sourcesData: undefined,    
    createUser: undefined,    
    createDate: undefined,    
    auditUser: undefined,    
    auditDate: undefined,    
    remark: undefined,    
  },
  // 表单校验
  rules: {    
    id : [
        { required: true, message: "主键不能为空", trigger: "blur" }
    ],    
    name : [
        { required: true, message: "物种名称不能为空", trigger: "blur" }
    ],    
  }
});
const { loading,isShowDialog,formData,rules } = toRefs(state);
// 打开弹窗
const openDialog = (row?: SpeciesNameInfoData) => {
  resetForm();
  if(row) {
    getSpeciesName(row.id!).then((res:any)=>{
      const data = res.data;      
      state.formData = data;
  })
}
  state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.isShowDialog = false;
};
defineExpose({
  openDialog,
});
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = () => {
  const formWrap = unref(formRef) as any;
  if (!formWrap) return;
  formWrap.validate((valid: boolean) => {
    if (valid) {
      state.loading = true;
      if(!state.formData.id || state.formData.id===0){
        //添加
      addSpeciesName(state.formData).then(()=>{
          ElMessage.success('添加成功');
          closeDialog(); // 关闭弹窗
          emit('speciesNameList')
        }).finally(()=>{
          state.loading = false;
        })
      }else{
        //修改
      updateSpeciesName(state.formData).then(()=>{
          ElMessage.success('修改成功');
          closeDialog(); // 关闭弹窗
          emit('speciesNameList')
        }).finally(()=>{
          state.loading = false;
        })
      }
    }
  });
};
const resetForm = ()=>{
  state.formData = {    
    id: undefined,    
    speciesCode: undefined,    
    name: undefined,    
    content: undefined,    
    sourcesData: undefined,    
    createUser: undefined,    
    createDate: undefined,    
    auditUser: undefined,    
    auditDate: undefined,    
    remark: undefined,    
  }  
};
</script>
<style scoped>  
  .kv-label{margin-bottom: 15px;font-size: 14px;}
  .mini-btn i.el-icon{margin: unset;}
  .kv-row{margin-bottom: 12px;}
</style>