kd-aiot-frontend/src/views/material/product/detail.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-form
        label-width="100px"
        ref="manageForm"
        :model="form"
        :rules="rules"
      >
        <headerTitle title="基本信息">
          <el-button @click="cancel">返回</el-button>
          <el-button type="primary" @click="submit" :loading="loading"
            >保存
          </el-button>
        </headerTitle>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="分类" prop="categoryLevelName">
              <el-input
                v-model="form.categoryLevelName"
                @click.native="openCategory"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="编码" prop="code">
              <!-- <el-input
                v-if="ruleCode == '自定义'"
                v-model="form.code"
                readonly
                @click.native="openCode"
                :disabled="status == 0"
              /> -->
              <el-input v-model="form.code" :disabled="status == 0">
                <template slot="append" v-if="status != 0">
                  <el-link :underline="false" @click.native="getCodeOpen"
                    >申请编码
                  </el-link></template
                >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="存货类型:" prop="attributeType">
              <!-- <DictSelection
                dictName="存货类型"
                clearable
                v-model="form.attributeType"
              >
              </DictSelection> -->
              <el-select
                v-model="form.attributeType"
                filterable
                class="ele-block"
              >
                <el-option
                  v-for="item in attributeList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <div>
              <el-form-item label="属性类型" prop="componentAttribute">
                <el-select
                  style="width: 100%"
                  v-model="form.componentAttribute"
                  filterable
                  multiple
                >
                  <el-option
                    v-for="item in lbjtList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-form-item
                label="生产类型"
                prop="produceType"
                :rules="{
                  required:
                    form.categoryLevelPathId.substring(0, 1) == 9 ||
                    form.componentAttribute.includes(1) == 1
                      ? true
                      : false,
                  message: '请选择生产类型',
                  trigger: 'change'
                }"
              >
                <el-select
                  style="width: 100%"
                  v-model="form.produceType"
                  filterable
                  @change="produceTypeChange"
                >
                  <el-option
                    v-for="item in produceTypeList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="8">
            <!-- v-if="
            [1, 23, 9, 28].includes(
              Number(categoryLevelPathId || $route.query.rootTreeId)
            )
          " -->
            <el-form-item
              label="加工类型"
              prop="isConsumable"
              :rules="{
                required: mandatoryFieldList.includes('isConsumable'),
                message: '请选择加工类型',
                trigger: 'change'
              }"
            >
              <el-select
                v-model="form.isConsumable"
                style="width: 100%"
                @change="changeConsumable"
              >
                <el-option :value="1" label="批量"></el-option>
                <el-option :value="0" label="单件"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="牌号"
              prop="brandNum"
              :rules="{
                required: mandatoryFieldList.includes('brandNum'),
                message: '请输入牌号',
                trigger: 'change'
              }"
            >
              <el-input v-model="form.brandNum" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="型号"
              prop="modelType"
              :rules="{
                required: mandatoryFieldList.includes('modelType'),
                message: '请输入型号',
                trigger: 'change'
              }"
            >
              <el-input v-model="form.modelType" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="规格"
              prop="specification"
              :rules="{
                required: mandatoryFieldList.includes('specification'),
                message: '请输入规格',
                trigger: 'change'
              }"
            >
              <el-input v-model="form.specification" @input="inputSpe" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="计量类型"
              prop="measureType"
              :rules="{
                required: mandatoryFieldList.includes('measureType'),
                message: '请选择计量类型',
                trigger: 'change'
              }"
            >
              <el-select
                v-model="form.measureType"
                style="width: 100%"
                @change="changeMeasureType"
              >
                <el-option
                  v-for="item in measureTypeList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计量单位" prop="measuringUnit">
              <DictSelection
                dictName="计量单位"
                clearable
                v-model="form.measuringUnit"
                @change="changeUnit"
              >
              </DictSelection>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="重量单位" prop="weightUnit">
              <DictSelection
                dictName="重量单位"
                clearable
                v-model="form.weightUnit"
                @change="changeWeightUnit"
              >
              </DictSelection>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="包装单位" prop="packingUnit">
              <DictSelection
                dictName="包装单位"
                clearable
                v-model="form.packingUnit"
                @change="changeUnit"
              >
              </DictSelection>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="面积" prop="area">
              <el-input v-model="form.area" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="面积单位" prop="areaUnit">
              <DictSelection
                dictName="计量单位"
                clearable
                v-model="form.areaUnit"
              >
              </DictSelection>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="图号/件号"
              prop="imgCode"
              :rules="{
                required: mandatoryFieldList.includes('imgCode'),
                message: '请输入图号/件号',
                trigger: 'change'
              }"
            >
              <el-input v-model="form.imgCode" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="毛重"
              prop="roughWeight"
              :rules="{
                required: mandatoryFieldList.includes('roughWeight'),
                message: '请输入毛重',
                trigger: 'change'
              }"
            >
              <div class="form-line">
                <el-input v-model="form.roughWeight" @input="handleInput2" />
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <!-- 计量类型为重量 净重必填 -->
            <el-form-item
              label="净重"
              prop="netWeight"
              :rules="{
                required: form.measureType == 2,
                trigger: ['blur', 'change'],
                message: '请输入净重'
              }"
            >
              <div class="form-line">
                <el-input v-model="form.netWeight" @input="handleInput3" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="体积"
              prop="volume"
              :rules="{
                required: mandatoryFieldList.includes('volume'),
                message: '请输入体积',
                trigger: 'change'
              }"
            >
              <div class="form-line">
                <el-input
                  v-model="form.volume"
                  style="width: calc(100% - 100px)"
                />
                <!-- @input="handleInput1" -->
                <DictSelection
                  dictName="体积单位"
                  clearable
                  v-model="form.volumeUnit"
                  style="width: 100px"
                >
                </DictSelection>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="级别"
              prop="level"
              :rules="{
                required: mandatoryFieldList.includes('level'),
                message: '请选择级别',
                trigger: 'change'
              }"
            >
              <template>
                <el-select
                  style="width: 100%"
                  v-model="form.level"
                  placeholder="请选择"
                  @change="levelChange"
                >
                  <el-option
                    v-for="item in levelOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="机型"
              prop="modelKey"
              :rules="{
                required: mandatoryFieldList.includes('modelKey'),
                message: '请选择机型',
                trigger: 'change'
              }"
            >
              <DictSelection
                dictName="物品机型"
                clearable
                v-model="form.modelKey"
                multiple
                filterable
                allow-create
                default-first-option
              >
              </DictSelection>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="颜色"
              prop="colorKey"
              :rules="{
                required: mandatoryFieldList.includes('colorKey'),
                message: '请选择颜色',
                trigger: 'change'
              }"
            >
              <DictSelection
                dictName="物品颜色"
                clearable
                v-model="form.colorKey"
                multiple
                filterable
                allow-create
                default-first-option
              >
              </DictSelection>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <template>
                <el-switch
                  v-model="form.isEnabled"
                  :active-text="form.isEnabled == 1 ? '启用' : '停用'"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </template>
            </el-form-item>
          </el-col>

          <!-- :rules="{
                  required:
                    form.categoryLevelPathId.substring(0, 1) == 9 ||
                    form.componentAttribute.includes(1) == 1
                      ? true
                      : false,
                  message: '请选择生产类型',
                  trigger: 'change'
                }" -->
          <el-col :span="8" v-for="(f, idx) in fileList" :key="idx">
            <el-form-item
              :label="f.label"
              :prop="'extField.' + f.prop"
              :rules="{
                required: mandatoryFieldList.includes(f.prop),
                message: '请输入',
                trigger: 'change'
              }"
            >
              <template>
                <div class="form-line">
                  <component
                    :is="f.tagType"
                    v-model="form.extField[f.prop]"
                    :disabled="f.extAttribute?.disabled"
                    clearable
                    :isProhibit="
                      f.modelType == 'dict' ? f.extAttribute?.disabled : false
                    "
                    :dictName="f.modelType == 'dict' ? f.label : ''"
                  ></component>
                </div>
              </template>
            </el-form-item>
          </el-col>
          <template v-if="industryAttribute != 2">
            <el-col :span="8">
              <el-form-item label="性味与归经">
                <el-input v-model="form.propertiesChannelTropism" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="功能与主治">
                <el-input v-model="form.actionsAndUses" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用法与用量">
                <el-input v-model="form.usageAndDosage" />
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="8" v-if="clientEnvironmentId == 5">
            <el-form-item label="需要序列号">
              <el-radio-group v-model="form.extTagField.needProductSequence">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物联产品Key">
              <el-input v-model="form.iotProductKey" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="产品图片">
              <ImgUpload ref="imgUploadRef" v-model="form.imgUrl" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <headerTitle title="标签"></headerTitle>
      <!-- {{ form.extTagField }} -->
      <el-form label-width="100px">
        <el-form-item label="是否消耗品">
          <el-radio-group v-model="form.extTagField.isConsumables">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>

    <!--  自定义编码 -->
    <!-- <CodeDialog
      ref="codeRefs"
      v-if="codeShow"
      @close="codeShow = false"
      @chooseCode="chooseCode"
    /> -->
    <!-- 分类选择弹窗 -->
    <CategoryDialog ref="categoryRefs" @chooseCategory="confirmCategory" />
    <!-- 仓储配置 -->
    <WarehouseInfo
      ref="warehouseRefs"
      v-if="isShow"
      :form="categoryWms"
      :measuringUnit="form.measuringUnit"
      :packingUnit="form.packingUnit"
      :packageDispositionVOList="packageDispositionVOList"
      @change="changePackagingSpecification"
    />
    <!-- 销售配置 -->
    <SalesInfos ref="salesRefs" :form="categorySales" />
    <!-- 采购信息 -->
    <PurchasingInfo ref="PurchasingInfoRefs" :form="categoryPurchase" />
    <!-- 生产信息 -->
    <ProductionInfo ref="productionRefs" :form="categoryMes" />
    <!-- 计划 -->
    <PlanInfo ref="planRefs" :form="categoryAps" />
    <!-- 质量配置 -->

    <QualityInfo ref="qualityRefs" :form="categoryQms" />
    <!-- 舟皿信息 -->
    <BoatInfo :form="categoryPallet" />
    <!-- 周转车信息 -->
    <TurnoverInfo ref="turnoverRefs" :form="categoryVehicle" />
    <!-- 模具信息 -->
    <MoldInfo ref="moldRefs" :form="categoryMold" />
    <!-- 备注信息 -->
    <RemarkInfo ref="remarkRefs" :form="remarkform" />
    <!-- 关联信息 -->
    <linkMsg
      ref="linkMsgRef"
      :id="$route.query.id"
      :categoryLevelId="form.categoryLevelId"
      :categoryLevelGroupId="form.categoryLevelGroupId"
      :code="form.code"
    />
    <!-- 申请编码 -->

    <GetCodeDialog ref="GetCodeDialogRef" @setCode="setCode"></GetCodeDialog>
  </div>
