2.公司里面的控件用法（表格里的）

乞丐大王111

已于 2024-09-04 13:49:32 修改

阅读量288

点赞数 1

文章标签：前端

于 2024-08-28 23:15:56 首次发布

本文链接：https://blog.csdn.net/qigaidawang111/article/details/141651790

版权

明细表格

明细表格（新增或编辑）

data里面定义列表

export const shipmentColumns: BasicColumn[] = [
]

页面

<FormCard :title="t('public.describe.shipmentDetail')" headerStyle="DefaultGradientStyle">
        <template #extra>
        <!-- 左上角按钮-->
          <a-button class="action-button" type="link" @click.stop="handelMoveIn"><PlusOutlined />移入</a-button>
          <a-button class="action-button" type="link" style="color: red;" @click.stop="handelMoveOut"><MinusOutlined />移出</a-button>
          <a @click.stop="$router.push({ path: '/base/sku' })">
            <PlusOutlined style="margin-right: 5px;"/>
            货品
          </a>
            <!-- 左上角文字-->
           <div style="display: inline-block; margin-right: 7px;">总数量: </div>
          <div style="display: inline-block; color: #1c6ca1; margin-right: 30px;"> {{ variable.detailTotal.totQuantity }}</div>
        </template>
        <BasicTable @register="registerTable" :dataSource="variable.tableData" :rowKey="(record, index) => index">
                       <!-- 标题的插槽*-->
					 <template v-slot:headerCell="{ title, column }">
					           <!-- 给skuId的标题加*号-->
					            <template v-if="column.dataIndex === 'skuId'">
					              <span class="my-form-required">{{ t("public.table.skuName")}}</span>
					            </template>
					 </template>
					 
					   <!-- 表格内容的插槽*-->
					 <template v-slot:bodyCell="{ column, record, index }">
					            <template v-if="column.dataIndex === 'action'">
					              <TableAction
					                :actions="[
					               {
					                  label: t('public.button.delete'),
					                  color: 'error',
					                  onClick: deleteTableData.bind(null, record,index),
					               },
					              ]"
					              />
					            </template>                            
					 </template>
        </BasicTable>
         <a-button
          class="add-large-button pr10"
          type="dashed"
          block
          @click="addTableData"  >
          {{ t('public.button.addDetail')}}
         </a-button>
      </FormCard>

/** 明细列表 **/
  const [registerTable, { reload, getForm,getSelectRows,getSelectRowKeys,clearSelectedRowKeys }] = useTable({
    striped: true,
    useSearchForm: false,
    bordered: true,
    showIndexColumn: true,
    columns: shipmentColumns,
    showTableSetting: false,
    pagination: false,
    scroll:{y:300},
    tableSetting: {
      fullScreen: false,
    },
    rowSelection: {
      type: 'checkbox',
      onChange: (selectedRowKeys, selectRows) => {
        variable.ids = selectedRowKeys as string[];
      },
    },
  });

对应的几个方法

  /** 新增明细 **/
  const addTableData = () => {
    variable.tableData.push({
    })
  };
 /** 删除明细 */
  function deleteTableData(record,index) {
    variable.tableData.splice(index, 1)
  }

明细表格：（详情页分页查询）

data里面定义列表（里面的数据其实和新增页面的表格一样的）

export const detailColumns: BasicColumn[] = [
]

页面

 <template #otherBlock>
      <FormCard :title="t('public.describe.routeVia')" headerStyle="DefaultGradientStyle">
        <BasicTable @register="registerTable">
        </BasicTable>
      </FormCard>
</template>

 const pageFunction = (params) => {
    params.routeId= variable.fatherParam.id
    return listRouteViaApi(params)
  }

  const [registerTable, { reload, getForm,setTableData}] = useTable({
    api: pageFunction,
    striped: true,
    useSearchForm: false,
    rowKey: 'id',
    bordered: true,
    showIndexColumn: true,
    clickToRowSelect: true,
    columns:detailColumns,
    showTableSetting: false,
    size:"small",
    canResize: false,
    tableSetting: {
      fullScreen: false,
    },
  });

init 方法里面别忘记（否则不会重新刷新）

 reload()

variable 里面记得定义fatherParam

 // 定义变量
  const variable = reactive<any>({
    title: "",
    confirmLoading: false,
    fatherParam:{},
  });

