修改组件完善

src/views/Template/template/components/add/index.vue

@@ -2,7 +2,7 @@
  * @Author: 
  * @Date: 2023-03-01 19:20:44
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-03-08 17:24:39
+ * @LastEditTime: 2024-03-08 17:43:01
  * @Description: kxs files
  * @filePath: 
 -->
@@ -24,7 +24,7 @@ const props = defineProps<{
     type: Function;
     default: () => {};
   };
-  AddVisible: {
+  addVisible: {
     type: Boolean;
     default: false;
   };
@@ -70,22 +70,22 @@ const submit = async () => {
     });
   };
 };
-const closefn: any = inject('closevisible');
+const closeFn: any = inject('closeAddVisible');
 // 关闭弹窗回调函数
-const closevisible = () => {
+const closeVisible = () => {
   UpdateForm.value = {
     AdminName: "",
     RealName: "",
     RoleId: "",
     PassWord: "",
   };
-  closefn();
+  closeFn();
 };
 </script>
 
 <template lang="pug">
 .main
-  el-dialog(v-model='props.AddVisible' width="50%" title="新增" @close="closevisible()")
+  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")
@@ -148,7 +148,7 @@ const closevisible = () => {
     el-button(
       :icon="useRenderIcon(Close)",
       :loading="loading",
-      @click="closevisible()"
+      @click="closeVisible()"
     ) 关闭
     el-button(
       type="primary",

src/views/Template/template/components/edit/index.vue

@@ -0,0 +1,196 @@
+<!--
+ * @Author: 
+ * @Date: 2023-03-01 19:20:44
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-03-08 18:01:37
+ * @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 Upload from "@iconify-icons/ri/upload-2-fill"
+import Close from "@iconify-icons/ri/close-fill"
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    type: Object;
+    default: {};
+  };
+}>();
+// 表单数据
+let UpdateForm: any = ref({
+  RealName: "",
+  AdminName: "",
+  PassWord: "",
+  RoleId: "",
+});
+// 传参选项数据
+const optionList = [
+  { Id: '1', label: '推荐' },
+  { Id: '2', label: '实物' },
+  { Id: '3', label: '虚拟商品' },
+]
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async () => {
+  const { status, info }: any = await postUserList(UpdateForm.value);
+  if (status === "1") {
+    ElMessage({
+      message: "修改成功",
+      type: "success"
+    });
+    UpdateForm.value = {
+      AdminName: "",
+      RealName: "",
+      RoleId: "",
+      PassWord: "",
+    };
+  } else {
+    ElMessageBox.alert(info, "提示", {
+      confirmButtonText: "关闭",
+      type: "warning"
+    });
+  };
+};
+// 关闭弹窗回调函数
+const closeVisible = inject('closeEditVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { data, info }: any = await postUserList(props.formData.id);
+  UpdateForm.value = data
+  // 通过表格项获取数据
+  UpdateForm.value = props.formData
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeVisible()" @open="openVisible")
+    //- 有选项卡模板
+    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-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>

src/views/Template/template/hook.tsx

@@ -56,6 +56,26 @@ export function useUser() {
     console.log("handleSelectionChange", val);
     onSearch()
   }
+  // 搜索列表
+  async function onSearch(type = 'search') {
+    if (type == 'search' && !Object.values(form).some(item => !!item)) {
+      return ElMessage({
+        message: "请输入查询条件",
+        type: "error"
+      });
+    };
+    loading.value = true;
+    const { data, other }: any = await getRoleList({ ...form, page_size: pagination.pageSize, page_num: pagination.currentPage });
+    dataList.value = data;
+    pagination.total = other.Count;
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+  onMounted(() => {
+    // onSearch();
+  });
+
   // 删除
   function handleDelete(row) {
     ElMessageBox.confirm(
@@ -83,34 +103,19 @@ export function useUser() {
       };
     })
   }
-  const AddVisible = ref(false);
   // 新增
+  const addVisible = ref(false);
   function handleAdd() {
-    AddVisible.value = true;
+    addVisible.value = true;
   };
   // 修改
-  function handleUpdate() {
+  const editVisible = ref(false);
+  const editFormData = ref({});
+  function handleUpdate(row) {
+    editVisible.value = true;
+    // 表格数据赋值
+    editFormData.value = row;
   }
-  // 搜索列表
-  async function onSearch(type = 'search') {
-    if (type == 'search' && !Object.values(form).some(item => !!item)) {
-      return ElMessage({
-        message: "请输入查询条件",
-        type: "error"
-      });
-    };
-    loading.value = true;
-    const { data, other }: any = await getRoleList({ ...form, page_size: pagination.pageSize, page_num: pagination.currentPage });
-    dataList.value = data;
-    pagination.total = other.Count;
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
-  }
-  onMounted(() => {
-    // onSearch();
-  });
-
   return {
     form,
     loading,
@@ -124,6 +129,8 @@ export function useUser() {
     handleAdd,
     handleUpdate,
     handleDelete,
-    AddVisible,
+    addVisible,
+    editVisible,
+    editFormData,
   };
 }

src/views/Template/template/index.vue

@@ -11,6 +11,7 @@ import { hasAuth } from "@/router/utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Add from "./components/add/index.vue"
+import Edit from "./components/edit/index.vue"
 import Search from "@iconify-icons/ep/search";
 import All from "@iconify-icons/ep/refresh-left";
 import Addicon from "@iconify-icons/ep/document-add";
@@ -29,12 +30,20 @@ const {
   handleAdd,
   handleUpdate,
   handleDelete,
-  AddVisible,
+  addVisible,
+  editVisible,
+  editFormData,
 } = useUser();
-const visible = () => {
-  AddVisible.value = false
+// 关闭修改
+const closeEditVisible = () => {
+  editVisible.value = false
 }
-provide('closevisible', visible)
+provide('closeEditVisible', closeEditVisible)
+// 关闭添加
+const closeAddVisible = () => {
+  addVisible.value = false
+}
+provide('closeAddVisible', closeAddVisible)
 </script>
 
 <template lang="pug">
@@ -73,7 +82,8 @@ provide('closevisible', visible)
     //- 表格组件
     PureTableBar(title="后台角色管理", @refresh="onSearch" )
       template(#buttons)
-        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd(row)") 新增
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleUpdate(row)") 编辑
       template(v-slot="{ size, checkList }")
         pure-table(stripe 
           border,
@@ -116,7 +126,8 @@ provide('closevisible', visible)
                       :icon="useRenderIcon(Delete)"
                       v-if="hasAuth(['delete'])"
                     ) 删除
-    Add(:AddVisible.async="AddVisible")
+    Add(:addVisible="addVisible")
+    Edit(:editVisible="editVisible" :formData="editFormData")
                     
 </template>