新增巡检修改

src/global/components/hc-tasks-user/style.scss

@@ -7,6 +7,7 @@
         padding: 0 12px;
         cursor: pointer;
         min-height: 40px;
+        background-color: white;
         .tag-user-list {
             position: relative;
             display: flex;

src/views/patrol/add.vue

@@ -100,7 +100,7 @@
                             <el-date-picker
                                 v-model="addForm.time"
                                 type="date"
-                              
+                               
                                 placeholder="请选择整改日期"
                                 :disabled="type === 'changeRow' || type === 'review' || type === 'view'"
                             />
@@ -108,7 +108,7 @@
                     </el-col>
                 </el-row>
                 <el-row :gutter="20">
-                    <el-col :span="12">
+                    <el-col :span="8">
                         <el-form-item label="整改人" prop="key4">
                             <HcTasksUser
                                 :disabled="type === 'changeRow' || type === 'review' || type === 'view'"
@@ -133,6 +133,18 @@
                             </el-button>
                         </el-form-item>
                     </el-col>
+                    <el-col :span="12">
+                        <div class="hc-process-box">
+                            <el-scrollbar style="max-height: 200px;">
+                                <div v-for="(item, index) in processDataList" class="process-item-box">
+                                    <div class="process-item">
+                                        {{ item.path }}
+                                    </div>
+                                    <HcIcon class="process-icon" fill name="close-circle" @click="deleProcess(index)" />
+                                </div>
+                            </el-scrollbar>
+                        </div>
+                    </el-col>
                 </el-row>
                 <div style="position: relative; height: 400px">
                     <HcTable :column="tableColumn" :datas="tableData">
@@ -183,6 +195,7 @@
                                 :datas="searchTreeData"
                                 show-checkbox
                                 default-expand-all
+                                :default-checked-keys="defaultChecked"
                                 @nodeTap="wbsElTreeClick"
                                 @check="divisionTreeCheck"
                             >
@@ -193,8 +206,9 @@
                     <el-scrollbar v-show="!isSearchTree" class="scroll-bar-right-16">
                         <div class=" node-many-tree">
                             <HcLazyTree
-                                ref="wbstree"
+                                ref="processElTree"
                                 show-checkbox
+                                :default-checked-keys="defaultChecked"
                                 @check="divisionTreeCheck"
                                 @load="treeLoadNode"
                                 @nodeTap="wbsElTreeClick"
@@ -359,8 +373,66 @@ const linksRelateModalClick = ()=>{
 const linksRelateModalClose = ()=>{
     linksRelateModal.value = false
 }
+const processDataList = ref([])
 const linksRelateModalSave = ()=>{
     console.log('baocun')
+    const keys = processElTree.value.treeRef.getCheckedKeys()
+    let linkTabIds = []
+    if (keys.length === 0) {
+        linkTabIds = []
+    }
+     //去出掉取消勾选的
+    for (let index = 0; index < keys.length; index++) {
+       linkTabIds = linkTabIds.filter((ele)=>{
+            if (ele.primaryKeyId === keys[index]) {
+                return ele
+            }
+       })
+    }
+    for (let index = 0; index < keys.length; index++) {
+        let pathArr = []
+        let node = processElTree.value.treeRef.getNode(keys[index])
+        getPathName(node, pathArr)
+        linkTabIds.push({
+            path: pathArr.join('/'),
+            primaryKeyId: keys[index],
+        })
+    }
+     //去除掉重复的
+     getNorepeatArr(linkTabIds)
+     console.log(linkTabIds, 'linkTabIds')
+     processDataList.value = linkTabIds
+     linksRelateModal.value = false
+   
+}
+const getNorepeatArr = (tempArr)=> {
+    let newArr = []
+    for (let i = 0; i < tempArr.length; i++) {
+        if (newArr.indexOf(tempArr[i].primaryKeyId) == -1) {
+            newArr.push(tempArr[i].primaryKeyId)
+        } else {
+            tempArr.splice(i, 1)
+            i--
+        }
+    }
+    return tempArr
+
+}
+//获取节点的路径名字
+const getPathName = (node, pathArr) => {
+    if (node.parent?.parent) {
+        pathArr.unshift(node.data?.title.replace(/(^\s*)|(\s*$)/g, '')) //去掉头尾空格
+        getPathName(node.parent, pathArr)
+    } else {
+        return //根节点结束
+    }
+}
+//移除工序
+const deleProcess = (index) => {
+    const linkTabIds = processDataList.value
+    linkTabIds.splice(index, 1)
+
+    processDataList.value = linkTabIds
 }
 const searchTreeVal = ref('')
 const isSearchTree = ref(false)
@@ -435,6 +507,8 @@ const divisionTreeItemInfo = ref({})
 const divisionTreeCheck = ({ data }) => {
     divisionTreeItemInfo.value = data
 }
+const defaultChecked = ref([]) //默认选中
+const processElTree = ref(null)
 const goList = ()=>{
     router.push({
         path: '/patrol/safe',
@@ -459,6 +533,38 @@ const goBack = ()=>{
 }
 </style>
 
-<style  lang='scss'>
-
+<style  lang='scss' scoped>
+   .hc-process-box {
+             
+                position: relative;
+                flex: 1;
+                overflow: hidden;
+                .hc-scrollbar-box {
+                    display: contents;
+                }
+                .process-item-box {
+                    position: relative;
+                    color: #838791;
+                    font-size: 14px;
+                    padding: 8px 0;
+                    display: flex;
+                    align-items: flex-start;
+                    .process-item {
+                        position: relative;
+                        flex: 1;
+                    }
+                    .process-icon {
+                        font-size: 20px;
+                        cursor: pointer;
+                        margin-left: 16px;
+                        transition: color 0.2s;
+                        &:hover {
+                            color: var(--el-color-primary-light-3);
+                        }
+                    }
+                }
+                .process-item-box + .process-item-box {
+                    border-top: 0.5px solid #e9e9e9;
+                }
+            }
 </style>