</template>

<script>
  import SalesInfos from './components/SalesInfos.vue';
  import PurchasingInfo from './components/PurchasingInfo.vue';
  import GroupDialog from './components/GroupDialog.vue';
  // import CodeDialog from './components/codeDialog.vue';
  import CategoryDialog from './components/CategoryDialog.vue';
  import WarehouseInfo from './components/WarehouseInfo.vue';
  import ProcureInfo from './components/ProcureInfo.vue';
  import ProductionInfo from './components/ProductionInfo.vue';
  import PlanInfo from './components/PlanInfo.vue';
  import SalesInfo from './components/SalesInfo.vue';
  import QualityInfo from './components/QualityInfo.vue';
  import BoatInfo from './components/BoatInfo.vue';
  import TurnoverInfo from './components/TurnoverInfo.vue';
  import MoldInfo from './components/MoldInfo.vue';
  import RemarkInfo from './components/RemarkInfo.vue';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import personSelect from '@/components/CommomSelect/person-select.vue';
  import linkMsg from './components/link-msg.vue';
  import { getDetails } from '@/api/classifyManage/itemInformation';
  import { getByCode } from '@/api/system/dictionary-data';
  import {
    getCode as getCodeApi,
    rootCategoryCode,
    fieldModel,
    checkExist
  } from '@/api/codeManagement';
  // /main/category/checkExist
  import { addMaterial } from '@/api/material/list.js';
  import { deepClone } from '@/utils/index';
  import { finishPageTab, reloadPageTab } from '@/utils/page-tab-util';
  import { produceTypeList } from '@/enum/dict.js';
  import { copyObj } from '@/utils/util';
  import { parameterGetByCode } from '@/api/system/dictionary/index.js';
  import GetCodeDialog from '@/components/addDoc/getCode.vue';
  import { getCode, listCode } from '@/components/addDoc/api/index.js';
  import ImgUpload from '@/components/upload/imgUploadNew.vue';
  const defCategoryQms = [
    {
      categoryId: '',
      checkDepart: null,
      sampleProportion: null,
      sampleProportionUnit: '%',
      checkPerson: null,
      checkProportion: null,
      createTime: '',
      createUserId: '',
      inspectionStandards: null,
      isComeCheck: 0,
      // level: '',
      levelItem: null,
      netWeight: null,
      qualityTemplateIds: [],
      dataType: 1
    },
    {
      categoryId: '',
      checkDepart: null,
      sampleProportion: null,
      sampleProportionUnit: '%',
      checkPerson: null,
      checkProportion: null,
      createTime: '',
      createUserId: '',
      inspectionStandards: null,
      isComeCheck: 0,
      // level: '',
      levelItem: null,
      netWeight: null,
      qualityTemplateIds: [],
      dataType: 2
    },
    {
      categoryId: '',
      checkDepart: null,
      sampleProportion: null,
      sampleProportionUnit: '%',
      checkPerson: null,
      checkProportion: null,
      createTime: '',
      createUserId: '',
      inspectionStandards: null,
      isComeCheck: 0,
      // level: '',
      levelItem: null,
      netWeight: null,
      qualityTemplateIds: [],
      dataType: 3
    }
  ];

  export default {
    name: 'product',
    components: {
      SalesInfos,
      PurchasingInfo,
      linkMsg,
      GroupDialog,
      deptSelect,
      personSelect,
      WarehouseInfo,
      ProcureInfo,
      ProductionInfo,
      PlanInfo,
      SalesInfo,
      QualityInfo,
      BoatInfo,
      TurnoverInfo,
      MoldInfo,
      RemarkInfo,
      CategoryDialog,
      // CodeDialog,
      GetCodeDialog,
      ImgUpload
    },
    data() {
      return {
        isShow: true,
        produceTypeList,
        packagingSpecificationList: [],
        loading: false,
        productImgs: [],
        measureTypeList: [
          {
            label: '数量',
            value: 1
          },
          {
            label: '重量',
            value: 2
          },
          {
            label: '体积',
            value: 3
          },
          {
            label: '容积',
            value: 4
          },
          {
            label: '面积',
            value: 5
          }
        ],
        levelOptions: [
          {
            label: '特级',
            value: '特级'
          },
          {
            label: '一级',
            value: '一级'
          },
          {
            label: '二级',
            value: '二级'
          },
          {
            label: '三级',
            value: '三级'
          }
        ],

        isUpdate: 0,
        form: {
          categoryLevelGroupName: '',
          iotProductKey: '',
          imgUrl: [],
          propertiesChannelTropism: '',
          usageAndDosage: '',
          actionsAndUses: '',
          componentAttribute: [],
          categoryLevelName: '',
          isConsumable: 0,
          isEnabled: 1,
          measuringUnit: '',
          netWeight: '',
          attributeType: 1,
          weightUnit: '',
          packingUnit: '',
          areaUnit: '',
          area: '',
          colorKey: [],
          modelKey: [],
          extField: {},
          // isConsumables:2,
          extTagField: {
            isConsumables: 0,
            needProductSequence: 0
          }
        },
        lbjtList: [
          {
            label: '自制件',
            value: 1
          },
          {
            label: '采购件',
            value: 2
          },
          {
            label: '外协件',
            value: 3
          },
          {
            label: '受托件',
            value: 4
          }
        ],
        attributeList: [],
        remarkform: {
          remarkAttach: [],
          remark: ''
        },
        categorySales: {},
        categoryPurchase: { purchaseMultiplier: 1, measuringUnit: '' },
        categoryAps: {},
        categoryMes: { productionDays: '1' },
        categoryMold: {},
        categoryPallet: {},
        categoryQms: [...copyObj(defCategoryQms)],
        categoryVehicle: {},
        categoryWms: {
          isUnpack: 0,
          isWarn: 1,
          inventoryMode: '',
          secureInventory: '1',
          minInventory: '1',
          maxInventory: '1'
        },
        packageDispositionVOList: [],
        categoryLevelPathId: null,

        dictList: [
          {
            label: '加工',
            value: 1
          },
          {
            label: '装配',
            value: 3
          }
        ],
        fileList: [],
        // 表单验证规则

        PathInfo: {},
        id: null,

        ruleCode: null,
        codeShow: false,

        status: null,
        isNetWeight: 0,
        mandatoryFieldList: []
      };
    },
    watch: {
      '$route.query.id': {
        handler(id) {
          console.log(id, 'id');
          if (id) {
            this._getDetails();
          } else {
            let { lyType } = this.$route.query;

            let arrId = '';
            if (lyType == 'wp') {
              arrId = 3;
            }
            if (lyType == 'cp') {
              arrId = 1;
            }

            this.form = {
              categoryLevelGroupName: '',
              // categoryLevelName: '',
              componentAttribute: [],
              isConsumable: 0,
              attributeType: arrId,
              measuringUnit: '',
              netWeight: '',
              weightUnit: '',
              packingUnit: '',
              areaUnit: '',
              area: '',
              colorKey: [],
              modelKey: [],
              extField: {},
              extTagField: {
                isConsumables: 0,
                needProductSequence: 0
              },
              measureType: 1,
              isEnabled: 1
            };

            this.isUpdate = 0;

            this.categorySales = {};
            this.purchaseInfo = {};
            this.remarkform = {
              remarkAttach: [],
              remark: ''
            };
            this.categoryAps = {};
            this.categoryMes = {
              productionDays: '20',
              isCompleteSet: 0,
              isModify: 0,
              isRework: 0,
              isRematerial: 0,
              isByProduct: 0,
              isWaste: 0,
              isDefective: 0
            };
            this.categoryMold = {};
            this.categoryPallet = {};
            this.categoryQms = [...copyObj(defCategoryQms)];

            this.categoryVehicle = {};
            this.categoryWms = {
              isUnpack: 0,
              isWarn: 1,
              inventoryMode: this.form.isConsumable,
              minPackageCell: '',
              secureInventory: '10',
              minInventory: '10',
              maxInventory: '10'
            };
            this.packageDispositionVOList = [];
            this.categoryLevelPathId = null;

            // this.dictList = [];

            this.fileList = [];
          }
        },
        deep: true,
        immediate: true
      }
      // 同步图片id到表单模型（用于保存）
      // productImgs: {
      //   handler(val) {
      //     this.form.imgurl = val
      //       .map((img) => img.id)
      //       .filter(Boolean)
      //       .join(',');
      //   },
      //   immediate: true
      // },
    },
    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      rules() {
        return {
          measureType: [
            { required: true, message: '请选择计量类型', trigger: 'change' }
          ],
          categoryLevelGroupName: [
            { required: true, message: '请选择所属物料组', trigger: 'change' }
          ],
          code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          specification: [
            {
              required: this.clientEnvironmentId == 10 ? true : false,
              message: '请输入规格',
              trigger: 'blur'
            }
          ],
          modelType: [
            {
              required: this.clientEnvironmentId == 10 ? true : false,
              message: '请输入型号',
              trigger: 'blur'
            }
          ],
          'extField.layBy': [
            {
              required: this.clientEnvironmentId == 10 ? true : false,
              message: '请输入贮藏',
              trigger: 'blur'
            }
          ],

          componentAttribute: [
            { required: true, message: '请选择属性类型', trigger: 'change' }
          ],
          attributeType: [
            { required: true, message: '请选择属性类型', trigger: 'change' }
          ],
          categoryLevelName: [
            { required: true, message: '请选择所属分类', trigger: 'change' }
          ],
          measuringUnit: [
            { required: true, message: '请选择计量单位', trigger: 'change' }
          ],

          weightUnit: [
            { required: true, message: '请选择重量单位', trigger: 'change' }
          ],

          packingUnit: [
            { required: true, message: '请选择包装单位', trigger: 'change' }
          ],

          netWeight: [
            { required: true, message: '请输入净重', trigger: 'blur' }
          ]
        };
      }
    },
    async activated() {
      this.status = this.$route.query.status;
      this.form.categoryLevelId = this.$route.query.categoryLevelId;
      this.form.categoryLevelName = this.$route.query.categoryLevelName;
      this.form.categoryLevelPath = this.$route.query.categoryLevelPath;
      this.form.categoryLevelPathId = this.$route.query.categoryLevelPathId;

      this.ruleCode = this.$route.query.ruleCode;
      // if (this.ruleCode && this.ruleCode != '自定义' && this.status != 0) {
      //   const code = await getCode(this.ruleCode);
      //   this.$set(this.form, 'code', code);
      // }
      if (this.status != 0) {
        this.getCode();
      }
      this.getFieldModel();

      // this.getDictList('zeroPartPros');
    },
    async created() {
      //主数据物品是否计算净重
      parameterGetByCode({
        code: 'main_isNetWeight'
      }).then((res) => {
        if (res.value) {
          this.isNetWeight = res.value;
          if (this.clientEnvironmentId != 5) {
            if (this.isNetWeight == 1) {
              console.log('dadada');
              this.$set(this.categoryWms, 'isUnpack', 1);
            }
          }
        }
      });

      parameterGetByCode({
        code: 'mandatory_field'
      }).then((res) => {
        // console.log(res.value, '77777');
        if (res.value) {
          this.mandatoryFieldList = res.value.split(',');
          console.log(this.mandatoryFieldList, '7222222');
        }
      });

      // 行业属性  0：通用行业；1：生物医药行业；2：电线电缆行业；
      parameterGetByCode({
        code: 'industry_attribute'
      }).then((res) => {
        console.log(res.value, '77777');
        if (res.value) {
          console.log(res, '33333333');
          this.industryAttribute = res.value;
        }
      });

      //新增

      this.$set(
        this.form,
        'categoryLevelId',
        this.$route.query.categoryLevelId
      );
      this.$set(this.form, 'isUpdate', this.$route.query.isUpdate);

      this.isUpdate = this.$route.query.isUpdate;

      this.$set(
        this.form,
        'categoryLevelName',
        this.$route.query.categoryLevelName
      );
      this.$set(
        this.form,
        'categoryLevelPath',
        this.$route.query.categoryLevelPath
      );
      this.$set(
        this.form,
        'categoryLevelPathId',
        this.$route.query.categoryLevelPathId
      );
      this.status = this.$route.query.status;
      this.ruleCode = this.$route.query.ruleCode;
      // if (this.ruleCode && this.ruleCode != '自定义' && this.status != 0) {
      //   const code = await getCode(this.ruleCode);
      //   this.$set(this.form, 'code', code);
      // }
      if (this.status != 0) {
        this.getCode();
      }
      this.getFieldModel();
      this.getAttributeList('inventory_type');

      this.getDictList('zeroPartPros');
    },
    mounted() {
      if (this.clientEnvironmentId == 4) {
        this.form.measureType = 3;
        this.$set(this.categoryWms, 'isUnpack', 0);
      } else if (this.clientEnvironmentId == 5) {
        this.$set(this.categoryWms, 'isUnpack', 0);
      }
    },
    methods: {
      inputSpe(val) {
        if (this.form.measuringUnit == '立方') {
          if (!val || typeof val !== 'string') {
            this.form.volume = 0;
            return;
          }

          let modelArr = val.split('*');
          let modelLong = modelArr[0]; // model规格长度
          let modeWide = modelArr[1]; // model规格宽度
          let modeHight = modelArr[2]?.substr(0, modelArr[2].indexOf('cm')); // model规格高度
          modeHight = Number(modeHight);

          let aa = (modelLong * modeWide * modeHight) / 1000000;
          console.log(aa, 'aa');
          this.form.volume = aa;
        } else {
          this.form.volume = '';
        }
        this.setNetWeight();
      },
      //计算净重
      setNetWeight() {
        if (
          this.form.specification &&
          this.form.weightUnit == 'KG' &&
          this.isNetWeight == 1
        ) {
          let modelArr = this.form.specification.split('*');
          let modelLong = modelArr[0]; // model规格长度
          let modeWide = modelArr[1]; // model规格宽度
          let modeHight = modelArr[2]?.substr(0, modelArr[2].indexOf('mm')); // model规格高度
          modeHight = Number(modeHight);
          let volume = (modelLong * modeWide * modeHight) / 1000;
          if (volume) {
            this.$set(
              this.form,
              'netWeight',
              parseFloat((volume * 7.85) / 1000).toFixed(4)
            );
          } else {
            this.$set(this.form, 'netWeight', 0);
          }

          this.$nextTick(() => {
            // this.$refs.warehouseRefs &&
            //   this.$refs.warehouseRefs.changeNetWeight(this.form.netWeight);
            this.handleInput3();
          });

          // this.form.netWeight = volume*7.85/1000;
        }
      },
      changeMeasureType() {
        if (this.form.measureType == 1) {
          console.log('7897979');
          this.$set(this.categoryWms, 'isUnpack', 1);
        } else {
          this.$set(this.categoryWms, 'isUnpack', 0);
        }
        this.setNetWeight();
      },
      handleInput(value) {
        // this.form.volume = this.$handleInputPublicHasPoint(value);
      },
      handleInput2(value) {
        this.form.roughWeight = this.$handleInputPublicHasPoint(value);
      },
      handleInput3(value) {
        // this.form.netWeight = this.$handleInputPublicHasPoint(value);
        if (this.form.weightUnit == this.form.measuringUnit) {
          this.$refs.warehouseRefs.changeNetWeight(this.form.netWeight);
        }
      },
      changeConsumable() {
        this.$set(this.categoryWms, 'inventoryMode', this.form.isConsumable);
      },
      changeWeightUnit() {
        if (
          this.form.measuringUnit &&
          this.form.packingUnit &&
          this.form.netWeight
        ) {
          this.$refs.warehouseRefs.changeNetWeight(this.form.netWeight);
        }
        this.setNetWeight();
      },
      async changeUnit() {
        if (this.$route.query.id == '' || this.$route.query.id == null) {
          if (this.form.measuringUnit) {
            // 计量单位是‘立方’   体积单位默认是‘立方’
            if (
              this.form.measuringUnit == '立方' &&
              this.form.specification != ''
            ) {
              this.form.volumeUnit = '立方';
              this.inputSpe(this.form.specification);
            } else {
              this.form.volume = 0;
            }

            this.categoryPurchase.measuringUnit = this.form.measuringUnit;
            console.log(this.categoryPurchase.measuringUnit, '采购信息');
            // 如果有计量单位和包装单位 默认添加包装组
            if (this.form.packingUnit) {
              await this.$refs.warehouseRefs.defaultBuild(
                this.form.packingUnit
              );
            }
          }
        } else {
          this.isShow = false;
          if (this.form.measuringUnit) {
            this.categoryPurchase.measuringUnit = this.form.measuringUnit;

            if (this.form.packingUnit) {
              console.log(this.form.measuringUnit, 'this.form.measuringUnit');
              console.log(this.form.packingUnit, 'this.form.packingUnit');
              if (this.packageDispositionVOList.length === 0) {
                console.log('如果没有包装组');
                await this.$refs.warehouseRefs.defaultBuild(
                  this.form.packingUnit
                );
              }
            }
          }
          this.isShow = true;
        }
        await this.setNetWeight();
      },

      // changeAttribute(val) {
      //   if (val.includes(1)) {
      //     // this.rules = {
      //     //   produceType: [
      //     //     { required: true, message: '请选择生产类型', trigger: 'change' }
      //     //   ]
      //     // };
      //     this.rules.produceType = [
      //       { required: true, message: '请选择生产类型', trigger: 'change' }
      //     ];
      //   } else {
      //     if (this.rules.produceType) {
      //       delete this.rules.produceType;
      //     }
      //   }
      // },

      changePackagingSpecification(val) {
        this.packagingSpecificationList = val;
      },
      async _getDetails() {
        const data = await getDetails(this.$route.query.id);
        this.isUpdate = this.$route.query.isUpdate;
        this.$set(this.form, 'isUpdate', this.$route.query.isUpdate);

        const info = deepClone(data);
        info.category.produceType = info.category.produceType[0];
        try {
          if (info.category.colorKey) {
            info.category.colorKey = info.category.colorKey.split(',');
          }
          if (info.category.modelKey) {
            info.category.modelKey = info.category.modelKey.split(',');
          }
          if (info.category.imgUrl && info.category.imgUrl.length > 0) {
            info.category.imgUrl = info.category.imgUrl.map((item) => ({
              ...item,
              status: 'done'
            }));
          }
        } catch (error) {}

        this.form = {
          ...info.category
        };

        this.remarkform.remark = info.category.remark;
        this.remarkform.remarkAttach = info.category.remarkAttach;
        // if (this.form.measuringUnit && this.form.packingUnit) {
        //   this.$refs.warehouseRefs.defaultBuild(this.form.packingUnit);
        // }
        this.categoryLevelPathId = info.category.categoryLevelPathIdParent;
        this.judgeSet(info);

        if (this.status == 1) {
          // rootCategoryCode(this.categoryLevelPathId).then((res) => {
          //   this.$set(this.form, 'code', res);
          // });

          this.form.createTime = null;
        }

        // 回显上传组件
        this.$nextTick(() => {
          this.$refs.imgUploadRef?.putValue(this.form.imgUrl);
        });

        this.$forceUpdate();
      },
      // 判断字段类型并赋值
      judgeSet(info) {
        console.log('info-------', info);

        if (typeof info.categoryAps == 'string') {
          this.categoryAps = {};
        } else {
          this.categoryAps = info.categoryAps;
        }
        if (typeof info.categoryMes == 'string') {
          this.categoryMes = {};
        } else {
          this.categoryMes = info.categoryMes;
        }
        if (typeof info.categoryMold == 'string') {
          this.categoryMold = {};
        } else {
          this.categoryMold = info.categoryMold;
        }
        if (typeof info.categoryPallet == 'string') {
          this.categoryPallet = {};
        } else {
          this.categoryPallet = info.categoryPallet;
        }
        if (typeof info.categorySales == 'string') {
          this.categorySales = {};
        } else {
          this.categorySales = info.categorySales;
        }

        if (typeof info.categoryPurchase == 'string') {
          this.categoryPurchase = {};
        } else {
          this.categoryPurchase = info.categoryPurchase;
        }
        if (!info.categoryQms || !info.categoryQms?.length) {
          this.categoryQms = [...copyObj(defCategoryQms)];
        } else if (info.categoryQms.length < defCategoryQms.length) {
          //历史数据处理
          // let num= defCategoryQms.length-info.categoryQms.length

          // info.categoryQms.push();
          this.categoryQms = [
            ...info.categoryQms,
            ...copyObj(
              defCategoryQms.slice(
                info.categoryQms.length,
                defCategoryQms.length
              )
            )
          ];
        } else {
          this.categoryQms = info.categoryQms;
        }
        if (typeof info.categoryVehicle == 'string') {
          this.categoryVehicle = {};
        } else {
          this.categoryVehicle = info.categoryVehicle;
        }
        if (typeof info.categoryWms == 'string') {
          this.categoryWms = {};
        } else {
          this.categoryWms = info.categoryWms;
        }
        if (typeof info.packageDispositionVOList == 'string') {
          this.packageDispositionVOList = [];
        } else {
          this.packageDispositionVOList = info.packageDispositionVOList;
          console.log(
            'this.packageDispositionVOList---!!!----',
            this.packageDispositionVOList
          );
        }
      },

      getFieldModel() {
        fieldModel({ relevance: 't_main_category' }).then((res) => {
          this.fileList = res;

          if (!this.form.extTagField) {
            this.form.extTagField = {
              isConsumables: 0,
              needProductSequence: 0
            }; // 初始化动态模型属性
          }
          // this.$set(this.form.extTagField, 'isConsumables', 0); // 初始化动态模型属性

          this.fileList.forEach((f) => {
            this.$set(this.form.extField, f.prop, ''); // 初始化动态模型属性
            // this.$set(this.form.extTagField, f.prop, ''); // 初始化动态模型属性
          });
        });
      },
      levelChange(val) {
        // this.$refs.qualityRefs?.forEach((item) => {
        //   item.levelChange(val);
        //   // console.log(item)
        // });
      },
      // 确定分类
      async confirmCategory(node, title, PathInfo, ruleCode) {
        this.categoryLevelPathId = PathInfo.categoryLevelPathId.split(',')[0];

        if (title == '选择产品分类') {
          this.$set(this.form, 'productCategoryLevelName', node.name);
          this.$set(this.form, 'productCategoryLevelId', node.id);
        } else {
          this.$set(this.form, 'categoryLevelName', node.name);
          this.$set(this.form, 'categoryLevelId', node.id);
          this.$set(this.form, 'categoryLevelPath', node.name);
          this.$set(this.form, 'categoryLevelPathId', node.id);
          this.PathInfo = PathInfo;

          this.ruleCode = ruleCode;

          // if (ruleCode && ruleCode != '自定义' && this.status != 0) {
          //   const code = await getCode(ruleCode);
          //   this.$set(this.form, 'code', code);
          // }
          // console.log(this.form, 'this.form');
          if (this.status != 0) {
            this.getCode();
          }
        }

        this.$forceUpdate();
      },

      getCodeOpen() {
        let parentId = [];
        if (this.form.categoryLevelPathId?.length) {
          parentId = this.form.categoryLevelPathId?.split(',');
        }
        this.$refs.GetCodeDialogRef.open({
          id: this.form.categoryLevelId,
          parentId: parentId.length > 1 ? parentId[parentId.length - 2] : ''
        });
      },
      setCode(val) {
        this.$set(this.form, 'code', val);
      },

      async getCode() {
        let parentId = [];
        let categoryLevelPathId = this.PathInfo?.categoryLevelPathId
          ? this.PathInfo.categoryLevelPathId
          : this.form.categoryLevelPathId;
        if (categoryLevelPathId?.length) {
          parentId = categoryLevelPathId.split(',');
        }
        const options = await listCode({
          id: this.form.categoryLevelId,
          parentId: parentId.length > 1 ? parentId[parentId.length - 2] : ''
        });
        if (options.length > 0) {
          getCode({
            categoryId: options[0].id
          }).then((res) => {
            this.$set(this.form, 'code', res.codeStr);
          });
        } else {
          if (this.ruleCode && this.ruleCode != '自定义') {
            const code = await getCodeApi(this.ruleCode);
            this.$set(this.form, 'code', code);
          }
        }
      },

      async getDictList(code) {
        let { data: res } = await getByCode(code);

        console.log('res----', res);

        // this.lbjtList = res.map((item) => {
        //   let values = Object.keys(item);
        //   return {
        //     value: Number(values[0]),
        //     label: item[values[0]]
        //   };
        // });
      },

      async getAttributeList(code) {
        let res = await getByCode(code);

        // this.attributeList = res.data.map((item) => {
        //   let values = Object.keys(item);
        //   return {
        //     value: values[0],
        //     label: item[values[0]]
        //   };
        // });

        let list = res.data.map((item) => {
          let key = Object.keys(item)[0];
          return { value: Number(key), label: item[key] };
        });
        this.attributeList = list;

        console.log(this.attributeList, 'this.attributeList');
      },

      openCategory() {
        this.$refs.categoryRefs.open();
      },

      openCode() {
        this.codeShow = true;
      },

      chooseCode(code) {
        this.$set(this.form, 'code', code);
        this.codeShow = false;
        this.$forceUpdate();
      },

      cancel() {
        // finishPageTab();
        // this.$router.go(-1);
        if (this.$route.query.rootTreeId == 9) {
          this.$router.push({
            path: '/product/oneProduct',
            query: {
              categoryLevelId: this.form.categoryLevelId
            }
          });
        } else {
          this.$router.push({
            path: '/material/product',
            query: {
              categoryLevelId: this.form.categoryLevelId
            }
          });
        }
      },
      verifyDuplicate(obj) {
        return new Promise((resolve, reject) => {
          checkExist(obj).then((res) => {
            if (res) {
              console.log(res, 'res----');

              this.$confirm('系统已有相同的数据', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
                .then(() => {
                  resolve(true);
                })
                .catch(() => {
                  resolve(false);
                });
            } else {
              resolve(true);
            }
          });
        });
      },

      // 保存
      submit() {
        this.$refs.manageForm.validate(async (valid) => {
          console.log(this.$refs.qualityRefs);

          if (!valid) return;

          let req = {
            name: this.form.name,
            modelType: this.form.modelType,
            specification: this.form.specification,
            isUpdate: this.$route.query.isUpdate
          };

          if (!(await this.verifyDuplicate(req))) return;

          let productionValid = await this.$refs.productionRefs.getFormValid();
          let warehouseValid = await this.$refs.warehouseRefs.getFormValid();
          if (!valid || !productionValid || !warehouseValid) {
            return false;
          }
          let packageDispositionVOList = [];
          if (this.packagingSpecificationList.length > 0) {
            packageDispositionVOList = this.packagingSpecificationList.map(
              (item) => {
                let obj = {
                  code: item.code,
                  name: item.name
                };
                return [
                  {
                    ...obj,
                    id: item.id0,
                    sort: 0,
                    status: item.status,
                    packageCell: 1,
                    packageUnit: item.packageUnit,
                    conversionUnit: item.packageUnit
                  },
                  {
                    ...obj,
                    id: item.id1,
                    sort: 1,
                    packageCell: item.minPackageCell,
                    packageUnit: item.packageUnit,
                    conversionUnit: item.minConversionUnit,
                    status: item.status
                  },
                  {
                    ...obj,
                    id: item.id2,
                    sort: 2,
                    packageCell: item.inPackageCell,
                    packageUnit: item.minConversionUnit,
                    conversionUnit: item.inConversionUnit,
                    status: item.status
                  },
                  {
                    ...obj,
                    id: item.id3,
                    sort: 3,
                    packageCell: item.outPackageCell,
                    packageUnit: item.inConversionUnit,
                    conversionUnit: item.outConversionUnit,
                    status: item.status
                  }
                ];
              }
            );
            let packagingSpecificationList =
              this.packagingSpecificationList.filter(
                (item) => item.status == 1
              );
            this.form.extField.packingSpecification = packagingSpecificationList

              .map((item) => {
                return [
                  `${item.minPackageCell}${item.packageUnit}/${item.minConversionUnit}`,
                  `${item.inPackageCell}${item.minConversionUnit}/${item.inConversionUnit}`,
                  `${item.outPackageCell}${item.inConversionUnit}/${item.outConversionUnit}`
                ];
              })
              .flat()
              .join(',');
          } else {
            this.form.extField.packingSpecification = '';
          }

          this.loading = true;
          // const imgList = this.remarkform.imgList;
          // const arr = [];
          // if (imgList.length) {
          //   imgList.map((item) => {
          //     arr.push(item.storePath);
          //   });
          //   this.form.remarkAttach = arr.join(',');
          // }
          // this.form.remark = this.remarkform.remark
          //   ? this.remarkform.remark
          //   : '';

          const data = {
            categorySales: this.categorySales,
            categoryPurchase: this.categoryPurchase,
            categoryWms: this.categoryWms,
            categoryAps: this.categoryAps,
            categoryMes: this.categoryMes,
            categoryMold: this.categoryMold,
            categoryPallet: this.categoryPallet,
            categoryQms: this.categoryQms,
            categoryVehicle: this.categoryVehicle,
            category: {
              ...this.form,
              ...this.remarkform,
              ...this.PathInfo
            },
            packageDispositionVOList: packageDispositionVOList.flat()
          };

          if (this.$route.query.status == 1) {
            data.categorySales.id = null;
            data.categoryPurchase.id = null;
            data.category.id = null;
            data.categoryWms.id = null;
            data.categoryAps.id = null;
            data.categoryMes.id = null;
            data.categoryMold.id = null;
            data.categoryPallet.id = null;
            // data.categoryQms.id = null;
            data.categoryVehicle.id = null;
            data.packageDispositionVOList = data.packageDispositionVOList.map(
              (item) => {
                return {
                  ...item,
                  id: null
                };
              }
            );
          }
          if (data.category.colorKey) {
            data.category.colorKey = data.category.colorKey.toString();
          }
          if (data.category.modelKey) {
            data.category.modelKey = data.category.modelKey.toString();
          }
          data.category.produceType = data.category.produceType
            ? [data.category.produceType]
            : [];

          addMaterial(data)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              // reloadPageTab({ fullPath: '/material/product' });
              // this.$router.go(-1);
              this.cancel();
              // if (this.$route.query.rootTreeId == 9) {
              //   this.$router.push({
              //     path: '/product/oneProduct',
              //     query: {
              //       categoryLevelId: this.form.categoryLevelId
              //     }
              //   });
              // } else {
              //   this.$router.push({
              //     path: '/material/product',
              //     query: {
              //       categoryLevelId: this.form.categoryLevelId
              //     }
              //   });
              // }
            })
            .catch((e) => {
              this.loading = false;
            });
        });
      },
      //生产类型切换
      produceTypeChange(value) {
        // if (value == 1) {
        //   this.attributeList = [
        //     {
        //       label: '成品',
        //       value: 1
        //     },
        //     {
        //       label: '半成品',
        //       value: 2
        //     },
        //     {
        //       label: '零件',
        //       value: 3
        //     },
        //     {
        //       label: '原材料',
        //       value: 4
        //     }
        //   ];
        //   this.form.attributeType = 1;
        // } else {
        //   this.attributeList = [
        //     {
        //       label: '总装(成品)',
        //       value: 1
        //     },
        //     {
        //       label: '部件(半成品)',
        //       value: 2
        //     },
        //     {
        //       label: '零件',
        //       value: 3
        //     },
        //     {
        //       label: '原材料',
        //       value: 4
        //     }
        //   ];
        //   this.form.attributeType = 1;
        // }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-page-header {
    border: none;
  }

  .body-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;

    .top-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-left: -25px;

      .el-form-item {
        margin-bottom: 0;
      }
    }
  }

  .divider {
    margin: 20px 0;

    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      div {
        width: 8px;
        height: 20px;
        margin-right: 10px;
      }

      span {
        font-size: 20px;
      }
    }

    .ele-width {
      width: 100%;
      height: 2px;
    }
  }

  .form-line {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .line-select {
      margin-left: 15px;
    }
  }
</style>