From 6f93d0b8de5534ae1230c122e6804592181e6e3b Mon Sep 17 00:00:00 2001
From: ailanyin <ailanyin4j@163.com>
Date: Sat, 18 Mar 2023 14:53:54 +0800
Subject: [PATCH] firmware manage

---
 src/api/product/firmware.js                   |  44 ++
 src/constant/dict.js                          |  15 +
 src/views/product/firmware/index.vue          | 502 ++++++++++++++++++
 src/views/product/product/components/edit.vue |  47 +-
 .../product/product/components/firmware.vue   | 387 ++++++++++++++
 5 files changed, 983 insertions(+), 12 deletions(-)
 create mode 100644 src/api/product/firmware.js
 create mode 100644 src/views/product/firmware/index.vue
 create mode 100644 src/views/product/product/components/firmware.vue

diff --git a/src/api/product/firmware.js b/src/api/product/firmware.js
new file mode 100644
index 0000000..d018258
--- /dev/null
+++ b/src/api/product/firmware.js
@@ -0,0 +1,44 @@
+import request from "@/utils/request";
+
+// 查询产品固件列表
+export function listFirmware(query) {
+  return request({
+    url: "/product/firmware/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询产品固件详细
+export function getFirmware(firmwareId) {
+  return request({
+    url: "/product/firmware/" + firmwareId,
+    method: "get",
+  });
+}
+
+// 新增产品固件
+export function addFirmware(data) {
+  return request({
+    url: "/product/firmware",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改产品固件
+export function updateFirmware(data) {
+  return request({
+    url: "/product/firmware",
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除产品固件
+export function delFirmware(firmwareId) {
+  return request({
+    url: "/product/firmware/" + firmwareId,
+    method: "delete",
+  });
+}
diff --git a/src/constant/dict.js b/src/constant/dict.js
index 06f9245..00cbb7f 100644
--- a/src/constant/dict.js
+++ b/src/constant/dict.js
@@ -32,3 +32,18 @@ export const isMonitor = new Map([
   [0, "是"],
   [1, "否"],
 ]);
+
+export const productStatusMap = [[1, ""]];
+
+export const firmwareLatestTypeOptions = [
+  {
+    label: "否",
+    value: 0,
+    tag: "danger",
+  },
+  {
+    label: "是",
+    value: 1,
+    tag: "success",
+  },
+];
diff --git a/src/views/product/firmware/index.vue b/src/views/product/firmware/index.vue
new file mode 100644
index 0000000..2ebdf49
--- /dev/null
+++ b/src/views/product/firmware/index.vue
@@ -0,0 +1,502 @@
+<template>
+  <div class="app-container">
+    <el-form
+      v-show="showSearch"
+      ref="queryRef"
+      :inline="true"
+      :model="queryParams"
+      label-position="left"
+      label-width="100px"
+    >
+      <el-form-item label="固件名称" prop="firmwareName">
+        <el-input
+          v-model="queryParams.firmwareName"
+          clearable
+          placeholder="请输入固件名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item v-if="!productId" label="产品" prop="productId">
+        <el-select
+          v-model="queryParams.productId"
+          :remote-method="getProductOptions"
+          clearable
+          filterable
+          placeholder="请选择产品"
+          remote
+          remote-show-suffix
+        >
+          <el-option
+            v-for="item in productOptions"
+            :key="item.productId"
+            :label="item.productName"
+            :value="item.productId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="租户" prop="tenantId">
+        <el-select
+          v-model="queryParams.tenantId"
+          :remote-method="getTenantOptions"
+          clearable
+          filterable
+          remote
+          remote-show-suffix
+        >
+          <el-option
+            v-for="item in tenantOptions"
+            :key="item.tenantId"
+            :label="item.tenantName"
+            :value="item.tenantId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否最新版本" prop="latestVersionFlag">
+        <el-select
+          v-model="queryParams.latestVersionFlag"
+          clearable
+          placeholder="请选择是否最新版本"
+        >
+          <el-option :value="1" label="是"></el-option>
+          <el-option :value="0" label="否"></el-option>
+        </el-select>
+      </el-form-item>
+      <!--                        <el-form-item label="固件版本" prop="version">-->
+      <!--                            <el-input-->
+      <!--                                    v-model="queryParams.version"-->
+      <!--                                    placeholder="请输入固件版本"-->
+      <!--                                    clearable-->
+      <!--                                    @keyup.enter="handleQuery"-->
+      <!--                            />-->
+      <!--                        </el-form-item>-->
+      <!--                        <el-form-item label="文件路径" prop="downloadUrl">-->
+      <!--                            <el-input-->
+      <!--                                    v-model="queryParams.downloadUrl"-->
+      <!--                                    placeholder="请输入文件路径"-->
+      <!--                                    clearable-->
+      <!--                                    @keyup.enter="handleQuery"-->
+      <!--                            />-->
+      <!--                        </el-form-item>-->
+      <el-form-item>
+        <el-button icon="Search" type="primary" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:firmware:add']"
+          icon="Plus"
+          plain
+          type="primary"
+          @click="handleAdd"
+          >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:firmware:edit']"
+          :disabled="single"
+          icon="Edit"
+          plain
+          type="success"
+          @click="handleUpdate"
+          >修改
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:firmware:remove']"
+          :disabled="multiple"
+          icon="Delete"
+          plain
+          type="danger"
+          @click="handleDelete"
+          >删除
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:firmware:export']"
+          icon="Download"
+          plain
+          type="warning"
+          @click="handleExport"
+          >导出
+        </el-button>
+      </el-col>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="firmwareList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column align="center" type="selection" width="55" />
+      <el-table-column align="center" label="ID" prop="firmwareId">
+      </el-table-column>
+      <el-table-column align="center" label="固件名称" prop="firmwareName">
+      </el-table-column>
+      <el-table-column align="center" label="产品" prop="productId">
+        <template #default="{ row }">
+          {{
+            productOptions.find((el) => el.productId === row.productId)
+              ?.productName ?? "暂无"
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="租户" prop="tenantId">
+        <template #default="{ row }">
+          {{
+            tenantOptions.find((el) => el.tenantId === row.tenantId)
+              ?.tenantName ?? "暂无"
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="是否最新版本"
+        prop="latestVersionFlag"
+      >
+        <template #default="{ row }">
+          <el-tag
+            :type="
+              firmwareLatestTypeOptions.find(
+                (el) => el.value === row.latestVersionFlag
+              )?.tag
+            "
+            size="small"
+          >
+            {{
+              firmwareLatestTypeOptions.find(
+                (el) => el.value === row.latestVersionFlag
+              )?.label ?? "未知"
+            }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="固件版本" prop="version" />
+      <el-table-column align="center" label="文件路径" prop="downloadUrl" />
+      <el-table-column align="center" label="备注" prop="remark" />
+      <el-table-column
+        align="center"
+        class-name="small-padding fixed-width"
+        label="操作"
+      >
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['product:firmware:edit']"
+            icon="Edit"
+            link
+            type="primary"
+            @click="handleUpdate(scope.row)"
+            >修改
+          </el-button>
+          <el-button
+            v-hasPermi="['product:firmware:remove']"
+            icon="Delete"
+            link
+            type="primary"
+            @click="handleDelete(scope.row)"
+            >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改产品固件对话框 -->
+    <el-dialog v-model="open" :title="title" append-to-body width="500px">
+      <el-form
+        ref="firmwareRef"
+        :model="form"
+        :rules="rules"
+        label-position="left"
+        label-width="120px"
+      >
+        <el-form-item label="固件名称" prop="firmwareName">
+          <el-input v-model="form.firmwareName" placeholder="请输入固件名称" />
+        </el-form-item>
+        <el-form-item label="产品" prop="productId">
+          <el-select
+            v-model="form.productId"
+            :remote-method="getProductOptions"
+            filterable
+            placeholder="请选择产品"
+            remote
+            remote-show-suffix
+          >
+            <el-option
+              v-for="item in productOptions"
+              :key="item.productId"
+              :label="item.productName"
+              :value="item.productId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="租户" prop="tenantId">
+          <!--          <el-input v-model="form.tenantId" placeholder="请输入租户ID" />-->
+          <el-select
+            v-model="form.tenantId"
+            :remote-method="getTenantOptions"
+            filterable
+            remote
+            remote-show-suffix
+          >
+            <el-option
+              v-for="item in tenantOptions"
+              :key="item.tenantId"
+              :label="item.tenantName"
+              :value="item.tenantId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否最新版本" prop="latestVersionFlag">
+          <!--          <el-input v-model="form.latestVersionFlag" placeholder="请输入是否最新版本" />-->
+          <el-switch
+            v-model="form.latestVersionFlag"
+            :active-value="1"
+            :inactive-value="0"
+            active-text="是"
+            inactive-text="否"
+          ></el-switch>
+        </el-form-item>
+        <el-form-item label="固件版本" prop="version">
+          <el-input v-model="form.version" placeholder="请输入固件版本" />
+        </el-form-item>
+        <el-form-item label="文件路径" prop="downloadUrl">
+          <el-input v-model="form.downloadUrl" placeholder="请输入文件路径" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="form.remark"
+            placeholder="请输入内容"
+            type="textarea"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script name="Firmware" setup>
+import {
+  addFirmware,
+  delFirmware,
+  getFirmware,
+  listFirmware,
+  updateFirmware,
+} from "@/api/product/firmware";
+import { listProduct } from "@/api/product/product";
+import { listTenant } from "@/api/system/tenant";
+import { firmwareLatestTypeOptions } from "@/constant/dict";
+import { getCurrentInstance, reactive, ref, toRefs } from "vue";
+
+const props = defineProps(["productId"]);
+const { productId } = toRefs(props);
+const { proxy } = getCurrentInstance();
+
+const firmwareList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const productOptions = ref([]);
+const tenantOptions = ref([]);
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    firmwareName: null,
+    productId: null,
+    tenantId: null,
+    latestVersionFlag: null,
+    version: null,
+    downloadUrl: null,
+  },
+  rules: {
+    firmwareName: [
+      { required: true, message: "固件名称不能为空", trigger: "blur" },
+    ],
+    productId: [{ required: true, message: "产品ID不能为空", trigger: "blur" }],
+    tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }],
+    latestVersionFlag: [
+      { required: true, message: "是否最新版本不能为空", trigger: "blur" },
+    ],
+    version: [{ required: true, message: "固件版本不能为空", trigger: "blur" }],
+    downloadUrl: [
+      { required: true, message: "文件路径不能为空", trigger: "blur" },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询产品固件列表 */
+function getList() {
+  loading.value = true;
+  if (productId.value) {
+    queryParams.value.productId = productId.value;
+  }
+  listFirmware(queryParams.value).then((response) => {
+    firmwareList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    firmwareId: null,
+    firmwareName: null,
+    productId: null,
+    tenantId: null,
+    latestVersionFlag: null,
+    version: null,
+    downloadUrl: null,
+    createBy: null,
+    createTime: null,
+    remark: null,
+  };
+  proxy.resetForm("firmwareRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.firmwareId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加产品固件";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _firmwareId = row.firmwareId || ids.value;
+  getFirmware(_firmwareId).then((response) => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改产品固件";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["firmwareRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.firmwareId != null) {
+        updateFirmware(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addFirmware(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _firmwareIds = row.firmwareId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除产品固件编号为"' + _firmwareIds + '"的数据项？')
+    .then(function () {
+      return delFirmware(_firmwareIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "product/firmware/export",
+    {
+      ...queryParams.value,
+    },
+    `firmware_${new Date().getTime()}.xlsx`
+  );
+}
+
+function getProductOptions(keyword) {
+  listProduct({
+    productName: keyword,
+    pageNum: 1,
+    pageSize: 20,
+  }).then((resp) => {
+    productOptions.value = resp.rows;
+  });
+}
+
+const getTenantOptions = async (keyword) => {
+  const response = await listTenant({
+    pageNum: 1,
+    pageSize: 20,
+    tenantName: keyword,
+  });
+  tenantOptions.value = response.rows;
+};
+
+getList();
+getProductOptions();
+getTenantOptions();
+</script>
diff --git a/src/views/product/product/components/edit.vue b/src/views/product/product/components/edit.vue
index a632425..5b22f43 100644
--- a/src/views/product/product/components/edit.vue
+++ b/src/views/product/product/components/edit.vue
@@ -36,6 +36,8 @@
                   v-model="form.tenantId"
                   :remote-method="getTenantList"
                   filterable
+                  remote
+                  remote-show-suffix
                 >
                   <el-option
                     v-for="item in tenantOptions"
@@ -58,7 +60,6 @@
                 <el-input
                   v-model="form.productSn"
                   placeholder="请输入产品编码SN"
-                  @input="checkProductSnUnique"
                 >
                   <template #suffix>
                     <el-icon v-if="isProductSnUnique === true" color="green">
@@ -123,8 +124,8 @@
                 v-if="form.status !== 2"
                 type="primary"
                 @click="submitForm"
-                >提交</el-button
-              >
+                >提交
+              </el-button>
             </el-form-item>
           </el-col>
         </el-form>
@@ -137,7 +138,9 @@
           @model-updated="getData"
         />
       </el-tab-pane>
-      <el-tab-pane :disabled="!form.productId" label="固件管理"></el-tab-pane>
+      <el-tab-pane :disabled="!form.productId" label="固件管理">
+        <firmware :product-id="form.productId" />
+      </el-tab-pane>
       <el-tab-pane :disabled="!form.productId" label="设备授权"></el-tab-pane>
       <el-tab-pane :disabled="!form.productId" label="告警配置"></el-tab-pane>
       <el-tab-pane :disabled="!form.productId" label="控制界面"></el-tab-pane>
@@ -146,6 +149,7 @@
 </template>
 
 <script setup>
+import Firmware from "@/views/product/firmware/index.vue";
 import { onMounted, reactive, ref, toRefs } from "vue";
 import Model from "@/views/product/product/components/model.vue";
 import { useRoute } from "vue-router";
@@ -163,6 +167,27 @@ import tab from "@/plugins/tab";
 import { vertificateMethodOptions } from "@/constant/dict";
 import { debounce } from "lodash-es";
 
+const checkProductSnUnique = debounce((rule, value, callback) => {
+  if (!value) {
+    callback();
+    isProductSnUnique.value = undefined;
+    return;
+  }
+  checkProductSn(value)
+    .then((response) => {
+      const isUnique = response.data;
+      if (isUnique) {
+        isProductSnUnique.value = true;
+        callback();
+      } else {
+        isProductSnUnique.value = false;
+        callback(new Error("产品编码SN重复"));
+      }
+    })
+    .catch((e) => {
+      callback(new Error("检查重复失败"));
+    });
+}, 500);
 const route = useRoute();
 const data = reactive({
   form: {},
@@ -174,6 +199,12 @@ const data = reactive({
       { required: true, message: "产品分类ID不能为空", trigger: "blur" },
     ],
     tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }],
+    productSn: [
+      {
+        validator: checkProductSnUnique,
+        trigger: "change",
+      },
+    ],
   },
 });
 
@@ -183,14 +214,6 @@ const categoryOptions = ref([]); // 产品分类树形选择
 const tenantOptions = ref([]);
 const isProductSnUnique = ref();
 
-const checkProductSnUnique = debounce((sn) => {
-  console.log(sn);
-  checkProductSn(sn).then((response) => {
-    console.log(response);
-    isProductSnUnique.value = response.empty;
-  });
-}, 500);
-
 // 表单重置
 function reset() {
   form.value = {
diff --git a/src/views/product/product/components/firmware.vue b/src/views/product/product/components/firmware.vue
new file mode 100644
index 0000000..b22e99b
--- /dev/null
+++ b/src/views/product/product/components/firmware.vue
@@ -0,0 +1,387 @@
+<template>
+  <div class="app-container">
+    <el-form
+      v-show="showSearch"
+      ref="queryRef"
+      :inline="true"
+      :model="queryParams"
+      label-width="100px"
+      label-position="left"
+    >
+      <el-form-item label="固件名称" prop="firmwareName">
+        <el-input
+          v-model="queryParams.firmwareName"
+          clearable
+          placeholder="请输入固件名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="产品ID" prop="productId">
+        <el-input
+          v-model="queryParams.productId"
+          clearable
+          placeholder="请输入产品ID"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="租户ID" prop="tenantId">
+        <el-input
+          v-model="queryParams.tenantId"
+          clearable
+          placeholder="请输入租户ID"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="是否最新版本" prop="latestVersionFlag">
+        <el-input
+          v-model="queryParams.latestVersionFlag"
+          clearable
+          placeholder="请输入是否最新版本"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="固件版本" prop="version">
+        <el-input
+          v-model="queryParams.version"
+          clearable
+          placeholder="请输入固件版本"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="文件路径" prop="downloadUrl">
+        <el-input
+          v-model="queryParams.downloadUrl"
+          clearable
+          placeholder="请输入文件路径"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="Search" type="primary" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:firmware:add']"
+          icon="Plus"
+          plain
+          type="primary"
+          @click="handleAdd"
+          >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:firmware:edit']"
+          :disabled="single"
+          icon="Edit"
+          plain
+          type="success"
+          @click="handleUpdate"
+          >修改
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:firmware:remove']"
+          :disabled="multiple"
+          icon="Delete"
+          plain
+          type="danger"
+          @click="handleDelete"
+          >删除
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:firmware:export']"
+          icon="Download"
+          plain
+          type="warning"
+          @click="handleExport"
+          >导出
+        </el-button>
+      </el-col>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="firmwareList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column align="center" type="selection" width="55" />
+      <el-table-column align="center" label="固件ID" prop="firmwareId" />
+      <el-table-column align="center" label="固件名称" prop="firmwareName" />
+      <el-table-column align="center" label="产品ID" prop="productId" />
+      <el-table-column align="center" label="租户ID" prop="tenantId" />
+      <el-table-column
+        align="center"
+        label="是否最新版本"
+        prop="latestVersionFlag"
+      />
+      <el-table-column align="center" label="固件版本" prop="version" />
+      <el-table-column align="center" label="文件路径" prop="downloadUrl" />
+      <el-table-column align="center" label="备注" prop="remark" />
+      <el-table-column
+        align="center"
+        class-name="small-padding fixed-width"
+        label="操作"
+      >
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['product:firmware:edit']"
+            icon="Edit"
+            link
+            type="primary"
+            @click="handleUpdate(scope.row)"
+            >修改
+          </el-button>
+          <el-button
+            v-hasPermi="['product:firmware:remove']"
+            icon="Delete"
+            link
+            type="primary"
+            @click="handleDelete(scope.row)"
+            >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改产品固件对话框 -->
+    <el-dialog v-model="open" :title="title" append-to-body width="500px">
+      <el-form
+        ref="firmwareRef"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="固件名称" prop="firmwareName">
+          <el-input v-model="form.firmwareName" placeholder="请输入固件名称" />
+        </el-form-item>
+        <el-form-item label="产品ID" prop="productId">
+          <!--          <el-input v-model="form.productId" placeholder="请输入产品ID" />-->
+          <el-select>
+            <el-option v-for="item in productOp" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="租户ID" prop="tenantId">
+          <el-input v-model="form.tenantId" placeholder="请输入租户ID" />
+        </el-form-item>
+        <el-form-item label="是否最新版本" prop="latestVersionFlag">
+          <el-input
+            v-model="form.latestVersionFlag"
+            placeholder="请输入是否最新版本"
+          />
+        </el-form-item>
+        <el-form-item label="固件版本" prop="version">
+          <el-input v-model="form.version" placeholder="请输入固件版本" />
+        </el-form-item>
+        <el-form-item label="文件路径" prop="downloadUrl">
+          <el-input v-model="form.downloadUrl" placeholder="请输入文件路径" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="form.remark"
+            placeholder="请输入内容"
+            type="textarea"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script name="Firmware" setup>
+import {
+  addFirmware,
+  delFirmware,
+  getFirmware,
+  listFirmware,
+  updateFirmware,
+} from "@/api/product/firmware";
+
+const { proxy } = getCurrentInstance();
+
+const firmwareList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    firmwareName: null,
+    productId: null,
+    tenantId: null,
+    latestVersionFlag: null,
+    version: null,
+    downloadUrl: null,
+  },
+  rules: {
+    firmwareName: [
+      { required: true, message: "固件名称不能为空", trigger: "blur" },
+    ],
+    productId: [{ required: true, message: "产品ID不能为空", trigger: "blur" }],
+    tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }],
+    latestVersionFlag: [
+      { required: true, message: "是否最新版本不能为空", trigger: "blur" },
+    ],
+    version: [{ required: true, message: "固件版本不能为空", trigger: "blur" }],
+    downloadUrl: [
+      { required: true, message: "文件路径不能为空", trigger: "blur" },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询产品固件列表 */
+function getList() {
+  loading.value = true;
+  listFirmware(queryParams.value).then((response) => {
+    firmwareList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    firmwareId: null,
+    firmwareName: null,
+    productId: null,
+    tenantId: null,
+    latestVersionFlag: null,
+    version: null,
+    downloadUrl: null,
+    createBy: null,
+    createTime: null,
+    remark: null,
+  };
+  proxy.resetForm("firmwareRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.firmwareId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加产品固件";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _firmwareId = row.firmwareId || ids.value;
+  getFirmware(_firmwareId).then((response) => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改产品固件";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["firmwareRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.firmwareId != null) {
+        updateFirmware(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addFirmware(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _firmwareIds = row.firmwareId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除产品固件编号为"' + _firmwareIds + '"的数据项？')
+    .then(function () {
+      return delFirmware(_firmwareIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "product/firmware/export",
+    {
+      ...queryParams.value,
+    },
+    `firmware_${new Date().getTime()}.xlsx`
+  );
+}
+
+getList();
+</script>