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-super-search
        v-model="params"
        :size="size"
        :dict="dict"
        :columns="SearchColumns"
        @reset="handleResetQuery"
        @submit="handleQuery"
      ></el-super-search>
    
    </div>
    <!-- 操作栏 -->
      <el-row 
        :gutter="10" 
        class="mb10"
        type="flex"
        justify="end"
      >
        <!-- 新增、修改、删除、复制 -->
        <el-col :span="1.5">
          <el-button-group>
            <el-button :size="size" @click="handleEdit">修改</el-button>
            <el-button :size="size" @click="handleRefresh">刷新</el-button>
          </el-button-group>
        </el-col>

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

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

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


      </el-row>

      <el-table 
        v-if="tableHeader.length"
        border 
        :data="taskList" 
        ref="materialTable" 
        max-height="525"
        @cell-dblclick="handledbClick" 
        :row-key="getRowKey"
        @selection-change="handleSelectionChange" 
        @select="handleSelect" 
        @select-all="handleSelectAll"
        :size="size"
      >
        <!--  -->
        <el-table-column type="selection" width="45" :reserve-selection="true" fixed/>
        <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
        >
          <template slot-scope="scope">
            <span v-if="h.apiUrl">{{scope.row[`${h.prop}Name`]}}</span>
            <el-checkbox 
              v-else-if="h.attribute == 'checkbox'"
              v-model="scope.row[h.prop]"
              disabled
              true-label="0" 
              false-label="2"
            ></el-checkbox>
            <el-dict-tag
              v-else-if="h.dictId"
              :value="scope.row[h.prop]"
              :options="dict.type[h.dictId]"
            ></el-dict-tag>

            <span v-else>{{ scope.row[h.prop] || '--' }}</span>
            <!-- {{ 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>

      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="handleQuery"
        style="height: 32px; padding: 0 !important; "
      />

    </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="size" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" :size="size" 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';
  import { SearchColumns,OtherDictColumns } from './columns';
  import { initDicts } from "@/utils/init.js";

  export default {
    name: "material-basic",
    dicts:[...initDicts([...SearchColumns,...OtherDictColumns])],
    // dicts:[],
    components: {
      ElSuperSearch: () => import("@/components/super-search/index.vue"),
      ElDictTag: () => import("@/components/DictTag/index.vue"),
      
    },
    data() {
      const params = this.$init.params(SearchColumns);
     
      return {
        failLoad: false,
        params:params,
        SearchColumns:SearchColumns,
        size:'mini',
        // 物料基本信息数据
        taskList: [],
        // 查询表单字段
        queryForm: {
          name: '',
          code: '',
          isEnable: '',
        },
        // 总条数
        total: 1,
        loading: false,
        importData: {
          show: false,
          list: []
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 50,
          code: null,
          name: null
        },
        // 表头
        tableHeader: [],
        // 多选数组
        checkedList: [],
        // 列表选中数据
        // checkedList: [],
        // 操作弹窗
        optionDialog: {
          show: false,
          op: ''
        },
      }
    },

    methods: {
      // 判读是否启用
      handleJudgeIsUsing() {
        return this.checkedList.length == 1 && this.checkedList[0].isEnable == '已启用';
      },
      
      // 新增
      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.checkedList = [];
        this.$refs.materialTable.clearSelection();
        this.getMaterialList();
      },
      // 重置查询条件
      handleResetQuery() {
        // for (const key in this.queryForm) {

        //   this.queryForm[key] = '';
        // }

        this.queryParams.pageNum = 1;
      
        this.queryParams.pageSize = 100;

        this.params = this.$init.params(SearchColumns);

        this.handleQuery();
      },
      // 刷新
      handleRefresh() {
        this.getMaterialList();
        // for (const key in this.queryForm) {
        //   this.queryForm[key] = '';
        // }
      },
     
      // 启用/停用
      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 {
          let params = {
            templateCode:'material_list',
            ...this.params,
            createTimeBegin: (this.params.createTimeQueue && this.params.createTimeQueue[0]) || '',
            createTimeEnd:(this.params.createTimeQueue && this.params.createTimeQueue[1]) || '',
            updateTimeBegin:(this.params.updateTimeQueue && this.params.updateTimeQueue[0]) || '',
            updateTimeEnd:(this.params.updateTimeQueue && this.params.updateTimeQueue[1]) || ''
          }
          this.download('/system/material/export', params, `物料基本信息${new Date().getTime()}.xlsx`);
        }

      },
      // 下载模板
      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;
      },
      // 获取物料列表信息
      async getMaterialList() {

        try {
          this.loading = true;
          let page = {
            pageNum: this.queryParams.pageNum,
            pageSize: this.queryParams.pageSize,
          }

          let param = {
            templateCode:'material_list',
            ...this.params,
            createTimeBegin: (this.params.createTimeQueue && this.params.createTimeQueue[0]) || '',
            createTimeEnd:(this.params.createTimeQueue && this.params.createTimeQueue[1]) || '',
            updateTimeBegin:(this.params.updateTimeQueue && this.params.updateTimeQueue[0]) || '',
            updateTimeEnd:(this.params.updateTimeQueue && this.params.updateTimeQueue[1]) || ''
          }

          console.log(param,'param--------------');

          let {code,data} = await  materialApi.materialList(param, page);
          
          if (code == 200) {
            this.taskList = data.tableBody.rows;
            this.total = data.tableBody.total;

          }
        } catch (error) {
          
        }finally{
          this.loading = false;
        }
       
        // 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) {

            // let dictList = []
            // res.data.forEach(item =>{
            //   if(item.dictId){
            //     // 字典
            //     dictList.push({
            //       item:{...item},
            //       attr:{
            //         dictName:item.dictId
            //       }
            //     });
                
            //   }
            // })
            // console.log(dictList,'dictList');
            // console.log(this,'this');
            // this.dict =[...initDicts([...SearchColumns,...dictList])]

            this.tableHeader = res.data;
          }
        })
      },


    },
    created() {
    },
    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 &&vm.$refs.materialTable.clearSelection();
        }
        vm.getTagList('material');
        vm.getMaterialList();
      });
    },
    // 进入详情，保留查询条件
    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;
      padding: 10px;

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