medical-mall/components/ArticleFormDrawer.vue

<template>
  <uni-drawer ref="drawerRef" mode="right" :width="600">
    <view class="drawer-content">
      <view class="drawer-header">
        <text class="title">{{ isEdit ? "编辑文章" : "添加文章" }}</text>
        <uni-icons type="closeempty" size="24" @click="close"></uni-icons>
      </view>
      <scroll-view scroll-y class="drawer-body">
        <uni-forms
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-width="80px"
        >
          <uni-forms-item label="文章标题" name="title" required>
            <uni-easyinput
              v-model="formData.title"
              placeholder="请输入文章标题"
            />
          </uni-forms-item>
          <uni-forms-item label="文章分类" name="categoryId" required>
            <picker
              mode="selector"
              :range="categoryList"
              range-key="name"
              @change="onCategoryChange"
              :value="categoryIndex"
            >
              <view
                class="picker-view"
                style="
                  height: 36px;
                  line-height: 36px;
                  border: 1px solid #e5e5e5;
                  border-radius: 4px;
                  padding: 0 10px;
                  color: #333;
                "
              >
                {{
                  formData.categoryId
                    ? getCategoryName(formData.categoryId)
                    : "请选择文章分类"
                }}
              </view>
            </picker>
          </uni-forms-item>
          <uni-forms-item label="文章摘要" name="summary">
            <uni-easyinput
              type="textarea"
              v-model="formData.summary"
              placeholder="请输入文章摘要"
            />
          </uni-forms-item>
          <uni-forms-item label="文章封面" name="cover">
            <uni-easyinput
              v-model="formData.cover"
              placeholder="请输入封面图片URL"
            />
          </uni-forms-item>
          <uni-forms-item label="文章内容" name="content" required>
            <view
              class="editor-container"
              style="
                border: 1px solid #e5e5e5;
                border-radius: 4px;
                min-height: 300px;
              "
            >
              <richtext-editor
                v-model="formData.content"
                placeholder="请输入文章内容..."
              ></richtext-editor>
            </view>
          </uni-forms-item>
        </uni-forms>
      </scroll-view>
      <view class="drawer-footer">
        <button class="btn-cancel" @click="close">取消</button>
        <button
          class="btn-confirm"
          type="primary"
          @click="submit"
          :loading="loading"
        >
          确定
        </button>
      </view>
    </view>
  </uni-drawer>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { api } from "@/services/api.js";
import mockStore from "@/stores/useMockData.js";

const emit = defineEmits(["success"]);
const drawerRef = ref(null);
const formRef = ref(null);
const isEdit = ref(false);
const loading = ref(false);
const editId = ref(null);

const categoryList = computed(() => mockStore.mockCategories);

const formData = reactive({
  title: "",
  categoryId: "",
  summary: "",
  cover: "",
  content: "",
});

const categoryIndex = computed(() => {
  if (!formData.categoryId) return -1;
  return categoryList.value.findIndex((c) => c.id === formData.categoryId);
});

const getCategoryName = (id) => {
  const category = categoryList.value.find((c) => c.id === id);
  return category ? category.name : "请选择文章分类";
};

const onCategoryChange = (e) => {
  const index = e.detail.value;
  formData.categoryId = categoryList.value[index].id;
};

const rules = {
  title: {
    rules: [{ required: true, errorMessage: "请输入文章标题" }],
  },
  categoryId: {
    rules: [{ required: true, errorMessage: "请选择文章分类" }],
  },
  content: {
    rules: [{ required: true, errorMessage: "请输入文章内容" }],
  },
};

const open = (row) => {
  if (row) {
    isEdit.value = true;
    editId.value = row.id;
    Object.assign(formData, {
      title: row.title,
      categoryId: row.categoryId,
      summary: row.summary,
      cover: row.cover,
      content: row.content,
    });
  } else {
    isEdit.value = false;
    editId.value = null;
    Object.assign(formData, {
      title: "",
      categoryId: "",
      summary: "",
      cover: "",
      content: "",
    });
  }
  drawerRef.value.open();
};

const close = () => {
  drawerRef.value.close();
};

const submit = async () => {
  try {
    await formRef.value.validate();
    loading.value = true;
    if (isEdit.value) {
      await api.updateArticle(editId.value, formData);
    } else {
      await api.addArticle(formData);
    }
    uni.showToast({ title: "保存成功", icon: "success" });
    emit("success");
    close();
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

defineExpose({ open, close });
</script>

<style scoped>
.drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.drawer-header .title {
  font-size: 16px;
  font-weight: bold;
}
.drawer-body {
  flex: 1;
  padding: 15px;
}
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
  border-top: 1px solid #eee;
}
.drawer-footer button {
  margin-left: 10px;
  min-width: 80px;
}
</style>