From 383c746a9133756e3a919e6423a9a9b641c551eb Mon Sep 17 00:00:00 2001
From: deng <1559799626@qq.com>
Date: Fri, 21 Jul 2023 10:58:42 +0800
Subject: [PATCH] dyl

---
 .../newLayout/myTask/list/assignment.vue      | 1458 ++++++++++-------
 1 file changed, 874 insertions(+), 584 deletions(-)

diff --git a/ant-design-vue-jeecg/src/views/newLayout/myTask/list/assignment.vue b/ant-design-vue-jeecg/src/views/newLayout/myTask/list/assignment.vue
index 7cbc838..6f8f5b1 100644
--- a/ant-design-vue-jeecg/src/views/newLayout/myTask/list/assignment.vue
+++ b/ant-design-vue-jeecg/src/views/newLayout/myTask/list/assignment.vue
@@ -31,7 +31,7 @@
             <span>{{ assignmnetData.total }}</span>
           </div>
           <div class="right">
-            <i class="el-icon-plus"></i>
+            <i class="el-icon-plus" @click="toAdd()"></i>
             <i class="el-icon-more"></i>
           </div>
         </div>
@@ -40,100 +40,144 @@
           @scroll.passive="assignmnetScroll"
           ref="assignmnetcards"
         >
-          <el-checkbox
-            border
-            v-for="(item, index) in assignmnetData.cardList"
-            :key="index"
+          <Container
+            drag-class="card-ghost"
+            drop-class="card-ghost-drop"
+            :drop-placeholder="dropPlaceholderOptions"
+            group-name="col"
+            @drop="(e) => onAssignmnetCardDrop(e)"
+            :get-child-payload="getAssignmnetCardPayload()"
+            class="draggable-container"
           >
-            <div class="project_name">
-              <div class="name" :title="item.taskName">
-                {{ item.taskName }}
-              </div>
-              <div class="avatar" @click="openDrawer(item)">
-                <el-avatar :src="item.headpic"></el-avatar>
-              </div>
-            </div>
-
-            <div class="content">
-              <div class="writing" v-if="item.contentType === 'text'">
-                {{ item.taskDescribe }}
-                <div class="time">
-                  项目工期 {{ item.startTime }}——{{ item.expectedEndTime }}
-                </div>
-              </div>
-              <div class="word" v-if="item.contentType === 'file'">
-                <div class="word_img">
-                  <img
-                    src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-                    alt="图片占位"
-                    width="100%"
-                    height="100%"
-                  />
+            <Draggable
+              v-for="(item, index) in assignmnetData.cardList"
+              :key="index"
+            >
+              <div class="task_card">
+                <div class="project_name">
+                  <div class="name" :title="item.taskName">
+                    {{ item.taskName }}
+                  </div>
+                  <el-dropdown>
+                    <span class="el-dropdown-link">
+                      <i class="el-icon-more"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item @click.native="Tofengjie(item)"
+                        >分解任务</el-dropdown-item
+                      >
+                      <el-dropdown-item>关联任务</el-dropdown-item>
+                      <el-dropdown-item>子级任务</el-dropdown-item>
+                      <el-dropdown-item @click.native="toEdit(item)"
+                        >编辑任务</el-dropdown-item
+                      >
+                      <el-dropdown-item @click.native="delCardData(item)"
+                        >删除任务</el-dropdown-item
+                      >
+                    </el-dropdown-menu>
+                  </el-dropdown>
                 </div>
-                <div class="operate">
-                  <span>点击查看</span>
-                  <el-upload
-                    class="upload-demo"
-                    action="https://jsonplaceholder.typicode.com/posts/"
-                    :on-preview="handlePreview"
-                    :on-remove="handleRemove"
-                    :before-remove="beforeRemove"
-                    multiple
-                    :limit="3"
-                    :on-exceed="handleExceed"
-                    :file-list="fileList"
+                <div class="level">任务层级：{{ item.level_dictText }}</div>
+                <div class="union">{{ item.union }}</div>
+                <div class="content">
+                  <div class="writing" v-if="item.contentType === 'text'">
+                    {{ item.taskDescribe }}
+                  </div>
+                  <div class="word" v-if="item.contentType === 'file'">
+                    <div class="word_img">
+                      <img
+                        src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+                        alt="图片占位"
+                        width="100%"
+                        height="100%"
+                      />
+                    </div>
+                    <div class="operate">
+                      <span>点击查看</span>
+                      <el-upload
+                        class="upload-demo"
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        :on-preview="handlePreview"
+                        :on-remove="handleRemove"
+                        :before-remove="beforeRemove"
+                        multiple
+                        :limit="3"
+                        :on-exceed="handleExceed"
+                        :file-list="fileList"
+                      >
+                        <el-button size="small" type="primary"
+                          >点击上传</el-button
+                        >
+                      </el-upload>
+                    </div>
+                  </div>
+                  <div class="concept_map" v-if="item.contentType === 'image'">
+                    <div class="concept_map_img">
+                      <img
+                        :src="item.taskPic"
+                        alt="占位图片"
+                        width="100%"
+                        height="100%"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="null"
+                    v-if="
+                      item.contentType !== 'text' &&
+                      item.contentType !== 'file' &&
+                      item.contentType !== 'image'
+                    "
                   >
-                    <el-button size="small" type="primary">点击上传</el-button>
-                  </el-upload>
+                    <el-image></el-image>
+                  </div>
                 </div>
-              </div>
-              <div class="concept_map" v-if="item.contentType === 'image'">
-                <div class="concept_map_img">
-                  <img
-                    src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-                    alt="占位图片"
-                    width="100%"
-                    height="100%"
-                  />
+                <!-- <div class="progess">
+                  <span>项目进度</span>
+                  <el-progress
+                    stroke-width="4"
+                    :show-text="false"
+                    :percentage="item.progress"
+                    style="width: 72%"
+                  ></el-progress>
+                </div> -->
+                <div class="date">
+                  <div class="cycle">
+                    <label>任务周期：</label>
+                    <span> {{ item.startTime }}</span> -
+                    <span>{{ item.expectedEndTime }}</span>
+                  </div>
+                  <div class="publish">
+                    <label>发布提交：</label>
+                    <span>{{ item.publishTime }}</span> -
+                    <span>{{
+                      `${
+                        item.submitTime !== '1970-01-01'
+                          ? item.submitTime
+                          : '待提交'
+                      }`
+                    }}</span>
+                  </div>
+                  <div class="expected_duration">
+                    <label>预计时长：</label
+                    ><span> {{ item.expectedDuration }}</span>
+                  </div>
+                  <div class="real_duration">
+                    <label> 实际时长：</label
+                    ><span>{{
+                      `${item.realDuration ? item.realDuration : '未完成'}`
+                    }}</span>
+                  </div>
+                </div>
+                <div class="tag">
+                  <el-tag type="warning">一级分类</el-tag>
+                  <el-tag type="success">二级分类</el-tag>
+                  <el-tag>任务等级</el-tag>
                 </div>
               </div>
