修改ota升级、模块管理和升级包管理

src/api/ota/index.ts

@@ -7,7 +7,7 @@ export default {
     getList: (data: any) => get('/dev_ota_fireware/list', data),
     del: (ids: number) => del('/dev_ota_fireware/delete', { ids }),
     add: (data: any) => post('/dev_ota_fireware/add', data),
-    edit: (data: any) => post('/dev_ota_fireware/edit', data),
+    edit: (data: any) => put('/dev_ota_fireware/edit', data),
     detail: (id: number) => get('/dev_ota_fireware/get', { id }),
 
   },
@@ -16,14 +16,15 @@ export default {
     getList: (data: any) => get('/dev_ota_module/list', data),
     del: (ids: number) => del('/dev_ota_module/delete', { ids }),
     add: (data: any) => post('/dev_ota_module/add', data),
-    edit: (data: any) => post('/dev_ota_module/edit', data),
+    edit: (data: any) => put('/dev_ota_module/edit', data),
+    detail: (id: number) => get('/dev_ota_module/get', { id }),
   },
   batch: {
     getList: (data: any) => get('/dev_ota_strategy/list', data),
     getDeviceList: (data: any) => get('/product/device/list', data),
     del: (ids: number) => del('/dev_ota_strategy/delete', { ids }),
     add: (data: any) => post('/dev_ota_strategy/add', data),
-    edit: (data: any) => post('/dev_ota_strategy/edit', data),
+    edit: (data: any) => put('/dev_ota_strategy/edit', data),
   },
   device: {
     getList: (data: any) => get('/dev_ota_detail/list', data),

src/hooks/useCommon.ts

@@ -40,7 +40,7 @@ export function useSearch<T>(api: any, resKey: string, expandParams?: any) {
   const tableData = ref<T[] | any[]>([])
 
   const getList = async (pageNum?: number) => {
-    pageNum && (params.pageNum = pageNum);
+    // pageNum && (params.pageNum = pageNum);
     tableData.value = [];
     loading.value = true;
     params.total = 0;

src/views/iot/ota-update/module/component/edit.vue

@@ -0,0 +1,138 @@
+<template>
+	<div class="ota-edit-module-container">
+		<el-dialog :title="(ruleForm.id!==0?'修改':'添加')+'模块'" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
+				<el-form-item label="所属产品" prop="productId">
+					<el-select v-model="ruleForm.productId" placeholder="请选择产品">
+						<el-option v-for="item in productData" :key="item.name" :label="item.name" :value="item.id.toString()" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="模块名称" prop="name">
+					<el-input v-model="ruleForm.name" placeholder="请输入模块名称" />
+				</el-form-item>
+				<el-form-item label="模块别名" prop="nameAs">
+					<el-input v-model="ruleForm.nameAs" placeholder="请输入模块别名" />
+				</el-form-item>
+				<el-form-item label="模块描述" prop="describe">
+					<el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入内容" />
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+				<el-button @click="onCancel" size="default">取 消</el-button>
+				<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.id!==0?'修 改':'添 加'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance,} from 'vue';
+import { ElMessage } from 'element-plus';
+import api from '/@/api/ota';
+interface RuleFormState {
+  id: number;
+  name: string;
+  nameAs: string;
+  productId: '';
+  describe: string;
+}
+interface ModuleState {
+  isShowDialog: boolean;
+  ruleForm: RuleFormState;
+  productData: [],
+  rules: {};
+}
+
+export default defineComponent({
+  name: 'otaEditModuleData',
+  setup(prop, { emit }) {
+    const formRef = ref<HTMLElement | null>(null);
+    const state = reactive<ModuleState>({
+      isShowDialog: false,
+      ruleForm: {
+        id: 0,
+        name: '',
+        nameAs: '',
+        productId: '',
+		    describe: '',
+      },
+	    productData: [],
+      rules: {
+        productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
+        name: [{ required: true, message: '模块名称不能为空', trigger: 'blur' }],
+        nameAs: [{ required: true, message: '模块别名不能为空', trigger: 'blur' }],
+      },
+    });
+    // 打开弹窗
+    const openDialog = (row: RuleFormState | null) => {
+      resetForm();
+      if (row) {
+        api.module.detail(row.id).then((res: any) => {
+          const data: RuleFormState = res.data.data;
+          state.ruleForm = data;
+        });
+		
+        state.ruleForm = row;
+      }
+
+      // 获取产品列表
+      api.module.getSubList().then((res: any) => {
+        state.productData = res.product;
+      });
+
+      state.isShowDialog = true;
+    };
+    const resetForm = () => {
+      state.ruleForm = {
+        id: 0,
+        name: '',
+        nameAs: '',
+        productId: '',
+        describe: '',
+      };
+    };
+    // 关闭弹窗
+    const closeDialog = () => {
+      state.isShowDialog = false;
+    };
+    // 取消
+    const onCancel = () => {
+      closeDialog();
+    };
+    // 新增
+    const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if (state.ruleForm.id !== 0) {
+            //修改
+            api.module.edit(state.ruleForm).then(() => {
+              ElMessage.success('模块修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('getList');
+            });
+          } else {
+            //添加
+            api.module.add(state.ruleForm).then(() => {
+              ElMessage.success('模块添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('getList');
+            });
+          }
+        }
+      });
+    };
+    return {
+      openDialog,
+      closeDialog,
+      onCancel,
+      onSubmit,
+      formRef,
+      ...toRefs(state),
+    };
+  },
+});
+</script>

src/views/iot/ota-update/module/edit.vue

@@ -1,113 +0,0 @@
-<template>
-	<el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑模块' : '新增模块'}`" width="600px"
-		:close-on-click-modal="false" :close-on-press-escape="false">
-		<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="80px">
-
-
-		
-			<el-form-item label="所属产品" prop="productId">
-				<el-select v-model="formData.productId" filterable placeholder="请选择产品">
-					<el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id.toString()" value-key="id">
-					</el-option>
-				</el-select>
-			</el-form-item>
-			<el-form-item label="模块名称" prop="name">
-				<el-input v-model="formData.name" placeholder="请输入模块名称" />
-			</el-form-item>
-			
-			<el-form-item label="模块别名" prop="nameAs">
-				<el-input v-model="formData.nameAs" placeholder="请输入模块别名" />
-			</el-form-item>
-
-			
-			<el-form-item label="模块描述" prop="describe">
-				<el-input v-model="formData.describe" type="textarea" :rows="3" />
-			</el-form-item>
-
-		</el-form>
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button @click="showDialog = false">取消</el-button>
-				<el-button type="primary" @click="onSubmit">确定</el-button>
-			</div>
-		</template>
-	</el-dialog>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, nextTick } from 'vue';
-import api from '/@/api/ota';
-import { ruleRequired } from '/@/utils/validator';
-import { ElMessage } from 'element-plus';
-import uploadFile from '/@/components/upload/uploadFile.vue'
-
-
-const emit = defineEmits(['getList']);
-
-const showDialog = ref(false);
-const formRef = ref();
-const productData=ref([{
-	'id':'',
-	'name':'',
-}]);
-
-const baseForm = {
-	id: undefined,
-	name: '',
-	productId: '',
-	nameAs: '',
-	describe: '',
-};
-
-const formData = reactive({
-	...baseForm,
-});
-
-const ruleForm = {
-	name: [ruleRequired('模块名称不能为空')],
-	productId: [ruleRequired('所属产品不能为空')],
-};
-
-const onSubmit = async () => {
-	await formRef.value.validate();
-
-	const theApi = formData.id ? api.module.edit : api.module.add;
-
-	await theApi(formData);
-
-	ElMessage.success('操作成功');
-	resetForm();
-	showDialog.value = false;
-	emit('getList');
-};
-
-const resetForm = async () => {
-	Object.assign(formData, { ...baseForm });
-	formRef.value && formRef.value.resetFields();
-};
-const getProductList = () => {
-			api.module.getSubList().then((res: any) => {
-				let productDataList = res.product;
-				productData.value = productDataList;
-	
-			});
-		};
-const open = async (row: any) => {
-	getProductList();
-
-	resetForm();
-	showDialog.value = true;
-	nextTick(() => {
-		Object.assign(formData, { ...row });
-	});
-};
-
-defineExpose({ open });
-</script>
-<style>
-.vertical-form-item {
-	display: block;
-	margin-bottom: 10px;
-	/* 可选，设置间距 */
-}
-</style>

