feat: 添加vue-qrcode-reader依赖并优化二维码扫描功能

refactor: 移除未使用的ElMessageBox导入 feat: 新增BaseFullScreen全屏组件 feat: 新增字典工具函数useDict和getOneDict fix: 修复设备类型和设备表单配置页面的图标和字典引用问题 feat: 新增ImportData数据导入组件 style: 统一设备账户页面的按钮文本和步骤标题
2025-09-25 18:40:30 +08:00
parent 27dfbcddfb
commit 25a6ae2980
11 changed files with 170 additions and 44 deletions
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
    "vue-easytable": "^2.27.1",
    "vue-echarts": "^6.7.2",
    "vue-qr": "^4.0.9",
+    "vue-qrcode-reader": "^3.2.1",
    "vue-router": "3.4.9",
    "vue-seamless-scroll": "^1.1.23",
    "vuedraggable": "^2.20.0",
--- a/src/components/BaseFullScreen/index.vue
+++ b/src/components/BaseFullScreen/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="fixed-element">
+    <FullScreen style="width: 1rem; height: 1rem" />
+  </div>
+</template>
+
+<script>
+//import Screenfull from '../Screenfull'
+
+export default {
+  name: 'BaseFullScreen'
+}
+</script>
+
+<style scoped>
+.fixed-element {
+  position: fixed;
+  bottom: 10%;
+  right: 40px;
+}
+</style>
--- a/src/components/ImportData/index.vue
+++ b/src/components/ImportData/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="uploadData">
+    <el-upload
+      ref="uploadRef"
+      :limit="1"
+      name="file"
+      accept=".xlsx,.xls"
+      :data="uploadData"
+      :headers="headers"
+      :action="uploadFileUrl"
+      :disabled="isUploading"
+      :on-progress="handleFileUploadProgress"
+      :on-success="handleFileSuccess"
+      :on-error="handleFileError"
+      :auto-upload="true">
+      <el-button type="primary" icon="el-icon-upload">上传文件</el-button>
+
+      <template slot="tip">
+        <div class="el-upload__tip text-center">
+          <span>仅允许导入xls、xlsx格式文件。</span>
+          <el-link type="primary" @click="importTemplate" icon="el-icon-bottom"> 下载模板 </el-link>
+        </div>
+      </template>
+    </el-upload>
+    <slot></slot>
+  </div>
+</template>
+<script>
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'ImportData',
+  props: {
+    importUrl: {
+      type: String
+    },
+    templateUrl: {
+      type: String
+    },
+    // 上传携带的参数
+    data: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      baseUrl: process.env.VUE_APP_BASE_API,
+      headers: {
+        Authorization: 'Bearer ' + getToken()
+      },
+      isUploading: false
+    }
+  },
+  computed: {
+    uploadFileUrl() {
+      return this.baseUrl + this.importUrl
+    },
+    uploadData() {
+      return this.data
+    }
+  },
+  methods: {
+    /**文件上传中处理 */
+    handleFileUploadProgress(event, file, fileList) {
+      this.isUploading = true
+    },
+    /** 文件上传成功处理 */
+    handleFileSuccess(response, file, fileList) {
+      const { code, msg } = response
+
+      this.isUploading = false
+      this.$refs.uploadRef.clearFiles()
+      this.$refs.uploadRef.handleRemove(file)
+
+      if (code != 200) {
+        this.$modal.msgError('导入数据失败,原因：' + msg)
+      } else {
+        this.$emit('success', response)
+      }
+    },
+    handleFileError(error) {
+      this.$modal.msgError('导入数据失败,原因：' + error)
+    },
+    importTemplate() {
+      this.downFile(this.templateUrl)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.uploadData {
+  padding: 10px;
+}
+</style>
--- a/src/utils/dict/dict1.js
+++ b/src/utils/dict/dict1.js
@@ -0,0 +1,31 @@
+import { getDicts } from '@/api/system/dict/data'
+
+/**
+ * 获取字典数据
+ */
+export function useDict(...args) {
+  const res = ref({})
+  return (() => {
+    args.forEach((d, index) => {
+      res.value[d] = []
+      getDicts(d).then((resp) => {
+        res.value[d] = resp.data.map((p) => ({ label: p.dictLabel, value: p.dictValue, listClass: p.listClass, cssClass: p.cssClass }))
+      })
+    })
+    return toRefs(res.value)
+  })()
+}
+
+/**
+ * 获取字典数据
+ * 返回字典数组
+ */
+export function getOneDict(name) {
+  const data = [
+    {
+      dictType: name,
+      columnName: name
+    }
+  ]
+  return getDicts(data)
+}
--- a/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteDeviceItemStep.vue
+++ b/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteDeviceItemStep.vue
@@ -117,14 +117,12 @@ import {
  updateTaskStatus,
  setTaskEndTime
 } from '@/api/deviceManagement/devicetaskexecute.js'
-import { QrStream } from 'vue3-qr-reader'
+import { QrStream } from 'vue-qrcode-reader'

-// Vue2中不存在vue3-qr-reader，需要移除或提供替代方案
 export default {
  name: 'TheTaskExecuteDeviceItemStep',
  components: {
-    // 注意：Vue2中没有vue3-qr-reader组件，需要提供替代方案
-    // QrStream
+    QrStream
  },
  props: {
    // 设备信息
@@ -197,7 +195,6 @@ export default {
    close() {
      this.$emit('doClose', false)
    },
-
    over() {
      this.$confirm('是否确认此任务已完成?', '警告', {
        confirmButtonText: '确定',
--- a/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteDialog.vue
+++ b/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteDialog.vue
@@ -30,7 +30,6 @@
 </template>

 <script>
-import { ElMessageBox } from 'element-plus'
 import { AchieveTaskbindDevice } from '@/api/deviceManagement/devicetaskexecute.js'
 import { default as TheTaskExecuteDeviceItemStep } from './TheTaskExecuteDeviceItemStep'
 // import { default as TheTaskExecuteTable } from './TheTaskExecuteTable' 暂不使用
--- a/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteFormDialog.vue
+++ b/src/views/deviceManagement/deviceTaskExecute/TheTaskExecuteFormDialog.vue
@@ -28,7 +28,6 @@
 </template>

 <script>
-	import { ElMessageBox } from 'element-plus'

 export default {
  name: 'TheTaskExecuteFormDialog',
--- a/src/views/deviceManagement/deviceaccount/TheDeviceActionDialog.vue
+++ b/src/views/deviceManagement/deviceaccount/TheDeviceActionDialog.vue
@@ -19,7 +19,6 @@
 </template>

 <script>
-import { ElMessageBox } from 'element-plus'
 import { default as TheDeviceInspectTable } from './TheDeviceInspectTable'

 export default {
--- a/src/views/deviceManagement/deviceaccount/index.vue
+++ b/src/views/deviceManagement/deviceaccount/index.vue
@@ -29,15 +29,15 @@
              </el-radio-group>
            </el-form-item>
            <el-form-item>
-              <el-button icon="el-icon-search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
-              <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
+              <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 工具区域 -->
          <el-row :gutter="15" class="mb10">
            <el-col :span="1.5">
              <el-button type="primary" v-hasPermi="['deviceManagement:deviceaccount:add']" plain icon="el-icon-plus" @click="handleAdd">
-                {{ $t('btn.add') }}
+                新增
              </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
@@ -175,10 +175,9 @@
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <!-- 按步骤填写数据 -->
        <el-steps style="margin-bottom: 10px" :active="stepsActive" process-status="process" finish-status="success" :simple="true">
-          <el-step :title="$t('steps.000')" />
-          <el-step :title="$t('steps.001')" />
-          <!-- <el-step :title="$t('steps.002')" /> -->
-        </el-steps>
+            <el-step title="基本信息" />
+            <el-step title="文件上传" />
+          </el-steps>
        <el-row :gutter="20">
          <!-- 步骤1填写 -->
          <template v-if="stepsActive === 0">
@@ -270,10 +269,10 @@
        </el-row>
      </el-form>
      <div slot="footer" v-if="opertype != 3">
-        <el-button @click="cancel">{{ $t('btn.cancel') }}</el-button>
-        <el-button @click="stepsBack(0)" v-if="stepsActive > 0">{{ $t('btn.back') }}</el-button>
-        <el-button type="primary" @click="stepsNext(1)" v-if="stepsActive < 1">{{ $t('btn.next') }}</el-button>
-        <el-button type="primary" @click="submitForm" v-if="stepsActive == 1">{{ $t('btn.submit') }}</el-button>
+        <el-button @click="cancel">取消</el-button>
+        <el-button @click="stepsBack(0)" v-if="stepsActive > 0">上一步</el-button>
+        <el-button type="primary" @click="stepsNext(1)" v-if="stepsActive < 1">下一步</el-button>
+        <el-button type="primary" @click="submitForm" v-if="stepsActive == 1">提交</el-button>
      </div>
    </el-dialog>
    <TheDeviceActionDialog v-model="open2" :actionDialogId="actionDialogId"></TheDeviceActionDialog>
--- a/src/views/deviceManagement/deviceformconfig/index.vue
+++ b/src/views/deviceManagement/deviceformconfig/index.vue
@@ -74,7 +74,6 @@
 </template>

 <script>
-import { getOneDict } from '@/utils/dict.js'
 import { listDeviceFormConfig, addDeviceFormConfig, delDeviceFormConfig, updateDeviceFormConfig, getDeviceFormConfig } from '@/api/deviceManagement/deviceformconfig.js'

 export default {
@@ -132,7 +131,12 @@ export default {
        //id: [{ required: true, message: 'id 雪花不能为空', trigger: 'blur' }]
      },
      options: {
-        typeOptions: []
+        typeOptions: [
+          { dictValue: 1, dictLabel: '单选' },
+          { dictValue: 2, dictLabel: '多选' },
+          { dictValue: 3, dictLabel: '图片' },
+          { dictValue: 4, dictLabel: '文本' }
+        ]
      }
    }
  },
@@ -252,14 +256,7 @@ export default {
        })
    },
    
-    initDict() {
-      const dictSelectList = ['mes_device_inspect_form_config']
-      getOneDict(dictSelectList[0]).then((statusRes) => {
-        if (statusRes.code === 200) {
-          this.options.typeOptions = statusRes.data[0].list
-        }
-      })
-    },
+    // 初始化字典数据 - 已改为直接定义写死的数据
    
    columns_showColumn(prop) {
      const column = this.columns.find(item => item.prop === prop)
@@ -268,17 +265,6 @@ export default {
  },
  
  mounted() {
-    var dictParams = [{ dictType: 'mes_device_inspect_form_config', columnName: 'typeOptions' }]
-    this.getDicts(dictParams).then((response) => {
-      console.log(response)
-      response.data.forEach((element) => {
-        this.options[element.columnName] = element.list.map((item) => {
-          item.dictValue = parseInt(item.dictValue)
-          return item
-        })
-      })
-    })
-    
    this.handleQuery()
  }
 }
--- a/src/views/deviceManagement/devicetype/index.vue
+++ b/src/views/deviceManagement/devicetype/index.vue
@@ -37,16 +37,16 @@
        <vxe-column title="操作">
          <template slot-scope="scope">
            <el-button-group>
-              <el-button text size="small" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-              <el-button text size="small" icon="Plus" @click="handleAdd(scope.row)"></el-button>
-              <el-button text size="small" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+              <el-button text size="small" icon="el-icon-edit" @click="handleUpdate(scope.row)"></el-button>
+              <el-button text size="small" icon="el-icon-plus" @click="handleAdd(scope.row)"></el-button>
+              <el-button text size="small" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
            </el-button-group>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

-    <el-dialog :title="title" v-model="open" width="720px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="720px" append-to-body>
      <el-form ref="menuRef" :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">