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

<template>
  <el-dialog
    title="优先级调整"
    append-to-body
    :modelValue="openShow"
    width="30%"
    @close="closeDialog"
  >
    <!-- <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="设置优先级:" prop="value1" required>
        <el-select v-model="form.value1" placeholder="请选择">
          <el-option label="一级" :value="1"> </el-option>
          <el-option label="二级" :value="2"> </el-option>
          <el-option label="三级" :value="3"> </el-option>
        </el-select>
      </el-form-item>
    </el-form> -->
    <avue-form :option="option" ref="form"></avue-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      openShow: false,
      form: {
        value1: '',
      },
      option: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '优先级',
            prop: 'name',
            type: 'select',
            span:24,
            dicUrl: '/blade-system/dict/dictionary?code=orderPriority',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            rules: [
              {
                required: true,
                message: '请选择',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.openShow = this.showDialog;
  },
  methods: {
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
    submit() {
      //如果存在验证不通过，msg为错误信息
      this.$refs.form.validate((valid, done, msg) => {
        if (valid) {
          this.$emit('submitPriority', this.form);
          this.closeDialog();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },

  watch: {
    showDialog(val) {
      this.openShow = val;
    },
  },
};
</script>
<style lang="scss" scoped></style>