kd-aiot-frontend-wms/src/views/warehouseManagement/outgoingManagement/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-form :model="formData" ref="formName" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="出库时间" prop="time">
              <el-date-picker
                class="w100"
                size="small"
                v-model="formData.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item label="出库单号" prop="bizNo">
              <el-input
                size="small"
                class="w100"
                placeholder="请输入"
                v-model="formData.bizNo"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item label="领料人" prop="fromUser">
              <el-input
                size="small"
                class="w100"
                placeholder="请输入"
                v-model="formData.fromUser"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="4">
            <el-form-item label="状态" prop="verifyStatus">
              <el-select
                filterable
                size="small"
                class="w100"
                v-model="formData.verifyStatus"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in auditStatus"
                  :key="item.code"
                  :value="item.code"
                  :label="item.label"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <!-- <el-col :lg="6" :sm="8" :xs="8">
          <el-form-item label="创建时间" prop="time">
            <el-date-picker
              class="w100"
              size="small"
              v-model="formData.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker> </el-form-item
        ></el-col> -->
          <el-col :span="6">
            <div>
              <el-button icon="el-icon-refresh-left" size="small" @click="reset"
                >重置</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="search"
                >搜索</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-form>

      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button icon="el-icon-plus" type="primary" @click="add"
            >新建</el-button
          >
        </template>
        <!-- 单号链接 -->
        <template v-slot:bizNo="{ row }">
          <el-link @click="details(row)">
            {{ row.bizNo }}
          </el-link>
        </template>
        <!-- 状态 -->
        <template v-slot:verifyStatus="{ row }">
          <span :class="status[row.verifyStatus].class">
            {{ status[row.verifyStatus].label }}
          </span>
        </template>
        <!-- 工作流审批状态 -->
        <template v-slot:flowableStatus="{ row }">
          <span :class="status[row.flowableStatus].class">
            {{ status[row.flowableStatus].label }}
          </span>
        </template>

        <!-- 领料人 -->
        <template v-slot:createUserName="{ row }">
          <div class="deviceName">
            <p class="n-p">{{ row.createUserName }}</p>
            <!-- <p class="col">出库:{{ row.createTime }}</p> -->
          </div>
        </template>

        <template v-slot:bizType="{ row }">
          {{ handleBizType(row.bizType) }}
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="success"
            :underline="false"
            icon="el-icon-position"
            v-if="row.verifyStatus == 0 || row.verifyStatus == 3"
            @click="submit(row)"
          >
            提交
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="details(row)"
          >
            查看详情
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import outin from '@/api/warehouseManagement/outin';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';

  import { auditStatus, useDict, outputSceneState } from '@/utils/dict/index';

  // import { getPage } from '@/api/stockManagement'
  // import { deepClone } from '@/utils'
  export default {
    //   components: { tablePagination },
    data() {
      return {
        auditStatus,
        outputSceneState,
        tableData: [],
        fromUserList: [],
        formData: {
          bizNo: '',
          fromUser: '',
          time: [],
          verifyStatus: ''
          // type: 1
        },
        total: 0,
        status: [
          { label: '未审核', class: 'ele-text-info' },
          { label: '审核中', class: 'ele-text-primary' },
          { label: '审核通过', class: 'ele-text-success' },
          { label: '驳回', class: 'ele-text-danger' }
        ],
        columns: [
          {
            type: 'index',
            label: '序号',
            width: 50,
            align: 'center'
          },

          {
            prop: 'bizNo',
            label: '单号',
            align: 'center',
            slot: 'bizNo',
            showOverflowTooltip: true,
            width: 160
          },
          {
            prop: 'bizType',
            slot: 'bizType',
            label: '出库场景',
            align: 'center',
            showOverflowTooltip: true,
            width: 150
          },
          // {
          //   prop: 'verifyStatus',
          //   label: '状态',
          //   align: 'center',
          //   slot: 'verifyStatus',
          //   showOverflowTooltip: true,
          //   width: 120
          // },

          {
            prop: 'sourceBizNo',
            label: '来源单据',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'createUserName',
            label: '领料人',
            align: 'center',
            slot: 'createUserName',
            showOverflowTooltip: true,
            width: 200
          },
          {
            prop: 'createTime',
            label: '出库时间',
            align: 'center',
            showOverflowTooltip: true,
            width: 200
          },
          {
            prop: 'verifyStatus',
            slot: 'verifyStatus',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'verifyName',
            slot: 'verifyName',
            label: '审核人',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            slot: 'action',
            showOverflowTooltip: true
          }
        ]
      };
    },
    created() {
      this.getUser();
    },
    methods: {
      submit(row) {
        this.$confirm('此操作将提交流程, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            const data = await outin.outApprove({ outInId: row.id });
            if (data) {
              this.$message.success('流程发起成功！');
              this.getList();
            }
          })
          .catch(() => {});
      },
      handleBizType(code) {
        for (const key in this.outputSceneState) {
          if (this.outputSceneState[key].code == code) {
            return this.outputSceneState[key].label;
          }
        }
      },
      getUserName(id) {
        let obj = this.fromUserList.find((x) => x.id == id);
        return obj && obj.name;
      },
      async getUser() {
        let res22 = await warehouseDefinition.getUserPage({
          groupId: 1,
          size: 9999,
          page: 1
        });
        this.fromUserList = res22.list;
      },
      async datasource({ page, limit, where }) {
        const params = Object.assign({}, this.formData);
        if (params.time?.length) {
          params.startTime = params.time[0];
          params.endTime = params.time[1];
        }
        delete params.time;
        // params.bizStatus = 1;
        const res = await outin.list({
          pageNum: page,
          size: limit,
          bizStatus: 2,
          ...params,
          type: 2
        });
        return res;
      },
      getAuditStatus: useDict(auditStatus),
      getList() {
        this.$refs.table.reload();
      },
      add() {
        this.$router.push({
          path: '/warehouseManagement/outgoingManagement/add'
        });
      },
      details(row) {
        this.$router.push({
          path: '/warehouseManagement/outgoingManagement/details',
          query: {
            id: row.id
          }
        });
      },
      handleCurrentChange() {
        this.getList();
      },
      handleSizeChange() {
        this.formData.page = 1;
        this.getList();
      },
      search() {
        this.formData.page = 1;
        this.getList();
      },
      reset() {
        this.$refs.formName.resetFields();
        this.search();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .w100 {
    width: 100% !important;
  }
  .p20 {
    padding: 20px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .el-form {
    overflow: hidden;
  }
  .float-right {
    float: right;
    text-align: right;
    margin-right: 20px;
  }
  .right {
    text-align: right;
  }
  .col {
    color: #aaa;
  }
  .pr10 {
    padding-right: 10px;
  }
</style>