From 69e1c14b6b848db04b1dbf9f6c67584cbd2325e3 Mon Sep 17 00:00:00 2001
From: Tom <manfulmr@outlook.com>
Date: Sat, 17 Jan 2026 13:08:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=89=A9=E6=96=99=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=87=BA=E5=85=A5=E5=BA=93=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增入库记录和出库记录页面，包含表单提交、扫码识别、库位选择等功能
扩展uni-combox组件支持插槽和选择事件
添加相关API接口和样式文件
---
 api/productionMaterial/inventory.js           |  11 +
 api/productionMaterial/recordIOutbound.js     |  49 +++
 api/productionMaterial/recordInbound.js       |  49 +++
 pages/materialManagement/inventory/index.vue  |   2 +-
 .../recordIOutbound/index.css                 |  36 ++
 .../recordIOutbound/index.vue                 | 389 +++++++++++++++++-
 .../recordInbound/index.css                   |   6 +
 .../recordInbound/index.vue                   | 183 +++++++-
 .../components/uni-combox/uni-combox.vue      |  15 +-
 9 files changed, 696 insertions(+), 44 deletions(-)
 create mode 100644 api/productionMaterial/recordIOutbound.js
 create mode 100644 api/productionMaterial/recordInbound.js
 create mode 100644 pages/materialManagement/recordIOutbound/index.css

diff --git a/api/productionMaterial/inventory.js b/api/productionMaterial/inventory.js
index ccebfc7..42ed398 100644
--- a/api/productionMaterial/inventory.js
+++ b/api/productionMaterial/inventory.js
@@ -11,3 +11,14 @@ export function listMmInventory(query) {
     params: query,
   });
 }
+
+/**
+ * 获取物料编码列表
+ */ 
+export function getMaterialOption(query) {
+    return request({
+        url: 'mes/productionMaterial/MmInventory/GetMaterialOption/',
+        method: 'post',
+        data: query
+    })
+}
diff --git a/api/productionMaterial/recordIOutbound.js b/api/productionMaterial/recordIOutbound.js
new file mode 100644
index 0000000..98cb20b
--- /dev/null
+++ b/api/productionMaterial/recordIOutbound.js
@@ -0,0 +1,49 @@
+import request from "@/utils/request";
+
+/**
+ * 物料表查询
+ * @param {查询条件} data
+ */
+export function listMmMaterial(query) {
+    return request({
+        url: '/mes/productionMaterial/MmMaterial/list',
+        method: 'get',
+        params: query
+    })
+}
+
+/**
+ * 库位表查询
+ * @param {查询条件} data
+ */
+export function listMmLocation(query) {
+    return request({
+        url: '/mes/productionMaterial/MmLocation/list',
+        method: 'get',
+        params: query
+    })
+}
+
+/**
+ * 出入库类别对照表查询
+ * @param {查询条件} data
+ */
+export function listMmTransactionType(query) {
+    return request({
+        url: '/mes/productionMaterial/MmTransactionType/list',
+        method: 'get',
+        params: query
+    })
+}
+
+/**
+ * 新增出库记录表
+ * @param data
+ */
+export function addMmRecordOutbound(data) {
+    return request({
+        url: '/mes/productionMaterial/MmRecordOutbound',
+        method: 'post',
+        data: data
+    })
+}
diff --git a/api/productionMaterial/recordInbound.js b/api/productionMaterial/recordInbound.js
new file mode 100644
index 0000000..b36831e
--- /dev/null
+++ b/api/productionMaterial/recordInbound.js
@@ -0,0 +1,49 @@
+import request from "@/utils/request";
+
+/**
+ * 物料表查询
+ * @param {查询条件} data
+ */
+export function listMmMaterial(query) {
+    return request({
+        url: '/mes/productionMaterial/MmMaterial/list',
+        method: 'get',
+        params: query
+    })
+}
+
+/**
+ * 库位表查询
+ * @param {查询条件} data
+ */
+export function listMmLocation(query) {
+    return request({
+        url: '/mes/productionMaterial/MmLocation/list',
+        method: 'get',
+        params: query
+    })
+}
+
+/**
+ * 出入库类别对照表查询
+ * @param {查询条件} data
+ */
+export function listMmTransactionType(query) {
+    return request({
+        url: '/mes/productionMaterial/MmTransactionType/list',
+        method: 'get',
+        params: query
+    })
+}
+
+/**
+ * 新增入库单
+ * @param data
+ */
+export function createInboundReceipt(data) {
+    return request({
+        url: '/mes/productionMaterial/MmInventory/CreateInboundReceipt',
+        method: 'post',
+        data: data
+    })
+}
diff --git a/pages/materialManagement/inventory/index.vue b/pages/materialManagement/inventory/index.vue
index 5113d78..2911b57 100644
--- a/pages/materialManagement/inventory/index.vue
+++ b/pages/materialManagement/inventory/index.vue
@@ -80,7 +80,7 @@ export default {
       this.currentPage = page;
       this.scanConfirm(this.lastScanValue);
     },