src/views/iot/ota-update/module/index.vue

@@ -1,107 +1,205 @@
 <template>
-	<el-card shadow="hover">
-		<div class="search">
-			<el-form :inline="true" ref="queryRef">
-				<el-form-item label="模块名称：" prop="name">
-					<el-input
-						v-model="params.keyWord"
-						placeholder="请输入产品名称"
-						clearable
-						size="default"
-						style="width: 240px"
-						@keyup.enter.native="getList"
-					/>
-				</el-form-item>
-				<el-form-item label="所属产品" prop="productId">
-					<el-select v-model="params.productId" filterable placeholder="请选择产品">
-						<el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id.toString()" value-key="id"> </el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item>
-					<el-button size="default" type="primary" class="ml10" @click="getList()">
-						<el-icon>
-							<ele-Search />
-						</el-icon>
-						查询
-					</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" v-auth="'add'" @click="addOrEdit()">
-						<el-icon>
-							<ele-FolderAdd />
-						</el-icon>
-						添加模块
-					</el-button>
-				</el-form-item>
-			</el-form>
-		</div>
-		<el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
-			<el-table-column prop="id" label="ID" width="60" show-overflow-tooltip  v-col="'id'"></el-table-column>
-			<el-table-column prop="name" label="模块名称" show-overflow-tooltip  v-col="'name'"></el-table-column>
-			<el-table-column prop="nameAs" label="模块别名" show-overflow-tooltip   v-col="'nameAs'"></el-table-column>
-			<el-table-column prop="ProductName" label="所属产品" show-overflow-tooltip   v-col="'ProductName'"></el-table-column>
+	<div class="ota-module-container">
+		<el-card shadow="hover">
+			<div class="ota-module-search mb15">
+				<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+					<el-form-item label="模块名称" prop="name">
+						<el-input
+							v-model="tableData.param.keyWord"
+							placeholder="请输入产品名称"
+							clearable
+							size="default"
+							style="width: 200px;"
+							@keyup.enter.native="getList"
+						/>
+					</el-form-item>
+					<el-form-item label="所属产品" prop="productId">
+						<el-select v-model="tableData.param.productId" filterable placeholder="请选择产品">
+							<el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id.toString()" value-key="id"> </el-option>
+						</el-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" class="ml10" @click="getList">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button size="default" @click="resetQuery(queryRef)">
+							<el-icon>
+								<ele-Refresh />
+							</el-icon>
+							重置
+						</el-button>
+						<el-button type="primary" v-auth="'add'" @click="onOpenAddDic()">
+							<el-icon>
+								<ele-FolderAdd />
+							</el-icon>
+							添加模块
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
 
-			<el-table-column prop="createdAt" label="创建时间" min-width="100" align="center" v-col="'createdAt'"></el-table-column>
-			<el-table-column label="操作" width="200" align="center">
-				<template #default="scope">
-					<el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
-					<el-button size="small" text type="danger" v-auth="'del'" @click="del(scope.row)">删除</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
-		<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
-		<EditForm ref="editFormRef" @getList="getList()"></EditForm>
-	</el-card>
+			<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="60" />
+				<el-table-column label="模块名称" v-col="'name'" prop="name" :show-overflow-tooltip="true" />
+				<el-table-column label="模块别名" v-col="'nameAs'" prop="nameAs" :show-overflow-tooltip="true" />
+				<el-table-column label="所属产品" v-col="'ProductName'" prop="ProductName" width="260" />
+				<el-table-column label="创建时间" prop="createdAt" align="center" />
+				<el-table-column label="操作" width="100" v-col="'handle'" align="center" fixed="right">
+          <template #default="scope">
+            <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">修改</el-button>
+            <el-button size="small" text type="info" @click="onRowDel(scope.row)" v-auth="'del'">删除</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="editDicRef" @getList="getList" />
+		</el-card>
+	</div>
 </template>
   
-<script lang="ts" setup>
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
 import api from '/@/api/ota'
-import { useSearch } from '/@/hooks/useCommon'
-import { ElMessageBox, ElMessage } from 'element-plus'
-import EditForm from './edit.vue'
-import { ref } from 'vue'
+import { ElMessageBox, ElMessage, FormInstance} from 'element-plus'
+// import EditConfig from './edit.vue'
+import EditConfig from '/@/views/iot/ota-update/module/component/edit.vue';
 
-const queryRef = ref()
-const productData = ref([
-	{
-		id: '',
-		name: '',
-	},
-])
-const editFormRef = ref()
-
-const { params, tableData, getList, loading } = useSearch<any[]>(api.module.getList, 'Data', { keyWord: '' })
-
-getList()
-const getProductList = () => {
-	api.module.getSubList().then((res: any) => {
-		let productDataList = res.product
-		productData.value = productDataList
-	})
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  id: number;
+  name: string;
+  nameAs: string;
+  ProductName: number;
+  createdAt: string;
 }
-getProductList()
-
-const addOrEdit = async (row?: any) => {
-	if (row) {
-		editFormRef.value.open(row)
-		return
-	} else {
-		editFormRef.value.open()
-	}
+interface TableDataState {
+  ids: number[];
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+    param: {
+      pageNum: number;
+      pageSize: number;
+      keyWord: string;
+      productId: string;
+      dateRange: string[];
+    };
+  };
 }
 
+export default defineComponent({
+  name: 'apiV1OtaModuleDataList',
+  components: { EditConfig },
+  setup() {
+    const { proxy } = getCurrentInstance() as any;
+    const addDicRef = ref();
+    const editDicRef = 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: 10,
+          keyWord: '',
+          productId: '',
+        },
+      },
+	  productData: [],
+    });
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      moduleList();
+    };
+    const getList = () => {
+      state.tableData.loading = true;
+      api.module
+        .getList(state.tableData.param)
+        .then((res: any) => {
+          state.tableData.data = res.Data;
+          state.tableData.total = res.Total;
+        })
+        .finally(() => (state.tableData.loading = false));
+    };
+    // 打开新增弹窗
+    const onOpenAddDic = () => {
+      editDicRef.value.openDialog();
+    };
+    // 打开修改弹窗
+    const onOpenEditDic = (row: TableDataRow) => {
+      editDicRef.value.openDialog(row);
+    };
+    // 删除模块
+    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.module.del(ids).then(() => {
+            ElMessage.success('删除成功');
+            getList();
+          });
+        })
+        .catch(() => { });
+    };
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return;
+      formEl.resetFields();
+      getList();
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection: TableDataRow[]) => {
+      state.ids = selection.map((item) => item.id);
+    };
+    // 获取列表
+    const moduleList = () => {
+      getList();
 
-
-const del = (row: any) => {
-	ElMessageBox.confirm(`此操作将删除模型：“${row.name}”，是否继续?`, '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
-		type: 'warning',
-	}).then(async () => {
-		await api.module.del(row.id)
-		ElMessage.success('删除成功')
-		getList()
-	})
-}
+      api.module.getSubList().then((res: any) => {
+        state.productData = res.product;
+      });
+    };
+    return {
+      addDicRef,
+      editDicRef,
+      queryRef,
+      tabDataList,
+      onOpenAddDic,
+      onOpenEditDic,
+      onRowDel,
+      getList,
+      resetQuery,
+      handleSelectionChange,
+      ...toRefs(state),
+    };
+  },
+});
 </script>
   

src/views/iot/ota-update/update/check.vue

