drp-ui/src/views/purchase/purchase-task/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: "Input" },
      { title: "物料描述", key: "materialDesc", type: "Input" },
      { title: "需求组织", key: "", type: "TagSelect" },
      { title: "需求日期", key: "", type: "DatePicker" },
      { title: "计划人员", key: "", type: "TagSelect" },
      { title: "采购组织", key: "", type: "TagSelect" },
      { title: "创建时间", key: "", type: "DatePicker" },
      { title: "采购员", key: "", type: "TagSelect" },
      { title: "状态", key: "", type: "Select" },
      {
        title: "来源单据号",
        key: "",
        type: "Input",
        placeholder: "请输入来源单据号，多个用英文逗号分割",
      },
      { title: "收货组织", key: "", type: "TagSelect" },
      { title: "采购分类", key: "", type: "Input" },
      // { title: "受理人", key: "", type: "TagSelect" },
      { title: "项目", key: "", type: "TagSelect" },
      { title: "需求部门", key: "", type: "TagSelect" },
      { title: "需求人", key: "", type: "TagSelect" },
      { title: "ERP信息", key: "", type: "Input" },
    ];
    const initSearchColumns = () => searchColumns;
    const initSearchParams = () => arr2Obj(initSearchColumns(), "key", "value");
    const tableColumns = [
      {
        title: "物料名称",
        key: "materialName",
      },
      {
        title: "物料编码",
        key: "material",
      },
      {
        title: "来源单据号",
        key: "material",
      },
      {
        title: "来源单据行号",
        key: "material",
      },
      {
        title: "采购数量",
        key: "material",
      },
      {
        title: "采购单位",
        key: "material",
      },
      {
        title: "采购换算率",
        key: "material",
      },
      {
        title: "主数量",
        key: "material",
      },
      {
        title: "主计量单位",
        key: "material",
      },
      {
        title: "计价单位",
        key: "material",
      },
      {
        title: "计价换算率",
        key: "material",
      },
      {
        title: "计价数量",
        key: "material",
      },
      {
        title: "未执行数量",
        key: "material",
      },
      {
        title: "主未执行数量",
        key: "material",
      },
      {
        title: "计价未执行数量",
        key: "material",
      },
      {
        title: "已执行数量",
        key: "material",
      },
      {
        title: "交易类型",
        key: "material",
      },
      {
        title: "分配日期",
        key: "material",
      },
      {
        title: "SKU编码",
        key: "material",
      },
      {
        title: "SKU名称",
        key: "material",
      },
      {
        title: "SKU规格说明",
        key: "material",
      },
      {
        title: "SKU型号",
        key: "material",
      },
      {
        title: "SKU规格",
        key: "material",
      },
      {
        title: "产品规格",
        key: "material",
      },
      {
        title: "产品型号",
        key: "material",
      },
      {
        title: "物料描述",
        key: "material",
      },
      {
        title: "品牌",
        key: "material",
      },
      {
        title: "计划价",
        key: "material",
      },
      {
        title: "需求附件",
        key: "material",
      },
      {
        title: "物料附件",
        key: "material",
      },
      {
        title: "项目",
        key: "material",
      },
      {
        title: "建议供应商",
        key: "material",
      },
      {
        title: "需求组织",
        key: "material",
      },
      {
        title: "需求部门",
        key: "material",
      },
      {
        title: "需求人",
        key: "material",
      },
      {
        title: "已下单采购数量",
        key: "material",
      },
      {
        title: "采购组织",
        key: "material",
      },
      {
        title: "采购员",
        key: "material",
      },
      {
        title: "计划员",
        key: "material",
      },
      {
        title: "计划部门",
        key: "material",
      },
      {
        title: "联系电话",
        key: "material",
      },
      {
        title: "采购分类",
        key: "material",
      },
      {
        title: "收货人",
        key: "material",
      },
      {
        title: "收货地址",
        key: "material",
      },
      {
        title: "收货人电话",
        key: "material",
      },
      {
        title: "需求时间",
        key: "material",
      },
      // {
      //   title: "受理状态",
      //   key: "material",
      // },
      {
        title: "状态",
        key: "material",
      },
      // {
      //   title: "受理人",
      //   key: "material",
      // },
      {
        title: "委托受理人",
        key: "material",
      },
      {
        title: "弹性分单条件",
        key: "material",
      },
      {
        title: "备注",
        key: "material",
      },
      {
        title: "ERP相关信息",
        key: "material",
      },
      {
        title: "创建时间",
        key: "material",
      },
      {
        title: "最新价格",
        key: "material",
      },
      {
        title: "生产厂家",
        key: "material",
      },
      {
        title: "报价供应商",
        key: "material",
      },
      {
        title: "历史最低价",
        key: "material",
      },
      {
        title: "生产订单状态",
        key: "material",
      },
      // {
      //   title: "寻源退回原因",
      //   key: "material",
      // },
      {
        title: "收货仓库档案编码",
        key: "material",
      },
      {
        title: "自定义项16",
        key: "material",
      },
      {
        title: "收货客户",
        key: "material",
      },
      {
        title: "入库仓库",
        key: "material",
      },
      {
        title: "货位",
        key: "material",
      },
      {
        title: "指定供应商",
        key: "material",
      },
      {
        title: "单位",
        key: "material",
      },
      {
        title: "自定义项15",
        key: "material",
      },
      {
        title: "收货地址",
        key: "material",
      },
      {
        title: "收货联系人",
        key: "material",
      },
      {
        title: "需求来源",
        key: "material",
      },
    ];
    const initTableColumns = () => tableColumns;
    const initTableData = () => {
      const data = [];
      for (let index = 0; index < 25; 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("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 }">
    <AddPurchaseTaskDrawer ref="addDrawerFef"></AddPurchaseTaskDrawer>
    <SeePurchaseTaskDrawer ref="seeDrawerFef"></SeePurchaseTaskDrawer>
    <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="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>