组件封装

src/components/input/textArea.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div v-show="isEmpty && !edit" class="text-edit">
+      您还没有设定目标请
+      <el-button type="text" @click="ImmediateAddition">立即添加</el-button>
+    </div>
+    <div v-show="edit">
+      <el-tooltip effect="dark" content="单击‘编辑’，失去焦点 ‘保存’" placement="bottom">
+        <el-input
+          ref="textarea"
+          v-model="inputValue"
+          rows="10"
+          type="textarea"
+          placeholder="请输入内容"
+          show-word-limit
+          style="margin: 3% 0;"
+          @blur="blur_textarea(inputValue)"
+        />
+      </el-tooltip>
+    </div>
+    <div v-show="!isEmpty && !edit">
+      <pre class="text-pre" @click="ImmediateAddition">{{ value }}</pre>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
+      required: false
+    },
+    size: {
+      type: String,
+      default: 'small',
+      required: false
+    }
+  },
+  data() {
+    return {
+      inputValue: '',
+      edit: false
+    }
+  },
+  computed: {
+    isEmpty() {
+      return this.inputValue === ''
+    }
+  },
+  watch: {
+    value: {
+      handler(newV, oldV) {
+        this.inputValue = newV
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    ImmediateAddition() {
+      // 立即添加（编辑）
+      this.$refs.textarea.focus()
+      this.edit = true
+    },
+    blur_textarea() {
+      this.edit = false
+      this.$emit('update:value', this.inputValue)
+      this.$emit('change', this.inputValue)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.text-edit {
+  height: 30vh;
+  color: #666666;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.text-pre {
+  white-space:pre-line;
+  font-size: 14px;
+  color: #333B4A;
+  cursor: pointer;
+  min-height: 20vh;
+  padding: 0 40px;
+}
+/deep/ textarea {
+  width: calc(100% - 40px);
+  margin: auto;
+}
+</style>

src/views/projectManage/projectList/component/mileStone.vue

@@ -0,0 +1,138 @@
+<template>
+  <div style="margin-top: 14%;">
+    <el-divider content-position="right">
+      <el-tooltip class="item" effect="dark" content="温馨提示：点击添加可以新建里程碑" placement="bottom-end">
+        <el-button style="z-index: 999999;" size="mini" type="primary" icon="el-icon-plus" circle @click="details_projectMilepost" />
+      </el-tooltip>
+    </el-divider>
+    <ul class="time-line">
+      <li v-for="(item, index) in valuesList" :key="index">
+        <i>
+          <div>
+            <el-popover class="popover" placement="top" width="200" trigger="click" style="border-radius: 10px;">
+              <p style="text-align: center">
+                <el-button size="mini" @click="dalete_Milepost = true">删除</el-button>
+                <el-button size="mini" type="primary" @click="query_date">编辑</el-button>
+              </p>
+              <b slot="reference" @click="get_Milepost(item)">一&nbsp;</b>
+            </el-popover>
+          </div>
+        </i>
+        <div>
+          <p style="white-space:pre-line;"><pre class="description">{{ item.description }}</pre></p>
+          <span style="font-size: 16px; color: #333B4A; font-weight: 500;">{{ item.title | ellipsis(20) }}</span><br>
+          <span style="font-size: 12px; color: #9B9B9B;">{{ item.date | dateStr }}</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+const _ = require('lodash')
+export default {
+  props: {
+    valuesList: {
+      type: String,
+      default: '',
+      required: false
+    },
+    size: {
+      type: String,
+      default: 'small',
+      required: false
+    }
+  },
+  data() {
+    return {
+      inputValue: '',
+      dalete_Milepost: false, // 删除里程碑
+      title_name: '', // 里程碑title
+      dialogFormVisible: false,
+      get_Milepost_data: {} // 点击原点数据
+    }
+  },
+  computed: {
+    isEmpty() {
+      return this.inputValue === ''
+    }
+  },
+  watch: {
+    valuesList: {
+      handler(newV, oldV) {
+        this.inputValue = newV
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    get_Milepost(e) {
+      // 点击原点
+      this.get_Milepost_data = _.cloneDeep(e)
+    },
+    query_date() {
+      // 编辑里程碑
+      this.title_name = '编辑里程碑'
+      this.dialogFormVisible = true
+      this.form = this.get_Milepost_data
+    },
+    change() {
+      this.$emit('update:valuesList', this.inputValue)
+      this.$emit('change', this.inputValue)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.time-line {
+  list-style-type: none;
+  padding: 0px;
+  margin: 0px;
+  width: 100%;
+  height: 20vh;
+  min-height: 150px;
+  white-space: nowrap;
+  li {
+    display: inline-block;
+    position: relative;
+    text-align: center;
+    width: 24%;
+    padding-top: 5%;
+    margin: 0 1%;
+    i div {
+      position: absolute;
+      top: -10px;
+      left: 50%;
+      margin-left: -10px;
+      width: 20px;
+      height: 20px;
+      b {
+        display: inline-block;
+        cursor: pointer;
+        border: 2px solid #61D3B8;
+        border-radius: 50%;
+        background: #61D3B8;
+        color: #61D3B8;
+        z-index: 9999;
+        width: 20px;
+        height: 20px;
+      }
+    }
+    i:before {
+      content: '';
+      width: 0%;
+      text-align: center;
+      position: absolute;
+      top: -50%;
+      left: 49.3%;
+      height: 100%;
+      border: 1px dashed #BBBBBB;
+    }
+    div {
+      text-align: center;
+      width: 100%;
+      position: absolute;
+      bottom: 284%;
+    }
+  }
+}
+</style>

src/views/projectManage/projectList/projectViewDetails.vue

@@ -119,27 +119,7 @@
             <div class="title-left-name">项目总目标</div>
           </div>
           <article>
-            <div v-show="Addition" class="text-edit">
-              您还没有设定目标请
-              <el-button type="text" @click="ImmediateAddition">立即添加</el-button>
-            </div>
-            <div v-show="Addition1">
-              <el-tooltip effect="dark" content="单击‘编辑’，失去焦点 ‘保存’" placement="bottom">
-                <el-input
-                  ref="textarea"
-                  v-model="form_query.target"
-                  rows="10"
-                  type="textarea"
-                  placeholder="请输入内容"
-                  show-word-limit
-                  style="margin: 3% 0;"
-                  @blur="blur_textarea(form_query.target)"
-                />
-              </el-tooltip>
-            </div>
-            <div v-show="Addition2">
-              <pre class="text-pre" @click="ImmediateAddition">{{ form_query.target }}</pre>
-            </div>
+            <text-area :value.sync="form_query.target" @change="changeArea" />
           </article>
         </section>
         <section class="main-section">
@@ -584,6 +564,7 @@ import {
   requirementQueryRequirementInfoList
 } from '@/api/projectIndex'
 import searchPeople from '@/components/select/searchPeople'
+import textArea from '@/components/input/textArea'
 import openDialog from '@/views/projectManage/dialog_vue'
 import Utils from '../../../util.js'
 import RequirementCreate from '@/views/projectManage/requirement/list/create'
@@ -604,7 +585,8 @@ export default {
     DailyReport,
     ClientReport,
     drawer,
-    searchPeople
+    searchPeople,
+    textArea
   },
   filters: {
     dateStr(value) {
@@ -707,9 +689,6 @@ export default {
       ],
       userInformation: localStorage.getItem('username'),
       userNames: localStorage.getItem('realname'),
-      Addition: false,
-      Addition1: false,
-      Addition2: false,
       dalete_Milepost: false, // 里程碑dialog（删除）
       textarea: '', // 项目总目标
       project_from: {}, // 修改项目
@@ -763,6 +742,13 @@ export default {
     changeDetail(e) { // 成员选择
       console.log(this.form_query.projectOwnerZh)
     },
+    async changeArea(e) { // area修改
+      const projectInfo = this.form_query
+      const res = await projectUpdate({ projectInfo, user: this.user })
+      if (res.code === 200) {
+        this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
+      }
+    },
     childVal(val) {
       this.num = val
     },
@@ -798,7 +784,6 @@ export default {
     get_list() {
       // 获取项目ID（查询）
       this.user = { name: this.userNames, ename: this.userInformation, id: '' }
-      this.textarea === '' ? (this.Addition = true) : (this.Addition2 = true)
       const url = window.location.href // 获取url中"?"符后的字串
       this.projectId = url.split('?id=')
       projectList({
@@ -811,15 +796,6 @@ export default {
         }
         this.form_query = res.data[0]
         this.project_from = res.data[0]
-        if (this.form_query.target === '' || this.form_query.target === null) {
-          this.Addition1 = false
-          this.Addition2 = false
-          this.Addition = true
-        } else {
-          this.Addition1 = false
-          this.Addition = false
-          this.Addition2 = true
-        }
         this.form_query.status === 0
           ? this.$set(this.form_query, 'statusString', '未开始')
           : ''
@@ -1070,41 +1046,6 @@ export default {
         }
       })
     },
-
-    ImmediateAddition() {
-      // 立即添加（编辑）
-      setTimeout(() => {
-        this.$refs.textarea.focus()
-      }, 100)
-      this.Addition = false
-      this.Addition1 = true
-      this.Addition2 = false
-    },
-    blur_textarea(e) {
-      // 项目总目标失去焦点
-      if (e !== '') {
-        this.form_query.target = e
-        this.Addition2 = true
-        this.Addition1 = false
-        this.Addition = false
-      } else {
-        this.Addition2 = false
-        this.Addition1 = false
-        this.Addition = true
-      }
-      const projectInfo = this.form_query
-      const user = this.user
-      projectUpdate({ projectInfo, user }).then(res => {
-        if (res.code === 200) {
-          this.$message({
-            message: res.msg,
-            type: 'success',
-            duration: 1000,
-            offset: 150
-          })
-        }
-      })
-    },
     get_allTask() {
       // 获取全部任务
       this.noRequire = false
@@ -1278,25 +1219,9 @@ export default {
       }
     }
   }
-  .text-edit {
-    height: 30vh;
-    color: #666666;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
   .time-line {
     @include time-line;
   }
-  .text-pre {
-    white-space:pre-line;
-    font-size: 14px;
-    color: #333B4A;
-    cursor: pointer;
-    min-height: 20vh;
-    padding: 0 40px;
-  }
 }
 .plan-checked {
   padding-left: 21px;