优化样式

src/views/v1/advert/agentSite/link-debug-form.vue

@@ -8,12 +8,27 @@
     :ok-loading="loading"
     @cancel="close"
     @before-ok="submit"
-    :footer="false">
+    :footer="false"
+  >
     <!-- 表单信息 start -->
-    <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :auto-label-width="true"
+    >
       <a-form-item label="推广媒体" field="media_id">
-        <a-select v-model="formData.media_id" placeholder="请选择推广媒体">
-          <a-option v-for="item in mediaOptions" :key="item.id" :value="item.id" :label="item.name" />
+        <a-select
+          v-model="formData.media_id"
+          placeholder="请选择推广媒体"
+          disabled
+        >
+          <a-option
+            v-for="item in mediaOptions"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          />
         </a-select>
       </a-form-item>
 
@@ -35,10 +50,17 @@
       <a-form-item label="广告位ID" field="site_id">
         <a-input v-model="formData.site_id" placeholder="请输入广告位ID" />
         <template #extra>
-          <Space> {{ formData.site_name }}, 渠道ID：{{ formData.agent_id }} </Space>
+          <Space>
+            {{ formData.site_name }}, 渠道ID：{{ formData.agent_id }}
+          </Space>
         </template>
       </a-form-item>
-      <a-button type="primary" class="w-[200px] ml-auto mr-auto" @click="generateParams">生成参数</a-button>
+      <a-button
+        type="primary"
+        class="w-[200px] ml-auto mr-auto"
+        @click="generateParams"
+        >生成参数</a-button
+      >
       <Divider />
     </a-form>
     <a-form ref="paramsFormRef" :model="paramsData">
@@ -48,7 +70,11 @@
       <a-form-item label="APPID" field="appid">
         <a-input readonly v-model="paramsData.appid" />
       </a-form-item>
-      <a-form-item label="下载链接" field="download_url" v-if="paramsData.download_url">
+      <a-form-item
+        label="下载链接"
+        field="download_url"
+        v-if="paramsData.download_url"
+      >
         <a-input readonly v-model="paramsData.download_url" />
       </a-form-item>
       <a-form-item label="包名" field="package_name">
@@ -67,90 +93,90 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed } from 'vue'
-import { Divider, Modal, Space } from '@arco-design/web-vue'
-import tool from '@/utils/tool'
-import commonApi from '../../api/common'
-import agentSiteApi from '../../api/advert/agentSite'
-import GameSelect from '@/components/game-select/index.vue'
-import centerGameApi from '../../api/center/game'
+import { ref, reactive, computed } from "vue";
+import { Divider, Modal, Space } from "@arco-design/web-vue";
+import tool from "@/utils/tool";
+import commonApi from "../../api/common";
+import agentSiteApi from "../../api/advert/agentSite";
+import GameSelect from "@/components/game-select/index.vue";
+import centerGameApi from "../../api/center/game";
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(["success"]);
 
 // 引用定义
-const formRef = ref()
-const mode = ref('')
-const visible = ref(false)
-const loading = ref(false)
-const siteIds = ref()
-const paramsFormRef = ref()
+const formRef = ref();
+const mode = ref("");
+const visible = ref(false);
+const loading = ref(false);
+const siteIds = ref();
+const paramsFormRef = ref();
 
-const mediaOptions = ref([])
+const mediaOptions = ref([]);
 
 const paramsData = reactive({
-  site_info: '',
-})
+  site_info: "",
+});
 
 let title = computed(() => {
-  return '联调'
-})
+  return "联调";
+});
 
 // 表单初始值
 const initialFormData = {
-  media_id: '',
-  game_id: '',
-  site_id: '',
-  site_name: '',
-  agent_id: '',
-}
+  media_id: "",
+  game_id: "",
+  site_id: "",
+  site_name: "",
+  agent_id: "",
+};
 
 // 表单信息
-const formData = reactive({ ...initialFormData })
+const formData = reactive({ ...initialFormData });
 
 // 验证规则
 const rules = {
-  media_id: [{ required: true, message: '推广媒体不能为空' }],
-  game_id: [{ required: true, message: '推送游戏不能为空' }],
-  site_id: [{ required: true, message: '广告位ID不能为空' }],
-}
+  media_id: [{ required: true, message: "推广媒体不能为空" }],
+  game_id: [{ required: true, message: "推送游戏不能为空" }],
+  site_id: [{ required: true, message: "广告位ID不能为空" }],
+};
 
 // 打开弹框
