用户组

src/views/safetyManagement/groupConfig/QueryForm.vue

+<script setup lang="ts" name="QueryForm">
+import { computed,ref,watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue'
+import {
+  Plus
+} from '@element-plus/icons-vue'
+import { color } from 'echarts'
+// import { useDict } from '@/utils/dict'
+// import { listDept } from '@/api/system/dept'// 部门
+
+
+
+// const { approve_status, invoice_status} = useDict('approve_status', 'invoice_status')
+const emit = defineEmits(['update:modelValue', 'query', 'reset','handleAdd'])
+const invoice_status_filter = ref([])
+const employeesList = ref([])
+const props = defineProps<{
+  modelValue: any
+}>()
+
+
+
+const queryForm = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val: any) {
+    console.log('query computed', val)
+    emit('update:modelValue', val)
+  }
+})
+
+// 搜索
+function onSearch() {
+  emit('query')
+}
+
+// 重置
+function onReset(formRef: FormInstance) {
+  queryForm.value.groupname = ''
+  queryForm.value.remark = ''
+
+  emit('reset', formRef)
+}
+
+function handleAdd() {
+  emit('handleAdd')
+}
+
+</script>
+
+<template>
+  <!-- el-form -->
+  <page-wrapper-search
+    :model="queryForm"
+    :extraButtons="[
+      {
+        text: '新增',
+        icon: Plus,
+        color: 'rgba(0, 189, 207, 1)',
+        type: 'success',
+        class: 'btn-fff',
+        onClick: handleAdd
+      }
+    ]"
+    @search="onSearch"
+    @reset="onReset">
+    <el-form-item label="用户组名">
+            <el-input v-model="queryForm.groupname" clearable placeholder="请输入用户组名"></el-input>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="queryForm.remark" clearable placeholder="请输入备注"></el-input>
+          </el-form-item>
+  </page-wrapper-search>
+
+
+
+    <!-- <page-wrapper-search
+      :model="queryForm"
+      :extraButtons="[
+        {
+          text: '导出',
+          icon: Edit,
+          type: 'success',
+          onClick: handleExport
+        },
+        {
+          text: '打印',
+          type: 'warning',
+          onClick: handlePrint
+        }
+      ]"
+      @search="onSearch"
+      @reset="onReset">
+      <el-form-item label="项目名称" prop="proName">
+        <el-input
+            v-model="queryForm.proName"
+            placeholder="请输入项目名称"
+            clearable
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="note">
+        <el-input
+            v-model="queryForm.note"
+            placeholder="请输入备注"
+            clearable
+        />
+      </el-form-item>
+    </page-wrapper-search> -->
+</template>
+
+<style scoped lang="scss">
+:deep(.btn-fff){
+  span{
+    color: #fff;
+  }
+}
+</style>

src/views/safetyManagement/groupConfig/edit.vue

@@ -3,14 +3,14 @@
     title="编辑用户组"
     :model-value="visible"
     @update:model-value="$emit('update:visible', $event)"
-    width="600px"
     :close-on-click-modal="false"
     append-to-body
     destroy-on-close
     :align-center="true"
     :fullscreen="false"
     @close="handleClose"
-    class="user-edit-dialog"
+    class="custom-dialog"
+    width="900px"
   >
     <div class="dialog-content" style="padding: 20px; padding-bottom: 80px;height: 700px;overflow-y: auto;">
       <el-form
@@ -77,12 +77,8 @@
       </div>
       </div>
     <template #footer>
-      <div class="dialog-footer">
-        <div class="footer-buttons">
-          <el-button @click="handleClose">取 消</el-button>
-          <el-button type="primary" @click="handleSubmit">确 定</el-button>
-        </div>
-      </div>
+      <el-button  type="danger" @click="handleClose">取 消</el-button>
+      <el-button type="primary"  color="rgba(33, 103, 217, 1)" @click="handleSubmit">确 定</el-button>
     </template>
   </el-dialog>
 </template>

src/views/safetyManagement/groupConfig/index.vue

