完善项目模块页面和对应接口

plus-ui/src/views/project/projectTeam/component/UserListDialog.vue

@@ -1,68 +1,204 @@
 <template>
   <div>
     <el-dialog title="项目班组的成员" v-model="visible" @close="closeModal">
-      <h3>{{ row.teamName }}</h3>
-      <div>{{ JSON.stringify(row) }}</div>
-      <div>{{ JSON.stringify(projectTeamMemberList) }}</div>
-      <!--      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-              <el-form-item label="施工人员" prop="memberId">
-                <el-input v-model="queryParams.memberId" placeholder="请输入施工人员id" clearable @keyup.enter="handleQuery" />
-              </el-form-item>
-              <el-form-item label="岗位" prop="postId">
-                <el-input v-model="queryParams.postId" placeholder="请输入岗位" clearable @keyup.enter="handleQuery" />
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-              </el-form-item>
-            </el-form>-->
+      <template #header>
+        {{ props.projectTeamVo.teamName }}
+      </template>
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="施工人员" prop="memberId">
+          <el-input v-model="queryParams.memberId" placeholder="请输入施工人员" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="岗位" prop="postId">
+          <el-select v-model="queryParams.postId" clearable placeholder="请选择岗位">
+            <el-option v-for="item in user_post_type" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button size="small" type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['project:projectTeamMember:add']">
+            新增
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            size="small"
+            type="success"
+            plain
+            icon="Edit"
+            :disabled="single"
+            @click="handleUpdate()"
+            v-hasPermi="['project:projectTeamMember:edit']"
+          >
+            修改
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            size="small"
+            type="danger"
+            plain
+            icon="Delete"
+            :disabled="multiple"
+            @click="handleDelete()"
+            v-hasPermi="['project:projectTeamMember:remove']"
+          >
+            删除
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button size="small" type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['project:projectTeamMember:export']">
+            导出
+          </el-button>
+        </el-col>
+      </el-row>
+      <el-table v-loading="loading" :data="projectTeamMemberList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="序号" type="index" width="60" align="center" />
+        <el-table-column label="施工人员" align="center" prop="memberName" />
+        <el-table-column label="岗位" align="center" prop="postId">
+          <template #default="scope">
+            <dict-tag :options="user_post_type" :value="scope.row.postId" />
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-space wrap>
+              <el-button link type="success" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['project:projectTeamMember:edit']">
+                修改
+              </el-button>
+              <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['project:projectTeamMember:remove']">
+                删除
+              </el-button>
+            </el-space>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.current" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-dialog>
+    <!-- 添加或修改项目班组下的成员对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="projectTeamMemberFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="施工人员" prop="memberId">
+          <el-select v-model="form.memberId" clearable placeholder="请选择岗位">
+            <el-option v-for="item in userNotInTeamOpt" :key="item.value" :label="item.label" :value="item.value" />
+            <pagination
+              v-show="total > 0"
+              :total="userNotInTeamTotal"
+              v-model:page="userQueryParams.current"
+              v-model:limit="userQueryParams.pageSize"
+              @pagination="getUserListNotInTeam"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="岗位" prop="postId">
+          <el-select v-model="form.postId" clearable placeholder="请选择岗位">
+            <el-option v-for="item in user_post_type" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ProjectTeamVO } from '@/api/project/projectTeam/types';
-import { ProjectTeamMemberVO } from '@/api/project/projectTeamMember/types';
-import { listProjectTeamMember } from '@/api/project/projectTeamMember';
-import { computed, onMounted, ref } from 'vue';
+import { ProjectTeamMemberForm, ProjectTeamMemberQuery, ProjectTeamMemberVO } from '@/api/project/projectTeamMember/types';
+import {
+  addProjectTeamMember,
+  delProjectTeamMember,
+  getProjectTeamMember,
+  listProjectTeamMember,
+  updateProjectTeamMember
+} from '@/api/project/projectTeamMember';
+import { computed, reactive, ref } from 'vue';
+import { useUserStoreHook } from '@/store/modules/user';
+import { listConstructionUser } from '@/api/project/constructionUser';
+import { ConstructionUserVO } from '@/api/project/constructionUser/types';
+
+// 获取用户 store
+const userStore = useUserStoreHook();
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { user_post_type } = toRefs<any>(proxy?.useDict('user_post_type'));
 
 interface Props {
-  row: ProjectTeamVO;
+  projectTeamVo: ProjectTeamVO;
 }
 
 const props = withDefaults(defineProps<Props>(), {});
