|  |  |  | 
|---|
|  |  |  | <template #index="{ rowIndex }"> | 
|---|
|  |  |  | {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }} | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <template #dept="{ record }">{{ | 
|---|
|  |  |  | record.dept ? record.dept.deptName : '' | 
|---|
|  |  |  | }}</template> | 
|---|
|  |  |  | <template #status="{ record }"> | 
|---|
|  |  |  | <a-switch | 
|---|
|  |  |  | checked-value="1" | 
|---|
|  |  |  | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <template #operations="{ record }"> | 
|---|
|  |  |  | <a-space> | 
|---|
|  |  |  | <a-button type="outline" @click="operation(2, record)" | 
|---|
|  |  |  | >编辑</a-button | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-button | 
|---|
|  |  |  | type="dashed" | 
|---|
|  |  |  | status="warning" | 
|---|
|  |  |  | @click="operation(4, record)" | 
|---|
|  |  |  | >角色权限</a-button> | 
|---|
|  |  |  | <a-popconfirm | 
|---|
|  |  |  | content="Are you sure you want to delete?" | 
|---|
|  |  |  | type="success" | 
|---|
|  |  |  | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-button type="outline" status="danger">删除</a-button> | 
|---|
|  |  |  | </a-popconfirm> | 
|---|
|  |  |  | <a-button | 
|---|
|  |  |  | type="dashed" | 
|---|
|  |  |  | status="warning" | 
|---|
|  |  |  | @click="operation(4, record)" | 
|---|
|  |  |  | >权限配置</a-button | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-button status="success" @click="operation(5, record)" | 
|---|
|  |  |  | >部门配置</a-button | 
|---|
|  |  |  | > | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </a-space> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </a-table> | 
|---|
|  |  |  | 
|---|
|  |  |  | @cancel="handleCancel(1)" | 
|---|
|  |  |  | @ok="editHandleOk" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-form :model="editform"> | 
|---|
|  |  |  | <a-form-item field="roleName" label="角色名"> | 
|---|
|  |  |  | <a-form  ref="formRef" :model="editform"> | 
|---|
|  |  |  | <a-form-item required field="roleName" label="角色名" :rules="[{required:true,message:'角色名必填'},{maxLength:50,message:'长度不超过50'}]"> | 
|---|
|  |  |  | <a-input v-model="editform.roleName" /> | 
|---|
|  |  |  | </a-form-item> | 
|---|
|  |  |  | <a-form-item field="roleKey" label="权限字符串"> | 
|---|
|  |  |  | <a-input v-model="editform.roleKey" /> | 
|---|
|  |  |  | </a-form-item> | 
|---|
|  |  |  | <a-form-item field="remark" label="备注"> | 
|---|
|  |  |  | <a-input v-model="editform.remark" /> | 
|---|
|  |  |  | </a-form-item> | 
|---|
|  |  |  | </a-form> | 
|---|
|  |  |  | </a-modal> | 
|---|
|  |  |  | <a-modal | 
|---|
|  |  |  | width="50%" | 
|---|
|  |  |  | v-model:visible="deptvisible" | 
|---|
|  |  |  | title="部门配置" | 
|---|
|  |  |  | @cancel="handleCancel(2)" | 
|---|
|  |  |  | @ok="editDeptHandleOk" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div :style="{ display: 'flex' }"> | 
|---|
|  |  |  | <a-card | 
|---|
|  |  |  | :style="{ 'width': '460px', 'height': '500px', 'overflow-y': 'auto' }" | 
|---|
|  |  |  | title="机构" | 
|---|
|  |  |  | hoverable | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-tree | 
|---|
|  |  |  | class="tree-demo" | 
|---|
|  |  |  | v-model:checked-keys="checkedKeys" | 
|---|
|  |  |  | v-model:expanded-keys="expandKdys" | 
|---|
|  |  |  | :checkable="true" | 
|---|
|  |  |  | :data="treeData" | 
|---|
|  |  |  | :show-line="showLine" | 
|---|
|  |  |  | @check="onCheck" | 
|---|
|  |  |  | :fieldNames="{ | 
|---|
|  |  |  | key: 'deptId', | 
|---|
|  |  |  | title: 'deptName', | 
|---|
|  |  |  | children: 'children', | 
|---|
|  |  |  | }" | 
|---|
|  |  |  | :check-strictly="checkStrictly" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | </a-tree> | 
|---|
|  |  |  | </a-card> | 
|---|
|  |  |  | <a-card class="card-demo" title="用户所属机构" hoverable> | 
|---|
|  |  |  | <a-space wrap> | 
|---|
|  |  |  | <a-tag | 
|---|
|  |  |  | v-for="(tag, index) of checkStrictly" | 
|---|
|  |  |  | :key="tag.deptId" | 
|---|
|  |  |  | @close="handleRemove(tag)" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {{ tag.deptName }} | 
|---|
|  |  |  | </a-tag> | 
|---|
|  |  |  | </a-space> | 
|---|
|  |  |  | </a-card> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </a-modal> | 
|---|
|  |  |  | <a-modal | 
|---|
|  |  |  | width="30%" | 
|---|
|  |  |  | 
|---|
|  |  |  | v-model:expanded-keys="expandKdysMenu" | 
|---|
|  |  |  | :checkable="true" | 
|---|
|  |  |  | :data="treeDataMenu" | 
|---|
|  |  |  | :show-line="showLineMenu" | 
|---|
|  |  |  | @check="onCheckMenu" | 
|---|
|  |  |  | :fieldNames="{ | 
|---|
|  |  |  | key: 'menuId', | 
|---|
|  |  |  | 
|---|
|  |  |  | <a-space direction="vertical" size="large"> | 
|---|
|  |  |  | <a-checkbox-group | 
|---|
|  |  |  | v-model="checkedKeysKnowledge" | 
|---|
|  |  |  | direction="vertical" | 
|---|
|  |  |  | @change="onCheckKnowledge" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-checkbox | 
|---|
|  |  |  | 
|---|
|  |  |  | :value="knowledg.id" | 
|---|
|  |  |  | :lable="knowledg.name" | 
|---|
|  |  |  | @change="onCheckKnowledge" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | style="width:150px"> | 
|---|
|  |  |  | {{ knowledg.name }} | 
|---|
|  |  |  | </a-checkbox> | 
|---|
|  |  |  | </a-checkbox-group> | 
|---|
|  |  |  | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <a-checkbox-group | 
|---|
|  |  |  | v-model="checkedKeysDialog" | 
|---|
|  |  |  | direction="vertical" | 
|---|
|  |  |  | @change="onCheckDialog" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-checkbox | 
|---|
|  |  |  | 
|---|
|  |  |  | :value="dialog.id" | 
|---|
|  |  |  | :lable="dialog.name" | 
|---|
|  |  |  | @change="onCheckDialog" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | style="width:150px"> | 
|---|
|  |  |  | {{ dialog.name }} | 
|---|
|  |  |  | </a-checkbox> | 
|---|
|  |  |  | </a-checkbox-group> | 
|---|
|  |  |  | <a-checkbox-group | 
|---|
|  |  |  | v-model="checkedKeysAgent" | 
|---|
|  |  |  | @change="onCheckAgent" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <a-checkbox | 
|---|
|  |  |  | v-for="(agent, index) of AgentList" | 
|---|
|  |  |  | :value="agent.id" | 
|---|
|  |  |  | :lable="agent.title" | 
|---|
|  |  |  | @change="onCheckAgent" | 
|---|
|  |  |  | style="width:150px"> | 
|---|
|  |  |  | {{ agent.title }} | 
|---|
|  |  |  | </a-checkbox> | 
|---|
|  |  |  | </a-checkbox-group> | 
|---|
|  |  |  | </a-tab-pane> | 
|---|
|  |  |  | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {{ tag.dialogName }} | 
|---|
|  |  |  | </a-tag> | 
|---|
|  |  |  | <a-tag | 
|---|
|  |  |  | v-for="(tag, index) of checkStrictlyAgent" | 
|---|
|  |  |  | :key="tag.agentId" | 
|---|
|  |  |  | @close="handleDialogRemove(tag)" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {{ tag.agentTitle }} | 
|---|
|  |  |  | </a-tag> | 
|---|
|  |  |  | </a-space> | 
|---|
|  |  |  | </a-card> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | } from "@/api/authority"; | 
|---|
|  |  |  | import { Modal } from '@arco-design/web-vue'; | 
|---|
|  |  |  | import Authheader from '@/views/authority/components/authheader.vue'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let treeData = ref([]); | 
|---|
|  |  |  | let checkedKeys = ref([]); | 
|---|
|  |  |  | let expandKdys = ref([]); | 
|---|
|  |  |  | let checkStrictly = ref([]); | 
|---|
|  |  |  | import router from "@/router"; | 
|---|
|  |  |  | import { queryCanvasList } from "@/api/Agent"; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let treeDataMenu = ref([]); | 
|---|
|  |  |  | let checkedKeysMenu = ref([]); | 
|---|
|  |  |  | 
|---|
|  |  |  | let checkedKeysDialog = ref([]); | 
|---|
|  |  |  | let checkStrictlyDialog = ref([]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let checkedKeysAgent = ref([]); | 
|---|
|  |  |  | let checkStrictlyAgent = ref([]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let knowledgeList = ref([]); | 
|---|
|  |  |  | let DialogsList = ref([]); | 
|---|
|  |  |  | let AgentList = ref([]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let menuTips = ref(['权限管理', '角色']); | 
|---|
|  |  |  | type SizeProps = 'mini' | 'small' | 'medium' | 'large'; | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let size = ref<SizeProps>('medium'); | 
|---|
|  |  |  | let visible = ref(false); | 
|---|
|  |  |  | let deptvisible = ref(false); | 
|---|
|  |  |  | let resourcevisible = ref(false); | 
|---|
|  |  |  | let selectRole = ref({}); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const onCheck = (newCheckedKeys, event) => { | 
|---|
|  |  |  | let o = { deptId: event.node.deptId, deptName: event.node.deptName }; | 
|---|
|  |  |  | if (event.checked) { | 
|---|
|  |  |  | checkStrictly.value.push(o); | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | checkStrictly.value.forEach((val, idx, array) => { | 
|---|
|  |  |  | // val: 当前值 | 
|---|
|  |  |  | if (val.deptId == event.node.deptId) { | 
|---|
|  |  |  | checkStrictly.value.splice(idx, 1); | 
|---|
|  |  |  | return true; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | const onCheckMenu = (newCheckedKeys, event) => { | 
|---|
|  |  |  | let o = { menuId: event.node.menuId, menuName: event.node.menuName }; | 
|---|
|  |  |  | if (event.checked) { | 
|---|
|  |  |  | 
|---|
|  |  |  | // val: 当前值 | 
|---|
|  |  |  | if (val.knowledgeId == event.target.value) { | 
|---|
|  |  |  | checkStrictlyKnowledge.value.splice(idx, 1); | 
|---|
|  |  |  | return true; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | const onCheckAgent = (newCheckedKeys, event) => { | 
|---|
|  |  |  | let o = { | 
|---|
|  |  |  | agentId: event.target.value, | 
|---|
|  |  |  | agentTitle: event.target.labels[0].innerText, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | if (event.target.checked) { | 
|---|
|  |  |  | checkStrictlyAgent.value.push(o); | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | checkStrictlyAgent.value.forEach((val, idx, array) => { | 
|---|
|  |  |  | // val: 当前值 | 
|---|
|  |  |  | if (val.agentId == event.target.value) { | 
|---|
|  |  |  | checkStrictlyAgent.value.splice(idx, 1); | 
|---|
|  |  |  | return true; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | 
|---|
|  |  |  | (tag) => tag !== key | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let formRef = ref(); | 
|---|
|  |  |  | const basePagination: Pagination = { | 
|---|
|  |  |  | current: 1, | 
|---|
|  |  |  | pageSize: 15, | 
|---|
|  |  |  | 
|---|
|  |  |  | dataIndex: 'roleName', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | title: t('创建时间'), | 
|---|
|  |  |  | dataIndex: 'createTime', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | title: t('权限字符串'), | 
|---|
|  |  |  | dataIndex: 'roleKey', | 
|---|
|  |  |  | slotName: 'roleKey', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | title: t('状态'), | 
|---|
|  |  |  | dataIndex: 'status', | 
|---|
|  |  |  | slotName: 'status', | 
|---|
|  |  |  | 
|---|
|  |  |  | visible.value = false; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (type == 2) { | 
|---|
|  |  |  | deptvisible.value = false; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (type == 2) { | 
|---|
|  |  |  | resourcevisible.value = false; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const editDeptHandleOk = async () => { | 
|---|
|  |  |  | let depts: Array = [], | 
|---|
|  |  |  | role: Role = { roleId: selectRole.value.roleId }; | 
|---|
|  |  |  | checkStrictly.value.forEach((val) => { | 
|---|
|  |  |  | depts.push(val.deptId); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | role.dept = depts; | 
|---|
|  |  |  | await RoleEdit(role).then((res) => { | 
|---|
|  |  |  | fetchData(); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const editResourceHandleOk = async () => { | 
|---|
|  |  |  | let resources: Array = [], | 
|---|
|  |  |  | dialogs: Array = [], | 
|---|
|  |  |  | agents: Array = [], | 
|---|
|  |  |  | Knowledges: Array = [], | 
|---|
|  |  |  | role: Role = { roleId: selectRole.value.roleId }; | 
|---|
|  |  |  | checkStrictlyMenu.value.forEach((val) => { | 
|---|
|  |  |  | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | role.dialogs = dialogs; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | checkStrictlyAgent.value.forEach((val) => { | 
|---|
|  |  |  | agents.push(val.agentId); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | role.agents = agents; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | await RoleEdit(role).then((res) => { | 
|---|
|  |  |  | fetchData(); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const editHandleOk = async () => { | 
|---|
|  |  |  | if (editform.value.roleId.length > 0) { | 
|---|
|  |  |  | await RoleEdit({ | 
|---|
|  |  |  | ...editform.value, | 
|---|
|  |  |  | } as unknown as Role).then((res) => { | 
|---|
|  |  |  | fetchData(); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | const cb = async (err) => { | 
|---|
|  |  |  | if (err) { | 
|---|
|  |  |  | visible.value = true; | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | await RoleAdd({ | 
|---|
|  |  |  | ...editform.value, | 
|---|
|  |  |  | } as unknown as Role).then((res) => { | 
|---|
|  |  |  | fetchData(); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | if (editform.value.roleId.length > 0) { | 
|---|
|  |  |  | await RoleEdit({ | 
|---|
|  |  |  | ...editform.value, | 
|---|
|  |  |  | } as unknown as Role).then((res) => { | 
|---|
|  |  |  | fetchData(); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | await RoleAdd({ | 
|---|
|  |  |  | ...editform.value, | 
|---|
|  |  |  | } as unknown as Role).then((res) => { | 
|---|
|  |  |  | fetchData(); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const editHandleOk =  () => { | 
|---|
|  |  |  | formRef.value.validate(cb); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | const operation = async (t, record) => { | 
|---|
|  |  |  | if (t == 0) { | 
|---|
|  |  |  | 
|---|
|  |  |  | editform.value.roleKey = ""; | 
|---|
|  |  |  | editform.value.remark = ""; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | //编辑 | 
|---|
|  |  |  | if (t == 2) { | 
|---|
|  |  |  | visible.value = true; | 
|---|
|  |  |  | save.value = '编辑'; | 
|---|
|  |  |  | editform.value.roleId=record.roleId | 
|---|
|  |  |  | editform.value.roleName = record.roleName; | 
|---|
|  |  |  | editform.value.roleKey = record.roleKey; | 
|---|
|  |  |  | editform.value.remark = record.remark; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //删除 | 
|---|
|  |  |  | if (t == 3) { | 
|---|
|  |  |  | await RoleDelete(record.roleId).then((res) => { | 
|---|
|  |  |  | 
|---|
|  |  |  | checkedKeysDialog.value.push(val.id); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | //机构 | 
|---|
|  |  |  | if (t == 5) { | 
|---|
|  |  |  | deptvisible.value = true; | 
|---|
|  |  |  | checkedKeys.value = []; | 
|---|
|  |  |  | expandKdys.value = []; | 
|---|
|  |  |  | checkStrictly.value = []; | 
|---|
|  |  |  | selectRole.value = record; | 
|---|
|  |  |  | expandKdys.value.push('0'); | 
|---|
|  |  |  | if (record.dept) { | 
|---|
|  |  |  | record.dept.forEach((val) => { | 
|---|
|  |  |  | checkStrictly.value.push({ | 
|---|
|  |  |  | deptId: val.deptId, | 
|---|
|  |  |  | deptName: val.deptName, | 
|---|
|  |  |  | if (record.agents) { | 
|---|
|  |  |  | record.agents.forEach((val) => { | 
|---|
|  |  |  | checkStrictlyAgent.value.push({ | 
|---|
|  |  |  | agentId: val.id, | 
|---|
|  |  |  | agentTitle: val.title, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | checkedKeys.value.push(val.deptId); | 
|---|
|  |  |  | expandKdys.value.push(val.deptId); | 
|---|
|  |  |  | checkedKeysAgent.value.push(val.id); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | fetchData({ ...basePagination, current }); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const OrganizationData = async (key) => { | 
|---|
|  |  |  | await OrganizationList(key).then((res) => { | 
|---|
|  |  |  | treeData.value = [...res.rows]; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const MenuData = async (key) => { | 
|---|
|  |  |  | await ResourceList(key).then((res) => { | 
|---|
|  |  |  | treeDataMenu.value = [...res.rows]; | 
|---|
|  |  |  | 
|---|
|  |  |  | DialogList().then((res) => { | 
|---|
|  |  |  | DialogsList.value = res.rows; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | queryCanvasList(null).then((canvas) => { | 
|---|
|  |  |  | AgentList= canvas.data | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | fetchData(); | 
|---|
|  |  |  | OrganizationData(''); | 
|---|
|  |  |  | MenuData(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const reset = () => { | 
|---|