新加额度池配置功能

bms-front/src/views/system/role/index.vue

@@ -71,6 +71,9 @@
             <el-tooltip content="分配用户" placement="top" v-if="row.roleId !== 1">
                <el-button link type="primary" icon="User" @click="handleAuthUser(row)" v-hasPermi="['system:role:edit']"></el-button>
             </el-tooltip>
+            <el-tooltip content="额度池" placement="top" v-if="row.roleId !== 1">
+               <el-button link type="primary" icon="Wallet" @click="handleQuota(row)" v-hasPermi="['system:role:edit']"></el-button>
+            </el-tooltip>
          </template>
       </basic-table>
 
@@ -173,11 +176,50 @@
             </div>
          </template>
       </el-dialog>
+      <!-- 角色额度池设置对话框 -->
+      <el-dialog title="角色可分配额度总额" v-model="quotaOpen" width="480px" append-to-body>
+         <el-form :model="quotaForm" label-width="110px">
+            <el-form-item label="角色名称">
+               <el-input v-model="quotaForm.roleName" disabled />
+            </el-form-item>
+            <el-form-item label="可分配总额度">
+               <el-input-number
+                  v-model="quotaForm.totalQuota"
+                  :min="0"
+                  :precision="2"
+                  :step="1000"
+                  controls-position="right"
+                  style="width: 220px"
+               />
+               <span style="margin-left: 8px; color: #909399">CNY</span>
+            </el-form-item>
+            <el-form-item label="已分配额度">
+               <span>{{ quotaForm.usedQuota }} CNY</span>
+            </el-form-item>
+            <el-form-item label="剩余可分配">
+               <span :style="{ color: quotaForm.availableQuota < 0 ? '#f56c6c' : '#67c23a' }">{{ quotaForm.availableQuota }} CNY</span>
+            </el-form-item>
+            <el-form-item label="备注">
+               <el-input v-model="quotaForm.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+            <el-alert
+               title="该角色用户审批客户额度净增时占用此池；额度调减或到期自动释放回池。总额不能小于已分配额度。"
+               type="info"
+               :closable="false"
+            />
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" :loading="quotaSaving" @click="submitQuota">确 定</el-button>
+               <el-button @click="quotaOpen = false">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
    </div>
 </template>
 
 <script setup name="Role">
-import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role"
+import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect, listRoleCreditQuota, setRoleCreditQuota } from "@/api/system/role"
 import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu"
 import { nextTick } from "vue"
 
@@ -294,6 +336,62 @@ function handleAuthUser(row) {
   router.push("/system/role-auth/user/" + row.roleId)
 }
 
+/** 额度池设置 */
+const quotaOpen = ref(false)
+const quotaSaving = ref(false)
+const quotaForm = reactive({
+  roleId: undefined,
+  roleName: "",
+  totalQuota: 0,
+  usedQuota: 0,
+  availableQuota: 0,
+  remark: ""
+})
+
+function recalcQuotaAvailable() {
+  quotaForm.availableQuota = Number((Number(quotaForm.totalQuota || 0) - Number(quotaForm.usedQuota || 0)).toFixed(2))
+}
+
+function handleQuota(row) {
+  listRoleCreditQuota().then(response => {
+    const pool = (response.data || []).find(item => item.roleId === row.roleId)
+    quotaForm.roleId = row.roleId
+    quotaForm.roleName = row.roleName
+    quotaForm.totalQuota = pool ? Number(pool.totalQuota) : 0
+    quotaForm.usedQuota = pool ? Number(pool.usedQuota) : 0
+    quotaForm.remark = pool && pool.remark ? pool.remark : ""
+    recalcQuotaAvailable()
+    quotaOpen.value = true
+  })
+}
+
+watch(() => quotaForm.totalQuota, () => {
+  recalcQuotaAvailable()
+})
+
+function submitQuota() {
+  if (quotaForm.totalQuota === undefined || quotaForm.totalQuota === null || quotaForm.totalQuota < 0) {
+    proxy.$modal.msgError("可分配额度总额不能小于0")
+    return
+  }
+  if (Number(quotaForm.totalQuota) < Number(quotaForm.usedQuota)) {
+    proxy.$modal.msgError("可分配额度总额不能小于已分配额度：" + quotaForm.usedQuota)
+    return
+  }
+  quotaSaving.value = true
+  setRoleCreditQuota({
+    roleId: quotaForm.roleId,
+    totalQuota: quotaForm.totalQuota,
+    remark: quotaForm.remark
+  }).then(() => {
+    proxy.$modal.msgSuccess("额度池设置成功")
+    quotaOpen.value = false
+    tableRef.value.refresh()
+  }).finally(() => {
+    quotaSaving.value = false
+  })
+}
+
 /** 查询菜单树结构 */
 function getMenuTreeselect() {
   menuTreeselect().then(response => {