@@ -1,142 +0,0 @@
-<template>
-	<el-dialog
-		class="api-edit"
-		v-model="showDialog"
-		:title="`${formData.id ? '编辑批次' : '新增批次'}`"
-		width="768px"
-		:close-on-click-modal="false"
-		:close-on-press-escape="false"
-	>
-		<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="160px">
-
-			<el-form-item label="批次名称" prop="name">
-				<el-input v-model="formData.name" placeholder="请输入批次名称" />
-			</el-form-item>
-			<el-form-item label="待升级版本号" prop="waitVersion" >
-				<el-input v-model="formData.waitVersion" placeholder="请输入待升级版本号" />
-			</el-form-item>
-
-			<el-form-item label="协议方式" prop="method">
-				<el-radio-group v-model="formData.method">
-					<el-radio label="1">http</el-radio>
-					<el-radio label="2">https</el-radio>
-					<el-radio label="3">mqtt</el-radio>
-				</el-radio-group>
-			</el-form-item>
-			<el-form-item label="所属设备" prop="devices" v-if="formData.method=='3'">
-				<el-select v-model="formData.devices" filterable placeholder="请选择设备" >
-					<el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id.toString()" value-key="id"> </el-option>
-				</el-select>
-			</el-form-item>
-
-			<el-form-item label="升级方式" prop="stratege">
-				<el-radio-group v-model="formData.stratege">
-					<el-radio label="1">静态升级</el-radio>
-					<el-radio label="2">动态升级</el-radio>
-				</el-radio-group>
-			</el-form-item>
-
-			<el-form-item label="主动推送" prop="push">
-				<el-radio-group v-model="formData.push">
-					<el-radio label="1">是</el-radio>
-					<el-radio label="2">否</el-radio>
-				</el-radio-group>
-			</el-form-item>
-
-			
-		</el-form>
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button @click="showDialog = false">取消</el-button>
-				<el-button type="primary" @click="onSubmit">确定</el-button>
-			</div>
-		</template>
-	</el-dialog>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, nextTick } from 'vue'
-import api from '/@/api/ota'
-import { ruleRequired } from '/@/utils/validator'
-import { ElMessage } from 'element-plus'
-
-
-const emit = defineEmits(['getList'])
-
-const showDialog = ref(false)
-const formRef = ref()
-
-const productData = ref([
-	{
-		id: '',
-		name: '',
-	},
-])
-const baseForm = {
-	id: undefined,
-	method: '1',
-	push: '1',
-	name: '',
-	devices: '',
-	stratege: '1',
-	waitVersion: '',
-	devOtaFirewareId: '',
-	productId:'',
-}
-
-const formData = reactive({
-	...baseForm,
-})
-
-const ruleForm = {
-	method: [ruleRequired('请选择批次类型')],
-	name: [ruleRequired('批次名称不能为空')],
-	productId: [ruleRequired('请选择所属产品')],
-	devices: [ruleRequired('请选择批次模块')],
-	stratege: [ruleRequired('批次版本号不能为空')],
-	waitVersion: [ruleRequired('升级后版本号不能为空')],
-}
-
-
-const onSubmit = async () => {
-	await formRef.value.validate()
-
-	const theApi = formData.id ? api.batch.edit : api.batch.add
-	await theApi(formData)
-	ElMessage.success('操作成功')
-	resetForm()
-	showDialog.value = false
-	emit('getList')
-}
-
-const getProductList = () => {
-	api.batch.getDeviceList({productId:formData.productId}).then((res: any) => {
-		let productDataList = res.device
-		productData.value = productDataList
-	})
-}
-
-const resetForm = async () => {
-	Object.assign(formData, { ...baseForm })
-	formRef.value && formRef.value.resetFields()
-}
-
-const open = async (row: any) => {
-	resetForm()
-	showDialog.value = true
-	nextTick(() => {
-		Object.assign(formData, { ...row })
-		getProductList()
-
-	})
-}
-
-defineExpose({ open })
-</script>
-<style>
-.vertical-form-item {
-	display: block;
-	margin-bottom: 10px;
-	/* 可选，设置间距 */
-}
-</style>

src/views/iot/ota-update/update/component/batch.vue

@@ -1,120 +1,261 @@
-
 <template>
-	<el-card shadow="hover">
-		<div class="search">
-			<el-form :inline="true" ref="queryRef">
-				<el-form-item label="批次名称：" prop="name">
-					<el-input v-model="params.keyWord" placeholder="请输入产品名称" clearable size="default" style="width: 240px"
-						@keyup.enter.native="getList" />
-				</el-form-item>
-
-				<el-form-item>
-
-					<el-button size="default" type="primary" class="ml10" @click="getList()">
-						<el-icon>
-							<ele-Search />
-						</el-icon>
-						查询
-					</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="CheckUpdate()">
-						<el-icon>
-							<ele-FolderAdd />
-						</el-icon>
-						添加批次
-					</el-button>
+  <div class="ota-module-container">
+    <el-card shadow="hover">
+      <div class="ota-module-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="90px">
+          <el-form-item label="批次名称：" prop="name">
+            <el-input v-model="tableData.param.keyWord" placeholder="请输入批次名称" clearable size="default" style="width: 240px"
+              @keyup.enter.native="getList" />
+          </el-form-item>
 
-				</el-form-item>
-			</el-form>
-		</div>
-		<el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
-			<el-table-column prop="id" label="ID" width="60" show-overflow-tooltip></el-table-column>
-			<el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
-			<el-table-column prop="waitVersion" label="待升级版本号" show-overflow-tooltip></el-table-column>
-			<el-table-column prop="method" label="协议方式" show-overflow-tooltip>
-				<template #default="scope">
-					<el-tag size="small" v-if="scope.row.method == 1">http</el-tag>
-					<el-tag size="small" v-if="scope.row.method == 2">https</el-tag>
-					<el-tag size="small" v-if="scope.row.method == 3">mqtt</el-tag>
-				</template>
-			</el-table-column>
-			<el-table-column prop="stratege" label="升级方式" show-overflow-tooltip>
-				<template #default="scope">
-					<el-tag size="small" v-if="scope.row.stratege == 1">静态升级 </el-tag>
-					<el-tag size="small" v-if="scope.row.stratege == 2">动态升级</el-tag>
-				</template>
-			</el-table-column>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="getList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <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-table-column prop="push" label="主动推送" show-overflow-tooltip>
-				<template #default="scope">
-					<el-tag size="small" v-if="scope.row.push == 1">是 </el-tag>
-					<el-tag size="small" v-if="scope.row.push == 2">否</el-tag>
-				</template>
-			</el-table-column>
-			<el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"></el-table-column>
-			<!-- <el-table-column label="操作" width="200" align="center">
-				<template #default="scope">
-					<el-button size="small" text type="warning" v-auth="'edit'" @click="CheckUpdate(scope.row)">编辑</el-button>
-					<el-button size="small" text type="danger" v-auth="'del'" @click="del(scope.row)">删除</el-button>
-				</template>
-			</el-table-column> -->
-		</el-table>
-		<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize"
-			@pagination="getList()" />
-
-	</el-card>
-	<CheckForm ref="checkFormRef" @getList="getList()"></CheckForm>
+			  </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
+        <el-table-column prop="id" label="ID" width="60" />
+        <el-table-column prop="name" label="名称" />
+        <el-table-column prop="waitVersion" label="待升级版本号" />
+        <el-table-column prop="method" label="协议方式" show-overflow-tooltip>
+          <template #default="scope">
+            <el-tag size="small" v-if="scope.row.method == 1">http</el-tag>
+            <el-tag size="small" v-if="scope.row.method == 2">https</el-tag>
+            <el-tag size="small" v-if="scope.row.method == 3">mqtt</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stratege" label="升级方式" show-overflow-tooltip>
+          <template #default="scope">
+            <el-tag size="small" v-if="scope.row.stratege == 1">静态升级 </el-tag>
+            <el-tag size="small" v-if="scope.row.stratege == 2">动态升级</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="push" label="主动推送" show-overflow-tooltip>
+          <template #default="scope">
+            <el-tag size="small" v-if="scope.row.push == 1">是 </el-tag>
+            <el-tag size="small" v-if="scope.row.push == 2">否</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" min-width="100" align="center" />
+        <!-- <el-table-column label="操作" width="200" align="center">
+          <template #default="scope">
+            <el-button size="small" text type="warning" v-auth="'edit'" @click="CheckUpdate(scope.row)">编辑</el-button>
+            <el-button size="small" text type="danger" v-auth="'del'" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column> -->
+      </el-table>
+<!--      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize"-->
+<!--        @pagination="getList()" />-->
+<!--      <CheckForm ref="checkFormRef" @getList="getList()"></CheckForm>-->
+      <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="getList" />
+      <CheckConfig ref="checkRef" @getList="getList" />
+	  </el-card>
+  </div>
 </template>
   
-<script lang="ts" setup>
+<script lang="ts">
 import api from '/@/api/ota';
