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

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :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 label="时间" prop="fBdate">
            <el-date-picker
              v-model="queryParams.fBdate"
              type="date"
              value-format="yyyy-MM-dd"
              @change="changeDate"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan"  size="mini" @click="determine">提交</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="箱号" prop="fNo">
          <el-input
            v-model="queryParams.fNo"
            style="width: 240px"
            placeholder="请输入名称"
            clearable
            size="small"/>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan"  size="mini" @click="search">搜索</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>-->
    </el-row>

    <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 :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 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="fVsl" width="100px"/>
      <el-table-column label="航次" align="center" prop="fVoy" width="100px"/>
      <el-table-column label="提单号" align="center" prop="fMblno" width="100px"/>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"

    />

  </div>
</template>

<script>
  import { listCorps, addmodify,getaddress} from "@/api/kaihe/containerNews/modifyPage";
  import Global from '@/layout/components/global'
  export default {
    name: "boxDistribution",
    components: {
    },
    data() {
      return {
        //模糊下拉查询地点
        addressOptions:[],
        //空重字典表
        updateEFOptions:[],
        //状态字典表
        cntrstatusOptions:[],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 客户详情表格数据
        corpsList: [],
        // 查询参数
        queryParams: {
          // pageNum: 1,
          // pageSize: 10,
          // fUpdateaddress:null,
          // fUpdateEF:null,
          // fStatus:null,
          // fBdate:null,
          fNo:null,
        },
        select:'',
        querDate:[],
      };
    },
    //页面跳转后传递参数
    activated() {
      let formDate = JSON.parse(this.$route.query.data)
      this.querDate = JSON.parse(this.$route.query.data)
      if(formDate){
        addmodify(formDate).then(response =>{
          this.corpsList = response.rows
          this.loading = false;
        })
      }

    },
    created() {
      this.getDicts("f_updateEF").then(response => {
        this.updateEFOptions = response.data;
      });
      this.getDicts("f_cntrstatus").then(response => {
        this.cntrstatusOptions = response.data;
      });
      this.addressMethod()
    },

    methods: {
      //搜索
      search(){
        let querDates = Object.assign(this.querDate ,this.queryParams)
        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) {
          for(let li in this.corpsList) {
            if (this.corpsList[li].fId == this.select[item].fId) {
              if (!this.select[item].foldSite) {
                this.select[item].foldSite = this.corpsList[li].fUpdateaddress
              }
              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)
              }
              if (!this.select[item].foldtime) {
                this.select[item].foldtime = this.corpsList[li].fUpdatetime
              }
              this.select[item].fVsl = this.corpsList[li].fVsl
              this.select[item].fVoy = this.corpsList[li].fVoy
              this.select[item].fMblno = this.corpsList[li].fMblno
            }
        }
          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,
          })
        }
        let tCntrno = data
        listCorps(tCntrno).then(response =>{
          this.$message.success("提交成功")
          // this.$router.push({
          //   path: "/containerNews/boxDistribution",
          // });
          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);
        })
      },
      //地点带入
      bringIn(value,row){
        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)
            }
          }
          // this.select[item].foldSite = value
        }
      },
      //空重带入选中列表
      changeUpdateEF(){
        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)
            }
          }
        }
      },
      //状态带入选中列表
      changeStatus(){
        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(){
        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
      },
    }
  };
</script>
<style lang="scss">

</style>