渠道

src/api/modules/capital/withdrawChanl.ts

@@ -0,0 +1,23 @@
+import { request } from '@/api'
+
+// 获取取款渠道列表
+export const getChannelWithdrawList = () => {
+  return request.get('/channel/getChannelWithdrawList')
+}
+// 创建取款渠道
+export const createChannelWithdraw = (params: any) => {
+  return request.post('/channel/createChannelWithdraw', { ...params })
+}
+// 编辑取款渠道
+export const editChannelWithdraw = (params: any) => {
+  return request.post('/channel/editChannelWithdraw', { ...params })
+}
+// 删除取款渠道
+export const delChannelWithdraw = (params: any) => {
+  return request.post('/channel/delChannelWithdraw', { ...params })
+}
+
+// 获取货币列表(用于下拉框)
+export const getChannelList = () => {
+  return request.get('/currency/getCurrencyList')
+}

src/views/capital/withdrawChanl/index.vue

@@ -1,13 +1,191 @@
-<script setup lang="ts">
-
-defineOptions({
-  name: 'WithdrawChanl'
-})</script>
-
 <template>
-  <div class="  table_form-container">
-    <h1>取款渠道</h1>
+  <div class="withdraw-channel">
+    <div class="bar">
+      <el-button type="primary" @click="handleAdd" v-auth="'channel_createChannel'">添加</el-button>
+      <el-button type="primary" @click="handleEdit" v-auth="'channel_editChannel'">编辑</el-button>
+      <el-button type="danger" @click="handleDelete" v-auth="'channel_delChannel'">删除</el-button>
+    </div>
+    <Table
+      ref="tableRef"
+      :table-data="tableData"
+      :columns="tableColumnsOptions"
+      row-key="id"
+      @rowClick="handleRowClick"
+    />
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitleType === 1 ? '添加取款渠道' : '编辑取款渠道'"
+      width="700"
+    >
+      <Form
+        :formItems="formItems"
+        :formRules="formRules"
+        :formData="formData"
+        :optionsMap="optionsMap"
+      />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitDetail">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
+<script setup lang="ts">
+defineOptions({
+  name: 'WithdrawChanl'
+})
+//组件
+import Table from '@/components/common/Table.vue'
+import Form from '@/components/common/Form.vue'
+import { tableColumns, formItemsData, formRulesData, optionsMapData } from './options'
+import {
+  getChannelWithdrawList,
+  createChannelWithdraw,
+  editChannelWithdraw,
+  delChannelWithdraw,
+  getChannelList,
+} from '@/api/modules/capital/withdrawChanl'
+import { ElMessageBox } from 'element-plus'
 
