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

<script>
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"),
    detailDrawer: () => import("./details.vue"),
    whlbButton: () => import("./wei-hu-lei-bie/index.vue"),
    BatchImport: () => import("@/components/BatchImport/index.vue"),
  },
  data() {
    const params = this.$init.params(SearchColumns);
    const page = this.$init.page();
    return {
      loading: false,
      params: params,
      SearchColumns: SearchColumns,
      rowKey: "id",
      size: "mini",
      page: page,
      taskList: [],
      checkedList: [],
      resizeHeight: 0,
      tableHeader: [],
    };
  },
  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;
    },
    // 列表
    async useList() {
      try {
        this.loading = true;

        this.checkedList = [];

        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]) ||
            "",
        };

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

        if (code == 200) {
          this.taskList = rows;
          this.page.total = total;
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    // 获取物料列表表头
    async getTagList(templateCode) {
      try {
        let { code, data } = await materialApi.tagList({ templateCode });
        if (code == 200) {
          this.tableHeader = data;
        }
      } catch (error) {}
    },
    // 重置
    useReset() {
      this.params = this.$init.params(SearchColumns);
      this.page = this.$init.page();
      this.useList();
    },
    handleEdit() {
      let { setVisible } = this.$refs.detailDrawer;
      setVisible(true);
      // this.$router.push({
      //   path: `/material/basicFile/detail/${this.checkedList[0].id}`,
      //   query: {
      //     isEdit: true,
      //   },
      // });
    },
    // 确认导入
    handelImport(fileList) {
      let formData = new FormData();

      formData.append("file", fileList[0].raw);
      materialApi.fileImport(formData).then((res) => {
        if (res.code == 200) {
          if (res.data.flag) {
            this.$modal.loading("加载中...");
            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.$modal.closeLoading();
                let { setVisible } = this.$refs.batchImport;
                setVisible(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",
          });
        }
      });
    },
    // 模板下载
    handleTemDownload() {
      this.download("/system/material/download", {}, `物料基本信息模板.xlsx`);
    },
    // 批量导出
    useExport() {
      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`
        );
      }
    },
    useDbClick(e) {
      this.checkedList = [{ ...e }];
      let { setVisible } = this.$refs.detailDrawer;
      setVisible(true);
      // this.$router.push({
      //   path: `/material/basicFile/detail/${e.id}`,
      // });
    },
    // 行数据勾选操作
    handleSelect(selection, row) {
      this.checkedList = selection;
    },
    //手动勾选全选
    handleSelectAll(selection) {
      this.checkedList = selection;
    },
  },
  created() {
    this.getTagList("material");
    this.useList();
  },
};
</script>

<template>
  <el-card
    v-loading="loading"
    :body-style="{
      height: '100%',
      padding: 0,
      display: 'flex',
      'flex-direction': 'column',
    }"
  >
    <!-- 查询条件 -->
    <el-super-search
      v-model="params"
      :size="size"
      :dict="dict"
      :columns="SearchColumns"
      @reset="useReset"
      @submit="useList"
    ></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
            type="primary"
            :size="size"
            @click="handleEdit"
            :disabled="checkedList.length !== 1"
            >修改</el-button
          >
          <el-button :size="size" @click="useList">刷新</el-button>
        </el-button-group>
      </el-col>

      <!-- 启用 -->
      <el-col :span="1.5">
        <is-using
          :size="size"
          :select-data="checkedList"
          @success="useList"
        ></is-using>
      </el-col>

      <!-- 导入导出 -->
      <el-col :span="1.5">
        <el-button-group>
          <BatchImport
            ref="batchImport"
            @import="handelImport"
            @temDownload="handleTemDownload"
            :fileSize="2"
            v-hasPermi="['system:material:import']"
          ></BatchImport>
          <!-- <el-button
            :size="size"
            @click="useImport"
            v-hasPermi="['system:material:import']"
            >批量导入</el-button
          > -->
          <el-button
            :size="size"
            @click="useExport"
            v-hasPermi="['system:material:export']"
            >批量导出</el-button
          >
        </el-button-group>
      </el-col>

      <el-col :span="1.5">
        <whlbButton :data="checkedList" :size="size"></whlbButton>
      </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="useDbClick"
        @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
          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
              :size="size"
              true-label="0"
              false-label="2"
            ></el-checkbox>
            <el-dict-tag
              v-else-if="h.dictId"
              :size="size"
              :value="scope.row[h.prop]"
              :options="dict.type[h.dictId]"
            ></el-dict-tag>

            <!-- <span v-else>{{ scope.row[h.prop] || "--" }}</span> -->
            <span v-else>{{ scope.row[h.prop] }}</span>
          </template>
        </ux-table-column>
      </ux-grid>
      <div
        style="
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
        :style="{
          height: '50px',
        }"
      >
        <pagination
          :total="page.total"
          :page.sync="page.pageNum"
          :limit.sync="page.pageSize"
          @pagination="useList"
          style="height: 32px; padding: 0 !important; flex: 1; overflow-x: auto"
        />
      </div>
    </div>

    <detailDrawer
      ref="detailDrawer"
      :select-data.sync="checkedList"
      @success="useList"
    ></detailDrawer>
  </el-card>
</template>
<style scoped lang="scss">
.el-card {
  width: calc(100% - 32px);
  height: calc(100vh - 32px);
  margin: 16px;
  padding: 16px;
  border-radius: 8px;
}
</style>