-const row = computed(() => {
-  return props.row;
-});
 // 是否可见
 const visible = ref(false);
-// 搜索条件
-const searchParams = ref({
-  current: 1,
-  pageSize: 10,
-  sortField: 'createTime',
-  sortOrder: 'descend'
+const initFormData: ProjectTeamMemberForm = {
+  id: undefined,
+  teamId: props.projectTeamVo.id,
+  projectId: currentProject.value.id,
+  memberId: undefined,
+  postId: undefined,
+  remark: undefined
+};
+const data = reactive<PageData<ProjectTeamMemberForm, ProjectTeamMemberQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    current: 1,
+    pageSize: 10,
+    sortField: 'createTime',
+    sortOrder: 'descend',
+    teamId: props.projectTeamVo.id,
+    projectId: currentProject.value.id,
+    memberId: undefined,
+    postId: undefined,
+    params: {}
+  },
+  rules: {
+    id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }]
+  }
 });
-const projectTeamMemberList = ref<ProjectTeamMemberVO[]>([]);
-const total = ref(0);
+const buttonLoading = ref(false);
 const loading = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const queryFormRef = ref<ElFormInstance>();
+const projectTeamMemberFormRef = ref<ElFormInstance>();
 
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+const { queryParams, form, rules } = toRefs(data);
+const projectTeamMemberList = ref<ProjectTeamMemberVO[]>([]);
 /** 查询项目班组下的成员列表 */
 const getList = async () => {
   loading.value = true;
-  // 转换搜索参数
-  const params = {
-    ...searchParams.value
-  };
-  const res = await listProjectTeamMember(params);
+  const res = await listProjectTeamMember(queryParams.value);
   projectTeamMemberList.value = res.data.records;
   total.value = res.data.total;
   loading.value = false;
 };
 
+/** 查询项目下的成员列表 */
+
 // 打开弹窗
 const openModal = () => {
   visible.value = true;
+  getList();
 };
 
 // 关闭弹窗
@@ -70,12 +206,115 @@ const closeModal = () => {
   visible.value = false;
 };
 
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  projectTeamMemberFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.current = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: ProjectTeamMemberVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = '添加项目班组下的成员';
+  getUserListNotInTeam();
+};
+
+const userNotInTeamOpt = ref();
+const userNotInTeamTotal = ref();
+const userQueryParams = ref({
+  current: 1,
+  pageSize: 10,
+  sortField: 'createTime',
+  sortOrder: 'descend'
+});
+
+// 获取不在当前班组的成员
+const getUserListNotInTeam = async () => {
+  loading.value = true;
+  const res = await listConstructionUser({ ...userQueryParams.value, notTeamId: props.projectTeamVo.id });
+  userNotInTeamOpt.value = res.data.records.map((user: ConstructionUserVO) => ({
+    value: user.id,
+    label: user.userName
+  }));
+  userNotInTeamTotal.value = res.data.total;
+  loading.value = false;
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: ProjectTeamMemberVO) => {
+  reset();
+  const _id = row?.id || ids.value[0];
+  const res = await getProjectTeamMember(_id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改项目班组下的成员';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  projectTeamMemberFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateProjectTeamMember(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addProjectTeamMember(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: ProjectTeamMemberVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除项目班组下的成员编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delProjectTeamMember(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'project/projectTeamMember/export',
+    {
+      ...queryParams.value
+    },
+    `projectTeamMember_${new Date().getTime()}.xlsx`
+  );
+};
+
 // 暴露函数给父组件
 defineExpose({
   openModal
 });
-
-onMounted(() => {
-  getList();
-});
 </script>