feat(example): 添加用户机台管理功能

jnpf-java-boot/jnpf-web/src/views/example/common/UserSelect.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-select
+    v-model="selectedUserId"
+    :placeholder="placeholder"
+    filterable
+    :filter-method="handleFilter"
+    clearable
+    :style="{ width: '100%' }"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="user in filteredUsers"
+      :key="user.id"
+      :label="user.name"
+      :value="user.id"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+import request from '@/utils/request';
+
+export default {
+  name: 'UserSelect',
+  props: {
+    value: {
+      type: [String, Number, undefined],
+      default: undefined,
+    },
+    placeholder: {
+      type: String,
+      default: '请选择用户',
+    },
+  },
+  data() {
+    return {
+      selectedUserId: this.value,
+      userList: [],
+      filterKeyword: '',
+    };
+  },
+  computed: {
+    filteredUsers() {
+      if (!this.filterKeyword) {
+        return this.userList;
+      }
+      const keyword = this.filterKeyword.toLowerCase();
+      return this.userList.filter(user =>
+        user.name.toLowerCase().includes(keyword) ||
+        user.account.toLowerCase().includes(keyword)
+      );
+    },
+  },
+  watch: {
+    value(newVal) {
+      this.selectedUserId = newVal;
+    },
+    selectedUserId(newVal) {
+      this.$emit('input', newVal);
+    },
+  },
+  created() {
+    this.getUserList();
+  },
+  methods: {
+    getUserList() {
+      request({
+        url: '/api/permission/Users/getUserSelect',
+        method: 'get',
+      }).then(res => {
+        this.userList = res.data || [];
+      });
+    },
+    handleFilter(val) {
+      this.filterKeyword = val;
+    },
+    handleChange(userId) {
+      const user = this.userList.find(item => item.id === userId);
+      if (user) {
+        this.$emit('change', { id: user.id, fullName: user.name, account: user.account });
+      } else {
+        this.$emit('change', null);
+      }
+    },
+  },
+};
+</script>

jnpf-java-boot/jnpf-web/src/views/example/usermachine/index.vue

@@ -84,6 +84,33 @@
         <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
           @pagination="initData" />
       </div>
+
+      <!-- 机台信息显示区域 -->
+      <div v-if="showMachineInfo" class="JNPF-common-layout-main" style="height: auto; overflow: visible; margin-top: 20px;">
+        <div class="JNPF-common-head">
+          <div>
+            <span >机台信息</span>
+          </div>
+          <div class="JNPF-common-head-right">
+            <el-button type="text" @click="hideMachineInfo" style="color: #999;">收起</el-button>
+          </div>
+        </div>
+        <div style="max-height: 360px; overflow-y: auto;">
+          <el-table
+            :data="machineDetailList"
+            :border="true"
+            :style="{ width: '100%' }"
+            :max-height="340"
+            v-loading="machineDetailLoading"
+          >
+            <el-table-column type="index" label="序号" align="center" width="60"/>
+            <el-table-column prop="machineCd" label="机台编码" align="center"/>
+            <el-table-column prop="machineName" label="机台名称" align="center"/>
+            <el-table-column prop="createUserName" label="创建人" align="center"/>
+            <el-table-column prop="creatorTime" label="创建时间" align="center" :formatter="jnpf.tableDateFormat1"/>
+          </el-table>
+        </div>
+      </div>
     </div>
     <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
   </div>
@@ -94,7 +121,6 @@ import request from "@/utils/request";
 import { mapGetters } from "vuex";
 import JNPFForm from "./form.vue";
 import machineList from "./machineList.vue";
-import machineDetail from "./machineDetail.vue";
 import jnpf from "@/utils/jnpf";
 
 export default {
@@ -102,7 +128,6 @@ export default {
   components: {
     JNPFForm,
     machineList,
-    machineDetail,
   },
   data() {
     return {
@@ -136,10 +161,12 @@ export default {
       enabledStatusProps: { label: "fullName", value: "id" },
       // 机台选择弹窗（用于form.vue）
       machineDialogVisible: false,
-      // 机台详情弹窗（用于显示用户机台列表）
-      machineDetailVisible: false,
+      // 机台信息显示
+      showMachineInfo: false,
       currentUserName: "",
       currentUserMachineId: "",
+      machineDetailList: [],
+      machineDetailLoading: false,
     };
   },
   computed: {
@@ -205,7 +232,27 @@ export default {
     showMachineList(row) {
       this.currentUserName = row.userName;
       this.currentUserMachineId = row.id;
-      this.machineDetailVisible = true;
+      this.showMachineInfo = true;
+      this.loadMachineDetail();
+    },
+    // 加载机台详情数据
+    loadMachineDetail() {
+      this.machineDetailLoading = true;
+      request({
+        url: `/api/example/userMachine/${this.currentUserMachineId}`,
+        method: "get",
+      }).then((res) => {
+        this.machineDetailList = res.data.machineList || [];
+        this.machineDetailLoading = false;
+      }).catch(() => {
+        this.machineDetailList = [];
+        this.machineDetailLoading = false;
+      });
+    },
+    // 隐藏机台信息
+    hideMachineInfo() {
+      this.showMachineInfo = false;
+      this.machineDetailList = [];
     },
   },
 };