Signed-off-by: chy <chy@163.com>

src/views/system/rank/index.vue

@@ -0,0 +1,232 @@
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      v-model:page="tablePage"
+      v-model:search="tableSearch"
+      :table-loading="loading"
+      :data="tableData"
+      :option="tableOption"
+      :before-open="beforeOpen"
+      :permission="permission"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @row-save="rowSave"
+      @row-update="rowUpdate"
+      @row-del="rowDel"
+      @refresh-change="getTableData"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    >
+      <template #menu-left="{ size }">
+        <el-button
+          type="success"
+          plain
+          :size="size"
+          icon="el-icon-download"
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:rank:export']"
+          >导出</el-button
+        >
+      </template>
+      <template #status="scope">
+        <dict-tag
+          v-if="scope.row.status !== undefined"
+          :type="DICT_TYPE.COMMON_STATUS"
+          :value="scope.row.status"
+        />
+      </template>
+    </avue-crud>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as RankApi from '@/api/system/rank'
+import { CommonStatusEnum } from '@/utils/constants'
+
+defineOptions({ name: 'SystemRank' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { getCurrPermi } = useCrudPermi()
+
+const loading = ref(true) // 列表的加载中
+const tableOption = reactive({
+  align: 'center',
+  headerAlign: 'center',
+  searchMenuSpan: 6,
+  searchMenuPosition: 'left',
+  labelSuffix: ' ',
+  span: 12,
+  dialogWidth: '50%',
+  column: {
+    id: {
+      label: '职级编号',
+      display: false,
+      width: 90
+    },
+    name: {
+      label: '职级名称',
+      search: true,
+      minWidth: 90,
+      rules: [{ required: true, message: '职级名称不能为空', trigger: 'blur' }]
+    },
+    sort: {
+      label: '职级顺序',
+      width: 90,
+      rules: [{ required: true, message: '职级顺序不能为空', trigger: 'blur' }]
+    },
+    status: {
+      label: '状态',
+      search: true,
+      type: 'select',
+      width: 90,
+      dicData: getIntDictOptions(DICT_TYPE.COMMON_STATUS),
+      rules: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+      value: CommonStatusEnum.ENABLE
+    },
+
+    createTime: {
+      label: '创建时间',
+      searchRange: true,
+      display: false,
+      type: 'datetime',
+      width: 180,
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间',
+      formatter: (row, val, value, column) => {
+        return dateFormatter(row, column, val)
+      }
+    },
+    remark: {
+      label: '职级备注',
+      type: 'textarea',
+      minRows: 2,
+      maxRows: 4,
+      minWidth: 150,
+      span: 24
+    }
+  }
+}) //表格配置
+const tableForm = ref<{ id?: number }>({})
+const tableData = ref([])
+const tableSearch = ref({})
+const tablePage = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+const exportLoading = ref(false) // 导出的加载中
+const permission = getCurrPermi(['system:rank'])
+const crudRef = ref()
+
+useCrudHeight(crudRef)
+
+/** 查询列表 */
+const getTableData = async () => {
+  loading.value = true
+  let searchObj = {
+    ...tableSearch.value,
+    pageNo: tablePage.value.currentPage,
+    pageSize: tablePage.value.pageSize
+  }
+  for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
+  try {
+    const data = await RankApi.getRankPage(searchObj)
+    tableData.value = data.list
+    tablePage.value.total = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const searchChange = (params, done) => {
+  tablePage.value.currentPage = 1
+  getTableData().finally(() => {
+    done()
+  })
+}
+
+/** 清空按钮操作 */
+const resetChange = () => {
+  searchChange({}, () => {})
+}
+
+const sizeChange = (pageSize) => {
+  tablePage.value.pageSize = pageSize
+  resetChange()
+}
+
+const currentChange = (currentPage) => {
+  tablePage.value.currentPage = currentPage
+  getTableData()
+}
+
+/** 表单打开前 */
+const beforeOpen = async (done, type) => {
+  if (['edit', 'view'].includes(type) && tableForm.value.id) {
+    tableForm.value = await RankApi.getRank(tableForm.value.id)
+  }
+  done()
+}
+
+/** 新增操作 */
+const rowSave = async (form, done, loading) => {
+  let bool = await RankApi.createRank(form).catch(() => false)
+  if (bool) {
+    message.success(t('common.createSuccess'))
+    resetChange()
+    done()
+  } else loading()
+}
+
+/** 编辑操作 */
+const rowUpdate = async (form, index, done, loading) => {
+  let bool = await RankApi.updateRank(form).catch(() => false)
+  if (bool) {
+    message.success(t('common.updateSuccess'))
+    getTableData()
+    done()
+  } else loading()
+}
+
+/** 删除按钮操作 */
+const rowDel = async (form, index) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await RankApi.deleteRank(form.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getTableData()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    let searchObj = { ...tableSearch.value }
+    for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
+    const data = await RankApi.exportRank(searchObj)
+    download.excel(data, '职级列表.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getTableData()
+})
+</script>