上传

src/views/SchoolManagement/Set/Comp/SettingArea.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <el-form ref="queryForm" :model="searchForm" label-width="0" inline @submit.prevent>
+      <el-form-item>
+        <el-input
+          v-model="searchForm.name"
+          placeholder="请输入名称"
+          clearable
+          style="width: 180px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">搜索</el-button>
+        <el-button @click="resetQuery">重置</el-button>
+        <el-button type="primary" @click="openForm('create', null)">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="tableList">
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="percentageRate" label="提成比例(%)" />
+      <el-table-column prop="directorName" label="负责人" />
+      <el-table-column prop="startTime" label="开始负责时间" />
+      <el-table-column prop="remark" label="备注" />
+      <el-table-column label="操作">
+        <template #default="{ row }">
+          <el-button type="primary" text @click="openForm('update', row.id)"> 修改 </el-button>
+          <el-button type="danger" text @click="handleDelete(row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      v-model:limit="searchForm.pageSize"
+      v-model:page="searchForm.pageNo"
+      :total="total"
+      @pagination="handleQuery"
+    />
+    <DialogArea ref="areaDialog" @success="handleQuery" />
+  </div>
+</template>
+
+<script setup name="SettingArea">
+import * as AreaApi from '@/api/school/setting/area'
+import DialogArea from './DialogArea.vue'
+
+import { removeNullField } from '@/utils'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const searchForm = ref({
+  name: '',
+  pageNo: 1,
+  pageSize: 20
+})
+
+const total = ref(0)
+const tableList = ref([])
+const loading = ref(false)
+
+function handleQuery() {
+  searchForm.value.pageNo = 1
+  getList()
+}
+function resetQuery() {
+  searchForm.value = {
+    name: '',
+    pageSize: 20,
+    pageNo: 1
+  }
+  getList()
+}
+async function getList() {
+  loading.value = true
+  try {
+    const data = await AreaApi.getAreaPage(removeNullField(searchForm.value))
+    tableList.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const areaDialog = ref()
+function openForm(type, id = null) {
+  areaDialog.value.open(type, id)
+}
+
+async function handleDelete(id) {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await AreaApi.deleteArea(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped></style>