feat(site): save sync node ids

app/src/components/StdDesign/StdDataDisplay/StdBatchEdit.vue

@@ -1,48 +1,60 @@
 <script setup lang="ts">
+import type Curd from '@/api/curd'
+import type { Column } from '@/components/StdDesign/types'
+import { getPithyColumns } from '@/components/StdDesign/StdDataDisplay/methods/columns'
 import StdDataEntry from '@/components/StdDesign/StdDataEntry'
 import { message } from 'ant-design-vue'
 
 const props = defineProps<{
   // eslint-disable-next-line ts/no-explicit-any
-  api: (ids: number[], data: any) => Promise<void>
+  api: Curd<any>
   beforeSave?: () => Promise<void>
+  columns: Column[]
 }>()
 
-const emit = defineEmits(['onSave'])
+const emit = defineEmits(['save'])
 
-const batchColumns = ref([])
+const batchColumns = ref<Column[]>([])
+const selectedRowKeys = ref<(number | string)[]>([])
+// eslint-disable-next-line ts/no-explicit-any
+const selectedRows = ref<any[]>([])
 
 const visible = ref(false)
+const data = ref({})
+const error = ref({})
+const loading = ref(false)
 
-const selectedRowKeys = ref([])
 // eslint-disable-next-line ts/no-explicit-any
-function showModal(c: any, rowKeys: any) {
+function showModal(c: Column[], rowKeys: (number | string)[], rows: any[]) {
+  data.value = {}
   visible.value = true
   selectedRowKeys.value = rowKeys
   batchColumns.value = c
+  selectedRows.value = rows
 }
 
 defineExpose({
   showModal,
 })
 
-const data = reactive({})
-const error = reactive({})
-const loading = ref(false)
-
 async function ok() {
   loading.value = true
 
   await props.beforeSave?.()
 
-  await props.api(selectedRowKeys.value, data).then(async () => {
-    message.success($gettext('Save successfully'))
-    emit('onSave')
-  }).catch(e => {
-    message.error($gettext(e?.message) ?? $gettext('Server error'))
-  }).finally(() => {
-    loading.value = false
-  })
+  await props.api.batch_save(selectedRowKeys.value, data.value)
+    .then(async () => {
+      message.success($gettext('Save successfully'))
+      emit('save')
+      visible.value = false
+    })
+    .catch(e => {
+      error.value = e.errors
+      message.error($gettext(e?.message) ?? $gettext('Server error'))
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 </script>
 
@@ -52,23 +64,31 @@ async function ok() {
     class="std-curd-edit-modal"
     :mask="false"
     :title="$gettext('Batch Modify')"
-    :cancel-text="$gettext('Cancel')"
-    :ok-text="$gettext('OK')"
+    :cancel-text="$gettext('No')"
+    :ok-text="$gettext('Save')"
     :confirm-loading="loading"
     :width="600"
     destroy-on-close
     @ok="ok"
   >
+    <p>{{ $gettext('Belows are selected items that you want to batch modify') }}</p>
+    <ATable
+      class="mb-4"
+      size="small"
+      :columns="getPithyColumns(columns)"
+      :data-source="selectedRows"
+      :pagination="{ showSizeChanger: false, pageSize: 5, size: 'small' }"
+    />
+
+    <p>{{ $gettext('Leave blank if do not want to modify') }}</p>
     <StdDataEntry
       :data-list="batchColumns"
       :data-source="data"
-      :error="error"
+      :errors="error"
     />
 
     <slot name="extra" />
   </AModal>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>