feat:修改学员列表操作

src/components/drawers/StuAdd.vue

@@ -24,18 +24,26 @@
                   <div class="nameinp">
                     <div class="namee">姓名：</div>
                     <a-input
-                        v-model:value="name"
+                      v-model:value="name"
-                        style="width: 270px; height: 40px; border-radius: 8px"
+                      style="width: 270px; height: 40px; border-radius: 8px"
-                        placeholder="请输入姓名"
+                      placeholder="请输入姓名"
                     />
                   </div>
                   <div class="btns">
                     <div class="btn1">
-                      <div class="img1"><img src="../../assets/images/courseManage/search0.png"/></div>
+                      <div class="img1">
+                        <img
+                          src="../../assets/images/courseManage/search0.png"
+                        />
+                      </div>
                       <div class="wz">搜索</div>
                     </div>
                     <div class="btn2">
-                      <div class="img2"><img src="../../assets/images/courseManage/reset1.png"/></div>
+                      <div class="img2">
+                        <img
+                          src="../../assets/images/courseManage/reset1.png"
+                        />
+                      </div>
                       <div class="wz">重置</div>
                     </div>
                   </div>
@@ -86,9 +94,9 @@
                 <div class="tab2">
                   <div class="organize">组织：</div>
                   <a-cascader
-                        v-model:value="value"
+                    v-model:value="value"
-                        placeholder="请输入组织名称"
+                    placeholder="请输入组织名称"
-                        :options="organizeList"
+                    :options="organizeList"
                   />
                 </div>
               </a-tab-pane>
@@ -97,19 +105,27 @@
                   <div class="nameinp">
                     <div class="namee">受众名称：</div>
                     <a-select
-                        v-model:value="value"
+                      v-model:value="value"
-                        style="width: 264px;border-radius: 8px"
+                      style="width: 264px; border-radius: 8px"
-                        placeholder="请输入组织名称"
+                      placeholder="请输入组织名称"
-                        :options="organizeList1"
+                      :options="organizeList1"
                     />
                   </div>
                   <div class="btns">
                     <div class="btn1">
-                      <div class="img1"><img src="../../assets/images/courseManage/search0.png"/></div>
+                      <div class="img1">
+                        <img
+                          src="../../assets/images/courseManage/search0.png"
+                        />
+                      </div>
                       <div class="wz">搜索</div>
                     </div>
                     <div class="btn2">
-                      <div class="img2"><img src="../../assets/images/courseManage/reset1.png"/></div>
+                      <div class="img2">
+                        <img
+                          src="../../assets/images/courseManage/reset1.png"
+                        />
+                      </div>
                       <div class="wz">重置</div>
                     </div>
                   </div>
@@ -168,6 +184,78 @@
             </div>
           </div>
           <div class="selecteds">
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
             <div class="chose">
               李明
               <div class="ch"></div>
@@ -201,7 +289,6 @@
       </div>
     </div>
   </a-drawer>
-  
 </template>
 
 <script>
@@ -227,38 +314,38 @@ export default {
           label: "京东方",
           children: [
             {
-              id:2,
+              id: 2,
               value: "产研部",
               label: "产研部",
               children: [
-                          {
+                {
-                            id:4,
+                  id: 4,
-                            value: "产品部门",
+                  value: "产品部门",
-                            label: "产品部门",
+                  label: "产品部门",
-                          },
+                },
-                          {
+                {
-                            id:5,
+                  id: 5,
-                            value: "研发部门",
+                  value: "研发部门",
-                            label: "研发部门",
+                  label: "研发部门",
-                          },
+                },
-                        ],
+              ],
             },
             {
-              id:3,
+              id: 3,
               value: "人力资源部",
               label: "人力资源部",
               children: [
-                          {
+                {
-                            id:6,
+                  id: 6,
-                            value: "人事部",
+                  value: "人事部",
-                            label: "人事部",
+                  label: "人事部",
-                          },
+                },
-                          {
+                {
-                            id:7,
+                  id: 7,
-                            value: "行政部",
+                  value: "行政部",
-                            label: "行政部",
+                  label: "行政部",
-                          },
+                },
-                        ],
+              ],
             },
           ],
         },
