小程序管理等

src/api/common/index.ts

@@ -0,0 +1,7 @@
+import http from '@/api/http';
+/**
+ * 公共参数
+ */
+export function optionsCommonParams(params?: object) {
+  return http.get('/options/CommonParams', params);
+}

src/api/iPayment/index.ts

@@ -0,0 +1,21 @@
+import http from '@/api/http';
+/**
+ * 支付配置-列表
+ */
+export function managePayConfigList(params: object) {
+  return http.get('/manage/payConfig/list', params);
+}
+
+/**
+ * 支付配置-修改备注
+ */
+export function managePayConfigRemark(params: object) {
+  return http.post('/manage/payConfig/remark', params);
+}
+/**
+ * 支付配置-添加
+ */
+export function managePayConfigAddConfig(params: object) {
+  return http.post('/manage/payConfig/addConfig', params);
+}
+

src/layout/components/header/index.vue

@@ -25,7 +25,7 @@
       </div>
 
       <div class="flex w-52 sm:min-w-[18rem] flex-row item-center pl-1 sm:pl-0 justify-end sm:justify-between mr-4">
-        <div class="hidden w-3/5 sm:flex">
+        <div class="justify-end hidden w-3/5 sm:flex">
 
           <!-- 菜单切换 -->
           <!-- <MenuSelect /> -->

src/layout/components/header/profile.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex w-2/5 pl-1 pr-1 hover:cursor-pointer">
     <el-dropdown size="large" placement="bottom-end" class="flex items-center justify-center w-full hover:cursor-pointer">
-      <div class="flex lg:items-center">
+      <div class="flex w-fit lg:items-center">
         <div class="rounded-full w-7 h-7"></div>
         <!-- <img :src="userStore.getAvatar" class="rounded-full w-7 h-7" /> -->
         <div class="hidden ml-2 lg:block">{{ userStore.getNickname }}</div>

src/views/appletManage/iPayment/form/create.vue

