完成采购订单，采购合同，价格目录前端页面

src/api/business/purchase/purchase-contract.js

@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+// 查询任务列表
+export function taskList(params) {
+  return request({
+    url: "/pu/contract/list",
+    method: "get",
+    params: params,
+  });
+}

src/views/purchase/purchase-content/add-purchase-task.vue

@@ -0,0 +1,257 @@
+<script>
+export default {
+  name: "AddPurchaseTaskDrawer",
+  data() {
+    const arr2Obj = function (data, keyName, valueName) {
+      return Object.fromEntries(
+        data.map((item) => [item[keyName], item[valueName]])
+      );
+    };
+    const pickerOptions = {
+      disabledDate(time) {
+        return time.getTime() > Date.now();
+      },
+      shortcuts: [
+        {
+          text: "今天",
+          onClick(picker) {
+            picker.$emit("pick", new Date());
+          },
+        },
+        {
+          text: "昨天",
+          onClick(picker) {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            picker.$emit("pick", date);
+          },
+        },
+        {
+          text: "一周前",
+          onClick(picker) {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit("pick", date);
+          },
+        },
+      ],
+    };
+    const columns = [
+      {
+        title: "采购组织",
+        key: "puOrg",
+        type: "TagSelect",
+        value: [],
+        required: true,
+      },
+      { title: "需求来源", key: "source", type: "Input", value: "采购创建" },
+      { title: "采购员", key: "buyer", value: [], type: "TagSelect" },
+      { title: "交易类型", key: "billYpe", value: [], type: "TagSelect" },
+      { title: "物料编码", key: "material", type: "Input", required: true },
+      {
+        title: "物料名称",
+        key: "materialName",
+        type: "TagSelect",
+        value: [],
+        required: true,
+      },
+      {
+        title: "物料/物料描述",
+        key: "materialDesc",
+        type: "TagSelect",
+        value: [],
+        required: true,
+      },
+      { title: "生产厂家", key: "manufacturer", type: "Input" },
+      { title: "收货客户", key: "customer", type: "TagSelect", value: [] },
+      {
+        title: "采购单位",
+        key: "puUnit",
+        type: "TagSelect",
+        value: [],
+        required: true,
+      },
+      {
+        title: "采购数量",
+        key: "puQty",
+        type: "InputNumber",
+        required: true,
+      },
+      {
+        title: "需求时间",
+        key: "demandDate",
+        type: "DatePicker",
+        config: { type: "date", pickerOptions: pickerOptions },
+      },
+      { title: "项目名称", key: "projectName", type: "TagSelect", value: [] },
+      { title: "需求人", key: "demandPersonal", type: "TagSelect", value: [] },
+      {
+        title: "需求组织",
+        key: "demandOrg",
+        type: "TagSelect",
+        value: [],
+        require: true,
+      },
+      { title: "需求部门", key: "demandDept", type: "TagSelect", value: [] },
+      { title: "建议供应商", key: "supplier", type: "TagSelect", value: [] },
+      { title: "收货人", key: "a", type: "TagSelect", value: [] },
+      { title: "收货组织", key: "b", type: "TagSelect", value: [] },
+      { title: "收货人联系方式", key: "c", type: "Input" },
+      { title: "收货地址", key: "d", type: "Input" },
+      { title: "收货仓库", key: "e", type: "TagSelect", value: [] },
+      {
+        title: "指定供应商",
+        key: "assignSupplier",
+        type: "TagSelect",
+        value: [],
+      },
+      { title: "单位", key: "unit", type: "TagSelect", value: [] },
+      { title: "收货地址", key: "f", type: "TagSelect", value: [] },
+    ];
+    const initColumns = () => columns;
+    const initParams = () => arr2Obj(initColumns(), "key", "value");
+    return {
+      visible: false,
+      columns: initColumns(),
+      params: initParams(),
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+  },
+  created() {
+    console.log(this.params);
+  },
+  mounted() {},
+  destroyed() {},
+};
+</script>
+<template>
+  <el-drawer
+    title="我是标题"
+    direction="btt"
+    size="100%"
+    :with-header="false"
+    :visible.sync="visible"
+    :before-close="handleClose"
+  >
+    <el-form
+      size="mini"
+      label-position="right"
+      label-width="125px"
+      :model="params"
+    >
+      <el-card
+        :body-style="{
+          padding: '20px',
+          display: 'flex',
+          'flex-wrap': 'wrap',
+        }"
+        style="margin: 10px"
+      >
+        <el-form-item
+          v-for="(column, index) in columns"
+          :key="index"
+          :prop="column.key"
+          :label="column.title"
+          :required="column.required"
+          style="width: 33%"
+        >
+          <el-input
+            v-if="column.type === 'Input'"
+            v-model="params[column.key]"
+            :placeholder="column.placeholder"
+            style="width: 90%"
+          ></el-input>
+          <el-input-number
+            v-if="column.type === 'InputNumber'"
+            v-model="params[column.key]"
+            controls-position="right"
+            :placeholder="column.placeholder"
+            style="width: 90%"
+          ></el-input-number>
+          <el-select
+            v-if="column.type === 'TagSelect'"
+            v-model="params[column.key]"
+            multiple
+            clearable
+            collapse-tags
+            :placeholder="column.placeholder"
+            style="width: 90%"
+          >
+            <template #prefix>
+              <el-icon
+                class="el-icon-s-operation"
+                style="cursor: pointer"
+                @click.stop="$message.info(234)"
+              ></el-icon>
+            </template>
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-if="column.type === 'DatePicker'"
+            v-model="params[column.key]"
+            :type="column.config.type"
+            :placeholder="column.placeholder"
+            :picker-options="column.pickerOptions"
+            style="width: 90%"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-card>
+      <el-card
+        :body-style="{
+          'text-align': 'right',
+          padding: '10px 20px',
+        }"
+        style="
+          position: fixed;
+          left: 0;
+          bottom: 0;
+          margin: 10px;
+          width: calc(100% - 20px);
+        "
+      >
+        <el-button size="mini" @click="setVisible(false)">取消</el-button>
+        <el-button size="mini" type="info" @click="setVisible(false)"
+          >保存并新增</el-button
+        >
+        <el-button size="mini" type="danger" @click="setVisible(false)"
+          >保存</el-button
+        >
+      </el-card>
+    </el-form>
+  </el-drawer>
+</template>

