系统买方

src/api/config.ts

@@ -1,5 +1,8 @@
 import axios from '@/utils/request';
 
-export const systemBuyerAdd = async (data: Record<string, any>): Promise<any> => (await axios.post('/product/systemBuyer/add', data)).data;
+export const saveOrUpdate = async (data: Record<string, any>): Promise<any> => (await axios.post('/product/systemBuyer/saveOrUpdate', data)).data;
 export const systemBuyerFind = async (): Promise<any> => (await axios.post('/product/systemBuyer/details')).data;
-export const systemBuyerUpdate = async (data: Record<string, any>): Promise<any> => (await axios.post('/product/systemBuyer/update', data)).data;
+export const ages = async (): Promise<any> => (await axios.post('/product/ages/list')).data;
+export const edu = async (): Promise<any> => (await axios.post('/product/edu/list')).data;
+export const accountType = async (): Promise<any> => (await axios.post('/product/accountType/list')).data;
+export const buyerType = async (): Promise<any> => (await axios.post('/product/buyerType/list')).data;

src/components/Search.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { watch, computed, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps({
   modelValue: { type: String, default: '' },
@@ -25,21 +25,8 @@ const val = computed({
     timer.value = setTimeout(() => {
       emit('update:modelValue', value);
     }, 500);
-    // emit('update:modelValue', value)
   },
 });
-// watch(
-//   () => props.modelValue,
-//   (val) => {
-//     clearTimeout(timer.value);
-//     timer.value = setTimeout(() => {
-//       emit('update:modelValue', val);
-//     }, 500);
-//   },
-//   {
-//     deep: true,
-//   },
-// );
 </script>
 
 <style lang="scss" scoped>

src/utils/request.ts

@@ -30,7 +30,6 @@ service.interceptors.response.use(
         status,
       },
     } = e;
-    console.log('🚀 ~ file: request.ts:27 ~ e:', e, status, message);
     const {
       global: { t },
     } = i18n;

src/views/config/Buyer.vue

@@ -1,131 +1,411 @@
 <template>
   <h6 class="title">城市人口及年龄参数</h6>
   <el-table class="c-table"
-            ref="table"
+            :data="form.ageAduRatioList"
-            v-loading="loading"
+            :span-method="ageSpan"
-            :data="list"
+            border>
-            border
-            @sort-change="handleSort">
     <el-table-column prop="productName"
                      label="城市总人口 (人)"
                      align="center">
-      <el-input maxlength="20"></el-input>
+      <template #default="{ row }">
+        <el-input v-model.number="row.totalPopulation"
+                  placeholder="请输入"
+                  type="number"
+                  min="0"></el-input>
+      </template>
     </el-table-column>
-    <el-table-column prop="productNumber"
+    <el-table-column prop="ageStage"
                      label="年龄 (岁)"
                      align="center"></el-table-column>
-    <el-table-column prop="parentIds"
+    <el-table-column prop="ageRatio"
                      label="年龄占比 (%)"
                      align="center">
-      <el-input maxlength="3"></el-input>
+      <template #default="{ row }">
+        <el-input v-model="row.ageRatio"
+                  placeholder="请输入"></el-input>
+      </template>
     </el-table-column>
   </el-table>
 
   <h6 class="title mt-7">学历参数</h6>
   <el-table class="c-table"
-            ref="table"
+            :data="edus"
-            v-loading="loading"
+            :span-method="eduSpan"
-            :data="list"
+            border>
-            border
+    <el-table-column prop="ageStage"
-            @sort-change="handleSort">
-    <el-table-column prop="productName"
                      label="年龄 (岁)"
                      align="center"> </el-table-column>
-    <el-table-column prop="productNumber"
+    <el-table-column prop="education"
                      label="学历"
                      align="center"></el-table-column>
     <el-table-column prop="parentIds"
                      label="学历占比 (%)"
                      align="center">
-      <el-input maxlength="3"></el-input>
+      <template #default="{ row }">
+        <el-input v-model="row.eduRatio"
+                  placeholder="请输入"></el-input>
+      </template>
     </el-table-column>
   </el-table>
 
   <h6 class="title mt-7">企业数量配置</h6>
   <el-table class="c-table"
-            ref="table"
+            :data="form.enterpriseNumList"
-            v-loading="loading"
+            border>
-            :data="list"
-            border
-            @sort-change="handleSort">
     <el-table-column prop="productName"
-                     label="城市总人口 (人)"
+                     label="企业类型"
-                     align="center"> </el-table-column>
+                     align="center">
+      <template #default="{ row }">
+        {{ row.enterpriseType == 1 ? '小微企业' : '创业企业' }}
+      </template>
+    </el-table-column>
     <el-table-column prop="parentIds"
-                     label="城市总人口 (人)"
+                     label="企业数量（家）"
                      align="center">
-      <el-input maxlength="3"></el-input>
+      <template #default="{ row }">
+        <el-input v-model.number="row.number"
+                  placeholder="请输入"
+                  maxlength="3"
+                  type="number"
+                  min="0"></el-input>
+      </template>
     </el-table-column>
   </el-table>
 
   <h6 class="title mt-7">单个商品每日需求量</h6>
   <el-table class="c-table"
-            ref="table"
+            :data="form.commodityDemandList"
-            v-loading="loading"
+            border>
-            :data="list"
+    <el-table-column prop="typeName"
-            border
-            @sort-change="handleSort">
-    <el-table-column prop="productName"
                      label="买家类型"
+                     min-width="100"
                      align="center"> </el-table-column>
     <el-table-column prop="parentIds"
                      label="买家总占比 (%)"
+                     min-width="100"
                      align="center">
-      <el-input maxlength="3"></el-input>
+      <template #default="{ row }">
+        <el-input v-model="row.buyerRatio"
+                  placeholder="请输入"></el-input>
+      </template>
     </el-table-column>
     <el-table-column prop="parentIds"
                      label="每次需求人数占比 (%)"
+                     min-width="130"
                      align="center">
-      <el-input maxlength="3"></el-input>
+      <template #default="{ row }">
+        <el-input v-model="row.peopleNumRatio"
+                  placeholder="请输入"></el-input>
+      </template>
     </el-table-column>
     <el-table-column prop="parentIds"
                      label="单个买家单次需求"
+                     min-width="200"
                      align="center">
-      <el-input maxlength="3"></el-input>
+      <template #default="{ row }">
+        <div class="flex items-center">
+          <template v-if="row.typeId == 7 || row.typeId == 8">
+            <span class="mr-2 whitespace-nowrap">一个保险产品一次最多购买</span>
+            <el-input v-model="row.buyerSingleDemand"
+                      placeholder="请输入"></el-input>
+            <span class="ml-2">份</span>
+          </template>
+          <template v-else>
+            <span class="mr-2 whitespace-nowrap">{{ row.typeId == 9 ? '投入' : '贷款' }}</span>
+            <el-input v-model="row.buyerSingleDemandMin"
+                      placeholder="请输入"></el-input>
+            <span class="mx-2">~</span>
+            <el-input v-model="row.buyerSingleDemandMax"
+                      placeholder="请输入"></el-input>
+            <span class="ml-2 whitespace-nowrap">万元</span>
+          </template>
+        </div>
+      </template>
     </el-table-column>
   </el-table>
 
   <h6 class="title mt-7">系统账户起始金额</h6>
-  <el-form class="w-[300px]"
+  <el-form v-if="form.moneyAllocationList.length"
-           :model="form"
+           class="w-[300px]"
            label-width="120px"
            label-suffix="：">
     <el-form-item label="银行账户">
-      <el-input v-model="form.name">
+      <el-input v-model="form.moneyAllocationList[0].startingAmount">
         <template #suffix> 万元 </template>
       </el-input>
     </el-form-item>
     <el-form-item label="保险账户">
-      <el-input v-model="form.name">
+      <el-input v-model="form.moneyAllocationList[1].startingAmount">
         <template #suffix> 万元 </template>
       </el-input>
     </el-form-item>
     <el-form-item label="基金账户">
-      <el-input v-model="form.name">
+      <el-input v-model="form.moneyAllocationList[2].startingAmount">
         <template #suffix> 万元 </template>
       </el-input>
     </el-form-item>
   </el-form>
 
   <div class="flex justify-end">
-    <div class="submit">保存修改</div>
+    <div class="submit"
+         @click="submit">保存修改</div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
-import { systemBuyerAdd, systemBuyerFind } from '@/api/config';
+import type { TableColumnCtx } from 'element-plus';
+import { saveOrUpdate, systemBuyerFind, ages, edu, accountType, buyerType } from '@/api/config';
+import _ from 'lodash';
 
-
+const added = ref<number>(0);
-const list = ref<Array<any>>([]);
+const edus = ref<Record<string, any>[]>([]);
-const form = ref<Object>({});
+const form = ref<Record<string, any>>({
+  ageAduRatioList: [],
+  commodityDemandList: [],
+  enterpriseNumList: [
+    {
+      enterpriseType: 1,
+      number: '',
+    },
+    {
+      enterpriseType: 2,
+      number: '',
+    },
+  ],
+  moneyAllocationList: [],
+});
 
 // 配置项
 const getInfo = async () => {
-  const { process } = await systemBuyerFind();
+  edus.value = [];
-  config.value = process;
+  const res = await edu();
+
+  const { list } = await ages();
+  list.map((e) => {
+    res.list.map((n) => {
+      edus.value.push({
+        eduRatio: '',
+        ...n,
+        ...e,
+      });
+    });
+
+    e.ageRatio = '';
+    e.totalPopulation = '';
+  });
+  form.value.ageAduRatioList = list;
+
+  const { data } = await buyerType();
+  data.map((e) => {
+    e.buyerRatio = '';
+    e.buyerSingleDemand = '';
+    e.buyerSingleDemandMin = '';
+    e.buyerSingleDemandMax = '';
+    e.peopleNumRatio = '';
+  });
+  form.value.commodityDemandList = data;
+
+  const res1 = await accountType();
+  res1.list.map((e) => {
+    e.startingAmount = '';
+  });
+  form.value.moneyAllocationList = res1.list;
+
+  // 以上的是每个模块的每行名称，下面的是整块的详情
+  const { systemBuyerDTO } = await systemBuyerFind();
+  if (systemBuyerDTO.ageAduRatioList.length) {
+    edus.value = _.merge(edus.value, systemBuyerDTO.ageAduRatioList.splice(6));
+    added.value = 1;
+  }
+  systemBuyerDTO.commodityDemandList.map((e) => {
+    if (e.typeId != 7 && e.typeId != 8 && e.buyerSingleDemand.includes('-')) {
+      const val = e.buyerSingleDemand.split('-');
+      e.buyerSingleDemandMin = val[0];
+      e.buyerSingleDemandMax = val[1];
+    }
+  });
+  _.merge(form.value, systemBuyerDTO);
+  console.log('🚀 ~ file: Buyer.vue:236 ~ getInfo ~ form.value:', form.value);
 };
+
+const submit = async () => {
+  const param = JSON.parse(JSON.stringify(form.value));
+  let invalid = 0;
+
+  // 年龄
+  if (param.ageAduRatioList[0].totalPopulation === '') return ElMessage.error('请输入城市总人口');
+  param.ageAduRatioList.some((e) => {
+    if (e.ageRatio === '') {
+      ElMessage.error('请输入年龄占比');
+      invalid = 1;
+      return true;
+    }
+    if (isNaN(e.ageRatio)) {
+      ElMessage.error('请输入合理的年龄占比');
+      invalid = 1;
+      return true;
+    }
+    if (e.ageRatio < 0) {
+      ElMessage.error('年龄占比不得小于0');
+      invalid = 1;
+      return true;
+    }
+  });
+  if (invalid) return false;
+  if (_.sum(param.ageAduRatioList.map((e) => +e.ageRatio)) > 100) return ElMessage.error('占比总和不得超过100%');
+
+  // 学历
+  edus.value.some((e) => {
+    if (e.eduRatio === '') {
+      ElMessage.error('请输入学历占比');
+      invalid = 1;
+      return true;
+    }
+    if (isNaN(e.eduRatio)) {
+      ElMessage.error('请输入合理的学历占比');
+      invalid = 1;
+      return true;
+    }
+    if (e.eduRatio < 0) {
+      ElMessage.error('学历占比不得小于0');
+      invalid = 1;
+      return true;
+    }
+  });
+  if (invalid) return false;
+
+  // 企业数量配置
+  param.enterpriseNumList.some((e) => {
+    if (e.number === '') {
+      ElMessage.error('请输入企业数量');
+      invalid = 1;
+      return true;
+    }
+    if (isNaN(e.number)) {
+      ElMessage.error('请输入合理的企业数量');
+      invalid = 1;
+      return true;
+    }
+    if (e.number < 0) {
+      ElMessage.error('企业数量不得小于0');
+      invalid = 1;
+      return true;
+    }
+  });
+  if (invalid) return false;
+
+  // 单个商品每日需求量
+  param.commodityDemandList.some((e) => {
+    if (e.buyerRatio === '') {
+      ElMessage.error('请输入买家总占比');
+      invalid = 1;
+      return true;
+    }
+    if (isNaN(e.buyerRatio) || e.buyerRatio < 0 || e.buyerRatio > 100) {
+      ElMessage.error('请输入合理的买家总占比');
+      invalid = 1;
+      return true;
+    }
+
+    if (e.peopleNumRatio === '') {
+      ElMessage.error('请输入每次需求人数占比');
+      invalid = 1;
+      return true;
+    }
+    if (isNaN(e.peopleNumRatio) || e.peopleNumRatio < 0 || e.peopleNumRatio > 100) {
+      ElMessage.error('请输入合理的每次需求人数占比');
+      invalid = 1;
+      return true;
+    }
+
+    if (e.typeId != 7 && e.typeId != 8 && (e.buyerSingleDemandMin === '' || e.buyerSingleDemandMax === '')) {
+      console.log('🚀 ~ file: Buyer.vue:323 ~ param.commodityDemandList.some ~ e:', e);
+      ElMessage.error('请输入单个买家单次需求1');
+      invalid = 1;
+      return true;
+    }
+    if (e.typeId != 7 && e.typeId != 8 && (isNaN(e.buyerSingleDemandMin) || isNaN(e.buyerSingleDemandMax))) {
+      ElMessage.error('请输入合理的单个买家单次需求');
+      invalid = 1;
+      return true;
+    }
+    if (e.typeId != 7 && e.typeId != 8 && (e.buyerSingleDemandMin < 0 || e.buyerSingleDemandMax < 0)) {
+      ElMessage.error('单个买家单次需求不得小于0');
+      invalid = 1;
+      return true;
+    }
+
+    if ((e.typeId == 7 || e.typeId == 8) && e.buyerSingleDemand === '') {
+      ElMessage.error('请输入单个买家单次需求2');
+      invalid = 1;
+      return true;
+    }
+    if ((e.typeId == 7 || e.typeId == 8) && isNaN(e.buyerSingleDemand)) {
+      ElMessage.error('请输入合理的单个买家单次需求');
+      invalid = 1;
+      return true;
+    }
+    if ((e.typeId == 7 || e.typeId == 8) && e.buyerSingleDemand < 0) {
+      ElMessage.error('单个买家单次需求不得小于0');
+      invalid = 1;
+      return true;
+    }
+  });
+  if (invalid) return false;
+
+  // 系统账户起始金额
+  if (param.moneyAllocationList[0].startingAmount === '' || isNaN(param.moneyAllocationList[0].startingAmount)) return ElMessage.error('请输入合理的银行账户');
+  if (param.moneyAllocationList[1].startingAmount === '' || isNaN(param.moneyAllocationList[1].startingAmount)) return ElMessage.error('请输入合理的保险账户');
+  if (param.moneyAllocationList[2].startingAmount === '' || isNaN(param.moneyAllocationList[2].startingAmount)) return ElMessage.error('请输入合理的基金账户');
+
+  param.ageAduRatioList.push(...edus.value);
+  param.commodityDemandList.map((e) => {
+    if (e.buyerSingleDemandMin && e.buyerSingleDemandMax) e.buyerSingleDemand = `${e.buyerSingleDemandMin}-${e.buyerSingleDemandMax}`;
+  });
+  await saveOrUpdate(param);
+  ElMessage.success('保存成功！');
+  getInfo();
+};
+
+interface SpanMethodProps {
+  row: Record<string, any>;
+  column: TableColumnCtx<Record<string, any>>;
+  rowIndex: number;
+  columnIndex: number;
+}
+// 人口及年龄表格合并
+const ageSpan = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
+  if (columnIndex === 0) {
+    if (rowIndex === 0) {
+      return {
+        rowspan: 6,
+        colspan: 1,
+      };
+    }
+    return {
+      rowspan: 0,
+      colspan: 0,
+    };
+  }
+};
+// 学历表格合并
+const eduSpan = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
+  if (columnIndex === 0) {
+    if (rowIndex % 4 === 0) {
+      return {
+        rowspan: 4,
+        colspan: 1,
+      };
+    }
+    return {
+      rowspan: 0,
+      colspan: 0,
+    };
+  }
+};
+
 onMounted(() => {
   getInfo();
 });
@@ -145,20 +425,8 @@ onMounted(() => {
   :deep(th.el-table__cell) {
     @apply bg-[#F8FBFC];
   }
-  :deep(.cell) {
+  :deep(th.el-table__cell > .cell) {
     @apply text-[#006BFF];
   }
 }
-.submit {
-  padding: 15px 22px;
-  font-size: 14px;
-  line-height: 1;
-  color: #fff;
-  background: #006bff;
-  border-radius: 12px;
-  cursor: pointer;
-  &:hover {
-    opacity: 0.9;
-  }
-}
 </style>