ccap项目管理-抽屉列表

src/api/CCAPProjectManagement/list.js

@@ -17,3 +17,27 @@ export function getAllBusinessUnitList() {
     method: 'get'
   })
 }
+// 根据id获取所有项目列表
+export function getProjectListById(data) {
+  return request({
+    url: '/control/ccapProjectManagement/getProjectListById',
+    method: 'get',
+    params:data
+  })
+}
+
+// 根据id新增一条抽屉里面的数据
+export function inserTableData(data) {
+  return request({
+    url: '/control/ccapProjectManagement/inserTableData',
+    method: 'post',
+    data:data
+  })
+}
+// 批量删除
+export function inserTableData(ids) {
+  return request({
+    url: '/control/ccapProjectManagement/batch/'+ids,
+    method: 'delete'
+  })
+}

src/views/controlPlan/baseConfig/CCAPProjectManagement/index.vue

 <template>
   <div class="app-container">
     <el-form v-model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="70px">
-
       <el-form-item label="事业部:" prop="status">
         <el-select
           v-model="queryParams.businessUnitId"
@@ -22,7 +21,6 @@
       </el-form-item>
     </el-form>
 
-
     <el-table  :data="tableList">
       <el-table-column type="index" width="55" align="center" label="序号"/>
       <el-table-column label="事业部" align="center" prop="applicableBrand" />
@@ -35,13 +33,12 @@
       <el-table-column label="创建时间" align="center" prop="createTime" />
       <el-table-column label="更新人" align="center" prop="updateUserName" />
       <el-table-column label="更新时间" align="center" prop="updateTime" width="180" >
-
       </el-table-column>
 
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <div style="display: flex;align-items: flex-start">
-            <el-button type="text" style="color: rgb(0,0,255)"  @click="handleView(scope.row)">维护项目</el-button>
+            <el-button type="text" style="color: rgb(0,0,255)"  @click="handleMaintain(scope.row)">维护项目</el-button>
             <el-button type="text" style="color: rgb(255,153,0)" v-if="scope.row.id === adminId" @click="handleView(scope.row)">复制新增</el-button>
             <el-button type="text" v-if="scope.row.id === adminId" @click="handleView(scope.row)">添加事业部</el-button>
             <el-button type="text" style="color: rgb(244,93,93)" v-else="scope.row.id === adminId" @click="handleView(scope.row)">删除</el-button>
@@ -59,7 +56,7 @@
     />
 
     <!--  抽屉-->
-    <el-drawer v-model="drawer2" size='40%'>
+    <el-drawer @close="closeDrawer" v-model="drawer2" size='40%'>
       <template #header>
         <div style="font-weight: bold;font-size: 14px">
           维护项目（奇瑞、星途、智界)
@@ -67,15 +64,14 @@
       </template>
       <template #default>
         <div style="display: flex;justify-content: space-between">
-          <el-form class="drawer-form" v-model="drawerQueryParams" ref="queryRef" :inline="true" v-show="showSearch" >
-
-            <el-form-item label="项目:" prop="status">
+          <el-form class="drawer-form" v-model="drawerQueryParams" ref="drawerQueryRef" :inline="true" v-show="showSearch" >
+            <el-form-item label="项目:" prop="project">
               <el-input v-model="drawerQueryParams.project" style="width: 110px" placeholder="请输入"/>
             </el-form-item>
 
-            <el-form-item label="分组:" prop="status">
+            <el-form-item label="分组:" prop="groupName">
               <el-select
-                v-model="queryParams.businessUnitId"
+                v-model="drawerQueryParams.groupName"
                 placeholder="请选择"
                 clearable
                 style="width: 125px"
@@ -88,13 +84,13 @@
               </el-select>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary"  @click="handleQuery">查询</el-button>
-              <el-button  @click="resetQuery">重置</el-button>
+              <el-button type="primary"  @click="drawerHandleQuery">查询</el-button>
+              <el-button  @click="drawerResetQuery">重置</el-button>
             </el-form-item>
           </el-form>
 
           <div class="top-btn">
