1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
  <div>
    <div>这里可能有搜索栏、数据列表等...</div>

    <!-- 这里引入业务弹框组件 -->
    <SelectDialog :show.sync="businessShow"></SelectDialog>
  </div>
</template>

<script>
import SelectDialog from "./select-dialog.vue";

export default {
  components: {
    SelectDialog, // 注册组件
  },
  data() {
    return {
      businessShow: false,
    };
  },
  methods: {},
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<template>
  <div>
    <el-dialog :visible="show" title="XX下拉选择弹框" v-loading="dial_loading" width="600px" @close="handleClose">
      <div>这里是具体业务组件...</div>

      <template slot="footer">
        <el-button @click="handleClose" size="small">关 闭</el-button>
        <el-button @click="handleConfirm" type="primary" size="small">确 认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 外部使用需要加修饰符 show.sync
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dial_loading: false,
    };
  },
  watch: {
    show(value) {
      if (value) {
        console.log("监听到 show 的值有变化：", value);
      }
    },
  },
  methods: {
    handleConfirm() {
      this.dial_loading = true;

      // 模拟执行业务
      setTimeout(() => {
        // 业务执行完关闭弹框
        this.dial_loading = false;
        this.$modal.msgSuccess("已确认");
        this.$emit("confirm");
        this.$emit("close");
        this.$emit("update:show", false);
        this.resetDialog();
      }, 3000);
    },
    handleClose() {
      this.$emit("close");
      this.$emit("update:show", false);
      this.resetDialog();
    },

    resetDialog() {
      // 重置弹框里面的数据，比如有表单、下拉框、筛选框等等
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<template>
  <div>
    <div>这里可能有搜索栏、数据列表等...</div>

    <!-- 这里引入业务弹框组件 -->
    <SelectDialog v-model="dialog.show"></SelectDialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import SelectDialog from "./select-dialog.vue";

const dialog = reactive({
  show: false,
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<template>
  <div>
    <el-dialog :model-value="modelValue" :title="title" @closed="handleClose" width="60vw" top="5vh">
      <div>这里是具体业务组件...</div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">关 闭</el-button>
          <el-button @click="handleConfirm" type="primary">确 认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "XX下拉选择弹框",
  },
});

const emit = defineEmits(["update:modelValue", "confirm", "close"]);

// const dial_loading = ref(false);

// 关闭弹窗
function handleClose() {
  emit("update:modelValue", false);
}

function handleConfirm() {
  // dial_loading.value = true;

  // 模拟执行业务
  setTimeout(() => {
    // 业务执行完关闭弹框
    // dial_loading.value = false;
    emit("confirm");
    emit("close");
    emit("update:modelValue", false);
    resetDialog();
  }, 3000);
}

function resetDialog() {
  // 重置弹框里面的数据，比如有表单、下拉框、筛选框等等
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

<template>
  <div>
    <el-dialog :model-value="modelValue" :title="title" @closed="handleClose" 
      :width="width" :top="top" :close-on-click-modal="false" append-to-body>
      <div>
        <el-form ref="form1Ref" :model="form1" :rules="form1Rules" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form1.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form1.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button @click="handleConfirm" type="primary">确 认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import RoleAPI from '@/api/role.api';

const { proxy } = getCurrentInstance();

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "XX下拉选择弹框",
  },
  width: {
    type: String,
    default: "60vw",
  },
  top: {
    type: String,
    default: "5vh",
  },
  id: {
    type: [String, Number],
  },
});

const emit = defineEmits(["update:modelValue", "confirm", "close"]);

// const dial_loading = ref(false);

// 是否为更新模式
const isUpdateMode = ref(false);

const init_form1 = {
  name: '',
  status: 1
};
const form1Ref = ref();
const form1 = reactive({
  id: null,
  name: '',
  status: 1
});
const form1Rules = reactive({
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
});

watch(() => props.modelValue, (value) => {
  if (value) {
    if (props.id) {
      form1.id = props.id;
      isUpdateMode.value = true;
      RoleAPI.roleInfo(props.id).then((res) => {
        Object.assign(form1, res.data);
      });
    } else {
      form1.id = null;
      isUpdateMode.value = false;
    }
  }
});

/** 重置弹框里面的数据，比如输入框、下拉框等等 */
function resetDialog() {
  Object.assign(form1, init_form1);
  form1Ref.value.resetFields();
}

/** 关闭弹窗 */
function handleClose() {
  resetDialog();
  emit("update:modelValue", false);
}

/** 确认并关闭 */
function confirmClose() {
  resetDialog();
  emit("confirm");
  emit("close");
  emit("update:modelValue", false);
}

/** 确认按钮 */
function handleConfirm() {
  // 验证表单后再提交
  form1Ref.value.validate(valid => {
    if (valid) {
      if (this.isUpdateMode) { // 更新时
        RoleAPI.roleUpdate(form1).then(() => {
          proxy.$modal.msgSuccess("修改成功");
          confirmClose();
        });
      } else { // 新增时
        RoleAPI.roleAdd(form1).then(() => {
          proxy.$modal.msgSuccess("新增成功");
          confirmClose();
        });
      }
    }
  });
}
</script>