a

src/views/recruit/recruitplanmajor/majorGroupByDept.vue

@@ -4,8 +4,8 @@
     append-to-body
     width="90%"
     :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" ref="dataForm" label-width="140px">
+    v-model="visible">
+    <el-form :model="dataForm" ref="dataFormRef" label-width="140px">
       <el-form-item label="招生计划名称" prop="groupName">
         <el-input v-model="dataForm.groupName" placeholder="招生计划名称" disabled></el-input>
       </el-form-item>
@@ -27,8 +27,8 @@
               align="center"
               label="专业"
             >
-              <template slot-scope="scope">
-                <span >{{ scope.row.zymc+' || '+scope.row.zydm+' || '+scope.row.xz+' 年制'}}</span>
+              <template #default="scope">
+                <span>{{ scope.row.zymc+' || '+scope.row.zydm+' || '+scope.row.xz+' 年制'}}</span>
               </template>
             </el-table-column>
             <el-table-column
@@ -38,7 +38,7 @@
               label="计划总数"
               width="180px"
             >
-              <template slot-scope="scope">
+              <template #default="scope">
                 <el-input-number style="width: 80%" v-model="scope.row.planStudentNum" :min="0" :max="999" @change="updateMajor(scope.row)" width="100px"></el-input-number>
               </template>
             </el-table-column>
@@ -50,7 +50,7 @@
               label="控制数"
               width="180px"
             >
-              <template slot-scope="scope">
+              <template #default="scope">
                 <el-input-number style="width: 80%" v-model="scope.row.needStudentNum" :min="0" :max="999"
                                  @change="updateMajor(scope.row)"></el-input-number>
               </template>
@@ -63,7 +63,7 @@
               label="预留"
               width="180px"
             >
-              <template slot-scope="scope">
+              <template #default="scope">
                 <el-input-number style="width: 80%" v-model="scope.row.needStudentOverNum" :min="0" :max="999"
                                  @change="updateMajor(scope.row)"></el-input-number>
               </template>
@@ -76,7 +76,7 @@
               label="录取线"
               width="180px"
             >
-              <template slot-scope="scope">
+              <template #default="scope">
                 <el-input-number style="width: 80%" v-model="scope.row.scoreLine" :min="0" :max="999"
                                  @change="updateMajor(scope.row)"></el-input-number>
               </template>
@@ -86,7 +86,7 @@
               header-align="center"
               align="center"
               label="生源">
-              <template slot-scope="scope">
+              <template #default="scope">
                 <el-select v-model="scope.row.degreeOfEducation" placeholder="请选择生源" style=" width: 100%;text-align:center" multiple
                            @change="updateMajor(scope.row)">
                   <el-option
@@ -104,124 +104,140 @@
       </el-tab-pane>
     </el-tabs>
 
-
   </el-dialog>
 </template>
 
-<script>
-import {list, delObj} from '@/api/recruit/recruitplanmajor'
-import {putObj} from '@/api/recruit/recruitstudentplan'
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useMessage, useMessageBox } from '/@/hooks/message'
+import { ElNotification } from 'element-plus'
+import { list, delObj } from '@/api/recruit/recruitplanmajor'
+import { putObj } from '@/api/recruit/recruitstudentplan'
+import { fetchSecondTree } from "@/api/basic/basicdept"
+import { getDictByType } from "@/api/contract/contract"
 
-import {mapGetters} from 'vuex'
-import global from '@/components/tools/commondict'
-import {fetchSecondTree} from "@/api/basic/basicdept";
-import {getDictByType} from "@/api/contract/contract";
+// 消息提示 hooks
+const message = useMessage()
+const messageBox = useMessageBox()
 
