脱敏策略管理 列表

src/views/desensitizationStrategy/DesensitizationStrategy/QueryForm.vue

@@ -2,13 +2,14 @@
 import { computed,ref,watch } from 'vue'
 import type { FormInstance } from 'element-plus'
 import PageWrapperSearch from '@/components/search/PageWrapperSearch.vue'
-// import { useDict } from '@/utils/dict'
-// import { listDept } from '@/api/system/dept'// 部门
 
+import {
+  Plus
+} from '@element-plus/icons-vue'
 
 
 // const { approve_status, invoice_status} = useDict('approve_status', 'invoice_status')
-const emit = defineEmits(['update:modelValue', 'query', 'reset'])
+const emit = defineEmits(['update:modelValue', 'query', 'reset','handleAdd'])
 const invoice_status_filter = ref([])
 const employeesList = ref([])
 const props = defineProps<{
@@ -39,7 +40,9 @@ function onReset(formRef: FormInstance) {
   queryForm.value.state = ''
   emit('reset', formRef)
 }
-
+function handleAdd() {
+  emit('handleAdd')
+}
 
 </script>
 
@@ -47,6 +50,16 @@ function onReset(formRef: FormInstance) {
   <!-- 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="策略名" prop="strategyName">
@@ -81,6 +94,10 @@ function onReset(formRef: FormInstance) {
   </page-wrapper-search>
 </template>
 
-<style scoped>
-
+<style scoped lang="scss">
+:deep(.btn-fff){
+  span{
+    color: #fff;
+  }
+}
 </style>

src/views/desensitizationStrategy/DesensitizationStrategy/list.vue

@@ -214,61 +214,62 @@ const toggleStatus = (row) => {
 
 <template>
   <div class="app-container scroller">
-    <PageTitle :back="true" @back="pageProjectManage">
+    <PageTitle backProject @handleBackProject="pageProjectManage">
       <template #title>
-        返回项目管理
+        脱敏策略管理
       </template>
       <template #buttons>
-        <el-button
+        <!-- <el-button
           icon="Plus"
           type="primary"
           @click="handleAdd"
         > 
           新增策略
-        </el-button>
+        </el-button> -->
       </template>
     </PageTitle>
     
     <div class="app-container__body">
-      <div>
+
         <query-form
           ref="QueryFormRef"
           v-model="queryParams"
           @query="onQuery"
-          @reset="onReset"/>
-        
-        <el-table
-          :data="tableData"
-          border
-          style="width: 100%"
-          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
-          v-loading="loading"
-        >
-          <el-table-column prop="strategyName" label="策略名称" min-width="120" fiexd/>
-          <el-table-column prop="remarks" label="备注" min-width="120" show-overflow-tooltip />
-          <el-table-column prop="createtime" label="创建时间" min-width="180" />
-          <el-table-column prop="createuser" label="创建人" width="120" />
-          <el-table-column prop="statezh" label="状态" width="100" align="center">
-            <template #default="{ row }">
-              <el-tag :type="row.state === '1' ? 'success' : 'info'">
-                {{ row.state === '1' ? '已启用' : '未启用' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="280" align="center" fixed="right">
-            <template #default="{ row }">
-              <el-button link type="primary" size="small" @click="showDetail(row)">详情</el-button>
-              <el-divider direction="vertical" />
-              <el-button link type="primary" size="small" @click="editStrategy(row)">编辑策略</el-button>
-              <el-divider direction="vertical" />
-              <el-button link type="danger" size="small" @click="deleteStrategy(row)">删除</el-button>
-              <el-divider direction="vertical" />
-              <el-button link type="success" size="small" @click="toggleStatus(row)">
-                {{ row.state === '1' ? '禁用' : '启用' }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+          @reset="onReset"
+          @handleAdd="handleAdd"
+        />
+        <div style="flex: 1;">
+           <el-table
+            height="100%"
+            :data="tableData"
+            stripe
+            style="width: 100%"
+            v-loading="loading"
+          >
+            <el-table-column prop="strategyName" label="策略名称" min-width="120" fiexd/>
+            <el-table-column prop="remarks" label="备注" min-width="120" show-overflow-tooltip />
+            <el-table-column prop="createtime" label="创建时间" min-width="180" />
+            <el-table-column prop="createuser" label="创建人" width="120" />
+            <el-table-column prop="statezh" label="状态" width="100" align="center">
+              <template #default="{ row }">
+                <el-tag :type="row.state === '1' ? 'success' : 'info'">
+                  {{ row.state === '1' ? '已启用' : '未启用' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="340" align="center" fixed="right">
+              <template #default="{ row }">
+                <el-button plain type="primary" size="small" icon="Tickets" @click="showDetail(row)">详情</el-button>
+                <el-button plain color="rgba(237, 183, 5, 1)"  size="small" icon="edit" @click="editStrategy(row)">编辑</el-button>
+                <el-button plain color="rgba(255, 141, 26, 1)"  size="small" icon="delete" @click="deleteStrategy(row)">删除</el-button>
+                <el-button :icon="row.state === '1'?'WarningFilled' : 'SuccessFilled'"  :type="row.state === '1' ? 'warning' : 'success'" size="small" plain @click="toggleStatus(row)">
+                  {{ row.state === '1' ? '禁用' : '启用' }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+       
           
         <pagination
           v-show="total > 0"
@@ -278,7 +279,7 @@ const toggleStatus = (row) => {
           @pagination="getList"
         />
       </div>
-    </div>
+
 
     <!-- 统一策略对话框组件 -->
     <StrategyAddDialog :title="dialog.title" ref="strategyAddDialogRef" @refresh="handleQuery" />