tqxz-sn-message-platform/src/components/operate/passwordOauth.vue

<template>
  <el-dialog
    v-model="operateDialogVisible"
    :show-close="false"
    style="width: 80%"
    center
    align-center
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div
        style="font-size: 2rem"
        class="w-full font-bold"
        :id="titleId"
        :class="titleClass"
      >
        {{ operateLabel }}
      </div>
      <div
        @click="close"
        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
      >
        <el-icon>
          <CloseBold />
        </el-icon>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      size="default"
      status-icon
      class="mx-auto"
    >
      <el-form-item
        v-if="operateLabel == '重置密码' || operateLabel == '重置账号'"
        class="mx-1 font-bold"
        label="重置后的默认密码"
        prop="defaultPassword"
      >
        <el-input
          clearable
          placeholder="请设置重置后的默认密码"
          maxlength="16"
          autocomplete="off"
          v-model="ruleForm.defaultPassword"
          @input="filter(ruleForm.defaultPassword, 'defaultPassword')"
          oncut="return false"
          onpaste="return false"
          oncopy="return false"
        />
      </el-form-item>
      <el-form-item class="mx-1 font-bold" label="密码" prop="password">
        <el-input
          clearable
          placeholder="请输入密码"
          type="password"
          show-password
          maxlength="16"
          autocomplete="off"
          v-model="ruleForm.password"
          @input="filter(ruleForm.password, 'password')"
          oncut="return false"
          onpaste="return false"
          oncopy="return false"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button style="font-weight: bold" @click="resetCheckForm(ruleFormRef)">
          取消
        </el-button>
        <el-button style="font-weight: bold" type="primary" @click="confirm(ruleFormRef)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { CloseBold } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const operateDialogVisible = ref(false);
const ruleFormRef = ref(null);
const formElClone = ref(null);

const ruleForm = reactive({
  defaultPassword: "123456",
  password: "",
});

const rules = reactive({
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const props = defineProps({
  operateLabel: String,
});

const emit = defineEmits(["requestOperate"]);

const filter = (value, label) => {
  if (/[=\s"'+-]/.test(value)) {
    if (ruleForm[label]) {
      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
    }
  }
};

const handleClose = () => {
  operateDialogVisible.value = false;
  if (!ruleFormRef) return;
  formElClone.value = ruleFormRef.value;
  formElClone.value.resetFields();
};

const resetCheckForm = (formEl) => {
  operateDialogVisible.value = false;
  if (!formEl) return;
  formEl.resetFields();
};

const confirm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      emit("requestOperate");
      operateDialogVisible.value = false;
      formEl.resetFields();
    } else {
      ElMessage.error("提交失败！");
    }
  });
};

defineExpose({ operateDialogVisible, ruleForm });
</script>

<style scoped></style>