物料基础档案页面优化结构

src/views/material/basicFile/index-copy.vue

@@ -0,0 +1,731 @@
+<!-- 物料信息基础档案 -->
+<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-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="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"),
+    whlbButton: () => import("./wei-hu-lei-bie/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]) ||
+            "",
+        };
+
+        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>

src/views/material/basicFile/index.vue

@@ -1,253 +1,7 @@
-<!-- 物料信息基础档案 -->
-<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-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="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])],
@@ -256,50 +10,22 @@ export default {
     ElDictTag: () => import("@/components/DictTag/index.vue"),
     IsUsing: () => import("./isUsing/index.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 {
-      failLoad: false,
+      loading: false,
       params: params,
       SearchColumns: SearchColumns,
       rowKey: "id",
       size: "mini",
-      // 物料基本信息数据
+      page: page,
       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,
+      tableHeader: [],
     };
   },
   computed: {
@@ -339,160 +65,115 @@ export default {
         document.getElementsByClassName("el-super-ux-table")[0].offsetHeight -
         55;
     },
-    // 判读是否启用
-    handleJudgeIsUsing() {
-      return (
-        this.checkedList.length == 1 && this.checkedList[0].isEnable == "已启用"
-      );
-    },
+    // 列表
+    async useList() {
+      try {
+        this.loading = true;
 
-    // 修改
-    handleEdit() {
-      if (this.checkedList.length == 1) {
-        this.$router.push({
-          path: `/material/basicFile/detail/${this.checkedList[0].id}`,
-          query: {
-            isEdit: true,
+        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 },
           },
-        });
-      } 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: `请选择需要删除的数据！`,
-        });
+        } = await materialApi.materialList(param, this.page);
+
+        if (code == 200) {
+          this.taskList = rows;
+          this.page.total = total;
+        }
+      } catch (error) {
+      } finally {
+        this.loading = false;
       }
     },
-    //查询
-    handleQuery() {
-      // 重新查询后需要清空列表选中的数据
-      this.checkedList = [];
-      this.$refs.materialTable.clearSelection();
-      this.getMaterialList();
+    // 获取物料列表表头
+    async getTagList(templateCode) {
+      try {
+        let { code, data } = await materialApi.tagList({ templateCode });
+        if (code == 200) {
+          this.tableHeader = data;
+        }
+      } catch (error) {}
     },
-    // 重置查询条件
-    handleResetQuery() {
-      this.queryParams.pageNum = 1;
-
-      this.queryParams.pageSize = 100;
-
+    // 重置
+    useReset() {
       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;
+      this.page = this.$init.page();
+      this.useList();
     },
-    // 导入弹窗关闭前
-    handlefileDialogColse(done) {
-      this.importData.list = [];
-      done();
+    handleEdit() {
+      this.$router.push({
+        path: `/material/basicFile/detail/${this.checkedList[0].id}`,
+        query: {
+          isEdit: true,
+        },
+      });
     },
-    // 导入弹窗操作
-    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();
+    // 确认导入
+    handelImport(fileList) {
+      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",
-            });
+      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);
+              });
+            }
           }
-          break;
-      }
-    },
-
-    // 删除文件
-    handleFileRemove(file, fileList) {
-      // console.log('删除文件', file, 'file', fileList, 'fileList');
-      this.importData.list = fileList;
+          this.$notify({
+            message: res.data.msg,
+            type: res.data.flag ? "warning" : "success",
+          });
+        } else {
+          this.$notify({
+            message: res.msg,
+            type: res.code == 200 ? "success" : "warning",
+          });
+        }
+      });
     },
-    // 文件发生改变
-    handleChangeFile(file, fileList) {
-      this.importData.list = fileList;
+    // 模板下载
+    handleTemDownload() {
+      this.download("/system/material/download", {}, `物料基本信息模板.xlsx`);
     },
-
     // 批量导出
-    handleExport() {
+    useExport() {
       let ids = this.checkedList.length
         ? this.checkedList.map((i) => i.id)
         : [];
@@ -531,201 +212,216 @@ export default {
         );
       }
     },
-    // 下载模板
-    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) {
+    useDbClick(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]) ||
-            "",
-        };
-
-        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();
+  created() {
+    this.getTagList("material_list");
+    this.useList();
   },
 };
 </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;
-}
+<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>
 
-.mb-query >>> .el-select {
-  width: 90px;
-}
+      <!-- 启用 -->
+      <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>
 
-.mb-query >>> .el-scrollbar__wrap {
-  margin-bottom: -18px;
-}
-::v-deep.uxbeautifyTableClass
-  .elx-header--column
-  .elx-resizable.is--line:before {
-  height: 100%;
-  background-color: #dfe6ec;
+      <!-- <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>
+          </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>
+  </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>