-const open = async (type = 'ks') => {
-  mode.value = type
+const open = async (type = "ks") => {
+  mode.value = type;
   // 重置表单数据
-  Object.assign(formData, initialFormData)
-  formRef.value.clearValidate()
-  formRef.value.resetFields()
-  paramsFormRef.value?.resetFields()
+  Object.assign(formData, initialFormData);
+  formRef.value.clearValidate();
+  formRef.value.resetFields();
+  paramsFormRef.value?.resetFields();
 
-  visible.value = true
-  await initPage()
-}
+  visible.value = true;
+  await initPage();
+};
 
 // 初始化页面数据
 const initPage = async () => {
-  await getMediaOptions()
-}
+  await getMediaOptions();
+};
 
 // 获取媒体列表Options
 const getMediaOptions = async () => {
-  const res = await commonApi.getMediaOptionsApi()
+  const res = await commonApi.getMediaOptionsApi();
   if (res.code == 200) {
-    mediaOptions.value = res.data
+    mediaOptions.value = res.data;
   }
-}
+};
 
 // 设置数据
 const setFormData = async (data) => {
-  formData.agent_id = data.agent_id
-  formData.site_name = data.name
-  formData.media_id = data.media_id
-  formData.site_id = data.id
-}
+  formData.agent_id = data.agent_id;
+  formData.site_name = data.name;
+  formData.media_id = data.media_id;
+  formData.site_id = data.id;
+};
 
 // 生成参数
 const generateParams = async () => {
-  const validate = await formRef.value?.validate()
+  const validate = await formRef.value?.validate();
   if (!validate) {
     // 提交生成监测链接
     const res = await agentSiteApi.linkDebugGenerateParamsApi({
@@ -158,20 +184,20 @@ const generateParams = async () => {
       agent_id: formData.agent_id,
       site_id: formData.site_id,
       media_id: formData.media_id,
-    })
+    });
     if (res.code == 200) {
       for (const key in res.data) {
         if (res.data[key] != null && res.data[key] != undefined) {
-          paramsData[key] = res.data[key]
+          paramsData[key] = res.data[key];
         }
       }
-      paramsFormRef.value?.setFields(paramsData)
+      paramsFormRef.value?.setFields(paramsData);
     }
   }
-}
+};
 
 // 关闭弹窗
-const close = () => (visible.value = false)
+const close = () => (visible.value = false);
 
-defineExpose({ open, setFormData })
+defineExpose({ open, setFormData });
 </script>

src/views/v1/center/game/index.vue

@@ -1,26 +1,49 @@
 <template>
   <div class="ma-content-block">
-    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
+    <sa-table
+      ref="crudRef"
+      :options="options"
+      :columns="columns"
+      :searchForm="searchForm"
+    >
       <!-- 搜索区 tableSearch -->
       <template #tableSearch>
         <a-col :sm="6" :xs="24">
           <a-form-item label="主包" field="main_id">
-            <a-select v-model="searchForm.main_id" :options="mainGameOptions" placeholder="请选择主包" allow-clear />
+            <a-select
+              v-model="searchForm.main_id"
+              :options="mainGameOptions"
+              placeholder="请选择主包"
+              allow-clear
+            />
           </a-form-item>
         </a-col>
         <a-col :sm="6" :xs="24">
           <a-form-item label="游戏名称" field="name">
-            <a-input v-model="searchForm.name" placeholder="请输入游戏名称" allow-clear />
+            <a-input
+              v-model="searchForm.name"
+              placeholder="请输入游戏名称"
+              allow-clear
+            />
           </a-form-item>
         </a-col>
         <a-col :sm="6" :xs="24">
           <a-form-item label="平台" field="os">
-            <sa-select v-model="searchForm.os" dict="os" placeholder="请选择平台" allow-clear />
+            <sa-select
+              v-model="searchForm.os"
+              dict="os"
+              placeholder="请选择平台"
+              allow-clear
+            />
           </a-form-item>
         </a-col>
         <a-col :sm="6" :xs="24">
           <a-form-item label="状态" field="status">
-            <sa-select v-model="searchForm.status" dict="data_status" placeholder="请选择状态" />
+            <sa-select
+              v-model="searchForm.status"
+              dict="data_status"
+              placeholder="请选择状态"
+            />
           </a-form-item>
         </a-col>
       </template>
@@ -28,11 +51,13 @@
       <!-- Table 自定义渲染 -->
       <template #status="{ record }">
         <a-tag :color="record.status === 1 ? 'green' : 'red'">
-          {{ record.status === 1 ? '正常' : '停用' }}
+          {{ record.status === 1 ? "正常" : "停用" }}
         </a-tag>
       </template>
       <template #operationBeforeExtend="{ record }">
-        <a-button type="text" @click="checkCpInfo(record)"><icon-thunderbolt /> cp对接信息</a-button>
+        <a-button type="text" @click="checkCpInfo(record)"
+          ><icon-thunderbolt /> cp对接信息</a-button
+        >
       </template>
     </sa-table>
 
@@ -44,110 +69,110 @@
 </template>
 
 <script setup>
-import { onMounted, ref, reactive } from 'vue'
-import { Message } from '@arco-design/web-vue'
-import EditForm from './edit.vue'
-import CpInfo from './cp-info.vue'
-import api from '../../api/center/game'
-import apiCommon from '../../api/center/common'
+import { onMounted, ref, reactive } from "vue";
+import { Message } from "@arco-design/web-vue";
+import EditForm from "./edit.vue";
+import CpInfo from "./cp-info.vue";
+import api from "../../api/center/game";
+import apiCommon from "../../api/center/common";
 
 // 引用定义
