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

<!--部件电子档案-->
<template>
  <div class="layout-pd" >
    <!--操作-->
    <el-card  shadow="hover" >
          <el-form :model="sdkData.Filter" size="default" label-width="100px" class="mt35 mb35">
            <el-row :gutter="35">
              <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" >
                <el-form-item>
                  <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
                <el-form-item>
                  <el-button type="primary" icon="ele-Delete" @click="onReset"> 重置 </el-button>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
                <el-form-item>
                  <el-button type="primary" icon="ele-Delete" @click="onAdd"> 添加 </el-button>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
                <el-form-item>
                  <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
                  <el-button type="primary" icon="ele-Document" @click="exportTable"> 导出表格 </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
    <!--表格-->
    <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
        <el-table v-loading="sdkData.loading" :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">
            <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>
            </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="[10, 20, 50, 100]"
            small
            background
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
          />
        </div>
    </el-card>
    <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";

/**引入组件*/
const EditDialog = defineAsyncComponent(() => import('./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: 20,
  } 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 = ''
}

/**重置 */
const onReset = () => {
  resetQuery()
  init()
}

/**添加*/
const onAdd = () => {
  editDialogRef.value.openDialog()
}

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

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

/**批量导入*/
const uploadFiles = () =>{

}

/**导出表格*/
const exportTable = () =>{

}

/**将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)
}


</script>

<style scoped lang="scss">

</style>