-            <el-button type="primary" plain @click="handleQuery">新增</el-button>
+            <el-button type="primary" plain @click="handleAdd">新增</el-button>
             <el-button type="danger" plain  @click="resetQuery">批量删除</el-button>
           </div>
         </div>
@@ -102,13 +98,12 @@
         <el-table border style="margin-top: 10px" :data="drawer2TableList">
           <el-table-column type="selection"  width="55" align="center"/>
           <el-table-column type="index" width="55" align="center" label="序号"/>
-          <el-table-column label="项目" align="center" prop="applicableBrand" />
-          <el-table-column label="分组" align="center" prop="createUserName" />
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-              <div style="display: flex;align-items: flex-start">
+          <el-table-column label="项目" align="center" prop="project" width="300"/>
+          <el-table-column label="分组" align="center" prop="groupName" />
+          <el-table-column label="操作" align="center">
+            <template #default="scope" align="center">
+              <div >
                 <el-button type="text" style="color: rgb(0,0,255)"  @click="handleView(scope.row)">编辑</el-button>
-
                 <el-button type="text" style="color: rgb(244,93,93)"  @click="handleView(scope.row)">删除</el-button>
               </div>
             </template>
@@ -122,77 +117,174 @@
         </div>
       </template>
     </el-drawer>
-  </div>
-
 
+    <!--    对话框-->
+    <el-dialog
+      top="30"
+      v-model="dialogVisible"
+      :title="addTitle"
+      width="500"
+    >
+      <div style="width: 85%;margin-left: 7.5%">
+        <el-form  v-model="dialogForm" ref="dialogQueryRef"  >
+          <el-form-item label="项目:" prop="project"  >
+            <el-input v-model="dialogForm.project" placeholder="请输入"/>
+          </el-form-item>
+
+          <el-form-item label="分组:" prop="groupName" >
+            <el-select
+              v-model="dialogForm.groupName"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="dict in groupList"
+                :label="dict"
+                :value="dict"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
 
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogCencal">取消</el-button>
+          <el-button type="primary" @click="dialogSave">
+            保存
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
-import { getDataList,getAllBusinessUnitList } from "@/api/CCAPProjectManagement/list";
+import { ElMessage } from 'element-plus'
+import { ref, getCurrentInstance } from 'vue';
+import {
+  getDataList,
+  getAllBusinessUnitList,
+  getProjectListById,
+  inserTableData
+} from "@/api/CCAPProjectManagement/list";
 
 const { proxy } = getCurrentInstance();
 const tableList = ref([]);
 const drawer2 = ref(false)
+const dialogVisible = ref(false)
 //第一条数据id
 const adminId = '12321'
-import { useRouter } from 'vue-router';
 const businessList = ref([])
-const drawer2TableList = ref([])
-const router = useRouter();
-const open = ref(false);
-const loading = ref(true);
+const drawer2TableList = ref([]);
+
 const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
+const dialogQueryRef = ref(null);
+const drawerQueryRef = ref(null);
+const addTitle = ref('新增');
+
 const total = ref(0);
-const title = ref("");
+const dialogRules = {
+  project: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
+  groupName: [{ required: true, message: '分组不能为空', trigger: 'change' }]
+};
+
+const dialogForm = ref({
+  projectStatusId: null,
+  project: null,
+  groupName: null
+});
+
 const queryParams = ref({
   pageNum: 1,
   pageSize: 10,
-  businessUnitId:null
-})
+  businessUnitId: null
+});
 const drawerQueryParams = ref({
-
-})
+  id: null,
+  project: null,
+  groupName: null
+});
 
 const groupList = ref([
-  '制造','质管'
-])
-
-const data = reactive({
-  form: {},
+  '制造', '质管'
+]);
+
+function getList() {
+  getDataList(queryParams.value).then(res => {
+    tableList.value = res.rows.sort((a, b) => {
+      if (a.id === adminId) return 1
+      else if (b.id === adminId) return 1
+    });
+    total.value = res.total;
+  });
+}
 
