kd-aiot-frontend-wms/src/views/warehouseManagement/stocktaking/work/components/disposeDialog.vue

<template>
  <div>
    <el-dialog
      :title="`处理工单`"
      append-to-body
      :visible="visibleDialog"
      :before-close="closeWindows"
      width="80vw"
    >
      <div class="flex_info">
        <div class="flex_right">
          <div class="search_box">
            <el-input
              placeholder="请输入关键词"
              v-model="keyWord"
              class="input-with-select"
            >
              <el-button slot="append" icon="el-icon-search">搜索</el-button>
            </el-input>
            <el-button type="primary" @click="control">处理</el-button>
          </div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            border
            height="500px"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              :selectable="checkSelectable"
              width="55"
              align="center"
            >
            </el-table-column>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <!-- <el-table-column
              label="物品编码"
              prop="categoryCode"
              :show-overflow-tooltip="true"
            ></el-table-column> -->
            <el-table-column
              label="物品名称"
              prop="categoryName"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <!-- <el-table-column
              width="150"
              prop="categoryLevelPath"
              label="产品分类"
              :show-overflow-tooltip="true"
            ></el-table-column> -->
            <el-table-column
              label="批次号"
              prop="batchNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装编码"
              prop="packageNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装数量"
              prop="info.packingCountBase"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="单位"
              prop="info.packingUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <!-- <el-table-column
              label="牌号"
              prop="brandNum"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="型号"
              prop="categoryModel"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="型号"
              prop="categoryModel"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格"
              prop="specification"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="measureQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measureUnit"
              :show-overflow-tooltip="true"
            ></el-table-column> -->
            <el-table-column
              label="重量"
              prop="info.weight"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="重量单位"
              prop="info.weightUnit"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="仓库"
              prop="info.warehouseName"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            :page-size.sync="pages.size"
            :current-page.sync="pages.pageNum"
            @current-change="_getInformation"
            @size-change="_getInformation"
          >
          </el-pagination>
        </div>
        <div class="flex_right" style="margin-left: 10px">
          <el-table
            ref="table"
            :data="controlTableData"
            border
            height="600px"
            tooltip-effect="dark"
          >
            <el-table-column
              label="盘点状态"
              width="100"
              prop="controlStatus"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row }">
                <el-select v-model="row.controlStatus" placeholder="请选择">
                  <el-option
                    v-for="item in statusOption"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="数量"
              prop="count"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row }">
                <el-input
                  v-model="row.count"
                  placeholder="请输入内容"
                ></el-input> </template
            ></el-table-column>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="物品名称"
              prop="categoryName"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="批次号"
              prop="batchNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装编码"
              prop="packageNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装数量"
              prop="info.packingCountBase"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="单位"
              prop="info.packingUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="重量"
              prop="info.weight"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="重量单位"
              prop="info.weightUnit"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="仓库"
              prop="info.warehouseName"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="{ row, $index }">
                <el-button
                  @click="deleted(row, $index)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="select-btn">
        <el-button type="primary" @click="onConfirm">确定</el-button>
        <el-button @click="closeWindows">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getPlanDetailList } from '@/api/inventory';
  import deptSelect from '@/components/CommomSelect/new-dept-select.vue';
  import { getUserPage } from '@/api/system/organization';
  import { reportWork } from '@/api/inventory';
  import { fieldModel } from '@/api/codeManagement';
  export default {
    watch: {
      tableData() {
        this.doLayout();
      },
      visibleDialog(val) {
        if (val) {
          this._getInformation();
        }
      }
    },
    components: { deptSelect },
    data() {
      return {
        statusOption: [
          {
            label: '盘盈',
            value: '2'
          },
          {
            label: '丢失',
            value: '3'
          },
          {
            label: '破损',
            value: '4'
          }
        ],
        visibleDialog: false,
        planOrderId: '',
        keyWord: '',
        formData: {},
        tableData: [],
        controlTableData: [],
        executorList: [],
        factoryList: [],
        factoryId: '',
        value: '',
        treeType: '',
        treeList: [],
        selection: [],
        selectionIds: [],
        pages: {
          pageNum: 1,
          size: 10,
          keyWord: ''
        },
        total: 0,
        curType: '',
        classificationId: '',
        memoSelection: [],
        newColumns: [] // 动态表头
      };
    },
    created() {
      this.getFieldModel();
    },
    methods: {
      control() {
        if (this.selection.length > 0) {
          console.log(this.selection);
          console.log(this.selectionIds);
          let boolen = this.selection.every((item) =>
            this.selectionIds.includes(item.id)
          );
          if (this.selection.length > 0 && !boolen) {
            this.selection = this.selection.filter(
              (item) => !this.selectionIds.includes(item.id)
            );
            this.selectionIds = this.selectionIds.concat(
              this.selection.map((item) => item.id)
            );
            console.log('this.selection---------', this.selection);
            console.log('this.selectionIds---', this.selectionIds);
            this.controlTableData = this.controlTableData.concat(
              this.selection.map((item) => {
                return {
                  ...item
                };
              })
            );
            console.log('this.tableData---------', this.controlTableData);
          } else {
            this.$message.error('请选择正确的行');
          }
        } else {
          this.$message.error('请选择调出物品信息');
        }
      },
      checkSelectable(row) {
        return !this.selectionIds.includes(row.id);
      },
      executorChange(val) {
        this.formData.executorName = this.executorList.filter(
          (item) => item.id == val
        )[0].name;
      },
      //选择部门(搜索)
      searchDeptNodeClick(info, row) {
        this.formData.executorId = '';
        if (info) {
          const params = { groupId: info };
          this.getUserList(params);
          this.formData.executeGroupName = row.name;
        } else {
          this.formData.executeGroupId = null;
        }
      },
      // 获取审核人列表、巡点检人员
      async getUserList(params) {
        try {
          let data = { pageNum: 1, size: -1 };
          if (params) {
            data = Object.assign(data, params);
          }
          const res = await getUserPage(data);
          this.executorList = res.list;
        } catch (error) {}
      },
      doLayout() {
        let that = this;
        this.$nextTick(() => {
          that.$refs.multipleTable.doLayout();
        });
      },
      // 获取动态表头
      getFieldModel() {
        fieldModel({ fieldModel: 't_main_category' }).then((res) => {
          let newRes = res.map((m) => {
            return {
              prop: 'extField.' + m.prop,
              label: m.label,
              align: 'center',
              showOverflowTooltip: true
            };
          });
          this.newColumns = [...newRes];
        });
      },
      deleted(row, index) {
        this.controlTableData.splice(index, 1);
        this.selectionIds = this.selectionIds.filter((item) => item !== row.id);
      },
      onConfirm() {
        if (this.controlTableData.length > 0) {
          let isBoolen = this.controlTableData.every(
            (item) => item.controlStatus > 0 && item.count > 0
          );
          if (!isBoolen) {
            return this.$message.error('请选择盘点状态和数量！');
          }
          let arr = this.controlTableData.map((item) => {
            let key = null;
            switch (item.controlStatus) {
              case '2':
                key = 'surplusQuantity';
                break;
              case '3':
                key = 'loseQuantity';
                break;
              case '4':
                key = 'wornQuantity';
                break;
            }
            return {
              id: item.id,
              status: item.controlStatus,
              planOrderId: this.planOrderId,
              [key]: item.count
            };
          });
          console.log(arr);
          reportWork(arr).then(() => {
            this.$message.success('报工成功!');
            this.$emit('flushed');
            this.closeWindows();
          });
        } else {
          this.$message.error('请选择物品！');
        }
      },
      open(id) {
        this.planOrderId = id;
        this.visibleDialog = true;
      },
      handleSelectionChange(val) {
        this.selection = val;
      },
      closeWindows() {
        this.selection = [];
        this.visibleDialog = false;
      },
      async _getInformation() {
        getPlanDetailList({
          ...this.pages,
          planOrderId: this.planOrderId
        }).then((data) => {
          this.tableData = data.list;
          this.total = data.count;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
    background-color: #eee !important;
  }
  .flex_info {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    .flex_right {
      flex: 1;
      overflow: hidden;
      .search_box {
        display: flex;
        margin-bottom: 10px;
        > div {
          flex: 1;
        }
        > button {
          margin-left: 10px;
        }
      }
    }
  }
  .search_box {
    overflow: hidden;
  }
  .select-btn {
    text-align: right;
  }
  .right {
    text-align: right;
  }
  .mt10 {
    margin-top: 10px;
  }
</style>