vue3 -> vue2

src/views/school/student/index.vue

@@ -33,10 +33,10 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+            <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">新增 </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button v-hasPermi="['system:dict:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
+            <el-button v-hasPermi="['system:dict:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改 </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
@@ -44,10 +44,10 @@
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+            <el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport"> 导出 </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存</el-button>
+            <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存 </el-button>
           </el-col>
           <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
@@ -107,37 +107,44 @@
   </div>
 </template>
 
-<script setup name="Dict" lang="ts">
+<script>
 import { useDictStore } from '@/store/modules/dict';
 import { listType, getType, delType, addType, updateType, refreshCache } from '@/api/system/dict/type';
 import { DictTypeForm, DictTypeQuery, DictTypeVO } from '@/api/system/dict/type/types';
+import { addDateRange } from '@/utils/ruoyi';
+import { UserForm } from '@/api/system/user/types.js';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const initFormData = {
+  userId: undefined,
+  deptId: undefined,
+  userName: '',
+  nickName: undefined,
+  password: '',
+  phonenumber: undefined,
+  email: undefined,
+  sex: undefined,
+  status: '0',
+  remark: '',
+  postIds: [],
+  roleIds: []
+};
 
-const typeList = ref<DictTypeVO[]>([]);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
-
-const dictFormRef = ref<ElFormInstance>();
-const queryFormRef = ref<ElFormInstance>();
-
-const dialog = reactive<DialogOption>({
+export default {
+  name: 'Student',
+  data() {
+    return {
+      typeList: [],
+      loading: true,
+      showSearch: true,
+      ids: [],
+      single: true,
+      multiple: true,
+      total: 0,
+      dateRange: ['', ''],
+      dialog: {
         visible: false,
         title: ''
-});
-
-const initFormData: DictTypeForm = {
-  dictId: undefined,
-  dictName: '',
-  dictType: '',
-  remark: ''
-};
-const data = reactive<PageData<DictTypeForm, DictTypeQuery>>({
+      },
       form: { ...initFormData },
       queryParams: {
         pageNum: 1,
@@ -149,98 +156,99 @@ const data = reactive<PageData<DictTypeForm, DictTypeQuery>>({
         dictName: [{ required: true, message: '学生名称不能为空', trigger: 'blur' }],
         dictType: [{ required: true, message: '学生类型不能为空', trigger: 'blur' }]
       }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询学生类型列表 */
-const getList = () => {
-  loading.value = true;
-  listType(proxy?.addDateRange(queryParams.value, dateRange.value)).then((res) => {
-    typeList.value = res.rows;
-    total.value = res.total;
-    loading.value = false;
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    /** 查询学生类型列表 */
+    getList() {
+      this.loading = true;
+      listType(addDateRange(this.queryParams, this.dateRange)).then((res) => {
+        this.typeList = res.rows;
+        this.total = res.total;
+        this.loading = false;
       });
-};
-/** 取消按钮 */
-const cancel = () => {
+    },
+    cancel() {
       reset();
-  dialog.visible = false;
-};
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  dictFormRef.value?.resetFields();
-};
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
-};
-/** 重置按钮操作 */
-const resetQuery = () => {
-  dateRange.value = ['', ''];
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-/** 新增按钮操作 */
-const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加学生类型';
-};
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: DictTypeVO[]) => {
-  ids.value = selection.map((item) => item.dictId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-/** 修改按钮操作 */
-const handleUpdate = async (row?: DictTypeVO) => {
-  reset();
-  const dictId = row?.dictId || ids.value[0];
+      this.dialog.visible = false;
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = { ...initFormData };
+      this.$nextTick(() => {
+        this.$refs.dictFormRef?.resetFields();
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = ['', ''];
+      this.$refs.queryFormRef?.resetFields();
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.dialog.visible = true;
+      this.dialog.title = '添加学生类型';
+    },
+    /** 多选框选中数据 */
+    handleSelectionChange(selection: DictTypeVO[]) {
+      this.ids = selection.map((item) => item.dictId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 修改按钮操作 */
+    async handleUpdate (row) {
+      this.reset();
+      const dictId = row?.dictId || this.ids.value[0];
       const res = await getType(dictId);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改学生类型';
-};
-/** 提交按钮 */
-const submitForm = () => {
-  dictFormRef.value?.validate(async (valid: boolean) => {
+      Object.assign(this.form, res.data);
+      this.dialog.visible = true;
+      this.dialog.title = '修改学生类型';
+    },
+    /** 提交按钮 */
+    async submitForm() {
+      this.$refs.dictFormRef?.validate(async (valid) => {
         if (valid) {
-      form.value.dictId ? await updateType(form.value) : await addType(form.value);
-      proxy?.$modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      getList();
+          this.form.dictId ? await updateType(this.form) : await addType(this.form);
+          ElMessage({
+            type: 'success',
+            message: '操作成功'
+          });
+          this.dialog.visible = false;
+          this.getList();
         }
       });
-};
-/** 删除按钮操作 */
-const handleDelete = async (row?: DictTypeVO) => {
-  const dictIds = row?.dictId || ids.value;
-  await proxy?.$modal.confirm('是否确认删除学生编号为"' + dictIds + '"的数据项？');
-  await delType(dictIds);
-  getList();
-  proxy?.$modal.msgSuccess('删除成功');
-};
-/** 导出按钮操作 */
-const handleExport = () => {
-  proxy?.download(
-    'system/dict/type/export',
-    {
-      ...queryParams.value
     },
-    `dict_${new Date().getTime()}.xlsx`
-  );
-};
-/** 刷新缓存按钮操作 */
-const handleRefreshCache = async () => {
-  await refreshCache();
-  proxy?.$modal.msgSuccess('刷新成功');
-  useDictStore().cleanDict();
-};
+    /** 删除按钮操作 */
+    async handleDelete (row) {
+      const dictIds = row?.dictId || this.ids.value;
+      await this.$confirm('是否确认删除学生编号为"' + dictIds + '"的数据项？');
+      await delType(dictIds);
+      this.getList();
+      this.$message({
+        type: 'success',
+        message: '删除成功'
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
 
-onMounted(() => {
-  getList();
-});
+    },
+    /** 刷新缓存按钮操作 */
+    async handleRefreshCache () {
+      await refreshCache();
+      this.$message.success('刷新成功');
+      useDictStore().cleanDict();
+    }
+  }
+};
 </script>