-import { useSearch } from '/@/hooks/useCommon';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-import CheckForm from '../check.vue';
-
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-const props = defineProps({
-	detail: {
-		type: Object,
-		default: () => { }
-	},
-})
-const queryRef = ref();
-const router = useRouter();
-
-const checkFormRef = ref();
-
-const { params, tableData, getList, loading } = useSearch<any[]>(api.batch.getList, 'Data', { devOtaFirewareId: props.detail.id });
-
-getList();
-
-const CheckUpdate = async (row?: any) => {
-	if (row) {
-		checkFormRef.value.open(row);
-		return;
-	} else {
-
-		let array={
-			productId:props.detail.productId,
-			devOtaFirewareId:props.detail.id
-		}
-		checkFormRef.value.open(array);
-	}
-};
-
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage, FormInstance} from 'element-plus'
+import CheckConfig from '/@/views/iot/ota-update/update/component/check.vue';
 
-const del = (row: any) => {
-	ElMessageBox.confirm(`此操作将删除图形：“${row.name}”，是否继续?`, '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
-		type: 'warning',
-	}).then(async () => {
-		await api.manage.del(row.id);
-		ElMessage.success('删除成功');
-		getList();
-	});
-};
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  id: number;
+  name: string;
+  waitVersion: string;
+  method: number;
+  stratege: string;
+  push: string;
+  createdAt: string;
+}
+interface TableDataState {
+  ids: number[];
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+    param: {
+      id: number;
+      pageNum: number;
+      pageSize: number;
+      keyWord: string;
+      dateRange: string[];
+      devOtaFirewareId: number;
+    };
+  };
+}
+export default defineComponent({
+  components: { CheckConfig },
+  props: {
+    detail: {
+      type: Object,
+      default: ''
+    }
+  },
+  setup(props) {
+    const checkRef = ref();
+    const queryRef = ref();
+    const tabDataList = ref([{dictLabel: '全部', dictValue: ''}]);
+    const state = reactive<TableDataState>({
+      ids: [],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          id: 0,
+          dateRange: [],
+          pageNum: 1,
+          pageSize: 10,
+          keyWord: '',
+          devOtaFirewareId: 0,
+        },
+      },
+    });
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      batchList();
+    };
+    const getList = () => {
+      state.tableData.loading = true;
+      state.tableData.param.devOtaFirewareId = props.detail.id;
+      api.batch
+          .getList(state.tableData.param)
+          .then((res: any) => {
+            state.tableData.data = res.Data;
+            state.tableData.total = res.Total;
+          })
+          .finally(() => (state.tableData.loading = false));
+    };
+    // 打开新增弹窗
+    const onOpenAdd = () => {
+      state.tableData.param.id = props.detail.id;
+      checkRef.value.openDialog(state.tableData.param);
+    };
+    // 删除模块
+    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.batch.del(ids).then(() => {
+          ElMessage.success('删除成功');
+          getList();
+        });
+      })
+          .catch(() => { });
+    };
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return;
+      formEl.resetFields();
+      getList();
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection: TableDataRow[]) => {
+      state.ids = selection.map((item) => item.id);
+    };
+    // 获取列表
+    const batchList = () => {
+      getList();
+    };
+    return {
+      checkRef,
+      queryRef,
+      tabDataList,
+      onOpenAdd,
+      onRowDel,
+      getList,
+      resetQuery,
+      handleSelectionChange,
+      ...toRefs(props),
+      ...toRefs(state),
+    };
+  },
+});
+// import api from '/@/api/ota';
+// import { useSearch } from '/@/hooks/useCommon';
+// import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+// // import CheckForm from '../check.vue';
+// import CheckForm from '/@/views/iot/ota-update/update/component/check.vue';
+//
+// import { ref } from 'vue';
+// import { useRouter } from 'vue-router';
+// const props = defineProps({
+// 	detail: {
+// 		type: Object,
+// 		default: () => { }
+// 	},
+// })
+// const queryRef = ref();
+// const router = useRouter();
+//
+// const checkFormRef = ref();
+//
+// const { params, tableData, getList, loading } = useSearch<any[]>(api.batch.getList, 'Data', { devOtaFirewareId: props.detail.id });
+//
+// getList();
+//
+// const CheckUpdate = async (row?: any) => {
+// 	if (row) {
+// 		checkFormRef.value.open(row);
+// 		return;
+// 	} else {
+// 		let array = {
+// 			productId: props.detail.productId,
+// 			devOtaFirewareId: props.detail.id
+// 		}
+// 		checkFormRef.value.open(array);
+// 	}
+// };
+//
+//
+// const del = (row: any) => {
+// 	ElMessageBox.confirm(`此操作将删除图形：“${row.name}”，是否继续?`, '提示', {
+// 		confirmButtonText: '确认',
+// 		cancelButtonText: '取消',
+// 		type: 'warning',
+// 	}).then(async () => {
+// 		await api.manage.del(row.id);
+// 		ElMessage.success('删除成功');
+// 		getList();
+// 	});
+// };
 </script>
   

src/views/iot/ota-update/update/component/check.vue

