托盘条码下拉框选择

ruoyi-ui/src/views/bas/traycode/index.vue

@@ -2,12 +2,20 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
       <el-form-item :label="$t('traycode.formatId')" prop="formatId">
-        <el-input
+<!--        <el-input
           v-model="queryParams.formatId"
           :placeholder="$t('traycode.placeholder.formatId')"
           clearable
           @keyup.enter.native="handleQuery"
-        />
+        />-->
+        <el-select v-model="queryParams.formatId" :placeholder="$t('traycode.placeholder.formatId')">
+          <el-option
+            v-for="item in traycodeFormatList"
+            :key="item.id"
+            :label="item.remarks"
+            :value="item.id"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item :label="$t('traycode.trayCode')" prop="trayCode">
         <el-input
@@ -17,7 +25,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      
+
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('traycode.search') }}</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('traycode.reset') }}</el-button>
@@ -84,7 +92,7 @@
     <el-table ref="table" v-loading="loading" :data="traycodeList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="id" align="center" prop="id" />
-      <el-table-column :label="$t('traycode.formatId')" align="center" prop="formatId" />
+      <el-table-column :label="$t('traycode.formatId')" align="center" prop="formatName" />
       <el-table-column :label="$t('traycode.trayCode')" align="center" prop="trayCode" />
       <!-- <el-table-column label="备用字段1" align="center" prop="spare1" />
       <el-table-column label="备用字段2" align="center" prop="spare2" />
@@ -128,9 +136,17 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item :label="$t('traycode.formatId')" prop="formatId">
-          <el-input v-model="form.formatId" :placeholder="$t('traycode.placeholder.formatId')" />
+          <el-select v-model="form.formatId" :placeholder="$t('traycode.placeholder.formatId')">
+            <el-option
+              v-for="item in traycodeFormatList"
+              :key="item.id"
+              :label="item.remarks"
+              :value="item.id"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item :label="$t('traycode.trayCode')" prop="trayCode">
+
           <el-input v-model="form.trayCode" :placeholder="$t('traycode.placeholder.trayCode')" />
         </el-form-item>
         <!-- <el-form-item label="备用字段1" prop="spare1">
@@ -154,6 +170,8 @@
 <script>
 import { listTraycode, getTraycode, delTraycode, addTraycode, updateTraycode } from "@/api/bas/traycode"
 import { getLodop } from "@/plugins/LodopFuncs"
+import { listTraycodeFormat} from "@/api/bas/traycodeFormat"
+
 
 export default {
   name: "Traycode",
@@ -175,8 +193,7 @@ export default {
       total: 0,
       // 条码信息表格数据
       traycodeList: [],
-      // 弹出层标题
-      title: "",
+      traycodeFormatList: [],
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -189,6 +206,10 @@ export default {
         spare2: null,
         spare3: null
       },
+      queryTrayCodeFormatParams: {
+        pageNum: 1,
+        pageSize: 99,
+      },
       // 表单参数
       form: {},
       // 表单校验
@@ -197,9 +218,19 @@ export default {
     }
   },
   created() {
+    this.getTrayCodeFormatList()
     this.getList()
   },
   methods: {
+    /** 查询条码信息列表 */
+    getTrayCodeFormatList() {
+      this.loading = true
+      listTraycodeFormat(this.queryTrayCodeFormatParams).then(response => {
+        this.traycodeFormatList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
     /** 查询条码信息列表 */
     getList() {
       this.loading = true
@@ -351,3 +382,10 @@ export default {
   }
 }
 </script>
+<style scoped>
+/* 统一表单控件宽度 */
+.el-select,
+.el-input {
+  width: 100%;
+}
+</style>