修改

src/views/diy/pcDiyIndex.vue

@@ -1 +1,188 @@
-<template>pc微页面</template>
+<template>
+  <div class="p-2">
+    <div class="head-card">
+      <el-card shadow="hover">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="页面名称">
+            <el-input v-model="queryParams.name" placeholder="请输入页面名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card shadow="hover">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd">添加页面</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"> 删除 </el-button>
+          </el-col>
+        </el-row>
+      </template>
+      <el-table v-loading="loading" border :data="dataList">
+        <el-table-column label="序号" type="index" width="70" align="center" />
+        <el-table-column label="页面名称" align="center" prop="name" :show-overflow-tooltip="true" />
+        <el-table-column label="页面类型" align="center" :show-overflow-tooltip="true">
+          <template #default="scope">
+            {{
+              scope.row.type == 1
+                ? '平台商城'
+                : scope.row.type == 2
+                  ? '工业品商城'
+                  : scope.row.type == 3
+                    ? '福利商城'
+                    : scope.row.type == 4
+                      ? '客户站点商城'
+                      : scope.row.type == 5
+                        ? 'PC微页面'
+                        : ''
+            }}
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="页面链接" align="center" prop="name"  /> -->
+
+        <el-table-column label="状态" align="center" width="150">
+          <template #default="scope">
+            <el-switch @change="(status) => handleStatusChange(scope.row, status)" v-model="scope.row.isHome" :active-value="1" :inactive-value="0" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pcDiyList, pcEditDiy, pcDelDiy } from '@/api/diy/index';
+import { FormInstance } from 'element-plus';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const dataList = ref<any[]>([]);
+const loading = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const dialogVisible = ref(false);
+// 添加自定义页面
+const formData = reactive({
+  title: '',
+  type: ''
+});
+// 表单验证规则
+const formRules = computed(() => {
+  return {
+    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+    type: [{ required: true, message: '请选择页面类型', trigger: 'blur' }]
+  };
+});
+
+const queryParams = ref<any>({
+  pageNum: 1,
+  pageSize: 10,
+  title: '',
+  addon_name: '',
+  type: 5
+});
+
+/** 查询字典类型列表 */
+const getList = () => {
+  loading.value = true;
+  pcDiyList(queryParams.value).then((res) => {
+    if (res.code == 200) {
+      dataList.value = res.rows;
+      total.value = res.total;
+      loading.value = false;
+    }
+  });
+};
+
+/** 表单重置 */
+const reset = () => {};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  handleQuery();
+};
+/** 新增按钮操作 */
+const router = useRouter();
+const handleAdd = () => {
+  const url = router.resolve({
+    path: '/diy/pcEdit',
+    query: {
+      type: 5,
+      title: 'PC微页面Diy'
+    }
+  });
+  window.open(url.href);
+};
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  const query = { id: row.id };
+  const url = router.resolve({
+    path: '/diy/pcedit',
+    query
+  });
+  window.open(url.href);
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  await proxy?.$modal.confirm('是否确认删除"' + row.name + '"的diy数据项？').finally(() => (loading.value = false));
+  await pcDelDiy(row.id);
+  proxy?.$modal.msgSuccess('删除成功');
+  getList();
+};
+
+const addEvent = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+
+  await formEl.validate(async (valid) => {
+    if (valid) {
+      const query = { type: formData.type, title: formData.title };
+      const url = router.resolve({
+        path: '/diy/pcedit',
+        query
+      });
+      window.open(url.href);
+      dialogVisible.value = false;
+      formData.title = '';
+      formData.type = '';
+    }
+  });
+};
+
+const handleStatusChange = async (row: any, status: any) => {
+  const res = await pcEditDiy({
+    id: row.id,
+    isHome: status
+  });
+  if (res.code == 200) {
+    getList();
+  }
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.head-card {
+  margin-bottom: 20px;
+
+  :deep(.el-card__body) {
+    padding-bottom: 0px !important;
+  }
+}
+</style>

src/views/diy/pcEdit.vue

@@ -288,6 +288,9 @@ const goBack = () => {
   } else if (diyStore.type == '3') {
     //福礼微页面
     url = 'fuliDiyIndex';
+  } else if (diyStore.type == '5') {
+    //pc微页面
+    url = 'pcDiyIndex';
   }
   location.href = `${location.origin}/diy/` + url;
 };

src/views/diy/pcList.vue

@@ -35,6 +35,7 @@
         </el-row>
       </template>
       <el-table v-loading="loading" border :data="dataList">
