BoundLink-Plate-UI/src/views/business-rules/risk-rules/components/rules-list/index.vue

<template>
  <div class="table-demo">
    <bs-table v-bind="tableOptions">
      <template #searchRight>
        <a-space>
          <a-button type="primary" @click="goDetailPage">
            <template #icon>
              <PlusOutlined />
            </template>
            <span>新增</span>
          </a-button>
        </a-space>
      </template>
    </bs-table>
  </div>
</template>

<script setup lang="jsx">
  import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
  import { onMounted, ref, watch } from 'vue';
  import { useRouter } from 'vue-router';

  const props = defineProps({
    selectedRulesId: String,
  });

  const {
    tableOptions,
    fetchTableData,
    setTablePropsValue: setValue,
    getTablePropsValue: getValue,
  } = useBsTable({
    tableOptions: {
      url: '/supports/risk/rule/queryPage',
      gridOptions: {
        loading: false,
        columns: [
          {
            type: 'seq',
            width: 80,
            align: 'center',
          },
          {
            title: '风险维度',
            field: 'riskDimension',
            width: 85,
            ellipsis: true,
            formatter: ({ cellValue }) => {
              return cellValue && cellValue.length > 0 ? cellValue[0].valueName : '';
            },
          },
          {
            title: '风险模板',
            // field: 'riskModel',
            width: 85,
            ellipsis: true,
            slots: {
              default({ row, column }) {
                return <span>{row?.riskModel?.[0].valueName}</span>;
              },
            },
          },
          {
            title: '风险等级',
            field: 'riskLevel',
            width: 85,
            ellipsis: true,
            slots: {
              default({ row, column }) {
                return <span>{row?.riskLevel?.[0].valueName}</span>;
              },
            },
          },
          {
            title: '风险指标',
            field: 'riskMetrics',
            width: 110,
            ellipsis: true,
          },
          {
            title: '指标定义',
            field: 'definedMetrics',
            width: 100,
            ellipsis: true,
          },
          {
            title: '条件运算符',
            field: 'operator',
            width: 100,
            ellipsis: true,
            slots: {
              default({ row, column }) {
                return <span>{row?.operator?.[0].valueName}</span>;
              },
            },
          },
          {
            title: '条件控制值',
            field: 'conditionalValue',
            width: 100,
            ellipsis: true,
          },
          {
            title: '提醒方式',
            field: 'remindWay',
            width: 100,
            ellipsis: true,
            slots: {
              default({ row, column }) {
                return <span>{row?.remindWay?.[0].valueName}</span>;
              },
            },
          },
          {
            title: '提醒时间(每天)',
            field: 'remindTime',
            width: 120,
            ellipsis: true,
          },
          {
            title: '风险等级',
            field: 'riskGrade',
            width: 100,
            ellipsis: true,
            slots: {
              default({ row, column }) {
                return <span>{row?.riskGrade?.[0].valueName}</span>;
              },
            },
          },
          {
            title: '状态',
            field: 'enable',
            width: 100,
            ellipsis: true,
            // formatter: (cellValue) => {
            //   return cellValue === 'true' ? '启用' : '禁用';
            // },
            slots: {
              default({ row, column }) {
                return <span>{row.enable === 'true' ? '启用' : '禁用'}</span>;
              },
            },
          },
          {
            field: 'opt',
            title: '操作',
            width: '120px',
            fixed: 'right',
            align: 'center',
            slots: {
              default({ row, column }) {
                return (
                  <a-button
                    type='text'
                    size='small'
                    onClick={() => {
                      goDetailPage(row);
                    }}
                  >
                    编辑
                  </a-button>
                );
              },
            },
          },
        ],
        data: [
          {
            id: 1,
            name: '测试数据',
            dictField: [
              {
                dictKeyId: '',
                dictValueId: '',
                remark: '',
                sort: 3,
                status: 1,
                valueCode: '03',
                valueName: '微信公众号',
              },
            ],
          },
        ], // 模拟数据源
      },
      searchConfig: {
        enabled: true,
        fieldSpan: 6,
        fields: [
          {
            field: 'name',
            label: '',
            component: 'a-input',
            componentProps: {
              placeholder: '请输入服务商名称',
            },
          },
          {
            field: 'name1',
            label: '',
            component: 'a-select',
            componentProps: {
              placeholder: '请选择地址',
            },
          },
          {
            field: 'name2',
            label: '',
            component: 'a-select',
            componentProps: {
              placeholder: '请选择服务商类型',
            },
          },
        ],
      },
      pagerConfig: {
        enabled: true,
        pageSize: 10,
        pageNum: 1,
      },
      toolbarConfig: {},
      tableSearchBeforeBiz() {
        const searchParams = getValue('searchConfig.data');
        setValue('searchConfig.data', { ...searchParams, key: props.selectedRulesId });
      },
    },
  });

  // 监听 selectedRulesId 的变化
  watch(
    () => props.selectedRulesId,
    (newVal, oldVal) => {
      if (newVal !== oldVal) {
        fetchTableData(newVal);
      }
    },
    { immediate: true }
  );

  onMounted(() => {
    console.log('表格已加载');
  });

  const router = useRouter();
  function goDetailPage(record) {
    console.log('record', record);
    router.push({
      path: '/business-rules/create-rules',
      query: {
        id: record.id,
      },
    });
  }
</script>

<style scoped lang="scss">
  .table-demo {
  }
</style>