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

<!-- 物料信息基础档案 -->
<script src="../../../main.js"></script>
<template>
  <div class="material-basic" v-loading="failLoad">

    <!-- 主体列表 -->
    <el-card class="material-list" v-loading="loading">

      <!-- 操作栏 -->
    <div style="margin: 0 0 10px 0;">
      <!-- 查询条件 -->
      <el-row :gutter="10">
        <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.code" placeholder="物料编码" clearable></el-input>
            </el-form-item>
            <el-form-item label="物料名称">
              <el-input size="small" v-model="queryForm.name" placeholder="物料名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="启用状态">
              <!-- 0=已启用，2=已停用 -->
              <el-select size="small" v-model="queryForm.isEnable" placeholder="请选择" clearable>
                <el-option key="0" label="已启用" value="0"></el-option>
                <el-option key="2" label="已停用" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否同步NC">
              <!-- 是否同步;2=否，0=是 -->
              <el-select size="small" v-model="queryForm.isSync" placeholder="请选择" clearable>
                <el-option key="0" label="是" value="0"></el-option>
                <el-option key="2" label="否" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button size="small" type="primary" @click="handleQuery">搜 索</el-button>
              <el-button size="small" @click="handleResetQuery">重 置</el-button>
            </el-form-item>
          </el-form>
        </el-col>

      </el-row>
    </div>
      <el-row 
        :gutter="10" 
        class="mb10"
        type="flex"
        justify="end"
      >
        <!-- 新增、修改、删除、复制 -->
        <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-button size="small" @click="handleIsInvoke" :disabled="checkedList.length != 1"
                       v-hasPermi="['system:material:add']">
              <!-- 0：启用  2：停用 -->
              {{ handleJudgeIsUsing() ? '停用' : '启用' }}
            </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-row>

      <el-table 
        border 
        :data="taskList" 
        ref="materialTable" 
        @cell-dblclick="handledbClick" 
        :row-key="getRowKey"
        @selection-change="handleSelectionChange" 
        @select="handleSelect" 
        @select-all="handleSelectAll"
      >
        <!--  -->
        <el-table-column type="selection" width="45" :reserve-selection="true"/>
        <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"
          show-overflow-tooltip
        >
          <!-- :prop="h.attribute == 'select' ? `${h.prop}Name` : h.prop" -->
          <template slot-scope="scope">
            {{ h.attribute == 'select' ? scope.row[`${h.prop}Name`] :
            (h.attribute == 'checkbox' ?
            (scope.row[h.prop] == '0' ? '√' : '')
            : scope.row[h.prop])
            }}
          </template>
        </el-table-column>
      </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">
        <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="35%" 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" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="handleDownTemplate">下载模板</el-button>
          <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
        </el-upload>

      </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 {
        failLoad: false,
        // 物料基本信息数据
        taskList: [],
        // 查询表单字段
        queryForm: {
          name: '',
          code: '',
          isEnable: '',
        },
        // 总条数
        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: {
      // 判读是否启用
      handleJudgeIsUsing() {
        return this.checkedList.length == 1 && this.checkedList[0].isEnable == '已启用';
      },
      // 改变分页大小
      handleSizeChange(e) {
        this.queryParams.pageSize = e;
        this.handleQuery();
      },
      // 改变当前页
      handleCurrentChange(e) {
        this.queryParams.pageNum = e;
        this.handleQuery();
      },
      // 新增
      handleInster() {
        this.$notify({
          title: '警告',
          message: '物料只能通过申请审批增加，不能在节点直接录入！',
          type: 'warning'
        });
      },
      // 修改
      handleEdit() {
        if (this.checkedList.length == 1) {
          this.$router.push({
            path: `/material/basicFile/detail/${this.checkedList[0].id}`,
            query: {
              isEdit: true
            }
          });
        } else {
          this.$notify({
            title: '警告',
            message: `${this.checkedList.length > 1 ? '修改只能选择单个数据！' : '请选择需要修改的信息！'}`,
            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();
              // 清空选中数据
              this.checkedList = [];
              this.$refs.materialTable.clearSelection();
            }
          })
        } else {
          this.$notify({
            title: '警告',
            message: `请选择需要删除的数据！`,
            type: 'warning'
          });
        }

      },
      // 复制
      handleCopy() {
        console.log('复制');
      },
      //查询
      handleQuery() {
        this.getMaterialList('material');
      },
      // 重置查询条件
      handleResetQuery() {
        for (const key in this.queryForm) {

          this.queryForm[key] = '';
        }
      },
      // 刷新
      handleRefresh() {
        this.getMaterialList('material');
        for (const key in this.queryForm) {
          this.queryForm[key] = '';
        }
      },
      // 过滤
      handleFilter(e) {
        console.log(e, '过滤');
      },
      filterCondition(type) {
        return {
          type
        }
      },
      // 启用/停用
      handleIsInvoke() {
        // true   当前状态为启用，需要改为停用
        // 0：启用  2：停用
        let param = {
          isEnable: this.handleJudgeIsUsing() ? '2' : '0',
          id: this.checkedList[0].id
        };
        materialApi.updateEnableMaterial(param).then(res => {
          if (res.code == 200) {
            this.handleRefresh();
            // 清空选中数据
            this.checkedList = [];
            this.$refs.materialTable.clearSelection();
          }
        })

      },
      isInvoke(val) {
        return val;
      },
      // 申请单查询
      handleQueryForm() {
        console.log('申请单查询');
      },
      // 批量导入
      handleImport() {
        this.importData.show = true
      },
      // 导入弹窗关闭前
      handlefileDialogColse(done) {
        this.importData.list = [];
        done();
      },
      // 导入弹窗操作
      handleImportData(type) {
        switch (type) {
          // 取消
          case 'cancal':
            this.importData.list = [];
            this.importData.show = false;
            break;
          // 确认
          case 'confirm':
            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;
                  this.importData.list = [];
                  if (res.data.flag) {
                    this.failLoad = true;
                    console.log(res.data.datas)
                    let param = {failDatas: res.data.datas}
                    if (null != param) {
                      materialApi.exportMartial(param).then(res => {
                        const blob = new Blob([res], {
                          type: "application/vnd.ms-excel;charset=UTF-8",
                        });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
                        const downloadElement = document.createElement("a"); //创建a标签
                        const href = window.URL.createObjectURL(blob); // 创建下载的链接
                        downloadElement.href = href;  //下载地址
                        downloadElement.download = '导入失败的物料基础档案数据.xlsx'; // 下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); // 点击下载
                        document.body.removeChild(downloadElement); // 下载完成移除元素
                        window.URL.revokeObjectURL(href); // 释放blob对象
                        this.failLoad = false;
                      })
                    }
                  }
                  this.$notify({
                    message: res.data.msg,
                    type: res.data.flag ? 'warning' : 'success'
                  });
                  
                } else {
                  this.$notify({
                    message: res.msg,
                    type: res.code == 200 ? 'success' : 'warning'
                  });
                }
              })
            } else {
              this.$notify({
                title:'警告',
                message: '请上传文件之后在确认！',
                type: 'warning',
              });
            }
            break;
        }
      },

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

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

        if (ids.length) {

          let params = {
            // orgId: '1',
            ids,
          }
          this.download('/system/material/export', params, `物料基本信息${new Date().getTime()}.xlsx`);
        } else {
          this.$notify({
                title:'警告',
                message: '请选择需要导出的数据！',
                type: 'warning'
              });
        }

      },
      // 下载模板
      handleDownTemplate() {
        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) {
        this.$router.push({
          path: `/material/basicFile/detail/${e.id}`,
        });
      },
      // 绑定row-key
      getRowKey(row) {
        return row.id;
      },
      // 对象数组去重
      handleUnique(arr, key) {
        // arr  需要去重的数组   type:作为去重依据的key
        const res = new Map();
        return arr.filter((arr) => !res.has(arr[key]) && res.set(arr[key], 1))
      },
      // 选中数据改变
      handleSelectionChange(list) {
        // this.checkedList = this.handleUnique([...this.checkedList, ...list], 'id');
        // this.$emit('headerOption', JSON.stringify({ checkedList: [... this.checkedList] }))
      },
      // 行数据勾选操作
      handleSelect(selection, row) {
        this.checkedList = selection;
        // // true就是选中，0或者false是取消选中
        // let selected = selection.length && selection.indexOf(row) !== -1

      },
      //手动勾选全选
      handleSelectAll(selection) {
        this.checkedList = selection;
      },
      // 获取物料列表信息
      getMaterialList(templateCode, query) {
        let _this = this;
        this.loading = true;
        let page = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        }

        let param = {
          templateCode,
          ...this.queryForm
        }
        // 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');
    },
    beforeRouteEnter(to, from, next) {

      next((vm) => {
        if (from.name == 'materialDetail') {
          // this.$store.getQuery(this.queryForm);
          console.log(vm, 'queryValue', vm.$store);
          vm.queryForm = vm.$store.state.query.queryVlue;
          // 清空选中数据
          vm.checkedList = [];
          vm.$refs.materialTable.clearSelection();
        }
        vm.getTagList('material');
        vm.getMaterialList('material');
      });
    },
    // 进入详情，保留查询条件
    beforeRouteLeave(to, from, next) {
      if (to.name == 'materialDetail') {
        this.$store.commit('SET_QUERY', this.queryForm);
      } else {
        this.$store.commit('SET_QUERY', {name: '', code: ''});
      }
      next();
    }

  };
</script>


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


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

      .el-table {
        overflow: auto;

        .el-table__body-wrapper {
          overflow-y: auto !important;
          overflow-x: auto !important;
        }
      }
    }

    .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;
  }

  .mb-query >>> .el-select {
    width: 90px;
  }

  .mb-query >>> .el-scrollbar__wrap {
    margin-bottom: -18px;

  }
</style>