弹窗显示

src/views/pms/device/BrandList.vue

@@ -1,140 +1,162 @@
 <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"
+  <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-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-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" @row-click="handleRowClick">
+        <el-table-column width="60" label="选择">
+          <template #default="{ row }">
+            <el-radio
+              :model-value="selectedRow?.id"
+              :label="row.id"
+              @click.stop="selectRow(row)"
+              class="no-label-radio"
+            />
+          </template>
+        </el-table-column>
+        <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"
       />
-      <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>
+    </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: 'pms_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
-    }
-  }
+import * as DictDataApi from '@/api/system/dict/dict.data'
+import { DictDataVO } from '@/api/system/dict/dict.data'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as DictTypeApi from '@/api/system/dict/dict.type'
 
-  /** 搜索按钮操作 */
-  const handleQuery = () => {
-    queryParams.pageNo = 1
-    getList()
-  }
-  const choose = (row: DictDataVO) => {
-    emit("choose", row);
-    dialogVisible.value = false;
-  }
-  /** 重置按钮操作 */
-  const resetQuery = () => {
-    queryFormRef.value.resetFields()
-    handleQuery()
+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: 'pms_device_brand'
+})
+
+const selectedRow = ref(null);
+
+// 处理单选逻辑
+const selectRow = (row) => {
+  selectedRow.value = selectedRow.value?.id === row.id ? null : row;
+  emit('choose', row)
+  dialogVisible.value = false
+};
+
+// 点击整行选中
+const handleRowClick = (row) => {
+  selectRow(row);
+};
+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
   }
-  /** 初始化 **/
-  onMounted(async () => {
-    await getList()
-    // 查询字典（精简)列表
-    dictTypeList.value = await DictTypeApi.getSimpleDictTypeList()
-  })
-</script>
-<style scoped lang="scss">
+}
 
+/** 搜索按钮操作 */
+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 lang="scss">
+.no-label-radio .el-radio__label {
+  display: none;
+}
+.no-label-radio .el-radio__inner {
+  margin-right: 0;
+}
 </style>

src/views/pms/device/CustomerList.vue

@@ -24,9 +24,19 @@
     </el-form>
   </ContentWrap>
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column :label="props.type==='supplier'?'供应商名称':'制造商名称'" align="center" prop="name" />
-      <el-table-column :label="props.type==='supplier'?'供应商分类':'制造商分类'" align="center" prop="classification" >
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @row-click="handleRowClick">
+      <el-table-column width="60" label="选择">
+        <template #default="{ row }">
+          <el-radio
+            :model-value="selectedRow?.id"
+            :label="row.id"
+            @click.stop="selectRow(row)"
+            class="no-label-radio"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column :label="customerType==='supplier'?'供应商名称':'制造商名称'" align="center" prop="name" />
+      <el-table-column :label="customerType==='supplier'?'供应商分类':'制造商分类'" align="center" prop="classification" >
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.SUPPLIER_TYPE" :value="scope.row.classification" />
         </template>
@@ -43,18 +53,18 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="choose(scope.row)"
-          >
-            选择
-          </el-button>
+<!--      <el-table-column label="操作" align="center">-->
+<!--        <template #default="scope">-->
+<!--          <el-button-->
+<!--            link-->
+<!--            type="primary"-->
+<!--            @click="choose(scope.row)"-->
+<!--          >-->
+<!--            选择-->
+<!--          </el-button>-->
 
-        </template>
-      </el-table-column>
+<!--        </template>-->
+<!--      </el-table-column>-->
     </el-table>
     <!-- 分页 -->
     <Pagination
@@ -69,22 +79,34 @@
 
 <script setup lang="ts">
   import {DictDataVO} from "@/api/system/dict/dict.data";
-  import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+  import {DICT_TYPE} from "@/utils/dict";
   import {dateFormatter} from "@/utils/formatTime";
-  import { Api, SupplierVO } from '@/api/supplier/base'
-  import * as DictTypeApi from "@/api/system/dict/dict.type";
+  import { Api } from '@/api/supplier/base'
   import { propTypes } from '@/utils/propTypes'
   const emit = defineEmits(['choose']) // 定义 success 事件，用于操作成功后的回调
   const dialogVisible = ref(false) // 弹窗的是否展示
   const dialogTitle = ref('') // 弹窗的是否展示
+  const customerType = ref('') // 弹窗的是否展示
   const loading = ref(true) // 列表的加载中
   const queryFormRef = ref() // 搜索的表单
   const list = ref<DictDataVO[]>([]) // 列表的数据
-  const dictTypeList = ref<DictTypeApi.DictTypeVO[]>() // 字典类型的列表
   const total = ref(0) // 列表的总页数
-  const props = defineProps({
-    type: propTypes.bool.def(''), // 是否作为详情组件
-  })
+  // const props = defineProps({
+  //   type: propTypes.bool.def(), // 是否作为详情组件
+  // })
+  const selectedRow = ref(null);
+
+  // 处理单选逻辑
+  const selectRow = (row) => {
+    selectedRow.value = selectedRow.value?.id === row.id ? null : row;
+    emit('choose', row)
+    dialogVisible.value = false
+  };
+
+  // 点击整行选中
+  const handleRowClick = (row) => {
+    selectRow(row);
+  };
   const queryParams = reactive({
     pageNo: 1,
     pageSize: 10,
@@ -106,13 +128,16 @@
     status: undefined,
     remark: undefined,
     createTime: [],
-    customerNature: undefined
+    customerNature: ''
   })
-  const open = async (type: string, id?: number) => {
+  const open = async (type: string) => {
     dialogVisible.value = true
-    queryParams.customerNature = props.type
+    selectedRow.value = null
+    customerType.value = type
+    queryParams.customerNature = type
+    console.log('----------'+type)
     await getList()
-    dialogTitle.value = props.type==='supplier'?'供应商':'制造商';
+    dialogTitle.value = type==='supplier'?'供应商':'制造商';
   }
   defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 

src/views/pms/device/IotDeviceForm.vue

@@ -269,7 +269,7 @@
   </el-form>
   </ContentWrap>
   <BrandList ref="brandFormRef" @choose="brandChoose" />
-  <CustomerList ref="customerFormRef" @choose="customerChoose" :type="customerType"/>
+  <CustomerList ref="customerFormRef" @choose="customerChoose"/>
 </template>
 <script setup lang="ts">
 import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
@@ -346,8 +346,8 @@ const brandChoose = (row) =>{
   formData.value.brand = row.value;
 }
 const customerChoose = (row) =>{
-  console.log(JSON.stringify(row.value))
-  formData.value.brand = row.value;
+  console.log(JSON.stringify(row))
+    formData.value[row.customerNature+'Id'] = row.name;
 }
 /** 添加/修改操作 */
 const brandFormRef = ref()
@@ -356,8 +356,7 @@ const openForm = () => {
 }
 const customerFormRef = ref()
 const openCustomer = (type) => {
-  customerType.value = type;
-  customerFormRef.value.open()
+  customerFormRef.value.open(type)
 }
 const allshouqi = () =>{
   baseIsExpanded.value = false