Web/admin.ui.plus-master/src/views/admin/authorize/softwarePackageManagement/index.vue

<template>
  <div class="layout-pd">
    <el-row>
      <!--操作-->
      <el-col :xs="24">
        <el-card class="mt8" shadow="hover">
          <el-form :model="softwareData.Filter" @submit.stop.prevent>
            <el-form-item prop="name" style="width: 100%">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="软件类型">
                  <el-select v-model="softwareData.Filter.softwareType" placeholder="请选择软件类型">
                    <el-option label="所有" :value="''"></el-option>
                    <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="8" :xl="6" 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="8" :xl="6" 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="8" :xl="6" class="mb20">
                <el-form-item label="设备类型">
                  <el-select v-model="softwareData.Filter.equipmentType" placeholder="请选择设备类型">
                    <el-option label="所有" :value="''"></el-option>
                    <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="8" :xl="6" class="mb20">
                              <el-form-item label="状态">
                                  <el-select  placeholder="请选择上传状态">
                                   <el-option label="所有" :value="''"></el-option>
                                   <el-option label="已发布" :value="''"></el-option>
                                   <el-option label="待发布" :value="''"></el-option>
                                   <el-option label="失效" :value="''"></el-option>
                                 </el-select>
                             </el-form-item>
                           </el-col>
                           <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" 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="开始日期" 
                  end-placeholder="结束日期" />
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>

          <hr>

          <!-- 按钮  -->
          <el-row justify="space-between" class="submit-button">
            <el-row>
              <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
              <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
            </el-row>
            <el-row>
              <el-button type="primary" icon="ele-Plus" @click="onAdd"> 上传软件包 </el-button>
            </el-row>
          </el-row>
        </el-card>
      </el-col>
      <!--表格-->
      <el-col :xs="24">
        <el-card 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)">
               <!-- 如果是状态列，使用 StatusBox 组件 -->
              <StatusBox 
               v-if="column.prop === 'state'" 
               :status="getStatusInfo(row[column.prop]).name"  />
               <!-- 其他列保持原有逻辑 -->
               <span 
                v-else 
                :style="getColor(column.prop, row)">
                {{ getProp(column.prop, row) }}
           </span>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" header-align="center" align="center" class="right-operation"
              width="160">

              <template #default="{ row }">
                <el-link class="my-el-link mr12 ml12" v-if="row.state === 0" type="primary" icon="ele-Upload"
                  @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-EditPen"
                  @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"
                  @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"
                  @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"
                  @click="onDownloadRecord(row.guid)" :underline="false" target="_blank">下载记录</el-link>
                <el-link class="my-el-link mr12 ml12"  type="primary" icon="ele-Search"
                  @click="searchHistory(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="pageState.pageInput.currentPage"
              v-model:page-size="pageState.pageInput.pageSize" :total="softwareData.total"
              :page-sizes="[10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
              @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
          </div>
          <template>
            <a ref="downloadLink" style="display: none;"></a>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <EditDialog ref="editDialogRef" />
    <SearchHistory ref="SearchHistoryRef" />
    <DownloadDialog ref="downloadDialogRef" />
  </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";
import { storeToRefs } from 'pinia'
import { useUserInfo } from '/@/stores/userInfo'
import StatusBox from "/@/components/StatusBox.vue";
import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
import { Api } from "/@/api/admin/productionManagement/slelist";
import { useRoute } from "vue-router";

// 使用组合式函数获取分页状态
const pageState = useDynamicPageSize(10, 15);

/**引入组件*/
const EditDialog = defineAsyncComponent(() => import('./components/form-edit.vue'))
const SearchHistory = defineAsyncComponent(() => import('./components/search-history.vue'))

const DownloadDialog = defineAsyncComponent(() => import('./components/table-download.vue'))
// import {pageInput} from "/@/api/admin/shareDto/shareDto";
const editDialogRef = ref()
const downloadDialogRef = ref()
const SearchHistoryRef = 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: "",
    // 项目名称
    projectName: "",
    projectCode: "",
    /**软件名称 */
    softwareName: "",
    /**版本 */
    version: "",
    /**设备类型*/
    equipmentType: "",
    /**开始的时间 */
    BeginTime: null,
    /**开始的时间 */
    EndTime: null,
  } as softwarePackageManagement_SearchFilter,
  /**表格信息 */
  tableModel: [] as unknown as softwarePackageManagement_TableData,
  /**动态表头 */
  dynamicColumns: [
    { prop: 'date', label: '日期' },
    { prop: 'projectName', label: '项目名称' },
    { prop: 'softwareType', label: '软件类型' },
    { prop: 'equipmentType', label: '设备类型' },
    { prop: 'softwareName', label: '软件名称' },
    { prop: 'version', label: '版本号' },
    { prop: 'state', label: '状态' },
    { prop: 'numberOfDownloads', label: '下载次数' },
    { prop: 'remark', label: '备注' },
    { prop: 'releaseTime', label: '发布日期' },
    { prop: 'uploadTime', label: '上传日期' },
    { prop: 'digitalSignature', label: '数字签名' },
    { prop: 'explain', label: '软件包更新说明' },
  ],
  /**分页标识 */
  pageInput: {
    CurrentPage: 1,
    PageSize: 10,
  } as pageInput,
  /**分页总数 */
  total: 0,
} as unknown as softwarePackageManagement_AllDto)

