remuneration/src/views/salary/solution/salarySolutionParameter/index.vue

<template>
  <div>
    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch">
      <template #button>
        <m-button type="primary" icon="el-icon-plus" plain @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"
      @page-change="onPageChange"
    >
      <template #actions="{ row }">
        <m-button text type="primary" @click="onEdit(row)" size="small">编辑</m-button>
        <m-button text type="danger" @click="onDelete(row)" size="small">删除</m-button>
      </template>
    </m-table>
    <config-edit ref="editRefs" @refresh="onInit"></config-edit>
  </div>
</template>

<script>
import ConfigEdit from './configEdit'
import {
  getConfigPage,
  getConfigCateGories,
  deleteConfig,
  getConfig
} from '@/api/salary'
export default {
  name: 'salary-config',
  components: { ConfigEdit },
  data () {
    return {
      searchItems: [
        { label: '关键词', prop: 'keyword', type: 'input', option: { placeholder: '请输入关键词' } },
        {
          label: '分类',
          prop: 'category',
          type: 'autocomplete',
          option: {
            clearable: true,
            placeholder: '请输入分类',
            fetchSuggestions: this.fetchSuggestions
          }
        }
      ],
      searchValues: {},
      headers: [
        { label: '配置名称', prop: 'name' },
        { 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
    }
  },
  mounted () {
    this.$emit('mounted')
  },
  methods: {
    async onInit () {
      this.loading = true
      try {
        const { data } = await getConfigPage({
          ...this.searchValues,
          ...this.pageInfo,
          history: 0
        })
        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.onInit()
    },
    onAdd () {
      this.$refs.editRefs.open()
    },
    async onEdit (item) {
      try {
        const { data } = await getConfig(item.calculateConfigurationId)
        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.onInit()
        } catch (error) {
          this.$message.error(error)
        }
      }).catch(() => {})
    },
    onPageChange (index) {
      this.pageInfo.current = index
      this.onInit()
    },
    onHistory (row) {
      this.$refs.configHistoryRefs.open(row)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>