合同中期支付项增加排序功能

src/views/project/debit/contract/pay.vue

@@ -4,6 +4,10 @@
             <hc-new-card>
                 <template #header>
                     <el-button hc-btn type="primary" @click="systemPaymentClick">引用项目支付项</el-button>
+                    <el-button hc-btn type="primary" @click="sortClick">
+                        <HcIcon name="arrow-up-down" />
+                        <span>排序</span>
+                    </el-button>
                 </template>
                 <hc-table
                     :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new
@@ -76,6 +80,31 @@
                 </div>
             </div>
         </hc-new-dialog>
+        <!-- 排序弹框 -->
+        <hc-new-dialog v-model="sortModal" title="排序" widths="80rem">
+            <hc-table
+                ref="tableRef"
+                ui="hc-test-drop-table"
+                :column="sorttableColumn" :datas="sorttableData" :loading="tableLoading" :index-style="{ width: 80 }"
+                is-new
+                is-row-drop is-sort quick-sort
+                @row-drop="rowDropTap" @row-sort="rowSortTap"
+            >
+                <template #isDeduct="{ row }">
+                    <span>{{ row?.isDeduct === 1 ? '是' : '否' }}</span>
+                </template>
+                <template #isTotalTerms="{ row }">
+                    <span>{{ row?.isTotalTerms === 1 ? '是' : '否' }}</span>
+                </template>
+            </hc-table>
+            
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button size="large" @click="sortModal = false">取消</el-button>
+                    <el-button :loading="sortLoding" hc-btn type="primary" @click="saveSortClick">保存</el-button>
+                </div>
+            </template>
+        </hc-new-dialog>
     </div>
 </template>
 
@@ -141,7 +170,17 @@ const tableColumn = ref([
     { key: 'payApplicableTypeName', name: '适用类型', width: 100 },
     { key: 'action', name: '操作', width: 100 },
 ])
+const sorttableColumn = ref([
+    { key: 'payNumber', name: '支付项编号', width: 140 },
+    { key: 'payName', name: '支付项名称' },
+    { key: 'payTypeName', name: '支付项类型', width: 160 },
+    { key: 'isDeduct', name: '是否为扣款项', width: 100 },
+    { key: 'isTotalTerms', name: '是否合计项', width: 100 },
+    { key: 'payApplicableTypeName', name: '适用类型', width: 100 },
+
+])
 const tableData = ref([])
+const sorttableData = ref([])
 const getTableData = async () => {
     tableLoading.value = true
     const { error, code, data } = await payApi.getProListPage({
@@ -314,4 +353,31 @@ const tableCollectCheckChange = (list) => {
     selectArr.value = list
     selectTableCollectIds.value = arrToId(list)
 }
+
+
+const sortModal = ref(false)
+const sortClick = ()=>{
+    sortModal.value = true
+    sorttableData.value = Array.from(tableData.value)
+}
+const tableRef = ref(null)
+// 行拖拽
+const rowDropTap = (rows) => {
+    sorttableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        tableRef.value?.setData(rows)
+    })
+}
+
+// 点击排序
+const rowSortTap = (rows) => {
+    sorttableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        sorttableData.value = rows
+    })
+}
+const sortLoding = ref(false)
+const saveSortClick = ()=>{
+
+}
 </script>