drp-ui/src/views/material/requisition/index copy.vue

<template>
  <div class="requisition" v-loading="failLoad">
    <div class="applyList" v-if="isList">
      <el-row :gutter="10" class="mb10">
        <el-col :span="1.5">
          <span style="font-size: 14px;margin-right: 5px;">单据编码</span>
          <el-input
            v-model="queryParams.billCode"
            size="small"
            placeholder="请输入单据编码查询"
            clearable
            style="width: 240px"
          />
        </el-col>

        <el-col :span="1.5">
          <span style="font-size: 14px;margin-right: 5px;">物料名称</span>
          <el-input
            v-model="queryParams.name"
            size="small"
            placeholder="请输入物料名称查询"
            clearable
            style="width: 240px"
          />
        </el-col>

        <el-col :span="1.5">
          <span style="font-size: 14px;margin-right: 5px;">单据状态</span>
          <el-select
            v-model="queryParams.status"
            size="small"
            placeholder="请选择单据状态"
            clearable
            style="width: 240px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="1.5">
          <el-button type="primary" size="small" plain @click="getList(queryParams)">查询</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button type="primary" size="small" plain>高级查询</el-button>
        </el-col> -->
        <el-col :span="1.5">
          <el-button type="primary" size="small" plain @click="reset">重置</el-button>
        </el-col>

      </el-row>

      <el-row :gutter="10" class="mb10">
        <el-col :span="1.5">
          <el-button type="primary" size="small" plain @click="newAdd">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="small" :disabled="checkedList.length != 1" @click="handleCopy">复制</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" size="small" plain
                     @click="download('/system/apply/material/download',{},'申请单模板.xlsx')">模板下载
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="small" @click="handleImport">批量导入</el-button>
        </el-col>
        <!-- 导入弹窗 -->
        <el-dialog 
          title="批量导入" 
          :visible.sync="importData.show" 
          width="35%" 
          center
          :before-close="handlefileDialogColse"
        >
          <div class="mb-import">
            <el-upload 
              accept=".xls, .xlsx" 
              ref="upload" 
              action="#" 
              :on-remove="handleFileRemove"
              :file-list="importData.list" 
              :auto-upload="false" 
              :on-change="handleChangeFile" 
              :limit="1"
              style="text-align: center;"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</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>
        <!-- <el-col :span="1.5">
          <el-button type="primary" size="small" plain>导入</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" size="small" plain>导出</el-button>
        </el-col> -->
        <!-- <el-col :span="1.5">
          <el-button type="primary" size="small" plain>批量提交</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" size="small" plain>批量删除</el-button>
        </el-col> -->
      </el-row>

      <el-card>
        <el-table
          :data="tableList"
          class="request-table"
          fit
          max-height="680"
          @selection-change="handleSelectionChange"
          @select="handleSelect"
        >
          <el-table-column type="selection" width="45"></el-table-column>
          <el-table-column label="序号" align="center" type="index" width="50"/>
          <el-table-column label="所属组织" align="center" width="200" prop="orgName"/>
          <el-table-column label="单据编码" align="center" width="200" prop="billCode"/>
          <el-table-column label="申请人" align="center" prop="createName"/>
          <el-table-column label="申请时间" align="center" width="150" prop="createTime"/>
          <el-table-column label="单据状态" align="center" prop="status" :formatter="statusJug"/>
          <!-- <el-table-column label="物料编码" align="center" width="150" prop="materialCode" /> -->
          <el-table-column label="物料名称" align="center" width="150" prop="name"/>
          <el-table-column label="创建人" align="center" prop="createName"/>
          <el-table-column label="创建时间" align="center" width="150" prop="createTime"/>
          <el-table-column label="最后修改人" align="center" width="120" prop="updateName"/>
          <el-table-column label="最后修改时间" align="center" width="150" prop="updateTime"/>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="check(scope.row)">查看</el-button>
              <el-button @click="edit(scope.row)" v-if="scope.row.status == 0 || scope.row.status == 3" type="text"
                         size="small">编辑
              </el-button>
              <!-- <el-button @click="commit(scope.row)" v-if="scope.row.status == 0 || scope.row.status == 3" type="text" size="small">提交</el-button> -->
              <el-button type="text" size="small" @click="deleteRow(scope.row)"
                         v-if="scope.row.status == 0 || scope.row.status == 3">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size=queryParams.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="text-align: center;">
        </el-pagination>
      </el-card>
    </div>

    <component :is="isComponent" v-model="isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="getList"
               v-if="!isList"/>
  </div>