@@ -0,0 +1,250 @@
+<template>
+	<!-- <el-dialog
+		class="api-edit"
+		v-model="showDialog"
+		:title="`${formData.id ? '编辑批次' : '新增批次'}`"
+		width="768px"
+		:close-on-click-modal="false"
+		:close-on-press-escape="false">
+		<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="160px"> -->
+	<div class="ota-edit-module-container">
+		<el-dialog :title="'验证升级包'" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="160px">
+				<el-form-item label="批次名称" prop="name">
+					<el-input v-model="ruleForm.name" placeholder="请输入批次名称" />
+				</el-form-item>
+
+				<el-form-item label="待升级版本号" prop="waitVersion">
+					<el-input v-model="ruleForm.waitVersion" placeholder="请输入待升级版本号" />
+				</el-form-item>
+
+				<el-form-item label="协议方式" prop="method">
+					<el-radio-group v-model="ruleForm.method">
+						<el-radio label="1">http</el-radio>
+						<el-radio label="2">https</el-radio>
+						<el-radio label="3">mqtt</el-radio>
+					</el-radio-group>
+				</el-form-item>
+
+				<el-form-item label="所属设备" prop="devices" v-if="ruleForm.method == '3'">
+					<el-select v-model="ruleForm.devices" placeholder="请选择设备" >
+						<el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id.toString()" />
+					</el-select>
+				</el-form-item>
+
+				<el-form-item label="升级方式" prop="stratege">
+					<el-radio-group v-model="ruleForm.stratege">
+						<el-radio label="1">静态升级</el-radio>
+						<el-radio label="2">动态升级</el-radio>
+					</el-radio-group>
+				</el-form-item>
+
+				<el-form-item label="主动推送" prop="push">
+					<el-radio-group v-model="ruleForm.push">
+						<el-radio label="1">是</el-radio>
+						<el-radio label="2">否</el-radio>
+					</el-radio-group>
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+				<el-button @click="onCancel" size="default">取 消</el-button>
+				<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.id!==0?'修 改':'添 加'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, unref} from 'vue';
+import { ElMessage } from 'element-plus';
+import api from '/@/api/ota';
+
+interface RuleFormState {
+  id: number;
+  name: string;
+  waitVersion: string;
+  method: string;
+  devices: string;
+  stratege: string;
+  devOtaFirewareId: number;
+  push: string;
+}
+interface UpdateState {
+  isShowDialog: boolean;
+  ruleForm: RuleFormState;
+  productData: [];
+  rules: {};
+}
+
+export default defineComponent({
+  name: 'otaEditUpdateData',
+  setup(prop, { emit }) {
+    const formRef = ref<HTMLElement | null>(null);
+    const state = reactive<UpdateState>({
+		isShowDialog: false,
+		ruleForm: {
+			id: 0,
+			name: '',
+			waitVersion: '',
+			method: '',
+			devices: '',
+			stratege: '',
+      devOtaFirewareId: 0,
+			push: '',
+		},
+	  	productData: [],
+      	rules: {
+        	name: [{ required: true, message: '批次名称不能为空', trigger: 'blur' }],
+			    waitVersion: [{ required: true, message: '待升级版本号不能为空', trigger: 'blur' }],
+			    method: [{ required: true, message: '协议方式不能为空', trigger: 'blur' }],
+			    stratege: [{ required: true, message: '升级方式不能为空', trigger: 'blur' }],
+			    devices: [{ required: true, message: '所属设备不能为空', trigger: 'blur' }],
+          push: [{ required: true, message: '推送方式不能为空', trigger: 'blur' }],
+      	},
+    });
+    // 打开弹窗
+    const openDialog = (row: RuleFormState | null) => {
+      resetForm();
+      if (row) {
+        // api.manage.detail(row.id).then((res: any) => {
+          state.ruleForm.devOtaFirewareId = row.id;
+        // });
+      }
+      state.isShowDialog = true;
+    };
+    const resetForm = () => {
+      	state.ruleForm = {
+        	id: 0,
+          name: '',
+          waitVersion: '',
+          method: '',
+          devices: '',
+          stratege: '',
+          devOtaFirewareId: 0,
+          push: '',
+      	};
+    };
+    // 关闭弹窗
+    const closeDialog = () => {
+      state.isShowDialog = false;
+    };
+    // 取消
+    const onCancel = () => {
+      closeDialog();
+    };
+    // 新增
+    const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if (state.ruleForm.id !== 0) {
+            //修改
+            api.batch.edit(state.ruleForm).then(() => {
+              ElMessage.success('升级包修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('getList');
+            });
+          } else {
+            //添加
+            api.batch.add(state.ruleForm).then(() => {
+              ElMessage.success('升级包添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('getList');
+            });
+          }
+        }
+      });
+    };
+    return {
+      openDialog,
+      closeDialog,
+      onCancel,
+      onSubmit,
+      formRef,
+      ...toRefs(state),
+    };
+  },
+});
+
+
+// import { ref, reactive, nextTick } from 'vue'
+// import api from '/@/api/ota'
+// import { ruleRequired } from '/@/utils/validator'
+// import { ElMessage } from 'element-plus'
+
+
+// const emit = defineEmits(['getList'])
+
+// const showDialog = ref(false)
+// const formRef = ref()
+
+// const productData = ref([
+// 	{
+// 		id: '',
+// 		name: '',
+// 	},
+// ])
+// const baseForm = {
+// 	id: undefined,
+// 	method: '1',
+// 	push: '1',
+// 	name: '',
+// 	devices: '',
+// 	stratege: '1',
+// 	waitVersion: '',
+// 	devOtaFirewareId: '',
+// 	productId:'',
+// }
+
+// const formData = reactive({
+// 	...baseForm,
+// })
+
+// const ruleForm = {
+// 	method: [ruleRequired('请选择批次类型')],
+// 	name: [ruleRequired('批次名称不能为空')],
+// 	productId: [ruleRequired('请选择所属产品')],
+// 	devices: [ruleRequired('请选择批次模块')],
+// 	stratege: [ruleRequired('批次版本号不能为空')],
+// 	waitVersion: [ruleRequired('升级后版本号不能为空')],
+// }
+
+
+// const onSubmit = async () => {
+// 	await formRef.value.validate()
+
+// 	const theApi = formData.id ? api.batch.edit : api.batch.add
+// 	await theApi(formData)
+// 	ElMessage.success('操作成功')
+// 	resetForm()
+// 	showDialog.value = false
+// 	emit('getList')
+// }
+
+// const getProductList = () => {
+// 	api.batch.getDeviceList({productId:formData.productId}).then((res: any) => {
+// 		let productDataList = res.device
+// 		productData.value = productDataList
+// 	})
+// }
+
+// const resetForm = async () => {
+// 	Object.assign(formData, { ...baseForm })
+// 	formRef.value && formRef.value.resetFields()
+// }
+
+// const open = async (row: any) => {
+// 	resetForm()
+// 	showDialog.value = true
+// 	nextTick(() => {
+// 		Object.assign(formData, { ...row })
+// 		getProductList()
+
+// 	})
+// }
+
+// defineExpose({ open })
+</script>

src/views/iot/ota-update/update/component/edit.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="ota-edit-module-container">
+    <el-dialog :title="(ruleForm.id!==0?'修改':'添加')+'升级包'" v-model="isShowDialog" width="769px">
+      <el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="160px">
+        <el-form-item label="升级包类型" prop="typo">
+          <el-radio-group v-model="ruleForm.typo">
+            <el-radio label="1">整包</el-radio>
+            <el-radio label="2">差分</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="升级包名称" prop="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入升级包名称"/>
+        </el-form-item>
+
+        <el-form-item label="所属产品" prop="productId">
+          <el-select v-model="ruleForm.productId" placeholder="请选择产品" @change="seletChange">
+            <el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id.toString()"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="升级包模块" prop="module">
+          <el-select v-model="ruleForm.module" placeholder="请选择产品">
+            <el-option v-for="item in moduleData" :key="item.id" :label="item.name" :value="item.id.toString()"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="升级包版本号" prop="version" v-if="ruleForm.typo == '1'">
+          <el-input v-model="ruleForm.version" placeholder="请输入待升级包版本号"/>
+        </el-form-item>
+
+        <el-form-item label="待升级版本号" prop="waitVersion" v-if="ruleForm.typo == '2'">
+          <el-input v-model="ruleForm.waitVersion" placeholder="请输入待升级版本号"/>
+        </el-form-item>
+
+        <el-form-item label="升级后版本号" prop="afterVersion" v-if="ruleForm.typo == '2'">
+          <el-input v-model="ruleForm.afterVersion" placeholder="请输入升级后版本号"/>
+        </el-form-item>
+
+        <el-form-item label="算法签名" prop="are">
+          <el-select v-model="ruleForm.are" placeholder="请选择算法签名">
+            <el-option v-for="item in areType" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="选择升级包" prop="url">
+          <el-upload :accept="['.bin','.tar','.gz','.tar.xz','.zip','.gzip','.apk','.dav','.pack']"
+                     :show-file-list="false" :limit="1" :headers="headers" :action="uploadUrl" :on-success="updateImg">
+            <el-button type="Default">上传升级包</el-button>
+          </el-upload>
+          <div v-if="ruleForm.urlName" style="color: green;margin-left: 10px;">{{ ruleForm.urlName }}，上传成功</div>
+          <div v-else>{{ ruleForm.url }}</div>
+        </el-form-item>
+
+        <el-form-item label="升级包是否验证" prop="check">
+          <el-radio-group v-model="ruleForm.check">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="2">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="升级包描述" prop="describe">
+          <el-input v-model="ruleForm.describe" type="textarea" :rows="3"/>
+        </el-form-item>
+
+        <el-form-item label="推送设备的自定义消息" prop="info">
+          <el-input v-model="ruleForm.info" type="textarea" :rows="3"/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+				<span class="dialog-footer">
+				<el-button @click="onCancel" size="default">取 消</el-button>
+				<el-button type="primary" @click="onSubmit"
+                   size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
+				</span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import {reactive, toRefs, defineComponent, ref, unref, getCurrentInstance,} from 'vue';
+import {ElMessage} from 'element-plus';
+import api from '/@/api/ota';
+import getOrigin from '/@/utils/origin';
+
+interface RuleFormState {
+  id: number;
+  typo: string;
+  name: string;
+  productId: '';
+  module: string;
+  version: string;
+  waitVersion: string;
+  afterVersion: string;
+  are: string;
+  check: string;
+  describe: string;
+  info: string;
+  url: string;
+  urlName: string;
+}
+
+interface UpdateState {
+  isShowDialog: boolean;
+  ruleForm: RuleFormState;
+  productData: [];
+  moduleData: [];
+  rules: {};
+}
+
+export default defineComponent({
+  name: 'otaEditUpdateData',
+  setup(prop, {emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+    const headers = {Authorization: 'Bearer ' + localStorage.token,};
+    const uploadUrl: string = getOrigin(import.meta.env.VITE_API_URL + "/common/singleFile");
+    const areType = ref([
+      {
+        label: 'MD5',
+        value: 'MD5',
+      },
+      {
+        label: 'SHA256',
+        value: 'SHA256',
+      },
+    ]);
+    const urlName = ref();
+    const state = reactive<UpdateState>({
+      isShowDialog: false,
+      ruleForm: {
+        id: 0,
+        typo: '',
+        name: '',
+        productId: '',
+        module: '',
+        version: '',
+        waitVersion: '',
+        afterVersion: '',
+        are: '',
+        check: '',
+        describe: '',
+        info: '',
+        url: '',
+        urlName: '',
+      },
+      productData: [],
+      moduleData: [],
+      rules: {
+        name: [{required: true, message: '升级包名称不能为空', trigger: 'blur'}],
+        productId: [{required: true, message: '所属产品不能为空', trigger: 'blur'}],
+        module: [{required: true, message: '升级包模块不能为空', trigger: 'blur'}],
+        version: [{required: true, message: '升级包版本号不能为空', trigger: 'blur'}],
+        waitVersion: [{required: true, message: '待升级版本号不能为空', trigger: 'blur'}],
+        afterVersion: [{required: true, message: '升级后版本号不能为空', trigger: 'blur'}],
+        are: [{required: true, message: '算法签名不能为空', trigger: 'blur'}],
+        url: [{required: true, message: '升级包不能为空', trigger: 'blur'}],
+      },
+    });
+    // 打开弹窗
+    const openDialog = (row: RuleFormState | null) => {
+      resetForm();
+      if (row) {
+        api.manage.detail(row.id).then((res: any) => {
+          const data: RuleFormState = res.data.data;
+          state.ruleForm = data;
+        });
+        seletChange(row.productId);
+        state.ruleForm = row;
+      }
+
+      // 获取产品列表
+      api.module.getSubList().then((res: any) => {
+        state.productData = res.product;
+      });
+
+      state.isShowDialog = true;
+    };
+    const resetForm = () => {
+      state.ruleForm = {
+        id: 0,
+        typo: '',
+        name: '',
+        productId: '',
+        module: '',
+        version: '',
+        waitVersion: '',
+        afterVersion: '',
+        are: '',
+        check: '',
+        describe: '',
+        info: '',
+        url: '',
+        urlName: '',
+      };
+    };
+    const updateImg = (res: any) => {
+      if (res.code === 0) {
+        state.ruleForm.url = res.data.full_path
+        state.ruleForm.urlName = res.data.name
+        ElMessage.success('上传成功');
+      } else {
+        ElMessage.error(res.message);
+      }
+    };
+    const seletChange = (val: Number) => {
+      getModuleList(val);
+    };
+    const getModuleList = (productID: Number) => {
+      state.ruleForm.module = '';
+      api.module.getList({productID: productID}).then((res: any) => {
+        state.moduleData = res.Data;
+      });
+    };
+    // 关闭弹窗
+    const closeDialog = () => {
+      state.isShowDialog = false;
+    };
+    // 取消
+    const onCancel = () => {
+      closeDialog();
+    };
+    // 新增
+    const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if (state.ruleForm.id !== 0) {
+            //修改
+            api.manage.edit(state.ruleForm).then(() => {
+              ElMessage.success('升级包修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('getList');
+            });
+          } else {
+            //添加
+            api.manage.add(state.ruleForm).then(() => {
+              ElMessage.success('升级包添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('getList');
+            });
+          }
+        }
+      });
+    };
+    return {
+      openDialog,
+      closeDialog,
+      seletChange,
+      onCancel,
+      onSubmit,
+      formRef,
+      areType,
+      headers,
+      uploadUrl,
+      urlName,
+      updateImg,
+      ...toRefs(state),
+    };
+  },
+});
+</script>

