205 lines
8.1 KiB
Vue
205 lines
8.1 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="main-from common-box">
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="70px">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="可用状态">
|
|
<el-select v-model="formInline.isEnable" placeholder="请选择" clearable>
|
|
<el-option label="启用" value="0" />
|
|
<el-option label="禁用" value="1" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="名称">
|
|
<el-input v-model="formInline.name" placeholder="请输入名称" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="编码">
|
|
<el-input v-model="formInline.codeNum" placeholder="请输入编码" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
<el-button type="primary" @click="onSubmit">重置</el-button>
|
|
<el-button @click="onSubmit">保存</el-button>
|
|
<el-button type="primary" @click="onSubmit">新增</el-button>
|
|
<el-button @click="onSubmit" type="warning">删除</el-button>
|
|
<el-button @click="onSubmit">启用</el-button>
|
|
<el-button @click="onSubmit">禁用</el-button>
|
|
<el-dropdown style="margin-left: 10px;">
|
|
<el-button type="primary">
|
|
更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>导入</el-dropdown-item>
|
|
<el-dropdown-item>导出</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="main-table common-box">
|
|
<div class="tab-hed">
|
|
<el-select v-model="formInline.checked" placeholder="分类" clearable style="width: 200px;">
|
|
<el-option label="所有" value="0" />
|
|
<el-option :label="item.name" :value="item.id" v-for="item,index in getCustonClassDate" :key="index"/>
|
|
</el-select>
|
|
<div>
|
|
<el-button type="success" link
|
|
style="border-right: 1px #515a6e solid; border-radius: 0px; margin-right: 3px; padding: 0 3px;">新增</el-button>
|
|
<el-dropdown>
|
|
<span class="el-dropdown-link">
|
|
更多
|
|
<el-icon class="el-icon--right">
|
|
<arrow-down />
|
|
</el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>查看</el-dropdown-item>
|
|
<el-dropdown-item>修改</el-dropdown-item>
|
|
<el-dropdown-item>删除</el-dropdown-item>
|
|
<el-dropdown-item>刷新</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
<div class="tab">
|
|
<vxe-table show-overflow height="100%" :data="customDate" :border=true :tree-config="{ transform: true }"
|
|
:scroll-y="{ gt: 20 }">
|
|
<vxe-column type="checkbox" width="60" fixed="left"></vxe-column>
|
|
<vxe-column field="codeNum" sortable title="编码" width="120"></vxe-column>
|
|
<vxe-column field="name" sortable title="名称" width="120"></vxe-column>
|
|
<vxe-column field="classify" sortable title="分类" width="120"></vxe-column>
|
|
|
|
<vxe-column field="age" sortable title="年龄" width="120"></vxe-column>
|
|
<vxe-column field="expandField" sortable title="客户扩展字段整形2" width="180"></vxe-column>
|
|
<vxe-column field="contactse" sortable title="联系人" width="120"></vxe-column>
|
|
<vxe-column field="brand" sortable title="品牌" width="120"></vxe-column>
|
|
<vxe-column field="externalNumberf" sortable title="外部编号" width="150"></vxe-column>
|
|
<vxe-column field="isEnable" sortable title="可用状态" width="120"></vxe-column>
|
|
<vxe-column field="f" sortable title="手机" width="120"></vxe-column>
|
|
<vxe-column field="f" sortable title="微信" width="120"></vxe-column>
|
|
<vxe-column field="f" sortable title="所在地区" width="120"></vxe-column>
|
|
<vxe-column field="f" sortable title="备注" width="120"></vxe-column>
|
|
<vxe-column field="createUserName" sortable title="创建人" width="120"></vxe-column>
|
|
<vxe-column field="createTime" sortable title="创建时间" width="120"></vxe-column>
|
|
<vxe-column field="updateTime" sortable title="同步时间" width="120"></vxe-column>
|
|
<vxe-column title="操作" width="200" fixed="right" show-overflow>
|
|
<template #default="{ row }">
|
|
<vxe-button type="text">查看</vxe-button>
|
|
<!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
|
|
</div>
|
|
<div>
|
|
<vxe-pager v-model:current-page="pageVO1.currentPage" v-model:page-size="pageVO1.pageSize"
|
|
:total="pageVO1.total" />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, reactive,ref } from 'vue'
|
|
import { getAPI } from '/@/utils/axios-utils';
|
|
import { CustomApi, CustonClassifyApi } from '/@/api-services/api';
|
|
import { CustomOutput, CustonClassifyOutput } from '/@/api-services/models';
|
|
|
|
//获取客户分类数据
|
|
let getCustonClassDate = ref([] as CustonClassifyOutput[]);
|
|
const getCustonClass = async() => {
|
|
let res = await getAPI(CustonClassifyApi).apiCustonClassifyListGet();
|
|
getCustonClassDate.value = res.data.result!;
|
|
|
|
}
|
|
|
|
|
|
//获取客户数据
|
|
let customDate = ref([] as CustomOutput[]);
|
|
const getCustom = async() => {
|
|
let res = await getAPI(CustomApi).apiCustomPagePost();
|
|
customDate.value = res.data.result?.items!;
|
|
pageVO1.total = res.data.result?.total!;
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
getCustonClass()
|
|
getCustom()
|
|
})
|
|
|
|
const formInline = reactive({
|
|
name:'',//名称
|
|
isEnable:"",//可用状态
|
|
codeNum:'',//编码
|
|
checked:''
|
|
})
|
|
|
|
const onSubmit = () => {
|
|
console.log('submit!')
|
|
}
|
|
|
|
|
|
const tableData = ref([
|
|
|
|
])
|
|
|
|
const pageVO1 = reactive({
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.main-from {
|
|
// height: 300px;
|
|
width: 100%;
|
|
padding: 20px 10px;
|
|
|
|
.el-row {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.main-table {
|
|
margin-top: 20px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
flex-grow: 1;
|
|
height: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tab {
|
|
flex: 1;
|
|
overflow: scroll;
|
|
}
|
|
.tab-hed{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 5px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |