kd-aiot-frontend-mes/src/views/operationControl/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <div class="form-wrapper">
        <el-form
          :model="formData"
          label-width="0"
          :show-message="false"
          ref="formRef"
          :rules="rules"
        >
          <el-descriptions title="" :column="1" border>
            <el-descriptions-item label="日期方式">
              <span slot="label" class="label-required">日期方式</span>
              <el-form-item prop="formingNum">
                <DictSelection
                  dictName="日期方式"
                  clearable
                  v-model="formData.dateType"
                  @change="changeType"
                >
                </DictSelection>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="formData.dateType == 2">
              <span slot="label" class="label-required"><i>*</i> 指定日期</span>
              <el-form-item prop="appointTime" class="w100">
                <el-date-picker
                  class="w100"
                  v-model="formData.appointTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker> </el-form-item
            ></el-descriptions-item>
            <el-descriptions-item label="关闭工单">
              <span slot="label" class="label-required">关闭工单</span>
              <el-form-item prop="orderClose">
                <el-radio v-model="formData.orderClose" :label="1"
                  >启用</el-radio
                >
                <el-radio v-model="formData.orderClose" :label="0"
                  >禁用</el-radio
                >
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="报工操作">
              <span slot="label" class="label-required">报工操作</span>
              <el-form-item prop="reportWork">
                <el-radio v-model="formData.reportWork" :label="1"
                  >启用</el-radio
                >
                <el-radio v-model="formData.reportWork" :label="0"
                  >禁用</el-radio
                >
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="货物移动">
              <span slot="label" class="label-required">货物移动</span>
              <el-form-item prop="goodsMovement">
                <el-radio v-model="formData.goodsMovement" :label="1"
                  >启用</el-radio
                >
                <el-radio v-model="formData.goodsMovement" :label="0"
                  >禁用</el-radio
                >
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <div class="footer">
          <el-button type="primary" @click="confirm" :loading="saveLoading"
            >保存</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import dayjs from 'dayjs';
  import {
    getInfo,
    controlSave,
    controlUpdate
  } from '@/api/operationControl/index.js';
  export default {
    mixins: [dictMixins],
    data() {
      return {
        // 加载状态
        loading: false,
        formData: {
          dateType: 1,
          orderClose: 1,
          reportWork: 1,
          goodsMovement: 1,
          appointTime: ''
        },
        fnType: 1,
        saveLoading: false,
        rules: {
          appointTime: [
            { required: true, message: '请选择指定日期', trigger: 'change' }
          ]
        }
      };
    },
    computed: {},
    async created() {
      this.getInfoData();
    },
    methods: {
      changeType(val) {
        if (val == 2) {
          const time = dayjs(new Date().getTime()).format(
            'YYYY-MM-DD HH:mm:ss'
          );
          this.$set(this.formData, 'appointTime', time);
        }
      },
      async getInfoData() {
        const res = await getInfo();
        if (typeof res == 'string') {
          this.fnType = 1;
        } else {
          this.formData = res;
          this.fnType = 2;
        }
      },
      confirm() {
        const saveOrUpdate =
          this.fnType == 1 || !this.fnType ? controlSave : controlUpdate;

        if (this.formData.dateType == 1) {
          delete this.formData.appointTime;
        }
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            this.saveLoading = true;
            saveOrUpdate(this.formData)
              .then((res) => {
                this.$message.success(res);
                this.saveLoading = false;
                this.getInfoData();
              })
              .catch(() => {
                this.saveLoading = false;
              });
          } else {
            return false;
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .form-wrapper {
    width: 40%;
    margin: 10px auto;
    .el-form-item {
      margin-bottom: 0;
    }
    .w100 {
      width: 100% !important;
    }
    .footer {
      width: 100%;
      margin: 20px auto 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .label-required {
      i {
        color: red;
        font-style: normal;
      }
    }
  }
</style>