table修改

src/components/table/index.vue

@@ -14,7 +14,7 @@
               </el-tooltip>
             </span>
             <span v-if="item.needFilters">
-              <el-popover placement="bottom" trigger="click">
+              <el-popover :width="300" placement="bottom" trigger="click">
                 <template #reference>
                   <el-icon>
                     <ArrowDownBold />
@@ -22,7 +22,7 @@
                 </template>
                 <el-form>
                   <el-form-item :label="item.columnLabel">
-                    <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
+                    <el-select v-model="filterValues[item.columnName]" size="default" placeholder="筛选" default-first-option filterable clearable>
                       <el-option v-for="(option, optionIndex) in tableDataFilters[item.columnName]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
                     </el-select>
                   </el-form-item>
@@ -31,10 +31,11 @@
             </span>
           </template>
         </el-table-column>
-        <el-table-column fixed="right" label="操作" :width="fixedWidth">
+        <el-table-column fixed="right" label="操作">
           <template #default="scope">
-            <el-button type="primary" @click="handleEdit(scope.row)" size="small">编辑</el-button>
-            <el-button type="danger" @click="handleRemove(scope.row)" size="small">删除</el-button>
+            <el-button class="btnEdit" @click="handleEdit(scope.row)" size="small">编辑</el-button>
+            <el-button v-for="el in btnGroups" :key="el.auth_id" class="btnDel" @click="handleOther(el,scope.row)" size="small">{{el.auth_name}}</el-button>
+            <el-button class="btnDel" @click="handleRemove(scope.row)" size="small">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -107,9 +108,10 @@ const props = defineProps({
   //弹框表单-行数
   rows: {
     type: Number,
-    default: 12,
+    default: 24,
   },
 });
+const router = useRouter();
 const page = ref<number>(0); //分页参数
 const { dataContent, showOverflowTooltip, fixedWidth, labelWidth, rows } =
   props;
@@ -126,6 +128,7 @@ const tableForm = ref<any>({}); //弹框新增/编辑数据
 const filterValues = ref<any>({}); //表头-下拉-选中数据
 const tableDataFilters = ref<any>({}); //表头-下拉数据
 const tableGroups = ref<any>([]); //表格分组数据
+const btnGroups = ref<any>([]); //操作-按钮-额外数据
 const pageTitle = ref<any>("");
 const rowTitle = ref("");
 const delTitle = ref("");
@@ -250,14 +253,28 @@ const filterHandler = (value: string, row, column: TableColumnCtx<any>) => {
 const handleAdd = () => {
   editFlag.value = true;
   editType.value = "add";
+  editTitle.value = "新增";
   tableForm.value = {};
 };
 //表格数据编辑弹框
 const handleEdit = (row) => {
   editFlag.value = true;
   editType.value = "edit";
+  editTitle.value = "编辑";
   tableForm.value = _.cloneDeep(row);
 };
+const handleOther = (item, row) => {
+  const queryparams = item.queryparams;
+  const arr = queryparams.split(",");
+  const obj = <any>{};
+  arr.forEach((p) => {
+    obj[p] = item[p];
+  });
+  router.push({
+    path: item.route_info,
+    query: obj,
+  });
+};
 //表格数据删除弹框
 const handleRemove = (row) => {
   delFlag.value = true;
@@ -324,7 +341,8 @@ const filteredTableData = computed(() => {
 //获取表格id
 onBeforeMount(() => {
   const route = useRoute();
-  const { qid, title } = route.meta;
+  const { qid, title, other } = route.meta;
+  btnGroups.value = other;
   pageTitle.value = title;
   if (qid) {
     queryId.value = qid;
@@ -348,6 +366,22 @@ onBeforeMount(() => {
           font-size: 14px;
         }
       }
+      .btnEdit {
+        border: 1px solid #f79ec6;
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #ac014d;
+      }
+      .btnDel {
+        background: #eb2f3b;
+        color: #fff;
+        border: 1px solid #eb2f3b;
+      }
+      .cell {
+        font-size: 14px;
+        text-align: center;
+      }
     }
   }
 }

src/getMenu.ts

@@ -39,7 +39,8 @@ router.beforeEach(async (to: any, from, next: any) => {
             // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
             await userStore.getInfo()
             const treeData: any = await userStore.getMenuInfo()
-            const menusArray = parseMenuItem(treeData)
+            const typeData = setType(treeData, 'up_auth_id', 'auth_id')
+            const menusArray = parseMenuItem(typeData)
             const treeMenu = setTree(menusArray, 'up_auth_id', 'auth_id')
             const dataMenu = _.unionBy(treeMenu, 'auth_id')
             const menus = parseMenu(dataMenu)
@@ -126,6 +127,7 @@ function parseMenuItem(data) {
           elSvgIcon: item.show_icon ?? 'Fold',
           show_index: item.show_index,
           qid: item.queryTemplateID,
+          other: item.other ?? null,
         },
         component: () => import('./views' + item.file_link),
         hidden: !item.is_show,
@@ -219,6 +221,21 @@ function parseItem(item) {
   return menus
 }
 
+function setType(arr, parentKey, key) {
+  const datas: any = []
+  for (let i = 0; i < arr.length; i++) {
+    for (let j = 0; j < arr.length; j++) {
+      if (arr[i][key] == arr[j][parentKey]) {
+        if (arr[j].show_type == 3) {
+          datas.push(arr[j])
+          arr[i].other = datas
+        }
+      }
+    }
+  }
+  return arr
+}
+
 function parseMenu(arr: Array<any>) {
   const menus: any = arr
   // arr.forEach((item) => {

src/views/userManagement/permission/index.vue

@@ -153,11 +153,16 @@
                 </el-radio-group>
               </el-form-item>
             </el-col>
-            <el-col v-if="tableForm.show_type != 3" :span="12">
+            <el-col :span="12">
               <el-form-item label="路由地址" size="default" prop="route_info">
                 <el-input v-model="tableForm.route_info" placeholder="" />
               </el-form-item>
             </el-col>
+            <el-col v-if="tableForm.show_type == 3" :span="12">
+              <el-form-item label="路由参数" size="default" prop="queryparams">
+                <el-input v-model="tableForm.queryparams" placeholder="多个参数用,分割" />
+              </el-form-item>
+            </el-col>
             <el-col v-if="tableForm.show_type != 3" :span="12">
               <el-form-item label="是否显示" size="default" prop="is_show">
                 <el-radio-group v-model="tableForm.is_show" size="default">
@@ -232,6 +237,7 @@ const tableForm = ref<any>({
   is_show: "",
   queryTemplateID: "",
   code: "",
+  queryparams: "",
 });
 const optionsType = ref([
   {