a

src/views/professional/professionalteachercertificateconf/index.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <!-- 操作按钮 -->
+      <el-row>
+        <div class="mb15" style="width: 100%;">
+          <el-button 
+            type="primary"
+            icon="FolderAdd"      
+            @click="handleAdd"
+            v-if="permissions.professional_professionalteachercertificateconf_add">新 增
+          </el-button>
+        </div>
+      </el-row>
+
+      <!-- 表格 -->
+      <el-table
+        ref="tableRef"
+        :data="state.dataList"
+        v-loading="state.loading"
+        border
+        :cell-style="tableStyle.cellStyle"
+        :header-cell-style="tableStyle.headerCellStyle"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        
+        <el-table-column prop="cretificateName" label="资格证名称" min-width="150" align="center" show-overflow-tooltip />
+        
+        <el-table-column prop="updateTime" label="更新时间" width="180" align="center" />
+        
+        <el-table-column prop="sort" label="排序" width="100" align="center" />
+        
+        <el-table-column prop="remarks" label="备注" min-width="200" align="center" show-overflow-tooltip />
+        
+        <el-table-column label="操作" width="150" align="center" fixed="right">
+          <template #default="scope">
+            <el-button 
+              v-if="permissions.professional_professionalteachercertificateconf_edit"
+              icon="edit-pen"
+              link
+              type="primary"
+              @click="handleEdit(scope.row)">修改
+            </el-button>
+            <el-button
+              v-if="permissions.professional_professionalteachercertificateconf_del"
+              icon="delete"
+              link
+              type="primary"
+              style="margin-left: 12px"
+              @click="handleDel(scope.row)">删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <pagination
+        v-bind="state.pagination"
+        @current-change="currentChangeHandle"
+        @size-change="sizeChangeHandle"
+      />
+
+      <!-- 新增/编辑弹窗 -->
+      <el-dialog
+        v-model="dialogVisible"
+        :title="form.id ? '编辑' : '新增'"
+        width="600px"
+        :close-on-click-modal="false"
+        destroy-on-close
+      >
+        <el-form
+          ref="formRef"
+          :model="form"
+          :rules="formRules"
+          label-width="120px"
+        >
+          <el-form-item label="资格证名称" prop="cretificateName">
+            <el-input
+              v-model="form.cretificateName"
+              placeholder="请输入资格证名称"
+              clearable
+            />
+          </el-form-item>
+          
+          <el-form-item label="排序" prop="sort">
+            <el-input-number
+              v-model="form.sort"
+              :min="0"
+              placeholder="请输入排序"
+              style="width: 100%"
+            />
+          </el-form-item>
+          
+          <el-form-item label="备注" prop="remarks">
+            <el-input
+              v-model="form.remarks"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入备注"
+              clearable
+            />
+          </el-form-item>
+        </el-form>
+        
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="dialogVisible = false">取消</el-button>
+            <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useUserInfo } from '/@/stores/userInfo'
+import { BasicTableProps, useTable } from '/@/hooks/table'
+import { useMessage } from '/@/hooks/message'
+import { useMessageBox } from '/@/hooks/message'
+import { fetchList, addObj, putObj, delObj } from '/@/api/professional/rsbase/professionalteachercertificateconf'
+
+// 使用 Pinia store
+const userInfoStore = useUserInfo()
+const { userInfos } = storeToRefs(userInfoStore)
+
+// 创建权限对象
+const permissions = computed(() => {
+  const perms: Record<string, boolean> = {}
+  userInfos.value.authBtnList.forEach((perm: string) => {
+    perms[perm] = true
+  })
+  return perms
+})
+
+// 消息提示 hooks
+const message = useMessage()
+const messageBox = useMessageBox()
+
+// 表格引用
+const tableRef = ref()
+const formRef = ref()
+
+// 弹窗状态
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+
+// 表单数据
+const form = reactive({
+  id: '',
+  cretificateName: '',
+  sort: 0,
+  remarks: ''
+})
+
+// 表单验证规则
+const formRules = {
+  cretificateName: [
+    { required: true, message: '请输入资格证名称', trigger: 'blur' }
+  ],
+  sort: [
+    { required: true, message: '请输入排序', trigger: 'blur' }
+  ]
+}
+
+// 配置 useTable
+const state: BasicTableProps = reactive<BasicTableProps>({
+  pageList: async (params: any) => {
+    const response = await fetchList(params)
+    return {
+      data: {
+        records: response.data.records || [],
+        total: response.data.total || 0
+      }
+    }
+  },
+  queryForm: {}
+})
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)
+
+// 打开新增窗口
+const handleAdd = () => {
+  Object.assign(form, {
+    id: '',
+    cretificateName: '',
+    sort: 0,
+    remarks: ''
+  })
+  dialogVisible.value = true
+}
+
+// 打开编辑窗口
+const handleEdit = async (row: any) => {
+  Object.assign(form, {
+    id: row.id,
+    cretificateName: row.cretificateName || '',
+    sort: row.sort || 0,
+    remarks: row.remarks || ''
+  })
+  dialogVisible.value = true
+}
+
+// 删除
+const handleDel = (row: any) => {
+  messageBox.confirm('是否确认删除该条记录').then(async () => {
+    await delObj(row.id)
+    message.success('删除成功')
+    // 如果当前页只剩一条数据，且不是第一页，则跳转到上一页
+    if (state.pagination && state.dataList && state.dataList.length === 1 && state.pagination.current && state.pagination.current > 1) {
+      state.pagination.current = state.pagination.current - 1
+    }
+    getDataList()
+  }).catch(() => {})
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  
+  await formRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      submitLoading.value = true
+      try {
+        if (form.id) {
+          await putObj(form)
+          message.success('修改成功')
+        } else {
+          await addObj(form)
+          message.success('添加成功')
+        }
+        dialogVisible.value = false
+        getDataList()
+      } catch (error) {
+        // 提交失败
+      } finally {
+        submitLoading.value = false
+      }
+    }
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>