src/views/iot/ota-update/update/detail.vue

@@ -1,77 +1,78 @@
 <template>
 	<div>
-	<el-card class="system-dic-container" style="position: relative">
-		<div class="content">
-			<div class="flex cont_box">
-				<div class="font26">升级包名称：{{detail.name}}</div>
-				<div class="pro-status"><span :class="detail.checkres == 1 ? 'on' : 'off'"></span>{{ detail.checkres == 1 ? '已验证' : '未验证' }}</div>
-			</div>
-			<div class="mt20"></div>
-			<div class="container">
-				<div class="item">升级包类型：{{detail.typo==1?'整包':'差分'}}</div>
-				<div class="item">升级包签名：d52b637c5eaf2bc9c24008bc4b723600</div>
-			</div>
-			<div class="container">
-				<div class="item">签名算法：{{detail.are}}</div>
-				<div class="item">模块名称：{{detail.moduleName}}</div>
-			</div>
-
-			<!-- <div class="mt20"></div>
-			<div class="status_list">
-				<div class="otaflex">
-					<div class="otaflex_div1">
-							<div class="otaflex_div2">
-								<span class="title">目标设备总数</span>
-								<div class="count otaflex_div3">0</div>
-							</div>
-						</div>
-						<div class="otaflex_div1">
-							<div class="otaflex_div2">
-								<span class="title"><span class="on"></span>目标成功数</span>
-								<div class="count otaflex_div3">0</div>
-							</div>
-
-						</div>
-						<div class="otaflex_div1">
-							<div class="otaflex_div2">
-								<span class="title"><span class="off"></span>目标失败数</span>
-								<div class="count otaflex_div3">0</div>
-							</div>
-						</div>
-						<div class="otaflex_div1">
-							<div class="otaflex_div2">
-								<span class="title"><span class="ofn"></span>目标取消数</span>
-								<div class="count otaflex_div3">0</div>
-							</div>
-
-						</div>
-				</div>
-			</div> -->
-		</div>
-	</el-card>
-	<div class="mt10"></div>
-	<el-card class="system-dic-container" style="position: relative">
-		<el-tabs v-model="activeTab">
-				<el-tab-pane label="批次管理" name="tab1">
-					<BatchList v-if="detail.id" :detail="detail"></BatchList>
-				</el-tab-pane>
-				<el-tab-pane label="设备列表" name="tab2">
-					<DeviceList v-if="detail.id" :detail="detail"></DeviceList>
-				</el-tab-pane>
-				<el-tab-pane label="升级包信息" name="tab3">
-					<InfoList v-if="detail.id" :detail="detail"></InfoList>
-				</el-tab-pane>
-			</el-tabs>
-	</el-card>
-</div>
+    <el-card class="system-dic-container" style="position: relative">
+      <div class="content">
+        <div class="flex cont_box">
+          <div class="font26">升级包名称：{{detail.name}}</div>
+          <div class="pro-status"><span :class="detail.checkres == 1 ? 'on' : 'off'"></span>{{ detail.checkres == 1 ? '已验证' : '未验证' }}</div>
+        </div>
+        <div class="mt20"></div>
+        <div class="container">
+          <div class="item">升级包类型：{{detail.typo==1?'整包':'差分'}}</div>
+          <div class="item">升级包签名：d52b637c5eaf2bc9c24008bc4b723600</div>
+        </div>
+        <div class="container">
+          <div class="item">签名算法：{{detail.are}}</div>
+          <div class="item">模块名称：{{detail.moduleName}}</div>
+        </div>
+
+        <!-- <div class="mt20"></div>
+        <div class="status_list">
+          <div class="otaflex">
+            <div class="otaflex_div1">
+                <div class="otaflex_div2">
+                  <span class="title">目标设备总数</span>
+                  <div class="count otaflex_div3">0</div>
+                </div>
+              </div>
+              <div class="otaflex_div1">
+                <div class="otaflex_div2">
+                  <span class="title"><span class="on"></span>目标成功数</span>
+                  <div class="count otaflex_div3">0</div>
+                </div>
+
+              </div>
+              <div class="otaflex_div1">
+                <div class="otaflex_div2">
+                  <span class="title"><span class="off"></span>目标失败数</span>
+                  <div class="count otaflex_div3">0</div>
+                </div>
+              </div>
+              <div class="otaflex_div1">
+                <div class="otaflex_div2">
+                  <span class="title"><span class="ofn"></span>目标取消数</span>
+                  <div class="count otaflex_div3">0</div>
+                </div>
+
+              </div>
+          </div>
+        </div> -->
+      </div>
+    </el-card>
+	  <div class="mt10"></div>
+    <el-card class="system-dic-container" style="position: relative">
+      <el-tabs v-model="activeTab">
+          <el-tab-pane label="批次管理" name="tab1">
+            <BatchList v-if="detail.id" :detail="detail" />
+          </el-tab-pane>
+          <el-tab-pane label="设备列表" name="tab2">
+            <DeviceList v-if="detail.id" :detail="detail" />
+          </el-tab-pane>
+          <el-tab-pane label="升级包信息" name="tab3">
+            <InfoList v-if="detail.id" :detail="detail" />
+          </el-tab-pane>
+        </el-tabs>
+    </el-card>
+  </div>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'
 import { ElMessage } from 'element-plus'
 import type { TabsPaneContext } from 'element-plus'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { EditPen, DocumentAdd } from '@element-plus/icons-vue'
