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

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal width="960px" :visible="visible" :append-to-body="true" :close-on-click-modal="false"
    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="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="工序编码:" prop="code">
            <el-input clearable :disabled="isUpdate" 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="controlId">
            <el-select v-model="form.controlId" filterable>
              <el-option v-for="item in controlList" :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="workCenterName">
            <el-input @click.native="chooseWorkCenter" v-model="form.workCenterName" readonly />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="工序类型:" prop="type">
            <el-select v-model="form.type" filterable>
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in typeList " :key="index">
              </el-option>

            </el-select>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="排序:" prop="sort">
            <el-input  v-model="form.sort"  />
          </el-form-item>
        </el-col>


      </el-row>

      <header-title title="工序节拍时间"></header-title>


      <el-row>
        <el-col :span="12">
          <el-form-item label="节拍生产数量" prop="beatProduceNum">
            <el-row>
              <el-col :span="16">
                <el-input placeholder="请输入" v-model.number="form.workBeat.beatProduceNum">
                </el-input></el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="7">
                <DictSelection dictName="计量单位" v-model="form.workBeat.beatProduceUnit" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>





        <el-col :span="8">
          <el-form-item label="工序休息时长:">
            <el-input v-model="form.workBeat.restTimes" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="工序准备时长:">
            <el-input v-model="form.workBeat.preTimes" clearable placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备生产时长:">
            <el-input v-model="form.workBeat.proTimes" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他时长:">
            <el-input placeholder="请输入" v-model="form.workBeat.otherTimes" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="节拍时间:">
            <el-input disabled :value="totalTime"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="节拍时间单位:" prop="workBeat.beatTimesUnit">
            <el-select v-model="form.workBeat.beatTimesUnit">
              <el-option v-for="item in timeType2" :key="item.code" :label="item.label" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>

      <header-title title="工序间隔时间"></header-title>

      <el-row>

        <el-col :span="12">
          <el-form-item label="间隔策略:" label-width="200px">
            <el-select v-model="form.intervalTime.tactics" filterable>
              <el-option v-for="item in tacticsType" :key="item.code" :label="item.label" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="间隔时间单位:" prop="timeUnit">
            <el-select v-model="form.timeUnit">
              <el-option v-for="item in timeType" :key="item.code" :label="item.label" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>


        <el-col :span="12">
          <el-form-item label="下工序标准准备时间:" label-width="200px">
            <el-input v-model="form.intervalTime.nextStandardPreTime" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下工序最短准备时间:" label-width="200px">
            <el-input v-model="form.intervalTime.nextShortPreTime" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本工序标准等待时间:" label-width="200px">
            <el-input v-model="form.intervalTime.thisStandardWaitTime" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本工序最短准备时间:" label-width="200px">
            <el-input v-model="form.intervalTime.thisShortPreTime" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本工序结束后标准周转时间:" label-width="200px">
            <el-input v-model="form.intervalTime.thisStandardBoatTime" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本工序结束后周转最短时间:" label-width="200px">
            <el-input v-model="form.intervalTime.thisShortBoatTime" placeholder="请输入" />
          </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>

    <!-- 工作中心弹窗 -->
    <WorkCenter ref="centerRefs" @changeCenter='determineChoose' />
  </ele-modal>
</template>

<script>
import producetask from '@/api/technology/production';
import WorkCenter from './WorkCenter.vue';

export default {
  components: {
    WorkCenter
  },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    controlList: Array,
    typeList: Array
  },
  data() {

    const defaultForm = function () {
      return {
        id: null,
        code: '',
        name: '',
        controlId: '',
        type: 1,
        workCenterId: '',
        workCenterName: '',
        timeUnit: '',
        sort: null,
        intervalTime: {
          nextShortPreTime: '', // 时间单位转换后的下一个短周期的时间，格式为YYYY-MM-DDTHH'
          nextStandardPreTime: '', // 时间单位转换后的下一个正式的周期的时间，格式为YYYY-MM-DD'
          tactics: 1, // 周期工艺描述，格式为JSON字符串或数组形式的对象形式的数据类
          thisShortBoatTime: '',
          thisShortPreTime: '',
          thisStandardBoatTime: '',
          thisStandardWaitTime: ''
        },

        workBeat: {
          beatProduceNum: '',
          beatProduceUnit: '',
          categoryNum: '',
          categoryUnit: '',
          beatTimes: '',
          otherTimes: '',
          preTimes: '',
          proTimes: '',
          restTimes: '',
          beatTimesUnit: ''
        }
      }
    }
    return {
      defaultForm,
      // 表单数据
      form: defaultForm(),

      timeType: [
        { code: 1, label: '分' },
        { code: 2, label: '时' }
      ],


      timeType2: [
        { code: '1', label: '分' },
        { code: '2', label: '时' }
      ],


      tacticsType: [
        { code: 1, label: '标准时间' },
        { code: 2, label: '最短时间' }
      ],




      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '请输入工序名称', trigger: 'blur' }
        ],
        code: [{ required: true, trigger: 'change', message: '工序编码', }],
        controlId: [
          { required: true, message: '请选择控制码', trigger: 'blur' }
        ],
        workCenterName: [
          { required: true, message: '请选择工作中心', trigger: 'change' }
        ],
        'workBeat.beatTimesUnit': [
          { required: true, message: '请选择时间单位', trigger: 'change' }
        ],
        timeUnit: [
          { required: true, message: '请选择间隔时间单位', trigger: 'change' }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      chooseItem: null,
    };
  },
  computed: {
    totalTime() {
      let to =
        (-this.form.workBeat.restTimes +
          -this.form.workBeat.preTimes +
          -this.form.workBeat.proTimes +
          -this.form.workBeat.otherTimes) *
        -1;
      return to;
    },
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    chooseWorkCenter() {
      this.$refs.centerRefs.open(this.form)
    },
    determineChoose(row) {
      this.$set(this.form, 'workCenterName', row.name)
      this.$set(this.form, 'workCenterId', row.id)
    },
    /* 保存编辑 */
    save() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (!this.isUpdate) {
          delete this.form.id;
        }

        this.form.workBeat.beatTimes = this.totalTime;

        this.loading = true;
        producetask
          .save(this.form)
          .then((msg) => {
            this.loading = false;
            this.$message.success(
              (this.isUpdate ? '修改' : '新建') + msg.message
            );
            this.updateVisible(false);
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            // this.$message.error(e.message);
          });
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.form = { ...this.defaultForm() };
      this.$emit('update:visible', value);
    }
  },

  watch: {
    async visible(visible) {
      if (visible) {
        if (this.data) {
          const res = await producetask.getById(this.data.id);
          this.$util.assignObject(this.form, {
            ...res
          });
          this.isUpdate = true;
        } else {
          this.form = { ...this.defaultForm() };
          this.isUpdate = false;
        }
      } else {
        this.$refs.form.clearValidate();
        this.form = { ...this.defaultForm() };
      }
    }
  }
};
</script>