<template>
|
<div class="table-container">
|
<vab-query-form>
|
<vab-query-form-left-panel>
|
<el-form ref="form" :model="queryForm" :inline="true" @submit.native.prevent>
|
<el-form-item>
|
<el-input v-model="queryForm.title" placeholder="名称" />
|
</el-form-item>
|
<el-form-item>
|
<el-select
|
v-model="queryForm.address"
|
placeholder="类型"
|
class="handle-select mr10"
|
size="mini"
|
>
|
<el-option key="1" label="系统" value="系统"></el-option>
|
<el-option key="2" label="应用" value="应用"></el-option>
|
<el-option key="3" label="算法" value="算法"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
icon="el-icon-search"
|
type="primary"
|
native-type="submit"
|
@click="handleQuery"
|
>查询</el-button>
|
</el-form-item>
|
</el-form>
|
</vab-query-form-left-panel>
|
<vab-query-form-right-panel>
|
<el-button icon="el-icon-plus" type="primary" @click="handleAdd">
|
添加</el-button>
|
<el-button icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
|
</vab-query-form-right-panel>
|
</vab-query-form>
|
|
<el-table
|
ref="tableSort"
|
v-loading="listLoading"
|
stripe
|
:data="list"
|
:element-loading-text="elementLoadingText"
|
:height="height"
|
@selection-change="setSelectRows"
|
@expand-change="expandChange"
|
>
|
<el-table-column type="expand">
|
<template slot-scope="props">
|
<el-table :data="props.row.pkgList" :show-header="false" style="width: 100%">
|
<el-table-column prop="fileName"></el-table-column>
|
<el-table-column prop="version" width="150"></el-table-column>
|
<el-table-column prop="commit" width="150"></el-table-column>
|
<el-table-column prop="createdAt"></el-table-column>
|
|
<el-table-column prop="state" width="150">
|
<template #default="{ row }">
|
<el-tag>{{ packageState[row.state] }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column width="120">
|
<template #default="scope">
|
<el-button size="small" @click="handlePublish(scope.row)">发布</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column show-overflow-tooltip type="selection" width="55"></el-table-column> -->
|
<el-table-column show-overflow-tooltip label="序号" width="95">
|
<template #default="scope">{{ scope.$index + 1 }}</template>
|
</el-table-column>
|
<el-table-column show-overflow-tooltip prop="name" label="项目名称"></el-table-column>
|
<el-table-column show-overflow-tooltip prop="srcUrl" label="项目地址"></el-table-column>
|
<el-table-column show-overflow-tooltip prop="type" label="类型">
|
<template #default="{ row }">
|
<el-tag>{{ row.type | typeFilter }}</el-tag>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column show-overflow-tooltip label="当前版本" prop="latestVersion"></el-table-column> -->
|
<el-table-column label="状态">
|
<template #default="{ row }">
|
<el-tag>{{ row.state | stateFilter }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createdAt" width="200"></el-table-column>
|
<el-table-column label="操作" width="180px">
|
<template #default="{ row }">
|
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
<el-button type="text" style="color: red" @click="handleDeleteRow(row)">删除</el-button>
|
<el-button type="text" style="color: deepskyblue" @click="handlePack(row)">打包</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
:background="background"
|
:current-page="queryForm.pageNo"
|
:layout="layout"
|
:page-size="queryForm.pageSize"
|
:total="total"
|
@current-change="handleCurrentChange"
|
@size-change="handleSizeChange"
|
></el-pagination>
|
<table-edit ref="edit" @fetch-data="fetchData"></table-edit>
|
</div>
|
</template>
|
|
<script>
|
import { getList, deletePrj, getPkgList, buildPkg } from '@/api/project'
|
import { publish } from '@/api/package'
|
|
import TableEdit from './components/ProjectEdit.vue'
|
export default {
|
name: 'ComprehensiveTable',
|
components: {
|
TableEdit,
|
},
|
filters: {
|
stateFilter(state) {
|
const stateMap = ['下载中', '同步完成', '同步失败']
|
|
return stateMap[state]
|
},
|
typeFilter(type) {
|
const typeMap = {
|
sys: '系统包',
|
app: '应用包',
|
algo: '算法包',
|
}
|
return typeMap[type]
|
},
|
},
|
data() {
|
return {
|
imgShow: true,
|
list: [],
|
listLoading: true,
|
layout: 'total, sizes, prev, pager, next, jumper',
|
packageState: [
|
'完成',
|
'已提交',
|
'排队中',
|
'打包中',
|
'编译失败',
|
'打包失败',
|
],
|
total: 0,
|
background: true,
|
selectRows: '',
|
elementLoadingText: '正在加载...',
|
queryForm: {
|
pageNo: 1,
|
pageSize: 20,
|
title: '',
|
},
|
}
|
},
|
computed: {
|
height() {
|
return this.$baseTableHeight()
|
},
|
},
|
created() {
|
this.fetchData()
|
},
|
beforeDestroy() { },
|
mounted() { },
|
methods: {
|
setSelectRows(val) {
|
this.selectRows = val
|
},
|
handleAdd() {
|
this.$refs['edit'].showEdit()
|
},
|
handleEdit(row) {
|
this.$refs['edit'].showEdit(row)
|
},
|
handleDelete(row) {
|
if (this.selectRows.length > 0) {
|
const ids = this.selectRows.map((item) => item.id).join()
|
this.$baseConfirm('你确定要删除选中项吗', null, async () => {
|
const { msg } = await doDelete({ ids: ids })
|
this.$baseMessage(msg, 'success')
|
this.fetchData()
|
})
|
} else {
|
this.$baseMessage('未选中任何行', 'error')
|
return false
|
}
|
},
|
handleDeleteRow(row) {
|
if (row.id) {
|
this.$baseConfirm('你确定要删除当前项吗', null, async () => {
|
const { msg } = await deletePrj(row.id)
|
this.$baseMessage(msg, 'success')
|
this.fetchData()
|
})
|
}
|
},
|
handleSizeChange(val) {
|
this.queryForm.pageSize = val
|
this.fetchData()
|
},
|
handleCurrentChange(val) {
|
this.queryForm.pageNo = val
|
this.fetchData()
|
},
|
handleQuery() {
|
this.queryForm.pageNo = 1
|
this.fetchData()
|
},
|
async fetchData() {
|
this.listLoading = true
|
const { data, total } = await getList(this.queryForm)
|
|
if (data) {
|
data.forEach((item) => {
|
item.pkgList = []
|
})
|
|
this.list = data
|
}
|
|
this.total = total
|
setTimeout(() => {
|
this.listLoading = false
|
}, 500)
|
},
|
|
async expandChange(row, expandRows) {
|
console.log(row)
|
if (expandRows.length == 0) {
|
console.log('fold')
|
return
|
}
|
|
const { data, total } = await getPkgList(row.id)
|
this.list.forEach((item, idx) => {
|
if (item.id === row.id) {
|
this.list[idx].pkgList = data
|
}
|
})
|
},
|
handlePack(row) {
|
this.$prompt('请输入版本号', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputPattern: /[\d+][\.\d+]*/,
|
inputErrorMessage: '版本号格式不正确,例 1.0.0, 10.1.100',
|
})
|
.then(({ value }) => {
|
buildPkg(row, value).then((rsp) => {
|
console.log(rsp)
|
this.expandChange(row, 1)
|
})
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '取消输入',
|
})
|
})
|
},
|
handlePublish(row) {
|
publish(row).then((rsp) => {
|
console.log(rsp)
|
})
|
},
|
},
|
}
|
</script>
|
