客户管理，客户列表页面

zxl

2025-05-15 d6000775372ca9f31d5da635362d41289bccae6e

客户管理，客户列表页面

 manager/src/api/customer.js

New file
@@ -0,0 +1,78 @@
import service from "@/libs/axios";

// 获取客户列表
export const getCustomerList = (params) => {
  return service({
    url: "/customerManager",
    method: "GET",
    params: params
  })
}
// 添加标签
export const addCustomerTag = (params) => {
  return service({
    url: "/customerManager/addTag",
    method: "POST",
    data: params
  })
}
// 修改标签
export const editTag = (params) => {
  return service({
    url: "/customerManager/editTag",
    method: "PUT",
    data: params
  })
}
// 删除标签
export const delTag = (params) => {
  return service({
    url: "/customerManager/tag/" + params,
    method: "DELETE",
  })
}
// 标签列表
export const getTagList = () => {
  return service({
    url: "/customerManager/tagList",
    method: "GET",
  })
}
// 分页标签列表
export const getPageTagList = (params) =>{
  return service({
    url: "/customerManager/pageTagList",
    method: "GET",
    params:params
  })
}
// 添加客户标签标识
export const saveCustomerTagById = (params) => {
  return service({
    url: "/customerManager/customerAddTag",
    method: "POST",
    data:params
  })
}
// 修改客户标签标识
export const editCustomerTagById = (params) => {
  return service({
    url: "/customerManager/customerEditTag",
    method: "PUT",
    data:params
  })
}
// 删除客户标签标识ID删除
export const removeCustomerTagById = (params) => {
  return service({
    url: "/customerManager/customerDelTag/" + params,
    method: "DELETE",
  })
}
export const getStoreSelectOptions = () =>{
  return service({
    url: '/customerManager/store/selectOption',
    method: 'GET'
  })
}


 manager/src/views/customer/index.vue

New file
@@ -0,0 +1,387 @@
<template>
  <div>
    <card>
      <Form
        ref="searchForm"
        @keydown.enter.native="handleSearch"
        :model="searchForm"
        inline
        :label-width="70"
        class="search-form"
      >
        <Form-item label="用户名" prop="username">
          <Input
            type="text"
            v-model="searchForm.username"
            clearable
            @on-clear="handleSearch"
            @on-change="handleSearch"
            style="width: 160px"
          />
        </Form-item>
        <Form-item label="昵称" prop="nickname">
          <Input
            type="text"
            v-model="searchForm.nickName"
            clearable
            @on-clear="handleSearch"
            @on-change="handleSearch"
            style="width: 160px"
          />
        </Form-item>
        <Form-item label="商家" prop="storeId">
          <Select
            v-model="searchForm.storeId"
            style="width:160px"
            :loading="storeSelectLoading"
            class="custom-select"
            clearable
            @on-clear="handleSearch"
            @on-change="handleSearch"
          >
            <Option
              v-for="item in selectOptions"
              :value="item.id"
              :key="item.id"
            >
              {{ item.storeName }}
            </Option>
          </Select>
        </Form-item>
        <Button
          @click="handleSearch"
          type="primary"
          icon="ios-search"
          class="search-btn"
        >搜索</Button
        >
      </Form>

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="customerList"
        ref="table"
        sortable="custom"
        @on-sort-change="changeSort"
        @on-selection-change="showSelect"
      >
        <template slot-scope="{ row, index }" slot="action">
          <Button type="info" size="small" style="margin-right: 5px" @click="openEdit(row)">编辑标签</Button>
          <Button type="error" size="small" style="margin-right: 5px" @click="joinBlack(row)">加入黑名单</Button>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>

      <Modal
        v-model="showCustomerTag"
        :title="modelTitle"
      >
        <Form ref="form" :model="tagForm" :label-width="70" :rules="rules">
          <FormItem label="标签名称" prop="tagList">
              <Select
                v-model="tagForm.tagList"
                multiple
                style="width:260px"
                :loading="selectLoading"
                class="custom-select"
                @on-clear="handleRemoveTag"
                @on-select="handleSelectChange"
              >
                <Option
                  v-for="item in tagList"
                  :value="item.id"
                  :key="item.id"
                >
                  {{ item.tagName }}
                </Option>
              </Select>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="modelClose">确定</Button>
<!--          <Button type="primary" :loading="submitLoading" @click="saveOrUpdate">提交</Button>-->
        </div>
      </Modal>
    </card>


  </div>
</template>

<script>
import JsonExcel from "vue-json-excel";
import {getCustomerList,addCustomerTag,saveCustomerTagById,getTagList,getStoreSelectOptions} from "@/api/customer";

