ui

2025-04-23 11:22:46 +08:00
parent 7a1aae1e2f
commit 0b29e4e856
20 changed files with 1301 additions and 1 deletions
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+
+<style>
+  .config-item {
+    margin-bottom: 1rem;
+  }
+
+  .field-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .field-item {
+    border: 1px solid #ddd;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+  }
+</style>
+
+<body class="container flex flex-col h-full gap-8">
+  <!-- 字段选择 -->
+  <h2 class="text-2xl">高级检索设置</h2>
+  <!-- 行数设置 -->
+  <div class="config-item">
+    <label>行数限制：</label>
+    <input type="number" !value="opts.page_size" @input='opts.page_size=Number($event.target.value)' min="1"
+      max="100" />
+  </div>
+  <!-- 排序设置 -->
+  <div class="config-item flex">
+    <label>排序字段：</label>
+    <input-select class="flex-grow" v:value='opts.sort_by' :options='options()'></input-select>
+    <label style="margin-left:1rem">排序方向：</label>
+    <input-select class="flex-grow" v:value='opts.order' :options='directionOpts'></input-select>
+  </div>
+  <div class="config-item">
+    <h4>选择显示字段：</h4>
+    <div class="field-list mt-4">
+      <span v-for="field in keys" :class="['field-item', field.hidden?'':'bg-blue-100' ]"
+        @click="field.hidden=!field.hidden">
+        {{ field.label || field.name }}
+      </span>
+    </div>
+  </div>
+  <!-- 筛选设置 -->
+  <div class="config-item">
+    <h4 class="mb-4">字段筛选：</h4>
+    <div class="flex flex-wrap justify-between">
+      <div v-for="field in keys" class="mb-2">
+        <div refu='input' label_width='8rem' :label='field.label' v:value='filters[field.name]' type='text'></div>
+      </div>
+    </div>
+  </div>
+  <div class="flex-grow"></div>
+  <button class="float-right bg-blue-400 rounded px-4 py-2" @click="wrap_apply">应用配置</button>
+</body>
+<script setup>
+  keys = [
+    {name: 'id', label: 'ID', type: 'number'},
+    {name: 'name', label: '姓名', type: 'string'},
+  ]
+  opts = {
+    page: 1,
+    page_size: 10,
+    keyword: '',
+    keywords: {},
+    sort_by: 'created_at',
+    order: 'desc',
+  }
+  filters = {}
+  options = () => keys.map(f => {
+    return {value: f.name, label: f.label}
+  })
+  directionOpts = [
+    {value: 'asc', label: '升序'},
+    {value: 'desc', label: '降序'}
+  ]
+  apply = () => {
+    console.log('当前配置:', opts)
+  }
+  wrap_apply = () => {
+    let tmp = {}
+    for (let key in filters) {
+      if (filters[key] !== undefined && filters[key] !== '' && filters[key] !== null) {
+        tmp[key] = filters[key]
+      }
+    }
+    opts.keywords = tmp
+    console.log('当前配置:', opts)
+    apply()
+  }
+</script>
+
+</html>