123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356 |
- <template>
- <div class="layout-pd" >
- <el-row>
- <!--操作-->
- <el-col :xs="24" >
- <el-card class="mt8" shadow="hover" >
- <el-form :model="sdkData.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-input v-model="sdkData.Filter.OilStation" 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="sdkData.Filter.Project" 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="SN">
- <el-input v-model="sdkData.Filter.SN" 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="sdkData.Filter.Key" 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-date-picker
- v-model="sdkData.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-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
- <el-form-item>
- <el-button type="primary" icon="ele-CirclePlus" @click="onAdd"> 添加 </el-button>
- </el-form-item>
- </el-col>
- </el-form-item>
- </el-form>
- <div class="my-flex my-flex-end" >
- <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
- <el-button type="primary" icon="ele-Document" @click="exportTable(sdkData.tableModel,sdkData.dynamicColumns)"> 导出表格 </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="sdkData.loading" stripe :data="sdkData.tableModel" row-key="id" style="width: 100%">
- <el-table-column v-for="column in sdkData.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" />
- <el-table-column label="操作" fixed="right" header-align="center" align="center" class="right-operation" width="100">
- <template #default="{ row }">
- <el-link
- class="my-el-link mr12 ml12"
- 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="showAudit(row)"
- type="primary"
- icon="ele-Tickets"
- size="small"
- @click="onAuditRecord(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="sdkData.pageInput.CurrentPage"
- v-model:page-size="sdkData.pageInput.PageSize"
- :total="sdkData.total"
- :page-sizes="[10000, 20000, 50000, 100000]"
- 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" name="authorize/fuelingsdk">
- import {defineAsyncComponent, onMounted, reactive, ref, watch, onBeforeMount} from "vue";
- import {OilSdkAuthorDto, oilSdkFilterModel, oilSdkTableModel} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
- import {OilSdkAuthorAPI} from "/@/api/admin/deviceAuthorization/oilSdkAuthor";
- import type {pageInput} from "/@/api/admin/shareDto/shareDto";
- import eventBus from "/@/utils/mitt";
- import * as ExcelJS from 'exceljs';
- import * as FileSaver from 'file-saver';
- /**引入组件*/
- const EditDialog = defineAsyncComponent(() => import('/src/views/admin/authorize/fuelingsdk/components/form-edit.vue'))
- const editDialogRef = ref()
- /**sdk授权页面对象 */
- const sdkData = reactive({
- time:'',
- /**加载显示 */
- loading: false,
- /**条件查询模块 */
- Filter: {
- /**油站名称 */
- OilStation: "",
- /**项目名称 */
- Project: "",
- /**设备SN */
- SN: "",
- /**授权码*/
- Key: "",
- /**开始的时间 */
- BeginTime: null,
- /**开始的时间 */
- EndTime: null,
- } as oilSdkFilterModel,
- /**表格信息 */
- tableModel: [] as oilSdkTableModel,
- /**动态表头 */
- dynamicColumns: [
- { prop: 'guid', label: '编号' },
- { prop: 'oilStation', label: '油站名称' },
- { prop: 'projectName', label: '项目名称' },
- { prop: 'sn', label: '设备SN号' },
- { prop: 'key', label: '授权码' },
- { prop: 'expiedTime', label: '有效时间' },
- { prop: 'state', label: '状态' },
- { prop: 'remark', label: '备注' },
- ],
- /**分页标识 */
- pageInput:{
- CurrentPage: 1,
- PageSize: 10000,
- } as pageInput,
- /**分页总数 */
- total: 0,
- } as OilSdkAuthorDto)
- /**初始化 */
- const init = async () => {
- sdkData.loading = true
- const query = flattenObject({ Filter: sdkData.Filter})
- const res:any = await new OilSdkAuthorAPI().getPageData({...sdkData.pageInput, ...query}).catch(() => {
- sdkData.loading = false
- })
- sdkData.tableModel = res?.data?.list ?? []
- sdkData.total = res?.data?.total ?? 0
- sdkData.loading = false
- }
- onMounted(() => {
- init()
- eventBus.off('refreshView')
- eventBus.on('refreshView', async () => {
- init()
- })
- })
- onBeforeMount(() => {
- eventBus.off('refreshView')
- })
- /**
- * 监听时间变换
- */
- watch(() => sdkData.time, (newVal ) => {
- if(newVal.length === 0){
- return
- }
- sdkData.Filter.BeginTime = newVal?.[0].toString()
- sdkData.Filter.EndTime = newVal?.[1].toString()
- })
- /**条件查询 */
- const onQuery = () => {
- init()
- }
- /**重置查询条件 */
- const resetQuery = () => {
- sdkData.Filter.OilStation = ''
- sdkData.Filter.Project = ''
- sdkData.Filter.SN = ''
- sdkData.Filter.Key = ''
- sdkData.Filter.BeginTime = ''
- sdkData.Filter.EndTime = ''
- sdkData.time = ''
- sdkData.pageInput.CurrentPage = 1
- }
- /**重置 */
- const onReset = () => {
- resetQuery()
- init()
- }
- /**添加*/
- const onAdd = () => {
- editDialogRef.value.openDialog()
- }
- /**页条数变化*/
- const onSizeChange = () => {
- init()
- }
- /**页数变化*/
- const onCurrentChange = () =>{
- init()
- }
- /**批量导入*/
- const uploadFiles = () =>{
- }
- /**导出表格*/
- const exportTable = async(data:any[],columns:{ prop: string, label: string }[]) =>{
- // 创建一个新的工作簿
- const workbook = new ExcelJS.Workbook();
- const worksheet = workbook.addWorksheet('Sheet1');
- // 添加表头(不包括名为 "guid" 的表头列)
- const headers = columns
- .filter(column => column.prop !== 'guid') // 过滤掉名为 "guid" 的表头列
- .map(column => column.label);
- const headerRow = worksheet.addRow(headers);
- // 添加数据行(不包括 "guid" 的数据列)
- data.forEach((item) => {
- const row = columns
- .filter(column => column.prop !== 'guid') // 过滤掉名为 "guid" 的数据列
- .map(column => item[column.prop]);
- worksheet.addRow(row);
- });
- // 设置数据行样式
- worksheet.eachRow({ includeEmpty: true }, row => {
- row.eachCell(cell => {
- // 设置单元格样式
- cell.font = { bold: false }; // 设置字体为普通样式
- cell.border = { top: { style: 'thin' }, bottom: { style: 'thin' } }; // 设置上下边框为细线
- cell.alignment = { vertical: 'middle', horizontal: 'center' }; // 将内容垂直居中、水平居中
- // 设置单元格高度
- row.height = 25; // 设置每一行的高度为 25
- });
- });
- // 设置表头样式
- headerRow.font = { bold: true }; // 设置字体为粗体
- // 设置整个表格的边框样式
- worksheet.eachRow({ includeEmpty: true }, row => {
- row.eachCell(cell => {
- if (cell.row === 1) {
- // 设置表头单元格的边框为细线
- cell.border = { left: { style: 'thin' }, right: { style: 'thin' }, top: { style: 'thin' }, bottom: { style: 'thin' } };
- // 设置表头单元格背景颜色
- cell.fill={type: 'pattern',pattern: 'solid',fgColor: { argb: '409eff' }}
- } else {
- // 设置数据行单元格的边框为细线
- cell.border = { left: { style: 'thin' }, right: { style: 'thin' }, bottom: { style: 'thin' } };
- }
- });
- });
- // 调整单元格大小
- worksheet.columns.forEach(column => {
- column.width = 25; // 设置每列的宽度为 25
- });
- // 生成 Excel 文件
- const buffer = await workbook.xlsx.writeBuffer();
- // 将文件保存到本地
- const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
- FileSaver.saveAs(blob, '油气SDK授权数据.xlsx');
- }
- /**将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 editTableData = (row) => {
- editDialogRef.value.openDialog(row)
- }
- /**审核弹窗 */
- const onAuditRecord=(row)=>{
- console.log(row.key)
- }
- /**授权码为空时显示审核按钮 */
- const showAudit=(row):boolean=>{
- if(row.key){
- return false
- }
- return true
- }
- </script>
- <style scoped lang="scss">
- .my-el-link {
- font-size: 12px;
- }
- .el-form .el-col.mb20 {
- margin: 0 !important;
- }
- .el-input, .el-select {
- width: 240px;
- }
- </style>
|