vue typescript curd

用typescript 完成了一个页面

 import { Component, Prop } from 'vue-property-decorator';
import Vue, { VNode } from 'vue';
import { Form } from 'ant-design-vue';
import api from '@/api/post_category';

@Component({
    name: 'PostCategory',
    components: {
    },
})
class PostCategory extends Vue {
  @Prop() public form: any;
  private loading = false;
  private dataSource = []
  private columns = [
    { title: '名称', dataIndex: 'name' },
    { title: '路径', dataIndex: 'code' }
  ];
  private options = [];
  private selectedRows = []


  public mounted() {
    this.loadData()
  }

  public loadData() {
    api.list()
      .then(res => {
        this.dataSource =  Object.assign([], res)
        this.options = Object.assign([], res)
      }).catch(err => {
        this.$notification.error({message: err.message});
      })
  }

  public displayRender(item: any) {
    return item.labels[item.labels.length - 1];
  }

  private handleSave() {
    this.form.validateFields((err: any, values: any) => {
      if (!err) {
        const param = Object.assign({}, values)
        if (Array.isArray(values.parentUid)) {
          param.parentUid = values.parentUid[values.parentUid.length - 1]
        }
        api.addPostCategory(param)
          .then(() => {
            this.loadData()
            this.$notification.success({message: '保存成功'})
          }).catch((err) => {
            this.$notification.error({message: err.message});
          });
      }
    })
  }

  private handleModify() {
    if (this.selectedRows.length !== 1) {
      this.$notification.warn({message: '请选择一行数据进行修改'})
      return
    }
    this.form.setFieldsValue(Object.assign({}, this.selectedRows[0]))
  }

  private handleDelete() {
    if (this.selectedRows.length === 0) {
      this.$notification.warn({message: '请选择一行数据进行修改'})
      return
    }

    const self = this
    this.$confirm({
      title: '请确认你要删除这些项目',
      cancelText: '取消',
      okText: '确认',
      onOk() {
        const list = self.selectedRows.map(it => it.uid)
        api.delete(list)
          .then(() => {
            self.loadData()
            self.$notification.warn({message: '删除成功'})
          }).catch(err => this.$notification.error({message: err.message}))
      },
      onCancel() {},
    });
  }

  private handleAdd() {
    this.form.resetFields()
  }

  private onSelectChange(selectedRowKeys: any, selectedRows: any) {
    this.selectedRows = selectedRows
  }

  public render(): VNode {
    const fieldNames = { label: 'name', value: 'uid', children: 'children'}
    const scroll = { y: innerHeight - 200 };
    const { getFieldDecorator } = this.form;
    const rowSelection = {
      onChange: this.onSelectChange
    }
    return (
      <a-row gutter={32}>
        <a-col span={6}>
          <h3>新增分类</h3>
          <a-form layout='vertical'>
            <a-form-item label='名称' help='名称是它显示在网页上。'>
              {getFieldDecorator('name', {rules: [{ required: true, message: '请输入账号' }], validateTrigger: 'blur'})(
                <a-input id='name' placeholder='请输入名称'></a-input>
              )}
            </a-form-item>

            <a-form-item label='路径' help='它通常是地址栏里面的路径，它通常都是小写的，只包含字母、数字和连字符。'>
              {getFieldDecorator('code')(
                <a-input ></a-input>
              )}
            </a-form-item>

            <a-form-item label='父分类'>
              {getFieldDecorator('parentUid')(
                <a-cascader fieldNames={fieldNames}  options={this.options} placeholder='选择父分类'/>
              )}
            </a-form-item>

            <a-form-item label='描述' help='默认情况下描述不显示;一些主题可能会显示这一点。'>
              {getFieldDecorator('description')(
                <a-textarea ></a-textarea>
              )}
            </a-form-item>

            <a-form-item style='text-align:right' loading={this.loading}>
              <a-button type='primary' on-click={this.handleSave}>保存</a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col span={18}>
          <div class='toolbar'>
            <a-button size='small' on-click={this.handleAdd}>新增</a-button>
            <a-button type='primary' size='small' on-click={this.handleModify}>修改</a-button>
            <a-button type='danger' size='small' on-click={this.handleDelete}>删除</a-button>
          </div>
          <a-table columns={this.columns} size="small" rowKey="uid" rowSelection={rowSelection} dataSource={this.dataSource} pagination={false} scroll={scroll}></a-table>
        </a-col>
      </a-row>
    );
  }
}

export default Form.create({})(PostCategory);

 

查看更多关于vue typescript curd的详细内容...