解析块和解析方法的页面开发和功能开发

liudong

2024-08-02 feb1bc83e9d2e2b57fef8bdafaa2e24a43fec96c

 src/views/authority/users/index.vue

@@ -79,7 +79,7 @@
        </template>
        <template #dept="{ record }">{{ record.dept ? record.dept.deptName : "" }}</template>
        <template #status="{record}">
          <a-switch checked-value="0" unchecked-value="1" @change="statusChange(record.status,record)"
          <a-switch checked-value="1" unchecked-value="0" @change="statusChange(record.status,record)"
                    v-model="record.status" />
        </template>
        <template #operations="{ record }">
@@ -149,40 +149,101 @@

    </a-modal>
    <a-modal width="30%" v-model:visible="resourcevisible" title="权限配置" @cancel="handleCancel(3)"
             @ok="editDeptHandleOk">
             @ok="editResourceHandleOk">
      <div :style="{ display:'flex', 'flex-direction':'column' }">
        <a-tabs :style="{ width: '100%',height: '500px', 'overflow-y': 'auto' }">
          <a-tab-pane key="1">
            <template #title>
              <icon-calendar/> 菜单
              <icon-calendar />
              菜单
            </template>
            Content of Tab Panel 1
            <a-tree
              class="tree-demo"
              v-model:checked-keys="checkedKeysMenu"
              v-model:expanded-keys="expandKdysMenu"
              :checkable="true"
              :data="treeDataMenu"
              :show-line="showLineMenu"
              @check="onCheckMenu"
              :fieldNames="{
               key:'menuId',
              title:'menuName',
              children:'children',
            }"
              :check-strictly="checkStrictlyMenu"
            >
            </a-tree>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #title>
              <icon-clock-circle/> 知识库
              <icon-clock-circle />
              知识库
            </template>
            Content of Tab Panel 2
            <a-space direction="vertical" size="large">
              <a-checkbox-group v-model="checkedKeysKnowledge" direction="vertical" @change="onCheckKnowledge">
                <a-checkbox
                  v-for="(knowledg, index) of knowledgeList"
                  :value="knowledg.id"
                  :lable="knowledg.name"
                  @change="onCheckKnowledge"
                >
                  {{ knowledg.name }}
                </a-checkbox>
              </a-checkbox-group>
            </a-space>
          </a-tab-pane>
          <a-tab-pane key="3">
            <template #title>
              <icon-user/> 智能体
              <icon-user />
              智能体
            </template>
            Content of Tab Panel 3
            <a-checkbox-group v-model="checkedKeysDialog" direction="vertical" @change="onCheckDialog">
              <a-checkbox
                v-for="(dialog, index) of DialogsList"
                :value="dialog.id"
                :lable="dialog.name"
                @change="onCheckDialog"
              >
                {{ dialog.name }}
              </a-checkbox>
            </a-checkbox-group>
          </a-tab-pane>
        </a-tabs>
        <a-card  :style="{ width: '100%',height: '200px', 'overflow-y': 'auto', margin:'1px'}"
          class="card-demo"
          title="用户所有权限"
          hoverable
        <a-card :style="{ width: '100%',height: '200px', 'overflow-y': 'auto', margin:'1px'}"
                class="card-demo"
                title="用户所有权限"
                hoverable
        >
          <a-space wrap>
            菜单功能：
            <a-tag
              v-for="(tag, index) of checkResourceStrictly"
              :key="tag.deptId"
              @close="handleRemove(tag)"
              v-for="(tag, index) of checkStrictlyMenu"
              :key="tag.menuId"
              @close="handleMenuRemove(tag)"
            >
              {{ tag.deptName }}
              {{ tag.menuName }}
            </a-tag>
          </a-space>
          <a-divider />
          <a-space wrap>
            知识库:
            <a-tag
              v-for="(tag, index) of checkStrictlyKnowledge"
              :key="tag.knowledgeId"
              @close="handleKnowledgeRemove(tag)"
            >
              {{ tag.knowledgeName }}
            </a-tag>
          </a-space>
          <a-divider />
          <a-space wrap>
            智能体:
            <a-tag
              v-for="(tag, index) of checkStrictlyDialog"
              :key="tag.dialogId"
              @close="handleDialogRemove(tag)"
            >
              {{ tag.dialogName }}
            </a-tag>
          </a-space>
        </a-card>