</template>

<script>
  import addReq from './add.vue';
  import {getReqList, delReq, importData, fileImport} from '@/api/requisition/basic';
  import {saveAs} from "file-saver";
  import { blobValidate } from "@/utils/ruoyi";

  export default {
    name: 'requisition',
    components: {
      addReq
    },
    data() {
      return {
        failLoad: false,
        tableList: [],
        queryParams: {
          billCode: '',
          name: '',
          status: '',
          pageNum: 1,
          pageSize: 10
        },
        options: [{
          value: 0, label: '未提交'
        }, {
          value: 1, label: '审批中'
        }, {
          value: 2, label: '已完成'
        }, {
          value: 3, label: '已驳回'
        },],
        total: 0,
        // isComponent
        isComponent: 'addReq',
        isList: true,
        // 页面状态
        page: '',
        rowDetail: {},
        disable: false,
        checkedList: [],
        importData: {
          show: false,
          list: []
        },
      }
    },
    created() {

    },
    mounted() {
      this.getList(this.queryParams)
    },
    methods: {
      reset() {
        this.queryParams.billCode = ''
        this.queryParams.name = ''
        this.queryParams.status = ''
        this.queryParams.pageNum = 1
        this.getList(this.queryParams)
      },
      newAdd() {
        this.isList = false
        this.isComponent = 'addReq'
        this.page = 'add'
        this.disable = false
      },
      // 复制
      handleCopy() {
        this.isList = false;
        this.isComponent = 'addReq';
        this.page = 'copy';
        this.rowDetail = this.checkedList[0];
        this.disable = false;
      },
      // 导入
      handleImport() {
        this.importData.show = true
      },
      // 删除文件
      handleFileRemove(file, fileList) {
        console.log('删除文件', file, 'file', fileList, 'fileList');
        this.importData.list = fileList;
      },
      // 文件发生改变
      handleChangeFile(file, fileList) {
        this.importData.list = fileList;
      },
      // 导入弹窗操作
      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);
              importData(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) {

                      fileImport(param).then(res => {
                        console.log('res',res)
                        const isBlob = blobValidate(res);
                        if (isBlob) {
                          const blob = new Blob([res]);
                          saveAs(blob, '导入失败的物料申请单数据.xlsx');
                        }
                        this.failLoad = false;
                      })
                    }
                  }
                  this.$message({
                    message: res.data.msg,
                    type: res.data.flag ? 'warning' : 'success'
                  });
                } else {
                  this.$message({
                    message: res.msg,
                    type: res.code == 200 ? 'success' : 'warning'
                  });
                }
              })
            } else {
              this.$message({
                message: '请上传文件之后在确认！',
                type: 'warning'
              });
            }
            break;
        }
      },
      handlefileDialogColse(done){
        this.importData.list = [];
        done();
      },
      // Select框
      handleSelect(selection, row) {

        this.checkedList = selection;

        console.log(this.checkedList, 'this.checkedList');

      },
      getList(val) {
        console.log('val', val)
        getReqList(val).then(res => {
          if (res.code === 200) {
            this.tableList = res.rows
            this.total = res.total
          }
        })
        this.checkedList = [];
      },
      // 表格内状态栏判断值
      statusJug(row) {
        if (row.status == 0) {
          return '未提交'
        } else if (row.status == 1) {
          return '审批中'
        } else if (row.status == 2) {
          return '已完成'
        } else if (row.status == 3) {
          return '已驳回'
        }
      },
      //
      handleSelectionChange() {

      },
      check(row) {
        console.log('查看详情', row)
        this.isList = false
        this.isComponent = 'addReq'
        this.page = 'check'
        this.rowDetail = row
        this.disable = true
      },
      edit(row) {
        console.log('修改先加载详情', row)
        this.isList = false
        this.isComponent = 'addReq'
        this.page = 'edit'
        this.rowDetail = row
        this.disable = false
      },
      commit(row) {
        console.log('row', row)
      },
      deleteRow(row) {
        this.$confirm('是否删除此条数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delReq(row.id).then(res => {
            if (res.code === 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.getList(this.queryParams)
            }
          })
        }).catch(() => {
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.queryParams.pageSize = val
        this.getList(this.queryParams)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.queryParams.pageNum = val
        this.getList(this.queryParams)
      }
    }
  }
</script>

<style scoped lang="scss">
  .requisition {
    height: calc(100vh - 84px);
    padding: 12px;
    box-sizing: border-box;
  }
</style>