a

src/views/recruit/recruitplanmajor/detaiform.vue

@@ -2,8 +2,8 @@
   <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()"
+    v-model="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter="dataFormSubmit"
              label-width="140px">
 
       <el-form-item label="招生计划" prop="groupId">
@@ -106,187 +106,212 @@
       </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,getCityPlan} from '@/api/recruit/recruitplanmajor'
-import {getDeptList} from "@/api/basic/basicclass";
-import {getDictByType} from "@/api/contract/contract";
-import {list} from "@/api/recruit/recruitstudentplangroup";
-import {getMajorNameList} from "@/api/basic/major";
+<script setup lang="ts">
+import { ref, reactive, nextTick } from 'vue'
+import { ElNotification } from 'element-plus'
+import { addObj, getObj, putObj, getCityPlan } from '@/api/recruit/recruitplanmajor'
+import { getDeptList } from "@/api/basic/basicclass"
+import { getDictByType } from "@/api/contract/contract"
+import { list } from "@/api/recruit/recruitstudentplangroup"
+import { getMajorNameList } from "@/api/basic/major"
 
-export default {
-  data() {
-    return {
-      visible: false,
-      canSubmit: false,
-      dataForm: {
-        id: "",
-        groupId: "",
-        zydm: "",
-        zymc: "",
-        zygfmc: "",
-        deptCode: "",
-        xz: "",
-        cc: "",
-        isZd: "0",
-        isOrder: "0",
-        remarks: "",
-        offcialZydm: "",
-        isUnion:"0",
-        tuitionFee:0,
-        cityPlanId:null
-      },
-      cityPlanIdList:[],
-      offcialZydmList: [],
-      planList: [],
-      yeNoList: [],
-      deptList: [],
-      ccList: [],
-      majorYears: [],
-      dataRule: {
-        zydm: [
-          {required: true, message: '专业代码不能为空', trigger: 'blur'},
-          {min: 1, max: 6, message: '专业代码长度不大于6个字符', trigger: 'blur'}
-        ],
-        tuitionFee: [
-          {required: true, message: '学费不能为空', trigger: 'blur'}
-        ],
-        zymc: [
-          {required: true, message: '专业名称不能为空', trigger: 'blur'},
-          {min: 1, max: 200, message: '专业名称长度不大于200个字符', trigger: 'blur'}
+// Emits
+const emit = defineEmits<{
+  (e: 'refreshDataList'): void
+}>()
 
-        ],
-        zygfmc: [
-          {required: true, message: '专业规范名称不能为空', trigger: 'blur'},
-          {min: 1, max: 200, message: '专业规范名称长度不大于200个字符', trigger: 'blur'}
-        ],
-        groupId: [
-          {required: true, message: '招生计划不能为空', trigger: 'blur'}
-        ],
-        xz: [
-          {required: true, message: '学制不能为空', trigger: 'blur'}
-        ],
-        deptCode: [
-          {required: true, message: '学院不能为空', trigger: 'blur'}
-        ],
-        cc: [
-          {required: true, message: '层次不能为空', trigger: 'blur'}
-        ],
-        isOrder: [
-          {required: true, message: '订单班不能为空', trigger: 'blur'}
-        ],
-        isZd: [
-          {required: true, message: '订单班不能为空', trigger: 'blur'}
-        ],
-        isUnion: [
-          {required: true, message: '联院班不能为空', trigger: 'blur'}
-        ],
-        remarks: [
-          {min: 1, max: 100, message: '备注长度不大于100个字符', trigger: 'blur'}
-        ],
-      }
+// 表单引用
+const dataFormRef = ref()
+
+// 响应式数据
+const visible = ref(false)
+const canSubmit = ref(false)
+const cityPlanIdList = ref<any[]>([])
+const offcialZydmList = ref<any[]>([])
+const planList = ref<any[]>([])
+const yesNoList = ref<any[]>([])
+const deptList = ref<any[]>([])
+const ccList = ref<any[]>([])
+const majorYears = ref<any[]>([])
+
+const dataForm = reactive({
+  id: "",
+  groupId: "",
+  zydm: "",
+  zymc: "",
+  zygfmc: "",
+  deptCode: "",
+  xz: "",
+  cc: "",
+  isZd: "0",
+  isOrder: "0",
+  remarks: "",
+  offcialZydm: "",
+  isUnion: "0",
+  tuitionFee: 0,
+  cityPlanId: null as string | null,
+  cityPlanIds: [] as string[],
+  cityPlanName: "",
+  cityPlanYear: "",
+  sort: 0
+})
+
+const dataRule = {
+  zydm: [
+    { required: true, message: '专业代码不能为空', trigger: 'blur' },
+    { min: 1, max: 6, message: '专业代码长度不大于6个字符', trigger: 'blur' }
+  ],
+  tuitionFee: [
+    { required: true, message: '学费不能为空', trigger: 'blur' }
+  ],
+  zymc: [
+    { required: true, message: '专业名称不能为空', trigger: 'blur' },
+    { min: 1, max: 200, message: '专业名称长度不大于200个字符', trigger: 'blur' }
+  ],
+  zygfmc: [
+    { required: true, message: '专业规范名称不能为空', trigger: 'blur' },
+    { min: 1, max: 200, message: '专业规范名称长度不大于200个字符', trigger: 'blur' }
+  ],
+  groupId: [
+    { required: true, message: '招生计划不能为空', trigger: 'blur' }
+  ],
+  xz: [
+    { required: true, message: '学制不能为空', trigger: 'blur' }
+  ],
+  deptCode: [
+    { required: true, message: '学院不能为空', trigger: 'blur' }
+  ],
+  cc: [
+    { required: true, message: '层次不能为空', trigger: 'blur' }
+  ],
+  isOrder: [
+    { required: true, message: '订单班不能为空', trigger: 'blur' }
+  ],
+  isZd: [
+    { required: true, message: '订单班不能为空', trigger: 'blur' }
+  ],
+  isUnion: [
+    { required: true, message: '联院班不能为空', trigger: 'blur' }
+  ],
+  remarks: [
+    { min: 1, max: 100, message: '备注长度不大于100个字符', trigger: 'blur' }
+  ],
+}
+
+/**
+ * 判断市平台招生专业是否占用,占用不可选
+ */
+const isCityDisable = (id: string) => {
+  if (!dataForm.cityPlanIds || !Array.isArray(dataForm.cityPlanIds)) {
+    return false
+  }
+  return dataForm.cityPlanIds.some(e => e == id)
+}
+
+// 初始化数据
+const initData = () => {
+  // 查询二级学院信息
+  getDeptList().then((data: any) => {
+    deptList.value = data.data
+  })
+  list().then((data: any) => {
+    planList.value = data.data
+    if (!dataForm.id) {
+      dataForm.groupId = planList.value[0]?.id || ""
     }
-  },
-  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
-            //获取市平台对应年份下的招生计划
-            getCityPlan({id:this.dataForm.id}).then(data =>{
-              this.cityPlanIdList = data.data.data
-            })
-          })
-        }
-      })
-    },
-    /**
-     * 判断市平台招生专业是否占用,占用不可选
-     * @param notBedNo
-     * @returns {boolean}
-     */
-    isCityDisable(id){
-      var returnFlag = false;
-      this.dataForm.cityPlanIds.forEach(e=>{
-        if(e == id){
-          returnFlag = true;
-        }
-      })
-     return returnFlag;
-    },
-    initData() {
-      //查询二级学院信息
-      getDeptList().then(data => {
-        this.deptList = data.data.data
-      })
-      list().then(data => {
-        this.planList = data.data.data
-        if (!this.dataForm.id) {
-          this.dataForm.groupId = this.planList[0].id;
-        }
-      });
-      getMajorNameList().then(data =>{
-        this.offcialZydmList = data.data.data
-      })
-      //获取数据字典
-      getDictByType("yes_no").then(res => {
-        this.yesNoList = res.data.data
-      })
-      getDictByType("basic_major_years").then(res => {
-        this.majorYears = res.data.data
-      })
-      getDictByType("basic_major_level").then(res => {
-        this.ccList = res.data.data
-      })
+  })
+  getMajorNameList().then((data: any) => {
+    offcialZydmList.value = data.data
+  })
+  // 获取数据字典
+  getDictByType("yes_no").then((res: any) => {
+    yesNoList.value = res.data
+  })
+  getDictByType("basic_major_years").then((res: any) => {
+    majorYears.value = res.data
+  })
+  getDictByType("basic_major_level").then((res: any) => {
+    ccList.value = res.data
+  })
+}
 