-  rules: {}
-});
+//获取抽屉里面的表格数据
+function getDataProjectListById() {
+  getProjectListById(drawerQueryParams.value).then(res => {
+    console.log(res);
+    drawer2TableList.value = res.data;
+  });
+}
 
-const { form, rules } = toRefs(data);
+function getBusinessList() {
+  getAllBusinessUnitList().then(res => {
+    console.log(res);
+    businessList.value = res.data;
+  });
+}
 
-function getList(){
-  getDataList(queryParams.value).then(res=>{
-    tableList.value =res.rows.sort((a,b)=>{
-      if(a.id === adminId) return 1
-      else if(b.id === adminId) return 1
-    })
-    total.value = res.total
-  })
+//抽屉里面点击了新增按钮
+function handleAdd() {
+  dialogVisible.value = true;
+  addTitle.value = '新增';
+  dialogForm.value.projectStatusId = drawerQueryParams.value.id;
 }
 
-function getBusinessList(){
-  getAllBusinessUnitList().then(res=>{
+//对话框里面的保存
+function dialogSave() {
+  console.log(dialogForm.value);
+  inserTableData(dialogForm.value).then(res=>{
     console.log(res)
-    businessList.value =res.data
+    if(res.code === 200) {
+      ElMessage.success("新增成功")
+      dialogCencal()
+      getDataProjectListById()
+    }
   })
+  // dialogQueryRef.value.validate((valid) => {
+  //   if (valid) {
+  //     console.log(dialogForm.value);
+  //   } else {
+  //     return false;
+  //   }
+  // });
+}
+
+//对话框里面的取消
+function dialogCencal() {
+  dialogForm.value.project = null;
+  dialogForm.value.groupName = null;
+  dialogForm.value.projectStatusId = null;
+  dialogVisible.value = false;
 }
 
 // 取消按钮
 function cancelClick() {
   drawer2.value = false;
-  reset();
+  drawerQueryParams.value.id = null;
+  drawer2TableList.value = [];
 }
 
+function drawerHandleQuery() {
+  getDataProjectListById();
+}
 
+//关闭抽屉的方法
+function closeDrawer(){
+  getList()
+}
 
 // 表单重置
 function reset() {
@@ -222,6 +314,12 @@ function handleQuery() {
   getList();
 }
 
+function drawerResetQuery() {
+  drawerQueryParams.value.groupName = null;
+  drawerQueryParams.value.project = null;
+  getDataProjectListById();
+}
+
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
@@ -233,39 +331,47 @@ function resetQuery() {
     listName: null,
     listVersion: null,
     listStatus: null,
-  }
+  };
   handleQuery();
 }
 
-function handleView(row) {
-  console.log(row)
-  drawer2.value = true
+function handleMaintain(row) {
+  drawerQueryParams.value.id = row.id;
+  drawer2.value = true;
+  getDataProjectListById();
 }
 
-
 /** 导出按钮操作 */
 function handleExport() {
   proxy.download('marketRegulations/list/export', {
     ...queryParams.value
-  }, `list_${new Date().getTime()}.xlsx`)
+  }, `list_${new Date().getTime()}.xlsx`);
 }
-getList()
-getBusinessList()
+
+getList();
+getBusinessList();
 </script>
-  <style scoped lang="scss">
+
+<style scoped lang="scss">
 :deep(.drawer-form.el-form--inline .el-form-item) {
   margin-right: 15px;
 }
+
 :deep(.drawer-form .el-button + .el-button) {
   margin-left: 5px;
 }
+
 :deep(.top-btn .el-button + .el-button) {
   margin-left: 5px;
 }
+
 :deep(.el-drawer__header) {
   margin-bottom: 0;
   padding-bottom: 20px;
-  background-color: rgb(245,245,245);
+  background-color: rgb(245, 245, 245);
 }
 
+:deep(.el-dialog) {
+  margin-top: 17% !important;
+}
 </style>