HOS基础开发平台

# 第一个CRUD

上文中我们已经为 staff 创建了基础模块，接下来我们实现具体功能。 Vue以组件为单位，每一个.vue文件即为一个组件。一个组件可以在其他组件中通过import引入并复用。下面我们以用户模块为例创建一个组件，该组件实现对用户信息的增、删、改、查等操作。

# 根据后端提供接口定义api

在 biz文件夹下的 api 文件夹上右击 依次选择 New File -> 输入文件名 staff.js，如下图所示:

example0.jpg

根据后端提供的 swagger 文档，我们在 staff.js 定义员工管理相关的请求,如下:

/**
 * 根据实体属性条件分页查询
 *
 */
export const selectPage = (param) =>{
    return {
        url: '/user/staff/selectPage',
        method: 'get',
        params: param
    }
};

/**
 * 保存
 */
export const insert = (param) => {
    return {
        url: '/user/staff/insert',
        method: 'post',
        data: param
    }
};

/**
 * 根据id获取数据
 */
export const selectById = (param) => {
    return {
        url: '/user/staff/selectById',
        method: 'get',
        params: param
    }
};

/**
 * 更新数据
 */
export const updateById = (param) => {
    return {
        url: '/user/staff/updateById',
        method: 'post',
        data: param
    }
};

/**
 * 删除数据
 */
export const deleteById = (id) => {
    return {
        url: '/user/staff/deleteById',
        method: 'post',
        params: {
            id: id
        }
    }
}

# 员工列表页模板

打开 index.vue文件，在 template代码块中输入以下内容：

<template>
  <div class="h-fit">
    <hos-biz-table
        uid="staffTable"
        :cols="staffTableCols"
        data="staff.selectPage"
        :form="formObj"
    >
      <!-- 搜索 -->
      <template #form>
        <hos-form-item label="姓名">
          <hos-input v-model="formObj.model.name"></hos-input>
        </hos-form-item>
        <hos-form-item label="编码">
          <hos-input v-model="formObj.model.id"></hos-input>
        </hos-form-item>
        <hos-form-item label="手机号">
          <hos-input v-model="formObj.model.phone"></hos-input>
        </hos-form-item>
        <hos-form-item label="邮箱">
          <hos-input v-model="formObj.model.email"></hos-input>
        </hos-form-item>
        <hos-form-item>
          <hos-biz-button type="primary" run="form.search">搜索</hos-biz-button>
          <hos-biz-button type="primary" run="form.reset">重置</hos-biz-button>
        </hos-form-item>
      </template>

      <!-- 工具栏  -->
      <template #toolbar>
        <hos-button-group class="hos">
          <hos-button icon="hos-icom-add" @click="addOrEditUser()">新增</hos-button>
        </hos-button-group>
      </template>

      <!-- 操作列 -->
      <template #operation="{ row }">
        <hos-tooltip class="pl5 pr5" content="编辑">
          <i class="hos-icom-edit" @click="addOrEditUser(row)"></i>
        </hos-tooltip>
        <hos-tooltip class="pl5 pr5" content="删除">
          <i class="hos-icom-cancel" @click="delRow(row)"></i>
        </hos-tooltip>
      </template>
    </hos-biz-table>
    <hos-biz-dialog
        :title="title"
        uid="staffAddDialog"
        width="40%"
        :close-on-click-modal="false"
    >
    </hos-biz-dialog>
  </div>
</template>

在 Vue 2.x 版本中，template中只能有一个根元素，因此我们需要建立一 个 div把我们的模板内容包裹起来，并给他的 class属性赋值

# 员工列表页逻辑

在 script标签内输入以下代码，script标签用来存放逻辑代码

export default {
   props: [],
   components: {},
   data() {
     return {
       title: '新增员工',
       formObj:{
         labelWidth: "auto",
         inline: true,
         model:{
           name:"",
           email:"",
           phone:"",
           gender:"",
           age:""
         }
       },
       staffTableCols:[
         {
           type: "selection",
           align: "center",
           width: "50"
         },{
           prop: "name",
           label: "姓名",
         },{
           prop: "gender",
           label: "性别",
         },{
           prop: "phone",
           label: "手机号",
         },{
           prop: "email",
           label: "邮箱",
         },{
           prop: "description",
           label: "备注",
         },{
           label: "操作",
           width: "70",
           slotName:"operation"
         }
       ]
     }
   },
   mounted() {
   },
   methods: {
     addOrEditUser(row) {
       if (row) {
         this.title = "编辑员工";
         // 编辑
         this.$store.commit("OPEN_DIALOG", {
           component: require("./staff-add.vue").default,
           _uid: "staffAddDialog",
           props: {
             id: row.id
           },
         });
       } else {
         this.title = "新增员工";
         // 新增
         this.$store.commit("OPEN_DIALOG", {
           component: require("./staff-add.vue").default,
           _uid: "staffAddDialog",
         });
       }
     },

     // 删除行
     delRow(row) {
       this.$api('staff.deleteById', row.id).then((response) => {
         if (response && response.code == 200) {
           this.$store.commit("UPDATE_TABLE",{_uid: 'staffTable'});
           this.$message.success('删除成功');
         }
       })
     }
   } 
}

