薪酬计算配置

src/api/salary.js

@@ -0,0 +1,33 @@
+import http from '@/utils/request'
+
+// 薪酬计算
+
+// 计算配置 - 分页查询
+export function getConfigPage (data) {
+  return http.get('/configurations/page', data)
+}
+
+// 计算配置 - 获取分类字典
+export function getConfigCateGories (data) {
+  return http.get('/configurations/categories', data)
+}
+
+// 计算配置 - 删除配置
+export function deleteConfig (id) {
+  return http.delete(`/configurations/${id}`)
+}
+
+// 计算配置 - 查新配置
+export function getConfig (id) {
+  return http.get(`/configurations/${id}`)
+}
+
+// 计算配置 - 新增配置
+export function addConfig (param) {
+  return http.post('/configurations', param)
+}
+
+// 计算配置 - 更新配置
+export function updateConfig (param) {
+  return http.put('/configurations', param)
+}

src/components/AutoComponents/MForm/index.vue

@@ -24,6 +24,17 @@
             </template>
           </el-input>
         </template>
+        <template v-if="item.type === 'autocomplete'">
+          <el-autocomplete
+            v-model="query[item.prop]"
+            v-bind="item.options"
+            v-on="item.handles"
+          >
+            <template v-for="slot in item.slots" :slot="scope">
+              <slot :name="`${item.prop}.${slot}`" :scope="scope"></slot>
+            </template>
+          </el-autocomplete>
+        </template>
         <template v-if="item.type === 'number'">
           <el-input-number v-bind="item.options" v-on="item.handles" v-model="query[item.prop]"></el-input-number>
         </template>

src/components/AutoComponents/MSearch/index.vue

@@ -19,6 +19,7 @@
           v-if="item.type === 'input'"
           v-model="form[item.prop]"
           v-bind="item.option"
+          v-on="item.handles"
         ></el-input>
 
         <!-- 下拉框 -->
@@ -26,20 +27,33 @@
           v-if="item.type === 'select'"
           v-model="form[item.prop]"
           v-bind="item.option"
+          v-on="item.handles"
         >
           <el-option
-            v-for="option in item.options"
+            v-for="option in item.option.items"
             :key="option.value"
             :label="option.label"
             :value="option.value"
           ></el-option>
         </el-select>
 
+        <el-autocomplete
+          v-if="item.type === 'autocomplete'"
+          v-model="form[item.prop]"
+          v-bind="item.option"
+          v-on="item.handles"
+        >
+          <template v-for="slot in item.slots" :slot="scope">
+            <slot :name="`${item.prop}.${slot}`" :scope="scope"></slot>
+          </template>
+        </el-autocomplete>
+
         <!-- 时间选择器 -->
         <el-date-picker
           v-if="item.type === 'date'"
           v-model="form[item.prop]"
           v-bind="item.option"
+          v-on="item.handles"
         ></el-date-picker>
 
         <!-- 其他类型可以根据需要扩展 -->
@@ -93,7 +107,7 @@ export default {
     },
     onReset () {
       this.$refs.form.resetFields()
-      this.$emit('reset', this.form)
+      this.$emit('search', this.form)
     }
   }
 }

src/utils/request.js

@@ -114,6 +114,12 @@ const http = {
       }
     })
   },
