feat:合并

src/views/projectcenter/TaskPage.vue

@@ -225,136 +225,186 @@
             <a-collapse v-model:activeKey="taskSyllabusActive" accordion>
               <template #expandIcon="{ isActive }">
                 <img
-                  :style="{
+                  class="editimg"
-                    width: isActive ? 9.1 : 8.1,
+                  src="../../assets/images/projectadd/edit.png"
-                    height: isActive ? 8.1 : 9.1,
-                    'margin-right': isActive ? '12px' : '13px',
-                  }"
-                  :src="
-                    isActive
-                      ? require('../../assets/images/projectadd/open.png')
-                      : require('../../assets/images/projectadd/close.png')
-                  "
                 />
-                <div></div>
+                <span class="editext">编辑</span>
-              </template>
+              </router-link>
-              <a-collapse-panel
+            </div>
-                v-for="(value, index) in taskSyllabus"
+            <div class="taskSyllabus">
-                :key="index"
+              <a-collapse v-model:activeKey="taskSyllabusActive" accordion>
-                :header="value.text"
+                <template #expandIcon="{ isActive }">
-              >
+                  <img
-                <div
+                    :style="{
-                  class="course"
+                      width: isActive ? 9.1 : 8.1,
-                  v-for="(item, key) in value.children"
+                      height: isActive ? 8.1 : 9.1,
-                  :key="key"
+                      'margin-right': isActive ? '12px' : '13px',
+                    }"
+                    :src="
+                      isActive
+                        ? require('../../assets/images/projectadd/open.png')
+                        : require('../../assets/images/projectadd/close.png')
+                    "
+                  />
+                  <div></div>
+                </template>
+                <a-collapse-panel
+                  v-for="(value, index) in taskSyllabus"
+                  :key="index"
+                  :header="value.text"
                 >
-                  <div class="first">
+                  <div
-                    <div class="icon">
+                    class="course"
-                      <img src="../../assets/images/leveladd/zai.png" />
+                    v-for="(item, key) in value.children"
+                    :key="key"
+                  >
+                    <!-- :style="{width:item.course==='在线'?'28px':
+												height:item.course==='在线'?'27px':}" -->
+                    <div class="first">
+                      <div class="icon">
+                        <div
+                          style="
+                            width: 31px;
+                            height: 28px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                          "
+                        >
+                          <img
+                            :src="
+                              item.course === '在线'
+                                ? require('../../assets/images/leveladd/zai.png')
+                                : item.course === '面授'
+                                ? require('../../assets/images/leveladd/mian.png')
+                                : item.course === '案例'
+                                ? require('../../assets/images/leveladd/an.png')
+                                : item.course === '作业'
+                                ? require('../../assets/images/leveladd/zuo.png')
+                                : item.course === '考试'
+                                ? require('../../assets/images/leveladd/kao.png')
+                                : item.course === '直播'
+                                ? require('../../assets/images/leveladd/zhi.png')
+                                : item.course === '外链'
+                                ? require('../../assets/images/leveladd/wai.png')
+                                : item.course === '讨论'
+                                ? require('../../assets/images/leveladd/tao.png')
+                                : item.course === '活动'
+                                ? require('../../assets/images/leveladd/huo.png')
+                                : item.course === '测评'
+                                ? require('../../assets/images/leveladd/ce.png')
+                                : item.course === '调研'
+                                ? require('../../assets/images/leveladd/diao.png')
+                                : item.course === '投票'
+                                ? require('../../assets/images/leveladd/tou.png')
+                                : null
+                            "
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <div class="iconame">「{{ item.course }}」</div>
+                        <div class="icontext">{{ item.name }}</div>
+                      </div>
                     </div>
-                    <div>
+                    <div class="type">
-                      <div class="iconame">「{{ item.course }}」</div>
+                      <div
-                      <div class="icontext">{{ item.name }}</div>
+                        :class="
-                    </div>
+                          item.classify == '必修' ? 'typename1' : 'typename'
-                  </div>
+                        "
-                  <div class="type">
-                    <div
-                      :class="
-                        item.classify == '必修' ? 'typename1' : 'typename'
-                      "
-                    >
-                      {{ item.classify }}
-                    </div>
-                  </div>
-                  <div class="time">
-                    <div class="timetext">开始时间</div>
-                    <div class="timetext">{{ item.beginTime }}</div>
-                  </div>
-                  <div class="progress">
-                    <div class="progresstext">
-                      {{ item.complete }}/{{ item.total }}人
-                    </div>
-                    <div style="display: flex">
-                      <a-progress
-                        :showInfo="false"
-                        :percent="item.percent"
-                        strokeColor="#FFC067"
-                        trailColor="rgba(253, 209, 98, 0.2)"
-                      />
-                      <span class="progresstext" style="margin-left: 10px"
-                        >{{ item.percent }}%</span
                       >
