From e518a2b42290daac834c0a37c48059b93663581e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=AE=B6=E4=B8=9C?= <1654135867@qq.com>
Date: Thu, 3 Aug 2023 16:13:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E5=8A=A8=E8=A7=A3=E5=86=B3=E5=86=B2?=
 =?UTF-8?q?=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/newLayout/task_admin/TaskAdmin.vue  |   2 +-
 .../task_admin/task_content/TaskContent.vue   | 325 +++++++--
 .../task_content/content_card/ContentCard.vue | 625 +++++++++++++-----
 .../task_content/content_card/HeaderCard.vue  |  18 +-
 4 files changed, 749 insertions(+), 221 deletions(-)

diff --git a/ant-design-vue-jeecg/src/views/newLayout/task_admin/TaskAdmin.vue b/ant-design-vue-jeecg/src/views/newLayout/task_admin/TaskAdmin.vue
index 473d2d0..1b51324 100644
--- a/ant-design-vue-jeecg/src/views/newLayout/task_admin/TaskAdmin.vue
+++ b/ant-design-vue-jeecg/src/views/newLayout/task_admin/TaskAdmin.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Content from './task_content/TaskContent.vue'
+import Content from './task_content/TaskContent'
 export default {
   props: ['iscollapse'],
   components: {
diff --git a/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/TaskContent.vue b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/TaskContent.vue
index 0f3d7d1..eada85e 100644
--- a/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/TaskContent.vue
+++ b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/TaskContent.vue
@@ -4,18 +4,75 @@
       <div class="header_left">
         <span>
           <i class="el-icon-s-order"></i>
-          部门任务
+          全部任务
         </span>
-        <span>
-          <i class="el-icon-s-management"></i>
-          需求，任务
-        </span>
-        <span class="left_smallbox"></span>
+        <!-- 任务日期范围选择 -->
+        <div class="left_smallbox">
+          <div v-for="e in time" :key="e.id">
+            <span
+              class="date"
+              @click="selectTime(e.id)"
+              :class="{ haveselected: e.select }"
+            >
+              {{ e.name }}
+            </span>
+          </div>
+        </div>
       </div>
+      <!-- 选择框 -->
       <div class="header_right">
-        <span class="right_box"></span>
-        <span class="right_box"></span>
-        <span class="right_box"></span>
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline" @keyup.enter.native="searchQuery">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="12">
+                <a-form-item class="searcha">
+                  <j-dict-select-tag
+                    v-model="queryParam.typeId"
+                    placeholder="请选择任务类型"
+                    dict-code="task_type,type_name,id"
+                  ></j-dict-select-tag>
+                </a-form-item>
+              </a-col>
+              <a-col :md="6" :sm="12">
+                <a-form-item class="searcha">
+                  <j-dict-select-tag
+                    v-model="queryParam.managerUsers"
+                    placeholder="请选责任人"
+                    dict-code="sys_user,realname,id"
+                    style="width: 100%"
+                  ></j-dict-select-tag>
+                </a-form-item>
+              </a-col>
+              <a-col :md="6" :sm="12">
+                <a-form-item class="searcha">
+                  <j-dict-select-tag
+                    v-model="queryParam.projectId"
+                    placeholder="请选择项目"
+                    dict-code="projectx,project_name,id"
+                    style="width: 100%"
+                  ></j-dict-select-tag>
+                </a-form-item>
+              </a-col>
+              <a-col :md="6" :sm="8">
+                <span
+                  style="float: left; overflow: hidden"
+                  class="table-page-search-submitButtons searcha"
+                >
+                  <a-button type="primary" @click="allUpadate" icon="search">
+                    查询
+                  </a-button>
+                  <a-button
+                    type="primary"
+                    @click="Reset"
+                    icon="reload"
+                    style="margin-left: 8px"
+                    >重置</a-button
+                  >
+                </span>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
       </div>
     </div>
     <div class="c_content">
@@ -25,32 +82,55 @@
             :title="item.status"
             :color="item.color"
             :total="item.total"
+            @add="Add"
           ></HeaderCard>
         </div>
-        <div class="status_content" @scroll="loadMore(item.id)" ref="box">
+        <div
+          class="status_content"
+          ref="box"
+          @scroll="loadMore(item.id, timeid)"
+        >
           <ContenCard
             :color="item.color"
             :projectData="item.data"
-            ref="childCard"
+            :statusNum="item.statusNum"
+            :timeid="timeid"
+            :typeId="queryParam.typeId"
+            :managerUsers="queryParam.managerUsers"
+            :projectId="queryParam.projectIda"
+            @getAllData="getAllData"
+            @delete="Delete"
+            @edit="Edit"
+            @fenjie="Decompose"
           ></ContenCard>
         </div>
       </div>
     </div>
+    <task-modal ref="modalForm" @ok="allUpadate"></task-modal>
   </div>
 </template>
 
 <script>
 import ContenCard from './content_card/ContentCard.vue'
 import HeaderCard from './content_card/HeaderCard.vue'
-// import { getTaskAdmin } from '@/api/manage.js'
 import { getAction, getFileAccessHttpUrl } from '@/api/manage.js'
+import TaskModal from '@/views/task/modules/TaskModal'
+import { mixinDevice } from '@/utils/mixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 export default {
+  mixins: [JeecgListMixin, mixinDevice],
   components: {
     ContenCard,
-    HeaderCard
+    HeaderCard,
+    TaskModal
   },
   data() {
     return {
+      url: {
+        list: '/task/task/list',
+        queryById: 'task/task/queryById',
+        delete: '/task/task/delete'
+      },
       TotalData: [
         {
           id: 0,
@@ -59,16 +139,18 @@ export default {
           color: 'black',
           data: [],
           total: '',
-          currentPage: 1
+          currentPage: 1,
+          lastPage: false
         },
         {
           id: 1,
           status: '开发中',
-          statusNum: 1,
+          statusNum: 2,
           color: 'blue',
           data: [],
           total: '',
-          currentPage: 1
+          currentPage: 1,
+          lastPage: false
         },
         {
           id: 2,
@@ -77,7 +159,8 @@ export default {
           color: 'orange',
           data: [],
           total: '',
-          currentPage: 1
+          currentPage: 1,
+          lastPage: false
         },
         {
           id: 3,
@@ -86,22 +169,43 @@ export default {
           statusNum: 4,
           data: [],
           total: '',
-          currentPage: 1
+          currentPage: 1,
+          lastPage: false
         }
       ],
-      url: {
-        list: '/task/task/list',
-        queryById: 'task/task/queryById'
-      },
-      loading: true, // 加载中
-      lastPage: false // 是否最后一页
+      time: [
+        { id: 1, name: '当天', select: false },
+        { id: 2, name: '本周', select: true },
+        { id: 3, name: '本月', select: false },
+        { id: 4, name: '全部', select: false }
+      ],
+      timeid: 2, // 选择的时间段id
+      loading: true // 加载中
+      // valueproject: '', // 项目名字查找绑定值
+      // valuepeople: '', // 负责人名字查找绑定值
+      // valuetype: '' // 任务类型查找绑定值
+    }
+  },
+  watch: {
+    // 监听时间段选择的变化
+    timeid: {
+      handler(newVal) {
+        for (let i = 0; i < this.TotalData.length; i++) {
+          this.TotalData[i].lastPage = false
+          this.TotalData[i].currentPage = 1
+        }
+      }
     }
   },
   methods: {
     // 分类获取全部数据
-    async getAllData(index) {
+    async getAllData(index, time, typeId, managerUsers, projectId) {
       const res = await getAction(this.url.list, {
-        workStatus: this.TotalData[index].statusNum
+        workStatus: this.TotalData[index].statusNum,
+        time,
+        typeId,
+        managerUsers,
+        projectId
       })
       if (res.success) {
         this.TotalData[index].data = res.result.records
@@ -109,59 +213,137 @@ export default {
         this.TotalData[index].data.forEach((element) => {
           element.headpic = getFileAccessHttpUrl(element.headpic)
           element.taskPic = getFileAccessHttpUrl(element.taskPic)
+          element.taskFile = getFileAccessHttpUrl(element.taskFile)
         })
+        this.loading = false
       } else {
         this.$message.warning(res.message)
       }
-      console.log(this.TotalData[1].data)
     },
 
     // 分页获取
-    async getDataByPage(index, current) {
+    async getDataByPage(
+      index,
+      current,
+      lastPage,
+      time,
+      typeId,
+      managerUsers,
+      projectId
+    ) {
       this.loading = true
-      if (!this.lastPage) {
+      if (!lastPage) {
         const res = await getAction(this.url.list, {
           workStatus: this.TotalData[index].statusNum,
-          pageNo: current
+          pageNo: current,
+          time,
+          typeId,
+          managerUsers,
+          projectId
         })
-        this.TotalData[index].data = [
-          ...this.TotalData[index].data,
-          ...res.result.records
-        ]
+        if (res.success) {
+          this.TotalData[index].data = [
+            ...this.TotalData[index].data,
+            ...res.result.records
+          ]
+        }
         if (res.result.records.length < 10) {
-          this.lastPage = true
+          this.TotalData[index].lastPage = true
         }
       }
     },
     // 滑动到底部加载更多
-    loadMore(index) {
+    loadMore(index, time) {
       let scrollDom = this.$refs.box
       if (
-        scrollDom[index].clientHeight + scrollDom[index].scrollTop + 1 >=
+        scrollDom[index].clientHeight + scrollDom[index].scrollTop + 2 >=
         scrollDom[index].scrollHeight
       ) {
         scrollDom[index].scrollTop -= 10
         this.TotalData[index].currentPage =
           this.TotalData[index].currentPage + 1
-        this.getDataByPage(index, this.TotalData[index].currentPage)
+        this.getDataByPage(
+          index,
+          this.TotalData[index].currentPage,
+          this.TotalData[index].lastPage,
+          time,
+          this.queryParam.typeId,
+          this.queryParam.managerUsers,
+          this.queryParam.projectId
+        )
       }
     },
 
     // 点击头像获取任务负责人信息
     async getHeadInformation() {
       // const res=await
+    },
+
+    // 选择日期内的任务
+    async selectTime(time) {
+      this.timeid = time
+      this.allUpadate()
+      // 变颜色
+      for (let i = 0; i < 4; i++) {
+        this.time[i].select = false
+        if (this.time[i].id === time) {
+          this.time[i].select = true
+        }
+      }
+    },
+    // 重置
+    Reset() {
+      this.searchReset()
+      for (let i = 0; i < 4; i++) {
+        this.getAllData(i, this.timeid)
+      }
+    },
+    // 添加
+    Add() {
+      this.handleAdd()
+    },
+    // 删除
+    Delete(id, tid) {
+      this.handleDelete(id)
+      this.getAllData(0, tid, this.queryParam.typeId)
+      this.getAllData(0, tid, this.queryParam.typeId)
+    },
+    // 编辑
+    async Edit(record, tid) {
+      await this.handleEdit(record)
+      // this.getAllData(0, tid, this.queryParam.typeId)
+      // this.getAllData(0, tid, this.queryParam.typeId)
+    },
+    // 分解任务
+    Decompose(record, tid) {
+      this.fengjieRenwu(record)
+    },
+    // 更新(根据条件更新数据)
+    allUpadate() {
+      for (let i = 0; i < 4; i++) {
+        this.TotalData[i].currentPage = 1
+        this.TotalData[i].lastPage = false
+        this.getAllData(
+          i,
+          this.timeid,
+          this.queryParam.typeId,
+          this.queryParam.managerUsers,
+          this.queryParam.projectId
+        )
+      }
     }
   },
+  mounted() {},
   created() {
-    this.getAllData(0)
-    this.getAllData(1)
-    this.getAllData(2)
-    this.getAllData(3)
+    this.allUpadate()
   }
 }
 </script>
 
 <style lang="less" scoped>
+.a {
+  width: 15rem;
+}
 .bigcontent {
   width: 100%;
   height: 100%;
@@ -169,33 +351,48 @@ export default {
     display: flex;
     justify-content: space-between;
     width: 100%;
-    height: 6%;
-    // background-color: aqua;
+    height: 9%;
+    //background-color: aqua;
     .header_left {
       display: flex;
       justify-content: space-between;
+      width: 40%;
       height: 100%;
-      width: 20%;
-      line-height: 2.2rem;
+      flex-direction: column;
       font-size: 16px;
       color: #666666;
+      // background-color: antiquewhite;
       .left_smallbox {
-        width: 1rem;
-        height: 0.5rem;
-        line-height: 2.2rem;
-        // background-color: #d9d9d9;
+        display: flex;
+        .date {
+          display: inline-block;
+          width: 3rem;
+          height: 1.5rem;
+          margin-right: 1rem;
+          border: 1px solid #306bff;
+          border-radius: 4px 4px 4px 4px;
+          text-align: center;
+          line-height: 1.5rem;
+          color: #306bff;
+          font-size: 14px;
+          cursor: pointer;
+        }
+        .date:hover {
+          color: #ffffff;
+          background: #306bff;
+          border-radius: 4px 4px 4px 4px;
+        }
+        .haveselected {
+          color: #ffffff;
+          background: #306bff;
+        }
       }
     }
     .header_right {
-      width: 30%;
+      width: 60%;
       height: 100%;
-      display: flex;
-      justify-content: space-between;
-      .right_box {
-        display: inline-block;
-        width: 30%;
-        height: 100%;
-        background: #d9d9d9;
+      .searcha {
+        margin-top: 16%;
       }
     }
   }
@@ -204,19 +401,21 @@ export default {
     justify-content: space-between;
     width: 100%;
     height: 100%;
-    //background-color: aquamarine;
+    margin-top: 1%;
+    //background-color: rgb(48, 214, 159);
     .content_box {
       width: 24%;
       height: 100%;
-      //background-color: rgb(230, 186, 129);
+      // background-color: rgb(230, 186, 129);
       .status_title {
         height: 8%;
         margin-bottom: 2%;
+        // background-color: #d9d9d9;
       }
       .status_content {
-        height: 90%;
-        overflow-y: scroll;
-        // background-color: rgb(224, 163, 163);
+        height: 85%;
+        overflow: scroll;
+        //background-color: rgb(224, 163, 163);
       }
     }
     // 滚动条消失
diff --git a/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/ContentCard.vue b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/ContentCard.vue
index a14de8c..dd4a336 100644
--- a/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/ContentCard.vue
+++ b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/ContentCard.vue
@@ -1,146 +1,276 @@
 <template>
   <div class="cardcard">
-    <template v-for="item in projectData">
-      <div class="card_content" :key="item.id">
-        <el-card
-          class="little_card"
-          :class="
-            color == 'black'
-              ? { card_black: true }
-              : color == 'blue'
-              ? { card_blue: true }
-              : color == 'orange'
-              ? { card_orange: true }
-              : { card_green: true }
-          "
-        >
-          <div style="padding: 0rem 0rem 0 1.5rem">
-            <div class="admin_title">
-              <template>
-                <el-checkbox class="check"></el-checkbox>
-              </template>
-              <!-- 任务总述 -->
-              <el-tooltip
-                v-if="item.taskName.length > 13"
-                :content="item.taskName"
-                placement="top"
-              >
-                <span>
+    <Container
+      group-name="col"
+      @drop="(e) => onCardDrop(e)"
+      :get-child-payload="getCardPayload()"
+      drag-class="card-ghost"
+      drop-class="card-ghost-drop"
+      :drop-placeholder="dropPlaceholderOptions"
+      class="draggable-container"
+    >
+      <Draggable v-for="item in proData" :key="item.id">
+        <div class="card_content" :key="item.id">
+          <el-card
+            ref="card"
+            class="little_card"
+            :class="
+              color == 'black'
+                ? { card_black: true }
+                : color == 'blue'
+                ? { card_blue: true }
+                : color == 'orange'
+                ? { card_orange: true }
+                : { card_green: true }
+            "
+          >
+            <div style="padding: 0rem 0rem 0 1.5rem">
+              <div class="admin_title">
+                <template>
+                  <el-checkbox class="check"></el-checkbox>
+                </template>
+                <!-- 任务总述 -->
+                <el-tooltip
+                  v-if="item.taskName.length > 11"
+                  :content="item.taskName"
+                  placement="top"
+                >
+                  <span>
+                    {{
+                      item.taskName.length > 11
+                        ? item.taskName.slice(0, 9) + '...'
+                        : item.taskName
+                    }}
+                  </span>
+                </el-tooltip>
+                <span v-else>
                   {{
-                    item.taskName.length > 13
-                      ? item.taskName.slice(0, 11) + '...'
+                    item.taskName.length > 18
+                      ? item.taskName.slice(0, 17) + '...'
                       : item.taskName
                   }}
                 </span>
-              </el-tooltip>
-              <span v-else>
-                {{
-                  item.taskName.length > 18
-                    ? item.taskName.slice(0, 17) + '...'
-                    : item.taskName
-                }}
-              </span>
+                <span>
+                  <el-dropdown
+                    trigger="click"
+                    placement="bottom-start"
+                    @command="handleCommand"
+                  >
+                    <span class="el-dropdown-link">
+                      <i
+                        class="el-icon-more"
+                        style="
+                          display: inline-block;
+                          transform: rotate(90deg);
+                          cursor: pointer;
+                        "
+                      ></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item
+                        v-for="i in operateName"
+                        :key="i.id"
+                        :command="{ id: i.id, content: item }"
+                      >
+                        {{ i.name }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                  <!-- <a @click="handleEdit(record)">编辑</a
+                  ><a-divider type="vertical" /> -->
+                </span>
+              </div>
+              <div class="union" v-if="item.typePid_dictText != null">
+                <span>任务类型：</span>
+                <span>{{ item.typePid_dictText }}</span>
+              </div>
+              <div class="union" v-if="item.level_dictText != null">
+                <span>任务层级：</span>
+                <span>{{ item.level_dictText }}</span>
+              </div>
+              <div class="union">
+                <span>对应项目：</span>
+                <span>{{ item.union.split('-')[0] }}</span>
+              </div>
+              <div class="union" v-if="item.union.split('-')[1] != null">
+                <span>对应模块：</span>
+                <span>{{ item.union.split('-')[1] }}</span>
+              </div>
+              <div class="union" v-if="item.union.split('-')[2] != null">
+                <span>对应功能：</span>
+                <span>{{ item.union.split('-')[2] }}</span>
+              </div>
+              <div class="union" v-if="item.upperTaskName != null">
+                <span>上级任务：</span>
+                <span>{{ item.upperTaskName }}</span>
+              </div>
 
-              <!-- 头像 -->
-              <span class="pic" @click="LookPeople(item.managerUsers)">
-                <el-tooltip
-                  :content="item.managerUsers_dictText"
-                  placement="top"
-                >
+              <!-- 项目内容/判断类型（文字？文件？照片） -->
+              <div class="substance wordtext">
+                <!-- <span>任务内容：</span> -->
+                <div v-if="item.contentType == 'text'">
+                  {{ item.taskDescribe }}
+                </div>
+                <!-- 类型是图片 -->
+                <div v-else-if="item.contentType == 'image'" class="sub_image">
                   <img
-                    :src="item.headpic"
+                    :src="item.taskPic"
                     alt=""
                     style="
                       width: 100%;
                       height: 100%;
-                      cursor: pointer;
-                      border-radius: 50%;
+                      border-radius: 10px 10px 10px 10px;
                     "
                   />
-                </el-tooltip>
-              </span>
-            </div>
-
-            <!-- 项目内容/判断类型（文字？文件？照片） -->
-            <div class="substance">
-              <div v-if="item.contentType == 'text'">
-                {{ item.taskDescribe }}
-              </div>
-              <!-- 类型是图片 -->
-              <div v-else-if="item.contentType == 'image'" class="sub_image">
-                <img
-                  :src="item.taskPic"
-                  alt=""
-                  style="
-                    width: 100%;
-                    height: 100%;
-                    border-radius: 10px 10px 10px 10px;
-                  "
-                />
+                </div>
+                <!-- 类型是文档 -->
+                <div
+                  v-else-if="item.contentType == 'file'"
+                  class="sub_document"
+                >
+                  <div class="document">
+                    <img
+                      src="../../../../../../public/filepic.png"
+                      alt=""
+                      style="width: 100%; height: 100%"
+                    />
+                  </div>
+                  <div class="s_operate">
+                    <el-link
+                      class="s_c_operate"
+                      @click="lookFile(item.taskFile)"
+                    >
+                      点击查看
+                    </el-link>
+                    <el-link class="s_c_operate" :href="item.taskFile">
+                      下载文档
+                    </el-link>
+                  </div>
+                </div>
+                <div></div>
               </div>
-              <!-- 类型是文档 -->
-              <div v-else-if="item.contentType == 'file'" class="sub_document">
-                <div class="document">
-                  <iframe
-                    :src="item.taskFile"
-                    frameborder="0"
-                    style="
-                      width: 100%;
-                      height: 100%;
-                      border-radius: 10px 10px 10px 10px;
-                    "
-                  ></iframe>
+              <!-- 日期 -->
+              <div class="time">
+                <!-- <i class="el-icon-date" style="font-size: 18px"></i> -->
+                <div>任务周期：</div>
+                <div class="timearea">
+                  <span class="starttime">
+                    {{ (item.startTime || '').slice(0, 10) }}
+                  </span>
+                  <span>-</span>
+                  <span class="endtime">
+                    {{ (item.expectedEndTime || '').slice(0, 10) }}
+                  </span>
                 </div>
-                <div class="s_operate">
-                  <div>点击查看</div>
-                  <div>上传文档</div>
+              </div>
+              <div class="time">
+                <div>发布提交：</div>
+                <div class="timearea">
+                  <span class="starttime" v-if="item.createTime != null">
+                    {{ (item.createTime || '').slice(0, 10) }}
+                  </span>
+                  <span class="starttime" v-else> 待提交 </span>
+                  <span>-</span>
+                  <span class="endtime" v-if="item.publishTime != null">
+                    {{ (item.publishTime || '').slice(0, 10) }}
+                  </span>
+                  <span class="endtime" v-else> 待提交 </span>
                 </div>
               </div>
-              <div></div>
-            </div>
-            <div class="time">
-              <i class="el-icon-date" style="font-size: 18px"></i>
-              <!-- <span>项目工期:</span> -->
-              <div class="timearea">
-                <!-- <span class="starttime">
-                  {{ (item.startTime || '').slice(0, 10) }}
-                </span>
-                <span>至</span> -->
-                <span>截止到</span>
-                <span class="endtime">
-                  {{ (item.expectedEndTime || '').slice(0, 10) }}
-                </span>
+              <div class="time">
+                <div>任务时长：</div>
+                <div class="timearea">
+                  <span class="starttime" v-if="item.expectedDuration != null">
+                    {{ item.expectedDuration }}
+                  </span>
+                  <span class="starttime" v-else> 待提交 </span>
+                  <span>-</span>
+                  <span class="endtime" v-if="item.realDuration != null">
+                    {{ item.realDuration }}
+                  </span>
+                  <span class="endtime" v-else> 待提交 </span>
+                </div>
               </div>
-            </div>
-            <!-- 进度 -->
-            <div class="schedule">
+              <!-- 进度 -->
+              <!-- <div class="schedule">
               <span>项目进度:</span>
               <span class="s_tiao">
-                <!-- :percentage="Number(item.schedule)" -->
                 <el-progress :percentage="30" :show-text="false"></el-progress>
               </span>
-            </div>
-            <div class="operate">
-              <div class="o_left">
-                <el-button
-                  type="primary"
-                  round
-                  class="but"
-                  size="small"
-                ></el-button>
-                <el-button
-                  type="success"
-                  round
-                  class="but"
-                  size="small"
-                ></el-button>
+            </div> -->
+
+              <!-- 任务类型标签/任务负责人头像 -->
+              <div class="operate">
+                <div class="o_left">
+                  <div
+                    class="but"
+                    :class="
+                      item.typeId_dictText === '前端开发'
+                        ? { orange: true }
+                        : item.typeId_dictText === '日常业务'
+                        ? { green: true }
+                        : item.typeId_dictText === '测试'
+                        ? { purple: true }
+                        : item.typeId_dictText === '编码'
+                        ? { lakeblue: true }
+                        : item.typeId_dictText === 'UI设计'
+                        ? { blue: true }
+                        : item.typeId_dictText === '文档'
+                        ? { pink: true }
+                        : { colors: true }
+                    "
+                  >
+                    {{ item.typeId_dictText }}
+                  </div>
+                  <div class="leval">{{ item.workLevel }}</div>
+                </div>
+
+                <!-- 头像 -->
+                <div class="headpic">
+                  <div
+                    v-for="(ii, index) in (item.headpic || '')
+                      .split(',')
+                      .slice(0, 3)"
+                    :key="index"
+                  >
+                    <el-tooltip
+                      :content="item.managerUsers_dictText.split(',')[index]"
+                      placement="top"
+                    >
+                      <span
+                        class="pic"
+                        @click="LookPeople(item.managerUsers)"
+                        :style="{ left: index - 1 + 0.1 * index + 'rem' }"
+                      >
+                        <img
+                          :src="item.headpic"
+                          alt=""
+                          style="
+                            width: 100%;
+                            height: 100%;
+                            cursor: pointer;
+                            border-radius: 50%;
+                          "
+                        />
+                      </span>
+                    </el-tooltip>
+                  </div>
+                  <span
+                    class="pic"
+                    @click="LookPeople(item.managerUsers)"
+                    style="left: 2.2rem"
+                    v-if="(item.headpic || '').split(',').length > 3"
+                  >
+                    +3
+                  </span>
+                </div>
               </div>
-              <span class="edit">编辑</span>
             </div>
-          </div>
-        </el-card>
-      </div>
-    </template>
+          </el-card>
+        </div>
+      </Draggable>
+    </Container>
+    <el-empty description="暂无数据" v-if="proData.length === 0"></el-empty>
     <!-- 弹出框 -->
     <el-drawer
       :visible.sync="drawer"
@@ -214,15 +344,65 @@
         </div>
       </div>
     </el-drawer>
+    <task-modal ref="modalForm" @ok="modalFormOk"></task-modal>
   </div>
 </template>
 
 <script>
+import { Container, Draggable } from 'vue-smooth-dnd'
+import { putAction } from '@/api/manage.js'
+import TaskModal from '@/views/task/modules/TaskModal'
+import { mixinDevice } from '@/utils/mixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+
 export default {
-  props: ['color', 'projectData'],
+  mixins: [JeecgListMixin, mixinDevice],
+  components: {
+    Container,
+    Draggable,
+    TaskModal
+  },
+
+  props: [
+    'color',
+    'projectData',
+    'statusNum',
+    'timeid',
+    'typeId',
+    'managerUsers',
+    'projectId'
+  ],
   data() {
     return {
-      drawer: false
+      url: {
+        list: '/task/task/list',
+        updateWorkStatus: '/task/task/updateWorkStatus',
+        delete: '/task/task/delete',
+        deleteBatch: '/task/task/deleteBatch',
+        fengjie: '/task/task/fengjie'
+      },
+      drawer: false,
+      operateName: [
+        { id: 1, name: '分解任务' },
+        { id: 2, name: '关联任务' },
+        { id: 3, name: '子级任务' },
+        { id: 4, name: '编辑任务' },
+        { id: 5, name: '删除任务' }
+      ],
+      headpics: [],
+      proData: [],
+      dropPlaceholderOptions: {
+        className: 'drop-preview',
+        animationDuration: '150',
+        showOnTop: true
+      }
+    }
+  },
+  watch: {
+    projectData: {
+      handler(newVal) {
+        this.proData = newVal
+      }
     }
   },
   methods: {
@@ -249,7 +429,78 @@ export default {
           done()
         })
         .catch((_) => {})
+    },
+
+    // 点击任务操作框
+    handleCommand(command) {
+      let { id, content } = command
+      if (id === 1) {
+        this.$emit('fenjie', content, this.timeid)
+      } else if (id === 5) {
+        this.$emit('delete', content.id, this.timeid)
+      } else if (id === 4) {
+        this.$emit('edit', content, this.timeid)
+      }
+    },
+
+    // 拖拽
+    onCardDrop(dropResult) {
+      const { removedIndex, addedIndex, payload } = dropResult
+      if (removedIndex !== null || addedIndex !== null) {
+        if (addedIndex !== null && payload) {
+          this.changeStatu(payload.id, this.statusNum)
+        }
+        this.proData = this.applyDrag(this.proData, dropResult)
+      }
+      // 重新调用一下获取数据的方法（主要是为了改变总数）
+      for (let i = 0; i < 4; i++) {
+        this.$emit(
+          'getAllData',
+          i,
+          this.timeid,
+          this.typeId,
+          this.managerUsers,
+          this.projectId
+        )
+      }
+    },
+    getCardPayload(columnId) {
+      return (index) => this.proData[index]
+    },
+    applyDrag(arr, dragResult) {
+      const { removedIndex, addedIndex, payload } = dragResult
+      if (removedIndex === null && addedIndex === null) return arr
+      const result = [...arr]
+      let itemToAdd = payload
+      if (removedIndex !== null) {
+        itemToAdd = result.splice(removedIndex, 1)[0]
+      }
+      if (addedIndex !== null) {
+        result.splice(addedIndex, 0, itemToAdd)
+      }
+      return result
+    },
+
+    // 拖拽改变状态
+    async changeStatu(id, workStatus) {
+      const res = await putAction(this.url.updateWorkStatus, { id, workStatus })
+      if (res.success) {
+      }
+    },
+    // 查看文档
+    lookFile(fileurl) {
+      let Base64 = require('js-base64').Base64
+      this.dialogurl =
+        'http://127.0.0.1:8012/onlinePreview?url=' +
+        encodeURIComponent(Base64.encode(fileurl))
+      window.open(this.dialogurl)
     }
+  },
+  mounted() {
+    this.proData = this.projectData
+  },
+  created() {
+    this.proData = this.projectData
   }
 }
 </script>
@@ -258,7 +509,7 @@ export default {
 .cardcard {
   width: 100%;
   height: 100%;
-  // overflow: scroll;
+  //overflow: scroll;
   .card_content {
     width: 99%;
     .little_card {
@@ -279,20 +530,17 @@ export default {
           position: absolute;
           left: -1.5rem;
         }
-        .pic {
-          position: relative;
-          display: inline-block;
-          width: 1rem;
-          height: 1rem;
-          border-radius: 50%;
-          // background-color: rgb(10, 228, 155);
-        }
+      }
+      .union {
+        margin-top: 0.5rem;
+        font-size: 12px;
+        color: #999999;
       }
       // 项目内容
       .substance {
         margin-top: 1rem;
-        font-size: 14px;
-        color: #999999;
+        font-size: 13px;
+        color: #555555;
         .sub_image {
           width: 100%;
           height: 20vh;
@@ -302,9 +550,9 @@ export default {
         .sub_document {
           display: flex;
           width: 100%;
-          height: 20vh;
+          height: 15vh;
           .document {
-            width: 55%;
+            width: 60%;
             height: 100%;
             background-color: #52c93f;
             border-radius: 10px 10px 10px 10px;
@@ -312,37 +560,47 @@ export default {
           .s_operate {
             position: relative;
             top: 2.7rem;
-            left: 1.5rem;
+            left: 1rem;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            width: 25%;
+            // width: 40%;
             height: 40%;
-            color: #3e75e6;
+
+            .s_c_operate {
+              border-bottom: 1px solid #9f9f9f;
+              cursor: pointer;
+              color: #9f9f9f;
+            }
+            .s_c_operate:hover {
+              border-bottom: 1px solid #3e75e6;
+              color: #3e75e6;
+            }
           }
         }
       }
       // 项目时间
       .time {
         display: flex;
-        margin-top: 1rem;
-        font-size: 13px;
+        margin-top: 0.7rem;
+        font-size: 12px;
         color: #999999;
+        //background-color: #33bfff;
         .timearea {
-          width: 80%;
-          margin-left: 1rem;
-          //background-color: #3e75e6;
+          width: 70%;
           .starttime {
-            width: 45%;
-            padding: 0.1rem;
+            width: 48%;
+            // padding: 0 0.1rem;
             display: inline-block;
             background: #f0f0f0;
+            text-align: center;
           }
           .endtime {
-            width: 45%;
-            padding: 0.1rem;
+            width: 48%;
+            // padding: 0 0.1rem;
             display: inline-block;
-            //background: #f0f0f0;
+            background: #f0f0f0;
+            text-align: center;
           }
         }
       }
@@ -359,7 +617,7 @@ export default {
           margin-left: 0.3rem;
         }
       }
-      //操作
+      //标签/头像
       .operate {
         display: flex;
         justify-content: space-between;
@@ -370,12 +628,61 @@ export default {
           width: 60%;
           // background-color: antiquewhite;
           .but {
-            width: 50%;
+            padding: 0.2rem 0.6rem;
+            font-size: 12px;
+          }
+          .leval {
+            margin-left: 1rem;
+            padding: 0.2rem 0.6rem;
+            color: #5dddfd;
+            border-radius: 4px 4px 4px 4px;
+            background-color: #e4f8f8;
+            font-size: 12px;
+          }
+          .orange {
+            background: #fff6f0;
+            color: #ffb580;
+          }
+          .blue {
+            background: #f0f4ff;
+            color: #306bff;
+          }
+          .green {
+            background: #f3faf0;
+            color: #78c552;
+          }
+          .lakeblue {
+            background: #f0faff;
+            color: #33bfff;
+          }
+          .purple {
+            background: #f7f0ff;
+            color: #bb80ff;
+          }
+          .pink {
+            background: #fff0fc;
+            color: #ff80ee;
+          }
+          .colors {
+            background: #fff0f7;
+            color: #ff80d9;
           }
         }
-        .edit {
-          font-size: 13px;
-          font-weight: 600;
+
+        .headpic {
+          position: relative;
+          width: 20%;
+          //background-color: #b8f5af;
+          .pic {
+            position: absolute;
+            display: inline-block;
+            width: 1.5rem;
+            height: 1.5rem;
+            border-radius: 50%;
+            border: 2px solid #ffffff;
+            background-color: #33bfff;
+            cursor: pointer;
+          }
         }
       }
     }
@@ -498,4 +805,20 @@ export default {
 /deep/.el-drawer {
   width: 24% !important;
 }
+.card-ghost {
+  transition: transform 0.18s ease;
+  transform: rotateZ(5deg);
+}
+.card-ghost-drop {
+  transition: transform 0.18s ease-in-out;
+  transform: rotateZ(0deg);
+}
+.drop-preview {
+  background-color: rgba(176, 176, 243, 0.1);
+  border: 1px dashed rgb(63, 128, 194);
+  margin: 5px;
+}
+.wordtext {
+  word-break: break-all;
+}
 </style>
diff --git a/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/HeaderCard.vue b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/HeaderCard.vue
index ec72c50..9b22b96 100644
--- a/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/HeaderCard.vue
+++ b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/HeaderCard.vue
@@ -16,7 +16,7 @@
         >{{ title }}<span class="number">{{ total }}</span></span
       >
       <span class="icon">
-        <i class="el-icon-plus"></i>
+        <i class="el-icon-plus" @click="AddTask"></i>
         <i class="el-icon-more" style="margin-left: 0.5rem"></i>
       </span>
     </div>
@@ -25,7 +25,12 @@
 
 <script>
 export default {
-  props: ['title', 'color', 'total']
+  props: ['title', 'color', 'total'],
+  methods: {
+    AddTask() {
+      this.$emit('add')
+    }
+  }
 }
 </script>
 
@@ -42,14 +47,15 @@ export default {
   .number {
     position: relative;
     display: inline-block;
-    min-width: 1.5rem;
+    min-width: 2rem;
     min-height: 1.5rem;
     margin-left: 1rem;
-    border-radius: 50%;
-    border: 2px solid #999999;
+    background: #ffffff;
+    border-radius: 1000px 1000px 1000px 1000px;
+    border: 1.5px solid #e2e8f0;
     text-align: center;
     line-height: 1.3rem;
-    color: #999999;
+    color: #94a3b8;
   }
   .icon {
     font-weight: bold;