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

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