kd-aiot-frontend/src/views/material/BOMmanage/components/document.vue

<template>
  <div class="document">
    <el-form
      label-width="77px"
      class="ele-form-search"
      @keyup.enter.native="search"
      @submit.native.prevent
    >
      <el-row type="flex" :gutter="15">
        <el-col :span="6">
          <el-form-item label="类型:" label-width="100px">
            <el-input clearable v-model="where.code" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="编码:" label-width="100px">
            <el-input clearable v-model="where.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="名称:" label-width="100px">
            <el-input clearable v-model="where.fixCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="版本:" label-width="100px">
            <el-input clearable v-model="where.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="15">
        <el-col :span="6">
          <el-form-item label="状态" label-width="100px">
            <el-input clearable v-model="where.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建人" label-width="100px">
            <el-input clearable v-model="where.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间" label-width="100px">
            <el-date-picker
              style="width: 100%"
              v-model="where.endTime"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择有效期结束时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              size="small"
              @click="search"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-left"
              size="small"
              type="primary"
              @click="reset"
              >重置</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-form>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(100vh - 635px)"
      full-height="calc(100vh - 115px)"
      tool-class="ele-toolbar-form"
      cache-key="systemOrgUserTable"
    >
      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-view"
          @click="search(row)"
        >
          详情
        </el-link>
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-add"
          @click="search(row)"
        >
          工步
        </el-link>
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-add"
          @click="search(row)"
        >
          配置
        </el-link>
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-delete"
          @click="search(row)"
        >
          删除
        </el-link>
      </template>
    </ele-pro-table>
  </div>
</template>
<script>
  import { getBomFilePageList } from '@/api/material/BOM';
  export default {
    data() {
      return {
        where: {},
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            columnKey: 'index',
            type: 'index',
            label: '序号',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            columnKey: 'code',
            prop: 'code',
            slot: 'code',
            label: '类型',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'name',
            label: '编码',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'fixCode',
            label: '名称',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'postName',
            label: '版本',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'codeNumber',
            label: '状态',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'category.modelType',
            label: '创建人',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'category.specification',
            label: '创建时间',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            columnKey: 'action',
            slot: 'action',
            label: '操作',
            minWidth: 300,
            fixed: 'right'
          }
        ]
      };
    },
    methods: {
      search() {
        console.log('search');
      },
      datasource({ where, page, limit }) {
        return getBomFilePageList({
          ...where,
          pageNum: page,
          size: limit
        });
      },
      search() {
        this.$refs.table.reload({ where: this.where });
      },
      reload(where) {
        this.$refs.table.reload({ where });
      },
      reset() {
        this.where = {};
        this.reload(this.where);
      }
    }
  };
</script>