|
@@ -6,13 +6,19 @@
|
|
|
<!-- 筛选条件 -->
|
|
|
<el-form :model="filterForm" label-width="70px" style="max-width: 600px">
|
|
|
<el-form-item v-for="(item, index) in filterItems" :key="index" :label="item.label">
|
|
|
- <el-input v-if="item.type === 'input'" v-model="filterForm[item.key as keyof FilterForm]" clearable placeholder="请输入"></el-input>
|
|
|
+ <el-input v-if="item.type === 'input'" v-model="filterForm[item.key as keyof FilterForm]" clearable
|
|
|
+ placeholder="请输入"></el-input>
|
|
|
<el-select v-else v-model="filterForm[item.key as keyof FilterForm]" placeholder="请选择" clearable>
|
|
|
<el-option v-for="option in item.options" :key="option.id" :label="option.name" :value="option.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
+ <div class="w-full flex p-3 shadow-[0_-3px_5px_0px_rgba(0,0,0,0.2)]">
|
|
|
+ <El-button class="w-full" @click="resetForm()" :loading="allLoading.formTableLading">重置</El-Button>
|
|
|
+ <El-button type="primary" class="w-full" :loading="allLoading.formTableLading"
|
|
|
+ @click="getContactPerson()">搜索</El-Button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex-1 p-5 overflow-auto">
|
|
@@ -25,10 +31,15 @@
|
|
|
<!-- 表格 -->
|
|
|
<el-table ref="clueTableRef" :data="formTable" border v-loading="allLoading.formTableLading"
|
|
|
style="width: 100%;height: 100%;">
|
|
|
- <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.prop" :label="column.label" :width="column.width">
|
|
|
+ <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.prop"
|
|
|
+ :label="column.label" :width="column.width">
|
|
|
<template #default="scope">
|
|
|
<template v-if="column.event === 'toDetali'">
|
|
|
- <el-button link type="primary" size="large" @click="toDetali(scope.row)">{{ scope.row.name }}</el-button>
|
|
|
+ <el-button link type="primary" size="large" @click="toDetali(scope.row)">{{ scope.row.name
|
|
|
+ }}</el-button>
|
|
|
+ </template>
|
|
|
+ <template v-if="column.event === 'getSex'">
|
|
|
+ {{ getSex(scope.row.sex) }}
|
|
|
</template>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -43,8 +54,7 @@
|
|
|
</div>
|
|
|
<div class="flex justify-end pt-3">
|
|
|
<!-- 分页 -->
|
|
|
- <el-pagination layout="total, prev, pager, next, sizes" :total="formTablePaging.total"
|
|
|
- :hide-on-single-page="true" />
|
|
|
+ <el-pagination layout="total, prev, pager, next, sizes" :total="tableTotal" :hide-on-single-page="true" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -55,7 +65,7 @@
|
|
|
import { ref, reactive, onMounted, inject } from "vue";
|
|
|
import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, getLastDayOfMonth, formatDate } from '@/utils/tools'
|
|
|
import { post, get } from "@/utils/request";
|
|
|
-import { actionButtons, tableColumns, GETSYSFILED, GETPERSONNEL, GETGENERATEFOEM, MOD } from "./api";
|
|
|
+import { actionButtons, tableColumns, GETSYSFILED, GETPERSONNEL, GETGENERATEFOEM, MOD, URL_PAGECONTACTS, getSex } from "./api";
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
|
|
|
const router = useRouter()
|
|
@@ -68,28 +78,26 @@ const filterForm = reactive<FilterForm>({ // 筛选条件
|
|
|
createId: '',
|
|
|
email: '',
|
|
|
});
|
|
|
+const formTablePaging = reactive({ // 分页条件
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
+})
|
|
|
+const tableTotal = ref(0)
|
|
|
const selectData = reactive({ // 下拉数据
|
|
|
Personnel: [] as personnelInterface[],
|
|
|
Customer: [] as any[],
|
|
|
})
|
|
|
const filterItems = ref<FilterItem[]>([
|
|
|
- { label: '联系人', key: 'contactPerson', type: 'input' },
|
|
|
- { label: '客户名称', key: 'customerId', type: 'select', options: selectData.Customer },
|
|
|
- { label: '电话号码', key: 'phoneNumber', type: 'input' },
|
|
|
- { label: '邮箱', key: 'email', type: 'input' },
|
|
|
- { label: '负责人', key: 'responsibleId', type: 'select', options: selectData.Personnel },
|
|
|
- { label: '创建人', key: 'createId', type: 'select', options: selectData.Personnel },
|
|
|
+ { label: '联系人', key: 'contactPerson', type: 'input' },
|
|
|
+ { label: '客户名称', key: 'customerId', type: 'select', options: selectData.Customer },
|
|
|
+ { label: '电话号码', key: 'phoneNumber', type: 'input' },
|
|
|
+ { label: '邮箱', key: 'email', type: 'input' },
|
|
|
+ { label: '负责人', key: 'responsibleId', type: 'select', options: selectData.Personnel },
|
|
|
+ { label: '创建人', key: 'createId', type: 'select', options: selectData.Personnel },
|
|
|
])
|
|
|
-const formTablePaging = reactive({ // 分页条件
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 10,
|
|
|
- total: 0,
|
|
|
-})
|
|
|
const generateFormData = ref([]) // 自定义表单数据
|
|
|
|
|
|
-const formTable = ref([
|
|
|
- {name: '联系人', mobile: '13311112222', email: '123@qq.com', responsible: '张三', createId: '张三'}
|
|
|
-]) // 表格数据
|
|
|
+const formTable = ref([]) // 表格数据
|
|
|
const allLoading = reactive({ // 按钮加载 Loading
|
|
|
formTableLading: false,
|
|
|
})
|
|
@@ -104,6 +112,22 @@ function toDetali(row: any) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function getContactPerson() {
|
|
|
+ allLoading.formTableLading = true
|
|
|
+ const formVal = getFromValue(filterForm)
|
|
|
+ post(URL_PAGECONTACTS, { ...formVal, ...formTablePaging }).then((res) => {
|
|
|
+ const { records, total } = res.data
|
|
|
+ formTable.value = records
|
|
|
+ tableTotal.value = total
|
|
|
+ }).finally(() => {
|
|
|
+ allLoading.formTableLading = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function resetForm() {
|
|
|
+ console.log('重置联系人');
|
|
|
+}
|
|
|
+
|
|
|
async function getSystemField() {
|
|
|
const systemField = getAllListByCode([])
|
|
|
for (let i in systemField) {
|
|
@@ -143,6 +167,7 @@ function setFilterItems() {
|
|
|
|
|
|
onMounted(() => {
|
|
|
getSystemField()
|
|
|
+ getContactPerson()
|
|
|
})
|
|
|
</script>
|
|
|
|