-import EditForm from './edit.vue'
+// import EditForm from './edit.vue'
+import EditForm from '/@/views/iot/ota-update/update/component/edit.vue';
 import InfoList from './component/info.vue'
 import DeviceList from './component/device.vue'
 import BatchList from './component/batch.vue'
@@ -80,25 +81,25 @@ import api from '/@/api/ota'
 const editFormRef = ref()
 
 export default defineComponent({
-	components: { EditPen, EditForm, DocumentAdd,InfoList,DeviceList,BatchList},
-	setup(props, context) {
+	components: { EditPen, EditForm, DocumentAdd, InfoList, DeviceList, BatchList},
+	setup(props) {
 		const route = useRoute()
-		const router = useRouter()
 		const state = reactive({
 			activeTab:'tab1',
 			developer_status: 2,
 			detail: {
-				'id':'',
-				'name':'',
-				'typo':1,
-				'are':'',
-				'moduleName':'',
-				'checkres':0,
+				id: '',
+				name: '',
+				typo: 1,
+				are: '',
+				moduleName: '',
+				checkres: 0,
+        productId: 0,
 			},
 			
 		})
 		const getDetail = () => {
-			const id = route.params && route.params.id
+      const id = route.params && route.params.id
 			api.manage.detail(Number(id)).then((res: any) => {
 				state.detail = res
 			})

src/views/iot/ota-update/update/edit.vue

@@ -1,219 +0,0 @@
-<template>
-	<el-dialog
-		class="api-edit"
-		v-model="showDialog"
-		:title="`${formData.id ? '编辑升级包' : '新增升级包'}`"
-		width="768px"
-		:close-on-click-modal="false"
-		:close-on-press-escape="false"
-	>
-		<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="160px">
-			<el-form-item label="升级包类型" prop="typo">
-				<el-radio-group v-model="formData.typo">
-					<el-radio label="1">整包</el-radio>
-					<el-radio label="2">差分</el-radio>
-				</el-radio-group>
-			</el-form-item>
-
-			<el-form-item label="升级包名称" prop="name">
-				<el-input v-model="formData.name" placeholder="请输入升级包名称" />
-			</el-form-item>
-			<el-form-item label="所属产品" prop="productId">
-				<el-select v-model="formData.productId" filterable placeholder="请选择产品" @change="seletChange">
-					<el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id.toString()" value-key="id"> </el-option>
-				</el-select>
-			</el-form-item>
-			<div>
-				<el-form-item label="升级包模块" prop="module">
-					<el-select v-model="formData.module" filterable placeholder="请选择产品">
-						<el-option v-for="item in moduleData" :key="item.id" :label="item.name" :value="item.id.toString()" value-key="id"> </el-option>
-				</el-select>
-				</el-form-item>
-			</div>
-			<el-form-item label="升级包版本号" prop="version" v-if="formData.typo == '1'">
-				<el-input v-model="formData.version" placeholder="请输入待升级包版本号" />
-			</el-form-item>
-
-			<el-form-item label="待升级版本号" prop="waitVersion" v-if="formData.typo == '2'">
-				<el-input v-model="formData.waitVersion" placeholder="请输入待升级版本号" />
-			</el-form-item>
-
-			<el-form-item label="升级后版本号" prop="afterVersion" v-if="formData.typo == '2'">
-				<el-input v-model="formData.afterVersion" placeholder="请输入升级后版本号" />
-			</el-form-item>
-
-			<el-form-item label="算法签名" prop="are">
-				<el-select v-model="formData.are" filterable placeholder="请选择算法签名">
-					<el-option v-for="item in areType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-				</el-select>
-			</el-form-item>
-
-			<el-form-item label="选择升级包" prop="url">
-				<el-upload :accept="['.bin','.tar','.gz','.tar.xz','.zip','.gzip','.apk','.dav','.pack']" :show-file-list="false" :limit="1" :headers="headers" :action="uploadUrl" :on-success="updateImg">
-					<el-button type="Default">上传升级包</el-button>
-				</el-upload>
-				<div v-if="url_name" style="color: green;margin-left: 10px;">{{url_name}}，上传成功</div>
-
-			</el-form-item>
-
-			<el-form-item label="升级包是否验证" prop="check">
-				<el-radio-group v-model="formData.check">
-					<el-radio :label="1">是</el-radio>
-					<el-radio :label="2">否</el-radio>
-				</el-radio-group>
-			</el-form-item>
-			<el-form-item label="升级包描述" prop="describe">
-				<el-input v-model="formData.describe" type="textarea" :rows="3" />
-			</el-form-item>
-
-			<el-form-item label="推送设备的自定义消息" prop="info">
-				<el-input v-model="formData.info" type="textarea" :rows="3" />
-			</el-form-item>
-		</el-form>
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button @click="showDialog = false">取消</el-button>
-				<el-button type="primary" @click="onSubmit">确定</el-button>
-			</div>
-		</template>
-	</el-dialog>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, nextTick } from 'vue'
-import api from '/@/api/ota'
-import { ruleRequired } from '/@/utils/validator'
-import { ElMessage } from 'element-plus'
-import getOrigin from '/@/utils/origin';
-
-
-const emit = defineEmits(['getList'])
-
-const showDialog = ref(false)
-const formRef = ref()
-const uploadUrl: string = getOrigin(import.meta.env.VITE_API_URL + "/common/singleFile");
-const headers = {
-		Authorization: 'Bearer ' + localStorage.token,
-};
-const areType = ref([
-	{
-		label: 'MD5',
-		value: 'MD5',
-	},
-	{
-		label: 'SHA256',
-		value: 'SHA256',
-	},
-])
-const productData = ref([
-	{
-		id: '',
-		name: '',
-	},
-])
-const moduleData = ref([
-	{
-		id: '',
-		name: '',
-	},
-])
-const baseForm = {
-	id: undefined,
-	typo: '1',
-	name: '',
-	productId: '',
-	module: '',
-	version: '',
-	are: 'MD5',
-	url: '',
-	check: 1,
-	describe: '',
-	info: '',
-	afterVersion: '',
-	waitVersion: '',
-}
-
-const url_name=ref();
-
-const formData = reactive({
-	...baseForm,
-})
-
-const ruleForm = {
-	typo: [ruleRequired('请选择升级包类型')],
-	name: [ruleRequired('升级包名称不能为空')],
-	productId: [ruleRequired('请选择所属产品')],
-	module: [ruleRequired('请选择升级包模块')],
-	version: [ruleRequired('升级包版本号不能为空')],
-	are: [ruleRequired('算法签名不能为空')],
-	check: [ruleRequired('升级包是否验证不能为空')],
-	// url: [ruleRequired('升级包不能为空')],
-	afterVersion: [ruleRequired('待升级版本号不能为空')],
-	waitVersion: [ruleRequired('升级后版本号不能为空')],
-}
-
-const updateImg = (res: any) => {
-			if (res.code === 0) {
-				formData.url=res.data.full_path
-				url_name.value=res.data.name
-				ElMessage.success('上传成功');
-			} else {
-				ElMessage.error(res.message);
-			}
-		};
-
-const onSubmit = async () => {
-	await formRef.value.validate()
-
-	const theApi = formData.id ? api.manage.edit : api.manage.add
-
-	await theApi(formData)
-
-	ElMessage.success('操作成功')
-	resetForm()
-	showDialog.value = false
-	emit('getList')
-}
-
-const seletChange = (val: Number) => {
-	formData.module='';
-	getModuleList(val);
-};
-
-const getModuleList = (productID: Number) => {
-	api.module.getList({productID:productID}).then((res: any) => {
-		let productDataList = res.Data
-		moduleData.value = productDataList
-	})
-}
-
-const getProductList = () => {
-	api.module.getSubList().then((res: any) => {
-		let productDataList = res.product
-		productData.value = productDataList
-	})
-}
-getProductList()
-
-const resetForm = async () => {
-	Object.assign(formData, { ...baseForm })
-	formRef.value && formRef.value.resetFields()
-}
-
-const open = async (row: any) => {
-	resetForm()
-	showDialog.value = true
-	nextTick(() => {
-		Object.assign(formData, { ...row })
-	})
-}
-
-defineExpose({ open })
-</script>
-<style>
-.vertical-form-item {
-	display: block;
-	margin-bottom: 10px;
-	/* 可选，设置间距 */
-}
-</style>

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

@@ -1,127 +1,226 @@
-
 <template>
-	<el-card shadow="hover">
-		<div class="search">
-			<el-form :inline="true" ref="queryRef">
-				<el-form-item label="升级包名称：" prop="keyWord">
-					<el-input v-model="params.keyWord" placeholder="请输入升级包名称" clearable size="default" style="width: 240px"
-						@keyup.enter.native="getList" />
-				</el-form-item>
-
-				<el-form-item>
+	<div class="ota-module-container">
+		<el-card shadow="hover">
+			<div class="ota-module-search mb15">
+				<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="80px">
+					<el-form-item label="升级包名称" prop="keyWord">
+						<el-input
+							v-model="tableData.param.keyWord"
+							placeholder="请输入升级包名称"
+							clearable
+							size="default"
+							style="width: 240px;"
+							@keyup.enter.native="getList" />
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" class="ml10" @click="getList">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button size="default" @click="resetQuery(queryRef)">
+							<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>
+			</div>
 
-					<el-button size="default" type="primary" class="ml10" @click="getList()">
-						<el-icon>
-							<ele-Search />
-						</el-icon>
-						查询
-					</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" v-auth="'add'" @click="addOrEdit()">
-						<el-icon>
-							<ele-FolderAdd />
-						</el-icon>
-						添加升级包
-					</el-button>
-
-				</el-form-item>
-			</el-form>
-		</div>
-		<el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
-			<el-table-column prop="id" label="ID" width="60" show-overflow-tooltip v-col="'id'"></el-table-column>
-			<el-table-column prop="name" label="升级包名称" show-overflow-tooltip  v-col="'name'"></el-table-column>
-			<el-table-column prop="typo" label="类型" show-overflow-tooltip  v-col="'typo'">
-				<template #default="scope">
-					<el-tag  size="small" v-if="scope.row.typo==1">整包</el-tag>
-					<el-tag  type="info" size="small" v-if="scope.row.typo==2">差分</el-tag>
-				</template>
-			</el-table-column>
-			<el-table-column prop="productName" label="所属产品" show-overflow-tooltip v-col="'productName'"></el-table-column>
-			<el-table-column prop="moduleName" label="模块名称" show-overflow-tooltip  v-col="'moduleName'"></el-table-column>
-			<el-table-column prop="checkres" label="状态" width="100" align="center" v-col="'checkres'">
-				<template #default="scope">
-					<el-tag type="success" size="small" v-if="scope.row.checkres==1">验证</el-tag>
-					<el-tag type="info" size="small" v-else>未验证</el-tag>
-				</template>
-			</el-table-column> 
-			<el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"  v-col="'createdAt'"></el-table-column>
-			<el-table-column label="操作" width="200" align="center">
-				<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="addOrEdit(scope.row)">编辑</el-button>
-					<el-button size="small" text type="success" v-auth="'edit'" @click="CheckUpdate(scope.row)">验证</el-button>
-				
-					<el-button size="small" text type="danger" v-auth="'del'" @click="del(scope.row)">删除</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
-		<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize"
-			@pagination="getList()" />
-		<EditForm ref="editFormRef" @getList="getList()"></EditForm>
-		<CheckForm ref="checkFormRef" @getList="getList()"></CheckForm>
-	</el-card>
+			<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="60" />
+				<el-table-column label="升级包名称" v-col="'name'" prop="name" :show-overflow-tooltip="true" />
+				<el-table-column prop="typo" label="类型" show-overflow-tooltip v-col="'typo'">
+					<template #default="scope">
+						<el-tag  size="small" v-if="scope.row.typo == 1">整包</el-tag>
+						<el-tag  type="info" size="small" v-if="scope.row.typo == 2">差分</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="所属产品" v-col="'productName'" prop="productName" :show-overflow-tooltip="true" />
+				<el-table-column label="模块名称" v-col="'moduleName'" prop="moduleName" :show-overflow-tooltip="true" />
+				<el-table-column label="状态" prop="checkres" v-col="'checkres'" width="120" align="center">
+					<template #default="scope">
+						<el-tag type="success" size="small" v-if="scope.row.checkres == 1">验证</el-tag>
+						<el-tag type="info" size="small" v-else>未验证</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="创建时间" prop="createdAt" align="center" />
+				<el-table-column label="操作" width="100" 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="success" v-auth="'check'" @click="onOpenCheck(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" />
+    
+      <CheckConfig ref="checkRef" @getList="getList" />
+		</el-card>
+	</div>
 </template>
   
-<script lang="ts" setup>
+<script lang="ts">
 import api from '/@/api/ota';
-import { useSearch } from '/@/hooks/useCommon';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-import EditForm from './edit.vue';
-import CheckForm from './check.vue';
-import { ref } from 'vue';
+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';
 
-const queryRef = ref();
-const router = useRouter();
-
-const editFormRef = ref();
-const checkFormRef = ref();
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  id: number;
+  name: string;
+  typo: 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[];
+    };
+  };
+}
 
-const { params, tableData, getList, loading } = useSearch<any[]>(api.manage.getList, 'fireware', { keyWord: '' });
+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: 10,
+          keyWord: '',
+        },
+      },
+    });
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    // 初始化表格数据
+    const initTableData = () => {
+      manageList();
+    };
+    const getList = () => {
+      state.tableData.loading = true;
+      api.manage
+        .getList(state.tableData.param)
+        .then((res: any) => {
+          state.tableData.data = res.fireware;
+          state.tableData.total = res.Total;
+        })
+        .finally(() => (state.tableData.loading = false));
+    };
+    // 打开新增弹窗
+    const onOpenAdd = () => {
+      editRef.value.openDialog();
+    };
+    // 打开修改弹窗
+    const onOpenEdit = (row: TableDataRow) => {
+      editRef.value.openDialog(row);
+    };
+    // 打开验证弹窗
+    const onOpenCheck = (row: TableDataRow) => {
+      checkRef.value.openDialog(row);
+    };
+    // 打开详情弹窗
+    // const opOpenDetail = (row: TableDataRow) => {
 
