布局推荐

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

@@ -0,0 +1,39 @@
+import { h } from 'vue';
+import { ElTag } from 'element-plus';
+
+export const columns = [
+  {
+    label: '文章标题',
+    prop: 'title',
+    render(record) {
+      return h('a', {
+        href: 'http://www.baidu.com',
+        target:"_blank"
+      },record.row.title);
+    },
+  },
+  {
+    label: '文章分类',
+    prop: 'categoryName',
+  },
+  // {
+  //   label: '文章链接',
+  //   value:'articelLink',
+  //   isSlot:true,
+  // },
+  {
+    label: '文章状态',
+    prop: 'status',
+    render(record) {
+      return h('span', record.row.status === 1 ? '下架' : '正常')
+    },
+  },
+  {
+    label: '创建人',
+    prop: 'createUser',
+  },
+  {
+    label: '创建时间',
+    prop: 'createTime',
+  },
+];

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

@@ -0,0 +1,99 @@
+<template>
+  <el-dialog
+      v-model="props.visible"
+      title="选择文章"
+      :close-on-click-modal="false"
+      :before-close="dialogClose"
+  >
+  <el-card  class="pt-3 mb-3 proCard">
+      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"></BasicForm>
+    </el-card>
+  <el-card >
+      <BasicTable
+        :columns="columns"
+        :request="loadDataTable"
+        ref="tableRef"
+        highlight-current-row
+        @row-click="rowClick"
+      >
+      </BasicTable>
+    </el-card>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogClose">取消</el-button>
+        <el-button  type="primary" @click="handleSubmits">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { getArticleList } from '@/api/content/article';
+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 { schemas } from './querySchemas';
+
+const emit = defineEmits(["success", "update:visible"]);
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false
+  }
+});
+const selectRow = ref({})
+const tableRef = ref();
+  const formParams = reactive({
+    title:'',
+    status:''
+  });
+const handleSubmits = async () => {
+   if(!selectRow.value.id) {
+    return message("请选择文字文章",'error');
+   }
+    emit("update:visible", false);
+    emit("success",selectRow.value);
+};
+
+const dialogClose = () => {
+  emit("update:visible", false);
+};
+
+const loadDataTable = async (res: any) => {
+    const result = await getArticleList({ ...formParams, ...res });
+    return result;
+  };
+  function reloadTable(noRefresh='') {
+    tableRef.value.reload(noRefresh?{}:{pageNo:1});
+  }
+  const [register, {}] = useForm({
+    labelWidth: 80,
+    layout: 'horizontal',
+    colProps: { span: 8 } as ColProps,
+    submitOnReset:true,
+    schemas
+  });
+  function handleSubmit(values: Recordable) {
+    handleReset()
+    for (const key in values) {
+      formParams[key] = values[key]
+    }
+    reloadTable();
+  }
+
+  function handleReset() {
+    for (const key in formParams) {
+        formParams[key] ='';
+    }
+  }
+  const rowClick = (row)=>{
+    selectRow.value = row
+  }
+onMounted(() => {
+
+});
+
+</script>

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

@@ -0,0 +1,30 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'title',
+    component: 'Input',
+    label: '文章标题',
+    componentProps: {
+      placeholder: '请输入文章标题',
+    },
+  },
+  {
+    field: 'status',
+    component: 'Select',
+    label: '文章状态',
+    componentProps: {
+      placeholder: '请选择文章状态',
+      clearable: true,
+      options: [
+        {
+          label: '下架',
+          value: '1',
+        },
+        {
+          label: '正常',
+          value: '0',
+        }
+      ],
+    },
+  },
+];

src/views/content/layoutItem/edit.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-dialog
+  <el-drawer
       v-model="props.visible"
       :title="props.layoutId?'编辑':'新增'"
-      width="500"
+      :size="800"
       :close-on-click-modal="false"
       :before-close="dialogClose"
   >
@@ -10,29 +10,13 @@
         class="ls-form"
         ref="formRef"
         :model="formData"
