Merge pull request kailong321200875#484 from lt5227/master

kailong321200875 · web-flow · commit 57bc03cd0a5d · 2024-06-05T16:29:10.000+08:00
refactor:  button permissions in the menu to support editing.
diff --git a/mock/menu/index.mock.ts b/mock/menu/index.mock.ts
@@ -41,10 +41,12 @@ export default [
                   title: '分析页',
                   permissionList: [
                     {
+                      id: 1,
                       label: '新增',
                       value: 'add'
                     },
                     {
+                      id: 2,
                       label: '编辑',
                       value: 'edit'
                     }
@@ -66,14 +68,17 @@ export default [
                   title: '工作台',
                   permissionList: [
                     {
+                      id: 1,
                       label: '新增',
                       value: 'add'
                     },
                     {
+                      id: 2,
                       label: '编辑',
                       value: 'edit'
                     },
                     {
+                      id: 3,
                       label: '删除',
                       value: 'delete'
                     }
@@ -229,18 +234,22 @@ export default [
                   title: '综合示例-弹窗',
                   permissionList: [
                     {
+                      id: 1,
                       label: '新增',
                       value: 'add'
                     },
                     {
+                      id: 2,
                       label: '编辑',
                       value: 'edit'
                     },
                     {
+                      id: 3,
                       label: '删除',
                       value: 'delete'
                     },
                     {
+                      id: 4,
                       label: '查看',
                       value: 'view'
                     }
@@ -260,18 +269,22 @@ export default [
                   title: '综合示例-页面',
                   permissionList: [
                     {
+                      id: 1,
                       label: '新增',
-                      value: 'edit'
+                      value: 'add'
                     },
                     {
+                      id: 2,
                       label: '编辑',
                       value: 'edit'
                     },
                     {
+                      id: 3,
                       label: '删除',
                       value: 'delete'
                     },
                     {
+                      id: 4,
                       label: '查看',
                       value: 'view'
                     }
diff --git a/src/views/Authorization/Menu/components/Write.vue b/src/views/Authorization/Menu/components/Write.vue
@@ -5,7 +5,7 @@ import { PropType, reactive, watch, ref, unref } from 'vue'
 import { useValidator } from '@/hooks/web/useValidator'
 import { useI18n } from '@/hooks/web/useI18n'
 import { getMenuListApi } from '@/api/menu'
-import { ElTag } from 'element-plus'
+import { ElButton, ElInput, ElPopconfirm, ElTable, ElTableColumn, ElTag } from 'element-plus'
 import AddButtonPermission from './AddButtonPermission.vue'
 import { BaseButton } from '@/components/Button'
 import { cloneDeep } from 'lodash-es'
@@ -29,7 +29,23 @@ const handleClose = async (tag: any) => {
   })
 }
 
+const handleEdit = async (row: any) => {
+  // 深拷贝当前行数据到编辑行
+  permissionEditingRow.value = { ...row }
+}
+
+const handleSave = async () => {
+  const formData = await getFormData()
+  const index = formData?.permissionList?.findIndex((x) => x.id === permissionEditingRow.value.id)
+  if (index !== -1) {
+    formData.permissionList[index] = { ...permissionEditingRow.value }
+    permissionEditingRow.value = null // 重置编辑状态
+  }
+}
+
 const showDrawer = ref(false)
+// 存储正在编辑的行的数据
+const permissionEditingRow = ref<any>(null)
 
 const formSchema = reactive<FormSchema[]>([
   {
@@ -196,16 +212,73 @@ const formSchema = reactive<FormSchema[]>([
       slots: {
         default: (data: any) => (
           <>
-            {data?.permissionList?.map((v) => {
-              return (
-                <ElTag class="mr-1" key={v.value} closable onClose={() => handleClose(v)}>
-                  {v.label}
-                </ElTag>
-              )
-            })}
-            <BaseButton type="primary" size="small" onClick={() => (showDrawer.value = true)}>
+            <BaseButton
+              class="m-t-5px"
+              type="primary"
+              size="small"
+              onClick={() => (showDrawer.value = true)}
+            >
               添加权限
             </BaseButton>
+            <ElTable data={data?.permissionList}>
+              <ElTableColumn type="index" prop="id" />
+              <ElTableColumn
+                prop="value"
+                label="Value"
+                v-slots={{
+                  default: ({ row }: any) =>
+                    permissionEditingRow.value && permissionEditingRow.value.id === row.id ? (
+                      <ElInput v-model={permissionEditingRow.value.value} size="small" />
+                    ) : (
+                      <span>{row.value}</span>
+                    )
+                }}
+              />
+              <ElTableColumn
+                prop="label"
+                label="Label"
+                v-slots={{
+                  default: ({ row }: any) =>
+                    permissionEditingRow.value && permissionEditingRow.value.id === row.id ? (
+                      <ElInput v-model={permissionEditingRow.value.label} size="small" />
+                    ) : (
+                      <ElTag class="mr-1" key={row.value}>
+                        {row.label}
+                      </ElTag>
+                    )
+                }}
+              />
+              <ElTableColumn
+                label="Operations"
+                width="180"
+                v-slots={{
+                  default: ({ row }: any) =>
+                    permissionEditingRow.value && permissionEditingRow.value.id === row.id ? (
+                      <ElButton size="small" type="primary" onClick={handleSave}>
+                        确定
+                      </ElButton>
+                    ) : (
+                      <>
+                        <ElButton size="small" type="primary" onClick={() => handleEdit(row)}>
+                          编辑
+                        </ElButton>
+                        <ElPopconfirm
+                          title="Are you sure to delete this?"
+                          onConfirm={() => handleClose(row)}
+                        >
+                          {{
+                            reference: () => (
+                              <ElButton size="small" type="danger">
+                                删除
+                              </ElButton>
+                            )
+                          }}
+                        </ElPopconfirm>
+                      </>
+                    )
+                }}
+              />
+            </ElTable>
           </>
         )
       }

Original file line number	Diff line number	Diff line change
`@@ -41,10 +41,12 @@ export default [`
`41`	`41`	`title: '分析页',`
`42`	`42`	`permissionList: [`
`43`	`43`	`{`
	`44`	`+ id: 1,`
`44`	`45`	`label: '新增',`
`45`	`46`	`value: 'add'`
`46`	`47`	`},`
`47`	`48`	`{`
	`49`	`+ id: 2,`
`48`	`50`	`label: '编辑',`
`49`	`51`	`value: 'edit'`
`50`	`52`	`}`
`@@ -66,14 +68,17 @@ export default [`
`66`	`68`	`title: '工作台',`
`67`	`69`	`permissionList: [`
`68`	`70`	`{`
	`71`	`+ id: 1,`
`69`	`72`	`label: '新增',`
`70`	`73`	`value: 'add'`
`71`	`74`	`},`
`72`	`75`	`{`
	`76`	`+ id: 2,`
`73`	`77`	`label: '编辑',`
`74`	`78`	`value: 'edit'`
`75`	`79`	`},`
`76`	`80`	`{`
	`81`	`+ id: 3,`
`77`	`82`	`label: '删除',`
`78`	`83`	`value: 'delete'`
`79`	`84`	`}`
`@@ -229,18 +234,22 @@ export default [`
`229`	`234`	`title: '综合示例-弹窗',`
`230`	`235`	`permissionList: [`
`231`	`236`	`{`
	`237`	`+ id: 1,`
`232`	`238`	`label: '新增',`
`233`	`239`	`value: 'add'`
`234`	`240`	`},`
`235`	`241`	`{`
	`242`	`+ id: 2,`
`236`	`243`	`label: '编辑',`
`237`	`244`	`value: 'edit'`
`238`	`245`	`},`
`239`	`246`	`{`
	`247`	`+ id: 3,`
`240`	`248`	`label: '删除',`
`241`	`249`	`value: 'delete'`
`242`	`250`	`},`
`243`	`251`	`{`
	`252`	`+ id: 4,`
`244`	`253`	`label: '查看',`
`245`	`254`	`value: 'view'`
`246`	`255`	`}`
`@@ -260,18 +269,22 @@ export default [`
`260`	`269`	`title: '综合示例-页面',`
`261`	`270`	`permissionList: [`
`262`	`271`	`{`
	`272`	`+ id: 1,`
`263`	`273`	`label: '新增',`
`264`		`- value: 'edit'`
	`274`	`+ value: 'add'`
`265`	`275`	`},`
`266`	`276`	`{`
	`277`	`+ id: 2,`
`267`	`278`	`label: '编辑',`
`268`	`279`	`value: 'edit'`
`269`	`280`	`},`
`270`	`281`	`{`
	`282`	`+ id: 3,`
`271`	`283`	`label: '删除',`
`272`	`284`	`value: 'delete'`
`273`	`285`	`},`
`274`	`286`	`{`
	`287`	`+ id: 4,`
`275`	`288`	`label: '查看',`
`276`	`289`	`value: 'view'`
`277`	`290`	`}`