-              <div
-                class="null"
-                v-if="
-                  item.contentType !== 'text' &&
-                  item.contentType !== 'file' &&
-                  item.contentType !== 'image'
-                "
-              >
-                <el-image></el-image>
-              </div>
-            </div>
-            <div class="progess">
-              <span>项目进度</span>
-              <el-progress
-                stroke-width="4"
-                :show-text="false"
-                :percentage="item.progress"
-                style="width: 72%"
-              ></el-progress>
-            </div>
-            <div class="functions">
-              <el-button
-                type="primary"
-                round
-                size="mini"
-                style="width: 25%; height: 20px; line-height: 5px; padding: 0"
-              ></el-button>
-              <el-button
-                type="success"
-                round
-                size="mini"
-                style="width: 25%; height: 20px; line-height: 5px; padding: 0"
-              ></el-button>
-              <span>编辑</span>
-            </div>
-          </el-checkbox>
-          <div v-if="assignmnetData.cardList === []">
+            </Draggable>
+          </Container>
+          <div v-if="assignmnetData.cardList.length === 0">
             <el-empty :image-size="200"></el-empty>
           </div>
         </div>
@@ -154,99 +198,128 @@
           @scroll.passive="developedScroll"
           ref="developedcards"
         >
-          <el-checkbox
-            border
-            v-for="(item, index) in developedData.cardList"
-            :key="index"
+          <Container
+            drag-class="card-ghost"
+            drop-class="card-ghost-drop"
+            :drop-placeholder="dropPlaceholderOptions"
+            group-name="col"
+            @drop="(e) => onDevelopedCardDrop(e)"
+            :get-child-payload="getDevelopedCardPayload()"
+            class="draggable-container"
           >
-            <div class="project_name">
-              <div class="name" :title="item.taskName">
-                {{ item.taskName }}
-              </div>
-              <div class="avatar" @click="openDrawer(item)">
-                <el-avatar :src="item.headpic"></el-avatar>
-              </div>
-            </div>
-
-            <div class="content">
-              <div class="writing" v-if="item.contentType === 'text'">
-                {{ item.taskDescribe }}
-                <div class="time">
-                  项目工期{{ item.startTime }}——{{ item.expectedEndTime }}
-                </div>
-              </div>
-              <div class="word" v-if="item.contentType === 'file'">
-                <div class="word_img">
-                  <img
-                    src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-                    alt="图片占位"
-                    width="100%"
-                    height="100%"
-                  />
+            <Draggable
+              v-for="(item, index) in developedData.cardList"
+              :key="index"
+            >
+              <div class="task_card">
+                <div class="project_name">
+                  <div class="name" :title="item.taskName">
+                    {{ item.taskName }}
+                  </div>
+                  <div class="functions">
+                    <i class="el-icon-more"></i>
+                  </div>
                 </div>
-                <div class="operate">
-                  <span>点击查看</span>
-                  <el-upload
-                    class="upload-demo"
-                    action="https://jsonplaceholder.typicode.com/posts/"
-                    :on-preview="handlePreview"
-                    :on-remove="handleRemove"
-                    :before-remove="beforeRemove"
-                    multiple
-                    :limit="3"
-                    :on-exceed="handleExceed"
-                    :file-list="fileList"
+                <div class="level">任务层级：{{ item.level_dictText }}</div>
+                <div class="union">{{ item.union }}</div>
+                <div class="content">
+                  <div class="writing" v-if="item.contentType === 'text'">
+                    {{ item.taskDescribe }}
+                  </div>
+                  <div class="word" v-if="item.contentType === 'file'">
+                    <div class="word_img">
+                      <img
+                        src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+                        alt="图片占位"
+                        width="100%"
+                        height="100%"
+                      />
+                    </div>
+                    <div class="operate">
+                      <span>点击查看</span>
+                      <el-upload
+                        class="upload-demo"
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        :on-preview="handlePreview"
+                        :on-remove="handleRemove"
+                        :before-remove="beforeRemove"
+                        multiple
+                        :limit="3"
+                        :on-exceed="handleExceed"
+                        :file-list="fileList"
+                      >
+                        <el-button size="small" type="primary"
+                          >点击上传</el-button
+                        >
+                      </el-upload>
+                    </div>
+                  </div>
+                  <div class="concept_map" v-if="item.contentType === 'image'">
+                    <div class="concept_map_img">
+                      <img
+                        :src="item.taskPic"
+                        alt="占位图片"
+                        width="100%"
+                        height="100%"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="null"
+                    v-if="
+                      item.contentType !== 'text' &&
+                      item.contentType !== 'file' &&
+                      item.contentType !== 'image'
+                    "
                   >
-                    <el-button size="small" type="primary">点击上传</el-button>
-                  </el-upload>
+                    <el-image></el-image>
+                  </div>
                 </div>