@@ -0,0 +1,172 @@
+<template>
+  <el-form :model="formData" label-width="120px" ref="ruleForm" :rules="rules" v-loading="loading" class="pr-4">
+    <div class="flex flex-row justify-between">
+      <div class="w-full">
+        <el-form-item label="支付名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入支付名称" />
+        </el-form-item>
+        <el-form-item label="收款主体" prop="payee_name">
+          <el-input v-model="formData.payee_name" placeholder="请输入收款主体" />
+        </el-form-item>
+        <el-form-item label="支付商户号" prop="pay_appid">
+          <el-input v-model.number="formData.pay_appid" clearable placeholder="请输入支付商户号" />
+        </el-form-item>
+        <el-form-item label="支付方式" prop="pay_type">
+          <el-select class="w-full" v-model="formData.pay_type" clearable filterable placeholder="请选择支付方式">
+            <el-option v-for="(item, index) in paymentList" :key="index" :label="item.val" :value="item.key" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="小程序类型" prop="miniprogram_type">
+          <el-select class="w-full" v-model="formData.miniprogram_type" clearable filterable placeholder="请选择小程序类型">
+            <el-option v-for="(item, index) in appletType" :key="index" :label="item.val" :value="item.key" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" clearable type="textarea" autosize rows="5" placeholder="请输入备注" />
+        </el-form-item>
+        <el-form-item label="公用支付参数" prop="pay_common_params">
+          <div class="w-full mb-3" v-for="(item, index) in payCommonParamsList" :key="index">
+            <el-input style="width:40%;margin-right:6px;" v-model="item.params" clearable placeholder="请输入参数名称" />
+            <el-input style="width:40%;margin-right:6px;" v-model="item.value" clearable placeholder="请输入参数值" />
+            <el-button type="primary" @click="addParams" :icon="Plus" circle />
+            <el-button type="primary" @click="removeParams(index)" :disabled="payCommonParamsList.length == 1"
+              :icon="Minus" circle />
+          </div>
+        </el-form-item>
+      </div>
+    </div>
+    <div class="flex justify-end">
+      <el-button type="primary" @click="submitForm(ruleForm)">{{ $t('system.confirm') }}</el-button>
+    </div>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import {
+  Plus,
+  Minus
+} from '@element-plus/icons-vue';
+import type { FormInstance, FormRules } from 'element-plus'
+import { managePayConfigAddConfig } from '@/api/iPayment/index'
+import { optionsCommonParams } from '@/api/common/index'
+const ruleForm = ref<FormInstance>()
+import { onMounted, ref } from 'vue';
+const props = defineProps({
+  primary: Object | null,
+});
+const formData = ref({})
+const rules = reactive({
+  pay_type: [{ required: true, message: '请选择支付方式' }],
+  miniprogram_type: [{ required: true, message: '请选择小程序类型' }],
+  pay_common_params: [
+    {
+      required: false,
+      message: '请输入公用支付参数',
+      trigger: 'blur'
+    }
+  ],
+  remark: [
+    {
+      required: false,
+      message: '请输入备注',
+      trigger: 'blur'
+    }
+  ],
+  name: [
+    {
+      required: true,
+      message: '请输入支付名称',
+      trigger: 'blur'
+    }
+  ],
+  payee_name: [
+    {
+      required: true,
+      message: '请输入收款主体',
+      trigger: 'blur'
+    }
+  ],
+  pay_appid: [
+    {
+      required: true,
+      message: '请输入支付商户号',
+      trigger: 'blur'
+    },
+    { pattern: /^[1-9]\d*$/, message: '只能输正整数', trigger: 'blur' }
+  ]
+});
+const loading = ref(false)
+const appletType = ref([])
+const paymentList = ref([])
+const payCommonParamsList = ref([{ params: '', value: '' }])
+const addParams = () => {
+  if (validateInput()) {
+    payCommonParamsList.value.push({ params: '', value: '' })
+  }
+}
+const removeParams = (idx: number) => {
+  payCommonParamsList.value.splice(idx, 1);
+}
+
+const validateInput = () => {
+  for (const item of payCommonParamsList.value) {
+    if (!item.params || !item.value) {
+      ElMessage.warning('请输入完整公用支付参数的键值对')
+      return false;
+    }
+    if (checkDuplicate(item)) {
+      ElMessage.warning(`键 ${item.params} 已存在，请输入一个唯一的键`)
+      return false;
+    }
+  }
+  return true;
+};
+
+const checkDuplicate = (item) => {
+  const count = payCommonParamsList.value.filter(
+    (i) => i.params === item.params
+  ).length;
+  return count > 1;
+};
+
+const initType = () => {
+  optionsCommonParams().then(res => {
+    appletType.value = res.data.miniprogramType
+    paymentList.value = res.data.payType
+  })
+}
+const submitForm = (formEl: FormInstance | undefined) => {
+  console.log(payCommonParamsList.value, 'test.value,test.value,');
+  let pay_common_params = {}
+  for (let item of payCommonParamsList.value) {
+    pay_common_params[item.params] = item.value
+    console.log(item);
+  }
+  if (!validateInput()) return
+  formData.value.pay_common_params = pay_common_params
+  console.log(pay_common_params, 'objobj');
+  if (!formEl) return;
+  formEl
+    .validate(valid => {
+      if (valid) {
+        managePayConfigAddConfig(formData.value).then(res => {
+          ElMessage.success(res.message)
+          loading.value = false;
+          emit('close')
+        })
+      } else {
+        loading.value = false;
+      }
+    })
+    .then(() => { });
+}
+
+if (props.primary) {
+
+}
+
+const emit = defineEmits(['close']);
+onMounted(() => {
+  initType()
+});
+</script>

