表格排序

package.json

@@ -18,7 +18,7 @@
         "dayjs": "^1.11.9",
         "echarts": "^5.4.2",
         "element-plus": "2.3.8",
-        "hc-vue3-ui": "^1.6.4",
+        "hc-vue3-ui": "^1.6.5",
         "js-base64": "^3.7.5",
         "js-cookie": "^3.0.5",
         "js-fast-way": "^0.2.1",

src/views/system/components/tab-approve.vue

@@ -5,77 +5,75 @@
                 <template #header>
                     <span class="mr-2">审批类型:</span>
                     <el-button _icon hc-btn size="small" type="primary" @click="openpriceEdit(1)">
-                        <HcIcon name="add"/>
+                        <HcIcon name="add" />
                     </el-button>
                 </template>
                 <div> <span class="mt-2">审批一级科目:</span></div>
                 <div class="hc-layout-left-box menu mt-3">
                     <div class="hc-menu-contents-box">
                         <el-scrollbar>
-                            <HcMenuSimple :datas="menuOptions" :keys="menuKey" :props="menusProps"
-                                          :menus="contextMenu" @menuTap="contextMenuClick"
-                                          @change="menuChange"/>
+                            <HcMenuSimple
+                                :datas="menuOptions" :keys="menuKey" :props="menusProps"
+                                :menus="contextMenu" @menuTap="contextMenuClick"
+                                @change="menuChange"
+                            />
                         </el-scrollbar>
                     </div>
-
                 </div>
             </HcCardItem>
 
             <div class="hc-page-content-box">
-                <HcCardItem ui="hac-card-item" actionSize="lg">
+                <HcCardItem ui="hac-card-item" action-size="lg">
                     <template #header>
                         <span class="mr-2">流程设置:</span>
                     </template>
                     <template #extra>
-                        <el-button size="large" type="primary" hc-btn @click="saveApprove" :disabled="menuKey.length<1" :loading="saveApprovelaoding">
-                        <HcIcon name="save"/>
-                        <span>保存</span>
-                    </el-button>
+                        <el-button size="large" type="primary" hc-btn :disabled="menuKey.length < 1" :loading="saveApprovelaoding" @click="saveApprove">
+                            <HcIcon name="save" />
+                            <span>保存</span>
+                        </el-button>
                     </template>
                     <div class="approve-box">
-                        <el-checkbox-group v-model="checkList"  @change="handleCheckedApproveChange">
-                            <el-checkbox  v-for="item in checkData" :key="item" :label="item.dictName"  />
+                        <el-checkbox-group v-model="checkList" @change="handleCheckedApproveChange">
+                            <el-checkbox v-for="item in checkData" :key="item" :label="item.dictName" />
                         </el-checkbox-group>
-                       <HcTable :column="tableColumn" :datas="tableData" ui="hc-test-drop-table" isRowDrop isSort  @row-drop="rowDropTap" @row-sort="rowSortTap"/>
+                        <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" ui="hc-test-drop-table" is-row-drop is-sort @row-drop="rowDropTap" @row-sort="rowSortTap" />
                     </div>
                 
                     <div class="approve-box mt-4">
                         <el-checkbox-group v-model="checkList1" @change="handleCheckedApproveChange1">
-                            <el-checkbox  v-for="item in checkData" :key="item" :label="item.dictName"  />
-                  
+                            <el-checkbox v-for="item in checkData" :key="item" :label="item.dictName" />
                         </el-checkbox-group>
-                       <HcTable :column="tableColumn1" :datas="tableData1" ui="hc-test-drop-table"  class="mt-4"/>
-                   
+                        <HcTable :column="tableColumn1" :datas="tableData1" ui="hc-test-drop-table" class="mt-4" />
                     </div>
                 </HcCardItem>
             </div>
         </div>
-      
     </HcCard>
