From 7751f742e26d6c02f6c3bced8f57f7e221cce916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B2=B3=E4=BD=B3=E9=91=AB?= <yuejx@dongwu-inc.com>
Date: Thu, 13 Oct 2022 18:35:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=88=9B=E5=BB=BA=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/projectcenter/TaskAdd.vue | 195 ++++++++++++++++++++++++++--
 1 file changed, 186 insertions(+), 9 deletions(-)

diff --git a/src/views/projectcenter/TaskAdd.vue b/src/views/projectcenter/TaskAdd.vue
index dcda5100..3cc8c737 100644
--- a/src/views/projectcenter/TaskAdd.vue
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -3,7 +3,7 @@
     <div class="left clearfix">
       <div class="leftmain">
         <div class="tit">阶段<img src="../../assets/images/projectadd/right.png" style="margin-left: 10px"/></div>
-        <div class="btn btn3" style="margin-left: 19px">
+        <div class="btn btn3" @click="showModal" style="margin-left: 19px">
           <div class="search"></div>
           <div class="btnText">添加阶段</div>
         </div>
@@ -259,6 +259,60 @@
         </a-drawer>
       </div>
     </div>
+    <div>
+      <a-modal
+        v-model:visible="stage"
+        :title="null"
+        @ok="closeModal"
+        :footer="null"
+        :closable="false"
+        wrapClassName="addstage"
+        width="624px"
+        height="388px"
+      >
+        <div class="modalHeader" 
+             style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+          >
+          <div class="headerLeft" style="margin-left: 32px">
+            <span class="headerLeftText" style="font-size: 16px">添加阶段</span>
+          </div>
+          <div style="cursor: pointer;margin-right:32px" @click="closeModal">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close22.png"
+            />
+          </div>
+        </div>
+        <div class="modalMain"
+          style="width: 100%;"
+          >
+          <div class="name">
+              <div class="namebox">
+                <div class="inname">阶段名称：</div>
+              </div>
+              <div class="in">
+                <a-input v-model:value="valueE" show-count :maxlength="20" placeholder="请输入阶段名称" />
+              </div>
+          </div>
+          <div class="name" style="display: flex; align-items: flex-start">
+              <div class="namebox">
+                <div class="inname">阶段说明：</div>
+              </div>
+              <div class="in">
+                <a-textarea  v-model:value="value" style="height: 88px" show-count :maxlength="100"  placeholder="请输入阶段说明" />
+              </div>
+          </div>
+          <div style="display: flex;width: 100%;justify-content: center;margin-top: 40px">
+            <button @click="closeModal"
+              style=" cursor: pointer;height: 40px;width: 100px;border: 1px solid #387DF7;border-radius: 4px;color: #387DF7;background-color: #FFFFFF"
+            >取消</button>
+            <button @click="closeModal"
+              style=" cursor: pointer;margin-left: 16px;margin-bottom: 40px;height: 40px;width: 100px;border: 1px solid #388BE1;border-radius: 4px;color: #FFFFFF;background-color: #388BE1"
+            >确定</button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
   </div>
 </template>
 
@@ -556,6 +610,7 @@ export default {
       tableDataTotal: 100,
       pageSize: 10,
       visible: false,
+      stage: false,
       selectedRowKeys: [],
     });
     const selectProjectName = (value, index) => {
@@ -698,7 +753,12 @@ export default {
     //     40 +
     //     "px";
     // };
-
+    const showModal = () => {
+      state.stage = true;
+    };
+    const closeModal = () => {
+      state.stage = false;
+    };
     onMounted(() => {
       document.getElementsByTagName("main")[0].style.background =
         "rgb(245, 247, 250,1)";
@@ -714,6 +774,8 @@ export default {
       selectProjectName,
       selectProjectName2,
       tableDataFunc,
+      showModal,
+      closeModal,
       showDrawer,
       afterVisibleChange,
       drawercolumns,
@@ -724,13 +786,128 @@ export default {
 </script>
 
 <style lang="scss">
-.clearfix:after,
-.clearfix:before {
-  content: " ";
-  display: block;
-  clear: both;
-}
 
+.ant-input {
+            border-radius: 8px;
+            // height: 120%;
+            width: 384px;
+            height: 40px;
+}
+.addstage {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0 !important;  
+      .modalMain {
+        
+            .ant-input-textarea-show-count {
+              position: relative;
+              height: 88px;
+            }
+            .ant-input-textarea-show-count::after {
+              position: absolute;
+              right: 10px;
+              bottom: 10px;
+            }        
+       }
+      }
+  }
+}
+.info {
+      width: 78%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 30px;
+      // align-items: center;
+      // height: 40px;
+      // border: 1px solid black;
+
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 26px;
+        margin-top: 15px;
+      }
+      .in {
+        margin-left: 14px;
+        width: 81%;
+        position: relative;
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 130px;
+          resize: none;
+        }
+      }
+    }
+.name {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 20px;
+        align-items: center;
+        //height: 40px;
+        // border: 1px solid black;
+        .namebox {
+          width: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          flex-shrink: 0;
+          .nameimg {
+            width: 10px;
+            height: 10px;
+          }
+        }
+        .d {
+          margin-top: 8px;
+          font-size: 25px;
+          color: #ff4e4e;
+        }
+        .box {
+          position: relative;
+          margin-left: 14px;
+          .box1 {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 50px;
+            margin-left: -25px;
+            margin-top: -5px;
+            border-top: 2px solid rgba(78, 166, 255, 1);
+          }
+          .box2 {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            height: 50px;
+            //margin-left: -5px;
+            margin-top: -25px;
+            border-left: 2px solid rgba(78, 166, 255, 1);
+          }
+        }
+        .inname {
+          color: #000000;
+          font-size: 14px;
+          margin-left: 7px;
+        }
+        .in {
+          margin-left: 14px;
+          flex: 1;
+          .ant-radio-wrapper {
+          }
+          .ant-input-affix-wrapper {
+            width: 384px;
+            border-radius: 8px;
+          }
+          .ant-input {
+            border-radius: 8px;
+            // height: 120%;
+            //width: 384px;
+            height: 30px;
+          }
+        }
+      }
 .drawerStyle {
   .ant-drawer-content-wrapper {
     // max-width: 1000px;
@@ -1320,4 +1497,4 @@ export default {
     }
   }
 }
-</style>
+</style>
\ No newline at end of file