test

src/api/requirement.js

@@ -381,3 +381,12 @@ export function getChartListData(data) {
     data
   })
 }
+
+// 获取chart视图数据
+export function updateStatus(data) {
+  return request({
+    url: requestIp + `/requirement/updateRequirementStatus`,
+    method: 'post',
+    data
+  })
+}

src/api/taskIndex.js

@@ -353,3 +353,12 @@ export function getChartListData(data) {
     data
   })
 }
+
+// 获取chart视图数据
+export function updateStatus(data) {
+  return request({
+    url: TeamManagement + `/task/updateTaskStatus`,
+    method: 'post',
+    data
+  })
+}

src/components/filterModal/index.vue

@@ -68,6 +68,10 @@ export default {
     color: #333;
     text-align: center;
   }
+  /deep/.el-dialog__footer {
+    padding: 10px 20px 10px;
+    border-top: 1px solid #e2e2e2;
+  }
   /deep/.el-dialog__header {
     border-bottom: 1px solid #e2e2e2;
     padding: 15px;

src/components/input/normalArea.vue

@@ -1,15 +1,24 @@
 <template>
   <div>
     <article :id="id" :style="styles">
-      <a href="javascript:;" id="edit-btn" @click="() => styleHandle('bold')">加粗</a>
+      <!-- <a href="javascript:;" id="edit-btn" @click="() => styleHandle('bold')">加粗</a>
+      <a href="javascript:;" id="edit-btn" @click="() => styleHandle('enableInlineTableEditing')">表格</a>
       <a href="javascript:;" id="edit-btn" @click="() => styleHandle('backColor', 'red')">背景颜色</a>
+      <a href="javascript:;" id="edit-btn" @click="() => insertTable()">插入表格</a>
       <div id="cc" class="editor" contenteditable="true" style="display:inline-block;border:1px solid #eee; width:200px; height:200px">
         <p>12321</p>
       </div>
       <div id="csc" class="editor" contenteditable="true" style="display:inline-block;border:1px solid #eee; width:300px; height:200px">
         <p>12321</p>
       </div>
-      <!-- <editor :id="'tinymce_'+id" ref="editor" v-model="inputValue" :init="init" @input="changeText" /> -->
+      <div id="menu">
+        <div class="menu" @click.stop="getCursorPosition">功能1</div>
+        <div class="menu">功能2</div>
+        <div class="menu">功能3</div>
+        <div class="menu">功能4</div>
+        <div class="menu">功能5</div>
+      </div> -->
+      <editor :id="'tinymce_'+id" ref="editor" v-model="inputValue" :init="init" @input="changeText" />
     </article>
   </div>
 </template>
@@ -81,6 +90,47 @@ export default {
   },
   mounted() {
     tinymce.init({ selector: `#tinymce_${this.id}` })
+    // const editor = document.getElementById('cc')
+    // editor.oncontextmenu=function(e){
+    //   console.log(11111)
+    //   //取消默认的浏览器自带右键 很重要！！
+    //   e.preventDefault();
+
+    //   //获取我们自定义的右键菜单
+    //   var menu=document.querySelector("#menu");
+    //   console.log(e)
+    //   //根据事件对象中鼠标点击的位置，进行定位
+    //   menu.style.left=e.clientX+'px';
+    //   menu.style.top=e.clientY+'px';
+
+    //   //改变自定义菜单的宽，让它显示出来
+    //   menu.style.width='125px';
+    // }
+    // window.onclick=function(e){
+    //   console.log(2222, e)
+    //   console.log('第几列', e.target.cellIndex+1, '第几行', e.target.parentNode.rowIndex+1)
+    //   console.log('这是table', e.path[3])
+    //   const tableBox = e.path[3]
+    //   console.log(tableBox)
+    //   // 必须保存一下不然下面会变
+    //   const idx = e.target.cellIndex
+    //   //  在一行添加一行
+    //   // tableBox.insertRow(e.target.parentNode.rowIndex)
+    //   // 插入一列
+    //   console.log(tableBox.rows)
+    //   for(let i=0; i<tableBox.rows.length; i++) {
+    //     console.log(i, e.target.cellIndex)
+    //      // 在之后插入一列
+    //     // tableBox.rows[i].insertCell(e.target.cellIndex+1)
+    //     // 在之前一列
+    //     // 在之前一列插入
+    //     // tableBox.rows[i].insertCell(idx)
+    //     console.log(tableBox.rows[i])
+    //   }
+    //   // tableBox.rows[e.target.parentNode.rowIndex].insertCell()
+    //   //用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
+    // document.querySelector('#menu').style.width=0;
+    // }
   },
   methods: {
     changeText(e) { // 富文本内容改变
@@ -91,6 +141,44 @@ export default {
     styleHandle(aCommandName, val) {
       // const editor = document.getElementById('cc')
       document.execCommand(aCommandName, false, val)
+    },
+    insertTable() {
+      const HTML = `<table border="1" border-collapse: collapse; style="border-color: #666;width:90%">
+      <tr>
+        <td><span>123</span></td>
+        <td>1</td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td><span>1233</span></td>
+        <td>4</td>
+        <td>5</td>
+      </tr>
+      <tr>
+        <td><span>1235</span></td>
+        <td>6</td>
+        <td>7</td>
+      </tr>
+      </table>`
+
+      document.execCommand('insertHTML', false, HTML)
+    },
+    getCursorPosition(event) {
+      const editEl = event.target
+      // return console.log(editEl);
+      console.log(event)
+      if (editEl.selectionStart || editEl.selectionStart === 0) {
+        console.log(3333)
+        // 非IE浏览器
+        this.cursorPosition = editEl.selectionStart
+      } else {
+        console.log(4444)
+        // IE
+        const range = document.selection.createRange()
+        range.moveStart('character', -editEl.value.length)
+        this.cursorPosition = range.text.length
+      }
+      console.log(this.cursorPosition)
     }
   }
 }
@@ -99,4 +187,18 @@ export default {
 .editor {
   border: 1px solid #666;
 }
+#menu{
+  width: 0; /*设置为0 隐藏自定义菜单*/
+  height: 125px;
+  overflow: hidden; /*隐藏溢出的元素*/
+  box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
+  position: absolute; /*自定义菜单相对与body元素进行定位*/
+}
+.menu{
+  width: 130px;
+  height: 25px;
+  line-height: 25px;
+  padding: 0 10px;
+  cursor: pointer;
+}
 </style>

src/views/projectManage/requirement/list/index.vue

@@ -219,7 +219,20 @@
             <span class="stylus-hover" @click="getToRequirementDetails(scope.row.id)">{{ scope.row.name }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="状态" prop="statusName" min-width="150" align="center" />
+        <el-table-column label="状态" prop="statusName" min-width="150" align="center">
+          <template slot-scope="scope">
+            <el-select
+              v-if="nowTab === 'charts'"
+              v-model="scope.row.status"
+              :size="size"
+              placeholder=""
+              @change="(e) => statusChange(e, scope.row.id)"
+            >
+              <el-option v-for="o in scope.row.availableStatusList" :key="o.code" :label="o.name" :value="o.code" />
+            </el-select>
+            <span v-else>{{ scope.row.statusName }}</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="sourceTypeName" label="需求来源" min-width="100" show-overflow-tooltip align="center" />
         <el-table-column label="PM" min-width="100" show-overflow-tooltip align="center">
           <template v-if="scope.row.pmMemberInfoResponse" slot-scope="scope">
@@ -305,7 +318,8 @@ import {
   filterGetFilter,
   getPerson,
   getChartListData,
-  getChartData
+  getChartData,
+  updateStatus
 } from '@/api/requirement.js'
 import { deepClone } from '@/utils/global'
 import RequirementCreate from './create'
@@ -332,6 +346,7 @@ export default {
   },
   data() {
     return {
+      size: 'small',
       pickerOptions: {
         shortcuts: [{
           text: '最近一周',
@@ -444,6 +459,14 @@ export default {
     this.$store.state.data.status = false
   },
   methods: {
+    // 修改状态
+    async statusChange(e, id) {
+      console.log(e)
+      const res = await updateStatus({ status: e, id })
+      if (res.code === 200) {
+        this.get_charts()
+      }
+    },
     filterModalConfirm() {
       this.showChartModal = false
       this.get_charts()

src/views/projectManage/taskList/taskIndex.vue

@@ -19,10 +19,10 @@
           <div slot="searchBox">
             <div class="Layout">
               <div class="Layout">
-                <div class="chartSearchTitle">模块：</div>
+                <div class="chartSearchTitle">模块</div>
                 <el-cascader v-model="form_task.moduleIds" size="small" clearable collapse-tags :props="props" :options="business_platform_Modular" placeholder="请选择" style="width:77% !important;" @change="get_charts()" />
               </div>
-              <span class="screen" style="text-align:right" @click="showChartModal = true">更多筛选</span>
+              <span class="screen" style="text-align:right; width: auto" @click="showChartModal = true">更多筛选</span>
             </div>
           </div>
         </chartView>
@@ -212,7 +212,18 @@
           </template>
         </el-table-column>
         <el-table-column label="状态" min-width="150" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">{{ scope.row.statusString }}</template>
+          <template slot-scope="scope">
+            <el-select
+              v-if="nowTab === 'charts'"
+              v-model="scope.row.status"
+              :size="size"
+              placeholder=""
+              @change="(e) => statusChange(e, scope.row.id)"
+            >
+              <el-option v-for="o in scope.row.availableStatusList" :key="o.code" :label="o.name" :value="o.code" />
+            </el-select>
+            <span v-else>{{ scope.row.statusString }}</span>
+          </template>
         </el-table-column>
         <el-table-column label="健康状态" width="150" align="center" show-overflow-tooltip>
           <template slot-scope="scope">{{ scope.row.stageString }}</template>
@@ -311,7 +322,8 @@ import {
   createFilter,
   filterGetFilter,
   getChartListData,
-  getChartData
+  getChartData,
+  updateStatus
 } from '@/api/taskIndex' // ajax
 import filterModal from '@/components/filterModal'
 import { settingQueryBizModuleList } from '@/api/defectManage'
@@ -337,6 +349,7 @@ export default {
   },
   data() {
     return {
+      size: 'small',
       pickerOptions: {
         shortcuts: [{
           text: '最近一周',
@@ -474,6 +487,13 @@ export default {
         this.get_taskList()
       }
     },
+    async statusChange(e, id) {
+      console.log(e)
+      const res = await updateStatus({ status: e, id })
+      if (res.code === 200) {
+        this.get_charts()
+      }
+    },
     get_charts() {
       this.updateChartSearchFormValue()
       this.form_taskHandle()