adAdmin/src/views/AdListPage.vue

<template>
  <el-form :inline="true">
    <el-form-item label="计划名称">
      <el-input v-model="search" placeholder="输入计划关键词" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
      <el-button type="primary" link @click="creatEditPlan">创建计划</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="start_date" label="生效日期" />
    <el-table-column prop="end_date" label="结束日期" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-popconfirm title="确定删除该广告吗?">
          <template #reference>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-popconfirm>
        <el-button link type="primary" size="small" @click="() => creatEditPlan(scope.row)">
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <br />
  <el-pagination
    background
    layout="prev, pager, next"
    :total="tableData.length"
    @current-change="page"
  />

  <el-dialog v-model="dialogVisible" title="计划">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="计划名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="计划周期">
        <el-date-picker
          v-model="form.dates"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          range-separator="到"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = false"> 确 定 </el-button>
        <el-button type="primary" @click="dialogVisible = false"> 取 消 </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import type { AdList, AdListItem } from '@/types/AdListPage'
import { ref } from 'vue'

const search = ref('')
const dialogVisible = ref(false)
const form = ref({
  name: '',
  dates: ['', ''],
})

const tableData: AdList = [
  {
    start_date: '2016-05-03',
    end_date: '2016-05-06',
    name: '咸阳国际机场广告',
  },
]

const onSubmit = () => {
  console.log('submit!')
}

const page = (val: number) => {
  console.log(val)
}

const creatEditPlan = (data: AdListItem) => {
  if (data != undefined) {
    form.value = {
      name: data.name,
      dates: [data.start_date, data.end_date],
    }
  }
  dialogVisible.value = !dialogVisible.value
}
</script>

<style></style>