<template>
<div>
<a-form
name="advanced_search"
class="ant-advanced-search-form"
:model="searchForm"
>
<a-form-item label="客户编码" name="customNo">
<a-input-search enter-button v-model:value="searchForm.customNo" style="width: 200px" @search="searchCustomNo"/>
</a-form-item>
</a-form>
<customMultipleModel v-if="childShow" :modelShow="modelShow" :selectType="selectType" @closeModel="changeDialogVisible"/>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref} from 'vue';
import customMultipleModel from '/@/components/custonMultipleSelection/index.vue'
export default defineComponent({
components: {
customMultipleModel
},
setup() {
const searchForm = reactive({}); // form表单字段
const childShow = ref(false) // 弹框是否显示
const modelShow = ref(false) // 子组件弹框状态
const selectType = ref('radio') // 单多选
// 客户编码弹框查询
const searchCustomNo = () => {
modelShow.value = true
childShow.value = true
}
// 弹框关闭回调
const changeDialogVisible = (content) => {
modelShow.value = false
childShow.value = false
if (content) {
searchForm.customNo = content.value
}
}
return {
searchForm,
searchCustomNo,
modelShow,
childShow,
changeDialogVisible,
selectType,
};
},
});
</script>
<style lang="less" scoped>
</style>
<template>
<div>
<a-modal v-model:visible="visible" width="900px" title="选择客户" @cancel="handleCancel">
<template #footer>
<a-button key="back" @click="handleCancel">取消</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认</a-button>
</template>
<a-form
ref="searchForm"
name="advanced_search"
class="ant-advanced-search-form"
:model="customForm"
:label-col="labelCol"
>
<a-form-item label="客户操作吗" name="customOpCode">
<a-input v-model:value="customForm.customOpCode" style="width: 200px" />
</a-form-item>
<a-form-item label="客户编码" name="customNo">
<a-input v-model:value="customForm.customNo" style="width: 200px" />
</a-form-item>
<a-form-item label="客户名称" name="customName">
<a-input v-model:value="customForm.customName" style="width: 200px" />
</a-form-item>
<a-form-item>
<a-button style="margin-left: 30px" type="primary" html-type="submit" @click="searchTableList">搜索</a-button>
<a-button style="margin: 0 8px" @click="resetForm">重置</a-button>
</a-form-item>
</a-form>
<a-table bordered :columns="columns" :data-source="tableData" :scroll="{ y: 300 }" :row-selection="{onChange: onSelectChange, type: selectType}" @change="handleTableChange" :loading="tableLoading" :pagination="pagination" @resizeColumn="handleResizeColumn" :customRow="rowClick"></a-table>
</a-modal>
</div>
</template>
<script lang="ts">
import {defineComponent, ref, reactive} from 'vue';
import {TableProps, Form} from "ant-design-vue";
import {useDemoStore} from '/@/store/demo'
export default defineComponent({
props: {
modelShow: {
type: Boolean,
default: false
},
selectType: {
type: String,
default: 'checkbox'
}
},
setup(props, ctx) {
const demoStore = useDemoStore()
const useForm = Form.useForm
const data = ref(props)
const loading = ref<boolean>(false);
const visible = ref(data.value.modelShow)
const customForm = reactive({ customOpCode: '', customNo: '', customName: '' })
const tableData = ref([]) // 表格渲染数据
const tableLoading = ref(false) // 表格loading状态
const selectData = ref([])
const selectType = data.value.selectType
console.log(data.value)
const handleOk = () => {
visible.value = false
ctx.emit('closeModel', selectData)
};
const handleCancel = () => {
visible.value = false
ctx.emit('closeModel', false)
};
// 分页配置项
let pagination = ref({
// 数据总数
total: 0,
// 当前页数
current: 1,
// 每页条数
pageSize: 20,
// 展示总数
showTotal: (totalSize) => `共 ${totalSize} 条`,
// 是否可以改变pageSize
showSizeChanger: true,
// 设置每页可以展示多少条的选项
pageSizeOptions: ["20", "50", "100", "200"],
// 小尺寸分页
size: "middle",
// 是否可以快速跳转至某页
showQuickJumper: true,
//默认条数
defaultPageSize: 20,
})
const searchTableList = (async (e) => {
if (e !== 'page') {
pagination.value.current = 1
}
tableLoading.value = true
let params = {
pageNum: pagination.value.current,
pageSize: pagination.value.pageSize,
condition: { ...customForm }
}
const res = await demoStore.getCustomerList(params)
tableLoading.value = false
res.data.records.forEach((item, index) => {
item.key = index + 1
})
tableData.value = res.data.records
pagination.value.total = res.data.total
pagination.value.current = res.data.pageNum
pagination.value.pageSize = res.data.pageSize
})
// 分页接口逻辑
const handleTableChange: TableProps['onChange'] = (pag: { pageSize: number; current: number }) => {
pagination.value.current = pag.current
pagination.value.pageSize = pag.pageSize
searchTableList('page')
}
const { resetFields } = useForm(customForm)
const resetForm = () => {
resetFields()
searchTableList()
}
const onSelectChange = (selectedRowKeys, selectedRows) => {
selectData.value = selectedRows.map(item => {
return item.customNo
})
selectData.value = selectData.value.join(',')
};
const rowClick = () => {
return {
onClick: (event) => {
if (selectType === 'radio') {
event.path[1].querySelector('.ant-radio-wrapper').click()
} else {
event.path[1].querySelector('.ant-checkbox-wrapper').click()
}
},
};
}
const columns = ref([
{title: '序号', dataIndex: 'key', resizable: true, width: 50, ellipsis: true},
{title: '客户编码', dataIndex: 'customNo', resizable: true, width: 200, ellipsis: true},
{title: '客户名称', dataIndex: 'customName', resizable: true, width: 350, ellipsis: true},
{title: '客户操作码', dataIndex: 'customOpCode', resizable: true, width: 180, ellipsis: true},
])
return {
visible,
loading,
handleOk,
handleCancel,
labelCol: { style: { width: '100px' } },
customForm,
columns,
pagination,
tableData,
tableLoading,
handleTableChange,
searchTableList,
handleResizeColumn: (w, col) => {
col.width = w;
},
onSelectChange,
resetForm,
rowClick,
selectType,
};
},
});
</script>
<style scoped>
</style>
初学vue3，有什么不同意见大家一起交流，共同进步