|
|
@@ -0,0 +1,307 @@
|
|
|
+<template>
|
|
|
+ <a-modal
|
|
|
+ title="选择佣金合同(select commission contract)"
|
|
|
+ width="95%"
|
|
|
+ :visible="visible"
|
|
|
+ :maskClosable="false"
|
|
|
+ switchFullscreen
|
|
|
+ @ok = "handleOk"
|
|
|
+ @cancel="handleCancel">
|
|
|
+ <div>
|
|
|
+ <a-card :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form :model="queryParams" :label-col="{ style: 'width: 200px' }" @keyup.enter.native="searchQuery">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="合同编号号(bill code)">
|
|
|
+ <j-input placeholder="请输入" v-model:value="queryParams.billCode" ></j-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="合同日期(bill date)">
|
|
|
+ <a-range-picker value-format="YYYY-MM-DD" v-model:value="billDate" @change="changeBillDate" class="query-group-cust"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <template v-if="toggleSearchStatus">
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="供应商(supplier)" >
|
|
|
+ <JSelect v-model:value="queryParams.supplier" :get-option-url="supplierOption" :showField="showField"></JSelect>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="业务员(salesman)" >
|
|
|
+ <j-input placeholder="请输入" v-model:value="queryParams.salesman"></j-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="销售部门(sale department)">
|
|
|
+ <j-input placeholder="请输入" v-model:value="queryParams.saleDepartment"></j-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
|
|
+ <a-button type="primary" @click="searchQuery" >查询(search)</a-button>
|
|
|
+ <a-button type="primary" @click="searchReset" style="margin-left: 8px">重置(reset)</a-button>
|
|
|
+ <a @click="handleToggleSearch" style="margin-left: 8px">
|
|
|
+ {{ toggleSearchStatus ? '收起' : '展开' }}
|
|
|
+ <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
|
|
|
+ </a>
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+
|
|
|
+ <a-card :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
|
|
|
+ <a-alert type="info" show-icon class="alert" style="margin-bottom: 8px">
|
|
|
+ <template #message>
|
|
|
+ <template v-if="selectedRowKeys.length > 0">
|
|
|
+ <span>已选中 {{ selectedRowKeys.length }} 条记录</span>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a @click="selectedRowKeys = []">清空</a>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span>未选中任何数据</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-alert>
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :row-key="record => record.childId"
|
|
|
+ :data-source="dataSource"
|
|
|
+ bordered
|
|
|
+ size="small"
|
|
|
+ @change="handleTableChange"
|
|
|
+ :pagination="pagination"
|
|
|
+ :scroll="{ x: 1000, y: 400 }"
|
|
|
+ :rowSelection="{onSelect: onSelect, onSelectAll: onSelectAll, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
|
|
+ >
|
|
|
+ </a-table>
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+ import {ref } from 'vue';
|
|
|
+ import { defHttp } from '/@/utils/http/axios';
|
|
|
+ import { message } from 'ant-design-vue';
|
|
|
+ import { filterObj } from '/@/utils/common/compUtils';
|
|
|
+ import { JInput,JSelect} from '/@/components/Form';
|
|
|
+ import {supplierOption} from '../commissionOrderForm.api';
|
|
|
+ const emit = defineEmits([ 'selectCommissionContract']); //定义emit
|
|
|
+ var visible = ref(false)
|
|
|
+ var showField = ref('currency+name');
|
|
|
+ const columns = [
|
|
|
+ // {
|
|
|
+ // type: 'selection',
|
|
|
+ // // fixed: 'left',
|
|
|
+ // // width:"50px",
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: '合同编号(bill code)',
|
|
|
+ dataIndex: 'billCode',
|
|
|
+ key: 'billCode',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '合同日期(bill date)',
|
|
|
+ dataIndex: 'billDate',
|
|
|
+ key: 'billDate',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '供应商(supplier)',
|
|
|
+ key: 'supplierName',
|
|
|
+ dataIndex: 'suppilerName',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '销售部门(sale department)',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'saleDepartment'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '业务员(salesman)',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'salesman'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '佣金比例(commission rate)',
|
|
|
+ align:"center",
|
|
|
+ dataIndex: 'headModel'
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const dataSource =ref([]);
|
|
|
+ let selectedRowKeys = ref([]);
|
|
|
+ let selectionRows = ref([]);
|
|
|
+ const toggleSearchStatus = ref(false);
|
|
|
+ var billDate = ref([])
|
|
|
+ const queryParams = ref({
|
|
|
+ billCode:'',
|
|
|
+ supplier:'',
|
|
|
+ inquirySuppiler:'',
|
|
|
+ salesman:'',
|
|
|
+ saleDepartment:'',
|
|
|
+ });
|
|
|
+ let pagination = ref({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: '', // 假设总共有100条数据
|
|
|
+ showSizeChanger: true,
|
|
|
+ showQuickJumper: true,
|
|
|
+ showTotal: (total, range) => {
|
|
|
+ return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
|
+ },
|
|
|
+ size:'small'
|
|
|
+ });
|
|
|
+ function loadData(){
|
|
|
+ let params = getQueryParams();
|
|
|
+ // defHttp
|
|
|
+ // .get({ url: '/purCode/purInquiryForm/alertPurInquiryList',params}, { isTransformResponse: false })
|
|
|
+ // .then((res) => {
|
|
|
+ // if (res.success) {
|
|
|
+ // dataSource.value = res.result.records;
|
|
|
+ // pagination.value.total = res.result.total;
|
|
|
+ // pagination.value.current = res.result.current;
|
|
|
+ // pagination.value.pageSize = res.result.size;
|
|
|
+ // } else {
|
|
|
+ // message.error(res.message);
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // .finally(() => {
|
|
|
+ // // loading.value = false;
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ function getQueryParams(){
|
|
|
+ let params = Object.assign(queryParams.value);
|
|
|
+ params.pageNo = pagination.value.current;
|
|
|
+ params.pageSize = pagination.value.pageSize;
|
|
|
+ return filterObj(params);
|
|
|
+ }
|
|
|
+ function handleTableChange(paginations, filters, sorter){
|
|
|
+ pagination.value.total = paginations.total;
|
|
|
+ pagination.value.current = paginations.current;
|
|
|
+ pagination.value.pageSize = paginations.pageSize;
|
|
|
+ loadData()
|
|
|
+ };
|
|
|
+
|
|
|
+ function searchQuery(){
|
|
|
+ pagination.value.current =1;
|
|
|
+ selectedRowKeys.value = []
|
|
|
+ selectionRows.value=[]
|
|
|
+ loadData();
|
|
|
+ }
|
|
|
+ function searchReset(){
|
|
|
+ billDate.value = []
|
|
|
+ queryParams.value = {
|
|
|
+ billCode:'',
|
|
|
+ supplier:'',
|
|
|
+ inquirySuppiler:'',
|
|
|
+ salesman:'',
|
|
|
+ saleDepartment:'',
|
|
|
+ }
|
|
|
+ pagination.value.current =1;
|
|
|
+ pagination.value.pageSize = 10;
|
|
|
+ selectedRowKeys.value = []
|
|
|
+ selectionRows.value=[]
|
|
|
+ loadData();
|
|
|
+ }
|
|
|
+ function handleToggleSearch(){
|
|
|
+ toggleSearchStatus.value = !toggleSearchStatus.value;
|
|
|
+ }
|
|
|
+ function onSelectChange(selectedRowKeys1, selectionRows1) {
|
|
|
+ var arr = []
|
|
|
+ selectionRows.value.map(item=>{
|
|
|
+ arr.push(item.childId)
|
|
|
+ })
|
|
|
+ selectedRowKeys.value = arr
|
|
|
+ }
|
|
|
+ function onSelect(record, selected, selectionRows1, nativeEvent) {
|
|
|
+ if (selected) {
|
|
|
+ selectionRows.value.push(record)
|
|
|
+ console.log( selectionRows.value);
|
|
|
+ }else{
|
|
|
+ const delIndex = selectionRows.value.findIndex((val) => {
|
|
|
+ return val.childId === record.childId
|
|
|
+ })
|
|
|
+ selectionRows.value.splice(delIndex, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function onSelectAll(selected, selectionRows1, changeRows) {
|
|
|
+ if (selected) {
|
|
|
+ selectionRows.value = selectionRows.value.concat(changeRows)
|
|
|
+ }
|
|
|
+ if (!selected) {
|
|
|
+ let selectionRows2 = JSON.parse(JSON.stringify(selectionRows.value))
|
|
|
+ const delIndex = []
|
|
|
+ selectionRows2.forEach((item, index) => {
|
|
|
+ changeRows.forEach((val, itemIndex) => {
|
|
|
+ if (item.childId === val.childId) {
|
|
|
+ delIndex.push(index)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ delIndex.forEach((item) => {
|
|
|
+ delete selectionRows2[item]
|
|
|
+ })
|
|
|
+ selectionRows2 = selectionRows2.filter((item) => {
|
|
|
+ return item !== undefined
|
|
|
+ })
|
|
|
+ selectionRows.value = selectionRows2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function handleOk(){
|
|
|
+ if(selectedRowKeys.value.length==0){
|
|
|
+ message.error('请勾选数据');
|
|
|
+ }else{
|
|
|
+ emit('selectCommissionContract', selectionRows.value)
|
|
|
+ handleCancel()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function handleCancel(){
|
|
|
+ visible.value = false
|
|
|
+ billDate.value = []
|
|
|
+ queryParams.value = {
|
|
|
+ billCode:'',
|
|
|
+ supplier:'',
|
|
|
+ inquirySuppiler:'',
|
|
|
+ salesman:'',
|
|
|
+ saleDepartment:'',
|
|
|
+ }
|
|
|
+ selectedRowKeys.value = []
|
|
|
+ selectionRows.value=[]
|
|
|
+ pagination.value.current =1;
|
|
|
+ pagination.value.pageSize = 10;
|
|
|
+ }
|
|
|
+ function getTable(formData){
|
|
|
+ visible.value = true
|
|
|
+ loadData()
|
|
|
+ }
|
|
|
+ function changeBillDate(prop){
|
|
|
+ if(prop){
|
|
|
+ billDate.value = prop
|
|
|
+ queryParams.value.billDate_begin = prop[0]
|
|
|
+ queryParams.value.billDate_end = prop[1]
|
|
|
+ }else{
|
|
|
+ billDate.value = []
|
|
|
+ queryParams.value.billDate_begin = ''
|
|
|
+ queryParams.value.billDate_end = ''
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ defineExpose({
|
|
|
+ getTable
|
|
|
+ });
|
|
|
+</script>
|
|
|
+<style scoped lang="less">
|
|
|
+/deep/.ant-form-item{
|
|
|
+ margin-bottom: 8px !important;
|
|
|
+}
|
|
|
+// /deep/.ant-table-wrapper .ant-table-thead > tr > th, .ant-table-wrapper .ant-table-thead > tr > td{
|
|
|
+// padding: 8px !important;
|
|
|
+// }
|
|
|
+
|
|
|
+</style>
|
