Warehouse_management_ui/src/views/jiGang/index.vue

<template>
  <div class="app-container">
    <div v-show="jiGang == false">
      <el-form
        :model="query"
        ref="queryForm"
        v-show="showSearch"
        :inline="true"
        label-width="88px"
      >
        <el-row>
          <el-form-item label="提单号" prop="fMblno">
            <el-input
              v-model="query.fMblno"
              placeholder="请输入提单号"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="cyan"
              icon="el-icon-search"
              size="mini"
              @click="getList"
            >搜索
            </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-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd()"
            v-hasPermi="['warehouseBusiness:containerPort:add']"
          >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['agreement:agreementTask:edit']"
          >修改
          </el-button>
        </el-col>
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="danger"-->
        <!--          icon="el-icon-delete"-->
        <!--          size="mini"-->
        <!--          :disabled="multiple"-->
        <!--          @click="handleDelete"-->
        <!--          v-hasPermi="['agreement:agreementTask:remove']"-->
        <!--        >删除-->
        <!--        </el-button>-->
        <!--      </el-col>-->
        <!--    <el-col :span="1.5">-->
        <!--      <el-button-->
        <!--        type="info"-->
        <!--        icon="el-icon-download"-->
        <!--        size="mini"-->
        <!--        :disabled="single"-->
        <!--        @click="handleUpdate(null, 2)"-->
        <!--        v-hasPermi="['agreement:agreementStorage:export']"-->
        <!--      >复制新增-->
        <!--      </el-button>-->
        <!--    </el-col>-->
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <el-table
        v-loading="loading"
        :data="agreementList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column type="index" label="行号" align="center" fixed width="60"/>
        <el-table-column
          label="日期"
          sortable
          align="center"
          prop="fBsdate"
          fixed
          show-overflow-tooltip
        />
        <el-table-column
          label="提单号"
          sortable
          align="center"
          prop="fMblno"
          fixed
          show-overflow-tooltip
        />
        <el-table-column
          label="制单人"
          sortable
          align="center"
          prop="createBy"
          fixed
          show-overflow-tooltip
        />
        <el-table-column
          label="状态"
          sortable
          align="center"
          prop="fBillstatus"
          fixed
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleUpdate(scope.row)"
            >查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-if="scope.row.fBillstatus === '暂存'"
              v-hasPermi="['warehouseBusiness:containerPort:edit']"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-if="scope.row.fBillstatus === '暂存'"
              v-hasPermi="['warehouseBusiness:containerPort:remove']"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-top: 10px;float: right;padding-bottom: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div v-show="jiGang == true">
      <div style="margin-bottom: 20px;">
        <el-button round icon="el-icon-arrow-left" @click="open" size="small">返回列表</el-button>
        <el-button type="primary" round size="small" @click="submitForm" icon="el-icon-edit">保 存</el-button>
        <el-button type="success" round size="small" @click="submit" icon="el-icon-check" :disabled="disabled">提 交</el-button>
        <el-button type="danger" round size="small" icon="el-icon-close" @click="cancellation"
                   v-if="queryParams.fBillstatus >2">撤销提交
        </el-button>
      </div>
      <el-form
        :model="queryParams"
        ref="rules"
        :rules="rules"
        :inline="true"
        label-width="88px"
      >
        <el-row>
          <el-form-item label="日期" prop="fBsdate">
            <el-date-picker
              v-model="queryParams.fBsdate"
              type="date"
              value-format="yyyy-MM-dd"
              :disabled="disabled"
              clearable
              size="small"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="提单号" prop="fMblno">
            <el-input
              v-model="queryParams.fMblno"
              placeholder="请输入提单号"
              :disabled="disabled"
              clearable
              size="small"
            />
          </el-form-item>
        </el-row>
      </el-form>

      <h3><i class="el-icon-circle-plus"></i>收款信息</h3>
      <div
        class="dialogTableTitle flex a-center jlr"
        style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 10px 0;
            "
      >
        <div>
          <el-button
            size="small"
            type="primary"
            @click.prevent="addCollection()"
            :disabled="disabled"
          >新行
          </el-button>
          <!-- <el-button :disabled="browseStatus" @click.prevent="deleteRow(warehouseDrList)"
          >删除
        </el-button> -->
        </div>
      </div>
      <el-table
        :data="warehouseDrList"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        show-summary
        :disabled="disabled"
        :summary-method="warehouseDrSummaries"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column
          prop="fCorpid"
          header-align="center"
          align="center"
          width="180px"
          label="客户名称"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fCorpid"
              filterable
              remote
              :remote-method="corpsRemoteMethod"
              placeholder="客户名称"
              :disabled="disabled"
            >
              <el-option
                v-for="(dict, index) in KHblnoOptions"
                :key="index.fId"
                :label="dict.fName"
                :value="dict.fId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fFeeunitid"
          header-align="center"
          align="center"
          width="180px"
          label="码头"
        >
          <template slot-scope="scope">
            <el-select
              style="width: 80%"
              v-model="scope.row.fFeeunitid"
              filterable
              :disabled="disabled"
            >
              <el-option
                v-for="(dict, index) in businessTypeOption"
                :key="index.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>


        <el-table-column
          prop="fFeeid"
          header-align="center"
          align="center"
          width="180px"
          label="费用名称"
        >
          <template slot-scope="scope">
            <el-select
              style="width: 80%"
              v-model="scope.row.fFeeid"
              filterable
              :disabled="disabled"
            >
              <el-option
                v-for="(dict, index) in fFeeid_s"
                :key="index.fId"
                :label="dict.fName"
                :value="dict.fId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          prop="fInventoryDays"
          header-align="center"
          align="center"
          width="180px"
          label="箱型"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fInventoryDays"
              placeholder="请选择箱型"
              clearable
              :disabled="disabled"
            >
              <el-option
                v-for="(dict, index) in jFeetunitOptions"
                :key="index.fId"
                :label="dict.fNo"
                :value="dict.fId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fQty"
          header-align="center"
          align="center"
          width="130px"
          label="箱量"
        >
          <template slot-scope="scope">
            <el-input
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fQty"
              placeholder="箱量"
              @input="calculation(scope.row)"
              show-word-limit
              :disabled="disabled"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fUnitprice"
          header-align="center"
          align="center"
          width="130px"
          label="单价"
        >
          <template slot-scope="scope">
            <el-input
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fUnitprice"
              placeholder="单价"
              show-word-limit
              @input="calculation(scope.row)"
              :disabled="disabled"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fAmt"
          header-align="center"
          align="center"
          width="130px"
          label="金额"
        >
          <template slot-scope="scope">
            <el-input
              :disabled="disabled"
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fAmt"
              placeholder="金额"
              show-word-limit
            />
          </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, warehouseDrList)
                  "
              size="small"
              :disabled="disabled"
            >移除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <h3><i class="el-icon-remove"></i>付款信息</h3>
      <div
        class="dialogTableTitle flex a-center jlr"
        style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 10px 0;
            "
      >
        <div>
          <el-button
            type="primary"
            @click.prevent="addpayment()"
            size="small"
            :disabled="disabled"
          >新行
          </el-button>
        </div>
      </div>
      <el-table
        :data="warehouseCrList"
        :disabled="disabled"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        show-summary
        :summary-method="warehouseDrSummaries"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column
          prop="fCorpid"
          header-align="center"
          align="center"
          width="180px"
          label="客户名称"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fCorpid"
              filterable
              :disabled="disabled"
              remote
              :remote-method="corpsRemote"
              placeholder="客户名称"
            >
              <el-option
                v-for="(dict, index) in blnoOptions"
                :key="index.fId"
                :label="dict.fName"
                :value="dict.fId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fFeeunitid"
          header-align="center"
          align="center"
          width="180px"
          label="码头"
        >
          <template slot-scope="scope">
            <el-select
              style="width: 80%"
              v-model="scope.row.fFeeunitid"
              filterable
              :disabled="disabled"
            >
              <el-option
                v-for="(dict, index) in businessTypeOption"
                :key="index.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fFeeid"
          header-align="center"
          align="center"
          width="180px"
          label="费用名称"
        >
          <template slot-scope="scope">
            <el-select
              style="width: 80%"
              v-model="scope.row.fFeeid"
              filterable
              :disabled="disabled"
            >
              <el-option
                v-for="(dict, index) in fFeeid_s"
                :key="index.fId"
                :label="dict.fName"
                :value="dict.fId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fInventoryDays"
          header-align="center"
          align="center"
          width="180px"
          label="箱型"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fInventoryDays"
              placeholder="请选择箱型"
              :disabled="disabled"
              clearable
            >
              <el-option
                v-for="(dict, index) in jFeetunitOptions"
                :key="index.fId"
                :label="dict.fNo"
                :value="dict.fId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fQty"
          header-align="center"
          align="center"
          width="130px"
          label="箱量"
        >
          <template slot-scope="scope">
            <el-input
              :disabled="disabled"
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fQty"
              placeholder="箱量"
              @input="calculation(scope.row)"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fUnitprice"
          header-align="center"
          align="center"
          width="130px"
          label="单价"
        >
          <template slot-scope="scope">
            <el-input
              :disabled="disabled"
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fUnitprice"
              @input="calculation(scope.row)"
              placeholder="单价"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fAmt"
          header-align="center"
          align="center"
          width="130px"
          label="金额"
        >
          <template slot-scope="scope">
            <el-input
              :disabled="disabled"
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fAmt"
              placeholder="金额"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <!-- <el-button size="small">审核费用</el-button> -->
            <el-button
              @click.native.prevent="
                    deleteRow(scope.$index, warehouseCrList)
                  "
              size="small"
              :disabled="disabled"
            >移除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  listCorps,
  preservation,
  submit,
  allInformation,
  single,
  singleDeletion,
  listCorps_s,
  revokeContainerPort
} from '@/api/jiGang'
import {listFees} from '@/api/basicdata/fees'