+                        {{ item.classify }}
+                      </div>
                     </div>
-                  </div>
+                    <div class="time">
-                  <div class="operations">
+                      <div class="timetext">开始时间</div>
-                    <div
+                      <div class="timetext">{{ item.beginTime }}</div>
-                      class="operation"
-                      style="cursor: pointer"
-                      :style="{
-                        display: item.course === '面授' ? 'flex' : 'none',
-                      }"
-                      @click="showFS"
-                    >
-                      学员
                     </div>
-                    <div
+                    <div class="progress">
-                      class="operation"
+                      <div class="progresstext">
-                      style="cursor: pointer"
+                        {{ item.complete }}/{{ item.total }}人
-                      @click="showAA"
+                      </div>
-                      :style="{
+                      <div style="display: flex">
-                        display:
+                        <a-progress
-                          item.course === '直播' || item.course === '活动'
+                          :showInfo="false"
-                            ? 'flex'
+                          :percent="item.percent"
-                            : 'none',
+                          strokeColor="#FFC067"
-                      }"
+                          trailColor="rgba(253, 209, 98, 0.2)"
-                    >
+                        />
-                      考勤
+                        <span class="progresstext" style="margin-left: 10px"
+                          >{{ item.percent }}%</span
+                        >
+                      </div>
                     </div>
-                    <div
+                    <div class="operations">
-                      class="operation"
+                      <div
-                      style="cursor: pointer"
+                        class="operation"
-                      :style="{
+                        style="cursor: pointer"
-                        display:
+                        :style="{
+                          display: item.course === '面授' ? 'flex' : 'none',
+                        }"
+                        @click="showFS"
+                      >
+                        学员
+                      </div>
+                      <div
+                        class="operation"
+                        style="cursor: pointer"
+                        @click="showAA"
+                        :style="{
+                          display:
+                            item.course === '直播' || item.course === '活动'
+                              ? 'flex'
+                              : 'none',
+                        }"
+                      >
+                        考勤
+                      </div>
+                      <div
+                        class="operation"
+                        style="cursor: pointer"
+                        :style="{
+                          display:
+                            item.course === '直播' ||
+                            item.course === '活动' ||
+                            item.course === '面授'
+                              ? 'flex'
+                              : 'none',
+                        }"
+                      >
+                        二维码
+                      </div>
+                      <div
+                        class="operation"
+                        style="cursor: pointer; margin-right: 35px"
+                        @click="
+                          item.course === '在线' ||
+                          item.course === '案例' ||
+                          item.course === '外链' ||
+                          item.course === '讨论' ||
                           item.course === '直播' ||
-                          item.course === '活动' ||
+                          item.course === '调研' ||
-                          item.course === '面授'
+                          item.course === '投票' ||
-                            ? 'flex'
+                          item.course === '活动'
-                            : 'none',
+                            ? showTime(item.course, item.name)
-                      }"
+                            : item.course === '考试' || item.course === '测评'
-                    >
+                            ? showTest(item.course, item.name)
-                      二维码
+                            : item.course === '面授'
-                    </div>
+                            ? showFace(item.course)
-                    <div
+                            : item.course === '作业'
-                      class="operation"
+                            ? showWork(item.course)
-                      style="cursor: pointer; margin-right: 35px"
+                            : null
-                      @click="
+                        "
-                        item.course === '在线' ||
+                      >
-                        item.course === '案例' ||
+                        管理
-                        item.course === '外链' ||
+                      </div>
-                        item.course === '讨论' ||
-                        item.course === '直播' ||
-                        item.course === '调研' ||
-                        item.course === '投票' ||
-                        item.course === '活动'
-                          ? showTime(item.course, item.name)
-                          : item.course === '考试' || item.course === '测评'
-                          ? showTest(item.course, item.name)
-                          : item.course === '面授'
-                          ? showFace(item.course)
-                          : item.course === '作业'
-                          ? showWork(item.course)
-                          : null
-                      "
-                    >
-                      管理
                     </div>
                   </div>
