LocalLivingServicesVueChannel/src/views/channel/baseRightsConfig/baseRightsConfigList.vue

<!-- 模板区域 -->
<template>
  <div>
    <!--定义表格-->
    <BasicTable @register="registerTable">
      <!-- 表格顶部左侧操作 -->
      <template #tableTitle>
        <a-button type="primary" @click="channelConfigAdd" preIcon="ant-design:plus-outlined">创建渠道</a-button>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="dropDownAction(record)" />
      </template>
    </BasicTable>
    <a-modal v-model:open="keyInfoShow" title="关键信息" width="700px" :footer="null" :bodyStyle="{ padding: '16px' }">
      <div class=" keyInfo">
        <div class="dis ">
          <span class="label">AppID：</span>
          <span class="value">{{ keyInfoData.appId }}</span>
          <a-button type="link" ></a-button>
        </div>
        <div class="dis ">
          <span class="label">AppSecret：</span>
          <span class="value ">{{ keyInfoData.appSecret }}</span>
          <a-button type="link" @click="regenerate">重新生成</a-button>
        </div>
        <div class="dis ">
          <span class="label">AppKey：</span>
          <span class="value">{{ keyInfoData.appKey }}</span>
          <a-button type="link" @click="copyClick">复制</a-button>
        </div>
        <div class="dis ">
          <span class="label">权益发放H5链接：</span>
          <span class="value">{{ keyInfoData.rightsDistributionUrl }}</span>
          <a-button type="link" @click="copyClick">复制</a-button>
        </div>
        <div class="dis ">
          <span class="label">订单H5链接：</span>
          <span class="value">{{ keyInfoData.orderUrl }}</span>
          <a-button type="link" @click="copyClick">复制</a-button>
        </div>
        <div class="dis ">
          <span class="label">我的券包H5链接：</span>
          <span class="value">{{ keyInfoData.rollPackUrl }}</span>
          <a-button type="link" @click="copyClick">复制</a-button>
        </div>
        <div class="dis ">
          <span class="label">权益兑换H5链接：</span>
          <span class="value">{{ keyInfoData.rightsRedemptionUrl }}</span>
          <a-button type="link" @click="copyClick">复制</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<!-- 行为区域 -->
