Browse Source

新建子任务弹框

wangziqian 5 years ago
parent
commit
4859adeb46

+ 78 - 0
src/components/input/normalArea.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <article :id="id">
+      <editor v-model="inputValue" :class="'tinymce_'+id" :init="init" @input="changeText" />
+    </article>
+  </div>
+</template>
+<script>
+import tinymce from 'tinymce/tinymce'
+import Editor from '@tinymce/tinymce-vue'
+import 'tinymce/themes/silver/theme'
+import 'tinymce/icons/default/icons'
+
+export default {
+  components: {
+    Editor
+  },
+  props: {
+    id: {
+      type: String,
+      default: '',
+      required: true
+    },
+    value: {
+      type: String,
+      default: '',
+      required: false
+    },
+    height: {
+      type: Number,
+      default: 200,
+      required: false
+    }
+  },
+  data() {
+    return {
+      inputValue: '',
+      edit: false,
+      init: {
+        auto_focus: true,
+        language_url: '/tinymce/langs/zh_CN.js',
+        language: 'zh_CN',
+        skin_url: '/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作,所以要设置一个skin_url指向之前复制出来的skin文件
+        height: this.height,
+        browser_spellcheck: true, // 拼写检查
+        branding: false, // 去水印
+        elementpath: false, // 禁用编辑器底部的状态栏
+        statusbar: false, // 隐藏编辑器底部的状态栏
+        paste_data_images: true, // 允许粘贴图像
+        menubar: false, // 隐藏最上方menu
+        fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
+        file_picker_types: 'image',
+        images_upload_credentials: true,
+        plugins: 'lists table textcolor wordcount contextmenu', // 引入插件
+        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect'
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler(newV, oldV) {
+        this.inputValue = newV
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    tinymce.init({ selector: `.tinymce_${this.id}` })
+  },
+  methods: {
+    changeText(e) { // 富文本内容改变
+      this.inputValue = e
+      this.$emit('update:value', this.inputValue)
+      this.$emit('change', this.inputValue)
+    }
+  }
+}
+</script>

+ 38 - 4
src/views/projectManage/taskList/childrenTask/createChildren.vue

@@ -12,7 +12,7 @@
       <el-form ref="form" :model="formData" :rules="form_rules" label-width="100px" :label-position="'left'">
         <div class="form-main-flex">
           <el-form-item label="任务名称" prop="name" class="form-all-line">
-            <el-input v-model="formData.name" placeholder="请输入任务名称" size="medium" />
+            <el-input v-model="formData.name" placeholder="请输入任务名称" size="medium" clearable="" />
           </el-form-item>
           <el-form-item label="父任务" prop="parentId" class="form-item">
             <el-select v-model="formData.parentId" disabled placeholder="请选择" size="medium" style="width: 100%">
@@ -46,18 +46,41 @@
           <el-form-item label="其他参与人" prop="other" class="form-item">
             <search-people :value.sync="formData.other" style="width: 100%" size="medium" :multiple="true" />
           </el-form-item>
+          <el-form-item label="任务状态" prop="status" class="form-item">
+            <el-select v-model="formData.status" placeholder="请选择" size="medium" style="width: 100%">
+              <el-option
+                v-for="item in allStatus"
+                :key="item.code"
+                :label="item.msg"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="进度" prop="process" class="form-item">
+            <el-input v-model="formData.process" size="medium" style="width: 30%" />%
+          </el-form-item>
+          <el-form-item label="描述" prop="desc" class="form-all-line">
+            <normal-area id="task-children-desc" :value.sync="formData.desc" />
+          </el-form-item>
         </div>
       </el-form>
     </article>
   </normal-dialog>
 </template>
 <script>
+import 'tinymce/themes/silver/theme'
+import 'tinymce/icons/default/icons'
+import {
+  configShowTaskEnum
+} from '@/api/taskIndex'
 import searchPeople from '@/components/select/searchPeople'
 import normalDialog from '@/components/dialog/normalDialog'
+import normalArea from '@/components/input/normalArea'
 export default {
   components: {
     searchPeople,
-    normalDialog
+    normalDialog,
+    normalArea
   },
   props: {
     visible: {
@@ -79,7 +102,9 @@ export default {
         name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
         parentId: [{ required: true, message: '父任务不能为空', trigger: 'blur' }],
         bizId: [{ required: true, message: '业务线不能为空', trigger: 'blur' }],
-        owner: [{ required: true, message: '负责人不能为空', trigger: 'blur' }]
+        owner: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+        status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+        process: [{ required: true, message: '进度不能为空', trigger: 'blur' }]
       },
       show: this.visible,
       formData: {
@@ -96,7 +121,8 @@ export default {
         children: []
       },
       parentList: [], // 父任务列表
-      bizList: [] // 业务线列表
+      bizList: [], // 业务线列表
+      allStatus: [] // 任务所有状态
     }
   },
   watch: {
@@ -115,6 +141,7 @@ export default {
     }
   },
   created() {
+    this.getTaskStatus()
   },
   methods: {
     handlerData(data) { // 处理传入数据
@@ -126,6 +153,13 @@ export default {
         this.formData.bizId = data.bizId
       })
     },
+    async getTaskStatus() { // 获取任务状态列表,跟版客户端列表
+      const res = await configShowTaskEnum()
+      if (res.code === 200) {
+        this.allStatus = res.data.taskStatus
+        console.log(this.allStatus)
+      }
+    },
     confirmForm() { // 确认提交表单
       this.$refs['form'].validate((valid) => {
 

+ 1 - 1
src/views/workbench/person/components/myFullCalendar.vue

@@ -267,7 +267,7 @@ export default {
 }
 >>>#small-calendar .fc-dayGridMonth-view .table-bordered .fc-body .fc-day-number {
   transform: scale(1);
-  font-size: 12px;
+  font-size: 14px;
 }
 >>>#small-calendar .fc-view-container .table-bordered .fc-head .fc-day-header {
   transform: scale(1);