新增分项费用明细

src/api/pc/cost/itemExpense.ts

@@ -42,3 +42,24 @@ export function deleteItemExpense(ids: number[]) {
     method: 'delete'
   });
 }
+
+/**
+ * 分项费用明细
+ */
+export function expenseDetail(expenseTypeId: string | number) {
+  return request({
+    url: `/customer/pcCustomerExpenseType/expenseDetail/${expenseTypeId}`,
+    method: 'get'
+  });
+}
+
+/**
+ * 充值额度
+ */
+export function rechargeLimit(data: any) {
+  return request({
+    url: '/customer/pcCustomerExpenseType/rechargeLimit',
+    method: 'post',
+    data: data
+  });
+}

src/views/cost/itemExpense/manage.vue

@@ -6,44 +6,141 @@
     </div>
 
     <el-table :data="itemDetailList" border>
-      <el-table-column prop="" label="部门名称" min-width="200" />
+      <el-table-column prop="deptName" label="部门名称" min-width="200" />
       <el-table-column prop="status" label="状态" min-width="100" align="center">
         <template #default="{ row }">
-          <span :class="['status-text', row.status === '启用' ? 'active' : '']">{{ row.status == '0' ? '启用' : '禁用' }}</span>
+          <span :class="['status-text', row.status === '0' ? 'active' : '']">{{ row.status == '0' ? '启用' : '禁用' }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="" label="现有额度(年)" min-width="150" align="center">
-        <!-- <template #default="{ row }">
-          <span>{{ row.usedQuota || '0.00' }}</span>
-        </template> -->
+      <el-table-column prop="existingAmount" label="现有额度(年)" min-width="150" align="center">
+        <template #default="{ row }">¥{{ (Number(row.existingAmount) || 0).toLocaleString() }}</template>
       </el-table-column>
       <el-table-column prop="usedQuota" label="已用额度(年)" min-width="150" align="center">
-        <!-- <template #default="{ row }">
-          <span>{{ row.usedQuota || '0.00' }}</span>
-        </template> -->
+        <template #default="{ row }">¥{{ (Number(row.usedQuota) || 0).toLocaleString() }}</template>
       </el-table-column>
-      <el-table-column prop="usedQuota" label="剩余额度(年)" min-width="150" align="center">
-        <!-- <template #default="{ row }">
-          <span>{{ row.usedQuota || '0.00' }}</span>
-        </template> -->
+      <el-table-column prop="remainingAmount" label="剩余额度(年)" min-width="150" align="center">
+        <template #default="{ row }">¥{{ (Number(row.remainingAmount) || 0).toLocaleString() }}</template>
       </el-table-column>
       <el-table-column label="操作" width="100" align="center">
-        <!-- <template #default="{ row }"> </template> -->
+        <template #default="{ row }">
+          <el-button type="primary" link size="small" @click="handleRecharge(row)">充值额度</el-button>
+        </template>
       </el-table-column>
     </el-table>
+
+    <el-dialog v-model="rechargeVisible" title="充值额度" width="450px" @close="resetRechargeForm">
+      <el-form :model="rechargeForm" label-width="110px">
+        <el-form-item label="分项费用名称">
+          <el-input :model-value="expenseName" disabled />
+        </el-form-item>
+        <el-form-item label="充值部门">
+          <el-input :model-value="rechargeForm.deptName" disabled />
+        </el-form-item>
+        <el-form-item label="充值额度" required>
+          <el-input v-model="rechargeForm.amount" placeholder="请输入充值金额" type="number" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="rechargeVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleRechargeSubmit" :loading="rechargeLoading">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script setup lang="ts">
-import { defineComponent } from 'vue';
-import { useRouter } from 'vue-router';
-const itemDetailList = ref<any[]>([]);
+import { ref, reactive, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { expenseDetail, rechargeLimit } from '@/api/pc/cost/itemExpense';
+
 const router = useRouter();
+const route = useRoute();
+const itemDetailList = ref<any[]>([]);
+
+const expenseName = ref('');
+const rechargeVisible = ref(false);
+const rechargeLoading = ref(false);
+const rechargeForm = reactive({
+  deptId: '',
+  deptName: '',
+  amount: ''
+});
+
+const handleRecharge = (row: any) => {
+  expenseName.value = row.expenseName || '';
+  rechargeForm.deptId = row.deptId || '';
+  rechargeForm.deptName = row.deptName || '';
+  rechargeForm.amount = '';
+  rechargeVisible.value = true;
+};
+
+const resetRechargeForm = () => {
+  rechargeForm.deptId = '';
+  rechargeForm.deptName = '';
+  rechargeForm.amount = '';
+};
+
+const handleRechargeSubmit = async () => {
+  if (!rechargeForm.amount || Number(rechargeForm.amount) <= 0) {
+    ElMessage.warning('请输入有效的充值金额');
+    return;
+  }
+  rechargeLoading.value = true;
+  try {
+    const res = await rechargeLimit({
+      deptId: rechargeForm.deptId,
+      recharge: Number(rechargeForm.amount)
+    });
+    if (res.code === 200 || res.code === 0) {
+      ElMessage.success('充值成功');
+      rechargeVisible.value = false;
+      loadDetail();
+    } else {
+      ElMessage.error(res.msg || '充值失败');
+    }
+  } catch (e) {
+    console.error('充值失败:', e);
+    ElMessage.error('充值失败');
+  } finally {
+    rechargeLoading.value = false;
+  }
+};
+
+const loadDetail = async () => {
+  const id = route.query.id as string;
+  if (!id) return;
+  try {
+    const res = await expenseDetail(id);
+    if (res.code === 200 || res.code === 0) {
+      const data = res.data || res.rows || [];
+      const list = Array.isArray(data) ? data : [data];
+      itemDetailList.value = list.map((item: any) => {
+        const existing = Number(item.existingAmount || item.creditAmount) || 0;
+        const used = Number(item.usedQuota || item.usedAmount) || 0;
+        return {
+          id: item.id,
+          deptId: item.deptId,
+          deptName: item.deptName || '',
+          expenseName: item.expenseName || '',
+          status: item.status ?? '',
+          existingAmount: existing,
+          usedQuota: used,
+          remainingAmount: existing - used
+        };
+      });
+    }
+  } catch (e) {
+    console.error('查询费用明细失败:', e);
+  }
+};
 
 const handleBack = () => {
-  router.push({
-    path: '/cost/itemExpense'
-  });
+  router.push({ path: '/cost/itemExpense' });
 };
+
+onMounted(() => {
+  loadDetail();
+});
 </script>
 <style scoped lang="scss">
 .page-container {

src/views/organization/deptManage/index.vue

@@ -91,7 +91,7 @@
           只能对当期年度进行额度设置,往期年度,显示最后一日数据,无法充值额度。
         </div>
         <el-form-item v-if="formData.isLimit === '0'" label="分项费用类型" prop="expenseTypeId">
-          <el-select v-model="formData.expenseTypeId" placeholder="请选择" style="width: 100%">
+          <el-select v-model="formData.expenseTypeId" placeholder="请选择" style="width: 100%" @change="changeExpenseType">
             <el-option v-for="item in expenseTypeList" :key="item.id" :label="item.expenseName" :value="item.id" />
           </el-select>
           <!-- <el-button type="primary" link style="margin-left: 12px">查询其他分项费用情况</el-button> -->
@@ -341,6 +341,17 @@ const loadExpenseTypeList = async () => {
   }
 };
 
+const changeExpenseType = (val: any) => {
+  const item = expenseTypeList.value.find((i: any) => i.id === val);
+  if (item) {
+    const current = parseFloat(item.currentQuota) || 0;
+    const used = parseFloat(item.usedQuota) || 0;
+    formData.yearlyBudget = String(current);
+    formData.usedBudget = String(used);
+    formData.residueBudget = String(current - used);
+  }
+};
+
 // 页面加载时获取部门树
 onMounted(() => {
   loadDeptTree();