
<!--业务服务配置-->
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:service:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="$refs.serviceDialogRef.handleOpen()"
        >新增</el-button>
      </el-col>
    </el-row>
    <j-table
      v-loading="loading"
      :show-selection="false"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      @pagination-change="loadData"
    >
      <el-table-column
        label="操作"
        align="center"
        width="160"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button
            v-hasPermi="['system:service:query']"
            size="mini"
            type="text"
            @click.stop="$refs.serviceDialogRef.handleEdit(row, true)"
          >详情</el-button>
          <el-button
            v-hasPermi="['system:service:edit']"
            size="mini"
            type="text"
            @click.stop="$refs.serviceDialogRef.handleEdit(row)"
          >编辑</el-button>
          <el-button
            v-hasPermi="['system:service:abandon']"
            size="mini"
            type="text"
            @click.stop="handleRemove(row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </j-table>

    <service-dialog ref="serviceDialogRef" @ok="loadData" />
  </div>
</template>
<script>

import JTable from '@/components/Table/index.vue'
import { fetchServicePage, removeService } from '@/api/system/service'
import ServiceDialog from '@/views/system/service/modules/ServiceDialog.vue'

export default {
  components: { JTable, ServiceDialog },
  data() {
    return {
      showSearch: true,
      loading: false,
      tableData: [],
      selected: [],
      columns: [
        { prop: 'serviceName', label: '服务名称', align: 'left' },
        { prop: 'createNickName', label: '创建人', minWidth: 120 },
        { prop: 'createTime', label: '创建时间', minWidth: 160 }
      ],
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    isBatch() {
      return this.selected && this.selected.length > 0
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      fetchServicePage().then(({ data }) => {
        this.tableData = data
      })
    },
    handleSelectionChange(selection) {
      this.selected = selection
    },
    handleBatchRemove() {},
    onDelete(ids) {
      removeService(ids).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.loadData()
      })
    },
    handleRemove(row) {
      this.$modal.confirm('是否删除？').then(() => {
        this.onDelete(row.id)
      }).catch(() => {})
    }
  }
}
</script>
<style scoped lang="scss">

</style>