-                </div>
+                </a-collapse-panel>
-              </a-collapse-panel>
+              </a-collapse>
-            </a-collapse>
+            </div>
+            <div style="display: flex; height: 20px"></div>
           </div>
-
-          <div style="display: flex; height: 20px"></div>
         </a-tab-pane>
         <a-tab-pane key="3" tab="学员">
           <div class="split"></div>
@@ -864,9 +914,9 @@
              -->
             <div class="line"></div>
             <div class="set_body">
-              <div class="edit">
+              <div class="edit" @click="edit_hShow">
                 <div class="img"></div>
-                <div class="ed">编辑</div>
+                <div class="ed">编辑11</div>
               </div>
               <div class="set_content">
                 <div class="setc_name"><span>项目名称：</span></div>
@@ -1148,6 +1198,245 @@
       </a-modal>
     </div>
     <!-- 取消学员弹窗 -->
+    <!-- 编辑弹窗 -->
+    <div>
+      <a-modal
+        v-model:visible="edit_hs"
+        :title="null"
+        @ok="closeModal"
+        :footer="null"
+        :closable="false"
+        wrapClassName="set_edit"
+        width="679px"
+        @cancel="edit_exit"
+      >
+        <div
+          class="modalHeader"
+          style="
+            width: 100%;
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <div class="headerLeft" style="margin-left: 32px">
+            <span style="width: 15px; height: 15px"
+              ><img src="../../assets/images/taskpage/edit.png"
+            /></span>
+            <span
+              class="headerLeftText"
+              style="font-size: 16px; margin-left: 10px"
+              >编辑</span
+            >
+          </div>
+          <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close.png"
+            />
+          </div>
+        </div>
+        <div class="modalMain">
+          <div class="projectname">基本信息</div>
+          <div class="setbody">
+            <div class="main_item">
+              <div class="signbox">
+                <div class="sign">
+                  <img
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
+                  />
+                </div>
+                <span style="margin-right: 3px">项目名称：</span>
+              </div>
+              <div class="btnbox">
+                <a-input
+                  v-model:value="inputV1"
+                  style="width: 424px; height: 32px"
+                  placeholder="请输入项目名称"
+                  maxlength="20"
+                />
+              </div>
+            </div>
+            <div class="main_item2">
+              <div class="signbox">
+                <span style="margin-right: 3px">直播封面：</span>
+              </div>
+              <div class="textarea">
+                <a-upload
+                  v-model:file-list="fileList"
+                  name="avatar"
+                  list-type="picture-card"
+                  class="avatar-uploader"
+                  :show-upload-list="false"
+                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                  :before-upload="beforeUpload"
+                  @change="handleChange"
+                >
+                  <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
+                  <div v-else>
+                    <loading-outlined v-if="loading"></loading-outlined>
+                    <plus-outlined v-else></plus-outlined>
+                    <div class="ant-upload-text">Upload</div>
+                  </div>
+                </a-upload>
+              </div>
+            </div>
+            <div class="main_item">
+              <div class="signbox">
+                <div class="sign">
+                  <img
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
+                  />
+                </div>
+                <span style="margin-right: 3px">项目时间：</span>
+              </div>
+              <div class="btnbox">
+                <a-range-picker
+                  style="width: 424px"
+                  :placeholder="['      开始时间', '        结束时间']"
+                />
+              </div>
+            </div>
+            <div class="main_item">
+              <div class="signbox">
+                <div class="sign">
+                  <img
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
+                  />
+                </div>
+                <span style="margin-right: 3px">项目经理：</span>
+              </div>
+              <div class="btnbox">
+                <a-select
+                  dropdownClassName="dropdown-style"
+                  style="width: 424px"
+                  placeholder="请选择项目经理"
+                  :options="options1"
+                  allowClear
+                  showSearch
+                />
+              </div>
+            </div>
+            <div class="main_item">
+              <div class="signbox">
+                <div class="sign">
+                  <img
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
+                  />
+                </div>
+                <span style="margin-right: 3px">资源归属：</span>
+              </div>
+              <div class="btnbox">
+                <a-input
+                  v-model:value="inputV1"
+                  style="width: 424px; height: 32px"
+                  placeholder="自动带出 可修改"
+                  maxlength="20"
+                />
+              </div>
+            </div>
+            <div class="main_item2">
+              <div class="signbox">
+                <span style="margin-right: 3px">项目说明：</span>
+              </div>
+              <div class="textarea">
+                <a-textarea
+                  v-model:value="textV1"
+                  placeholder="请输入说明"
+                  allow-clear
+                  maxlength="150"
+                />
+              </div>
+            </div>
+            <div class="main_item">
+              <div class="signbox">
+                <span style="margin-right: 3px">同步学习记录：</span>
+              </div>
+              <div class="btnbox">
+                <a-radio-group v-model:value="radioV1">
+                  <a-radio
+                    v-model:checked="checked"
+                    :value="1"
+                    @click="cloradio1"
+                    >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自由免修改课程）</a-radio
+                  >
+                </a-radio-group>
+              </div>
+            </div>
+            <div class="main_item">
+              <div class="signbox">
+                <div class="sign">
+                  <img
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
+                  />
+                </div>
+                <span style="margin-right: 3px">项目级别：</span>
+              </div>
+              <div class="btnbox">
+                <a-input
+                  v-model:value="inputV1"
+                  style="width: 424px; height: 32px"
+                  placeholder="集团级/组织级/现地级/部门级"
+                  maxlength="20"
+                />
+              </div>
+            </div>
+            <div class="main_item">
+              <div class="signbox">
+                <div class="sign">
+                  <img
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
+                  />
+                </div>
+                <span style="margin-right: 3px">培训体系：</span>
+              </div>
+              <div class="btnbox">
+                <a-input
+                  v-model:value="inputV1"
+                  style="width: 424px; height: 32px"
+                  placeholder="集团级/组织级/现地级/部门级"
+                  maxlength="20"
+                />
+              </div>
+            </div>
+            <div class="main_item">
+              <div class="signbox">
+                <div class="sign">
+                  <img
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
+                  />
+                </div>
+                <span style="margin-right: 3px">是否BOEU实施：</span>
+              </div>
+              <div class="btnbox">
+                <a-radio-group v-model:value="radioV2">
+                  <a-radio
+                    v-model:checked="checked"
+                    :value="1"
+                    @click="cloradio2"
+                    >BOEU实施</a-radio
+                  >
+                </a-radio-group>
+              </div>
+            </div>
+          </div>
+
+          <div class="pubtn">
+            <a-button class="pubtn1" @click="closeModal">取消</a-button>
+            <a-button class="pubtn2" @click="closeModal">发布</a-button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+    <!-- 编辑弹窗 -->
   </div>
 </template>
 <script>
