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

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal width="1060px" :visible="visible" :append-to-body="true" :close-on-click-modal="true"
    custom-class="ele-dialog-form" :title="isUpdate ? '修改工艺路线' : '添加工艺路线'" @update:visible="updateVisible">
    <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 disabled v-model="form.code" 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="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">
          <el-form-item label="生产版本:" prop="produceVersionId">
            <el-select v-model="form.produceVersionId" filterable placeholder="请选择" :style="{ width: '100%' }">
              <el-option v-for="item in versionList" :key="item.code" :label="item.code + '-' + item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="工艺路线版本:" prop="version">
            <el-input disabled v-model="form.version" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态:" prop="status">
            <el-select v-model="form.status" placeholder="" filterable>
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </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>


  </ele-modal>
</template>

<script>

import route from '@/api/technology/route';
import { pageList } from '@/api/technology/version/version.js';

export default {
  components: {

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

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

      statusList: [
        { label: '草稿', value: -1 },
        { label: '失效', value: 0 },
        { label: '生效', value: 1 }
      ],

      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '请输入工艺路线名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入工艺路线编码', trigger: 'blur' }
        ],
        factoryId: [
          { required: true, message: '请输入工艺路线', trigger: 'blur' }
        ],

        status: [
          { required: true, message: '请输入工艺路线版本', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请输入工艺路线版本', trigger: 'blur' }
        ]
      },
      versionList: [],
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  computed: {
    statusTitle() {
      return this.isUpdate ? '修改' : '保存';
    },
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {


    /* 保存编辑 */
    save() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (!this.data) {
          delete this.form.id;
        }

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


        route
          .save(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);
          });
      });
    },

    async getVersionList() {
      const res = await pageList({
        pageNum: 1,
        size: 100
      });

      this.versionList = res.list;
    },

    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  },

  watch: {
    async visible(visible) {

      if (visible) {
        this.getVersionList()
        const res = await route.Flist({
          pageNum: 1,
          size: -1,
          type: 1
        });
        this.fList = res.list;
        if (this.data) {
          const res = await route.getById(this.data.id);

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