20231122

src/api/index.ts

@@ -1 +1,2 @@
-export * from './module/login'
+export * from './module/login'
+export * from './module/user'

src/api/module/user.ts

@@ -0,0 +1,14 @@
+
+import $http from '@/utils/index'
+
+// 用户列表
+export const userList = (params: any) => $http.get('/sys-user', params)
+
+// 新增用户
+export const sysNewuser = (params: any) => $http.post('/sys-user', params)
+
+// 删除用户
+export const sysDeluser = (params: any) => $http.delete('/sys-user', params)
+
+// 更新用户
+export const sysputuser = (params: any) => $http.put('/sys-user', params)

src/components/loading.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { ElLoading } from 'element-plus'
+const loading = ElLoading.service({
+    lock: true,
+    text: 'Loading',
+    background: 'rgba(0, 0, 0, 0.7)',
+})
+</script>

src/components/popover.vue

@@ -3,7 +3,7 @@
     <div class="demo-ico__desc">
         <div class="demo-ico__desc_item" @click="exitFun(3)">
             <img src="@/assets/img/userInfo.gif" style="width: 30px;height: 30px;border-radius: 50%;cursor: pointer">
-                    <p class="demo-ico__desc_item_p">管理员，你好</p>
+                    <p class="demo-ico__desc_item_p">{{data.username}}，你好</p>
         </div>
 
         <el-divider direction="vertical" />
@@ -31,6 +31,14 @@
 </template>
 <script lang="ts" setup>
 import { exitFun } from "@/plugins/setFun";