-              </div>
-              <div class="concept_map" v-if="item.contentType === 'image'">
-                <div class="concept_map_img">
-                  <img
-                    src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-                    alt="占位图片"
-                    width="100%"
-                    height="100%"
-                  />
+                <!-- <div class="progess">
+                  <span>项目进度</span>
+                  <el-progress
+                    stroke-width="4"
+                    :show-text="false"
+                    :percentage="item.progress"
+                    style="width: 72%"
+                  ></el-progress>
+                </div> -->
+                <div class="date">
+                  <div class="cycle">
+                    <label>任务周期：</label>
+                    <span> {{ item.startTime }}</span> -
+                    <span>{{ item.expectedEndTime }}</span>
+                  </div>
+                  <div class="publish">
+                    <label>发布提交：</label>
+                    <span>{{ item.publishTime }}</span> -
+                    <span>{{
+                      `${
+                        item.submitTime !== '1970-01-01'
+                          ? item.submitTime
+                          : '待提交'
+                      }`
+                    }}</span>
+                  </div>
+                  <div class="expected_duration">
+                    <label>预计时长：</label
+                    ><span> {{ item.expectedDuration }}</span>
+                  </div>
+                  <div class="real_duration">
+                    <label> 实际时长：</label
+                    ><span>{{
+                      `${item.realDuration ? item.realDuration : '未完成'}`
+                    }}</span>
+                  </div>
+                </div>
+                <div class="tag">
+                  <el-tag type="warning">一级分类</el-tag>
+                  <el-tag type="success">二级分类</el-tag>
+                  <el-tag>任务等级</el-tag>
                 </div>
               </div>
-              <div
-                class="null"
-                v-if="
-                  item.contentType !== 'text' &&
-                  item.contentType !== 'file' &&
-                  item.contentType !== 'image'
-                "
-              >
-                <el-image></el-image>
-              </div>
-            </div>
-            <div class="progess">
-              <span>项目进度</span>
-              <el-progress
-                stroke-width="4"
-                :show-text="false"
-                :percentage="item.progress"
-                style="width: 72%"
-              ></el-progress>
-            </div>
-            <div class="functions">
-              <el-button
-                type="primary"
-                round
-                size="mini"
-                style="width: 25%; height: 20px; line-height: 5px; padding: 0"
-              ></el-button>
-              <el-button
-                type="success"
-                round
-                size="mini"
-                style="width: 25%; height: 20px; line-height: 5px; padding: 0"
-              ></el-button>
-              <span>编辑</span>
-            </div>
-          </el-checkbox>
+            </Draggable>
+          </Container>
           <div v-if="developedData.cardList.length === 0">
             <el-empty :image-size="200"></el-empty>
           </div>
@@ -263,100 +336,132 @@
             <i class="el-icon-more"></i>
           </div>
         </div>
-        <div class="cards" @scroll="completedScroll" ref="completedcards">
-          <el-checkbox
-            border
-            v-for="(item, index) in completedData.cardList"
-            :key="index"
+        <div
+          class="cards"
+          @scroll.passive="completedScroll"
+          ref="completedcards"
+        >
+          <Container
+            drag-class="card-ghost"
+            drop-class="card-ghost-drop"
+            :drop-placeholder="dropPlaceholderOptions"
+            group-name="col"
+            @drop="(e) => onCompletedCardDrop(e)"
+            :get-child-payload="getCompletedCardPayload()"
           >
-            <div class="project_name">
-              <div class="name" :title="item.taskName">
-                {{ item.taskName }}
-              </div>
-              <div class="avatar" @click="openDrawer(item)">
-                <el-avatar :src="item.headpic"></el-avatar>
-              </div>
-            </div>
-
-            <div class="content">
-              <div class="writing" v-if="item.contentType === 'text'">
-                {{ item.taskDescribe }}
-                <div class="time">
-                  项目工期{{ item.startTime }}——{{ item.expectedEndTime }}
+            <Draggable
+              v-for="(item, index) in completedData.cardList"
+              :key="index"
+            >
+              <div class="task_card">
+                <div class="project_name">
+                  <div class="name" :title="item.taskName">
+                    {{ item.taskName }}
+                  </div>
+                  <div class="functions">
+                    <i class="el-icon-more"></i>
+                  </div>
                 </div>
-              </div>
-              <div class="word" v-if="item.contentType === 'file'">
-                <div class="word_img">
-                  <img
-                    src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-                    alt="图片占位"
-                    width="100%"
-                    height="100%"
-                  />
-                </div>
-                <div class="operate">
-                  <span>点击查看</span>
-                  <el-upload
-                    class="upload-demo"
-                    action="https://jsonplaceholder.typicode.com/posts/"
-                    :on-preview="handlePreview"
-                    :on-remove="handleRemove"
-                    :before-remove="beforeRemove"
-                    multiple
-                    :limit="3"
-                    :on-exceed="handleExceed"
-                    :file-list="fileList"
+                <div class="level">任务层级：{{ item.level_dictText }}</div>
+                <div class="union">{{ item.union }}</div>
+                <div class="content">
+                  <div class="writing" v-if="item.contentType === 'text'">
+                    {{ item.taskDescribe }}
+                  </div>
+                  <div class="word" v-if="item.contentType === 'file'">
+                    <div class="word_img">
+                      <img
+                        src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+                        alt="图片占位"
+                        width="100%"
+                        height="100%"
+                      />
+                    </div>
+                    <div class="operate">
+                      <span>点击查看</span>
+                      <el-upload
+                        class="upload-demo"
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        :on-preview="handlePreview"
+                        :on-remove="handleRemove"
+                        :before-remove="beforeRemove"
+                        multiple
+                        :limit="3"
+                        :on-exceed="handleExceed"
+                        :file-list="fileList"
+                      >
+                        <el-button size="small" type="primary"
+                          >点击上传</el-button
+                        >
+                      </el-upload>
+                    </div>
+                  </div>
+                  <div class="concept_map" v-if="item.contentType === 'image'">
+                    <div class="concept_map_img">
+                      <img
+                        :src="item.taskPic"
+                        alt="占位图片"
+                        width="100%"
+                        height="100%"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="null"
+                    v-if="
+                      item.contentType !== 'text' &&
+                      item.contentType !== 'file' &&
+                      item.contentType !== 'image'
+                    "
                   >
-                    <el-button size="small" type="primary">点击上传</el-button>
-                  </el-upload>
+                    <el-image></el-image>
+                  </div>
                 </div>
