a

src/views/recruit/recruitImitateAdjustBatch/detaiform.vue

@@ -2,11 +2,11 @@
   <el-dialog
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px">
+    v-model="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter="dataFormSubmit" label-width="140px">
 
       <el-form-item label="招生计划" prop="groupId">
-        <el-select v-model="dataForm.groupId" filterable :disabled="!dataForm.id ? false : true" placeholder="请选择招生计划" size="small" style="width: 100%">
+        <el-select v-model="dataForm.groupId" filterable :disabled="!!dataForm.id" placeholder="请选择招生计划" size="small" style="width: 100%">
           <el-option
             v-for="item in planList"
             :key="item.id"
@@ -20,94 +20,119 @@
       </el-form-item>
     </el-form>
 
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
-    </span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmit" v-if="canSubmit">确定</el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
-<script>
-import {addObj, getObj, putObj} from '@/api/recruit/recruitImitateAdjustBatch'
-    import {list} from "@/api/recruit/recruitstudentplangroup";
+<script setup lang="ts">
+import { ref, reactive, nextTick } from 'vue'
+import { ElNotification } from 'element-plus'
+import { addObj, getObj, putObj } from '@/api/recruit/recruitImitateAdjustBatch'
+import { list } from "@/api/recruit/recruitstudentplangroup"
 
-    export default {
-    data () {
-      return {
-        visible: false,
-        canSubmit: false,
-        dataForm: {
-          id:"",
-          batchName:"",
-          groupId:"",
-        },
-        disabled:false,
-        planList: [],
-        areaList:[],
-        deptList:[],
-        dataRule: {
-          groupId: [
-            { required: true, message: '招生计划不能为空', trigger: 'blur' },
-          ],
-          batchName: [
-            { required: true, message: '批次名称不能为空', trigger: 'blur' },
-            { min: 1, max: 20, message: '批次名称长度不大于20个字符', trigger: 'blur' }
-          ],
-        }
-      }
-    },
-      created () {
-      },
-    methods: {
-      init (id) {
-        this.dataForm.id = id || null;
-        this.visible = true;
-        this.canSubmit = true;
-        this.initData();
-        this.$nextTick(() => {
-          this.$refs['dataForm'].resetFields()
-          if (this.dataForm.id) {
-            getObj(this.dataForm.id).then(response => {
-                this.dataForm = response.data.data
-            })
-          }else{
-            this.disabled = true;
-          }
+// Emits
+const emit = defineEmits<{
+  (e: 'refreshDataList'): void
+}>()
+
+// 表单引用
+const dataFormRef = ref()
+
+// 响应式数据
+const visible = ref(false)
+const canSubmit = ref(false)
+const disabled = ref(false)
+const planList = ref<any[]>([])
+
+const dataForm = reactive({
+  id: "",
+  batchName: "",
+  groupId: "",
+})
+
+const dataRule = {
+  groupId: [
+    { required: true, message: '招生计划不能为空', trigger: 'blur' },
+  ],
+  batchName: [
+    { required: true, message: '批次名称不能为空', trigger: 'blur' },
+    { min: 1, max: 20, message: '批次名称长度不大于20个字符', trigger: 'blur' }
+  ],
+}
+
+// 初始化数据
+const initData = () => {
+  list().then((data: any) => {
+    planList.value = data.data
+    if (!dataForm.id) {
+      dataForm.groupId = planList.value[0].id
+    }
+  })
+}
+
+// 表单提交
+const dataFormSubmit = () => {
+  dataFormRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      canSubmit.value = false
+      if (dataForm.id) {
+        putObj(dataForm).then(() => {
+          ElNotification.success({
+            title: '成功',
+            message: '修改成功'
+          })
+          visible.value = false
+          emit('refreshDataList')
+        }).catch(() => {
+          canSubmit.value = true
         })
-      },
-      initData() {
-        list().then(data =>{
-          this.planList = data.data.data
-          if(!this.dataForm.id){
-            this.dataForm.groupId=this.planList[0].id
-          }
-        });
-      },
-      // 表单提交
-      dataFormSubmit () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            this.canSubmit = false;
-            if (this.dataForm.id) {
-                putObj(this.dataForm).then(data => {
-                    this.$notify.success('修改成功')
-                    this.visible = false
-                    this.$emit('refreshDataList')
-                }).catch(() => {
-                    this.canSubmit = true;
-                });
-            } else {
-                addObj(this.dataForm).then(data => {
-                    this.$notify.success('添加成功')
-                    this.visible = false
-                    this.$emit('refreshDataList')
-                }).catch(() => {
-                    this.canSubmit = true;
-                });
-            }
-          }
+      } else {
+        addObj(dataForm).then(() => {
+          ElNotification.success({
+            title: '成功',
+            message: '添加成功'
+          })
+          visible.value = false
+          emit('refreshDataList')
+        }).catch(() => {
+          canSubmit.value = true
         })
       }
     }
-  }
+  })
+}
+
+// 初始化方法
+const init = (id: string | null) => {
+  dataForm.id = id || ""
+  visible.value = true
+  canSubmit.value = true
+  initData()
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+    if (dataForm.id) {
+      getObj(dataForm.id).then((response: any) => {
+        Object.assign(dataForm, response.data)
+      })
+    } else {
+      disabled.value = true
+    }
+  })
+}
+
+// 暴露方法给父组件
+defineExpose({
+  init
+})
 </script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>