src/api/flow/index.ts

@@ -16,3 +16,41 @@ export function getFlowDataInfo(id: string) {
     method: "get",
   });
 }
+
+export function addRoleUser(
+    queryParams: object
+) {
+  return request({
+    url: "/api/v1/flowRole/add",
+    method: "post",
+    data: queryParams,
+  });
+}
+
+export function queryRoleUser(
+    queryParams: object
+) {
+  return request({
+    url: "/api/v1/flowRole/userPage",
+    method: "post",
+    data: queryParams,
+  });
+}
+export function delRoleUser(
+    queryParams: object
+){
+  return request({
+    url: "/api/v1/flowRole/delUser",
+    method: "post",
+    data: queryParams,
+  });
+}
+export function delRole(
+    queryParams: object
+){
+  return request({
+    url: "/api/v1/flowRole/delRole",
+    method: "post",
+    data: queryParams,
+  });
+}

src/views/flow/flowRole/index.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="mainContentBox" style="width:50%; float: left;">
+    <avue-crud
+        ref="crudRef1"
+        v-model="form"
+        :data="data"
+        :option="option"
+        @row-click="rowClick"
+    >
+      <template #menu-left="{ size }">
+        <el-button
+            type="primary"
+            icon="el-icon-plus"
+            :size="size"
+            @click="handleEdit(null)"
+        >新增</el-button>
+      </template>
+      <template #menu="{ size, row, index }">
+        <el-button
+            type="primary"
+            link
+            @click="handleEdit(row)"
+        ><i-ep-edit />编辑
+        </el-button>
+        <el-button
+            type="danger"
+            icon="el-icon-delete"
+            :size="size"
+            link
+            @click="todelete(row,0)"
+        >删除</el-button
+        >
+      </template>
+    </avue-crud>
+  </div>
+  <div class="mainContentBox" style="width:50%;float: left;">
+    <avue-crud
+        ref="crudRef2"
+        v-model="form"
+        :data="data1"
+        :option="option1"
+        @row-del="delUser"
+    >
+      <template #menu="{ size, row, index }">
+        <el-button
+            type="danger"
+            icon="el-icon-delete"
+            :size="size"
+            link
+            @click="todelete(row,1)"
+        >删除</el-button
+        >
+      </template>
+    </avue-crud>
+    <el-dialog
+        v-model="dialog.visible"
+        :title="dialog.title"
+        width="450px"
+        @close="dialog.visible = false"
+    >
+
+      <el-form>
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input
+              :disabled="roleDisabled"
+              v-model="form.roleName"
+          />
+        </el-form-item>
+        <el-form-item label="人员名称" prop="userName">
+          <el-tree-select
+              multiple
+              v-model="form.userNames"
+              :data="userList"
+              filterable
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="dialog.visible = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import {queryRoleUser,delRoleUser,addRoleUser,delRole} from "@/api/flow"
+import {getUserList,getUserTree} from "@/api/system/user"
+import { useCommonStoreHook } from "@/store";
+const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+const crudRef1 = ref(null);
+const crudRef2 = ref(null);
+const roleDisabled = ref(false)
+const rowClick = (row) => {
+  selectRow.value = row
+  crudRef1.value.setCurrentRow(row);
+  queryUsers(row.roleName)
+};
+const selectRow = ref()
+const todelete = (row, type) =>{
+  ElMessageBox.confirm("您确定要删除记录吗", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    if(type === 0){
+      delRole(row).then(()=>{
+        ElMessage.success("操作成功")
+        queryDataList()
+      })
+    }else{
+      delRoleUser(row).then(()=>{
+        ElMessage.success("操作成功")
+        queryDataList()
+      })
+    }
+  });
+}
+const handleEdit = (row)=>{
+  if(row){
+    roleDisabled.value = true
+    queryRoleUser({roleName: row.roleName}).then((res)=>{
+      row.userNames = []
+      res.data.records.forEach(item=>{
+        row.userNames.push(item.userName)
+      })
+      form.value = row
+      dialog.visible = true
+    })
+  }else{
+    form.value  = {}
+    roleDisabled.value = false
+    dialog.visible = true
+  }
+
+}
+
+const handleSubmit = () =>{
+  if(!form.value.roleName){
+    ElMessage.error("角色名称不能为空")
+    return
+  }
+  if(!form.value.userNames){
+    ElMessage.error("用户名称不能为空")
+    return
+  }
+  addRoleUser(form.value).then(()=>{
+    ElMessage.success("操作成功")
+    queryDataList()
+    dialog.visible = false
+  })
+}
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/flowRole",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
+const userList = ref([])
+const dialog = reactive({
+  title: "角色配置",
+  visible: false,
+});
+//crudRef.value 获取avue-crud对象
+// 设置表格列或者其他自定义的option
+option.value = Object.assign(option.value, {
+  delBtn: false,
+  selection: false,
+  viewBtn: false,
+  editBtn: false,
+  menu: true,
+  addBtn: false,
+  searchBtn: false,
+  toolBtn: false,
+  highlightCurrentRow: true,
+  column: [
+    {
+      label: "角色名称",
+      prop: "roleName",
+      overHidden: true,
+      editDisplay: false,
+      rules: [
+        {
+          required: true,
+          message: "角色名称不能为空",
+          trigger: "trigger",
+        },
+      ],
+    },
+  ],
+});
+const data1 = ref([])
+const option1 = ref({
+  delBtn: false,
+  selection: false,
+  viewBtn: false,
+  border: 1,
+  editBtn: false,
+  menu: true,
+  addBtn: false,
+  searchBtn: false,
+  refreshBtn: false,
+  column: [
+    {
+      label: "用户名称",
+      prop: "userName",
+      overHidden: true,
+    },
+  ],
+});
+const queryDataList = async () => {
+  await dataList()
+  rowClick(data.value[0])
+  /*data.value.forEach(item => {
+    let users = []
+    queryRoleUser({roleCode: item.dictValue}).then((u) => {
+      u.data.records.forEach((uu) => {
+        users.push(uu.userName)
+      })
+      item.userName = users
+    })
+  })*/
+};
+const delUser = (row)=>{
+  ElMessageBox.confirm("确定要删除数据吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+    lockScroll: false,
+  }).then(() => {
+    delRoleUser(row).then((res)=>{
+      queryRoles()
+    });
+  });
+}
+
+const queryUsers = (code)=>{
+  data1.value = []
+  queryRoleUser({roleName: code}).then((res)=>{
+    data1.value = res.data.records
+  })
+
+}
+getUserTree().then((data) => {
+  userList.value = data.data;
+});
+const queryUserList = ()=>{
+  getUserList({}).then((res)=>{
+    userList.value = res.data
+  })
+}
+onMounted(() => {
+  queryDataList();
+  queryUserList()
+  getUserTree().then((data) => {
+    userList.value = data.data;
+  });
+});
+</script>