|
@@ -0,0 +1,357 @@
|
|
|
+<template>
|
|
|
+ <div class="layout-pd">
|
|
|
+ <el-row>
|
|
|
+ <!--操作-->
|
|
|
+ <el-col :xs="24" >
|
|
|
+ <el-card class="mt8" shadow="hover" >
|
|
|
+ <el-form :model="softwareData.Filter" :inline="true" @submit.stop.prevent>
|
|
|
+ <el-form-item prop="name" style="width: 100%">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
|
|
+ <el-form-item label="软件类型">
|
|
|
+ <el-select v-model="softwareData.Filter.softwareType" placeholder="请选择软件类型" >
|
|
|
+ <el-option v-for="(value, key) in softwareType" :key="key" :label="value[1].name" :value="Number(value[1].value)" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
|
|
+ <el-form-item label="软件名称">
|
|
|
+ <el-input v-model="softwareData.Filter.softwareName" placeholder="单行输入" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
|
|
+ <el-form-item label="版本">
|
|
|
+ <el-input v-model="softwareData.Filter.version" placeholder="单行输入" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
|
|
+ <el-form-item label="设备类型">
|
|
|
+ <el-select v-model="softwareData.Filter.equipmentType" placeholder="请选择设备类型" >
|
|
|
+ <el-option v-for="(value, key) in equipmentType" :key="key" :label="value[1].name" :value="Number(value[1].value)" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
|
|
+ <el-form-item label="选择时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="softwareData.time"
|
|
|
+ type="datetimerange"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ range-separator="To"
|
|
|
+ start-placeholder="Start date"
|
|
|
+ end-placeholder="End date"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
|
|
+ <el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
|
|
|
+ <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="my-flex my-flex-start" >
|
|
|
+ <el-button type="primary" icon="ele-CirclePlus" @click="onAdd"> 上传软件包 </el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <!--表格-->
|
|
|
+ <el-col :xs="24" >
|
|
|
+ <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
|
|
|
+ <el-table v-loading="softwareData.loading" stripe :data="softwareData.tableModel" row-key="id" style="width: 100%">
|
|
|
+ <el-table-column v-for="column in softwareData.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span :style="getColor(column.prop,row)">
|
|
|
+ {{getProp(column.prop,row)}}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" fixed="right" header-align="center" align="center" class="right-operation" width="140">
|
|
|
+ <template #default="{ row }" >
|
|
|
+ <el-link
|
|
|
+ class="my-el-link mr12 ml12"
|
|
|
+ v-if="row.state === 0"
|
|
|
+ type="primary"
|
|
|
+ icon="ele-Upload"
|
|
|
+ size="small"
|
|
|
+ @click="onRelease(row)"
|
|
|
+ :underline="false"
|
|
|
+ target="_blank"
|
|
|
+ >发布</el-link>
|
|
|
+ <el-link
|
|
|
+ class="my-el-link mr12 ml12"
|
|
|
+ v-if="row.state === 0"
|
|
|
+ type="primary"
|
|
|
+ icon="ele-Edit"
|
|
|
+ size="small"
|
|
|
+ @click="editTableData(row)"
|
|
|
+ :underline="false"
|
|
|
+ target="_blank"
|
|
|
+ >编辑</el-link>
|
|
|
+ <el-link
|
|
|
+ class="my-el-link mr12 ml12"
|
|
|
+ v-if="row.state === 1"
|
|
|
+ type="primary"
|
|
|
+ icon="ele-Download"
|
|
|
+ size="small"
|
|
|
+ @click="onDownload(row)"
|
|
|
+ :underline="false"
|
|
|
+ target="_blank"
|
|
|
+ >下载</el-link>
|
|
|
+ <el-link
|
|
|
+ class="my-el-link mr12 ml12"
|
|
|
+ v-if="row.state === 1"
|
|
|
+ type="primary"
|
|
|
+ icon="ele-WarningFilled"
|
|
|
+ size="small"
|
|
|
+ @click="onFailure(row)"
|
|
|
+ :underline="false"
|
|
|
+ target="_blank"
|
|
|
+ >失效</el-link>
|
|
|
+ <el-link
|
|
|
+ class="my-el-link mr12 ml12"
|
|
|
+ v-if="row.state !== 0"
|
|
|
+ type="primary"
|
|
|
+ icon="ele-Tickets"
|
|
|
+ size="small"
|
|
|
+ @click="onDownloadRecord(row)"
|
|
|
+ :underline="false"
|
|
|
+ target="_blank"
|
|
|
+ >下载记录</el-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="my-flex my-flex-end" style="margin-top: 20px">
|
|
|
+ <el-pagination
|
|
|
+ v-model:currentPage="softwareData.pageInput.CurrentPage"
|
|
|
+ v-model:page-size="softwareData.pageInput.PageSize"
|
|
|
+ :total="softwareData.total"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ small
|
|
|
+ background
|
|
|
+ @size-change="onSizeChange"
|
|
|
+ @current-change="onCurrentChange"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <EditDialog ref="editDialogRef" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+
|
|
|
+import {defineAsyncComponent, onBeforeMount, onMounted, reactive, ref, watch} from "vue";
|
|
|
+import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
|
|
|
+import {
|
|
|
+ softwarePackageManagement_AllDto,
|
|
|
+ softwarePackageManagement_SearchFilter,
|
|
|
+ softwarePackageManagement_TableData
|
|
|
+} from "/@/api/admin/deviceAuthorization/softwarePackageManagementDto";
|
|
|
+import type {pageInput} from "/@/api/admin/shareDto/shareDto";
|
|
|
+import eventBus from "/@/utils/mitt";
|
|
|
+import {SoftwarePackageManagementApi} from "/@/api/admin/deviceAuthorization/softwarePackageManagementApi";
|
|
|
+/**引入组件*/
|
|
|
+const EditDialog = defineAsyncComponent(() => import('./components/form-edit.vue'))
|
|
|
+// import {pageInput} from "/@/api/admin/shareDto/shareDto";
|
|
|
+const editDialogRef = ref()
|
|
|
+
|
|
|
+/**获取全局缓存*/
|
|
|
+const globalCacheStore = useGlobalCacheStore()
|
|
|
+/**设备类型缓存*/
|
|
|
+const equipmentType = ref(globalCacheStore.getGlobalStore().get('equipmentType'))
|
|
|
+/**软件类型缓存*/
|
|
|
+const softwareType = ref(globalCacheStore.getGlobalStore().get('softwareType'))
|
|
|
+/**软件包状态缓存*/
|
|
|
+const softwarePackageStatus = ref(globalCacheStore.getGlobalStore().get('softwarePackageStatus'))
|
|
|
+
|
|
|
+/**软件包管理对象*/
|
|
|
+const softwareData = reactive({
|
|
|
+ time:'',
|
|
|
+ /**加载显示 */
|
|
|
+ loading: false,
|
|
|
+ /**条件查询模块 */
|
|
|
+ Filter: {
|
|
|
+ /**软件类型 */
|
|
|
+ softwareType: "",
|
|
|
+ /**软件名称 */
|
|
|
+ softwareName: "",
|
|
|
+ /**版本 */
|
|
|
+ version: "",
|
|
|
+ /**设备类型*/
|
|
|
+ equipmentType: "",
|
|
|
+ /**开始的时间 */
|
|
|
+ BeginTime: null,
|
|
|
+ /**开始的时间 */
|
|
|
+ EndTime: null,
|
|
|
+ } as softwarePackageManagement_SearchFilter,
|
|
|
+ /**表格信息 */
|
|
|
+ tableModel: [] as softwarePackageManagement_TableData,
|
|
|
+ /**动态表头 */
|
|
|
+ dynamicColumns: [
|
|
|
+ { prop: 'date', label: '日期' },
|
|
|
+ { prop: 'softwareType', label: '软件类型' },
|
|
|
+ { prop: 'equipmentType', label: '设备类型' },
|
|
|
+ { prop: 'softwareName', label: '软件名称' },
|
|
|
+ { prop: 'version', label: '版本号' },
|
|
|
+ { prop: 'explain', label: '说明' },
|
|
|
+ { prop: 'state', label: '状态' },
|
|
|
+ { prop: 'numberOfDownloads', label: '下载次数' },
|
|
|
+ { prop: 'remark', label: '备注' },
|
|
|
+ { prop: 'releaseTime', label: '发布日期' },
|
|
|
+ { prop: 'uploadTime', label: '上传日期' },
|
|
|
+ ],
|
|
|
+ /**分页标识 */
|
|
|
+ pageInput:{
|
|
|
+ CurrentPage: 1,
|
|
|
+ PageSize: 10,
|
|
|
+ } as pageInput,
|
|
|
+ /**分页总数 */
|
|
|
+ total: 0,
|
|
|
+} as softwarePackageManagement_AllDto)
|
|
|
+
|
|
|
+
|
|
|
+/**条件查询 */
|
|
|
+const onQuery = () => {
|
|
|
+ init()
|
|
|
+}
|
|
|
+
|
|
|
+/**将Filter对象成.的连接方式*/
|
|
|
+const flattenObject = (obj, parentKey = '') => {
|
|
|
+ const result = {};
|
|
|
+ for (const key in obj) {
|
|
|
+ if (obj.hasOwnProperty(key)) {
|
|
|
+ const newKey = parentKey ? `${parentKey}.${key}` : key;
|
|
|
+ if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
|
|
|
+ const flattened = flattenObject(obj[key], newKey);
|
|
|
+ Object.assign(result, flattened);
|
|
|
+ } else {
|
|
|
+ result[newKey] = obj[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return result;
|
|
|
+}
|
|
|
+
|
|
|
+/**初始化 */
|
|
|
+const init = async () => {
|
|
|
+ softwareData.loading = true
|
|
|
+ const query = flattenObject({ Filter: softwareData.Filter})
|
|
|
+ const res:any = await new SoftwarePackageManagementApi().getPageData({...softwareData.pageInput, ...query})
|
|
|
+ softwareData.tableModel = res?.data?.list ?? []
|
|
|
+ softwareData.total = res?.data?.total ?? 0
|
|
|
+ softwareData.loading = false
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ init()
|
|
|
+ eventBus.off('refreshView')
|
|
|
+ eventBus.on('refreshView', async () => {
|
|
|
+ await init()
|
|
|
+ })
|
|
|
+ console.log()
|
|
|
+})
|
|
|
+
|
|
|
+onBeforeMount(() => {
|
|
|
+ eventBus.off('refreshView')
|
|
|
+})
|
|
|
+
|
|
|
+/**
|
|
|
+ * 监听时间变换
|
|
|
+ */
|
|
|
+watch(() => softwareData.time, (newVal ) => {
|
|
|
+ if(newVal.length === 0){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ softwareData.Filter.BeginTime = newVal?.[0].toString()
|
|
|
+ softwareData.Filter.EndTime = newVal?.[1].toString()
|
|
|
+})
|
|
|
+
|
|
|
+/**重置查询条件 */
|
|
|
+const resetQuery = () => {
|
|
|
+ softwareData.Filter.softwareType = ''
|
|
|
+ softwareData.Filter.softwareName = ''
|
|
|
+ softwareData.Filter.version = ''
|
|
|
+ softwareData.Filter.equipmentType = ''
|
|
|
+ softwareData.Filter.BeginTime = ''
|
|
|
+ softwareData.Filter.EndTime = ''
|
|
|
+ softwareData.time = ''
|
|
|
+ softwareData.pageInput.CurrentPage = 1
|
|
|
+}
|
|
|
+
|
|
|
+/**重置 */
|
|
|
+const onReset = () => {
|
|
|
+ resetQuery()
|
|
|
+ init()
|
|
|
+}
|
|
|
+
|
|
|
+/**添加*/
|
|
|
+const onAdd = () => {
|
|
|
+ editDialogRef.value.openDialog()
|
|
|
+}
|
|
|
+
|
|
|
+/**编辑弹窗 */
|
|
|
+const editTableData = (row) => {
|
|
|
+ editDialogRef.value.openDialog(row)
|
|
|
+}
|
|
|
+
|
|
|
+/**发布*/
|
|
|
+const onRelease = (row) => {
|
|
|
+ alert('发布')
|
|
|
+}
|
|
|
+
|
|
|
+/**下载*/
|
|
|
+const onDownload = (row) => {
|
|
|
+ alert('下载')
|
|
|
+}
|
|
|
+
|
|
|
+/**失效*/
|
|
|
+const onFailure = (row) => {
|
|
|
+ alert('失效')
|
|
|
+}
|
|
|
+
|
|
|
+/**下载记录*/
|
|
|
+const onDownloadRecord = (row) => {
|
|
|
+ alert('下载记录')
|
|
|
+}
|
|
|
+
|
|
|
+/**页条数变化*/
|
|
|
+const onSizeChange = () => {
|
|
|
+ init()
|
|
|
+}
|
|
|
+
|
|
|
+/**页数变化*/
|
|
|
+const onCurrentChange = () =>{
|
|
|
+ init()
|
|
|
+}
|
|
|
+
|
|
|
+/**过滤数字的属性*/
|
|
|
+const getProp = (val,row) => {
|
|
|
+ if(val === 'softwareType') return softwareType.value.get(String(row[val])).name
|
|
|
+ if(val === 'equipmentType') return equipmentType.value.get(String(row[val])).name
|
|
|
+ if(val === 'state') return softwarePackageStatus.value.get(String(row[val])).name
|
|
|
+ return row[val]
|
|
|
+}
|
|
|
+
|
|
|
+const getColor = (val,row) => {
|
|
|
+ if(val === 'state') {
|
|
|
+ const code = softwarePackageStatus.value.get(String(row[val])).code.split('_')
|
|
|
+ return {color:code[1]}
|
|
|
+ }
|
|
|
+ return {}
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.el-link{
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+</style>
|