global-web/src/views/cuspCode/SupplierProfile/components/SelectProductModal.vue

<template>
    <a-modal
      title="选择产品(select product)"
      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="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="searchQuery">
                    <a-row :gutter="24">
                        <a-col :md="6" :sm="8">
                            <a-form-item label="分类(class)">
                                <!-- <a-input placeholder="请输入" v-model:value="queryParams.classId"></a-input> -->
                                <JSelectInput   v-model:value="queryParams.classId"  placeholder="请选择" :options="classOption" ></JSelectInput>
                            </a-form-item>
                        </a-col>
                        <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="中文名(Chinese name)">
                                <a-input placeholder="请输入" v-model:value="queryParams.chineseName"></a-input>
                            </a-form-item>
                        </a-col>
                        <template v-if="toggleSearchStatus">
                            <a-col :md="6" :sm="8">
                                <a-form-item label="英文名(English name)">
                                    <a-input placeholder="请输入" v-model:value="queryParams.englishName"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="8">
                                <a-form-item label="规格(specifications)">
                                    <a-input placeholder="请输入" v-model:value="queryParams.specifications"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="8">
                                <a-form-item label="型号(model)">
                                    <a-input placeholder="请输入" v-model:value="queryParams.model"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="8">
                                <a-form-item label="虚拟产品(virtual product)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                    <JDictSelectTag v-model:value="queryParams.virtualProduct" placeholder="请选择" dictCode="yes_or_no"/>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="8">
                                <a-form-item label="有害物质(harmful substances)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                    <JDictSelectTag v-model:value="queryParams.harmfulSubstances" 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;">
                <a-table
                    :columns="columns"
                    :row-key="record => record.id"
                    :data-source="dataSource"
                    bordered
                    size="small"
                    @change="handleTableChange"
                    :pagination="pagination"
                    :scroll="{ x: 1800, y: 300 }"
                    :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                >
                </a-table>
            </a-card>
        </div>
      </a-modal>
</template>
<script lang="ts" setup>
    import { defHttp } from '/@/utils/http/axios';
    import { message } from 'ant-design-vue';
    import { JDictSelectTag} from '/@/components/Form';
    import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
    import { ref, reactive, toRaw, toRefs, watch, nextTick, onMounted, getCurrentInstance } from 'vue';
    import { filterObj, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
    const emit = defineEmits([ 'success']); //定义emit
    var visible = ref(false)
    let classOption = ref([])
    const columns = [
        {
            title: '分类(class)',
            dataIndex: 'classId_dictText',
            key: 'classId',
            align:"center"
        },
        {
            title: '编码(code)',
            dataIndex: 'code',
            key: 'code',
            align:"center"
        },
        {
            title: '中文名(Chinese name)',
            dataIndex: 'chineseName',
            key: 'chineseName',
            align:"center",
            width:200
        },
        {
            title: '英文名(English name)',
            key: 'englishName',
            dataIndex: 'englishName',
            align:"center"
        },
        {
            title: '规格(specifications)',
            key: 'specifications',
            dataIndex: 'specifications',
            align:"center"
        },
        {
            title: '型号(model)',
            key: 'model',
            dataIndex: 'model',
            align:"center"
        },
        {
            title: '计量单位(measurement unit)',
            key: 'measurementUnit',
            dataIndex: 'measurementUnit',
            align:"center",
            width:250
        },
        {
            title: '虚拟产品(virtual product)',
            key: 'virtualProduct',
            dataIndex: 'virtualProduct',
            align:"center",
            customRender:function (t, r, index) {
              if(t.text==1){
                return '是(yes)'
              }else if(t.text==0){
                return '否(no)'
              }else{
                return ''
              } 
            }
        },
        {
            title: '有害物质(harmful substances)',
            key: 'harmfulSubstances',
            dataIndex: 'harmfulSubstances',
            align:"center",
            width:250,
            customRender:function (t, r, index) {
              if(t.text==1){
                return '是(yes)'
              }else if(t.text==0){
                return '否(no)'
              }else{
                return ''
              } 
            }
        },
    ];
    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([]);
    let selectedRows = ref([]);
    const toggleSearchStatus = ref(false);
    const queryParams = ref({
        classId:'',
        code:'',
        chineseName:'',
        englishName:'',
        specifications:'',
        model:'',
        chineseAlias:'',
        englishAlias:'',
        status:'',
        virtualProduct:'',
        harmfulSubstances:'',
    });
    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 handleOk() {
    emit('success',selectedRows);
    visible.value = false
    selectedRowKeys.value = []
    selectedRows.value = []
    dataSource.value = []
  }
  function handleCancel() {
    visible.value = false
    selectedRowKeys.value = []
    selectedRows.value = []
    dataSource.value = []
  }
  function getTable(record){
    visible.value = true
    loadData()
    getOptiom()
  }  
  function loadData(){
        let params = getQueryParams();
        params.status = 1
        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 getOptiom(){
    defHttp
        .get({ url: 'baseCode/baseProductClass/list'}, { isTransformResponse: false })
        .then((res) => {
            if (res.success) {
              classOption.value = []
              res.result.records.forEach(element => {
                  var obj = {
                    label: element.name?element.name:'无名称请维护',
                    value: element.id?element.id:''
                  };
                  classOption.value.push(obj)
              });    
            }
        })
        .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 = {
            classId:'',
            code:'',
            chineseName:'',
            englishName:'',
            specifications:'',
            model:'',
            chineseAlias:'',
            englishAlias:'',
            status:'',
            virtualProduct:'',
            harmfulSubstances:'',
        }
        pagination.value.current =1;
        pagination.value.pageSize = 10; 
        loadData();
    }
    function handleToggleSearch(){
        toggleSearchStatus.value = !toggleSearchStatus.value;
    }
    function onSelectChange(keys,rows){
        selectedRowKeys.value = keys
        selectedRows.value = rows
    }
  defineExpose({
    getTable
  });
</script>
<style lang="less" scoped>
/deep/.ant-spin-container{
    padding: 8px;
}
/deep/.ant-form-item{
    margin-bottom: 8px !important;
}
</style>