页面样式微调

src/views/govern/manage/feedback.vue

@@ -7,31 +7,7 @@
                 </el-form-item>
             </template>
         </TableHeader>
-        <Table ref="tableRef" :isGroup="true">
-            <template v-slot:columns>
-                <vxe-column title="问题状态">
-                    <template v-slot:default="scoped">
-                        <el-tag v-if="scoped.row.status == 2">处理中</el-tag>
-                        <el-tag v-if="scoped.row.status == 0" type="success">已解决</el-tag>
-                        <el-tag v-if="scoped.row.status == 1" type="warning">待处理</el-tag>
-                    </template>
-                </vxe-column>
-                <vxe-column title="操作" width="180">
-                    <template v-slot:default="scoped">
-                        <el-button
-                            size="small"
-                            type="primary"
-                            icon="el-icon-Finished"
-                            @click="solve(scoped.row)"
-                            v-if="scoped.row.status != 0"
-                        >
-                            解决
-                        </el-button>
-                    </template>
-                </vxe-column>
-            </template>
-            >
-        </Table>
+        <Table ref="tableRef"></Table>
     </div>
 </template>
 <script setup lang="ts">
@@ -49,9 +25,58 @@ const tableStore = new TableStore({
     url: '/cs-system-boot/feedback/queryFeedBackPage',
     method: 'POST',
     column: [
-        { title: '问题标题', field: 'title', align: 'center' },
-        { title: '问题描述', field: 'description', align: 'center' },
-        { title: '发布时间', field: 'createTime', align: 'center' }
+        { title: '标题', field: 'title', align: 'center' },
+        { title: '描述', field: 'description', align: 'center' },
+        { title: '发布时间', field: 'createTime', align: 'center' },
+        {
+            title: '状态',
+            field: 'status',
+            width: '100',
+            render: 'tag',
+            custom: {
+                0: 'success',
+                1: 'warning',
+                2: 'primary'
+            },
+            replaceValue: {
+                0: '已解决',
+                1: '待处理',
+                2: '处理中'
+            }
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'Finished',
+                    title: '解决',
+                    type: 'primary',
+                    icon: 'el-icon-Finished',
+                    render: 'confirmButton',
+                    disabled: row => {
+                        return row.status == 0
+                    },
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '该问题是否已解决？'
+                    },
+                    click: row => {
+                        auditFeedBack({
+                            id: row.id,
+                            status: 0
+                        }).then(res => {
+                            tableStore.onTableAction('search', {})
+                            ElMessage.success('操作成功!')
+                        })
+                    }
+                }
+            ]
+        }
     ],
 
     loadCallback: () => {}
@@ -63,22 +88,6 @@ tableStore.table.params.sortBy = ''
 tableStore.table.params.orderBy = ''
 tableStore.table.params.searchValue = ''
 
-const solve = (row: any) => {
-    ElMessageBox.confirm('该问题是否已解决？', '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning'
-    }).then(() => {
-        auditFeedBack({
-            id: row.id,
-            status: 0
-        }).then(res => {
-            tableStore.onTableAction('search', {})
-            ElMessage.success('操作成功!')
-        })
-    })
-}
-
 onMounted(() => {
     tableStore.index()
 })