<template>
<a-page-header-wrapper title="查询表格">
<a-card :bordered="false">
<div class="tableList">
<div class="tableListForm">
<a-form
v-show="!expandForm"
layout="inline"
:model="query"
:form="form"
>
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item
label="应用名称"
prop="app_name"
v-decorator="['app_name']"
>
<a-input v-model="query.app_name" placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="应用类别"
prop="category"
v-decorator="['category']"
>
<a-select
v-model="query.category"
placeholder="请选择"
style="width: 100%"
>
<a-option
:value="item.value"
v-for="item in categoryList"
:key="item.value"
>{{ item.label }}</a-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<span class="submitButtons">
<a-button
type="primary"
htmlType="submit"
@click="getApplicationList"
>
查询
</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="resetForm">
重置
</a-button>
<a :style="{ marginLeft: '8px' }" @click="toggleForm">
展开 <a-icon type="down" />
</a>
</span>
</a-col>
</a-row>
</a-form>
<a-form
v-show="expandForm"
layout="inline"
:model="query"
:form="form"
>
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item
label="应用名称"
prop="app_name"
v-decorator="['app_name']"
>
<a-input v-model="query.app_name" placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="应用类别"
prop="category"
v-decorator="['category']"
>
<a-select
v-model="query.category"
placeholder="请选择"
style="width: 100%"
>
<a-option
:value="item.value"
v-for="item in categoryList"
:key="item.value"
>{{ item.label }}</a-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="应用版本号"
prop="app_version"
v-decorator="['app_version']"
>
<a-input v-model="query.app_version" placeholder="请输入" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item
label="创建时间"
prop="create_at"
v-decorator="['create_at']"
>
<a-range-picker
v-model="query.create_at"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="应用尺寸"
prop="app_screen_size"
v-decorator="['app_screen_size']"
>
<a-select v-model="query.app_screen_size">
<a-select-option
v-for="item in sizeList"
:key="item.value"
:value="item.label"
>
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item
label="适配平台"
prop="app_arch"
v-decorator="['app_arch']"
>
<a-select v-model="query.app_arch">
<a-select-option
v-for="item in portList"
:key="item.value"
:value="item.label"
>
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<div style="overflow: hidden">
<div :style="{ float: 'right', marginBottom: '24px' }">
<a-button
type="primary"
htmlType="submit"
@click="getApplicationList"
>
查询
</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="resetForm">
重置
</a-button>
<a :style="{ marginLeft: '8px' }" @click="toggleForm">
收起 <a-icon type="up" />
</a>
</div>
</div>
</a-form>
</div>
<div class="tableListOperator">
<a-button icon="plus" type="primary" @click="openForm">
新建
</a-button>
<span v-show="selectedRowKeys.length > 0">
<a-button> 批量操作 </a-button>
<a-dropdown overlay="{menu}">
<a-button> 更多操作 <icon type="down" /> </a-button>
</a-dropdown>
</span>
</div>
<!-- <StandardTable
selectedRows="{selectedRows}"
loading="{loading}"
data="{data}"
columns="{this.columns}"
onSelectRow="{this.handleSelectRows}"
onChange="{this.handleStandardTableChange}"
/> -->
<a-table
:columns="columns"
:rowKey="(record) => record.uuid"
:dataSource="tableData.list"
:pagination="tableData.pagination"
:loading="loading"
@change="handleTableChange"
>
<!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
<template slot="login" slot-scope="login">
{{ login.app_name }}
</template>
<template slot="name" slot-scope="name">
{{ name.first }} {{ name.last }}
</template>
<template slot="review" slot-scope="record">
<a-tag :color="record == '上架' ? 'green' : 'red'">
{{ record }}
</a-tag>
</template>
<template
slot="expandedRowRender"
slot-scope="record"
style="margin: 0"
>
<p :style="[sya, syb]">
<a-avatar :src="record.app_icon" shape="square" :size="128" />
</p>
<p :style="[sya]">详细信息</p>
<a-row>
<a-col :span="6">
<a-description-item
title="应用名称"
:content="record.app_name"
/>
</a-col>
<a-col :span="6">
<a-description-item
title="应用版本"
:content="record.app_version"
/>
</a-col>
<a-col :span="6">
<a-description-item
title="应用类别"
:content="record.category"
/>
</a-col>
<a-col :span="6">
<a-description-item
title="下载地址"
:content="record.download_url"
/>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-description-item title="启动页" :content="record.launcher" />
</a-col>
<a-col :span="6">
<a-description-item
title="创建日期"
:content="record.create_at"
/>
</a-col>
<a-col :span="12">
<a-description-item
title="应用描述"
:content="record.remarks"
/>
</a-col>
</a-row>
<a-row>
<a-col :span="12"> </a-col>
<a-col :span="12"> </a-col>
</a-row>
<a-divider />
<p :style="[sya]">应用元信息</p>
<a-row>
<a-col :span="24">
<a-description-item title="JSON" :content="record.meta_data" />
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-description-item
title="Registered"
:content="record.date + ' (' + record.age + ')'"
/>
</a-col>
</a-row>
</template>
<template slot="action" slot-scope="text, record">
<a href="javascript:;" @click="handleEdit(record)">编辑应用</a>
<a-divider type="vertical" />
<a href="javascript:;" @click="downloadFile(record)">下载EPK</a>
<a-divider type="vertical" />
<a href="javascript:;" @click="rebuildApplication(record)"
>重新打包</a
>
<a-divider type="vertical" />
<a href="javascript:;" @click="handleEditSource(record)"
>编辑源码</a
>
<a-divider type="vertical" />
<a href="javascript:;" @click="updateReview(record, 1)">上架</a>
<a-divider type="vertical" />
<a href="javascript:;" @click="updateReview(record, 0)">下架</a>
<a-divider type="vertical" />
<a href="javascript:;" @click="updateLauncher(record)">设为启动器</a>
<a-divider type="vertical" />
<a href="javascript:;" @click="deleteApplication(record)">删除</a>
</template>
</a-table>
</div>
</a-card>
</a-page-header-wrapper>
</template>
<script>
import {
Avatar,
Row,
Col,
Card,
List,
Button,
Form,
Icon,
Table,
Divider,
Dropdown,
Input,
Tag,
Select,
DatePicker,
message,
} from "ant-design-vue";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import DescriptionItem from "@/components/DescriptionItem";
const columns = [
{
title: "应用名称",
dataIndex: "app_name",
width: "15%",
},
{
title: "应用版本号",
dataIndex: "app_version",
},
{
title: "应用类别",
dataIndex: "category_text",
},
{
title: "应用状态",
dataIndex: "app_review_text",
scopedSlots: { customRender: "review" },
},
{
title: "文件大小",
dataIndex: "app_file_size",
},
{
title: "应用尺寸",
dataIndex: "app_screen_size",
},
{
title: "适用平台",
dataIndex: "app_arch",
},
{
title: "Action",
key: "action",
width: "35%",
scopedSlots: { customRender: "action" },
},
];
// import { mapGetters } from "vuex";
import {
getApplicationList,
rebuildApplication,
deleteApplication,
updateReview,
updateLauncher
} from "@/api/openapi";
import { mapTrim, download } from "@/utils/index";
export default {
name: "ApplicationIndex",
data: () => ({
expandForm: false,
selectedRowKeys: [],
columns,
sya: {
fontSize: "16px",
color: "rgba(0,0,0,0.85)",
lineHeight: "24px",
display: "block",
marginBottom: "16px",
},
syb: {
marginBottom: "24px",
},
query: {
app_name: null,
category: null,
app_version: null,
app_screen_size: null,
app_arch: null,
create_at: null,
},
categoryList: [
{ label: "影音视听", value: 1 },
{ label: "实用工具", value: 2 },
{ label: "图书阅读", value: 3 },
{ label: "学习教育", value: 4 },
{ label: "医疗健康", value: 5 },
{ label: "未定义", value: 6 },
],
sizeList: [
{ label: "240 * 240", value: 1 },
{ label: "390 * 390", value: 2 },
{ label: "450 * 450", value: 3 },
],
portList: [
{ label: "ASR3601", value: 1 },
{ label: "ASR3603", value: 2 },
],
loading: false,
post: {
page: 1,
pageSize: 15,
},
tableData: {
list: [],
pagination: {
pageSize: 15,
total: 200,
},
},
}),
components: {
Icon,
APageHeaderWrapper: PageHeaderWrapper,
AAvatar: Avatar,
ARow: Row,
ACol: Col,
ACard: Card,
ATag: Tag,
ACardGrid: Card.Grid,
ACardMeta: Card.Meta,
AList: List,
AButton: Button,
AForm: Form,
AFormItem: Form.Item,
AIcon: Icon,
ATable: Table,
ADescriptionItem: DescriptionItem,
ADivider: Divider,
ADropdown: Dropdown,
AInput: Input,
ASelect: Select,
AOption: Select.Option,
ASelectOption: Select.Option,
ARangePicker: DatePicker.RangePicker,
},
beforeCreate() {
this.form = this.$form.createForm(this, {});
},
methods: {
handleEdit(record) {
this.$router.push({ name: "ApplicationForm", params: { title: "编辑", record: record } })
},
handleEditSource(record) {
this.$router.push({ name: "FileManager", params: { directory: record.file_dir, disk: "epks" } })
},
updateReview(record, value) {
// 上架1 下架0
updateReview({ app: record.uuid, review: value }).then(res => {
message.success(res.msg)
this.getApplicationList()
}).catch(err => {
message.error(err.msg)
})
},
updateLauncher(record) {
updateLauncher({ app: record.uuid }).then(res => {
message.success(res.msg)
}).catch(err => {
message.error(err.msg)
})
},
downloadFile(record) {
console.log(record)
download(`${record.app_name}.epk`, record.download_url);
},
resetForm() {
this.$nextTick(() => {
this.form.resetFields();
});
},
toggleForm() {
this.expandForm = !this.expandForm;
},
onSelectChange(selectedRowKeys) {
window.console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
openForm() {
this.$router.push({ path: "/application/form" });
},
handleTableChange(pagination, filters, sorter) {
console.log(pagination, filters, sorter);
this.post.page = pagination.current;
this.post.pageSize = pagination.pageSize;
this.getApplicationList();
},
getApplicationList() {
this.loading = true;
let opts = mapTrim(this.query);
opts = Object.assign(opts, this.post);
getApplicationList(opts)
.then((res) => {
if (res.code == 200) {
this.tableData.list = res.data.map((item) => {
const cat = this.categoryList.find(
(i) => item.category == i.value
);
if (cat) item.category_text = cat.label;
item.app_review_text = item.app_review ? "上架" : "下架";
return item;
});
this.tableData.pagination.pageSize = res.pageSize;
this.tableData.pagination.total = res.total;
}
message.success(res.msg);
})
.catch((err) => {
console.log(err);
message.error(err.msg);
})
.finally(() => {
this.loading = false;
});
},
rebuildApplication(record) {
rebuildApplication(record.uuid)
.then((res) => {
message.success(res.msg);
})
.catch((err) => {
message.error(err.msg);
});
},
deleteApplication(record) {
deleteApplication(record.uuid)
.then((res) => {
message.success(res.msg)
this.getApplicationList()
})
.catch((err) => {
message.error(err.msg);
});
},
},
mounted() {},
created() {
this.getApplicationList();
},
};
</script>
<style lang="less">
@import url("styles/tableList.less");
</style>