admin-frontend/src/views/Template/template/components/add/index.vue

<!--
 * @Author: 
 * @Date: 2023-03-01 19:20:44
 * @LastEditors: guicheng 1625811865@qq.com
 * @LastEditTime: 2024-07-10 12:05:52
 * @Description: kxs files
 * @filePath: 
-->
<script lang="ts">
// 声明额外的选项
export default {
  name: "Add"
};
</script>
<script setup lang="ts">
import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
// 接口列表实例
const UserUrl = ref(null)
// 获取当前板块接口列表
onMounted(async () => {
  UserUrl.value = await getGroupUrl(["User"]);
})
// 组件传参对象
const props = defineProps<{
  submit: Function;
  addVisible: {
    type: Boolean;
    default: false;
  };
  width: {
    type: Number;
    default: 50;
  };
}>();
// 表单数据
const UpdateForm = ref({
  RealName: "",
  AdminName: "",
  PassWord: "",
  RoleId: "",
  content: "",
  upLoadFile: "",
  upLoadImg: "",
});
// 表单实例
const ruleFormRef = ref()
// 富文本实例
const childComp = ref();
// 传参选项数据
// 选项卡参数(默认值为列表某项的id)
const activeId = ref("1");
const optionList = [
  { Id: "1", label: "推荐" },
  { Id: "2", label: "实物" },
  { Id: "3", label: "虚拟商品" }
];
// 穿梭框数据
const transferdata = ref([
  { key: 1, label: "1", disabled: false },
  { key: 2, label: "2", disabled: false },
  { key: 3, label: "3", disabled: false },
  { key: 4, label: "4", disabled: false },
  { key: 5, label: "5", disabled: false },
  { key: 6, label: "6", disabled: false }
]);
// 提交函数
const submit = async () => {
  // 表单校验拦截
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      //表单校验成功回调
      console.log('submit!')
      // 富文本实例赋值
      UpdateForm.value.content = childComp.value.valueHtml;

      // 需动态生成接口
      const { status, info }: any = http.Request({
        url: UserUrl.User.userSearch.method,
        method: UserUrl.User.userSearch.url,
        params: UpdateForm.value
      });
      if (status === "1") {
        //业务成功回调
        ElMessage({
          message: "新增成功",
          type: "success"
        });
        // 关闭新增弹窗;
        closeVisible()
      } else {
        //业务失败回调
        ElMessageBox.alert(info, "提示", {
          confirmButtonText: "关闭",
          type: "warning"
        });
      }
    } else {
      //表单校验失败回调
      ElMessage({
        message: "请输入完整信息",
        type: "error"
      });
    }
  })
};
// 选项卡切换回调
const handleClick = () => {
  console.log("切换选项卡");
};

//上传文件回调
const UploadFileCallBack = (url) => {
  ElMessage({
    message: `文件上传成功:${url}`,
    type: "success"
  });
  UpdateForm.value.upLoadFile = url;
}
//上传图片回调
const UploadImgCallBack = (url) => {
  ElMessage({
    message: `图片上传成功:${url}`,
    type: "success"
  });
  UpdateForm.value.upLoadImg = url;
}
// 表单校验规则
const rules = reactive({
  RealName: [
    // 必传
    { required: true, message: '请输入账户名称', trigger: 'blur' },
    // 长度
    { min: 3, max: 5, message: '长度为3-5', trigger: 'blur' },
    // 时间类型必填
    {
      type: 'date',
      required: true,
      message: '请选择正确时间类型',
      trigger: 'blur',
    },
    // 封装正则
    {
      validator: (rule: any, value: any, callback: any) => {
        verification.verificationName(value, callback)
      }, trigger: 'blur'
    },
    // 自定义正则
    {
      validator: (rule: any, value: any, callback: any) => {
        // 自定义正则替换
        const regular = /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-7]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/;
        RegularVerification(regular, value, callback)
      }, trigger: 'blur'
    },
  ],
})
// 关闭弹窗回调函数
const closeFn: any = inject("closeAddVisible");
const closeVisible = () => {
  // 清空表单项;
  ruleFormRef.value.resetFields();
  closeFn();
};
// 弹窗是否全屏
const isFullscreen = ref(false)
</script>

