弹窗组织分类跟背景颜色更改

src/components/list.vue

@@ -6,34 +6,41 @@
       <p style="font-size: 30px;font-weight: 400;float: left;margin-left: 30px;padding-top: 20px">账号列表</p>
     </div>
     <!-- 学习名称组织名称表单区域 -->
-    <div v-if="isOrgFormVisible" class="table">
-      <a @click="close_table" class="table_close">X</a>
-       <div class="input-container">
-          <input type="text" v-model="searchQuery" placeholder="搜索学校" class="table_find"  @keyup.enter="ajax_school_name(searchQuery)"/>
-          <i class="el-icon-search" @click="ajax_school_name(searchQuery)"></i>
-        </div>
+    <el-dialog :visible.sync="isOrgFormVisible" :before-close="close_table" custom-class="table" width="920px">
+      <!-- 自定义头部 -->
+      <div class="el_header">
+        <span class="el_title">移动选择</span>
+        <button type="button" aria-label="Close" class="el_close" @click="form_clost">
+          <i></i>
+        </button>
+      </div>
+      <!-- 搜索框区域 -->
+      <div class="input-container">
+        <input type="text" v-model="searchQuery" placeholder="搜索学校" class="table_find" @keyup.enter="ajax_school_name(searchQuery)" />
+        <i class="el-icon-search" @click="ajax_school_name(searchQuery)"></i>
+        <el-form :model="school" ref="form" style="float: left;margin-left: 10px;width: 200px;height: 30px;margin-top: 1px;">
+          <el-select v-model="school.type" placeholder="请选择组织" class="custom-select" @change="ajax_org_type(school.type)">
+            <!-- 动态生成 <el-option> -->
+            <el-option
+              v-for="(org, index) in organizations"
+              :key="index"
+              :label="org.name" 
+              :value="org.id">  
+              {{ org.name }}
+            </el-option>
+          </el-select>
+        </el-form>
+      </div>
+
       <div class="table_down">
         <div v-if="cn_org">
           <div class="checkbox-container">
-             <!-- 循环渲染每个学校 -->
-             <div v-for="(school, index) in cn_school" :key="index" class="checkbox_comment">
-              <div class="checkbox-left">
-                <label class="checkbox-label">
-                  <!-- 学校名称 -->
-                  <a>{{ school }}</a>
-                </label>
-                <!-- 复选框 -->
-                <input type="checkbox" class="checkbox_input_org">
-              </div>
-            </div>
-          </div>
-          <div class="checkbox-company">
-            <!-- 循环渲染每个组织 -->
-            <div v-for="(organization, index) in organizations" :key="index" class="checkbox_comment">
+            <!-- 循环渲染每个学校 -->
+            <div v-for="(school, index) in cn_school" :key="index" class="checkbox_comment">
               <div class="checkbox-left">
                 <label class="checkbox-label">
-                  <!-- 组织名称 -->
-                  <a>{{ organization }}</a>
+                  <!-- 学校名称，显示 school.name -->
+                  <a>{{ school.name }}</a>
                 </label>
                 <!-- 复选框 -->
                 <input type="checkbox" class="checkbox_input_org">
@@ -42,16 +49,20 @@
           </div>
         </div>
       </div>
-      <!-- 新增学校按钮跟确认移动按钮 -->
-      <el-button type="primary" class="add_school">新增学校</el-button>
-      <el-button type="primary" class="add_school" style="margin-left: 50px;">新增组织</el-button>
-      <el-button type="primary" class="add_run">确认移动</el-button>
-    </div>
+
+      <!-- 按钮区域 -->
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="isOrgFormVisible = false">取 消</el-button>
+        <el-button type="primary">新增学校</el-button>
+        <el-button type="primary">新增组织</el-button>
+        <el-button type="primary">确认移动</el-button>
+      </div>
+    </el-dialog>
     <!-- 姓名与账户名称 -->
-    <div v-if="isTableUseVisible"  class="add_account">
+    <div v-if="isTableUseVisible" class="add_account">
       <div class="el-dialog__header">
         <span class="el-dialog__title">添加账户</span>
-        <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="form_clost" >
+        <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="form_clost">
           <i class="el-dialog__close el-icon el-icon-close"></i>
         </button>
       </div>
@@ -59,10 +70,10 @@
       <div class="el-dialog__body">
         <el-form ref="form" :model="form" label-width="80px">
           <el-form-item label="活动名称">
-            <el-input v-model="form.name"  placeholder="请输入姓名" class="form_input"></el-input>
+            <el-input v-model="form.name" placeholder="请输入姓名" class="form_input"></el-input>
           </el-form-item>
           <el-form-item label="账户名称">
