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="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 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-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: 200px"
            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>-->
    </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="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>
        <el-button type="primary" style="margin-top: 20px;" @click="save">确定</el-button>
        <el-button type="primary" style="margin-top: 20px;" @click="dialogVisible = false , relevantAttachments = []">取消</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'
  export default {
    name: "boxDistribution",
    components: {
    },
    data() {
      return {
        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 =>{
          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.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()
    },
    methods: {
      save(){
        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.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].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,
            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){
        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)
            }
          }
        }
      },
      //调箱动作带入选中列表
      changeAction(){
        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(){
        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
        console.log(this.select)
      },
    }
  };
</script>
<style lang="scss" scoped>

</style>