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"
      :body-style="{
        height: '100%',
        padding: '10px ',
        display: 'flex',
        'flex-direction': 'column',
      }"
    >
      <!-- 查询条件 -->
      <el-super-search
        v-model="params"
        :size="size"
        :dict="dict"
        :columns="SearchColumns"
        @reset="handleResetQuery"
        @submit="handleQuery"
      ></el-super-search>

      <!-- 操作栏 -->
      <el-row
        :gutter="10"
        class="mb10"
        type="flex"
        justify="end"
        style="margin: 10px 0"
      >
        <!-- 新增、修改、删除、复制 -->
        <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">
          <is-using
            :size="size"
            :select-data="checkedList"
            @success="handleQuery"
          ></is-using>
        </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>

      <div
        class="el-super-ux-table"
        v-resize="resize"
        style="
          position: relative;
          display: flex;
          flex: 1;
          flex-direction: column;
          overflow: auto;
        "
      >
        <ux-grid
          v-if="tableHeader.length"
          border
          use-virtual
          keep-source
          beautify-table
          :size="size"
          :data="taskList"
          :height="tableHeight"
          ref="materialTable"
          @cell-dblclick="handledbClick"
          @select="handleSelect"
          @select-all="handleSelectAll"
          :header-row-style="{
            color: '#515a6e',
          }"
          style="flex: 1"
        >
          <
          <!-- 多选 -->
          <ux-table-column
            fixed="left"
            width="60"
            align="center"
            type="checkbox"
            resizable
            reserve-selection
            :column-key="rowKey"
          ></ux-table-column>
          <!-- 序号 -->
          <ux-table-column
            fixed="left"
            width="50"
            title="序号"
            type="index"
            align="center"
            class="is-index"
            resizable
          ></ux-table-column>
          <!-- <ux-table-column type="selection" width="45" :reserve-selection="true" fixed/>
          <ux-table-column type="index" title="序号" width="55" align="center"/> -->
          <ux-table-column
            width="150"
            v-for="h in tableHeader"
            v-if="h.show"
            :title="h.name"
            align="center"
            resizable
            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>
          </ux-table-column>
        </ux-grid>
        <div
          style="
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
          :style="{
            height: '50px',
          }"
        >
          <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="handleQuery"
            style="
              height: 32px;
              padding: 0 !important;
              flex: 1;
              overflow-x: auto;
            "
          />
        </div>
      </div>
    </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"),
    IsUsing: () => import("./isUsing/index.vue"),
  },
  data() {
    const params = this.$init.params(SearchColumns);

    return {
      failLoad: false,
      params: params,
      SearchColumns: SearchColumns,
      rowKey: "id",
      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: "",
      },
      resizeHeight: 0,
    };
  },
  computed: {
    tableHeight: {
      get() {
        return this.resizeHeight;
      },
      set() {},
    },
  },
  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = "",
          height = "";
        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          if (width !== style.width || height !== style.height) {
            binding.value(); // 关键
          }
          width = style.width;
          height = style.height;
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      },
    },
  },
  methods: {
    resize() {
      this.resizeHeight =
        document.getElementsByClassName("el-super-ux-table")[0].offsetHeight -
        55;
    },
    // 判读是否启用
    handleJudgeIsUsing() {
      return (
        this.checkedList.length == 1 && this.checkedList[0].isEnable == "已启用"
      );
    },

    // 修改
    handleEdit() {
      if (this.checkedList.length == 1) {
        this.$router.push({
          path: `/material/basicFile/detail/${this.checkedList[0].id}`,
          query: {
            isEdit: true,
          },
        });
      } else {
        this.$notify.warning({
          message: `${
            this.checkedList.length > 1
              ? "修改只能选择单个数据！"
              : "请选择需要修改的信息！"
          }`,
        });
      }
    },
    // 删除
    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.warning({
          message: `请选择需要删除的数据！`,
        });
      }
    },
    //查询
    handleQuery() {
      // 重新查询后需要清空列表选中的数据
      this.checkedList = [];
      this.$refs.materialTable.clearSelection();
      this.getMaterialList();
    },
    // 重置查询条件
    handleResetQuery() {

      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] = '';
      // }
    },

    // 批量导入
    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",
          ...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));
    },
    // 行数据勾选操作
    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",
          ...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) {
          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_list");
      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-basic {
  height: calc(100vh);
}
.material-list {
  // height: calc(100vh - 70px);
  height: 100%;

  .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;
}
::v-deep.uxbeautifyTableClass
  .elx-header--column
  .elx-resizable.is--line:before {
  height: 100%;
  background-color: #dfe6ec;
}
</style>