-                <!--预算分类新增编辑弹窗-->
-                <HcDialog bgColor="#ffffff" widths="22rem" isToBody :show="priceModal" :title="priceTitle" @close="priceModalClose" @save="saveparentClick">
-                        <el-form :model="priceform" label-position="top" label-width="auto" size="large">
-                            <el-form-item label="一级科目名称:">
-                                <el-input v-model="priceform.dictName"/>
-                            </el-form-item>
-                        </el-form>
-                    </HcDialog>
+    <!-- 预算分类新增编辑弹窗 -->
+    <HcDialog bg-color="#ffffff" widths="22rem" is-to-body :show="priceModal" :title="priceTitle" @close="priceModalClose" @save="saveparentClick">
+        <el-form :model="priceform" label-position="top" label-width="auto" size="large">
+            <el-form-item label="一级科目名称:">
+                <el-input v-model="priceform.dictName" />
+            </el-form-item>
+        </el-form>
+    </HcDialog>
 </template>
 
 <script setup>
-import {onMounted, ref, watch,nextTick} from "vue";
-import {submitDictionary,removeDictionary,getParentList,getApproveList,submitApproveList} from '~api/system/parameter.js';
-import {getArrValue} from "js-fast-way"
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { getApproveList, getParentList, removeDictionary, submitApproveList, submitDictionary } from '~api/system/parameter.js'
+import { getArrValue } from 'js-fast-way'
 
 const props = defineProps({
     cur: {
-        type: [String,Number],
-        default: ''
+        type: [String, Number],
+        default: '',
     },
     type:{
-        type: [String,Number],
-        default: ''
-    }
+        type: [String, Number],
+        default: '',
+    },
 })
 
 const tabsKey = ref(props.cur)
