adAdmin/src/views/SitePage.vue

<!-- 站点列表页 -->
<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="mediaName" label="名称" />
    <el-table-column prop="url" label="地址" />
    <el-table-column prop="createdTime" label="创建日期">
      <template #default="scope">
        {{ formatDateSite(scope.row.createdTime, 'Y-M-D') }}
      </template>
    </el-table-column>
    <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-button
          link
          type="primary"
          @click="show(scope.row.mediaId, scope.row.mediaName)"
          size="small"
          :loading="loading"
        >
          查看栏目
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogVisible" :title="form.site">
    <el-table :data="catalogData" row-key="catalogId" border default-expand-all>
      <el-table-column prop="catalogName" label="名称">
        <template #default="scope">
          <el-input v-model="scope.row.catalogName" style="width: 240px" v-if="scope.row.isEdit" />
          <span v-else v-text="scope.row.catalogName"></span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            v-if="scope.row.isEdit"
            link
            type="primary"
            size="small"
            @click="() => saveEdit(scope.row)"
            :loading="loading"
          >
            确定
          </el-button>
          <div v-else>
            <el-button
              link
              type="primary"
              size="small"
              @click="() => Edit(scope.row, catalogData, true)"
            >
              修改
            </el-button>
            <el-button link type="primary" size="small" @click="() => Add(scope.row, catalogData)">
              添加
            </el-button>
            <el-popconfirm @confirm="deleteSiteFun(scope.row.catalogId)" title="确定删除该栏目吗?">
              <template #reference>
                <el-button link type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button
              v-if="scope.row.slots && scope.row.slots.length"
              @click="() => copyCode(scope.row)"
              link
              type="primary"
              size="small"
            >
              复制代码
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-button
      link
      type="primary"
      size="small"
      @click="
        () => (catalogData = [...catalogData, { isEdit: true, parentId: 0, mediaId: mediaId[0] }])
      "
    >
      添加
    </el-button>
  </el-dialog>
</template>

<script setup lang="ts">
import type { SiteList } from '@/types/Site'
import type { CatalogTreeOri } from '@/types/Catalog'
import { reactive, ref, h } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getSiteList, deleteAsTree, getAsTree, updateAsTree, createAsTree } from '@/api/index'

import { formatDateSite } from '@/tool/index'

const loading = ref(false)
const dialogVisible = ref(false)
const form = reactive({
  site: '',
})

const tableData = ref<SiteList>([])
const catalogData = ref<CatalogTreeOri[]>([])

let mediaId: [number, string] = [-1, '']

getSiteList().then((res) => {
  tableData.value.push(...res.data)
})

const deleteSiteFun = (id: number) => {
  loading.value = true
  deleteAsTree(id)
    .then(() => {
      loading.value = false
      show(mediaId[0], mediaId[1])
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
    })
    .catch(() => {
      loading.value = false
    })
}

const show = (id: number, mediaName: string) => {
  loading.value = true
  mediaId = [id, mediaName]
  getAsTree(id)
    .then(({ data }) => {
      catalogData.value = data
      form.site = mediaName
      dialogVisible.value = true
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

const Edit = (row: CatalogTreeOri, list: CatalogTreeOri[], value = false) => {
  for (let i = 0; i < list.length; i++) {
    const v = list[i]
    if (v.catalogId === row.catalogId) {
      v.isEdit = value
      break
    } else if (v.children && v.children.length) {
      Edit(row, v.children, value)
    }
  }
}

const saveEdit = (row: CatalogTreeOri) => {
  loading.value = true
  const exce = row.catalogId ? updateAsTree : createAsTree
  const p = row.catalogId
    ? {
        catalogId: row.catalogId,
        catalogName: row.catalogName,
      }
    : {
        mediaId: row.mediaId,
        parentId: row.parentId,
        catalogName: row.catalogName,
      }

  exce(p).then(() => {
    loading.value = false
    show(mediaId[0], mediaId[1])
    ElMessage({
      message: row.catalogId ? '修改成功' : '创建成功',
      type: 'success',
    })
  })
}

const copyCode = (row: CatalogTreeOri) => {
  const slots = row.slots || []
  const ele = document.createElement('script')
  ele.src = `http://cxzx.smcic.net/ad/config/adList.min.js`
  ele.setAttribute('ad_id', row.catalogId + '')
  ele.id = 'sxtv-ad-id'
  const elehttps = document.createElement('script')
  elehttps.setAttribute('ad_id', row.catalogId + '')
  elehttps.src = `https://cxzx.smcic.net/ad/config/adList.min.js`
  elehttps.id = 'sxtv-ad-id'
  ElMessageBox({
    title: row.catalogName,
    message: h('div', null, [
      h('h3', { style: { 'font-weight': 'bold', padding: '5px 0' } }, '代码(http)'),
      h('div', null, ele.outerHTML),
      h('h3', { style: { 'font-weight': 'bold', padding: '5px 0' } }, '代码(https)'),
      h('div', null, elehttps.outerHTML),
      h('h3', { style: { 'font-weight': 'bold', padding: '5px 0' } }, '广告位id:'),
      h('div', null, slots.map((v) => '#sxtv-ad-' + v.slotId).join('，')),
    ]),
  })
  // #sxtv-ad- + id
  // try {
  //   navigator.clipboard.writeText(`<script src="http://cxzx.smcic.net/ad/catalog/${id}.js" />`)
  //   ElMessage({
  //     message: '复制成功',
  //     type: 'success',
  //   })
  // } catch (error) {
  //   console.log(error)
  //   ElMessage({
  //     message: '复制失败',
  //     type: 'info',
  //   })
  // }
}

const Add = (row: CatalogTreeOri, list: CatalogTreeOri[]) => {
  const sonItem: CatalogTreeOri = { isEdit: true, parentId: row.catalogId, mediaId: row.mediaId }
  for (let i = 0; i < list.length; i++) {
    const v = list[i]
    if (v.catalogId === row.catalogId) {
      v.children = [...(v.children || []), sonItem]
      break
    } else if (v.children && v.children.length) {
      Add(row, v.children)
    }
  }
}
</script>

<style></style>