admin-sjzx/src/views/system/bpm/category/index.vue

<!--流程分类页面-->
<template>
  <div class='default-main'>
    <TableHeader>
      <template v-slot:select>
        <el-form-item label='流程分类'>
          <el-input
              v-model='tableStore.table.params.searchValue'
              clearable
              placeholder='请输入分类名称'
          />
        </el-form-item>
      </template>
      <template v-slot:operation>
        <el-button type='primary' class='ml10' @click='add' :icon='Plus'>新增</el-button>
      </template>
    </TableHeader>
    <!--表格-->
    <Table ref='tableRef'></Table>
    <!--弹出框-->
    <category-popup ref='categoryPopup' />
  </div>
</template>

<script setup lang='ts'>
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import CategoryPopup from '@/views/system/bpm/category/categoryPopup.vue'
import { deleteCategory } from '@/api/bpm-boot/category'

defineOptions({
  name: 'bpmCategory'
})

const { push } = useRouter()
const categoryPopup = ref()

const tableStore = new TableStore({
  url: '/bpm-boot/bpm/category/list',
  method: 'POST',
  column: [
  { title: '序号',  width: 80,formatter: (row: any) => {
        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
      } },
    { title: '分类名称', field: 'name', minWidth: 130 },
    { title: '分类标识', field: 'code', minWidth: 130 },
    { title: '分类描述', field: 'description', minWidth: 170 },
    { title: '创建时间', field: 'createTime', minWidth: 170 },
    { title: '排序', field: 'sort', width: 170 },
    {
      title: '操作',
      align: 'center',
      minWidth: '150',
      fixed: 'right',
      render: 'buttons',
      buttons: [
        {
          name: 'update',
          title: '编辑',
          type: 'primary',
          icon: 'el-icon-EditPen',
          render: 'basicButton',
          click: row => {
            categoryPopup.value.open('修改流程分类', row)
          }
        },
        {
          name: 'update',
          title: '删除',
          type: 'danger',
          icon: 'el-icon-Delete',
          render: 'confirmButton',
          popconfirm: {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            confirmButtonType: 'danger',
            title: '确定删除吗？'
          },
          click: row => {
            deleteCategory(row.id).then(res => {
              ElMessage.success('删除成功')
              tableStore.index()
            })
          }
        }
      ]
    }
  ],
  beforeSearchFun: () => {
    for (let key in tableStore.table.params) {
      if (tableStore.table.params[key] === '') {
        delete tableStore.table.params[key]
      }
    }

  }
})

onMounted(() => {
  // 加载数据
  tableStore.index()
})
tableStore.table.params.name = ''
provide('tableStore', tableStore)

const add = () => {
  categoryPopup.value.open('新增流程分类')
}

</script>