From ebaf35aad3f4b982812e6f566bf9239394e26493 Mon Sep 17 00:00:00 2001
From: zxy <zhouxy1921@11.com>
Date: Wed, 15 Apr 2026 17:37:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(example):=20=E6=96=B0=E5=A2=9E=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E6=9C=BA=E5=8F=B0=E7=8F=AD=E7=BB=84=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../example/usermachine/machineDetail.vue     | 100 ++++++++++
 .../views/example/usermachine/machineList.vue | 177 ++++++++++++++++++
 2 files changed, 277 insertions(+)
 create mode 100644 jnpf-java-boot/jnpf-web/src/views/example/usermachine/machineDetail.vue
 create mode 100644 jnpf-java-boot/jnpf-web/src/views/example/usermachine/machineList.vue

diff --git a/jnpf-java-boot/jnpf-web/src/views/example/usermachine/machineDetail.vue b/jnpf-java-boot/jnpf-web/src/views/example/usermachine/machineDetail.vue
new file mode 100644
index 0000000..dcc68fa
--- /dev/null
+++ b/jnpf-java-boot/jnpf-web/src/views/example/usermachine/machineDetail.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-dialog
+    title=""
+    :visible.sync="dialogVisible"
+    width="800px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+    :append-to-body="true"
+  >
+    <el-row :gutter="20" style="margin-top: 10px;">
+      <el-col :span="24">
+        <div style="margin-bottom: 10px;">
+          <span style="font-weight: bold;">机台信息</span>
+        </div>
+        <div style="max-height: 360px; overflow-y: auto;">
+          <el-table
+            :data="machineList"
+            :border="true"
+            :style="{ width: '100%' }"
+            :max-height="340"
+            v-loading="loading"
+          >
+            <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>
+      </el-col>
+    </el-row>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleClose">关 闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import request from "@/utils/request";
+import jnpf from "@/utils/jnpf";
+
+export default {
+  name: "machineDetail",
+  components: {},
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+    userName: {
+      type: String,
+      default: "",
+    },
+    userMachineId: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    title() {
+      return `${this.userName} 的机台列表`;
+    },
+    jnpf() {
+      return jnpf;
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      machineList: [],
+    };
+  },
+  watch: {
+    dialogVisible(val) {
+      if (val && this.userMachineId) {
+        this.initData();
+      }
+    },
+  },
+  methods: {
+    initData() {
+      this.loading = true;
+      request({
+        url: `/api/example/userMachine/${this.userMachineId}`,
+        method: "get",
+      }).then((res) => {
+        this.machineList = res.data.machineList || [];
+        this.loading = false;
+      }).catch(() => {
+        this.machineList = [];
+        this.loading = false;
+      });
+    },
+    handleClose() {
+      this.$emit("update:dialogVisible", false);
+    },
+  },
+};
+</script>
diff --git a/jnpf-java-boot/jnpf-web/src/views/example/usermachine/machineList.vue b/jnpf-java-boot/jnpf-web/src/views/example/usermachine/machineList.vue
new file mode 100644
index 0000000..77c861d
--- /dev/null
+++ b/jnpf-java-boot/jnpf-web/src/views/example/usermachine/machineList.vue
@@ -0,0 +1,177 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    width="1000px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+    :append-to-body="true"
+  >
+    <!-- 搜索区域 -->
+    <el-row :gutter="20" style="margin-bottom: 15px; padding: 0 10px;">
+      <el-col :span="16">
+        <el-input
+          v-model="listQuery.selectKey"
+          placeholder="请输入机台编码或机台名称"
+          clearable
+          label="检索条件"
+          @keyup.enter.native="initData"
+        >
+          <i slot="prefix" class="el-icon-search"></i>
+        </el-input>
+      </el-col>
+      <el-col :span="8" style="text-align: right;">
+        <el-button type="primary" icon="el-icon-search" @click="initData">查询</el-button>
+        <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
+      </el-col>
+    </el-row>
+    
+    <div style="max-height: 450px; overflow-y: auto;">
+      <el-table
+        :data="machineList"
+        :border="true"
+        :style="{ width: '100%' }"
+        v-loading="loading"
+        @selection-change="handleSelectionChange"
+        ref="machineTable"
+        :max-height="400"
+      >
+        <el-table-column type="selection" align="center" width="55"/>
+        <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>
+      
+      <!-- 分页 -->
+      <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
+        @pagination="initData" />
+    </div>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import request from "@/utils/request";
+import jnpf from "@/utils/jnpf";
+import pagination from "@/components/Pagination";
+
+export default {
+  name: "machineList",
+  components: {
+    pagination,
+  },
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "选择机台",
+    },
+    selectedMachineIds: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      machineList: [],
+      selectedItems: [],
+      total: 0,
+      listQuery: {
+        currentPage: 1,
+        pageSize: 20,
+        sort: "desc",
+        sidx: "",
+        selectKey: "",
+      },
+    };
+  },
+  computed: {
+    jnpf() {
+      return jnpf;
+    },
+  },
+  watch: {
+    dialogVisible(val) {
+      if (val) {
+        this.listQuery.currentPage = 1;
+        this.initData();
+      }
+    },
+  },
+  methods: {
+    initData() {
+      this.loading = true;
+      let _query = {
+        ...this.listQuery,
+        dataType: 0,
+      };
+      request({
+        url: `/api/example/machine/getList`,
+        method: "post",
+        data: _query,
+      }).then((res) => {
+        this.machineList = res.data.list || [];
+        this.total = res.data.pagination.total;
+        this.loading = false;
+        // 设置已选中的机台
+        this.setSelectedMachines();
+      }).catch(() => {
+        this.machineList = [];
+        this.total = 0;
+        this.loading = false;
+      });
+    },
+    // 设置已选中的机台
+    setSelectedMachines() {
+      if (!this.$refs.machineTable || this.selectedMachineIds.length === 0) {
+        return;
+      }
+      this.$nextTick(() => {
+        // 先清除所有选中状态
+        this.$refs.machineTable.clearSelection();
+        // 重新勾选
+        this.machineList.forEach(row => {
+          if (this.selectedMachineIds.includes(row.id)) {
+            this.$refs.machineTable.toggleRowSelection(row, true);
+          }
+        });
+      });
+    },
+    // 勾选变化处理
+    handleSelectionChange(selectedItems) {
+      this.selectedItems = selectedItems;
+    },
+    // 确认选择
+    handleConfirm() {
+      const selectedMachines = this.selectedItems.map(item => ({
+        machineId: item.id,
+        machineCd: item.machineCd,
+        machineName: item.machineName,
+        createUserName: item.createUserName,
+        creatorTime: item.creatorTime,
+      }));
+      this.$emit('confirm', selectedMachines);
+      this.handleClose();
+    },
+    handleClose() {
+      this.$emit("update:dialogVisible", false);
+    },
+    // 重置搜索
+    reset() {
+      this.listQuery.selectKey = "";
+      this.listQuery.currentPage = 1;
+      this.initData();
+    },
+  },
+};
+</script>