|
@@ -0,0 +1,306 @@
|
|
|
+<!--
|
|
|
+ * @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>
|