【全栈开发实战小草看书之Web端（十一）公司管理】

全栈开发实战小草看书之Web端（十一）公司管理

列表代码文件（pages/sys/company/Index.vue）

<template>
  <div>
    <div class="row">
      <el-button type="danger" @click="remove()">删除</el-button>
      <el-button type="primary" @click="open(0, 'Edit')">增加</el-button>
      <el-button type="primary" @click="list">刷新</el-button>
    </div>
    <el-table ref="table" :data="data.records" border highlight-current-row @selection-change="select">
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column label="编码" prop="id" header-align="center"></el-table-column>
      <el-table-column label="名称" prop="name" header-align="center"></el-table-column>
      <el-table-column label="电话" prop="phone" header-align="center"></el-table-column>
      <el-table-column label="地址" prop="addr" header-align="center"></el-table-column>
      <el-table-column label="操作" width="150px" align="center">
        <template #default="scope">
          <el-button type="primary" circle icon="edit" title="编辑" @click="open(scope.row.id, 'Edit')"></el-button>
          <el-button type="danger" circle icon="delete" title="删除" @click="remove([scope.row.id])"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background v-model:page-size="params.size" :total="data.total" v-model:current-page="params.current" layout="total,prev,pager,next,sizes"></el-pagination>
    <el-drawer v-model="component.name" @close="list">
      <component :id="component.id" :is="component.name" @close="close"></component>
    </el-drawer>
  </div>
</template>

<script>
import { defineAsyncComponent, toRefs } from "vue";
import { useComponent, useList } from "@/crud";

export default {
  components: {
    Edit: defineAsyncComponent(() => import("./Edit.vue")),
  },
  setup() {
    const { component, open, close } = useComponent();
    const { state, select, list, remove } = useList("/mgt/sys/companies");

    return {
      component,
      open,
      close,
      ...toRefs(state),
      select,
      list,
      remove,
    };
  },
};
</script>

编辑代码文件（pages/sys/company/Edit.vue）

<template>
  <el-form ref="form" :model="data" :rules="rules">
    <el-form-item label="编码" prop="id">
      <el-input v-model="data.id" disabled></el-input>
    </el-form-item>
    <el-form-item label="名称" prop="name">
      <el-input v-model="data.name" maxlength="50" clearable></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="data.phone" maxlength="50" clearable></el-input>
    </el-form-item>
    <el-form-item label="地址" prop="addr">
      <el-input v-model="data.addr" maxlength="100" clearable></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="state">
      <el-select v-model="data.state" placeholder="请选择" filterable>
        <el-option v-for="dict in dicts" :key="dict.code" :label="dict.name" :value="dict.code"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <div class="row-center">
        <el-button type="primary" @click="save()">保存</el-button>
        <el-button type="primary" @click="save(true)">保存增加</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { toRefs } from "vue";
import { useEdit } from "@/crud";
import { useGet } from "@/http";

export default {
  props: {
    id: {
      type: Number,
      required: true,
    },
  },
  setup(props, context) {
    const { state, save } = useEdit(
      context,
      {
        id: props.id,
        rules: {
          name: {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          state: {
            required: true,
            message: "请选择状态",
            trigger: "blur",
          },
        },
        dicts: [],
      },
      async () => {
        state.dicts = await useGet("/mgt/sys/dicts/search?type=State");
      }
    );

    return {
      ...toRefs(state),
      save,
    };
  },
};
</script>

使用说明

这里使用了【全栈开发实战小草看书之Web端（七）Crud增删改查组合式API】中的封装方法，代码看起来很简洁啊~
上一章 【全栈开发实战小草看书之Web端（十）布局】
下一章 【】