src/views/purchase/purchase-content/direct-sourcing.vue

@@ -0,0 +1,386 @@
+<script>
+export default {
+  name: "DirectSourcing",
+  components: {},
+  data() {
+    const tableColumns = [
+      { title: "价格来源", key: "a" },
+      { title: "供应商", key: "b" },
+      { title: "采购组织", key: "c" },
+      { title: "客户", key: "d" },
+      { title: "价格类型", key: "e" },
+      { title: "配送价", key: "f" },
+      { title: "币种", key: "g" },
+      { title: "价格有效期", key: "h" },
+      { title: "税率", key: "i" },
+      { title: "协议单价", key: "j" },
+      {
+        title: "未执行量",
+        key: "k",
+        edit: true,
+        editConfig: { type: "InputNumber", controlsPosition: "right" },
+      },
+      {
+        title: "采购量",
+        key: "l",
+        edit: true,
+        editConfig: { type: "InputNumber", controlsPosition: "right" },
+      },
+      {
+        title: "计划到货",
+        key: "m",
+        edit: true,
+        editConfig: { type: "DatePicker", showType: "date" },
+      },
+      {
+        title: "期望到货",
+        key: "n",
+        edit: true,
+        editConfig: { type: "DatePicker", showType: "date" },
+      },
+      {
+        title: "备注",
+        key: "o",
+        edit: true,
+        editConfig: { type: "Textarea" },
+      },
+    ];
+    const initTableColumns = () => tableColumns;
+    return {
+      tableColumns: initTableColumns(),
+      data: [
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+      ],
+      page: { pageNum: 1, pageSize: 25 },
+      total: 0,
+      pageSizes: [25, 50, 100],
+    };
+  },
+  computed: {},
+  watch: {
+    data: {
+      handler: function (n) {
+        console.log(n);
+      },
+      deep: true,
+    },
+  },
+  methods: {},
+  created() {},
+  mounted() {},
+  destroyed() {},
+};
+</script>
+
+<template>
+  <div class="directSourcing" style="height: 50vh">
+    <el-table :data="data" height="calc(50vh)" style="width: 100%">
+      <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"
+      >
+        <template slot-scope="scope">
+          <el-input-number
+            v-if="column.edit && column.editConfig.type === 'InputNumber'"
+            v-model="scope.row[column.key]"
+            :controls-position="column.editConfig.controlsPosition"
+            :min="column.editConfig.min"
+            :max="column.editConfig.max"
+            :size="column.editConfig.size || 'mini'"
+            :placeholder="column.editConfig.placeholder"
+            style="width: 90%"
+          ></el-input-number>
+          <el-date-picker
+            v-else-if="column.edit && column.editConfig.type === 'DatePicker'"
+            v-model="scope.row[column.key]"
+            :type="column.editConfig.showType"
+            :picker-options="column.editConfig.pickerOptions"
+            :size="column.editConfig.size || 'mini'"
+            :placeholder="column.editConfig.placeholder"
+            style="width: 90%"
+          ></el-date-picker>
+          <el-input
+            v-else-if="column.edit && column.editConfig.type === 'Textarea'"
+            v-model="scope.row[column.key]"
+            type="textarea"
+            :autosize="column.editConfig.autosize || true"
+            :size="column.editConfig.size || 'mini'"
+            style="width: 90%"
+          ></el-input>
+          <span v-else>{{ scope.row[column.key] }}</span>
+        </template>
+      </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>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,404 @@
+<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>

src/views/purchase/purchase-content/see-purchase-task.vue