封装的二级弹框的用法

客户

 {
  title: t('public.table.customer') + ":",
  dataIndex: 'customerId',
  width: 100,
  align: 'left',
  },

用法

 <template v-if="column.dataIndex === 'customerId'">
    <CustomerApiModal v-model:value="record[column.dataIndex]" 
    @getData="(customerRecord) => { getCustomerData(customerRecord, record) }"  />
  </template>

引入

import CustomerApiModal from "@/views/base/customer/CustomerApiModal.vue";

方法

 const getCustomerData=(customerRecord, record)=>{
   
  }

承运商

 {
  title: t('public.table.supplier') + ":",
  dataIndex: 'supplierId',
  colProps: colSpan,
  },

用法

 <template v-if="column.dataIndex === 'supplierId'">
    <SupplierApiModal v-model:value="record[column.dataIndex]"  @getData="getSupplierData"  
     @getData="(supplierRecord) => { getSupplierData(supplierRecord, record) }"  />
  </template>

引入

  import SupplierApiModal from "@/views/base/supplier/SupplierApiModal.vue";

方法

 const getSupplierData =(supplierRecord,record)=>{

  }

车辆（车牌）

 {
  title: t('public.table.vehicle') + ":",
  dataIndex: 'vehicleId',
  colProps: colSpan,
  },

用法

 <template v-if="column.dataIndex === 'vehicleId'">
    <VehicleApiModal v-model:value="record[column.dataIndex]" 
   @getData="(vehicleRecord) => { getVehicleData(vehicleRecord, record) }"  />
  </template>

引入

import VehicleApiModal from "@/views/base/vehicle/VehicleApiModal.vue";

方法

 const getVehicleData=(vehicleRecord,record)=>{

  }

地址点

 {
  title: t('public.table.address') + ":",
  dataIndex: 'addressId',
  colProps: colSpan,
  },

用法

 <template v-if="column.dataIndex === 'addressId'">
    <AddressApiModal v-model:value="record[column.dataIndex]" 
   @getData="(addressRecord) => { getAddressData(addressRecord, record) }"  />
  </template>

引入

  import AddressApiModal from  "@/views/base/address/AddressApiModal.vue";

方法

 const getAddressData=(addressRecord, record)=>{
    
  }

产品

 {
  title: t('public.table.sku') + ":",
  dataIndex: 'skuId',
  colProps: colSpan,
  },

用法

 <template v-if="column.dataIndex === 'skuId'">
    <AddressApiModal v-model:value="record[column.dataIndex]" 
 @getData="(skuRecord) => { getSkuData(skuRecord, record) }"  />
  </template>

引入

  import AddressApiModal from  "@/views/base/sku/SkuApiModal.vue";

方法

 const getSkuData=(skuRecord, record)=>{
  
  }