-        label-width="80px"
+        label-width="120px"
     >
     <el-form-item label="页面布局" prop="layoutId" class="flex-1" :rules="{ required: true, message: '请选择页面布局', trigger: 'change' }">
           <el-select v-model="formData.layoutId" class="flex-1" clearable placeholder="请选择页面布局">
             <el-option v-for="(item, index) in layoutList" :key="index" :label="item.description" :value="item.id" />
           </el-select>
         </el-form-item>
-    <el-form-item label="位置编号" prop="location"  :rules="{ required: true, message: '请输入位置编号', trigger: 'blur' }">
-        <number-input v-model="formData.location"  placeholder="请输入位置编号"/>
-      </el-form-item>
-      <el-form-item
-          label="位置描述"
-          prop="description"
-          :rules="{ required: true, message: '请输入页面位置描述', trigger: 'blur' }"
-      >
-        <el-input
-            class="ls-input"
-            v-model="formData.description"
-            placeholder="请输入页面位置描述"
-            clearable
-             type="textarea"
-        />
-      </el-form-item>
       <el-form-item label="页面类型" prop="type"
       :rules="{ required: true, message: '请选择页面类型', trigger: 'change' }">
           <el-select
@@ -43,14 +27,14 @@
             <el-option label="通知公告" :value="2"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="业务类型编号" prop="typeId"  :rules="{ required: true, message: '请输入业务类型编号', trigger: 'blur' }">
+        <el-form-item label="推荐文章" prop="typeId"  :rules="{ required: true, message: '请选择推荐文章', trigger: 'blur' }">
-        <number-input v-model="formData.typeId"  placeholder="请输入业务类型编号"/>
+          <el-input v-model="formData.typeText"  placeholder="请选择推荐文章" @click="chooseVisible = true"/>
         </el-form-item>
       <el-form-item
             label="图片路径"
             prop="image"
         >
-            <UploadImg @changeFileName="(name)=>formData.imgName=name"
+            <UploadImg
                        :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
                        name="article"
                        :fileSize="200"
@@ -70,31 +54,37 @@
         </el-button>
       </span>
     </template>
-  </el-dialog>
+    <chooseArticle
+        v-if="chooseVisible"
+        v-model:visible="chooseVisible"
+        @success="setArticle"
+    >
+    </chooseArticle>
+  </el-drawer>
 </template>
 <script lang="ts" setup>
 import type {FormInstance} from "element-plus";
 import {getLayoutDetail,layoutAdd,layoutUpdate} from "@/api/content/layoutItem";
 import { getLayoutAllList } from '@/api/content/layout';
-import {onMounted, reactive, shallowRef,ref} from "vue";
+import {onMounted, reactive, shallowRef,ref,defineAsyncComponent } from "vue";
 import {message} from "@/utils/auth";
 import UploadImg from "@/components/Upload/Image.vue";
 import {useLockFn} from "@/utils/useLockFn";
 
 const emit = defineEmits(["success", "update:visible"]);
+const chooseArticle = defineAsyncComponent(() =>
+    import('./article/index.vue')
+)
 const formRef = shallowRef<FormInstance>();
 const formData = reactive({
   id: "",
   layoutId:'',
-  description: "",
   type:'',
+  typeText:"",
   typeId:'',
-  location: "",
-  imgName:'',
   image:'',
   sort: 0
 });
-
 const props = defineProps({
   visible: {
     type: Boolean,
@@ -107,6 +97,7 @@ const props = defineProps({
     default: 0
   }
 });
+const chooseVisible= ref(false)
 const layoutList = ref([])
 const handleSubmit = async () => {
     await formRef.value?.validate();
@@ -122,7 +113,6 @@ const dialogClose = () => {
 
 const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);
 
-
 const setFormData = async () => {
   const data = await getLayoutDetail(props.layoutId);
   for (const key in formData) {
@@ -132,6 +122,11 @@ const setFormData = async () => {
     }
   }
 };
+const setArticle = (row)=>{
+  formData.typeText = row.title
+  formData.typeId = row.id
+  formRef.value?.validateField("typeId");
+}
 const getAllDict = async () => {
   let list = await getLayoutAllList();
   layoutList.value = list ? list : [];