客户端树节点 新增，编辑，删除，同步

src/api/modules/other.js

@@ -53,13 +53,13 @@ export const remove = (form, msg = true) => httpApi({
 export const archiveTreeSave = (form, msg = true) => httpApi({
     url: '/api/blade-manager/archiveTreeContract/save',
     method: 'post',
-    params: form
+    data: form
 }, msg);
 
 //编辑
 export const archiveTreeDetail = (form, msg = true) => httpApi({
     url: '/api/blade-manager/archiveTreeContract/detail',
-    method: 'post',
+    method: 'get',
     params: form
 }, msg);
 
@@ -67,7 +67,7 @@ export const archiveTreeDetail = (form, msg = true) => httpApi({
 export const archiveTreeUpdate = (form, msg = true) => httpApi({
     url: '/api/blade-manager/archiveTreeContract/update',
     method: 'post',
-    params: form
+    data: form
 }, msg);
 
 //获取归档树同级节点
@@ -85,3 +85,22 @@ export const submitArchiveTreeSort = (form, msg = true) => httpApi({
     method: 'post',
     params: form
 }, msg);
+
+//同步
+export const syncProjectTree = (form, msg = true) => httpApi({
+    url: '/api/blade-manager/archiveTreeContract/syncProjectTree',
+    method: 'post',
+    params: form
+}, msg);
+
+
+//所属角色
+export const roletree = (form, msg = true) => httpApi({
+    url: '/api/blade-system/role/tree',
+      method: 'get',
+      params: {
+        tenantId: ''
+      }
+}, msg);
+
+

src/views/file/collection.vue

@@ -12,7 +12,8 @@
             </div>
             <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
+                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" :menus="ElTreeMenu"
+                             @menuTap="ElTreeMenuClick" @nodeLoading="treeNodeLoading" ref="treeRef"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -358,6 +359,112 @@
             </template>
         </el-dialog>
 
+
+        <el-dialog v-model="addNodeModal" :title="'新增'" width="50rem" class="hc-modal-border" draggable destroy-on-close :close-on-click-modal="false" @closed="cancelClick">
+           <el-form :model="addform" ref="ruleFormRef" :rules="rules" label-width="110px">
+            <el-form-item label="节点名称" prop="nodeName">
+                <el-input v-model="addform.nodeName" size="large"/>
+            </el-form-item>
+            <!-- <el-form-item label="岗位类型" prop="postType">
+                <el-select  v-model="addform.postType"  placeholder="请选择岗位" size="large" style="width:100%">
+                    <el-option v-for="item in JobTypeList" :key="item.id" :label="item.title" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="节点类型" prop="nodeType">
+                <el-select  :disabled='addform.id'  v-model="addform.nodeType"  placeholder="请选择节点类型" size="large" style="width:100%">
+                    <el-option  v-for="item in nodeTypeList"  :key="item.value" :label="item.label"  :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="工程类型" prop="projectType">
+                <el-select  v-model="addform.projectType"  placeholder="工程类型" size="large" style="width:100%">
+                <el-option v-for="item in projectTypeList"  :key="item.value"  :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item> -->
+            <el-form-item  label="储存类型"  prop="storageType"  v-if="addform.nodeType==1">
+                <el-select  v-model="addform.storageType"  placeholder="请选择"  size="large" style="width:100%">
+                    <el-option  v-for="item in storageTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+
+            <template v-if="addform.nodeType==2">
+                <el-form-item  label="是否存储节点"  prop="isStorageNode">
+                    <el-select  v-model="addform.isStorageNode" placeholder="请选择" size="large" style="width:100%">
+                        <el-option  v-for="item in storageNodeList"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
+                    </el-select>
+                </el-form-item>
+
+                <template v-if="addform.isStorageNode==1">
+                    <el-form-item  label="储存类型" prop="storageType">
+                        <el-select v-model="addform.storageType" placeholder="请选择" size="large" style="width:100%">
+                            <el-option  v-for="item in storageTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- <el-form-item  label="是否竣工图" prop="isBuiltDrawing">
+                        <el-select v-model="addform.isBuiltDrawing" placeholder="请选择" size="large" style="width:100%">
+                            <el-option v-for="item in builtDrawingList"  :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="是否接口节点" prop="isInterfaceNode">
+                        <el-select v-model="addform.isInterfaceNode" placeholder="请选择" size="large" style="width:100%">
+                            <el-option v-for="item in interfaceNodeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <template v-if="addform.isInterfaceNode==1">
+                        <el-form-item label="选择接口类型">
+                            <el-select v-model="addform.interfaceType" placeholder="请选择" size="large" style="width:100%">
+                                <el-option v-for="item in interfaceTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </template> -->
+
+                </template>
+            </template>
+
+            <!-- <template v-if="addform.nodeType==1">
+                <el-form-item  label="关联类型" prop="associationType">
+                    <el-select  v-model="addform.associationType"  placeholder="请选择" size="large" style="width:100%">
+                        <el-option v-for="item in associationTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                </el-form-item>
+
+                <template v-if="addform.associationType==1">
+                    <el-form-item  label="业内资料类型"  prop="majorDataType">
+                        <el-checkbox-group v-model="addform.majorDataType">
+                            <el-checkbox v-for="item in majorDataTypeList" :key="item.dictKey" :label="item.dictKey" name="type">{{item.dictValue}}</el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item  label="显示层级" prop="displayHierarchy">
+                        <el-select  v-model="addform.displayHierarchy" placeholder="请选择" size="large" style="width:100%">
+                            <el-option  v-for="item in displayHierarchyList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </template>
+
+                <template v-if="addform.associationType==2">
+                    <el-form-item label="文件类型" prop="expDataType">
+                        <el-checkbox-group v-model="addform.expDataType">
+                            <el-checkbox v-for="item in fileTypeList" :key="item.value" :label="item.label">{{item.label}}</el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                </template>
+            </template> -->
+
+           </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button size="large" @click="cancelClick">
+                        <HcIcon name="close"/>
+                        <span>取消</span>
+                    </el-button>
+                    <el-button type="primary" hc-btn  @click="confirmClick">
+                        <HcIcon name="check"/>
+                        <span>确认</span>
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+
     </div>
 </template>
 
@@ -372,6 +479,7 @@ import {getArrValue, deepClone} from "vue-utils-plus"
 import tasksApi from '~api/tasks/data';
 import ossApi from "~api/oss";
 import archiveFileApi from "~api/archiveFile/archiveFile.js";
+import {roletree,getDictionary,archiveTreeSave,remove,syncProjectTree,archiveTreeDetail,archiveTreeUpdate} from "~api/other";
 
 //变量
 const useAppState = useAppStore()
@@ -391,6 +499,11 @@ watch(() => [
 onMounted(() => {
     treeLoading.value = true
     setTableColumns()
+
+    //数据初始化
+    getJobTypeList()
+    major_data_type()
+    display_hierarchy()
 })
 
 //树加载
@@ -1276,6 +1389,369 @@ const tableRowName = (row) => {
 }
 
 
+//设置树菜单数据
+const ElTreeMenu = ref([
+    {icon: 'add-circle', label: '新增', key: "add"},
+    {icon: 'draft', label: '编辑', key: "edit"},
+    {icon: 'delete-bin', label: '删除', key: "del"},
+    {icon: 'refresh', label: '同步', key: "sync"},
+])
+
+//树菜单被点击
+const nodeItemInfo = ref();
+const ElTreeMenuClick = async ({key,node,data}) => {
+    nodeItemInfo.value = node
+    // nodeDataInfo.value = data
+    setTreeMenuDataClick({key,node,data})
+}
+//处理菜单被点击数据
+const setTreeMenuDataClick = ({key,node,data}) => {
+    //console.log(node)
+    switch (key) {
+        case 'add':
+            addNode(node);
+            break;
+        case 'edit':
+            editNodeModal(node);
+            break;
+        case 'del':
+            delNodeMoadl(node);
+            break;
+        case 'sync':
+            syncNodeMoadl(node);
+            break;
+    }
+}
+
+//新增弹窗
+let addform = ref({})
+let addNodeModal = ref(false)
+
+const addNode = async(node)=>{
+    const {code,data } = await archiveTreeDetail({
+        id:node.data.id
+    })
+    if (code == 200) {
+        delete data['id'];
+        delete data['nodeName'];
+        //新增的信息和父级一样
+        //是否竣工图,是否接口节点。默认否
+        data.isInterfaceNode = 2;
+        data.interfaceType = 2;
+
+        addform.value = data;
+        addNodeModal.value = true;
+    }
+}
+
+const cancelClick = () => {
+   addNodeModal.value = false
+}
+const confirmClick = async () => {
+    await ruleFormRef.value.validate(async (valid, fields) => {
+        if (valid) {
+            let form = {
+                id: addform.value.id,
+                projectId:projectId.value,
+                parentId: nodeItemInfo.value.data.id, //上级节点id
+                nodeName: addform.value.nodeName,  //节点名称
+                nodeType: addform.value.nodeType,  // 节点类型
+                postType: addform.value.postType,  //岗位类型
+
+                projectType:addform.value.projectType, //工程类型
+                storageType:addform.value.storageType, //储存类型
+            }
+            if(addform.value.nodeType == 2){
+                form.isStorageNode = addform.value.isStorageNode  //是否为存储节点
+                if(addform.value.isStorageNode == 1){
+                    form.isBuiltDrawing = addform.value.isBuiltDrawing  //竣工图
+                    form.isInterfaceNode = addform.value.isInterfaceNode  //是否接口节点
+                    if(addform.value.isInterfaceNode == 1){
+                        form.interfaceType =  addform.value.interfaceType  //选择接口类型
+                    }
+                }else{
+                    delete form.storageType
+                }
+            }else if (addform.value.nodeType == 1){
+                form.associationType = addform.value.associationType  //关联类型
+                if(addform.value.associationType == 1){
+                    form.majorDataType = addform.value.majorDataType //内业资料类型
+                    form.displayHierarchy = addform.value.displayHierarchy  //显示层级
+                }else if(addform.value.associationType == 2){
+                    form.expDataType = addform.value.expDataType.join(',')//文件类型
+                }
+            }
+
+            await saveTreeNode(form)
+
+            addNodeModal.value = false
+        }
+    })
+}
+
+const saveTreeNode = async (form)=>{
+    if (form.majorDataType) {
+        if (form.majorDataType.length > 0) {
+          let das = ''
+          form.majorDataType.forEach((val, key) => {
+            das += val
+            if (form.majorDataType.length - 1 != key) {
+              das += ','
+            }
+          })
+          form.majorDataType = das
+        }
+      }
+      if (addform.value.id) {
+        await archiveTreeUpdateHandle(form)
+      } else {
+        await archiveTreeSaveHandle(form)
+      }
+}
+
+const archiveTreeSaveHandle = async (form)=>{//新增
+    //console.log(form);
+    const {code,data} = await archiveTreeSave(form)
+    //console.log(res);
+    if (code == 200) {
+        window.$message?.success('新增成功')
+        window?.location?.reload()  //刷新页面
+    }
+}
+
+const archiveTreeUpdateHandle = async (form)=>{//新增
+    //console.log(form);
+    const {code } = await archiveTreeUpdate(form)
+    //console.log(res);
+    if (code == 200) {
+        window.$message?.success('修改成功')
+        nodeItemInfo.value.data.title = form.nodeName;
+        nodeItemInfo.value.data.isStorageNode = form.isStorageNode;
+        nodeItemInfo.value.data.storageType = form.storageType;
+    }
+}
+
+//编辑节点
+const editNodeModal = async (node)=>{
+    const {code,data } = await archiveTreeDetail({
+        id:node.data.id
+    })
+    if (code == 200) {
+        addform.value = data;
+        addNodeModal.value = true
+    }
+    //addform.value = node.data;
+
+}
+
+const treeRef = ref();
+//删除节点
+const delNodeMoadl = (node)=>{
+    delMessage(async() => {
+        const {code } = await remove({
+            id:node.data.id
+        })
+        if (code == 200) {
+            window.$message?.success('删除成功')
+            treeRef.value.ElTreeRef.remove(node)
+        }
+    })
+}
+
+//同步节点
+const syncNodeMoadl = (node)=>{
+    window?.$messageBox?.alert('是否同步该节点？', '提示', {
+        showCancelButton: true,
+        confirmButtonText: '确认同步',
+        cancelButtonText: '取消',
+        callback: async(action) => {
+            if (action === 'confirm') {
+                const {code } = await syncProjectTree({
+                    id:node.data.id
+                })
+                if (code == 200) {
+                    window.$message?.success('同步成功')
+                    window?.location?.reload()  //刷新页面
+                }
+            }
+        }
+    })
+}
+
+const ruleFormRef = ref();
+const rules = ref({
+    nodeName: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
+    postType: [{ required: true, message: '请选择岗位类型', trigger: 'change' }],
+    nodeType: [{ required: true, message: '请选择节点类型', trigger: 'change' }],
+    isStorageNode: [{ required: true, message: '请选择存储节点', trigger: 'change' }],
+    isBuiltDrawing: [{ required: true, message: '请选择竣工图', trigger: 'change' }],
+    isInterfaceNode: [{ required: true, message: '请选择接口节点', trigger: 'change' }],
+    interfaceType: [{ required: true, message: '请选择接口类型', trigger: 'change' }],
+    associationType: [{ required: true, message: '请选择关联类型', trigger: 'change' }],
+    majorDataType: [{ required: true, message: '请选择业内资料类型', trigger: 'change' }],
+    displayHierarchy: [{ required: true, message: '请选择显示层级', trigger: 'change' }],
+    projectType: [{ required: true, message: '请选择工程类型', trigger: 'change' }],
+    storageType: [{ required: true, message: '请选择储存类型', trigger: 'change' }],
+    expDataType: [{ required: true, message: '请选择文件类型', trigger: 'change' }],
+})
+
+//类型枚举
+let JobTypeList = ref([]);//岗位类型枚举
+const getJobTypeList = async() => {//岗位类型枚举
+    const { data,code } = await roletree()
+    //console.log(res);
+    if (code == 200) {
+        JobTypeList.value = data
+    }
+}
+let majorDataTypeList = ref([]);
+const major_data_type = async() => {//内业资料类型
+    const { data,code } = await getDictionary({ code: 'major_data_type' })
+    //console.log(res);
+    if (code == 200) {
+        majorDataTypeList.value = data
+    }
+}
+let displayHierarchyList = ref([]);
+const display_hierarchy = async() => {//显示层级
+    const { data,code } = await getDictionary({ code: 'display_hierarchy' })
+    //console.log(res);
+    if (code == 200) {
+        displayHierarchyList.value = data
+    }
+}
+
+const nodeTypeList = [
+{
+    label: '关联电子原生文件',
+    value: 1
+}, {
+    label: '数字化上传文件',
+    value: 2
+},
+]//节点类型枚举
+const projectTypeList = [
+{
+    label: '水利水电工程',
+    value: 1
+}, {
+    label: '公路工程',
+    value: 2
+}, {
+    label: '全部',
+    value: 3
+},
+]//工程类型枚举
+const storageTypeList=[
+{
+    label: '普通',
+    value: 1
+},{
+    label: '竣工图',
+    value: 2
+},{
+    label: '计量',
+    value: 3
+},{
+    label: '质检',
+    value: 4
+},{
+    label: '声像',
+    value: 5
+},{
+    label: '隐蔽',
+    value: 6
+},{
+    label: '原材试验',
+    value: 7
+},{
+    label: '管理文件',
+    value: 8
+},{
+    label: '变更令',
+    value: 9
+},
+]//储存类型枚举
+const storageNodeList = [
+    {
+    label: '是',
+    value: 1
+    }, {
+    label: '否',
+    value: 2
+    }
+]//存储节点枚举
+const builtDrawingList = [{
+    label: '是',
+    value: 1
+    }, {
+    label: '否',
+    value: 2
+    },
+]//竣工图枚举
+const interfaceNodeList = [
+    {
+    label: '是',
+    value: 1
+    }, {
+    label: '否',
+    value: 2
+    },
+]//接口节点枚举
+const interfaceTypeList = [
+    {
+        label: '试验接口',
+        value: 1
+    }, {
+        label: '计量接口',
+        value: 2
+    },
+]//选择接口类型枚举
+const associationTypeList = [
+    {
+    label: '质检资料',
+    value: 1
+    },
+    {
+    label: '试验资料',
+    value: 2
+    },
+    {
+    label: '影像资料',
+    value: 3
+    },
+    {
+    label: '台账资料',
+    value: 4
+    },{
+    label: '首件资料',
+    value: 5
+    },{
+    label: '日志文件',
+    value: 6
+    },
+]
+const fileTypeList = [
+    {
+        label: '配合比',
+        value: 1
+    },
+    {
+        label: '原材',
+        value: 2
+    },{
+        label: '汇总',
+        value: 3
+    },{
+        label: '设备',
+        value: 4
+    },{
+        label: '外委(第三方)',
+        value: 5
+    },
+]
+
+
 //左右拖动，改变树形结构宽度
 const leftWidth = ref(382);
 const onmousedown = () => {