<template>
|
<basic-container>
|
<el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
|
<el-form-item label="模型标识" prop="modelKey">
|
<el-input
|
class="gd-input gray"
|
v-model="searchParams.modelKey"
|
placeholder="请输入"
|
clearable
|
@clear="handleSearch"
|
/>
|
</el-form-item>
|
|
<el-form-item label="模型名称" prop="name">
|
<el-input
|
class="gd-input gray"
|
v-model="searchParams.name"
|
placeholder="请输入"
|
clearable
|
@clear="handleSearch"
|
/>
|
</el-form-item>
|
|
<el-form-item class="gd-search-actions">
|
<el-button :icon="RefreshRight" @click="resetForm"></el-button>
|
<el-button class="search-btn" :icon="Search" @click="handleSearch"></el-button>
|
</el-form-item>
|
</el-form>
|
|
<div class="gd-table-container" v-loading="loading">
|
<div class="gd-table-toolbar">
|
<el-button :icon="Plus" color="#4C34FF" type="primary" @click="handleCreate">
|
创建
|
</el-button>
|
<el-button
|
:icon="Delete"
|
color="#ECECF4"
|
@click="handleBatchDelete"
|
>
|
删除
|
</el-button>
|
</div>
|
|
<div class="gd-table-content gd-table-content-bg">
|
<el-table class="gd-table" :data="list" @selection-change="selectionChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column label="序号" width="80">
|
<template v-slot="{ $index }">
|
{{ $index + 1 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="id" show-overflow-tooltip label="模型主键" />
|
<el-table-column prop="modelKey" show-overflow-tooltip label="模型标识" />
|
<el-table-column prop="name" show-overflow-tooltip label="模型名称" />
|
<el-table-column prop="version" show-overflow-tooltip label="流程版本">
|
<template v-slot="{ row }">
|
<el-tag>v{{ row.version }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="created" show-overflow-tooltip label="创建时间" />
|
<el-table-column prop="lastUpdated" show-overflow-tooltip label="更新时间" />
|
<el-table-column label="操作" class-name="operation-btns" width="200" fixed="right">
|
<template v-slot="{ row }">
|
<el-link type="primary" @click="handleUpdate(row)">配置</el-link>
|
<el-link type="primary" @click="handleDeploy(row)">部署</el-link>
|
<el-link type="primary" @click="handleDelete(row)">删除</el-link>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="gd-pagination-parent">
|
<el-pagination
|
popper-class="gd-select-popper"
|
v-model:current-page="searchParams.current"
|
v-model:page-size="searchParams.size"
|
layout="total, prev, pager, next, sizes"
|
:total="total"
|
@change="getList"
|
/>
|
</div>
|
</div>
|
|
<!-- 流程配置弹框 - designMode -->
|
<FlowConfigDialog
|
v-if="flowConfigDialogVisible && website.design.designMode"
|
|
ref="flowConfigDialogRef"
|
@success="getList"
|
/>
|
|
<!-- 流程配置弹框 - iframe模式 -->
|
<IframeFlowDialog
|
v-if="iframeFlowDialogVisible && !website.design.designMode"
|
v-model="iframeFlowDialogVisible"
|
ref="iframeFlowDialogRef"
|
@success="getList"
|
/>
|
|
<!-- 流程部署弹框 -->
|
<DeployDialog v-if="deployDialogVisible" ref="deployDialogRef" />
|
</basic-container>
|
</template>
|
|
<script setup>
|
import { Search, RefreshRight, Plus, Delete } from '@element-plus/icons-vue'
|
import { onMounted, ref, computed, nextTick, getCurrentInstance } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { useStore } from 'vuex'
|
import { modelList, removeModel } from '@/api/flow/flow'
|
import FlowConfigDialog from './FlowConfigDialog.vue'
|
import IframeFlowDialog from './IframeFlowDialog.vue'
|
import DeployDialog from './DeployDialog.vue'
|
|
const store = useStore()
|
const { proxy } = getCurrentInstance()
|
const website = proxy.website
|
|
// 权限
|
const permission = computed(() => store.getters.permission)
|
|
// 初始化查询参数
|
const initSearchParams = () => ({
|
modelKey: '', // 模型标识
|
name: '', // 模型名称
|
current: 1, // 当前页
|
size: 10, // 每页大小
|
})
|
const searchParams = ref(initSearchParams())
|
const total = ref(0)
|
const loading = ref(true)
|
const list = ref([])
|
const queryParamsRef = ref(null)
|
const selectionList = ref([])
|
|
// 弹框控制
|
const flowConfigDialogRef = ref(null)
|
const iframeFlowDialogRef = ref(null)
|
const deployDialogRef = ref(null)
|
const flowConfigDialogVisible = ref(false)
|
const iframeFlowDialogVisible = ref(false)
|
const deployDialogVisible = ref(false)
|
|
// 计算选中的ids
|
const ids = computed(() => selectionList.value.map(item => item.id).join(','))
|
|
// 获取列表数据
|
async function getList() {
|
loading.value = true
|
try {
|
const res = await modelList(searchParams.value.current, searchParams.value.size, {
|
modelKey: searchParams.value.modelKey,
|
name: searchParams.value.name,
|
})
|
list.value = res?.data?.data?.records ?? []
|
total.value = res?.data?.data?.total ?? 0
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 查询
|
function handleSearch() {
|
searchParams.value.current = 1
|
getList()
|
}
|
|
// 重置查询
|
function resetForm() {
|
queryParamsRef.value?.resetFields()
|
searchParams.value = initSearchParams()
|
getList()
|
}
|
|
// 选择变化
|
function selectionChange(list) {
|
selectionList.value = list
|
}
|
|
// 创建流程
|
function handleCreate() {
|
if (website.design.designMode) {
|
flowConfigDialogVisible.value = true
|
nextTick(() => {
|
flowConfigDialogRef.value?.open()
|
})
|
} else {
|
iframeFlowDialogVisible.value = true
|
nextTick(() => {
|
iframeFlowDialogRef.value?.openCreate()
|
})
|
}
|
}
|
|
// 配置流程
|
function handleUpdate(row) {
|
if (website.design.designMode) {
|
flowConfigDialogVisible.value = true
|
nextTick(() => {
|
flowConfigDialogRef.value?.open(row)
|
})
|
} else {
|
iframeFlowDialogVisible.value = true
|
nextTick(() => {
|
iframeFlowDialogRef.value?.openEdit(row)
|
})
|
}
|
}
|
|
// 部署流程
|
function handleDeploy(row) {
|
deployDialogVisible.value = true
|
nextTick(() => {
|
deployDialogRef.value?.open(row)
|
})
|
}
|
|
// 单行删除
|
async function handleDelete(row) {
|
await ElMessageBox.confirm('确定将选择数据删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
customClass: 'gd-confirm-custom',
|
confirmButtonClass: 'gd-confirm-button',
|
cancelButtonClass: 'gd-confirm-cancel-button',
|
})
|
await removeModel(row.id)
|
ElMessage.success('操作成功!')
|
getList()
|
}
|
|
// 批量删除
|
async function handleBatchDelete() {
|
if (selectionList.value.length === 0) {
|
ElMessage.warning('请选择至少一条数据')
|
return
|
}
|
await ElMessageBox.confirm('确定将选择数据删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
customClass: 'gd-confirm-custom',
|
confirmButtonClass: 'gd-confirm-button',
|
cancelButtonClass: 'gd-confirm-cancel-button',
|
})
|
await removeModel(ids.value)
|
ElMessage.success('操作成功!')
|
getList()
|
}
|
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
|
<style scoped lang="scss"></style>
|
