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

<script>
import { taskList } from "@/api/business/purchase/purchase-task";
// import AddPurchaseTaskDrawer from "./add-purchase-task.vue";
// import SeePurchaseTaskDrawer from "./see-purchase-task.vue";
// import DirectSourcingTable from "./direct-sourcing.vue";
export default {
  name: "PuchaseTask",
  components: {
    // AddPurchaseTaskDrawer,
    // SeePurchaseTaskDrawer,
    // DirectSourcingTable,
  },
  data() {
    const arr2Obj = function (data, keyName, valueName) {
      return Object.fromEntries(
        data.map((item) => [item[keyName], item[valueName]])
      );
    };
    const searchColumns = [
      { title: "采购组织", key: "", type: "TagSelect" },
      { title: "客户", key: "", type: "TagSelect" },
      { title: "价格来源", key: "material", type: "Select" },
      { title: "主无税单价", key: "materialDesc", type: "Input" },
      { title: "生产厂商", key: "", type: "Input" },
      { title: "供应商", key: "", type: "TagSelect" },
      { title: "采购员", key: "", type: "TagSelect" },
      { title: "价格日期区间", key: "", type: "DatePicker" },
      { title: "物料", key: "", type: "TagSelect" },
      { title: "换算率", key: "", type: "Input" },
    ];
    const initSearchColumns = () => searchColumns;
    const initSearchParams = () => arr2Obj(initSearchColumns(), "key", "value");
    const tableColumns = [
      {
        title: "效期预警",
        key: "materialName",
      },
      {
        title: "采购组织",
        key: "materialName",
      },
      {
        title: "物料编码",
        key: "materialName",
      },
      {
        title: "物料一级分类",
        key: "materialName",
      },
      {
        title: "生产厂家",
        key: "materialName",
      },
      {
        title: "物料名称",
        key: "materialName",
      },
      {
        title: "物料型号",
        key: "materialName",
      },
      {
        title: "物料规格",
        key: "materialName",
      },
      {
        title: "供应商",
        key: "materialName",
      },
      {
        title: "客户",
        key: "materialName",
      },
      {
        title: "主含税单价",
        key: "materialName",
      },
      {
        title: "主单位",
        key: "materialName",
      },
      {
        title: "价格生效日期",
        key: "materialName",
      },
      {
        title: "价格失效日期",
        key: "materialName",
      },
      {
        title: "采购员",
        key: "materialName",
      },
      {
        title: "来源单据号",
        key: "materialName",
      },
      {
        title: "有效状态",
        key: "materialName",
      },
      {
        title: "启用状态",
        key: "materialName",
      },
      {
        title: "换算率",
        key: "materialName",
      },
      {
        title: "创建时间",
        key: "materialName",
      },
      {
        title: "物料启用状态",
        key: "materialName",
      },
      {
        title: "采购需求单号",
        key: "materialName",
      },
      {
        title: "含税/无税优先",
        key: "materialName",
      },
      {
        title: "最新操作人名称",
        key: "materialName",
      },
      {
        title: "最新操作时间",
        key: "materialName",
      },
      {
        title: "操作类型",
        key: "materialName",
      },
    ];
    const initTableColumns = () => tableColumns;
    const initTableData = () => {
      const data = [];
      for (let index = 0; index < 50; index++) {
        data.push({ materialName: index });
      }
      return data;
    };
    return {
      loading: false,
      isSimpleSearch: true,
      searchColumns: initSearchColumns(),
      searchParams: {
        isAsc: "desc",
        reasonable: "",
        orderByColumn: "",
        ...initSearchParams(),
      },
      tableColumns: initTableColumns(),
      tableData: initTableData(),
      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(this.tableData);
  },
  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 }"
  >
    <!-- <AddPurchaseTaskDrawer ref="addDrawerFef"></AddPurchaseTaskDrawer> -->
    <!-- <SeePurchaseTaskDrawer ref="seeDrawerFef"></SeePurchaseTaskDrawer> -->
    <el-form
      size="mini"
      label-position="right"
      label-width="100px"
      :model="searchParams"
      style="padding: 20px 0 0 0"
    >
      <el-row :gutter="24">
        <el-col :span="22">
          <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="2">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-button type="primary" size="mini">搜索</el-button>
            </el-col>
            <el-col
              v-show="!isSimpleSearch"
              :span="24"
              style="margin: 10px 0 0"
            >
              <el-button size="mini">重置</el-button>
            </el-col>
          </el-row>
        </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-dropdown placement="bottom-start">
          <el-button size="mini" style="margin: 0 10px 0 0">
            发布
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>发布寻源</el-dropdown-item>
            <el-dropdown-item>发布委托</el-dropdown-item>
            <el-dropdown-item>采购方案</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown placement="bottom-start">
          <el-button
            size="mini"
            style="border-right: 0; border-radius: 3px 0 0 3px"
          >
            首次协议直采
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>首次协议直采</el-dropdown-item>
            <el-dropdown-item>余量协议直采</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown placement="bottom-start">
          <el-button size="mini" style="border-right: 0; border-radius: 0">
            跟单采购
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>按合同（普通）取价</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button size="mini" style="border-right: 0; border-radius: 0">
          Excel导出
        </el-button>
        <el-button
          size="mini"
          style="margin: 0; border-right: 0; border-radius: 0"
        >
          退回请购
        </el-button>
        <el-dropdown placement="bottom-start">
          <el-button size="mini" style="border-right: 0; border-radius: 0">
            清单采购
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>商超匹配下单</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          size="mini"
          disabled
          style="margin: 0 10px 0 0; border-radius: 0 3px 3px 0"
        >
          一键合同下单
        </el-button>
        <el-button size="mini" style="margin: 0 10px 0 0">删除</el-button>
        <el-dropdown placement="bottom-end">
          <el-button size="mini">
            更多
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>抢单</el-dropdown-item>
            <el-dropdown-item>批量修改收货组织</el-dropdown-item>
            <el-dropdown-item>批量退回</el-dropdown-item>
            <el-dropdown-item>退回需求申请</el-dropdown-item>
            <el-dropdown-item>刷新缓存</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </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>
    <!-- <DirectSourcingTable></DirectSourcingTable> -->
  </el-card>
</template>