admin-sjzx/src/views/system/workflow/model/index.vue

<!--流程模型表单页面-->
<template>
  <div class='default-main'>
    <TableHeader>
      <template v-slot:select>
        <el-form-item label='模型名称'>
          <el-input
              v-model='tableStore.table.params.searchKey'
              clearable
          />
        </el-form-item>
        <el-form-item label='流程类别'>
          <el-select v-model='tableStore.table.params.category' clearable>
            <el-option
                v-for='item in categoryList'
                :key='item.id'
                :label='item.name'
                :value='item.code'
            />
          </el-select>
        </el-form-item>
      </template>
      <template v-slot:operation>
        <el-button type='primary' class='ml10' :icon='Plus' @click='add'>新增</el-button>
      </template>
    </TableHeader>
    <!--表格-->
    <Table ref='tableRef' isGroup></Table>
    <model-popup ref='modelPopup' />
  </div>

</template>
<script lang='ts' setup>
import { Plus } from '@element-plus/icons-vue'
import TableHeader from '@/components/table/header/index.vue'
import Table from '@/components/table/index.vue'
import TableStore from '@/utils/tableStore'
import { deleteWFForm, getFormById } from '@/api/process-boot/workflow/form'
import { nextTick, onMounted, provide, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useDictData } from '@/stores/dictData'
import { useRouter } from 'vue-router'
import ModelPopup from '@/views/system/workflow/model/modelPopup.vue'

const { push } = useRouter()
const dictData = useDictData()
const categoryList = dictData.getBasicData('flow_category')
const modelPopup = ref()



const tableStore = new TableStore({
  url: '/workflow-boot/flw/model/page',
  method: 'POST',
  column: [
    { title: '序号', type: 'seq', width: 80 },
    { title: '流程名称', minWidth: '160', field: 'name' },
    {
      title: '流程分类', minWidth: '160', field: 'category',
      formatter: (row: any) => {
        return categoryList.filter(item => item.code === row.cellValue)[0].name
      }
    },
    {
      title: '模型版本', minWidth: '120', field: 'versionCode', type: 'html',
      formatter: (obj: any) => {
        const val = obj.row.versionCode
        if (val) {
          return `<a href='javascript:void(0);'  style='color: #409EFF;text-decoration: none'>V${val}</a>`
        } else {
          return ''
        }
      }
    },
    {
      title: '表单类型', minWidth: '160', field: 'formType',
      formatter: (obj: any) => {
        const val = obj.row.formType
        if (val == 'DESIGN') {
          return '系统表单'
        } else {
          return ''
        }
      }
    },
    { title: '排序码', minWidth: '160', field: 'sortCode' },
    { title: '状态', minWidth: '160', field: 'modelStatus' },
    {
      title: '操作',
      align: 'center',
      render: 'buttons',
      minWidth: '230',
      fixed: 'right',
      buttons: [
        {
          name: 'view',
          title: '编辑',
          type: 'primary',
          icon: 'el-icon-EditPen',
          render: 'basicButton',
          click: row => {
            modelPopup.value.open('修改模型', row)
          }
        },
        {
          name: 'update',
          title: '设计',
          type: 'primary',
          icon: 'el-icon-EditPen',
          render: 'basicButton',
          click: row => {
            push(`/admin/model/configSteps?id=${row.id}`)
          }
        },
        {
          name: 'deploy',
          title: '部署',
          type: 'primary',
          icon: 'el-icon-EditPen',
          render: 'basicButton',
          click: row => {
            push(`/admin/form/formDesigner?id=${row.id}`)
          }
        },
        {
          name: 'deploy',
          title: '预览流程',
          type: 'primary',
          icon: 'el-icon-EditPen',
          render: 'basicButton',
          click: row => {
            push(`/admin/form/formDesigner?id=${row.id}`)
          }
        },
        {
          name: 'deploy',
          title: '历史版本',
          type: 'primary',
          icon: 'el-icon-EditPen',
          render: 'basicButton',
          click: row => {
            push(`/admin/form/formDesigner?id=${row.id}`)
          }
        },
        {
          name: 'update',
          title: '删除',
          type: 'danger',
          icon: 'el-icon-Delete',
          render: 'confirmButton',
          popconfirm: {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            confirmButtonType: 'danger',
            title: '确定删除吗？'
          },
          click: row => {
            deleteWFForm(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]
      }
    }

  }
})
//新增表单
const add = () => {
  modelPopup.value.open('新增模型')
}

tableStore.table.params.searchKey = ''
tableStore.table.params.category = ''
provide('tableStore', tableStore)
onMounted(() => {
  // 加载数据
  tableStore.index()
})
</script>
<style scoped>

</style>