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

<template>
  <div id="stockManagement_index">
    <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="6">
            <el-form-item label="入库单号" prop="sourceBizNo">
              <el-input size="small" class="w100" placeholder="请输入" v-model="formData.sourceBizNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入库类型" prop="bizType">
              <el-select style="width: 100%" filterable placeholder="请选择" v-model="formData.bizType" clearable>
                <el-option v-for="item in sceneState" :key="item.code" :value="item.code + ''"
                  :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物品编码" prop="categoryCode">
              <el-input size="small" class="w100" placeholder="请输入" v-model="formData.categoryCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物品名称" prop="categoryName">
              <el-input size="small" class="w100" placeholder="请输入" v-model="formData.categoryName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="status">
              <el-select filterable size="small" class="w100" v-model="formData.status" 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 :span="6">
            <el-form-item label="组织机构:" prop="deptIds">
              <auth-selection
                v-model="formData.deptIds"
                style="width: 100%"
              ></auth-selection>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="所属工厂" prop="factoryId">
              <el-select filterable placeholder="请选择" v-model="formData.factoryId" clearable class="w100">
                <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"></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 style="
              display: flex;
              justify-content: flex-end;
              margin-bottom: 10px;
            ">
            <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" height="calc(100vh-300px)" :pageSize="20" :datasource="datasource"
        @cell-click="cellClick">
        <template v-slot:selection="{ row }">
          <el-radio class="radio" v-model="currentRow.id" :label="row.id"><i></i></el-radio>
        </template>
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button icon="el-icon-plus" type="primary" @click="add">新建</el-button>
          <el-button icon="el-icon-edit-outline" type="primary" @click="priceMaintenance">单价维护</el-button>
          <!-- <el-button icon="el-icon-top" type="primary" @click="shelves"
            >上下架</el-button
          > -->
          <el-button icon="el-icon-receiving" type="primary" @click="outbound">出库</el-button>
          <!-- <el-button
            icon="el-icon-plus"
            v-if="clientEnvironmentId == 4"
            type="primary"
            @click="exportExcel"
            >导入</el-button
          > -->
        </template>
        <!-- 状态 -->
        <template v-slot:verifyStatus="{ row }">
          <span :class="status[row.verifyStatus]?.class">
            {{ status[row.verifyStatus]?.label }}
          </span>
        </template>
        <!-- 单号链接 -->
        <template v-slot:bizNo="{ row }">
          <el-link type="primary" @click="details(row)">
            {{ row.bizNo }}
          </el-link>
        </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="edit(row)"
            v-if="row.verifyStatus == 0 || row.verifyStatus == 3"
          >
            修改
          </el-link>
          <!-- <el-link v-if="row.verifyStatus == 2 && clientEnvironmentId == 3" type="primary" :underline="false"
            icon="el-icon-view" @click="quality(row)">
            质检
          </el-link> -->
          <el-link v-if="row.verifyStatus == 2" type="primary" :underline="false" icon="el-icon-sort-up"
            @click="details(row)">
            上架
          </el-link>
          <el-link v-if="row.verifyStatus == 2" type="primary" :underline="false" icon="el-icon-sort-down"
            @click="details(row)">
            下架
          </el-link>
          <el-link type="primary" v-if="row.verifyStatus == 0 || row.verifyStatus == 3" :underline="false"
            icon="el-icon-delete" @click="deleted(row)">
            删除
          </el-link>
        </template>
        <template v-slot:bizType="{ row }">
          {{ handleBizType(row.bizType) }}
        </template>
        <template v-slot:assetType="{ row }">
          {{ handleAssetType(row.extInfo.assetType) }}
        </template>
      </ele-pro-table>
    </el-card>
    <!--  <priceMaintenanceDialog ref="priceMaintenanceDialogRef" /> -->
  </div>
</template>

<script>
import storageApi from '@/api/warehouseManagement';
import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
/*  import priceMaintenanceDialog from './components/priceMaintenanceDialog.vue'; */
import { allCategoryLevel } from '@/api/classifyManage';

