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="$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-row>
          <!--lanbm 2024-05-17 add-->
          <el-form-item label="时间节点" prop="dateType">
            <el-select
              v-model="queryParams.dateType"
              :placeholder="$t('请选择时间类型')"
              clearable
              size="small"
            >
              <el-option
                v-for="item in dateTypes"
                :key="item.value"
                :label="$l(item, 'label')"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="" prop="dateRangeCreateTime">
            <el-date-picker
              v-model="queryParams.dateRangeCreateTime"
              style="width: 300px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')"
              clearable
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="$t('供应商名称')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.supplierName"
              :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"
              v-hasPermi="['ecw:payable:create']"
              @click="handleAdd(0)"
              >{{ $t("新增付款单") }}</el-button
            >
            <!--lanbm 2024-05-17修改此按钮名称-->
          </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" />
      <!--lanbm 2024-05-17 add-->
      <el-table-column
        :label="$t('自编号状态')"
        align="center"
        prop="shipmentStatusText"
      />
      <el-table-column
        :label="$t('运输方式')"
        align="center"
        prop="transportTypeName"
      />
      <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="$t('费用产生时间')"
        align="center"
        prop="freecsdate"
      />
      <!--lanbm 2024-05-17 添加字段 BaseDO -->
      <el-table-column :label="$t('创建人')" align="center" prop="creator" />
      <el-table-column
        :label="$t('创建时间')"
        align="center"
        prop="createTime"
      />
      <el-table-column :label="$t('修改人')" align="center" prop="updater" />
      <el-table-column
        :label="$t('修改时间')"
        align="center"
        prop="updateTime"
      />

      <el-table-column :label="$t('备注')" align="center" prop="remark" />

      <el-table-column
        :label="$t('操作')"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['ecw:payable:edit']"
            @click="editClick(scope.row)"
            >{{ $t("编辑") }}</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['ecw:payable:add']"
            @click="handleAdd(scope.row.id)"
            >{{ $t("请款") }}</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['ecw:payable:delete']"
            @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="120px">
        <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>
        <!--lanbm 2024-05-17 添加字段-->
        <el-form-item :label="$t('费用产生时间')" prop="freecsdate">
          <el-date-picker
            v-model="costObj.freecsdate"
            style="width: 200px"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="datetime"
            placeholder="费用产生时间"
          />
        </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="$i18n.locale == 'zh_CN' ? item.titleZh : item.titleEn"
                :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,
        dateRangeCreateTime: undefined,
        beginCreateTime: undefined,
        endCreateTime: undefined,
      },
      allSupplier: [],
      currencyList: [],
      warehouseList: [],
      //lanbm 2024-05-17 add
      dateTypes: [
        { value: "7", label: this.$t("费用产生时间") },
        { value: "1", label: this.$t("预装时间") },
        { value: "2", label: this.$t("装柜时间") },
        { value: "3", label: this.$t("起运时间") },
        { value: "4", label: this.$t("到港时间") },
        { value: "5", label: this.$t("清关时间") },
        { value: "6", label: this.$t("卸柜时间") },
      ],
    };
  },
  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");
      // 执行查询
      if (
        params.dateRangeCreateTime != null &&
        params.dateRangeCreateTime.length == 2
      ) {
        params.beginCreateTime = params.dateRangeCreateTime[0];
        params.endCreateTime = params.dateRangeCreateTime[1];
      }
      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 this.$i18n.locale == "zh_CN"
          ? label[0].titleZh
          : label[0].titleEn;
      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>