-export default {
-  data() {
-    return {
-      dataForm: {
-        groupId: "",
-        groupName: "",
-        deptCode: "11",
-      },
-      activiName: "11",
-      global: global,
-      dataList: [],
-      deptList: [],
-      degreeOfEducationList:[],
-      dataListLoading: false,
-      visible: false,
-      tableLoading: false,
-    }
-  },
-  components: {},
-  created() {
-  },
-  computed: {
-    ...mapGetters(['permissions'])
-  },
-  methods: {
-    init(row) {
-      this.visible = true;
-      this.dataForm.deptCode = "11";
-      this.dataForm.groupName = row.groupName;
-      this.dataForm.groupId = row.id;
-      this.initData()
-      this.getDepartment();
-      this.getDataList()
-    },
-    initData(){
-      this.degreeOfEducationList=[];
-      //获取数据字典
-      getDictByType("finance_student_source").then(res => {
-        this.degreeOfEducationList = res.data.data
-      })
-    },
-    getDepartment() {
-      fetchSecondTree().then(res => {
-        this.deptList = res.data.data
-      })
-    },
-    updateMajor(row) {
-      if(row.degreeOfEducation.length!=0){
-        row.degreeOfEducations = row.degreeOfEducation.join(",");
-      }else{
-        row.degreeOfEducations="";
+// 表单引用
+const dataFormRef = ref()
+
+// 响应式数据
+const visible = ref(false)
+const activiName = ref("11")
+const dataList = ref<any[]>([])
+const deptList = ref<any[]>([])
+const degreeOfEducationList = ref<any[]>([])
+const dataListLoading = ref(false)
+
+const dataForm = reactive({
+  groupId: "",
+  groupName: "",
+  deptCode: "11",
+})
+
+// 初始化数据
+const initData = () => {
+  degreeOfEducationList.value = []
+  // 获取数据字典
+  getDictByType("finance_student_source").then((res: any) => {
+    degreeOfEducationList.value = res.data
+  })
+}
+
+// 获取部门列表
+const getDepartment = () => {
+  fetchSecondTree().then((res: any) => {
+    deptList.value = res.data
+  })
+}
+
+// 更新专业
+const updateMajor = (row: any) => {
+  if (row.degreeOfEducation && row.degreeOfEducation.length != 0) {
+    row.degreeOfEducations = row.degreeOfEducation.join(",")
+  } else {
+    row.degreeOfEducations = ""
+  }
+  putObj({
+    id: row.planId,
+    planStudentNum: row.planStudentNum,
+    planStudentBoyNum: row.planStudentBoyNum,
+    planStudentGirlNum: row.planStudentGirlNum,
+    needStudentNum: row.needStudentNum,
+    needStudentOverNum: row.needStudentOverNum,
+    scoreLine: row.scoreLine,
+    scoreMinLine: row.scoreMinLine,
+    degreeOfEducations: row.degreeOfEducations
+  }).then(() => {
+    ElNotification.success({
+      title: '成功',
+      message: '修改成功'
+    })
+  }).catch(() => {
+    // 错误处理
+  })
+}
+
+// 标签切换
+const handleChange = (tab: any) => {
+  dataForm.deptCode = tab.name
+  getDataList()
+}
+
+// 获取数据列表
+const getDataList = () => {
+  dataList.value = []
+  dataListLoading.value = true
+  if (dataForm.deptCode == '') {
+    dataForm.deptCode = "11"
+  }
+  list({ groupId: dataForm.groupId, deptCode: dataForm.deptCode }).then((response: any) => {
+    dataList.value = response.data
+    dataList.value.forEach(e => {
+      if (e.degreeOfEducation) {
+        e.degreeOfEducation = e.degreeOfEducation.split(",")
       }
-      putObj({
-        id: row.planId,
-        planStudentNum: row.planStudentNum,
-        planStudentBoyNum: row.planStudentBoyNum,
-        planStudentGirlNum: row.planStudentGirlNum,
-        needStudentNum: row.needStudentNum,
-        needStudentOverNum:row.needStudentOverNum,
-        scoreLine: row.scoreLine,
-        scoreMinLine: row.scoreMinLine,
-        degreeOfEducations: row.degreeOfEducations
-      }).then(res => {
-        this.$notify.success('修改成功')
-      }).catch(() => {
-      });
-    },
-    handleChange(tab, event) {
-      this.dataForm.deptCode = tab.name;
-      this.getDataList()
-    },
-    // 获取数据列表
-    getDataList() {
-      this.dataList = []
-      this.dataListLoading = true
-      if (this.dataForm.deptCode == '') {
-        this.dataForm.deptCode = "11";
-      }
-      list({groupId: this.dataForm.groupId, deptCode: this.dataForm.deptCode}).then(response => {
-        this.dataList = response.data.data
-        this.dataList.forEach(e=>{
-          if(e.degreeOfEducation){
-            e.degreeOfEducation = e.degreeOfEducation.split(",")
-          }
-        })
-      })
-      this.dataListLoading = false
-    },
+    })
+    dataListLoading.value = false
+  }).catch(() => {
+    dataListLoading.value = false
+  })
+}
 
-    // 删除
-    deleteHandle(id) {
-      this.$confirm('是否确认删除本条数据？请谨慎操作', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function () {
-        return delObj(id)
-      }).then(data => {
-        this.$message.success('删除成功')
-        this.getDataList()
-      })
-    }
+// 删除
+const deleteHandle = async (id: string) => {
+  try {
+    await messageBox.confirm('是否确认删除本条数据？请谨慎操作')
+    await delObj(id)
+    message.success('删除成功')
+    getDataList()
+  } catch {
+    // 用户取消
   }
 }
-</script>
-<style lang="scss" scoped>
 
+// 初始化方法
+const init = (row: any) => {
+  visible.value = true
+  dataForm.deptCode = "11"
+  dataForm.groupName = row.groupName
+  dataForm.groupId = row.id
+  initData()
+  getDepartment()
+  getDataList()
+}
+
+// 暴露方法给父组件
+defineExpose({
+  init,
+  deleteHandle
+})
+</script>
+
+<style lang="scss" scoped>
+.avue-crud {
+  margin-top: 20px;
+}
 </style>