薪酬级别

src/api/salary.js

@@ -115,3 +115,23 @@ export function uploadSalaryCalculateFiles (data) {
 export function getSalaryCalculateFiles (data) {
   return http.post('/performance/file/list', data)
 }
+
+// 固定薪资 薪酬级别列表
+export function getSalaryFixedLevelList () {
+  return http.post('/salary/level/manage/list')
+}
+
+// 固定薪资 上传
+export function uploadSalaryFixedLevel (data) {
+  return http.upload('/salary/level/manage/upload', data)
+}
+
+// 固定薪资 下载模板
+export function downloadSalaryFixedLevel (data) {
+  return http.download('/salary/level/manage/tmplate/export', data)
+}
+
+// 固定薪资 导出数据
+export function exportSalaryFixedLevel (data) {
+  return http.download('/salary/level/manage/download/export', data)
+}

src/views/salaryFixed/salaryFixedRules/index.vue

@@ -1,23 +1,15 @@
 <template>
   <div class="pa-3 white">
-    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
-    <m-table
-      v-loading="loading"
-      :items="items"
-      :headers="headers"
-      :page-size="pageInfo.size"
-      :page-current="pageInfo.current"
-      :total="total"
-      @page-change="onPageChange"
-    >
-      <template #card-tools>
-        <m-button type="orange" icon="el-icon-plus" @click="onAdd">新增</m-button>
-      </template>
-      <template #actions="{ row }">
-        <m-button type="primary" text @click="onEdit(row)">编辑</m-button>
-        <m-button type="danger" text @click="onDelete(row)">删除</m-button>
-      </template>
-    </m-table>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane
+        v-for="item in items"
+        :key="item.name"
+        :label="item.label"
+        :name="item.name"
+      >
+        <component :is="item.component" :ref="item.name" :label="item.label" @hook:mounted="onComponentMounted"></component>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
@@ -26,75 +18,40 @@ export default {
   name: 'salaryFixedRules',
   data () {
     return {
-      searchItems: [
-        {
-          label: '名称',
-          prop: 'name',
-          type: 'input',
-          options: {
-            placeholder: '请输入名称'
-          }
-        }
-      ],
-      searchValues: {
-        name: null
-      },
-      headers: [
-        { label: '名称', prop: 'name' },
-        { label: '状态', prop: 'status' },
-        { label: '操作', prop: 'actions', fixed: 'right', width: 300 }
-      ],
-      items: [],
-      total: 0,
-      pageInfo: {
-        current: 1,
-        size: 10
-      },
-      loading: false
+      activeName: '',
+      items: []
     }
   },
   created () {
-    this.onInit()
+    this.items = this.$route.meta.roles.filter(e => e.hidden === 1).sort((a, b) => a.sort - b.sort).map(e => {
+      return {
+        name: e.name,
+        label: e.label,
+        component: () => import(`./${e.component}/index.vue`)
+      }
+    })
+    if (this.$route.query.name) {
+      this.activeName = this.$route.query.name
+    } else {
+      this.activeName = this.items[0].name
+    }
+  },
+  computed: {
+    name () {
+      return this.items.find(e => e.name === this.activeName)?.label ?? ''
+    }
   },
   methods: {
-    async onInit () {
-      this.loading = true
-      try {
-        // const { data } = await ApiName()
-        // this.items = data.records
-        // this.total = data.total
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
-    },
-    onAdd () {
-      this.$refs.fixedSalaryRulesRefs.open()
-    },
-    onEdit (item) {
-      this.$refs.fixedSalaryRulesRefs.open(item)
-    },
-    onDelete (row) {
-      this.$confirm('确定删除吗？', '提示')
-        .then(async () => {
-          try {
-            // await ApiName({ id: row.id })
-            this.$message.success('删除成功')
-            this.onInit()
-          } catch (error) {
-            this.$message.error(error)
-          }
-        })
-        .catch(_ => {})
-    },
-    onSearch () {
-      this.pageInfo.current = 1
-      this.onInit()
+    onComponentMounted () {
+      this.$nextTick(() => {
+        this.$refs[this.activeName][0].onInit(this.name)
+      })
     },
-    onPageChange (index) {
-      this.pageInfo.current = index
-      this.onInit()
+    handleClick () {
+      this.$router.push(`${this.$route.path}?name=${this.activeName}`)
+      this.$nextTick(() => {
+        this.$refs[this.activeName][0].onInit(this.name)
+      })
     }
   }
 }

src/views/salaryFixed/salaryFixedRules/salaryFixedRulesLevel/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="white">
+    <m-table
+      :card-title="name"
+      v-loading="loading"
+      :items="items"
+      :headers="headers"
+    >
+      <template #card-tools>
+        <el-upload class="el-button pa-0" action="#" :show-file-list="false" :http-request="onImport">
+          <m-button type="orange" size="small" icon="el-icon-upload2" :loading="importLoading">上传</m-button>
+        </el-upload>
+        <m-button type="orange" size="small" icon="el-icon-download" @click="onDownload" :loading="downloadLoading">下载模板</m-button>
+        <m-button type="orange" size="small" icon="el-icon-download" @click="onExport" :loading="exportLoading">导出</m-button>
+      </template>
+    </m-table>
+  </div>
+</template>
+
+<script>
+import {
+  getSalaryFixedLevelList,
+  uploadSalaryFixedLevel,
+  downloadSalaryFixedLevel,
+  exportSalaryFixedLevel
+} from '@/api/salary'
+import { downloadFile } from '@/utils'
+export default {
+  name: 'salaryFixedRulesLevel',
+  data () {
+    return {
+      name: null,
+      headers: [],
+      items: [],
+      loading: false,
+      importLoading: false,
+      downloadLoading: false,
+      exportLoading: false
+    }
+  },
+  methods: {
+    async onInit (name) {
+      if (name) {
+        this.name = name
+      }
+      this.loading = true
+      try {
+        const { data } = await getSalaryFixedLevelList()
+        this.headers = this.assignHeaders(data.columnTitleVoList)
+        this.items = data.datas
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    assignHeaders (headers) {
+      return headers.map(e => {
+        return {
+          children: e.children ? this.assignHeaders(e.children) : undefined,
+          label: e.columnName,
+          prop: e.columnValue,
+          align: 'center'
+        }
+      })
+    },
+    async onImport (response) {
+      const param = new FormData()
+      param.append('file', response.file)
+      this.importLoading = true
+      try {
+        await uploadSalaryFixedLevel(param)
+        this.$message.success('导入成功')
+        this.onInit()
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.importLoading = false
+      }
+    },
+    async onDownload () {
+      this.downloadLoading = true
+      try {
+        const { data, name } = await downloadSalaryFixedLevel()
+        downloadFile(data, name)
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.downloadLoading = false
+      }
+    },
+    async onExport () {
+      this.exportLoading = true
+      try {
+        const { data, name } = await exportSalaryFixedLevel()
+        downloadFile(data, name)
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.exportLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  /* 自定义样式 */
+</style>