fs-admin/src/views/system/Dict.vue

<script setup lang="ts">
import type { BasicForm } from '@/types/form'

const CRUD = {
  create() {
    return Promise.resolve()
  },
  update() {
    return Promise.resolve()
  },
  getList() {
    return new Promise(resolve => {
      return resolve({
        data: [
          {
            name: 'test'
          }
        ],
        total: 1
      })
    })
  }
}

const dictFormConfig = reactive<BasicForm>({
  span: 12,
  formItems: [
    {
      label: '字典名称',
      value: '',
      name: 'name',
      type: 'input',
      rules: [{ required: true, message: '请输入字典名称', trigger: 'blur' }]
    },
    {
      label: '字典值',
      value: '',
      name: 'value',
      type: 'input',
      rules: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
    }
  ]
})
const handleRowClick = (row: any, column: any, event: any) => {
  console.log(row, column, event)
}

const dictItemFormConfig = reactive<BasicForm>({
  span: 12,
  formItems: [
    {
      label: '字典名称',
      value: '',
      name: 'name',
      type: 'input',
      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
    },
    {
      label: '字典值',
      value: '',
      name: 'value',
      type: 'input',
      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    },
    {
      label: '排序',
      value: '',
      name: 'sort',
      type: 'input',
      props: {
        maxlength: 11
      }
    }
  ]
})
</script>

<template>
  <el-row :gutter="16">
    <el-col :span="12">
      <pro-table :crud="CRUD" :formConfig="dictFormConfig" @row-click="handleRowClick">
        <el-table-column prop="name" label="字典名称"></el-table-column>
        <el-table-column prop="value" label="字典值"></el-table-column>
      </pro-table>
    </el-col>
    <el-col :span="12">
      <pro-table :crud="CRUD" :formConfig="dictItemFormConfig">
        <el-table-column prop="name" label="标签"></el-table-column>
        <el-table-column prop="phone" label="键值"></el-table-column>
        <el-table-column prop="gender" label="排序"></el-table-column>
      </pro-table>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped></style>