自媒体渠道绑定部门

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

@@ -34,6 +34,20 @@
                         />
                     </el-select>
                 </el-form-item>
+                <el-form-item label="部门" prop="dept_id">
+                    <el-tree-select
+                        v-model="formData.dept_id"
+                        :data="deptOptions"
+                        node-key="id"
+                        :props="treeProps"
+                        :default-expand-all="true"
+                        check-strictly
+                        placeholder="请选择绑定部门"
+                        clearable
+                        filterable
+                        class="w-full"
+                    />
+                </el-form-item>
                 <el-form-item label="账户消耗" prop="amount">
                     <el-input-number
                         v-model="formData.amount"
@@ -69,8 +83,15 @@ interface MediaChannelOption {
     name: string
 }
 
+interface DeptOption {
+    id: number
+    name: string
+    children?: DeptOption[]
+}
+
 const props = defineProps<{
     mediaChannelOptions: MediaChannelOption[]
+    deptOptions: DeptOption[]
     defaultMediaChannelCode: string
 }>()
 
@@ -80,11 +101,17 @@ const popupRef = shallowRef<InstanceType<typeof Popup>>()
 const mode = ref<'add' | 'edit'>('add')
 
 const popupTitle = computed(() => (mode.value === 'edit' ? '编辑账户消耗' : '新增账户消耗'))
+const treeProps = {
+    value: 'id',
+    label: 'name',
+    children: 'children',
+}
 
 const formData = reactive({
     id: '',
     cost_date: '',
     media_channel_code: '',
+    dept_id: '' as string | number,
     amount: 0,
     remark: '',
 })
@@ -104,6 +131,13 @@ const formRules = {
             trigger: ['change'],
         },
     ],
+    dept_id: [
+        {
+            required: true,
+            message: '请选择绑定部门',
+            trigger: ['change'],
+        },
+    ],
     amount: [
         {
             required: true,
@@ -117,6 +151,7 @@ const resetForm = () => {
     formData.id = ''
     formData.cost_date = ''
     formData.media_channel_code = props.defaultMediaChannelCode || ''
+    formData.dept_id = ''
     formData.amount = 0
     formData.remark = ''
 }
@@ -142,6 +177,7 @@ const setFormData = (data: Record<string, any>) => {
     formData.id = data.id ?? ''
     formData.cost_date = data.cost_date ?? ''
     formData.media_channel_code = data.media_channel_code ?? ''
+    formData.dept_id = data.dept_id ? Number(data.dept_id) : ''
     formData.amount = Number(data.amount ?? 0)
     formData.remark = data.remark ?? ''
 }

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

@@ -37,6 +37,20 @@
                         />
                     </el-select>
                 </el-form-item>
+                <el-form-item label="部门">
+                    <el-tree-select
+                        v-model="queryParams.dept_id"
+                        :data="deptOptions"
+                        node-key="id"
+                        :props="treeProps"
+                        :default-expand-all="true"
+                        check-strictly
+                        placeholder="筛选全部部门"
+                        clearable
+                        filterable
+                        class="w-[220px]"
+                    />
+                </el-form-item>
                 <el-form-item class="w-[280px]" label="备注/维护人">
                     <el-input
                         v-model="queryParams.remark"
@@ -65,6 +79,7 @@
             <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
                 <el-table-column label="日期" prop="cost_date" min-width="120" />
                 <el-table-column label="自媒体渠道" prop="media_channel_name" min-width="120" />
+                <el-table-column label="部门" prop="dept_name" min-width="140" />
                 <el-table-column label="账户消耗" min-width="120">
                     <template #default="{ row }">¥{{ row.amount }}</template>
                 </el-table-column>
@@ -103,6 +118,7 @@
             v-if="showEdit"
             ref="editRef"
             :media-channel-options="mediaChannelOptions"
+            :dept-options="deptOptions"
             :default-media-channel-code="defaultMediaChannelCode"
             @success="getLists"
             @close="showEdit = false"
@@ -122,6 +138,12 @@ interface MediaChannelOption {
     name: string
 }
 
+interface DeptOption {
+    id: number
+    name: string
+    children?: DeptOption[]
+}
+
 const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 const showEdit = ref(false)
 
@@ -129,6 +151,7 @@ const queryParams = reactive({
     start_date: '',
     end_date: '',
     media_channel_code: '',
+    dept_id: '',
     remark: '',
 })
 
@@ -147,8 +170,19 @@ const mediaChannelOptions = computed<MediaChannelOption[]>(() => {
     }))
 })
 
+const deptOptions = computed<DeptOption[]>(() => {
+    const options = pager.extend.dept_options
+    return Array.isArray(options) ? options : []
+})
+
 const defaultMediaChannelCode = computed(() => String(pager.extend.default_media_channel_code || ''))
 
+const treeProps = {
+    value: 'id',
+    label: 'name',
+    children: 'children',
+}
+
 const handleAdd = async () => {
     showEdit.value = true
     await nextTick()
@@ -172,6 +206,7 @@ const handleReset = () => {
     queryParams.start_date = ''
     queryParams.end_date = ''
     queryParams.media_channel_code = ''
+    queryParams.dept_id = ''
     queryParams.remark = ''
     resetPage()
 }