wbs类型修改

src/views/manager/ContractSort.vue

@@ -0,0 +1,218 @@
+<template>
+  <el-dialog
+    title="合同段排序"
+    :visible.sync="visible"
+    width="600px"
+    append-to-body
+    @close="handleClose"
+    class="project-dialog"
+  >  
+  <span slot="title">
+            <i class="el-icon-sort" style="color: #2550A2;"></i>{{ title }}
+    </span>
+    <div class="sort-container">
+      <!-- 提示信息 -->
+      <div class="tip-box">
+        <i class="el-icon-info"></i>
+             拖动项目可调整顺序，或者使用箭头按钮、输入序号进行排序
+
+      </div>
+
+      <!-- 排序列表 -->
+      <draggable 
+        v-model="sortList" 
+        class="sort-list"
+        handle=".drag-handle"
+        @end="handleDragEnd"
+      >
+        <div v-for="(item, index) in sortList" 
+          :key="item.id" 
+          class="sort-item"
+        >
+          <i class="el-icon-rank drag-handle"></i>
+          <div class="item-content">
+            <span>{{ item.wbsName }}</span>
+
+            <div class="item-actions">
+                <div class="move-btns">
+                    <el-button 
+                    type="text" 
+                    icon="el-icon-arrow-up"
+                    :disabled="index === 0"
+                    @click="moveItem(index, -1)"
+                    ></el-button>
+                    <el-button 
+                    type="text" 
+                    icon="el-icon-arrow-down"
+                    :disabled="index === sortList.length - 1"
+                    @click="moveItem(index, 1)"
+                    ></el-button>
+                </div>
+                <span>移至</span>
+              <el-input-number 
+              :controls="false"
+                v-model="item.sortNum" 
+                :min="1" 
+                :max="sortList.length"
+                size="mini"
+                style="width: 60px;"
+                @change="handleNumberChange($event, index)"
+              ></el-input-number>
+              <span>位</span>
+              
+            </div>
+          </div>
+        </div>
+      </draggable>
+    </div>
+
+    <div slot="footer" style="text-align: center">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm" style="  background-color: #2550A2;border-color: #2550A2 ;color: white;">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'ContractSort',
+  components: {
+    draggable
+  },
+  props: {
+    // 添加 props
+    title: {
+      type: String,
+      default: '排序'
+    },
+    sortProLoad: { // 接收父组件传递的 sortProLoad 状态
+      type: Boolean,
+      default: false,
+    },
+   
+  },
+  data() {
+    return {
+      sortList: [],
+      visible: false
+    }
+  },
+
+  methods: {
+        // 添加显示方法
+     // 修改显示方法
+  show(contractList) {
+    if(!contractList || !Array.isArray(contractList)) {
+      console.warn('contractList must be an array');
+      return;
+    }
+    // 初始化排序列表
+    this.sortList = contractList.map((item, index) => ({
+      ...item,
+      sortNum: index + 1
+    }));
+    this.visible = true;
+  },    // 添加隐藏方法
+    hide() {
+      this.visible = false;
+    },
+    initSortList() {
+      this.sortList = this.contractList.map((item, index) => ({
+        ...item,
+        sortNum: index + 1
+      }));
+    },
+    handleDragEnd() {
+      // 重新计算序号
+      this.sortList.forEach((item, index) => {
+        item.sortNum = index + 1;
+      });
+    },
+    moveItem(index, direction) {
+      const newIndex = index + direction;
+      const item = this.sortList.splice(index, 1)[0];
+      this.sortList.splice(newIndex, 0, item);
+      this.handleDragEnd();
+    },
+    handleNumberChange(value, index) {
+      const targetIndex = value - 1;
+      if (targetIndex === index) return;
+      
+      const item = this.sortList.splice(index, 1)[0];
+      this.sortList.splice(targetIndex, 0, item);
+      this.handleDragEnd();
+    },
+    handleClose() {
+      this.visible = false;
+    },
+    handleConfirm() {
+      this.$emit('confirm', this.sortList);
+      this.visible = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sort-container {
+  padding: 10px;
+
+  .tip-box {
+    background: #EFF6FF;
+    padding: 10px;
+    margin-bottom: 15px;
+    border-radius: 4px;
+    color: #3271FF;
+    font-size: 13px;
+    
+    .el-icon-info {
+      margin-right: 5px;
+      color: #3271FF;
+    }
+  }
+
+  .sort-list {
+    max-height: 500px;
+    overflow-y: auto;
+    .sort-item {
+      display: flex;
+      align-items: center;
+      padding: 10px;
+      border: 1px solid #EBEEF5;
+      margin-bottom: 10px;
+      border-radius: 4px;
+      
+      &:hover {
+        background: #f5f7fa;
+      }
+
+      .drag-handle {
+        cursor: move;
+        color: #909399;
+        margin-right: 10px;
+        font-size: 18px;
+      }
+
+      .item-content {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .item-actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .move-btns {
+          display: flex;
+        
+        }
+      }
+    }
+  }
+}
+</style>

src/views/manager/wbsinfo.vue

@@ -19,8 +19,19 @@
       @size-change="sizeChange"
       @refresh-change="refreshChange"
       @on-load="onLoad"
+       :search.sync="search"
     >
 
+<template slot-scope="{disabled,size}" slot="projectInfoListSearch">
+      <el-select v-model="search.projectId" placeholder="项目名称" filterable  clearable>
+          <el-option
+            v-for="item in projectList"
+            :key="item.id"
+            :label="item.projectAlias"
+            :value="item.id">
+          </el-option>
+        </el-select>
+  </template>
       <template slot="menuRight">
           <el-button
           type="primary"
@@ -118,15 +129,27 @@
                   </el-tooltip>
           </template>
     </avue-crud>
+           <!-- wbs排序弹窗 -->
+        <ContractSort 
+         ref="contractSortRef"
+         title="wbs排序弹窗"
+         :sortProLoad="sortProLoad"
+        @confirm="handleSortConfirm"
+      />
   </basic-container>
 </template>
 
 <script>
-import { getList, getDetail, add, update, remove } from "@/api/manager/wbsinfo";
+import { getList, getDetail, add, update, remove,sortWbs } from "@/api/manager/wbsinfo";
 import { mapGetters } from "vuex";
   import { getDictionary } from "@/api/system/dict";
+  import ContractSort from './ContractSort.vue'
+import { getProjectListPage } from "@/api/manager/projectinfo";
 
 export default {
+  components: {
+    ContractSort
+  },
   data () {
     return {
       form: {},
@@ -225,11 +248,8 @@ export default {
             label: "引用项目",
             prop: "projectInfoList",
             display: false,
-          
-        
-       
-       
-           slot:true,
+            search: true,
+            slot:true,
           },
    
         ]
@@ -242,12 +262,17 @@ export default {
       },
        wbsTypeList:[],
        proJectList:[],
+       sortProLoad:false,
+       wbsList:[],
+       sortWbsList:[],
+       projectList:[]
 
     };
   },
   created () {
   
-
+    this.getWbsList()
+    this.getProjectList()
   },
   computed: {
     ...mapGetters(["permission"]),
@@ -268,6 +293,16 @@ export default {
     }
   },
   methods: {
+  getProjectList () {
+      getProjectListPage({
+        current:1,
+        size:999,
+        ...this.searchForm
+
+      }).then((res) => {
+        this.projectList = res.data.data.records;
+      })
+    },
   generateTagItems(wbsTypes){
        const typeToLabelMap = {
         1: '质检',
@@ -431,10 +466,48 @@ export default {
     handleParameter(){
        this.$router.push('/wbs/parameter');
     },
+    getWbsList(){
+      getList(1, 1000).then(res => {
+        const data = res.data.data;
+        
+        this.wbsList=data['records']
+      });
+    },
     //排序
     handleSort(){
+         this.sortWbsList = JSON.parse(JSON.stringify(this.wbsList));
+        this.sortTitle = '合同段排序';
+
+          this.$nextTick(() => {
+            this.$refs.contractSortRef.show(this.sortWbsList);
+          });
+    },
+     handleSortConfirm(sortedList) {
+      // 这里处理排序后的数据
+      console.log('排序后的列表:', sortedList);
+      // TODO: 调用接口保存排序结果
+      this.wbsList = [...sortedList];
+        const ids = this.wbsList.map(item => item.id);
+     this. saveSort(ids);
 
     },
+    saveSort(ids){
+     {
+        
+        sortWbs(ids).then((res) => {
+                    this.sortProLoad= false;
+                    if(res.data.code==200){
+                        this.$message.success(res.data.msg)
+                      
+                                 this.onLoad(this.page);
+                    }else{
+                        this.$message.error(res.data.msg)
+                    }
+                })
+      }
+
+
+    }
   }
 };
 </script>