-    },
-    // 表单提交
-    dataFormSubmit() {
-      if(this.dataForm.cityPlanId !=null){
-        this.cityPlanIdList.forEach(e=>{
-          if(e.id == this.dataForm.cityPlanId){
-            this.dataForm.cityPlanName = e.schoolMajorName;
-            this.dataForm.cityPlanYear = e.educational;
-          }
+// 表单提交
+const dataFormSubmit = () => {
+  if (dataForm.cityPlanId != null) {
+    cityPlanIdList.value.forEach(e => {
+      if (e.id == dataForm.cityPlanId) {
+        dataForm.cityPlanName = e.schoolMajorName
+        dataForm.cityPlanYear = e.educational
+      }
+    })
+  }
+  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
+        })
+      } else {
+        addObj(dataForm).then(() => {
+          ElNotification.success({
+            title: '成功',
+            message: '添加成功'
+          })
+          visible.value = false
+          emit('refreshDataList')
+        }).catch(() => {
+          canSubmit.value = true
         })
       }
-      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;
-            });
-          }
-        }
+    }
+  })
+}
+
+// 初始化方法
+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)
+        // 获取市平台对应年份下的招生计划
+        getCityPlan({ id: dataForm.id }).then((data: any) => {
+          cityPlanIdList.value = data.data
+        })
       })
     }
-  }
+  })
 }
+
+// 暴露方法给父组件
+defineExpose({
+  init
+})
 </script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>

src/views/recruit/recruitplanmajor/index.vue

@@ -252,8 +252,8 @@ const state: BasicTableProps = reactive<BasicTableProps>({
     const response = await fetchList(params)
     return {
       data: {
-        records: response.data.data.records,
-        total: response.data.data.total
+        records: response.data.records,
+        total: response.data.total
       }
     }
   },
@@ -268,18 +268,18 @@ const init = async () => {
   try {
     // 查询二级学院信息
     const deptData = await getDeptList()
-    deptList.value = deptData.data.data || []
+    deptList.value = deptData.data || []
     
     // 获取招生计划列表
     const planData = await list()
-    planList.value = planData.data.data || []
+    planList.value = planData.data || []
     if (planList.value.length > 0) {
       queryForm.groupId = planList.value[0].id
     }
     
     // 获取专业名称列表
     const majorData = await getMajorNameList()
-    offcialZydmList.value = majorData.data.data || []
+    offcialZydmList.value = majorData.data || []
     
     getDataList()
   } catch (error) {

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>