-const crudRef = ref()
-const editRef = ref()
-const cpInfoRef = ref()
-const mainGameOptions = ref([])
+const crudRef = ref();
+const editRef = ref();
+const cpInfoRef = ref();
+const mainGameOptions = ref([]);
 
 // 搜索表单
 const searchForm = ref({
-  id: '',
-  main_id: '',
-  name: '',
-  os: '',
+  id: "",
+  main_id: "",
+  name: "",
+  os: "",
   status: 1,
-})
+});
 
 // SaTable 基础配置
 const options = reactive({
   api: api.getPageList,
-  operationColumnWidth: 280,
+  operationColumnWidth: 200,
   add: {
     show: true,
-    auth: ['/v1/center/Game/save'],
+    auth: ["/v1/center/Game/save"],
     func: async () => {
-      editRef.value?.open()
+      editRef.value?.open();
     },
   },
   edit: {
     show: true,
-    auth: ['/v1/center/Game/update'],
+    auth: ["/v1/center/Game/update"],
     func: async (record) => {
-      console.log(record)
-      editRef.value?.open('edit')
-      editRef.value?.setFormData(record)
+      console.log(record);
+      editRef.value?.open("edit");
+      editRef.value?.setFormData(record);
     },
   },
   delete: {
     show: false,
-    auth: ['/v1/center/Game/destroy'],
+    auth: ["/v1/center/Game/destroy"],
     func: async (params) => {
-      const resp = await api.destroy(params)
+      const resp = await api.destroy(params);
       if (resp.code === 200) {
-        Message.success(`删除成功！`)
-        crudRef.value?.refresh()
+        Message.success(`删除成功！`);
+        crudRef.value?.refresh();
       }
     },
   },
-})
+});
 
 // SaTable 列配置
 const columns = reactive([
-  { title: '游戏ID', dataIndex: 'id', width: 60 },
-  { title: '游戏名称', dataIndex: 'name', width: 130 },
+  { title: "游戏ID", dataIndex: "id", width: 60 },
+  { title: "游戏名称", dataIndex: "name", width: 130 },
   // { title: "产品归属", dataIndex: "main_game_name", width: 130 },
-  { title: '包名', dataIndex: 'package_name', width: 130 },
+  { title: "包名", dataIndex: "package_name", width: 130 },
   {
-    title: '平台',
-    dataIndex: 'os',
-    type: 'dict',
-    dict: 'os',
+    title: "平台",
+    dataIndex: "os",
+    type: "dict",
+    dict: "os",
     width: 120,
   },
 
-  { title: '状态', dataIndex: 'status', width: 80 },
+  { title: "状态", dataIndex: "status", width: 80 },
   {
-    title: '实名',
-    dataIndex: 'realname_switch',
+    title: "实名",
+    dataIndex: "realname_switch",
     width: 80,
-    type: 'dict',
-    dict: 'realname_switch',
+    type: "dict",
+    dict: "realname_switch",
   },
-  { title: '充值回调地址', dataIndex: 'cp_callback_url', width: 180 },
-  { title: '分成比例', dataIndex: 'divide', width: 120 },
+  { title: "充值回调地址", dataIndex: "cp_callback_url", width: 180 },
+  { title: "分成比例", dataIndex: "divide", width: 120 },
   // { title: "创建时间", dataIndex: "create_time", width: 180 },
-  { title: '修改时间', dataIndex: 'update_time', width: 180 },
-])
+  { title: "修改时间", dataIndex: "update_time", width: 180 },
+]);
 
 // 页面数据初始化
 const initPage = async () => {
-  await getMainGameOptions()
-}
+  await getMainGameOptions();
+};
 
 // 获取主包下拉数据
 const getMainGameOptions = async () => {
-  const { code, data } = await apiCommon.getMainGameOptionsApi()
+  const { code, data } = await apiCommon.getMainGameOptionsApi();
   if (code === 200) {
-    mainGameOptions.value = data
+    mainGameOptions.value = data;
   }
-}
+};
 
 // SaTable 数据请求
 const refresh = async () => {
-  crudRef.value?.refresh()
-}
+  crudRef.value?.refresh();
+};
 
 // 查看CP对接信息
 const checkCpInfo = async (record) => {
-  let { appkey, login_key, pay_key, name, id, os } = record
+  let { appkey, login_key, pay_key, name, id, os } = record;
   let cp_info = {
     name: name,
     game_id: id,
@@ -156,18 +181,18 @@ const checkCpInfo = async (record) => {
     pay_key: pay_key,
     os: os,
     channel_h5_url: `https://pf.game.com/game/login?appid=${id}`,
-  }
-  cpInfoRef.value?.open()
-  cpInfoRef.value?.setFormData(cp_info)
-}
+  };
+  cpInfoRef.value?.open();
+  cpInfoRef.value?.setFormData(cp_info);
+};
 
 // 页面加载完成执行
 onMounted(async () => {
-  initPage()
-  refresh()
-})
+  initPage();
+  refresh();
+});
 </script>
 
 <script>
-export default { name: 'v1/center/game' }
+export default { name: "v1/center/game" };
 </script>