-              </div>
-              <div class="concept_map" v-if="item.contentType === 'image'">
-                <div class="concept_map_img">
-                  <img
-                    :src="item.taskPic"
-                    alt="占位图片"
-                    width="100%"
-                    height="100%"
-                  />
+                <!-- <div class="progess">
+                  <span>项目进度</span>
+                  <el-progress
+                    stroke-width="4"
+                    :show-text="false"
+                    :percentage="item.progress"
+                    style="width: 72%"
+                  ></el-progress>
+                </div> -->
+                <div class="date">
+                  <div class="cycle">
+                    <label>任务周期：</label>
+                    <span> {{ item.startTime }}</span> -
+                    <span>{{ item.expectedEndTime }}</span>
+                  </div>
+                  <div class="publish">
+                    <label>发布提交：</label>
+                    <span>{{ item.publishTime }}</span> -
+                    <span>{{
+                      `${
+                        item.submitTime !== '1970-01-01'
+                          ? item.submitTime
+                          : '待提交'
+                      }`
+                    }}</span>
+                  </div>
+                  <div class="expected_duration">
+                    <label>预计时长：</label
+                    ><span> {{ item.expectedDuration }}</span>
+                  </div>
+                  <div class="real_duration">
+                    <label> 实际时长：</label
+                    ><span>{{
+                      `${item.realDuration ? item.realDuration : '未完成'}`
+                    }}</span>
+                  </div>
+                </div>
+                <div class="tag">
+                  <el-tag type="warning">一级分类</el-tag>
+                  <el-tag type="success">二级分类</el-tag>
+                  <el-tag>任务等级</el-tag>
                 </div>
               </div>
-              <div
-                class="null"
-                v-if="
-                  item.contentType !== 'text' &&
-                  item.contentType !== 'file' &&
-                  item.contentType !== 'image'
-                "
-              >
-                <el-empty :image-size="200"></el-empty>
-              </div>
-            </div>
-            <div class="progess">
-              <span>项目进度</span>
-              <el-progress
-                stroke-width="4"
-                :show-text="false"
-                :percentage="item.progress"
-                style="width: 72%"
-              ></el-progress>
-            </div>
-            <div class="functions">
-              <el-button
-                type="primary"
-                round
-                size="mini"
-                style="width: 25%; height: 20px; line-height: 5px; padding: 0"
-              ></el-button>
-              <el-button
-                type="success"
-                round
-                size="mini"
-                style="width: 25%; height: 20px; line-height: 5px; padding: 0"
-              ></el-button>
-              <span>编辑</span>
-            </div>
-          </el-checkbox>
+            </Draggable>
+          </Container>
           <div v-if="completedData.cardList.length === 0">
             <el-empty :image-size="200"></el-empty>
           </div>
@@ -374,99 +479,127 @@
           </div>
         </div>
         <div class="cards" @scroll.passive="auditedScroll" ref="auditedcards">
-          <el-checkbox
-            border
-            v-for="(item, index) in auditedData.cardList"
-            :key="index"
+          <Container
+            drag-class="card-ghost"
+            drop-class="card-ghost-drop"
+            :drop-placeholder="dropPlaceholderOptions"
+            group-name="col"
+            @drop="(e) => onAuditedCardDrop(e)"
+            :get-child-payload="getAuditedCardPayload()"
           >
-            <div class="project_name">
-              <div class="name" :title="item.taskName">
-                {{ item.taskName }}
-              </div>
-              <div class="avatar" @click="openDrawer(item)">
-                <el-avatar :src="item.headpic"></el-avatar>
-              </div>
-            </div>
-
-            <div class="content">
-              <div class="writing" v-if="item.contentType === 'text'">
-                {{ item.taskDescribe }}
-                <div class="time">
-                  项目工期{{ item.startTime }}——{{ item.expectedEndTime }}
+            <Draggable
+              v-for="(item, index) in auditedData.cardList"
+              :key="index"
+            >
+              <div class="task_card">
+                <div class="project_name">
+                  <div class="name" :title="item.taskName">
+                    {{ item.taskName }}
+                  </div>
+                  <div class="functions">
+                    <i class="el-icon-more"></i>
+                  </div>
                 </div>
-              </div>
-              <div class="word" v-if="item.contentType === 'file'">
-                <div class="word_img">
-                  <img
-                    src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-                    alt="图片占位"
-                    width="100%"
-                    height="100%"
-                  />
-                </div>
-                <div class="operate">
-                  <span>点击查看</span>
-                  <el-upload
-                    class="upload-demo"
-                    action="https://jsonplaceholder.typicode.com/posts/"
-                    :on-preview="handlePreview"
-                    :on-remove="handleRemove"
-                    :before-remove="beforeRemove"
-                    multiple
-                    :limit="3"
-                    :on-exceed="handleExceed"
-                    :file-list="fileList"
+                <div class="level">任务层级：{{ item.level_dictText }}</div>
+                <div class="union">{{ item.union }}</div>
+                <div class="content">
+                  <div class="writing" v-if="item.contentType === 'text'">
+                    {{ item.taskDescribe }}
+                  </div>
+                  <div class="word" v-if="item.contentType === 'file'">
+                    <div class="word_img">
+                      <img
+                        src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+                        alt="图片占位"
+                        width="100%"
+                        height="100%"
+                      />
+                    </div>
+                    <div class="operate">
+                      <span>点击查看</span>
+                      <el-upload
+                        class="upload-demo"
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        :on-preview="handlePreview"
+                        :on-remove="handleRemove"
+                        :before-remove="beforeRemove"
+                        multiple
+                        :limit="3"
+                        :on-exceed="handleExceed"
+                        :file-list="fileList"
+                      >
+                        <el-button size="small" type="primary"
+                          >点击上传</el-button
+                        >
+                      </el-upload>
+                    </div>
+                  </div>
+                  <div class="concept_map" v-if="item.contentType === 'image'">
+                    <div class="concept_map_img">
+                      <img
+                        :src="item.taskPic"
+                        alt="占位图片"
+                        width="100%"
+                        height="100%"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="null"
+                    v-if="
+                      item.contentType !== 'text' &&
+                      item.contentType !== 'file' &&
+                      item.contentType !== 'image'
+                    "
                   >
-                    <el-button size="small" type="primary">点击上传</el-button>
-                  </el-upload>
+                    <el-image></el-image>
+                  </div>
                 </div>