export default {
  name:"customer",
  components:{
    "download-excel": JsonExcel,
  },
  data(){
    return{
      loading: false, // 表单加载状态
      //查询客户列表请求参数
      searchForm:{
        storeId: '', //商家
        username:'', //用户名
        nickName:'', // 昵称
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
      },
      //客户列表表头
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title:'用户名',
          key: 'username',
          minWidth: 60,
          tooltip: true,
        },
        {
          title:'昵称',
          key: 'nickName',
          minWidth: 60,
          tooltip: true,
        },
        {
          title:'性别',
          key: 'sex',
          tooltip: true,
          render: (h, params) => {
            const sexText = params.row.sex === 1 ? '男' : '女';
            return h('span', sexText);
          }
        },
        {
          title:'地址',
          key: 'region',
          minWidth: 60,
          tooltip: true,
        },
        {
          title:'状态',
          key: 'disabled',
          tooltip: true,
          render: (h, params) => {
            const sexText = params.row.disabled === true ? '禁用' : '正常';
            return h('span', sexText);
          }
        },
        {
          title:'客户标签',
          key: 'customerTagList',
          minWidth: 60,
          tooltip: true,
          render: (h, params) => {
            const tags = params.row.customerTagList || [];
            return h('div', {
              style: {
                display: 'flex',
                flexWrap: 'wrap', // 允许换行
                gap: '4px' // 标签间距
              }
            }, tags.map(tag => {
              return h('Tag', {
                props: {
                  color: tag.color || 'default', // 假设标签有颜色字段
                  size: 'small'
                }
              }, tag.name); // 假设标签对象有name字段
            }));
          }
        },
        {
          title: '操作',
          key: 'action',
          slot: 'action',
          minWidth: 150,
          align: 'center'
        }

      ],
      //客户列表数据
      customerList:[],
      total:0,
      selectCount: 0, // 已选数量
      selectList: [], // 已选数据列表

      //客户标签对话框---

      showCustomerTag:false,
      submitLoading:false,
      selectLoading:false,
      modelTitle:'',
      tagList:[],
      tagForm:{
        id: '',
        tagList: [],
        createType: 'SYSTEM'
      },
      rules: {
        tagList: [
          {required: true, message: "标签名称不能为空", trigger: "blur", type: 'array'}
        ],
      },
      //商家下拉框数据
      selectOptions:[],
      storeSelectLoading: false

    }
  },
  mounted(){
    this.init();
  },
  methods:{
    // 获得商家下拉框数据
    getStoreSelectOptions(){
      this.storeSelectLoading = true;
      getStoreSelectOptions().then(res =>{
        this.storeSelectLoading = false;
        if (res.code === 200){
          this.selectOptions = res.data;
        }
      })
    },
    // 获得客户表格信息
    getCustomerList(){
      this.loading = true;
      getCustomerList(this.searchForm).then(res =>{
        this.loading = false;
        if (res.code === 200) {
          this.customerList = res.data;
          this.total = res.total;
        }
      })
    },
    // 获得客户标签下拉框数据
    getCustomerTagSelectOptions(){
      this.selectLoading = true;
      getTagList().then(res =>{
        this.selectLoading = false;
        if (res.code === 200){
          this.tagList = res.data;
        }
      })
    },
    init(){
      this.getCustomerList();
      this.getCustomerTagSelectOptions();
      this.getStoreSelectOptions();
    },
    changeSort(){

    },
    showSelect(){
      this.selectList = e.map(d => d.id);
      this.selectCount = e.length;
    },
    // 编辑标签
    openEdit(row){
      this.showCustomerTag = true
      this.modelTitle = "编辑标签"
      //放入form
      this.tagForm.id = row.id
      this.tagForm.tagList = row.customerTagList


    },
    handleSearch(){
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getCustomerList();
    },
    // 新增或修改
    // saveOrUpdate() {
    //   this.$refs.form.validate(valid => {
    //     if (valid) {
    //       this.submitLoading = true
    //         // 新增
    //         console.log(this.tagForm)
    //
    //     }
    //   });
    // },
    handleSelectChange(newVal){
      console.log(newVal)
      this.getCustomerList()
    },
    handleRemoveTag(removedTag) {
      console.log(removedTag)
      this.getCustomerList()
    },
    // 关闭弹窗
    modelClose() {
      this.submitLoading = false
      this.showCustomerTag = false
    },

    delById(){

    },
    // 页码
    changePage(v){
      this.searchForm.pageNumber = v
      this.getCustomerList()
    },
    // 修改size
    changePageSize(v){
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = v;
      this.getCustomerList()
    },
    joinBlack(){

    },


  }
}

</script>
<style lang="scss" scoped>
.export {
  margin: 10px 20px 10px 0;
}
.export-excel-wrapper {
  display: inline;
}
.order-tab {
  width: 950px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 0 10px;
  margin-bottom: 10px;
  div {
    text-align: center;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
  }
  .current {
    background-color: #ffffff;
  }
}
</style>