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

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

    <!-- 操作栏 -->
    <div>
      <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-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-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-card class="material-list" v-loading="loading">
      <el-table :data="taskList" ref="materialTable" @cell-dblclick="handledbClick" :row-key="getRowKey"
        @selection-change="handleSelectionChange" @select="handleSelect" @select-all="handleSelectAll">
        <!--  -->
        <el-table-column type="selection" width="30" :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" 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="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 {
      // 物料基本信息数据
      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.$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 {
        this.$message({
          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.$message({
          message: '请选择需要删除的数据！',
          type: 'warning'
        });
      }

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

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

        this.queryForm[key] = '';
      }
    },
    // 刷新
    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() {
      // true   当前状态为启用，需要改为停用
      // 0：启用  2：停用
      let param = {
        isEnable: this.handleJudgeIsUsing() ? '2' : '0',
        id: this.checkedList[0].id
      };
      materialApi.updateEnableMaterial(param).then(res => {
        console.log(res, '启用/停用');
        if (res.code == 200) {
          this.handleRefresh();
          // 清空选中数据
          this.checkedList = [];
          this.$refs.materialTable.clearSelection();
        }
      })

    },
    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;
                this.importData.list = [];
              }
              this.$message({
                message: res.msg,
                type: res.code == 200 ? 'success' : 'warning'
              });
            })
          } 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) : [];

      if (ids.length) {

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

    },
    // 下载模板
    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}`,
      });
    },
    // 绑定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');
      // console.log(this.checkedList, '选中数据改变');
      // 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) {
      // console.log(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) {
    console.log(to, 'to', from, 'beforeRouteEnter');

    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) {
    console.log(to, 'to', from, 'beforeRouteLeave');
    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(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;
}

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

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

}
</style>