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

<!--
 * @Author: 
 * @Date: 2023-03-01 19:20:44
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-03-15 16:42:54
 * @Description: kxs files
 * @filePath: 
-->
<script lang="ts">
// 声明额外的选项
export default {
  name: "Add"
};
</script>
<script setup lang="ts">
import { inject, ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { postUserList } from "@/api/system";
import { ElMessage, ElMessageBox } from "element-plus";
import { http } from "@/utils/http";
// 获取URLLIST
import { getGroupUrl } from "@/utils/getUrl/getUrl"
// 获取当前板块接口列表
import Upload from "@iconify-icons/ri/upload-2-fill"
import Close from "@iconify-icons/ri/close-fill"

const props = defineProps<{
  submit: Function;
  addVisible: {
    type: Boolean;
    default: false;
  };
  width: {
    type: Number;
    default: 50;
  };
}>();
// 表单数据
let UpdateForm = ref({
  RealName: "",
  AdminName: "",
  PassWord: "",
  RoleId: "",
});
// 传参选项数据
const optionList = [
  { Id: '1', label: '推荐' },
  { Id: '2', label: '实物' },
  { Id: '3', label: '虚拟商品' },
]
// 选项卡参数(默认值为列表某项的id)
const activeId = ref('1')
// 穿梭框数据
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 () => {
  const UserUrl = await getGroupUrl(['User']);
  const { status, info }: any = http.request(UserUrl.User.userSearch.method, UserUrl.User.userSearch.url, UpdateForm.value);
  if (status === "1") {
    ElMessage({
      message: "新增成功",
      type: "success"
    });
    UpdateForm.value = {
      AdminName: "",
      RealName: "",
      RoleId: "",
      PassWord: "",
    };
  } else {
    ElMessageBox.alert(info, "提示", {
      confirmButtonText: "关闭",
      type: "warning"
    });
  };
};
const closeFn: any = inject('closeAddVisible');
// 关闭弹窗回调函数
const closeVisible = () => {
  UpdateForm.value = {
    AdminName: "",
    RealName: "",
    RoleId: "",
    PassWord: "",
  };
  closeFn();
};
</script>

<template lang="pug">
.main
  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
    //- 有选项卡模板
    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
      el-tab-pane(label="选项卡一" name="1")
        el-form(:model='UpdateForm' label-position="right" label-width="100px")
          el-form-item(label='账户名称' prop="RealName")
            el-input(v-model='UpdateForm.RealName' autocomplete='off' class="!w-[230px]"
              placeholder="请输入账户名称")
          el-form-item(label='用户名' prop="AdminName")
            el-input(v-model='UpdateForm.AdminName' autocomplete='off' class="!w-[230px]"
              placeholder="请输入用户名")
          el-form-item(label='密码' prop="PassWord")
            el-input(v-model='UpdateForm.PassWord' autocomplete='off' class="!w-[230px]"
              placeholder="请输入密码")
          el-form-item(label="角色:", prop="RoleId")
            el-select(
              v-model="UpdateForm.RoleId",
              placeholder="请选择用户角色",
              clearable,
              class="!w-[230px]"
            )
              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='账户名称' prop="RealName")
            el-input(v-model='UpdateForm.RealName' autocomplete='off' class="!w-[230px]"
              placeholder="请输入账户名称")
          el-form-item(label='用户名' prop="AdminName")
            el-input(v-model='UpdateForm.AdminName' autocomplete='off' class="!w-[230px]"
              placeholder="请输入用户名")
          el-form-item(label='密码' prop="PassWord")
            el-input(v-model='UpdateForm.PassWord' autocomplete='off' class="!w-[230px]"
              placeholder="请输入密码")
          el-form-item(label="角色:", prop="RoleId")
            el-select(
              v-model="UpdateForm.RoleId",
              placeholder="请选择用户角色",
              clearable,
              class="!w-[230px]"
            )
              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' class="!w-[230px]"
          placeholder="请输入账户名称")
      el-form-item(label='用户名' prop="AdminName")
        el-input(v-model='UpdateForm.AdminName' autocomplete='off' class="!w-[230px]"
          placeholder="请输入用户名")
      el-form-item(label='密码' prop="PassWord")
        el-input(v-model='UpdateForm.PassWord' autocomplete='off' class="!w-[230px]"
          placeholder="请输入密码")
      el-form-item(label="角色:", prop="RoleId")
        el-select(
          v-model="UpdateForm.RoleId",
          placeholder="请选择用户角色",
          clearable,
          class="!w-[230px]"
        )
          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-button(
      :icon="useRenderIcon(Close)",
      :loading="loading",
      @click="closeVisible()"
    ) 关闭
    el-button(
      type="primary",
      :icon="useRenderIcon(Upload)",
      :loading="loading",
      @click="submit"
    ) 确认提交
</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;
}
</style>