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 :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])],
  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>