<script lang="ts" name="basic-table-demo" setup>
import { ActionItem, BasicColumn, BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { FormSchema } from '/@/components/Table';
import { reactive, ref } from 'vue';
import type { UnwrapRef } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import * as channelAPI from '/@/api/channel/businessConfig';
import { message, Modal } from 'ant-design-vue';
import { useRouter, useRoute } from 'vue-router';
//表单配置
const router = useRouter();
const formRef = ref();
const channelId = ref(null);//渠道id
const keyInfoShow = ref(false);//关键信息弹窗
const keyInfoData = ref<ActionItem>({});//关键信息数据
const channelConfigForm = reactive({
  id: null,
  pricingName: '',//计费模式名称
  pricingCode: "",//计费模式编码
  pricingUnit: "",//计费单位
  minPrice: "",//最低起投金额
  pricingDesc: "",//描述
});

const rules: Record<string, Rule[]> = {
  pricingName: [
    { required: true, message: '名称必填', trigger: 'blur' },
  ],
  pricingCode: [
    { required: true, message: '编码必填', trigger: 'blur' },
  ],
  pricingUnit: [
    { required: true, message: '必选', trigger: 'change' },
  ],
  minPrice: [
    { required: true, message: '起投金额必填', trigger: 'blur' },
  ],
};

//定义表格列字段
const columns: BasicColumn[] = [
  {
    title: '渠道机构',
    dataIndex: 'institutionName',
    key: 'institutionName',
    width: 200,
  },
  {
    title: '权益发放场景',
    dataIndex: 'issueConnectionMethod',
    key: 'issueConnectionMethod',
    customRender: ({ record }) => {
      if (record.issueConnectionMethod == 1) {
        return 'H5'
      } else {
        return 'api'
      }
    },
  },
  {
    title: '消费者场景',
    dataIndex: 'consumerConnectionMethod',
    key: 'consumerConnectionMethod',
    customRender: ({ record }) => {
      if (record.issueConnectionMethod == 1) {
        return 'H5'
      } else if (record.consumerConnectionMethod == 2) {
        return 'api'
      } else {
        return '原生'
      }
    },
  },
  {
    title: '渠道归属',
    dataIndex: 'channelName',
    key: 'channelName',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    customRender: ({ record }) => {
      if (record.status == 1) {
        return '启用'
      } else if (record.status == 0) {
        return '禁用'
      } else {
        return '-'
      }
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '联系人姓名',
    dataIndex: 'contact',
    key: 'contact',
  },
  {
    title: '联系人手机号',
    dataIndex: 'contactPhone',
    key: 'contactPhone',
  },
];
const searchFormSchema: FormSchema[] = [
  {
    label: '渠道名称',
    field: 'pricingName',
    component: 'Input',
    colProps: {
      span: 6,
    },
  },
  {
    label: '渠道所属',
    field: 'pricingName',
    component: 'Input',
    colProps: {
      span: 6,
    },
  },
  {
    label: '状态',
    field: 'status',
    component: 'Select',
    colProps: {
      span: 6,
    },
    componentProps: {
      options: [
        { label: "全部", value: null },
        { label: "启用", value: 1 },
        { label: "禁用", value: 0 },
      ]
    }
  },
  {
    label: '日期范围',
    field: 'dateRangeSelect',
    component: 'RangeDate',
    colProps: {
      span: 6,
    },
    componentProps: {
      format: 'YYYY-MM-DD',
      placeholder: ['请选择开始日期', '请选择结束日期']
    },
  },
  {
    label: '联系人',
    field: 'pricingName',
    component: 'Input',
    colProps: {
      span: 6,
    },
  },
];
/** useListPage 是整个框架的核心用于表格渲染，里边封装了很多公共方法；
 * 平台通过此封装，简化了代码，支持自定义扩展*/
// 通过hook useListPage渲染表格（设置dataSource、columns、actionColumn等参数）
const { tableContext } = useListPage({
  designScope: 'basic-table-demo',
  tableProps: {
    title: '用户列表',
    dataSource: [],
    columns: columns,
    formConfig: {
      schemas: searchFormSchema,
      showAdvancedButton: false,
      // 将表单内时间区域的值映射成 2个字段, 分别是 joinTime_begin 和 joinTime_end
      fieldMapToTime: [['dateRangeSelect', ['startDate', 'endDate'], 'YYYY-MM-DD']],
    },
    api: channelAPI.supplierConfigPageList,
    size: 'small',
    actionColumn: {
      width: 200,
      fixed: 'right'

    },
  },
});
// BasicTable绑定注册
const [registerTable, { reload }] = tableContext;
/**
 * 操作栏
 */
function getTableAction(record: ActionItem): ActionItem[] {
  return [
    {
      label: '编辑',
      onClick: channelConfigEdit.bind(null, record),
    },

  ];
}
/**
 * 下拉操作栏
 * @param record 行数据
 */
function dropDownAction(record: ActionItem): ActionItem[] {
  return [
    {
      label: '启用',
      onClick: channelConfigDisable.bind(null, record),
      disabled: record.status == 1,
    },
    {
      label: '禁用',
      onClick: channelConfigDisable.bind(null, record),
      disabled: record.status == 0,
    },
    {
      label: '删除',
      onClick: channelConfigDel.bind(null, record),
    },
    {
      label: '关键信息',
      onClick: getKeyInfo.bind(null, record),
    },
  ];
}
// 新增渠道 - 带参数在新标签页中打开
const channelConfigAdd = () => {
  // 定义要传递的参数
  // 使用 router.resolve() 解析路由和参数
  const routeInfo = router.resolve({
    path: "/channel/baseRightsConfig/baseRightsConfigAdd",
  });
  // 构建完整的 URL
  const fullUrl = `${window.location.origin}${routeInfo.href}`;
  // 在新标签页中打开
  window.open(fullUrl, '_blank');
}
// 关键信息弹窗
const getKeyInfo = (record: ActionItem) => {
  channelId.value = record.id;
  // 查询关键信息
  channelAPI.channelKeyInfo(record.id).then((res) => {
    if (res.code == 200) {
      keyInfoData.value = res.result;
      keyInfoShow.value = true;
    } else {
      message.error(res.message);
    }
  })
}
/**
 * 启用禁用
 * @param record 行数据
 */
function channelConfigDisable(record: ActionItem) {
  if (record.status == 0) {
    channelAPI.supplierConfigEnable({ id: record.id, status: '1' }).then((res) => {
      if (res.code == 200) {
        reload();
      } else {
        message.error(res.message);
      }
    })
  } else {
    Modal.confirm({
      title: '禁用渠道业务',
      content: '确定要禁用该渠道业务吗，禁用后，该渠道的发放权益和消费者场景将全部关闭为不可用？',
      okText: '确定禁用',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        channelAPI.supplierConfigEnable({ id: record.id, status: '0' }).then((res) => {
          if (res.code == 200) {
            reload();
          } else {
            message.error(res.message);
          }
        })
      },
      onCancel() {
      },
    });
  }
}
/**
 * 广告位编辑
 * @param record
 */
function channelConfigEdit(record: ActionItem) {
  const routeInfo = router.resolve({
    path: "/channel/baseRightsConfig/baseRightsConfigAdd",
    query: {id: record.id}
  });
  // 构建完整的 URL
  const fullUrl = `${window.location.origin}${routeInfo.href}`;
  // 在新标签页中打开
  window.open(fullUrl, '_blank');
}
// 删除
const channelConfigDel = (record: ActionItem) => {
  Modal.confirm({
    title: '删除',
    content: '确定要删除该渠道的业务吗？',
    okText: '确定删除',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      channelAPI.supplierConfigDel(record.id).then((res) => {
        if (res.code == 200) {
          message.success(res.message);
          reload();
        } else {
          message.error(res.message);
        }
      })
    },
    onCancel() {
    },
  });
}

// 文本复制
function copyClick(value) {
  // 创建input元素
  const el = document.createElement('input');
  // 给input元素赋值需要复制的文本
  el.setAttribute('value', value);
  // 将input元素插入页面
  document.body.appendChild(el);
  // 选中input元素的文本
  el.select();
  // 复制内容到剪贴板
  document.execCommand('copy');
  // 删除input元素
  document.body.removeChild(el);
  message.success('复制成功');
};
const regenerate = () => {
  channelAPI.regenerateAppId(channelId.value).then((res) => {
    if (res.code == 200) {
      message.success('已生成');
      channelAPI.channelKeyInfo(channelId.value).then((res) => {
        if (res.code == 200) {
          keyInfoData.value = res.result;
        } else {
          message.error(res.message);
        }
      })
    } else {
      message.error(res.message);
    }
  })
}

</script>
<!-- 样式区域 -->
<style lang='less' scoped>
::v-deep(.jeecg-basic-table .ant-table-wrapper) {
  padding: 20px;
  height: calc(100% - 10px);
}

::v-deep(.ant-col) {
  width: auto;
}

.keyInfo {
  width: 100%;

  .label {
    width: 150px;
  }

  .value {
    display: flex;
    align-items: center;
    flex: 1;
  }
}
</style>