kd-aiot-frontend-wms/src/views/warehouseManagement/stocktaking/plan/components/assignDialog.vue

<template>
  <div>
    <el-dialog
      :title="`指派工单`"
      append-to-body
      :visible="visibleDialog"
      :before-close="closeWindows"
      width="80vw"
    >
      <div class="search_box">
        <el-form :model="formData" ref="formRef" label-width="110px">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="工单编号" prop="code">
                <el-input
                  disabled
                  v-model="formData.code"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="关联计划" prop="name">
                <el-input
                  disabled
                  v-model="formData.name"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓库" prop="warehouseName">
                <el-input
                  disabled
                  v-model="formData.warehouseName"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="执行部门" prop="executeGroupId">
                <deptSelect
                  v-model="formData.executeGroupId"
                  @changeGroup="searchDeptNodeClick"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="执行人员" prop="executorId">
                <el-select
                  v-model="formData.executorId"
                  @change="executorChange"
                  size="small"
                  style="width: 100%"
                  filterable
                >
                  <el-option
                    v-for="item in executorList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="flex_info">
        <div class="flex_right">
          <el-table
            ref="multipleTable"
            :data="tableData"
            border
            tooltip-effect="dark"
            height="455px"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
              align="center"
              fixed="left"
            >
            </el-table-column>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="物品编码"
              prop="info.categoryCode"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="物品名称"
              prop="info.categoryName"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              width="150"
              prop="info.categoryLevelPath"
              label="产品分类"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="批次号"
              prop="info.batchNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="牌号"
              prop="info.brandNum"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="型号"
              prop="info.categoryModel"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格"
              prop="info.specification"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="info.measureQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="info.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>
        </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 { getInventoryPlanDetailById } from '@/api/inventory';
  import deptSelect from '@/components/CommomSelect/new-dept-select.vue';
  import { getUserPage } from '@/api/system/organization';
  import { sendOrders } from '@/api/inventory';
  import { fieldModel } from '@/api/codeManagement';
  export default {
    props: {
      visibleDialog: {
        type: Boolean,
        default: false
      },
      planId: {
        type: String,
        default: ''
      }
    },
    watch: {
      tableData() {
        this.doLayout();
      },
      visibleDialog(val) {
        if (val) {
          this._getInformation();
        }
      }
    },
    components: { deptSelect },
    data() {
      return {
        formData: {},
        executorList: [],
        factoryList: [],
        factoryId: '',
        value: '',
        treeType: '',
        treeList: [],
        tableData: [],
        multipleSelection: [],
        pages1: { classificationIdList: [] },
        pages: {
          pageNum: 1,
          size: 15
        },
        total: 0,
        curType: '',
        classificationId: '',
        memoSelection: [],
        newColumns: [] // 动态表头
      };
    },
    created() {
      this.getFieldModel();
    },
    methods: {
      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];
        });
      },
      onConfirm() {
        if (this.multipleSelection.length > 0) {
          let params = {
            executeGroupId: this.formData.executeGroupId,
            executeGroupName: this.formData.executeGroupName,
            executorId: this.formData.executorId,
            executorName: this.formData.executorName,
            planDetailId: this.multipleSelection.map((item) => item.id),
            planId: this.planId
          };
          sendOrders(params).then(() => {
            this.$message.success('派单成功！');
            this.$emit('flushed');
            this.closeWindows();
          });
        } else {
          this.$message.error('请选择物品！');
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      closeWindows() {
        this.multipleSelection = [];
        this.$emit('update:visibleDialog', false);
      },
      async _getInformation() {
        getInventoryPlanDetailById(this.planId).then((data) => {
          this.formData = data;
          if(data.executeGroupId) {
            this.getUserList({ groupId: data.executeGroupId });
          }
          
          this.tableData = data.planDetailVOS;
        });
      }
    }
  };
</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_left {
      width: 202px;
      height: 434px;
      padding: 10px;
      border: 1px solid #d7d7d7;
      overflow-y: auto;
    }
    .flex_right {
      flex: 1;
      margin-left: 10px;
      overflow: hidden;
    }
  }
  .search_box {
    overflow: hidden;
  }
  .select-btn {
    text-align: right;
  }
  .right {
    text-align: right;
  }
  .mt10 {
    margin-top: 10px;
  }
</style>