+import { reactive } from "vue";
+import { useStore } from "vuex";
+const store = useStore()
+const data = reactive({
+    username:''
+})
+data.username = !store.state.userInfo.form.username?'游客':store.state.userInfo.form.username
+console.log()
 </script>
 <style lang="scss">
 .demo-ico__desc {

src/components/searchAdd.vue

@@ -2,15 +2,13 @@
 <template>
   <div class="searchAdd">
     <div class="searchAdd-left">
-      <marks></marks>
-      <el-form inline="true" style="max-width: 460px;">
-        <el-form-item :label="props.istitle">
-          <el-input v-model="data.input" :placeholder="props.isPlaceholder" clearable />
+      <!-- <marks></marks> -->
+      <el-form :inline="props.inline">
+        <slot name="searchConter"></slot>
+        <el-form-item>
+          <el-button type="primary" @click="subClick">{{ props.isButtom }}</el-button>
         </el-form-item>
       </el-form>
-      <el-form-item>
-        <el-button type="primary" @click="subClick">{{ props.isButtom }}</el-button>
-      </el-form-item>
     </div>
     <div class="searchAdd-right">
       <slot name="searchBtn"></slot>
@@ -26,14 +24,14 @@ const props = defineProps({
     type: String,
     default: () => '',
   },
-  istitle: {
-    type: String,
-    default: () => '',
-  },
-  isPlaceholder: {
-    type: String,
-    default: () => '',
+  inline: {
+    type: Boolean,
+    default: () => true,
   },
+  // isPlaceholder: {
+  //   type: String,
+  //   default: () => '',
+  // },
 })
 const data = reactive({
   input: ''
@@ -60,7 +58,7 @@ const subClick = () => {
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--y-margin);
-  &-left{
+  &-left {
     display: flex;
     align-items: center;
   }
@@ -69,7 +67,5 @@ const subClick = () => {
 .el-form-item {
   display: flex;
   --font-size: 14px;
-  margin-bottom: 0;
-  margin-left: 10px;
 }
 </style>

src/components/table.vue

@@ -56,7 +56,7 @@
         </el-table>
         <!-- 分页组件 -->
         <div style="margin-top: 20px;">
-            <el-pagination v-model:current-page="pageable.pageNum" v-model:page-size="pageable.pageNum"
+            <el-pagination v-model:current-page="pageable.pageNum" v-model:page-size="pageable.pageSize"
          :layout="props.layout" :total="pageable.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
         </div>
@@ -112,6 +112,10 @@ getTableList()
 // 接收 columns 并设置为响应式
 const tableColumns = ref<ColumnProps[]>(props.columns)
 
+//暴露方法
+defineExpose({
+  getTableList
+})
 
 </script>
 <style lang="scss">

src/hooks/useTable.ts

@@ -61,9 +61,9 @@ export const useTable = (
       ...initParam
     }
     requestApi(params).then(res => {
-      state.tableData = res.Data?.Data
+      state.tableData = res.data?.list
       // dataCallback && (state.tableData = dataCallback(res))
-      state.pageable.total = res.Data?.Num
+      state.pageable.total = parseInt(res.data?.count)
       // console.log('返回数据', res, state.tableData)
 
       if (res.Data?.RemainingTime) {

src/plugins/loading.ts

@@ -0,0 +1,19 @@
+import { ElLoading } from 'element-plus'
+let Loading:any = null
+/**
+ * 开始加载
+ */
+export function loadingFun(){
+    Loading = ElLoading.service({
+        lock: true,
+        text: 'Loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+    })
+}
+
+/**
+ * 结束加载
+ */
+export function closeFun(){
+    Loading.close()
+}

src/store/index.ts

@@ -5,7 +5,7 @@ export default createStore({
   plugins: [
     createPersistedState({
       key: 'stort',
-      paths: ['routerTag'] //, 'Tags'
+      paths: ['routerTag','userInfo'] //, 'Tags'
     })
   ],
   state: {
@@ -14,20 +14,24 @@ export default createStore({
       path: '/home',
       name: 'home'
     }],
+    userInfo:null
   },
   getters: {
     routerTag:state=>state.routerTag,
   },
   mutations: {
+    //登录存储账号密码
+    setUserInfo: (state, data:any) => {
+			state.userInfo = data
+		},
     addTab: (state, tab:any) => {
 			var tabrlue = state.routerTag.some(item => item.path === tab.path)
-      console.log('tabrlue',tabrlue)
+      // console.log('tabrlue',tabrlue)
 			if(!tabrlue){
 				state.routerTag.push(tab)
 			}
 		},
     delTab: (state, tab) => {
-      console.log('删除',tab)
 			state.routerTag.forEach(function(item,index) {
 				if(item.path === tab){
 					state.routerTag.splice(index,1)

src/utils/diffhost/hostData.ts

@@ -2,5 +2,6 @@
 /**
  * host1  8100端口
  * host2  8110端口
+ * 文档host开头的地址需要加入
  */
-export const HostList = ['/login']
+export const HostList = ['/login','/sys-user']

src/utils/diffhost/index.ts

@@ -4,7 +4,5 @@ import { HostList } from "./hostData";
  * @description：请求配置
  */
 export function diffhost(host:any) {
-    const b = HostList.find(item => item == host.url)
-    console.log('是否存在',b)
-    return b?true:false
+    return HostList.find(item => item == host.url)?true:false
 }

src/utils/index.ts

@@ -82,6 +82,7 @@ class RequestHttp {
 		function showStatus(params:any) {
 			switch (params.code) {
 				case 200:
+					ElMessage.success(params.msg)
 					break;
 				case ResultEnum.OVERDUE:
 					ElNotification.error({
@@ -108,9 +109,14 @@ class RequestHttp {
 	put<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
 		return this.service.put(url, params, _object)
 	}
+	//放在请求体
 	delete<T>(url: string, params?: any, _object = {}): Promise<ResultData<T>> {
-		return this.service.delete(url, { params, ..._object })
+		return this.service.delete(url,{ data:{...params}})
 	}
+	//拼接写法
+	// delete<T>(url: string, params?: any, _object = {}): Promise<ResultData<T>> {
+	// 	return this.service.delete(url,{params,..._object})
+	// }
 
 	
 }

src/views/company/index.vue

@@ -1,7 +1,13 @@
 <!--  -->
 <template>
     <div class="company">
-        <searchAdd isButtom="添加" istitle="添加一级目录" isPlaceholder="请输入一级目录"  @event="eventFn"/>
+        <searchAdd isButtom="查询">
+            <template #searchConter>
+                <el-form-item label="添加一级目录">
+                    <el-input v-model="datas.input" placeholder="请输入一级目录" clearable />
+                </el-form-item>
+            </template>
+        </searchAdd>
         <bg istitle="公司列表">
             <template #bg>
                 <el-tree :data="data" :props="defaultProps" accordion draggable>
@@ -35,12 +41,16 @@
 import bg from '@/components/bg.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import searchAdd from "@/components/searchAdd.vue";
+import { reactive } from "vue";
+const datas = reactive({
+  input:''
+})
 /**
  * 
  * @param val 子传值
  */
-const eventFn = (val:any) => {
-    console.log('/',val);
+const eventFn = (val: any) => {
+    console.log('/', val);
 }
 /**
  * 新增字节
@@ -160,9 +170,10 @@ const data: Tree[] = [
 
 </script>
 <style lang="scss">
-.company{
+.company {
     user-select: none;
 }
+
 .el-tree-node__content {
     height: 50px;
 }

src/views/login/index.vue

@@ -23,7 +23,7 @@
                         </el-checkbox-group>
                     </el-form-item>
                     <el-form-item>
-                        <loadingBtn text="登录" :data="data"/>
+                        <loadingBtn text="登录" :data="data" />
                     </el-form-item>
                 </el-form>
             </div>
@@ -32,25 +32,19 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, onMounted } from "vue";
-
+import { reactive } from "vue";
+import { useStore } from "vuex";
 import loadingBtn from './loadingBtn.vue'
-
-const data = reactive({
+const store = useStore()
+let data: any = reactive({
     form: {
         username: '',
         password: '',
     },
     type: []
 })
-onMounted(() => {
-    const info: any = sessionStorage.getItem('infos')
-    if (JSON.parse(info) && JSON.parse(info).type) {
-        data.form.username = JSON.parse(info).username
-        data.form.password = JSON.parse(info).password
-        data.type = JSON.parse(info).type
-    }
-})
+if (store.state.userInfo.type.length != 0) data = store.state.userInfo
+else Object.keys(data.form).forEach(key => {data.form[key] = ''})
 
 </script>
 <style lang="scss">

src/views/login/loadingBtn.vue

@@ -19,9 +19,12 @@
 </template>
 <script setup lang="ts">
 import { loginsetItem, JudgmentStatus } from "@/plugins/login";
+import { loadingFun, closeFun } from "@/plugins/loading";
+
 import { ElMessage ,ElNotification} from 'element-plus'
 import { login } from "@/api/index";
 import md5 from "js-md5";
+import { useStore } from "vuex";
 import router from "@/router";
 import { reactive } from "vue";
 
@@ -39,18 +42,20 @@ const props = defineProps({
 const data = reactive({
     loading:false
 })
-
+const store = useStore()
 const submitForm = async () => {
     const Jud = await JudgmentStatus(props.data.form)
     if (!Jud) {
         ElMessage.error('账号或者密码不能为空');
         return
     }
+    loadingFun()
     const froms = { ...props.data.form }
     // froms.password = md5(froms.password)
+    console.log('登录',store)
     const result: any = await login(froms)
     if (result.code == 200) {
-        console.log('登录',result)
+        store.commit('setUserInfo', props.data)
         sessionStorage.setItem('token', result.token)
         loginsetItem(props.data.type, props.data)
         ElNotification({
@@ -59,6 +64,7 @@ const submitForm = async () => {
             type: 'success',
         })
         setTimeout(() => {
+            closeFun()
             router.push('/home')
         }, 1500);
     }

src/views/sellManage/index.vue

@@ -1,30 +1,28 @@
 <!--  -->
 <template>
     <div class="sellManage">
-        <!-- <titles name="电池租用量/库存量统计"></titles> -->
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
-            <el-form-item label="疫苗名称">
-                <el-input v-model="formInline.user" placeholder="疫苗名称" clearable />
-            </el-form-item>
-            <el-form-item label="生产企业">
-                <el-select v-model="formInline.region" placeholder="生产企业" clearable>
-                    <el-option label="Zone one" value="shanghai" />
-                    <el-option label="Zone two" value="beijing" />
-                </el-select>
-            </el-form-item>
-            <el-form-item label="疫苗批号">
-                <el-input v-model="formInline.user" placeholder="疫苗批号" clearable />
-            </el-form-item>
-            <el-form-item label="疫苗效期">
-                <el-date-picker v-model="formInline.date" type="date" placeholder="疫苗效期" clearable />
-            </el-form-item>
-            <el-form-item label="出/入库日期">
-                <el-date-picker v-model="formInline.date" type="date" placeholder="出/入库日期" clearable />
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary">Query</el-button>
-            </el-form-item>
-        </el-form>
+        <searchAdd isButtom="添加" :inline="false">
+            <template #searchConter>
+                <el-form-item label="疫苗名称">
+                    <el-input v-model="formInline.user" placeholder="疫苗名称" clearable />
+                </el-form-item>
+                <el-form-item label="生产企业">
+                    <el-select v-model="formInline.region" placeholder="生产企业" clearable>
+                        <el-option label="Zone one" value="shanghai" />
+                        <el-option label="Zone two" value="beijing" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="疫苗批号">
+                    <el-input v-model="formInline.user" placeholder="疫苗批号" clearable />
+                </el-form-item>
+                <el-form-item label="疫苗效期">
+                    <el-date-picker v-model="formInline.date" type="date" placeholder="疫苗效期" clearable />
+                </el-form-item>
+                <el-form-item label="出/入库日期">
+                    <el-date-picker v-model="formInline.date" type="date" placeholder="出/入库日期" clearable />
+                </el-form-item>
+            </template>
+        </searchAdd>
         <tables :requestApi="CompanyTree" :columns="columns" :initParam="initParam" :dataCallback="dataCallback">
             <template #right="{ row }">
                 <el-button link type="primary" size="small">编辑</el-button>
@@ -42,12 +40,15 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import tables from "@/components/table.vue";
+import searchAdd from "@/components/searchAdd.vue";
+
+
 import titles from '@/components/titles.vue'
 import { CompanyTree } from "@/api/index";
 const formInline = reactive({
-  user: '',
-  region: '',
-  date: '',
+    user: '',
+    region: '',
+    date: '',
 })
 
 // 渲染表格
@@ -56,24 +57,24 @@ const columns: any = [
     { prop: 'T_D_name', label: '疫苗名称', width: 200 },
     { prop: 'T_sn', label: '生产企业', width: 200 },
     { prop: 'T_D_name', label: '批准文号', width: 200 },
-    { prop: 'T_sn', label: '批签发合格编号', width: 200  },
+    { prop: 'T_sn', label: '批签发合格编号', width: 200 },
 
-    { prop: 'T_D_name', label: '规格（剂/支或粒）', width: 200  },
-    { prop: 'T_sn', label: '生产日期', width: 200  },
+    { prop: 'T_D_name', label: '规格（剂/支或粒）', width: 200 },
+    { prop: 'T_sn', label: '生产日期', width: 200 },
     { prop: 'T_D_name', label: '疫苗批号', width: 200 },
     { prop: 'T_sn', label: '疫苗效期', width: 200 },
 
     { prop: 'T_D_name', label: '类型', width: 200 },
-    { prop: 'T_sn', label: '收入数量' , width: 200 },
+    { prop: 'T_sn', label: '收入数量', width: 200 },
     { prop: 'T_D_name', label: '发出数量', width: 200 },
-    { prop: 'T_sn', label: '结余数量', width: 200  },
+    { prop: 'T_sn', label: '结余数量', width: 200 },
     { prop: 'T_D_name', label: '单位', width: 200 },
-    { prop: 'T_sn', label: '剂型', width: 200  },
+    { prop: 'T_sn', label: '剂型', width: 200 },
 
     { prop: 'T_D_name', label: '领苗人', width: 200 },
-    { prop: 'T_sn', label: '发货单位' , width: 200 },
-    { prop: 'T_D_name', label: '收货单位', width: 200  },
-    { prop: 'T_sn', label: '入/出库日期' , width: 200 },
+    { prop: 'T_sn', label: '发货单位', width: 200 },
+    { prop: 'T_D_name', label: '收货单位', width: 200 },
+    { prop: 'T_sn', label: '入/出库日期', width: 200 },
     { prop: 'operation', label: '操作', fixed: 'right', width: 200 }
 
     // { prop: 'T_State', label: '状态', name: 'T_State' },
@@ -90,8 +91,5 @@ const dataCallback = async () => {
 /* @import url(); 引入css类 */
 
 .sellManage {
-    background: var(--y-card-background);
-    padding: var(--y-padding);
-    border-radius: var(--y-radius);
 }
 </style>

src/views/storageInquire/index.vue

@@ -1,7 +1,27 @@
 <!--  -->
 <template>
     <div class="storageInquire">
-        <searchAdd isButtom="查询" istitle="疫苗批号" isPlaceholder="请输入疫苗批号" @event="eventFn">
+        <searchAdd isButtom="查询" :inline="true">
+            <template #searchConter>
+                <el-form-item label="疫苗名称">
+                    <el-input v-model="formInline.user" placeholder="疫苗名称" clearable />
+                </el-form-item>
+                <el-form-item label="生产企业">
+                    <el-radio-group v-model="formInline.region">
+                        <el-radio label="Sponsor" />
+                        <el-radio label="Venue" />
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="疫苗批号">
+                    <el-input v-model="formInline.user" placeholder="疫苗批号" clearable />
+                </el-form-item>
+                <el-form-item label="疫苗效期">
+                    <el-date-picker v-model="formInline.date" type="date" placeholder="疫苗效期" clearable />
+                </el-form-item>
+                <el-form-item label="出/入库日期">
+                    <el-date-picker v-model="formInline.date" type="date" placeholder="出/入库日期" clearable />
+                </el-form-item>
+            </template>
         </searchAdd>
         <bg istitle="库存统计列表">
             <template #btn>
@@ -28,8 +48,13 @@ import searchAdd from "@/components/searchAdd.vue";
 import { CompanyTree } from "@/api/index";
 import tables from "@/components/table.vue";
 import bg from '@/components/bg.vue'
-import {Download,Tickets} from '@element-plus/icons-vue'
-
+import { Download, Tickets } from '@element-plus/icons-vue'
+import { reactive } from "vue";
+const formInline = reactive({
+    user: '',
+    region: '',
+    date: '',
+})
 // 渲染表格
 const columns: any = [
     { type: 'index', label: '编号', width: 80, },
@@ -73,6 +98,7 @@ const eventFn = (val: any) => {
         border-radius: var(--y-radius);
         display: flex;
         gap: 60px;
+
         &-bg {
             display: flex;
             flex-direction: column;

src/views/user/adduser.vue

@@ -0,0 +1,121 @@
+<template>
+    <!-- <el-button type="primary" @click="dialogFormVisible = true">添加</el-button> -->
+    <el-dialog v-model="dialogFormVisible" :title="data.str=='new'?'新增用户':'编辑用户'" :append-to-body="true" draggable width="20%"
+        style="min-width: 400px;">
+        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
+            <el-form-item label="系统姓名" :label-width="130" prop="nickName">
+                <el-input v-model="ruleForm.nickName" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="登录用户名" :label-width="130" prop="username" v-if="data.str!='red'?true:false">
+                <el-input v-model="ruleForm.username" autocomplete="off"/>
+            </el-form-item>
+            <el-form-item label="登录密码" :label-width="130" prop="password" v-if="data.str!='red'?true:false">
+                <el-input v-model="ruleForm.password" type="password" show-password autocomplete="off" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogFormVisible = false">Cancel</el-button>
+                <el-button type="primary" @click="submitForm(ruleFormRef)">
+                    确定
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { sysNewuser,sysputuser } from "@/api";
+const dialogFormVisible = ref(false)
+const ruleFormRef = ref<FormInstance>()
+const emit = defineEmits<{(e: 'event', myvalue: string): void}>()
+const data = reactive({
+    str:''
+})
+
+interface RuleForm {
+    nickName: string
+    username: string
+    password: string
+}
+
+const ruleForm = reactive<RuleForm>({
+    nickName: "",
+    username: "",
+    password: "",
+})
+
+const rules = reactive<FormRules<RuleForm>>({
+    nickName: [{
+        required: true,
+        message: '请填写姓名',
+        trigger: 'change',
+        pattern: /\S/,
+    },
+
+    ],
+    username: [{
+        required: true,
+        message: '请填写用户名（不能填写中文）',
+        trigger: 'change',
+        pattern: /^[a-zA-Z0-9_]{0,}$/,
+    },
+    ],
+    password: [{
+        required: true,
+        message: '请填写密码（5-18位）',
+        trigger: 'change',
+        // pattern: /^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])).{8,18}$/,//大写+小写+数字
+        // pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d].{7,18}$/,//字母+数字
+        pattern: /\S.{5,18}$/
+    },
+    ],
+})
+const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            if(data.str=='new') setuserApi(); 
+            else putuserApi()
+            
+        }
+    })
+}
+/**
+ * 重置
+ * @param formEl 重置
+ */
+const resetForm = (formEl:any) => {
+    console.log('重置',formEl)
+  if (!formEl) return
+  formEl.resetFields()
+}
+
+//新增用户
+const setuserApi = async ()=>{
+    const result:any = await sysNewuser(ruleForm)
+    if (result.code==200){
+        dialogFormVisible.value = false;
+        emit('event','true')
+    }
+}
+//更新用户
+const putuserApi = async ()=>{
+    const result:any = await sysputuser(ruleForm)
+    if (result.code==200){
+        dialogFormVisible.value = false;
+        emit('event','true')
+    }
+}
+
+
+//暴露方法
+defineExpose({
+    dialogFormVisible,ruleForm,data,resetForm,ruleFormRef
+})
+</script>
+<style lang="scss">
+/* @import url(); 引入css类 */
+</style>

src/views/user/index.vue

@@ -1,37 +1,108 @@
 <template>
   <div class="user">
-    <searchAdd isButtom="查询" istitle="用户名称" isPlaceholder="请输入用户名称" @event="eventFn" />
+    <searchAdd isButtom="查询" @event="eventFun">
+      <template #searchConter>
+        <el-form-item label="用户名">
+          <el-input v-model="data.initParam.username" placeholder="请输入用户名" />
+        </el-form-item>
+      </template>
+      <template #searchBtn to="body">
+        <el-button type="primary" @click="addtFun">添加</el-button>
+        <!-- <adduser ref="adduserRef" @event="eventFun" /> -->
+      </template>
+    </searchAdd>
     <div class="user-conter-table">
-        <bg istitle="用户列表">
-          <template #bg>
-            <tables :requestApi="CompanyTree" :columns="columns" :initParam="initParam">
+      <bg istitle="用户列表">
+        <template #bg>
+          <tables ref="TableRef" :requestApi="userList" :columns="columns" :initParam="data.initParam">
             <template #right="{ row }">
-              <el-button type="primary">编辑</el-button>
-              <el-button type="danger">删除</el-button>
+              <el-button type="primary" @click="RedactFun(row)">编辑</el-button>
+              <el-button type="danger" @click="removeFun(row)">删除</el-button>
             </template>
           </tables>
-          </template>
-        </bg>
-      </div>
+        </template>
+      </bg>
+    </div>
+    <adduser ref="adduserRef" @event="eventFun" :str="data.str"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import searchAdd from "@/components/searchAdd.vue";
-import { CompanyTree } from "@/api/index";
+import { userList, sysDeluser } from "@/api";
 import tables from "@/components/table.vue";
 import bg from '@/components/bg.vue'
-import progres from './progres.vue'
+import adduser from './adduser.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { reactive, ref, nextTick } from "vue";
+const TableRef = ref()
+const adduserRef = ref()
+//函数
+const addtFun = async () => {
+  adduserRef.value.dialogFormVisible = true
+  adduserRef.value.resetForm(adduserRef.value.ruleFormRef)
+  adduserRef.value.data.str = 'new'
+  const result = Object.keys(adduserRef.value.ruleForm).includes("id")
+  if(result)delete adduserRef.value.ruleForm.id
+  Object.keys(adduserRef.value.ruleForm).forEach(key=>{
+    adduserRef.value.ruleForm[key] = ''
+  })
+}
+
+//编辑
+const RedactFun = async (data: any) => {
+  adduserRef.value.resetForm(adduserRef.value.ruleFormRef)
 
+  adduserRef.value.data.str = 'red'
+  adduserRef.value.dialogFormVisible = true
+  adduserRef.value.ruleForm.nickName = data.nickName
+  adduserRef.value.ruleForm.username = data.username
+  adduserRef.value.ruleForm.id = data.id
+  adduserRef.value.ruleForm.password = ""
+}
+//删除
+const removeFun = async (data: any) => {
+  console.log('删除', data)
+  ElMessageBox.confirm('删除用户操作，时候继续删除?', '提示', {
+    confirmButtonText: '立即删除',
+    cancelButtonText: 'Cancel',
+    type: 'warning',
+    center: true,
+  }).then(async () => {
+    setDeluserApi(data.id)
+  }).catch(() => {
+    ElMessage.info('已取消删除操作！')
+  })
+}
+//删除Api
+const setDeluserApi = async (data: any) => {
+  const result:any = await sysDeluser({ id: data, id2: data })
+  if (result.code == 200) {
+    nextTick(() => {
+      TableRef.value?.getTableList()
+    })
+  }
+}
+
+
+const eventFun = async (data: any) => {
+  nextTick(() => {
+    TableRef.value?.getTableList()
+  })
+}
 
 // 渲染表格
 const columns: any = [
   { type: 'index', label: '编号', width: 80, },
-  { prop: 'T_D_name', label: '名称', width: 400 },
+  { prop: 'nickName', label: '名称', width: 200 },
+  { prop: 'username', label: '用户名', width: 200 },
   { prop: 'operation', label: '操作', fixed: 'right', 'min-width': 200 }
 ]
-//请求参数
-const initParam = {name: '' }
+
+const data = reactive({
+  initParam : { username: '' },//请求参数
+  str: ''
+})
 /**
  * 
  * @param val 子传值
@@ -48,6 +119,7 @@ const eventFn = (val: any) => {
     // grid-gap: 20px;
     gap: 20px;
     display: flex;
+
     &-table {
       flex: .6;
     }