vue3-django 0.1.0

package/src/components/layout/SideBar.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMenu, ElMenuItem, ElSubMenu } from 'element-plus'
+import Icon from '../widgets/Icon.vue'
+const props = defineProps({ menus: { type: Object, default: () => ({}) }, collapse: Boolean })
+const emit = defineEmits(['navigate'])
+const route = useRoute(),
+  router = useRouter()
+const groups = computed(() => Object.values(props.menus).filter((g) => g.items?.length))
+const active = computed(
+  () =>
+    groups.value
+      .flatMap((g) => g.items)
+      .filter((i) => route.path.startsWith(i.url))
+      .sort((a, b) => b.url.length - a.url.length)[0]?.url || route.path,
+)
+async function select(path) {
+  await router.push(path)
+  emit('navigate')
+}
+</script>
+<template>
+  <nav aria-label="主导航">
+    <ElMenu
+      :default-active="active"
+      :collapse="collapse"
+      :default-openeds="groups.map((g) => g.name)"
+      @select="select"
+    >
+      <template
+        v-for="group in groups"
+        :key="group.name"
+      >
+        <ElSubMenu
+          v-if="group.items.length > 1"
+          :index="group.name"
+          ><template #title
+            ><Icon :icon="group.icon" /><span>{{ group.name }}</span></template
+          ><ElMenuItem
+            v-for="item in group.items"
+            :key="item.url"
+            :index="item.url"
+            ><Icon :icon="item.icon" /><template #title>{{ item.name }}</template></ElMenuItem
+          ></ElSubMenu
+        >
+        <ElMenuItem
+          v-else
+          :index="group.items[0].url"
+          ><Icon :icon="group.items[0].icon || group.icon" /><template #title>{{
+            group.items[0].name
+          }}</template></ElMenuItem
+        >
+      </template>
+    </ElMenu>
+  </nav>
+</template>

package/src/components/layout/ViewTabs.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { computed, defineComponent, h, provide, shallowReactive, shallowRef, watch } from 'vue'
+import { RouterView, routeLocationKey, useRoute, useRouter } from 'vue-router'
+import { ElTabs, ElTabPane } from 'element-plus'
+import { TabKey } from '../../composables/tab.js'
+const props = defineProps({ fallback: { type: String, default: '/' } })
+const route = useRoute(),
+  router = useRouter(),
+  tabs = shallowRef([])
+const standalone = computed(() => route.meta.layout === 'main' || route.meta.tabs === false)
+const RouteTab = defineComponent({
+  props: { tab: { type: Object, required: true } },
+  setup(props) {
+    const localRoute = shallowReactive({ ...props.tab.to })
+    watch(
+      () => props.tab.to,
+      (value) => Object.assign(localRoute, value),
+    )
+    provide(routeLocationKey, localRoute)
+    provide(TabKey, {
+      update({ title, icon }) {
+        if (title != null && title !== '') props.tab.title = String(title)
+        if (icon !== undefined) props.tab.icon = icon
+        props.tab.customTitle = true
+      },
+    })
+    return () =>
+      h(
+        RouterView,
+        { route: props.tab.to },
+        {
+          default: ({ Component }) => (Component ? h(Component, { tab: props.tab }) : null),
+        },
+      )
+  },
+})
+function changeRoute(to) {
+  if (to.meta.layout === 'main' || to.meta.tabs === false || !to.matched.length) return
+  const title = to.meta.title || to.path
+  const tab = {
+    name: to.path,
+    title: to.params.id != null ? `${title} #${to.params.id}` : title,
+    icon: to.meta.icon || to.meta.model?.icon,
+    to,
+  }
+  const existing = tabs.value.find((t) => t.name === tab.name)
+  if (existing) {
+    if (existing.customTitle) tab.title = existing.title
+    Object.assign(existing, tab)
+  } else tabs.value = [...tabs.value, shallowReactive(tab)]
+}
+watch(
+  () => route.fullPath,
+  () => changeRoute({ ...route }),
+  { immediate: true },
+)
+async function tabRemove(name) {
+  const index = tabs.value.findIndex((t) => t.name === name)
+  if (index < 0) return
+  if (route.path === name) {
+    const next = tabs.value[index + 1] || tabs.value[index - 1]
+    // Keep the final tab when fallback resolves to the same page.
+    if (!next && router.resolve(props.fallback).path === name) return
+    const result = await router.push(next?.to.fullPath || props.fallback)
+    if (result || route.path === name) return
+  }
+  tabs.value = tabs.value.filter((t) => t.name !== name)
+}
+function clearTabs() {
+  tabs.value = tabs.value.filter((t) => t.name === route.path)
+}
+function resetTabs() {
+  tabs.value = []
+}
+function select(name) {
+  const tab = tabs.value.find((t) => t.name === name)
+  if (tab) router.push(tab.to.fullPath)
+}
+defineExpose({ tabs, tabRemove, clearTabs, resetTabs })
+</script>
+<template>
+  <RouterView v-if="standalone" />
+  <ElTabs
+    v-else
+    :model-value="route.path"
+    type="card"
+    class="viewtabs"
+    @tab-change="select"
+    @tab-remove="tabRemove"
+  >
+    <ElTabPane
+      v-for="tab in tabs"
+      :key="tab.name"
+      :name="tab.name"
+      :closable="tabs.length > 1"
+    >
+      <template #label
+        ><component
+          v-if="tab.icon && typeof tab.icon !== 'string'"
+          :is="tab.icon"
+          class="tab-icon"
+          aria-hidden="true"
+        />
+        <i
+          v-else-if="tab.icon && /^[a-zA-Z][\w -]*$/.test(tab.icon)"
+          :class="tab.icon.includes(' ') ? tab.icon : `fa fa-${tab.icon}`"
+          class="tab-icon"
+          aria-hidden="true"
+        />
+        <span
+          v-else-if="tab.icon"
+          class="tab-icon"
+          aria-hidden="true"
+          >{{ tab.icon }}</span
+        >
+        <span :title="tab.title">{{
+          tab.title.length > 19 ? `${tab.title.slice(0, 16)}…` : tab.title
+        }}</span></template
+      >
+      <RouteTab :tab="tab" />
+    </ElTabPane>
+  </ElTabs>
+</template>
+<style scoped>
+.viewtabs {
+  margin: 0 24px;
+}
+.viewtabs :deep(.el-tabs__item) {
+  font-size: 0.8rem;
+}
+.tab-icon {
+  width: 1em;
+  height: 1em;
+  margin-right: 6px;
+}
+</style>

