自媒体渠道绑定部门

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 ?? ''
 }