<template lang="pug">
.main
  el-dialog(v-model='props.addVisible' width="50%" :fullscreen="isFullscreen" title="新增" draggable @close="closeVisible")
    //- 有选项卡模板
    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
      el-tab-pane(label="选项卡一" name="1")
        el-form(ref="ruleFormRef" :model='UpdateForm' label-position="right" label-width="100px" :rules="rules")
          el-form-item(label='账户名称1' prop="RealName")
            el-input(v-model='UpdateForm.RealName' autocomplete='off'
              placeholder="请输入账户名称")
          el-form-item(label='用户名' prop="AdminName")
            el-input(v-model='UpdateForm.AdminName' autocomplete='off'
              placeholder="请输入用户名")
          el-form-item(label='密码' prop="PassWord")
            el-input(v-model='UpdateForm.PassWord' autocomplete='off'
              placeholder="请输入密码")
          el-form-item(label="角色:", prop="RoleId")
            el-select(
              v-model="UpdateForm.RoleId",
              placeholder="请选择用户角色",
              clearable    
            )
              el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
      el-tab-pane(label="选项卡二" name="2")
        el-form(:model='UpdateForm' label-position="right" label-width="100px")
          el-form-item(label='账户名称2' prop="RealName")
            el-input(v-model='UpdateForm.RealName' autocomplete='off'
              placeholder="请输入账户名称")
          el-form-item(label='用户名' prop="AdminName")
            el-input(v-model='UpdateForm.AdminName' autocomplete='off'
              placeholder="请输入用户名")
          el-form-item(label='密码' prop="PassWord")
            el-input(v-model='UpdateForm.PassWord' autocomplete='off'
              placeholder="请输入密码")
          el-form-item(label="角色:", prop="RoleId")
            el-select(
              v-model="UpdateForm.RoleId",
              placeholder="请选择用户角色",
              clearable    
            )
              el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
    //- 无选项卡模板
    el-form(:model='UpdateForm' label-position="right" label-width="100px")
      el-form-item(label='账户名称' prop="RealName")
        el-input(v-model='UpdateForm.RealName' autocomplete='off'
          placeholder="请输入账户名称")
      el-form-item(label='用户名' prop="AdminName")
        el-input(v-model='UpdateForm.AdminName' autocomplete='off'
          placeholder="请输入用户名")
      el-form-item(label='密码' prop="PassWord")
        el-input(v-model='UpdateForm.PassWord' autocomplete='off'
          placeholder="请输入密码")
      el-form-item(label="角色:", prop="RoleId")
        el-select(
          v-model="UpdateForm.RoleId",
          placeholder="请选择用户角色",
          clearable
        )
          el-option(:label="item.label", :value="item.Id" v-for="(item, index) in optionList")
      el-form-item(label='取色器' prop="PassWord")
        el-color-picker(v-model="UpdateForm.AdminName" show-alpha)
      el-form-item(label='数字输入框' prop="PassWord")
        el-input-number(v-model="UpdateForm.PassWord" :min="1" :max="10")
      el-form-item(label='滑块' prop="PassWord")
        el-slider(v-model="UpdateForm.PassWord")
      el-form-item(label='开关' prop="PassWord")
        el-switch(v-model="UpdateForm.PassWord")
      el-form-item(label='单选框' prop="PassWord")
        el-radio-group(v-model="UpdateForm.PassWord")
          el-radio(:value="1") Option A
          el-radio(:value="2") Option B
          el-radio(:value="3") Option C
      el-form-item(label='评分' prop="PassWord")
        el-rate(v-model="UpdateForm.PassWord")
      el-form-item(label='穿梭框' prop="AdminName")
        el-transfer(v-model="UpdateForm.AdminName" :data="transferdata")
      el-form-item(label='上传文件' prop="Uploadfile")
        el-input(v-model='UpdateForm.upLoadFile' autocomplete='off' disabled)
        Uploadfile(btntext="上传文件" :FilePath="UploadFileCallBack")
      el-form-item(label='上传图片' prop="UploadImg")
        UploadImg(:cropper="true" :callBack="UploadImgCallBack")
      el-form-item(label='富文本' prop="childComp")
        Editor(ref="childComp")
    .flex.justify-end
      el-button(
        :icon="useRenderIcon(Close)",
        @click="closeVisible"
      ) 关闭
      el-button(
        type="primary",
        :icon="useRenderIcon(Upload)",
        @click="submit(ruleFormRef)"
      ) 确认提交
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form-item__label) {
  font-weight: 700;
}

:deep(.el-pagination) {
  flex-flow: wrap;
}

:deep(.is-draggable) {
  max-height: 80vh;
  overflow: auto;
}

:deep(.el-dialog__header) {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

.collapsedom {
  padding: 0 20px;
  background-color: #fff;
}

.ovh-x {
  height: 40vh;
  overflow-y: auto;
}

:deep(.el-descriptions__header) {
  margin: 16px 0 !important;
}

.el-select {
  width: 100%;
}
</style>