Warehouse_management_ui/src/views/kaihe/containerNews/modifyPage/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForms" :inline="true" v-show="showSearch" label-width="68px">
      <el-row>
        <el-form-item label="调入地点" prop="fUpdateaddress">
          <el-select
            style="width: 240px"
            v-model="queryParams.fUpdateaddress"
            placeholder="请输入调入地点"
            clearable
            @input="bringIn"
            size="small"
            filterable
            :remote-method="addressMethod"
          >
            <el-option
              v-for="item in this.addressOptions"
              :key="item.fId"
              :label="item.fName"
              :value="item.fId"
            >
              <span style="float: left; color: #8492a6; font-size: 13px">{{ item.typesName }}</span>
              <span style="float: right;">{{ item.fName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="空重" prop="fUpdateEF">
          <el-select
            v-model="queryParams.fUpdateEF"
            style="width: 240px"
            placeholder="请输入空重"
            clearable
            size="small"
            @change="changeUpdateEF"
          >
            <el-option
              v-for="item in this.updateEFOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="fStatus">
          <el-select
            v-model="queryParams.fStatus"
            style="width: 240px"
            placeholder="请输入状态"
            clearable
            @change="changeStatus"
            size="small"
          >
            <el-option
              v-for="item in this.cntrstatusOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="fBdate">
          <el-date-picker
            v-model="queryParams.fBdate"
            type="date"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            @change="changeDate"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="调箱动态" prop="fOpctnstatus">
          <el-select
            v-model="queryParams.fOpctnstatus"
            style="width: 240px"
            placeholder="请输入状态"
            clearable
            @change="changeAction"
            size="small"
          >
            <el-option
              v-for="item in this.boxActionOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" size="mini" @click="determine">提交</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-form :model="queryParam" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-row>
        <el-form-item label="箱号" prop="fNo">
          <el-input
            v-model="queryParam.fNo"
            style="width: 240px"
            placeholder="请输入箱号"
            clearable
            size="small"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="箱型" prop="fTypeid">
          <el-select
            v-model="queryParam.fTypeid"
            style="width: 240px"
            placeholder="请输入箱型"
            clearable
            size="small"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.fId"
              :label="item.fNo"
              :value="item.fId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="尺寸" prop="cntrsize">
          <el-select
            v-model="queryParam.cntrsize"
            style="width: 240px"
            placeholder="请输入尺寸"
            clearable
            size="small"
          >
            <el-option
              v-for="item in CntrsizeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="箱主" prop="fOwner">
          <el-select
            v-model="queryParam.fOwner"
            style="width: 240px"
            placeholder="请输入箱主"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in ownerOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="空重" prop="fUpdateef">
          <el-select
            v-model="queryParam.fUpdateef"
            style="width: 240px"
            placeholder="请输入空重"
            clearable
            size="small"
          >
            <el-option
              v-for="item in this.updateEFOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="fCntrstatus">
          <el-select
            v-model="queryParam.fCntrstatus"
            style="width: 240px"
            placeholder="请选择状态"
            clearable
            size="small"
          >
            <el-option
              v-for="item in this.cntrstatusOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" size="mini" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-row>

    </el-form>
    <el-row :gutter="10" class="mb8">
      <!--      <el-button type="cyan"  size="mini" @click="determine">提交</el-button>-->
      <!--        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
      <!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
      <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->

      <div style="margin: 0 12px;float: right">
        <el-tooltip
          class="item"
          effect="dark"
          content="列设置"
          placement="top"
        >
          <el-button
            icon="el-icon-setting"
            size="mini"
            circle
            @click="showSetting = !showSetting"
          ></el-button>
        </el-tooltip>
      </div>
    </el-row>
    <el-dialog title="提示" :visible.sync="showSetting" width="700px" v-dialogDrag>
      <div>配置排序列数据（拖动调整顺序）</div>
      <div style="margin-left: 17px">
        <el-checkbox
          v-model="allCheck"
          label="全选"
          @change="allChecked"
        ></el-checkbox>
      </div>
      <div style="padding: 4px; display: flex; justify-content: center">
        <draggable
          v-model="setRowList"
          group="site"
          animation="300"
          @start="onStart"
          @end="onEnd"
          handle=".indraggable"
        >
          <transition-group>
            <div
              v-for="item in setRowList"
              :key="item.surface"
              class="listStyle"
            >
              <div style="width: 500px" class="indraggable">
                <div class="progress" :style="{ width: item.width + 'px' }">
                  <el-checkbox
                    :label="item.name"
                    v-model="item.checked"
                    :true-label="0"
                    :false-label="1"
                  >{{ item.name }}
                  </el-checkbox>
                </div>
              </div>
              <el-input-number
                v-model.number="item.width"
                controls-position="right"
                :min="1"
                :max="500"
                size="mini"
              ></el-input-number>
            </div>
          </transition-group>
        </draggable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showSetting = false">取 消</el-button>
        <el-button @click="delRow" type="danger">重 置</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
    </el-dialog>

    <el-table v-loading="loading" :data="corpsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column type="index" width="55" label="行号" align="center"/>
      <el-table-column
        v-for="(item, index) in getRowList"
        :key="index"
        :label="item.name"
        :width="item.width"
        :prop="item.label"
        align="center"
        :show-overflow-tooltip="true"
        sortable
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.fVsl" v-if="item.label == 'fVsl'"/>
          <el-input v-model="scope.row.fVoy" v-if="item.label == 'fVoy'"/>
          <el-input v-model="scope.row.fMblno" v-if="item.label == 'fMblno'"/>
          <el-input v-model="scope.row.remark" v-if="item.label == 'remark'"/>
          <span v-if="item.label == 'fNo'">{{scope.row.fNo}}</span>
          <span v-if="item.label == 'typeidName'">{{scope.row.typeidName}}</span>
          <span v-if="item.label == 'cntrsizeName'">{{scope.row.cntrsizeName}}</span>
          <el-input v-model="scope.row.fSealno" v-if="item.label == 'fSealno'"/>
          <span v-if="item.label == 'ownerName'">{{scope.row.ownerName}}</span>
          <span v-if="item.label == 'fUpdatetime'">{{scope.row.fUpdatetime}}</span>
          <span v-if="item.label == 'addressName'">{{scope.row.addressName}}</span>
          <span v-if="item.label == 'opctnstatusName'">{{scope.row.opctnstatusName}}</span>
          <span v-if="item.label == 'updateEFName'">{{scope.row.updateEFName}}</span>
          <span v-if="item.label == 'cntrstatusName'">{{scope.row.cntrstatusName}}</span>
          <span v-if="item.label == 'foldSite'">{{scope.row.foldSite}}</span>
          <span v-if="item.label == 'foldFUpdateef'">{{scope.row.foldFUpdateef}}</span>
          <span v-if="item.label == 'foldFCntrstatus'">{{scope.row.foldFCntrstatus}}</span>
          <span v-if="item.label == 'foldtime'">{{scope.row.foldtime}}</span>
          <span v-if="item.label == 'fOpctnstatus'">{{scope.row.fOpctnstatus}}</span>

        </template>
        <!--        <template slot-scope="scope" v-if="item.label == 'fVoy'">-->
        <!--          <el-input v-model="scope.row.fVoy"/>-->
        <!--        </template>-->
        <!--        <template slot-scope="scope" v-if="item.label == 'fMblno'">-->
        <!--          <el-input v-model="scope.row.fMblno"/>-->
        <!--        </template>-->
        <!--        <template slot-scope="scope" v-if="item.label == 'remark'">-->
        <!--          <el-input v-model="scope.row.remark"/>-->
        <!--        </template>-->
      </el-table-column>
      <!--      <el-table-column :show-overflow-tooltip="true" label="箱号" align="center" prop="fNo" width="200px"/>-->
      <!--      <el-table-column label="箱型" align="center" prop="typeidName" width="100px"/>-->
      <!--      <el-table-column :show-overflow-tooltip="true" label="尺寸" align="center" prop="cntrsizeName" width="100px"-->
      <!--      />-->
      <!--      <el-table-column :show-overflow-tooltip="true" label="箱主" align="center" width="100px" prop="ownerName" />-->
      <!--      <el-table-column :show-overflow-tooltip="true" label="原时间" align="center" prop="fUpdatetime" />-->
      <!--      <el-table-column :show-overflow-tooltip="true" label="原地点" align="center" prop="addressName" />-->
      <!--      <el-table-column :show-overflow-tooltip="true" label="原调箱动态" align="center" prop="" width="100"/>-->
      <!--      <el-table-column label="原空重" align="center" prop="updateEFName" />-->
      <!--      <el-table-column label="原状态" align="center" prop="cntrstatusName" width="100"/>-->
      <!--      <el-table-column label="调入地点" align="center" prop="foldSite" width="100px"/>-->
      <!--      <el-table-column label="调入空重" align="center" prop="foldFUpdateef" width="100px"/>-->
      <!--      <el-table-column label="调入状态" align="center" prop="foldFCntrstatus" width="100px"/>-->
      <!--      <el-table-column label="调入时间" align="center" prop="foldtime" width="100px"/>-->
      <!--      <el-table-column label="调箱动态" align="center" prop="fOpctnstatus" width="100px"/>-->
      <!--      <el-table-column label="船名" align="center" prop="fVsl" width="100px">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-input v-model="scope.row.fVsl"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="航次" align="center" prop="fVoy" width="100px">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-input v-model="scope.row.fVoy"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="提单号" align="center" prop="fMblno" width="100px">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-input v-model="scope.row.fMblno"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="备注" align="center" prop="remark" width="100px">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-input v-model="scope.row.remark"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="上传附件" align="center" prop="" width="100px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="uploadFile(scope.row)">上传</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
    />
    <el-dialog
      title="上传附件"
      :visible.sync="dialogVisible"
      width="80%"
      :close-on-click-modal="false"
    >
      <template slot="title">
        <i class="header-icon el-icon-circle-plus" style="font-size: 16px"
        ><span
          style="font-size: 16px; font-weight: bolder; margin-left: 5px"
        >附件上传</span
        >
        </i>
      </template>
      <div>
        <div
          style=" display: flex;justify-content: space-between;margin: 10px 0;"
        >
          <div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addRelevt"
            >添加
            </el-button
            >
          </div>
        </div>
      </div>
      <el-table
        :data="relevantAttachments"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        style="width: 100%"
        height="150"
      >
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column
          prop="fName"
          header-align="center"
          align="center"
          width="250px"
          label="附件名称"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fName"
              placeholder="附件名称"
              show-word-limit
            />
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="createBy"-->
        <!--          header-align="center"-->
        <!--          align="center"-->
        <!--          width="250px"-->
        <!--          label="上传人"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-input-->
        <!--              v-model="scope.row.createBy"-->
        <!--              disabled-->
        <!--              placeholder="上传人"-->
        <!--              show-word-limit-->
        <!--            />-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          width="250px"
          label="上传时间"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.createTime"
              type="date"
              disabled
              placeholder="上传时间"
              format="yyyy-MM-dd HH:mm"
              value-format="timestamp"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          prop="fUrl"
          header-align="center"
          align="center"
          width="300px"
          label="上传附件"
        >
          <template slot-scope="scope">
            <el-upload
              class="upload-demo"
              :action="uploadImgUrl"
              :on-success="(res,file)=>{handleSucces(scope,res,file)}"
              :headers="headers"
              style="width:25%;float: left"
              :show-file-list="false"
              :limit="1"
            >
              <el-button size="small" type="primary" style="margin-left:20px">点击上传</el-button>
            </el-upload>
            <el-button size="small" type="primary" @click="checkFile(scope)">查看</el-button>
            <el-button size="small" type="primary" @click="deleteFile(scope)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, relevantAttachments)"
              size="small"
            >移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveFile">确定</el-button>
        <el-button type="primary" @click="dialogVisible = false , relevantAttachments = [], file = []"
        >取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listCorps, addmodify, getaddress } from '@/api/kaihe/containerNews/modifyPage'
import Global from '@/layout/components/global'
import { getType } from '@/api/kaihe/containerNews/boxInformation'
import { getToken } from '@/utils/auth'
import Cookies from 'js-cookie'
import { addSet, resetModule, select } from '@/api/system/set'
import draggable from 'vuedraggable'
import Vue from 'vue'
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    const enlarge = el.querySelector('.enlarge')
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
    if(enlarge){
      enlarge.onclick = (e) => {
        dragDom.style.top = '0px'
        dragDom.style.left = '0px'
      }
    }
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/\px/g, '')
        styT = +sty.top.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY

        // 移动当前元素

        if ((t + styT) >= 0){
          dragDom.style.top = `${t + styT}px`
        }
        dragDom.style.left = `${l + styL}px`
        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