@@ -85,7 +83,7 @@ const tabsType = ref(props.type)
 watch(() => [
     props.cur,
     props.type,
-], ([key,type]) => {
+], ([key, type]) => {
     tabsKey.value = key
     tabsType.value = type
    
@@ -97,24 +95,23 @@ onMounted(() => {
     getcheckData()
    
 })
-const menuItem=ref({})
+const menuItem = ref({})
 //获取一级科目
-const getParentListData=async()=>{
-    const { error, code, data,msg } = await getParentList({
+const getParentListData = async ()=>{
+    const { error, code, data, msg } = await getParentList({
         type:tabsType.value,
        
     })
     if (!error && code === 200) {
         menuOptions.value = getArrValue(data['records'])
-        if( menuOptions.value.length>0){
-            menuKey.value= menuOptions.value[0]?.id
-            menuItem.value.id =   menuOptions.value[0]?.id
+        if ( menuOptions.value.length > 0) {
+            menuKey.value = menuOptions.value[0]?.id
+            menuItem.value.id = menuOptions.value[0]?.id
             getApproveListData()
            
         }
-    } 
-    else {
-        menuOptions.value =[]
+    } else {
+        menuOptions.value = []
         window.$message?.warning(msg)
     }
 }
@@ -124,56 +121,55 @@ const checkList1 = ref([])
 
 //左侧菜单
 const menuKey = ref('')
-const menuOptions = ref([]);
+const menuOptions = ref([])
 const menuChange = (item) => {
     console.log(item)
     menuKey.value = item?.id
-    menuItem.value=item
+    menuItem.value = item
     getApproveListData()
   
 }
-const getApproveListData=async()=>{
-    checkList.value=[]
-    checkList1.value=[]
-    const { error, code, data,msg } = await getApproveList({
-       id:menuKey.value
+const getApproveListData = async ()=>{
+    checkList.value = []
+    checkList1.value = []
+    const { error, code, data, msg } = await getApproveList({
+       id:menuKey.value,
     })
     if (!error && code === 200) {
-      tableData.value=data?.审批岗位||[]
-      tableData1.value=data?.抄送信息||[]
-      if(tableData.value.length>0){
+      tableData.value = data?.审批岗位 || []
+      tableData1.value = data?.抄送信息 || []
+      if (tableData.value.length > 0) {
         tableData.value.forEach((ele)=>{
         checkList.value.push(ele.roleName)
         })
-      }else{
-        checkList.value=[]
+      } else {
+        checkList.value = []
       }
-    if(tableData1.value.length>0){
+    if (tableData1.value.length > 0) {
         tableData1.value.forEach((ele)=>{
         checkList1.value.push(ele.roleName)
       })
-    }else{
-        checkList1.value=[]
+    } else {
+        checkList1.value = []
     }
         
-    } 
-    else {
-        tableData.value=[]
-        tableData1.value=[]
+    } else {
+        tableData.value = []
+        tableData1.value = []
     }
 
 }
 const menusProps = ref({
     key: 'id',
-    label: 'dictName'
+    label: 'dictName',
 })
 
 //菜单的右键菜单
 const contextMenu = ref([])
 const setContextMenu = () => {
-    let newArr = [];
-    newArr.push({icon: 'draft', label: '编辑分类', key: "edit"})
-    newArr.push({icon: 'delete-bin', label: '删除分类', key: "del"})
+    let newArr = []
+    newArr.push({ icon: 'draft', label: '编辑分类', key: 'edit' })
+    newArr.push({ icon: 'delete-bin', label: '删除分类', key: 'del' })
 
     contextMenu.value = newArr
 }
@@ -182,8 +178,8 @@ const priceModal = ref(false)
 const openpriceEdit = (type) => {
     if (type === 1) {
         priceTitle.value = '新增分类'
-        priceform.value={}
-        menuKey.value=''
+        priceform.value = {}
+        menuKey.value = ''
     } else {
         priceTitle.value = '编辑分类'
     }
@@ -197,23 +193,23 @@ const priceModalClose = () => {
 }
 
 //菜单的右键菜单被点击
-const contextMenuClick = ({key, item}) => {
-    console.log(item,'item');
+const contextMenuClick = ({ key, item }) => {
+    console.log(item, 'item')
     menuKey.value = item?.id
   
     if (key === 'edit') {
         openpriceEdit(2)
         menuKey.value = item?.id
-        priceform.value.dictName=item.dictName
+        priceform.value.dictName = item.dictName
     } else if (key === 'del') {
         window?.$messageBox?.alert('您确定要删除该预算分类信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
             showCancelButton: true,
             confirmButtonText: '确认注销',
             cancelButtonText: '取消',
             type: 'warning',
-            callback: async(action) => {
+            callback: async (action) => {
                 if (action === 'confirm') {
-                        const {error, code, msg} = await removeDictionary({
+                        const { error, code, msg } = await removeDictionary({
                             ids: item?.id,
                         })
                         if (!error && code === 200) {
@@ -223,109 +219,109 @@ const contextMenuClick = ({key, item}) => {
                             window?.$message?.warning(msg)
                         }
                 }
-            }
+            },
         })
     }
 }
 
 //新增一级科目
-const saveparentClick=async()=>{
-    const { error, code, data,msg } = await submitDictionary({
+const saveparentClick = async ()=>{
+    const { error, code, data, msg } = await submitDictionary({
         type:tabsType.value,
         dictName:priceform.value?.dictName,
-        id:menuKey.value||null,
+        id:menuKey.value || null,
     })
    
     if (!error && code === 200) {
         window.$message?.success(msg)
-        priceModal.value=false
+        priceModal.value = false
         getParentListData()
-    } 
-    else {
+    } else {
         window.$message?.warning(msg)
     }
 }
 const tableColumn = [
-    {key: 'roleName', name: '审批岗位',align:'center'},
+    { key: 'roleName', name: '审批岗位', align:'center' },
   
 ]
 const tableData = ref([])
 const tableData1 = ref([])
-const handleCheckedApproveChange=(val)=>{
-    console.log(val,'val');
-    let  tabarr=[]
+const handleCheckedApproveChange = (val)=>{
+    console.log(val, 'val')
+    let tabarr = []
     checkData.value.forEach((item)=>{
         val.forEach((ele)=>{
-            if(item.dictName===ele){
-                tabarr.push({roleName:ele,roleId: item.id})
+            if (item.dictName === ele) {
+                tabarr.push({ roleName:ele, roleId: item.id })
             }
           
         })
     })
    
-    tableData.value=tabarr
+    tableData.value = tabarr
 } 
-const handleCheckedApproveChange1=(val)=>{
-    let  tabarr=[]
+const handleCheckedApproveChange1 = (val)=>{
+    let tabarr = []
     checkData.value.forEach((item)=>{
         val.forEach((ele)=>{
-            if(item.dictName===ele){
-                tabarr.push({roleName:ele,roleId: item.id})
+            if (item.dictName === ele) {
+                tabarr.push({ roleName:ele, roleId: item.id })
             }
           
         })
     })
-    tableData1.value=tabarr
+    tableData1.value = tabarr
 } 
 const tableColumn1 = [
-    {key: 'roleName', name: '抄送信息',align:'center'},
+    { key: 'roleName', name: '抄送信息', align:'center' },
   
 ]
 const checkData = ref([])
-const getcheckData=async()=>{
-    const { error, code, data,msg } = await getParentList({
+const getcheckData = async ()=>{
+    const { error, code, data, msg } = await getParentList({
         code:'dept_info',
-        type:11
+        type:11,
        
     })
     if (!error && code === 200) {
         checkData.value = getArrValue(data['records'])
         
-    } 
-    else {
-        checkData.value =[]
+    } else {
+        checkData.value = []
         window.$message?.warning(msg)
     }
 }
 
 
 // 行拖拽
+const tableRef = ref(null)
 const rowDropTap = (rows) => {
     tableData.value = rows
+    tableRef.value?.setData(rows)
 }
 // 点击排序
 const rowSortTap = (rows) => {
     tableData.value = rows
 }
 
-const saveApprovelaoding=ref(false)
-const subObj=ref({})
+const saveApprovelaoding = ref(false)
+const subObj = ref({})
 //保存流程
-const saveApprove=()=>{
-    console.log(tableData.value ,'审批岗位');
-    console.log(tableData1.value,'抄送信息');
-    subObj.value.approveRoleList=tableData.value
-    subObj.value.ccRoleList=tableData1.value
-    subObj.value.dictId=menuKey.value
-    console.log( subObj.value,' subObj.value');
+const saveApprove = ()=>{
+    console.log(tableData.value, '审批岗位')
+    console.log(tableData1.value, '抄送信息')
+    subObj.value.approveRoleList = tableData.value
+    subObj.value.ccRoleList = tableData1.value
+    subObj.value.dictId = menuKey.value
+    console.log( subObj.value, ' subObj.value')
     submitApprove()
 
 
 }
-const submitApprove=async()=>{
-    saveApprovelaoding.value=true;
-    const {error, code, data,msg} = await submitApproveList( subObj.value)
-    saveApprovelaoding.value=false;
+const submitApprove = async ()=>{
+    saveApprovelaoding.value = true
+    const { error, code, data, msg } = await submitApproveList( subObj.value)
+    saveApprovelaoding.value = false
     if (!error && code === 200) {
         window.$message.success(msg)
     } 

yarn.lock

@@ -777,7 +777,7 @@ electron-to-chromium@^1.4.284:
   resolved "http://47.110.251.215:9000/electron-to-chromium/-/electron-to-chromium-1.4.384.tgz#5c23b5579930dec9af2a93edafddbe991542eace"
   integrity sha512-I97q0MmRAAqj53+a8vZsDkEXBZki+ehYAOPzwtQzALip52aEp2+BJqHFtTlsfjoqVZYwPpHC8wM6MbsSZQ/Eqw==
 
-element-plus@2.3.8, element-plus@^2.3.8:
+element-plus@2.3.8:
   version "2.3.8"
   resolved "http://47.110.251.215:9000/element-plus/-/element-plus-2.3.8.tgz#46032abe1a712abfb65932f146ee19281312a9cf"
   integrity sha512-yHQR0/tG2LvPkpGUt7Te/hPmP2XW/BytBNUbx+EFO54VnGCOE3upmQcVffNp1PLgwg9sthYDXontUWpnpmLPJw==
@@ -1131,14 +1131,14 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hc-vue3-ui@^1.6.4:
-  version "1.6.4"
-  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.6.4.tgz#550469d05178d136d24f19371657fb678de412b4"
-  integrity sha512-gCaurnAc2KI9Q26Z1qNc+5mWn2LWPI2tPPAtgfRT+d4AchFakQwiKG9yqlIgdAU+oMt+AX81abDIA8VeP+Dw8g==
+hc-vue3-ui@^1.6.5:
+  version "1.6.5"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.6.5.tgz#f3c79ec3b42d89461e44b49daacd5fa7a1c9b5d7"
+  integrity sha512-/KYMvR1fv/Kq4OJCBJv2sZf75ldCdCjSDxVLtziYayo19FSfDRVHJ/nZVFsnJqCtv94GFLSp2/FixnuARYSa3w==
   dependencies:
     axios "^1.4.0"
     dayjs "^1.11.9"
-    element-plus "^2.3.8"
+    element-plus "2.3.8"
     js-fast-way "^0.2.1"
     js-md5 "^0.7.3"
     simple-uploader.js "^0.6.0"