remuneration/src/views/humanResources/welfare/welfareList.vue

<template>
  <div>
    <m-search ref="search" :items="searchItems" v-model="searchValues" @search="onSearch" class="mb-3">
      <template #button>
        <m-button type="primary" icon="el-icon-plus" @click="onAdd">新增</m-button>
      </template>
    </m-search>
    <m-table
      :items="items"
      :headers="headers"
      :loading="loading"
      :total="total"
      :page-size="pageInfo.size"
      :page-current="pageInfo.current"
      @page-change="onPageChange"
    >
      <template #title="{ row }">
        {{ row.subsidyPersonnelCategory?.title ?? '找不到该项福利' }}
      </template>
      <template #actions="{ row }">
        <m-button text type="primary" size="small" @click="onEdit(row)">编辑</m-button>
        <m-button text type="danger" size="small" @click="onDelete(row)">删除</m-button>
      </template>
    </m-table>
    <welfareListEdit ref="welfareListEditRefs" :title="title" @refresh="init"></welfareListEdit>
  </div>
</template>

<script>
import {
  getWelfarePage,
  getWelfareDetail,
  getWelfareCategoryPage,
  deleteWelfare
} from '@/api/salary'
import welfareListEdit from './welfareListEdit.vue'
export default {
  name: 'welfare-list',
  components: {
    welfareListEdit
  },
  data () {
    return {
      title: '',
      subsidyPersonnelCategoryIdItems: [],
      searchValues: {},
      headers: [
        {
          label: '福利名称',
          prop: 'subsidyName'
        },
        {
          label: '福利类别',
          prop: 'title'
        },
        {
          label: '金额（元 / 月）',
          prop: 'subsidySalary'
        },
        {
          label: '描述',
          prop: 'subsidyTag'
        },
        {
          label: '创建时间',
          prop: 'createDate'
        },
        {
          label: '操作',
          prop: 'actions'
        }
      ],
      items: [],
      loading: false,
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      },
      orders: [],
      loadingSelect: false
    }
  },
  computed: {
    searchItems () {
      return [
        {
          label: '福利名称',
          prop: 'subsidyName',
          type: 'input',
          option: {
            placeholder: '请输入福利名称'
          }
        },
        {
          label: '福利类别',
          prop: 'subsidyPersonnelCategoryId',
          type: 'select',
          handles: {
            focus: (v) => {
              if (!this.searchValues.subsidyPersonnelCategoryId) {
                this.$refs.search.$refs.select.remoteMethod(null)
              }
            }
          },
          option: {
            ref: 'select',
            placeholder: '请输入福利类别',
            labelText: 'title',
            labelValue: 'subsidyPersonnelCategoryId',
            valueKey: 'subsidyPersonnelCategoryId',
            filterable: true,
            remote: true,
            remoteMethod: this.remoteMethod,
            defaultFirstOption: true,
            loading: this.loadingSelect,
            items: this.subsidyPersonnelCategoryIdItems
          }
        }
      ]
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await getWelfarePage({
          subsidyCategory: this.searchValues,
          page: {
            ...this.pageInfo,
            orders: this.orders
          }
        })
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onSearch () {
      this.pageInfo.current = 1
      this.init()
    },
    onPageChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    async remoteMethod (str) {
      try {
        this.loadingSelect = true
        const { data } = await getWelfareCategoryPage({
          page: {
            current: 1,
            size: 10
          },
          entity: {
            title: str || null
          }
        })
        this.subsidyPersonnelCategoryIdItems = data.records
      } catch (error) {
        this.subsidyPersonnelCategoryIdItems = []
        this.$message.error(error)
      } finally {
        this.loadingSelect = false
      }
    },
    onAdd () {
      this.title = '新增福利'
      this.$refs.welfareListEditRefs.open({
        subsidyPersonnelCategoryId: null,
        subsidySalary: null,
        subsidyTag: null,
        subsidyCheck: 0,
        subsidyName: null
      })
    },
    async onEdit (item) {
      this.title = '编辑福利'
      try {
        const { data } = await getWelfareDetail({ subsidyCategoryId: item.subsidyCategoryId })
        this.$refs.welfareListEditRefs.open({
          subsidyCategoryId: data.subsidyCategoryId,
          subsidyPersonnelCategoryId: data.subsidyPersonnelCategoryId,
          subsidySalary: data.subsidySalary,
          subsidyTag: data.subsidyTag,
          subsidyCheck: data.subsidyCheck,
          subsidyName: data.subsidyName
        })
      } catch (error) {
        this.$message.error(error)
      }
    },
    onDelete (item) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteWelfare({ id: item.subsidyCategoryId })
          this.$message.success('删除成功')
          this.init()
        } catch (error) {
          this.$message.error(error)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>