wms / wms4_hefeijingke · Files

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <!--        <a-row>
                  <a-col :span="24">
                    <a-form-item label="入库时间(开始)">
                      <j-date :show-date="true" date-format="YYYY-MM-DD" placeholder="请选择入库时间"
                              class="query-group-cust" v-model="model.createTime_begin"></j-date>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-item label="入库时间(结束)">
                      <j-date :show-date="true" date-format="YYYY-MM-DD" placeholder="请选择入库时间"
                              class="query-group-cust" v-model="model.createTime_begin"></j-date>
                    </a-form-item>
                  </a-col>
                </a-row>-->
        <a-row v-if="!checkBox">
          <a-col :span="24">
            <a-form-model-item label="物料" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialCode">
              <a-select
                show-search
                placeholder="请选择物料"
                option-filter-prop="children"
                v-model="model.materialCode">
                <a-select-option v-for="item in materialList" :key="item.code" :value="item.code">
                  {{ item.code }} {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="!checkBox">
          <a-col :span="24">
            <a-form-model-item label="入库时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTimeBegin">
              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间"
                      class="query-group-cust" v-model="model.createTimeBegin"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间"
                      class="query-group-cust" v-model="model.createTimeEnd"></j-date>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <!--            <a-form-model-item :label="controlled ? '受控原因' : '解控原因'" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="controlledReason">
                          <a-textarea :rows="5" v-model="model.controlledReason" :placeholder="controlled ? '请输入受控原因' : '请输入解控原因'"/>
                        </a-form-model-item>-->
            <a-form-model-item v-if="!controlled" :label="'解控原因'" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="unControlledReason">
              <a-textarea :rows="5" v-model="model.unControlledReason" :placeholder="'请输入解控原因'"/>
            </a-form-model-item>
            <a-row v-if="controlled">
              <a-col :span="24">
                <a-form-model-item label="不良类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="defectiveType">
                  <a-row :gutter="16">
                    <a-col :span="12">
                      <a-select
                        v-model="selectedFirstLevel"
                        placeholder="请选择一级分类"
                        @change="handleFirstLevelChange"
                        allow-clear
                      >
                        <a-select-option v-for="(item, index) in firstLevelList" :key="index" :value="item">
                          {{ item }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                    <a-col :span="12">
                      <a-select
                        ref="defectiveTypeSelect"
                        :key="'second-level-' + selectedFirstLevel"
                        v-model="model.defectiveType"
                        placeholder="请选择二级分类"
                        :disabled="!selectedFirstLevel"
                        show-search
                        @change="handleSecondLevelChange"
                        :filter-option="filterSecondLevelOption"
                      >
                        <a-select-option v-for="item in currentSecondLevelList" :key="item.value" :value="item.value">
                          {{ item.secondLevelText }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                  </a-row>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>

import {postAction} from "@//api/manage";
import {getMaterialList, ajaxGetDictItems} from "@/api/api";
import moment from "moment/moment";

export default {
  name: 'DefectiveControlledModal',
  components: {},
  data() {
    return {
      title: '操作',
      width: 700,
      model: {},
      portList: [],
      visible: false,
      controlled: null,
      checkBox: null,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      // 选择用户查询条件配置
      selectUserQueryConfig: [],
      confirmLoading: false,
      materialList: [],
      defectiveTypeList: [], // 不良类型字典数据
      firstLevelList: [], // 一级分类列表
      secondLevelMap: {}, // 二级分类映射 {一级分类: [二级分类数据]}
      selectedFirstLevel: '', // 选中的一级分类
      validatorRules: {
        unControlledReason: [{required: true, message: '请输入解控原因'}],
        defectiveType: [{required: false, message: '请选择不良原因'}],
        createTimeBegin: [{required: true, message: '请选择开始时间'}],
        createTimeEnd: [{required: true, message: '请输入结束时间'}],
        materialCode: [{required: true, message: '请选择物料'}]
      },
      url: {
        defectiveControlled: "/inventory/inventoryDetail/defectiveControlled",
        defectiveUnControlled: "/inventory/inventoryDetail/defectiveUnControlled",
        defectiveControlled2: "/inventory/inventoryDetail/defectiveControlled2",
        defectiveUnControlled2: "/inventory/inventoryDetail/defectiveUnControlled2"
      }
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
    // 加载不良类型字典数据
    this.loadDefectiveTypeList()
  },
  watch: {
    // 监听字典数据加载完成，如果有初始值则解析（仅在初始化时）
    defectiveTypeList: {
      handler() {
        if (this.model.defectiveType && this.defectiveTypeList.length > 0 && !this.selectedFirstLevel) {
          this.initSelectedLevelsFromValue(this.model.defectiveType);
        }
      }
    }
  },
  computed: {
    // 当前一级分类的二级分类列表
    currentSecondLevelList() {
      if (!this.selectedFirstLevel) {
        console.log('计算属性: 没有选择一级分类');
        return []
      }
      const list = this.secondLevelMap[this.selectedFirstLevel] || [];
      console.log(`计算属性: 一级分类[${this.selectedFirstLevel}]的二级列表数量:`, list.length);
      return list;
    }
  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },
    edit() {
      this.visible = true
      this.model = {
        createTimeBegin: null,
        createTimeEnd: this.getEndDefaultDate()
      }
      this.getMaterialList();
      this.checkBox = false;
      // 重置选择
      this.selectedFirstLevel = '';
      this.model.defectiveType = undefined;
    },
    edit2(selectRecord) {
      if (selectRecord == null || selectRecord.length === 0) {
        this.$message.warning("至少选择一条记录")
        return
      }
      this.visible = true;
      this.model.invDetailIdList = selectRecord.map(x => x.id);
      this.checkBox = true;
      // 重置选择
      this.selectedFirstLevel = '';
      this.model.defectiveType = undefined;
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.$refs.form.clearValidate()
      this.model = {}
      // 重置选择
      this.selectedFirstLevel = '';
    },
    getMaterialList() {
      getMaterialList().then((res) => {
        if (res.success) {
          this.materialList = res.result;
        }
      });
    },
    // 加载不良类型字典数据
    loadDefectiveTypeList() {
      ajaxGetDictItems('defective_type', null).then((res) => {
        if (res.success) {
          this.defectiveTypeList = res.result || [];
          // 解析数据，分离一级和二级分类
          this.parseDefectiveTypeData();
        }
      });
    },
    // 解析不良类型数据，分离一级和二级分类
    parseDefectiveTypeData() {
      const firstLevelSet = new Set();
      const secondLevelMap = {};

      this.defectiveTypeList.forEach(item => {
        const text = item.text || item.label || '';
        const parts = text.split('-');

        if (parts.length >= 2) {
          const firstLevel = parts[0].trim(); // 一级分类
          const secondLevel = parts.slice(1).join('-').trim(); // 二级分类（处理可能包含多个"-"的情况）

          firstLevelSet.add(firstLevel);

          if (!secondLevelMap[firstLevel]) {
            secondLevelMap[firstLevel] = [];
          }

          secondLevelMap[firstLevel].push({
            value: item.value,
            text: text,
            secondLevelText: secondLevel
          });
        } else {
          // 如果没有"-"分隔符，作为一级分类处理
          firstLevelSet.add(text);
          if (!secondLevelMap[text]) {
            secondLevelMap[text] = [];
          }
          secondLevelMap[text].push({
            value: item.value,
            text: text,
            secondLevelText: text
          });
        }
      });

      this.firstLevelList = Array.from(firstLevelSet).sort();
      this.secondLevelMap = secondLevelMap;

      console.log('解析完成 - 一级分类:', this.firstLevelList);
      console.log('解析完成 - 二级映射:', this.secondLevelMap);
    },
    // 处理一级分类选择变化
    handleFirstLevelChange(value) {
      console.log('一级分类选择变化:', value);
      this.selectedFirstLevel = value;
      // 清空二级分类选择
      this.model.defectiveType = undefined;

      console.log('对应的二级分类列表:', this.secondLevelMap[value]);
      console.log('计算属性返回的列表:', this.currentSecondLevelList);
    },
    // 二级分类过滤函数
    filterSecondLevelOption(input, option) {
      const text = option.componentOptions.children[0].text || '';
      return text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    // 处理二级分类选择变化
    handleSecondLevelChange(value) {
      console.log('二级分类选择变化:', value);
      console.log('当前 model.defectiveType:', this.model.defectiveType);

      // 强制更新视图，确保 select 显示正确
      this.$forceUpdate();
    },
    // 根据选中的值反向解析一级和二级分类
    initSelectedLevelsFromValue(value) {
      const selectedItem = this.defectiveTypeList.find(item => item.value == value);
      if (selectedItem) {
        const text = selectedItem.text || selectedItem.label || '';
        const parts = text.split('-');

        if (parts.length >= 2) {
          const firstLevel = parts[0].trim();
          if (this.firstLevelList.includes(firstLevel)) {
            this.selectedFirstLevel = firstLevel;
          }
        } else {
          // 如果没有"-"分隔符，尝试匹配一级分类
          if (this.firstLevelList.includes(text)) {
            this.selectedFirstLevel = text;
          }
        }
      }
    },
    handleOk() {
      let url;
      if (this.checkBox) {
        url = this.controlled ? this.url.defectiveControlled2 : this.url.defectiveUnControlled2
      } else {
        url = this.controlled ? this.url.defectiveControlled : this.url.defectiveUnControlled
      }

      if (this.controlled){
        if(this.model.defectiveType == undefined){
          this.$message.warning("请选择不良原因")
          return
        }
      }
      
      // 确保表单状态同步
      this.$nextTick(() => {
        console.log('提交时 model.defectiveType:', this.model.defectiveType);

        this.$refs.form.validate(valid => {
          console.log('表单整体验证结果:', valid);
          if (valid) {
            postAction(url, this.model).then(res => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
                this.close()
              } else {
                this.$message.warning(res.message)
              }
            })
          } else {
            console.log('表单验证失败，检查各字段值:', JSON.stringify(this.model));
          }
        })
      });
    },
    getBeginDefaultDate() {
      let tempDate = new Date()
      tempDate.setDate(tempDate.getDate())
      return moment(tempDate).utcOffset(480).format('YYYY-MM-DD HH:mm:ss');
    },
    getEndDefaultDate() {
      let tempDate = new Date()
      //tempDate.setDate(tempDate.getDate())
      // return moment(tempDate).utcOffset(480).format('yyyy-MM-dd HH:mm:ss');
      return moment(tempDate).utcOffset(480).format('YYYY-MM-DD HH:mm:ss');
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>