@chenchaolong/plugin-trade-compliance-workbench 0.1.47 → 0.1.48

package/dist/lib/remote-components/trade-compliance-workbench/app.js

@@ -194,15 +194,17 @@
       }
     }
 
-    async function searchSupplierHsCandidatesForForm() {
+    async function searchSupplierHsCandidatesForForm(page) {
       if (!formDialog || formDialog.type !== 'supplier_product' || busy) return
       const keyword = String(formDialog.hsCandidateKeyword || buildSupplierHsCandidateKeyword(formDialog.values) || '').trim()
       if (!keyword) {
         setFormDialog(Object.assign({}, formDialog, { hsCandidateError: '请输入商品名称、型号或海关编码后再查询。' }))
         return
       }
+      const nextPage = Math.max(1, Number(page) || 1)
       setFormDialog(Object.assign({}, formDialog, {
         hsCandidateKeyword: keyword,
+        hsCandidatePage: nextPage,
         hsCandidateLoading: true,
         hsCandidateError: '',
         hsCandidateStatus: ''
@@ -210,20 +212,22 @@
       try {
         const response = await executeAction('search_hs_code', null, {
           keywords: keyword,
-          page: 1,
+          page: nextPage,
           filterFailureCode: true,
           displayChapter: false,
           displayEnName: true
         }, {})
         assertActionSuccess(response)
         const result = getActionDataPayload(response)
-        const candidates = Array.isArray(result && result.results) ? result.results.slice(0, 10) : []
+        const candidates = Array.isArray(result && result.results) ? result.results : []
         setFormDialog((current) => current ? Object.assign({}, current, {
           hsCandidateKeyword: keyword,
+          hsCandidatePage: nextPage,
           hsCandidateLoading: false,
           hsCandidateError: '',
           hsCandidateStatus: candidates.length ? 'pending_confirmation' : 'not_found',
-          hsCandidates: candidates
+          hsCandidates: candidates,
+          hsCandidatePagination: result && result.pagination ? result.pagination : null
         }) : current)
       } catch (error) {
         setFormDialog((current) => current ? Object.assign({}, current, {
@@ -466,6 +470,8 @@
         values: valuesFromItem(item.type, item),
         hsCandidates: Array.isArray(merged.hsCodeCandidates) ? merged.hsCodeCandidates : [],
         hsCandidateKeyword: merged.hsCodeLookupKeyword || buildSupplierHsCandidateKeyword(merged),
+        hsCandidatePage: 1,
+        hsCandidatePagination: null,
         hsCandidateStatus: merged.hsCodeLookupStatus || '',
         hsCandidateError: merged.hsCodeLookupError || '',
         hsCandidateLoading: false
@@ -480,6 +486,8 @@
         values: emptyFormValues(type),
         hsCandidates: [],
         hsCandidateKeyword: '',
+        hsCandidatePage: 1,
+        hsCandidatePagination: null,
         hsCandidateStatus: '',
         hsCandidateError: '',
         hsCandidateLoading: false
@@ -1100,7 +1108,7 @@
       const fields = formDialog.type === 'controlled_goods' ? controlledGoodsFormFields : supplierProductFormFields
       const title = `${formDialog.mode === 'create' ? '新增' : '编辑'}${formDialog.type === 'controlled_goods' ? '管控商品' : '供应商商品'}`
       return h('div', { className: 'tcw-modal-backdrop' },
-        h('form', { className: 'tcw-modal tcw-form-modal', onSubmit: saveProductForm },
+        h('form', { className: formDialog.type === 'supplier_product' ? 'tcw-modal tcw-form-modal tcw-form-modal-supplier' : 'tcw-modal tcw-form-modal', onSubmit: saveProductForm },
           h('div', { className: 'tcw-modal-head' },
             h('h2', null, title),
             h('button', { type: 'button', className: 'tcw-icon-btn', onClick: () => setFormDialog(null) }, '×')
@@ -1119,6 +1127,7 @@
 
     function renderSupplierHsCandidatePanel() {
       const candidates = Array.isArray(formDialog.hsCandidates) ? formDialog.hsCandidates : []
+      const pagination = formDialog.hsCandidatePagination || null
       return h('section', { className: 'tcw-hs-candidate-panel' },
         h('div', { className: 'tcw-subsection-head' },
           h('div', null,
@@ -1132,23 +1141,46 @@
               placeholder: '商品名称、型号或海关编码',
               onChange: (event) => setFormDialog(Object.assign({}, formDialog, { hsCandidateKeyword: event.target.value }))
             }),
-            h('button', { type: 'button', className: 'tcw-mini-btn', disabled: busy || formDialog.hsCandidateLoading, onClick: searchSupplierHsCandidatesForForm }, formDialog.hsCandidateLoading ? '查询中' : '查询')
+            h('button', { type: 'button', className: 'tcw-mini-btn', disabled: busy || formDialog.hsCandidateLoading, onClick: () => searchSupplierHsCandidatesForForm(1) }, formDialog.hsCandidateLoading ? '查询中' : '查询')
           )
         ),
         formDialog.hsCandidateError ? h('div', { className: 'tcw-error' }, formDialog.hsCandidateError) : null,
-        candidates.length ? table(['编码', '商品名称', '英文名称', '单位', '退税率', '监管', '检验检疫', '操作'], candidates, (candidate) => [
-          h('strong', { className: 'tcw-hs-code-text' }, value(candidate.code)),
-          value(candidate.name),
-          value(candidate.englishName),
-          value(candidate.unit),
-          value(candidate.taxRefundRate),
-          value(candidate.regulatoryConditions),
-          value(candidate.inspectionQuarantine),
-          h('div', { className: 'tcw-row-actions' },
-            h('button', { type: 'button', className: 'tcw-mini-btn', onClick: () => selectHsCandidate(candidate) }, '选用'),
-            h('button', { type: 'button', className: 'tcw-mini-btn', disabled: !candidate.code && !candidate.detailUrl, onClick: () => loadHsCodeDetail(candidate) }, '详情')
-          )
-        ], '暂无候选编码。') : empty('暂无候选编码，可调整关键词后查询。')
+        candidates.length ? h('div', { className: 'tcw-hs-candidate-result' },
+          table(['编码', '商品名称', '英文名称', '单位', '退税率', '监管', '检验检疫', '操作'], candidates, (candidate) => [
+            h('strong', { className: 'tcw-hs-code-text' }, value(candidate.code)),
+            value(candidate.name),
+            value(candidate.englishName),
+            value(candidate.unit),
+            value(candidate.taxRefundRate),
+            value(candidate.regulatoryConditions),
+            value(candidate.inspectionQuarantine),
+            h('div', { className: 'tcw-row-actions' },
+              h('button', { type: 'button', className: 'tcw-mini-btn', onClick: () => selectHsCandidate(candidate) }, '选用'),
+              h('button', { type: 'button', className: 'tcw-mini-btn', disabled: !candidate.code && !candidate.detailUrl, onClick: () => loadHsCodeDetail(candidate) }, '详情')
+            )
+          ], '暂无候选编码。'),
+          renderSupplierHsCandidatePagination(pagination)
+        ) : empty('暂无候选编码，可调整关键词后查询。')
+      )
+    }
+
+    function renderSupplierHsCandidatePagination(pagination) {
+      if (!pagination || (!pagination.hasPrevious && !pagination.hasNext && (!pagination.pages || pagination.pages.length <= 1))) return null
+      const pages = Array.isArray(pagination.pages) ? pagination.pages.filter((item) => item.page) : []
+      const visiblePages = pages.filter((item, index, arr) => arr.findIndex((candidate) => candidate.page === item.page) === index).slice(0, 10)
+      const currentPage = pagination.currentPage || formDialog.hsCandidatePage || 1
+      return h('div', { className: 'tcw-pagination hs-code-pagination' },
+        h('span', null, `第 ${currentPage} 页`),
+        h('div', { className: 'tcw-page-buttons' },
+          h('button', { className: 'tcw-mini-btn', disabled: formDialog.hsCandidateLoading || !pagination.hasPrevious, onClick: () => searchSupplierHsCandidatesForForm(currentPage - 1) }, '上一页'),
+          visiblePages.map((item) => h('button', {
+            key: item.page,
+            className: item.current ? 'tcw-mini-btn active' : 'tcw-mini-btn',
+            disabled: formDialog.hsCandidateLoading || item.current,
+            onClick: () => searchSupplierHsCandidatesForForm(item.page)
+          }, String(item.page))),
+          h('button', { className: 'tcw-mini-btn', disabled: formDialog.hsCandidateLoading || !pagination.hasNext, onClick: () => searchSupplierHsCandidatesForForm(currentPage + 1) }, '下一页')
+        )
       )
     }
 
@@ -1950,6 +1982,12 @@ button, input, textarea, select { font: inherit; letter-spacing: 0; }
 .tcw-modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(15, 23, 42, .32); padding: 20px; }
 .tcw-modal { display: grid; gap: 12px; width: min(900px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--tcw-border); border-radius: 8px; background: var(--tcw-card); padding: 16px; box-shadow: 0 18px 48px rgba(15, 23, 42, .18); }
 .tcw-form-modal { width: min(960px, 100%); }
+.tcw-form-modal-supplier {
+  width: min(1180px, calc(100vw - 96px));
+  max-height: min(760px, calc(100vh - 56px));
+  gap: 10px;
+  padding: 14px;
+}
 .tcw-confirm-modal { width: min(480px, 100%); }
 .tcw-hs-detail-modal { width: min(980px, 100%); }
 .tcw-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@@ -1959,6 +1997,61 @@ button, input, textarea, select { font: inherit; letter-spacing: 0; }
 .tcw-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 .tcw-edit-grid-two { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
 .tcw-field-wide { grid-column: 1 / -1; }
+.tcw-form-modal-supplier .tcw-modal-head h2 { font-size: 17px; }
+.tcw-form-modal-supplier .tcw-edit-grid-two {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px 12px;
+}
+.tcw-form-modal-supplier .tcw-field { gap: 4px; }
+.tcw-form-modal-supplier .tcw-field span { font-size: 11px; }
+.tcw-form-modal-supplier .tcw-field input,
+.tcw-form-modal-supplier .tcw-field select {
+  min-height: 32px;
+  padding: 6px 9px;
+}
+.tcw-form-modal-supplier .tcw-field textarea {
+  min-height: 58px;
+  padding: 7px 9px;
+}
+.tcw-form-modal-supplier .tcw-field-wide {
+  grid-column: span 3;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr);
+  gap: 10px;
+  align-items: start;
+  border-top: 1px solid var(--tcw-border);
+  padding-top: 10px;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-panel > .tcw-subsection-head {
+  align-items: center;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-panel > .tcw-table-wrap,
+.tcw-form-modal-supplier .tcw-hs-candidate-panel > .tcw-empty,
+.tcw-form-modal-supplier .tcw-hs-candidate-panel > .tcw-error {
+  grid-column: 1 / -1;
+  max-height: 210px;
+  overflow: auto;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-result {
+  display: grid;
+  gap: 8px;
+  grid-column: 1 / -1;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-result .tcw-table-wrap {
+  max-height: 210px;
+}
+.tcw-form-modal-supplier .tcw-hs-candidate-search {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+.tcw-form-modal-supplier .tcw-modal-actions {
+  position: sticky;
+  bottom: -14px;
+  border-top: 1px solid var(--tcw-border);
+  background: var(--tcw-card);
+  padding-top: 10px;
+}
 .tcw-confirm-text { margin: 0; color: var(--tcw-text); font-size: 14px; line-height: 1.7; }
 .tcw-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 .tcw-detail-field { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; align-items: start; border: 1px solid var(--tcw-border); border-radius: 6px; background: var(--tcw-soft); padding: 8px 10px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chenchaolong/plugin-trade-compliance-workbench",
-  "version": "0.1.47",
+  "version": "0.1.48",
   "description": "Trade Compliance Workbench app plugin for controlled goods review, supplier product management, and customs workbook generation.",
   "author": {
     "name": "XpertAI",