优化 ota 升级字段等

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

@@ -1,250 +1,246 @@
 <template>
-	<div class="page page-full">
-		<el-form :model="tableData.param" ref="queryRef" inline label-width="90px" @keyup.enter.native="getList(1)">
-			<el-form-item label="批次名称：" prop="name">
-				<el-input v-model="tableData.param.keyWord" placeholder="请输入批次名称" clearable style="width: 240px" />
-			</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" @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 prop="id" label="ID" width="100" align="center" />
-			<el-table-column prop="name" label="名称" />
-			<!--        <el-table-column prop="waitVersion" label="待升级版本号" width="120" />-->
-			<el-table-column label="类型" prop="types" width="120" align="center">
-				<template #default="scope">
-					<el-tag type="success" size="small" v-if="scope.row.types == 0">验证</el-tag>
-					<el-tag type="primary" size="small" v-else>升级</el-tag>
-				</template>
-			</el-table-column>
-			<el-table-column label="状态" prop="status" width="120" align="center">
-				<template #default="scope">
-					<el-tag type="primary" size="small" v-if="scope.row.status == 1">升级中</el-tag>
-					<el-tag type="success" size="small" v-else>完成</el-tag>
-				</template>
-			</el-table-column>
-			<el-table-column prop="method" label="协议方式" show-overflow-tooltip align="center">
-				<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 align="center">
-				<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>
+  <div class="page page-full">
+    <el-form :model="tableData.param" ref="queryRef" inline label-width="90px" @keyup.enter.native="getList(1)">
+      <el-form-item label="批次名称：" prop="name">
+        <el-input v-model="tableData.param.keyWord" placeholder="请输入批次名称" clearable style="width: 240px" />
+      </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" @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 prop="id" label="ID" width="100" align="center" />
+      <el-table-column prop="name" label="名称" />
+      <!--        <el-table-column prop="waitVersion" label="待升级版本号" width="120" />-->
+      <el-table-column label="类型" prop="types" width="120" align="center">
+        <template #default="scope">
+          <el-tag type="success" size="small" v-if="scope.row.types == 0">验证</el-tag>
+          <el-tag type="primary" size="small" v-else>升级</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" prop="status" width="120" align="center">
+        <template #default="scope">
+          <!-- 0待升级 1升级中，2完成 -->
+          <el-tag type="primary" size="small" v-if="scope.row.status === 1">升级中</el-tag>
+          <el-tag type="success" size="small" v-else-if="scope.row.status === 2">完成</el-tag>
+          <el-tag type="warning" size="small" v-else>待升级</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="method" label="协议方式" show-overflow-tooltip align="center">
+        <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 align="center">
+        <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 align="center">
-				<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="创建时间" width="160" align="center" />
-			<el-table-column label="操作" width="120" align="center">
-				<template #default="scope">
-					<el-button size="small" text type="primary" @click="getDeviceList(scope.row)">查看</el-button>
-					<!-- <el-button size="small" text type="warning" :disabled="!scope.row.isOperation" @click="edit(scope.row)">编辑</el-button> -->
-					<el-button size="small" text type="danger" :disabled="!scope.row.isOperation" @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"
-		/>
-		<CheckConfig ref="checkRef" @getList="getList(1)" />
-		<DeviceList ref="deviceRef" />
-	</div>
+      <el-table-column prop="push" label="主动推送" show-overflow-tooltip align="center">
+        <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="创建时间" width="160" align="center" />
+      <el-table-column label="操作" width="120" align="center">
+        <template #default="scope">
+          <el-button size="small" text type="primary" @click="getDeviceList(scope.row)">查看</el-button>
+          <!-- <el-button size="small" text type="warning" :disabled="!scope.row.isOperation" @click="edit(scope.row)">编辑</el-button> -->
+          <el-button size="small" text type="danger" :disabled="!scope.row.isOperation" @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" />
+    <CheckConfig ref="checkRef" @getList="getList(1)" />
+    <DeviceList ref="deviceRef" />
+  </div>
 </template>
 
 <script lang="ts">