@@ -0,0 +1,158 @@
+<script>
+export default {
+  name: "SeePurchaseTaskDrawer",
+  data() {
+    const arr2Obj = function (data, keyName, valueName) {
+      return Object.fromEntries(
+        data.map((item) => [item[keyName], item[valueName]])
+      );
+    };
+    const columns = [
+      {
+        title: "采购组织",
+        key: "puOrg",
+        type: "TagSelect",
+        value: [],
+        required: true,
+      },
+      { title: "需求来源", key: "source", type: "Input", value: "采购创建" },
+      { title: "采购员", key: "buyer", value: [], type: "TagSelect" },
+      { title: "交易类型", key: "billYpe", value: [], type: "TagSelect" },
+      { title: "物料编码", key: "material", type: "Input", required: true },
+      {
+        title: "物料名称",
+        key: "materialName",
+        type: "TagSelect",
+        value: [],
+        required: true,
+      },
+      {
+        title: "物料/物料描述",
+        key: "materialDesc",
+        type: "TagSelect",
+        value: [],
+        required: true,
+      },
+      { title: "生产厂家", key: "manufacturer", type: "Input" },
+      { title: "收货客户", key: "customer", type: "TagSelect", value: [] },
+      {
+        title: "采购单位",
+        key: "puUnit",
+        type: "TagSelect",
+        value: [],
+        required: true,
+      },
+      {
+        title: "采购数量",
+        key: "puQty",
+        type: "InputNumber",
+        required: true,
+      },
+      {
+        title: "需求时间",
+        key: "demandDate",
+        type: "DatePicker",
+        config: { type: "date" },
+      },
+      { title: "项目名称", key: "projectName", type: "TagSelect", value: [] },
+      { title: "需求人", key: "demandPersonal", type: "TagSelect", value: [] },
+      {
+        title: "需求组织",
+        key: "demandOrg",
+        type: "TagSelect",
+        value: [],
+        require: true,
+      },
+      { title: "需求部门", key: "demandDept", type: "TagSelect", value: [] },
+      { title: "建议供应商", key: "supplier", type: "TagSelect", value: [] },
+      { title: "收货人", key: "a", type: "TagSelect", value: [] },
+      { title: "收货组织", key: "b", type: "TagSelect", value: [] },
+      { title: "收货人联系方式", key: "c", type: "Input" },
+      { title: "收货地址", key: "d", type: "Input" },
+      { title: "收货仓库", key: "e", type: "TagSelect", value: [] },
+      {
+        title: "指定供应商",
+        key: "assignSupplier",
+        type: "TagSelect",
+        value: [],
+      },
+      { title: "单位", key: "unit", type: "TagSelect", value: [] },
+      { title: "收货地址", key: "f", type: "TagSelect", value: [] },
+    ];
+    const initColumns = () => columns;
+    const initParams = () => arr2Obj(initColumns(), "key", "value");
+    return {
+      visible: false,
+      loading: false,
+      columns: initColumns(),
+      params: initParams(),
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+    async fetchTaskItem() {
+      this.loading = true;
+      try {
+        // do something
+      } catch (err) {
+        this.$notify.error({ title: "error", message: err });
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  created() {
+    console.log(this.params);
+  },
+  mounted() {},
+  destroyed() {},
+};
+</script>
+<template>
+  <el-drawer
+    title="我是标题"
+    direction="btt"
+    size="100%"
+    :with-header="false"
+    :visible.sync="visible"
+    :before-close="handleClose"
+  >
+    <el-card
+      :body-style="{
+        padding: '20px',
+        display: 'flex',
+        'flex-wrap': 'wrap',
+      }"
+      style="margin: 10px"
+    >
+      <el-descriptions title="采购任务详情" direction="vertical" :column="3">
+        <el-descriptions-item
+          v-for="(column, index) in columns"
+          :key="index"
+          :label="column.title"
+        >
+          {{ params[column.key] }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <el-card
+      :body-style="{
+        'text-align': 'right',
+        padding: '10px 20px',
+      }"
+      style="
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        margin: 10px;
+        width: calc(100% - 20px);
+      "
+    >
+      <el-button size="mini" @click="setVisible(false)">返回</el-button>
+    </el-card>
+  </el-drawer>
+</template>

src/views/purchase/purchase-contract/add-purchase-contract.vue

@@ -0,0 +1,404 @@
+<script>
+export default {
+  name: "AddPurchaseContractDrawer",
+  data() {
+    const arr2Obj = function (data, keyName, valueName) {
+      return Object.fromEntries(
+        data.map((item) => [item[keyName], item[valueName]])
+      );
+    };
+    const columns = [
+      { key: "puOrg", title: "采购组织", type: "TagSelect", require: true },
+      { key: "code", title: "合同编码", type: "Input" },
+      { key: "contractName", title: "合同名称", type: "Input", require: true },
+      { key: "supplier", title: "供应商", type: "TagSelect", require: true },
+      { key: "contractType", title: "合同类型", type: "Select", require: true },
+      { key: "puDept", title: "采购部门", type: "TagSelect", require: true },
+      { key: "buyer", title: "采购员", type: "TagSelect" },
+      { key: "source", title: "合同来源", type: "Select" },
+      {
+        key: "signDate",
+        title: "合同签订日期",
+        type: "DatePicker",
+        require: true,
+      },
+      {
+        key: "effectiveDate",
+        title: "合同生效日期",
+        type: "DatePicker",
+        require: true,
+      },
+      { key: "endDate", title: "合同终止日期", type: "DatePicker" },
+      { key: "externalContract", title: "外部合同号", type: "Input" },
+      { key: "refusalReasons", title: "拒绝理由", type: "Input" },
+      { key: "enquiryCode", title: "询价单号", type: "Input" },
+      { key: "externalFile", title: "对外附件", type: "Upload", span: 24 },
+      { key: "puFile", title: "采购商盖章合同附件", type: "Upload", span: 24 },
+      {
+        key: "supplierFile",
+        title: "供应商盖章合同附件",
+        type: "Upload",
+        span: 24,
+      },
+      { key: "projectName", title: "项目名称", type: "TagSelect" },
+      { key: "projectCode", title: "项目编号", type: "Input" },
+      { key: "area", title: "区域", type: "Input" },
+      { key: "consigneePhone", title: "收货人联系方式", type: "Input" },
+      { key: "paymentAgreement", title: "付款协议", type: "TagSelect" },
+      { key: "currency", title: "币种", type: "TagSelect", require: true },
+      { key: "taxPrice", title: "价税合计", type: "InputNumber" },
+      { key: "guaranteePeriod", title: "质保期", type: "Input" },
+
+      // { key: "lastPuMoney", title: "上年度采购额" },
+      // { key: "buyerName", title: "采购员名称" },
+      // { key: "supplierName", title: "供应商名称" },
+      // { key: "puMoneyYear", title: "本年度采购额" },
+      // { key: "puDeptName", title: "采购部门名称" },
+      // { key: "supplierTier", title: "供应商层级" },
+      // { key: "grossRateAverage", title: "平均毛利率" },
+      // { key: "approveFlow", title: "审批流程" },
+      // { key: "consumableClass", title: "耗材类别" },
+      // { key: "brandGrossRate", title: "同类品牌及毛利率" },
+      // { key: "contractFormat", title: "合同格式" },
+      // { key: "productName", title: "产品类别&名称" },
+      // { key: "invoiceTax", title: "发票税率" },
+      // { key: "emergencyDegree", title: "紧急程度" },
+      // { key: "project", title: "项目医院" },
+      // { key: "deliveryType", 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: "rollbackPolicy", title: "退换货政策" },
+      // { key: "contractContent", title: "合同主要内容" },
+      // { key: "currencyName", title: "币种名称" },
+      // { key: "tenantId", title: "租户号" },
+      // { key: "revision", title: "乐观锁" },
+      // { key: "createByName", title: "创建人" },
+      // { key: "updateByName", title: "创建人名称" },
+      // { key: "delFlag", title: "删除标记" },
+    ];
+    const initColumns = () =>
+      columns.map((column) => {
+        const clearable = column.clearable || true;
+        if (column.type === "InputNumber") {
+          return {
+            ...column,
+            clearable,
+            config: { controlsPosition: "right" },
+          };
+        }
+        if (column.type === "DatePicker") {
+          return {
+            ...column,
+            clearable,
+            config: { type: "date" },
+          };
+        }
+        return {
+          ...column,
+          clearable,
+        };
+      });
+    const initParams = () => arr2Obj(initColumns(), "key", "value");
+    const tabColumns = [
+      {
+        title: "物料基本信息",
+        key: "first",
+        tableColumns: [
+          { title: "序号", key: "" },
+          { title: "赠品", key: "" },
+          { title: "物料编码", key: "" },
+          { title: "物料名称", key: "" },
+          { title: "规格", key: "" },
+          { title: "生产厂家", key: "" },
+          { title: "收货客户", key: "" },
+          { title: "品牌", key: "" },
+          { title: "采购数量", key: "" },
+          { title: "采购单位", key: "" },
+          { title: "计价数量", key: "" },
+          { title: "税率%", key: "" },
+          { title: "含税单价", key: "" },
+          { title: "含税金额合计", key: "" },
+          { title: "价格有效期（起）", key: "" },
+          { title: "计划到货日期", key: "" },
+          { title: "来源类型", key: "" },
+          { title: "来源单号", key: "" },
+          { title: "需求单号", key: "" },
+          { title: "备注", key: "" },
+        ],
+      },
+      {
+        title: "合同条款",
+        key: "second",
+        tableColumns: [
+          { title: "序号", key: "" },
+          { title: "条款编码", key: "" },
+          { title: "条款名称", key: "" },
+          { title: "条款内容", key: "" },
+          { title: "变量序号", key: "" },
+          { title: "变量内容", key: "" },
+          { title: "备注", key: "" },
+        ],
+      },
+      {
+        title: "合同费用",
+        key: "third",
+        tableColumns: [
+          { title: "序号", key: "" },
+          { title: "费用编码", key: "" },
+          { title: "费用名称", key: "" },
+          { title: "费用金额", key: "" },
+          { title: "备注", key: "" },
+        ],
+      },
+      {
+        title: "付款协议信息",
+        key: "fourth",
+        tableColumns: [
+          { title: "序号", key: "" },
+          { title: "付款阶段", key: "" },
+          { title: "是否预付款", key: "" },
+          { title: "是否质保金", key: "" },
+          { title: "结算方式", key: "" },
+          { title: "付款起点", key: "" },
+          { title: "付款金额", key: "" },
+          { title: "付款比例%", key: "" },
+          { title: "账期天数", key: "" },
+          { title: "备注", key: "" },
+        ],
+      },
+      {
+        title: "合同执行组织范围",
+        key: "fifth",
+        tableColumns: [
+          { title: "序号", key: "" },
+          { title: "组织名称", key: "" },
+          { title: "组织编码", key: "" },
+        ],
+      },
+    ];
+    const initTabColumns = () => tabColumns;
+    return {
+      visible: false,
+      columns: initColumns(),
+      params: initParams(),
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      tabColumns: initTabColumns(),
+      tabName: "first",
+      tabTableDatas: {
+        first: [],
+        second: [],
+        third: [],
+        fourth: [],
+        fifth: [],
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+  },
+  created() {
+    console.log(this.params, this.columns);
+  },
+  mounted() {},
+  destroyed() {},
+};
+</script>
+<template>
+  <el-drawer
+    title="我是标题"
+    direction="btt"
+    size="100%"
+    :with-header="false"
+    :visible.sync="visible"
+    :before-close="handleClose"
+  >
+    <el-card
+      :body-style="{
+        padding: '20px',
+        display: 'flex',
+        'flex-wrap': 'wrap',
+      }"
+      style="margin: 10px"
+    >
+      <div
+        slot="header"
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        "
+      >
+        <h3>新增</h3>
+        <div style="text-align: right">
+          <el-button size="mini" @click="setVisible(false)">取消</el-button>
+          <el-button size="mini" type="info" @click="setVisible(false)"
+            >保存并新增</el-button
+          >
+          <el-button size="mini" type="danger" @click="setVisible(false)"
+            >保存</el-button
+          >
+        </div>
+      </div>
+      <el-row>
+        <el-form
+          size="mini"
+          label-position="right"
+          label-width="150px"
+          :model="params"
+        >
+          <el-col
+            v-for="(column, index) in columns"
+            :key="index"
+            :span="column.span || 8"
+          >
+            <el-form-item
+              :prop="column.key"
+              :label="column.title"
+              :required="column.required"
+            >
+              <el-input
+                v-if="column.type === 'Input'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                style="width: 90%"
+              ></el-input>
+              <el-input-number
+                v-if="column.type === 'InputNumber'"
+                v-model="params[column.key]"
+                :controls-position="column.config.controlsPosition"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                style="width: 90%"
+              ></el-input-number>
+              <el-select
+                v-if="column.type === 'Select'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                style="width: 90%"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                v-if="column.type === 'TagSelect'"
+                v-model="params[column.key]"
+                multiple
+                clearable
+                collapse-tags
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                style="width: 90%"
+              >
+                <template #prefix>
+                  <el-icon
+                    class="el-icon-s-operation"
+                    style="cursor: pointer"
+                    @click.stop="$message.info(234)"
+                  ></el-icon>
+                </template>
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-date-picker
+                v-if="column.type === 'DatePicker'"
+                v-model="params[column.key]"
+                :type="column.config.type"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :picker-options="column.pickerOptions"
+                style="width: 90%"
+              >
+              </el-date-picker>
+              <el-upload
+                v-if="column.type === 'Upload'"
+                :file-list="params[column.key]"
+                drag
+                action="https://jsonplaceholder.typicode.com/posts/"
+                multiple
+              >
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">
+                  将文件拖到此处，或<em>点击上传</em>
+                </div>
+                <div class="el-upload__tip" slot="tip">
+                  只能上传jpg/png文件，且不超过500kb
+                </div>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+    </el-card>
+    <el-card
+      :body-style="{
+        padding: '20px',
+        display: 'flex',
+        'flex-wrap': 'wrap',
+      }"
+      style="margin: 10px"
+    >
+      <el-tabs v-model="tabName" @tab-click="handleClick" style="width: 100%">
+        <el-tab-pane
+          v-for="(column, index) in tabColumns"
+          :key="index"
+          :label="column.title"
+          :name="column.key"
+        >
+          <el-table :data="tabTableDatas[column.key]" style="width: 100%">
+            <el-table-column
+              v-for="(cColumn, cIndex) in column.tableColumns"
+              :key="cIndex"
+              :prop="cColumn.key"
+              :label="cColumn.title"
+            >
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </el-drawer>
+</template>

src/views/purchase/purchase-contract/direct-sourcing.vue

@@ -0,0 +1,386 @@
+<script>
+export default {
+  name: "DirectSourcing",
+  components: {},
+  data() {
+    const tableColumns = [
+      { title: "价格来源", key: "a" },
+      { title: "供应商", key: "b" },
+      { title: "采购组织", key: "c" },
+      { title: "客户", key: "d" },
+      { title: "价格类型", key: "e" },
+      { title: "配送价", key: "f" },
+      { title: "币种", key: "g" },
+      { title: "价格有效期", key: "h" },
+      { title: "税率", key: "i" },
+      { title: "协议单价", key: "j" },
+      {
+        title: "未执行量",
+        key: "k",
+        edit: true,
+        editConfig: { type: "InputNumber", controlsPosition: "right" },
+      },
+      {
+        title: "采购量",
+        key: "l",
+        edit: true,
+        editConfig: { type: "InputNumber", controlsPosition: "right" },
+      },
+      {
+        title: "计划到货",
+        key: "m",
+        edit: true,
+        editConfig: { type: "DatePicker", showType: "date" },
+      },
+      {
+        title: "期望到货",
+        key: "n",
+        edit: true,
+        editConfig: { type: "DatePicker", showType: "date" },
+      },
+      {
+        title: "备注",
+        key: "o",
+        edit: true,
+        editConfig: { type: "Textarea" },
+      },
+    ];
+    const initTableColumns = () => tableColumns;
+    return {
+      tableColumns: initTableColumns(),
+      data: [
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+        {
+          a: 1,
+          b: 1,
+          c: 1,
+          d: 1,
+          e: 1,
+          f: 1,
+          g: 1,
+          h: 1,
+          i: 1,
+          j: 1,
+          k: 1,
+          l: 1,
+          m: 1,
+          n: 1,
+          o: 1,
+        },
+      ],
+      page: { pageNum: 1, pageSize: 25 },
+      total: 0,
+      pageSizes: [25, 50, 100],
+    };
+  },
+  computed: {},
+  watch: {
+    data: {
+      handler: function (n) {
+        console.log(n);
+      },
+      deep: true,
+    },
+  },
+  methods: {},
+  created() {},
+  mounted() {},
+  destroyed() {},
+};
+</script>
+
+<template>
+  <div class="directSourcing" style="height: 50vh">
+    <el-table :data="data" height="calc(50vh)" style="width: 100%">
+      <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"
+      >
+        <template slot-scope="scope">
+          <el-input-number
+            v-if="column.edit && column.editConfig.type === 'InputNumber'"
+            v-model="scope.row[column.key]"
+            :controls-position="column.editConfig.controlsPosition"
+            :min="column.editConfig.min"
+            :max="column.editConfig.max"
+            :size="column.editConfig.size || 'mini'"
+            :placeholder="column.editConfig.placeholder"
+            style="width: 90%"
+          ></el-input-number>
+          <el-date-picker
+            v-else-if="column.edit && column.editConfig.type === 'DatePicker'"
+            v-model="scope.row[column.key]"
+            :type="column.editConfig.showType"
+            :picker-options="column.editConfig.pickerOptions"
+            :size="column.editConfig.size || 'mini'"
+            :placeholder="column.editConfig.placeholder"
+            style="width: 90%"
+          ></el-date-picker>
+          <el-input
+            v-else-if="column.edit && column.editConfig.type === 'Textarea'"
+            v-model="scope.row[column.key]"
+            type="textarea"
+            :autosize="column.editConfig.autosize || true"
+            :size="column.editConfig.size || 'mini'"
+            style="width: 90%"
+          ></el-input>
+          <span v-else>{{ scope.row[column.key] }}</span>
+        </template>
+      </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>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,264 @@
+<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>

src/views/purchase/purchase-contract/see-purchase-contract.vue

@@ -0,0 +1,404 @@
+<script>
+export default {
+  name: "SeePurchaseContractDrawer",
+  data() {
+    const arr2Obj = function (data, keyName, valueName) {
+      return Object.fromEntries(
+        data.map((item) => [item[keyName], item[valueName]])
+      );
+    };
+    const columns = [
+      { key: "puOrg", title: "采购组织", type: "TagSelect", require: true },
+      { key: "code", title: "合同编码", type: "Input" },
+      { key: "contractName", title: "合同名称", type: "Input", require: true },
+      { key: "supplier", title: "供应商", type: "TagSelect", require: true },
+      { key: "contractType", title: "合同类型", type: "Select", require: true },
+      { key: "puDept", title: "采购部门", type: "TagSelect", require: true },
+      { key: "buyer", title: "采购员", type: "TagSelect" },
+      { key: "source", title: "合同来源", type: "Select" },
+      {
+        key: "signDate",
+        title: "合同签订日期",
+        type: "DatePicker",
+        require: true,
+      },
+      {
+        key: "effectiveDate",
+        title: "合同生效日期",
+        type: "DatePicker",
+        require: true,
+      },
+      { key: "endDate", title: "合同终止日期", type: "DatePicker" },
+      { key: "externalContract", title: "外部合同号", type: "Input" },
+      { key: "refusalReasons", title: "拒绝理由", type: "Input" },
+      { key: "enquiryCode", title: "询价单号", type: "Input" },
+      { key: "externalFile", title: "对外附件", type: "Upload", span: 24 },
+      { key: "puFile", title: "采购商盖章合同附件", type: "Upload", span: 24 },
+      {
+        key: "supplierFile",
+        title: "供应商盖章合同附件",
+        type: "Upload",
+        span: 24,
+      },
+      { key: "projectName", title: "项目名称", type: "TagSelect" },
+      { key: "projectCode", title: "项目编号", type: "Input" },
+      { key: "area", title: "区域", type: "Input" },
+      { key: "consigneePhone", title: "收货人联系方式", type: "Input" },
+      { key: "paymentAgreement", title: "付款协议", type: "TagSelect" },
+      { key: "currency", title: "币种", type: "TagSelect", require: true },
+      { key: "taxPrice", title: "价税合计", type: "InputNumber" },
+      { key: "guaranteePeriod", title: "质保期", type: "Input" },
+
+      // { key: "lastPuMoney", title: "上年度采购额" },
+      // { key: "buyerName", title: "采购员名称" },
+      // { key: "supplierName", title: "供应商名称" },
+      // { key: "puMoneyYear", title: "本年度采购额" },
+      // { key: "puDeptName", title: "采购部门名称" },
+      // { key: "supplierTier", title: "供应商层级" },
+      // { key: "grossRateAverage", title: "平均毛利率" },
+      // { key: "approveFlow", title: "审批流程" },
+      // { key: "consumableClass", title: "耗材类别" },
+      // { key: "brandGrossRate", title: "同类品牌及毛利率" },
+      // { key: "contractFormat", title: "合同格式" },
+      // { key: "productName", title: "产品类别&名称" },
+      // { key: "invoiceTax", title: "发票税率" },
+      // { key: "emergencyDegree", title: "紧急程度" },
+      // { key: "project", title: "项目医院" },
+      // { key: "deliveryType", 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: "rollbackPolicy", title: "退换货政策" },
+      // { key: "contractContent", title: "合同主要内容" },
+      // { key: "currencyName", title: "币种名称" },
+      // { key: "tenantId", title: "租户号" },
+      // { key: "revision", title: "乐观锁" },
+      // { key: "createByName", title: "创建人" },
+      // { key: "updateByName", title: "创建人名称" },
+      // { key: "delFlag", title: "删除标记" },
+    ];
+    const initColumns = () =>
+      columns.map((column) => {
+        const clearable = column.clearable || true;
+        if (column.type === "InputNumber") {
+          return {
+            ...column,
+            clearable,
+            config: { controlsPosition: "right" },
+          };
+        }
+        if (column.type === "DatePicker") {
+          return {
+            ...column,
+            clearable,
+            config: { type: "date" },
+          };
+        }
+        return {
+          ...column,
+          clearable,
+        };
+      });
+    const initParams = () => arr2Obj(initColumns(), "key", "value");
+    const tabColumns = [
+      {
+        title: "物料基本信息",
+        key: "first",
+        tableColumns: [
+          { title: "序号", key: "" },
+          { title: "赠品", key: "" },
+          { title: "物料编码", key: "" },
+          { title: "物料名称", key: "" },
+          { title: "规格", key: "" },
+          { title: "生产厂家", key: "" },
+          { title: "收货客户", key: "" },
+          { title: "品牌", key: "" },
+          { title: "采购数量", key: "" },
+          { title: "采购单位", key: "" },
+          { title: "计价数量", key: "" },
+          { title: "税率%", key: "" },
+          { title: "含税单价", key: "" },
+          { title: "含税金额合计", key: "" },
+          { title: "价格有效期（起）", key: "" },
+          { title: "计划到货日期", key: "" },
+          { title: "来源类型", key: "" },
+          { title: "来源单号", key: "" },
+          { title: "需求单号", key: "" },
+          { title: "备注", key: "" },
+        ],
+      },
+      {
+        title: "合同条款",
+        key: "second",
+        tableColumns: [
+          { title: "序号", key: "" },
+          { title: "条款编码", key: "" },
+          { title: "条款名称", key: "" },
+          { title: "条款内容", key: "" },
+          { title: "变量序号", key: "" },
+          { title: "变量内容", key: "" },
+          { title: "备注", key: "" },
+        ],
+      },
+      {
+        title: "合同费用",
+        key: "third",
+        tableColumns: [
+          { title: "序号", key: "" },
+          { title: "费用编码", key: "" },
+          { title: "费用名称", key: "" },
+          { title: "费用金额", key: "" },
+          { title: "备注", key: "" },
+        ],
+      },
+      {
+        title: "付款协议信息",
+        key: "fourth",
+        tableColumns: [
+          { title: "序号", key: "" },
+          { title: "付款阶段", key: "" },
+          { title: "是否预付款", key: "" },
+          { title: "是否质保金", key: "" },
+          { title: "结算方式", key: "" },
+          { title: "付款起点", key: "" },
+          { title: "付款金额", key: "" },
+          { title: "付款比例%", key: "" },
+          { title: "账期天数", key: "" },
+          { title: "备注", key: "" },
+        ],
+      },
+      {
+        title: "合同执行组织范围",
+        key: "fifth",
+        tableColumns: [
+          { title: "序号", key: "" },
+          { title: "组织名称", key: "" },
+          { title: "组织编码", key: "" },
+        ],
+      },
+    ];
+    const initTabColumns = () => tabColumns;
+    return {
+      visible: false,
+      columns: initColumns(),
+      params: initParams(),
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      tabColumns: initTabColumns(),
+      tabName: "first",
+      tabTableDatas: {
+        first: [],
+        second: [],
+        third: [],
+        fourth: [],
+        fifth: [],
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+  },
+  created() {
+    console.log(this.params, this.columns);
+  },
+  mounted() {},
+  destroyed() {},
+};
+</script>
+<template>
+  <el-drawer
+    title="我是标题"
+    direction="btt"
+    size="100%"
+    :with-header="false"
+    :visible.sync="visible"
+    :before-close="handleClose"
+  >
+    <el-card
+      :body-style="{
+        padding: '20px',
+        display: 'flex',
+        'flex-wrap': 'wrap',
+      }"
+      style="margin: 10px"
+    >
+      <div
+        slot="header"
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        "
+      >
+        <h3>查看</h3>
+        <div style="text-align: right">
+          <el-button size="mini" @click="setVisible(false)">取消</el-button>
+          <el-button size="mini" type="info" @click="setVisible(false)"
+            >保存并新增</el-button
+          >
+          <el-button size="mini" type="danger" @click="setVisible(false)"
+            >保存</el-button
+          >
+        </div>
+      </div>
+      <el-row>
+        <el-form
+          size="mini"
+          label-position="right"
+          label-width="150px"
+          :model="params"
+        >
+          <el-col
+            v-for="(column, index) in columns"
+            :key="index"
+            :span="column.span || 8"
+          >
+            <el-form-item
+              :prop="column.key"
+              :label="column.title"
+              :required="column.required"
+            >
+              <el-input
+                v-if="column.type === 'Input'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                style="width: 90%"
+              ></el-input>
+              <el-input-number
+                v-if="column.type === 'InputNumber'"
+                v-model="params[column.key]"
+                :controls-position="column.config.controlsPosition"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                style="width: 90%"
+              ></el-input-number>
+              <el-select
+                v-if="column.type === 'Select'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                style="width: 90%"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                v-if="column.type === 'TagSelect'"
+                v-model="params[column.key]"
+                multiple
+                clearable
+                collapse-tags
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                style="width: 90%"
+              >
+                <template #prefix>
+                  <el-icon
+                    class="el-icon-s-operation"
+                    style="cursor: pointer"
+                    @click.stop="$message.info(234)"
+                  ></el-icon>
+                </template>
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-date-picker
+                v-if="column.type === 'DatePicker'"
+                v-model="params[column.key]"
+                :type="column.config.type"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :picker-options="column.pickerOptions"
+                style="width: 90%"
+              >
+              </el-date-picker>
+              <el-upload
+                v-if="column.type === 'Upload'"
+                :file-list="params[column.key]"
+                drag
+                action="https://jsonplaceholder.typicode.com/posts/"
+                multiple
+              >
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">
+                  将文件拖到此处，或<em>点击上传</em>
+                </div>
+                <div class="el-upload__tip" slot="tip">
+                  只能上传jpg/png文件，且不超过500kb
+                </div>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+    </el-card>
+    <el-card
+      :body-style="{
+        padding: '20px',
+        display: 'flex',
+        'flex-wrap': 'wrap',
+      }"
+      style="margin: 10px"
+    >
+      <el-tabs v-model="tabName" @tab-click="handleClick" style="width: 100%">
+        <el-tab-pane
+          v-for="(column, index) in tabColumns"
+          :key="index"
+          :label="column.title"
+          :name="column.key"
+        >
+          <el-table :data="tabTableDatas[column.key]" style="width: 100%">
+            <el-table-column
+              v-for="(cColumn, cIndex) in column.tableColumns"
+              :key="cIndex"
+              :prop="cColumn.key"
+              :label="cColumn.title"
+            >
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </el-drawer>
+</template>

src/views/purchase/purchase-task/index.vue

@@ -331,6 +331,13 @@ export default {
       },
     ];
     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,
@@ -342,7 +349,7 @@ export default {
         ...initSearchParams(),
       },
       tableColumns: initTableColumns(),
-      tableData: [{ materialName: 1 }],
+      tableData: initTableData(),
       page: { pageNum: 1, pageSize: 25 },
       total: 0,
       pageSizes: [25, 50, 100],
@@ -364,7 +371,7 @@ export default {
   //     },
   //   },
   created() {
-    this.fetchTaskList();
+    // this.fetchTaskList();
     console.log("Vue", this);
   },
   methods: {

vue.config.js

@@ -43,6 +43,7 @@ module.exports = {
         // target: `http://172.16.13.152:8000/drp-admin`, //豪哥本地
         // target: `http://172.16.13.47:8000/drp-admin`, //石杨本地
         // target: `http://172.16.13.113:8000/drp-admin`, //DWT本地
+        // target: `http://172.16.13.77:8000/drp-admin`, //DWT本地
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",