<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.name"
|
placeholder="名称"
|
clearable=""
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-select
|
v-model="queryForm.type"
|
placeholder="类型"
|
class="handle-select mr10"
|
size="mini"
|
clearable=""
|
>
|
<el-option
|
v-for="(v, k) in typeOptions"
|
:key="k"
|
:label="v"
|
:value="k"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select
|
v-model="queryForm.arch"
|
placeholder="架构"
|
class="handle-select mr10"
|
size="mini"
|
clearable=""
|
>
|
<el-option
|
v-for="(v, k) in archOptions"
|
:key="k"
|
:label="v"
|
:value="k"
|
></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"
|
@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%"
|
row-class-name="expand-row"
|
:highlight-current-row="false"
|
>
|
>
|
<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 :type="row.state == 0 ? 'success' : 'danger'">{{
|
packageState[row.state]
|
}}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column width="300">
|
<template #default="scope">
|
<el-button
|
v-show="props.row.type == 'os' || props.row.type == 'algo'"
|
size="small"
|
@click="handlePublish(scope.row)"
|
>发布</el-button
|
>
|
<el-button size="small" @click="handleDownload(scope.row)"
|
>下载</el-button
|
>
|
<el-button
|
size="small"
|
:disabled="scope.row.state === 0"
|
@click="handleRebuild(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="50">
|
<template #default="scope">{{ scope.$index + 1 }}</template>
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="name"
|
label="名称"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="desc"
|
label="描述"
|
></el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="srcUrl"
|
label="地址"
|
width="500"
|
></el-table-column>
|
<el-table-column show-overflow-tooltip prop="branch" label="分支">
|
</el-table-column>
|
<el-table-column show-overflow-tooltip prop="type" label="类型">
|
<template #default="{ row }">
|
<el-tag>{{ typeOptions[row.type] }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column show-overflow-tooltip prop="arch" label="架构">
|
<template #default="{ row }">
|
<el-tag>{{ archOptions[row.arch] }}</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 :type="row.state == 2 ? 'danger' : 'success'">{{
|
projectState[row.state]
|
}}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="创建时间"
|
prop="createdAt"
|
width="150"
|
></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, download, rebuild } from "@/api/package";
|
|
import TableEdit from "./components/ProjectEdit.vue";
|
|
export default {
|
name: "ComprehensiveTable",
|
components: {
|
TableEdit,
|
},
|
data() {
|
return {
|
list: [],
|
listLoading: true,
|
layout: "total, sizes, prev, pager, next, jumper",
|
archOptions: {
|
amd64: "x86_64",
|
arm64: "arm_64",
|
},
|
typeOptions: {
|
os: "AIOS",
|
sys: "系统包",
|
app: "应用包",
|
algo: "算法包",
|
},
|
projectState: ["下载中", "同步完成", "同步失败"],
|
packageState: [
|
"打包完成",
|
"已 提 交",
|
"排 队 中",
|
"打 包 中",
|
"编译失败",
|
"打包失败",
|
],
|
total: 0,
|
background: true,
|
selectRows: "",
|
elementLoadingText: "正在加载...",
|
queryForm: {
|
pageNo: 1,
|
pageSize: 20,
|
},
|
};
|
},
|
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) {
|
if (expandRows.length == 0) {
|
return;
|
}
|
|
const { data, total } = await getPkgList(row.id);
|
this.list.forEach((item, idx) => {
|
if (item.id === row.id) {
|
this.list[idx].pkgList = data.reverse();
|
}
|
});
|
},
|
handlePack(row) {
|
this.$prompt("请输入版本号", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
inputPattern: /[\d+][\.\d+]*/,
|
inputErrorMessage: "版本号格式不正确,例 1.0.0, 10.1.100",
|
})
|
.then(({ value }) => {
|
buildPkg(row, value).then((rsp) => {
|
this.expandChange(row, 1);
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "取消输入",
|
});
|
});
|
},
|
handlePublish(row) {
|
publish(row).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$baseMessage(rsp.msg, "success");
|
}
|
});
|
},
|
handleDownload(row) {
|
download({ path: row.filePath }).then((rsp) => {
|
if (rsp && rsp.success) {
|
window.location = rsp.data;
|
}
|
});
|
},
|
handleRebuild(row) {
|
rebuild(row).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$baseMessage(rsp.msg, "success");
|
} else {
|
this.$baseMessage("保存失败", "error");
|
}
|
});
|
},
|
},
|
};
|
</script>
|
<style>
|
.el-table .expand-row {
|
background-color: oldlace;
|
}
|
</style>
|