+        <el-table-column label="序号" type="index" width="70" align="center" />
         <el-table-column label="页面名称" align="center" prop="name" :show-overflow-tooltip="true" />
         <el-table-column label="页面类型" align="center" :show-overflow-tooltip="true">
           <template #default="scope">
@@ -47,7 +48,9 @@
                     ? '福利商城'
                     : scope.row.type == 4
                       ? '客户站点商城'
-                      : ''
+                      : scope.row.type == 5
+                        ? 'PC微页面'
+                        : ''
             }}
           </template>
         </el-table-column>
@@ -88,6 +91,7 @@
             <el-option label="工业品商城" :value="2" />
             <el-option label="福利商城" :value="3" />
             <el-option label="客户站点商城" :value="4" />
+            <el-option label="PC微页面" :value="5" />
           </el-select>
         </el-form-item>
       </el-form>

src/views/platform/decoration/carousel/index.vue

@@ -5,12 +5,7 @@
       <div class="search-card">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true">
           <el-form-item label="广告名称" prop="adName">
-            <el-input
-              v-model="queryParams.adName"
-              placeholder="请输入广告名称"
-              clearable
-              @keyup.enter="handleQuery"
-            />
+            <el-input v-model="queryParams.adName" placeholder="请输入广告名称" clearable @keyup.enter="handleQuery" />
           </el-form-item>
           <el-form-item label="起始时间" prop="dateRange">
             <el-date-picker
@@ -39,51 +34,45 @@
         <!-- 表格标题 -->
         <div class="table-title">轮播广告信息列表</div>
 
