art-design/src/views/admin/system/company.vue

<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>