update purchase-task

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

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

src/views/purchase/purchase-task/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-task/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-task/index.vue

@@ -0,0 +1,591 @@
+<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;
+    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 }"
+  >
+    <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>

src/views/purchase/purchase-task/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>

vue.config.js

@@ -1,15 +1,15 @@
-'use strict'
-const path = require('path')
+"use strict";
+const path = require("path");
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+  return path.join(__dirname, dir);
 }
 
-const CompressionPlugin = require('compression-webpack-plugin')
+const CompressionPlugin = require("compression-webpack-plugin");
 
-const name = process.env.VUE_APP_TITLE || '德荣医疗DRP系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || "德荣医疗DRP系统"; // 网页标题
 
-const port = process.env.port || process.env.npm_config_port || 80 // 端口
+const port = process.env.port || process.env.npm_config_port || 80; // 端口
 
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
@@ -21,22 +21,22 @@ module.exports = {
   // publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
   publicPath: process.env.VUE_APP_CONTEXT_PATH,
   // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
-  outputDir: 'dist',
+  outputDir: "dist",
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
-  assetsDir: 'static',
+  assetsDir: "static",
   // 是否开启eslint保存检测，有效值：ture | false | 'error'
-  lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: process.env.NODE_ENV === "development",
   // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   productionSourceMap: false,
   // webpack-dev-server 相关配置
   devServer: {
-    host: '0.0.0.0',
+    host: "0.0.0.0",
     port: port,
     open: true,
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://test-sy.derom.com/drp-admin`, //测试
+        target: `https://release-sy.derom.com/drp-admin`, //测试
         // target: `http://sy.derom.com/drp-admin`, //生产
         // target: `http://172.16.63.202:8000/drp-admin`, // D本地
         // target: `http://172.16.62.241:8000/drp-admin`, //笑寒本地
@@ -45,99 +45,99 @@ module.exports = {
         // target: `http://172.16.13.113:8000/drp-admin`, //DWT本地
         changeOrigin: true,
         pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
-        }
-      }
+          ["^" + process.env.VUE_APP_BASE_API]: "",
+        },
+      },
+      "/drp-admin/mock34": {
+        target: `http://172.16.100.123:3030/mock/34`,
+        changeOrigin: true,
+        pathRewrite: { [`^/drp-admin/mock34`]: "" },
+      },
     },
-    disableHostCheck: true
+    disableHostCheck: true,
   },
   css: {
     loaderOptions: {
       sass: {
-        sassOptions: { outputStyle: "expanded" }
-      }
-    }
+        sassOptions: { outputStyle: "expanded" },
+      },
+    },
   },
   configureWebpack: {
     name: name,
     resolve: {
       alias: {
-        '@': resolve('src')
-      }
+        "@": resolve("src"),
+      },
     },
     plugins: [
       // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
       new CompressionPlugin({
-        cache: false,                   // 不启用文件缓存
-        test: /\.(js|css|html)?$/i,     // 压缩文件格式
-        filename: '[path].gz[query]',   // 压缩后的文件名
-        algorithm: 'gzip',              // 使用gzip压缩
-        minRatio: 0.8                   // 压缩率小于1才会压缩
-      })
+        cache: false, // 不启用文件缓存
+        test: /\.(js|css|html)?$/i, // 压缩文件格式
+        filename: "[path].gz[query]", // 压缩后的文件名
+        algorithm: "gzip", // 使用gzip压缩
+        minRatio: 0.8, // 压缩率小于1才会压缩
+      }),
     ],
   },
   chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
+    config.plugins.delete("preload"); // TODO: need test
+    config.plugins.delete("prefetch"); // TODO: need test
 
     // set svg-sprite-loader
+    config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
     config.module
-      .rule('svg')
-      .exclude.add(resolve('src/assets/icons'))
-      .end()
-    config.module
-      .rule('icons')
+      .rule("icons")
       .test(/\.svg$/)
-      .include.add(resolve('src/assets/icons'))
+      .include.add(resolve("src/assets/icons"))
       .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
       .options({
-        symbolId: 'icon-[name]'
+        symbolId: "icon-[name]",
       })
-      .end()
+      .end();
 
-    config
-      .when(process.env.NODE_ENV !== 'development',
-        config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-              // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
-            .end()
-          config
-            .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
-            })
-          config.optimization.runtimeChunk('single'),
+    config.when(process.env.NODE_ENV !== "development", (config) => {
+      config
+        .plugin("ScriptExtHtmlWebpackPlugin")
+        .after("html")
+        .use("script-ext-html-webpack-plugin", [
           {
-            from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
-            to: './' //到根目录下
-          }
-        }
-      )
-  }
-}
+            // `runtime` must same as runtimeChunk name. default is `runtime`
+            inline: /runtime\..*\.js$/,
+          },
+        ])
+        .end();
+      config.optimization.splitChunks({
+        chunks: "all",
+        cacheGroups: {
+          libs: {
+            name: "chunk-libs",
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: "initial", // only package third parties that are initially dependent
+          },
+          elementUI: {
+            name: "chunk-elementUI", // split elementUI into a single package
+            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+          },
+          commons: {
+            name: "chunk-commons",
+            test: resolve("src/components"), // can customize your rules
+            minChunks: 3, //  minimum common number
+            priority: 5,
+            reuseExistingChunk: true,
+          },
+        },
+      });
+      config.optimization.runtimeChunk("single"),
+        {
+          from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
+          to: "./", //到根目录下
+        };
+    });
+  },
+};