xq feat:"完成了前端页面对用户和项目的关联"

src/views/system/user/index.vue

@@ -146,7 +146,7 @@
     </el-row>
 
     <!-- 添加或修改用户配置对话框 -->
-    <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body @close="closeDialog" class="cus-dia">
+    <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="800px" append-to-body @close="closeDialog" class="cus-dia">
       <el-form ref="userFormRef" :model="form" :rules="rules" label-width="auto">
         <div class="detail-head">账号信息</div>
         <el-row>
@@ -237,6 +237,15 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="项目选择">
+              <el-select placeholder="选择项目" multiple v-model="tempArr">
+                <el-option v-for="(p, index) in programList" :key="index" :value="p.nbqId" :label="p.projectBrief"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-row>
           <el-col :span="24">
             <el-form-item label="备注">
@@ -245,6 +254,18 @@
           </el-col>
         </el-row>
       </el-form>
+      <el-table class="cus-table" :data="programArr" border height="300px">
+        <el-table-column label="项目名称" width="358px" prop="projectBrief">
+          <template #default="scope">
+            {{ scope.row.projectBrief }}
+          </template>
+        </el-table-column>
+        <el-table-column label="权限设置" width="358px">
+          <template #default="scope">
+            <el-cascader :options="options" :props="props" v-model="scope.row.com" collapse-tags clearable />
+          </template>
+        </el-table-column>
+      </el-table>
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -300,7 +321,9 @@ import { to } from 'await-to-js';
 import { optionselect } from '@/api/system/post';
 import { hasPermi } from '@/directive/permission';
 import { checkPermi } from '@/utils/permission';
-
+import { ref } from 'vue';
+import { getAll } from '@/api/business/nbq';
+const props = { multiple: true };
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_normal_disable, sys_user_sex } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
@@ -318,6 +341,70 @@ const enabledDeptOptions = ref<DeptTreeVO[]>([]);
 const initPassword = ref<string>('');
 const postOptions = ref<PostVO[]>([]);
 const roleOptions = ref<RoleVO[]>([]);
+
+const options = ref([
+  {
+    value: '1',
+    label: '资料权限',
+    children: [
+      {
+        value: '1-1',
+        label: '新建文件夹'
+      },
+      {
+        value: '1-2',
+        label: '导入文件'
+      },
+      {
+        value: '1-3',
+        label: '重命名'
+      },
+      {
+        value: '1-4',
+        label: '下载'
+      },
+      {
+        value: '1-5',
+        label: '预览'
+      },
+      {
+        value: '1-6',
+        label: '保存'
+      },
+      {
+        value: '1-7',
+        label: '删除'
+      },
+      {
+        value: '1-8',
+        label: '模板复制'
+      },
+      {
+        value: '1-9',
+        label: '资料移动'
+      },
+      {
+        value: '1-10',
+        label: '查看项目文件'
+      }
+    ]
+  },
+  {
+    value: '2',
+    label: '回收站权限',
+    children: [
+      {
+        value: '2-1',
+        label: '模板恢复/删除'
+      },
+      {
+        value: '2-2',
+        label: '资料恢复/删除'
+      }
+    ]
+  }
+]);
+
 /*** 用户导入参数 */
 const upload = reactive<ImportOption>({
   // 是否显示弹出层（用户导入）
@@ -350,6 +437,11 @@ const userFormRef = ref<ElFormInstance>();
 const uploadRef = ref<ElUploadInstance>();
 const formDialogRef = ref<ElDialogInstance>();
 
+const programList = ref();
+
+const tempArr = ref([]);
+const programArr = ref([]);
+
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -447,6 +539,21 @@ const getList = async () => {
   total.value = res.total;
 };
 
+function getAllList() {
+  getAll().then((res) => {
+    programList.value = res.data.map((item) => {
+      return {
+        nbqId: item.nbqId,
+        projectBrief: item.projectBrief
+      };
+    });
+  });
+}
+
+watch(tempArr, (nv) => {
+  programArr.value = programList.value.filter((obj) => nv.includes(obj.nbqId));
+});
+
 /** 查询部门下拉树结构 */
 const getDeptTree = async () => {
   const res = await api.deptTreeSelect();
@@ -653,6 +760,7 @@ const resetForm = () => {
   form.value.status = '1';
 };
 onMounted(() => {
+  getAllList();
   getDeptTree(); // 初始化部门数据
   getList(); // 初始化列表数据
   proxy?.getConfigKey('sys.user.initPassword').then((response) => {