adAdmin/src/views/ExaminePage.vue

<!-- 素材列表页 -->
<template>
  <el-form :inline="true">
    <el-form-item label="素材名称">
      <el-input v-model="pages.keyword" placeholder="输入素材关键词" clearable />
    </el-form-item>
    <el-form-item label="选择创意">
      <el-select
        filterable
        v-model="pages.creativeId"
        placeholder="选择创意"
        clearable
        style="width: 240px"
      >
        <el-option
          v-for="item in originalityList"
          :key="item.creativeId"
          :label="item.creativeName"
          :value="item.creativeId"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="stuffName" label="名称" />
    <el-table-column prop="stuffName" label="状态">
      <template #default="scope">
        {{ getStatus(scope.row.status) }}
      </template>
    </el-table-column>
    <el-table-column prop="stuffName" label="创意">
      <template #default="scope">
        {{ OriginalityName(scope.row.creativeId) }}
      </template>
    </el-table-column>
    <el-table-column prop="width" label="宽(px)" width="80" />
    <el-table-column prop="height" label="高(px)" width="80" />
    <el-table-column prop="landingPage" label="跳转地址" />
    <el-table-column prop="updatedTime" label="最近更新">
      <template #default="scope">
        {{ formatDateSite(scope.row.updatedTime, 'Y-M-D') }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-popconfirm
          title="确定通过该素材吗?"
          v-if="scope.row.status == 0"
          @confirm="changeStatus(scope.row.stuffId, 10, '审核成功')"
        >
          <template #reference>
            <el-button link type="primary" size="small">通过</el-button>
          </template>
        </el-popconfirm>
        <el-popconfirm
          title="确定通过该素材吗?"
          v-if="scope.row.status == 0"
          @confirm="changeStatus(scope.row.stuffId, 3, '拒审成功')"
        >
          <template #reference>
            <el-button link type="primary" size="small">不通过</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <br />
  <el-pagination
    background
    layout="prev, pager, next"
    :total="pages.total"
    @current-change="page"
  />

  <el-dialog v-model="dialogVisible" title="素材">
    <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="auto">
      <el-form-item label="素材名称" prop="stuffName">
        <el-input v-model="form.stuffName" />
      </el-form-item>
      <el-form-item label="选择创意" prop="creativeId">
        <el-select filterable v-model="form.creativeId" placeholder="选择创意">
          <el-option
            v-for="item in originalityList"
            :key="item.creativeId"
            :label="item.creativeName"
            :value="item.creativeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="跳转地址" prop="landingPage">
        <el-input v-model="form.landingPage" />
      </el-form-item>
      <el-form-item label="上传素材" prop="addr">
        <MediaComponents
          v-if="dialogVisible"
          :src="form.addr || ''"
          @change="(val: string) => (form.addr = val)"
          @getCalc="getCalc"
        />
      </el-form-item>
      <el-form-item label="宽(px)" prop="width">
        <el-input-number v-model="form.width" :min="0" />
      </el-form-item>
      <el-form-item label="高(px)" prop="height">
        <el-input-number v-model="form.height" :min="0" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="creatMaterial(ruleFormRef)">确定</el-button>
        <el-button v-if="form.stuffId" type="primary" @click="addNewMaterial(ruleFormRef)">
          添加到新创意
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { Pages } from '@/types/Tool'
import type { OriginalityList } from '@/types/AdListPage'
import type { SourceMaterialList, ISourceMaterialProps } from '@/types/SourceMaterial'
import { formatDateSite, getStatus } from '@/tool/index'
import { ElMessage } from 'element-plus'
import {
  getMaterialList,
  getOriginalityList,
  createMaterial,
  updateMaterial,
  updateMaterialStatus,
} from '@/api/index'
import { ref, reactive } from 'vue'

import MediaComponents from '@/components/mediaComponents.vue'

// vue3 获取url参数

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<ISourceMaterialProps>>({
  stuffName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  landingPage: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  creativeId: [{ required: true, message: '请选择创意', trigger: 'change' }],
  addr: [{ required: true, message: '请选择素材', trigger: 'change' }],
  width: [{ required: true, message: '请输入宽', trigger: 'change' }],
  height: [{ required: true, message: '请输入高', trigger: 'change' }],
})
const originalityList = ref<OriginalityList>([])
getOriginalityList({
  pageNum: 1,
  pageSize: 999999,
}).then(({ data }) => {
  originalityList.value = data.records || {}
})

const dialogVisible = ref(false)
const form = ref<ISourceMaterialProps>({
  width: 0,
  height: 0,
})

const pages = reactive<Pages>({
  pageNum: 1,
  pageSize: 10,
  creativeId: undefined,
  status: 0,
})

const tableData = ref<SourceMaterialList>([])

const OriginalityName = (id: number) => {
  const item = originalityList.value.find((item) => item.creativeId === id)
  return item?.creativeName
}

const onSubmit = () => {
  getMaterialList({
    creativeId: pages.creativeId,
    keyword: pages.keyword,
    status: pages.status,
    pageNum: pages.pageNum,
    pageSize: pages.pageSize,
  }).then(({ data }) => {
    tableData.value = data.records
    pages.total = data.total
  })
}

const creatMaterial = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (!valid) return
    if (typeof form.value.stuffId === 'number') {
      updateMaterial(form.value).then(() => {
        ElMessage({
          message: '更新成功',
          type: 'success',
        })
        onSubmit()
        dialogVisible.value = false
      })
      return
    }
    createMaterial(form.value).then(() => {
      ElMessage({
        message: '创建成功',
        type: 'success',
      })
      onSubmit()
      dialogVisible.value = false
    })
  })
}

const addNewMaterial = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (!valid) return
    const p = {
      ...form.value,
    }
    delete p.stuffId
    createMaterial(p).then(() => {
      ElMessage({
        message: '复制成功',
        type: 'success',
      })
      onSubmit()
      dialogVisible.value = false
    })
  })
}

const page = (val: number) => {
  pages.pageNum = val
  onSubmit()
}

const getCalc = (width: number, height: number) => {
  form.value.width = width
  form.value.height = height
}

const changeStatus = (id: number, status: number, text: string) => {
  updateMaterialStatus({ id, status }).then(() => {
    ElMessage.success(text)
    onSubmit()
  })
}

onSubmit()
</script>

<style></style>