-<template>
-  <div class="user-config">
-    <!-- 标题 -->
-    <div class="title">
-    <el-icon><User /></el-icon>
-      用户组
-    </div>
-
-    <!-- 搜索和操作区域 -->
-    <div class="search-area">
-      <el-form :inline="true" :model="searchForm" class="search-form">
-        <div class="left-area">
-          <el-form-item label="用户组名:">
-            <el-input v-model="searchForm.groupname" clearable placeholder="请输入用户组名"></el-input>
-          </el-form-item>
-          <el-form-item label="备注:">
-            <el-input v-model="searchForm.remark" clearable placeholder="请输入备注"></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
-          </el-form-item>
-        </div>
-        <div class="right-area">
-          <el-button type="primary" icon="Plus" @click="handleAdd">新增组</el-button>
-        </div>
-      </el-form>
-    </div>
-
-    <!-- 用户列表 -->
-    <div class="user-list">
-      <div class="user-grid">
-        <div v-for="(user, index) in groupList" :key="index" class="user-card">
-          <div class="card-left-bar"></div>
-          <div class="user-info">
-            <div class="info">
-              <div class="name">{{ user.groupname }}</div>
-              <div class="remark">
-                <el-icon><Edit /></el-icon>
-                备注 {{ user.remark }}
-              </div>
-            </div>
-            <div class="avatar">
-              <el-avatar :size="80" icon="UserFilled" style="background: #f6f8fa; color: #d3d8e0;" />
-            </div>
-          </div>
-          <div class="card-divider"></div>
-          <div class="card-bottom">
-            <div>
-              <el-icon><Clock /></el-icon>
-              {{ user.createtime || '' }}
-            </div>
-            <el-icon class="lock"><Lock /></el-icon>
-          </div>
-          <div class="hover-mask">
-            <div class="operation-buttons">
-              <div class="operation-btn" @click="handleDelete(user)">
-                <el-icon><Delete /></el-icon>
-                <span>删除</span>
-              </div>
-              <div class="operation-btn" @click="handleEdit(user)">
-                <el-icon><FolderOpened /></el-icon>
-                <span>编辑</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 分页 -->
-    <div class="pagination">
-      <div class="pagination-info">
-        共有记录 {{ total }} 条，每页显示 {{ pageSize }} 条，共 {{ Math.ceil(total / pageSize) || 1 }} 页
-      </div>
-      <el-pagination
-        background
-        layout="prev, pager, next, jumper"
-        :total="total"
-        :current-page.sync="currentPage"
-        :page-size="pageSize"
-        @current-change="handlePageChange">
-      </el-pagination>
-    </div>
-
-    <!-- 编辑弹窗 -->
-    <group-edit
-      v-model:visible="editVisible"
-      :form-data="editData"
-      @success="handleEditSuccess"
-    />
-  </div>
-</template>
+<script setup lang="ts" name="projectManageIndex">
+import { ref } from 'vue'
+import list from './list.vue'
 
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
-import { ElMessageBox } from 'element-plus'
-import GroupEdit from './edit.vue'
-import { query, del } from '@/api/safetyManagement/groupConfig.js'
 
