yintai-company-home-am/views/config/list.tsx

import type { TableData } from 'lib/type/TableData'
import './index.less'
import JsonFormDialog from 'src/components/JsonFormDialog.vue'
const data: TableData = {
  rowKey: 'id',
  defaultExpandAll: true,
  sizeOption: [1000, 100, 500, 2000],
  fetchFun(self, data) {
    return self.api?.getDataList(data).then((res: any) => {
      const items = res.data.items || []
      const backendItem = items.find((item:any) => item.tags.includes('backend'))
      if(backendItem) {
        try {
          (self.bean as any).fieldMap = JSON.parse(backendItem.content || '{}')
        } catch(err) {
          console.log(err)
        }
      }
      const flatData = items.map((item: any) => ({
        ...item,
        key: item.id,
        id: item.id,
        pid: String(item.pid ?? 0),
        color: 'category'
      }))
      res.data.items = self.methods?.getTree(flatData) ?? flatData
      return res
    })
  },
  methods: {
    getTree(arr: any[]) {
      const map: any = {}
      const roots: any[] = []

      arr.forEach((item: any) => {
        map[item.key] = { ...item, children: [] }
      })

      arr.forEach((item: any) => {
        const node = map[item.key]
        if (item.pid === 0 || item.pid === '0') {
          roots.push(node)
        } else {
          if (map[item.pid]) {
            map[item.pid].children.push(node)
          } else {
            roots.push(node)
          }
        }
      })
      return roots
    }
  },
  addNods: [
    (self: any) => {
      return self.bean && <JsonFormDialog
        show={self.bean.showJsonFormDialog}
        title={self.bean?.currentRow?.name || '配置'}
        data={self.bean.jsonFormData}
        fieldMap={self.bean.fieldMap}
        onClose={() => {
          self.bean.showJsonFormDialog = false
        }}
        onSubmit={async (data: any) => {
          await self.api?.updateData({
            id: String(self.bean.currentRow.id),
            content: JSON.stringify(data),
          })
          self.bean.showJsonFormDialog = false
          self.methods.fetchData()
        }}
      />
    }
  ],
  launchTask: [
    async (self: any) => {
      if (self.bean) {
        self.bean.showJsonFormDialog = false
        self.bean.currentRow = null
        self.bean.jsonFormData = {}
        // self.bean.fieldMap = {}
      }
    }
  ],
  fliter: [
    {
      key: 'id',
      name: 'ID',
      type: 'input'
    },
    {
      key: 'name',
      name: '配置名',
      type: 'input'
    },
    {
      type: 'dialogForm',
      key: 'create',
      form: {
        title: '新建',
        data: [
          {
            key: 'pid',
            name: '父级',
            type: 'input',
          },
          {
            key: 'name',
            name: '配置名',
            type: 'input',
            must: true
          },
          {
            key: 'page',
            name: '页面路径',
            type: 'input',
            must: true
          },
          {
            key: 'extra',
            hide: true,
            name: '配置内容',
            type: 'input',
            rows: 4
          },
        ],
        subFun(self, data) {
          return self.api?.addData(data)
        }
      }
    }
  ],
  tableColumns: [
    {
      key: 'id',
      name: 'ID',
      width: '80px',
      showJson: '*'
    },
    {
      key: 'pid',
      name: 'PID',
      width: '80px',
      showJson: '*'
    },
    {
      key: 'name',
      name: '配置名',
      width: '150px'
    },
    {
      key: 'page',
      name: '页面路径',
      width: '150px'
    },
    {
      key: 'content',
      name: 'JSON配置',
      width: '200px',
      editor: {
        type: 'json',
        subFun(self, data) {
          return self.api?.updateData({...data, id: String(data.id)})
        }
      }
    },
    {
      key: 'content',
      name: '配置',
      width: '100px',
      renderBodyCell({self, row}:any) {
        if(row.tags.includes('backend')) {
          return <span></span>
        }
        return (
          <el-button size="small" type="primary"
          onClick={() => {
            try {
              self.bean.jsonFormData = JSON.parse(row.content || '{}')
            } catch {
              self.bean.jsonFormData = {}
            }
            self.bean.currentRow = row
            self.bean.showJsonFormDialog = true
          }}
          >配置</el-button>
        )
      },
    },
    {
      key: 'create_time',
      name: '创建时间',
    },
    {
      key: 'weight',
      name: '权重',
      width: '100px',
      editor: {
        type: 'input',
        subFun(self, data, row) {
          return self.api?.updateData({...data, id: String(data.id), pid: String(row.pid)})
        }
      }
    },
    {
      key: 'tags',
      name: '标签',
      editor: {
        type: 'input',
        subFun(self, data, row) {
          return self.api?.updateData({...data, id: String(data.id), pid: String(row.pid)})
        }
      }
    },
    {
      key: 'table_tools',
      name: '操作',
      buttons: [
        {
          type: 'dialogForm',
          key: 'update',
          form: {
            title: '编辑',
            type: 'warning',
            primary: 'id',
            data: [
              {
                key: 'pid',
                name: '父级',
                type: 'input',
              },
              {
                key: 'name',
                name: '配置名',
                type: 'input',
                must: true
              },
              {
                key: 'page',
                name: '页面路径',
                type: 'input',
                must: true
              },
              {
                key: 'content',
                hide: true,
                name: '配置内容',
                type: 'input',
                rows: 4
              },
            ],
            subFun(self, data) {
              return self.api?.updateData({...data, id: String(data.id)})
            }
          }
        },
        {
          type: 'popoverConfirm',
          key: 'delete',
          confirm: {
            title: '删除',
            primary: 'id',
            subFun(self, data) {
              return self.api?.deleteData(data)
            }
          }
        }
      ]
    }
  ]
}

export default data