const downloadLink = ref()
/**条件查询 */
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, Filter: softwareData.Filter })
  softwareData.tableModel = res?.data?.list ?? []
  softwareData.total = res?.data?.total ?? 0
  softwareData.loading = false
}

const route = useRoute()

onMounted(() => {
  console.log('页面 mounted，开始加载数据...')
  // 初始化分页大小
  if (route.query.projectName) {
    softwareData.Filter.projectName = route.query.projectName as string
  }
  if (route.query.projectCode) {
    softwareData.Filter.projectCode = route.query.projectCode as string
  }
  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()
})
watch(
  () => route.query,
  (newQuery) => {
    if (newQuery.projectName) {
      softwareData.Filter.projectName = newQuery.projectName as string
    }
    if (newQuery.projectCode) {
      softwareData.Filter.projectCode = newQuery.projectCode as string
    }
    init() // 重新加载数据
  },
  { immediate: true } // 立即执行
)
/**重置查询条件 */
const resetQuery = () => {
  softwareData.Filter.softwareType = ''
  softwareData.Filter.projectCode = ''
  softwareData.Filter.projectName = ''
  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 searchHistory = (row) => {
  SearchHistoryRef.value.openDialog(row.guid)
}

/**发布*/
const onRelease = (row) => {
  //downloadUrl
  softwareData.loading = true;
  (row as softwarePackageManagement_TableData).state = 1
  var RowData = JSON.parse(JSON.stringify(row))
  var res = new SoftwarePackageManagementApi().addData(RowData as softwarePackageManagement_TableData)
  softwareData.loading = false
}

/**下载*/
const onDownload = (row) => {
  softwareData.loading = true;
  var RowData = JSON.parse(JSON.stringify(row))
  const params = RowData as softwarePackageManagement_TableData
  //const link = downloadLink.value;
  //const url = `http://localhost:8000/api/app/software/download-file`;
  //link.href = url;
  //link.click();
  const filename = params.fileName?.toString();
  const { userInfos } = storeToRefs(useUserInfo());
  const accessToken = userInfos.value.token
  const token = `Bearer ${accessToken}`
  var myHeaders = new Headers();
  myHeaders.append("Authorization", token);

  const requestOptions: RequestInit = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow', // 此处使用枚举值 'follow'
  };

  /* var res =  new SoftwarePackageManagementApi().DownloadFile(row as softwarePackageManagement_TableData) */
  const fileUrl = import.meta.env.VITE_API_URL + '/api/app/software/download-file?guid=' + params.guid; // 替换为实际文件URL
  fetch(fileUrl, requestOptions)
    .then(response => response.blob())
    .then(blob => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = filename;
      link.click();
      softwareData.loading = false
    })
    .catch(error => {
      console.error('下载失败：', error);
      softwareData.loading = false
    });
  // var res =  new SoftwarePackageManagementApi().DownloadFile(RowData as softwarePackageManagement_TableData)

}

/**失效*/
const onFailure = (row) => {
  softwareData.loading = true;
  (row as softwarePackageManagement_TableData).state = 2
  var RowData = JSON.parse(JSON.stringify(row))
  var res = new SoftwarePackageManagementApi().addData(RowData as softwarePackageManagement_TableData)
  softwareData.loading = false
}

/**下载记录*/
const onDownloadRecord = (id) => {
  downloadDialogRef.value.openDialog(id)
  //alert('下载记录')
}

/**页条数变化*/
const onSizeChange = () => {
  init()
}

/**页数变化*/
const onCurrentChange = () => {
  init()
}

/**过滤数字的属性*/
const getProp = (val, row) => {
  //debugger
  // var sss = row[val];
  // var fdsdfsd = String(row[val]);
  //if(!row[val]) return null
  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
  // <StatusBox :status="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 {}
}


// 状态映射表 
const statusMap = {
  "0": { name: "待发布"}, 
  "1": { name: "已发布"}, 
  "2": { name: "失效"}, 
};

// 根据 status 值获取映射后的对象
const getStatusInfo = (status: string) => {
  return statusMap[status] || { name: "未知状态" };
};
</script>

<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

/* 输入框标签固定四个字符宽度 */
::v-deep .el-form-item__label {
  // 字体大小14，4个字符，12px右间距
  width: 14*4px+12px;
  justify-content: start;
}

/* 数据表头 设置灰色样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #F6F6F6;
}

.el-link {
  padding: 5px;
}
</style>