diff --git a/ant-design-vue-jeecg/src/api/manage.js b/ant-design-vue-jeecg/src/api/manage.js
index 25da5c4..9a8de7e 100644
--- a/ant-design-vue-jeecg/src/api/manage.js
+++ b/ant-design-vue-jeecg/src/api/manage.js
@@ -7,8 +7,7 @@ const api = {
   role: '/mock/api/role',
   service: '/mock/api/service',
   permission: '/mock/api/permission',
-  permissionNoPager: '/mock/api/permission/no-pager',
-  myTaskData: 'task/task/list'
+  permissionNoPager: '/mock/api/permission/no-pager'
 }
 
 export default api
@@ -215,11 +214,37 @@ export function getFileAccessHttpUrl(avatar, subStr) {
   }
 }
 
-// 大禹项目管理系统中的个人任务管理
+// 个人任务管理接口
+const myTaskApi = {
+  myTaskData: 'task/task/list',
+  updateWorkStatus: 'task/task/updateWorkStatus',
+  delete: '/task/task/delete',
+  edit: '/task/task/edit',
+  decompose: '/task/task/fengjie'
+}
+
+// 个人任务管理数据获取接口
 export function getMyTaskData(parameter) {
   return axios({
-    url: api.myTaskData,
+    url: myTaskApi.myTaskData,
     method: 'get',
     params: parameter
   })
 }
