ylrz_saas_his_scrm_companyUI/src/views/adv/site/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          plain
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          type="success"
          icon="el-icon-refresh"
          size="mini"
          @click="getList"
        >刷新</el-button>
      </el-col>
    </el-row>

    <el-table border v-loading="loading" :data="siteList">
      <el-table-column label="ID" align="center" prop="id" width="80" />
      <el-table-column label="站点名称" align="center" prop="siteName" width="150" show-overflow-tooltip />
      <el-table-column label="站点地址" align="center" prop="siteUrl" width="180" show-overflow-tooltip />
      <el-table-column label="投放类型" align="center" prop="launchType" width="100" />
      <el-table-column label="广告类型" align="center" prop="adType" width="120" />
      <el-table-column label="投放广告商" align="center" prop="advertiserName" width="150" show-overflow-tooltip />
      <el-table-column label="投放广告商账号" align="center" prop="promotionAccountName" width="150" show-overflow-tooltip />
      <el-table-column label="投放页面" align="center" prop="launchPageName" width="150" show-overflow-tooltip />
      <el-table-column label="来源" align="center" prop="sourceName" width="120" show-overflow-tooltip />
      <el-table-column label="投放域名" align="center" prop="launchDomain" width="150" show-overflow-tooltip />
      <el-table-column label="配置回传" align="center" prop="configCallback" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.configCallback === 1 ? 'success' : 'info'" size="small">
            {{ scope.row.configCallback === 1 ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="回传账号" align="center" prop="callbackAccountName" width="150" show-overflow-tooltip />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="280" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-data-line"
            @click="handleStatistics(scope.row)"
          >统计</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改站点对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body class="site-dialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="130px" class="elegant-form">
        <!-- 基础信息 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-info"></i>
            <span>基础信息</span>
          </div>
          <el-form-item label="站点名称" prop="siteName">
            <el-input 
              v-model="form.siteName" 
              placeholder="请输入站点名称"
              prefix-icon="el-icon-notebook-2"
              clearable
            />
          </el-form-item>
        </div>

        <!-- 投放配置 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-setting"></i>
            <span>投放配置</span>
          </div>
          <el-form-item label="投放类型" prop="launchType">
            <el-select 
              v-model="form.launchType" 
              placeholder="请选择投放类型" 
              style="width: 100%"
              prefix-icon="el-icon-s-flag"
            >
              <el-option
                v-for="item in launchTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="广告类型" prop="adType">
            <el-select 
              v-model="form.adType" 
              placeholder="请选择广告类型" 
              style="width: 100%"
            >
              <el-option
                v-for="item in adTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>

        <!-- 广告商信息 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-office-building"></i>
            <span>广告商信息</span>
          </div>
          <el-form-item label="投放广告商" prop="advertiserId">
            <el-select 
              v-model="form.advertiserId" 
              placeholder="请选择投放广告商" 
              style="width: 100%"
              @change="handleAdvertiserChange"
              filterable
            >
              <el-option
                v-for="item in advertiserList"
                :key="item.id"
                :label="item.advertiserName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="投放广告商账号" prop="promotionAccountId">
            <el-select 
              v-model="form.promotionAccountId" 
              placeholder="请选择投放广告商账号" 
              style="width: 100%"
              @change="handlePromotionAccountChange"
              filterable
              :disabled="!form.advertiserId"
            >
              <el-option
                v-for="item in promotionAccountList"
                :key="item.id"
                :label="item.accountName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>

        <!-- 页面和来源 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-monitor"></i>
            <span>页面和来源</span>
          </div>
          <el-form-item label="投放页面" prop="launchPageId">
            <el-select 
              v-model="form.launchPageId" 
              placeholder="请选择投放页面" 
              style="width: 100%"
              @change="handleLaunchPageChange"
              filterable
            >
              <el-option
                v-for="item in landingPageTemplateList"
                :key="item.id"
                :label="item.templateName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="投放域名" prop="launchDomain">
            <el-select 
              v-model="form.launchDomain" 
              placeholder="请选择投放域名" 
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in launchDomainList"
                :key="item.id"
                :label="item.domain"
                :value="item.domain"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="来源" prop="sourceId">
            <el-select 
              v-model="form.sourceId" 
              placeholder="请选择来源" 
              style="width: 100%"
              @change="handleSourceChange"
              filterable
            >
              <el-option
                v-for="item in leadSourceList"
                :key="item.id"
                :label="item.sourceName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>

        <!-- 回传配置 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-share"></i>
            <span>回传配置</span>
          </div>
          <el-form-item label="是否配置回传" prop="configCallback">
            <el-radio-group v-model="form.configCallback">
              <el-radio 
                v-for="item in configCallbackOptions"
                :key="item.value"
                :label="item.value"
                :border="true"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item 
            v-if="form.configCallback === 1" 
            label="回传账号" 
            prop="callbackAccountId"
            class="slide-fade"
          >
            <el-select 
              v-model="form.callbackAccountId" 
              placeholder="请选择回传账号" 
              style="width: 100%"
              @change="handleCallbackAccountChange"
              filterable
            >
              <el-option
                v-for="item in callbackAccountList"
                :key="item.id"
                :label="item.callbackAccountName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" icon="el-icon-check">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 站点统计对话框 -->
    <el-dialog title="站点统计" :visible.sync="statisticsOpen" width="800px" append-to-body>
      <el-descriptions :column="2" border v-if="statistics">
        <el-descriptions-item label="站点ID">{{ statistics.siteId }}</el-descriptions-item>
        <el-descriptions-item label="访问量">{{ statistics.visitCount || 0 }}</el-descriptions-item>
        <el-descriptions-item label="访客数">{{ statistics.visitorCount || 0 }}</el-descriptions-item>
        <el-descriptions-item label="转化数">{{ statistics.conversionCount || 0 }}</el-descriptions-item>
        <el-descriptions-item label="转化率">
          {{ statistics.conversionRate ? (statistics.conversionRate * 100).toFixed(2) + '%' : '0%' }}
        </el-descriptions-item>
        <el-descriptions-item label="统计时间">{{ parseTime(statistics.updateTime) }}</el-descriptions-item>
      </el-descriptions>
      <div v-else style="text-align: center; padding: 40px 0;">
        <el-empty description="暂无统计数据"></el-empty>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="statisticsOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSite, getSite, addSite, updateSite, delSite, getSiteStatistics } from "@/api/adv/site";
import { pageAdvertiser } from "@/api/adv/advertiser";
import { pagePromotionAccount } from "@/api/adv/promotionAccount";
import { pageTemplate } from "@/api/adv/landingPageTemplate";
import { pageLeadSource } from "@/api/adv/leadSource";
import { pageCallbackAccount } from "@/api/adv/callbackAccount";
import { pageDomain } from "@/api/adv/domain";

export default {
  name: "Site",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 站点表格数据
      siteList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示统计弹出层
      statisticsOpen: false,
      // 统计数据
      statistics: null,
      // 表单参数
      form: {},
      // 投放类型选项
      launchTypeOptions: [
        { label: "线上投放", value: "线上投放" },
        { label: "线下投放", value: "线下投放" }
      ],
      // 广告类型选项
      adTypeOptions: [
        { label: "信息流广告", value: "信息流广告" }
      ],
      // 是否配置回传选项
      configCallbackOptions: [
        { label: "否", value: 0 },
        { label: "是", value: 1 }
      ],
      // 广告商列表
      advertiserList: [],
      // 广告商账号列表
      promotionAccountList: [],
      // 落地页模板列表
      landingPageTemplateList: [],
      // 线索来源列表
      leadSourceList: [],
      // 回传账号列表
      callbackAccountList: [],
      // 投放域名列表
      launchDomainList: [],
      // 表单校验
      rules: {
        siteName: [
          { required: true, message: "站点名称不能为空", trigger: "blur" }
        ],
        siteUrl: [
          { required: true, message: "站点地址不能为空", trigger: "blur" }
        ],
        launchType: [
          { required: true, message: "请选择投放类型", trigger: "change" }
        ],
        adType: [
          { required: true, message: "请选择广告类型", trigger: "change" }
        ],
        advertiserId: [
          { required: true, message: "请选择投放广告商", trigger: "change" }
        ],
        promotionAccountId: [
          { required: true, message: "请选择投放广告商账号", trigger: "change" }
        ],
        launchPageId: [
          { required: true, message: "请选择投放页面", trigger: "change" }
        ],
        sourceId: [
          { required: true, message: "请选择来源", trigger: "change" }
        ],
        launchDomain: [
          { required: true, message: "请选择投放域名", trigger: "change" }
        ],
        configCallback: [
          { required: true, message: "请选择是否配置回传", trigger: "change" }
        ],
        callbackAccountId: [
          { 
            validator: (rule, value, callback) => {
              if (this.form.configCallback === 1 && !value) {
                callback(new Error('请选择回传账号'));
              } else {
                callback();
              }
            }, 
            trigger: "change" 
          }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询站点列表 */
    getList() {
      this.loading = true;
      listSite().then(response => {
        this.siteList = response.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        siteName: undefined,
        siteUrl: undefined,
        launchType: undefined,
        adType: undefined,
        advertiserId: undefined,
        advertiserName: undefined,
        promotionAccountId: undefined,
        promotionAccountName: undefined,
        launchPageId: undefined,
        launchPageName: undefined,
        sourceId: undefined,
        sourceName: undefined,
        launchDomain: undefined,
        configCallback: 0,
        callbackAccountId: undefined,
        callbackAccountName: undefined
      };
      this.promotionAccountList = [];
      this.launchDomainList = [];
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.loadSelectOptions();
      this.open = true;
      this.title = "添加站点";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.loadSelectOptions();
      getSite(row.id).then(response => {
        this.form = response.data;
        // 如果有广告商ID，加载对应的广告商账号列表
        if (this.form.advertiserId) {
          this.loadPromotionAccountList(this.form.advertiserId);
        }
        this.open = true;
        this.title = "修改站点";
      });
    },
    /** 查看统计按钮操作 */
    handleStatistics(row) {
      this.statistics = null;
      this.statisticsOpen = true;
      getSiteStatistics(row.id).then(response => {
        this.statistics = response.data;
      }).catch(() => {
        this.statistics = null;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateSite(this.form.id, this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addSite(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除站点"' + row.siteName + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return delSite(row.id);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    /** 加载下拉选项数据 */
    loadSelectOptions() {
      // 加载广告商列表
      pageAdvertiser({ pageNum: 1, pageSize: 1000 }).then(response => {
        this.advertiserList = response.data.records;
      }).catch(error => {
        console.error('加载广告商列表失败:', error);
        this.advertiserList = [];
      });
      
      // 加载落地页模板列表
      pageTemplate({ pageNum: 1, pageSize: 1000, status: 1 }).then(response => {
        this.landingPageTemplateList = response.data.records;
      }).catch(error => {
        console.error('加载落地页模板失败:', error);
        this.landingPageTemplateList = [];
      });
      
      // 加载线索来源列表
      pageLeadSource({ pageNum: 1, pageSize: 1000 }).then(response => {
        this.leadSourceList = response.data.records;
      }).catch(error => {
        console.error('加载线索来源失败:', error);
        this.leadSourceList = [];
      });
      
      // 加载回传账号列表
      pageCallbackAccount({ pageNum: 1, pageSize: 1000 }).then(response => {
        this.callbackAccountList = response.data.records;
      }).catch(error => {
        console.error('加载回传账号失败:', error);
        this.callbackAccountList = [];
      });
      
      // 加载域名列表
      pageDomain({ pageNum: 1, pageSize: 1000, status: 1 }).then(response => {
        this.launchDomainList = response.data.records;
      }).catch(error => {
        console.error('加载域名失败:', error);
        this.launchDomainList = [];
      });
    },
    /** 广告商变化时 */
    handleAdvertiserChange(advertiserId) {
      this.form.advertiserName = "";
      this.form.promotionAccountId = undefined;
      this.form.promotionAccountName = "";
      this.promotionAccountList = [];
      
      if (advertiserId) {
        const advertiser = this.advertiserList.find(item => item.id === advertiserId);
        if (advertiser) {
          this.form.advertiserName = advertiser.advertiserName;
        }
        // 加载对应的广告商账号列表
        this.loadPromotionAccountList(advertiserId);
      }
    },
    /** 加载广告商账号列表 */
    loadPromotionAccountList(advertiserId) {
      if (!advertiserId) return;
      pagePromotionAccount({ pageNum: 1, pageSize: 1000, advertiserId: advertiserId }).then(response => {
        this.promotionAccountList = response.data.records;
      }).catch(error => {
        console.error('加载广告商账号失败:', error);
        this.promotionAccountList = [];
      });
    },
    /** 广告商账号变化时 */
    handlePromotionAccountChange(promotionAccountId) {
      this.form.promotionAccountName = "";
      if (promotionAccountId) {
        const account = this.promotionAccountList.find(item => item.id === promotionAccountId);
        if (account) {
          this.form.promotionAccountName = account.accountName;
        }
      }
    },
    /** 投放页面变化时 */
    handleLaunchPageChange(launchPageId) {
      this.form.launchPageName = "";
      
      if (launchPageId) {
        const template = this.landingPageTemplateList.find(item => item.id === launchPageId);
        if (template) {
          this.form.launchPageName = template.templateName;
        }
      }
    },
    /** 线索来源变化时 */
    handleSourceChange(sourceId) {
      this.form.sourceName = "";
      if (sourceId) {
        const source = this.leadSourceList.find(item => item.id === sourceId);
        if (source) {
          this.form.sourceName = source.sourceName;
        }
      }
    },
    /** 回传账号变化时 */
    handleCallbackAccountChange(callbackAccountId) {
      this.form.callbackAccountName = "";
      if (callbackAccountId) {
        const account = this.callbackAccountList.find(item => item.id === callbackAccountId);
        if (account) {
          this.form.callbackAccountName = account.callbackAccountName;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

// 对话框样式
::v-deep .site-dialog {
  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    margin: 0;
    border-radius: 4px 4px 0 0;
    
    .el-dialog__title {
      color: #fff;
      font-size: 18px;
      font-weight: 500;
    }
    
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 20px;
      
      &:hover {
        color: #f0f0f0;
      }
    }
  }
  
  .el-dialog__body {
    padding: 25px 30px;
    background-color: #f8f9fa;
  }
  
  .el-dialog__footer {
    padding: 15px 30px;
    border-top: 1px solid #e8e8e8;
    background-color: #fff;
  }
}

// 表单样式
.elegant-form {
  .form-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      transform: translateY(-2px);
    }
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8e8e8;
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    
    i {
      font-size: 18px;
      margin-right: 8px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    span {
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -12px;
        width: 0;
        height: 2px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        transition: width 0.3s ease;
      }
    }
  }
  
  .form-section:hover .section-title span::after {
    width: 100%;
  }
  
  .el-form-item {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  ::v-deep .el-form-item__label {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
  }
  
  ::v-deep .el-input__inner,
  ::v-deep .el-textarea__inner {
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #c0c4cc;
    }
    
    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }
  }
  
  ::v-deep .el-select {
    .el-input__inner {
      padding-left: 15px;
    }
  }
  
  ::v-deep .el-radio {
    margin-right: 20px;
    
    &.is-bordered {
      border-radius: 6px;
      padding: 10px 20px;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #667eea;
      }
      
      &.is-checked {
        border-color: #667eea;
        background-color: rgba(102, 126, 234, 0.05);
      }
    }
  }
  
  // 回传账号显示动画
  .slide-fade {
    animation: slideDown 0.3s ease;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 按钮样式优化
.dialog-footer {
  text-align: right;
  
  .el-button {
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &.el-button--primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
    
    &.el-button--default {
      &:hover {
        color: #667eea;
        border-color: #667eea;
        background-color: rgba(102, 126, 234, 0.05);
      }
    }
  }
}

// 表格样式优化
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  
  ::v-deep .el-table__header {
    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 600;
      font-size: 14px;
    }
  }
  
  ::v-deep .el-table__row {
    transition: all 0.3s ease;
    
    &:hover {
      background-color: rgba(102, 126, 234, 0.05);
    }
  }
}

// 顶部按钮组样式
.mb8 {
  margin-bottom: 15px;
  
  .el-button {
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &.el-button--primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      }
    }
    
    &.el-button--success {
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(103, 194, 58, 0.4);
      }
    }
  }
}
</style>