export default {
  name: 'jiGang',
  data() {
    return {
      rules:{
        fBsdate:[{required: true, message: ' ', trigger: 'blur'}],
        fMblno:[{required: true, message: ' ', trigger: 'blur'}]
      },
      showSearch: true,
      jiGang: false,
      disabled: false,
      agreementList: [],
      warehouseCrList: [],
      fCNameOptions: [],
      fFeeid_s: [],
      fStltypeOptions: [],
      jFeetunitOptions: [],
      KHblnoOptions: [],
      browseStatus: false,
      fDNameOptions: [],
      warehouseDrList: [],
      businessTypeOption: [],
      loading: true,
      blnoOptions: [],
      single: true,
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 10
      },
      selection: [],
      queryParams: {}
    }
  },
  created() {
    allInformation().then(res => {
      console.log(res)
      if (res.data.corpList) {
        this.KHblnoOptions = res.data.corpList
      }
      if (res.data.pierList) {
        this.businessTypeOption = res.data.pierList
      }
      if (res.data.cntrList) {
        this.jFeetunitOptions = res.data.cntrList
      }
      if (res.data.fees) {
        this.fFeeid_s = res.data.fees
      }
    })
    this.getList()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val
      this.getList()
    },
    getList() {
      listCorps_s(this.query).then(res => {
        this.total = res.total
        console.log(res)
        this.loading = false
        this.agreementList = res.rows
      })
    },
    corpsRemoteMethod(name) {
      if (name == null || name === '') {
        return false
      }
      let queryParams = {pageNum: 1, fName: name, fTypeid: 1}
      listCorps(queryParams).then((response) => {
        console.log(response)
        this.fMblnoOptions = response.rows
      })
    },
    corpsRemote(name) {
      if (name == null || name === '') {
        return false
      }
      let queryParams = {pageNum: 1, fName: name, fTypeid: 2}
      listCorps(queryParams).then((response) => {
        console.log(response)
        this.blnoOptions = response.rows
      })
    },
    changeFeeId(row) {
      for (let li in this.fWbuOptions) {
        if (row.fFeeid === this.fWbuOptions[li].fId) {
          this.$set(row, 'fFeeunitid', this.fWbuOptions[li].fFeeunitid + '')
          this.changeFeeUnit(row)
          break
        }
      }
    },
    resetQuery() {
      this.query = {
        pageNum: 1,
        pageSize: 10
      }
    },
    open() {
      this.$confirm('是否确定返回列表?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.jiGang = false
      }).catch(() => {
      })
    },
    handleSelectionChange(selection) {
      console.log(selection)
      this.selection = selection
      if (selection.length === 1) {
        this.single = false
      } else {
        this.single = true
      }
    },
    handleUpdate(row) {
      let fId
      if (this.selection.length == 1) {
        fId = this.selection[0].fId
      } else {
        fId = row.fId
      }
      single(fId).then(res => {
        if (res.code === 200) {
          this.jiGang = true
          this.queryParams = res.data.warehouseBills
          this.warehouseDrList = res.data.feesDrList
          this.warehouseCrList = res.data.feesCrList
          for (let item in this.warehouseDrList){
            this.warehouseDrList[item].fFeeunitid = this.warehouseDrList[item].fFeeunitid + ''
          }
          for (let item in this.warehouseCrList){
            this.warehouseCrList[item].fFeeunitid = this.warehouseCrList[item].fFeeunitid + ''
          }
          if (this.queryParams.fBillstatus !== 2) {
            this.disabled = true
          } else {
            this.disabled = false
          }
        }
      })
    },
    handleDelete(row) {
      singleDeletion(row.fId).then(res => {
        console.log(res)
        if (res.code === 200){
          this.$message.success(res.msg);
          this.getList()
        }
      })
    },
    handleAdd() {
      this.jiGang = true
      this.disabled = false
      this.queryParams = {}
      this.warehouseDrList = []
      this.warehouseCrList = []
    },
    addpayment() {
      this.warehouseCrList.push({
        fCorpid: '',
        fFeeunitid: '',
        fInventoryDays: '',
        fQty: '',
        fUnitprice: '',
        fAmt: '',
        fFeeid: ''
      })
      this.fWbuOptions = []
      let queryParams = {pageNum: 1, fDc: 'C'}
      listFees(queryParams).then((response) => {
        this.fCNameOptions = response.rows
      })
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    submitForm() {
      this.$refs["rules"].validate((valid) => {
        if (valid) {
          let formDatae = new window.FormData()
          formDatae.append('warehouseBills', JSON.stringify(this.queryParams))
          formDatae.append('feesDr', JSON.stringify(this.warehouseDrList))
          formDatae.append('feesCr', JSON.stringify(this.warehouseCrList))
          preservation(formDatae).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('保存成功');
              this.getList()
              this.jiGang = false
            }
          })
        }
      });
    },
    submit() {
      this.$refs["rules"].validate((valid) => {
        if (valid) {
          let formDatae = new window.FormData()
          formDatae.append('warehouseBills', JSON.stringify(this.queryParams))
          formDatae.append('feesDr', JSON.stringify(this.warehouseDrList))
          formDatae.append('feesCr', JSON.stringify(this.warehouseCrList))
          submit(formDatae).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('提交成功');
              this.getList()
              this.jiGang = false
            }
          })
        }
      });
    },
    cancellation() {
      // let formDatae = new window.FormData()
      // formDatae.append('warehouseBills', JSON.stringify(this.queryParams))
      // formDatae.append('feesDr', JSON.stringify(this.warehouseDrList))
      // formDatae.append('feesCr', JSON.stringify(this.warehouseCrList))
      revokeContainerPort(this.queryParams.fId).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message.success('撤销成功');
          this.getList()
          this.jiGang = false
        }
      })
    },
    calculation(row) {
      console.log(row)
      if (row.fQty && row.fUnitprice) {
        row.fAmt = Number(row.fQty) * Number(row.fUnitprice)
      }
    },
    addCollection() {
      this.warehouseDrList.push({
        fCorpid: '',
        fFeeunitid: '',
        fInventoryDays: '',
        fQty: '',
        fUnitprice: '',
        fAmt: '',
        fFeeid: ''
      })
      this.fWbuOptions = []
      let queryParams = {pageNum: 1, fDc: 'D'}
      listFees(queryParams).then((response) => {
        this.fDNameOptions = response.rows
      })
    },
    // 付款合计
    warehouseDrSummaries(param) {
      const {columns, data} = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (
          column.property === 'fUnitprice' ||
          column.property === 'fAmount' ||
          column.property === 'fQty' ||
          column.property === 'fQty'
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = sums[index].toFixed(2)
        }
      })
      return sums
    },
  }
}
</script>

<style scoped>

</style>