+// 个人任务管理删除数据
+export function delCardData(parameter) {
+  return axios({
+    url: myTaskApi.delete,
+    method: 'delete',
+    params: parameter
+  })
+}
+
+// 个人任务管理编辑数据
+export function editCardData(parameter) {
+  return axios({
+    url: myTaskApi.edit,
+    method: 'put',
+    data: parameter
+  })
+}
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>
diff --git a/ant-design-vue-jeecg/src/views/newLayout/myTask/list/carryOut.vue b/ant-design-vue-jeecg/src/views/newLayout/myTask/list/carryOut.vue
new file mode 100644
index 0000000..e66c777
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/newLayout/myTask/list/carryOut.vue
@@ -0,0 +1,1496 @@
+<template>
+  <div class="assignmnet">
+    <header>
+      <div class="left">
+        <i class="el-icon-s-order"></i>
+        <span>部门任务</span>
+        <i class="el-icon-menu" style="margin-left: 20px"></i>
+        <span>需求，任务</span>
+        <i class="el-icon-menu"></i>
+      </div>
+      <div class="right">
+        <div
+          class="div"
+          style="width: 70px; height: 40px; background-color: pink"
+        ></div>
+        <div
+          class="div"
+          style="width: 70px; height: 40px; background-color: pink"
+        ></div>
+        <div
+          class="div"
+          style="width: 70px; height: 40px; background-color: pink"
+        ></div>
+      </div>
+    </header>
+    <div class="content">
+      <div class="To_be_developed">
+        <div class="title">
+          <div class="left">
+            <h3>{{ assignmnetData.title }}</h3>
+            <span>{{ assignmnetData.total }}</span>
+          </div>
+          <div class="right">
+            <i class="el-icon-plus"></i>
+            <i class="el-icon-more"></i>
+          </div>
+        </div>
+        <div
+          class="cards"
+          @scroll.passive="assignmnetScroll"
+          ref="assignmnetcards"
+        >
+          <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"
+          >
+            <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>分解任务</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="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-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="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>
+            </Draggable>
+          </Container>
+          <div v-if="assignmnetData.cardList.length === 0">
+            <el-empty :image-size="200"></el-empty>
+          </div>
+        </div>
+      </div>
+      <div class="Under_development">
+        <div class="title">
+          <div class="left">
+            <h3>{{ developedData.title }}</h3>
+            <span>{{ developedData.total }}</span>
+          </div>
+          <div class="right">
+            <i class="el-icon-plus"></i>
+            <i class="el-icon-more"></i>
+          </div>
+        </div>
+        <div
+          class="cards"
+          @scroll.passive="developedScroll"
+          ref="developedcards"
+        >
+          <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"
+          >
+            <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="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-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="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>
+            </Draggable>
+          </Container>
+          <div v-if="developedData.cardList.length === 0">
+            <el-empty :image-size="200"></el-empty>
+          </div>
+        </div>
+      </div>
+      <div class="Completed">
+        <div class="title">
+          <div class="left">
+            <h3>{{ completedData.title }}</h3>
+            <span>{{ completedData.total }}</span>
+          </div>
+          <div class="right">
+            <i class="el-icon-plus"></i>
+            <i class="el-icon-more"></i>
+          </div>
+        </div>
+        <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()"
+          >
+            <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 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-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="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>
+            </Draggable>
+          </Container>
+          <div v-if="completedData.cardList.length === 0">
+            <el-empty :image-size="200"></el-empty>
+          </div>
+        </div>
+      </div>
+      <div class="Audited">
+        <div class="title">
+          <div class="left">
+            <h3>{{ auditedData.title }}</h3>
+            <span>{{ auditedData.total }}</span>
+          </div>
+          <div class="right">
+            <i class="el-icon-plus"></i>
+            <i class="el-icon-more"></i>
+          </div>
+        </div>
+        <div class="cards" @scroll.passive="auditedScroll" ref="auditedcards">
+          <Container
+            drag-class="card-ghost"
+            drop-class="card-ghost-drop"
+            :drop-placeholder="dropPlaceholderOptions"
+            group-name="col"
+            @drop="(e) => onAuditedCardDrop(e)"
+            :get-child-payload="getAuditedCardPayload()"
+          >
+            <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 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-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="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>
+            </Draggable>
+          </Container>
+          <div v-if="auditedData.cardList.length === 0">
+            <el-empty :image-size="200"></el-empty>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="drawer">
+      <el-drawer
+        title="我是标题"
+        :visible.sync="drawer"
+        direction="rtl"
+        :modal="false"
+      >
+        <div class="myInfo">
+          <div class="headerPic">
+            <el-avatar :src="drawerData.headpic"></el-avatar>
+          </div>
+          <div class="user_name">{{ drawerData.createBy }}</div>
+          <div class="duty">{{ drawerData.typeId_dictText }}</div>
+          <div class="job">{{ drawerData.union }}</div>
+        </div>
+        <el-divider content-position="center">任务状态</el-divider>
+        <div class="task_blocks">
+          <div class="task_block">
+            <div class="time">
+              <div class="day">{{ drawerData.day }}</div>
+              <div class="month">{{ drawerData.month }}月</div>
+              <div class="submit_time">{{ drawerData.submit_time }}</div>
+            </div>
+            <div class="dynamic">
+              <div class="content">
+                <div class="tag">设计稿</div>
+                <div class="action">上传大禹治水项目设计稿一份</div>
+                <div class="file">
+                  <el-card
+                    >1111111111111111111111111111111111111111111111111111111111</el-card
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-drawer>
+    </div>
+    <task-modal ref="modalForm" @ok="modalFormOk"></task-modal>
+  </div>
+</template>
+
+<script>
+import {
+  getMyTaskData,
+  getFileAccessHttpUrl,
+  putAction,
+  delCardData,
+  editCardData
+} 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: [],
+        page: 1,
+        limit: 10
+      },
+      auditedData: {
+        title: '已审核',
+        cardList: [],
+        state: 3,
+        page: 1,
+        limit: 10
+      },
+      fileList: [
+        {
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        },
+        {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }
+      ],
+      drawer: false,
+      direction: 'rtl',
+      drawerData: {},
+      dropPlaceholderOptions: {
+        className: 'drop-preview',
+        animationDuration: '1000',
+        showOnTop: true
+      }
+    }
+  },
+  methods: {
+    allUpadate() {
+      this.getMyTaskAssignmentData()
+      this.getMyTaskDevelopedData()
+      this.getMyTaskCompletedData()
+      this.getMyTaskAuditedData()
+    },
+    // 获取数据
+    async getMyTaskAssignmentData() {
+      let workStatus = 0
+      await getMyTaskData({ workStatus }).then(({ result: res }) => {
+        console.log(res)
+        this.assignmnetData.cardList = res.records
+        this.assignmnetData.total = res.total
+        this.assignmnetData.page = res.current
+        this.assignmnetData.limit = res.size
+        changeStyle(this.assignmnetData.cardList)
+      })
+    },
+    async getMyTaskDevelopedData() {
+      let workStatus = 2
+      await getMyTaskData({ workStatus }).then(({ result: res }) => {
+        this.developedData.cardList = res.records
+        this.developedData.total = res.total
+        this.developedData.page = res.current
+        this.developedData.limit = res.size
+        changeStyle(this.developedData.cardList)
+      })
+    },
+    async getMyTaskCompletedData() {
+      let workStatus = 3
+      await getMyTaskData({ workStatus }).then(({ result: res }) => {
+        this.completedData.cardList = res.records
+        this.completedData.total = res.total
+        this.completedData.page = res.current
+        this.completedData.limit = res.size
+        changeStyle(this.completedData.cardList)
+      })
+    },
+    async getMyTaskAuditedData() {
+      let workStatus = 4
+      await getMyTaskData({ workStatus }).then(({ result: res }) => {
+        this.auditedData.cardList = res.records
+        this.auditedData.total = res.total
+        this.auditedData.page = res.current
+        this.auditedData.limit = res.size
+        changeStyle(this.auditedData.cardList)
+      })
+    },
+    // 删除数据
+    async delCardData(item) {
+      let id = item.id
+      console.log(id)
+      await delCardData({ id })
+        .then((res) => {
+          console.log(res)
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+      this.allUpadate()
+    },
+    // 去编辑窗口
+    toEdit() {
+      this.handleEdit()
+    },
+    //滚动分页加载数据
+    assignmnetScroll(e) {
+      let isLoading = true //是否有数据可以加载
+      this.$refs.assignmnetcards.onscroll = async () => {
+        const { scrollTop, clientHeight, scrollHeight } = e.target
+        let bottomOfWindow = scrollTop + clientHeight === scrollHeight
+        if (bottomOfWindow && isLoading == true) {
+          this.assignmnetData.page = this.assignmnetData.page + 1 //每次分页+1
+          let workStatus = 0
+          let pageNo = this.assignmnetData.page
+          let pageSize = this.assignmnetData.limit
+          // 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'
+                })
+                isLoading = false //无数据可以加载
+              }
+            }
+          )
+        }
+      }
+    },
+    developedScroll(e) {
+      let isLoading = true //是否有数据可以加载
+      this.$refs.developedcards.onscroll = async () => {
+        const { scrollTop, clientHeight, scrollHeight } = e.target
+        let bottomOfWindow = scrollTop + clientHeight === scrollHeight
+        if (bottomOfWindow && isLoading == true) {
+          this.developedData.page = this.developedData.page + 1 //每次分页+1
+          let workStatus = 2
+          let pageNo = this.developedData.page
+          let pageSize = this.developedData.limit
+          // 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 {
+                this.$notify({
+                  title: '温馨提示：',
+                  message: '暂无更多数据信息！',
+                  position: 'bottom-right'
+                })
+                isLoading = false //无数据可以加载
+              }
+            }
+          )
+        }
+      }
+    },
+    completedScroll(e) {
+      let isLoading = true //是否有数据可以加载
+      this.$refs.completedcards.onscroll = async () => {
+        const { scrollTop, clientHeight, scrollHeight } = e.target
+        let bottomOfWindow = scrollTop + clientHeight === scrollHeight
+        if (bottomOfWindow && isLoading == true) {
+          this.completedData.page = this.completedData.page + 1 //每次分页+1
+          let workStatus = 3
+          let pageNo = this.completedData.page
+          let pageSize = this.completedData.limit
+          // 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 {
+                this.$notify({
+                  title: '温馨提示：',
+                  message: '暂无更多数据信息！',
+                  position: 'bottom-right'
+                })
+                isLoading = false //无数据可以加载
+              }
+            })
+            .catch((error) => {
+              console.log(error)
+            })
+        }
+      }
+    },
+    auditedScroll(e) {
+      let isLoading = true //是否有数据可以加载
+      this.$refs.auditedcards.onscroll = async () => {
+        const { scrollTop, clientHeight, scrollHeight } = e.target
+        let bottomOfWindow = scrollTop + clientHeight === scrollHeight
+        if (bottomOfWindow && isLoading == true) {
+          this.auditedData.page = this.auditedData.page + 1 //每次分页+1
+          let workStatus = 4
+          let pageNo = this.auditedData.page
+          let pageSize = this.auditedData.limit
+          // 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 {
+                this.$notify({
+                  title: '温馨提示：',
+                  message: '暂无更多数据信息！',
+                  position: 'bottom-right'
+                })
+                isLoading = false //无数据可以加载
+              }
+            }
+          )
+        }
+      }
+    },
+    // 点击头像打开个人信息抽屉
+    openDrawer(myInfo) {
+      this.drawer = true
+      this.drawerData = myInfo
+      // 时间换算
+      let date = new Date(myInfo.createTime)
+      this.drawerData.day = date.getDate()
+      this.drawerData.month = String(date.getMonth() + 1).padStart(2, '0')
+      let hh = String(date.getHours()).padStart(2, '0')
+      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() {
+    this.getMyTaskAssignmentData()
+    this.getMyTaskDevelopedData()
+    this.getMyTaskCompletedData()
+    this.getMyTaskAuditedData()
+    this.assignmnetScroll()
+    this.developedScroll()
+    this.completedScroll()
+    this.auditedScroll()
+    this.updateWorkStatus()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/.el-progress {
+  position: relative;
+  top: -10px;
+  left: 28%;
+}
+/deep/ .el-avatar {
+  width: 22px;
+  height: 22px;
+  line-height: 22px;
+  margin-left: 10px;
+}
+/deep/ .el-avatar--icon {
+  font-size: 8px;
+}
+/deep/ .el-button.el-button--primary.el-button--small {
+  background-color: #fff;
+  color: #3e75e6;
+  border: none;
+  padding: 0;
+  font-size: 13px;
+  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+  font-weight: bold;
+  color: #3e75e6;
+}
+/deep/ .el-drawer__open .el-drawer.rtl {
+  width: 22% !important;
+}
+/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;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  .left {
+    flex: 4;
+    display: flex;
+    flex-flow: left;
+
+    i {
+      margin: 0 10px;
+      line-height: 1.5;
+    }
+  }
+  .right {
+    flex: 1;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+.cards {
+  height: 700px;
+  overflow-x: auto;
+}
+.content {
+  width: 100%;
+  margin-top: 30px;
+  display: flex;
+  flex-flow: row nowrap;
+  // justify-content: space-between;
+  align-items: start;
+  .To_be_developed,
+  .Under_development,
+  .Completed,
+  .Audited {
+    width: 24%;
+    margin-right: 20px;
+    height: 100%;
+    .title {
+      width: 100%;
+      height: 40px;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-around;
+      align-items: start;
+      padding-bottom: 10px;
+      margin: 0;
+      .left {
+        display: flex;
+        flex: 4;
+        flex-flow: row nowrap;
+        justify-content: left;
+        align-items: center;
+        height: 100%;
+        margin-right: 100px;
+        h3 {
+          width: 70px;
+          // margin-right: 20px;
+        }
+        span {
+          display: block;
+          width: 35px;
+          height: 35px;
+          text-align: center;
+          line-height: 32px;
+          border-radius: 17px;
+          border: 2px solid #999999;
+          font-size: 18px;
+          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+          font-weight: 400;
+          color: #999999;
+          margin-bottom: 10px;
+        }
+      }
+      .right {
+        display: flex;
+        flex: 2;
+        flex-flow: row nowrap;
+        justify-content: space-around;
+        align-items: center;
+        height: 100%;
+      }
+    }
+  }
+  .To_be_developed {
+    .title {
+      border-bottom: 3px solid #333333;
+    }
+    .cards {
+      .task_card {
+        border-left: 5px solid #333333;
+      }
+    }
+  }
+  .Under_development {
+    .title {
+      border-bottom: 3px solid #3968e2;
+    }
+    .cards {
+      .task_card {
+        border-left: 5px solid #2147fb;
+      }
+    }
+  }
+  .Completed {
+    .title {
+      border-bottom: 3px solid #ffa326;
+    }
+    .cards {
+      .task_card {
+        border-left: 5px solid#FFA326;
+      }
+    }
+  }
+  .Audited {
+    margin: 0;
+    .title {
+      border-bottom: 3px solid #52c93f;
+    }
+    .cards {
+      .task_card {
+        border-left: 5px solid #52c93f;
+      }
+    }
+  }
+}
+.drawer {
+  .myInfo {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    /deep/ .el-avatar {
+      margin: 0;
+    }
+    .user_name {
+      font-size: 24px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: #333333;
+    }
+    .duty {
+      font-size: 14px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: #8c8a8a;
+    }
+    .job {
+      font-size: 14px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: #8c8a8a;
+    }
+  }
+  .task_blocks {
+    padding-right: 30px;
+    .task_block {
+      width: 100%;
+      .time {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: left;
+        align-items: center;
+        margin-left: 20px;
+        .day {
+          font-size: 24px;
+          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+          font-weight: 400;
+          color: #333333;
+          margin-right: 5px;
+        }
+        .month {
+          font-size: 12px;
+          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+          font-weight: 400;
+          color: #333333;
+          margin-right: 20px;
+        }
+        .submit_time {
+          font-size: 14px;
+          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+          font-weight: 400;
+          color: #9a9a9a;
+        }
+      }
+      .dynamic {
+        margin-left: 50px;
+        border-left: 2px dashed #d9d9d9;
+        width: 90%;
+        .content {
+          margin-top: 5px;
+          margin-left: 10%;
+          display: flex;
+          flex-flow: column;
+          align-items: start;
+          .tag {
+            background: #c0f1e3;
+            border-radius: 2px 2px 2px 2px;
+            font-size: 12px;
+            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            padding: 4px 8px;
+          }
+          .action {
+            width: 80%;
+            margin: 10px 0;
+            font-size: 16px;
+            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+            font-weight: 400;
+          }
+          .file {
+            width: 80%;
+            word-break: break-all;
+            .el-card__body {
+              padding: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.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>