供应商资质临期页面

src/views/cuspCode/Deadline Reminder/deadlindeReminderList.vue

@@ -0,0 +1,345 @@
+<template>
+    <div>
+        <a-card  :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
+            <div class="table-page-search-wrapper">
+                <a-form :model="queryParams" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="searchQuery">
+                    <a-col :md="6" :sm="8">
+                        <a-form-item label="编码(code)">
+                            <a-input placeholder="请输入" v-model:value="queryParams.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :md="6" :sm="8">
+                        <a-form-item label="名称(name)">
+                            <a-input placeholder="请输入" v-model:value="queryParams.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="toggleSearchStatus">
+                        <a-col :md="6" :sm="8">
+                            <a-form-item label="简称(abbrevation)">
+                                <a-input placeholder="请输入" v-model:value="queryParams.abbrevation"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-item label="税号(duty paragraph)">
+                                <a-input placeholder="请输入" v-model:value="queryParams.dutyParagraph"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-item label="联系人(contact)">
+                                <a-input placeholder="请输入" v-model:value="queryParams.contact"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-item label="联系电话(phone)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
+                                <a-input placeholder="请输入" v-model:value="queryParams.phone"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-item label="付款条件(payment terms)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
+                                <a-input placeholder="请输入" v-model:value="queryParams.paymentTerms"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-item label="国家(country)">
+                                <JDictSelectTag v-model:value="queryParams.country" placeholder="请选择" dictCode="valid_status"/>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-item label="临期天数(deadline days)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
+                                <JDictSelectTag v-model:value="queryParams.deadlineDays" placeholder="请选择" dictCode="yes_or_no"/>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-item label="原厂(original factory)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
+                                <JDictSelectTag v-model:value="queryParams.originalFactory" placeholder="请选择" dictCode="yes_or_no"/>
+                            </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;">
+             <!-- 操作按钮区域 -->
+            <div  style="margin-bottom: 4px;">
+                <!-- <a-button @click="handleAdd" type="primary" preIcon="ant-design:plus" style="margin-right: 1%;">新增(add)</a-button>
+                <a-dropdown v-if="selectedRowKeys.length > 0" >
+                    <template #overlay>
+                        <a-menu>
+                        <a-menu-item key="1" @click="batchHandleDelete">
+                            <Icon icon="ant-design:delete-outlined"></Icon>
+                            删除
+                        </a-menu-item>
+                        </a-menu>
+                    </template>
+                    <a-button v-auth="'baseCode:base_company_information:deleteBatch'">批量操作
+                        <Icon icon="mdi:chevron-down"></Icon>
+                    </a-button>
+                </a-dropdown> -->
+            </div>
+            <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.id"
+                :data-source="dataSource"
+                bordered
+                size="small"
+                @change="handleTableChange"
+                :pagination="pagination"
+                :scroll="{ x: 2500, y: 300 }"
+                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+            >
+                <!-- <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'operation'">
+                        <span>
+                            <a @click="handleemit(record)">编辑(edit)</a>
+                            <a-divider type="vertical" />
+                            <a-popconfirm title="确定删除吗?" @confirm="() => deleteList(record)">
+                                <a>删除(delete)</a>
+                            </a-popconfirm>
+                            
+                        </span>
+                    </template>
+                </template> -->
+            </a-table>
+        </a-card>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { onMounted, ref } from 'vue';
+    import { usePagination } from 'vue-request';
+    import { defHttp } from '/@/utils/http/axios';
+    import { message } from 'ant-design-vue';
+    import { filterObj, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+    import { JDictSelectTag} from '/@/components/Form';
+    const columns = [
+        {
+            title: '编码(code)',
+            dataIndex: 'code',
+            key: 'code',
+            align:"center"
+        },
+        {
+            title: '名称(name)',
+            dataIndex: 'name',
+            key: 'name',
+            align:"center",
+        },
+        {
+            title: '简称(abbrevation)',
+            key: 'abbrevation',
+            dataIndex: 'abbrevation',
+            align:"center"
+        },
+        {
+            title: '税号(duty paragraph)',
+            key: 'dutyParagraph',
+            dataIndex: 'dutyParagraph',
+            align:"center"
+        },
+        {
+            title: '联系人(contact)',
+            key: 'contact',
+            dataIndex: 'contact',
+            align:"center"
+        },
+        {
+            title: '联系电话(phone)',
+            key: 'phone',
+            dataIndex: 'phone',
+            align:"center",
+        },
+        {
+            title: '国家(country)',
+            key: 'country',
+            dataIndex: 'country',
+            align:"center"
+        },
+        {
+            title: '付款条件(payment terms)',
+            key: 'paymentTerms',
+            dataIndex: 'paymentTerms',
+            align:"center",
+            // customRender:function (t, r, index) {
+            //   if(t.text==1){
+            //     return '是(yes)'
+            //   }else if(t.text==0){
+            //     return '否(no)'
+            //   }else{
+            //     return ''
+            //   } 
+            // }
+        },
+        {
+            title: '原厂(original factory)',
+            key: 'originalFactory',
+            dataIndex: 'originalFactory',
+            align:"center",
+        },
+        {
+            title: '资质证书名称(qualification certificate name)',
+            key: 'qualificationCertificateName',
+            dataIndex: 'qualificationCertificateName',
+            align:"center",
+            width:250,
+        },
+        {
+            title: '有效期始(valid begin)',
+            key: 'validBegin',
+            dataIndex: 'validBegin',
+            align:"center",
+        },
+        {
+            title: '有效期止(valid end)',
+            key: 'validEnd',
+            dataIndex: 'validEnd',
+            align:"center",
+        },
+        {
+            title: '资质证书附件(qualification certificate attachment)',
+            key: 'qualificationCertificateAttachment',
+            dataIndex: 'qualificationCertificateAttachment',
+            align:"center",
+        },
+        {
+            title: '临期天数(deadline days)',
+            key: 'deadlineDays',
+            dataIndex: 'deadlineDays',
+            align:"center",
+        },
+    ];
+    const labelCol = ref({
+    xs: { span: 24 },
+    sm: { span: 9 },
+    });
+    const wrapperCol = ref({
+        xs: { span: 24 },
+        sm: { span: 15 },
+    });
+    const labelCol1 = ref({
+    xs: { span: 24 },
+    sm: { span: 12 },
+    });
+    const wrapperCol1 = ref({
+        xs: { span: 24 },
+        sm: { span: 12 },
+    });
+    const dataSource =ref([]);
+    let selectedRowKeys = ref([]);
+    const toggleSearchStatus = ref(false);
+    const queryParams = ref({
+        code:'',
+        name:'',
+        abbrevation:'',
+        dutyParagraph:'',
+        contact:'',
+        phone:'',
+        paymentTerms:'',
+        country:'',
+        deadlineDays:'',
+        originalFactory:'',
+    });
+    let pagination = ref({
+      current: 1,
+      pageSize: 10,
+      total: '', // 假设总共有100条数据
+      showSizeChanger: true,
+      showQuickJumper: true,
+      showTotal: (total, range) => {
+          return range[0] + "-" + range[1] + " 共" + total + "条"
+      },
+      size:'small'
+    });
+    onMounted(() => {
+        //初始加载页面
+        // loadData();
+        // getOptiom()
+    });
+    function loadData(){
+        let params = getQueryParams();
+        defHttp
+        .get({ url: '/baseCode/baseProductArchive/list',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(){
+        loadData();
+    }
+    function searchReset(){
+        queryParams.value = {
+            code:'',
+            name:'',
+            abbrevation:'',
+            dutyParagraph:'',
+            contact:'',
+            phone:'',
+            paymentTerms:'',
+            country:'',
+            deadlineDays:'',
+            originalFactory:'',
+        }
+        pagination.value.current =1;
+        pagination.value.pageSize = 10; 
+        loadData();
+    }
+    function handleToggleSearch(){
+        toggleSearchStatus.value = !toggleSearchStatus.value;
+    }
+    function onSelectChange(keys){
+        selectedRowKeys.value = keys
+    }
+</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>