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

<!-- 物料信息基础档案 -->
<template>
  <div class="material-basic">

    <!-- 操作栏 -->
    <el-row :gutter="10" class="mb10">
      <!-- 新增、修改、删除、复制 -->
      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleInster">新增</el-button>
          <el-button size="small" @click="handleEdit">修改</el-button>
          <el-button size="small" @click="handleDel">删除</el-button>
          <el-button size="small" @click="handleCopy">复制</el-button>
        </el-button-group>
      </el-col>

      <!-- 查询、刷新、过滤 -->
      <el-col :span="1.5">
        <el-button-group>

          <el-dropdown size="small" @command="handleFilter">
            <el-button size="small">
              过滤<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="filterCondition('stop')">显示停用</el-dropdown-item>
              <el-dropdown-item :command="filterCondition('allot')">显示已分配</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-button size="small" @click="handleQuery">查询</el-button>
          <el-button size="small" @click="handleRefresh">刷新</el-button>

        </el-button-group>
      </el-col>

      <!-- 启用 -->
      <el-col :span="1.5">
        <el-button-group>
          <el-dropdown split-button size="small" @click="handleIsInvoke(true)" @command="handleIsInvoke">
            启用
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="isInvoke(true)">启用</el-dropdown-item>
              <el-dropdown-item :command="isInvoke(false)">停用</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-button-group>
      </el-col>

      <!-- 申请单查询 -->
      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleQueryForm">申请单查询</el-button>
        </el-button-group>
      </el-col>

      <!-- 导入导出 -->
      <el-col :span="1.5">
        <el-button-group>
          <el-button size="small" @click="handleImport">批量导入</el-button>
          <el-button size="small" @click="handleExport">批量导出</el-button>
        </el-button-group>
      </el-col>

    </el-row>


    <el-dialog title="操作提示" :visible.sync="optionDialog.show" width="30%" center top="50vh">
      <span>是否确认{{ optionDialog.op }}？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleOptionShow('option', false)">取 消</el-button>
        <el-button type="primary" @click="handleComfirmOption('cancal')">确 定</el-button>
      </span>
    </el-dialog>

    <el-card class="material-list">
      <el-table v-loading="loading" :data="taskList" @cell-dblclick="handledbClick"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column v-for="h in  tableHeader" v-if="h.show" :label="h.name" align="center" :prop="h.prop"
          show-overflow-tooltip />
      </el-table>

      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getMaterialList" />
    </el-card>

  </div>
</template>

<script>
import './style/index.scss';
import materialApi from '@/api/material/basic';

export default {
  name: "material-basic",
  data() {
    return {
      // 物料基本信息数据
      taskList: [],
      // 总条数
      total: 1,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null
      },
      // 表头
      tableHeader: [],
      // 多选数组
      checkedList: [],
      // 列表选中数据
      checkedList: [],
      // 操作弹窗
      optionDialog: {
        show: false,
        op: ''
      },
    }
  },

  methods: {
    // 新增
    handleInster() {
      this.$message({
        message: '物料只能通过申请审批增加，不能在节点直接录入！',
        type: 'warning'
      });
    },
    // 修改
    handleEdit() {
      console.log(this.checkedList, 'this.checkedList');
      if (this.checkedList.length == 1) {
        this.$router.push(`/material/basicFile/detail/${this.checkedList[0].id}`);
      } else if (this.checkedList.length > 1) {
        this.$message({
          message: '修改只能选择单个数据！',
          type: 'warning'
        });
      } else {
        this.$message({
          message: '请选择需要修改的信息！',
          type: 'warning'
        });
      }
    },
    // 删除
    handleDel() {
      console.log('删除');
    },
    // 复制
    handleCopy() {
      console.log('复制');
    },
    //查询 
    handleQuery() {

    },
    // 刷新
    handleRefresh() {
      console.log('刷新');
    },
    // 过滤
    handleFilter(e) {
      console.log(e, '过滤');
    },
    filterCondition(type) {
      return {
        type
      }
    },
    // 启用
    handleIsInvoke(e) {
      console.log('启用', e);
    },
    isInvoke(val) {
      return val;
    },
    // 申请单查询
    handleQueryForm() {
      console.log('申请单查询');
    },
    // 批量导入
    handleImport() {
      console.log('批量导入');
    },
    // 批量导出
    handleExport() {
      console.log('批量导出');
    },

    // 取消保存
    handleCancel() {
      console.log('取消保存');
      this.optionDialog.op = '取消';
      this.handleOptionShow('option', true);
    },
    // 保存修改
    handleSave() {
      console.log('保存修改');
    },
    // 保存修改并新增
    handleSaveAdd() {
      console.log('保存修改并新增');
    },
    // 更新导入
    handleUpdateImport() {
      console.log('更新导入');
    },


    // 操作弹窗显隐
    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) {
      console.log(e, '双击行');
      this.$router.push({
        path: `/material/basicFile/detail/${e.id}`,
      });
    },
    // 选中数据改变
    handleSelectionChange(list) {
      this.checkedList = list;
      this.$emit('headerOption', JSON.stringify({ checkedList: [...list] }))
    },
    // 获取物料列表信息
    getMaterialList(templateCode) {
      this.loading = true;
      materialApi.materialList({ templateCode }).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() {
    this.getMaterialList('material');
    this.getTagList('material');
  },

};
</script>


<style lang="scss">
.material-list {
  height: calc(100% - 42px);

  .el-card__body {
    height: 100%;
    box-sizing: border-box;

    .el-table {
      height: calc(100% - 70px);

      .el-table__body-wrapper {
        height: calc(100% - 137px);

        // .el-table__body {
        //   height: 100%;
        // }
      }
    }
  }
}
</style>