-              </div>
-              <div class="concept_map" v-if="item.contentType === 'image'">
-                <div class="concept_map_img">
-                  <img
-                    src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-                    alt="占位图片"
-                    width="100%"
-                    height="100%"
-                  />
+                <!-- <div class="progess">
+                  <span>项目进度</span>
+                  <el-progress
+                    stroke-width="4"
+                    :show-text="false"
+                    :percentage="item.progress"
+                    style="width: 72%"
+                  ></el-progress>
+                </div> -->
+                <div class="date">
+                  <div class="cycle">
+                    <label>任务周期：</label>
+                    <span> {{ item.startTime }}</span> -
+                    <span>{{ item.expectedEndTime }}</span>
+                  </div>
+                  <div class="publish">
+                    <label>发布提交：</label>
+                    <span>{{ item.publishTime }}</span> -
+                    <span>{{
+                      `${
+                        item.submitTime !== '1970-01-01'
+                          ? item.submitTime
+                          : '待提交'
+                      }`
+                    }}</span>
+                  </div>
+                  <div class="expected_duration">
+                    <label>预计时长：</label
+                    ><span> {{ item.expectedDuration }}</span>
+                  </div>
+                  <div class="real_duration">
+                    <label> 实际时长：</label
+                    ><span>{{
+                      `${item.realDuration ? item.realDuration : '未完成'}`
+                    }}</span>
+                  </div>
+                </div>
+                <div class="tag">
+                  <el-tag type="warning">一级分类</el-tag>
+                  <el-tag type="success">二级分类</el-tag>
+                  <el-tag>任务等级</el-tag>
                 </div>
               </div>
-              <div
-                class="null"
-                v-if="
-                  item.contentType !== 'text' &&
-                  item.contentType !== 'file' &&
-                  item.contentType !== 'image'
-                "
-              >
-                <el-image></el-image>
-              </div>
-            </div>
-            <div class="progess">
-              <span>项目进度</span>
-              <el-progress
-                stroke-width="4"
-                :show-text="false"
-                :percentage="item.progress"
-                style="width: 72%"
-              ></el-progress>
-            </div>
-            <div class="functions">
-              <el-button
-                type="primary"
-                round
-                size="mini"
-                style="width: 25%; height: 20px; line-height: 5px; padding: 0"
-              ></el-button>
-              <el-button
-                type="success"
-                round
-                size="mini"
-                style="width: 25%; height: 20px; line-height: 5px; padding: 0"
-              ></el-button>
-              <span>编辑</span>
-            </div>
-          </el-checkbox>
+            </Draggable>
+          </Container>
           <div v-if="auditedData.cardList.length === 0">
             <el-empty :image-size="200"></el-empty>
           </div>
@@ -511,33 +644,72 @@
         </div>
       </el-drawer>
     </div>
+    <task-modal ref="modalForm" @ok="modalFormOk"></task-modal>
   </div>
 </template>
 
 <script>