-import api from '/@/api/ota'
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'
-import { ElMessageBox, ElMessage } from 'element-plus'
-import CheckConfig from '/@/views/iot/ota-update/update/component/check.vue'
-import DeviceList from '/@/views/iot/ota-update/update/component/deviceList.vue'
+import api from "/@/api/ota";
+import { toRefs, reactive, onMounted, ref, defineComponent } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import CheckConfig from "/@/views/iot/ota-update/update/component/check.vue";
+import DeviceList from "/@/views/iot/ota-update/update/component/deviceList.vue";
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
-	id: number
-	name: string
-	waitVersion: string
-	method: number
-	stratege: string
-	push: string
-	createdAt: string
+  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
-			productKey: string
-			keyWord: string
-			dateRange: string[]
-			devOtaFirmwareId: number
-		}
-	}
+  ids: number[];
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+    param: {
+      id: number;
+      pageNum: number;
+      pageSize: number;
+      productKey: string;
+      keyWord: string;
+      dateRange: string[];
+      devOtaFirmwareId: number;
+    };
+  };
 }
 export default defineComponent({
-	components: { CheckConfig, DeviceList },
-	props: {
-		detail: {
-			type: Object,
-			default: '',
-		},
-	},
-	setup(props) {
-		const deviceRef = ref()
-		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: 20,
-					keyWord: '',
-					productKey: '',
-					devOtaFirmwareId: 0,
-				},
-			},
-		})
-		// 页面加载时
-		onMounted(() => {
-			initTableData()
-		})
-		// 激活操作
-		const activation = (row: any) => {
-			let active = 0
-			if (row.active === 1) active = 0
-			if (row.active === 0) active = 1
-			api.batch.stop({ id: row.id, active: active }).then((res: any) => {
-				ElMessage.success('操作成功')
-				batchList()
-			})
-		}
-		// 初始化表格数据
-		const initTableData = () => {
-			batchList()
-		}
-		const getList = (pageNum?: number) => {
-			typeof pageNum === 'number' && (state.tableData.param.pageNum = pageNum)
-			state.tableData.loading = true
-			state.tableData.param.devOtaFirmwareId = props.detail.id
-			state.tableData.param.productKey = props.detail.productKey
-			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, props.detail)
-		}
-		// 删除模块
-		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 = () => {
-			queryRef.value.resetFields()
-			getList()
-		}
-		// 多选框选中数据
-		const handleSelectionChange = (selection: TableDataRow[]) => {
-			state.ids = selection.map((item) => item.id)
-		}
-		// 获取列表
-		const batchList = () => {
-			getList()
-		}
-		const getDeviceList = (row: any) => {
-			deviceRef.value.openDialog(row)
-		}
-		const edit = (row: any) => {
-			state.tableData.param.id = props.detail.id
-			checkRef.value.openDialog(state.tableData.param, props.detail, row)
-		}
-		return {
-			edit,
-			deviceRef,
-			checkRef,
-			queryRef,
-			tabDataList,
-			onOpenAdd,
-			onRowDel,
-			getList,
-			activation,
-			resetQuery,
-			handleSelectionChange,
-			getDeviceList,
-			...toRefs(props),
-			...toRefs(state),
-		}
-	},
-})
+  components: { CheckConfig, DeviceList },
+  props: {
+    detail: {
+      type: Object,
+      default: "",
+    },
+  },
+  setup(props) {
+    const deviceRef = ref();
+    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: 20,
+          keyWord: "",
+          productKey: "",
+          devOtaFirmwareId: 0,
+        },
+      },
+    });
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    // 激活操作
+    const activation = (row: any) => {
+      let active = 0;
+      if (row.active === 1) active = 0;
+      if (row.active === 0) active = 1;
+      api.batch.stop({ id: row.id, active: active }).then((res: any) => {
+        ElMessage.success("操作成功");
+        batchList();
+      });
+    };
+    // 初始化表格数据
+    const initTableData = () => {
+      batchList();
+    };
+    const getList = (pageNum?: number) => {
+      typeof pageNum === "number" && (state.tableData.param.pageNum = pageNum);
+      state.tableData.loading = true;
+      state.tableData.param.devOtaFirmwareId = props.detail.id;
+      state.tableData.param.productKey = props.detail.productKey;
+      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, props.detail);
+    };
+    // 删除模块
+    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 = () => {
+      queryRef.value.resetFields();
+      getList();
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection: TableDataRow[]) => {
+      state.ids = selection.map((item) => item.id);
+    };
+    // 获取列表
+    const batchList = () => {
+      getList();
+    };
+    const getDeviceList = (row: any) => {
+      deviceRef.value.openDialog(row);
+    };
+    const edit = (row: any) => {
+      state.tableData.param.id = props.detail.id;
+      checkRef.value.openDialog(state.tableData.param, props.detail, row);
+    };
+    return {
+      edit,
+      deviceRef,
+      checkRef,
+      queryRef,
+      tabDataList,
+      onOpenAdd,
+      onRowDel,
+      getList,
+      activation,
+      resetQuery,
+      handleSelectionChange,
+      getDeviceList,
+      ...toRefs(props),
+      ...toRefs(state),
+    };
+  },
+});
 </script>

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