@@ -1351,6 +1640,7 @@ export default {
       Importvisible: false, //导入学员
       Seevisible: false, //查看学员
       Changevisible: false, //学员换组
+      edit_hs: false, //编辑弹窗
       pubproject: false,
       stugroup: false,
       canclestu: false,
@@ -1359,6 +1649,8 @@ export default {
       checked2: false,
       checkedd: false, //设置按钮1
       checkedd2: false, //设置按钮2
+      radioV1: "",
+      radioV2: "",
       activeKey: "2",
       activeKey1: "8",
       valueName: "", //排行榜输入姓名
@@ -1894,6 +2186,22 @@ export default {
     const changecheck3 = () => {
       state.checkedd2 = !state.checkedd2;
     };
+    const edit_hShow = () => {
+      state.edit_hs = true;
+    };
+    const edit_exit = () => {
+      state.edit_hs = false;
+    };
+    const cloradio1 = (value) => {
+      if (value != "") {
+        state.radioV1 = "";
+      }
+    };
+    const cloradio2 = (value) => {
+      if (value != "") {
+        state.radioV2 = "";
+      }
+    };
     return {
       ...toRefs(state),
       showModal,
@@ -1917,6 +2225,10 @@ export default {
       showSeeStu,
       showChangeGroup,
       showFaceIn,
+      edit_hShow,
+      edit_exit,
+      cloradio1,
+      cloradio2,
     };
   },
 };
@@ -2470,7 +2782,6 @@ export default {
     background-color: #edf0f5;
   }
   .content {
-    //display: flex;
     //margin: 0 37px;
     .ant-tabs-top > .ant-tabs-nav::before,
     .ant-tabs-bottom > .ant-tabs-nav::before,
@@ -2704,10 +3015,15 @@ export default {
       }
     }
     .taskSyllabus {
+      // flex: 1;
+      overflow-x: scroll;
+
       .ant-collapse {
         border: 0px;
         background-color: rgba(255, 255, 255, 0);
+        min-width: 1040px;
       }
+
       .ant-collapse-content > .ant-collapse-content-box {
         padding-top: 0px;
         padding-bottom: 0px;
@@ -2755,12 +3071,15 @@ export default {
     }
     .course {
       //width: 100%;
+      flex-shrink: 0;
+      margin-right: 24px;
+
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       padding: 25px 0px;
       margin-left: 22px;
-      margin-right: 24px;
+
       //margin: 0 12px;
       border: 1px solid #f2f6fc;
       border-top: 0px;
@@ -2777,12 +3096,13 @@ export default {
           //position: absolute;
           color: #4f5156;
           font-size: 16px;
+          margin-left: 4px;
         }
         .icontext {
           //positipn: absolute;
           color: #999ba3;
           font-size: 14px;
-          margin-left: 8px;
+          margin-left: 12px;
           width: 83px;
         }
       }
@@ -3401,4 +3721,171 @@ export default {
     }
   }
 }
+.set_edit {
+  .ant-modal {
+    width: 866px !important;
+    height: 870px !important;
+    .ant-modal-body {
+      .modalHeader {
+        background: linear-gradient(
+          rgba(78, 166, 255, 0.2) 0%,
+          rgba(78, 166, 255, 0) 100%
+        );
+      }
+
+      padding: 0;
+
+      .modalHeader {
+        background: linear-gradient(
+          0deg,
+          rgba(78, 166, 255, 0) 0%,
+          rgba(78, 166, 255, 0.2) 100%
+        );
+      }
+
+      .modalMain {
+        .projectname {
+          color: rgba(79, 81, 86, 1);
+          font-size: 14px;
+          line-height: 36px;
+          margin-left: 62px;
+          font-weight: 500;
+          margin-bottom: 24px;
+        }
+        .setbody {
+          margin-left: 67px;
+          .main_item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 32px;
+            .signbox {
+              width: 130px;
+              display: flex;
+              justify-content: end;
+              align-items: center;
+              white-space: nowrap;
+              .sign {
+                margin-right: 5px;
+              }
+            }
+            .btnbox {
+              display: flex;
+              flex: 1;
+              align-items: center;
+              .xkbtn {
+                cursor: pointer;
+                width: 130px;
+                height: 40px;
+                background: #388be1;
+                border-radius: 8px;
+                border: 0;
+                margin-right: 8px;
+                color: #fff;
+              }
+            }
+          }
+          .main_item2 {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 32px;
+            .signbox {
+              width: 130px;
+              display: flex;
+              justify-content: end;
+              align-items: center;
+              white-space: nowrap;
+              .sign {
+                margin-right: 5px;
+              }
+            }
+            .kqszbox {
+              .qdqtbox {
+                margin-left: 5px;
+                cursor: pointer;
+              }
+              .qdbtn,
+              .qtbtn {
+                width: 75px;
+                height: 24px;
+                background: rgba(56, 139, 225, 0.16);
+                border-radius: 2px;
+                border: 1px solid #387df7;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                .btntext {
+                  color: #387df7;
+                }
+              }
+              .setbox {
+                display: flex;
+                flex-wrap: wrap;
+                margin-top: 10px;
+                margin-bottom: 24px;
+                .timerbox {
+                  margin-top: 6px;
+                  margin-right: 32px;
+                  display: flex;
+                  align-items: center;
+                  flex-wrap: nowrap;
+                }
+              }
+            }
+            .btnbox2 {
+              display: flex;
+              flex-direction: column;
+              justify-content: flex-start;
+              .xkbtn {
+                cursor: pointer;
+                width: 130px;
+                height: 40px;
+                background: #388be1;
+                border-radius: 8px;
+                border: 0;
+                margin-right: 16px 8px 32px 0;
+                color: #fff;
+                margin-top: 16px;
+                margin-bottom: 60px;
+              }
+            }
+          }
+        }
+
+        .pubtn {
+          display: flex;
+          justify-content: center;
+          margin-top: 25px;
+
+          //margin-bottom: 29px;
+          .pubtn1 {
+            width: 100px;
+            height: 40px;
+            margin-right: 16px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: rgba(78, 166, 255, 1);
+            font-size: 14px;
+            //line-height: 36px;
+            align-items: center;
+            background: rgba(255, 255, 255, 1);
+          }
+
+          .pubtn2 {
+            width: 100px;
+            height: 40px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 14px;
+            align-items: center;
+            //line-height: 36px;
+            background: #409eff;
+          }
+        }
+      }
+    }
+  }
+}
 </style>