index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. <template>
  2. <div class="layout-pd" >
  3. <el-row>
  4. <!--操作-->
  5. <el-col :xs="24" >
  6. <el-card class="mt8" shadow="hover" >
  7. <el-form :model="sdkData.Filter" :inline="true" @submit.stop.prevent>
  8. <el-form-item prop="name" style="width: 100%">
  9. <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
  10. <el-form-item label="油站名称">
  11. <el-input v-model="sdkData.Filter.OilStation" placeholder="单行输入" clearable></el-input>
  12. </el-form-item>
  13. </el-col>
  14. <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
  15. <el-form-item label="项目名称">
  16. <el-input v-model="sdkData.Filter.Project" placeholder="单行输入" clearable></el-input>
  17. </el-form-item>
  18. </el-col>
  19. <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
  20. <el-form-item label="SN">
  21. <el-input v-model="sdkData.Filter.SN" placeholder="单行输入" clearable></el-input>
  22. </el-form-item>
  23. </el-col>
  24. <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
  25. <el-form-item label="授权码">
  26. <el-input v-model="sdkData.Filter.Key" placeholder="单行输入" clearable></el-input>
  27. </el-form-item>
  28. </el-col>
  29. <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
  30. <el-form-item label="有效时间">
  31. <el-date-picker
  32. v-model="sdkData.time"
  33. type="datetimerange"
  34. value-format="YYYY-MM-DD HH:mm:ss"
  35. range-separator="To"
  36. start-placeholder="Start date"
  37. end-placeholder="End date"
  38. />
  39. </el-form-item>
  40. </el-col>
  41. <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
  42. <el-form-item>
  43. </el-form-item>
  44. </el-col>
  45. <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
  46. <el-form-item>
  47. <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
  48. <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
  49. </el-form-item>
  50. </el-col>
  51. <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
  52. <el-form-item>
  53. <el-button type="primary" icon="ele-CirclePlus" @click="onAdd"> 添加 </el-button>
  54. </el-form-item>
  55. </el-col>
  56. </el-form-item>
  57. </el-form>
  58. <div class="my-flex my-flex-end" >
  59. <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
  60. <el-button type="primary" icon="ele-Document" @click="exportTable(sdkData.tableModel,sdkData.dynamicColumns)"> 导出表格 </el-button>
  61. </div>
  62. </el-card>
  63. </el-col>
  64. <!--表格-->
  65. <el-col :xs="24" >
  66. <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
  67. <el-table v-loading="sdkData.loading" stripe :data="sdkData.tableModel" row-key="id" style="width: 100%">
  68. <el-table-column v-for="column in sdkData.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" />
  69. <el-table-column label="操作" fixed="right" header-align="center" align="center" class="right-operation" width="100">
  70. <template #default="{ row }">
  71. <el-link
  72. class="my-el-link mr12 ml12"
  73. type="primary"
  74. icon="ele-Edit"
  75. size="small"
  76. @click="editTableData(row)"
  77. :underline="false"
  78. target="_blank"
  79. >编辑</el-link>
  80. <el-link
  81. class="my-el-link mr12 ml12"
  82. v-if="showAudit(row)"
  83. type="primary"
  84. icon="ele-Tickets"
  85. size="small"
  86. @click="onAuditRecord(row)"
  87. :underline="false"
  88. target="_blank"
  89. >审核</el-link>
  90. </template>
  91. </el-table-column>
  92. </el-table>
  93. <div class="my-flex my-flex-end" style="margin-top: 20px">
  94. <el-pagination
  95. v-model:currentPage="sdkData.pageInput.CurrentPage"
  96. v-model:page-size="sdkData.pageInput.PageSize"
  97. :total="sdkData.total"
  98. :page-sizes="[10000, 20000, 50000, 100000]"
  99. small
  100. background
  101. @size-change="onSizeChange"
  102. @current-change="onCurrentChange"
  103. layout="total, sizes, prev, pager, next, jumper"
  104. />
  105. </div>
  106. </el-card>
  107. </el-col>
  108. </el-row>
  109. <EditDialog ref="editDialogRef" />
  110. </div>
  111. </template>
  112. <script setup lang="ts" name="authorize/fuelingsdk">
  113. import {defineAsyncComponent, onMounted, reactive, ref, watch, onBeforeMount} from "vue";
  114. import {OilSdkAuthorDto, oilSdkFilterModel, oilSdkTableModel} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";
  115. import {OilSdkAuthorAPI} from "/@/api/admin/deviceAuthorization/oilSdkAuthor";
  116. import type {pageInput} from "/@/api/admin/shareDto/shareDto";
  117. import eventBus from "/@/utils/mitt";
  118. import * as ExcelJS from 'exceljs';
  119. import * as FileSaver from 'file-saver';
  120. /**引入组件*/
  121. const EditDialog = defineAsyncComponent(() => import('/src/views/admin/authorize/fuelingsdk/components/form-edit.vue'))
  122. const editDialogRef = ref()
  123. /**sdk授权页面对象 */
  124. const sdkData = reactive({
  125. time:'',
  126. /**加载显示 */
  127. loading: false,
  128. /**条件查询模块 */
  129. Filter: {
  130. /**油站名称 */
  131. OilStation: "",
  132. /**项目名称 */
  133. Project: "",
  134. /**设备SN */
  135. SN: "",
  136. /**授权码*/
  137. Key: "",
  138. /**开始的时间 */
  139. BeginTime: null,
  140. /**开始的时间 */
  141. EndTime: null,
  142. } as oilSdkFilterModel,
  143. /**表格信息 */
  144. tableModel: [] as oilSdkTableModel,
  145. /**动态表头 */
  146. dynamicColumns: [
  147. { prop: 'guid', label: '编号' },
  148. { prop: 'oilStation', label: '油站名称' },
  149. { prop: 'projectName', label: '项目名称' },
  150. { prop: 'sn', label: '设备SN号' },
  151. { prop: 'key', label: '授权码' },
  152. { prop: 'expiedTime', label: '有效时间' },
  153. { prop: 'state', label: '状态' },
  154. { prop: 'remark', label: '备注' },
  155. ],
  156. /**分页标识 */
  157. pageInput:{
  158. CurrentPage: 1,
  159. PageSize: 10000,
  160. } as pageInput,
  161. /**分页总数 */
  162. total: 0,
  163. } as OilSdkAuthorDto)
  164. /**初始化 */
  165. const init = async () => {
  166. sdkData.loading = true
  167. const query = flattenObject({ Filter: sdkData.Filter})
  168. const res:any = await new OilSdkAuthorAPI().getPageData({...sdkData.pageInput, ...query}).catch(() => {
  169. sdkData.loading = false
  170. })
  171. sdkData.tableModel = res?.data?.list ?? []
  172. sdkData.total = res?.data?.total ?? 0
  173. sdkData.loading = false
  174. }
  175. onMounted(() => {
  176. init()
  177. eventBus.off('refreshView')
  178. eventBus.on('refreshView', async () => {
  179. init()
  180. })
  181. })
  182. onBeforeMount(() => {
  183. eventBus.off('refreshView')
  184. })
  185. /**
  186. * 监听时间变换
  187. */
  188. watch(() => sdkData.time, (newVal ) => {
  189. if(newVal.length === 0){
  190. return
  191. }
  192. sdkData.Filter.BeginTime = newVal?.[0].toString()
  193. sdkData.Filter.EndTime = newVal?.[1].toString()
  194. })
  195. /**条件查询 */
  196. const onQuery = () => {
  197. init()
  198. }
  199. /**重置查询条件 */
  200. const resetQuery = () => {
  201. sdkData.Filter.OilStation = ''
  202. sdkData.Filter.Project = ''
  203. sdkData.Filter.SN = ''
  204. sdkData.Filter.Key = ''
  205. sdkData.Filter.BeginTime = ''
  206. sdkData.Filter.EndTime = ''
  207. sdkData.time = ''
  208. sdkData.pageInput.CurrentPage = 1
  209. }
  210. /**重置 */
  211. const onReset = () => {
  212. resetQuery()
  213. init()
  214. }
  215. /**添加*/
  216. const onAdd = () => {
  217. editDialogRef.value.openDialog()
  218. }
  219. /**页条数变化*/
  220. const onSizeChange = () => {
  221. init()
  222. }
  223. /**页数变化*/
  224. const onCurrentChange = () =>{
  225. init()
  226. }
  227. /**批量导入*/
  228. const uploadFiles = () =>{
  229. }
  230. /**导出表格*/
  231. const exportTable = async(data:any[],columns:{ prop: string, label: string }[]) =>{
  232. // 创建一个新的工作簿
  233. const workbook = new ExcelJS.Workbook();
  234. const worksheet = workbook.addWorksheet('Sheet1');
  235. // 添加表头(不包括名为 "guid" 的表头列)
  236. const headers = columns
  237. .filter(column => column.prop !== 'guid') // 过滤掉名为 "guid" 的表头列
  238. .map(column => column.label);
  239. const headerRow = worksheet.addRow(headers);
  240. // 添加数据行(不包括 "guid" 的数据列)
  241. data.forEach((item) => {
  242. const row = columns
  243. .filter(column => column.prop !== 'guid') // 过滤掉名为 "guid" 的数据列
  244. .map(column => item[column.prop]);
  245. worksheet.addRow(row);
  246. });
  247. // 设置数据行样式
  248. worksheet.eachRow({ includeEmpty: true }, row => {
  249. row.eachCell(cell => {
  250. // 设置单元格样式
  251. cell.font = { bold: false }; // 设置字体为普通样式
  252. cell.border = { top: { style: 'thin' }, bottom: { style: 'thin' } }; // 设置上下边框为细线
  253. cell.alignment = { vertical: 'middle', horizontal: 'center' }; // 将内容垂直居中、水平居中
  254. // 设置单元格高度
  255. row.height = 25; // 设置每一行的高度为 25
  256. });
  257. });
  258. // 设置表头样式
  259. headerRow.font = { bold: true }; // 设置字体为粗体
  260. // 设置整个表格的边框样式
  261. worksheet.eachRow({ includeEmpty: true }, row => {
  262. row.eachCell(cell => {
  263. if (cell.row === 1) {
  264. // 设置表头单元格的边框为细线
  265. cell.border = { left: { style: 'thin' }, right: { style: 'thin' }, top: { style: 'thin' }, bottom: { style: 'thin' } };
  266. // 设置表头单元格背景颜色
  267. cell.fill={type: 'pattern',pattern: 'solid',fgColor: { argb: '409eff' }}
  268. } else {
  269. // 设置数据行单元格的边框为细线
  270. cell.border = { left: { style: 'thin' }, right: { style: 'thin' }, bottom: { style: 'thin' } };
  271. }
  272. });
  273. });
  274. // 调整单元格大小
  275. worksheet.columns.forEach(column => {
  276. column.width = 25; // 设置每列的宽度为 25
  277. });
  278. // 生成 Excel 文件
  279. const buffer = await workbook.xlsx.writeBuffer();
  280. // 将文件保存到本地
  281. const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  282. FileSaver.saveAs(blob, '油气SDK授权数据.xlsx');
  283. }
  284. /**将Filter对象成.的连接方式*/
  285. const flattenObject = (obj, parentKey = '') => {
  286. const result = {};
  287. for (const key in obj) {
  288. if (obj.hasOwnProperty(key)) {
  289. const newKey = parentKey ? `${parentKey}.${key}` : key;
  290. if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
  291. const flattened = flattenObject(obj[key], newKey);
  292. Object.assign(result, flattened);
  293. } else {
  294. result[newKey] = obj[key];
  295. }
  296. }
  297. }
  298. return result;
  299. }
  300. /**编辑弹窗 */
  301. const editTableData = (row) => {
  302. editDialogRef.value.openDialog(row)
  303. }
  304. /**审核弹窗 */
  305. const onAuditRecord=(row)=>{
  306. console.log(row.key)
  307. }
  308. /**授权码为空时显示审核按钮 */
  309. const showAudit=(row):boolean=>{
  310. if(row.key){
  311. return false
  312. }
  313. return true
  314. }
  315. </script>
  316. <style scoped lang="scss">
  317. .my-el-link {
  318. font-size: 12px;
  319. }
  320. .el-form .el-col.mb20 {
  321. margin: 0 !important;
  322. }
  323. .el-input, .el-select {
  324. width: 240px;
  325. }
  326. </style>