@@ -1,269 +1,269 @@
 <template>
-	<div class="ota-edit-module-container">
-		<el-dialog :title="'操作升级包'" v-model="isShowDialog" width="600px">
-			<el-form :model="ruleForm" ref="formRef" :rules="rules" label-width="100px">
-				<el-form-item label="类型" prop="formType" @change="getFormType">
-					<el-radio-group v-model="ruleForm.types">
-						<el-radio label="1">验证</el-radio>
-						<el-radio label="2" :disabled="!showUpdate">升级</el-radio>
-					</el-radio-group>
-				</el-form-item>
+  <div class="ota-edit-module-container">
+    <el-dialog :title="'操作升级包'" v-model="isShowDialog" width="600px">
+      <el-form :model="ruleForm" ref="formRef" :rules="rules" label-width="100px">
+        <el-form-item label="类型" prop="formType" @change="getFormType">
+          <el-radio-group v-model="ruleForm.types">
+            <el-radio :label="1">验证</el-radio>
+            <el-radio :label="2" :disabled="!showUpdate">升级</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="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入批次名称" />
+        </el-form-item>
 
-				<el-form-item label="协议方式" prop="method">
-					<el-radio-group v-model="ruleForm.method" @change="getMethod">
-						<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="method">
+          <el-radio-group v-model="ruleForm.method" @change="getMethod">
+            <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="deviceShow">
-					<!-- 回显已选设备 -->
-					<template v-if="deviceNameShow">
-						<el-tag v-for="item in deviceNameList" style="margin-right: 10px">{{ item }}</el-tag>
-					</template>
+        <el-form-item label="所属设备" prop="devices" v-if="deviceShow">
+          <!-- 回显已选设备 -->
+          <template v-if="deviceNameShow">
+            <el-tag v-for="item in deviceNameList" :key="item" style="margin-right: 10px">{{ item }}</el-tag>
+          </template>
 
-					<el-button type="primary" @click="onOpenDevice()" style="margin-left: 5px">选择设备</el-button>
-				</el-form-item>
+          <el-button type="primary" @click="onOpenDevice()" style="margin-left: 5px">选择设备</el-button>
+        </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="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" :disabled="ruleForm.pushDisabled">是</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">取 消</el-button>
-					<el-button type="primary" @click="onSubmit">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
-				</span>
-			</template>
-		</el-dialog>
+        <el-form-item label="主动推送" prop="push">
+          <el-radio-group v-model="ruleForm.push">
+            <el-radio :label="1" :disabled="ruleForm.pushDisabled">是</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">取 消</el-button>
+          <el-button type="primary" @click="onSubmit">{{ ruleForm.id !== 0 ? "修 改" : "添 加" }}</el-button>
+        </span>
+      </template>
+    </el-dialog>
 