-getList();
-/** 重置按钮操作 */
-const resetQuery = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.resetFields();
-	getList();
-};
-const toDetail = (id: number) => {
+    // };
+    const toDetail = (id: number) => {
       router.push(`/iotmanager/ota/update/detail/${id}`)
-};
-
-const CheckUpdate= async (row?: any) => {
-	if (row) {
-		let array={
-			productId:row.productId,
-			devOtaFirewareId:row.id
-		}
-		checkFormRef.value.open(array);
-		return;
-	}
-};
-
-const addOrEdit = async (row?: any) => {
-	if (row) {
-		editFormRef.value.open(row);
-		return;
-	} else {
-		editFormRef.value.open();
-	}
-};
-
-const del = (row: any) => {
-	ElMessageBox.confirm(`此操作将删除图形：“${row.name}”，是否继续?`, '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
-		type: 'warning',
-	}).then(async () => {
-		await api.manage.del(row.id);
-		ElMessage.success('删除成功');
-		getList();
-	});
-};
+    };
+    // 删除模块
+    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 = (formEl: FormInstance | undefined) => {
+      if (!formEl) return;
+      formEl.resetFields();
+      getList();
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection: TableDataRow[]) => {
+      state.ids = selection.map((item) => item.id);
+    };
+    // 获取列表
+    const manageList = () => {
+      getList();
+    };
+    return {
+      editRef,
+      checkRef,
+      queryRef,
+      tabDataList,
+      toDetail,
+      onOpenAdd,
+      onOpenEdit,
+      onOpenCheck,
+      onRowDel,
+      getList,
+      resetQuery,
+      handleSelectionChange,
+      ...toRefs(state),
+    };
+  },
+});
 </script>