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

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-form
        label-width="120px"
        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" v-if="ruleCode == '自定义'" key="1">
            <el-form-item label="编码" prop="code">
              <el-input
                v-model="form.code"
                readonly
                @click.native="openCode"
                :disabled="status == 0"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8" v-else key="2">
            <el-form-item label="编码" prop="code">
              <el-input v-model="form.code" :disabled="status == 0" />
            </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="imgCode">
              <el-input v-model="form.imgCode" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="生产类型" prop="produceType">
              <el-select
                style="width: 100%"
                v-model="form.produceType"
                filterable
                multiple
              >
                <el-option
                  v-for="item in dictList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            :span="8"
            v-if="[1, 23, 9, 28].includes(Number(categoryLevelPathId))"
          >
            <el-form-item label="加工类型" prop="isConsumable">
              <el-select
                v-model="form.isConsumable"
                size="small"
                style="width: 100%"
              >
                <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">
              <el-input v-model="form.brandNum" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号" prop="modelType">
              <el-input v-model="form.modelType" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="规格" prop="specification">
              <el-input v-model="form.specification" />
            </el-form-item>
          </el-col>

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

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

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

          <el-col :span="8">
            <el-form-item label="体积">
              <div class="form-line">
                <el-input v-model="form.volume" />
                <DictSelection
                  class="line-select"
                  dictName="体积单位"
                  clearable
                  v-model="form.volumeUnit"
                >
                </DictSelection>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="毛重">
              <div class="form-line">
                <el-input v-model="form.roughWeight" />
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="净重">
              <div class="form-line">
                <el-input v-model="form.netWeight" />
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="级别">
              <template>
                <el-select
                  style="width: 100%"
                  v-model="form.level"
                  placeholder="请选择"
                >
                  <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" v-for="(f, idx) in fileList" :key="idx">
            <el-form-item :label="f.label">
              <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>
        </el-row>
      </el-form>
    </el-card>

    <!--  自定义编码 -->
    <CodeDialog
      ref="codeRefs"
      v-if="codeShow"
      @close="codeShow = false"
      @chooseCode="chooseCode"
    ></CodeDialog>
    <!-- 分类选择弹窗 -->
    <CategoryDialog ref="categoryRefs" @chooseCategory="confirmCategory" />
    <!-- 仓储配置 -->
    <WarehouseInfo
      ref="warehouseRefs"
      :form="categoryWms"
      :measuringUnit="form.measuringUnit"
      :packageDispositionVOList="packageDispositionVOList"
      @change="changePackagingSpecification"
    />
    <!-- 生产信息 -->
    <ProductionInfo ref="productionRefs" :form="categoryMes" />
    <!-- 计划 -->
    <PlanInfo ref="planRefs" :form="categoryAps" />
    <!-- 质量配置 -->
    <QualityInfo ref="qualityRefs" :form="categoryQms" />
    <!-- 舟皿信息 -->
    <BoatInfo ref="qualityRefs" :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"
    />
  </div>
</template>

<script>
  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, rootCategoryCode, fieldModel } from '@/api/codeManagement';

  import { addMaterial } from '@/api/material/list.js';
  import { deepClone } from '@/utils/index';
  import { finishPageTab, reloadPageTab } from '@/utils/page-tab-util';

  export default {
    name: 'ManageMaterial',
    components: {
      linkMsg,
      GroupDialog,
      deptSelect,
      personSelect,
      WarehouseInfo,
      ProcureInfo,
      ProductionInfo,
      PlanInfo,
      SalesInfo,
      QualityInfo,
      BoatInfo,
      TurnoverInfo,
      MoldInfo,
      RemarkInfo,
      CategoryDialog,
      CodeDialog
    },
    data() {
      return {
        packagingSpecificationList: [],
        loading: false,
        levelOptions: [
          {
            label: '特级',
            value: '特级'
          },
          {
            label: '一级',
            value: '一级'
          },
          {
            label: '二级',
            value: '二级'
          },
          {
            label: '三级',
            value: '三级'
          }
        ],
        form: {
          categoryLevelGroupName: '',
          categoryLevelName: '',
          isConsumable: 1,

          extField: {}
        },

        remarkform: {
          remarkAttach: []
        },
        categoryAps: {},
        categoryMes: {},
        categoryMold: {},
        categoryPallet: {},
        categoryQms: {},
        categoryVehicle: {},
        categoryWms: {
          isUnpack: 1
        },
        packageDispositionVOList: [],
        categoryLevelPathId: null,

        dictList: [],

        fileList: [],
        // 表单验证规则
        rules: {
          categoryLevelGroupName: [
            { required: true, message: '请选择所属物料组', trigger: 'change' }
          ],
          code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          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' }
          ]
        },
        PathInfo: {},
        id: null,

        ruleCode: null,
        codeShow: false,

        status: null
      };
    },
    watch: {
      '$route.query.id': {
        handler(id) {
          console.log('id-------------', id);
          if (id) {
            this._getDetails();
          } else {
            this.form = {
              categoryLevelGroupName: '',
              categoryLevelName: '',
              isConsumable: 1,

              extField: {}
            };

            this.remarkform = {
              remarkAttach: []
            };
            this.categoryAps = {};
            this.categoryMes = {};
            this.categoryMold = {};
            this.categoryPallet = {};
            this.categoryQms = {};
            this.categoryVehicle = {};
            this.categoryWms = {
              isUnpack: 1
            };
            this.packageDispositionVOList = [];
            this.categoryLevelPathId = null;

            this.dictList = [];

            this.fileList = [];
          }
        },
        deep: true,
        immediate: true
      }
    },
    async created() {
      this.getFieldModel();
      this.status = this.$route.query.status;
      // if (this.$route.query.id) {
      //   this._getDetails();
      // }
      this.getDictList('productionType');
    },
    methods: {
      changePackagingSpecification(val) {
        this.packagingSpecificationList = val;
      },
      async _getDetails() {
        const data = await getDetails(this.$route.query.id);
        const info = deepClone(data);

        this.form = {
          ...info.category
        };
        let productType_ = this.form.produceType;
        if (productType_ != undefined && productType_ != null) {
          let intproductType = [];
          for (const [index, value] of productType_.entries()) {
            intproductType.push(value.toString());
          }
          this.form.produceType = intproductType;
        }

        this.categoryLevelPathId = info.category.categoryLevelPathIdParent;
        this.judgeSet(info);

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

        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.categoryQms == 'string') {
          this.categoryQms = {};
        } 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;

          this.fileList.forEach((f) => {
            this.$set(this.form.extField, f.prop, ''); // 初始化动态模型属性
          });
        });
      },

      // 确定分类
      async confirmCategory(node, title, PathInfo, ruleCode) {
        if (this.status != 0) {
          this.$set(this.form, 'code', null);
        }
        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);
          }
        }

        this.$forceUpdate();
      },

      async getDictList(code) {
        let { data: res } = await getByCode(code);
        this.dictList = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: Number(values[0]),
            label: item[values[0]]
          };
        });
      },

      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);
      },

      // 保存
      submit() {
        this.$refs.manageForm.validate(async (valid) => {
          let productionValid = await this.$refs.productionRefs.getFormValid();
          console.log(productionValid);
          if (!valid || !productionValid) {
            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 = {
            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.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
                };
              }
            );
          }

          addMaterial(data)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              reloadPageTab({ fullPath: '/material/product' });
              this.$router.go(-1);
            })
            .catch((e) => {
              this.loading = false;
            });
        });
      }
    }
  };
</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>