wip: crud table

src/components/query-bar/QueryBar.vue

@@ -0,0 +1,12 @@
+<template>
+  <div min-h-60 p-15 flex items-start justify-between b-1 bc-ccc rounded-8 bg="#fafafc">
+    <n-space wrap :size="[35, 15]">
+      <slot />
+    </n-space>
+
+    <div flex-shrink-0>
+      <n-button secondary type="primary">重置</n-button>
+      <n-button ml-20 type="primary">搜索</n-button>
+    </div>
+  </div>
+</template>

src/components/query-bar/QueryBarItem.vue

@@ -0,0 +1,29 @@
+<template>
+  <div flex items-center>
+    <label v-if="!isNullOrWhitespace(label)" w-80 flex-shrink-0 :style="{ width: labelWidth + 'px' }">
+      {{ label }}
+    </label>
+    <div :style="{ width: contentWidth + 'px' }" flex-shrink-0>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { isNullOrWhitespace } from '@/utils/is'
+
+defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  labelWidth: {
+    type: Number,
+    default: 80,
+  },
+  contentWidth: {
+    type: Number,
+    default: 220,
+  },
+})
+</script>

src/components/table/CrudModal.vue

@@ -0,0 +1,44 @@
+<template>
+  <n-modal v-model:show="show" :style="{ width }" preset="card" :title="title" size="huge" :bordered="false">
+    <slot />
+    <template v-if="showFooter" #footer>
+      <footer flex justify-end>
+        <slot name="footer">
+          <n-button @click="show = false">取消</n-button>
+          <n-button ml-20 type="primary" @click="emit('onSave')">保存</n-button>
+        </slot>
+      </footer>
+    </template>
+  </n-modal>
+</template>
+
+<script setup>
+const props = defineProps({
+  width: {
+    type: String,
+    default: '600px',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  showFooter: {
+    type: Boolean,
+    default: true,
+  },
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:visible', 'onSave'])
+const show = computed({
+  get() {
+    return props.visible
+  },
+  set(v) {
+    emit('update:visible', v)
+  },
+})
+</script>

src/components/table/CrudTable.vue

@@ -0,0 +1,16 @@
+<template>
+  <QueryBar v-if="$slots.queryBar" mb-30>
+    <slot name="queryBar" />
+  </QueryBar>
+  <slot />
+</template>
+
+<script setup>
+const loading = ref(false)
+const tableData = ref([])
+const showModal = ref(true)
+const segmented = {
+  content: 'soft',
+  footer: 'soft',
+}
+</script>