jonhon-mes-web/src/views/processManagement/components/addBasicProcessesDialog.vue

<template>
  <el-dialog :title="title" append-to-body :modelValue="openShow" width="40%" @close="closeDialog">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="90px"
      class="demo-ruleForm"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="编码:" prop="code">
            <el-input
              v-model="ruleForm.code"
              placeholder="请输入"
              :disabled="disableFrom"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名称:" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入"
              :disabled="disableFrom"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标准周期:" prop="cycle">
            <el-input
              v-model="ruleForm.cycle"
              placeholder="请输入"
              :disabled="disableFrom"
            ></el-input>
            <!-- <el-input-number v-model="ruleForm.cycle" controls-position="right"  :min="1" :disabled="disableFrom"></el-input-number> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检验工序:" prop="isCheckout">
            <el-select
              v-model="ruleForm.isCheckout"
              placeholder="请选择"
              clearable
              filterable
              :disabled="disableFrom"
            >
              <el-option label="是" value="1"> </el-option>
              <el-option label="否" value="0"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="" prop="" label-width="0">
            <el-checkbox
              v-model="ruleForm.isDispatch"
              :true-label="'1'"
              :false-label="'2'"
              :disabled="disableFrom"
              >不分派</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="" label-width="0">
            <el-checkbox
              v-model="ruleForm.isSpecial"
              :true-label="'1'"
              :false-label="'2'"
              :disabled="disableFrom"
              >特殊</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="" label-width="0">
            <el-checkbox
              v-model="ruleForm.isMain"
              :true-label="'1'"
              :false-label="'2'"
              :disabled="disableFrom"
              >主工序</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="" label-width="0">
            <el-checkbox
              v-model="ruleForm.eleStream"
              :true-label="'1'"
              :false-label="'2'"
              :disabled="disableFrom"
              >电流(A)</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="" label-width="0">
            <el-checkbox
              v-model="ruleForm.eleRate"
              :true-label="'1'"
              :false-label="'2'"
              :disabled="disableFrom"
              >电导率</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="" label-width="0">
            <el-checkbox
              v-model="ruleForm.phValue"
              :true-label="'1'"
              :false-label="'2'"
              :disabled="disableFrom"
              >PH</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="" label-width="0">
            <el-checkbox
              v-model="ruleForm.niValue"
              :true-label="'1'"
              :false-label="'2'"
              :disabled="disableFrom"
              >Ni+</el-checkbox
            >
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="" prop="" label-width="0">
            <el-checkbox
              v-model="ruleForm.vSpeed"
              :true-label="'1'"
              :false-label="'2'"
              :disabled="disableFrom"
              >转速/振频</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="" label-width="0">
            <el-checkbox
              v-model="ruleForm.cyropactorControl"
              :true-label="'1'"
              :false-label="'2'"
              :disabled="disableFrom"
              >整流机控制模式</el-checkbox
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer v-if="!disableFrom">
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { add, getDetail, update } from '@/api/processManagement/basicProcesses';
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    moldAddMore: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
    rowData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      openShow: false,
      disableFrom: false,
      tableData: [],
      ruleForm: {
        cycle: 0,
        isCheckout:'0'
      },
      rules: {
        code: [{ required: true, message: '请输入', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        cycle: [{ required: true, message: '请输入', trigger: 'blur' }],
        isCheckout: [{ required: true, message: '请选择', trigger: 'change' }],
      },
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    this.disableFrom = this.title == '详情' ? true : false;
    if (this.title == '详情' || this.title == '修改') {
      getDetail(this.id).then(res => {
        this.ruleForm = res.data.data;
        this.ruleForm.isCheckout =
          this.ruleForm.isCheckout == -1 ? '' : this.ruleForm.isCheckout + '';
      });
    }
  },
  methods: {
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
    detailsInfo() {},

    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(9999, this.ruleForm);
          if (this.title == '新增') {
            add(this.ruleForm).then(
              res => {
                // 获取新增数据的相关字段
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                // 数据回调进行刷新
                this.$emit('closeDialog', true);
              },
              error => {
                // loading();
              }
            );
          } else {
            update(this.ruleForm).then(
              res => {
                // 获取新增数据的相关字段
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                // 数据回调进行刷新
                this.$emit('closeDialog', true);
              },
              error => {
                // loading();
              }
            );
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>