20260924172548

code/fms/fms-vue/qdesign-preview.html

@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>查询配置面板预览（调试用，验证完删除）</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+      }
+      body {
+        background: #f1f3f6;
+      }
+      /* 复刻 module-management 右栏的 .mm-config-pane：面板就挂在这个滚动容器里 */
+      #pane {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        overflow: auto;
+        padding: 12px 16px 16px;
+        box-sizing: border-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="pane"></div>
+    <script type="module">
+      import { createApp, h, ref } from 'vue'
+      import { createPinia } from 'pinia'
+      import { registerFeature, useAreaSelection } from 'stk-table-vue'
+      import 'stk-table-vue/lib/style.css'
+      import '/src/styles/index.css'
+      import ModuleQueryConfigPanel from '/src/views/module/module-management/ModuleQueryConfigPanel.vue'
+
+      registerFeature(useAreaSelection)
+
+      const fields = [
+        { b_field: 'b_no', b_name: '单号', b_type: 'input', b_canuse: 1 },
+        { b_field: 'b_company', b_name: '客户名称', b_type: 'input', b_canuse: 1 },
+        { b_field: 'b_state', b_name: '运行状态', b_type: 'select', b_canuse: 1 },
+        { b_field: 'b_audit_state', b_name: '审核状态', b_type: 'select', b_canuse: 1 },
+        { b_field: 'b_amount', b_name: '金额', b_type: 'money', b_canuse: 1 },
+        { b_field: 'b_date', b_name: '业务日期', b_type: 'date', b_canuse: 1 },
+        { b_field: 'b_owner', b_name: '业务员', b_type: 'select', b_canuse: 1 },
+        { b_field: 'b_remark', b_name: '备注', b_type: 'textarea', b_canuse: 0 },
+      ]
+
+      const schema = ref({
+        schemaVersion: 3,
+        views: [
+          { code: 'all', label: '全部', group: '', order: 10, showCount: true, isDefault: true, conditionSql: '' },
+          {
+            code: 'pending',
+            label: '待处理',
+            group: '运行状态',
+            order: 20,
+            showCount: true,
+            conditionSql: "[b_state] = N'待处理'",
+          },
+          {
+            code: 'sailed',
+            label: '已开航',
+            group: '运行状态',
+            order: 30,
+            showCount: false,
+            conditionSql: "[b_state] = N'已开航'",
+          },
+          {
+            code: 'audit_wait',
+            label: '待审核',
+            group: '审核状态',
+            order: 40,
+            showCount: true,
+            conditionSql: "[b_audit_state] = N'待审核' AND [b_amount] > 1000",
+          },
+          {
+            code: 'audit_done',
+            label: '已审核',
+            group: '审核状态',
+            order: 50,
+            showCount: false,
+            conditionSql: "[b_audit_state] = N'已审核'",
+          },
+        ],
+        keywordSearch: { fields: ['b_no', 'b_company'] },
+        quickFilters: [
+          { field: 'b_state', order: 10 },
+          { field: 'b_date', order: 20 },
+          { field: 'b_owner', order: 30 },
+        ],
+        queryFields: {
+          b_no: { component: 'input', operator: 'like' },
+          b_company: { component: 'input', operator: 'like' },
+          b_state: { component: 'select', operator: 'eq' },
+          b_amount: { component: 'number', operator: 'ge' },
+          b_date: { component: 'date', operator: 'between' },
+          b_owner: { component: 'select', operator: 'eq' },
+          b_remark: { component: 'input', operator: 'like' },
+        },
+      })
+
+      const Preview = {
+        setup() {
+          return () =>
+            h(ModuleQueryConfigPanel, {
+              moduleId: 'demo',
+              fields,
+              loading: false,
+              modelValue: schema.value,
+              'onUpdate:modelValue': (value) => {
+                schema.value = value
+              },
+            })
+        },
+      }
+
+      const pinia = createPinia()
+      const app = createApp(Preview)
+      app.use(pinia)
+      app.mount('#pane')
+    </script>
+  </body>
+</html>