@@ -199,7 +260,10 @@
import { Pagination } from "@/types/global";
import type { TableColumnData } from "@arco-design/web-vue/es/table/interface";
import {
  DialogList,
  KnowledgeList,
  OrganizationList,
  ResourceList,
  User,
  UserAdd,
  UserChangePwd,
@@ -215,7 +279,23 @@
let checkedKeys = ref([]);
let expandKdys = ref([]);
let checkStrictly = ref([]);
let checkResourceStrictly=ref([])


let treeDataMenu = ref([]);
let checkedKeysMenu = ref([]);
let expandKdysMenu = ref([]);
let checkStrictlyMenu = ref([]);

let checkedKeysKnowledge= ref([]);
let checkStrictlyKnowledge= ref([]);

let checkedKeysDialog= ref([]);
let checkStrictlyDialog= ref([]);

let knowledgeList = ref([]);
let DialogsList = ref([]);


let menuTips = ref(["权限管理", "账号"]);
type SizeProps = "mini" | "small" | "medium" | "large";
const account = ref(null);
@@ -262,9 +342,65 @@

  }
};
const onCheckMenu = (newCheckedKeys, event) => {
  let o = { "menuId": event.node.menuId, "menuName": event.node.menuName };
  if (event.checked) {
    checkStrictlyMenu.value.push(o);
  } else {
    checkStrictlyMenu.value.forEach((val, idx, array) => {
      // val: 当前值
      if (val.menuId == event.node.menuId) {
        checkStrictlyMenu.value.splice(idx, 1);
        return true;
      }
    });
  }
};
const onCheckKnowledge = (newCheckedKeys, event) => {
  let o = { "knowledgeId": event.target.value, "knowledgeName": event.target.labels[0].innerText };
  if (event.target.checked) {
    checkStrictlyKnowledge.value.push(o);
  } else {
    checkStrictlyKnowledge.value.forEach((val, idx, array) => {
      // val: 当前值
      if (val.knowledgeId == event.target.value) {
        checkStrictlyKnowledge.value.splice(idx, 1);
        return true;
      }
    });
  }
};


const onCheckDialog = (newCheckedKeys, event) => {
  let o = { "dialogId": event.target.value, "dialogName": event.target.labels[0].innerText };
  if (event.target.checked) {
    checkStrictlyDialog.value.push(o);
  } else {
    checkStrictlyDialog.value.forEach((val, idx, array) => {
      // val: 当前值
      if (val.dialogId == event.target.value) {
        checkStrictlyDialog.value.splice(idx, 1);
        return true;
      }
    });
  }
};

const handleRemove = (key) => {
  checkStrictly.value = checkStrictly.value.filter((tag) => tag !== key);
};
const handleMenuRemove = (key) => {
  checkStrictlyMenu.value = checkStrictlyMenu.value.filter((tag) => tag !== key);
};
const handleKnowledgeRemove = (key) => {
  checkStrictlyKnowledge.value = checkStrictlyKnowledge.value.filter((tag) => tag !== key);
};
const handleDialogRemove = (key) => {
  checkStrictlyDialog.value = checkStrictlyDialog.value.filter((tag) => tag !== key);
};


const basePagination: Pagination = {
  current: 1,
  pageSize: 20
@@ -352,6 +488,28 @@
  });
};

const editResourceHandleOk = async () => {
  let resources: Array = [],dialogs: Array = [],Knowledges: Array = [], user: User = { "userId": selectUser.value.userId };
  checkStrictlyMenu.value.forEach((val) => {
    resources.push(val.menuId);
  });
  user.resources = resources;

  checkStrictlyKnowledge.value.forEach((val) => {
    Knowledges.push(val.knowledgeId);
  });
  user.knowledges = Knowledges;

  checkStrictlyDialog.value.forEach((val) => {
    dialogs.push(val.dialogId);
  });
  user.dialogs = dialogs;

  await UserEdit(user).then((res) => {
    fetchData();
  });
};

const editHandleOk = async () => {
  if (editform.value.userId.length > 0) {
    await UserEdit({
@@ -414,7 +572,27 @@
  //权限
  if (t == 4) {
    resourcevisible.value = true;

    checkedKeysMenu.value = [];
    expandKdysMenu.value = [];
    checkStrictlyMenu.value = [];
    checkStrictlyKnowledge.value=[];
    checkedKeysKnowledge.value=[];
    checkStrictlyDialog.value=[];
    checkedKeysDialog.value=[];
    selectUser.value = record;
    record.resources.forEach((val) => {
      checkStrictlyMenu.value.push({ "menuId": val.menuId, "menuName": val.menuName });
      checkedKeysMenu.value.push(val.menuId);
      expandKdysMenu.value.push(val.menuId);
    });
    record.knowledges.forEach((val) => {
      checkStrictlyKnowledge.value.push({ "knowledgeId": val.id, "knowledgeName": val.name });
      checkedKeysKnowledge.value.push(val.id);
    });
    record.dialogs.forEach((val) => {
      checkStrictlyDialog.value.push({ "dialogId": val.id, "dialogName": val.name });
      checkedKeysDialog.value.push(val.id);
    });

  }
  //机构
@@ -468,9 +646,22 @@
    treeData.value = [...res.rows];
  });
};
const MenuData = async (key) => {
  await ResourceList(key).then((res) => {
    treeDataMenu.value = [...res.rows];
  });
};

KnowledgeList().then((res) => {
  knowledgeList.value = res.rows;
});

DialogList().then((res) => {
  DialogsList.value = res.rows;
});
fetchData();
OrganizationData("");
MenuData();

const reset = () => {
  formModel.value = generateFormModel();