基础资料完善
							parent
							
								
									1131f19726
								
							
						
					
					
						commit
						cac5d3d2f0
					
				| 
						 | 
				
			
			@ -0,0 +1,55 @@
 | 
			
		|||
/**
 | 
			
		||||
 * 客户管理 api 封装
 | 
			
		||||
 *
 | 
			
		||||
 * @Author:    霍锦
 | 
			
		||||
 * @Date:      2025-03-25 10:42:33
 | 
			
		||||
 * @Copyright  友仓
 | 
			
		||||
 */
 | 
			
		||||
import {postRequest, getRequest} from '/@/lib/axios';
 | 
			
		||||
 | 
			
		||||
export const customerApi = {
 | 
			
		||||
 | 
			
		||||
    /**
 | 
			
		||||
     * 分页查询  @author  霍锦
 | 
			
		||||
     */
 | 
			
		||||
    queryPage: (param: object) => {
 | 
			
		||||
        return postRequest('/customer/queryPage', param);
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /**
 | 
			
		||||
     * 增加  @author  霍锦
 | 
			
		||||
     */
 | 
			
		||||
    add: (param: object) => {
 | 
			
		||||
        return postRequest('/customer/add', param);
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /**
 | 
			
		||||
     * 修改  @author  霍锦
 | 
			
		||||
     */
 | 
			
		||||
    update: (param: object) => {
 | 
			
		||||
        return postRequest('/customer/update', param);
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    /**
 | 
			
		||||
     * 删除  @author  霍锦
 | 
			
		||||
     */
 | 
			
		||||
    delete: (customerId: number) => {
 | 
			
		||||
        return getRequest('/customer/delete', {customerId});
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /**
 | 
			
		||||
     * 批量删除  @author  霍锦
 | 
			
		||||
     */
 | 
			
		||||
    batchDelete: (idList: number[]) => {
 | 
			
		||||
        return postRequest('/customer/batchDelete', idList);
 | 
			
		||||
    },
 | 
			
		||||
    /**
 | 
			
		||||
     * 下拉查询  @author  hj
 | 
			
		||||
     */
 | 
			
		||||
    queryCustomer: (param: object) => {
 | 
			
		||||
        return postRequest('/customer/queryCustomer',param);
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,11 @@
 | 
			
		|||
/**
 | 
			
		||||
 * 客户管理 枚举
 | 
			
		||||
 *
 | 
			
		||||
 * @Author:    霍锦
 | 
			
		||||
 * @Date:      2025-03-25 10:42:33
 | 
			
		||||
 * @Copyright  友仓
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			@ -40,6 +40,7 @@ export const TABLE_ID_CONST = {
 | 
			
		|||
      ITEM:businessBASEInitTableId+3,//商品
 | 
			
		||||
      STOCK:businessBASEInitTableId+4,//容器
 | 
			
		||||
      ADDRESS:businessBASEInitTableId+5,//地址
 | 
			
		||||
      CUSTOMER:businessBASEInitTableId+6,//客户
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -82,16 +82,16 @@ watch(
 | 
			
		|||
 | 
			
		||||
 | 
			
		||||
function handleChange(value: any) {
 | 
			
		||||
  let selectedLocations: any[] | any;
 | 
			
		||||
  let selectedAreas: any[] | any;
 | 
			
		||||
  if (Array.isArray(value)) {
 | 
			
		||||
    // 多选情况
 | 
			
		||||
    selectedLocations = value.map((id) => areas.value.find((item: any) => item.areaId === id)).filter(Boolean);
 | 
			
		||||
    selectedAreas = value.map((id) => areas.value.find((item: any) => item.areaId === id)).filter(Boolean);
 | 
			
		||||
  } else {
 | 
			
		||||
    // 单选情况
 | 
			
		||||
    selectedLocations = areas.value.find((item: any) => item.areaId === value);
 | 
			
		||||
    selectedAreas = areas.value.find((item: any) => item.areaId === value);
 | 
			
		||||
  }
 | 
			
		||||
  emit('update:value', value);
 | 
			
		||||
  emit('change', selectedLocations);
 | 
			
		||||
  emit('change', selectedAreas);
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -0,0 +1,183 @@
 | 
			
		|||
<!--
 | 
			
		||||
  * 客户管理
 | 
			
		||||
  *
 | 
			
		||||
  * @Author:    霍锦
 | 
			
		||||
  * @Date:      2025-03-25 10:42:33
 | 
			
		||||
  * @Copyright  友仓
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
  <a-modal
 | 
			
		||||
      :title="form.customerId ? '编辑客户' : '添加客户'"
 | 
			
		||||
      :width="600"
 | 
			
		||||
      :open="visibleFlag"
 | 
			
		||||
      @cancel="onClose"
 | 
			
		||||
      :maskClosable="false"
 | 
			
		||||
      :destroyOnClose="true"
 | 
			
		||||
  >
 | 
			
		||||
    <a-form ref="formRef" :model="form" :rules="rules">
 | 
			
		||||
      <a-row>
 | 
			
		||||
        <a-col :span="12">
 | 
			
		||||
          <a-form-item label="代码" name="customerCode">
 | 
			
		||||
            <a-input style="width:  100%" v-model:value="form.customerCode" placeholder="客户代码" disabled/>
 | 
			
		||||
          </a-form-item>
 | 
			
		||||
 | 
			
		||||
        </a-col>
 | 
			
		||||
        <a-col :span="12">
 | 
			
		||||
          <a-form-item label="名称" name="customerName">
 | 
			
		||||
            <a-input style="width: 100%" v-model:value="form.customerName" placeholder="客户名称"
 | 
			
		||||
                     @input="generateCustomerCode"/>
 | 
			
		||||
          </a-form-item>
 | 
			
		||||
        </a-col>
 | 
			
		||||
      </a-row>
 | 
			
		||||
 | 
			
		||||
      <a-row :gutter="24">
 | 
			
		||||
        <a-col :span="12">
 | 
			
		||||
          <a-form-item label="联系人" name="person">
 | 
			
		||||
            <a-input style="width: 100%" v-model:value="form.person" placeholder="联系人"/>
 | 
			
		||||
          </a-form-item>
 | 
			
		||||
 | 
			
		||||
        </a-col>
 | 
			
		||||
        <a-col :span="12">
 | 
			
		||||
          <a-form-item label="电话" name="telephone">
 | 
			
		||||
            <a-input style="width: 100%" v-model:value="form.telephone" placeholder="电话"/>
 | 
			
		||||
          </a-form-item>
 | 
			
		||||
        </a-col>
 | 
			
		||||
      </a-row>
 | 
			
		||||
 | 
			
		||||
      <a-row>
 | 
			
		||||
        <a-col :span="24">
 | 
			
		||||
          <a-form-item label="地址" name="address">
 | 
			
		||||
            <a-textarea
 | 
			
		||||
                v-model:value="form.address"
 | 
			
		||||
                style="width: 100%; height: 100px"
 | 
			
		||||
                placeholder="地址"
 | 
			
		||||
            />
 | 
			
		||||
          </a-form-item>
 | 
			
		||||
        </a-col>
 | 
			
		||||
      </a-row>
 | 
			
		||||
 | 
			
		||||
      <a-row>
 | 
			
		||||
        <a-col :span="24">
 | 
			
		||||
          <a-form-item label="是否启用" name="disabledFlag">
 | 
			
		||||
            <a-switch
 | 
			
		||||
                v-model:checked="form.disabledFlag"
 | 
			
		||||
                checked-children="启用"
 | 
			
		||||
                un-checked-children="禁用"
 | 
			
		||||
            />
 | 
			
		||||
          </a-form-item>
 | 
			
		||||
        </a-col>
 | 
			
		||||
      </a-row>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    </a-form>
 | 
			
		||||
 | 
			
		||||
    <template #footer>
 | 
			
		||||
      <a-space>
 | 
			
		||||
        <a-button @click="onClose">取消</a-button>
 | 
			
		||||
        <a-button type="primary" @click="onSubmit">保存</a-button>
 | 
			
		||||
      </a-space>
 | 
			
		||||
    </template>
 | 
			
		||||
  </a-modal>
 | 
			
		||||
</template>
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import {reactive, ref, nextTick} from 'vue';
 | 
			
		||||
import _ from 'lodash';
 | 
			
		||||
import pinyin from 'pinyin';
 | 
			
		||||
import {message} from 'ant-design-vue';
 | 
			
		||||
import {SmartLoading} from '/@/components/framework/smart-loading';
 | 
			
		||||
import {customerApi} from '/@/api/business/base/customer/customer-api';
 | 
			
		||||
import {smartSentry} from '/@/lib/smart-sentry';
 | 
			
		||||
 | 
			
		||||
// ------------------------ 事件 ------------------------
 | 
			
		||||
 | 
			
		||||
const emits = defineEmits(['reloadList']);
 | 
			
		||||
 | 
			
		||||
// ------------------------ 显示与隐藏 ------------------------
 | 
			
		||||
// 是否显示
 | 
			
		||||
const visibleFlag = ref(false);
 | 
			
		||||
 | 
			
		||||
function show(rowData: object) {
 | 
			
		||||
  Object.assign(form, formDefault);
 | 
			
		||||
  if (rowData && !_.isEmpty(rowData)) {
 | 
			
		||||
    Object.assign(form, rowData);
 | 
			
		||||
  }
 | 
			
		||||
  visibleFlag.value = true;
 | 
			
		||||
  nextTick(() => {
 | 
			
		||||
    formRef.value.clearValidate();
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function onClose() {
 | 
			
		||||
  Object.assign(form, formDefault);
 | 
			
		||||
  visibleFlag.value = false;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// ------------------------ 表单 ------------------------
 | 
			
		||||
 | 
			
		||||
// 组件ref
 | 
			
		||||
const formRef = ref();
 | 
			
		||||
 | 
			
		||||
const formDefault = {
 | 
			
		||||
  customerId: undefined, //客户id
 | 
			
		||||
  customerCode: undefined, //客户代码
 | 
			
		||||
  customerName: undefined, //客户名称
 | 
			
		||||
  person: undefined, //联系人
 | 
			
		||||
  telephone: undefined, //电话
 | 
			
		||||
  address: undefined, //地址
 | 
			
		||||
  disabledFlag: true //是否禁用
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
let form = reactive({...formDefault});
 | 
			
		||||
 | 
			
		||||
const rules = {
 | 
			
		||||
  customerId: [{required: true, message: '客户id 必填'}],
 | 
			
		||||
  customerCode: [{required: true, message: '客户代码 必填'}],
 | 
			
		||||
  customerName: [{required: true, message: '客户名称 必填'}],
 | 
			
		||||
  createTime: [{required: true, message: '创建时间 必填'}],
 | 
			
		||||
  createUserId: [{required: true, message: '创建人ID 必填'}],
 | 
			
		||||
  createUserName: [{required: true, message: '创建人 必填'}],
 | 
			
		||||
  updateTime: [{required: true, message: '更新时间 必填'}],
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// 自动生成客户代码
 | 
			
		||||
function generateCustomerCode() {
 | 
			
		||||
  form.customerCode = form.customerName
 | 
			
		||||
      ? pinyin(form.customerName, {style: pinyin.STYLE_FIRST_LETTER})
 | 
			
		||||
          .map((item: string []) => item[0].toUpperCase())
 | 
			
		||||
          .join('')
 | 
			
		||||
      : undefined;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 点击确定,验证表单
 | 
			
		||||
async function onSubmit() {
 | 
			
		||||
  try {
 | 
			
		||||
    await formRef.value.validateFields();
 | 
			
		||||
    save();
 | 
			
		||||
  } catch (err) {
 | 
			
		||||
    message.error('参数验证错误,请仔细填写表单数据!');
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 新建、编辑API
 | 
			
		||||
async function save() {
 | 
			
		||||
  SmartLoading.show();
 | 
			
		||||
  try {
 | 
			
		||||
    if (form.customerId) {
 | 
			
		||||
      await customerApi.update(form);
 | 
			
		||||
    } else {
 | 
			
		||||
      await customerApi.add(form);
 | 
			
		||||
    }
 | 
			
		||||
    message.success('操作成功');
 | 
			
		||||
    emits('reloadList');
 | 
			
		||||
    onClose();
 | 
			
		||||
  } catch (err) {
 | 
			
		||||
    smartSentry.captureError(err);
 | 
			
		||||
  } finally {
 | 
			
		||||
    SmartLoading.hide();
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
defineExpose({
 | 
			
		||||
  show,
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,315 @@
 | 
			
		|||
<!--
 | 
			
		||||
  * 客户管理
 | 
			
		||||
  *
 | 
			
		||||
  * @Author:    霍锦
 | 
			
		||||
  * @Date:      2025-03-25 10:42:33
 | 
			
		||||
  * @Copyright  友仓
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
  <!---------- 查询表单form begin ----------->
 | 
			
		||||
  <a-form class="smart-query-form">
 | 
			
		||||
    <a-row class="smart-query-form-row">
 | 
			
		||||
      <a-form-item label="客户" class="smart-query-form-item">
 | 
			
		||||
        <CustomerSelect v-model:value="queryForm.customerId" :disabled-flag="true" @change="changeCustomerSelect"/>
 | 
			
		||||
      </a-form-item>
 | 
			
		||||
      <a-form-item label="是否启用" class="smart-query-form-item">
 | 
			
		||||
        <a-select style="width: 200px" v-model:value="queryForm.disabledFlag" allowClear placeholder="请选择">
 | 
			
		||||
          <a-select-option :value="true">启用</a-select-option>
 | 
			
		||||
          <a-select-option :value="false">禁用</a-select-option>
 | 
			
		||||
        </a-select>
 | 
			
		||||
      </a-form-item>
 | 
			
		||||
      <a-form-item class="smart-query-form-item">
 | 
			
		||||
        <a-button type="primary" @click="onSearch" class="smart-margin-left10">
 | 
			
		||||
          <template #icon>
 | 
			
		||||
            <SearchOutlined/>
 | 
			
		||||
          </template>
 | 
			
		||||
          查询
 | 
			
		||||
        </a-button>
 | 
			
		||||
        <a-button @click="resetQuery" class="smart-margin-left10">
 | 
			
		||||
          <template #icon>
 | 
			
		||||
            <ReloadOutlined/>
 | 
			
		||||
          </template>
 | 
			
		||||
          重置
 | 
			
		||||
        </a-button>
 | 
			
		||||
      </a-form-item>
 | 
			
		||||
    </a-row>
 | 
			
		||||
  </a-form>
 | 
			
		||||
  <!---------- 查询表单form end ----------->
 | 
			
		||||
 | 
			
		||||
  <a-card size="small" :bordered="false" :hoverable="true">
 | 
			
		||||
    <!---------- 表格操作行 begin ----------->
 | 
			
		||||
    <a-row class="smart-table-btn-block">
 | 
			
		||||
      <div class="smart-table-operate-block">
 | 
			
		||||
        <a-button @click="showForm" type="primary" v-privilege="'customer:add'">
 | 
			
		||||
          <template #icon>
 | 
			
		||||
            <PlusOutlined/>
 | 
			
		||||
          </template>
 | 
			
		||||
          新建
 | 
			
		||||
        </a-button>
 | 
			
		||||
        <a-button @click="confirmBatchDelete" type="primary" danger v-privilege="'customer:batchDelete'"
 | 
			
		||||
                  :disabled="selectedRowKeyList.length == 0">
 | 
			
		||||
          <template #icon>
 | 
			
		||||
            <DeleteOutlined/>
 | 
			
		||||
          </template>
 | 
			
		||||
          批量删除
 | 
			
		||||
        </a-button>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="smart-table-setting-block">
 | 
			
		||||
        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.BASE.CUSTOMER" :refresh="queryData"/>
 | 
			
		||||
      </div>
 | 
			
		||||
    </a-row>
 | 
			
		||||
    <!---------- 表格操作行 end ----------->
 | 
			
		||||
 | 
			
		||||
    <!---------- 表格 begin ----------->
 | 
			
		||||
    <a-table
 | 
			
		||||
        size="small"
 | 
			
		||||
        :dataSource="tableData"
 | 
			
		||||
        :columns="columns"
 | 
			
		||||
        rowKey="customerId"
 | 
			
		||||
        bordered
 | 
			
		||||
        :loading="tableLoading"
 | 
			
		||||
        :pagination="false"
 | 
			
		||||
        :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
 | 
			
		||||
    >
 | 
			
		||||
      <template #bodyCell="{ text, record, column }">
 | 
			
		||||
 | 
			
		||||
        <template v-if="column.dataIndex === 'disabledFlag'">
 | 
			
		||||
          <a-tag :color="text ? 'processing' : 'error'">{{ text ? '启用' : '禁用' }}</a-tag>
 | 
			
		||||
        </template>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
        <template v-if="column.dataIndex === 'action'">
 | 
			
		||||
          <div class="smart-table-operate">
 | 
			
		||||
            <a-button @click="showForm(record)" type="link" v-privilege="'customer:update'">
 | 
			
		||||
              <template #icon>
 | 
			
		||||
                <EditOutlined/>
 | 
			
		||||
              </template>
 | 
			
		||||
              编辑
 | 
			
		||||
            </a-button>
 | 
			
		||||
            <a-button @click="onDelete(record)" danger type="link" v-privilege="'customer:delete'">
 | 
			
		||||
              <template #icon>
 | 
			
		||||
                <DeleteOutlined/>
 | 
			
		||||
              </template>
 | 
			
		||||
              删除
 | 
			
		||||
            </a-button>
 | 
			
		||||
          </div>
 | 
			
		||||
        </template>
 | 
			
		||||
      </template>
 | 
			
		||||
    </a-table>
 | 
			
		||||
    <!---------- 表格 end ----------->
 | 
			
		||||
 | 
			
		||||
    <div class="smart-query-table-page">
 | 
			
		||||
      <a-pagination
 | 
			
		||||
          showSizeChanger
 | 
			
		||||
          showQuickJumper
 | 
			
		||||
          show-less-items
 | 
			
		||||
          :pageSizeOptions="PAGE_SIZE_OPTIONS"
 | 
			
		||||
          :defaultPageSize="queryForm.pageSize"
 | 
			
		||||
          v-model:current="queryForm.pageNum"
 | 
			
		||||
          v-model:pageSize="queryForm.pageSize"
 | 
			
		||||
          :total="total"
 | 
			
		||||
          @change="queryData"
 | 
			
		||||
          @showSizeChange="queryData"
 | 
			
		||||
          :show-total="(total:number) => `共${total}条`"
 | 
			
		||||
      />
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <CustomerForm ref="formRef" @reloadList="queryData"/>
 | 
			
		||||
 | 
			
		||||
  </a-card>
 | 
			
		||||
</template>
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import {reactive, ref, onMounted} from 'vue';
 | 
			
		||||
import {message, Modal} from 'ant-design-vue';
 | 
			
		||||
import {SmartLoading} from '/@/components/framework/smart-loading';
 | 
			
		||||
import {customerApi} from '/@/api/business/base/customer/customer-api';
 | 
			
		||||
import {PAGE_SIZE_OPTIONS} from '/@/constants/common-const';
 | 
			
		||||
import {smartSentry} from '/@/lib/smart-sentry';
 | 
			
		||||
import TableOperator from '/@/components/support/table-operator/index.vue';
 | 
			
		||||
import CustomerForm from '/@/views/business/base/customer/customer-form.vue';
 | 
			
		||||
import {TABLE_ID_CONST} from "/@/constants/support/table-id-const";
 | 
			
		||||
import CustomerSelect from "/@/views/business/base/customer/customer-select.vue";
 | 
			
		||||
 | 
			
		||||
// ---------------------------- 表格列 ----------------------------
 | 
			
		||||
 | 
			
		||||
const columns = ref([
 | 
			
		||||
  {
 | 
			
		||||
    title: '客户id',
 | 
			
		||||
    dataIndex: 'customerId',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: '客户代码',
 | 
			
		||||
    dataIndex: 'customerCode',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: '客户名称',
 | 
			
		||||
    dataIndex: 'customerName',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: '联系人',
 | 
			
		||||
    dataIndex: 'person',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: '电话',
 | 
			
		||||
    dataIndex: 'telephone',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: '地址',
 | 
			
		||||
    dataIndex: 'address',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: '是否启用',
 | 
			
		||||
    dataIndex: 'disabledFlag',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: '创建时间',
 | 
			
		||||
    dataIndex: 'createTime',
 | 
			
		||||
    ellipsis: true,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    title: '操作',
 | 
			
		||||
    dataIndex: 'action',
 | 
			
		||||
    fixed: 'right',
 | 
			
		||||
    width: 140,
 | 
			
		||||
  },
 | 
			
		||||
]);
 | 
			
		||||
 | 
			
		||||
// ---------------------------- 查询数据表单和方法 ----------------------------
 | 
			
		||||
 | 
			
		||||
const queryFormState = {
 | 
			
		||||
  customerId: undefined, //客户
 | 
			
		||||
  disabledFlag: undefined,//是否启用
 | 
			
		||||
  pageNum: 1,
 | 
			
		||||
  pageSize: 10,
 | 
			
		||||
};
 | 
			
		||||
// 查询表单form
 | 
			
		||||
const queryForm = reactive({...queryFormState});
 | 
			
		||||
// 表格加载loading
 | 
			
		||||
const tableLoading = ref(false);
 | 
			
		||||
// 表格数据
 | 
			
		||||
const tableData = ref([]);
 | 
			
		||||
// 总数
 | 
			
		||||
const total = ref(0);
 | 
			
		||||
 | 
			
		||||
// 重置查询条件
 | 
			
		||||
function resetQuery() {
 | 
			
		||||
  let pageSize = queryForm.pageSize;
 | 
			
		||||
  Object.assign(queryForm, queryFormState);
 | 
			
		||||
  queryForm.pageSize = pageSize;
 | 
			
		||||
  queryData();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 搜索
 | 
			
		||||
function onSearch() {
 | 
			
		||||
  queryForm.pageNum = 1;
 | 
			
		||||
  queryData();
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//选择客户
 | 
			
		||||
function changeCustomerSelect(selectValue: any) {
 | 
			
		||||
  if (selectValue) {
 | 
			
		||||
    queryForm.customerId = selectValue.customerId;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 查询数据
 | 
			
		||||
async function queryData() {
 | 
			
		||||
  tableLoading.value = true;
 | 
			
		||||
  try {
 | 
			
		||||
    let queryResult = await customerApi.queryPage(queryForm);
 | 
			
		||||
    tableData.value = queryResult.data.list;
 | 
			
		||||
    total.value = queryResult.data.total;
 | 
			
		||||
  } catch (e) {
 | 
			
		||||
    smartSentry.captureError(e);
 | 
			
		||||
  } finally {
 | 
			
		||||
    tableLoading.value = false;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
onMounted(queryData);
 | 
			
		||||
 | 
			
		||||
// ---------------------------- 添加/修改 ----------------------------
 | 
			
		||||
const formRef = ref();
 | 
			
		||||
 | 
			
		||||
function showForm(data: object) {
 | 
			
		||||
  formRef.value.show(data);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// ---------------------------- 单个删除 ----------------------------
 | 
			
		||||
//确认删除
 | 
			
		||||
function onDelete(data: object) {
 | 
			
		||||
  Modal.confirm({
 | 
			
		||||
    title: '提示',
 | 
			
		||||
    content: '确定要删除选吗?',
 | 
			
		||||
    okText: '删除',
 | 
			
		||||
    okType: 'danger',
 | 
			
		||||
    onOk() {
 | 
			
		||||
      requestDelete(data);
 | 
			
		||||
    },
 | 
			
		||||
    cancelText: '取消',
 | 
			
		||||
    onCancel() {
 | 
			
		||||
    },
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//请求删除
 | 
			
		||||
async function requestDelete(data: any) {
 | 
			
		||||
  SmartLoading.show();
 | 
			
		||||
  try {
 | 
			
		||||
    await customerApi.delete(data.customerId);
 | 
			
		||||
    message.success('删除成功');
 | 
			
		||||
    await queryData();
 | 
			
		||||
  } catch (e) {
 | 
			
		||||
    smartSentry.captureError(e);
 | 
			
		||||
  } finally {
 | 
			
		||||
    SmartLoading.hide();
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// ---------------------------- 批量删除 ----------------------------
 | 
			
		||||
 | 
			
		||||
// 选择表格行
 | 
			
		||||
const selectedRowKeyList = ref([]);
 | 
			
		||||
 | 
			
		||||
function onSelectChange(selectedRowKeys: any) {
 | 
			
		||||
  selectedRowKeyList.value = selectedRowKeys;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 批量删除
 | 
			
		||||
function confirmBatchDelete() {
 | 
			
		||||
  Modal.confirm({
 | 
			
		||||
    title: '提示',
 | 
			
		||||
    content: '确定要批量删除这些数据吗?',
 | 
			
		||||
    okText: '删除',
 | 
			
		||||
    okType: 'danger',
 | 
			
		||||
    onOk() {
 | 
			
		||||
      requestBatchDelete();
 | 
			
		||||
    },
 | 
			
		||||
    cancelText: '取消',
 | 
			
		||||
    onCancel() {
 | 
			
		||||
    },
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//请求批量删除
 | 
			
		||||
async function requestBatchDelete() {
 | 
			
		||||
  try {
 | 
			
		||||
    SmartLoading.show();
 | 
			
		||||
    await customerApi.batchDelete(selectedRowKeyList.value);
 | 
			
		||||
    message.success('删除成功');
 | 
			
		||||
    queryData();
 | 
			
		||||
  } catch (e) {
 | 
			
		||||
    smartSentry.captureError(e);
 | 
			
		||||
  } finally {
 | 
			
		||||
    SmartLoading.hide();
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,96 @@
 | 
			
		|||
<!--
 | 
			
		||||
  * 库区 下拉选择框
 | 
			
		||||
  *
 | 
			
		||||
  *
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
  <a-select
 | 
			
		||||
      v-model:value="selectValue"
 | 
			
		||||
      :style="`width: ${width}`"
 | 
			
		||||
      :placeholder="props.placeholder"
 | 
			
		||||
      :showSearch="true"
 | 
			
		||||
      :allowClear="true"
 | 
			
		||||
      :size="size"
 | 
			
		||||
      @change="handleChange"
 | 
			
		||||
      :disabled="disabled"
 | 
			
		||||
      :mode="multiple ? 'multiple' : ''"
 | 
			
		||||
      optionFilterProp="label"
 | 
			
		||||
  >
 | 
			
		||||
    <a-select-option v-for="customer in customers" :key="customer.customerId" :label="customer.customerName">
 | 
			
		||||
      {{ customer.customerName }}
 | 
			
		||||
    </a-select-option>
 | 
			
		||||
  </a-select>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import {onMounted, ref, watch} from 'vue';
 | 
			
		||||
import {customerApi} from "/@/api/business/base/customer/customer-api";
 | 
			
		||||
 | 
			
		||||
const props = defineProps({
 | 
			
		||||
  value: [Number, String, Object, Array],
 | 
			
		||||
  width: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: '200px',
 | 
			
		||||
  },
 | 
			
		||||
  placeholder: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: '请选择',
 | 
			
		||||
  },
 | 
			
		||||
  size: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: 'default',
 | 
			
		||||
  },
 | 
			
		||||
  disabled: {
 | 
			
		||||
    type: Boolean,
 | 
			
		||||
    default: false,
 | 
			
		||||
  },
 | 
			
		||||
  multiple: {
 | 
			
		||||
    type: Boolean,
 | 
			
		||||
    default: false,
 | 
			
		||||
  },
 | 
			
		||||
  disabledFlag: {
 | 
			
		||||
    type: Boolean,
 | 
			
		||||
    default: null,
 | 
			
		||||
  }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const customers = ref([]);
 | 
			
		||||
 | 
			
		||||
async function queryData() {
 | 
			
		||||
 | 
			
		||||
  let res = await customerApi.queryCustomer({
 | 
			
		||||
    disabledFlag: props.disabledFlag
 | 
			
		||||
  });
 | 
			
		||||
  customers.value = res.data;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const emit = defineEmits(['update:value', 'change']);
 | 
			
		||||
 | 
			
		||||
const selectValue = ref(props.value);
 | 
			
		||||
 | 
			
		||||
// 箭头value变化
 | 
			
		||||
watch(
 | 
			
		||||
    () => props.value,
 | 
			
		||||
    (newValue) => {
 | 
			
		||||
      selectValue.value = newValue;
 | 
			
		||||
    }
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
function handleChange(value: any) {
 | 
			
		||||
  let selectedCustomers: any[] | any;
 | 
			
		||||
  if (Array.isArray(value)) {
 | 
			
		||||
    // 多选情况
 | 
			
		||||
    selectedCustomers = value.map((id) => customers.value.find((item: any) => item.customerId === id)).filter(Boolean);
 | 
			
		||||
  } else {
 | 
			
		||||
    // 单选情况
 | 
			
		||||
    selectedCustomers = customers.value.find((item: any) => item.customerId === value);
 | 
			
		||||
  }
 | 
			
		||||
  emit('update:value', value);
 | 
			
		||||
  emit('change', selectedCustomers);
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
onMounted(queryData);
 | 
			
		||||
</script>
 | 
			
		||||
		Loading…
	
		Reference in New Issue