完善文章管理 review 提到的问题

0730e215 · puhui999 · 2a150cf0 · 0730e215 · 0730e215
Commit 0730e215 authored Oct 20, 2023 by puhui999
Show whitespace changes
Inline Side-by-side

Showing with 25 additions and 27 deletions

src/views/mall/promotion/article/ArticleForm.vue
+16 -17

src/views/mall/promotion/article/index.vue
+9 -10

No files found.
--- a/src/views/mall/promotion/article/ArticleForm.vue
+++ b/src/views/mall/promotion/article/ArticleForm.vue
@@ -40,7 +40,6 @@
            <UploadImg v-model="formData.picUrl" height="80px" />
          </el-form-item>
        </el-col>
-        <!-- TODO @puhui999：浏览次数，不能修改 -->
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
@@ -59,19 +58,6 @@
            </el-radio-group>
          </el-form-item>
        </el-col>
-        <!-- TODO @puhui999：可以使用 SpuTableSelect -->
-        <el-col :span="12">
-          <el-form-item label="商品关联" prop="spuId">
-            <el-select v-model="formData.spuId" placeholder="请选择">
-              <el-option
-                v-for="item in spuList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
        <el-col :span="12">
          <el-form-item label="是否热门" prop="recommendHot">
            <el-radio-group v-model="formData.recommendHot">
@@ -99,6 +85,14 @@
          </el-form-item>
        </el-col>
        <el-col :span="24">
+          <el-form-item label="商品关联" prop="spuId">
+            <el-tag v-if="formData.spuId" class="mr-10px">
+              {{ spuList.find((item) => item.id === formData.spuId)?.name }}
+            </el-tag>
+            <el-button @click="spuSelectRef?.open()">选择商品</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
          <el-form-item label="文章内容">
            <Editor v-model="formData.content" height="150px" />
          </el-form-item>
@@ -110,12 +104,14 @@
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
+  <SpuSelect ref="spuSelectRef" @confirm="selectSpu" />
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import * as ArticleApi from '@/api/mall/promotion/article'
 import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
 import * as ProductSpuApi from '@/api/mall/product/spu'
+import { SpuSelect } from '@/views/mall/promotion/components'
 defineOptions({ name: 'PromotionArticleForm' })
@@ -135,7 +131,7 @@ const formData = ref({
  introduction: undefined,
  sort: 0,
  status: 0,
-  spuId: undefined,
+  spuId: 0,
  recommendHot: false,
  recommendBanner: false,
  content: undefined
@@ -152,7 +148,10 @@ const formRules = reactive({
  content: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const spuSelectRef = ref() // 商品和属性选择 Ref
+const selectSpu = (spuId: number) => {
+  formData.value.spuId = spuId
+}
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
  dialogVisible.value = true
@@ -208,7 +207,7 @@ const resetForm = () => {
    introduction: undefined,
    sort: 0,
    status: 0,
-    spuId: undefined,
+    spuId: 0,
    recommendHot: false,
    recommendBanner: false,
    content: undefined

--- a/src/views/mall/promotion/article/index.vue
+++ b/src/views/mall/promotion/article/index.vue
@@ -78,23 +78,23 @@
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
-      <el-table-column align="center" label="编号" prop="id" min-width="60" />
+      <el-table-column align="center" label="编号" min-width="60" prop="id" />
-      <el-table-column align="center" label="封面" prop="picUrl" min-width="80">
+      <el-table-column align="center" label="封面" min-width="80" prop="picUrl">
        <template #default="{ row }">
          <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
        </template>
      </el-table-column>
-      <el-table-column align="center" label="标题" prop="title" min-width="180" />
+      <el-table-column align="center" label="标题" min-width="180" prop="title" />
-      <el-table-column align="center" label="分类" prop="categoryId" min-width="180">
+      <el-table-column align="center" label="分类" min-width="180" prop="categoryId">
        <template #default="scope">
          {{ categoryList.find((item) => item.id === scope.row.categoryId)?.name }}
        </template>
      </el-table-column>
-      <el-table-column align="center" label="浏览量" prop="browseCount" min-width="180" />
+      <el-table-column align="center" label="浏览量" min-width="180" prop="browseCount" />
-      <el-table-column align="center" label="作者" prop="author" min-width="180" />
+      <el-table-column align="center" label="作者" min-width="180" prop="author" />
-      <el-table-column align="center" label="文章简介" prop="introduction" min-width="250" />
+      <el-table-column align="center" label="文章简介" min-width="250" prop="introduction" />
-      <el-table-column align="center" label="排序" prop="sort" min-width="60" />
+      <el-table-column align="center" label="排序" min-width="60" prop="sort" />
-      <el-table-column align="center" label="状态" prop="status" min-width="60">
+      <el-table-column align="center" label="状态" min-width="60" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
        </template>
@@ -167,7 +167,6 @@ const queryParams = reactive({
  createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 /** 文章封面预览 */
 const imagePreview = (imgUrl: string) => {
  createImageViewer({