|
@@ -2,124 +2,99 @@
|
|
|
<!-- 客户信息: 正常 -->
|
|
<!-- 客户信息: 正常 -->
|
|
|
<div class="custom-normal"
|
|
<div class="custom-normal"
|
|
|
:loading="loading">
|
|
:loading="loading">
|
|
|
- <filterCustomTable @add="add"
|
|
|
|
|
- @search="search" />
|
|
|
|
|
- <a-table class="topTable"
|
|
|
|
|
- :columns="columns"
|
|
|
|
|
- :pagination="false"
|
|
|
|
|
- rowKey="key"
|
|
|
|
|
- :data-source="customList"
|
|
|
|
|
- :bordered="true">
|
|
|
|
|
- <template #userinfotype="{ text }">
|
|
|
|
|
- <a>{{ text === '2' ? '企业' : '个人'}}</a>
|
|
|
|
|
- </template>
|
|
|
|
|
- </a-table>
|
|
|
|
|
|
|
+ <filterCustomTable @search="search">
|
|
|
|
|
+ <a-button class="operBtn"
|
|
|
|
|
+ v-if="hasPermission('custom_info_btn_add')"
|
|
|
|
|
+ @click="openAction">新增</a-button>
|
|
|
|
|
+ </filterCustomTable>
|
|
|
|
|
+ <contextMenu :contextMenuList="contextMenuList"
|
|
|
|
|
+ :tableList="customList">
|
|
|
|
|
+ <a-table :columns="columns"
|
|
|
|
|
+ class="topTable"
|
|
|
|
|
+ :pagination="false"
|
|
|
|
|
+ rowKey="key"
|
|
|
|
|
+ :data-source="customList">
|
|
|
|
|
+ <template #userinfotype="{ text }">
|
|
|
|
|
+ <a>{{ text === '2' ? '企业' : '个人'}}</a>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </a-table>
|
|
|
|
|
+ </contextMenu>
|
|
|
|
|
+ <!-- 详情 -->
|
|
|
|
|
+ <CustomDetail />
|
|
|
|
|
+ <!-- 修改 -->
|
|
|
|
|
+ <ModifyCustom />
|
|
|
|
|
+ <!-- 停用 -->
|
|
|
|
|
+ <DisableCustom />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
-import { defineComponent, Ref, ref } from 'vue';
|
|
|
|
|
|
|
+import { defineComponent, onUnmounted, Ref, ref, watchEffect } from 'vue';
|
|
|
|
|
|
|
|
import { initData } from '@/setup/methods/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 filterCustomTable from '@/views/information/custom/compoments/filterTable/index.vue';
|
|
|
-import { getTableHead, ColumnType } from '@/services/bus/table';
|
|
|
|
|
-import { message } from 'ant-design-vue';
|
|
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
|
|
|
|
+import { MenuItem } from '@/components/contextMenu/interface';
|
|
|
|
|
+import contextMenu from '@/components/contextMenu/index.vue';
|
|
|
|
|
+import { getCustomList } from '../setup';
|
|
|
|
|
+import { openModal } from '@/setup/controlModal/index';
|
|
|
|
|
+import CustomDetail from '@/views/information/custom/compoments/customDetail/index.vue';
|
|
|
|
|
+import ModifyCustom from '@/views/information/custom/compoments/modifyCustom/index.vue';
|
|
|
|
|
+import DisableCustom from '@/views/information/custom/compoments/disableCustom/index.vue';
|
|
|
|
|
|
|
|
-// 查询客户资料列表
|
|
|
|
|
-function getCustomList() {
|
|
|
|
|
- const router = useRouter();
|
|
|
|
|
- const pathArr = router.currentRoute.value.fullPath.split('/');
|
|
|
|
|
- console.log('pathArr', pathArr);
|
|
|
|
|
-
|
|
|
|
|
- // 表格数据
|
|
|
|
|
- const customList = ref<QueryCustomInfoType[]>([]);
|
|
|
|
|
- // 表头数据
|
|
|
|
|
- const columns = ref<ColumnType[]>([]);
|
|
|
|
|
- // 过滤项
|
|
|
|
|
- const filteredInfo = ref();
|
|
|
|
|
- const loading = ref<boolean>(false);
|
|
|
|
|
- // 获取表头
|
|
|
|
|
- function getColumns() {
|
|
|
|
|
- const list = getTableHead('table_pcweb_userinfo');
|
|
|
|
|
- const filtered = filteredInfo.value || {};
|
|
|
|
|
- columns.value.length = 0;
|
|
|
|
|
- list.forEach((e, i) => {
|
|
|
|
|
- const { columnfield, columntitle, aligntype } = e;
|
|
|
|
|
- const item: ColumnType = {
|
|
|
|
|
- key: String(i),
|
|
|
|
|
- dataIndex: columnfield, // 表格数据对应的key
|
|
|
|
|
- title: columntitle,
|
|
|
|
|
- align: aligntype === 1 ? 'center' : aligntype === 2 ? 'left' : 'right',
|
|
|
|
|
- slots: { customRender: columnfield },
|
|
|
|
|
- };
|
|
|
|
|
- // 以下添加过滤数据对应的方法
|
|
|
|
|
- if (e.columntitle === '客户类型') {
|
|
|
|
|
- item.onFilter = (value: string, record: QueryCustomInfoType) => record.userinfotype.includes(String(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) => record.contactname.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() {
|
|
|
|
|
- loading.value = true;
|
|
|
|
|
- QueryCustomInfo(3)
|
|
|
|
|
- .then((res) => {
|
|
|
|
|
- customList.value = res.map((e, i) => {
|
|
|
|
|
- return { ...e, key: String(i) };
|
|
|
|
|
- });
|
|
|
|
|
- loading.value = false;
|
|
|
|
|
- console.log('查询列表', customList);
|
|
|
|
|
- })
|
|
|
|
|
- .catch((err) => {
|
|
|
|
|
- message.error(err);
|
|
|
|
|
- loading.value = false;
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
- // 查询
|
|
|
|
|
- function search(value: any) {
|
|
|
|
|
- filteredInfo.value = value;
|
|
|
|
|
- getColumns();
|
|
|
|
|
- console.log('search', value);
|
|
|
|
|
|
|
+// 处理详情
|
|
|
|
|
+function handleDetail(contextMenuList: Ref<MenuItem[]>) {
|
|
|
|
|
+ const { openAction } = openModal('customDetail');
|
|
|
|
|
+ contextMenuList.value.push({ lable: '详情', callback: openAction });
|
|
|
|
|
+}
|
|
|
|
|
+// 处理修改
|
|
|
|
|
+function handleModify(contextMenuList: Ref<MenuItem[]>) {
|
|
|
|
|
+ const { openAction } = openModal('modifyCustomInfo');
|
|
|
|
|
+ function modifyAction() {
|
|
|
|
|
+ contextMenuList.value.push({ lable: '修改', callback: openAction });
|
|
|
}
|
|
}
|
|
|
- return { customList, actionQuery, columns, filteredInfo, getColumns, search, loading };
|
|
|
|
|
|
|
+ return { modifyAction };
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// 处理新增资料
|
|
|
|
|
-
|
|
|
|
|
-function add() {
|
|
|
|
|
- console.log('add');
|
|
|
|
|
|
|
+// 处理停用
|
|
|
|
|
+function handleDisable(contextMenuList: Ref<MenuItem[]>) {
|
|
|
|
|
+ const { openAction } = openModal('disableCustomInfo');
|
|
|
|
|
+ function disableAction() {
|
|
|
|
|
+ contextMenuList.value.push({ lable: '停用', callback: openAction });
|
|
|
|
|
+ }
|
|
|
|
|
+ return { disableAction };
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
|
name: 'custom-normal',
|
|
name: 'custom-normal',
|
|
|
components: {
|
|
components: {
|
|
|
filterCustomTable,
|
|
filterCustomTable,
|
|
|
|
|
+ contextMenu,
|
|
|
|
|
+ CustomDetail,
|
|
|
|
|
+ ModifyCustom,
|
|
|
|
|
+ DisableCustom,
|
|
|
},
|
|
},
|
|
|
setup() {
|
|
setup() {
|
|
|
- const { customList, actionQuery, columns, getColumns, search, loading } = getCustomList();
|
|
|
|
|
|
|
+ const { customList, actionQuery, columns, getColumns, search, loading, handlePermission } = getCustomList();
|
|
|
|
|
+ const { hasPermission } = handlePermission('custom_info_normal');
|
|
|
|
|
+ const contextMenuList = ref<MenuItem[]>([]);
|
|
|
|
|
+
|
|
|
|
|
+ const { openAction } = openModal('addCustomInfo');
|
|
|
|
|
+
|
|
|
|
|
+ handleDetail(contextMenuList);
|
|
|
|
|
+ const { modifyAction } = handleModify(contextMenuList);
|
|
|
|
|
+ const { disableAction } = handleDisable(contextMenuList);
|
|
|
|
|
+
|
|
|
|
|
+ const stop = watchEffect(() => {
|
|
|
|
|
+ hasPermission('custom_info_btn_modify') && modifyAction();
|
|
|
|
|
+ hasPermission('custom_info_btn_disable') && disableAction();
|
|
|
|
|
+ });
|
|
|
|
|
+ onUnmounted(() => {
|
|
|
|
|
+ stop();
|
|
|
|
|
+ });
|
|
|
initData(() => {
|
|
initData(() => {
|
|
|
- actionQuery();
|
|
|
|
|
|
|
+ actionQuery(3);
|
|
|
getColumns();
|
|
getColumns();
|
|
|
- // 加载数据在这里
|
|
|
|
|
});
|
|
});
|
|
|
- return { customList, columns, search, loading, add };
|
|
|
|
|
|
|
+ return { customList, columns, search, loading, contextMenuList, hasPermission, openAction };
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|