kd-aiot-frontend/src/views/technology/version/components/user-edit.vue

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal width="1060px" :visible="visible" :append-to-body="true" :close-on-click-modal="false"
    custom-class="ele-dialog-form" :title="isUpdate ? '修改工艺类型' : '添加工艺类型'" @update:visible="updateVisible" :maxable="true">
    <header-title title="基本信息"> </header-title>
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-row>

        <el-col :span="8">
          <el-form-item label="工艺类型编码:" prop="code">
            <el-input clearable v-model="form.code" :disabled="isUpdate" placeholder="请输入工艺类型编码" />
          </el-form-item>
        </el-col>




        <el-col :span="8">
          <el-form-item label="工艺类型名称:" prop="name">
            <el-input v-model="form.name" clearable placeholder="请输入工艺类型名称" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="版本号:" prop="version">
            <el-input clearable v-model="form.version" placeholder="请输入版本号" />
          </el-form-item>
        </el-col>
        
        <el-col :span="8">
          <el-form-item label="所属工厂:" prop="factoryId">
            <el-select v-model="form.factoryId" placeholder="请选择" filterable>
              <el-option v-for="item in fList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="false">
          <el-form-item label="产品名称:" prop="categoryName">
            <el-input @click.native="chooseProduct" v-model="form.categoryName" readonly />
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="false">
          <el-form-item label="产品编码:" prop="categoryCode">
            <el-input placeholder="点击选择产品编码" disabled v-model="form.categoryCode" />
          </el-form-item>
        </el-col>

      </el-row>


      <header-title v-if="false" title="关联生产信息"></header-title>

      <el-row v-if="false">
        <el-col :span="8">
          <el-form-item label="工艺路线编码:" prop="routingCode">
            <el-input v-model="form.routingCode" @click.native="chooseRoute" />
          </el-form-item>
        </el-col>
   

        <el-col :span="8">
          <el-form-item label="工艺路线名称:" prop="routingName">
            <el-input placeholder="自动带入" disabled v-model="form.routingName" />
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="工艺路线版本:" prop="routingVersion">
            <el-input placeholder="自动带入" disabled v-model="form.routingVersion" />
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="BOM编码:" prop="bomCode">
            <el-input v-model="form.bomCode" @click.native="chooseBom" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="BOM名称:" prop="bomName">
            <el-input placeholder="自动带入" disabled v-model="form.bomName" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="BOM版本:" prop="bomVersion">
            <el-input placeholder="自动带入" disabled v-model="form.bomVersion" />
          </el-form-item>
        </el-col>




      </el-row>

    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>

    <!-- 选择产品弹窗 -->
    <ProductModal ref="productRefs" @changeProduct='determineChoose' />
    <!-- 选择工艺路线 -->
    <routeModal ref="routeRefs" @changeRoute='changeRoute'></routeModal>

    <!-- 选择物料BOM -->
    <bomModal ref="bomRefs" @changeBom="changeBom"></bomModal>
  </ele-modal>
</template>

<script>
import ProductModal from '@/views/technology/route/components/ProductModal.vue';
import routeModal from './routeModal.vue'
import bomModal from './bomModal.vue'
import route from '@/api/technology/route';
import { versionSave, versionDetail } from '@/api/technology/version/version.js';

export default {
  components: {
    ProductModal,
    routeModal,
    bomModal
  },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    const defaultForm = {
      id: '',
      code: '',
      name: '',
      factoryId: '',
      version: '1.0'
      // categoryId: '',

      // categoryCode: '',
      // categoryName: '',
      // routingId: '',
      // bomId: '',

      // routingName: '',
      // routingCode: '',
      // routingVersion: '',
      // bomName: '',
      // bomCode: '',
      // bomVersion: '',

    };
    return {
      defaultForm,
      fList: [], //仓库列表
      categoryCode: '',
      categoryName: '',
      // 表单数据
      form: { ...defaultForm },



      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '请输入版本名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入版本编码', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请输入版本号', trigger: 'blur' }
        ],
        factoryId: [
          { required: true, message: '请输入所属工厂', trigger: 'blur' }
        ],
        categoryCode: [
          { required: true, message: '请选择产品编码', trigger: 'change' }
        ],
        categoryName: [
          { required: true, message: '请选择产品名称', trigger: 'change' }
        ],

        routingCode: [
          { required: true, message: '请输入工艺路线编码', trigger: 'blur' }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  computed: {
    statusTitle() {
      return this.isUpdate ? '修改' : '保存';
    },
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    chooseProduct() {
      this.$refs.productRefs.open(this.form)
    },
    determineChoose(row) {
      this.$set(this.form, 'categoryName', row.name)
      this.$set(this.form, 'categoryId', row.id)
      this.$set(this.form, 'categoryCode', row.code)
    },

    chooseRoute() {
      this.$refs.routeRefs.open(this.form)
    },
    
    changeRoute(row) {
      this.$set(this.form, 'routingName', row.name)
      this.$set(this.form, 'routingId', row.id)
      this.$set(this.form, 'routingCode', row.code)
      this.$set(this.form, 'routingVersion', row.version)
      
    },

    chooseBom() {
      this.$refs.bomRefs.open(this.form)
    },

    changeBom(row) {
      this.$set(this.form, 'bomName', row.name)
      this.$set(this.form, 'bomId', row.id)
      this.$set(this.form, 'bomCode', row.code)
      this.$set(this.form, 'bomVersion', row.version)
    },
    /* 保存编辑 */
    save() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
       

        if (!this.data) {
          delete this.form.id;
        }

        this.loading = true;
        let title = this.isUpdate ? '修改' : '新建'; // 提交的名称或编号是否有效率有用的标识，

        versionSave(this.form)
          .then((msg) => {
            this.form = {};
            this.categoryName = '';
            this.categoryCode = '';
            this.loading = false;
            let tit = title + msg;
            this.$message.success(tit);
            this.updateVisible(false);
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            // this.$message.error(e.message);
          });
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  },

  watch: {
    async visible(visible) {
      if (visible) {
        const res = await route.Flist({
          pageNum: 1,
          size: -1,
          type: 1
        });
        this.fList = res.list;
        if (this.data) {
          const res = await versionDetail(this.data.id);
          console.log(res)

          this.$util.assignObject(this.form, {
            ...res
          });
          
          this.isUpdate = true;
        } else {
          this.isUpdate = false;
        }
      } else {
        this.$refs.form.clearValidate();
        this.form = { ...this.defaultForm };
      }
    }
  }
};
</script>