-            <el-input v-model="form.account" type="text"  placeholder="请输入账户名称" class="form_input"></el-input>
+            <el-input v-model="form.account" type="text" placeholder="请输入账户名称" class="form_input"></el-input>
           </el-form-item>
           <el-form-item label="所属组织">
             <el-select v-model="form.organization" placeholder="请选择组织">
@@ -94,26 +105,26 @@
       </div>
       <!-- 启用中区域 -->
       <div v-if="open_content" style="margin-top: -80px;">
-        <el-table :data="paginatedData" border style="width: 94%; margin-top: 90px; margin-left: 80px;" stripe>
-        <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="350" header-align="center" align="center" />
-        <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="350" header-align="center" align="center" />
-        <el-table-column show-overflow-tooltip prop="name" label="姓名" width="350" header-align="center" align="center" />
-        <el-table-column show-overflow-tooltip prop="account" label="账户" width="350" header-align="center" align="center" />
-        <el-table-column fixed="right" label="操作" width="250" header-align="center">
-          <template slot-scope="{ row }">
-            <el-button link type="text" size="small" @click="ajax__open_stop(row.userid)">停用</el-button>
-            <el-button link type="text" size="small" @click="run()">移动</el-button>
-            <el-button
-              link
-              type="text"
-              size="small"
-              @click="ajax_admin(row.userid, row.role, row.type)"
-            >
-              {{ row.role === 1 ? '已设置管理员' : '设置管理员' }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+        <el-table :data="paginatedData" border style="width: 94%; margin-top: 90px; margin-left: 80px;" stripe :header-cell-style="headerCellStyle">
+          <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="350" header-align="center" align="center" />
+          <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="350" header-align="center" align="center" />
+          <el-table-column show-overflow-tooltip prop="name" label="姓名" width="350" header-align="center" align="center" />
+          <el-table-column show-overflow-tooltip prop="account" label="账户" width="350" header-align="center" align="center" />
+          <el-table-column fixed="right" label="操作" width="250" header-align="center">
+            <template slot-scope="{ row }">
+              <el-button link type="text" size="small" @click="ajax__open_stop(row.userid)">停用</el-button>
+              <el-button link type="text" size="small" @click="run()">移动</el-button>
+              <el-button
+                link
+                type="text"
+                size="small"
+                @click="ajax_admin(row.userid, row.role, row.type)"
+              >
+                {{ row.role === 1 ? '已设置管理员' : '设置管理员' }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
         <!-- 分页区域 -->
         <div class="Pagetion" v-if="up_page">
           <el-pagination
@@ -128,7 +139,7 @@
       </div>
       <!-- 已停用区域 -->
       <div v-if="stop_content" style="margin-top: -80px;">
-        <el-table :data="down_paginatedData" border style="width: 94%; margin-top: 90px; margin-left: 80px;" header-align="center" align="center">
+        <el-table :data="down_paginatedData" border style="width: 94%; margin-top: 90px; margin-left: 80px;" header-align="center" align="center" stripe :header-cell-style="headerCellStyle">
           <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="350" header-align="center" align="center"/>
           <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="350" header-align="center" align="center"/>
           <el-table-column show-overflow-tooltip prop="name" label="姓名" width="350" header-align="center" align="center"/>
@@ -171,9 +182,6 @@ export default {
       dropdownVisible: false,
       checked: true,
       showCompany: false, // 默认隐藏
-      button: [],         // 假设 button 用来存储选择的值
-      // 每个项对应一个布尔值，表示是否展开
-      showCompanyList: [false, false, false, false, false, false, false, false, false],
       // 响应式数据
       //移动弹窗
       isOrgFormVisible: true,
@@ -187,7 +195,7 @@ export default {
       stop: false,
       // 启用区域分页
       currentPage: 1, // 当前第几页
-      pageSize: 5, // 每页显示的条目数
+      pageSize: 5, // 每页显示���条目数
       // 停止区域分页
       down_currentPage: 1, // 当前第几页
       down_pageSize: 5, // 每页显示的条目数
@@ -215,6 +223,11 @@ export default {
       // 用于存放从后台获取的学校数据
       cn_school: [],
       searchQuery: "",  // 用来存储输入框的值
+      dialogVisible: true,
+      //输入框学校分类
+      school: {
+          type:"",
+        },
     };
   },
   computed: {
@@ -254,7 +267,7 @@ export default {
       this.add_button = true;
       this.stop_content = false;
       this.open = true;  // 启用中按钮颜色变为黑色
-      this.stop = false; // 已停用按钮颜色变��灰色
+      this.stop = false; // 已停用按钮颜色变为灰色
       this.up_page = true;
       this.down_page = false;
     },
@@ -302,6 +315,10 @@ export default {
       this.hk_org = false;
       this.com_org = true;
     },
+    // 表头的背景色
+    headerCellStyle() {
+      return { backgroundColor: '#f1f1f1' };
+    },
     // 已启用
     ajax_user_open() {
       let params = [
@@ -316,13 +333,14 @@ export default {
         .then((res) => {
           // 假设 res.data[0] 是返回的用户数据数组
           this.tableData = res.data[0].map(user => ({
-            company_name: user.name || '未知',     // 组织名称
-            company_number: user.id || '未知',     // 组织编号
-            name: user.username || '未知',         // 姓名
-            account: user.account  || '未知',  // 账户
-            userid:user.userid,
-            role: user.role || 0,                  // 角色，假设 1 为管理员，0 为普通用户
-            action: user.role === 1 
+            company_name: user.org_name || '暂无',     // 组织名称
+            company_number: user.org_id || '暂无',     // 组织编号
+            name: user.user_name || '暂无',         // 姓名
+            account: user.account_name  || '暂无',  // 账户
+            userid:user.user_id,
+            role: user.admin_role || 0,                  // 角色，假设 1 为管理员，0 为普通用户
+            school:user.s_id,
+            action: user.admin_role === 1 
               ? '已设置管理员' 
               : '设置管理员'                      // 根据 role 字段设置按钮文字
           }));
@@ -350,11 +368,11 @@ export default {
         .then((res) => {
           // 假设 res.data[0] 是返回的用户数据数组
           this.tableData_stop = res.data[0].map(user => ({
-            company_name: user.name || '未知',     // 组织名称
-            company_number: user.id || '未知',     // 组织编号
-            name: user.username || '未知',         // 姓名
-            account: user.account  || '未知',  // 账户
-            userid:user.userid,
+            company_name: user.org_name || '暂无',     // 组织名称
+            company_number: user.org_id || '暂无',     // 组织编号
+            name: user.user_name || '暂无',         // 姓名
+            account: user.account_name  || '暂无',  // 账户
+            userid:user.user_id,
           })); 
           // 打印映射后的用户信息
           // console.log("停止:", res.data);
@@ -440,10 +458,10 @@ export default {
           // 直接假设返回的数据格式正确，直接执行
           this.tableData = res.data[0].map(user => {
             return {
-              company_name: user.name || '未知',
-              company_number: user.id || '未知',
-              name: user.username || '未知',
-              account: user.account || '未知',
+              company_name: user.name || '暂无',
+              company_number: user.id || '暂无',
+              name: user.username || '暂无',
+              account: user.account || '暂无',
               role: user.role,
               userid: user.userid,
             };
@@ -483,16 +501,19 @@ export default {
         .then((res) => {
           // console.log("返回的数据为：", res.data);  // 检查返回的数据
           if (res.data && Array.isArray(res.data[0])) {
-            // 使用 map() 提取所有组织名称
-            this.cn_school = res.data[0].map(item => item.name);
+            // 将 name 和 org 都存入 cn_school 数组中
+            this.cn_school = res.data[0].map(item => ({
+              name: item.name,
+              org: item.org
+            }));
           }
         })
         .catch((err) => {
           this.$message.error("查询失败");
           console.error("请求失败，错误信息：", err);
         });
-    },
-    //选择框中的选择数据，此处先获取组织表中的所有组织跟学校表的所有学校
+    }, 
+    //组织查询
     ajax_org() {
       let params = [
         {
@@ -506,57 +527,80 @@ export default {
           // console.log("返回的数据为：", res.data);  // 检查返回的数据
           if (res.data && Array.isArray(res.data[0])) {
             // 使用 map() 提取所有组织名称
-            this.organizations = res.data[0].map(item => item.name);
+            this.organizations = res.data[0];
           }
+          // console.log("返回的结果为：",this.organizations);
         })
         .catch((err) => {
           this.$message.error("查询失败");
           console.error("请求失败，错误信息：", err);
         });
     },
+    //关键词查询
     ajax_school_name(searchQuery) {
-      console.log('搜索关键词:', searchQuery);  // 打印搜索关键词
+    console.log('搜索关键词:', searchQuery);  // 打印搜索关键词
 
-      // 检查 searchQuery 是否为空
-      if (!searchQuery) {
-          this.$message.warning('请输入搜索内容');
-          return;
-      }
+    // 检查 searchQuery 是否为空
+    if (!searchQuery) {
+        this.$message.warning('请输入搜索内容');
+        return;
+    }
 
-      let params = [
+    let params = [
+        {
+            functionName: "select_school_name",  // 调用存储过程的名称
+            u_name: searchQuery,  // 用户输入的搜索关键词
+        },
+    ];
+
+    this.$ajax
+        .post("http://10.3.16.166:7003/api/pbl/localPost", params)
+        .then((res) => {
+            console.log('返回的学校数据:', res.data);  // 打印返回的数据
+
+            // 检查是否查询到有效数据
+            if (res.data && Array.isArray(res.data[0]) && res.data[0].length > 0) {
+                // 只有在查询到学校数据且数组不为空时才更新 cn_school
+                this.cn_school = res.data[0].map(item => ({
+                    name: item.name,
+                    org: item.org
+                }));
+                // console.log('更新后的学校列表:', this.cn_school);  // 打印更新后的学校列表
+                // 查询成功且更新后，显示成功消息
+                this.$message.success('成功查询到了学校');
+            } else {
+                // 如果没有找到匹配的学校，保持原有的 cn_school 数组内容
+                this.$message.warning('没有找到匹配的学校');
+            }
+        })
+        .catch((err) => {
+            this.$message.error("查询失败");
+            console.error("请求失败，错误信息：", err);
+        });
+},
+      //下拉菜单查询
+      ajax_org_type(id) {
+        let params = [
           {
-              functionName: "select_school_name",  // 调用存储过程的名称
-              u_name: searchQuery,  // 用户输入的搜索关键词
+            functionName: "select_org_school",  // 调用存储过程的名称
+            u_org: id
           },
-      ];
+        ];
 
-      this.$ajax
+        this.$ajax
           .post("http://10.3.16.166:7003/api/pbl/localPost", params)
           .then((res) => {
-              console.log('返回的学校数据:', res.data);  // 打印返回的数据
-
-              // 检查是否查询到数据
-              if (res.data && Array.isArray(res.data[0])) {
-                  const schools = res.data[0].map(item => item.name);  // 提取学校名称
-
-                  // 只有在查询到学校时才更新 cn_school
-                  if (schools.length > 0 && schools.length !== this.cn_school.length) {
-                      this.cn_school = schools;  // 更新 cn_school
-                      // console.log('更新后的学校列表:', this.cn_school);  // 打印更新后的学校列表
-                      // 查询成功且更新后，显示成功消息
-                      this.$message.success('成功查询到了学校');
-                  } else {
-                      this.$message.warning('没有找到匹配的学校');
-                  }
-              } else {
-                  this.$message.warning('没有找到匹配的学校');
-              }
+            if (res.data && Array.isArray(res.data[0])) {
+              // 使用 map() 提取所有学校名称
+              this.cn_school = res.data[0];
+            }
+            console.log("返回的结果为：", res.data);
           })
           .catch((err) => {
-              this.$message.error("查询失败");
-              console.error("请求失败，错误信息：", err);
+            this.$message.error("查询失败");
+            console.error("请求失败，错误信息：", err);
           });
-      },
+      }
   },
   mounted() {
      this.ajax_user_stop();  // 如果是在启用区域，停用
@@ -673,9 +717,37 @@ body{
   background-color: rgb(255, 255, 255);
   /* border: 1px solid black; */
 }
+/* 头部 */
+/* 添加账户头顶 */
+.el_header{
+  width: 920px;
+  height: 80px;
+  text-align: center;
+  background: #454545;
+  margin-top: -60px;
+  float: left;
+  margin-left: -20px;
+}
+.el_title{
+  font-size: 18px !important;
+  color: #fff !important;
+  line-height: 80px;
+}
+/* 取消按钮样式 */
+.el_close{
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 0;
+  background: 0 0;
+  border: none;
+  outline: 0;
+  cursor: pointer;
+  font-size: 16px;
+}
 /* 移动弹窗的选择区域 */
 .table_down{
-  width: 910px;
+  width: 100%;
   height: 450px;
   /* border: 1px solid red; */
   margin-top: 80px;
@@ -711,58 +783,91 @@ body{
   cursor: pointer;
   margin-top: 10px;
 }
-/* 输入框样式 */
+/* 输入框容器*/
 .input-container {
   position: absolute;
-  width: 145px;
+  width: 90%;
   float: left;
-  margin-top: 22px;
-  margin-left: 722px;
+  margin-top: 32px;
   /* border: 1px solid red; */
 }
+/* 搜索框 */
 .table_find {
-  width: 100px; /* 设置容器的宽度 */
+  width: 190px; /* 设置容器的宽度 */
   flex-grow: 1; /* 让输入框自适应宽度 */
   height: 40px;
   padding-right: 30px; /* 为右侧图标留出空间 */
   padding-left: 10px; /* 可选，输入框内的左侧间距 */
-  border-radius: 20px;
   border: 1px solid rgb(189, 189, 189);
   font-size: 15px;
   outline: none;
   color: black;
   cursor: pointer;
+  float: left;
+  border-radius: 10px;
 }
-/* 搜索框的符号 */
-.el-icon-search{
-  cursor: pointer;
+/* 按钮选择区域 */
+.check_box_content{
+  width: 90%;
+  height: 45px;
+  float: left;
+  margin-top: 64px;
+  border: 1px solid red;
 }
-.table_find::placeholder {
-  color: black;  /* 设置提示文字颜色为黑色 */
+/* 按钮样式 */
+.check_box_content .el-button{
+  float: left;
+  margin-top: 5px;
 }
 .input-container i[data-v-227179ae] {
-  font-size: 18px;
+  font-size: 25px;
   color: black;
   height: 15px;
   font-weight: bold;
 }
+/* 搜索放大镜符号 */
 .el-icon-search {
-  font-size: 18px; /* 图标大小 */
+  font-size: 25px;
   position: absolute;
-  float: right;
-  margin-left: -25px;
-  margin-top: 10px;
+  margin-top: 6px;
   color: black;
   font-weight: bold;
+  cursor: pointer;
+  margin-left: -330px;
+}
+/* 自定义 el-select 的外部样式 */
+.custom-select {
+  width: 220px; /* 设置宽度 */
+  font-size: 14px; /* 设置字体大小 */
 }
-/* 学校名称 */
+
+/* 修改 el-input__inner 样式 */
+.custom-select .el-input__inner {
+  height: 30px; /* 修改输入框的高度 */
+  font-size: 16px; /* 修改字体大小 */
+  padding-left: 15px; /* 修改左边的内边距 */
+  border-radius: 6px; /* 设置圆角 */
+  border: 1px solid #dcdfe6; /* 设置边框 */
+}
+
+/* 如果需要修改选项的样式，可以使用 .el-select-dropdown__item */
+.custom-select .el-select-dropdown__item {
+  font-size: 14px; /* 修改下拉框选项的字体大小 */
+  padding: 12px; /* 修改选项的内边距 */
+}
+
+.custom-select .el-select-dropdown__item.selected {
+  background-color: #409EFF; /* 设置选中项的背景色 */
+  color: #fff; /* 设置选中项的字体颜色 */
+}
+/* 弹窗选择区域 */
 .checkbox-container {
-  margin-top: 60px;
+  margin-top: 0px;
   float: left;
   margin-left: 80px;
   /* border: 1px solid red; */
-  height: 400px;
-  width: 350px;
+  height: auto;
+  width: 90%;
 }
 /* .checkbox_comment样式 */
 .checkbox_comment {
@@ -773,6 +878,7 @@ body{
   display: flex; /* 使用flexbox对齐 */
   align-items: center; /* 垂直居中 */
   justify-content: space-between; /* 确保文本和复选框分别位于两端 */
+  float: left;
 }
 
 /* 下划线 */
@@ -884,7 +990,7 @@ body{
 /* 设置分页按钮的宽度 */
 .el-pagination .el-pagination__prev,
 .el-pagination .el-pagination__next {
-  width: 60px; /* 设置上一页和下一页按钮的宽�� */
+  width: 60px; /* 设置上一页和下一页按钮的宽 */
 }
 .el-pager li {
   padding: 0px 35px;
@@ -936,15 +1042,13 @@ body{
   border: none;
   outline: 0;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 20px;
 }
 /* 输入框 */
 .form_input{
   width: 400px;
 }
 .el-form {
-  /* 清除浮动 */
-  overflow: auto;
   float: left;
   margin-left: 66px;
 }
@@ -979,4 +1083,8 @@ body{
   margin-top: 40px;
   margin-right: 100px;
 }
+/* 使用v-deep深度，进入元素设置表格行的背景色 */
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+  background-color: #f1f1f1;
+}
 </style>

src/views/HomeView.vue

@@ -53,7 +53,7 @@ export default {
   padding: 0;
 }
 body {
-  background-color: #efefef; 
+  background-color: #f1f2f5; 
   height: 100vh; /* 占据整个视口高度 */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;