全栈开发实战小草看书之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端(十)布局】
下一章 【】