export default {
  name: 'boxDistribution',
  components: {
    draggable
  },
  data() {
    return {
      setRowList: [],
      getRowList: [],
      tableDate: [
        {
          surface: '1',
          label: 'fNo',
          name: '箱号',
          checked: 0,
          fixed: 'left',
          width: 100
        },
        {
          surface: '2',
          label: 'typeidName',
          name: '箱型',
          checked: 0,
          fixed: 'left',
          width: 100
        },
        {
          surface: '3',
          label: 'fSealno',
          name: '铅封号',
          checked: 0,
          fixed: 'left',
          width: 100
        },
        {
          surface: '4',
          label: 'cntrsizeName',
          name: '尺寸',
          checked: 0,
          fixed: 'left',
          width: 100
        },
        {
          surface: '5',
          label: 'ownerName',
          name: '箱主',
          checked: 0,
          fixed: 'left',
          width: 100
        },
        {
          surface: '6',
          label: 'fUpdatetime',
          name: '原时间',
          checked: 0,
          fixed: 'left',
          width: 100
        },
        {
          surface: '7',
          label: 'addressName',
          name: '原地点',
          checked: 0,
          fixed: 'left',
          width: 100
        },
        {
          surface: '8',
          label: 'opctnstatusName',
          name: '原调箱动态',
          checked: 0,
          fixed: 'left',
          width: 100
        },
        {
          surface: '9',
          label: 'updateEFName',
          name: '原空重',

          checked: 0,
          width: 100
        },
        {
          surface: '10',
          label: 'cntrstatusName',
          name: '原状态',

          checked: 0,
          width: 100
        },
        {
          surface: '11',
          label: 'foldSite',
          name: '调入地点',

          checked: 0,
          width: 100
        },
        {
          surface: '12',
          label: 'foldFUpdateef',
          name: '调入空重',
          checked: 0,

          width: 100
        },
        {
          surface: '13',
          label: 'foldFCntrstatus',
          name: '调入状态',
          checked: 0,

          width: 100
        },
        {
          surface: '14',
          label: 'foldtime',
          name: '调入时间',
          checked: 0,

          width: 100
        },
        {
          surface: '15',
          label: 'fOpctnstatus',
          name: '调箱动态',
          checked: 0,

          width: 100
        },
        {
          surface: '16',
          label: 'fVsl',
          name: '船名',
          checked: 0,

          width: 100
        },
        {
          surface: '17',
          label: 'fVoy',
          name: '航次',
          checked: 0,

          width: 100
        },
        {
          surface: '18',
          label: 'fMblno',
          name: '提单号',
          checked: 0,
          width: 100
        },
        {
          surface: '19',
          label: 'remark',
          name: '备注',
          checked: 0,
          width: 100
        }
      ],
      //自定义列
      showSetting: false,
      allCheck: false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      relevantAttachments: [],
      headers: { Authorization: 'Bearer ' + getToken() },
      //集装箱尺码字典表
      CntrsizeOptions: [],
      //模糊查询箱类型
      typeOptions: [],
      //附件上传弹窗
      dialogVisible: false,
      //调箱动作字典表
      boxActionOptions: [],
      //集装箱主字典表
      ownerOptions: [],
      //模糊下拉查询地点
      addressOptions: [],
      //空重字典表
      updateEFOptions: [],
      //状态字典表
      cntrstatusOptions: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户详情表格数据
      corpsList: [],
      // 查询参数
      queryParams: {
        fUpdateaddress: null,
        fUpdateEF: null,
        fStatus: null,
        fBdate: null,
        fOpctnstatus: null
      },
      queryParam: {
        fNo: null,
        fTypeid: null,
        cntrsize: null,
        fOwner: null,
        fUpdateef: null,
        fCntrstatus: null
      },
      select: '',
      querDate: [],
      file: [],
      row: []
    }
  },
  //页面跳转后传递参数
  activated() {
    let formDate = JSON.parse(this.$route.query.data)
    this.querDate = JSON.parse(this.$route.query.data)
    if (formDate) {
      addmodify(formDate).then(response => {
        console.log(response)
        this.corpsList = response.rows
        this.loading = false
      })
    }

  },
  created() {
    this.setRowList = this.tableDate;
    this.getRowList = this.tableDate;
    this.getDicts('f_updateEF').then(response => {
      this.updateEFOptions = response.data
    })
    this.getDicts('f_cntrstatus').then(response => {
      this.cntrstatusOptions = response.data
    })
    this.getDicts('f_owner').then(response => {
      this.ownerOptions = response.data
    })
    this.getDicts('f_opctnstatus').then(response => {
      this.boxActionOptions = response.data
    })
    this.getDicts('f_cntrsize').then(response => {
      this.CntrsizeOptions = response.data
    })
    this.addressMethod()
    this.boxTypeMethod()
    this.getRow();
  },
  methods: {
    //重置列表
    delRow() {
      this.data = {
        tableName: '修改页面',
        userId: Cookies.get('userName')
      }
      resetModule(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false
          this.setRowList = this.tableDate
          this.getRowList = this.tableDate
        }
      })
    },
    //列设置全选
    allChecked() {
      if (this.allCheck == true) {
        this.setRowList.map((e) => {
          return (e.checked = 0)
        })
      } else {
        this.setRowList.map((e) => {
          return (e.checked = 1)
        })
      }
    },
    //查询列数据
    getRow() {
      let that = this
      this.data = {
        tableName: '修改页面',
        userId: Cookies.get('userName')
      }
      select(this.data).then((res) => {
        if (res.data.length != 0) {
          this.getRowList = res.data.filter((e) => e.checked == 0)
          this.setRowList = res.data
          this.setRowList = this.setRowList.reduce((res, item) => {
            res.push({
              surface: item.surface,
              label: item.label,
              name: item.name,
              checked: item.checked,
              width: item.width,
              fixed: item.fixed
            })
            return res
          }, [])
        }
      })
      console.log(this.getRowList)
    },
    //保存列设置
    save() {
      this.showSetting = false
      this.data = {
        tableName: '修改页面',
        userId: Cookies.get('userName'),
        sysTableSetList: this.setRowList
      }
      addSet(this.data).then((res) => {
        this.getRowList = this.setRowList.filter((e) => e.checked == 0)
      })
    },
    //开始拖拽事件
    onStart() {
      this.drag = true
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false
    },
    saveFile() {
      this.row.accessoryList = this.file
      this.dialogVisible = false
      this.relevantAttachments = []
      console.log(this.row)
    },
    //模糊查询箱类型
    boxTypeMethod() {
      let queryParams = { pageNum: 1 }
      getType().then(response => {
        this.typeOptions = response.rows
      })
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    // 新增附件上传
    addRelevt() {
      this.relevantAttachments.push({
        fUrl: null,
        fName: null,
        // createBy: this.form.createBy,
        createTime: Date.parse(new Date())
      })
    },
    //附件删除
    deleteFile(scope) {
      this.relevantAttachments[scope.$index].fName = ''
      this.relevantAttachments[scope.$index].fUrl = ''
      if (this.relevantAttachments[scope.$index].fUrl === '') {
        this.$message.success('删除成功')
      } else {
        this.$message.error('未知错误，删除失败')
      }
    },
    //附件查看
    checkFile(scope) {
      if (this.relevantAttachments[scope.$index].fUrl) {
        window.open(this.relevantAttachments[scope.$index].fUrl)
      } else {
        this.$message.error('请上传附件')
      }
    },
    //上传附件
    handleSucces(scope, res, file) {
      console.log(res)
      console.log(this.relevantAttachments[scope.$index])
      this.relevantAttachments[scope.$index].fName = res.fileName
      this.relevantAttachments[scope.$index].fUrl = res.url
      this.file.push({
        fName: this.relevantAttachments[scope.$index].fName,
        fUrl: this.relevantAttachments[scope.$index].fUrl,
        createTime: this.relevantAttachments[scope.$index].createTime
      })
      if (this.relevantAttachments[scope.$index].fUrl === '') {
        this.$message.error('上传失败')
      }
      {
        this.$message.success('上传成功')
      }
    },
    uploadFile(row) {
      this.file = []
      this.row = row
      this.dialogVisible = true
      if (row.accessoryList !== null) {
        console.log(row.accessoryList)
        this.relevantAttachments = row.accessoryList
      } else if (this.row.length === 0) {
        this.relevantAttachments = []
      } else {
        this.relevantAttachments = []
      }
    },
    // handleClose(done) {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
    //       done();
    //
    //     })
    //     .catch(_ => {});
    // },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParam = {
        fNo: '',
        fTypeid: '',
        cntrsize: '',
        fOwner: '',
        fUpdateef: '',
        fCntrstatus: ''
      }
      this.search()
    },
    //搜索
    search() {
      let querDates = Object.assign(this.querDate, this.queryParam)
      console.log(this.queryParam)
      addmodify(querDates).then(response => {
        this.corpsList = response.rows
      })
    },
    //模糊查询地点
    addressMethod() {
      let queryParams = { pageNum: 1 }
      getaddress(queryParams).then(response => {
        this.addressOptions = response.rows
      })
    },
    //提交修改数据
    determine() {
      let data = []
      for (let item in this.select) {
        console.log(this.select[item])
        for (let li in this.corpsList) {
          if (!this.select[item].foldSite) {
            this.$message.error('请选择调入地点')
            return false
          } else if (!this.select[item].fOpctnstatus) {
            this.$message.error('请选择调箱动态')
            return false
          } else {
            if (!this.select[item].foldFUpdateef) {
              this.select[item].foldFUpdateef = this.corpsList[li].updateEFName
              this.$set(this.select[item], 'FUpdateef', this.corpsList[li].fUpdateef)
            }
            if (!this.select[item].foldFCntrstatus) {
              this.select[item].foldFCntrstatus = this.corpsList[li].cntrstatusName
              this.$set(this.select[item], 'FCntrstatus', this.corpsList[li].fCntrstatus)
            }
          }
        }

        data.push({
          fId: this.select[item].fId,
          foldSite: this.select[item].fold,
          foldFUpdateef: this.select[item].FUpdateef,
          foldFCntrstatus: this.select[item].FCntrstatus,
          foldtime: this.select[item].foldtime,
          fVsl: this.select[item].fVsl,
          fVoy: this.select[item].fVoy,
          fMblno: this.select[item].fMblno,
          fSealno: this.select[item].fSealno,
          fOpctnstatus: this.select[item].boxAdjustmentAction,
          remark: this.select[item].remark,
          accessoryList: this.file
        })
      }

      let tCntrno = data
      listCorps(tCntrno).then(response => {
        this.$message.success('提交成功')
        // this.$router.push({
        //   path: "/containerNews/boxDistribution",
        // });
        console.log(this.corpsList.length)
        if (this.querDate) {
          addmodify(this.querDate).then(response => {
            this.corpsList = response.rows
            this.loading = false
            if (response.rows.length === 0) {
              let view = {
                fullPath: '/containerNews/modifyPage?data=%7B%22typeidName%22%3A%221%22,%22fUpdateaddress%22%3A%22%E5%B1%B1%E4%B8%9C%22%7D',
                hash: '',
                matched: Array(2),
                meta: Object,
                name: 'ModifyPage',
                params: Object,
                path: '/containerNews/modifyPage',
                query: Object,
                title: '修改页面'
              }
              this.$router.push({ path: '/containerNews/boxDistribution' })
              this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
                if (this.isActive(view)) {
                  this.toLastView(visitedViews, view)
                }
              })
              Global.$emit('removeCache', 'closeSelectedTag', view)
            }

          })
        }
        console.log(this.corpsList.length)
      })
    },
    //地点带入
    bringIn(value, row) {
      if (this.select.length === 0) {
        this.$message.error('请选择行')
        this.queryParams.fUpdateaddress = ''
      } else {
        console.log(this.select)
        for (let item in this.select) {
          for (let li in this.addressOptions) {
            if (this.queryParams.fUpdateaddress == this.addressOptions[li].fId) {
              this.$set(this.select[item], 'foldSite', this.addressOptions[li].fName)
              this.$set(this.select[item], 'fold', this.queryParams.fUpdateaddress)
              console.log(this.select[item].foldSite)
            }
          }
          // this.select[item].foldSite = value
        }

      }
    },
    //空重带入选中列表
    changeUpdateEF() {
      if (this.select.length === 0) {
        this.$message.error('请选择行')
        this.queryParams.fUpdateEF = ''
      } else {
        for (let item in this.select) {
          for (let li in this.updateEFOptions) {
            if (this.queryParams.fUpdateEF == this.updateEFOptions[li].dictValue) {
              this.$set(this.select[item], 'foldFUpdateef', this.updateEFOptions[li].dictLabel)
              this.$set(this.select[item], 'FUpdateef', this.queryParams.fUpdateEF)
            }
          }
        }
      }
    },
    //调箱动作带入选中列表
    changeAction() {
      if (this.select.length === 0) {
        this.$message.error('请选择行')
        this.queryParams.fOpctnstatus = ''
      } else {
        for (let item in this.select) {
          for (let li in this.boxActionOptions) {
            if (this.queryParams.fOpctnstatus == this.boxActionOptions[li].dictValue) {
              this.$set(this.select[item], 'fOpctnstatus', this.boxActionOptions[li].dictLabel)
              this.$set(this.select[item], 'boxAdjustmentAction', this.queryParams.fOpctnstatus)
            }
          }
        }
      }
    },
    //状态带入选中列表
    changeStatus() {
      if (this.select.length === 0) {
        this.$message.error('请选择行')
        this.queryParams.fStatus = ''
      } else {
        for (let item in this.select) {
          for (let li in this.cntrstatusOptions) {
            if (this.queryParams.fStatus == this.cntrstatusOptions[li].dictValue) {
              this.$set(this.select[item], 'foldFCntrstatus', this.cntrstatusOptions[li].dictLabel)
            }
            this.$set(this.select[item], 'FCntrstatus', this.queryParams.fStatus)
          }
        }
      }
    },
    //时间带入选列表
    changeDate() {
      if (this.select.length === 0) {
        this.$message.error('请选择行')
      } else {
        for (let item in this.select) {
          this.$set(this.select[item], 'foldtime', this.queryParams.fBdate)
        }
      }
    },
    //多选框选中
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.fId)
      this.select = selection
      console.log(this.select)
    }
  }
}
</script>
<style lang="scss" scoped>
.tabSetting {
  display: flex;
  justify-content: flex-end;
}

.listStyle {
  display: flex;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}

.listStyle:last-child {
  border-bottom: 1px solid #dcdfe6;
}

.progress {
  display: flex;
  align-items: center;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.05);
  height: 100%;
}
</style>