-const searchForm = reactive({
-  name: '',
-  groupname: '',
-  remark: ''
-})
-const groupList = ref([
-  {
-    // realname: 'admin',
-    // groupname: 'admin',
-    // remark: ''
-  }
-])
-const total = ref(1)
-const currentPage = ref(1)
-const pageSize = ref(8)
-const editVisible = ref(false)
-const editData = ref(null)
-
-const getList = async () => {
-  try {
-    const res = await query({
-      groupname: searchForm.groupname,
-      remark: searchForm.remark,
-      page: currentPage.value,
-      rows: pageSize.value
-    })
-    if (res.code === 'POP_00014') {
-      groupList.value = res.data.list || []
-      total.value = res.data.total || 0
-    }
-  } catch (error) {
-    console.error('获取用户组列表失败', error)
-  }
+const widget = {
+  list: list
 }
 
-const handleSearch = () => {
-  currentPage.value = 1
-  getList()
-}
-const handleAdd = () => {
-  editData.value = null
-  editVisible.value = true
-}
-const handlePageChange = (page) => {
-  currentPage.value = page
-  getList()
-}
-const handleDelete = async (row) => {
-  ElMessageBox.confirm('确认删除该用户组吗？', '提示', {
-    type: 'warning'
-  }).then(async () => {
-    // 调用删除接口
-    try {
-      const res = await del({ groupid: row.id })
-      if (res.code === 'POP_00014') {
-        getList()
-      }
-    } catch (error) {
-      console.error('删除用户组失败', error)
-    }
-  }).catch(() => {})
-}
-const handleEdit = (row) => {
-  editData.value = { ...row }
-  editVisible.value = true
-}
-const handleEditSuccess = () => {
-  editVisible.value = false
-  getList()
+const page = ref('list')
+const params = ref({})
+
+function onChangePage(val: string, param?: any) {
+  page.value = val
+  params.value = param ?? {}
 }
-onMounted(() => {
-  getList()
-})
 </script>
 
-<style lang="scss" scoped>
-.user-config {
-  padding: 20px;
-
-  .title {
-    font-size: 18px;
-    color: #333;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    
-    i {
-      color: #409EFF;
-      margin-right: 8px;
-      font-size: 20px;
-    }
-  }
-
-  .search-area {
-    background: #fff;
-    padding: 20px;
-    border-radius: 4px;
-    margin-bottom: 20px;
-    
-    .search-form {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .left-area {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-      }
-
-      .right-area {
-        margin-left: 20px;
-      }
-    }
-    
-    .el-form-item {
-      margin-bottom: 0;
-    }
-  }
-
-  .user-list {
-    margin-bottom: 20px;
-
-    .user-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-      gap: 20px;
-    }
-
-    .user-card {
-      background: #fff;
-      border-radius: 12px;
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
-      overflow: hidden;
-      position: relative;
-      padding: 0;
-      border: none;
-      transition: box-shadow 0.2s;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-
-      &:hover {
-        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
-      }
-
-      &:hover .hover-mask {
-        display: flex !important;
-      }
-    }
-
-    .card-left-bar {
-      position: absolute;
-      left: 0;
-      top: 24px;
-      bottom: 24px;
-      width: 8px;
-      background: #409EFF;
-      border-radius: 4px;
-    }
-
-    .user-info {
-      display: flex;
-      align-items: flex-start;
-      padding: 24px 24px 0 24px;
-      position: relative;
-      height: auto;
-      cursor: pointer;
-
-      .avatar {
-        margin-left: auto;
-        margin-right: 0;
-        width: 80px;
-        height: 80px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .info {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-
-        .name {
-          font-size: 15px;
-          font-weight: 600;
-          color: #409EFF;
-          margin-bottom: 12px;
-        }
-
-        .remark {
-          font-size: 12px;
-          color: #666;
-          margin-bottom: 8px;
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          max-width: 300px;
-        }
-      }
-    }
-
-    .card-divider {
-      height: 2px;
-      background: #f2f6fa;
-      margin: 12px 24px 0 24px;
-      border-radius: 1px;
-    }
-
-    .card-bottom {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 8px 24px 12px 24px;
-      color: #909399;
-      font-size: 15px;
-
-      .el-icon {
-        margin-right: 6px;
-      }
-
-      .lock {
-        font-size: 18px;
-        color: #bdbdbd;
-        margin-left: 8px;
-      }
-    }
-
-    .hover-mask {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.6);
-      display: none !important;
-      justify-content: center;
-      align-items: center;
-      z-index: 2;
-
-      .operation-buttons {
-        display: flex;
-        gap: 80px;
-        justify-content: center;
-        align-items: center;
-
-        .operation-btn {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          color: white;
-          cursor: pointer;
-          background: none;
-          border-radius: 0;
-          padding: 0;
-          box-shadow: none;
-          transition: color 0.2s;
-
-          i {
-            margin-bottom: 8px;
-          }
-
-          span {
-            font-weight: 500;
-          }
-
-          &:hover {
-            color: #409EFF;
-          }
-        }
-      }
-    }
-
-    .operation-time {
-      color: #666;
-      i {
-        margin-right: 5px;
-      }
-    }
-  }
-
-  .pagination {
-    background: #fff;
-    padding: 15px 20px;
-    border-radius: 4px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .pagination-info {
-      color: #666;
-      font-size: 14px;
-    }
-  }
-}
-</style>
+<template>
+  <component :is="widget[page]" v-bind="params" @page="onChangePage" />
+</template>