feat(system): 新增产品线选择组件

- 重构 CsSelectOptionItemVo 类，改名为 CsSelectOptionVo - 新增 SystemComponentController 控制器，提供部门下拉选择数据源查询接口 - 新增 SystemProductLineVo 类，用于表示产品线选择框的选项 - 实现查询部门选择数据源的方法，构建产品线选择框的选项列表 - 新增前端 API 接口和组件以支持产品线选择功能 - 更新业务演示页面，添加产品线选择框
2025-07-27 11:55:26 +08:00
parent f245ed17c2
commit 14460b1c9a
10 changed files with 247 additions and 29 deletions
@@ -0,0 +1,75 @@
+<template>
+  <el-select
+    v-model="selectedValue"
+    filterable
+    clearable
+    placeholder="请选择产品线"
+    :disabled="disabled"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in deptOptions"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+
+import { queryDeptSelectDataSource } from '@/api/system/component'
+import CsMessage from '@/utils/elementui/CsMessage'
+
+export default {
+  name: 'CuteProductLineSelect',
+  props: {
+    value: {
+      type: [Number, String],
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      deptOptions: [],
+      selectedValue: this.value
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.selectedValue = newVal
+    }
+  },
+  created() {
+    this.fetchDeptData()
+  },
+  methods: {
+    fetchDeptData() {
+      queryDeptSelectDataSource().then(data => {
+        this.deptOptions = data
+      }).catch(error => {
+        console.error('获取部门数据失败:', error)
+        CsMessage.Error('获取部门数据失败')
+      })
+    },
+    handleChange(value) {
+      this.selectedValue = value
+      for (const item of this.deptOptions) {
+        if (item.value === value) {
+          this.$emit('detail', item)
+          break
+        }
+      }
+      // 绑定change事件
+      this.$emit('change', value)
+      // 绑定form value
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+