drp-ui/src/views/material/basicFile/index.vue

<!-- 物料信息基础档案 -->
<template>
  <div class="material-basic">

    <!-- 操作栏 -->
    <el-row :gutter="10" class="mb10">
      <!-- 新增、修改、删除、复制 -->
      <el-col :span="1.5">
        <el-button-group>
          <!-- <el-button size="small" @click="handleInster">新增</el-button> -->
          <el-button size="small" @click="handleEdit">修改</el-button>
          <!-- <el-button size="small" @click="handleDel">删除</el-button> -->
          <!-- <el-button size="small" @click="handleCopy">复制</el-button> -->
        </el-button-group>
      </el-col>

      <!-- 查询、刷新、过滤 -->
      <el-col :span="1.5">
        <el-button-group>

        <!-- <el-dropdown size="small" @command="handleFilter">
            <el-button size="small">
              过滤<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="filterCondition('stop')">显示停用</el-dropdown-item>
              <el-dropdown-item :command="filterCondition('allot')">显示已分配</el-dropdown-item>
            </el-dropdown-menu>
                                                            </el-dropdown> -->

          <!-- <el-button size="small" @click="handleQuery">查询</el-button> -->
          <el-button size="small" @click="handleRefresh">刷新</el-button>

        </el-button-group>
      </el-col>

      <!-- 启用 -->
    <!-- <el-col :span="1.5">
        <el-button-group>
          <el-dropdown split-button size="small" @click="handleIsInvoke(true)" @command="handleIsInvoke">
            启用
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="isInvoke(true)">启用</el-dropdown-item>
              <el-dropdown-item :command="isInvoke(false)">停用</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-button-group>
                                                        </el-col> -->

      <!-- 申请单查询 -->
    <!-- <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleQueryForm">申请单查询</el-button>
        </el-button-group>
                                                        </el-col> -->

      <!-- 导入导出 -->
      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleImport" v-hasPermi="['system:material:import']">批量导入</el-button>
          <el-button size="small" @click="handleExport" v-hasPermi="['system:material:export']">批量导出</el-button>
        </el-button-group>
      </el-col>

      <el-col :span="1.5">
        <!-- 查询框 -->
        <el-form :inline="true" :model="queryForm" class="mb-query" @submit.native.prevent>
          <el-form-item label="物料名称">
            <el-input size="small" v-model="queryForm.name" placeholder="物料名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="物料编码">
            <el-input size="small" v-model="queryForm.code" placeholder="物料编码" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>

    </el-row>

    <!-- 主体列表 -->
    <el-card class="material-list" v-loading="loading">
      <el-table :data="taskList" @cell-dblclick="handledbClick" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="20" />
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column width="150" v-for="h in  tableHeader" v-if="h.show" :label="h.name" align="center"
          :prop="h.attribute == 'select' ? `${h.prop}Name` : h.prop" show-overflow-tooltip />
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

    <!-- 操作提示 -->
    <el-dialog title="操作提示" :visible.sync="optionDialog.show" width="30%" center>
      <span>是否确认{{ optionDialog.op }}？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleOptionShow('option', false)">取 消</el-button>
        <el-button type="primary" @click="handleComfirmOption('cancal')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 导入弹窗 -->
    <el-dialog title="批量导入" :visible.sync="importData.show" width="30%" center @before-close="handlefileDialogColse">
      <div class="mb-import">

        <el-upload class="upload-demo" accept=".xls, .xlsx" ref="upload" action="#" :on-remove="handleFileRemove"
          :file-list="importData.list" :auto-upload="false" :on-change="handleChangeFile" :limit="1">
          <el-button slot="trigger" type="primary">选取文件</el-button>
          <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="handleSubmitUpload">上传到服务器</el-button> -->
          <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
        </el-upload>
        <el-button type="success" @click="handleDownTemplate">下载模板</el-button>
      </div>
      <span slot="footer">
        <el-button @click="handleImportData('cancal')">取 消</el-button>
        <el-button type="primary" @click="handleImportData('confirm')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import './style/index.scss';
import materialApi from '@/api/material/basic';

