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" :disabled="isUpdate" 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 :disabled="isUpdate">
              <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" :disabled="isUpdate">
            <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>

    <user-taskinstance v-if="step == 2" :isEdit="isUpdate"  :taskInfo="form" @refresh="refresh" />

    <template v-slot:footer>
      <el-button type="primary" v-if="step == 1" :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';
import UserTaskinstance from './user-taskinstance.vue';
export default {
  components: {
    UserTaskinstance
  },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    const defaultForm = {
      code: '',
      name: '',
      factoryId: '',
      status: -1,
      categoryId: '',
      version: '1.0',
      id: '',

    };
    return {
      defaultForm,
      fList: [], //仓库列表

      // 表单数据
      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' }
        ],
        produceVersionId: [
        { required: true, message: '请输入生产版本', trigger: 'blur' }
        ]

      },
      versionList: [],
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,

      step: 1,

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



        route
          .save(this.form)
          .then((data) => {
            if (!this.isUpdate) {
              this.form.id = data
              this.step = 2
            }


            this.loading = false;
            this.$message.success('操作成功');

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

    refresh() {
      this.updateVisible(false)
      this.$emit('done')
    },


  },

  watch: {
    async visible(visible) {

      if (visible) {
        this.step = 1
        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.step = 2
          this.isUpdate = true;
        } else {
          const res = await route.getCode();
          this.form.code = res;
          this.step = 1
          this.isUpdate = false;
        }
      } else {
        this.$refs.form.clearValidate();
        this.form = { ...this.defaultForm };
      }
    }
  }
};
</script>