|
|
@@ -1,93 +1,123 @@
|
|
|
<template>
|
|
|
<!-- 客户信息: 正常 -->
|
|
|
<div class="custom-normal">
|
|
|
- <filterCustomTable @add="add" />
|
|
|
- <!-- <a-table :columns="columns"
|
|
|
- :data-source="data"
|
|
|
- @change="handleChange" /> -->
|
|
|
+ <filterCustomTable @add="add"
|
|
|
+ @search="search" />
|
|
|
+ <a-table :columns="columns"
|
|
|
+ :pagination="false"
|
|
|
+ rowKey="key"
|
|
|
+ :data-source="customList" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
import { computed, defineComponent, ref } from 'vue';
|
|
|
-import { QueryTableDefine } from '@/goServiceAPI/commonService/index';
|
|
|
|
|
|
import { initData } from '@/setup/methods/index';
|
|
|
import { QueryCustomInfo } from '@/goServiceAPI/ermcp/customInfo/index';
|
|
|
import { QueryCustomInfoType } from '@/goServiceAPI/ermcp/customInfo/interface';
|
|
|
import filterCustomTable from '@/views/information/custom/compoments/filterTable/index.vue';
|
|
|
+import { getTableHead } from '@/services/bus/table';
|
|
|
+import { TableState, TableStateFilters } from 'ant-design-vue/es/table/interface';
|
|
|
import { message } from 'ant-design-vue';
|
|
|
|
|
|
// 查询客户资料列表
|
|
|
function getCustomList() {
|
|
|
- const filteredInfo = ref();
|
|
|
- const sortedInfo = ref();
|
|
|
- const columns = computed(() => {
|
|
|
- // const filtered = filteredInfo.value || {};
|
|
|
- // const sorted = sortedInfo.value || {};
|
|
|
- // return [
|
|
|
- // {
|
|
|
- // title: '序号',
|
|
|
- // dataIndex: 'index',
|
|
|
- // key: 'index',
|
|
|
- // align: 'center',
|
|
|
- // width: 50,
|
|
|
- // customRender: (param: any) => `${param.index + 1}`,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // title: 'Age',
|
|
|
- // dataIndex: 'age',
|
|
|
- // key: 'age',
|
|
|
- // sorter: (a: DataItem, b: DataItem) => a.age - b.age,
|
|
|
- // sortOrder: sorted.columnKey === 'age' && sorted.order,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // title: 'Address',
|
|
|
- // dataIndex: 'address',
|
|
|
- // key: 'address',
|
|
|
- // filters: [
|
|
|
- // { text: 'London', value: 'London' },
|
|
|
- // { text: 'New York', value: 'New York' },
|
|
|
- // ],
|
|
|
- // filteredValue: filtered.address || null,
|
|
|
- // onFilter: (value: string, record: DataItem) => record.address.includes(value),
|
|
|
- // sorter: (a: DataItem, b: DataItem) => a.address.length - b.address.length,
|
|
|
- // sortOrder: sorted.columnKey === 'address' && sorted.order,
|
|
|
- // ellipsis: true,
|
|
|
- // },
|
|
|
- // ];
|
|
|
- });
|
|
|
+ interface ColumnType {
|
|
|
+ key: string;
|
|
|
+ dataIndex: string;
|
|
|
+ title: string;
|
|
|
+ onFilter?: Function;
|
|
|
+ sorter?: Function;
|
|
|
+ }
|
|
|
+
|
|
|
const customList = ref<QueryCustomInfoType[]>([]);
|
|
|
+ const columns = ref<ColumnType[]>([]);
|
|
|
+ const filteredInfo = ref();
|
|
|
+ // 获取表头
|
|
|
+ function getColumns() {
|
|
|
+ interface ColumnType {
|
|
|
+ key: string;
|
|
|
+ dataIndex: string;
|
|
|
+ title: string;
|
|
|
+ filteredValue?: string | null;
|
|
|
+ onFilter?: Function;
|
|
|
+ sorter?: Function;
|
|
|
+ }
|
|
|
+ const list = getTableHead('table_pcweb_userinfo');
|
|
|
+ console.log('list', list);
|
|
|
+
|
|
|
+ const filtered = filteredInfo.value || {};
|
|
|
+ columns.value.length = 0;
|
|
|
+ list.forEach((e, i) => {
|
|
|
+ const { columnfield, columntitle } = e;
|
|
|
+ const item: ColumnType = {
|
|
|
+ key: String(i),
|
|
|
+ dataIndex: columnfield,
|
|
|
+ title: columntitle,
|
|
|
+ };
|
|
|
+ if (e.columntitle === '客户类型') {
|
|
|
+ item.onFilter = (value: string, record: QueryCustomInfoType) => record.userinfotype === value;
|
|
|
+ item.filteredValue = filtered.userinfotype || null;
|
|
|
+ }
|
|
|
+ if (e.columntitle === '客户简称') {
|
|
|
+ item.onFilter = (value: string, record: QueryCustomInfoType) => record.nickname.includes(value);
|
|
|
+ item.filteredValue = filtered.nickname || null;
|
|
|
+ }
|
|
|
+ if (e.columntitle === '客户名称') {
|
|
|
+ // 注意:这里绑定值 待确认
|
|
|
+ item.onFilter = (value: string, record: QueryCustomInfoType) => {
|
|
|
+ // 用户信息类型 - 1:个人 2:企业
|
|
|
+ const name = String(record.userinfotype) === '1' ? record.contactname : record.customername;
|
|
|
+ name.includes(value);
|
|
|
+ item.filteredValue = filtered.contactname || null;
|
|
|
+ };
|
|
|
+ }
|
|
|
+ if (e.columntitle === '手机号码') {
|
|
|
+ item.onFilter = (value: string, record: QueryCustomInfoType) => record.mobile.includes(value);
|
|
|
+ item.filteredValue = filtered.mobile || null;
|
|
|
+ }
|
|
|
+ columns.value.push(item);
|
|
|
+ });
|
|
|
+ console.log('columns', columns);
|
|
|
+ }
|
|
|
+ // 查询列表
|
|
|
function actionQuery() {
|
|
|
QueryCustomInfo(3)
|
|
|
.then((res) => {
|
|
|
- console.log('L', res);
|
|
|
+ customList.value = res.map((e, i) => {
|
|
|
+ return { ...e, key: String(i) };
|
|
|
+ });
|
|
|
+ console.log('查询列表', customList);
|
|
|
})
|
|
|
.catch((err) => message.error(err));
|
|
|
}
|
|
|
-
|
|
|
- return { customList, actionQuery };
|
|
|
+ // 查询
|
|
|
+ function search(value: any) {
|
|
|
+ filteredInfo.value = value;
|
|
|
+ getColumns();
|
|
|
+ console.log('search', value);
|
|
|
+ }
|
|
|
+ return { customList, actionQuery, columns, filteredInfo, getColumns, search };
|
|
|
}
|
|
|
|
|
|
function add() {
|
|
|
console.log('add');
|
|
|
}
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
name: 'custom-normal',
|
|
|
components: {
|
|
|
filterCustomTable,
|
|
|
},
|
|
|
setup() {
|
|
|
- const { customList, actionQuery } = getCustomList();
|
|
|
-
|
|
|
+ const { customList, actionQuery, columns, getColumns, search } = getCustomList();
|
|
|
initData(() => {
|
|
|
actionQuery();
|
|
|
- QueryTableDefine().then((res) => {
|
|
|
- console.log('QueryTableDefine', res[0]);
|
|
|
- });
|
|
|
+ getColumns();
|
|
|
// 加载数据在这里
|
|
|
});
|
|
|
- return { customList, add };
|
|
|
+ return { customList, add, columns, search };
|
|
|
},
|
|
|
});
|
|
|
</script>
|