advises-admin/src/views/main/formworkErection/appAdmin.vue

<template>
  <div class="layout-container">
    <!-- 菜单栏 -->
    <From :form-items="dynamicFormItems" @formSubmitted="handleFormSubmitted" @formReset="handleFormReset"
      is_add_button="新增" @addForm="edit" />

    <!-- 表格 -->
    <div class="layout-container">
      <Table @getTableData="changeTableData" v-model:page="page" ref="table" :data="tableData"
        @selection-change="handleSelectionChange">
        <el-table-column prop="appId" label="应用ID" width="140" />
        <el-table-column prop="appName" label="应用名称" width="100" />
        <el-table-column prop="appKey" label="应用秘钥"  width="120">
          <template #default="scope">
            <label>{{ scope.row.showKey ? scope.row.appKey : "******" }}</label>
            <span style="margin-left: 15px">
              <el-icon v-if="scope.row.showKey" @click="() => { scope.row.showKey = !scope.row.showKey }">
                <View />
              </el-icon>
              <el-icon v-if="!scope.row.showKey" @click="() => { scope.row.showKey = !scope.row.showKey }">
                <Hide />
              </el-icon>
            </span>
            <span style="margin-left: 5px">
              <el-icon v-copy="scope.row.appKey">
                <CopyDocument />
              </el-icon>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="channelName" label="广告平台名称" width="120" />
        <el-table-column prop="networkAppName" label="关联渠道应用" width="120" />
        <el-table-column prop="nickName" label="所属用户" width="100" />
        <el-table-column prop="appType" label="应用类型" width="100">
          <template #default="scope">
            {{ getDictionaryName("app_type", scope.row.appType) }}
          </template>
        </el-table-column>
        <el-table-column prop="apkUrl" label="下载链接"  width="120">
          <template #default="scope">
            <a :href="scope.row.apkUrl" target="_blank">{{ scope.row.appName }}.apk</a>
          </template>
        </el-table-column>
        <el-table-column prop="qrCode" min-width="130" label="二维码">
          <template #default="scope">
            <el-image style="width: 100px; height: 100px;" :z-index="99999" :src="scope.row.qrCode" fit="fill"
              :preview-src-list="[scope.row.qrCode]" preview-teleported="true" />
          </template>
        </el-table-column>
        <el-table-column prop="request" label="广告源请求数"  width="120" />
        <el-table-column prop="fillrate" label="广告源填充率"  width="120" />
        <el-table-column prop="impression" label="展示数" />
        <el-table-column prop="click" label="点击数" />
        <el-table-column prop="ecpm" label="ECPM" />
        <el-table-column prop="revenue" label="收益" />
        <el-table-column prop="impression_api" label="广告平台展示数"  width="130" />
        <el-table-column prop="click_api" label="广告平台点击数"  width="130" />
        <el-table-column prop="ecpm_api" label="广告平台ECPM"  width="130" />
        <el-table-column prop="updateTips" label="更新提示"  width="100" />
        <el-table-column prop="enabled" label="是否启用"  width="100">
          <template #default="scope">
            {{ getDictionaryName("enabled", scope.row.enabled) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <div class="button">
              <el-button class="button-item" type="primary" style="margin-bottom: 5px"
                @click="openChannelLayer(scope.row)">
                关联平台
              </el-button>
              <el-button class="button-item" type="primary" style="margin-bottom: 5px" @click="edit(scope.row)">
                编辑
              </el-button>
              <el-popconfirm placement="left" title="确认删除该数据?" @confirm="removeApp(scope.row)">
                <template #reference>
                  <el-button class="button-item" style="margin-bottom: 5px" type="warning">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </Table>
    </div>

    <Layer :layer="channelLayer" @confirm="channelSubmit" @close="channelLayer.show = false">
      <el-radio-group style="width: 100%;" v-model="selectedChannelId" @change="handleRadioChange">
        <Table style="width: 100%;" @getTableData="getChanelData" v-model:page="channelPage" ref="channelTable"
          :data="channelData">
          <el-table-column width="60">
            <template #default="{ row }">
              <el-radio :label="row.channelId">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="channelId" label="平台ID" />
          <el-table-column prop="channelName" label="平台名称" />
          <el-table-column prop="loginType" label="登录类型">
            <template #default="{ row }">
              {{ getDictionaryName("login_type", row.loginType) }}
            </template>
          </el-table-column>
          <el-table-column prop="channelAccount" label="平台账号" />
          <el-table-column prop="channelPwd" label="平台密码" />
          <el-table-column prop="channelStatus" label="平台状态">
            <template #default="{ row }">
              {{ getDictionaryName("channel_status", row.channelStatus) }}
            </template>
          </el-table-column>
        </Table>
      </el-radio-group>
    </Layer>

    <!-- 操作弹窗 -->
    <Layer :layer="layer" @confirm="submit(ruleForm)" @close="layer.show = false">
      <el-form :model="formEdit" :rules="rules" ref="ruleForm" label-width="130px" style="margin-right: 30px">
        <el-row :gutter="5">
          <el-col :span="10" v-if="formEdit.appId">
            <el-form-item label="应用ID" required prop="appId">
              <el-input v-model="formEdit.appId" disabled placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="2" v-if="formEdit.appId"></el-col>
          <el-col :span="10">
            <el-form-item label="应用名称：" required prop="appName">
              <el-input v-model="formEdit.appName" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="10">
            <el-form-item label="应用类型" required prop="appType">
              <el-select v-model="formEdit.appType" @change="getPrimaryCategoriesData">
                <el-option :value="1" label="Android" />
                <el-option :value="2" label="IOS" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="10">
            <el-form-item label="是否上架" required prop="store_on_sale">
              <el-select v-model="formEdit.store_on_sale">
                <el-option :value="1" label="否" />
                <el-option :value="2" label="是" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-if="formEdit.store_on_sale === 2">
          <el-col :span="10">
            <el-form-item label="上架商店" prop="store_type">
              <el-select v-model="formEdit.store_type" placeholder="请选择上架应用商店">
                <el-option :value="1" label="App Store" />
                <el-option :value="2" label="Google Play" />
                <el-option :value="3" label="华为商店" />
                <el-option :value="4" label="小米应用商店" />
                <el-option :value="5" label="OPPO商店" />
                <el-option :value="6" label="vivo商店" />
                <el-option :value="7" label="应用宝" />
                <el-option :value="8" label="TapTap" />
                <el-option :value="9" label="Amazon应用商店" />
                <el-option :value="10" label="三星应用商店" />
                <el-option :value="11" label="小米海外应用商店" />
                <el-option :value="12" label="华为海外应用市场" />
                <el-option :value="13" label="Roku" />
                <el-option :value="14" label="Samsung Smart TV" />
                <el-option :value="15" label="Microsoft" />
                <el-option :value="16" label="LG Smart TV" />
                <el-option :value="17" label="Vizio" />
                <el-option :value="99" label="其他" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="10">
            <el-form-item label="商店链接" prop="store_url">
              <el-input v-model="formEdit.store_url" placeholder="请输入上架商店链接" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="10">
            <el-form-item label="应用域名" prop="domain">
              <el-input v-model="formEdit.domain" placeholder="请输入应用域名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="10">
            <el-form-item label="应用包名" prop="package_name">
              <el-input v-model="formEdit.package_name" placeholder="请输入应用包名" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="10">
            <el-form-item label="一级分类" required prop="category">
              <el-select :disabled="primaryCategoriesData.length === 0" v-model="formEdit.category"
                placeholder="请选择上架应用商店" @change="getSecondaryCategoriesData">
                <el-option v-for="(item, index) in primaryCategoriesData" :key="item" :value="item" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="10">
            <el-form-item label="二级分类" required prop="sub_category">
              <el-select :disabled="secondaryCategoriesData.length === 0" v-model="formEdit.sub_category"
                placeholder="请选择上架应用商店">
                <el-option v-for="(item, index) in secondaryCategoriesData" :key="item" :value="item" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="10">
            <el-form-item label="屏幕方向" prop="screen_orientation">
              <el-select v-model="formEdit.screen_orientation" placeholder="请选择屏幕方向">
                <el-option :value="1" label="竖屏" />
                <el-option :value="2" label="横屏" />
                <el-option :value="3" label="所有" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="10">
            <el-form-item label="版本号" required prop="versionCode">
              <el-input v-model="formEdit.versionCode" placeholder="请输入版本号" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="10">
            <el-form-item label="遵守美国COPPA" prop="coppa">
              <el-switch v-model="formEdit.coppa" :active-value="2" :inactive-value="1" />
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="10">
            <el-form-item label="遵守美国CCPA" required prop="ccpa">
              <el-switch v-model="formEdit.ccpa" :active-value="2" :inactive-value="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="10">
            <el-form-item label="二维码图片：" required prop="qrCode">
              <el-upload class="avatar-uploader" accept="image/jpg,image/jpeg,image/png,image/webp" action="#"
                :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="selfUpload">
                <el-image v-if="formEdit.qrCode" style="width: 100px; height: 100px" :src="formEdit.qrCode" fit="fill"
                   />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
                <template #tip>
                  <div class="el-upload__tip">
                    仅支持上传 jpg / png / webp 图片格式
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="10">
            <el-form-item label="APP安装包：" required prop="apkUrl">
              <el-upload class="upload-demo" :before-upload="beforeUpload" :http-request="customUpload"
                :show-file-list="false">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    仅支持上传 Android (.apk/.aab) 或 iOS (.ipa) 安装包
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  <el-form-item label="apk应用包地址：" required prop="apkUrl">
          <el-input v-model="formEdit.apkUrl" placeholder="请输入" clearable/>
        </el-form-item> -->
        <el-form-item label="更新提示：" required prop="updateTips">
          <el-input v-model="formEdit.updateTips" placeholder="请输入" clearable />
        </el-form-item>
      </el-form>
    </Layer>
  </div>
</template>
<script setup>
import { onBeforeMount, ref, reactive } from "vue";
import QRCode from 'qrcode' //生成二维码
import { ElMessage } from "element-plus";
import { useGetDictList } from "@/hooks/useGetDictList.js";
import {
  channelAddOne,
  channelDeleteOne,
  channelUpdateOne,
  appList,
  saveOrUpdate,
  delApp, channelList, getSecondaryCategories, getPrimaryCategories, relativeChannel, relativeChannelList
} from "@/api/formworkErection.js";
import { attachFile, attachImage } from '@/api/common.js'
import From from "@/components/from/index.vue";
import Table from "@/components/table/index.vue";
import Layer from "@/components/layer/index.vue";
import { CopyDocument, Hide, View, Plus, UploadFilled } from "@element-plus/icons-vue";
import vCopy from '@/directive/copy'

const { loadDictData, getDictionaryName } = useGetDictList();
const tableData = ref([]);
const channelData = ref([]);

// 分页参数, 供table使用
const page = reactive({
  pageNum: 1,
  pageSize: 20,
  limit: 20,
  total: 0,
});


const channelPage = reactive({
  pageNum: 1,
  pageSize: 20,
  limit: 20,
  total: 0,
});

const formSearch = ref({
  appName: null,
  channelName: null,
  appType: null,

  limit: 20, // 当前页数量(查询量)
  page: 1, // 当前页码
  pageSizes: 20, // 总页数
});

const channelSearch = ref({
  limit: 20, // 当前页数量(查询量)
  page: 1, // 当前页码
  pageSizes: 20, // 总页数
});

const dynamicFormItems = ref([]);

onBeforeMount(() => {
  settingData();
  getList();
});



// 获取缓存数据设置筛选数据
const settingData = () => {
  loadDictData().then(() => {
    dynamicFormItems.value = [
      {
        label: "应用名称",
        prop: "appName",
        type: "input",
      },
      {
        label: "广告平台",
        prop: "channelName",
        type: "input",
      },
      {
        label: "应用类型",
        prop: "appType",
        type: "select",
        options: [
          {
            label: "全部",
            value: null,
          },
          {
            label: "Android",
            value: 1,
          },
          {
            label: "IOS",
            value: 2,
          },
        ],
      },
    ];
  });
};

// 分页数据
const getList = async () => {
  let res = await appList({ ...formSearch.value });
  tableData.value = res.data;
  page.total = res.pageMeta.total;
};

const changeTableData = () => {
  formSearch.value.pageNum = page.pageNum;
  formSearch.value.pageSize = page.pageSize;
  formSearch.value.limit = page.limit;
  // 分页切换
  getList();
};



// 搜索
const handleFormSubmitted = (formData) => {
  console.log("接收到子组件传递的数据", formData);
  formSearch.value.page = 1;
  formSearch.value.pageSizes = 20;
  formSearch.value.limit = 20;

  formSearch.value.channelName = formData?.channelName;
  formSearch.value.appName = formData?.appName;
  formSearch.value.appType = formData?.appType;

  getList();
};

// 表单重置
const handleFormReset = () => {
  formSearch.value = {
    appName: null,
    channelName: null,
    appType: null,

    limit: 20, // 当前页数量(查询量)
    page: 1, // 当前页码
    pageSizes: 20, // 总页数
  };
  getList();
};

// 选择监听器
const handleSelectionChange = (val) => {
  context.emit("selection-change", val);
};

// 关联平台
const selectedChannelId = ref(null)
const selectRow = ref({})

function handleRadioChange(val) {
  console.log('选中平台ID', val)
  selectRow.value = channelData.value.find(item => item.channelId === val) || null
  console.log(selectRow.value)
}

const selectedRow = ref(null); // 存储选中的行

// 选中行的方法
const selectRowClick = (row) => {
  // 如果点击已选中的行，则取消选中；否则选中新行
  selectedRow.value = selectedRow.value === row ? null : row;
};

// 行点击事件（点击行任意位置选中）
const handleRowClick = (row) => {
  selectRow(row);
};

// 弹窗
const layer = ref({
  show: false,
  title: "新增App",
  showButton: true,
  width: "60vw",
  edit: false,
});

const channelLayer = ref({
  show: false,
  title: "关联平台",
  showButton: true,
  width: "50vw",
  edit: false,
});

const channelSubmit = async () => {
  console.log('关联平台', selectRow.value)
  // selectRow.value.appId = channelAppId.value

  // 目前只支持单个关联
  await relativeChannel({ ...selectRow.value, appId: channelAppId.value }).then((res) => {
    ElMessage.success('关联成功')
    channelLayer.value.show = false;
    getList();
  })
}

const formEdit = ref({
  store_on_sale: "",
  store_type: null,
  store_url: "",
  category: "",
  sub_category: "",
  screen_orientation: "",
  versionCode: "",
  updateTips: "",
  apiSecret: "", //请求密令
  channelAccount: "", //渠道账号
  channelId: "", //渠道ID
  channelName: "", //渠道名称
  channelPwd: "", //渠道密码
  channelStatus: 0, //渠道状态
  loginType: 0, //登录类型 1-账号密码 2-微信
  remark: "", //备注
  appId: "",
  apiKey: "", //请求秘钥
  appName: "",
  coppa: 0,
  ccpa: 0,
  qrCode: "",
  apkUrl: "",
  package_name: "",
});

const edit = (row) => {
  ruleForm.value?.resetFields();
  if (row) {
    layer.value.title = "编辑APP";
    layer.value.edit = true;
    formEdit.value = row;
    formEdit.value.store_on_sale = row.storeOnSale;
    formEdit.value.store_type = row.storeType;
    formEdit.value.package_name = row.packageName;
    formEdit.value.store_url = row.storeUrl;
    formEdit.value.sub_category = row.subCategory;
    formEdit.value.screen_orientation = row.screenOrientation;
  } else {
    layer.value.title = "新增APP";
    layer.value.edit = false;
    formEdit.value = {};
  }
  layer.value.show = true;
};

const channelAppId = ref('')
const openChannelLayer = async (row) => {
  if (row) {
    selectedChannelId.value = null
    channelAppId.value = row.appId
    let res =await relativeChannelList({appId: row.appId,page:channelPage.pageNum,limit:channelPage.limit})
    channelData.value = res.data;
    channelPage.total = res.pageMeta.total;
    channelLayer.value.show = true;
  }

}

const ruleForm = ref(null);

const rules = reactive({
  appName: [
    { required: true, message: "请输入应用名称", trigger: "blur" },
  ],
  appType: [
    { required: true, message: "请输入应用类型", trigger: "blur" },
  ],
  store_on_sale: [
    { required: true, message: "请选择是否上架", trigger: "change" },
  ],
  category: [
    { required: true, message: "请选择一级分类", trigger: "change" },
  ],
  sub_category: [
    { required: true, message: "请选择二级分类", trigger: "change" },
  ],
  versionCode: [
    { required: true, message: "请输入版本号", trigger: "blur" },
  ],
  qrCode: [
    { required: true, message: "请上传二维码图片", trigger: "change" },
  ],
  apkUrl: [
    { required: true, message: "请上传APP安装包", trigger: "change" },
  ],
  updateTips: [
    { required: true, message: "请输入更新提示", trigger: "blur" },
  ],
});

const submit = async (formEl) => {
  await formEl.validate(async (valid, fields) => {
    if (formEdit.value.store_on_sale === 2 && !formEdit.value.store_url && !formEdit.value.store_type) {
      ElMessage.error('上架商店或商店链接不能为空')
      return
    }

    if (valid) {
      // 提交内容
      if (layer.value.edit) {
        //api修改需要uuid
        formEdit.uuid = formEdit.appId;
      }
      const result = await saveOrUpdate({ ...formEdit.value });
      console.log(result)
      if (result.code === 200) {
        if (layer.value.edit) {
          ElMessage.success("修改成功");
          layer.value.show = false;
        } else {
          ElMessage.success("新增成功");
          layer.value.show = false;
        }
        handleFormSubmitted();
      } else {
        ElMessage.error(result.msg);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 删除
const removeApp = async (row) => {
  await delApp({ appId: row.appId }).then((res) => {
    ElMessage.success("删除成功");
    handleFormSubmitted();
  });
};

// 获取指定平台下的一级分类
const primaryCategoriesData = ref([])
const getPrimaryCategoriesData = async () => {
  formEdit.value.category = null
  secondaryCategoriesData.value = []
  let res = await getPrimaryCategories({
    platform: formEdit.value.appTyp === 1 ? 'Android' : 'IOS'
  })
  primaryCategoriesData.value = res.data
}

// 获取指定平台下的一级分类下的二级分类
const secondaryCategoriesData = ref([])
const getSecondaryCategoriesData = async () => {
  secondaryCategoriesData.value = []
  if (formEdit.value.appType && formEdit.value.category) {
    let res = await getSecondaryCategories({
      platform: formEdit.value.appTyp === 1 ? 'Android' : 'IOS',
      primaryCategory: formEdit.value.category
    })
    secondaryCategoriesData.value = res.data
  }
}

// 上传二维码图片
const beforeAvatarUpload = (rawFile) => {
  let fileType = ["image/jpeg", "image/png", "image/webp"];
  if (!fileType.includes(rawFile.type)) {
    ElMessage.error("请上传图片格式为jpg/png/webp!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error(`图片大小不能超过 2MB!`);
    return false;
  }
  return true;
}

const selfUpload = async (param) => {
  const file = param.file
  const formData = new FormData()
  formData.append('file', file)
  try {
    const res = await attachImage(formData)
    formEdit.value.qrCode = res.data.url
    ElMessage.success('图片上传成功')
  } catch (err) {
    ElMessage.error('图片上传失败')
    console.error(err)
  }
};

// 上传APP安装包
// 自定义上传逻辑
const customUpload = async (param) => {
  const file = param.file
  const formData = new FormData()
  formData.append('file', file)
  try {
    const res = await attachFile(formData)
    formEdit.value.apkUrl = res.data.url
    console.log(res, res.data.url)
    ElMessage.success('上传成功')
    // 生成二维码
    QRCode.toDataURL(res.data.url).then(res => {
      formEdit.value.qrCode = res
      ElMessage.success('二维码生成成功！')
    })
  } catch (err) {
    ElMessage.error('APP上传失败')
    console.error(err)
  }
}

// 上传前校验文件类型
const beforeUpload = (file) => {
  const fileExt = file.name.split('.').pop().toLowerCase()
  const validExts = ['apk', 'aab', 'ipa']

  if (!validExts.includes(fileExt)) {
    ElMessage.error('只允许上传 .apk、.aab 或 .ipa 文件')
    return false
  }

  return true
}

</script>

<style scoped lang="scss">
.layout-container {
  .card {
    .title {
      margin-bottom: 10px;
      font-weight: 600;
    }

    display: flex;
    flex-direction: column;
    align-items: start;
    width: calc(100% - 60px);
    margin: 30px 30px 0;
  }

  .button {
    display: flex;
    flex-direction: column;

    .button-item {
      margin: 4px;
    }
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px solid #e4e7ed;
}

:deep(.el-image-viewer__wrapper) {
  z-index: 9999 !important;
}
</style>