新增编辑节点弹窗，排序弹窗，抽取组件

src/components/dialog/EditNodeDialog.vue

@@ -0,0 +1,479 @@
+<template>
+    <el-dialog v-model="addNodeModal" :title="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>
+</template>
+
+<script setup>
+import {ref, watch, onMounted,nextTick,toRefs,computed } from "vue";
+import {roletree,getDictionary,archiveTreeSave,archiveTreeDetail,archiveTreeUpdate} from "~api/other";
+
+//参数
+const props = defineProps({
+    projectId: {
+        type: [String,Number],
+        default: ''
+    },
+    contractId: {
+        type: [String,Number],
+        default: ''
+    },
+    node: {
+        type: Object,
+        default: () => ({})
+    },
+    show:{
+      type:Boolean,
+      default:false
+    },
+    type: {
+        type: String,
+        default: ''
+    },
+})
+
+const projectId = ref(props.projectId);
+const contractId = ref(props.contractId);
+// 使用toRefs结构，使其具有响应式
+const {node} = toRefs(props);
+
+//监听
+watch(() => [
+    props.projectId,
+    props.contractId,
+], ([UserProjectId, UserContractId]) => {
+    projectId.value = UserProjectId
+    contractId.value = UserContractId
+})
+
+watch(() => [props.show,props.type],([newShow,newType])=>{
+    //console.log(newShow,newType)
+    if(newShow){
+      if(newType == 'add'){
+        addNode()
+      }else if(newType == 'edit'){
+        editNodeModal()
+      }
+    }else{
+      cancelClick();
+    }
+});
+
+//计算属性
+let title = computed(()=>{
+  if(props.type == 'add'){
+    return '新增'
+  }else if(props.type == 'edit'){
+    return '编辑'
+  }
+})
+
+//事件
+const emit = defineEmits(['hide'])
+
+//渲染完成
+onMounted(() => {
+    //数据初始化
+    getJobTypeList()
+    major_data_type()
+    display_hierarchy()
+})
+
+//新增弹窗
+let addform = ref({})
+let addNodeModal = ref(false)
+
+const addNode = async()=>{
+    //console.log(node.value.data)
+    const {code,data } = await archiveTreeDetail({
+        id:node.value.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 = () => {
+  emit('hide', {})
+  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: node.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('修改成功')
+        node.value.data.title = form.nodeName;
+        node.value.data.isStorageNode = form.isStorageNode;
+        node.value.data.storageType = form.storageType;
+    }
+}
+
+//编辑节点
+const editNodeModal = async ()=>{
+    const {code,data } = await archiveTreeDetail({
+        id:node.value.data.id
+    })
+    if (code == 200) {
+        addform.value = data;
+        addNodeModal.value = true
+    }
+    //addform.value = node.data;
+
+}
+
+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
+    },
+]
+
+</script>

src/components/dialog/SortNodeDialog.vue

@@ -0,0 +1,148 @@
+<template>
+    <!--调整节点排序-->
+    <HcDialog :show="nodeSortModel" title="调整排序" widths="980px" isTable isRowFooter @close="nodeSortModalClose">
+        <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="warning" :closable="false"/>
+        <div class="hc-table-h">
+            <HcTable ui="hc-table-row-drop" :column="nodeSortTableColumn" :datas="nodeSortTableData" :loading="nodeSortTableLoading" isRowDrop @row-drop="nodeSortTableRowDrop">
+                <template #key2="{row}">
+                    <span class="text-link">{{row?.key2}}</span>
+                </template>
+                <template #action="{index}">
+                <span class="text-link text-xl" @click="nodeUpSortClick(index)">
+                    <HcIcon name="arrow-up" fill/>
+                </span>
+                    <span class="text-link text-xl ml-2" @click="nodeDownSortClick(index)">
+                    <HcIcon name="arrow-down" fill/>
+                </span>
+                </template>
+            </HcTable>
+        </div>
+        <template #rightRowFooter>
+            <el-button hc-btn @click="nodeSortModalClose">
+                <HcIcon name="close"/>
+                <span>取消</span>
+            </el-button>
+            <el-button type="primary" hc-btn :loading="nodeSortModalLoading" @click="nodeSortModalSave">
+                <HcIcon name="check"/>
+                <span>确认</span>
+            </el-button>
+        </template>
+    </HcDialog>
+</template>
+
+<script setup>
+import {ref, watch, onMounted,nextTick,toRefs,computed } from "vue";
+import {submitArchiveTreeSort} from "~api/other";
+
+//参数
+const props = defineProps({
+    projectId: {
+        type: [String,Number],
+        default: ''
+    },
+    contractId: {
+        type: [String,Number],
+        default: ''
+    },
+    node: {
+        type: Object,
+        default: () => ({})
+    },
+    show:{
+      type:Boolean,
+      default:false
+    },
+})
+
+const projectId = ref(props.projectId);
+const contractId = ref(props.contractId);
+// 使用toRefs结构，使其具有响应式
+const {node} = toRefs(props);
+
+//监听
+watch(() => [
+    props.projectId,
+    props.contractId,
+], ([UserProjectId, UserContractId]) => {
+    projectId.value = UserProjectId
+    contractId.value = UserContractId
+})
+
+watch(() => [props.show],([newShow])=>{
+    //console.log(newShow,newType)
+    if(newShow){
+      sortNodeMoadl()
+    }else{
+      nodeSortModalClose();
+    }
+});
+
+//事件
+const emit = defineEmits(['hide'])
+
+//节点排序
+const nodeSortModel = ref(false)
+const nodeSortTableColumn = ref([
+    {key:'title', name: '节点名称'},
+    {key:'action', name: '排序', width: 90},
+])
+const nodeSortTableData = ref([])
+const nodeSortTableLoading = ref(false)
+const nodeSortModalLoading = ref(false)
+
+
+const nodeSortModalClose = () =>{
+    emit('hide', {})
+    nodeSortModel.value = false;
+}
+
+const nodeSortTableRowDrop = (rows)=>{
+    nodeSortTableData.value = rows
+}
+//向下
+const nodeDownSortClick = (index) => {
+    const indexs = index + 1
+    const data = nodeSortTableData.value
+    if(indexs !== data.length) {
+        const tmp = data.splice(indexs,1);
+        nodeSortTableData.value.splice(index,0,tmp[0]);
+    } else {
+        window?.$message?.warning('已经处于置底，无法下移')
+    }
+}
+
+//向上
+const nodeUpSortClick = (index) => {
+    const data = nodeSortTableData.value || []
+    if(index !== 0) {
+        const tmp = data.splice(index - 1,1);
+        nodeSortTableData.value.splice(index,0,tmp[0]);
+    } else {
+        window?.$message?.warning('已经处于置顶，无法上移')
+    }
+}
+
+const sortNodeMoadl = ()=>{
+    nodeSortModel.value = true;
+    //console.log(node)
+    let list = [];
+    if(node.value.parent){
+        node.value.parent.childNodes.forEach((element)=>{
+            list.push(element.data)
+        })
+    }
+    nodeSortTableData.value = list;
+}
+
+const nodeSortModalSave = async()=>{
+    nodeSortModalLoading.value = true;
+    const {code,data} = await submitArchiveTreeSort(nodeSortTableData.value)
+    //console.log(res);
+    nodeSortModalLoading.value = false;
+    if (code == 200) {
+        window.$message?.success('修改成功')
+        window?.location?.reload()  //刷新页面
+    }
+    
+}
+</script>