页面内容管理

src/views/menduner/system/web/WebContentForm.vue

@@ -20,9 +20,12 @@
       <el-form-item label="标题" prop="title">
         <el-input v-model="formData.title" placeholder="请填写" />
       </el-form-item>
-      <!-- <el-form-item label="排序" prop="sort">
-        <el-input v-model="formData.sort" />
-      </el-form-item> -->
+      <el-form-item label="状态" prop="status" required>
+        <el-radio-group v-model="formData.status">
+          <el-radio value="0">激活</el-radio>
+          <el-radio value="1">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -44,6 +47,7 @@ const formData = ref({
   imgSize: '',
   link: '',
   title: '',
+  status: '0',
   // sort: 0,
   url: ''
 })
@@ -80,7 +84,8 @@ const query = ref({
 })
 
 const formRules = reactive({
-  url: [{ required: true, message: '图片不能为空', trigger: 'blur' }]
+  url: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
 })
 const formRef = ref() // 表单 Ref
 
@@ -93,21 +98,21 @@ const open = async (type: string, key: string, title: string, mark?: string) =>
   dialogTitle.value = title + (type === 'add' ? '新增' : '编辑')
   formLoading.value = true
 
-  formData.value.imgSize = `宽${imgSizeList[key][0]}px*高${imgSizeList[key][1]}px`
-  maxWidth.value = imgSizeList[key][0]
-  maxHeight.value = imgSizeList[key][1]
-
   try {
     query.value = await WebContentApi.getWebContent(1)
     // 编辑
     if (mark) {
       editId.value = mark
-      const { img: url, link, title } = query.value[key].find(e => e.mark === mark)
-      formData.value = { url, link, title }
+      const { img: url, link, title, status } = query.value[key].find(e => e.mark === mark)
+      formData.value = { url, link, title, status }
     }
   } finally {
     formLoading.value = false
   }
+
+  formData.value.imgSize = `宽${imgSizeList[key][0]}px*高${imgSizeList[key][1]}px`
+  maxWidth.value = imgSizeList[key][0]
+  maxHeight.value = imgSizeList[key][1]
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -118,7 +123,7 @@ const submitForm = async () => {
   await formRef.value.validate()
   
   const mark = new Date().getTime().toString()
-  const obj = { img: formData.value.url, link: formData.value.link, mark, title: formData.value.title }
+  const obj = { img: formData.value.url, link: formData.value.link, mark, title: formData.value.title, status: formData.value.status }
   if (formType.value === 'add') {
     query.value[currentKey.value] = query.value[currentKey.value] ? [...query.value[currentKey.value], obj] : [obj]
   } else {
@@ -126,8 +131,8 @@ const submitForm = async () => {
     if (index === -1) return
     query.value[currentKey.value][index] = obj
   }
-
-  // 提交请求
+  
+  // // 提交请求
   formLoading.value = true
   try {
     await WebContentApi.updateWebContent(query.value)
@@ -161,6 +166,7 @@ const resetForm = () => {
     imgSize: '',
     link: '',
     title: '',
+    status: '0',
     url: '',
     // sort: 0
   }

src/views/menduner/system/web/index.vue

@@ -27,6 +27,11 @@
           <el-link v-if="scope.row.link" :href="scope.row.link" type="primary" target="_blank">点击查看</el-link>
         </template>
       </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <span :style="{'color': scope.row.status === '0' ? '#67c23a': '#f56c6c'}">{{ scope.row.status === '0' ? '启用中' : '停用' }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" fixed="right" min-width="220">
         <template #default="scope">
           <el-button link type="primary" @click="handleEdit(scope.row.mark)">编辑</el-button>