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" />
            </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" />
            </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="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" v-if="categoryLevelPathId == 1">
            <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="净重" v-if="form.isConsumable == 1" :key="1">
              <div class="form-line">
                <el-input v-model="form.netWeight" />
              </div>
            </el-form-item>

            <el-form-item label="净重" prop="netWeight" v-if="form.isConsumable == 0" :key="0">
              <div class="form-line">
                <el-input v-model="form.netWeight" />
              </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>


    <!--  自定义编码 -->
    <CodeDialog ref="codeRefs" v-if="codeShow" @close="codeShow = false" @chooseCode="chooseCode"></CodeDialog>
    <!-- 分类选择弹窗 -->
    <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 './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 { getCode } 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 {
      loading: false,
      form: {
        categoryLevelGroupName: '',
        categoryLevelName: '',
        isConsumable: 1
      },
      remarkform: {
        remarkAttach: []
      },
      categoryAps: {},
      categoryMes: {},
      categoryMold: {},
      categoryPallet: {},
      categoryQms: {},
      categoryVehicle: {},
      categoryWms: {
        isUnpack: 1
      },

      categoryLevelPathId: null,
      // 表单验证规则
      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
    };
  },
  async created() {
    if (this.$route.query.id) {
      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) { },
    // 确定分类
    async confirmCategory(node, title, PathInfo, ruleCode) {
      this.$set(this.form, 'code', null);
      this.categoryLevelPathId = PathInfo.categoryLevelPathId

      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 != '自定义') {
          const code = await getCode(ruleCode);
          this.$set(this.form, 'code', code);

        }


      }

      this.$forceUpdate()
    },
    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((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);
            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>