web/src/views/system/config-manage/customer-manage/index.vue

<template>
  <div class="registration-query flex flex-col h-full">
    <SearchForm :fields="fields" :params="params"></SearchForm>
    <div class="flex-1 page-wrap">
      <div class="btn-group">
        <t-button theme="success" @click="handleAdd">新增</t-button>
        <t-button theme="success" @click="handleImport">批量导入</t-button>
      </div>
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          total: pagination.total,
        }"
      >
      </t-table>
    </div>

    <edit-customer-dialog
      v-model:visible="showEditCustomerDialog"
      :curRow="curRow"
      @success="fetchData"
    ></edit-customer-dialog>
  </div>
</template>

<script setup lang="jsx" name="CustomerManage">
import { ref, reactive } from 'vue';
import useFetchTable from '@/hooks/useFetchTable';
import EditCustomerDialog from './edit-customer-dialog.vue';
import { customerListApi } from '@/api/system';
const showEditCustomerDialog = ref(false);
const curRow = ref(null);

const columns = [
  { colKey: 'id', title: '客户ID' },
  { colKey: 'name', title: '客户名称' },
  { colKey: 'type', title: '客户类型' },
  { colKey: 'province', title: '省份' },
  { colKey: 'city', title: '城市' },
  { colKey: 'area', title: '县区' },
  { colKey: 'address', title: '地址' },
  { colKey: 'manager', title: '客户经理' },
  { colKey: 'serviceName', title: '服务档位名称' },
  { colKey: 'roles', title: '项目角色配置' },
  { colKey: 'k', title: '标准人天' },
  { colKey: 'l', title: '创建人' },
  { colKey: 'm', title: '创建时间' },
  {
    title: '管理',
    colKey: 'operate',
    fixed: 'right',
    width: 120,
    align: 'center',
    cell: (h, { row }) => {
      return (
        <div class="table-operations">
          <t-link
            theme="primary"
            hover="color"
            onClick={(e) => {
              e.stopPropagation();
              handleEdit(row);
            }}
          >
            修改
          </t-link>
          <t-link
            theme="danger"
            hover="color"
            onClick={(e) => {
              e.stopPropagation();
              handleDelete(row);
            }}
          >
            删除
          </t-link>
        </div>
      );
    },
  },
];
const {
  loading: tableLoading,
  pagination,
  tableData,
  fetchData,
  onChange,
} = useFetchTable(customerListApi);

const refresh = async () => {};

const fields = ref([
  {
    prop: 'a',
    label: '客户类型',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    options: [
      { value: 1, label: '研究生' },
      { value: 2, label: '高校教务处' },
    ],
  },
  {
    prop: 'b',
    label: '客户经理',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    options: [{ value: 1, label: '张三' }],
  },
  {
    prop: 'd',
    label: '客户名称',
    labelWidth: 100,
    colSpan: 5,
    attrs: {
      placeholder: '消息名称模糊查询',
      clearable: true,
    },
  },
  {
    prop: 'b',
    label: '服务档位',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    options: [{ value: 1, label: '一档' }],
  },
  {
    type: 'buttons',
    colSpan: 2,
    children: [
      {
        type: 'button',
        text: '查询',
      },
    ],
  },
]);
const params = reactive({
  a: '',
  b: '',
  c: [],
  d: '',
});

const handleAdd = () => {
  curRow.value = null;
  showEditCustomerDialog.value = true;
};
const handleImport = () => {
  console.log('import');
};
const handleDelete = (row) => {
  console.log(row);
};
const handleEdit = (row) => {
  console.log(row);
  curRow.value = row;
  showEditCustomerDialog.value = true;
};
</script>

<style></style>