drp-ui/src/views/purchase/purchase-contract/index.vue

<script>
import { taskList } from "@/api/business/purchase/purchase-contract";
import AddPurchaseContractDrawer from "./add-purchase-contract.vue";
import SeePurchaseContractDrawer from "./see-purchase-contract.vue";
// import DirectSourcingTable from "./direct-sourcing.vue";
export default {
  name: "PuchaseTask",
  components: {
    AddPurchaseContractDrawer,
    SeePurchaseContractDrawer,
    // DirectSourcingTable,
  },
  data() {
    const arr2Obj = function (data, keyName, valueName) {
      return Object.fromEntries(
        data.map((item) => [item[keyName], item[valueName]])
      );
    };
    const searchColumns = [
      { title: "合同名称", key: "contractName", type: "Input" },
    ];
    const initSearchColumns = () => searchColumns;
    const initSearchParams = () => arr2Obj(initSearchColumns(), "key", "value");
    const tableColumns = [
      { key: "id", title: "id" },
      { key: "puOrg", title: "采购组织" },
      { key: "puOrgName", title: "采购组织名称" },
      { key: "code", title: "合同编码" },
      { key: "lastPuMoney", title: "上年度采购额" },
      { key: "buyer", title: "采购员" },
      { key: "buyerName", title: "采购员名称" },
      { key: "supplier", title: "供应商" },
      { key: "supplierName", title: "供应商名称" },
      { key: "contractType", title: "合同类型" },
      { key: "puMoneyYear", title: "本年度采购额" },
      { key: "puDept", title: "采购部门" },
      { key: "puDeptName", title: "采购部门名称" },
      { key: "supplierTier", title: "供应商层级" },
      { key: "contractName", title: "合同名称" },
      { key: "grossRateAverage", title: "平均毛利率" },
      { key: "approveFlow", title: "审批流程" },
      { key: "consumableClass", title: "耗材类别" },
      { key: "effectiveDate", title: "合同生效日期" },
      { key: "brandGrossRate", title: "同类品牌及毛利率" },
      { key: "contractFormat", title: "合同格式" },
      { key: "productName", title: "产品类别&名称" },
      { key: "endDate", title: "合同终止日期" },
      { key: "invoiceTax", title: "发票税率" },
      { key: "emergencyDegree", title: "紧急程度" },
      { key: "project", title: "项目医院" },
      { key: "signDate", title: "合同签订日期" },
      { key: "deliveryType", title: "交货方式" },
      { key: "source", title: "合同来源" },
      { key: "contractPartyc", title: "合同丙方" },
      { key: "contractPartycName", title: "合同丙方名称" },
      { key: "guaranteePeriodEnd", title: "质保期限" },
      { key: "freightMethods", title: "运费承担方式" },
      { key: "isTarget", title: "是否有指标" },
      { key: "contractTarget", title: "合同指标" },
      { key: "exemptionPostageCondtion", title: "包邮条件" },
      { key: "isRebate", title: "是否有返利" },
      { key: "rebatePolicy", title: "返利政策" },
      { key: "externalContract", title: "外部合同号" },
      { key: "rollbackPolicy", title: "退换货政策" },
      { key: "contractContent", title: "合同主要内容" },
      { key: "refusalReasons", title: "拒绝理由" },
      { key: "enquiryCode", title: "询价单号" },
      { key: "externalFile", title: "对外附件" },
      { key: "supplierFile", title: "供应商盖章合同附件" },
      { key: "puFile", title: "采购商盖章合同附件" },
      { key: "projectCode", title: "项目编号" },
      { key: "projectName", title: "项目名称" },
      { key: "area", title: "区域区域" },
      { key: "consigneePhone", title: "收货人联系方式" },
      { key: "paymentAgreement", title: "付款协议" },
      { key: "taxPrice", title: "价税合计" },
      { key: "currency", title: "币种" },
      { key: "currencyName", title: "币种名称" },
      { key: "guaranteePeriod", title: "质保期" },
      { key: "tenantId", title: "租户号" },
      { key: "revision", title: "乐观锁" },
      { key: "createByName", title: "创建人" },
      { key: "updateByName", title: "创建人名称" },
      { key: "delFlag", title: "删除标记" },
    ];
    const initTableColumns = () => tableColumns;
    return {
      loading: false,
      isSimpleSearch: true,
      searchColumns: initSearchColumns(),
      searchParams: {
        isAsc: "desc",
        reasonable: "",
        orderByColumn: "",
        ...initSearchParams(),
      },
      tableColumns: initTableColumns(),
      tableData: [{ materialName: 1 }],
      page: { pageNum: 1, pageSize: 25 },
      total: 0,
      pageSizes: [25, 50, 100],
    };
  },
  computed: {
    showSearchColumns() {
      return this.isSimpleSearch
        ? this.searchColumns.slice(0, 4)
        : this.searchColumns;
    },
  },
  //   watch: {
  //     $route: {
  //       handler: function (route) {
  //         this.redirect = route.query && route.query.redirect;
  //       },
  //       immediate: true,
  //     },
  //   },
  created() {
    this.fetchTaskList();
    console.log("Vue", this);
  },
  methods: {
    async fetchTaskList() {
      this.loading = true;
      try {
        const { code, msg, rows, total } = await taskList({
          ...this.page,
          ...this.searchParams,
        });
        if (code === 200) {
          this.total = total;
          this.tableData = rows;
          this.$notify.success({ title: msg });
        } else {
          this.$notify.warning({ title: msg });
        }
      } catch (err) {
        this.$notify.error({ title: "error", message: err });
      } finally {
        this.loading = false;
      }
    },
    handleSearchChange() {
      this.isSimpleSearch = !this.isSimpleSearch;
      this.$notify.info({
        title: this.isSimpleSearch ? "Simple Search" : "All Search",
      });
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    handleOpenAddDrawer() {
      const { setVisible } = this.$refs.addDrawerFef;
      setVisible(true);
      setTimeout(() => {
        this.$notify.info("Open Add Drawer");
      }, 250);
    },
    handleOpenSeeDrawer() {
      const { setVisible } = this.$refs.seeDrawerFef;
      setVisible(true);
      setTimeout(() => {
        this.$notify.info("Open See Drawer");
      }, 250);
    },
  },
};
</script>

<template>
  <el-card
    v-loading="loading"
    style="width: calc(100% - 24px); height: 100%; margin: 10px"
    :body-style="{ padding: 0 }"
  >
    <AddPurchaseContractDrawer ref="addDrawerFef"></AddPurchaseContractDrawer>
    <SeePurchaseContractDrawer ref="seeDrawerFef"></SeePurchaseContractDrawer>
    <el-form
      size="mini"
      label-position="right"
      label-width="85px"
      :model="searchParams"
      style="padding: 20px 0 0 0"
    >
      <el-row :gutter="24">
        <el-col :span="20">
          <el-row :gutter="20">
            <el-col
              v-for="column in showSearchColumns"
              :key="column.title"
              :xl="6"
              :lg="6"
              :md="8"
              :sm="12"
              :xs="24"
            >
              <el-form-item :prop="column.key" :label="column.title">
                <el-input
                  v-model="searchParams[column.key]"
                  :placeholder="column.placeholder"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col
          :span="3"
          :offset="1"
          style="text-align: right; padding-right: 40px"
        >
          <el-button type="primary" size="mini">搜索</el-button>
          <el-button size="mini">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-divider>
      <i
        :class="isSimpleSearch ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
        style="cursor: pointer"
        @click="handleSearchChange"
      ></i>
    </el-divider>
    <el-row :gutter="24" style="padding: 0 20px">
      <el-col :span="6">123</el-col>
      <el-col :span="18" style="text-align: right">
        <el-button
          size="mini"
          type="danger"
          style="margin: 0 10px 0 0"
          @click="handleOpenAddDrawer"
        >
          新增
        </el-button>
      </el-col>
    </el-row>
    <el-table
      @row-dblclick="handleOpenSeeDrawer"
      :data="tableData"
      size="mini"
      style="width: 100%; margin: 20px 0 0 0"
    >
      <el-table-column
        v-for="(column, index) in tableColumns"
        :key="index"
        :prop="column.key"
        :label="column.title"
        :width="column.width || 180"
        :show-overflow-tooltip="column.showOverflowTooltip || true"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
      :page-sizes="pageSizes"
      :page-size="page.pageSize"
      :current-page="page.pageNum"
      hide-on-single-page
      layout="total, prev, pager, next, sizes, jumper"
    >
    </el-pagination>
  </el-card>
</template>