@@ -449,7 +536,7 @@ export default {
 
     const stuaddChange = (e) => {
       state.stuaddTab = e;
-    }
+    };
 
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
@@ -466,7 +553,7 @@ export default {
 };
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 .stuadd {
   // .ant-drawer-content-wrapper {
   //   // max-width: 1000px;

src/views/projectcenter/TaskPage.vue

@@ -500,7 +500,7 @@
                 <div class="tab" style="margin: 20px 32px 30px 32px">
                   <a-table
                     style="border: 1px solid #f2f6fe"
-                    :columns="tablecolumns"
+                    :columns="studentColumns()"
                     :data-source="tabledata"
                     :loading="tableDataTotal === -1 ? true : false"
                     expandRowByClick="true"
@@ -761,6 +761,7 @@
             <p style="margin-top: 35px">公告内容</p>
             <a-textarea
               v-model:value="noticeContent"
+              placeholder="请输入要发布的公告"
               show-count
               :maxlength="150"
               style="margin-top: -10px; height: 110px"
@@ -1490,6 +1491,7 @@ export default {
           diploma: "0",
           stutime: "2022-10-31 23:12:00",
           putin: "手动加入",
+          excellent: true, //是否是优秀学员
         },
         {
           key: 2,
@@ -1501,6 +1503,7 @@ export default {
           diploma: "0",
           stutime: "2022-10-21 23:12:00",
           putin: "手动加入",
+          excellent: false, //是否是优秀学员
         },
         {
           key: 3,
@@ -1512,6 +1515,7 @@ export default {
           diploma: "0",
           stutime: "2022-10-11 23:12:00",
           putin: "手动加入",
+          excellent: false, //是否是优秀学员
         },
         {
           key: 4,
@@ -1523,86 +1527,10 @@ export default {
           diploma: "0",
           stutime: "2022-10-31 23:12:00",
           putin: "手动加入",
+          excellent: true, //是否是优秀学员
         },
       ],
-      tablecolumns: [
+
-        {
-          title: "姓名",
-          dataIndex: "name",
-          key: "name",
-          width: 30,
-          align: "left",
-          className: "h",
-        },
-        {
-          title: "部门",
-          dataIndex: "bum",
-          key: "bum",
-          width: 40,
-          align: "center",
-          className: "h",
-        },
-        {
-          title: "岗位",
-          dataIndex: "gangw",
-          key: "gangw",
-          width: 40,
-          align: "center",
-          className: "h",
-        },
-        {
-          title: "所属小组",
-          dataIndex: "group",
-          key: "group",
-          width: 40,
-          align: "center",
-          className: "h",
-        },
-        {
-          title: "进度",
-          dataIndex: "progress",
-          key: "progress",
-          width: 40,
-          align: "center",
-          className: "h",
-        },
-        {
-          title: "证书",
-          dataIndex: "diploma",
-          key: "diploma",
-          width: 40,
-          align: "center",
-          className: "h",
-        },
-        {
-          title: "最近学习时间",
-          dataIndex: "stutime",
-          key: "stutime",
-          width: 50,
-          align: "center",
-          className: "h",
-          sorter: {
-            compare: (a, b) => a.stutime - b.stutime,
-            multiple: 3,
-          },
-        },
-        {
-          title: "加入方式",
-          dataIndex: "putin",
-          key: "putin",
-          width: 40,
-          align: "center",
-          className: "h",
-        },
-        {
-          title: "操作",
-          dataIndex: "operations",
-          key: "operations",
-          width: 60,
-          align: "center",
-          className: "h",
-        },
-      ],
       //进度排行学员
       rankjindu: [{ value: "学员", label: "学员" }],
       valuestu1: "学员",
@@ -1638,12 +1566,12 @@ export default {
       checkedd2: false, //设置按钮2
       radioV1: "",
       radioV2: "",
-      activeKey: "2",
+      activeKey: "3",
       activeKey1: "8",
       valueName: "", //排行榜输入姓名
       valueDate: "", //排行榜输入日期
       noticeChecked: true,
-      noticeContent: "请输入要发布的公告",
+      noticeContent: "",
 
       //进度排行表
       jindutabledata: [
@@ -2185,6 +2113,160 @@ export default {
         state.radioV2 = "";
       }
     };
+
+    //学员管理列表操作
+    const studentData = () => {
+      let arr = state.tabledata;
+      arr.map((value) => {
+        value.operation = (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <div class="studentopea1">
+              {value.excellent ? "取消优秀" : "优秀学员"}
+            </div>
+
+            <div class="studentopea2">查看</div>
+            <div class="studentSelect">
+              <a-select
+                style="width: 50px"
+                value="更多"
+                // options={state.projectNameList}
+                dropdownClassName="tabledropdown"
+              >
+                <a-select-option value="换组" label="换组">
+                  <div>换组</div>
+                </a-select-option>
+                <a-select-option value="删除" label="删除">
+                  <div
+                    onClick={() => {
+                      console.log("点击了111");
+                    }}
+                  >
+                    删除
+                  </div>
+                </a-select-option>
+              </a-select>
+            </div>
+          </div>
+        );
+      });
+      state.tabledata = arr;
+      // console.log("state.tabledata", state.tabledata);
+    };
+    studentData();
+    const studentColumns = () => {
+      const tablecolumns = [
+        {
+          title: "姓名",
+          dataIndex: "name",
+          key: "name",
+          width: 50,
+          align: "left",
+          className: "h",
+          // scopedSlots: { customRender: "action" }, //引入的插槽
+          customRender: (text) => {
+            console.log(text.excellent);
+            return (
+              <div>
+                {text.record.excellent ? (
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                    }}
+                  >
+                    <span class="stydentName">{text.value}</span>
+                    <div class="studentExcellent">
+                      <img class="studentExcellentImg" />
+                      <span class="studentExcellentT">优秀</span>
+                    </div>
+                  </div>
+                ) : (
+                  <div>
+                    <span>{text.value}</span>
+                  </div>
+                )}
+              </div>
+            );
+          },
+        },
+        {
+          title: "部门",
+          dataIndex: "bum",
+          key: "bum",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "岗位",
+          dataIndex: "gangw",
+          key: "gangw",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "所属小组",
+          dataIndex: "group",
+          key: "group",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "进度",
+          dataIndex: "progress",
+          key: "progress",
+          width: 30,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "证书",
+          dataIndex: "diploma",
+          key: "diploma",
+          width: 30,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "最近学习时间",
+          dataIndex: "stutime",
+          key: "stutime",
+          width: 50,
+          align: "center",
+          className: "h",
+          // sorter: {
+          //   compare: (a, b) => a.stutime - b.stutime,
+          //   multiple: 3,
+          // },
+        },
+        {
+          title: "加入方式",
+          dataIndex: "putin",
+          key: "putin",
+          width: 40,
+          align: "center",
+          className: "h",
+        },
+        {
+          title: "操作",
+          dataIndex: "operation",
+          key: "operation",
+          width: 60,
+          align: "center",
+          className: "h",
+        },
+      ];
+      return tablecolumns;
+    };
+
     return {
       ...toRefs(state),
       showModal,
@@ -2211,6 +2293,7 @@ export default {
       edit_exit,
       cloradio1,
       cloradio2,
+      studentColumns,
     };
   },
 };
@@ -2998,7 +3081,7 @@ export default {
     }
     .taskSyllabus {
       // flex: 1;
-      overflow-x: scroll;
+      overflow-x: auto;
 
       .ant-collapse {
         border: 0px;
@@ -3362,6 +3445,101 @@ export default {
         // position: absolute;
         // bottom: 20px;
       }
+
+      .studentName {
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.65);
+        line-height: 22px;
+      }
+      .studentExcellent {
+        width: 64px;
+        height: 24px;
+        border-radius: 2px;
+        border: 1px solid #ffb64e;
+        background-color: rgba(255, 182, 78, 0.1);
+        margin-left: 24px;
+        display: flex;
+        align-items: center;
+        .studentExcellentImg {
+          width: 13px;
+          height: 14px;
+          margin-left: 8px;
+        }
+        .studentExcellentT {
+          font-size: 12px;
+          font-weight: 400;
+          color: #ffb64e;
+          line-height: 17px;
+          margin-left: 5px;
+        }
+      }
+
+      .studentopea1 {
+        font-size: 14px;
+        font-weight: 400;
+        color: #387df7;
+        line-height: 22px;
+        padding-right: 8px;
+        border-right: 1px solid #e9e9e9;
+        cursor: pointer;
+      }
+      .studentopea2 {
+        font-size: 14px;
+        font-weight: 400;
+        color: #387df7;
+        line-height: 22px;
+        padding-right: 8px;
+        padding-left: 8px;
+        border-right: 1px solid #e9e9e9;
+        cursor: pointer;
+      }
+      .studentSelect {
+        margin-left: 8px;
+        display: inline-block;
+
+        .ant-select:not(.ant-select-customize-input)
+          .ant-select-selector
+          .ant-select-selection-search-input {
+          background-color: rgba(255, 255, 255, 0);
+          border: none;
+        }
+
+        .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+          background-color: rgba(255, 255, 255, 0);
+          border: none;
+        }
+
+        .ant-select-single:not(.ant-select-customize-input)
+          .ant-select-selector {
+          padding: 0;
+        }
+
+        .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
+          .ant-select-selector {
+          box-shadow: none;
+        }
+
+        .ant-select-arrow {
+          right: 0px;
+          color: rgba(56, 125, 247, 1);
+          font-size: 14px;
+          line-height: 36px;
+          // top: 17px;
+          top: 15px;
+        }
+
+        .ant-select-selection-item {
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(56, 125, 247, 1);
+          line-height: 33px;
+        }
+
+        .ant-select-single.ant-select-open .ant-select-selection-item {
+          color: rgba(56, 125, 247, 1);
+        }
+      }
     }
     .groupmain {
       display: flex;
@@ -3706,7 +3884,7 @@ export default {
 .set_edit {
   .ant-modal {
     width: 866px !important;
-      height: 870px !important;
+    height: 870px !important;
     .ant-modal-body {
       .modalHeader {
         background: linear-gradient(