jonhon-mes-web/src/views/productionManagement/components/closedDialog.vue

<template>
  <el-dialog title="关闭" append-to-body :modelValue="showClose" @close="closeDialog" width="30%">
    <!-- <el-form :model="closeForm" :rules="closeRules" label-width="70px" ref="form">
            <el-form-item label="备注：" prop="memo">
                <el-input type="textarea" placeholder="请输入备注" v-model="closeForm.memo" :rows="4"></el-input>
            </el-form-item>
        </el-form> -->
    <avue-form :option="option" v-model="closeForm" ref="form"></avue-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit()" :loading="loadingBtn">保 存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { updateStatus } from '@/api/productionManagement/productionMonitoring';

export default {
  props: {
    showClose: {
      type: Boolean,
      default: false,
    },
    itemData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      loadingBtn: false,
      closeForm: {},
      closeRules: {
        memo: [{ required: true, message: '请输入备注', trigger: 'blur' }],
      },
      option: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '备注',
            prop: 'memo',
            type: 'textarea',
            span: 24,
            rows: 2,
            rules: [
              {
                required: true,
                message: '请输入',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    // 关闭弹窗
    closeDialog() {
      this.$emit('closeDialog');
    },
    submit() {
      this.$refs.form.validate((valid, done, msg) => {
        if (valid) {
          this.loadingBtn = true;
          let query = {
            idArr: this.itemData.map(item => item.woId),
            status: 0,
            memo: this.closeForm.memo,
          };
          updateStatus(query).then(res => {
            this.$message.success('操作成功！');
            this.loadingBtn = false;
            this.$emit('closeDialog',true);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

<style></style>