qiushanhe/dm-manage-web
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
qsh
2023-02-15 09:17:05 +08:00
parent eebc6c8e4c
commit a7606b1f20
301 changed files with 23347 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/demo/baseComponents/index.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div class="main-content">
<!-- 组件 -->
<el-card class="mb15">
<!-- icon-class 为 icon 的名字; class-name 为 icon 自定义 class-->
<svg-icon icon-class="eye" />
<svg-icon style="color: red" icon-class="icon-mine"></svg-icon>
<svg-icon style="color: red" icon-class="icon_account"></svg-icon>
</el-card>
<!-- 搜索页布局2 - 行布局 -->
<el-card class="mb15 search-form">
<el-form inline>
<el-form-item label="名称/账户">
<el-input placeholder="请输入" clearable />
</el-form-item>
<el-form-item label="名称/账户">
<el-input placeholder="请输入" clearable />
</el-form-item>
<el-form-item label="名称/账户">
<el-input placeholder="请输入" clearable />
</el-form-item>
<el-button>重置</el-button>
<el-button type="primary">查询</el-button>
</el-form>
</el-card>
<el-card class="mb15">
<div class="p20">asd</div>
</el-card>
</div>
</template>
<script>
export default {
name: 'BaseComponents'
};
</script>
<style scoped></style>

233
src/views/demo/basePage/index.vue Normal file
View File

