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

<!-- 物料申请单 -->
<template>
  <div class="material-requisition">
    <!-- 操作栏 -->
    <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-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="handleSubmit(true)" @command="handleSubmit">
            提交
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="isSubmit(true)">提交</el-dropdown-item>
              <el-dropdown-item :command="isSubmit(false)">收回</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown split-button size="small" @click="handleApproval('approval')" @command="handleApproval">
            审批
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="approvalState('approval')">审批</el-dropdown-item>
              <el-dropdown-item :command="approvalState('cancel')">取消审批</el-dropdown-item>
              <el-dropdown-item :command="approvalState('view')">查看审批意见</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" v-if="isComponent == 'requestDetails'">附件管理</el-button>
          <!-- <el-button size="small">维护物料</el-button> -->

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

    <el-card class="request-list">
      <!-- v-loading="loading" @selection-change="handleSelectionChange" -->
      <el-table :data="taskList" @cell-dblclick="handledbClick" class="request-table">
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column label="主键" align="center" prop="id" />
        <el-table-column label="编码" align="center" prop="code" />
        <el-table-column label="名称" align="center" prop="name" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['system:task:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['system:task:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- v-show="total > 0" -->
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
import './style/index.scss';

import requestList from './list.vue';
import requestDetails from './details.vue';

import Store from '@/store/index'
export default {
  name: "material-requisition",
  components: {
    requestList,
    requestDetails,
  },
  data() {
    return {
      isComponent: 'requestList',
      // 头部参数
      headerParams: {
        // 是否编辑
        isEdit: false,
      },
      // 总条数
      total: 1,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null
      },
      // 物料基本信息数据
      taskList: [
        {
          id: 1,
          code: '001',
          name: '名称'
        }
      ],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null
      },
    };
  },
  created() {
    this.getList();
    console.log(Store.state.user, 'Store');
  },
  methods: {
    // 新增
    handleInster() {
      console.log('新增');
      this.isComponent = 'requestDetails';
    },
    // 修改
    handleEdit() {
      console.log('修改');
    },
    // 删除
    handleDel() {
      console.log('删除');
    },
    // 复制
    handleCopy() {
      console.log('复制');
    },
    // 查询
    handleQuery() {
      console.log('查询');
    },
    // 刷新
    handleRefresh() {
      console.log('刷新');
    },
    // 提交
    handleSubmit(val) {
      console.log(val, '提交');
    },
    isSubmit(type) {
      return type
    },
    // 审批
    handleApproval(val) {
      console.log(val, '审批');
    },
    approvalState(type) {
      return type
    },
    // 触发动态组件
    handleActionBar(params) {
      console.log(`需要更换至${params}~~~`);
      this.isComponent = params;
    },

    handleClick() { },
    /** 查询【请填写功能名称】列表 */
    getList() {

    },
    // 取消按钮
    cancel() {

      this.reset();
    },
    // 表单重置
    reset() {

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 双击行
    handledbClick(e) {
      console.log(e, '双击行');
      // console.log(this.$tab.openPage('测试', '/material/requisition/detail'), 'this.$tab');
      console.log(this.$router.push('/material/requisition/detail'), 'this.$tab');
      // this.$emit("actionBar", "requestDetails")
    },
    handleSelectionChange() { },

  }
};
</script>