pay-ui/agent-ui/views/business/template/hook/template-edit.vue

<script setup lang="ts">
import { reactive, ref } from "vue";
import * as api from "@/api/sys/user";
import { message } from "@/utils/message";
import type { FormInstance } from "element-plus";
import { cloneDeep } from "@pureadmin/utils";

const title = "";
defineOptions({ name: "templateEdit" });
const isDetail = ref(false);
const formRef = ref<FormInstance>();
// 初始化数据
const initData = {
  username: undefined,
  password: undefined,
  status: 1
};

// 表单校验规则
const formRules = {};

// 页面数据
const pageData: any = reactive({
  dialogVisible: false,
  title: "",
  formLoading: false,
  mode: "add",
  isUpdate: false,
  // 表单数据
  formData: initData,
  formRules: formRules
});
// 暴露给父级调用
const emits = defineEmits(["ok", "close"]);
// 打开弹窗
const open = (data: any, dataSource: any, mode: string) => {
  pageData.formData = cloneDeep(data) || initData;
  if (mode === "edit") {
    pageData.title = `${title} - 编辑`;
    isDetail.value = false;
  } else if (mode === "detail") {
    pageData.title = `${title} - 查看`;
    isDetail.value = true;
  } else {
    pageData.title = `${title} - 新增`;
    isDetail.value = false;
  }
  pageData.dataSource = dataSource;
  pageData.isUpdate = !!pageData.formData.id;
  pageData.dialogVisible = true;
};
// 关闭弹窗
const handleClose = () => {
  pageData.dialogVisible = false;
  emits("close");
};
// 确定并关闭弹窗
const handleConfirm = () => {
  formRef.value!.validate((isValid: boolean) => {
    if (isValid) {
      const { id } = pageData.formData;
      if (id) {
        _update();
      } else {
        _save();
      }
    } else {
      message("表单校验失败", { type: "warning" });
    }
  });
};
const _save = () => {
  pageData.formLoading = true;
  const _data = cloneDeep(pageData.formData);
  api
    .save(_data)
    .then((res: any) => {
      if (res.success) {
        _confirm();
      } else {
        message(res.message, { type: "warning" });
      }
    })
    .finally(() => {
      pageData.formLoading = false;
    });
};
const _update = () => {
  pageData.formLoading = true;
  const _data = cloneDeep(pageData.formData);
  api
    .update(pageData.formData.id, _data)
    .then((res: any) => {
      if (res.success) {
        _confirm();
      } else {
        message(res.message, { type: "warning" });
      }
    })
    .finally(() => {
      pageData.formLoading = false;
    });
};
const _confirm = () => {
  pageData.dialogVisible = false;
  emits("ok");
};
defineExpose({ open });
</script>

<template>
  <el-dialog v-model="pageData.dialogVisible" destroy-on-close :width="500">
    <template #header>
      <el-text class="mx-1" type="primary" size="large">{{
        pageData.title
      }}</el-text>
    </template>
    <div class="el-dialog-content">
      <el-form
        ref="formRef"
        :model="pageData.formData"
        style="width: 90%; margin: 20px auto 0"
        label-width="auto"
        :rules="pageData.formRules"
        :loading="pageData.formLoading"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="pageData.formData.username"
            clearable
            placeholder="请输入名称"
            size="small"
            :readonly="isDetail"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button v-if="!isDetail" @click="handleClose">取消</el-button>
      <el-button v-if="!isDetail" type="primary" @click="handleConfirm"
        >确认</el-button
      >
    </template>
  </el-dialog>
</template>