src/views/appletManage/iPayment/form/note.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-form :model="form" label-width="130px" ref="ruleForm" :rules="rules" v-loading="loading" class="pr-4">
+    <div class="flex flex-row justify-between">
+      <div class="w-full">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请填写备注" :rows="5" type="textarea" />
+        </el-form-item>
+      </div>
+    </div>
+    <div class="flex justify-end">
+      <el-button type="primary" size="default" @click="doSave(ruleForm)">确定</el-button>
+    </div>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { managePayConfigRemark } from '@/api/iPayment/index'
+const props = defineProps({
+  primary: Object | null,
+});
+const ruleForm = ref<FormInstance>()
+const loading = ref(false)
+const rules = reactive({
+  remark: [
+    {
+      required: false,
+      message: '请输入备注',
+      trigger: 'blur'
+    }
+  ],
+});
+const form = ref({})
+const emit = defineEmits(['close']);
+const doSave = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl
+    .validate(valid => {
+      if (valid) {
+        managePayConfigRemark(form.value).then(res => {
+          ElMessage.success(res.message)
+          loading.value = false;
+          emit('close')
+        })
+      } else {
+        loading.value = false;
+      }
+    })
+    .then(() => { });
+}
+
+if (props.primary) {
+  form.value.remark = props.primary.remark
+  form.value.id = props.primary.id
+}
+
+
+onMounted(() => {
+
+})
+
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.el-input__wrapper) {
+  display: flex;
+  width: 180px;
+  flex: none;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+</style>

src/views/appletManage/iPayment/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="flex flex-col justify-between w-full sm:flex-row">
+    <div class="w-full">
+      <Search :search="search" :reset="reset">
+        <template v-slot:body>
+          <el-form-item label="支付名称">
+            <el-input v-model="query.name" placeholder="请输入支付名称" clearable />
+          </el-form-item>
+          <el-form-item label="支付商户号">
+            <el-input v-model="query.pay_appid" placeholder="请输入支付商户号" clearable />
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="query.remark" placeholder="请输入备注" clearable />
+          </el-form-item>
+          <el-form-item label="支付方式">
+            <el-select v-model="query.pay_type" clearable filterable placeholder="请选择支付方式">
+              <el-option v-for="(item, index) in paymentList" :key="index" :label="item.val" :value="item.key" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="小程序类型">
+            <el-select v-model="query.miniprogram_type" clearable filterable placeholder="请选择小程序类型">
+              <el-option v-for="(item, index) in miniprogramTypelist" :key="index" :label="item.val" :value="item.key" />
+            </el-select>
+          </el-form-item>
+        </template>
+      </Search>
+      <div class="table-default">
+        <Add v-action="'manage.PayConfig.addConfig'" class="mt-5 ml-2" @click="openType('createVisible', null)" />
+        <el-table :data="tableData" class="mt-3" v-loading="loading">
+          <el-table-column prop="id" label="ID" />
+          <el-table-column prop="name" label="支付名称" />
+          <el-table-column prop="pay_type_str" label="支付方式" />
+          <el-table-column prop="payee_name" label="收款主体" />
+          <el-table-column prop="pay_appid" label="支付商户号" />
+          <el-table-column prop="miniprogram_type_str" label="小程序类型" />
+          <el-table-column prop="pay_common_params" label="公用支付参数">
+            <!-- <template #default="scope">
+              <el-input type="textarea" v-model="scope.row.pay_common_params" :rows="6" autosize disabled></el-input>
+            </template> -->
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" />
+          <el-table-column label="操作" width="200">
+            <template #default="scope">
+              <el-button link type="primary" size="small" @click="openType('noteVisible', scope.row)"
+                v-action="'manage.PayConfig.remark'">备注</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Paginate />
+      </div>
+      <Dialog width="800px" v-model="noteVisible" title="备注" destroy-on-close>
+        <note @close="closeType('noteVisible')" :primary="noteData"></note>
+      </Dialog>
+
+      <Dialog v-model="createVisible" title="新增" destroy-on-close>
+        <Create @close="closeType('createVisible')" :primary="createData" />
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import Create from './form/create.vue';
+import note from './form/note.vue';
+import { useGetList } from '@/hook/curd/useGetList';
+import { optionsCommonParams } from '@/api/common/index'
+
+const api = 'manage/payConfig/list';
+const noteVisible = ref(false)
+const noteData = ref<object | null>({})
+const createVisible = ref(false)
+const createData = ref<object | null>({})
+const paymentList = ref([])
+const miniprogramTypelist = ref([])
+
+const { data, query, search, reset, loading } = useGetList(api);
+
+const tableData = computed(() => data.value?.data);
+
+const openType = (type: string, data: object | null) => {
+  switch (type) {
+    case 'noteVisible':
+      noteVisible.value = true
+      noteData.value = data
+      break;
+    case 'createVisible':
+      createVisible.value = true
+      createData.value = data
+      break;
+  }
+
+}
+const closeType = (type: string) => {
+  switch (type) {
+    case 'noteVisible':
+      noteVisible.value = false
+      break;
+    case 'createVisible':
+      createVisible.value = false
+      break;
+  }
+  search()
+}
+const init = () => {
+  optionsCommonParams().then(res => {
+    console.log(res, 'optionsCommonParams');
+    paymentList.value = res.data.payType
+    miniprogramTypelist.value = res.data.miniprogramType
+  })
+}
+
+onMounted(() => {
+  init()
+  search();
+});
+</script>

src/views/appletManage/form/create.vue

@@ -12,10 +12,16 @@
           <el-input v-model="formData.play_name" clearable size="large" placeholder="请输入对应剧场名称" />
         </el-form-item>
         <el-form-item label="类型" prop="type">
-          <el-select class="w-full" v-model="formData.type" filterable clearable placeholder="选择类型">
+          <el-select class="w-full" v-model="formData.type" @change="appletTypeChange" filterable clearable
+            placeholder="选择类型">
             <el-option v-for="item in appletType" :key="item.value" :label="item.name" :value="item.value" />
           </el-select>
         </el-form-item>
+        <el-form-item label="绑定支付信息" prop="pay_merchant_id" v-if="formData.type">
+          <el-select class="w-full" v-model="formData.pay_merchant_id" filterable clearable placeholder="选择绑定支付信息">
+            <el-option v-for="item in paymentInfo" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="APP ID" prop="appid">
           <el-input v-model="formData.appid" clearable size="large" placeholder="请输入APP ID" />
         </el-form-item>
@@ -44,6 +50,7 @@ import { useCreate } from '@/hook/curd/useCreate';
 import { useShow } from '@/hook/curd/useShow';
 import type { FormInstance, FormRules } from 'element-plus'
 import { manageMiniprogramStore, manageMiniprogramTypelist, manageMiniprogramShow, manageMiniprogramUpdate } from '@/api/applet/index'
+import { managePayConfigList } from '@/api/iPayment/index'
 const ruleForm = ref<FormInstance>()
 import { onMounted, ref } from 'vue';
 const props = defineProps({
@@ -52,6 +59,7 @@ const props = defineProps({
 const formData = ref({ status: 2, miniProgramIds: [] })
 const rules = reactive({
   type: [{ required: true, message: '请选择类型' }],
+  pay_merchant_id: [{ required: true, message: '请选择绑定支付信息' }],
   appid: [
     {
       required: true,
@@ -102,13 +110,26 @@ const rules = reactive({
 });
 const loading = ref(false)
 const appletType = ref([])
+const paymentInfo = ref([])
+
+
+const appletTypeChange = (e) => {
+  initPaymentInfo({ limit: 100000 })
+}
 
+const initPaymentInfo = (params?: object) => {
+  managePayConfigList({ miniprogram_type: formData.value.type, ...params }).then(res => {
+    console.log(res, 'channelMiniprogramListchannelMiniprogramList');
+    paymentInfo.value = res.data
+  })
+}
 const initAppletType = () => {
   manageMiniprogramTypelist().then(res => {
     console.log(res, 'channelMiniprogramListchannelMiniprogramList');
     appletType.value = res.data
   })
 }
+
 const submitForm = (formEl: FormInstance | undefined) => {
   console.log(formData.value, 'formData.valueformData.value');
   if (!formEl) return;
@@ -139,6 +160,7 @@ if (props.primary) {
   manageMiniprogramShow(props.primary).then(res => {
     console.log(res, 'props.primary');
     formData.value = res.data
+    initPaymentInfo({ limit: 100000 })
   })
 }
 

src/views/appletManage/index.vue

@@ -9,11 +9,11 @@
           <el-form-item label="对应剧场名称">
             <el-input v-model="query.play_name" clearable />
           </el-form-item>
-          <!-- <el-form-item label="所属公司">
+          <el-form-item label="所属公司">
             <el-select v-model="query.company" clearable filterable placeholder="请选择">
               <el-option v-for="(item, index) in companylist" :key="index" :label="item" :value="item" />
             </el-select>
-          </el-form-item> -->
+          </el-form-item>
           <el-form-item label="类型">
             <el-select v-model="query.type" clearable filterable placeholder="请选择">
               <el-option v-for="(item, index) in miniprogramTypelist" :key="index" :label="item.name"
@@ -26,20 +26,41 @@
         <Operate :show="open" v-action="'manage.miniprogram.store'" />
         <el-table :data="tableData" class="mt-3" v-loading="loading">
           <el-table-column prop="id" label="ID" />
-          <el-table-column prop="name" label="小程序名称">
+          <el-table-column prop="name" label="小程序名称" min-width="200">
             <template #default="scope">
               <el-tooltip placement="top" v-if="scope.row.remark">
                 <template #content> {{ scope.row.remark }}<br /> </template>
-                <span>{{ scope.row.name }}</span>
+                <div class="flex flex-col">
+                  <div class="text-lg font-bold text-blue-400">{{ scope.row.name }}</div>
+                  <div>
+                    <span class="text-base">app id：</span>
+                    <span class="text-base font-bold">{{ scope.row.appid }}</span>
+                  </div>
+                  <div>
+                    <span class="text-base">app 密匙：</span>
+                    <span class="text-base font-bold">{{ scope.row.appsecret }}</span>
+                  </div>
+                </div>
               </el-tooltip>
-              <span v-else>{{ scope.row.name }}</span>
+              <div v-else class="flex flex-col">
+                <div class="text-lg font-bold text-blue-400 ">{{ scope.row.name }}</div>
+                <div>
+                  <span class="text-base">app id：</span>
+                  <span class="text-base font-bold">{{ scope.row.appid }}</span>
+                </div>
+                <div>
+                  <span class="text-base">app 密匙：</span>
+                  <span class="text-base font-bold">{{ scope.row.appsecret }}</span>
+                </div>
+              </div>
             </template>
           </el-table-column>
-          <!-- <el-table-column prop="company" label="所属公司" /> -->
+          <el-table-column prop="company" label="所属公司" />
           <el-table-column prop="play_name" label="对应剧场名称" />
+          <el-table-column prop="pay_merchant_name" label="已绑定支付信息" />
           <el-table-column prop="status_name" label="状态" />
           <el-table-column prop="type_name" label="类型" />
-          <el-table-column label="操作" width="200">
+          <el-table-column label="操作" width="200" fixed="right">
             <template #default="scope">
               <el-button link type="primary" size="small" @click="opendepots(scope.row)"
                 v-action="'manage.miniprogram.allocationStore'">分配</el-button>
@@ -69,7 +90,7 @@ import { useGetList } from '@/hook/curd/useGetList';
 import { useOpen } from '@/hook/curd/useOpen';
 import { manageMiniprogramCompanylist, manageMiniprogramTypelist } from '@/api/applet/index'
 
-const api = '/manage/miniprogram/index';
+const api = 'manage/miniprogram/index';
 const depotsVisible = ref(false)
 const depotsData = ref({})
 const companylist = ref([])
@@ -90,9 +111,9 @@ const closeDeptos = () => {
   search()
 }
 const init = () => {
-  // manageMiniprogramCompanylist().then(res => {
-  //   companylist.value = res.data
-  // })
+  manageMiniprogramCompanylist().then(res => {
+    companylist.value = res.data
+  })
   manageMiniprogramTypelist().then(res => {
     miniprogramTypelist.value = res.data
   })