12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343 |
- <template>
- <!-- 发运明细 列表 -->
- <div id="ShipmentList">
- <!-- 查询 回显 且 可编辑 -->
- <a-card :bordered="false">
- <div class="table-page-search-wrapper">
- <a-form layout="inline" @keyup.enter.native="searchQuery">
- <a-row :gutter="25">
- <a-col :md="5" :sm="8">
- <a-form-item label="订单号">
- <a-input placeholder="请输入订单号" v-model="queryParam.orderNumber"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="5" :sm="8">
- <a-form-item label="款号">
- <a-input placeholder="请输入款号" v-model="queryParam.itemNumber"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="5" :sm="8">
- <a-form-model-item label="类型">
- <a-select v-model="queryParam.flourOrGarment">
- <a-select-option value="">请选择</a-select-option>
- <a-select-option value="1">成衣</a-select-option>
- <a-select-option value="0">面辅料</a-select-option>
- </a-select>
- </a-form-model-item>
- </a-col>
-
- <a-col :md="5" :sm="8">
- <a-form-item label="预发货日期">
- <a-range-picker
- :placeholder="['开始时间', '结束时间']"
- format="YYYY-MM-DD"
- style="width: 100%"
- v-model="preDeliveryDate"
- @change="deliveryDateChange"
- />
- </a-form-item>
- </a-col>
- <template v-if="toggleSearchStatus">
- <a-col :md="5" :sm="8">
- <a-form-item label="账套号">
- <!-- <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input> -->
- <j-search-select-tag
- placeholder="请选择账套号"
- v-model="queryParam.account"
- dict="view_account,account,account">
- </j-search-select-tag>
- </a-form-item>
- </a-col>
- <a-col :md="5" :sm="8">
- <a-form-item label="业务员">
- <!-- <a-input placeholder="请输入业务员" v-model="queryParam.salesman"></a-input> -->
- <j-search-select-tag
- placeholder="请选择业务员"
- v-model="queryParam.salesman"
- dict="view_salesman,salesman,salesman">
- </j-search-select-tag>
- </a-form-item>
- </a-col>
-
- <a-col :md="5" :sm="8">
- <a-form-item label="是否被参照">
- <a-select v-model="queryParam.refer">
- <a-select-option value="">请选择</a-select-option>
- <a-select-option value="0">否</a-select-option>
- <a-select-option value="1">是</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :md="5" :sm="8">
- <a-form-item label="是否提交">
- <a-select v-model="queryParam.submitStatus">
- <a-select-option value="">请选择</a-select-option>
- <a-select-option value="0">否</a-select-option>
- <a-select-option value="1">是</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :md="5" :sm="8">
- <a-form-item label="小po">
- <a-input placeholder="请输入小po" v-model="queryParam.smallPo"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="5" :sm="8">
- <a-form-item label="起始时间">
- <a-range-picker
- style="width: 100%"
- v-model="timeRange"
- format="YYYY-MM-DD"
- :placeholder="['开始时间', '结束时间']"
- @change="onDateChange"
- @ok="onDateOk"
- />
- </a-form-item>
- </a-col>
- <a-col :md="5" :sm="8">
- <a-form-item label="供应商">
- <!-- <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input> -->
- <j-search-select-tag
- placeholder="请选择供应商"
- v-model="queryParam.supplier"
- dict="view_supplier,supplier,supplier">
- </j-search-select-tag>
- </a-form-item>
- </a-col>
- <a-col :md="5" :sm="8">
- <a-form-item label="分销点">
- <!-- <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input> -->
- <j-search-select-tag
- placeholder="请选择分销点"
- v-model="queryParam.distributionPoint"
- dict="view_distributionpoint,distributionPoint,distributionPoint">
- </j-search-select-tag>
- </a-form-item>
- </a-col>
- <a-col :md="5" :sm="8">
- <a-form-item label="客户简称">
- <!-- <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input> -->
- <j-search-select-tag
- placeholder="请选择客户简称"
- v-model="queryParam.customerAbbreviation"
- dict="view_customer,customername,customername">
- </j-search-select-tag>
- </a-form-item>
- </a-col>
-
- <a-col :md="5" :sm="8">
- <a-form-model-item label="申报要素是否维护">
- <a-select v-model="queryParam.isElement">
- <a-select-option value="">请选择</a-select-option>
- <a-select-option value="1">已维护</a-select-option>
- <a-select-option value="0">未维护</a-select-option>
- </a-select>
- </a-form-model-item>
- </a-col>
- <a-col :md="5" :sm="8">
- <a-form-model-item label="是否全选">
- <a-select v-model="allList">
- <a-select-option value="1">全选</a-select-option>
- <a-select-option value="0">勾选</a-select-option>
- </a-select>
- </a-form-model-item>
- </a-col>
- </template>
- <a-col :md="4" :sm="8">
- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
- <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</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-spin :spinning="loading">
- <a-card :bordered="false" style=" marginTop:10px;">
- <div class="table-operator">
- <!-- <a-button type="primary" @click.stop="addShipDet" icon="plus">新增</a-button> -->
- <a-button type="primary" @click.stop="referOrderDataOpen" icon="plus" >参照订单数据</a-button>
- <a-button type="primary" icon="download" @click="handleExportXls('出运成衣')" :disabled="exportButton == '1'">成衣导出-预装箱单</a-button>
- <a-button type="primary" icon="download" @click="handleExportXls('出运面辅料')" :disabled="exportButton1 == '1'">面辅料导出-装箱单</a-button>
- <a-button type="primary" icon="download" @click="exportXlsShipment('出运明细列表')">出运明细导出</a-button>
- <a-button type="primary" icon="check" @click="submit">批量提交</a-button>
- <a-button type="primary" icon="close" @click="cancelSubmit">批量取消提交</a-button>
- <a-button type="primary" icon="close" @click="batchDelete">批量删除</a-button>
- </div>
-
- <!-- 测试 -->
- <ve-table :columns="columns" :virtual-scroll-option="virtualScrollOption" :max-height="600" :table-data="shipmentListData" style="width:100%" :border-y="true" :sort-option="sortOption" :scroll-width="1500" row-key-field-name="itemIds" :checkbox-option="checkboxOption">
- </ve-table>
- <div v-show="showEmpty" class="empty-data">暂无数据</div>
- <span style="margin-right: 55%;">共勾选{{selectedNumber}}条数</span>
- <span >总数量:{{ allMoney }}</span>
- </a-card>
- </a-spin>
- <!-- 抽屉 -->
- <div>
- <!-- <addShipDet-drawer ref="addShipDetDrawer" :fatherList="getShipmentList" @ok="modalFormOk" @close="closeAdd"></addShipDet-drawer> -->
- <!-- 参照订单数据 -->
- <referOrderData-modal ref="referOrderDataModal" @close="closeAdd" ></referOrderData-modal>
- <editShipDet-drawer ref="editShipDetDrawer" :fatherList="getShipmentList" @ok="modalFormOk" @close='closeAddEdit'></editShipDet-drawer>
- <detailsShipDet-drawer ref="detailsShipDetDrawer" @ok="modalFormOk"></detailsShipDet-drawer>
- <!-- 申报要素 弹框 -->
- <declareElements-modal ref="declareElementsModal" @table="getShipmentList" @save-information="saveInformation" @close-declare="closeDeclare" @close-data="closeData"></declareElements-modal>
- <!-- 维护款号成分 -->
- <itemNumEle-modal ref="itemNumEleModal" @close="closeItemNumEle" @closeItem="changeList"></itemNumEle-modal>
- </div>
- </div>
- </template>
- <script>
- import { JeecgListMixin } from '@/mixins/JeecgListMixin'
- import JEllipsis from '@/components/jeecg/JEllipsis'
- import moment from 'moment'
- import { downFile } from '@/api/manage'
- import addShipDetDrawer from '@views/shipment-details/addShipDetDrawer.vue'
- import detailsShipDetDrawer from '@views/shipment-details/detailsShipDetDrawer.vue'
- import editShipDetDrawer from '@views/shipment-details/editShipDetDrawer.vue'
- import declareElementsModal from '@views/shipment-details/declareElementsModal.vue'
- import Drapp from './dropp.vue'
- import ReferOrderDataModal from '@views/shipment-details/referOrderDataModal.vue'
- import itemNumEleModal from '@views/shipment-details/itemNumEleModal.vue'
- import { randomUUID } from '@/utils/util'
- import { USER_AUTH } from "@/store/mutation-types"
- import {
- shipmentList,
- deleteShipment,
- submitShipment,
- shipmentQueryById,
- queryByDetails,
- queryDeclarationElements,
- cancelSubmitShipment,
- pushShipment,
- rePushShipment,
- exportXls,
- listExportXls,
- deleteBatch
- } from '@api/document/shipmentList'
- export default {
- name: 'ShipmentList', // 发运明细列表
- mixins: [JeecgListMixin],
- components: {
- JEllipsis,
- moment,
- addShipDetDrawer,
- detailsShipDetDrawer,
- editShipDetDrawer,
- declareElementsModal,
- ReferOrderDataModal,
- cancelSubmitShipment,
- pushShipment,
- rePushShipment,
- itemNumEleModal,
- Drapp,
- },
- data() {
- let ellipsis = (v,l) => <j-ellipsis value={v} length={l} />
- return {
- loading: false, // 表格加载
- exportButton: '1',
- exportButton1:'1',
- id: '',
- authority:true,
- selectedNumber:0,//已选择条数
- monthStartDate:'',//本月1号
- nextMonthStartDate:'',//下月1号
- nextMonthEndDate:'',//下月最后一天
- allList:'0',
- virtualScrollOption: {
- // 是否开启
- enable: false,
- },
- checkboxOption: {
- selectedRowKeys: [],
- // 行选择改变事件
- selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
- this.checkboxOption.selectedRowKeys = selectedRowKeys
- this.selectedRowKeys = selectedRowKeys;
- this.selectedRows.push(row);
- this.selectedNumber =this.selectedRowKeys.length
- },
- // 全选改变事件
- selectedAllChange: ({ isSelected, selectedRowKeys }) => {
- this.checkboxOption.selectedRowKeys = []
- this.checkboxOption.selectedRowKeys = selectedRowKeys
- this.selectedRowKeys = selectedRowKeys;
- if(isSelected){
- this.selectedRows = this.shipmentListData
- }else{
- this.selectedRows = []
- }
- this.selectedNumber =this.selectedRowKeys.length
- },
- },
- sortOption: {
- sortChange: (params) => {
- this.sortChange(params);
- },
- },
- shipmentListColumns: [
- {
- title: '账套',
- dataIndex: 'account',
- width: 85,
- fixed: 'left',
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.account - b.account,
- },
- {
- title: '销售订单号',
- dataIndex: 'orderNumber',
- // fixed: 'left',
- // customRender: t => ellipsis(t,17),
- width: 180,
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.orderNumber - b.orderNumber,
- },
- {
- title: '款号',
- dataIndex: 'itemNumber',
- width: 130,
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.itemNumber - b.itemNumber,
- },
- {
- title: '业务员',
- dataIndex: 'salesman',
- width: 100,
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.salesman - b.salesman,
-
- },
- {
- title: '分销点',
- dataIndex: 'distributionPoint',
- width: 110,
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.distributionPoint - b.distributionPoint,
- },
- {
- title: '小po',
- dataIndex: 'smallPo',
- width: 110,
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.smallPo - b.smallPo,
- },
- {
- title: '存货名称',
- dataIndex: 'inventoryName',
- width: 220,
- className: 'replacecolor',
- ellipsis: true,
- sorter:(a, b) => a.inventoryName - b.inventoryName,
- },
- {
- title: '报关品名',
- dataIndex: 'declarationName',
- width: 175,
- className: 'replacecolor',
- ellipsis: true,
- sorter:(a, b) => a.declarationName - b.declarationName,
- },
- {
- title: '是否TC',
- dataIndex: 'isTc',
- width: 110,
- customRender: function(text) {
- if (text === '0') {
- return '否'
- }
- if (text === '1') {
- return '是'
- }
- },
- className: 'replacecolor',
- sorter:(a, b) => a.isTc - b.isTc,
- },
- {
- title: '预发货日期',
- dataIndex: 'preDeliveryDate',
- width: 120,
- customRender: text => {
- if (text == "" || text == null)
- return "";
- return moment(text).format('YYYY-MM-DD')
- },
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.preDeliveryDate - b.preDeliveryDate,
- },
- {
- title: '数量',
- dataIndex: 'shipmentQuantity',
- width: 80,
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.shipmentQuantity - b.shipmentQuantity,
- },
- {
- title: '报关单价',
- dataIndex: 'customsDeclarationUnitPrice',
- width: 80,
- className: 'replacecolor',
- ellipsis: true,
- sorter:(a, b) => a.customsDeclarationUnitPrice - b.customsDeclarationUnitPrice,
- },
- {
- title: '成衣工厂',
- dataIndex: 'garmentFactory',
- width: 100,
- className: 'replacecolor',
- ellipsis: true,
- sorter:(a, b) => a.garmentFactory - b.garmentFactory,
- },
- {
- title: 'HScode',
- dataIndex: 'hsCode',
- width: 120,
- className: 'replacecolor',
- ellipsis: true,
- sorter:(a, b) => a.hsCode - b.hsCode,
- },
- {
- title: '英文品名',
- dataIndex: 'englishProductName',
- width: 110,
- className: 'replacecolor',
- // customRender: t => ellipsis(t),
- ellipsis: true,
- sorter:(a, b) => a.englishProductName - b.englishProductName,
- },
- {
- title: '物料成分',
- dataIndex: 'materialComposition',
- width: 180,
- ellipsis: true,
- className: 'replacecolor',
- ellipsis: true,
- sorter:(a, b) => a.materialComposition - b.materialComposition,
- },
- {
- title: '采购/委外订单号',
- dataIndex: 'purOrSubOrder',
- width: 140,
- className: 'replacecolor',
- ellipsis: true,
- sorter:(a, b) => a.purOrSubOrder - b.purOrSubOrder,
- },
- {
- // (存货自定义项)
- title: '套装件数',
- dataIndex: 'numberOfSets',
- width: 90,
- className: 'replacecolor',
- ellipsis: true,
- sorter:(a, b) => a.numberOfSets - b.numberOfSets,
- },
- {
- title: 'pack id',
- dataIndex: 'packId',
- width: 110,
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.packId - b.packId,
- },
- {
- title: '客户简称',
- dataIndex: 'customerAbbreviation',
- width: 100,
- align: 'left',
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.customerAbbreviation - b.customerAbbreviation,
- },
- {
- title: '部门',
- dataIndex: 'salesDepartment',
- width: 100,
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.salesDepartment - b.salesDepartment,
- },
- {
- title: '单据号',
- dataIndex: 'documentNo',
- // fixed: 'left',
- align: 'left',
- width: 140,
- ellipsis: true,
- className: 'replacecolor',
- sorter:(a, b) => a.documentNo - b.documentNo,
- },
-
- // {
- // title: '推送结果',
- // dataIndex: 'pushState',
- // scopedSlots: { customRender: 'pushState' },
- // fixed: 'right',
- // width: 110,
- // className: 'replacecolor',
- // sorter:(a, b) => a.pushState - b.pushState,
- // },
- {
- title: '单据状态',
- dataIndex: 'submitStatus',
- scopedSlots: { customRender: 'state' },
- fixed: 'right',
- width: 110,
- className: 'replacecolor',
- sorter:(a, b) => a.submitStatus - b.submitStatus,
- },
- {
- title: '操作',
- dataIndex: 'operation',
- scopedSlots: { customRender: 'operationSlot' },
- fixed: 'right',
- width: 250,
- className: 'replacecolor',
- }
- ],
- shipmentListData: [], // 发运明细数据
- allMoney:'',
- copyTableData:[],//保存还未更新时的申报要素列表信息
- copyFromData:{},////保存修改报关要素所点击得那行数据
- // 查询条件
- queryParam: {
- flourOrGarment:'1'
- },
- selectedRowKeys:[],
- selectedRows:[],
- timeRange:[],//起始时间
- preDeliveryDate:[],//预发货日期
- returnId:'',//新增后返回的id筛选条件
- returnFlourOrGarment:'',//新增后返回类型条件
- showEmpty:true,
- pagination: {
- // total: '',
- // current: 0,
- // pageSize: 0
- },
- columns: [
- {field: "",key: "ju",type: "checkbox",title: "",width: 50, align: "center",ellipsis: {showTitle: true,},},
- { field: "account", key: "a", title: "账套", align: "center", width: 85,sortBy: "",ellipsis: {showTitle: true,},},
- { field: "orderNumber", key: "b", title: "销售订单号", align: "center",width: 180,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "itemNumber", key: "c", title: "款号", align: "center",width: 130,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "salesman", key: "d", title: "业务员", align: "center", width: 100,sortBy: "", ellipsis: {showTitle: true,},},
- { field: "distributionPoint", key: "e", title: "分销点", align: "center", width: 110,sortBy: "", ellipsis: {showTitle: true,},},
- { field: "smallPo", key: "f", title: "小po", align: "center", width: 110,sortBy: "", ellipsis: {showTitle: true,},},
- { field: "inventoryName", key: "g", title: "存货名称", align: "center", width: 220,sortBy: "", ellipsis: {showTitle: true,},},
- { field: "declarationName", key: "h", title: "报关品名", align: "center", width: 175,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "isTc", key: "i", title: "是否TC", align: "center", width: 110,sortBy: "", ellipsis: {showTitle: true,}, renderBodyCell: ({ row, column, rowIndex }, h) => {
- const text = row[column.field];
- if(text=='0'){
- return (
- <span>否</span>
- )
- }else{
- return (
- <span>是</span>
- );
- }
-
- },},
- { field: "preDeliveryDate", key: "j", title: "预发货日期", align: "center", width: 120,sortBy: "", ellipsis: {showTitle: true,}, },
- { field: "shipmentQuantity", key: "k", title: "数量", align: "center", width: 80,sortBy: "", ellipsis: {showTitle: true,},},
- { field: "customsDeclarationUnitPrice", key: "m", title: "报关单价", align: "center", width: 100,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "garmentFactory", key: "l", title: "成衣工厂", align: "center", width: 100,sortBy: "" ,ellipsis: {showTitle: true,},},
- { field: "hsCode", key: "n", title: "HScode", align: "center", width: 120,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "englishProductName", key: "o", title: "英文品名", align: "center", width: 110,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "materialComposition", key: "p", title: "物料成分", align: "center", width: 180,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "purOrSubOrder", key: "q", title: "采购/委外订单号", align: "center", width: 180,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "numberOfSets", key: "r", title: "套装件数", align: "center", width: 100,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "packId", key: "s", title: "pack id", align: "center", width: 110,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "customerAbbreviation", key: "t", title: "客户简称", align: "center", width: 100,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "salesDepartment", key: "u", title: "部门", align: "center", width: 100,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "documentNo", key: "v", title: "单据号", align: "center", width: 140,sortBy: "",ellipsis: {showTitle: true,}, },
- { field: "submitStatus", key: "w", title: "单据状态",fixed: "right", align: "center", width: 110,sortBy: "" ,ellipsis: {showTitle: true,}, renderBodyCell: ({ row, column, rowIndex }, h) => {
- const text = row[column.field];
- if(text=='0'){
- return (
- <a-tag color="orange" >已保存</a-tag>
- )
- }else{
- return (
- <a-tag color="green">已提交</a-tag>
- );
- }
- }},
- { field: "operation", key: "x",fixed: "right" , title: "操作", align: "center", width: 250, renderBodyCell: ({ row, column, rowIndex }, h) => {
- return <Drapp row={row} column={column} rowIndex={rowIndex} on-details={() => this.details(row)} on-push={() => this.push(row)} on-rePush={() => this.rePush(row)} on-edit={() => this.edit(row)} on-handleDelete={() => this.handleDelete(row)} on-triggerT={() => this.declareElements(row)} on-triggerW={()=>this.itemNumberElement(row)}/>;
- }}
- ],
- tableData: [
- {
- account:'1',
- orderNumber:'2',
- itemNumber:'3',
- salesman:'4',
- itemIds:'1'
- },
- {
- account:'2',
- orderNumber:'2',
- itemNumber:'3',
- salesman:'4',
- itemIds:'2'
- },
- {
- account:'3',
- orderNumber:'2',
- itemNumber:'3',
- salesman:'4',
- itemIds:'3'
- },
- ],
- dateFormat: 'YYYY-MM-DD',
-
- }
- },
- created() {
- // this.getShipmentList() // 渲染 发运明细列表
- // this.defalutDate()
- },
- mounted(){
- },
- methods: {
- moment,
- //默认预发货日期
- defalutDate(){
- var now = new Date(); //当前日期
- var nowMonth = now.getMonth(); //当前月
- var nextMonth = nowMonth+1; //下个月
- var nowYear = now.getFullYear(); //当前年
- this.monthStartDate = moment(new Date(nowYear, nowMonth, 1)).format('YYYY-MM-DD');
- this.nextMonthStartDate = moment(new Date(nowYear, nextMonth, 1)).format('YYYY-MM-DD');
- if([1, 3, 5, 7, 8, 10, 12].indexOf(nextMonth+1) > -1){
- this.nextMonthEndDate = moment(new Date(nowYear, nextMonth, 31)).format('YYYY-MM-DD');
- }else {
- this.nextMonthEndDate = moment(new Date(nowYear, nextMonth, 30)).format('YYYY-MM-DD');
- }
- this.preDeliveryDate.push(this.nextMonthStartDate,this.nextMonthEndDate)
- this.queryParam.preDeliveryDateB = this.nextMonthStartDate
- this.queryParam.preDeliveryDateE = this.nextMonthEndDate
- },
- // 分页查询 发运明细
- async getShipmentList() {
- this.loading = true
- this.copyTableData = []
- this.copyFromData = {} //保存修改报关要素所点击得那行数据
- await shipmentList(this.queryParam).then(res => {
- if (res.success) {
- this.loading = false
- this.allMoney = res.message
- if(this.queryParam.flourOrGarment == '1'){
- this.exportButton ='0'
- this.exportButton1 = '1'
- }else {
- this.exportButton ='1'
- this.exportButton1 = '0'
- }
- let allAuthes = JSON.parse(sessionStorage.getItem(USER_AUTH));
- var quanXian = []
- allAuthes.map(item=>{ quanXian.push(item.action)})
- if(quanXian.indexOf('cymx:sbys')==-1 && this.queryParam.flourOrGarment=='0'){
- this.authority = true
- }else if(quanXian.indexOf('cymx:sbys')==-1 && this.queryParam.flourOrGarment=='1'){
- this.authority = false
- }
- this.shipmentListData = res.result.records
- this.showEmpty = this.shipmentListData.length==0?true:false
- this.virtualScrollOption.enable = this.shipmentListData.length>500?true:false
- for (var i=0; i<this.shipmentListData.length; i++){
- this.shipmentListData.randomId = randomUUID();
- }
-
- this.selectedRowKeys = []
- this.checkboxOption.selectedRowKeys = []
- }else {
- this.$message.error(res.message)
- this.loading = false
- }
- })
- },
- //关闭申报要素弹窗
- async closeDeclare(){
- //判断是否是新增的数据
- // await this.judageAdd()
- var cc = []
- this.shipmentListData.map(item =>{
- this.selectedRows.map(item1 =>{
- if(item.itemIds == item1.itemIds){
- cc.push(item)
- }
- })
- })
- this.selectedRows = cc
- cc.map(item => this.selectedRowKeys.push(item.itemIds))
- },
- saveInformation(data){
- this.copyTableData = data.syDeclarationElementsItemList
- },
- //关闭维护款号成分弹窗
- closeItemNumEle(){
- },
- changeList(data,record){
- this.shipmentListData.map(item=>{
- if(item.itemNumber == record.itemNumber && item.inventoryName==record.inventoryName && item.orderNumber == record.orderNumber){
- item.isTc = data.isTc
- item.materialComposition = data.materialComposition
- }
- })
- },
- closeData(data,record){
- this.copyFromData = record//保存修改报关要素所点击得那行数据
- this.shipmentListData.map(item=>{
- if(item.orderNumber == record.orderNumber && item.itemNumber==record.itemNumber && item.account == record.account&& item.inventoryName == record.inventoryName){
- item.declarationName = data.declarationName
- item.hsCode = data.hsCode
- item.englishProductName = data.englishProductName
- }
- })
- },
- // // 新增
- // addShipDet() {
- // this.$refs.addShipDetDrawer.syShippingDetailsItemList = [];
- // this.$refs.addShipDetDrawer.visible = true
- // },
- //参照订单数据
- referOrderDataOpen(){
- this.$refs.referOrderDataModal.referOrderDataModVis = true
- this.$refs.referOrderDataModal.range.push(this.monthStartDate)
- this.$refs.referOrderDataModal.queryParam.preDeliveryDateS = this.monthStartDate;
- this.$refs.referOrderDataModal.queryParam.preDeliveryDateE = '';
- },
- // 申报要素
- declareElements(record) {
- if (record.inventoryName == ""){
- this.$message.error('当前行存货名称为空,无法维护报关要素');
- }else{
- this.$refs.declareElementsModal.declareElementsModVis = true
- queryDeclarationElements({
- id: record.elementsId,
- syShippingids:record.itemIds
- }).then(res => {
- if (res.success) {
- // console.log('申报要素子表数据', res.result.syDeclarationElementsItemList)
- res.result['itemIds'] = record.itemIds;
- this.$refs.declareElementsModal.declareElements = res.result
- this.$refs.declareElementsModal.declareElements.declarationName = record.declarationName
- this.$refs.declareElementsModal.declareElements.englishProductName = record.englishProductName
- this.$refs.declareElementsModal.declareElements.hsCode = record.hsCode
- this.$refs.declareElementsModal.flourOrGarment = this.queryParam.flourOrGarment
- this.$refs.declareElementsModal.orderNumber = record.orderNumber
- this.$refs.declareElementsModal.record = record
- if(!res.result.hsCode || res.result.hsCode == ''){
- this.$refs.declareElementsModal.query = '0'
- }else{
- this.$refs.declareElementsModal.query = '1'
- }
- //判断报关要素保存时子表是否有数据以及再次点击时所点击行和报关要素修改行满不满足带出子表得条件
- if(this.copyTableData.length==0||!(this.copyFromData.orderNumber == record.orderNumber && this.copyFromData.itemNumber==record.itemNumber && this.copyFromData.account == record.account&& this.copyFromData.inventoryName == record.inventoryName)){
- // 子表赋值
- this.$refs.declareElementsModal.declareElementsData = res.result.syDeclarationElementsItemList
- }else{
- this.$refs.declareElementsModal.declareElementsData = this.copyTableData
- }
- if(record.pushState == '1' && record.submitStatus == '1'){
- this.$refs.declareElementsModal.pushState = true
- }
- }
- })
- }
- },
- // 维护款号成分
- itemNumberElement(record) {
- this.$refs.itemNumEleModal.itemNumEleModVis = true
- this.$refs.itemNumEleModal.editItemNumber.itemIds = record.itemIds
- this.$refs.itemNumEleModal.editItemNumber.itemNumber = record.itemNumber
- this.$refs.itemNumEleModal.record = record
-
- this.$refs.itemNumEleModal.editItemNumber.materialComposition = record.materialComposition
- this.$refs.itemNumEleModal.editItemNumber.isTc = record.isTc
- if(record.materialComposition == '' || !record.materialComposition){
- var ccode = record.inventoryCcode.substring(0,2);
-
- if(ccode =='19'){ //如果是成衣取规格型号,否则取物料名称
- this.$refs.itemNumEleModal.editItemNumber.materialComposition = record.specificationAndModel
- }else{
- var split = record.inventoryName.split(" ");
- this.$refs.itemNumEleModal.editItemNumber.materialComposition = split[0];
- }
- }
- },
- //判断是否是新增的数据-刷新数据
- async judageAdd(){
- await this.getShipmentList()
- // if(!this.queryParam.flourOrGarment || this.queryParam.flourOrGarment == ''){
- // // this.queryParam ={}
- // this.queryParam.id = this.returnId
- // this.queryParam.flourOrGarment =this.returnFlourOrGarment
- // await this.getShipmentList()
- // // this.queryParam = {}
- // // this.defalutDate()
- // }else{
- // await this.getShipmentList()
- // }
- },
-
- // 导出
- handleExportXls(fileName) {
- if(!this.queryParam.flourOrGarment || this.queryParam.flourOrGarment == ''){
- this.queryParam ={}
- this.queryParam.id = this.returnId
- this.queryParam.flourOrGarment =this.returnFlourOrGarment
- }
- var obj ={},
- yesA = 'yes'
- if(this.allList == '1'){
- obj = this.queryParam
- obj.selectAll = '1'
- }else{
- if( this.selectedRowKeys.length==0){
- this.$message.error('请勾引数据')
- yesA = 'no'
- }else{
- var grouyIdList=[]
- this.shipmentListData.map(item=>{
- this.selectedRowKeys.map(e=>{
- if(item.itemIds == e){
- grouyIdList.push(item.groupId)
- }
- })
- })
- obj.groupidList = grouyIdList.toString()
- obj.selectAll = '0'
- obj.flourOrGarment =this.queryParam.flourOrGarment
- }
-
- }
- if(yesA == 'yes'){
- this.loading = true
- exportXls(obj).then(res =>{
- if(res.success==false){
- this.$message.error(res.message)
- }else{
- downFile('/shippingDetails/syShippingDetails/exportXls',obj).then(data => {
- this.loading = false
- // this.queryParam = {}
- // this.defalutDate()
- if (!data) {
- this.$message.warning('文件下载失败')
- return
- }
- if (typeof window.navigator.msSaveBlob !== 'undefined') {
- window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx')
- } else {
- let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
- let link = document.createElement('a')
- link.style.display = 'none'
- link.href = url
- link.setAttribute('download', fileName + '.xlsx')
- document.body.appendChild(link)
- link.click()
- document.body.removeChild(link) // 下载完成移除元素
- window.URL.revokeObjectURL(url) // 释放掉blob对象
- }
- })
- }
- })
- }
-
-
- },
- //明细导出
- exportXlsShipment(fileName){
- var obj ={},
- yesA = 'yes'
- if(this.allList == '1'){
- obj = this.queryParam
- obj.selectAll = '1'
- }else{
- if(this.selectedRowKeys.length==0){
- this.$message.error('请勾引数据')
- yesA = 'no'
- }else{
- var grouyIdList=[]
- this.shipmentListData.map(item=>{
- this.selectedRowKeys.map(e=>{
- if(item.itemIds == e){
- grouyIdList.push(item.groupId)
- }
- })
- })
- obj.groupidList = grouyIdList.toString()
- obj.selectAll = '0'
- obj.flourOrGarment =this.queryParam.flourOrGarment
- }
-
- }
- if( yesA == 'yes'){
- this.loading = true
- listExportXls(obj).then(res =>{
- if(res.success==false){
- this.$message.error(res.message)
- }else{
- downFile('/shippingDetails/syShippingDetails/exportXlsShipping',obj).then(data => {
- this.loading = false
- if (!data) {
- this.$message.warning('文件下载失败')
- return
- }
- if (typeof window.navigator.msSaveBlob !== 'undefined') {
- window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx')
- } else {
- let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
- let link = document.createElement('a')
- link.style.display = 'none'
- link.href = url
- link.setAttribute('download', fileName + '.xlsx')
- document.body.appendChild(link)
- link.click()
- document.body.removeChild(link) // 下载完成移除元素
- window.URL.revokeObjectURL(url) // 释放掉blob对象
- }
- })
- }
- })
- }
-
- },
- // 编辑
- edit(record) {
- this.$refs.editShipDetDrawer.visible = true
- queryByDetails({ id: record.id,itemIds: record.itemIds }).then(res => {
- if (res.success) {
- // console.log('编辑对象', res.result)
- this.$refs.editShipDetDrawer.editShipDet = res.result
- res.result.syShippingDetailsItemList.map(item =>{
- item.manualYarnFlag = res.result.syShippingDetailsItemList[0].mjudageAddanualYarnFlag
- item.customsDeclarationUnitPrice = item.salesUnitPrice - item.ymoney
- if(item.manualYarnFlag === 0){
- item.manualYarnUnitPrice = null
- item.manualYarnProportion = null
- this.$refs.editShipDetDrawer.manualYarnDisabled = true
- this.$forceUpdate()
- }else {
- this.$refs.editShipDetDrawer.manualYarnDisabled = false
- }
- })
- this.$refs.editShipDetDrawer.syShippingDetailsItemList = res.result.syShippingDetailsItemList
- this.$refs.editShipDetDrawer.readyFabric = this.queryParam.flourOrGarment
- }
- })
- },
- // 详情
- details(record) {
- this.$refs.detailsShipDetDrawer.visible = true
- queryByDetails({ id: record.id,itemIds: record.itemIds}).then(res => {
- if (res.success) {
- console.log('点击的对象', res.result)
- // 把通过id查询到的对象,赋值给子组件
- this.$refs.detailsShipDetDrawer.detailsShipDet = res.result
- this.$refs.detailsShipDetDrawer.syShippingDetailsItemList = res.result.syShippingDetailsItemList
- }
- })
- },
- // 提交
- submit() {
- this.$nextTick(() => {
- // for(var i =0;i<this.selectedRows.length;i++){
- // var selectRow = this.selectedRows[i]
- // if(selectRow.elementsId===''||!selectRow.elementsId){
- // this.$message.error('勾选的第'+(i+1)+'行数据报关要素未填写,不可提交!')
- // return
- // }
- // }
- var grouyIdList = []
- this.loading = true
- this.shipmentListData.map(item =>{
- this.selectedRowKeys.map(e=>{
- if(item.itemIds == e){
- grouyIdList.push(item.groupId)
- }
- })
- })
- submitShipment({ submitListId: this.selectedRowKeys, type: '1' ,grouyIdList:grouyIdList}).then(res => {
- this.loading = false
- if (res.success) {
- // this.shipmentListData.submitStatus = '1'
- this.shipmentListData.map(item =>{
- this.selectedRowKeys.map(e=>{
- if(item.itemIds == e){
- item.submitStatus = '1'
- }
- })
- })
- this.selectedRowKeys =[]
- this.checkboxOption.selectedRowKeys = []
- // this.judageAdd()
- // 渲染 发运明细列表
- this.$message.success('提交成功')
- }else {
- this.judageAdd()
- this.$message.error(res.message)
- }
- })
- })
- },
- // 取消提交
- cancelSubmit(record) {
- console.log('取消订单id:', record.id)
- this.$nextTick(() => {
- var grouyIdList = []
- this.loading = true
- this.shipmentListData.map(item =>{
- this.selectedRowKeys.map(e=>{
- if(item.itemIds == e){
- grouyIdList.push(item.groupId)
- }
- })
- })
- cancelSubmitShipment({ submitListId: this.selectedRowKeys, type: '2',grouyIdList:grouyIdList }).then(res => {
- this.loading = false
- if (res.success) {
- // this.shipmentListData.submitStatus = '0'
- this.shipmentListData.map(item =>{
- this.selectedRowKeys.map(e=>{
- if(item.itemIds == e){
- item.submitStatus = '0'
- }
- })
- })
- this.selectedRowKeys = []
- // this.judageAdd()
- this.$message.success('取消提交成功')
- }else {
- this.$message.error(res.message)
- }
- })
- })
- },
-
- //批量删除
- batchDelete(){
- this.$nextTick(() => {
- var itemId = [],
- ids = []
- this.loading = true
- this.shipmentListData.map(item =>{
- this.selectedRowKeys.map(e=>{
- if(item.itemIds == e){
- itemId.push(item.itemIds)
- ids.push(item.id)
- }
- })
- })
- deleteBatch({ ids: ids.toString() ,itemId:itemId.toString()}).then(res => {
- this.loading = false
- if (res.success) {
- // console.log('提交成功,单据状态改为【已提交】')
- // this.shipmentListData.submitStatus = '1'
- this.selectedRowKeys =[]
- this.checkboxOption.selectedRowKeys = []
- this.judageAdd()
- // 渲染 发运明细列表
- this.$message.success('批量成功')
- }else {
- this.judageAdd()
- this.$message.error(res.message)
- }
- })
- })
- },
- sortChange(params) {
- this.shipmentListData.sort((a, b) => {
- for (var key in params) {
- if(params[key]){
- if (params[key] === "asc") {
- return a[key] - b[key];
- } else if (params[key] === "desc") {
- return b[key] - a[key];
- } else {
- return 0;
- }
- }
- }
- });
- },
- // 推送
- push(record) {
- console.log('推送id:', record.id)
- this.$nextTick(() => {
- if(this.queryParam.flourOrGarment == '1'){
- this.$message.error("成衣不可推送!")
- }else {
- pushShipment({ id: record.id }).then(res => {
- if (res.success) {
- console.log('推送成功,推送状态【推送成功】')
- this.shipmentListData.pushState = '1'
- this.judageAdd()
- this.$message.success('推送成功')
- }else {
- this.$message.error(res.message)
- }
- })
- }
-
- })
- },
- // 重新推送
- rePush(record) {
- console.log('重新推送record:', record)
- this.$nextTick(() => {
- if(this.queryParam.flourOrGarment == '1'){
- this.$message.error("成衣不可推送!")
- }else {
- rePushShipment({ id: record.id }).then(res => {
- if (res.success) {
- console.log('重新推送成功,推送状态【推送成功】')
- this.shipmentListData.pushState = '1'
- this.judageAdd()
- this.$message.success('重新推送成功')
- }else {
- this.$message.error(res.message)
- }
- })
- }
-
- })
- },
- // 删除
- handleDelete(record) {
- console.log('点击删除项id:', record.id)
- this.$nextTick(() => {
- deleteShipment({ id: record.id,itemIds: record.itemIds }).then(res => {
- console.log('res:', res)
- this.judageAdd() // 渲染 发运明细列表
- this.$message.success('删除成功')
- })
- })
- },
- onDateChange(value, dateString) {
- console.log('查询开始时间', dateString[0], '查询结束时间', dateString[1])
- this.queryParam.startTime = dateString[0]
- this.queryParam.endTime = dateString[1]
- },
- onDateOk(value) {
- console.log('value', value)
- },
- deliveryDateChange(value, dateString) {
- console.log('预发货日期', dateString)
- this.queryParam.preDeliveryDateB = dateString[0]
- this.queryParam.preDeliveryDateE = dateString[1]
- },
- searchQuery() {
- this.toggleSearchStatus = false
- if(this.queryParam.flourOrGarment === '' || !this.queryParam.hasOwnProperty('flourOrGarment')){
- this.$message.error('请选择查询类型!');
- }else if(this.queryParam.flourOrGarment == '1' &&
- ((this.queryParam.itemNumber==''||!this.queryParam.itemNumber)&&
- (this.queryParam.orderNumber==''||!this.queryParam.orderNumber)&&
- (this.queryParam.salesman==''||!this.queryParam.salesman)&&
- (this.queryParam.supplier==''||!this.queryParam.supplier)&&
- (this.queryParam.customerAbbreviation==''||!this.queryParam.customerAbbreviation)&&
- this.preDeliveryDate.length == 0
- )){
- this.$message.error('款号/订单号/预发货日期/业务员/供应商/客户均未选择!');
- }else{
- if(this.preDeliveryDate.length ==2){
- var separator = "-"; //日期分隔符
- var startDates = this.queryParam.preDeliveryDateB.split(separator);
- var endDates = this.queryParam.preDeliveryDateE.split(separator);
- var startDate = new Date(startDates[0], startDates[1]-1, startDates[2]);
- var endDate = new Date(endDates[0], endDates[1]-1, endDates[2]);
- var timeInterval= parseInt(Math.abs(endDate - startDate ) / 1000 / 60 / 60 /24) + 1;
- if(timeInterval > 60){
- this.$message.error('预发货时间区间超过60天,请重新选择!');
- }else {
- this.queryParam.id = ''
- this.getShipmentList()
-
- }
- }else{
- this.queryParam.id = ''
- this.getShipmentList()
- }
-
- }
- },
- searchReset() {
- this.queryParam = {
- flourOrGarment:'1'
- }
- this.timeRange = []
- this.preDeliveryDate = []
- // this.defalutDate()
- this.selectedRows = []
- this.selectedRowKeys = []
- this.checkboxOption.selectedRowKeys = []
- this.shipmentListData = [] // 渲染 发运明细列表
- },
- //选中行
- onSelectChange(keys,rows){
- this.selectedRowKeys = keys;
- this.selectedRows = rows;
- },
- // 分页变化时触发
- handleTableChange(pagination, filters, sorter) {
- this.queryParam.pageNo = pagination.current
- this.getShipmentList()
- },
- //关闭新增弹窗
- async closeAdd(data,id,range){
- this.queryParam ={}
- this.queryParam.flourOrGarment = data
- this.queryParam.id = id
- this.preDeliveryDate=range
- this.queryParam.preDeliveryDateB =(this.preDeliveryDate[0]&&this.preDeliveryDate[0]!=='')? this.preDeliveryDate[0].format('YYYY-MM-DD'):'';
- this.queryParam.preDeliveryDateE =(this.preDeliveryDate[1]&&this.preDeliveryDate[1]!=='')? this.preDeliveryDate[1].format('YYYY-MM-DD'):'';
- //其他地方使用
- this.returnId = id
- this.returnFlourOrGarment = data
- await this.getShipmentList()
- // this.queryParam = {}
- // this.defalutDate()
- },
- async closeAddEdit(){
- this.judageAdd()
- }
- }
- }
- </script>
- <style lang="less" scoped>
- @import '~@assets/less/common.less';
- @import '~@assets/less/overwriter.less';
- /deep/ .ant-table-thead > tr > th {
- text-align: center;
- // font-weight: 700;
- }
- /deep/ .ant-table-tbody {
- text-align: center;
- }
- // /deep/ th.replacecolor {
- // background-color: #ccc;
- // }
- // /deep/ .ant-form-item {
- // // margin-bottom: 0 !important;
- // }
- /deep/ .ant-table-tbody .ant-table-row td{
- padding-top: 8px;
- padding-bottom: 8px;
- }
- /deep/.ant-card-body{
- padding-top: 10px !important;
- padding-bottom: 0px !important;
- }
- /deep/.table-operator .ant-btn{
- margin: 0 8px 3px 0;
- }
- /deep/.table-page-search-wrapper .ant-form-inline .ant-form-item{
- margin-bottom: 10px;
- }
- /deep/.table-page-search-wrapper .table-page-search-submitButtons{
- margin-bottom: 10px;
- }
- /deep/ thead.ant-table-thead>tr{
- height: 0 !important;
- }
- /deep/ .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
- padding: 9px 16px
- }
- .empty-data {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 200px;
- width: 100%;
- color: #666;
- font-size: 16px;
- border: 1px solid #eee;
- border-top: 0;
- }
- </style>
|