export default {
  name: "material-basic",
  data() {
    return {
      // 物料基本信息数据
      taskList: [],
      // 查询表单字段
      queryForm: {
        name: '',
      },
      // 总条数
      total: 1,
      loading: false,
      importData: {
        show: false,
        list: []
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null
      },
      // 表头
      tableHeader: [],
      // 多选数组
      checkedList: [],
      // 列表选中数据
      checkedList: [],
      // 操作弹窗
      optionDialog: {
        show: false,
        op: ''
      },
    }
  },

  methods: {
    // 改变分页大小
    handleSizeChange(e) {
      this.queryParams.pageSize = e;
      this.handleQuery();
    },
    // 改变当前页
    handleCurrentChange(e) {
      this.queryParams.pageNum = e;
      this.handleQuery();
    },
    // 新增
    handleInster() {
      this.$message({
        message: '物料只能通过申请审批增加，不能在节点直接录入！',
        type: 'warning'
      });
    },
    // 修改
    handleEdit() {
      console.log(this.checkedList, 'this.checkedList');
      if (this.checkedList.length == 1) {
        this.$router.push({
          path: `/material/basicFile/detail/${this.checkedList[0].id}`,
          query: {
            isEdit: true
          }
        });
      } else if (this.checkedList.length > 1) {
        this.$message({
          message: '修改只能选择单个数据！',
          type: 'warning'
        });
      } else {
        this.$message({
          message: '请选择需要修改的信息！',
          type: 'warning'
        });
      }
    },
    // 删除
    handleDel() {
      console.log('删除', this.checkedList);
      // delMaterial
      if (this.checkedList.length) {
        let ids = this.checkedList.map(i => i.id);
        materialApi.delMaterial(ids).then(res => {
          if (res.code == 200) this.handleRefresh();
        })
      } else {
        this.$message({
          message: '请选择需要删除的数据！',
          type: 'warning'
        });
      }

    },
    // 复制
    handleCopy() {
      console.log('复制');
    },
    //查询 
    handleQuery() {

      console.log('查询');
      this.getMaterialList('material', this.queryForm);
    },
    // 刷新
    handleRefresh() {
      console.log('刷新');
      this.getMaterialList('material');
      for (const key in this.queryForm) {
        this.queryForm[key] = '';
      }
    },
    // 过滤
    handleFilter(e) {
      console.log(e, '过滤');
    },
    filterCondition(type) {
      return {
        type
      }
    },
    // 启用
    handleIsInvoke(e) {
      console.log('启用', e);
    },
    isInvoke(val) {
      return val;
    },
    // 申请单查询
    handleQueryForm() {
      console.log('申请单查询');
    },
    // 批量导入
    handleImport() {
      console.log('批量导入');
      this.importData.show = true
    },
    // 导入弹窗关闭前
    handlefileDialogColse(done) {
      this.importData.list = [];
      done();
    },
    // 导入弹窗操作
    handleImportData(type) {
      console.log('导入弹窗操作');
      switch (type) {
        // 取消
        case 'cancal':
          this.importData.list = [];
          this.importData.show = false;
          break;
        // 确认
        case 'confirm':
          console.log(this.importData.list, 'this.fileList');
          if (this.importData.list.length) {

            let formData = new FormData();

            formData.append('file', this.importData.list[0].raw);
            materialApi.fileImport(formData).then(res => {
              if (res.code == 200) this.importData.show = false;
            })
          } else {
            this.$message({
              message: '请上传文件之后在确认！',
              type: 'warning'
            });
          }
          break;
      }
    },

    // 删除文件
    handleFileRemove(file, fileList) {
      console.log('删除文件', file, 'file', fileList, 'fileList');
      this.importData.list = fileList;
    },
    // 文件发生改变
    handleChangeFile(file, fileList) {
      this.importData.list = fileList;
      console.log(this.importData.list, '文件发生改变');
    },
    // 批量导出
    handleExport() {
      console.log('批量导出', this.checkedList);

      let ids = this.checkedList.length ? this.checkedList.map(i => i.id) : [];

      let params = {
        // orgId: '1',
        ids,
      }
      this.download('/system/material/export', params, `物料基本信息${new Date().getTime()}.xlsx`)
    },
    // 下载模板
    handleDownTemplate() {
      console.log('下载模板');
      this.download('/system/material/download', {}, `物料基本信息模板.xlsx`)
    },


    // 操作弹窗显隐
    handleOptionShow(type, val) {
      switch (type) {
        case 'option':
          this.optionDialog.show = val;
          break;
      }
    },
    // 操作弹窗确认按钮
    handleComfirmOption(op) {
      switch (op) {
        case 'cancal':
          this.handleOptionShow('option', false);
          break;
      }
    },



    // 双击行
    handledbClick(e) {
      console.log(e, '双击行');
      this.$router.push({
        path: `/material/basicFile/detail/${e.id}`,
      });
    },
    // 选中数据改变
    handleSelectionChange(list) {
      this.checkedList = list;
      this.$emit('headerOption', JSON.stringify({ checkedList: [...list] }))
    },
    // 获取物料列表信息
    getMaterialList(templateCode, query) {
      let _this = this;
      this.loading = true;
      let page = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      }

      let param = {
        templateCode,
        ...query
      }
      console.log(param, 'param');
      materialApi.materialList(param, page).then((res) => {
        _this.loading = false;
        console.log(res, '获取物料列表信息以及表头字段');
        let { code, data } = res;
        if (code == 200) {
          _this.taskList = data.tableBody.rows;
          _this.total = data.tableBody.total;

        }
      })
    },
    // 获取物料列表表头
    getTagList(templateCode) {
      materialApi.tagList({ templateCode }).then(res => {
        console.log(res, '获取物料列表表头');
        if (res.code == 200) {
          this.tableHeader = res.data;
        }
      })
    },






  },
  created() {
    this.getMaterialList('material');
    this.getTagList('material');
  },

};
</script>


<style lang="scss">
.material-list {
  // height: calc(100% - 100px);
  height: calc(100% - 70px);


  .el-card__body {
    height: 100%;
    box-sizing: border-box;

    .el-table {
      height: calc(100% - 35px);
      overflow: auto;

      .el-table__body-wrapper {
        // height: calc(100% - 150px);
        height: calc(100% - 70px);
        overflow-y: auto !important;
        overflow-x: auto !important;
        // .el-table__body {
        //   height: 100%;
        // }
      }
    }
  }

  .el-pagination {
    margin-top: 8px;
    text-align: right;
  }
}

.mb-import {
  padding: 0 20%;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}
</style>
<style scoped>
.el-dialog__header {
  background-color: rgb(244, 244, 244);
}

.mb-query>>>.el-form-item__label {
  font-weight: normal;
  font-size: 12px;
}

.mb-query>>>.el-form-item {
  margin-bottom: 8px;
}
</style>