# Schema 方案

根据JSON Schema配置自动生成一个包含搜索条件、表格、编辑表单、详情表单的页面

## 基础用法

通过配置`JSON Schema`快速生成CURD逻辑

::: snippet 通过`list`配置项目

```html
<template>
  <z-schema :list="list" :search-api="searchAPI" :get-api="getAPI" :submit-api="submitAPI" :delete-api="deleteAPI" auto real-selection>
    <el-table-column type="selection" align="center" width="40"></el-table-column>
    <template #header>
      <el-tabs v-model="activeName">
        <el-tab-pane label="待执行" name="wait"></el-tab-pane>
        <el-tab-pane label="已执行" name="done"></el-tab-pane>
      </el-tabs>
    </template>
    <template #button="{ size, openDialog }">
      <el-button :size="size" plain>删除</el-button>
      <el-button :size="size" plain @click="openDialog('other', '追加')">追加操作</el-button>
    </template>
    <template #dialog-other="{ model, closeDialog }">
      <el-tag type="success">其它页面</el-tag>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="model.name">
      </el-input>
      <el-button @click="closeDialog">关闭弹出框</el-button>
    </template>
  </z-schema>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'wait',
      list: [
        { type: 'el-input', label: '姓名', key: 'name', rules: [{ required: true, message: '请输入', trigger: 'change' }] },
        { type: 'el-input', label: '年龄', key: 'age' },
      ]
    }
  },
  methods: {
    searchAPI(params) {
      console.log(params);
      return new Promise(resolve => {
        setTimeout(() => {
          const list = [
            { id: '0', name: '李饼', age: 32, location: { lat: 0, lng: 0 } },
            { id: '1', name: '陈拾', age: 20 },
            { id: '2', name: '阿里巴巴', age: 24 },
            { id: '3', name: '王七', age: 26 },
            { id: '4', name: '崔倍', age: 27 },
            { id: '5', name: '孙豹', age: 38 },
            { id: '6', name: '庞柏', age: 42 },
            { id: '7', name: '蔡疏', age: 60 },
            { id: '8', name: '卢纳', age: 55 },
          ]
          resolve({
            result: list,
            totalCount: list.length
          });
        }, 1500);
      });
    },
    getAPI(row) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({ ...row, name: `[${row.name}]` });
        }, 1500);
      });
    },
    submitAPI(model, config) {
      console.log(JSON.parse(JSON.stringify(model)));
      console.log(config);
      console.log('start');
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('done');
          reject();
        }, 1500);
      });
    },
    deleteAPI() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 1500);
      });
    }
  }
}
</script>
```

:::

## 内置接口逻辑

如果CURD的接口都是同一路径下，可以使用内置接口逻辑快速对接

::: snippet 通过`url`配置接口路径，`http`设置Promise形式的HTTP请求库

```html
<template>
  <z-schema ref="schema" :list="list" url="/customer" :http="$http" :alias="{ getUrl: '/getCustomerByCode', getKey: 'code' }" auto real-selection>
    <el-table-column type="selection" align="center" width="40"></el-table-column>
    <template #render-code="{ value, row, openView }">
      <el-link type="primary" @click="openView(row)">{{ value }}</el-link>
    </template>
    <template #view-name="{ value }">
      <el-tag size="mini">{{ value }}</el-tag>
    </template>
    <template #cell-name="{ value }">
      <el-tag size="mini" type="danger">{{ value }}</el-tag>
    </template>
    <template #form-id="{ value }">
      <el-tag size="mini">{{ value }}</el-tag>
    </template>
  </z-schema>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'wait',
      list: [
        { type: 'el-input', label: 'ID', key: 'id', props: { disabled: true }, include: 'form', visible: () => this.$refs.schema.dialogType === 'edit' },
        { type: 'el-input', label: '编号', key: 'code' },
        { type: 'el-input', label: '名称', key: 'name' },
      ]
    }
  },
  methods: {
  }
}
</script>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
list | JSON Schema配置项列表 | Array | - | []