布局推荐

src/views/content/layoutItem/article/columns2.ts

@@ -0,0 +1,59 @@
+import { h } from 'vue';
+import { ElTag } from 'element-plus';
+
+export const columns2 = [
+  {
+    label: '标题',
+    prop: 'title',
+    width: 300,
+  },
+  {
+    label: '类型',
+    prop: 'type',
+    // render(record) {
+    //   return h('span', record.row.type === 1 ? '通知' : '公告');
+    // },
+    render(record) {
+      return h(
+        ElTag,
+        {
+          type: record.row.type == 1 ? 'primary' : 'warning',
+        },
+        {
+          default: () => (record.row.type == 1 ? '通知' : '公告'),
+        },
+      );
+    },
+  },
+  {
+    label: '状态',
+    prop: 'status',
+    // render(record) {
+    //   return h('span', record.row.status === 1 ? '正常' : '关闭')
+    // },
+    render(record) {
+      return h(
+        ElTag,
+        {
+          type: record.row.status ==1 ? 'success' : 'danger',
+        },
+        {
+          default: () => (record.row.status ==1 ? '正常' : '禁用'),
+        },
+      );
+    },
+  },
+  {
+    label: '点击率',
+    prop: 'clickNum',
+  },
+  {
+    label: '创建人',
+    prop: 'createUser',
+  },
+  {
+    label: '创建时间',
+    prop: 'createTime',
+    width: 180,
+  },
+];

src/views/content/layoutItem/article/index.vue

@@ -4,13 +4,14 @@
       title="选择文章"
       :close-on-click-modal="false"
       :before-close="dialogClose"
+      style="margin-top:20px;"
   >
   <el-card  class="pt-3 mb-3 proCard">
       <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"></BasicForm>
     </el-card>
   <el-card >
       <BasicTable
-        :columns="columns"
+        :columns="type==1?columns:columns2"
         :request="loadDataTable"
         ref="tableRef"
         highlight-current-row
@@ -28,12 +29,15 @@
 </template>
 <script lang="ts" setup>
 import { getArticleList } from '@/api/content/article';
+import { getNoticeList } from '@/api/data/notice';
 import {onMounted, reactive,ref} from "vue";
 import { useForm } from '@/components/Form/index';
 import { ColProps } from 'element-plus';
 import {message} from "@/utils/auth";
 import { columns } from './columns';
+import { columns2 } from './columns2';
 import { schemas } from './querySchemas';
+import { schemas2 } from './querySchemas2';
 
 const emit = defineEmits(["success", "update:visible"]);
 
@@ -42,7 +46,12 @@ const props = defineProps({
     type: Boolean,
     required: true,
     default: false
-  }
+  },
+  type: {
+    type: Number,
+    required: true,
+    default: 1
+  },
 });
 const selectRow = ref({})
 const tableRef = ref();
@@ -63,8 +72,14 @@ const dialogClose = () => {
 };
 
 const loadDataTable = async (res: any) => {
-    const result = await getArticleList({ ...formParams, ...res });
+    let result = []
-    return result;
+    if(props.type==1) {
+      result = await getArticleList({ ...formParams, ...res });
+    } else {
+      result = await getNoticeList({ ...formParams, ...res });
+    }
+
+   return result
   };
   function reloadTable(noRefresh='') {
     tableRef.value.reload(noRefresh?{}:{pageNo:1});
@@ -74,7 +89,7 @@ const loadDataTable = async (res: any) => {
     layout: 'horizontal',
     colProps: { span: 8 } as ColProps,
     submitOnReset:true,
-    schemas
+    schemas:props.type==1?schemas:schemas2
   });
   function handleSubmit(values: Recordable) {
     handleReset()

src/views/content/layoutItem/article/querySchemas2.ts

@@ -0,0 +1,49 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas2: FormSchema[] = [
+  {
+    field: 'title',
+    component: 'Input',
+    label: '标题',
+    componentProps: {
+      placeholder: '请输入标题',
+    },
+  },
+  {
+    field: 'type',
+    component: 'Select',
+    label: '类型',
+    componentProps: {
+      placeholder: '请选择类型',
+      clearable: true,
+      options: [
+        {
+          label: '通知',
+          value: '1',
+        },
+        {
+          label: '公告',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    field: 'status',
+    component: 'Select',
+    label: '状态',
+    componentProps: {
+      placeholder: '请选择状态',
+      clearable: true,
+      options: [
+        {
+          label: '正常',
+          value: '1',
+        },
+        {
+          label: '关闭',
+          value: '2',
+        },
+      ],
+    },
+  },
+];

src/views/content/layoutItem/edit.vue

@@ -28,7 +28,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="推荐文章" prop="typeId"  :rules="{ required: true, message: '请选择推荐文章', trigger: 'blur' }">
-          <el-input v-model="formData.typeText"  placeholder="请选择推荐文章" @click="chooseVisible = true"/>
+          <el-input v-model="formData.typeText"  placeholder="请选择推荐文章" @click="getArticle"/>
         </el-form-item>
       <el-form-item
             label="图片路径"
@@ -57,6 +57,7 @@
     <chooseArticle
         v-if="chooseVisible"
         v-model:visible="chooseVisible"
+        :type="formData.type"
         @success="setArticle"
     >
     </chooseArticle>
@@ -113,6 +114,13 @@ const dialogClose = () => {
 
 const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);
 
+const getArticle=()=>{
+  if(!formData.type) {
+    message("请选择页面类型",'warning');
+    return
+  }
+  chooseVisible.value = true
+}
 const setFormData = async () => {
   const data = await getLayoutDetail(props.layoutId);
   for (const key in formData) {