Smart_platform_ui/src/views/landTransportation/dispatchingCars/detailPage.vue

<template>
  <div>
    <div class="customer-head">
      <div class="customer-back">
        <el-button
            type="danger"
            style="border: none;background: none;color: red"
            icon="el-icon-arrow-left"
            @click="backToList"
        >返回列表
        </el-button>
      </div>
    </div>
    <containerTitle title="委托信息" style="margin-top: 50px"></containerTitle>
    <basic-container>
      <avue-form :option="goodsOptionForm" v-model="goodsForm">
        <template slot-scope="scope" slot="corpId">
          <crop-select
              v-model="goodsForm.corpId"
              disabled
          ></crop-select>
        </template>
        <template slot-scope="scope" slot="station">
          <port-info
              v-model="goodsForm.station"
              :disabled="goodsForm.status >= 1"
          />
        </template>
        <template slot-scope="scope" slot="agentId">
          <crop-select
              :disabled="goodsForm.status >= 1"
              v-model="goodsForm.agentId"
          ></crop-select>
        </template>
        <template slot-scope="scope" slot="polId">
          <port-info
              v-model="goodsForm.polId"
              :disabled="goodsForm.status >= 1"
          />
        </template>
        <template slot-scope="scope" slot="podId">
          <port-info
              v-model="goodsForm.podId"
              :disabled="goodsForm.status >= 1"
          />
        </template>
      </avue-form>
    </basic-container>
    <containerTitle title="其他信息"></containerTitle>
    <basic-container :showBtn="true" ref="other">
      <avue-form :option="goodsOptionFormTwo" v-model="goodsForm">
        <template slot-scope="scope" slot="corpId">
          <crop-select
              v-model="goodsForm.corpId"
              disabled
          ></crop-select>
        </template>
        <template slot-scope="scope" slot="station">
          <port-info
              v-model="goodsForm.station"
              :disabled="goodsForm.status >= 1"
          />
        </template>
        <template slot-scope="scope" slot="agentId">
          <crop-select
              :disabled="goodsForm.status >= 1"
              v-model="goodsForm.agentId"
          ></crop-select>
        </template>
        <template slot-scope="scope" slot="polId">
          <port-info
              v-model="goodsForm.polId"
              type="id"
              :disabled="goodsForm.status >= 1"
          />
        </template>
        <template slot-scope="scope" slot="podId">
          <port-info
              v-model="goodsForm.podId"
              type="id"
              :disabled="goodsForm.status >= 1"
          />
        </template>
      </avue-form>
    </basic-container>
    <containerTitle
        title="起止地信息"></containerTitle>
    <basic-container>
      <el-table
          ref="singleTable"
          :data="tableData"
          size="mini"
          :header-cell-style="{color:'#000',background:'#fafafa'}"
          style="width: 100%">
        <el-table-column
            property="date"
            align="center"
            width="40">
          <template slot-scope="scope">
            <span v-if="scope.$index == 0">
              <el-button type="primary" size="mini" circle>起</el-button>
            </span>
            <span v-else-if="scope.$index === tableData.length-1">
              <el-button type="success" size="mini" circle>止</el-button>
            </span>
            <span v-else>
              <el-button v-if="goodsForm.status === 2" type="warning" size="mini" circle>途</el-button>
              <el-tooltip v-else class="item" effect="dark" content="删除" placement="right">
                  <el-button type="danger" icon="el-icon-delete" size="mini" circle
                             @click="deleteAddress(scope)"></el-button>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60">
        </el-table-column>
        <el-table-column
            property="corpName"
            label="货运地点"
            align="center"
            show-overflow-tooltip
            width="200">
        </el-table-column>
        <!--        <el-table-column-->
        <!--            property="province"-->
        <!--            label="省市区"-->
        <!--            align="center"-->
        <!--            width="280">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-cascader-->
        <!--                size="small"-->
        <!--                style="width: 100%;"-->
        <!--                v-model="scope.row.region"-->
        <!--                disabled-->
        <!--                :props="treeOption"></el-cascader>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
            property="contacts"
            align="center"
            width="150"
            show-overflow-tooltip
            label="联系人">
        </el-table-column>
        <el-table-column
            property="tel"
            align="center"
            width="180"
            show-overflow-tooltip
            label="电话">
        </el-table-column>
        <el-table-column
            property="address"
            align="center"
            show-overflow-tooltip
            label="详细地址">
        </el-table-column>
        <el-table-column
            property="remarks"
            align="center"
            show-overflow-tooltip
            label="备注">
        </el-table-column>
      </el-table>
    </basic-container>
    <containerTitle title="车辆信息"></containerTitle>
    <basic-container>
      <avue-crud
          :data="entrustList"
          @selection-change="selectionChange"
          :option="entrustOptionTwoT"
          ref="crudBoxTwo"
          v-if="KeyBoxTwo>0"
          @resetColumn="resetColumnBoxTwo"
          @saveColumn="saveColumnBoxTwo"
          @row-save="(row,done,loading)=>{rowSaveT(row,0,done,loading)}"
          @row-update="rowSaveWell">
        <template slot="menuLeft" slot-scope="{size}">
          <el-button type="success" icon="el-icon-check" :size="size" @click="batchScheduling"
                     :disabled="selectionList.length === 0">批量调度
          </el-button>
        </template>
        <template slot-scope="{row}" slot="fleetId">
          <crop-select
              v-if="row.$cellEdit"
              v-model="row.fleetId"
              @getCorpData="(data)=>{getfleetIdT(data,row)}"
              corpType="CD"
          ></crop-select>
          <span v-else>{{ row.fleetName }}</span>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <el-button
              type="text"
              size="small"
              v-if="row.status===0"
              @click="rowSaveT(row,index)"
          >{{ row.$cellEdit ? '保 存' : '修 改' }}
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="designate(row, index)"
              v-if="row.status === 0"
          >调 度
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="cancelDesignate(row, index)"
              v-if="row.status===1"
          >取消调度
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="changeFleetT(row, index)"
              v-if="row.status===2||row.status===3"
          >变 更
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="recordsOfChanges(row, index)"
              v-if="row.status > 1"
          >变更记录
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <span>
  <!--    <containerTitle title="费用明细"></containerTitle>-->
      <!--    <basic-container>-->
      <!--      <el-tabs v-model="activeIndex" @tab-click="handleSelect">-->
      <!--        <el-tab-pane label="应收" name="1"></el-tab-pane>-->
      <!--        <el-tab-pane label="应付" name="2"></el-tab-pane>-->
      <!--      </el-tabs>-->
      <!--      <avue-crud-->
      <!--          v-if="activeIndex === '1'"-->
      <!--          :data="collectionList"-->
      <!--          :option="collectionOption"-->
      <!--          ref="collection"-->
      <!--          @row-save="(row,done,loading)=>{rowSave(row,0,done,loading)}"-->
      <!--          @row-update="rowSave"-->
      <!--          @row-del="makeDel">-->
      <!--        <template slot-scope="{row}" slot="corpId">-->
      <!--          <crop-select-->
      <!--              v-if="row.$cellEdit"-->
      <!--              v-model="row.corpId"-->
      <!--              @getCorpData="(data)=>{getfleetId(data,row)}"-->
      <!--          ></crop-select>-->
      <!--          <span v-else>{{row.corpName}}</span>-->
      <!--        </template>-->
      <!--        <template slot-scope="{row}" slot="feeId">-->
      <!--          <breakdown-select-->
      <!--              v-if="row.$cellEdit"-->
      <!--              v-model="row.feeId"-->
      <!--              @selectValue="(value) => selectValue(value,row)"-->
      <!--              :configuration="breakConfiguration"-->
      <!--          >-->
      <!--          </breakdown-select>-->
      <!--          <span v-else>{{ row.feeName }}</span>-->
      <!--        </template>-->
      <!--        <template slot-scope="{row,index}" slot="menu">-->
      <!--          <el-button-->
      <!--              type="text"-->
      <!--              size="small"-->
      <!--              :icon="row.$cellEdit?'el-icon-circle-plus-outline':'el-icon-edit'"-->
      <!--              @click="rowCell(row,index)"-->
      <!--          >{{row.$cellEdit?'保存':'编辑'}}</el-button>-->
      <!--          <el-button type="text"-->
      <!--                     icon="el-icon-delete"-->
      <!--                     size="small"-->
      <!--                     @click="$refs.collection.rowDel(row,index)"-->
      <!--          >删除</el-button>-->
      <!--        </template>-->
      <!--        <template slot="menuLeft">-->
      <!--          <el-button type="primary" icon="el-icon-plus" @click="addRowCollection" size="small">录入明细</el-button>-->
      <!--        </template>-->
      <!--      </avue-crud>-->
      <!--      <avue-crud-->
      <!--          v-if="activeIndex === '2'"-->
      <!--          :data="paymentList"-->
      <!--          :option="paymentOption"-->
      <!--          ref="payment"-->
      <!--          @row-save="(row,done,loading)=>{rowSave(row,0,done,loading)}"-->
      <!--          @row-update="rowSave"-->
      <!--          @row-del="feeDel"-->
      <!--      >-->
      <!--        <template slot-scope="{row}" slot="corpId">-->
      <!--          <crop-select-->
      <!--              v-if="row.$cellEdit"-->
      <!--              v-model="row.corpId"-->
      <!--              @getCorpData="(data)=>{getfleetId(data,row)}"-->
      <!--          ></crop-select>-->
      <!--          <span v-else>{{row.corpName}}</span>-->
      <!--        </template>-->
      <!--        <template slot-scope="{row}" slot="feeId">-->
      <!--          <breakdown-select-->
      <!--              v-if="row.$cellEdit"-->
      <!--              v-model="row.feeId"-->
      <!--              @selectValue="(value) => selectValue(value,row)"-->
      <!--              :configuration="breakConfiguration"-->
      <!--          >-->
      <!--          </breakdown-select>-->
      <!--          <span v-else>{{ row.feeName }}</span>-->
      <!--        </template>-->
      <!--        <template slot-scope="{row,index}" slot="menu">-->
      <!--          <el-button-->
      <!--              type="text"-->
      <!--              size="small"-->
      <!--              :icon="row.$cellEdit?'el-icon-circle-plus-outline':'el-icon-edit'"-->
      <!--              @click="paymentRowCell(row,index)"-->
      <!--          >{{row.$cellEdit?'保存':'编辑'}}</el-button>-->
      <!--          <el-button type="text"-->
      <!--                     icon="el-icon-delete"-->
      <!--                     size="small"-->
      <!--                     @click="$refs.payment.rowDel(row,index)"-->
      <!--          >删除</el-button>-->
      <!--        </template>-->
      <!--        <template slot="menuLeft">-->
      <!--          <el-button type="primary" icon="el-icon-plus" @click="addRowPayment" size="small">录入明细</el-button>-->
      <!--        </template>-->
      <!--      </avue-crud>-->
      <!--    </basic-container>-->
