提交客户/供应商管理 下拉组件

bms-back/ruoyi-system/src/main/java/com/ruoyi/customer/customerinfo/domain/BmsCustomerCompany.java

@@ -2,6 +2,8 @@ package com.ruoyi.customer.customerinfo.domain;
 
 import java.math.BigDecimal;
 import java.util.Date;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
 import org.apache.commons.lang3.builder.ToStringBuilder;
 import org.apache.commons.lang3.builder.ToStringStyle;
 import com.ruoyi.common.annotation.Excel;
@@ -55,12 +57,15 @@ public class BmsCustomerCompany extends BaseEntity
     private BigDecimal paidInCapital;
 
     /** 成立日期 */
+    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
     private Date establishDate;
 
     /** 营业期限起始日 */
+    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
     private Date businessTermStart;
 
     /** 营业期限终止日 */
+    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
     private Date businessTermEnd;
 
     /** 是否长期有效（0否 1是） */

bms-front/src/components/CustomerSelect/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <el-select
+    v-model="innerValue"
+    :placeholder="placeholder"
+    :clearable="clearable"
+    :filterable="filterable"
+    :disabled="disabled"
+    :loading="loading"
+    :size="size"
+    style="width: 100%;"
+    @change="handleChange"
+    @visible-change="handleVisibleChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item[realValueKey]"
+      :label="getLabel(item)"
+      :value="item[realValueKey]"
+    >
+      <span>{{ getLabel(item) }}</span>
+      <span class="option-sub" style="float: right; color: var(--el-text-color-secondary); font-size: 12px;">
+        {{ item[realCodeKey] }}
+      </span>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup name="CustomerSelect">
+import { listCustomer } from '@/api/customersuppliermanagement/customerinfo/customer.js'
+import { listSupplier } from '@/api/customersuppliermanagement/supplierinfo/supplier.js'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'customer',
+    validator: v => ['customer', 'supplier'].includes(v)
+  },
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  filterable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: ''
+  },
+  valueKey: {
+    type: String,
+    default: ''
+  },
+  labelKey: {
+    type: String,
+    default: ''
+  },
+  codeKey: {
+    type: String,
+    default: ''
+  },
+  params: {
+    type: Object,
+    default: () => ({})
+  },
+  pageSize: {
+    type: Number,
+    default: 1000
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const innerValue = ref(props.modelValue)
+const options = ref([])
+const loading = ref(false)
+const loaded = ref(false)
+
+const isCustomer = computed(() => props.type === 'customer')
+const realValueKey = computed(() => props.valueKey || (isCustomer.value ? 'customerId' : 'supplierId'))
+const realLabelKey = computed(() => props.labelKey || (isCustomer.value ? 'customerName' : 'supplierName'))
+const realCodeKey = computed(() => props.codeKey || (isCustomer.value ? 'customerCode' : 'supplierCode'))
+
+watch(() => props.modelValue, (val) => {
+  innerValue.value = val
+}, { immediate: true })
+
+function getLabel(item) {
+  return item[realLabelKey.value] || ''
+}
+
+function fetchList() {
+  if (loaded.value) return Promise.resolve(options.value)
+  loading.value = true
+  const api = isCustomer.value ? listCustomer : listSupplier
+  return api({ pageNum: 1, pageSize: props.pageSize, ...props.params })
+    .then(res => {
+      options.value = res.rows || []
+      loaded.value = true
+      return options.value
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function handleChange(val) {
+  emit('update:modelValue', val)
+  const selected = options.value.find(item => String(item[realValueKey.value]) === String(val))
+  emit('change', val, selected)
+}
+
+function handleVisibleChange(visible) {
+  if (visible && !loaded.value && !loading.value) {
+    fetchList()
+  }
+}
+
+onMounted(() => {
+  fetchList()
+})
+
+defineExpose({
+  reload: () => {
+    loaded.value = false
+    return fetchList()
+  },
+  getOptions: () => options.value
+})
+</script>
+
+<style scoped>
+.option-sub {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

bms-front/src/main.js

@@ -48,6 +48,8 @@ import BasicForm from '@/components/BasicForm'
 // 公共表格组件
 import BasicTable from '@/components/BasicTable'
 import SimpleTable from '@/components/SimpleTable'
+// 客户/供应商下拉选择组件
+import CustomerSelect from '@/components/CustomerSelect'
 
 const app = createApp(App)
 
@@ -73,6 +75,7 @@ app.component('Editor', Editor)
 app.component('BasicForm', BasicForm)
 app.component('BasicTable', BasicTable)
 app.component('SimpleTable', SimpleTable)
+app.component('CustomerSelect', CustomerSelect)
 
 app.use(router)
 app.use(store)