@@ -0,0 +1,233 @@
<!-- 简单的增删改查页面模板 -->
<template>
<div class="main-content">
<!-- S - 搜索表单 -->
<!-- 搜索表单不支持多行文本，如有需要，请单独布局 -->
<el-card class="mb15 search-form">
<el-form :model="searchParams" label-width="80px">
<el-row :gutter="20">
<el-col :lg="8" :xl="6">
<el-form-item label="文本类型">
<el-input v-model="searchParams.xxSearchValueA" v-jtrim placeholder="请输入" maxlength="16" />
</el-form-item>
</el-col>
<el-col :lg="8" :xl="6">
<el-form-item label="数值类型">
<el-input v-model="searchParams.xxSearchValueB" placeholder="请输入" maxlength="11" />
</el-form-item>
</el-col>
<el-col :lg="8" :xl="6">
<el-form-item label="日期类型">
<el-date-picker v-model="searchParams.xxSearchValueC" type="daterange" />
</el-form-item>
</el-col>
<el-col :lg="8" :xl="6">
<el-form-item label="下拉框">
<el-select v-model="searchParams.xxSearchValueD" placeholder="请选择">
<el-option v-for="item in xxSearchValueDOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :lg="8" :xl="6" class="text-right float-r mb10">
<el-button @click="handleReset">重置</el-button>
<el-button v-jclick type="primary" @click="handleSearch">查询 </el-button>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- E - 搜索表单 -->
<!-- S - 表格展示 -->
<el-card>
<div class="mb15 flex jc-sb ai-c">
<div class="fs16 fw600">这里是标题</div>
<div>
<el-button>导出</el-button>
<el-button type="primary" @click="handleAdd">新增</el-button>
</div>
</div>
<el-table v-loading="loading" :data="tableList">
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
<el-table-column prop="address" label="地址" />
<el-table-column prop="address" label="地址" />
<el-table-column prop="address" label="地址" />
<el-table-column prop="address" label="地址" />
<el-table-column prop="address" label="地址" />
<el-table-column label="操作" fixed="right" width="100px">
<template slot-scope="{ row }">
<el-button type="text" size="small" @click="handleEdit(row)">编辑 </el-button>
<el-button type="text" size="small" @click="handleRemove(row)">删除 </el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="searchParams.pageNum" :limit.sync="searchParams.pageSize" @pagination="getList" />
</el-card>
<!-- E - 表格展示 -->
<!-- S - 新增修改弹窗 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" class="dialog-form">
<el-form ref="dialogForm" :model="dialogForm" label-width="80px" :rules="rules">
<el-form-item key="xxDialogValueA" label="文本类型" prop="xxDialogValueA">
<el-input v-model="dialogForm.xxDialogValueA" type="请输入" />
</el-form-item>
<el-form-item key="xxDialogValueB" label="文本类型" prop="xxDialogValueB">
<el-input v-model="dialogForm.xxDialogValueB" type="请输入" />
</el-form-item>
<el-form-item key="xxDialogValueC" label="文本类型" prop="xxDialogValueC">
<el-input v-model="dialogForm.xxDialogValueC" type="请输入" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button v-jclick type="primary" :disabled="saving" @click="handleConfirm">确 定</el-button>
</span>
</el-dialog>
<!-- E - 新增修改弹窗 -->
</div>
</template>
<script>
import api from '@/api/basePage';
export default {
name: 'BasePage',
data() {
return {
loading: false,
saving: false,
// 分页全部
total: 10,
// 查询参数
searchParams: {},
// 列表
xxSearchValueDOptions: [
{ value: '选项1', label: '黄金糕' },
{ value: '选项2', label: '双皮奶' },
{ value: '选项3', label: '蚵仔煎' },
{ value: '选项4', label: '黄金糕1' },
{ value: '选项5', label: '双皮奶1' },
{ value: '选项6', label: '蚵仔煎1' }
],
rules: {
xxDialogValueA: [{ required: true, message: '请输入', trigger: 'blur' }],
xxDialogValueB: [{ required: true, message: '请输入', trigger: 'blur' }],
xxDialogValueC: [{ required: true, message: '请输入', trigger: 'blur' }]
},
// 表数据
tableList: [],
// 弹窗
dialogVisible: false,
dialogTitle: `新增${this.$route.meta.title}`,
dialogForm: {}
};
},
created() {
this.resetSearchParams();
this.initData();
},
methods: {
initData() {
this.getList();
},
resetSearchParams() {
this.searchParams = {
pageNum: 1,
pageSize: this.defaultPageSize,
xxSearchValueA: undefined,
xxSearchValueB: undefined,
xxSearchValueC: [this.parseTime(new Date(), '{y}-{m}-{d}'), this.parseTime(new Date(), '{y}-{m}-{d}')],
xxSearchValueD: undefined
};
// const _options = this.$options.data();
// debugger;
// this.searchParams = this.$options;
},
handleReset() {
this.resetSearchParams();
this.getList();
},
// S - 增删改查
handleSearch() {
this.searchParams.pageNum = 1;
this.getList();
},
handleAdd() {
this.dialogTitle = `新增${this.$route.meta.title}`;
this.resetDialogForm();
this.dialogVisible = true;
},
handleEdit(val) {
this.dialogTitle = `编辑${this.$route.meta.title}`;
this.dialogForm = this.deepClone(val);
this.resetDialogForm();
this.dialogVisible = true;
},
handleRemove(row) {
this.$modal.confirm(`是否确认删除数据项"${row.name}"的${this.$route.meta.title}？`).then(async () => {
const params = {
id: row.id
};
const resp = await api.remove(params);
if (resp.code === this.$global.successCode) {
this.$message.success('删除成功');
this.getList();
}
});
},
// E - 增删改查
// 获取表格列表
async getList() {
this.loading = true;
const params = {
...this.queryParams
};
const resp = await api.pageList(params);
this.loading = false;
if (resp.code === this.$global.successCode) {
this.tableList = resp.data.records;
this.total = resp.data.total;
}
// 待删
this.tableList = [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }
];
},
// S - 弹窗操作
resetDialogForm() {
this.dialogForm = {
xxDialogValueA: undefined,
xxDialogValueB: undefined,
xxDialogValueC: undefined
};
this.resetForm('dialogForm');
},
handleConfirm() {
this.$refs.dialogForm.validate(async (valid) => {
if (!valid) {
return;
}
const params = this.deepClone(this.dialogForm);
let resp;
this.saving = true;
if (params.id) {
resp = await api.update(params);
} else {
resp = await api.insert(params);
}
this.saving = false;
if (resp.code === this.$global.successCode) {
this.$message.success(`${this.dialogTitle}成功`);
this.dialogVisible = false;
this.handleSearch();
}
});
}
// E - 弹窗操作
}
};
</script>
<style scoped lang="scss"></style>