+  delete (url, params) {
+    return service.delete(url)
+  },
+  put (url, params) {
+    return service.put(url, params)
+  },
   formData (url, params) {
     return service.post(url, params, {
       timeout: 600000,

src/views/salary/config/configEdit.vue

@@ -0,0 +1,136 @@
+<template>
+  <m-dialog ref="editDialog" v-bind="$attrs" @sure="handleSaveEdit">
+    <m-form ref="formRefs" :items="items" v-model="query"></m-form>
+  </m-dialog>
+</template>
+
+<script>
+import {
+  getConfigCateGories,
+  addConfig,
+  updateConfig
+} from '@/api/salary'
+export default {
+  name: 'config-edit',
+  data () {
+    return {
+      query: {},
+      items: [
+        {
+          label: '配置名称',
+          prop: 'name',
+          type: 'input',
+          options: {
+            placeholder: '请输入配置名称'
+          },
+          rules: [
+            { required: true, message: '请输入配置名称', trigger: 'blur' }
+          ]
+        },
+        {
+          label: '数值',
+          prop: 'value',
+          type: 'input',
+          options: {
+            placeholder: '请输入数值'
+          },
+          rules: [
+            { required: true, message: '请输入数值', trigger: 'blur' }
+          ]
+        },
+        {
+          label: '月份',
+          prop: 'month',
+          type: 'datePicker',
+          options: {
+            type: 'month',
+            placeholder: '请选择月份',
+            format: 'yyyy 年 MM 月',
+            valueFormat: 'yyyy-MM'
+          },
+          rules: [
+            { required: true, message: '请选择月份', trigger: 'change' }
+          ]
+        },
+        {
+          label: '分类',
+          prop: 'category',
+          type: 'autocomplete',
+          options: {
+            placeholder: '请选择分类',
+            fetchSuggestions: this.fetchSuggestions,
+            handles: {
+              focus () {
+                console.log('focus')
+              }
+            }
+          },
+          rules: [
+            { required: true, message: '请选择分类', trigger: 'change' }
+          ]
+        },
+        {
+          label: '描述',
+          prop: 'tag',
+          type: 'input',
+          options: {
+            type: 'textarea',
+            placeholder: '请输入描述'
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    open (item) {
+      if (!item) {
+        this.initQuery()
+      } else {
+        this.query = { ...item }
+      }
+      this.$refs.editDialog.open()
+    },
+    initQuery () {
+      this.query = this.items.reduce((res, item) => {
+        res[item.prop] = null
+        return res
+      }, {})
+    },
+    async fetchSuggestions (category, cb) {
+      try {
+        const { data } = await getConfigCateGories({ category })
+        cb(data.map(e => {
+          return {
+            value: e
+          }
+        }))
+      } catch (error) {
+        const empty = []
+        cb(empty)
+        this.$message.error(error)
+      }
+    },
+    handleSaveEdit () {
+      this.$refs.formRefs.validate(async valid => {
+        if (!valid) {
+          return
+        }
+        console.log(this.query)
+        const subApi = this.query.calculateConfigurationId ? updateConfig : addConfig
+        try {
+          await subApi(this.query)
+          this.$message.success('保存成功')
+          this.$refs.editDialog.close()
+          this.$emit('refresh')
+        } catch (error) {
+          this.$message.error(error)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/salary/config/index.vue

@@ -1,12 +1,144 @@
 <template>
-  <div>
-
+  <div class="white pa-3">
+    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch">
+      <template #button>
+        <m-button type="primary" icon="el-icon-plus" @click="onAdd">新增</m-button>
+      </template>
+    </m-search>
+    <m-table
+      v-loading="loading"
+      row-key="calculateConfigurationId"
+      :items="items"
+      :headers="headers"
+      :page-size="pageInfo.size"
+      :page-current="pageInfo.current"
+      :total="total"
+      :default-sort="{ prop: 'sort', order: 'ascending' }"
+      @page-change="onPageChange"
+    >
+      <template #actions="{ row }">
+        <m-button text type="primary" @click="onEdit(row)">编辑</m-button>
+        <m-button text type="danger" @click="onDelete(row)">删除</m-button>
+      </template>
+    </m-table>
+    <config-edit ref="editRefs" :title="title" @refresh="init"></config-edit>
   </div>
 </template>
 
 <script>
+import ConfigEdit from './configEdit'
+import {
+  getConfigPage,
+  getConfigCateGories,
+  deleteConfig,
+  getConfig
+} from '@/api/salary'
 export default {
-  name: 'salary-config'
+  name: 'salary-config',
+  components: { ConfigEdit },
+  data () {
+    return {
+      title: '',
+      searchItems: [
+        { label: '关键词', prop: 'keyword', type: 'input', option: { placeholder: '请输入关键词' } },
+        {
+          label: '分类',
+          prop: 'category',
+          type: 'autocomplete',
+          option: {
+            placeholder: '请输入分类',
+            fetchSuggestions: this.fetchSuggestions
+          }
+        }
+      ],
+      searchValues: {},
+      headers: [
+        { label: '配置名称', prop: 'name' },
+        { label: '月份', prop: 'month' },
+        { label: '数值', prop: 'value' },
+        { label: '分类', prop: 'category' },
+        { label: '描述', prop: 'tag' },
+        { label: '创建时间', prop: 'createDate' },
+        { label: '操作', prop: 'actions' }
+      ],
+      items: [],
+      loading: false,
+      pageInfo: {
+        size: 10,
+        current: 1
+      },
+      total: 0
+    }
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    async init () {
+      this.loading = true
+      try {
+        const { data } = await getConfigPage({
+          ...this.searchValues,
+          ...this.pageInfo
+        })
+        this.items = data.records
+        this.total = data.total
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async fetchSuggestions (category, cb) {
+      try {
+        const { data } = await getConfigCateGories({ category })
+        cb(data.map(e => {
+          return {
+            value: e
+          }
+        }))
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    onSearch () {
+      this.pageInfo.current = 1
+      this.init()
+    },
+    onAdd () {
+      this.title = '新增配置'
+      this.$refs.editRefs.open()
+    },
+    async onEdit (item) {
+      try {
+        const { data } = await getConfig(item.calculateConfigurationId)
+
+        this.title = '编辑配置'
+        this.$refs.editRefs.open(data)
+      } catch (error) {
+        this.$message.error(error)
+      }
+    },
+    onDelete (item) {
+      this.$confirm('确定删除该配置吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          await deleteConfig(item.calculateConfigurationId)
+          this.$message.success('删除成功')
+          this.init()
+        } catch (error) {
+          this.$message.error(error)
+        }
+      }).catch(() => {})
+    },
+    onPageChange (index) {
+      this.pageInfo.current = index
+      this.init()
+    }
+  }
 }
 </script>
 

src/views/system/role/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pa-3 white">
-    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="search" @reset="search">
+    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="search">
       <template #button>
         <m-button type="primary" icon="el-icon-plus" @click="onAdd">
           新增

src/views/system/roster/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch" @reset="onSearch">
+    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch">
       <template #button>
         <m-button type="primary" icon="el-icon-plus" @click="onAdd">新增</m-button>
         <el-upload class="el-button pa-0" action="#" :show-file-list="false" :http-request="onImport">

src/views/system/user/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pa-3 white">
-    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="search" @reset="search">
+    <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="search">
       <template #button>
         <m-button type="primary" icon="el-icon-plus" @click="onAdd">
           新增