-<style scoped lang="scss"></style>
+type ChannelType = {
+  id?: number
+  name: string
+  channel_fee: number | null
+  currency_id: number | null
+  api_url: string
+  api_appid: string
+  api_key: string
+  status: number
+  channel_code: string
+}
+
+const getStatusText = (status: number | string) => {
+  return ['', '正常', '禁用'][status]
+}
+
+const initData = async () => {
+  const res = await getChannelWithdrawList()
+  console.log(res)
+  tableData.value = res.map((item: ChannelType) => ({
+    ...item,
+    statusStr: getStatusText(item.status),
+  })) as ChannelType[]
+  clearSelection()
+}
+
+//表格数据
+const tableColumnsOptions = ref(tableColumns)
+const tableData = ref([])
+const tableRef = ref()
+
+const dialogVisible = ref(false)
+const dialogTitleType = ref(1)
+const formData = ref({
+  name: '',
+  channel_fee: null,
+  currency_id: null,
+  api_url: '',
+  api_appid: '',
+  api_key: '',
+  channel_code: '',
+  status: 1,
+})
+const formItems = ref(formItemsData)
+const formRules = ref(formRulesData)
+const optionsMap = ref(optionsMapData)
+const submitDetail = async () => {
+  dialogVisible.value = false
+  if (dialogTitleType.value === 1) {
+    await createChannelWithdraw(formData.value)
+  } else {
+    await editChannelWithdraw(formData.value)
+  }
+  await initData()
+}
+
+let currentRow: any = {}
+
+const handleRowClick = (row: any) => {
+  console.log('handleRowClick', row)
+  currentRow = row
+}
+
+const resetFormData = () => {
+  formData.value = {
+    name: '',
+    channel_fee: null,
+    currency_id: null,
+    api_url: '',
+    api_appid: '',
+    api_key: '',
+    channel_code: '',
+    status: 1,
+  }
+}
+
+const handleAdd = () => {
+  dialogVisible.value = true
+  dialogTitleType.value = 1
+  resetFormData()
+}
+
+const handleEdit = () => {
+  if (!currentRow.id) return ElMessage.warning('请先选择要编辑的记录')
+
+  dialogVisible.value = true
+  dialogTitleType.value = 2
+  formData.value = currentRow
+}
+
+const handleDelete = () => {
+  console.log('handleDisable')
+  if (!currentRow.id) return ElMessage.warning('请先选择要删除的记录')
+  ElMessageBox.confirm('确认删除吗？', '提示', {
+    type: 'warning',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  })
+    .then(async () => {
+      await delChannelWithdraw({ id: currentRow.id })
+      await initData()
+    })
+    .catch(() => {
+      console.log('取消删除')
+    })
+}
+
+const clearSelection = () => {
+  currentRow = {}
+  nextTick(() => {
+    tableRef.value?.clearCurrentRow()
+  })
+}
+
+onMounted(() => {
+  initData()
+  // 获取货币列表用于下拉框
+  getChannelList().then((data) => {
+    console.log(data)
+    optionsMap.value.currency_id = (data || []).map((item: any) => ({
+      value: item.id,
+      label: item.name,
+    }))
+    console.log('optionsMap.value:', optionsMap.value);
+  })
+})
+</script>
+<style scoped>
+.withdraw-channel {
+  .bar {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+
+    span {
+      margin-right: 10px;
+    }
+  }
+}
+</style>

src/views/capital/withdrawChanl/options.ts

@@ -0,0 +1,58 @@
+export const tableColumns = [
+  //序号
+  { label: '序号', type: 'index', width: 60, align: 'center' },
+  //渠道名称
+  { label: '渠道名称', prop: 'name' },
+  //渠道费用
+  { label: '渠道费用', prop: 'channel_fee' },
+  //货币类型
+  // { label: '入金货币', prop: 'currency.name' },
+  // 接口地址
+  { label: '接口地址', prop: 'api_url' },
+  // 接口appid
+  { label: '接口appid', prop: 'api_appid' },
+  { label: '状态', prop: 'statusStr' },
+]
+
+export const formItemsData = [
+  { label: '渠道名称', prop: 'name', type: 'input', placeholder: '请输入渠道名称' },
+  {
+    label: '渠道费用',
+    prop: 'channel_fee',
+    type: 'number',
+    min: 0,
+    max: 999999,
+    controls: false,
+    placeholder: '请输入渠道费用',
+  },
+  {
+    label: '入金货币',
+    prop: 'currency_id',
+    type: 'select',
+    placeholder: '请选择入金货币',
+  },
+  { label: '接口地址', prop: 'api_url', type: 'input', placeholder: '请输入接口地址' },
+  { label: '接口appid', prop: 'api_appid', type: 'input', placeholder: '请输入接口appid' },
+  { label: '接口密钥', prop: 'api_key', type: 'input', placeholder: '请输入接口密钥' },
+  { label: '渠道码', prop: 'channel_code', type: 'input', placeholder: '请输入渠道码' },
+  { label: '状态', prop: 'status', type: 'radio' },
+]
+
+export const formRulesData = {
+  name: [{ required: true, message: '请输入渠道名称', trigger: ['change'] }],
+  channel_fee: [{ required: true, message: '请输入渠道费用', trigger: ['change'] }],
+  currency_id: [{ required: true, message: '请选择入金货币', trigger: ['change'] }],
+  api_url: [{ required: true, message: '请输入接口地址', trigger: ['change'] }],
+  api_appid: [{ required: true, message: '请输入接口appid', trigger: ['change'] }],
+  api_key: [{ required: true, message: '请输入接口密钥', trigger: ['change'] }],
+  channel_code: [{ required: true, message: '请输入渠道码', trigger: ['change'] }],
+  status: [{ required: true, message: '请选择状态', trigger: ['change'] }],
+}
+
+export const optionsMapData = {
+  currency_id: [],
+  status: [
+    { label: '正常', value: 1 },
+    { label: '禁用', value: 2 },
+  ],
+}