diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3552302..99854a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -208,6 +208,7 @@
  - | 小红点api缓存修改 | [e992343](https://dd.tall.wiki/gitea/wally/tall-mui-3-project/commits/e992343)
  - | 插件查询及展示 | [4dba770](https://dd.tall.wiki/gitea/wally/tall-mui-3-project/commits/4dba770)
  - | 整理代码 | [7a55315](https://dd.tall.wiki/gitea/wally/tall-mui-3-project/commits/7a55315)
+ - | 新建任务界面完善 | [2033b55](https://dd.tall.wiki/gitea/wally/tall-mui-3-project/commits/2033b55)
  - | 日历的更改 | [7353ac8](https://dd.tall.wiki/gitea/wally/tall-mui-3-project/commits/7353ac8)
  - | 测试接口 | [215e074](https://dd.tall.wiki/gitea/wally/tall-mui-3-project/commits/215e074)
  - | 添加弹框动画 | [8903854](https://dd.tall.wiki/gitea/wally/tall-mui-3-project/commits/8903854)
diff --git a/src/apis/task.js b/src/apis/task.js
index a2eabf0..baa8d40 100644
--- a/src/apis/task.js
+++ b/src/apis/task.js
@@ -6,6 +6,10 @@ const install = (Vue, vm) => {
   vm.$u.api.getRegularTask = param => vm.$u.post(`${uni.$t.domain}/task/regular`, param);
   //修改任务状态
   vm.$u.api.updateTaskType = param => vm.$u.post(`${uni.$t.domain}/task/type`, param);
+  //新建任务
+  vm.$u.api.saveTask = param => vm.$u.post(`${uni.$t.domain}/task/save`, param);
+  //克隆任务
+  vm.$u.api.cloneTask = param => vm.$u.post(`${uni.$t.domain}/task/clone`, param);
 };
 
 export default { install };
diff --git a/src/components/Title/Title.vue b/src/components/Title/Title.vue
index 6ee83af..320acfa 100644
--- a/src/components/Title/Title.vue
+++ b/src/components/Title/Title.vue
@@ -30,33 +30,71 @@
     </view>
     <!-- 分享项目弹窗 -->
     <ShareProject v-if="secondShow" class="secondPopup" />
-    <!-- 新建项目弹窗 -->
-    <NewProjects @closeMask="closeMask" class="thirdPopup flex transition-transform" v-if="newProjectsShow" />
+    <!-- 新建任务弹窗 -->
+    <CreateTask
+      :startTime="startTime"
+      :endTime="endTime"
+      @showTime="showTime"
+      @closeMask="closeMask"
+      class="thirdPopup flex transition-transform"
+      v-if="createTaskShow"
+    />
+
+    <u-picker title="开始时间" mode="time" v-model="showStart" :params="params" @confirm="confirmStartTime"></u-picker>
+    <u-picker title="结束时间" mode="time" v-model="showEnd" :params="params" @confirm="confirmEndTime"></u-picker>
   </view>
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex';
-import NewProjects from './components/NewProjects.vue';
+import CreateTask from './components/CreateTask.vue';
 import ShareProject from './components/ShareProject.vue';
 
 export default {
   name: 'ProjectTitle',
-  components: { NewProjects, ShareProject },
+  components: { CreateTask, ShareProject },
   data() {
     return {
       show: false, //右上角 ... 显示
-      newProjectsShow: false, //新建项目显示
+      createTaskShow: false, //新建项目显示
       secondShow: false, //分享项目显示
       maskShow: false, //遮罩显示
+      showStart: false,
+      showEnd: false,
+      startTime: '', // 新建任务的开始时间
+      endTime: '', // 新建任务的截止时间
+      params: {
+        year: true,
+        month: true,
+        day: true,
+        hour: true,
+        minute: true,
+        second: false,
+      },
     };
   },
+
   computed: {
     ...mapState('project', ['project']),
     ...mapGetters('user', ['userId']),
   },
 
   methods: {
+    showTime() {
+      this.showStart = !this.showStart;
+    },
+
+    // 选择开始时间
+    confirmStartTime(e) {
+      this.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
+      this.showEnd = true;
+    },
+
+    // 选择结束时间
+    confirmEndTime(e) {
+      this.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
+    },
+
     // 点击返回按钮
     onBack() {
       // eslint-disable-next-line no-undef
@@ -93,7 +131,7 @@ export default {
       // 打开遮罩
       this.maskShow = true;
       // 打开新建项目弹窗
-      this.newProjectsShow = true;
+      this.createTaskShow = true;
     },
 
     //分享项目
@@ -113,7 +151,7 @@ export default {
       // 关闭分享项目弹窗
       this.secondShow = false;
       // 关闭新建项目弹窗
-      this.newProjectsShow = false;
+      this.createTaskShow = false;
     },
   },
 };
diff --git a/src/components/Title/components/NewProjects.vue b/src/components/Title/components/CreateTask.vue
similarity index 50%
rename from src/components/Title/components/NewProjects.vue
rename to src/components/Title/components/CreateTask.vue
index c02def1..c78ac5c 100644
--- a/src/components/Title/components/NewProjects.vue
+++ b/src/components/Title/components/CreateTask.vue
@@ -4,20 +4,22 @@
       <!-- 项目名称 -->
       <view class="mb-3 font-bold text-base flex justify-center">新建任务</view>
       <div class="flex items-center mb-2">
-        <div class="mr-2">名称</div>
-        <u-input v-model="nameValue" :type="type" :border="border" />
+        <div>名称<span class="text-red-500">*</span>：</div>
+        <u-input v-model="name" :type="type" :border="border" />
       </div>
       <!-- 起止时间 -->
-      <div class="flex items-center mb-2">
-        <div class="mr-2">起止-截止时间</div>
-        <u-input v-model="timeValue" :type="type" :border="border" />
+      <div class="mb-2">
+        <div>起止时间：</div>
+        <u-input placeholder="请选择起止时间" v-model="timeValue" :type="type" :border="border" @click="$emit('showTime')" />
+        <!-- <u-picker mode="time" v-model="showChooseTime"></u-picker> -->
+        <!-- <u-input v-model="timeValue" :type="type" :border="border" /> -->
       </div>
       <!-- 多选框 -->
       <div class="flex justify-between items-center">
-        <div class="mr-2">负责人</div>
+        <div>负责人<span class="text-red-500">*</span>：</div>
         <div label="负责人" class="flex-1">
           <u-dropdown ref="uDropdown" placeholder="请选择负责人">
-            <u-dropdown-item :title="dropTitle">
+            <u-dropdown-item :title="roleList">
               <view class="slot-content bg-white">
                 <div
                   class="flex flex-row justify-between mb-1 drop-item"
@@ -42,30 +44,30 @@
       <div v-if="show" class="mb-6">
         <!-- 描述 -->
         <div class="flex items-center mb-2">
-          <div class="mr-2">描述</div>
-          <u-input v-model="decripeValue" :type="type" :border="border" />
+          <div>描述：</div>
+          <u-input v-model="description" :type="type" :border="border" />
         </div>
         <!-- 所属项目 -->
         <div class="w flex items-center mb-2">
-          <div class="mr-2">所属项目</div>
-          <div>当前项目</div>
+          <div>所属项目<span class="text-red-500">*</span>：</div>
+          <div>{{ project.name }}</div>
         </div>
         <!-- 所属任务 -->
         <div class="w flex items-center mb-2">
-          <div class="mr-2">所属任务</div>
-          <div>当前任务</div>
+          <div>所属任务：</div>
+          <div></div>
         </div>
         <!-- 上道工序 -->
         <div class="flex items-center mb-2">
-          <div class="mr-2">上道工序</div>
-          <u-input v-model="lastValue" :type="type" :border="border" />
+          <div>上道工序：</div>
+          <u-input v-model="processTaskId" :type="type" :border="border" />
         </div>
         <!-- 检查人多选框 -->
         <div class="flex justify-between items-center">
-          <div class="mr-2">检查人</div>
+          <div>检查人<span class="text-red-500">*</span>：</div>
           <div label="检查人" class="flex-1">
             <u-dropdown ref="dropdown">
-              <u-dropdown-item :title="secondDropTitle">
+              <u-dropdown-item :title="checkerList">
                 <view class="slot-content bg-white">
                   <div
                     class="flex flex-row justify-between mb-1 drop-item"
@@ -83,160 +85,205 @@
         </div>
         <!-- 是否是日常任务 -->
         <div class="flex justify-between items-center mt-6">
-          是否是日常任务
-          <u-switch v-model="checked" size="28"></u-switch>
+          是否是日常任务：
+          <u-switch v-model="isGlobal" size="28"></u-switch>
         </div>
         <div class="mt-6">
-          <div>交付物</div>
-          <u-input placeholder="交付物名称1" :type="type" :border="border" />
-          <u-input placeholder="交付物名称2" :type="type" :border="border" />
+          <div>交付物：</div>
+          <div v-for="(sort, sortIndex) in deliverSort" :key="sort.id">
+            <u-input @click="addDeliver(sortIndex)" v-model="sort.name" placeholder="交付物名称1" :type="type" :border="border" />
+          </div>
         </div>
       </div>
       <div class="flex items-center mb-6">
-        <u-button type="primary" size="medium" @click="$emit('closeMask')">提交</u-button>
+        <u-button type="primary" size="medium" @click="setParameters">提交</u-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
+  props: {
+    startTime: {
+      type: String,
+      default: '',
+    },
+    endTime: {
+      type: String,
+      default: '',
+    },
+  },
   data() {
     return {
       projects: ['我是睡', '我叫什么', '我的名字是'],
       title: 'tall1',
       arrow: true,
       show: false,
-      checked: false, //开关选择器默认关闭
-      nameValue: '', //名称
+      isGlobal: false, //是否日常任务
+      name: '', //名称
+      showChooseTime: false,
       timeValue: '', //起止时间
-      decripeValue: '', //描述
-      projectValue: '', //所属项目
+      description: '', //描述
       projectShow: false, //所属项目模糊搜索展示
-      taskValue: '', //所属任务
-      lastValue: '', //上道工序
+      processTaskId: '', //上道工序
       type: 'text',
       border: true,
-      dropTitle: undefined, //负责人默认多选
-      secondDropTitle: undefined, //检查人默认多选
-      // 负责人下拉多选列表
-      roleOptions: [],
-      // 检查人下拉多选列表
-      checkoutOptions: [],
-      // 交付物
-      diliverables: [],
-      // 所属项目下拉单选
-      projectOptions: [
-        {
-          label: 'tall1',
-          value: 1,
-        },
-        {
-          label: 'tall2',
-          value: 2,
-        },
-        {
-          label: 'tall3',
-          value: 3,
-        },
-      ],
+      roleList: undefined, //负责人默认多选
+      checkerList: undefined, //检查人默认多选
+      roleOptions: [], // 负责人下拉多选列表
+      checkoutOptions: [], // 检查人下拉多选列表
+      roleIdList: [], // 选中的负责人id
+      checkerIdList: [], // 选中的检查人id
+      deliverables: [], // 交付物
+      deliverSort: [{ id: 1, name: '' }], // 交付物排序
     };
   },
 
-  computed: { ...mapState('role', ['visibleRoles', 'invisibleRoles']) },
+  computed: {
+    ...mapState('role', ['visibleRoles']),
+    ...mapState('project', ['project']),
+    ...mapGetters('project', ['projectId']),
+  },
+
+  watch: {
+    endTime(val) {
+      if (val) {
+        this.timeValue = this.startTime + ' 至 ' + val;
+      }
+    },
+  },
 
   mounted() {
-    let newArr = [];
-    if (this.visibleRoles.length || this.invisibleRoles.length) {
-      const arr = this.visibleRoles.concat(this.invisibleRoles);
-      arr.forEach(role => {
-        let item = { id: '', name: '', dropdownShow: false, status: false };
-        item.id = role.id;
-        item.name = role.name;
-        newArr.push(item);
+    // 获取负责人和检查人列表
+    if (this.visibleRoles.length) {
+      this.visibleRoles.forEach(role => {
+        role.dropdownShow = false;
+        role.status = false;
       });
     }
-    this.roleOptions = [...newArr];
-    this.checkoutOptions = [...newArr];
+    this.roleOptions = this.$u.deepClone(this.visibleRoles);
+    this.checkoutOptions = this.$u.deepClone(this.visibleRoles);
   },
 
   methods: {
-    isProjectShow($event) {
-      console.log(this.projectValue);
-      console.log($event);
-      this.projectShow = true;
-    },
-
-    // 下拉多选确定按钮
-    closeDropdown() {
-      this.$refs.uDropdown.close();
-    },
-
-    // 下拉多选确定按钮
-    dropdownClosed() {
-      this.$refs.dropdown.close();
-    },
-
     // 负责人下拉多选选中
     change(index) {
-      console.log(index);
       let arr = [...this.roleOptions];
       // 选择多选项图标的展示
       arr[index].dropdownShow = !arr[index].dropdownShow;
       // 多选展示的改变
-      this.dropTitle = arr[index].name;
+      this.roleList = arr[index].name;
       let shows = '';
       // 遍历arr，如果选中，添加到多选展示框上
       arr.map(val => {
         if (val.dropdownShow === true) {
           shows += val.name + ',';
+          this.roleIdList.push(val.id);
         }
       });
       this.roleOptions = [...arr];
       // 删除最后的','
-      this.dropTitle = shows.slice(0, shows.length - 1);
-      console.log(this.dropTitle);
+      this.roleList = shows.slice(0, shows.length - 1);
     },
+
     // 检查人下拉多选选中
     choose(index) {
-      console.log(index);
       let arr = [...this.checkoutOptions];
       // 选择多选项图标的展示
       arr[index].dropdownShow = !arr[index].dropdownShow;
       // 多选展示的改变
-      this.secondDropTitle = arr[index].name;
+      this.checkerList = arr[index].name;
       let shows = '';
       // 遍历arr，如果选中，添加到多选展示框上
       arr.map(val => {
         if (val.dropdownShow === true) {
           shows += val.name + ',';
+          this.checkerIdList.push(val.id);
         }
       });
       this.checkoutOptions = [...arr];
       // 删除最后的','
-      this.secondDropTitle = shows.slice(0, shows.length - 1);
-      console.log(this.secondDropTitle);
-      // this.dropTitle = arr[value - 1].name;
+      this.checkerList = shows.slice(0, shows.length - 1);
+      // this.roleList = arr[value - 1].name;
     },
 
-    // 所属项目下拉单选框
-    // project(value) {
-    //   console.log(value);
-    //   this.title = this.projectOptions[value - 1].label;
-    // },
-
     // 打开下拉框
     openDropdown() {
       this.arrow = !this.arrow;
       this.show = true;
     },
+
     // 关闭下拉框
     closeSecondDropdown() {
       this.arrow = !this.arrow;
       this.show = false;
     },
+
+    // 设置交付物 TODO
+    addDeliver(e) {
+      console.log('e: ', e, this.deliverSort[0].name);
+    },
+
+    // 设置提交参数
+    async setParameters() {
+      const { projectId, name, startTime, endTime, roleIdList, description, processTaskId, checkerIdList, isGlobal, deliverables } = this;
+      if (!name) {
+        this.$t.ui.showToast('请输入名称');
+        return;
+      }
+      if (!roleIdList || !roleIdList.length) {
+        this.$t.ui.showToast('请选择负责人');
+        return;
+      }
+      if (!checkerIdList || !checkerIdList.length) {
+        this.$t.ui.showToast('请选择检查人');
+        return;
+      }
+      const params = {
+        name,
+        startTime: startTime ? this.$moment(startTime).format('x') - 0 : '',
+        endTime: endTime ? this.$moment(endTime).format('x') - 0 : '',
+        roleIdList,
+        description,
+        projectId,
+        parentTaskId: '', // 父任务
+        processTaskId, // 上道工序 TODO
+        checkerIdList,
+        global: isGlobal ? 1 : 0,
+        deliverList: deliverables, // 交付物
+      };
+      console.log('params: ', params);
+      // await this.handleSubmit(params);
+    },
+
+    /**
+     * 新建任务
+     * @param name 任务名
+     * @param startTime 开始时间
+     * @param endTime 结束时间
+     * @param roleIdList 负责人id（数组）
+     * @param description 描述
+     * @param projectId 所属项目id
+     * @param parentTaskId 所属任务id
+     * @param processTaskId 上道工序（任务id）
+     * @param checkerIdList 检查人id（数组）
+     * @param global 是否日常任务 0否 1是
+     * @param deliverList 交付物名字（数组）
+     */
+    async handleSubmit(params) {
+      try {
+        const data = await this.$u.api.saveTask(params);
+        console.log('data: ', data);
+        // TODO 任务新建成功  继续 or 取消
+        this.$emit('closeMask');
+      } catch (error) {
+        this.$emit('closeMask');
+        console.error('error: ', error);
+      }
+    },
   },
 };
 </script>