-		<!-- 设备绑定弹窗 -->
-		<DeviceBind ref="deviceRef" @bindSuccess="getDeviceTableData" />
-	</div>
+    <!-- 设备绑定弹窗 -->
+    <DeviceBind ref="deviceRef" @bindSuccess="getDeviceTableData" />
+  </div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent, onMounted, ref, unref } from 'vue'
-import { ElMessage } from 'element-plus'
-import api from '/@/api/ota'
-import rule from '/@/api/rule'
-import DeviceBind from '/@/views/iot/ota-update/update/component/deviceBind.vue'
+import { reactive, toRefs, defineComponent, onMounted, ref, unref } from "vue";
+import { ElMessage } from "element-plus";
+import api from "/@/api/ota";
+import rule from "/@/api/rule";
+import DeviceBind from "/@/views/iot/ota-update/update/component/deviceBind.vue";
 
 interface RuleFormState {
-	id: number
-	name: string
-	waitVersion: string
-	method: string
-	devices: string[]
-	stratege: string
-	devOtaFirmwareId: number
-	push: string
-	pushDisabled: boolean
-	types: string
-	productKey: string
+  id: number;
+  name: string;
+  waitVersion: string;
+  method: number;
+  devices: string[];
+  stratege: number;
+  devOtaFirmwareId: number;
+  push: number;
+  pushDisabled: boolean;
+  types: number;
+  productKey: string;
 }
 interface UpdateState {
-	isShowDialog: boolean
-	showUpdate: boolean
-	ruleForm: RuleFormState
-	productData: []
-	rules: {}
-	deviceShow: boolean
-	deviceNameShow: boolean
-	deviceNameList: []
+  isShowDialog: boolean;
+  showUpdate: boolean;
+  ruleForm: RuleFormState;
+  productData: [];
+  rules: {};
+  deviceShow: boolean;
+  deviceNameShow: boolean;
+  deviceNameList: [];
 }
 
 export default defineComponent({
-	name: 'otaEditUpdateData',
-	components: { DeviceBind },
-	computed: {
-		rule() {
-			return rule
-		},
-	},
-	setup(prop, { emit }) {
-		const deviceRef = ref()
-		const formRef = ref<HTMLElement | null>(null)
-		const state = reactive<UpdateState>({
-			isShowDialog: false,
-			showUpdate: false,
-			ruleForm: {
-				id: 0,
-				name: '',
-				waitVersion: '',
-				method: '1',
-				devices: [],
-				stratege: '2',
-				devOtaFirmwareId: 0,
-				push: '2',
-				pushDisabled: true,
-				types: '1',
-				productKey: '',
-			},
-			productData: [],
-			rules: {
-				name: [{ required: true, message: '批次名称不能为空', trigger: 'blur' }],
-				method: [{ required: true, message: '协议方式不能为空', trigger: 'blur' }],
-				stratege: [{ required: true, message: '升级方式不能为空', trigger: 'blur' }],
-				push: [{ required: true, message: '推送方式不能为空', trigger: 'blur' }],
-				types: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
-				devices: [{ required: true, message: '所属设备不能为空', trigger: 'blue' }],
-			},
-			deviceShow: false, // 所属设备是否显示
-			deviceNameShow: false, // 回显设备名称状态
-			deviceNameList: [], // 回显设备名称
-		})
-		// 页面加载时
-		onMounted(() => {
-			getFormType()
-		})
-		// 获取操作升级包类型
-		const getFormType = () => {
-			// 如果是验证类型，设备信息必填项
-			if (state.ruleForm.types === '1') {
-				state.deviceShow = true
-			} else {
-				state.deviceShow = false
-			}
-		}
-		// 获取协议方式
-		const getMethod = () => {
-			// 如果是http、https协议则主动推送为否
-			// if (state.ruleForm.method === '1') {
-			state.ruleForm.push = '2'
-			state.ruleForm.pushDisabled = true
-			// }
-			// if (state.ruleForm.method === '2') {
-			//   state.ruleForm.push = '2';
-			//   state.ruleForm.pushDisabled = true;
-			// }
-			if (state.ruleForm.method === '3') {
-				state.ruleForm.pushDisabled = false
-				state.ruleForm.push = '1'
-			}
-		}
-		// 打开弹窗
-		const openDialog = (row: RuleFormState | null, detail: any, editData?: any) => {
-			resetForm()
-			state.deviceNameList = []
-			state.deviceNameShow = false
-			if (row) {
-				state.ruleForm.devOtaFirmwareId = row.id
-				state.ruleForm.productKey = row.productKey
-			}
-			if (editData) {
-				state.ruleForm.name = editData.name
-				state.ruleForm.waitVersion = editData.waitVersion
-				state.ruleForm.method = editData.method
-				state.ruleForm.stratege = editData.stratege
-				state.ruleForm.devOtaFirmwareId = editData.devOtaFirmwareId
-				state.ruleForm.push = editData.push
-				state.ruleForm.types = editData.types
-				state.ruleForm.productKey = editData.productKey
-			}
-			// 升级包状态是已验证才能选择升级类型，否则不可以
-			// 如果升级包是不需要验证类型的，则可以选择升级类型
-			state.showUpdate = detail.checkres === 2 || detail.check === 2
-			state.isShowDialog = true
+  name: "otaEditUpdateData",
+  components: { DeviceBind },
+  computed: {
+    rule() {
+      return rule;
+    },
+  },
+  setup(prop, { emit }) {
+    const deviceRef = ref();
+    const formRef = ref<HTMLElement | null>(null);
+    const state = reactive<UpdateState>({
+      isShowDialog: false,
+      showUpdate: false,
+      ruleForm: {
+        id: 0,
+        name: "",
+        waitVersion: "",
+        method: 1,
+        devices: [],
+        stratege: 2,
+        devOtaFirmwareId: 0,
+        push: 2,
+        pushDisabled: true,
+        types: 1,
+        productKey: "",
+      },
+      productData: [],
+      rules: {
+        name: [{ required: true, message: "批次名称不能为空", trigger: "blur" }],
+        method: [{ required: true, message: "协议方式不能为空", trigger: "blur" }],
+        stratege: [{ required: true, message: "升级方式不能为空", trigger: "blur" }],
+        push: [{ required: true, message: "推送方式不能为空", trigger: "blur" }],
+        types: [{ required: true, message: "类型不能为空", trigger: "blur" }],
+        devices: [{ required: true, message: "所属设备不能为空", trigger: "blue" }],
+      },
+      deviceShow: false, // 所属设备是否显示
+      deviceNameShow: false, // 回显设备名称状态
+      deviceNameList: [], // 回显设备名称
+    });
+    // 页面加载时
+    onMounted(() => {
+      getFormType();
+    });
+    // 获取操作升级包类型
+    const getFormType = () => {
+      // 如果是验证类型，设备信息必填项
+      if (state.ruleForm.types === 1) {
+        state.deviceShow = true;
+      } else {
+        state.deviceShow = false;
+      }
+    };
+    // 获取协议方式
+    const getMethod = () => {
+      // 如果是http、https协议则主动推送为否
+      // if (state.ruleForm.method === '1') {
+      state.ruleForm.push = 2;
+      state.ruleForm.pushDisabled = true;
+      // }
+      // if (state.ruleForm.method === '2') {
+      //   state.ruleForm.push = '2';
+      //   state.ruleForm.pushDisabled = true;
+      // }
+      if (state.ruleForm.method === 3) {
+        state.ruleForm.pushDisabled = false;
+        state.ruleForm.push = 1;
+      }
+    };
+    // 打开弹窗
+    const openDialog = (row: RuleFormState | null, detail: any, editData?: any) => {
+      resetForm();
+      state.deviceNameList = [];
+      state.deviceNameShow = false;
+      if (row) {
+        state.ruleForm.devOtaFirmwareId = row.id;
+        state.ruleForm.productKey = row.productKey;
+      }
+      if (editData) {
+        state.ruleForm.name = editData.name;
+        state.ruleForm.waitVersion = editData.waitVersion;
+        state.ruleForm.method = editData.method;
+        state.ruleForm.stratege = editData.stratege;
+        state.ruleForm.devOtaFirmwareId = editData.devOtaFirmwareId;
+        state.ruleForm.push = editData.push;
+        state.ruleForm.types = editData.types;
+        state.ruleForm.productKey = editData.productKey;
+      }
+      // 升级包状态是已验证才能选择升级类型，否则不可以
+      // 如果升级包是不需要验证类型的，则可以选择升级类型
+      state.showUpdate = detail.checkres === 2 || detail.check === 2;
+      state.isShowDialog = true;
 
-			if (state.ruleForm.types == '1') {
-				state.deviceShow = true
-			}
-		}
-		const resetForm = () => {
-			state.ruleForm = {
-				id: 0,
-				name: '',
-				waitVersion: '',
-				method: '1',
-				devices: [],
-				stratege: '2',
-				devOtaFirmwareId: 0,
-				push: '2',
-				pushDisabled: true,
-				types: '1',
-				productKey: '',
-			}
-		}
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false
-			state.deviceNameList = []
-			state.deviceNameShow = 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')
-						})
-					}
-				}
-			})
-		}
-		// 获取设备列表
-		const getDeviceTableData = (deviceKeyList: any, deviceNameList: any) => {
-			state.ruleForm.devices = deviceKeyList
-			state.deviceNameList = deviceNameList
-			state.deviceNameShow = true
-		}
-		// 打开设备列表
-		const onOpenDevice = () => {
-			deviceRef.value.openDialog(state.ruleForm.devices, state.ruleForm.productKey)
-		}
-		return {
-			deviceRef,
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			getMethod,
-			getFormType,
-			onOpenDevice,
-			getDeviceTableData,
-			formRef,
-			...toRefs(state),
-		}
-	},
-})
+      if (state.ruleForm.types == 1) {
+        state.deviceShow = true;
+      }
+    };
+    const resetForm = () => {
+      state.ruleForm = {
+        id: 0,
+        name: "",
+        waitVersion: "",
+        method: 1,
+        devices: [],
+        stratege: 2,
+        devOtaFirmwareId: 0,
+        push: 2,
+        pushDisabled: true,
+        types: 1,
+        productKey: "",
+      };
+    };
+    // 关闭弹窗
+    const closeDialog = () => {
+      state.isShowDialog = false;
+      state.deviceNameList = [];
+      state.deviceNameShow = 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");
+            });
+          }
+        }
+      });
+    };
+    // 获取设备列表
+    const getDeviceTableData = (deviceKeyList: any, deviceNameList: any) => {
+      state.ruleForm.devices = deviceKeyList;
+      state.deviceNameList = deviceNameList;
+      state.deviceNameShow = true;
+    };
+    // 打开设备列表
+    const onOpenDevice = () => {
+      deviceRef.value.openDialog(state.ruleForm.devices, state.ruleForm.productKey);
+    };
+    return {
+      deviceRef,
+      openDialog,
+      closeDialog,
+      onCancel,
+      onSubmit,
+      getMethod,
+      getFormType,
+      onOpenDevice,
+      getDeviceTableData,
+      formRef,
+      ...toRefs(state),
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
 .width100 {
-	width: 100%;
+  width: 100%;
 }
 </style>

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

@@ -1,181 +1,175 @@
 <template>
-	<div class="ota-edit-module-container">
-		<el-dialog :title="'设备详情'" :before-close="closeDialog" v-model="isShowDialog" width="1000px">
-			<div class="search">
-				<el-form inline ref="queryRef">
-					<el-form-item label="设备名称：" prop="name">
-						<el-input v-model="tableData.param.deviceName" placeholder="请输入设备名称" clearable style="width: 240px" @submit.prevent />
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" class="ml10" @click="getDetail">
-							<el-icon>
-								<ele-Search />
-							</el-icon>
-							查询
-						</el-button>
-					</el-form-item>
-				</el-form>
-			</div>
-			<el-table :data="tableData.data" style="width: 100%" row-key="id" v-loading="tableData.loading">
-				<el-table-column prop="id" label="ID" width="100" show-overflow-tooltip align="center"></el-table-column>
-				<el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="deviceKey" label="设备标识" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="status" label="状态" show-overflow-tooltip align="center">
-					<template #default="scope">
-						<el-tag size="small" v-if="scope.row.status == 0">待推送</el-tag>
-						<el-tag size="small" v-if="scope.row.status == 1">已推送</el-tag>
-						<el-tag size="small" v-if="scope.row.status == 2">升级中</el-tag>
-						<el-tag size="small" v-if="scope.row.status == 3">升级成功</el-tag>
-						<el-tag size="small" v-if="scope.row.status == 4">升级失败</el-tag>
-						<el-tag size="small" v-if="scope.row.status == 5">已取消</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="step" label="升级进度" show-overflow-tooltip align="center">
-					<template #default="scope">
-						<el-tag size="small" type="success" v-if="scope.row.step > 0">{{ scope.row.step }}%</el-tag>
-						<el-tag size="small" v-else>{{ scope.row.step }}</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="fail" label="失败原因" width="100" align="center">
-					<template #default="scope">
-						<el-tag size="small" type="danger" v-if="scope.row.fail == -1">升级失败</el-tag>
-						<el-tag size="small" type="danger" v-if="scope.row.fail == -2">下载失败</el-tag>
-						<el-tag size="small" type="danger" v-if="scope.row.fail == -3">校验失败</el-tag>
-						<el-tag size="small" type="danger" v-if="scope.row.fail == -4">烧写失败</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="desc" label="备注信息" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="createdAt" label="时间" width="160" align="center"></el-table-column>
-				<el-table-column label="操作" width="80" align="center">
-					<template #default="scope">
-						<el-button size="small" text type="primary" v-if="![2, 3].includes(scope.row.status)" @click="distribute(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="getDetail"
-			/>
-		</el-dialog>
-	</div>
+  <div class="ota-edit-module-container">
+    <el-dialog :title="'设备详情'" :before-close="closeDialog" v-model="isShowDialog" width="1000px">
+      <div class="search">
+        <el-form inline ref="queryRef">
+          <el-form-item label="设备key：" prop="deviceKey">
+            <el-input v-model="tableData.param.deviceKey" placeholder="请输入设备名称" clearable style="width: 240px" @submit.prevent />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" class="ml10" @click="getDetail">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" row-key="id" v-loading="tableData.loading">
+        <el-table-column prop="id" label="ID" width="100" show-overflow-tooltip align="center"></el-table-column>
+        <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="deviceKey" label="设备标识" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="status" label="状态" show-overflow-tooltip align="center">
+          <template #default="scope">
+            <el-tag size="small" v-if="scope.row.status == 0">待推送</el-tag>
+            <el-tag size="small" v-if="scope.row.status == 1">已推送</el-tag>
+            <el-tag size="small" v-if="scope.row.status == 2">升级中</el-tag>
+            <el-tag size="small" v-if="scope.row.status == 3">升级成功</el-tag>
+            <el-tag size="small" v-if="scope.row.status == 4">升级失败</el-tag>
+            <el-tag size="small" v-if="scope.row.status == 5">已取消</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="step" label="升级进度" show-overflow-tooltip align="center">
+          <template #default="scope">
+            <el-tag size="small" type="success" v-if="scope.row.step > 0">{{ scope.row.step }}%</el-tag>
+            <el-tag size="small" v-else>{{ scope.row.step }}%</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="fail" label="失败原因" width="100" align="center">
+          <template #default="scope">
+            <el-tag size="small" type="danger" v-if="scope.row.fail == -1">升级失败</el-tag>
+            <el-tag size="small" type="danger" v-if="scope.row.fail == -2">下载失败</el-tag>
+            <el-tag size="small" type="danger" v-if="scope.row.fail == -3">校验失败</el-tag>
+            <el-tag size="small" type="danger" v-if="scope.row.fail == -4">烧写失败</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="desc" label="备注信息" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createdAt" label="时间" width="160" align="center"></el-table-column>
+        <el-table-column label="操作" width="80" align="center">
+          <template #default="scope">
+            <el-button size="small" text type="primary" v-if="![2, 3].includes(scope.row.status)" @click="distribute(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="getDetail" />
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts">
-import api from '/@/api/ota'
-import { defineComponent, reactive, toRefs } from 'vue'
-import { ElMessage } from 'element-plus'
+import api from "/@/api/ota";
+import { defineComponent, reactive, toRefs } from "vue";
+import { ElMessage } from "element-plus";
 
 interface TableDataRow {
-	id: number
-	name: string
-	types: string
-	productName: number
-	moduleName: string
-	checkres: string
-	createdAt: string
+  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
-			deviceName: string
-			devOtaStrategy: number
-		}
-	}
-	isShowDialog: boolean
-	timeoutTimer: any
+  ids: number[];
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+    param: {
+      pageNum: number;
+      pageSize: number;
+      deviceKey: string;
+      devOtaStrategy: number;
+    };
+  };
+  isShowDialog: boolean;
+  timeoutTimer: any;
 }
 
 export default defineComponent({
-	setup() {
-		const state = reactive<TableDataState>({
-			ids: [],
-			tableData: {
-				data: [],
-				total: 0,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 20,
-					deviceName: '',
-					devOtaStrategy: 0,
-				},
-			},
-			isShowDialog: false,
-			timeoutTimer: null,
-		})
-		// 打开弹窗
-		const openDialog = (row: any) => {
-			state.tableData.loading = true
-			state.tableData.param.devOtaStrategy = Number(row.id)
-			api.device
-				.getList(state.tableData.param)
-				.then((res: any) => {
-					state.tableData.data = res.Data
-					state.tableData.total = res.Total
-				})
-				.finally(() => (state.tableData.loading = false))
-			state.isShowDialog = true
-		}
-		// 关闭弹窗
-		const closeDialog = () => {
-			clearTimeout(state.timeoutTimer)
-			state.isShowDialog = false
-		}
-		// 取消
-		const onCancel = () => {
-			closeDialog()
-		}
-		const getDetail = () => {
-			state.tableData.loading = true
-			api.device
-				.getList(state.tableData.param)
-				.then((res: any) => {
-					state.tableData.data = res.Data
-					state.tableData.total = res.Total
-				})
-				.finally(() => (state.tableData.loading = false))
-		}
-		// 手动下发
-		const distribute = (row: any) => {
-			const deviceKey = row.deviceKey
-			const strategyId = row.strategyId
-			api.batch.distribute({ deviceKey: deviceKey, strategyId: strategyId }).then(() => {
-				ElMessage.success('操作成功')
-			})
-			// 定时请求列表数据
-			timer()
-		}
-		// 定时请求列表
-		const timer = () => {
-			// 因列表更新数据不是实时更新，需设置定时后在请求列表
-			state.timeoutTimer = setTimeout(() => {
-				getDetail()
-			}, 3000)
-		}
-		return {
-			getDetail,
-			openDialog,
-			closeDialog,
-			onCancel,
-			distribute,
-			...toRefs(state),
-		}
-	},
-})
+  setup() {
+    const state = reactive<TableDataState>({
+      ids: [],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 20,
+          deviceKey: "",
+          devOtaStrategy: 0,
+        },
+      },
+      isShowDialog: false,
+      timeoutTimer: null,
+    });
+    // 打开弹窗
+    const openDialog = (row: any) => {
+      state.tableData.loading = true;
+      state.tableData.param.devOtaStrategy = Number(row.id);
+      api.device
+        .getList(state.tableData.param)
+        .then((res: any) => {
+          state.tableData.data = res.Data;
+          state.tableData.total = res.Total;
+        })
+        .finally(() => (state.tableData.loading = false));
+      state.isShowDialog = true;
+    };
+    // 关闭弹窗
+    const closeDialog = () => {
+      clearTimeout(state.timeoutTimer);
+      state.isShowDialog = false;
+    };
+    // 取消
+    const onCancel = () => {
+      closeDialog();
+    };
+    const getDetail = () => {
+      state.tableData.loading = true;
+      api.device
+        .getList(state.tableData.param)
+        .then((res: any) => {
+          state.tableData.data = res.Data;
+          state.tableData.total = res.Total;
+        })
+        .finally(() => (state.tableData.loading = false));
+    };
+    // 手动下发
+    const distribute = (row: any) => {
+      const deviceKey = row.deviceKey;
+      const strategyId = row.strategyId;
+      api.batch.distribute({ deviceKey: deviceKey, strategyId: strategyId }).then(() => {
+        ElMessage.success("操作成功");
+      });
+      // 定时请求列表数据
+      timer();
+    };
+    // 定时请求列表
+    const timer = () => {
+      // 因列表更新数据不是实时更新，需设置定时后在请求列表
+      state.timeoutTimer = setTimeout(() => {
+        getDetail();
+      }, 3000);
+    };
+    return {
+      getDetail,
+      openDialog,
+      closeDialog,
+      onCancel,
+      distribute,
+      ...toRefs(state),
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
 .width100 {
-	width: 100%;
+  width: 100%;
 }
 </style>