普通招生

src/views/recruit/recruitstudentsignupturnovermoneychange/index.vue

@@ -19,15 +19,24 @@
   <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view">
       <!-- 搜索表单 -->
-      <el-form :model="queryForm" inline class="mb-4">
+      <!-- <el-form :model="queryForm" inline>
         <el-form-item>
           <el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
-          <el-button type="primary" plain icon="Refresh" class="ml10" @click="resetQuery">重置</el-button>
+          <el-button icon="Refresh" class="ml10" @click="resetQuery">重置</el-button>
         </el-form-item>
-        <el-form-item v-if="permissions.recruit_recruitstudentsignupturnovermoneychange_add">
-          <el-button type="primary" icon="FolderAdd" class="ml10" @click="handleAdd">新增</el-button>
-        </el-form-item>
-      </el-form>
+      </el-form> -->
+
+      <!-- 操作按钮 -->
+      <el-row>
+        <div class="mb15">
+          <el-button 
+            v-if="permissions.recruit_recruitstudentsignupturnovermoneychange_add"
+            type="primary"
+            icon="FolderAdd"
+            @click="handleAdd">新 增
+          </el-button>
+        </div>
+      </el-row>
 
       <!-- 表格 -->
       <el-table
@@ -82,73 +91,21 @@
       />
 
       <!-- 新增/编辑弹窗 -->
-      <el-dialog
-        v-model="dialogVisible"
-        :title="form.id ? '编辑' : '新增'"
-        width="600px"
-        :close-on-click-modal="false"
-        destroy-on-close
-      >
-        <el-form
-          ref="formRef"
-          :model="form"
-          :rules="formRules"
-          label-width="200px"
-        >
-          <el-form-item label="异动ID" prop="turnOverId">
-            <el-input v-model="form.turnOverId" placeholder="请输入异动ID" clearable />
-          </el-form-item>
-          <el-form-item label="退补类型" prop="type">
-            <el-select v-model="form.type" placeholder="请选择退补类型" clearable style="width: 100%">
-              <el-option label="学费" value="1" />
-              <el-option label="代办费" value="2" />
-              <el-option label="捐资费" value="3" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="原费用" prop="oldFee">
-            <el-input-number v-model="form.oldFee" :min="0" :precision="2" placeholder="请输入原费用" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="变更后费用" prop="newFee">
-            <el-input-number v-model="form.newFee" :min="0" :precision="2" placeholder="请输入变更后费用" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="变更费用" prop="fee">
-            <el-input-number v-model="form.fee" :precision="2" placeholder="请输入变更费用" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="补还是退" prop="incOrDec">
-            <el-select v-model="form.incOrDec" placeholder="请选择补还是退" clearable style="width: 100%">
-              <el-option label="补" value="1" />
-              <el-option label="退" value="2" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="是否推送" prop="pushed">
-            <el-select v-model="form.pushed" placeholder="请选择是否推送" clearable style="width: 100%">
-              <el-option label="是" value="1" />
-              <el-option label="否" value="0" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="推送失败原因" prop="pushFailReason">
-            <el-input v-model="form.pushFailReason" type="textarea" :rows="3" placeholder="请输入推送失败原因" clearable />
-          </el-form-item>
-        </el-form>
-        
-        <template #footer>
-          <div class="dialog-footer">
-            <el-button @click="dialogVisible = false">取消</el-button>
-            <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
-          </div>
-        </template>
-      </el-dialog>
+      <FormDialog ref="formDialogRef" @refresh="getDataList"></FormDialog>
     </div>
   </div>
 </template>
 
 <script setup lang="ts" name="recruitstudentsignupturnovermoneychange">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, defineAsyncComponent, nextTick } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useUserInfo } from '/@/stores/userInfo'
 import { BasicTableProps, useTable } from '/@/hooks/table'
 import { useMessage, useMessageBox } from '/@/hooks/message'
-import { addObj, delObj, fetchList, putObj } from '/@/api/recruit/recruitstudentsignupturnovermoneychange'
+import { delObj, fetchList } from '/@/api/recruit/recruitstudentsignupturnovermoneychange'
+
+// 定义组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'))
 
 // 使用 Pinia store
 const userInfoStore = useUserInfo()
@@ -169,30 +126,10 @@ const messageBox = useMessageBox()
 
 // 表格引用
 const tableRef = ref()
-const formRef = ref()
-
-// 弹窗状态
-const dialogVisible = ref(false)
-const submitLoading = ref(false)
+const formDialogRef = ref()
 
 // 查询表单
-const queryForm = reactive({})
-
-// 表单数据
-const form = reactive({
-  id: '',
-  turnOverId: '',
-  type: '',
-  oldFee: undefined,
-  newFee: undefined,
-  fee: undefined,
-  incOrDec: '',
-  pushed: '',
-  pushFailReason: ''
-})
-
-// 表单验证规则
-const formRules = {}
+const queryForm = reactive<Record<string, any>>({})
 
 // 表格状态
 const state: BasicTableProps = reactive<BasicTableProps>({
@@ -221,24 +158,16 @@ const resetQuery = () => {
 
 // 新增
 const handleAdd = () => {
-  Object.keys(form).forEach(key => {
-    if (key === 'id') {
-      form[key] = ''
-    } else if (typeof form[key] === 'number') {
-      form[key] = undefined
-    } else {
-      form[key] = ''
-    }
+  nextTick(() => {
+    formDialogRef.value?.init()
   })
-  dialogVisible.value = true
 }
 
 // 编辑
-const handleEdit = async (row: any) => {
-  Object.keys(form).forEach(key => {
-    form[key] = row[key]
+const handleEdit = (row: any) => {
+  nextTick(() => {
+    formDialogRef.value?.init(row)
   })
-  dialogVisible.value = true
 }
 
 // 删除
@@ -253,32 +182,6 @@ const handleDel = async (row: any) => {
   }
 }
 
-// 提交表单
-const handleSubmit = async () => {
-  if (!formRef.value) return
-  
-  await formRef.value.validate(async (valid: boolean) => {
-    if (valid) {
-      submitLoading.value = true
-      try {
-        if (form.id) {
-          await putObj(form)
-          message.success('修改成功')
-        } else {
-          await addObj(form)
-          message.success('添加成功')
-        }
-        dialogVisible.value = false
-        getDataList()
-      } catch (error: any) {
-        message.error(error.msg || '操作失败')
-      } finally {
-        submitLoading.value = false
-      }
-    }
-  })
-}
-
 onMounted(() => {
   getDataList()
 })