</span>
    <containerTitle title="杂费明细"></containerTitle>
    <basic-container>
      <el-tabs v-model="activeIndex" @tab-click="handleSelect">
        <el-tab-pane label="应收" name="1"></el-tab-pane>
        <el-tab-pane label="应付" name="2"></el-tab-pane>
      </el-tabs>
      <avue-crud
          v-if="activeIndex === '1'"
          :data="collectionList"
          :key="key"
          :option="collectionOption"
          ref="collection"
          @resetColumn="resetColumnCollection"
          @saveColumn="saveColumnCollection"
          @row-save="(row,done,loading)=>{rowSave(row,0,done,loading)}"
          @row-update="rowSave"
          @row-del="makeDel">
        <template slot-scope="{row}" slot="corpId">
          <crop-select
              v-if="row.$cellEdit"
              v-model="row.corpId"
              @getCorpData="(data)=>{getfleetId(data,row)}"
          ></crop-select>
          <span v-else>{{ row.corpName }}</span>
        </template>
        <template slot="plateNoHeader" slot-scope="{column}">
          {{ column.label }}<span style="color:#F56C6C">*</span>
        </template>
        <template slot-scope="{row}" slot="feeId">
          <breakdown-select
              v-if="row.$cellEdit"
              v-model="row.feeId"
              @selectValue="(value) => selectValue(value,row)"
              :configuration="breakConfiguration"
          >
          </breakdown-select>
          <span v-else>{{ row.feeName }}</span>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <el-button
              type="text"
              size="small"
              :icon="row.$cellEdit?'el-icon-circle-plus-outline':'el-icon-edit'"
              @click="rowCell(row,index)"
          >{{ row.$cellEdit ? '保存' : '编辑' }}
          </el-button>
          <el-button type="text"
                     icon="el-icon-delete"
                     size="small"
                     @click="$refs.collection.rowDel(row,index)"
          >删除
          </el-button>
          <el-button
              size="small"
              type="text"
              icon="el-icon-s-order"
              @click="annexOpen(row, index)"
          >附 件
          </el-button>
        </template>
        <template slot="menuLeft">
          <el-button type="primary" icon="el-icon-plus" @click="addRowCollection"
                     size="small">录入明细
          </el-button>
        </template>
      </avue-crud>
      <avue-crud
          v-if="activeIndex === '2'"
          :data="paymentList"
          :option="paymentOption"
          ref="payment"
          @resetColumn="resetColumnPayment"
          @saveColumn="saveColumnPayment"
          @row-save="(row,done,loading)=>{rowSave(row,0,done,loading)}"
          @row-update="rowSave"
          @row-del="feeDel"
      >
        <template slot-scope="{row}" slot="corpId">
          <crop-select
              v-if="row.$cellEdit"
              v-model="row.corpId"
              @getCorpData="(data)=>{getfleetId(data,row)}"
          ></crop-select>
          <span v-else>{{ row.corpName }}</span>
        </template>
        <template slot-scope="{row}" slot="feeId">
          <breakdown-select
              v-if="row.$cellEdit"
              v-model="row.feeId"
              @selectValue="(value) => selectValue(value,row)"
              :configuration="breakConfiguration"
          >
          </breakdown-select>
          <span v-else>{{ row.feeName }}</span>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <el-button
              type="text"
              size="small"
              :icon="row.$cellEdit?'el-icon-circle-plus-outline':'el-icon-edit'"
              @click="paymentRowCell(row,index)"
          >{{ row.$cellEdit ? '保存' : '编辑' }}
          </el-button>
          <el-button type="text"
                     icon="el-icon-delete"
                     size="small"
                     :disabled="goodsForm.status === 1"
                     @click="$refs.payment.rowDel(row,index)"
          >删除
          </el-button>
          <el-button
              size="small"
              type="text"
              icon="el-icon-s-order"
              @click="annexOpen(row, index)"
          >附 件
          </el-button>
        </template>
        <template slot="menuLeft">
          <el-button type="primary" icon="el-icon-plus" @click="addRowPayment"
                     size="small">录入明细
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <containerTitle title="上传附件"></containerTitle>
    <c-upload
        typeUpload="CD"
        :data="orderFilesList"
        disabled
        :display="false"
        deleteUrl="/api/blade-client/common-file/remove"
        :enumerationValue="86.2"
    ></c-upload>
    <el-dialog
        title="批量调度"
        :visible.sync="dialogVisible"
        append-to-body
        width="70%">
      <avue-form :option="option" v-model="form" ref="form">
        <template slot="fleetId">
          <crop-select
              v-model="form.fleetId"
              corpType="CD"
          ></crop-select>
        </template>
      </avue-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveScheduling" size="small">调 度</el-button>
        </span>
    </el-dialog>
    <el-dialog
        title="变更"
        :visible.sync="dialogChange"
        append-to-body
        width="70%">
      <avue-form :option="optionData" v-model="formData" ref="saveForm">
        <template slot="fleetId">
          <crop-select
              v-model="formData.fleetId"
              corpType="CD"
              @getCorpData="getCorpData"
          ></crop-select>
        </template>
      </avue-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogChange = false" size="small">关 闭</el-button>
          <el-button type="primary" @click="confirmChange" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="变更记录"
        :visible.sync="dialogRecord"
        append-to-body
        width="70%">
      <avue-crud :data="dataRecord" :option="optionRecord" style="margin-top: -43px"></avue-crud>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogRecord = false" size="small">关 闭</el-button>
        </span>
    </el-dialog>
    <el-dialog
        title="附件"
        :visible.sync="enclosure"
        append-to-body
        width="70%">
      <c-upload
          typeUpload="GZ"
          :basic="true"
          deleteUrl="/api/blade-client/common-file/remove"
          :data="orderList"
          :enumerationValue="76"
      ></c-upload>
      <span slot="footer" class="dialog-footer">
          <el-button @click="enclosure = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveAnnex" size="small">保 存</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {getLazyTree} from "@/api/base/region";
