drp-ui/src/views/purchase/purchase-task/see-purchase-task.vue

<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>