品牌

src/views/pms/device/BrandList.vue

@@ -0,0 +1,140 @@
+<template>
+  <Dialog v-model="dialogVisible" title="选择品牌" style="width: 1100px;max-height: 800px">
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="字典标签" prop="label">
+        <el-input
+          v-model="queryParams.label"
+          placeholder="请输入字典标签"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="数据状态" clearable class="!w-240px">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="字典编码" align="center" prop="id" />
+      <el-table-column label="字典标签" align="center" prop="label" />
+      <el-table-column label="字典键值" align="center" prop="value" />
+<!--      <el-table-column label="字典排序" align="center" prop="sort" />-->
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+<!--      <el-table-column label="颜色类型" align="center" prop="colorType" />-->
+<!--      <el-table-column label="CSS Class" align="center" prop="cssClass" />-->
+      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="choose(scope.row)"
+          >
+            选择
+          </el-button>
+
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+    </Dialog>
+</template>
+
+<script setup lang="ts">
+  import {DictDataVO} from "@/api/system/dict/dict.data";
+  import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+  import {dateFormatter} from "@/utils/formatTime";
+  import * as DictDataApi from "@/api/system/dict/dict.data";
+  import * as InfoClassifyApi from "@/api/pms/info";
+  import * as DictTypeApi from "@/api/system/dict/dict.type";
+  const emit = defineEmits(['choose']) // 定义 success 事件，用于操作成功后的回调
+  const dialogVisible = ref(false) // 弹窗的是否展示
+  const loading = ref(true) // 列表的加载中
+  const queryFormRef = ref() // 搜索的表单
+  const list = ref<DictDataVO[]>([]) // 列表的数据
+  const dictTypeList = ref<DictTypeApi.DictTypeVO[]>() // 字典类型的列表
+  const total = ref(0) // 列表的总页数
+  const queryParams = reactive({
+    pageNo: 1,
+    pageSize: 10,
+    label: '',
+    status: undefined,
+    dictType: 'iot_device_brand'
+  })
+  const open = async (type: string, id?: number) => {
+    dialogVisible.value = true
+  }
+  defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+  const getList = async () => {
+    loading.value = true
+    try {
+      const data = await DictDataApi.getDictDataPage(queryParams)
+      list.value = data.list
+      total.value = data.total
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /** 搜索按钮操作 */
+  const handleQuery = () => {
+    queryParams.pageNo = 1
+    getList()
+  }
+  const choose = (row: DictDataVO) => {
+    emit("choose", row);
+    dialogVisible.value = false;
+  }
+  /** 重置按钮操作 */
+  const resetQuery = () => {
+    queryFormRef.value.resetFields()
+    handleQuery()
+  }
+  /** 初始化 **/
+  onMounted(async () => {
+    await getList()
+    // 查询字典（精简)列表
+    dictTypeList.value = await DictTypeApi.getSimpleDictTypeList()
+  })
+</script>
+<style scoped lang="scss">
+
+</style>

src/views/pms/device/IotDeviceForm.vue

@@ -37,7 +37,7 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="品牌" prop="brand">
-              <el-input v-model="formData.brand" placeholder="请输入品牌" />
+              <el-input v-model="formData.brand" placeholder="请输入品牌" @click="openForm"/>
             </el-form-item>
           </el-col>
         </el-row>
@@ -271,9 +271,11 @@
     </el-form-item>
   </el-form>
   </ContentWrap>
+  <BrandList ref="brandFormRef" @choose="brandChoose" />
 </template>
 <script setup lang="ts">
 import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
+import BrandList from "@/views/pms/device/BrandList.vue";
 
 /** 设备台账 表单 */
 defineOptions({ name: 'IotDeviceForm' })
@@ -331,8 +333,18 @@ const formRules = reactive({
   manufacturerId: [{ required: true, message: '制造商id不能为空', trigger: 'blur' }],
   manDate: [{ required: true, message: '生产日期不能为空', trigger: 'blur' }],
 })
-const formRef = ref() // 表单 Ref
 
+const brandChoose = (row) =>{
+  debugger
+  console.log(JSON.stringify(row.value))
+  formData.value.brand = row.value;
+
+}
+/** 添加/修改操作 */
+const brandFormRef = ref()
+const openForm = () => {
+  brandFormRef.value.open()
+}
 const allshouqi = () =>{
   baseIsExpanded.value = false
   zzIsExpanded.value = false