package/src/components/mobile/Form.vue

@@ -0,0 +1,16 @@
+<script setup>
+import ModelForm from '../model/Form.vue'
+defineOptions({ inheritAttrs: false })
+</script>
+<template>
+  <ModelForm
+    v-bind="$attrs"
+    mobile
+    ><template
+      v-for="(_, name) in $slots"
+      #[name]="scope"
+      ><slot
+        :name="name"
+        v-bind="scope" /></template
+  ></ModelForm>
+</template>

package/src/components/model/Create.vue

@@ -0,0 +1,20 @@
+<script setup>
+import ModelForm from './Form.vue'
+
+defineProps({
+  appModel: { type: String, required: true },
+  defaults: Object,
+  mobile: Boolean,
+})
+const emit = defineEmits(['done', 'error'])
+</script>
+
+<template>
+  <ModelForm
+    :app-model="appModel"
+    :defaults="defaults"
+    :mobile="mobile"
+    @form-posted="emit('done', $event)"
+    @error="emit('error', $event)"
+  />
+</template>

package/src/components/model/Form.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue'
+import { ElAlert } from 'element-plus'
+import { NoticeBar } from 'vant'
+import Form from '../form/Form.vue'
+import { useDjango } from '../../composables/context.js'
+import { emptyData, normalizeItems } from '../../core/metadata.js'
+import { useViewTab } from '../../composables/tab.js'
+
+defineOptions({ inheritAttrs: false })
+const props = defineProps({
+  appModel: { type: String, required: true },
+  id: [String, Number],
+  modelValue: Object,
+  items: [Array, String],
+  defaults: { type: Object, default: () => ({}) },
+  mobile: Boolean,
+})
+const emit = defineEmits(['update:modelValue', 'loaded', 'form-posted', 'error', 'beforesubmit'])
+const { registry } = useDjango()
+const tab = useViewTab()
+const form = ref(),
+  data = ref({}),
+  fields = ref([]),
+  message = ref(''),
+  loading = ref(false)
+const errors = computed(() => form.value?.errors ?? {})
+const isEdit = computed(() => props.id != null)
+let generation = 0
+
+function updateTabTitle(object) {
+  if (!isEdit.value) return
+  const config = registry.getConfig(props.appModel)
+  tab?.update({ title: object.__str__ ?? object[config.title_field || 'name'], icon: config.icon })
+}
+function changed(value) {
+  data.value = value
+  emit('update:modelValue', { ...value })
+}
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value) data.value = { ...value }
+  },
+  { deep: true },
+)
+async function load() {
+  const current = ++generation
+  loading.value = true
+  message.value = ''
+  fields.value = []
+  data.value = {}
+  try {
+    const model = registry.get(props.appModel)
+    const [metadata, views, object] = await Promise.all([
+      model.fields(isEdit.value ? 'PATCH' : 'POST'),
+      model.loadViewsConfig(),
+      isEdit.value ? model.loadObject(props.id) : {},
+    ])
+    if (current !== generation) return
+    const view = (isEdit.value ? views.update : views.create) ?? views.form ?? {}
+    fields.value = normalizeItems(props.items ?? view.items ?? 'all', metadata).filter(
+      (field) => !field.read_only,
+    )
+    changed({ ...emptyData(metadata, props.defaults), ...object, ...props.modelValue })
+    updateTabTitle(object)
+    emit('loaded', model)
+  } catch (error) {
+    if (current === generation) {
+      message.value = error.message
+      emit('error', error)
+    }
+  } finally {
+    if (current === generation) loading.value = false
+  }
+}
+function save({ formValue }) {
+  return registry.get(props.appModel).save(formValue, props.id, props.defaults)
+}
+function posted(result) {
+  changed({ ...data.value, ...result })
+  updateTabTitle(result)
+  emit('form-posted', { model: registry.getConfig(props.appModel), data: result, intent: 'save' })
+}
+async function submit() {
+  if (loading.value) return
+  await nextTick()
+  return form.value?.onSubmit()
+}
+watch(() => [props.appModel, props.id, props.items, props.defaults], load, { immediate: true })
+defineExpose({ load, submit, data, errors })
+</script>
+
+<template>
+  <div :aria-busy="loading || form?.loading">
+    <p v-if="loading">正在加载字段…</p>
+    <template v-else>
+      <NoticeBar
+        v-if="message && mobile"
+        :text="message"
+      />
+      <ElAlert
+        v-else-if="message"
+        :title="message"
+        type="error"
+        :closable="false"
+      />
+      <Form
+        ref="form"
+        v-bind="$attrs"
+        :model-value="data"
+        :items="fields"
+        :submit="save"
+        :mobile="mobile"
+        :disabled="Boolean(message) || !fields.length"
+        :show-success="false"
+        submit-name="保存"
+        label-position="top"
+        @update:model-value="changed"
+        @form-posted="posted"
+        @error="emit('error', $event)"
+        @beforesubmit="emit('beforesubmit', $event)"
+      >
+        <template
+          v-for="(_, name) in $slots"
+          #[name]="scope"
+        >
+          <slot
+            :name="name"
+            v-bind="scope || {}"
+          />
+        </template>
+      </Form>
+    </template>
+  </div>
+</template>