其中 $api()为 ajax 请求的封装，具体用法详见下一章

# 新建员工新增组件

在 staff 文件夹上右键选择 New File ->输入文件名 staff-add.vue

example6.jpg

# 员工新增页模板

打开 staff-add.vue文件，在 template代码块中输入以下内容：

<template>
    <div>
        <hos-form
                ref="dialogForm"
                :model="staffForm"
                label-width="auto"
                :rules="rules"
        >
            <hos-row :gutter="20">
                <hos-col :span="12">
                    <hos-form-item label="姓名:" prop="name">
                        <hos-input v-model="staffForm.name"></hos-input>
                    </hos-form-item>
                </hos-col>
                <hos-col :span="12">
                    <hos-form-item label="性别:" prop="gender">
                        <hos-select v-model="staffForm.gender">
                            <hos-option label="男" value="男"></hos-option>
                            <hos-option label="女" value="女"></hos-option>
                        </hos-select>
                    </hos-form-item>
                </hos-col>
                <hos-col :span="12">
                    <hos-form-item label="手机号:" prop="phone">
                        <hos-input v-model="staffForm.phone"></hos-input>
                    </hos-form-item>
                </hos-col>
                <hos-col :span="12">
                    <hos-form-item label="邮箱:" prop="email">
                        <hos-input v-model="staffForm.email"></hos-input>
                    </hos-form-item>
                </hos-col>
                <hos-col :span="12">
                    <hos-form-item label="年龄:" prop="age">
                        <hos-input-number
                                v-model="staffForm.age"
                                :controls="false"
                                :min="0"
                                style="width: 100%"
                        ></hos-input-number>
                    </hos-form-item>
                </hos-col>
                <hos-col :span="24">
                    <hos-form-item label="描述:">
                        <hos-input
                                v-model="staffForm.description"
                                type="textarea"
                                :rows="2"
                        ></hos-input>
                    </hos-form-item>
                </hos-col>
            </hos-row>
        </hos-form>
        <div slot="footer" class="dialog-footer">
            <hos-button type="primary" @click="cancel">取消</hos-button>
            <hos-button type="success" @click="save" :loading="loading">保存</hos-button>
        </div>
    </div>
</template>

# 员工新增页逻辑

// 书写业务逻辑
export default {
  props: ['id'],
  components: {},
  data() {
    return {
      loading: false,
      staffForm: {
        name:"",
        email:"",
        phone:"",
        gender:"",
        age:"",
        description:""
      },
      rules: {
        name: [{ required: true, message: '请输入内容' }],
        email: [{ required: true, message: '请输入内容' }],
        phone: [{ required: true, message: '请输入内容' }],
        gender: [{ required: true, message: '请输入内容' }],
        age: [{ required: true, message: '请输入内容' }],
      },
    }
  },
  mounted() {
    this.staffForm = {
      name:"",
      email:"",
      phone:"",
      gender:"",
      age:"",
      description:""
    };
    if(this.id){
      this.getById();
    }
  },
  methods: {
    getById(){
      this.$api('staff.selectById', {id: this.id}).then((response) => {
        if (response.success) {
          this.staffForm = response.data;
        }
      })
    },
    save() {
      /**
       * 保存操作，首先校验表单，通过后发起ajax请求
       */
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$api(
              this.id ? 'staff.updateById' : 'staff.insert',
              this.staffForm
          ).then((response) => {
            this.loading = false;
            if (response.success) {
              this.showAddDialog = false;
              this.$message.success('保存成功');
              this.$store.commit("CLOSE_DIALOG", {_uid: "staffAddDialog"});
              this.$store.commit("UPDATE_TABLE",{_uid: 'staffTable'});
            } else {
              this.$message.error('保存失败')
            }
          }).catch((err)=>{
            this.loading = false;
            console.log(err)
          })
        }
      })
    },
    cancel() {
      this.$store.commit("CLOSE_DIALOG", {
        _uid: "staffAddDialog"
      });
      this.loading = false
    },
  },
}

# 运行测试

在浏览器输入地址 http://localhost:8080/user/staff 如未登录,请先输入用户名密码登录.运行结果如下:

example7.jpg

← api →