FE_sandTable/src/views/config/Buyer.vue

<template>
  <h6 class="title">城市人口及年龄参数</h6>
  <el-table class="c-table"
            ref="table"
            v-loading="loading"
            :data="list"
            border
            @sort-change="handleSort">
    <el-table-column prop="productName"
                     label="城市总人口 (人)"
                     align="center">
      <el-input maxlength="20"></el-input>
    </el-table-column>
    <el-table-column prop="productNumber"
                     label="年龄 (岁)"
                     align="center"></el-table-column>
    <el-table-column prop="parentIds"
                     label="年龄占比 (%)"
                     align="center">
      <el-input maxlength="3"></el-input>
    </el-table-column>
  </el-table>

  <h6 class="title mt-7">学历参数</h6>
  <el-table class="c-table"
            ref="table"
            v-loading="loading"
            :data="list"
            border
            @sort-change="handleSort">
    <el-table-column prop="productName"
                     label="年龄 (岁)"
                     align="center"> </el-table-column>
    <el-table-column prop="productNumber"
                     label="学历"
                     align="center"></el-table-column>
    <el-table-column prop="parentIds"
                     label="学历占比 (%)"
                     align="center">
      <el-input maxlength="3"></el-input>
    </el-table-column>
  </el-table>

  <h6 class="title mt-7">企业数量配置</h6>
  <el-table class="c-table"
            ref="table"
            v-loading="loading"
            :data="list"
            border
            @sort-change="handleSort">
    <el-table-column prop="productName"
                     label="城市总人口 (人)"
                     align="center"> </el-table-column>
    <el-table-column prop="parentIds"
                     label="城市总人口 (人)"
                     align="center">
      <el-input maxlength="3"></el-input>
    </el-table-column>
  </el-table>

  <h6 class="title mt-7">单个商品每日需求量</h6>
  <el-table class="c-table"
            ref="table"
            v-loading="loading"
            :data="list"
            border
            @sort-change="handleSort">
    <el-table-column prop="productName"
                     label="买家类型"
                     align="center"> </el-table-column>
    <el-table-column prop="parentIds"
                     label="买家总占比 (%)"
                     align="center">
      <el-input maxlength="3"></el-input>
    </el-table-column>
    <el-table-column prop="parentIds"
                     label="每次需求人数占比 (%)"
                     align="center">
      <el-input maxlength="3"></el-input>
    </el-table-column>
    <el-table-column prop="parentIds"
                     label="单个买家单次需求"
                     align="center">
      <el-input maxlength="3"></el-input>
    </el-table-column>
  </el-table>

  <h6 class="title mt-7">系统账户起始金额</h6>
  <el-form class="w-[300px]"
           :model="form"
           label-width="120px"
           label-suffix="：">
    <el-form-item label="银行账户">
      <el-input v-model="form.name">
        <template #suffix> 万元 </template>
      </el-input>
    </el-form-item>
    <el-form-item label="保险账户">
      <el-input v-model="form.name">
        <template #suffix> 万元 </template>
      </el-input>
    </el-form-item>
    <el-form-item label="基金账户">
      <el-input v-model="form.name">
        <template #suffix> 万元 </template>
      </el-input>
    </el-form-item>
  </el-form>

  <div class="flex justify-end">
    <div class="submit">保存修改</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { systemBuyerAdd, systemBuyerFind } from '@/api/config';


const list = ref<Array<any>>([]);
const form = ref<Object>({});

// 配置项
const getInfo = async () => {
  const { process } = await systemBuyerFind();
  config.value = process;
};
onMounted(() => {
  getInfo();
});
</script>

<style lang="scss" scoped>
@import url(../../styles/form.scss);
.title {
  @apply flex items-center mb-5 text-base text-[#222D42] font-semibold;
  &:before {
    content: '';
    @apply w-1 h-4 mr-2 bg-[#006BFF] rounded-sm;
  }
}
.c-table {
  @apply rounded-[10px];
  :deep(th.el-table__cell) {
    @apply bg-[#F8FBFC];
  }
  :deep(.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>