人员(司机）

 {
  title: t('public.table.driver') + ":",
  dataIndex: 'driverId',
  colProps: colSpan,
  },

用法

<template v-if="column.dataIndex === 'driverId'">
    <StaffApiModal
                v-model:value="record[column.dataIndex]"
                :queryParam="{type:StaffTypeEnum.DRIVER}"
                @getData="(driverRecord) => { getDriverData(driverRecord, record) }" />
  </template>

引入

import StaffApiModal from "@/views/base/staff/StaffApiModal.vue";

方法

 const getDriverData=(driverRecord,record)=>{
 
  }

下拉框的用法

运输服务

 {
  title: t('public.table.transService') + ":",
  dataIndex: 'transServiceId',
  colProps: colSpan,
  },

用法

 <template v-if="column.dataIndex === 'transServiceId'">
   <TransServiceApiSelect    v-model:value="record[column.dataIndex]"  
     @getData="(transServiceIdRecord) => { getDriverData(transServiceIdRecord, record) }" />
  </template>

方法

 const getTransServiceData=(transServiceIdRecord, record)=>{

   
  }

引入

 import TransServiceApiSelect from "@/views/base/transService/TransServiceApiSelect.vue";

银行账号

 {
  title: t('public.table.account') + ":",
  dataIndex: 'accountId',
  colProps: colSpan,
  },

用法

 <template v-if="column.dataIndex === 'accountId'">
    <BankAccountApiSelect v-model:value="record[column.dataIndex]"  
       @getData="(accountRecord) => { getAccountData(accountRecord, record) }" />
  </template>

引入

  import BankAccountApiSelect from "@/views/base/bankAccount/BankAccountApiSelect.vue";

方法

 const getAccountData=(accountRecord, record)=>{
   
  }

包装

 {
  title: t('public.table.package') + ":",
  dataIndex: 'packageCode',
  colProps: colSpan,
  },

用法

 <template v-if="column.dataIndex === 'packageCode'">
    <PackageApiSelect v-model:value="record[column.dataIndex]" 
   @getData="(packageRecord) => { getPackageCodeData(packageRecord, record) }" />
  </template>

引入

   import PackageApiSelect from "@/views/base/package/PackageApiSelect.vue";

方法

 const getPackageCodeData=(packageRecord, record)=>{

  }

单位

 {
  title: t('public.table.uom') + ":",
  dataIndex: 'uomId',
  colProps: colSpan,
  },

用法

 <template v-if="column.dataIndex === 'uomId'">
   <UomApiSelect v-model:value="record[column.dataIndex]" 
      @getData="(uomRecord) => { getUomData(uomRecord, record) }" />
  </template>

引入

 import UomApiSelect from "@/views/base/package/UomApiSelect.vue";

方法

 const getUomData=(uomRecord, record)=>{

  }

货品分类

 {
  title: t('public.table.skuType') + ":",
  dataIndex: 'skuTypeId',
  colProps: colSpan,
  },

用法

 <template v-if="column.dataIndex === 'skuTypeId'">
  <SkuTypeApiSelect v-model:value="record[column.dataIndex]" 
        @getData="(skuTypeRecord) => { getSkuTypeData(skuTypeRecord, record) }" />
 </template>

引入

import SkuTypeApiSelect from "@/views/base/skuType/SkuTypeApiSelect.vue";

方法

 const getSkuTypeData=(skuTypeRecord, record)=>{
 
  }

批次属性

 {
  title: t('public.table.attribute') + ":",
  dataIndex: 'attributeId',
  colProps: colSpan,
  },

用法

 <template v-if="column.dataIndex === 'attributeId'">
  <LotApiSelect v-model:value="record[column.dataIndex]" 
        @getData="(attributeRecord) => { getAttributeData(attributeRecord, record) }" />
  </template>

引入

  import LotApiSelect from '@/views/base/lot/LotApiSelect.vue'

方法

 const getAttributeData=(attributeRecord, record)=>{
 
  }

详情表格插槽

 <template v-slot:bodyCell="{ column, record, index }"> </template>

下拉框

 <template v-if="column.dataIndex === 'dutyType'">
          <Select v-model:value="record[column.dataIndex]" >
            <SelectOption :value="item.value" :key="item.value" v-for="(item) in dict.DicDutyTypeOptions">
              {{ item.label }}
            </SelectOption>
          </Select>
        </template>

数字框

<template v-if="column.dataIndex === 'driverPayAmount'">
          <InputNumber v-model:value="record[column.dataIndex]"
                       :formatter="transformNum"
                       :min="NumberEnum.ZERO"
                       :max="NumberEnum.MAX"
                       :precision="PrecisionEnum.PRICE"
          > </InputNumber>
        </template>

表格渲染

/** 字典查询 */
export const dictMap = await dicDictList([
  DicCodeEnum.TRANS_SCHEDULER_STATUS,
]);

/** 字典表 */
export const dict: any = {
DicTransSchedulerStatusOptions: dictMap[DicCodeEnum.TRANS_SCHEDULER_STATUS],
};

列表渲染

  {
    title: t('public.table.customerName'),
    dataIndex: 'customerDto',
    width: 90,
    align: 'left',
    customRender: ({ value }) => {
      if (isEmptyValue(value)){
        return "";
      }else{
        return value.name;
      }
    },
  },

标识渲染

  {
    title: t('public.table.startFlag'),
    dataIndex: 'startFlag',
    width: 80,
    align: 'left',
    customRender: ({ value }) => {
      return drawYesOrNoLabel(value);
    },
  },

详情渲染

 {
    label: t('public.table.middleFlag'),
    field: 'middleFlag',
    render: (val) => {
      return drawYesOrNoLabel(val);
    },
  },