admin-ui/src/views/iot/ota-update/update/index.vue

<template>
	<div class="page">
		<el-card shadow="never">
			<el-form :model="tableData.param" ref="queryRef" inline>
				<el-form-item label="升级包名称" prop="keyWord">
					<el-input
						v-model="tableData.param.keyWord"
						placeholder="请输入升级包名称"
						clearable
						style="width: 240px"
						@keyup.enter.native="getList(1)"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" class="ml10" @click="getList(1)">
						<el-icon>
							<ele-Search />
						</el-icon>
						查询
					</el-button>
					<el-button @click="resetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重置
					</el-button>
					<el-button type="primary" v-auth="'add'" @click="onOpenAdd()">
						<el-icon>
							<ele-FolderAdd />
						</el-icon>
						添加升级包
					</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
				<el-table-column label="ID" v-col="'id'" align="center" prop="id" width="100" />
				<el-table-column label="升级包名称" v-col="'name'" prop="name" min-width="120" show-overflow-tooltip />
				<el-table-column prop="types" label="类型" show-overflow-tooltip v-col="'types'">
					<template #default="scope">
						<el-tag size="small" v-if="scope.row.types == 1">整包</el-tag>
						<el-tag type="info" size="small" v-if="scope.row.types == 2">差分</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="所属产品" v-col="'productName'" min-width="120" align="center" show-overflow-tooltip>
					<template #default="scope">
						<router-link :to="'/iotmanager/device/product/detail/' + scope.row.productKey" class="link-type">
							<span>{{ scope.row.productName }}</span>
						</router-link>
					</template>
				</el-table-column>
				<el-table-column label="模块名称" v-col="'moduleName'" align="center" show-overflow-tooltip>
					<template #default="scope">
						<router-link :to="'/iotmanager/operation/ota/module'" class="link-type">
							<span>{{ scope.row.moduleName }}</span>
						</router-link>
					</template>
				</el-table-column>
				<el-table-column label="需要验证" prop="check" v-col="'check'" width="120" align="center">
					<template #default="scope">
						<!-- 1需要，2不需要  -->
						<el-tag size="small" v-if="scope.row.check === 1">需要</el-tag>
						<el-tag type="danger" size="small" v-if="scope.row.check === 2">不需要</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态" prop="checkres" v-col="'checkres'" width="120" align="center">
					<template #default="scope">
						<!-- 升级包验证 0未验证，1验证中 2已验证 -->
						<el-tag size="small" v-if="scope.row.checkres === 1">验证中</el-tag>
						<el-tag type="success" size="small" v-if="scope.row.checkres === 2">已验证</el-tag>
						<el-tag type="danger" size="small" v-if="scope.row.checkres === 0">未验证</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="版本号" prop="version" align="center" width="160" />
				<el-table-column label="创建时间" prop="createdAt" align="center" width="160" />
				<el-table-column label="操作" width="150" v-col="'handle'" align="center" fixed="right">
					<template #default="scope">
						<el-button size="small" text type="primary" v-if="!scope.row.folderName" @click="toDetail(scope.row.id)">查看</el-button>
						<el-button size="small" text type="warning" v-auth="'edit'" @click="onOpenEdit(scope.row)">编辑</el-button>
						<el-button size="small" text type="info" v-auth="'del'" @click="onRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="getList"
			/>
			<EditConfig ref="editRef" @getList="getList(1)" />

			<CheckConfig ref="checkRef" @getList="getList(1)" />
		</el-card>
	</div>
</template>

<script lang="ts">
import api from '/@/api/ota'
import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue'
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
import EditConfig from '/@/views/iot/ota-update/update/component/edit.vue'
import CheckConfig from '/@/views/iot/ota-update/update/component/check.vue'
import { useRouter } from 'vue-router'

// 定义接口来定义对象的类型
interface TableDataRow {
	id: number
	name: string
	types: string
	productName: number
	moduleName: string
	checkres: string
	createdAt: string
}
interface TableDataState {
	ids: number[]
	tableData: {
		data: Array<TableDataRow>
		total: number
		loading: boolean
		param: {
			pageNum: number
			pageSize: number
			keyWord: string
			dateRange: string[]
		}
	}
}

export default defineComponent({
	name: 'apiV1OtaUpdateDataList',
	components: { EditConfig, CheckConfig },
	setup() {
		const router = useRouter()
		const editRef = ref()
		const checkRef = ref()
		const detailRef = ref()
		const queryRef = ref()
		const tabDataList = ref([{ dictLabel: '全部', dictValue: '' }])
		const state = reactive<TableDataState>({
			ids: [],
			tableData: {
				data: [],
				total: 0,
				loading: false,
				param: {
					dateRange: [],
					pageNum: 1,
					pageSize: 20,
					keyWord: '',
				},
			},
		})
		// 页面加载时
		onMounted(() => {
			initTableData()
		})
		// 初始化表格数据
		const initTableData = () => {
			manageList()
		}
		const getList = (pageNum?: number) => {
			typeof pageNum === 'number' && (state.tableData.param.pageNum = pageNum)
			state.tableData.loading = true
			api.manage
				.getList(state.tableData.param)
				.then((res: any) => {
					state.tableData.data = res.firmware
					state.tableData.total = res.Total
				})
				.finally(() => (state.tableData.loading = false))
		}
		// 打开新增弹窗
		const onOpenAdd = () => {
			editRef.value.openDialog()
		}
		// 打开修改弹窗
		const onOpenEdit = (row: TableDataRow) => {
			editRef.value.openDialog(row)
		}
		// 打开详情弹窗
		// const opOpenDetail = (row: TableDataRow) => {
		// };
		const toDetail = (id: number) => {
			router.push(`/iotmanager/operation/ota/update/detail/${id}`)
		}
		// 删除模块
		const onRowDel = (row?: TableDataRow) => {
			let msg = '你确定要删除所选数据？'
			let ids: number[] = []
			if (row) {
				msg = `此操作将永久删除：“${row.name}”，是否继续?`
				ids = [row.id]
			} else {
				ids = state.ids
			}
			if (ids.length === 0) {
				ElMessage.error('请选择要删除的数据。')
				return
			}
			ElMessageBox.confirm(msg, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					api.manage.del(ids).then(() => {
						ElMessage.success('删除成功')
						getList()
					})
				})
				.catch(() => {})
		}
		/** 重置按钮操作 */
		const resetQuery = () => {
			if (!queryRef.value) return
			queryRef.value.resetFields()
			getList(1)
		}
		// 多选框选中数据
		const handleSelectionChange = (selection: TableDataRow[]) => {
			state.ids = selection.map((item) => item.id)
		}
		// 获取列表
		const manageList = () => {
			getList()
		}
		return {
			editRef,
			checkRef,
			queryRef,
			tabDataList,
			toDetail,
			onOpenAdd,
			onOpenEdit,
			onRowDel,
			getList,
			resetQuery,
			handleSelectionChange,
			...toRefs(state),
		}
	},
})
</script>