-import { getMyTaskData, getFileAccessHttpUrl } from '@/api/manage.js'
+import {
+  getMyTaskData,
+  getFileAccessHttpUrl,
+  putAction,
+  delCardData
+} from '@/api/manage.js'
+import { Container, Draggable } from 'vue-smooth-dnd'
+import TaskModal from '@/views/task/modules/TaskModal'
+import { mixinDevice } from '@/utils/mixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+const changeTime = (time) => {
+  let date = new Date(time)
+  let Y = date.getFullYear()
+  let M = String(date.getMonth() + 1).padStart(2, '0')
+  let D = String(date.getDate()).padStart(2, '0')
+  let newDate = [Y, M, D].join('-')
+  return newDate
+}
+const changeStyle = (arr) => {
+  let newArr = arr.map((item) => {
+    item.headpic = getFileAccessHttpUrl(item.headpic)
+    item.taskPic = getFileAccessHttpUrl(item.taskPic)
+    item.expectedEndTime = changeTime(item.expectedEndTime)
+    item.startTime = changeTime(item.startTime)
+    item.submitTime = changeTime(item.submitTime)
+    item.publishTime = changeTime(item.publishTime)
+  })
+  return newArr
+}
 export default {
+  mixins: [JeecgListMixin, mixinDevice],
+  components: { Container, Draggable, TaskModal },
   data() {
     return {
       assignmnetData: {
         title: '待开发',
+        state: 0,
         cardList: [],
         page: 1,
         limit: 10
       },
       developedData: {
+        state: 2,
         title: '开发中',
         cardList: [],
         page: 1,
         limit: 10
       },
       completedData: {
+        state: 3,
         title: '已完成',
-        cardList: []
+        cardList: [],
+        page: 1,
+        limit: 10
       },
       auditedData: {
         title: '已审核',
-        cardList: []
+        cardList: [],
+        state: 3,
+        page: 1,
+        limit: 10
       },
       fileList: [
         {
@@ -551,10 +723,21 @@ export default {
       ],
       drawer: false,
       direction: 'rtl',
-      drawerData: {}
+      drawerData: {},
+      dropPlaceholderOptions: {
+        className: 'drop-preview',
+        animationDuration: '1000',
+        showOnTop: true
+      }
     }
   },
   methods: {
+    allUpadate() {
+      this.getMyTaskAssignmentData()
+      this.getMyTaskDevelopedData()
+      this.getMyTaskCompletedData()
+      this.getMyTaskAuditedData()
+    },
     // 获取数据
     async getMyTaskAssignmentData() {
       let workStatus = 0
@@ -564,53 +747,17 @@ export default {
         this.assignmnetData.total = res.total
         this.assignmnetData.page = res.current
         this.assignmnetData.limit = res.size
-        this.assignmnetData.cardList.map((item) => {
-          item.headpic = getFileAccessHttpUrl(item.headpic)
-          item.taskPic = getFileAccessHttpUrl(item.taskPic)
-        })
-        this.assignmnetData.cardList.map((item) => {
-          let expectedEndTimedate = new Date(item.expectedEndTime)
-          let Y = expectedEndTimedate.getFullYear()
-          let M = String(expectedEndTimedate.getMonth() + 1).padStart(2, '0')
-          let D = String(expectedEndTimedate.getDate()).padStart(2, '0')
-          item.expectedEndTime = [Y, M, D].join('-')
-        })
-        this.assignmnetData.cardList.map((item) => {
-          let startTimedate = new Date(item.startTime)
-          let Y = startTimedate.getFullYear()
-          let M = String(startTimedate.getMonth() + 1).padStart(2, '0')
-          let D = String(startTimedate.getDate()).padStart(2, '0')
-          item.startTime = [Y, M, D].join('-')
-        })
+        changeStyle(this.assignmnetData.cardList)
       })
     },
     async getMyTaskDevelopedData() {
       let workStatus = 2
       await getMyTaskData({ workStatus }).then(({ result: res }) => {
-        console.log(res)
-
         this.developedData.cardList = res.records
         this.developedData.total = res.total
         this.developedData.page = res.current
         this.developedData.limit = res.size
-        this.developedData.cardList.map((item) => {
-          item.headpic = getFileAccessHttpUrl(item.headpic)
-          item.taskPic = getFileAccessHttpUrl(item.taskPic)
-        })
-        this.developedData.cardList.map((item) => {
-          let expectedEndTimedate = new Date(item.expectedEndTime)
-          let Y = expectedEndTimedate.getFullYear()
-          let M = String(expectedEndTimedate.getMonth() + 1).padStart(2, '0')
-          let D = String(expectedEndTimedate.getDate()).padStart(2, '0')
-          item.expectedEndTime = [Y, M, D].join('-')
-        })
-        this.developedData.cardList.map((item) => {
-          let startTimedate = new Date(item.startTime)
-          let Y = startTimedate.getFullYear()
-          let M = String(startTimedate.getMonth() + 1).padStart(2, '0')
-          let D = String(startTimedate.getDate()).padStart(2, '0')
-          item.startTime = [Y, M, D].join('-')
-        })
+        changeStyle(this.developedData.cardList)
       })
     },
     async getMyTaskCompletedData() {
@@ -620,54 +767,43 @@ export default {
         this.completedData.total = res.total
         this.completedData.page = res.current
         this.completedData.limit = res.size
-        this.completedData.cardList.map((item) => {
-          item.headpic = getFileAccessHttpUrl(item.headpic)
-          item.taskPic = getFileAccessHttpUrl(item.taskPic)
-        })
-        this.completedData.cardList.map((item) => {
-          let expectedEndTimedate = new Date(item.expectedEndTime)
-          let Y = expectedEndTimedate.getFullYear()
-          let M = String(expectedEndTimedate.getMonth() + 1).padStart(2, '0')
-          let D = String(expectedEndTimedate.getDate()).padStart(2, '0')
-          item.expectedEndTime = [Y, M, D].join('-')
-        })
-        this.completedData.cardList.map((item) => {
-          let startTimedate = new Date(item.startTime)
-          let Y = startTimedate.getFullYear()
-          let M = String(startTimedate.getMonth() + 1).padStart(2, '0')
-          let D = String(startTimedate.getDate()).padStart(2, '0')
-          item.startTime = [Y, M, D].join('-')
-        })
+        changeStyle(this.completedData.cardList)
       })
     },
     async getMyTaskAuditedData() {
       let workStatus = 4
       await getMyTaskData({ workStatus }).then(({ result: res }) => {
-        console.log('getMyTaskAuditedData', res)
         this.auditedData.cardList = res.records
-        console.log(' this.auditedData.cardList ', this.auditedData.cardList)
         this.auditedData.total = res.total
         this.auditedData.page = res.current
         this.auditedData.limit = res.size
-        this.auditedData.cardList.map((item) => {
-          item.headpic = getFileAccessHttpUrl(item.headpic)
-          item.taskPic = getFileAccessHttpUrl(item.taskPic)
-        })
-        this.auditedData.cardList.map((item) => {
-          let expectedEndTimedate = new Date(item.expectedEndTime)
-          let Y = expectedEndTimedate.getFullYear()
-          let M = String(expectedEndTimedate.getMonth() + 1).padStart(2, '0')
-          let D = String(expectedEndTimedate.getDate()).padStart(2, '0')
-          item.expectedEndTime = [Y, M, D].join('-')
+        changeStyle(this.auditedData.cardList)
+      })
+    },
+    // 删除数据
+    async delCardData(item) {
+      let id = item.id
+      console.log(id)
+      await delCardData({ id })
+        .then((res) => {
+          console.log(res)
         })
-        this.auditedData.cardList.map((item) => {
-          let startTimedate = new Date(item.startTime)
-          let Y = startTimedate.getFullYear()
-          let M = String(startTimedate.getMonth() + 1).padStart(2, '0')
-          let D = String(startTimedate.getDate()).padStart(2, '0')
-          item.startTime = [Y, M, D].join('-')
+        .catch((error) => {
+          console.log(error)
         })
-      })
+      this.allUpadate()
+    },
+    // 去编辑窗口
+    toEdit(item) {
+      this.handleEdit(item)
+    },
+    // 去新增窗口
+    toAdd() {
+      this.handleAdd()
+    },
+    // 去分解窗口
+    Tofengjie(item) {
+      this.fengjieRenwu(item)
     },
     //滚动分页加载数据
     assignmnetScroll(e) {
@@ -680,20 +816,21 @@ export default {
           let workStatus = 0
           let pageNo = this.assignmnetData.page
           let pageSize = this.assignmnetData.limit
-          console.log(pageNo, pageSize)
+          // console.log(pageNo, pageSize)
           await getMyTaskData({ workStatus, pageNo, pageSize }).then(
             ({ result: res }) => {
               console.log('1111111', res)
               //有数据的时候加载
               if (res.records.length > 0) {
+                changeStyle(res.records)
                 this.assignmnetData.cardList.push(...res.records) //追加数据 使用 ...语法
                 isLoading = true
               } else {
-                // this.$notify({
-                //   title: '温馨提示：',
-                //   message: '暂无更多数据信息！',
-                //   position: 'bottom-right'
-                // })
+                this.$notify({
+                  title: '温馨提示：',
+                  message: '暂无更多数据信息！',
+                  position: 'bottom-right'
+                })
                 isLoading = false //无数据可以加载
               }
             }
@@ -711,12 +848,13 @@ export default {
           let workStatus = 2
           let pageNo = this.developedData.page
           let pageSize = this.developedData.limit
-          console.log(pageNo, pageSize)
+          // console.log(pageNo, pageSize)
           await getMyTaskData({ workStatus, pageNo, pageSize }).then(
             ({ result: res }) => {
               console.log('1111111', res)
               //有数据的时候加载
               if (res.records.length > 0) {
+                changeStyle(res.records)
                 this.developedData.cardList.push(...res.records) //追加数据 使用 ...语法
                 isLoading = true
               } else {
@@ -742,11 +880,12 @@ export default {
           let workStatus = 3
           let pageNo = this.completedData.page
           let pageSize = this.completedData.limit
-          console.log(pageNo, pageSize)
+          // console.log(pageNo, pageSize)
           await getMyTaskData({ workStatus, pageNo, pageSize })
             .then(({ result: res }) => {
               //有数据的时候加载
               if (res.records.length > 0) {
+                changeStyle(res.records)
                 this.completedData.cardList.push(...res.records) //追加数据 使用 ...语法
                 isLoading = true
               } else {
@@ -774,11 +913,12 @@ export default {
           let workStatus = 4
           let pageNo = this.auditedData.page
           let pageSize = this.auditedData.limit
-          console.log(pageNo, pageSize)
+          // console.log(pageNo, pageSize)
           await getMyTaskData({ workStatus, pageNo, pageSize }).then(
             ({ result: res }) => {
               //有数据的时候加载
               if (res.records.length > 0) {
+                changeStyle(res.records)
                 this.auditedData.cardList.push(...res.records) //追加数据 使用 ...语法
                 isLoading = true
               } else {
@@ -806,6 +946,113 @@ export default {
       let mm = String(date.getMinutes()).padStart(2, '0')
       let ss = String(date.getSeconds()).padStart(2, '0')
       this.drawerData.submit_time = hh + '：' + mm + '：' + ss
+    },
+    // 拖拽切换状态
+    onAssignmnetCardDrop(dropResult) {
+      let { addedIndex, payload } = dropResult
+      if (addedIndex !== null && payload) {
+        // 更新任务状态
+        dropResult.payload = {
+          ...payload
+        }
+        let workStatus = 0
+        let itemToAdd = payload
+        console.log(addedIndex, payload)
+        let params = {
+          id: itemToAdd.id,
+          workStatus: workStatus
+        }
+        putAction('/task/task/updateWorkStatus', params)
+          .then((res) => {
+            this.allUpadate()
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+      }
+    },
+    onDevelopedCardDrop(dropResult) {
+      let { removedIndex, addedIndex, payload } = dropResult
+      if (addedIndex !== null && payload) {
+        // 更新任务状态
+        dropResult.payload = {
+          ...payload
+        }
+        let workStatus = 2
+        let itemToAdd = payload
+        console.log(addedIndex, payload)
+        let params = {
+          id: itemToAdd.id,
+          workStatus: workStatus
+        }
+        putAction('/task/task/updateWorkStatus', params)
+          .then((res) => {
+            this.allUpadate()
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+      }
+    },
+    onCompletedCardDrop(dropResult) {
+      // dropResult:被拖拽的卡片
+      let { addedIndex, payload } = dropResult
+      if (addedIndex !== null && payload) {
+        // 更新任务状态
+        dropResult.payload = {
+          ...payload
+        }
+        let workStatus = 3
+        let itemToAdd = payload
+        console.log(addedIndex, payload)
+        let params = {
+          id: itemToAdd.id,
+          workStatus: workStatus
+        }
+        putAction('/task/task/updateWorkStatus', params)
+          .then((res) => {
+            this.allUpadate()
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+      }
+    },
+    onAuditedCardDrop(dropResult) {
+      let { removedIndex, addedIndex, payload } = dropResult
+      if (addedIndex !== null && payload) {
+        // 更新任务状态
+        dropResult.payload = {
+          ...payload
+        }
+        let workStatus = 4
+        let itemToAdd = payload
+        console.log(addedIndex, payload)
+        let params = {
+          id: itemToAdd.id,
+          workStatus: workStatus
+        }
+        putAction('/task/task/updateWorkStatus', params)
+          .then((res) => {
+            console.log(res)
+            this.allUpadate()
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+      }
+    },
+    getAssignmnetCardPayload() {
+      return (index) => this.assignmnetData.cardList[index]
+    },
+    getDevelopedCardPayload() {
+      return (index) => this.developedData.cardList[index]
+    },
+    getCompletedCardPayload() {
+      return (index) => this.completedData.cardList[index]
+    },
+    getAuditedCardPayload() {
+      return (index) => this.auditedData.cardList[index]
     }
   },
   created() {
@@ -817,32 +1064,17 @@ export default {
     this.developedScroll()
     this.completedScroll()
     this.auditedScroll()
+    this.updateWorkStatus()
   }
 }
 </script>
 
 <style lang="less" scoped>
-/deep/ .el-checkbox .is-bordered {
-  position: relative;
-}
-/deep/ .el-checkbox__input {
-  position: absolute;
-  top: 20px;
-  left: 4%;
-  font-size: 20px;
-}
-/deep/ .el-checkbox,
-.el-checkbox__input {
-  white-space: wrap;
-}
 /deep/.el-progress {
   position: relative;
   top: -10px;
   left: 28%;
 }
-/deep/ .el-checkbox__label {
-  width: 100%;
-}
 /deep/ .el-avatar {
   width: 22px;
   height: 22px;
@@ -865,12 +1097,168 @@ export default {
 /deep/ .el-drawer__open .el-drawer.rtl {
   width: 22% !important;
 }
-// 上传文档之后，图片替换为文件列表 下方为列表样式
-// /deep/ .el-upload-list.el-upload-list--text {
-//   position: absolute;
-//   top: 70px;
-//   left: 70px;
-// }
+/deep/.smooth-dnd-container {
+  // height: 700px;
+  // overflow-x: auto;
+  width: 100%;
+  margin-top: 30px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: start;
+  align-items: center;
+}
+/deep/ .smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
+  overflow: auto;
+}
+/deep/ .smooth-dnd-draggable-wrapper {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  .task_card {
+    border-radius: 10px;
+    border: 3px solid #ededed;
+    background-color: #fff;
+    margin: 0 0 20px 0;
+    padding: 8% 5%;
+    .project_name {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      width: 100%;
+      .name {
+        display: block;
+        width: 80%;
+        font-size: 18px;
+        font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
+        font-weight: 400;
+        color: #000000;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+      }
+    }
+    .content {
+      width: 100%;
+      // word-wrap: break-word;
+      word-break: break-all;
+      word-wrap: break-word;
+      font-size: 13px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: #000;
+      display: flex;
+      flex-flow: row wrap;
+      margin: 20px 0;
+      .word {
+        display: flex;
+        flex-flow: row;
+        justify-content: left;
+        margin: 10px 0 20px 0;
+        height: 100px;
+        .word_img {
+          width: 40%;
+          height: 35%;
+          // background-color: pink;
+          margin-left: 20px;
+          position: absolute;
+          top: 25%;
+          left: 10%;
+        }
+        .operate {
+          // margin-top: 10px;
+          // margin-left: 190px;
+          display: flex;
+          flex-flow: column;
+          position: absolute;
+          top: 35%;
+          left: 60%;
+        }
+      }
+      .concept_map {
+        .concept_map_img {
+          width: 80%;
+          height: 30%;
+          margin: 10px auto;
+        }
+      }
+    }
+    // .time {
+    //   margin-top: 10px;
+    //   font-size: 12px;
+    //   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+    //   font-weight: 400;
+    //   color: #9a9a9a;
+    // }
+    // .progess {
+    //   margin-top: 10px;
+    //   span {
+    //     display: block;
+    //     font-size: 12px;
+    //     font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+    //     font-weight: 400;
+    //     color: #9a9a9a;
+    //   }
+    // }
+    .functions {
+      margin-top: 10px;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      el-button {
+        flex: 8;
+        text-align: center;
+      }
+      span {
+        width: 50px;
+        display: block;
+        flex: 5;
+        margin-left: 30%;
+        text-align: center;
+        font-size: 12px;
+        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+        font-weight: 400;
+        color: #333333;
+      }
+    }
+    .level,
+    .union,
+    .date,
+    .tag {
+      font-size: 12px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: #94a3b8;
+    }
+    .level {
+    }
+    .union {
+    }
+    .date {
+      span {
+        width: 72px;
+        display: inline-block;
+        background-color: #eae8e8;
+        text-align: center;
+        border-radius: 3px;
+      }
+      div {
+        margin-bottom: 5px;
+      }
+    }
+    .tag {
+      margin-top: 20px;
+    }
+  }
+}
+/deep/ .el-cascader,
+.el-tag {
+  height: 20px;
+  line-height: 20px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
 header {
   // width: 100%;
   display: flex;
@@ -895,6 +1283,10 @@ header {
     align-items: center;
   }
 }
+.cards {
+  height: 700px;
+  overflow-x: auto;
+}
 .content {
   width: 100%;
   margin-top: 30px;
@@ -954,132 +1346,13 @@ header {
         height: 100%;
       }
     }
-    .cards {
-      overflow-x: auto;
-      height: 700px;
-      width: 100%;
-      margin-top: 30px;
-      display: flex;
-      flex-flow: column nowrap;
-      justify-content: start;
-      align-items: center;
-      .el-checkbox.is-bordered {
-        width: 100%;
-        height: 100%;
-        border-radius: 10px;
-        border: 3px solid #ededed;
-        background-color: #fff;
-        margin: 0 0 20px 0;
-        padding: 8% 10%;
-        .project_name {
-          display: flex;
-          flex-flow: row nowrap;
-          justify-content: space-between;
-          width: 100%;
-          .name {
-            display: block;
-            width: 80%;
-            font-size: 18px;
-            font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
-            font-weight: 400;
-            color: #000000;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-          }
-        }
-        .content {
-          width: 100%;
-          word-wrap: break-word;
-          font-size: 13px;
-          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
-          font-weight: 400;
-          color: #999999;
-          display: flex;
-          flex-flow: row wrap;
-          margin-top: 10px;
-          .word {
-            display: flex;
-            flex-flow: row;
-            justify-content: left;
-            margin: 10px 0 20px 0;
-            height: 100px;
-            .word_img {
-              width: 40%;
-              height: 35%;
-              // background-color: pink;
-              margin-left: 20px;
-              position: absolute;
-              top: 25%;
-              left: 10%;
-            }
-            .operate {
-              // margin-top: 10px;
-              // margin-left: 190px;
-              display: flex;
-              flex-flow: column;
-              position: absolute;
-              top: 35%;
-              left: 60%;
-            }
-          }
-          .concept_map {
-            .concept_map_img {
-              width: 80%;
-              height: 30%;
-              margin: 10px auto;
-            }
-          }
-        }
-        .time {
-          margin-top: 10px;
-          font-size: 12px;
-          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
-          font-weight: 400;
-          color: #9a9a9a;
-        }
-        .progess {
-          margin-top: 10px;
-          span {
-            display: block;
-            font-size: 12px;
-            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
-            font-weight: 400;
-            color: #9a9a9a;
-          }
-        }
-        .functions {
-          margin-top: 10px;
-          display: flex;
-          flex-flow: row nowrap;
-          justify-content: space-between;
-          el-button {
-            flex: 8;
-            text-align: center;
-          }
-          span {
-            width: 50px;
-            display: block;
-            flex: 5;
-            margin-left: 30%;
-            text-align: center;
-            font-size: 12px;
-            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
-            font-weight: 400;
-            color: #333333;
-          }
-        }
-      }
-    }
   }
   .To_be_developed {
     .title {
       border-bottom: 3px solid #333333;
     }
     .cards {
-      .el-checkbox.is-bordered {
+      .task_card {
         border-left: 5px solid #333333;
       }
     }
@@ -1089,7 +1362,7 @@ header {
       border-bottom: 3px solid #3968e2;
     }
     .cards {
-      .el-checkbox.is-bordered {
+      .task_card {
         border-left: 5px solid #2147fb;
       }
     }
@@ -1099,7 +1372,7 @@ header {
       border-bottom: 3px solid #ffa326;
     }
     .cards {
-      .el-checkbox.is-bordered {
+      .task_card {
         border-left: 5px solid#FFA326;
       }
     }
@@ -1110,7 +1383,7 @@ header {
       border-bottom: 3px solid #52c93f;
     }
     .cards {
-      .el-checkbox.is-bordered {
+      .task_card {
         border-left: 5px solid #52c93f;
       }
     }
@@ -1212,4 +1485,21 @@ header {
     }
   }
 }
+.draggable-container {
+  flex-grow: 1;
+  overflow: auto;
+}
+.card-ghost {
+  transition: transform 0.18s ease;
+  transform: rotateZ(10deg);
+}
+.card-ghost-drop {
+  transition: transform 1s cubic-bezier(0, 1.43, 0.62, 1.56);
+  transform: rotateZ(0deg);
+}
+.drop-preview {
+  border: 1px dashed #abc;
+  margin: 5px;
+  background: yellow !important;
+}
 </style>