-      <!-- 表格 -->
-      <el-table v-loading="loading" :data="carouselList" border>
-        <el-table-column label="广告图片" align="center" width="120">
-          <template #default="scope">
-            <el-image
-              :src="scope.row.imageUrl"
-              :preview-src-list="[scope.row.imageUrl]"
-              fit="cover"
-              style="width: 80px; height: 60px; border-radius: 4px"
-              lazy
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="广告名称" align="center" prop="title" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="时间" align="center" width="280">
-          <template #default="scope">
-            <div>开始时间：{{ scope.row.startTime }}</div>
-            <div>到期时间：{{ scope.row.endTime }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column label="上线/下线" align="center" width="100">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-              {{ scope.row.status === 1 ? '上线' : '下线' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="排序" align="center" prop="sort" width="80" />
-        <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="操作" align="center" width="150">
-          <template #default="scope">
-            <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
-            <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
-          </template>
-        </el-table-column>
-      </el-table>
+        <!-- 表格 -->
+        <el-table v-loading="loading" :data="carouselList" border>
+          <el-table-column label="广告图片" align="center" width="120">
+            <template #default="scope">
+              <el-image
+                :src="scope.row.imageUrl"
+                :preview-src-list="[scope.row.imageUrl]"
+                fit="cover"
+                style="width: 80px; height: 60px; border-radius: 4px"
+                lazy
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="广告名称" align="center" prop="title" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="时间" align="center" width="280">
+            <template #default="scope">
+              <div>开始时间：{{ scope.row.startTime?.substring(0, 10) }}</div>
+              <div>到期时间：{{ scope.row.endTime?.substring(0, 10) }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="上线/下线" align="center" width="100">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+                {{ scope.row.status === 1 ? '上线' : '下线' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="80" />
+          <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="操作" align="center" width="150">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
 
         <!-- 分页 -->
-        <pagination
-          v-show="total > 0"
-          v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize"
-          :total="total"
-          @pagination="getList"
-        />
+        <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
       </div>
     </div>
 
@@ -103,6 +92,7 @@
             placeholder="选择开始时间"
             value-format="YYYY-MM-DD"
             style="width: 100%"
+            @change="form.endTime = ''"
           />
         </el-form-item>
         <el-form-item label="结束时间" prop="endTime">
@@ -112,6 +102,7 @@
             placeholder="选择结束时间"
             value-format="YYYY-MM-DD"
             style="width: 100%"
+            :disabled-date="disabledEndDate"
           />
         </el-form-item>
         <el-form-item label="链接地址" prop="link">
@@ -181,6 +172,12 @@ const initFormData = {
 
 const form = ref({ ...initFormData });
 
+const disabledEndDate = (date: Date) => {
+  if (!form.value.startTime) return false;
+  const start = new Date(form.value.startTime + 'T00:00:00');
+  return date.getTime() < start.getTime();
+};
+
 const rules = reactive({
   title: [{ required: true, message: '广告名称不能为空', trigger: 'blur' }],
   startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
@@ -337,16 +334,19 @@ onMounted(() => {
 .action-link {
   cursor: pointer;
   margin: 0 8px;
-  
+
   &.primary {
     color: #409eff;
-    &:hover { color: #66b1ff; }
+    &:hover {
+      color: #66b1ff;
+    }
   }
-  
+
   &.danger {
     color: #f56c6c;
-    &:hover { color: #f78989; }
+    &:hover {
+      color: #f78989;
+    }
   }
 }
 </style>
-

src/views/platform/enterprise/carousel/index.vue

@@ -5,12 +5,7 @@
       <div class="search-card">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true">
           <el-form-item label="广告名称" prop="adName">
-            <el-input
-              v-model="queryParams.adName"
-              placeholder="请输入广告名称"
-              clearable
-              @keyup.enter="handleQuery"
-            />
+            <el-input v-model="queryParams.adName" placeholder="请输入广告名称" clearable @keyup.enter="handleQuery" />
           </el-form-item>
           <el-form-item label="起始时间" prop="dateRange">
             <el-date-picker
@@ -39,51 +34,45 @@
         <!-- 表格标题 -->
         <div class="table-title">轮播广告信息列表</div>
 
-      <!-- 表格 -->
-      <el-table v-loading="loading" :data="carouselList" border>
-        <el-table-column label="广告图片" align="center" width="120">
-          <template #default="scope">
-            <el-image
-              :src="scope.row.imageUrl"
-              :preview-src-list="[scope.row.imageUrl]"
-              fit="cover"
-              style="width: 80px; height: 60px; border-radius: 4px"
-              lazy
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="广告名称" align="center" prop="title" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="时间" align="center" width="280">
-          <template #default="scope">
-            <div>开始时间：{{ scope.row.startTime }}</div>
-            <div>到期时间：{{ scope.row.endTime }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column label="上线/下线" align="center" width="100">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-              {{ scope.row.status === 1 ? '上线' : '下线' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="排序" align="center" prop="sort" width="80" />
-        <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="操作" align="center" width="150">
-          <template #default="scope">
-            <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
-            <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
-          </template>
-        </el-table-column>
-      </el-table>
+        <!-- 表格 -->
+        <el-table v-loading="loading" :data="carouselList" border>
+          <el-table-column label="广告图片" align="center" width="120">
+            <template #default="scope">
+              <el-image
+                :src="scope.row.imageUrl"
+                :preview-src-list="[scope.row.imageUrl]"
+                fit="cover"
+                style="width: 80px; height: 60px; border-radius: 4px"
+                lazy
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="广告名称" align="center" prop="title" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="时间" align="center" width="280">
+            <template #default="scope">
+              <div>开始时间：{{ scope.row.startTime?.substring(0, 10) }}</div>
+              <div>到期时间：{{ scope.row.endTime?.substring(0, 10) }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="上线/下线" align="center" width="100">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+                {{ scope.row.status === 1 ? '上线' : '下线' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="80" />
+          <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="操作" align="center" width="150">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
 
         <!-- 分页 -->
-        <pagination
-          v-show="total > 0"
-          v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize"
-          :total="total"
-          @pagination="getList"
-        />
+        <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
       </div>
     </div>
 
@@ -103,6 +92,7 @@
             placeholder="选择开始时间"
             value-format="YYYY-MM-DD"
             style="width: 100%"
+            @change="form.endTime = ''"
           />
         </el-form-item>
         <el-form-item label="结束时间" prop="endTime">
@@ -112,6 +102,7 @@
             placeholder="选择结束时间"
             value-format="YYYY-MM-DD"
             style="width: 100%"
+            :disabled-date="disabledEndDate"
           />
         </el-form-item>
         <el-form-item label="链接地址" prop="link">
@@ -181,6 +172,12 @@ const initFormData = {
 
 const form = ref({ ...initFormData });
 
+const disabledEndDate = (date: Date) => {
+  if (!form.value.startTime) return false;
+  const start = new Date(form.value.startTime + 'T00:00:00');
+  return date.getTime() < start.getTime();
+};
+
 const rules = reactive({
   title: [{ required: true, message: '广告名称不能为空', trigger: 'blur' }],
   startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
@@ -340,13 +337,16 @@ onMounted(() => {
 
   &.primary {
     color: #409eff;
-    &:hover { color: #66b1ff; }
+    &:hover {
+      color: #66b1ff;
+    }
   }
 
   &.danger {
     color: #f56c6c;
-    &:hover { color: #f78989; }
+    &:hover {
+      color: #f78989;
+    }
   }
 }
 </style>
-

src/views/platform/gift/carousel/index.vue

@@ -5,12 +5,7 @@
       <div class="search-card">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true">
           <el-form-item label="广告名称" prop="title">
-            <el-input
-              v-model="queryParams.title"
-              placeholder="请输入广告名称"
-              clearable
-              @keyup.enter="handleQuery"
-            />
+            <el-input v-model="queryParams.title" placeholder="请输入广告名称" clearable @keyup.enter="handleQuery" />
           </el-form-item>
           <el-form-item label="起始时间" prop="dateRange">
             <el-date-picker
@@ -39,51 +34,45 @@
         <!-- 表格标题 -->
         <div class="table-title">轮播广告信息列表</div>
 
-      <!-- 表格 -->
-      <el-table v-loading="loading" :data="carouselList" border>
-        <el-table-column label="广告图片" align="center" width="120">
-          <template #default="scope">
-            <el-image
-              :src="scope.row.imageUrl"
-              :preview-src-list="[scope.row.imageUrl]"
-              fit="cover"
-              style="width: 80px; height: 60px; border-radius: 4px"
-              lazy
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="广告名称" align="center" prop="title" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="时间" align="center" width="280">
-          <template #default="scope">
-            <div>开始时间：{{ scope.row.startTime }}</div>
-            <div>到期时间：{{ scope.row.endTime }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column label="上线/下线" align="center" width="100">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-              {{ scope.row.status === 1 ? '上线' : '下线' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="排序" align="center" prop="sort" width="80" />
-        <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="操作" align="center" width="150">
-          <template #default="scope">
-            <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
-            <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
-          </template>
-        </el-table-column>
-      </el-table>
+        <!-- 表格 -->
+        <el-table v-loading="loading" :data="carouselList" border>
+          <el-table-column label="广告图片" align="center" width="120">
+            <template #default="scope">
+              <el-image
+                :src="scope.row.imageUrl"
+                :preview-src-list="[scope.row.imageUrl]"
+                fit="cover"
+                style="width: 80px; height: 60px; border-radius: 4px"
+                lazy
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="广告名称" align="center" prop="title" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="时间" align="center" width="280">
+            <template #default="scope">
+              <div>开始时间：{{ scope.row.startTime?.substring(0, 10) }}</div>
+              <div>到期时间：{{ scope.row.endTime?.substring(0, 10) }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="上线/下线" align="center" width="100">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+                {{ scope.row.status === 1 ? '上线' : '下线' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="80" />
+          <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="操作" align="center" width="150">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
 
         <!-- 分页 -->
-        <pagination
-          v-show="total > 0"
-          v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize"
-          :total="total"
-          @pagination="getList"
-        />
+        <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
       </div>
     </div>
 
@@ -115,6 +104,7 @@
                 placeholder="请选择"
                 value-format="YYYY-MM-DD"
                 style="width: 100%"
+                @change="form.endTime = ''"
               />
             </el-form-item>
           </el-col>
@@ -126,6 +116,7 @@
                 placeholder="请选择"
                 value-format="YYYY-MM-DD"
                 style="width: 100%"
+                :disabled-date="disabledEndDate"
               />
             </el-form-item>
           </el-col>
@@ -214,6 +205,12 @@ const initFormData = {
 
 const form = ref({ ...initFormData });
 
+const disabledEndDate = (date: Date) => {
+  if (!form.value.startTime) return false;
+  const start = new Date(form.value.startTime + 'T00:00:00');
+  return date.getTime() < start.getTime();
+};
+
 const rules = reactive({
   title: [{ required: true, message: '广告名称不能为空', trigger: 'blur' }],
   startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
@@ -345,8 +342,12 @@ onMounted(() => {
   justify-content: space-between;
   align-items: flex-start;
 
-  .el-form { flex: 1; }
-  .toolbar { flex-shrink: 0; }
+  .el-form {
+    flex: 1;
+  }
+  .toolbar {
+    flex-shrink: 0;
+  }
 }
 
 .table-card {
@@ -368,13 +369,16 @@ onMounted(() => {
 
   &.primary {
     color: #409eff;
-    &:hover { color: #66b1ff; }
+    &:hover {
+      color: #66b1ff;
+    }
   }
 
   &.danger {
     color: #f56c6c;
-    &:hover { color: #f78989; }
+    &:hover {
+      color: #f78989;
+    }
   }
 }
 </style>
-

src/views/platform/industrial/carousel/index.vue

@@ -5,12 +5,7 @@
       <div class="search-card">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true">
           <el-form-item label="广告名称" prop="adName">
-            <el-input
-              v-model="queryParams.adName"
-              placeholder="请输入广告名称"
-              clearable
-              @keyup.enter="handleQuery"
-            />
+            <el-input v-model="queryParams.adName" placeholder="请输入广告名称" clearable @keyup.enter="handleQuery" />
           </el-form-item>
           <el-form-item label="起始时间" prop="dateRange">
             <el-date-picker
@@ -39,51 +34,45 @@
         <!-- 表格标题 -->
         <div class="table-title">轮播广告信息列表</div>
 
-      <!-- 表格 -->
-      <el-table v-loading="loading" :data="carouselList" border>
-        <el-table-column label="广告图片" align="center" width="120">
-          <template #default="scope">
-            <el-image
-              :src="scope.row.imageUrl"
-              :preview-src-list="[scope.row.imageUrl]"
-              fit="cover"
-              style="width: 80px; height: 60px; border-radius: 4px"
-              lazy
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="广告名称" align="center" prop="title" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="时间" align="center" width="280">
-          <template #default="scope">
-            <div>开始时间：{{ scope.row.startTime }}</div>
-            <div>到期时间：{{ scope.row.endTime }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column label="上线/下线" align="center" width="100">
-          <template #default="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-              {{ scope.row.status === 1 ? '上线' : '下线' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="排序" align="center" prop="sort" width="80" />
-        <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
-        <el-table-column label="操作" align="center" width="150">
-          <template #default="scope">
-            <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
-            <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
-          </template>
-        </el-table-column>
-      </el-table>
+        <!-- 表格 -->
+        <el-table v-loading="loading" :data="carouselList" border>
+          <el-table-column label="广告图片" align="center" width="120">
+            <template #default="scope">
+              <el-image
+                :src="scope.row.imageUrl"
+                :preview-src-list="[scope.row.imageUrl]"
+                fit="cover"
+                style="width: 80px; height: 60px; border-radius: 4px"
+                lazy
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="广告名称" align="center" prop="title" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="时间" align="center" width="280">
+            <template #default="scope">
+              <div>开始时间：{{ scope.row.startTime?.substring(0, 10) }}</div>
+              <div>到期时间：{{ scope.row.endTime?.substring(0, 10) }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="上线/下线" align="center" width="100">
+            <template #default="scope">
+              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+                {{ scope.row.status === 1 ? '上线' : '下线' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" align="center" prop="sort" width="80" />
+          <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
+          <el-table-column label="操作" align="center" width="150">
+            <template #default="scope">
+              <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
+              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
 
         <!-- 分页 -->
-        <pagination
-          v-show="total > 0"
-          v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize"
-          :total="total"
-          @pagination="getList"
-        />
+        <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
       </div>
     </div>
 
@@ -103,6 +92,7 @@
             placeholder="选择开始时间"
             value-format="YYYY-MM-DD"
             style="width: 100%"
+            @change="form.endTime = ''"
           />
         </el-form-item>
         <el-form-item label="结束时间" prop="endTime">
@@ -112,6 +102,7 @@
             placeholder="选择结束时间"
             value-format="YYYY-MM-DD"
             style="width: 100%"
+            :disabled-date="disabledEndDate"
           />
         </el-form-item>
         <el-form-item label="链接地址" prop="link">
@@ -181,6 +172,12 @@ const initFormData = {
 
 const form = ref({ ...initFormData });
 
+const disabledEndDate = (date: Date) => {
+  if (!form.value.startTime) return false;
+  const start = new Date(form.value.startTime + 'T00:00:00');
+  return date.getTime() < start.getTime();
+};
+
 const rules = reactive({
   title: [{ required: true, message: '广告名称不能为空', trigger: 'blur' }],
   startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
@@ -312,8 +309,12 @@ onMounted(() => {
   justify-content: space-between;
   align-items: flex-start;
 
-  .el-form { flex: 1; }
-  .toolbar { flex-shrink: 0; }
+  .el-form {
+    flex: 1;
+  }
+  .toolbar {
+    flex-shrink: 0;
+  }
 }
 
 .table-card {
@@ -335,12 +336,16 @@ onMounted(() => {
 
   &.primary {
     color: #409eff;
-    &:hover { color: #66b1ff; }
+    &:hover {
+      color: #66b1ff;
+    }
   }
 
   &.danger {
     color: #f56c6c;
-    &:hover { color: #f78989; }
+    &:hover {
+      color: #f78989;
+    }
   }
 }
 </style>