payable.vue

<template>
  <div class="app-container">
    <div slot="header" class="card-title">{{ $t('应付款') }}</div>
    <!-- 搜索工作栏 -->
    <el-card v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="100px"
        class="card"
      >
        <el-row>
          <el-form-item :label="$t('柜号')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.containerNo"
              :placeholder="$t('请输入柜号')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('自编号')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.payableNo"
              :placeholder="$t('请输入自编号')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!--              <el-form-item label="订单号:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item> -->
          <el-form-item :label="$t('始发仓')">
            <el-select
              v-model="queryParams.departureId"
              :placeholder="$t('请选择始发仓')"
              clearable
            >
              <el-option
                v-for="item in exportWarehouseList"
                :label="$l(item, 'title')"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('目的仓')">
            <el-select
              v-model="queryParams.objectiveId"
              :placeholder="$t('请选择目的仓')"
              clearable
            >
              <el-option
                v-for="item in importWarehouseList"
                :label="$l(item, 'title')"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('运输方式')">
            <dict-selector
              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
              v-model="queryParams.transportId"
              formatter="number"
              clearable
            />
          </el-form-item>
        </el-row>

        <!--              <el-form-item label="付款单号:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入付款单号" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item> -->

        <!--              <el-form-item label="状态:">
                  <dict-selector :type="DICT_TYPE.ECW_RECEIPT_STATE" v-model="queryParams.control" />
              </el-form-item>
               <el-form-item label="业务员:">
                  <el-select v-model="form.salesmanId" placeholder="请选择业务员">
                    <el-option v-for="item in creatorData" :key="item.id" :label="item.nickname" :value="item.id"/>
                  </el-select>
               </el-form-item> -->

        <!--          <el-row>
              <el-form-item label="收款时间:" >
                  <el-date-picker
                    v-model="dateType"
                    type="datetimerange"
                    range-separator="到"
                    start-placeholder="请选择日期"
                    end-placeholder="请选择日期">
                  </el-date-picker>
              </el-form-item>
          </el-row> -->
        <el-row>
          <!--              <el-form-item label="商品名称:" >
                <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item> -->
          <el-form-item :label="$t('供应商名称')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.orderNo"
              :placeholder="$t('请输入供应商名称')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('费用类型')">
            <dict-selector
              :type="DICT_TYPE.FEE_TYPE"
              v-model="queryParams.feeType"
              clearable
            ></dict-selector>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">{{ $t('查找') }}</el-button>
            <el-button
              style="margin-left: 10px"
              type="success"
              @click="handleAdd(0)"
              >{{ $t('新增请款单') }}</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <el-table v-loading="loadings" :data="list" border class="card">
      <el-table-column :label="$t('自编号')" align="center" prop="payableNo" />
      <el-table-column :label="$t('货柜号')" align="center" prop="containerNo" />
      <el-table-column :label="$t('供应商')" align="center" prop="supplierName" />
      <el-table-column :label="$t('费用类型')" align="center" prop="feeType">
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.FEE_TYPE"
            :value="scope.row.feeType"
          ></dict-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('金额')" align="center" prop="totalAmount">
        <template slot-scope="scope">
          <span>{{ scope.row.totalAmount }}</span>
            <span>{{getCurrencyLabel(scope.row.currencyId)}}</span>
        </template>
      </el-table-column>
      <!--            <el-table-column label="创建时间" align="center" prop="channelName" />
            <el-table-column label="创建人" align="center" prop="toDepartureId" /> -->
      <el-table-column
        :label="$t('操作')"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="editClick(scope.row)"
            >{{ $t('编辑') }}</el-button
          >
          <el-button size="mini" type="text"  @click="handleAdd(scope.row.id)"
            >{{ $t('请款') }}</el-button
          >
          <el-button size="mini" type="text" @click="deleteClick(scope.row)">{{ $t('删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rows"
      @pagination="getList"
    />
    <!-- 对话框(添加 / 修改) -->
    <el-dialog
      :title="$t('费用登记')"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form ref="costForm" :model="costObj" label-width="80px">

        <el-form-item :label="$t('操作步骤')">
          <el-select v-model="costObj.stepsId" :placeholder="$t('请选择操作步骤')">
            <el-option v-for="item in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_PROCESS)" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('费用类型')">
          <el-select v-model="costObj.feeType" :placeholder="$t('请选择费用类型')">
            <el-option v-for="item in this.getDictDatas(DICT_TYPE.FEE_TYPE)" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('供应商')">
          <el-select v-model="costObj.supplierId" :placeholder="$t('请选择供应商')">
            <el-option v-for="supplier in allSupplier" :key="supplier.id" :label="supplier.companyZh" :value="supplier.id"></el-option>
          </el-select>
        </el-form-item>

        <el-row class="two-element">
          <el-form-item :label="$t('金额')">
            <el-input-number v-model="costObj.totalAmount" controls-position="right" :min="1"></el-input-number>
          </el-form-item>
          <el-form-item label="" label-width="0px">
            <el-select v-model="costObj.currencyId" :placeholder="$t('请选择单位')">
              <el-option v-for="item in currencyList" :key="item.id" :label="item.titleZh" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-form-item :label="$t('备注')">
          <el-input v-model="costObj.remark" type="textarea" rows="2" :placeholder="$t('请输入备注')"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="operate-button">
        <el-button type="primary" @click="submitEditForm">{{ $t('确定') }}</el-button>
        <el-button @click="cancelEditForm">{{ $t('取消') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userList } from "@/api/system/user";
import { DICT_TYPE } from "@/utils/dict";
import { getTradeCityList } from "@/api/ecw/region";
import { getPayableList, deletePayable, updatePayable } from "@/api/ecw/financial"
import { getSupplierPage } from "@/api/ecw/supplier";
import { getCurrencyPage } from "@/api/ecw/currency";
import {getWarehouseList} from '@/api/ecw/warehouse'

export default {
  name: "EcwFinancialPayable",
  components: {},
  data() {
    return {
      open: false,
      showSearch: true,
      loadings: false,
      tradeCityList: [],
      costObj: {},
      creatorData: [],
      list: [],
      total: 0,
      dateType: [],
      loading: "",
      params: {
        page: 1,
        rows: 20,
      },
      queryParams: {
        page: 1,
        rows: 20,
      },
      allSupplier: [],
      currencyList:[],
        warehouseList:[],
    };
  },
  computed: {
    expoerCityList() {
      return this.tradeCityList.filter((item) => item.type == 2);
    },
    importCityList() {
      return this.tradeCityList.filter((item) => item.type == 1);
    },
    exportWarehouseList(){
      /* tradeType 1 进口，2出口，3进出口 */
      return this.warehouseList.filter(item => item.tradeType == 2 || item.tradeType == 3)
    },
    importWarehouseList(){
      return this.warehouseList.filter(item => item.tradeType == 1 || item.tradeType == 3)
    },
  },
  activated(){
    this.handleQuery()
  },
  created() {
    let that = this;
    getWarehouseList().then(res => this.warehouseList = res.data)
    getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
    userList("salesman").then((res) => (that.creatorData = res.data));
    getTradeCityList().then((res) => (that.tradeCityList = res.data));
    this.getList()
    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allSupplier = data.list;
    });
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = { ...this.queryParams };
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
      // 执行查询
      getPayableList(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    getCurrencyLabel(id){
      var label = this.currencyList.filter(item=>item.id == id)
      if(label.length>0) return label[0].titleZh
      return ''
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd(id) {
      return this.$router.push("creatPayment?payableId=" + id);
    },
    submitEditForm() {
      const params = {
        invoiceNumber: this.costObj.invoiceNumber,
        id: this.costObj.id,
        stepsId: this.costObj.stepsId,
        feeType: this.costObj.feeType,
        supplierId: this.costObj.supplierId,
        totalAmount: this.costObj.totalAmount,
        currencyId: this.costObj.currencyId,
        remark: this.costObj.remark
      }
      updatePayable(params).then(res => {
        this.$modal.msgSuccess(this.$t('修改成功'));
        this.getList();
        this.open = false;
      })
    },
    /** 取消按钮 */
    cancelEditForm() {
      this.open = false;
    },
    editClick(row) {
      row.stepsId = String(row.stepsId)
      row.feeType = String(row.feeType)
      row.currencyId =  row.currencyId
      console.log(row)
      this.costObj = { ...row }
      this.open = true;
    },
    deleteClick(row) {
      const id = row.id;
      this.$modal.confirm(this.$t('是否确认删除该应付款?')).then(function() {
        return deletePayable(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(this.$t('删除成功'));
      }).catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
  .small-padding ::v-deep .el-button {

  }
  // 页面内元素弹窗form控件宽度设置
  ::v-deep .el-form-item__content {
    > div:not(.el-input-number) {
      width: 100%;
    }
  }
  .operate-button {
    text-align: center;
  }
  .two-element {
    display: flex;
    > :last-child {
      width: 100%;
      margin-left: 10px;
    }
  }
  .card {
    margin-top: 20px;
  }
  .dialog-footer {
    padding: 40px;
  }
  .card-title {
    font-size: 18px;
    font-weight: bold;
  }
</style>