添加菜单权限等页面

2025-08-13 19:27:49 +08:00
parent e797cb24de
commit f5deb7b8f7
15 changed files with 2297 additions and 20 deletions
@@ -0,0 +1,186 @@
+<template>
+  <div class="page-content">
+    <div v-if="!isMobile">
+      <ElRow>
+        <div style="width: 12px"></div>
+        <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
+          <ElButton @click="showDialog('add')" v-ripple>新增</ElButton>
+        </ElCol>
+      </ElRow>
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+      >
+        <template #default>
+          <ElTableColumn label="ID" prop="id" />
+          <ElTableColumn label="公司名称" prop="name" />
+          <ElTableColumn label="状态" prop="status">
+          <template #default="scope">
+            <ElTag :type="scope.row.status ? 'primary' : 'info'">
+              {{ scope.row.status ? '启用' : '禁用' }}
+            </ElTag>
+          </template>
+        </ElTableColumn>
+          <ElTableColumn label="创建时间" prop="created_at" />
+          <ElTableColumn fixed="right" label="操作" width="200px">
+            <template #default="scope">
+              <ElRow>
+                <el-button link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
+                <el-button link @click="deleteRole(scope.row)"> 删除 </el-button>
+              </ElRow>
+            </template>
+          </ElTableColumn>
+        </template>
+      </ArtTable>
+      <ElDialog
+        v-model="dialogVisible"
+        :title="dialogType === 'add' ? '新增' : '编辑'"
+        width="40%"
+        align-center
+      >
+        <ElForm ref="formRef" :model="form" :rules="rules" label-width="160px">
+          <ElFormItem label="公司名称" prop="name">
+            <ElInput v-model="form.name" />
+          </ElFormItem>
+        </ElForm>
+        <template #footer>
+          <div class="dialog-footer">
+            <ElButton @click="dialogVisible = false">取消</ElButton>
+            <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
+          </div>
+        </template>
+      </ElDialog>
+    </div>
+    <div v-else class="mobile-hide-tip">
+      <p>该页面暂不支持移动端访问</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import { Ordertype} from '@/mock/temp/formData'
+  import { systemService } from '@/api/systemApi'
+  defineOptions({ name: 'Type ' })
+  const loading = ref(false)
+  const dialogVisible = ref(false)
+  const typeList = ref<any[]>([])
+  const formRef = ref<FormInstance>()
+  const { width } = useWindowSize()
+  const isMobile = computed(() => width.value < 500)
+  const rules = reactive<FormRules>({
+    name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }]
+  })
+
+  const form = reactive<Ordertype>({
+    name: '',
+    id:''
+  })
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+  })
+  // 表格数据
+  const tableData = ref<any[]>([])
+
+  // 表格实例引用
+  const tableRef = ref()
+
+  onMounted(() => {
+    getWorkList()
+  })
+
+  // 获取列表数据
+  const getWorkList = async () => {
+    loading.value = true
+    try {
+      const { currentPage, pageSize } = pagination
+
+      const { records, current, size, total } = await systemService.getCompanyList({
+        current: currentPage,
+        size: pageSize
+      })
+      tableData.value = records.map((item: any) => ({
+        ...item
+      }))
+      Object.assign(pagination, { currentPage: current, pageSize: size, total })
+    } catch (error) {
+      console.error('获取列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const dialogType = ref('add')
+
+  const showDialog = (type: string, row?: any) => {
+    dialogVisible.value = true
+    dialogType.value = type
+
+    if (type === 'edit' && row) {
+      form.name = row.name
+      form.id = row.id
+    } else {
+      form.name = ''
+    }
+  }
+  const deleteRole = (row?: any) => {
+    ElMessageBox.confirm('确定删除该分类吗？', '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'error'
+    }).then(async () => {
+      const { message } = await systemService.companyDelete({
+        id: row.id,
+      })
+      ElMessage.success(message)
+      getWorkList()
+    })
+  }
+
+  const handleSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    if (dialogType.value === 'add') {
+      const { message } = await systemService.companyAdd({
+        name: form.name
+      })
+      ElMessage.success(message)
+      dialogVisible.value = false
+      getWorkList()
+    } else {
+      const { message } = await systemService.companyEdit({
+        name: form.name,
+        id: form.id
+      })
+      ElMessage.success(message)
+      dialogVisible.value = false
+      getWorkList()
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.el-table__empty-block) {
+    height: 100% !important;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .page-content {
+    .svg-icon {
+      width: 1.8em;
+      height: 1.8em;
+      overflow: hidden;
+      vertical-align: -8px;
+      fill: currentcolor;
+    }
+  }
+</style>