('@/view/warehouseManagement/stockManagement/components/priceMaintenanceDialog.vue');
import {
  warehousingType,
  sceneState,
  auditStatus,
  useDict
} from '@/utils/dict/index';
export default {
  components: {},
  data() {
    return {
      auditStatus,
      warehousingType,
      sceneState,
      codeList: [],
      factoryList: [],
      tableData: [],
      formData: {
        deptIds: '',
        categoryCode: '',
        categoryName: '',
        sourceBizNo: '',
        startTime: '',
        endTime: '',
        status: '',
        factoryId: '',
        time: []
        // 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' }
      ],
      currentRow: {},
      columns: [
        {
          slot: 'selection',
          label: '选择',
          width: 50,
          align: 'center'
        },
        {
          type: 'index',
          label: '序号',
          width: 50,
          align: 'center'
        },
        {
          prop: 'bizNo',
          label: '单号',
          align: 'center',
          slot: 'bizNo',
          showOverflowTooltip: true,
          width: 150
        },
        {
          prop: 'bizType',
          slot: 'bizType',
          label: '入库类型',
          align: 'center',
          showOverflowTooltip: true,
          width: 100
        },
        {
          prop: 'assetType',
          slot: 'assetType',
          label: '物品类型',
          align: 'center',
          showOverflowTooltip: true,
          width: 120
        },
        {
          prop: 'categoryNames',
          label: '物品名称',
          align: 'center',
          showOverflowTooltip: true,
          width: 150
        },
        {
          prop: 'categoryCodes',
          label: '物品编码',
          align: 'center',
          showOverflowTooltip: true,
          width: 150
        },
        {
          prop: 'sourceBizNo',
          label: '来源单据',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          prop: 'createUserName',
          label: '入库人',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          width: 160,
          prop: 'storageTime',
          label: '入库时间',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'verifyName',
          label: '审核人',
          align: 'center',
          showOverflowTooltip: true
        },
        // {
        //   prop: 'startTime',
        //   label: '开始时间',
        //   align: 'center',
        //   showOverflowTooltip: true
        // },
        {
          prop: 'outInStatus',
          label: '入库状态',
          align: 'center',
          showOverflowTooltip: true,
          width: 100,
          formatter: (row, column, cellValue) => {
            if (row.verifyStatus == 2) {
              return row.outInStatus == 1 ? '预入库' : row.outInStatus == 2 ? '部分入库' : row.outInStatus == 3 ? '已入库' : '';
            }
          }
        },
        {
          prop: 'verifyStatus',
          label: '状态',
          align: 'center',
          slot: 'verifyStatus',
          showOverflowTooltip: true,
          width: 100
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 250,
          align: 'center',
          slot: 'action',
          showOverflowTooltip: true
        }
      ]
    };
  },
  computed: {
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    }
  },
  mounted() {
    this.getTypeList();
    this.getFactoryList();
  },
  methods: {
    //获取工厂列表
    async getFactoryList() {
      const res = await warehouseDefinition.getFactoryarea({
        pageNum: 1,
        size: 9999,
        type: 1
      });
      this.factoryList = res.list;
    },
    // 单击获取id
    cellClick(row) {
      this.currentRow = row;
    },
    shelves() {
      console.log('上架');
    },
    unShelves() {
      console.log('下架');
    },
    priceMaintenance() {
      if (Object.keys(this.currentRow).length == 0) {
        return this.$message.error('请选择单据');
      } else {
        if (this.currentRow.verifyStatus == 2) {
          this.$router.push({
            path: '/warehouseManagement/stockManagement/priceMaintenance',
            query: {
              ids: this.currentRow.id
            }
          });
          /* this.$refs.priceMaintenanceDialogRef.open(this.currentRow.id); */
        } else {
          this.$message.error('该单据未审核通过');
        }
      }
    },
    async outbound() {
      if (Object.keys(this.currentRow).length == 0) {
        return this.$message.error('请选择单据');
      } else {
        if (this.currentRow.verifyStatus == 2) {
          const res = await storageApi.getInboundDetailsById(
            this.currentRow.id
          );
          const arr = [];
          for (const key in res.outInDetailList) {
            for (const k in res.outInDetailList[key]
              .outInDetailRecordRequestList) {
              arr.push({
                ...res.outInDetailList[key].outInDetailRecordRequestList[k]
              });
            }
          }
          let ids = arr.map((item) => item.id).join(',');
          this.$router.push({
            path: '/warehouseManagement/outgoingManagement/add',
            query: {
              ids,
              bizType: this.currentRow.bizType,
              assetType: this.currentRow.extInfo.assetType
            }
          });
        } else {
          this.$message.error('该单据未审核通过');
        }
      }
    },
    handleAssetType(r) {
      let arr = r.split(',');
      const filteredData = this.codeList.filter((item) =>
        arr.includes(item.dictCode)
      );
      return filteredData.map((item) => item.dictValue).join(',');
    },
    async getTypeList() {
      const { data } = await allCategoryLevel();
      this.codeList = data.map((item) => {
        return { dictCode: item.id, dictValue: item.name };
      });
    },
    submit(row) {
      this.$confirm('此操作将提交流程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = await storageApi.submitTwo({ outInId: row.id });
          if (data) {
            this.$message.success('流程发起成功！');
            this.getList();
          }
        })
        .catch(() => { });
    },
    handleBizType(code) {
      for (const key in this.sceneState) {
        if (this.sceneState[key].code == code) {
          return this.sceneState[key].label;
        }
      }
    },
    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 storageApi.getInboundList({
        pageNum: page,
        size: limit,
        type: 1,
        ...params
      });
      return res;
    },
    getAuditStatus: useDict(auditStatus),
    getList() {
      this.$refs.table.reload();
    },
    add(row) {
      const query = {};
      if (row?.id) {
        query.id = row.id;
      }
      this.$router.push({
        path: '/warehouseManagement/stockManagement/add'
        // query
      });
    },
    quality(row) {
      this.$router.push({
        path: '/warehouseManagement/stockManagement/quality',
        query: {
          id: row.id
        }
      });
    },
    exportExcel() {
      this.$router.push({
        path: '/warehouseManagement/stockManagement/add_export'
        // query
      });
    },
    edit(row) {
      this.$router.push({
        path: '/warehouseManagement/stockManagement/add',
        query: {
          detailId: row.id
        }
      });
    },
    details(row) {
      this.$router.push({
        path: '/warehouseManagement/stockManagement/details',
        query: {
          id: row.id,
          verifyStatus: row.verifyStatus
        }
      });
    },
    async deleted(row) {
      this.$confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = await storageApi.delete([row.id]);
          if (data.code == '0') {
            this.$message.success('删除成功!');
            this.getList();
          }
        })
        .catch(() => { });
    },
    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>
#stockManagement_index {
  height: calc(100vh - 96px);
  width: 100%;
  padding: 10px;
  box-sizing: border-box;

  // element-ui样式穿透
  :deep(.el-card) {
    height: 100%;

    .el-card__body {
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .ele-pro-table {
        flex: 1;
        display: flex;
        flex-direction: column;

        .el-table {
          flex: 1;
          // display: flex;
          // flex-direction: column;
          // .el-table__body-wrapper {
          //   flex: 1;
          // }
        }
      }
    }

    .el-form-item {
      margin-bottom: 5px !important;
    }
  }

  .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>