package/src/components/model/Relations.vue

@@ -0,0 +1,236 @@
+<script setup>
+import { ref, shallowRef, watch, markRaw, nextTick } from 'vue'
+import { ElTabs, ElTabPane, ElAlert, ElButton, ElDialog, ElDrawer } from 'element-plus'
+import ModelTable from './Table.vue'
+import ModelSelect from './Select.vue'
+import ModelForm from './Form.vue'
+import { useDjango } from '../../composables/context.js'
+import { resolveRelation, relationIds } from '../../core/relations.js'
+const props = defineProps({
+  parent: { type: Object, required: true },
+  items: Array,
+  mobile: Boolean,
+})
+const emit = defineEmits(['edit', 'create', 'error', 'parent-updated'])
+const { registry, loadRelationView, revisions } = useDjango()
+const relations = shallowRef([]),
+  loading = ref(false),
+  error = ref(''),
+  active = ref('')
+const adding = shallowRef(),
+  creating = shallowRef(),
+  selection = ref([]),
+  saving = ref(false)
+let generation = 0
+async function load() {
+  const current = ++generation
+  if ((props.parent.id ?? props.parent.data?.id) == null) {
+    relations.value = []
+    return
+  }
+  loading.value = true
+  error.value = ''
+  try {
+    const config =
+      props.parent.viewsConfig ?? (await registry.get(props.parent.appModel).loadViewsConfig())
+    const results = await Promise.all(
+      (props.items ?? config.relations ?? []).map(async (definition, index) => {
+        const key =
+          typeof definition === 'object'
+            ? (definition.key ?? `${definition.name}:${index}`)
+            : `${definition}:${index}`
+        try {
+          const item = await resolveRelation(definition, props.parent, registry)
+          if (typeof item.view === 'string') {
+            if (!loadRelationView) throw new Error(`自定义视图 ${item.view} 需要 loadRelationView`)
+            const module = await loadRelationView(item.name, item.view)
+            item.view = markRaw(module.default ?? module)
+          } else if (item.view) item.view = markRaw(item.view)
+          return { ...item, key }
+        } catch (e) {
+          return {
+            key,
+            label:
+              typeof definition === 'string' ? definition : definition.label || definition.name,
+            error: e.message,
+          }
+        }
+      }),
+    )
+    if (current !== generation) return
+    relations.value = results
+    if (!results.some((item) => item.key === active.value)) active.value = results[0]?.key || ''
+  } catch (e) {
+    if (current === generation) {
+      error.value = e.message
+      emit('error', e)
+    }
+  } finally {
+    if (current === generation) loading.value = false
+  }
+}
+async function updateMembership(item, ids) {
+  if (saving.value) return
+  saving.value = true
+  error.value = ''
+  try {
+    const model = registry.get(props.parent.appModel)
+    const id = props.parent.id ?? props.parent.data[model.config.idField || 'id']
+    const { data } = await registry.http.patch(model.getDetailUrl(id), {
+      [item.multipleField.name]: ids,
+    })
+    emit('parent-updated', {
+      ...props.parent.data,
+      [item.multipleField.name]: data[item.multipleField.name] ?? ids,
+    })
+    adding.value = undefined
+    creating.value = undefined
+    await nextTick()
+    await load()
+  } catch (e) {
+    error.value = e.message
+    emit('error', e)
+  } finally {
+    saving.value = false
+  }
+}
+function beginAdd(item) {
+  selection.value = []
+  adding.value = item
+}
+function addSelected() {
+  const item = adding.value
+  return updateMembership(item, [
+    ...new Set([...relationIds(props.parent.data[item.multipleField.name]), ...selection.value]),
+  ])
+}
+function remove(item, row) {
+  const id = row[item.model.config.idField || 'id']
+  return updateMembership(
+    item,
+    relationIds(props.parent.data[item.multipleField.name]).filter(
+      (value) => String(value) !== String(id),
+    ),
+  )
+}
+async function saved(item, event) {
+  if (item.multipleField)
+    await updateMembership(item, [
+      ...new Set([
+        ...relationIds(props.parent.data[item.multipleField.name]),
+        event.data[item.model.config.idField || 'id'],
+      ]),
+    ])
+  else {
+    creating.value = undefined
+    if (revisions) revisions[item.name] = (revisions[item.name] || 0) + 1
+    await load()
+  }
+}
+watch(() => [props.parent, props.items], load, { immediate: true, deep: true })
+watch(() => relations.value.map((item) => revisions?.[item.name] ?? 0).join(','), load)
+defineExpose({ refresh: load, relations })
+</script>
+<template>
+  <section :aria-busy="loading">
+    <p v-if="loading && !relations.length">加载关联模型…</p>
+    <ElAlert
+      v-if="error"
+      :title="error"
+      type="error"
+      :closable="false"
+    />
+    <ElTabs
+      v-if="relations.length"
+      v-model="active"
+      type="border-card"
+    >
+      <ElTabPane
+        v-for="item in relations"
+        :key="item.key"
+        :name="item.key"
+        :label="item.label"
+        lazy
+      >
+        <ElAlert
+          v-if="item.error"
+          :title="item.error"
+          type="error"
+          :closable="false"
+        />
+        <component
+          v-else-if="item.view"
+          :is="item.view"
+          v-bind="item"
+          :parent="parent"
+          :app-model="item.name"
+          :mobile="mobile"
+        />
+        <template v-else>
+          <ElButton
+            v-if="item.multipleField"
+            :disabled="saving"
+            @click="beginAdd(item)"
+            >添加已有{{ item.label }}</ElButton
+          >
+          <ModelTable
+            :key="`${item.key}:${generation}`"
+            :app-model="item.name"
+            :items="item.items"
+            :base-queries="item.baseQueries"
+            :mobile="mobile"
+            create-mode="event"
+            :row-actions="
+              item.multipleField
+                ? [
+                    {
+                      name: 'remove-relation',
+                      label: '移出关联',
+                      do: ({ row }) => remove(item, row),
+                    },
+                  ]
+                : undefined
+            "
+            @edit="emit('edit', { appModel: item.name, row: $event })"
+            @create="creating = item"
+          />
+        </template>
+      </ElTabPane>
+    </ElTabs>
+    <ElDialog
+      :model-value="Boolean(adding)"
+      title="添加已有记录"
+      @close="adding = undefined"
+    >
+      <ModelSelect
+        v-if="adding"
+        v-model="selection"
+        :app-model="adding.name"
+        :field="{ multiple: true, label: adding.label }"
+      />
+      <template #footer
+        ><ElButton
+          :loading="saving"
+          :disabled="!selection.length"
+          @click="addSelected"
+          >添加关联</ElButton
+        ></template
+      >
+    </ElDialog>
+    <ElDrawer
+      :model-value="Boolean(creating)"
+      :title="`新增${creating?.label || ''}`"
+      :size="mobile ? '100%' : '66%'"
+      destroy-on-close
+      @close="creating = undefined"
+    >
+      <ModelForm
+        v-if="creating"
+        :app-model="creating.name"
+        :defaults="creating.defaults"
+        :mobile="mobile"
+        @form-posted="saved(creating, $event)"
+      />
+    </ElDrawer>
+  </section>
+</template>