update

更新自媒体渠道标签

admin/src/views/finance/account_cost/edit.vue

@@ -22,16 +22,26 @@
                     <el-select
                         v-model="formData.media_channel_code"
                         placeholder="请选择自媒体渠道"
-                        class="w-full"
+                        class="account-cost-channel-select w-full"
                         filterable
                         :disabled="mode === 'edit'"
                     >
-                        <el-option
-                            v-for="item in mediaChannelOptions"
-                            :key="item.code"
-                            :label="item.name"
-                            :value="item.code"
-                        />
+                        <el-option-group
+                            v-for="g in mediaChannelGroups"
+                            :key="g.group_name"
+                            :label="g.group_name"
+                        >
+                            <el-option
+                                v-for="ch in g.channels"
+                                :key="ch.channel_code"
+                                :label="ch.channel_name"
+                                :value="ch.channel_code"
+                            >
+                                <div class="channel-opt-row">
+                                    <span class="opt-name">{{ ch.channel_name }}</span>
+                                </div>
+                            </el-option>
+                        </el-option-group>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="部门" prop="dept_id">
@@ -78,9 +88,9 @@ import type { FormInstance } from 'element-plus'
 import { accountCostAdd, accountCostDetail, accountCostEdit } from '@/api/finance'
 import Popup from '@/components/popup/index.vue'
 
-interface MediaChannelOption {
-    code: string
-    name: string
+interface MediaChannelGroup {
+    group_name: string
+    channels: { channel_code: string; channel_name: string }[]
 }
 
 interface DeptOption {
@@ -90,7 +100,7 @@ interface DeptOption {
 }
 
 const props = defineProps<{
-    mediaChannelOptions: MediaChannelOption[]
+    mediaChannelGroups: MediaChannelGroup[]
     deptOptions: DeptOption[]
     defaultMediaChannelCode: string
 }>()
@@ -197,3 +207,21 @@ defineExpose({
     getDetail,
 })
 </script>
+
+<style scoped lang="scss">
+.account-cost-channel-select {
+    :deep(.channel-opt-row) {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        min-width: 0;
+        padding-right: 4px;
+    }
+    :deep(.opt-name) {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+</style>