import {
  saveDelegationList,
  detailDelegationList,
  removeCollection,
  dispatchCollection,
  queryVehicle,
  cancelDispatchCollection,
  dispatchBatch,
  fleetDriverSave,
  recordingDetails,
  changeFleet,
  incidentalSubmit, saveFile, getFee
} from "@/api/landTransportation";
import website from "@/config/website";
import {getDeptTree} from "@/api/system/dept";

export default {
  props: {
    id: {
      type: String
    }
  },
  data() {
    return {
      formData: {},
      enclosure:false,
      formAnnex: {},
      key:0,
      formDataList: {},
      orderList:[],
      dialogChange: false,
      optionData: {
        span: 12,
        menuBtn: false,
        column: [{
          label: "车队",
          prop: "fleetId",
        }, {
          label: "应付陆运费",
          prop: "landAmountC",
          precision: 2,
          controls: false,
          type: 'number',
        }, {
          label: '应收场站费',
          width: 100,
          precision: 2,
          controls: false,
          type: 'number',
          prop: 'oneFeeD'
        }, {
          label: '应收港杂费',
          width: 100,
          precision: 2,
          controls: false,
          type: 'number',
          prop: 'twoFeeD'
        }, {
          label: '应收扣款',
          width: 100,
          precision: 2,
          controls: false,
          type: 'number',
          prop: 'threeFeeD'
        }, {
          label: '应收待时费',
          width: 100,
          precision: 2,
          controls: false,
          type: 'number',
          prop: 'fourFeeD'
        }, {
          label: '应收其他',
          width: 100,
          precision: 2,
          type: 'number',
          controls: false,
          prop: 'fiveFeeD'
        }, {
          label: '应收费用备注',
          width: 245,
          prop: 'feeRemarksD'
        }]
      },
      form: {},
      dataRecord: [],
      dialogRecord: false,
      optionRecord: {
        stripe: true,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        addBtn: false,
        align: 'center',
        column: [
          {
            label: '变更内容',
            prop: 'content'
          }, {
            label: '变更人',
            prop: 'changeUserName'
          }, {
            label: '变更时间',
            prop: 'changeTime'
          }
        ]
      },
      option: {
        span: 12,
        menuBtn: false,
        column: [{
          label: "车队",
          prop: "fleetId",
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: "应付陆运费",
          prop: "landAmountC",
          precision: 2,
          controls: false,
          type: 'number',
        }]
      },
      activeIndex: '1',
      dialogVisible: false,
      goodsForm: {},
      orderFilesList: [],
      selectionList: [],
      roleName: localStorage.getItem("roleName").split(',')[0],
      breakConfiguration: {
        multipleChoices: false,
        multiple: false,
        disabled: false,
        searchShow: true,
        collapseTags: false,
        clearable: true,
        placeholder: '请点击右边按钮选择',
        dicData: []
      },
      advantageProjectData: [],
      treeOption: {
        label: 'title',
        value: 'id',
        lazy: true,
        lazyLoad(node, resolve) {
          const parentId = node.level === 0 ? '00' : node.data.id;
          getLazyTree(parentId).then(res => {
            resolve(
                res.data.data.map(item => {
                  return {
                    ...item,
                    leaf: !item.hasChildren
                  };
                })
            );
          });
        }
      },
      tableData: [],
      entrustListT: [],
      KeyBoxTwo: 0,
      entrustOptionTwoTBackup: {
        selectable: (row, index) => {
          return row.status === 0
        },
        align: 'center',
        menuAlign: 'center',
        index: true,
        cellBtn: false,
        refreshBtn: false,
        selection: true,
        selectionWidth: 55,
        tip: false,
        addBtn: false,
        cancelBtn: false,
        editBtn: false,
        addRowBtn: false,
        delBtn: false,
        showSummary: true,
        // editBtn:false,
        summaryText: "合计",
        sumColumnList: [
          {
            name: 'landWeight',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'oneFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'oneFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'ctnQuantity',
            type: 'sum',
            decimals: 0
          }],
        column: [{
          label: '货运日期',
          type: "datetime",
          cell: true,
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          width: 200,
          index: 1,
          prop: 'arrivalTime'
        }, {
          label: '实际到厂时间',
          prop: 'realArrivalTime',
          overHidden: true,
          type: "date",
          searchRange: true,
          defaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd HH:mm:ss",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          index: 2,
          width: 140,
        }, {
          label: '尺寸箱型',
          width: 100,
          slot: true,
          index: 3,
          prop: 'ctnType'
        }, {
          label: '箱量',
          width: 50,
          index: 4,
          prop: 'ctnQuantity'
        }, {
          label: '车队',
          width: 200,
          index: 5,
          prop: 'fleetId'
        }, {
          label: '车号',
          width: 150,
          index: 6,
          prop: 'plateNo'
        }, {
          label: '司机',
          width: 115,
          index: 7,
          prop: 'driverName'
        }, {
          label: '电话',
          width: 160,
          index: 8,
          prop: 'tel'
        }, {
          label: '完工日期',
          prop: 'finishedTime',
          overHidden: true,
          type: "date",
          searchRange: true,
          defaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd HH:mm:ss",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          index: 9,
          width: 140,
        }, {
          label: '货物名称',
          overHidden: true,
          width: 160,
          index: 10,
          prop: 'goods'
        }, {
          label: '件数',
          width: 100,
          overHidden: true,
          controls: false,
          cell: true,
          index: 11,
          prop: 'quantity',
          type: 'number',
          precision: 0
        }
          // , {
          //   label: '包装',
          //   width: 100,
          //   overHidden: true,
          //   cell: true,
          //   prop: 'packing',
          //   type: 'select',
          //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=packaging",
          //   props: {
          //     label: "dictValue",
          //     value: "dictValue"
          //   },
          // }
          , {
            label: '重量',
            width: 160,
            prop: 'landWeight',
            controls: false,
            precision: 2,
            index: 12,
            type: 'number'
          }, {
            label: '尺码',
            width: 100,
            overHidden: true,
            cell: true,
            index: 13,
            prop: 'size',
          }, {
            label: '单柜运费',
            index: 14,
            prop: 'landAmountD'
          },
          {
            label: '状态',
            width: 100,
            index: 15,
            type: 'select',
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=land_order_status",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "string",
            prop: 'status'
          }, {
            label: '应付陆运费',
            cell: true,
            index: 16,
            prop: 'landAmountC'
          }, {
            label: '委托备注',
            width: 245,
            index: 17,
            prop: 'remarks'
          }, {
            label: '车队备注',
            width: 245,
            index: 18,
            prop: 'fleetRemarks'
          }, {
            label: '司机备注',
            width: 245,
            index: 19,
            prop: 'driverRemarks'
          }, {
            label: '应收场站费',
            width: 100,
            precision: 2,
            index: 20,
            controls: false,
            cell: true,
            type: 'number',
            prop: 'oneFeeD'
          }, {
            label: '应收港杂费',
            width: 100,
            precision: 2,
            cell: true,
            index: 21,
            controls: false,
            type: 'number',
            prop: 'twoFeeD'
          }, {
            label: '应收扣款',
            width: 100,
            index: 22,
            precision: 2,
            cell: true,
            controls: false,
            type: 'number',
            prop: 'threeFeeD'
          }, {
            label: '应收待时费',
            width: 100,
            precision: 2,
            index: 23,
            cell: true,
            controls: false,
            type: 'number',
            prop: 'fourFeeD'
          }, {
            label: '应收其他',
            width: 100,
            index: 24,
            precision: 2,
            cell: true,
            type: 'number',
            controls: false,
            prop: 'fiveFeeD'
          }, {
            label: '应收费用备注',
            width: 245,
            index: 25,
            cell: true,
            prop: 'feeRemarksD'
          }, {
            label: '应付场站费',
            width: 100,
            index: 26,
            precision: 2,
            cell: true,
            controls: false,
            type: 'number',
            prop: 'oneFeeC'
          }, {
            label: '应付港杂费',
            width: 100,
            precision: 2,
            index: 27,
            cell: true,
            controls: false,
            type: 'number',
            prop: 'twoFeeC'
          }, {
            label: '应付扣款',
            width: 100,
            index: 28,
            precision: 2,
            controls: false,
            type: 'number',
            cell: true,
            prop: 'threeFeeC'
          }, {
            label: '应付待时费',
            width: 100,
            precision: 2,
            index: 29,
            controls: false,
            cell: true,
            type: 'number',
            prop: 'fourFeeC'
          }, {
            label: '应付其他',
            width: 100,
            precision: 2,
            index: 30,
            type: 'number',
            cell: true,
            controls: false,
            prop: 'fiveFeeC'
          }, {
            label: '应付费用备注',
            width: 245,
            index: 31,
            cell: true,
            prop: 'feeRemarksC'
          }
        ]
      },
      entrustOptionTwoT: {},
      entrustList: [],
      goodsOptionForm: {
        menuBtn: false,
        disabled: true,
        span: 8,
        column: [{
          label: '公司名称',
          formslot: true,
          prop: 'corpId',
          rules: [{
            required: true,
            message: " ",
            trigger: "change"
          }],
        }, {
          label: '所属部门',
          prop: 'salesmanDept',
          type: "tree",
          filter: false,
          dicData: [],
          props: {
            label: "title"
          }
        }, {
          label: '业务员',
          prop: 'salesman',
          type: "select",
          dicUrl: "/api/blade-user/userList",
          props: {
            label: "realName",
            value: "id"
          },
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: '委托日期',
          prop: 'bsDate',
          type: "datetime",
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
        }, {
          label: '票据号',
          prop: 'receiptNo'
        }, {
          label: '联系电话',
          prop: 'tel'
        }, {
          label: '提单号',
          prop: 'billNo',
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }],
        }, {
          label: '场站',
          prop: 'station',
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }],
        },
          //   {
          //   label: '货运日期',
          //   type: "datetime",
          //   format: 'yyyy-MM-dd HH:mm:ss',
          //   valueFormat: 'yyyy-MM-dd HH:mm:ss',
          //   prop: 'arrivalTime',
          //   rules: [{
          //     required: true,
          //     message: " ",
          //     trigger: "blur"
          //   }],
          // },
          {
            label: '备注',
            span: 24,
            minRows: 2,
            prop: 'remarks',
            type: 'textarea'
          }]
      },
      goodsOptionFormTwo: {
        menuBtn: false,
        disabled: true,
        span: 8,
        column: [
          // {
          //   label: '所属公司',
          //   formslot: true,
          //   prop: 'belongCompany',
          //   rules: [{
          //     required: false,
          //     message: " ",
          //     trigger: "blur"
          //   }],
          // },
          {
            label: '船名航次',
            prop: 'factory',
            rules: [{
              required: false,
              message: " ",
              trigger: "blur"
            }],
          }
          // , {
          //   label: '货物名称',
          //   prop: 'goods',
          //   rules: [{
          //     required: false,
          //     message: " ",
          //     trigger: "blur"
          //   }],
          // }
          , {
            label: '开船日期',
            prop: 'etd',
            type: 'date'
          }, {
            label: '预配箱量',
            prop: 'expectCtnQty',
          }, {
            label: '起运港',
            prop: 'polId'
          }, {
            label: '目的港',
            prop: 'podId'
          }, {
            label: '截港日期',
            prop: 'etc',
            type: 'date'
          }, {
            label: '截单日期',
            prop: 'siCutoffDate',
            type: 'date'
          }, {
            label: '订舱代理',
            prop: 'agentId'
          }]
      },
      entrustOptionTwo: {
        align: 'center',
        menuAlign: 'center',
        addBtnText: '录入箱信息',
        index: true,
        cellBtn: true,
        addBtn: false,
        addRowBtn: true,
        showSummary: true,
        summaryText: "合计",
        sumColumnList: [
          {
            name: 'landWeight',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'ctnQuantity',
            type: 'sum',
            decimals: 7
          }],
        column: [{
          label: '尺寸箱型',
          cell: true,
          prop: 'ctnType',
          type: 'select',
          width: 100,
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=boxType",
          props: {
            label: "dictValue",
            value: "dictKey"
          }
        }, {
          label: '箱量',
          cell: true,
          prop: 'ctnQuantity',
          controls: false,
          precision: 0,
          width: 100,
          type: 'number'
        }, {
          label: '总重量(吨)',
          cell: true,
          prop: 'landWeight',
          controls: false,
          width: 200,
          precision: 2,
          type: 'number'
        }, {
          label: '单柜运费',
          cell: true,
          prop: 'landAmountD',
          controls: false,
          width: 200,
          precision: 2,
          type: 'number'
        }, {
          label: '备注',
          cell: true,
          width: 200,
          prop: 'remarks'
        }
        ]
      },
      collectionList: [],
      collectionOption:{},
      collectionOptionBackup: {
        align: 'center',
        menuAlign: 'center',
        index: true,
        cancelBtn: false,
        editBtn: false,
        delBtn: false,
        cellBtn: false,
        addBtn: false,
        addRowBtn: false,
        showSummary: true,
        addBtnText: '录入明细',
        summaryText: "合计",
        sumColumnList: [{
          name: 'price',
          type: 'sum',
          decimals: 2
        }, {
          name: 'amount',
          type: 'sum',
          decimals: 2
        }, {
          name: 'quantity',
          type: 'sum',
          decimals: 1
        }],
        column: [{
          label: '客户名称',
          slot: true,
          prop: 'corpId'
        }, {
          label: '费用名称',
          slot: true,
          prop: 'feeId'
        }, {
          label: '计价单位',
          cell: true,
          prop: 'unit',
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=unit",
          props: {
            label: "dictValue",
            value: "dictKey"
          }
        }, {
          label: '数量',
          cell: true,
          prop: 'quantity'
        }, {
          label: '单价',
          cell: true,
          prop: 'price'
        }, {
          label: '金额',
          cell: true,
          prop: 'amount'
        }, {
          label: '税率',
          cell: true,
          prop: 'taxRate'
        }, {
          label: '币别',
          cell: true,
          prop: 'currency',
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
        }, {
          label: '车号',
          cell: true,
          prop: 'plateNo',
          type: "select",
          props: {
            label: "label",
            value: "label"
          },
        }
        ]
      },
      paymentList: [],
      paymentOption:{},
      paymentOptionBackup:{
        align: 'center',
        menuAlign: 'center',
        index: true,
        cancelBtn: false,
        editBtn: false,
        delBtn: false,
        cellBtn: false,
        addBtn: false,
        addRowBtn: false,
        showSummary: true,
        addBtnText: '录入明细',
        summaryText: "合计",
        sumColumnList: [{
          name: 'price',
          type: 'sum',
          decimals: 2
        }, {
          name: 'amount',
          type: 'sum',
          decimals: 2
        }, {
          name: 'quantity',
          type: 'sum',
          decimals: 1
        }],
        column: [{
          label: '客户名称',
          slot: true,
          prop: 'corpId'
        }, {
          label: '费用名称',
          slot: true,
          prop: 'feeId'
        }, {
          label: '计价单位',
          cell: true,
          prop: 'unit',
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=unit",
          props: {
            label: "dictValue",
            value: "dictKey"
          }
        }, {
          label: '数量',
          cell: true,
          prop: 'quantity'
        }, {
          label: '单价',
          cell: true,
          prop: 'price'
        }, {
          label: '金额',
          cell: true,
          prop: 'amount'
        }, {
          label: '税率(默认6)',
          cell: true,
          prop: 'taxRate'
        }, {
          label: '币别(默认RMB)',
          cell: true,
          prop: 'currency',
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
        }, {
          label: '车号',
          cell: true,
          prop: 'plateNo',
          type: "select",
          props: {
            label: "label",
            value: "label"
          },
        }
        ]
      }
    };
  },
  async created() {
    this.entrustOptionTwoT = await this.getColumnData(this.getColumnName(86.1), this.entrustOptionTwoTBackup);
    this.collectionOption = await this.getColumnData(this.getColumnName(86.4), this.collectionOptionBackup);
    this.paymentOption = await this.getColumnData(this.getColumnName(86.5), this.paymentOptionBackup);
    this.KeyBoxTwo++
    if (this.id) {
      detailDelegationList({id: this.id, kind: '2'}).then(res => {
        this.goodsForm = res.data.data
        this.tableData = res.data.data.orderAddressList
        this.entrustList = res.data.data.orderItemList
        this.goodsList = res.data.data.orderItemList
        this.orderFilesList = res.data.data.fileList
        if (res.data.data.orderFeeList.length > 0) {
          res.data.data.orderFeeList.forEach(item => {
            if (item.type == 1) {
              this.collectionList.push(item)
            } else {
              this.paymentList.push(item)
            }
          })
        }
        delete this.goodsForm.orderAddressList
        delete this.goodsForm.orderItemList
        delete this.goodsForm.orderFeeList
        // this.tableData.forEach(item => {
        //   if (item.region) item.region = item.region.split(',')
        // })
      })
    }
    queryVehicle({orderId: this.id}).then(res => {
      const column = this.findObject(this.collectionOption.column, "plateNo");
      const columnTwo = this.findObject(this.paymentOption.column, "plateNo");
      column.dicData = []
      columnTwo.dicData = []
      res.data.data.forEach(item => {
        column.dicData.push({label: item})
        columnTwo.dicData.push({label: item})
      })
      this.key++
    });
    this.$refs.other.show = false
    // 非租户模式默认加载管理组数据
    if (!website.tenantMode) {
      this.initData(website.tenantId);
    } else {
      this.initData();
    }
  },
  methods: {
    //自定义列保存
    async saveColumnBoxTwo() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(86.1), this.entrustOptionTwoT);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crudBoxTwo.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnBoxTwo() {
      this.entrustOptionTwoT = this.entrustOptionTwoTBackup;
      const inSave = await this.delColumnData(this.getColumnName(86.1), this.entrustOptionTwoTBackup);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.crudBoxTwo.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列保存
    async saveColumnCollection() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(85.4), this.collectionOption);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.collection.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnCollection() {
      this.collectionOption = this.collectionOptionBackup;
      const inSave = await this.delColumnData(this.getColumnName(85.4), this.collectionOptionBackup);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.collection.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列保存
    async saveColumnPayment() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(86.5), this.paymentOption);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.payment.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnPayment() {
      this.paymentOption = this.paymentOptionBackup;
      const inSave = await this.delColumnData(this.getColumnName(86.5), this.paymentOptionBackup);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.payment.$refs.dialogColumn.columnBox = false;
      }
    },
    //打开附件
    annexOpen(row, index){
      this.enclosure = true
      this.formAnnex = row
      getFee({id:row.id}).then(res=>{
        this.orderList = res.data.data
      })
    },
    //保存
    saveAnnex(){
      saveFile({
        id:this.formAnnex.id,
        fileList:this.orderList
      }).then(res=>{
        this.$message.success("保存成功");
        this.annexOpen(this.formAnnex)
      })
    },
    getCorpData(val) {
      this.formData.fleetName = val.cname
    },
    confirmChange() {
      changeFleet({
        ...this.formData,
        id: this.formDataList.id,
        orderId: this.goodsForm.id,
        originalFleetName: this.formDataList.fleetName
      }).then(res => {
        this.$refs.saveForm.resetForm()
        this.entrustList = res.data.data
        this.dialogChange = false
        this.$message.success("变更成功");
      })
    },
    //查询业务部门
    initData(tenantId) {
      getDeptTree(tenantId).then(res => {
        const column = this.findObject(this.goodsOptionForm.column, "salesmanDept");
        column.dicData = res.data.data;
      });
    },
    //多选触发
    selectionChange(list) {
      this.selectionList = list
    },
    //批量调度
    batchScheduling() {
      this.form = {}
      this.dialogVisible = true
    },
    //提交调度
    saveScheduling() {
      this.$refs['form'].validate((valid, done) => {
        done()
        if (valid) {
          let data = []
          this.$confirm('是否确认调度?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.selectionList.forEach(item => data.push(item.id))
            dispatchBatch({
              ...this.form,
              idList: data,
              orderId: this.goodsForm.id
            }).then(res => {
              this.entrustList = res.data.data
              this.dialogVisible = false
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        } else {
          return false
        }
      })
    },
    //刷新数据
    refreshData() {
      detailDelegationList({id: this.id, kind: '2'}).then(res => {
        this.goodsForm = res.data.data
        this.tableData = res.data.data.orderAddressList
        this.entrustList = res.data.data.orderItemList
        this.goodsList = res.data.data.orderItemList
        this.orderFilesList = res.data.data.fileList
        if (res.data.data.orderFeeList.length > 0) {
          res.data.data.orderFeeList.forEach(item => {
            if (item.type == 1) {
              this.collectionList.push(item)
            } else {
              this.paymentList.push(item)
            }
          })
        }
        delete this.goodsForm.orderAddressList
        delete this.goodsForm.orderItemList
        delete this.goodsForm.orderFeeList
        // this.tableData.forEach(item => {
        //   if (item.region) item.region = item.region.split(',')
        // })
      })
    },
    //切换收付费
    handleSelect(tab, event) {
      this.activeIndex = tab.name
    },
    //箱信息保存
    rowSaveT(row, index, done, loading) {
      if (row.$cellEdit) {
        fleetDriverSave(row).then(res => {
          this.$message.success("保存成功");
        })
      }
      this.$refs.crudBoxTwo.rowCell(row, index)
    },
    rowSaveWell(row, index, done, loading) {
      done()
    },
    //箱信息调度
    designate(row, index) {
      if (row.fleetId) {
        this.$confirm('是否确定调度', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dispatchCollection(row).then(res => {
            this.$message.success('操作成功');
            this.entrustList[index].status = res.data.data.status
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      } else {
        this.$message.warning('请选择车队');
      }
    },
    //变更车队
    changeFleetT(row, index) {
      this.formDataList = row
      this.dialogChange = true
      this.formData = {}
    },
    //打开变更记录
    recordsOfChanges(row, index) {
      this.dialogRecord = true
      recordingDetails({itemId: row.id, kind: 2}).then(res => {
        this.dataRecord = res.data.data
      })
    },
    //取消调度
    cancelDesignate(row, index) {
      this.$confirm('是否确定取消调度', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelDispatchCollection({id: row.id}).then(res => {
          this.$message.success('操作成功');
          this.entrustList[index].status = res.data.data.status
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //箱信息选择车队
    getfleetIdT(data, row) {
      this.$set(row, 'fleetName', data.cname)
    },
    //地址新增
    addAddress() {
      this.tableData.splice(this.tableData.length - 1, 0, {leas: 1111})
    },
    //返回主列表
    backToList() {
      this.$emit('backToList')
    },
    //删除途径地址
    deleteAddress(scope) {
      this.tableData.splice(scope.$index, 1);
    },
    //箱信息保存
    rowSave(row, index, done, loading) {
      row.$cellEdit = false
      done()
    },
    rowCell(row, index) {
      if (row.$cellEdit) {
        if (row.plateNo){
          incidentalSubmit(row).then(res=>{
            this.$refs.collection.rowCell(row, index)
            row = res.data.data
            this.$message.success("保存成功");
          })
        }else {
          this.$message.error("请选择车号");
        }
      }else {
        this.$refs.collection.rowCell(row, index)
      }
    },
    paymentRowCell(row, index) {
      if (row.$cellEdit) {
        incidentalSubmit(row).then(res=>{
          row = res.data.data
          this.$message.success("保存成功");
        })
      }
      this.$refs.payment.rowCell(row, index)
    },
    //箱信息移除
    rowDel(row, index) {
      this.$confirm('此操作将永久删除该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.entrustList.splice(index, 1);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //保存
    editCustomer() {
      let data = JSON.parse(JSON.stringify(this.tableData))
      // data.forEach(item => {
      //   if (item.region.length !== 0) item.region = item.region.join(',')
      // })
      saveDelegationList({
        ...this.goodsForm,
        kind: '2',
        orderAddressList: data,
        orderItemList: this.entrustList,
        orderFeeList: this.collectionList.concat(this.paymentList)
      }).then(res => {
        this.$message.success('保存成功');
      })
    },
    //收费新增
    addRowCollection() {
      this.$refs.collection.rowCellAdd({
        currency: '1',
        type: '1',
        orderId:this.id,
        $cellEdit: true
      });
    },
    //付费新增
    addRowPayment() {
      this.$refs.payment.rowCellAdd({
        currency: '1',
        type: '2',
        orderId:this.id,
        $cellEdit: true
      });
    },
    //选择费用
    selectValue(value, row) {
      this.$set(row, 'feeName', value.cname)
    },
    //选择客户信息触发
    getfleetId(data, row) {
      this.$set(row, 'corpName', data.cname)
    },
    //收款信息移除
    makeDel(row, index) {
      this.$confirm('此操作将永久删除该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.id) removeCollection(row.id)
        this.collectionList.splice(index, 1);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //付款信息移除
    feeDel(row, index) {
      this.$confirm('此操作将永久删除该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.id) removeCollection(row.id)
        this.paymentList.splice(index, 1);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //自定义表头
    renderHeader(h) {
      return (
          <div>
            <el-tooltip className="item" effect="dark" content="增加途径地址" placement="top">
              <el-button type="primary" icon="el-icon-plus" size="mini" circle onClick={() => this.addAddress()}
                         style="margin-right: 1.25rem;"></el-button>
            </el-tooltip>
          </div>
      )
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-form-item {
  margin-bottom: 8px;
}

::v-deep .el-form-item__content {
  line-height: 32px;
}

::v-deep .el-card__body {
  padding: 10px 15px;
  font-size: 14px;
}
</style>