-    // 扫工单码结果
+    // 扫物料编码结果
     scanConfirm(val) {
       this.lastScanValue = val;
       const params = {
diff --git a/pages/materialManagement/recordIOutbound/index.css b/pages/materialManagement/recordIOutbound/index.css
new file mode 100644
index 0000000..72419d6
--- /dev/null
+++ b/pages/materialManagement/recordIOutbound/index.css
@@ -0,0 +1,36 @@
+.example {
+    padding: 15px;
+    background-color: #fff;
+}
+
+.segmented-control {
+    margin-bottom: 15px;
+}
+
+.button-group {
+    margin-top: 15px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.form-item {
+    display: flex;
+    align-items: center;
+}
+
+.button {
+    display: flex;
+    align-items: center;
+    height: 35px;
+    margin-left: 10px;
+}
+
+.form-box {
+    padding: 12px;
+}
+
+.location-name {
+    color: #999;
+    font-size: 12px;
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/pages/materialManagement/recordIOutbound/index.vue b/pages/materialManagement/recordIOutbound/index.vue
index 1c07732..5a37f49 100644
--- a/pages/materialManagement/recordIOutbound/index.vue
+++ b/pages/materialManagement/recordIOutbound/index.vue
@@ -1,35 +1,380 @@
-vue
 <template>
-  <view class="record-inbound-box">
-    <view class="record-inbound-header">
-      <view class="record-inbound-title">入库记录</view>
+  <!-- 出库 -->
+  <view class="common-box">
+    <uni-card>
+      <ScanInput
+        @scanConfirm="scanConfirm"
+        placeholder="请扫标签,出库操作"
+      ></ScanInput>
+    </uni-card>
+
+    <view class="form-box">
+      <uni-section title="填写出库单信息" type="line">
+        <view class="example">
+          <uni-forms
+            ref="baseForm"
+            :modelValue="baseFormData"
+            :rules="valiFormData"
+            label-position="top"
+            label-width="120"
+          >
+            <uni-forms-item label="物料编码" name="materialCode" required>
+              <uni-easyinput
+                v-model="baseFormData.materialName"
+                placeholder="请输入物料编码"
+                :disabled="true"
+              />
+            </uni-forms-item>
+
+            <uni-forms-item label="物料名称" name="materialName">
+              <uni-easyinput
+                v-model="baseFormData.materialName"
+                placeholder="请输入物料名称"
+                :disabled="true"
+              />
+            </uni-forms-item>
+
+            <uni-forms-item label="标号" name="type">
+              <uni-easyinput
+                v-model="baseFormData.type"
+                placeholder="请输入标号"
+                :disabled="true"
+              />
+            </uni-forms-item>
+
+            <uni-forms-item label="供应商名称" name="supplierName">
+              <uni-easyinput
+                v-model="baseFormData.supplierName"
+                placeholder="请输入供应商名称"
+                :disabled="true"
+              />
+            </uni-forms-item>
+
+            <uni-forms-item label="库位编码" name="locationCode" required>
+              <uni-combox
+                :candidates="locationList.map((item) => item.locationCode)"
+                placeholder="请选择库位编码"
+                v-model="baseFormData.locationCode"
+                @select="handleLocationSelect"
+              >
+                <template #item="{ item }">
+                  <text>{{ item }}</text>
+                  <text class="location-name">{{ getLocationName(item) }}</text>
+                </template>
+              </uni-combox>
+            </uni-forms-item>
+
+            <uni-forms-item label="库位名称" name="locationName">
+              <uni-easyinput
+                v-model="baseFormData.locationName"
+                placeholder="请输入库位名称"
+                :disabled="true"
+              />
+            </uni-forms-item>
+
+            <uni-forms-item label="仓库编码" name="warehouseCode" required>
+              <uni-easyinput
+                v-model="baseFormData.warehouseCode"
+                placeholder="请输入仓库编码"
+                :disabled="true"
+              />
+            </uni-forms-item>
+
+            <uni-forms-item label="出库类型" name="transactionType" required>
+              <uni-combox
+                :candidates="transactionTypeList.map((item) => item.typeName)"
+                placeholder="请选择出库类型"
+                v-model="baseFormData.transactionType"
+              >
+                <template #item="{ item }">
+                  <text>{{ item }}</text>
+                  <text class="transport-type-name">{{
+                    getTransportTypeName(item)
+                  }}</text>
+                </template>
+              </uni-combox>
+            </uni-forms-item>
+
+            <uni-forms-item label="出库数量" name="quantity" required>
+              <uni-easyinput
+                v-model="baseFormData.quantity"
+                placeholder="请输入出库数量"
+              />
+            </uni-forms-item>
+
+            <uni-forms-item label="批次号" name="batchNo" required>
+              <uni-easyinput
+                v-model="baseFormData.batchNo"
+                placeholder="请输入批次号"
+              />
+            </uni-forms-item>
+
+            <uni-forms-item label="制造工单号" name="workorder">
+              <uni-easyinput
+                v-model="baseFormData.workorder"
+                placeholder="请输入制造工单号"
+              />
+            </uni-forms-item>
+
+            <uni-forms-item label="操作员" name="operator">
+              <uni-easyinput
+                v-model="baseFormData.operator"
+                placeholder="请输入操作员"
+              />
+            </uni-forms-item>
+          </uni-forms>
+          <button type="primary" @click="submit('customForm')">提交</button>
+        </view>
+      </uni-section>
     </view>
   </view>
 </template>
 
 <script>
+import * as recordIOutboundApi from "@/api/productionMaterial/recordIOutbound.js";
 export default {
+  components: {},
   data() {
     return {
-      recordInboundList: []
+      lastScanValue: "",
+      // 库位表数据
+      locationList: [],
+      // 出入库类别对照表数据
+      transactionTypeList: [],
+      // 基础表单数据
+      baseFormData: {
+        materialCode: "",
+        materialName: "",
+        type: "",
+        transactionType: "",
+        supplierName: "",
+        locationCode: "",
+        locationName: "",
+        warehouseCode: "",
+        quantity: null,
+        batchNo: "",
+        stoveCode: "",
+        operator: "",
+      },
+      // 校验表单数据
+      valiFormData: {
+        materialCode: "",
+        locationCode: "",
+        warehouseCode: "",
+        transportType: "",
+        quantity: "",
+        batchNo: "",
+      },
+      // 校验规则
+      rules: {
+        materialCode: {
+          rules: [
+            {
+              required: true,
+              errorMessage: "物料编码不能为空",
+            },
+          ],
+        },
+        locationCode: {
+          rules: [
+            {
+              required: true,
+              errorMessage: "库位编码不能为空",
+            },
+          ],
+        },
+        warehouseCode: {
+          rules: [
+            {
+              required: true,
+              errorMessage: "仓库编码不能为空",
+            },
+          ],
+        },
+        transportType: {
+          rules: [
+            {
+              required: true,
+              errorMessage: "出库类型不能为空",
+            },
+          ],
+        },
+        quantity: {
+          rules: [
+            {
+              required: true,
+              errorMessage: "出库数量不能为空",
+            },
+            {
+              format: "number",
+              errorMessage: "出库数量只能输入数字",
+            },
+          ],
+        },
+        batchNo: {
+          rules: [
+            {
+              required: true,
+              errorMessage: "批次号不能为空",
+            },
+          ],
+        },
+      },
     };
-  }
-}
+  },
+  computed: {},
+  onLoad() {
+    // 库位表查询
+    recordIOutboundApi
+      .listMmLocation({ status: "启用" })
+      .then((res) => {
+        uni.hideLoading();
+        if (res.code === 200) {
+          if (!res.data) {
+            this.openModal();
+            this.clear();
+            return;
+          }
+          this.locationList = res.data.result;
+        }
+      })
+      .catch(() => {
+        uni.hideLoading();
+      });
+    // 出入库类别对照表查询
+    recordIOutboundApi
+      .listMmTransactionType({ status: "启用", transactionDirection: "出库" })
+      .then((res) => {
+        uni.hideLoading();
+        if (res.code === 200) {
+          if (!res.data) {
+            this.uModal.content = "出库类别不存在！";
+            this.openModal();
+            this.clear();
+            return;
+          }
+          this.transactionTypeList = res.data.result;
+        }
+      })
+      .catch(() => {
+        uni.hideLoading();
+      });
+  },
+  onReady() {},
+  methods: {
+    // 获取库位名称
+    getLocationName(locationCode) {
+      const location = this.locationList.find(
+        (item) => item.locationCode === locationCode,
+      );
+      return location ? location.locationName : "";
+    },
+    // 获取入库类型名称
+    getTransportTypeName(transportType) {
+      const transactionType = this.transactionTypeList.find(
+        (item) => item.transactionType === transportType,
+      );
+      return transactionType ? transactionType.transactionTypeName : "";
+    },
+    // 扫物料编码结果
+    scanConfirm(val) {
+      this.lastScanValue = val;
+      const params = {
+        materialCode: val,
+        status: "启用",
+      };
+      uni.showLoading({
+        title: "加载中...",
+        mask: true,
+      });
+      recordIOutboundApi
+        .listMmMaterial(params)
+        .then((res) => {
+          uni.hideLoading();
+          if (res.code === 200) {
+            if (!res.data) {
+              this.uModal.content = "物料不存在！";
+              this.openModal();
+              this.clear();
+              return;
+            }
+            this.baseFormData = {
+              ...res.data.result[0],
+            };
+          }
+        })
+        .catch(() => {
+          uni.hideLoading();
+        });
+    },
+    // 提交表单
+    submit(ref) {
+      this.$refs.baseForm
+        .validate()
+        .then((res) => {
+          console.log("表单数据信息：", res);
+          // 新增出库单
+          recordIOutboundApi
+            .addMmRecordOutbound(res)
+            .then((res) => {
+              uni.hideLoading();
+              if (res.code === 200) {
+                this.reset();
+                this.uModal.content = "出库单新增成功！";
+                this.openModal();
+                this.clear();
+                return;
+              }
+            })
+            .catch(() => {
+              uni.hideLoading();
+            });
+        })
+        .catch((err) => {
+          console.log("表单错误信息：", err);
+        });
+    },
+    // 库位选择事件
+    handleLocationSelect(locationCode) {
+      const location = this.locationList.find(
+        (item) => item.locationCode === locationCode,
+      );
+      if (location) {
+        this.baseFormData.locationName = location.locationName;
+        this.baseFormData.warehouseCode = location.warehouseCode;
+      }
+    },
+    // 重置表单
+    reset() {
+      this.baseFormData = {
+        id: null,
+        materialCode: null,
+        materialName: null,
+        supplierCode: null,
+        supplierName: null,
+        warehouseCode: null,
+        warehouseName: null,
+        locationCode: null,
+        locationName: null,
+        batchNo: null,
+        stoveCode: null,
+        currentQty: null,
+        unit: null,
+        productionDate: null,
+        expiryDate: null,
+        lastUpdatedTime: null,
+        createdTime: null,
+        operator: userStore.userInfo.nickName,
+        transactionType: null,
+        quantity: null,
+        type: null,
+      };
+      proxy.resetForm("formRef");
+    },
+  },
+};
 </script>
 
 <style scoped>
-.record-inbound-box {
-  padding: 12px;
-}
-
-.record-inbound-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.record-inbound-title {
-  font-size: 18px;
-  font-weight: 500;
-}
-</style>
\ No newline at end of file
+@import "./index.css";
+</style>
diff --git a/pages/materialManagement/recordInbound/index.css b/pages/materialManagement/recordInbound/index.css
index af26c14..72419d6 100644
--- a/pages/materialManagement/recordInbound/index.css
+++ b/pages/materialManagement/recordInbound/index.css
@@ -27,4 +27,10 @@
 
 .form-box {
     padding: 12px;
+}
+
+.location-name {
+    color: #999;
+    font-size: 12px;
+    margin-left: 10px;
 }
\ No newline at end of file
diff --git a/pages/materialManagement/recordInbound/index.vue b/pages/materialManagement/recordInbound/index.vue
index 408cf53..9d49191 100644
--- a/pages/materialManagement/recordInbound/index.vue
+++ b/pages/materialManagement/recordInbound/index.vue
@@ -19,11 +19,6 @@
             label-width="120"
           >
             <uni-forms-item label="物料编码" name="materialCode" required>
-              <!-- <uni-combox
-                :candidates="candidates"
-                placeholder="请选择物料编码"
-                v-model="baseFormData.materialCode"	
-              ></uni-combox> -->
               <uni-easyinput
                 v-model="baseFormData.materialName"
                 placeholder="请输入物料编码"
@@ -56,10 +51,17 @@
             </uni-forms-item>
 
             <uni-forms-item label="库位编码" name="locationCode" required>
-              <uni-easyinput
+              <uni-combox
+                :candidates="locationList.map((item) => item.locationCode)"
+                placeholder="请选择库位编码"
                 v-model="baseFormData.locationCode"
-                placeholder="请输入库位编码"
-              />
+                @select="handleLocationSelect"
+              >
+                <template #item="{ item }">
+                  <text>{{ item }}</text>
+                  <text class="location-name">{{ getLocationName(item) }}</text>
+                </template>
+              </uni-combox>
             </uni-forms-item>
 
             <uni-forms-item label="库位名称" name="locationName">
@@ -78,11 +80,19 @@
               />
             </uni-forms-item>
 
-            <uni-forms-item label="入库类型" name="transportType" required>
-              <uni-easyinput
-                v-model="baseFormData.transportType"
-                placeholder="请输入入库类型"
-              />
+            <uni-forms-item label="入库类型" name="transactionType" required>
+              <uni-combox
+                :candidates="transactionTypeList.map((item) => item.typeName)"
+                placeholder="请选择入库类型"
+                v-model="baseFormData.transactionType"
+              >
+                <template #item="{ item }">
+                  <text>{{ item }}</text>
+                  <text class="transport-type-name">{{
+                    getTransportTypeName(item)
+                  }}</text>
+                </template>
+              </uni-combox>
             </uni-forms-item>
 
             <uni-forms-item label="入库数量" name="quantity" required>
@@ -121,15 +131,22 @@
 </template>
 
 <script>
+import * as recordInboundApi from "@/api/productionMaterial/recordInbound.js";
 export default {
+  components: {},
   data() {
     return {
+      lastScanValue: "",
+      // 库位表数据
+      locationList: [],
+      // 出入库类别对照表数据
+      transactionTypeList: [],
       // 基础表单数据
       baseFormData: {
         materialCode: "",
         materialName: "",
         type: "",
-        transportType: "",
+        transactionType: "",
         supplierName: "",
         locationCode: "",
         locationName: "",
@@ -203,25 +220,157 @@ export default {
           ],
         },
       },
-
-      // candidates: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口'],
     };
   },
   computed: {},
-  onLoad() {},
+  onLoad() {
+    // 库位表查询
+    recordInboundApi
+      .listMmLocation({ status: "启用" })
+      .then((res) => {
+        uni.hideLoading();
+        if (res.code === 200) {
+          if (!res.data) {
+            this.openModal();
+            this.clear();
+            return;
+          }
+          this.locationList = res.data.result;
+        }
+      })
+      .catch(() => {
+        uni.hideLoading();
+      });
+    // 出入库类别对照表查询
+    recordInboundApi
+      .listMmTransactionType({ status: "启用", transactionDirection: "入库" })
+      .then((res) => {
+        uni.hideLoading();
+        if (res.code === 200) {
+          if (!res.data) {
+            this.uModal.content = "出入库类别不存在！";
+            this.openModal();
+            this.clear();
+            return;
+          }
+          this.transactionTypeList = res.data.result;
+        }
+      })
+      .catch(() => {
+        uni.hideLoading();
+      });
+  },
   onReady() {},
   methods: {
+    // 获取库位名称
+    getLocationName(locationCode) {
+      const location = this.locationList.find(
+        (item) => item.locationCode === locationCode,
+      );
+      return location ? location.locationName : "";
+    },
+    // 获取入库类型名称
+    getTransportTypeName(transportType) {
+      const transactionType = this.transactionTypeList.find(
+        (item) => item.transactionType === transportType,
+      );
+      return transactionType ? transactionType.transactionTypeName : "";
+    },
+    // 扫物料编码结果
+    scanConfirm(val) {
+      this.lastScanValue = val;
+      const params = {
+        materialCode: val,
+        status: "启用",
+      };
+      uni.showLoading({
+        title: "加载中...",
+        mask: true,
+      });
+      recordInboundApi
+        .listMmMaterial(params)
+        .then((res) => {
+          uni.hideLoading();
+          if (res.code === 200) {
+            if (!res.data) {
+              this.uModal.content = "物料不存在！";
+              this.openModal();
+              this.clear();
+              return;
+            }
+            this.baseFormData = {
+              ...res.data.result[0],
+            };
+          }
+        })
+        .catch(() => {
+          uni.hideLoading();
+        });
+    },
     // 提交表单
     submit(ref) {
       this.$refs.baseForm
         .validate()
         .then((res) => {
           console.log("表单数据信息：", res);
+          // 新增入库单
+          recordInboundApi
+            .createInboundReceipt(res)
+            .then((res) => {
+              uni.hideLoading();
+              if (res.code === 200) {
+                this.reset();
+                this.uModal.content = "入库单新增成功！";
+                this.openModal();
+                this.clear();
+                return;
+              }
+            })
+            .catch(() => {
+              uni.hideLoading();
+            });
         })
         .catch((err) => {
           console.log("表单错误信息：", err);
         });
     },
+    // 库位选择事件
+    handleLocationSelect(locationCode) {
+      const location = this.locationList.find(
+        (item) => item.locationCode === locationCode,
+      );
+      if (location) {
+        this.baseFormData.locationName = location.locationName;
+        this.baseFormData.warehouseCode = location.warehouseCode;
+      }
+    },
+    // 重置表单
+    reset() {
+      this.baseFormData = {
+        id: null,
+        materialCode: null,
+        materialName: null,
+        supplierCode: null,
+        supplierName: null,
+        warehouseCode: null,
+        warehouseName: null,
+        locationCode: null,
+        locationName: null,
+        batchNo: null,
+        stoveCode: null,
+        currentQty: null,
+        unit: null,
+        productionDate: null,
+        expiryDate: null,
+        lastUpdatedTime: null,
+        createdTime: null,
+        operator: userStore.userInfo.nickName,
+        transactionType: null,
+        quantity: null,
+        type: null,
+      };
+      proxy.resetForm("formRef");
+    },
   },
 };
 </script>
diff --git a/uni_modules/uni-combox/components/uni-combox/uni-combox.vue b/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
index 83454e5..b8721b5 100644
--- a/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
+++ b/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
@@ -16,7 +16,9 @@
 					<text>{{emptyTips}}</text>
 				</view>
 				<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
-					<text>{{item}}</text>
+					<slot name="item" :item="item" :index="index">
+						<text>{{item}}</text>
+					</slot>
 				</view>
 			</scroll-view>
 		</view>
@@ -39,7 +41,7 @@
 	 */
 	export default {
 		name: 'uniCombox',
-		emits: ['input', 'update:modelValue'],
+		emits: ['input', 'update:modelValue', 'select'],
 		props: {
 			border: {
 				type: Boolean,
@@ -143,10 +145,12 @@
 				}
 			},
 			onSelectorClick(index) {
-				this.inputVal = this.filterCandidates[index]
+				const selectedItem = this.filterCandidates[index]
+				this.inputVal = selectedItem
 				this.showSelector = false
 				this.$emit('input', this.inputVal)
 				this.$emit('update:modelValue', this.inputVal)
+				this.$emit('select', selectedItem)
 			},
 			onInput() {
 				setTimeout(() => {
@@ -232,9 +236,12 @@
 		display: flex;
 		cursor: pointer;
 		/* #endif */
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
 		line-height: 36px;
 		font-size: 14px;
-		text-align: center;
+		text-align: left;
 		// border-bottom: solid 1px #DDDDDD;
 		padding: 0px 10px;
 	}