kd-aiot-frontend/src/views/material/product copy/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
        >
        <!-- <div class="divider">
          <div class="title">
            <div class="ele-bg-primary"></div>
            <span>基本信息</span>
          </div>
          <div class="ele-bg-primary ele-width"></div>
        </div> -->
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="编码" prop="code">
              <el-input v-model="form.code" />
            </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="categoryLevelName">
              <el-input
                v-model="form.categoryLevelName"
                @click.native="openCategory"
              />
            </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="specification">
              <el-input v-model="form.specification" />
            </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="measuringUnit">
              <DictSelection
                dictName="计量单位"
                clearable
                v-model="form.measuringUnit"
              >
              </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" />
                <DictSelection
                  class="line-select"
                  dictName="重量单位"
                  clearable
                  v-model="form.weightUnit"
                >
                </DictSelection>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="净重">
              <div class="form-line">
                <el-input v-model="form.netWeight" />
                <DictSelection
                  class="line-select"
                  dictName="重量单位"
                  clearable
                  v-model="form.weightUnit"
                >
                </DictSelection>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属部门">
              <deptSelect
                v-model="form.deptLeaderId"
                @changeGroup="searchDeptNodeClick"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人">
              <personSelect
                ref="directorRef"
                v-model="form.deptId"
                @selfChange="handleDirectorChange"
                :init="false"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 分类选择弹窗 -->
    <CategoryDialog ref="categoryRefs" @chooseCategory="confirmCategory" />
    <!-- 仓储配置 -->
    <WarehouseInfo ref="warehouseRefs" :form="categoryWms" />
    <!-- 生产信息 -->
    <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 '../manage/components/GroupDialog.vue';
  import CategoryDialog from '../manage/components/CategoryDialog.vue';
  import WarehouseInfo from '../manage/components/WarehouseInfo.vue';
  import ProcureInfo from '../manage/components/ProcureInfo.vue';
  import ProductionInfo from '../manage/components/ProductionInfo.vue';
  import PlanInfo from '../manage/components/PlanInfo.vue';
  import SalesInfo from '../manage/components/SalesInfo.vue';
  import QualityInfo from '../manage/components/QualityInfo.vue';
  import BoatInfo from '../manage/components/BoatInfo.vue';
  import TurnoverInfo from '../manage/components/TurnoverInfo.vue';
  import MoldInfo from '../manage/components/MoldInfo.vue';
  import RemarkInfo from '../manage/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 { addMaterial } from '@/api/material/manage.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
    },
    data () {
      return {
        loading: false,
        form: {
          categoryLevelGroupName: '',
          categoryLevelName: ''
        },
        remarkform: {
          remarkAttach: []
        },
        categoryAps: {},
        categoryMes: {},
        categoryMold: {},
        categoryPallet: {},
        categoryQms: {},
        categoryVehicle: {},
        categoryWms: {},
        // 表单验证规则
        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' }
          ]
        },
        PathInfo: {},
        id: null
      };
    },
    created () {
      this._getDetails();
    },
    methods: {
      async _getDetails () {
        const data = await getDetails(this.$route.query.id);
        const info = deepClone(data);
        this.form = {
          ...info.category
        };
        this.judgeSet(info);
        this.searchDeptNodeClick(this.form.deptLeaderId);
      },
      // 判断字段类型并赋值
      judgeSet (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;
        }
      },
      // 选择所属部门
      searchDeptNodeClick (id, info) {
        // 根据部门获取人员
        const params = { executeGroupId: id };
        this.$nextTick(() => {
          this.$refs.directorRef.getList(params);
        });
      },
      //选择负责人
      handleDirectorChange (id, info) {},
      // 确定分类
      confirmCategory (node, title, PathInfo) {
        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;
        }
      },
      openCategory () {
        this.$refs.categoryRefs.open(this.form.categoryLevelId);
      },
      cancel () {
        finishPageTab();
        this.$router.go(-1);
      },

      // 保存
      submit () {
        this.$refs.manageForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          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
            }
          };
          addMaterial(data)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              finishPageTab();
              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>