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

<template>
    <a-modal
      title="供货目录(supply catalog)"
      width="95%"
      :visible="visible"
      :maskClosable="false"
      switchFullscreen
      @ok = "handleOk"
      @cancel="handleCancel">
        <a-spin :spinning="loading" >
           <a-button type="primary" v-auth="'cuspCode:cusp_supplier_profile:add'"  @click="selectProducts" preIcon="ant-design:plus-outlined">选择产品(select product)</a-button>
            <a-table
                :columns="columns"
                :row-key="record => record.id"
                :data-source="dataSource"
                bordered
                size="small"
                height="500"
                :pagination="false"
                :scroll="{ x: 1800, y: 500 }"
            > 
                <template #valid="{ text, record }">
                  <!-- <a-select v-model:value="record.valid" v-bind="attrs">
                    <a-select-option  value="1">是(yes)</a-select-option>
                    <a-select-option  value="1">否(no)</a-select-option>
                  </a-select> -->
                    <JDictSelectTag v-model:value="record.valid"  placeholder="请选择" dictCode="yes_or_no" stringToNumber/>
                </template>
                <template #action="{ text, record,index }">
                    <a @click="deleteRow(index)">删除(delete)</a>
                </template>
            </a-table>
        </a-spin>
        <SelectProductModal ref="SelectProductModalRef" @success="addRow"></SelectProductModal>
    </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 SelectProductModal from './SelectProductModal.vue';
  import { ref, reactive, toRaw, toRefs, watch, nextTick, onMounted, getCurrentInstance,readonly  } from 'vue';
  const emit = defineEmits([ 'success']); //定义emit
  var visible = ref(false)
  let loading = ref(false)
  var dataSource = ref([]);
  var SelectProductModalRef = ref()
  var headId = ref('')
  var columns = reactive([
        {
            title: '分类(class)',
            dataIndex: 'classId',
            key: 'classId',
            align:"center",
           ellipsis: true,
        },
        {
            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",
            width:200
        },
        // {
        //     title: '规格(specifications)',
        //     key: 'specifications',
        //     dataIndex: 'specifications',
        //     align:"center",
        //     width:150
        // },
        {
            title: '型号(model)',
            key: 'model',
            dataIndex: 'model',
            align:"center"
        },
        {
            title: '计量单位(measurement unit)',
            key: 'measurementUnit',
            dataIndex: 'measurementUnit',
            align:"center",
            width:250
        },
        {
            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 ''
              } 
            }
        },
        {
            title: '是否有效(valid)',
            key: 'valid',
            dataIndex: 'valid',
            align:"center",
            slots: { customRender: 'valid' },
        },
        {
            title: '操作(operation)',
            key: 'operation',
            dataIndex: 'operation',
            align:"center",
            fixed: 'right',
            slots: { customRender: 'action' },
        },
  ]);
  function handleOk() {
    if(dataSource.value.length==0){
      message.warn('请选择产品');
    }else{
      dataSource.value.map(item=>{
        item.headId = headId.value
        item.productId =item.productId&&item.productId!==''?item.productId:item.id
      })
      defHttp.post({ url: '/cuspCode/cuspSupplierProfileCatalog/add', params: {cuspSupplierProfileCatalog:dataSource.value} }, { isTransformResponse: false }).then((res)=>{
        if(res.success){
          emit('success');
          visible.value = false
        }else{
          message.warning(res.message);
        }

      });
    }
    
  }
  function handleCancel() {
    visible.value = false
    emit('success');
    dataSource.value = []
  }
  function getTable(record){
    visible.value = true
    headId.value = record
    let params = {id:record}
    defHttp.get({url:"/cuspCode/cuspSupplierProfileCatalog/querySupplierProfileCatalogByMainId",params}).then(res=>{
      if(res){
        dataSource.value = res
      }
    })
  }  
  function selectProducts(){
    SelectProductModalRef.value.getTable()
  }
  function deleteRow(index){
    dataSource.value.splice(index, 1);
  }
  function addRow(selectedRows){
    var arr =[...selectedRows.value, ...dataSource.value]
    dataSource.value = arr    
  }
  defineExpose({
    getTable
  });
</script>
<style lang="less" scoped>
/deep/.ant-spin-container{
    padding: 8px;
}
/deep/.ant-select-dropdown{
  position: fixed !important;
  // margin-top: 15%;
  // margin-left: 82%;
}
</style>