index.vue
4.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<template>
<page-view has-bread has-card>
<filter-search :loading="loading" :model="filter" :inline="true" @search="onSearch" @reset="onReset">
<filter-search-item label="系统类型">
<a-select v-model="filter.os" :options="systemOption" :allow-clear="true" placeholder="请选择" />
</filter-search-item>
<filter-search-item label="强制更新">
<a-select v-model="filter.is_force" :options="forceOption" :allow-clear="true" placeholder="请选择" />
</filter-search-item>
<filter-search-item label="内部版本">
<a-input v-model="filter.appNoLike" :allow-clear="true" placeholder="请输入筛选版本号" />
</filter-search-item>
</filter-search>
<filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
<template #tool>
<icon-button v-permission="['system-version-create']" type="primary" icon="plus" label="新增" @click="handleCreate" />
</template>
<enum-table-column data-index="os" title="系统类型" :option="systemOption" align="center" :width="120" />
<filter-table-column data-index="app_ver" title="版本号" align="center" :width="120">
<template #default="{ record }">
<a-link :hoverable="false" class="link-hover" :href="record.url" icon>{{ record.app_ver }}</a-link>
</template>
</filter-table-column>
<filter-table-column data-index="app_no" title="内部号" align="center" :width="120" />
<enum-table-column data-index="is_force" title="强制更新" align="center" :option="forceOption" :width="80" />
<filter-table-column data-index="remark" title="说明" />
<date-table-column data-index="created_at" title="发布时间" :split="false" :width="170" />
<space-table-column
v-if="usePermission().checkPermission(['system-version-edit', 'system-version-delete'])"
:width="100"
data-index="operations"
title="操作"
>
<template #default="{ record }">
<a-link v-permission="['system-version-edit']" :hoverable="false" class="link-hover" @click="handleUpdate(record)">编辑</a-link>
<a-link v-permission="['system-version-delete']" :hoverable="false" class="link-hover" @click="handleDelete(record)">删除</a-link>
</template>
</space-table-column>
</filter-table>
</page-view>
</template>
<script lang="ts" setup>
import { createVNode, onMounted, ref } from 'vue';
import { AnyObject } from '@/types/global';
import useVersionApi from '@/http/version';
import useLoading from '@/hooks/loading';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import DateTableColumn from '@/components/filter/date-table-column.vue';
import SpaceTableColumn from '@/components/filter/space-table-column.vue';
import FormContent from '@/views/system/version/components/form-content.vue';
import usePermission from '@/hooks/permission';
import { Message, TableData } from '@arco-design/web-vue';
import { createModalVNode } from '@/utils/createVNode';
import { promiseToBoolean } from '@/utils';
const { systemOption, forceOption } = useVersionApi;
const { loading, setLoading } = useLoading(false);
const filter = ref<AnyObject>({});
const tableRef = ref();
const onQuery = async (params: AnyObject) => {
setLoading(true);
return useVersionApi.get({ ...filter.value, ...params, setSort: '-id' }).finally(() => setLoading(false));
};
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { appNoLike: '', is_force: '', os: '' };
onSearch();
};
onMounted(() => onReset());
const handleCreate = () => {
const formValue = ref({ app_ver: '' });
createModalVNode(() => createVNode(FormContent, { modelValue: formValue.value }), {
title: '新增操作',
onBeforeOk: () => promiseToBoolean(useVersionApi.create(formValue.value)),
onOk: () => {
tableRef.value?.onFetch();
Message.success(`新增版本：${formValue.value.app_ver}`);
},
});
};
const handleUpdate = (row: TableData) => {
const formValue = ref({ ...row });
createModalVNode(() => createVNode(FormContent, { modelValue: formValue.value }), {
title: '编辑操作',
onBeforeOk: () => promiseToBoolean(useVersionApi.update(row.id, formValue.value)),
onOk: () => {
tableRef.value?.onFetch();
Message.success(`更新版本：${formValue.value.app_ver}`);
},
});
};
const handleDelete = (row: TableData) =>
createModalVNode(`确认要将版本信息：${row.app_ver} 删除吗？`, {
title: '删除操作',
maskClosable: true,
onBeforeOk: () => promiseToBoolean(useVersionApi.destroy(row.id)),
onOk: () => {
tableRef.value?.onFetch();
Message.success(`删除版本：${row.app_ver}`);
},
});
</script>
<style lang="less" scoped></style>