gitee
/
django-vue-admin
mirror of https://gitee.com/liqianglog/django-vue-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

新功能(前端组件): 更新CRUD组件

pull/36/MERGE
李强 2021-05-25 20:03:39 +08:00
parent 74ca130e2b
commit 695886bf26
6 changed files with 240 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
dvadmin-ui/src/components/ModelDisplay/index.vue
View File

@ -15,12 +15,23 @@
active-color="#13ce66" active-color="#13ce66"
inactive-color="#ff4949"> inactive-color="#ff4949">
</el-switch> </el-switch>
<model-select
v-else-if="value.type==='model_select' && value.select_data"
:value.sync="queryParams[value.prop]"
:prop="value.prop"
:placeholder="value.select_data.placeholder|| '请选择'"
:multiple="value.select_data.multiple|| false"
:disable_branch_nodes="value.select_data.disable_branch_nodes|| false"
:label_name="value.select_data.label_name|| 'name'"
:select_options="modelSelect[value.prop] || []"
style="width: 180px;line-height: 20px;"
/>
<dept-tree ref="dept_tree" v-else-if="value.type==='depts'" :value.sync="queryParams[value.prop]" <dept-tree ref="dept_tree" v-else-if="value.type==='depts'" :value.sync="queryParams[value.prop]"
style="width: 150px;"></dept-tree> style="width: 150px;"></dept-tree>
<users-tree ref="users_tree" v-else-if="value.type==='users'" :value.sync="queryParams[value.prop]" <users-tree ref="users_tree" v-else-if="value.type==='users'" :value.sync="queryParams[value.prop]"
style="width: 150px;"></users-tree> style="width: 150px;"></users-tree>
<el-date-picker <el-date-picker
v-else-if="value.type==='date'" v-else-if="value.type==='date'|| value.type==='datetime'"
v-model="dateRange" v-model="dateRange"
size="small" size="small"
style="width: 240px" style="width: 240px"
@ -37,7 +48,6 @@
:placeholder="value.label" :placeholder="value.label"
clearable clearable
size="small" size="small"
style="width: 240px"
> >
<el-option <el-option
v-for="dict in DictsOptions[value.option_key]" v-for="dict in DictsOptions[value.option_key]"
@ -55,11 +65,13 @@
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
</el-row>
<el-form-item> <el-form-item>
<el-col :offset="8">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchFormSubmit">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchFormSubmit">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-col>
</el-form-item> </el-form-item>
</el-row>
</el-form> </el-form>
</div> </div>
<el-row v-if="topLayout" style="margin-bottom: 20px"> <el-row v-if="topLayout" style="margin-bottom: 20px">
@ -72,7 +84,7 @@
plain plain
:icon="func.icon||'el-icon-plus'" :icon="func.icon||'el-icon-plus'"
size="mini" size="mini"
@click="handleAdd(func.api)" @click="handleAdd(func)"
v-hasPermi="func.permis" v-hasPermi="func.permis"
>{{func.label}} >{{func.label}}
</el-button> </el-button>
@ -83,7 +95,7 @@
:disabled="multipleSelection.length!==1" :disabled="multipleSelection.length!==1"
:icon="func.icon||'el-icon-edit'" :icon="func.icon||'el-icon-edit'"
size="mini" size="mini"
@click="handleUpdate(func.api,{})" @click="handleUpdate(func,{})"
v-hasPermi="func.permis" v-hasPermi="func.permis"
>{{func.label}} >{{func.label}}
</el-button> </el-button>
@ -94,7 +106,7 @@
:disabled="multipleSelection.length===0" :disabled="multipleSelection.length===0"
:icon="func.icon||'el-icon-delete'" :icon="func.icon||'el-icon-delete'"
size="mini" size="mini"
@click="handleDelete(func.api,{})" @click="handleDelete(func,{})"
v-hasPermi="func.permis" v-hasPermi="func.permis"
>{{func.label}} >{{func.label}}
</el-button> </el-button>
@ -104,7 +116,7 @@
plain plain
:icon="func.icon||'el-icon-download'" :icon="func.icon||'el-icon-download'"
size="mini" size="mini"
@click="handleExport(func.api)" @click="handleExport(func)"
v-hasPermi="func.permis" v-hasPermi="func.permis"
>{{func.label}} >{{func.label}}
</el-button> </el-button>
@ -178,7 +190,6 @@
:label="field.label" :label="field.label"
:sortable="field.sortable" :sortable="field.sortable"
:width="field.width || ''" :width="field.width || ''"
:sort-method="sortMethod"
show-overflow-tooltip> show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
<slot :name="field.prop" :values="scope.row" :prop="field.prop" :field="field"> <slot :name="field.prop" :values="scope.row" :prop="field.prop" :field="field">
@ -190,6 +201,7 @@
<el-table-column <el-table-column
label="操作" label="操作"
align="center" align="center"
width="220"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
v-if="hasPermi(getOperationPermis())" v-if="hasPermi(getOperationPermis())"
> >
@ -200,7 +212,7 @@
size="mini" size="mini"
type="text" type="text"
:icon="func.icon||'el-icon-view'" :icon="func.icon||'el-icon-view'"
@click="handleSelect(func.api,scope.row)" @click="handleSelect(func,scope.row)"
v-hasPermi="func.permis" v-hasPermi="func.permis"
>{{func.label}}</el-button> >{{func.label}}</el-button>
&nbsp; &nbsp;
@ -209,7 +221,7 @@
size="mini" size="mini"
type="text" type="text"
:icon="func.icon||'el-icon-edit'" :icon="func.icon||'el-icon-edit'"
@click="handleUpdate(func.api,scope.row)" @click="handleUpdate(func,scope.row)"
v-hasPermi="func.permis" v-hasPermi="func.permis"
>{{func.label}}</el-button> >{{func.label}}</el-button>
&nbsp; &nbsp;
@ -218,7 +230,7 @@
size="mini" size="mini"
type="text" type="text"
:icon="func.icon||'el-icon-delete'" :icon="func.icon||'el-icon-delete'"
@click="handleDelete(func.api,scope.row)" @click="handleDelete(func,scope.row)"
v-hasPermi="func.permis" v-hasPermi="func.permis"
>{{func.label}}</el-button> >{{func.label}}</el-button>
</span> </span>
@ -249,8 +261,8 @@
</el-row> </el-row>
<!-- 添加或修改参数配置对话框 --> <!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body @close="close">
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
<el-form-item v-if="value.form" :label="value.label" :prop="value.prop" v-for="(value,index) in fields" <el-form-item v-if="value.form" :label="value.label" :prop="value.prop" v-for="(value,index) in fields"
:key="index"> :key="index">
<!-- date/option/bool/users/depts --> <!-- date/option/bool/users/depts -->
@ -261,11 +273,11 @@
inactive-color="#ff4949"> inactive-color="#ff4949">
</el-switch> </el-switch>
<dept-tree ref="dept_tree" v-else-if="value.type==='depts'" :value.sync="form[value.prop]" <dept-tree ref="dept_tree" v-else-if="value.type==='depts'" :value.sync="form[value.prop]"
style="width: 200px;"></dept-tree> ></dept-tree>
<users-tree ref="users_tree" v-else-if="value.type==='users'" :value.sync="form[value.prop]" <users-tree ref="users_tree" v-else-if="value.type==='users'" :value.sync="form[value.prop]"
style="width: 200px;"></users-tree> ></users-tree>
<el-date-picker <el-date-picker
v-else-if="value.type==='date'" v-else-if="value.type==='date' || value.type==='datetime'"
v-model="form[value.prop]" v-model="form[value.prop]"
type="date" type="date"
size="small" size="small"
@ -279,7 +291,7 @@
:placeholder="value.label" :placeholder="value.label"
clearable clearable
size="small" size="small"
style="width: 240px" style="width: 100%"
> >
<el-option <el-option
v-for="dict in DictsOptions[value.option_key]" v-for="dict in DictsOptions[value.option_key]"
@ -288,6 +300,13 @@
:value="dict.dictValue" :value="dict.dictValue"
/> />
</el-select> </el-select>
<el-input
v-else-if="value.type==='text'"
v-model="form[value.prop]"
:placeholder="value.label"
type="textarea"
clearable
size="small"/>
<model-select <model-select
v-else-if="value.type==='model_select' && value.select_data" v-else-if="value.type==='model_select' && value.select_data"
:value.sync="form[value.prop]" :value.sync="form[value.prop]"
@ -295,7 +314,8 @@
:multiple="value.select_data.multiple|| false" :multiple="value.select_data.multiple|| false"
:disable_branch_nodes="value.select_data.disable_branch_nodes|| false" :disable_branch_nodes="value.select_data.disable_branch_nodes|| false"
:label_name="value.select_data.label_name|| 'name'" :label_name="value.select_data.label_name|| 'name'"
:listApi="value.select_data.listApi|| null" :select_options="modelSelect[value.prop] || []"
style="line-height: 20px;"
/> />
<el-input <el-input
v-else v-else
@ -349,7 +369,8 @@
import * as Utils from '@/utils'; import * as Utils from '@/utils';
import {getToken} from '@/utils/auth' import {getToken} from '@/utils/auth'
import ModelSelect from "../ModelSelect/index"; import ModelSelect from "../ModelSelect/index";
import {listUser} from '@/api/vadmin/permission/user'
import {treeselect} from '@/api/vadmin/permission/dept'
export default { export default {
name: 'ModelDisplay', name: 'ModelDisplay',
components: {ModelSelect}, components: {ModelSelect},
@ -486,6 +507,7 @@
// 导入api // 导入api
importApi: '', importApi: '',
DictsOptions: {}, DictsOptions: {},
modelSelect: {},
getRowKeys: row => { getRowKeys: row => {
if (this.rowKey) { if (this.rowKey) {
return row[this.rowKey]; return row[this.rowKey];
@ -530,8 +552,9 @@
}, },
created() { created() {
this.initComponentData(); this.initComponentData();
this.initDictsOptions(); this.initOptions();
this.getTableData(); this.getOperationPermis()
// this.getTableData();
this.funcs.map(value => { this.funcs.map(value => {
if (value.type === 'select') { if (value.type === 'select') {
this.selectApi = value.api this.selectApi = value.api
@ -591,9 +614,11 @@
} else if (type === 'option') { } else if (type === 'option') {
return this.formatOptions(field.option_key, row[prop]); return this.formatOptions(field.option_key, row[prop]);
} else if (type === 'users') { } else if (type === 'users') {
return this.formatUsers(row[prop]); return this.formatSelect(row[prop],prop);
} else if (type === 'depts') { } else if (type === 'depts') {
return this.formatDepts(row[prop]); return this.formatSelect(row[prop],prop);
} else if (type === 'model_select') {
return this.formatSelect(row[prop], prop);
} else if (type.startsWith('bool')) { } else if (type.startsWith('bool')) {
return row[prop] ? '是' : '否'; return row[prop] ? '是' : '否';
} else if (type === 'choices') { } else if (type === 'choices') {
@ -622,7 +647,7 @@
}, },
formatOptions(option_key, id) { formatOptions(option_key, id) {
var data = this.DictsOptions[option_key] var data = this.DictsOptions[option_key]
if (!id || !data) return "" if (id === null || !data) return ""
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
if (data[i].dictValue === id) { if (data[i].dictValue === id) {
return data[i].dictLabel return data[i].dictLabel
@ -630,9 +655,9 @@
} }
return "" return ""
}, },
formatUsers(id) { formatSelect(id, prop) {
if (!id) return "" var data = this.modelSelect[prop]
var data = this.$refs.users_tree[0].usersOptions if (!id || !data) return ""
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
if (data[i].id === id) { if (data[i].id === id) {
return data[i].label return data[i].label
@ -640,19 +665,6 @@
} }
return "" return ""
}, },
formatDepts(id) {
if (!id) return ""
var data = this.$refs.dept_tree[0].deptOptions
for (var i = 0; i < data.length; i++) {
if (data[i].id === id) {
return data[i].label
}
}
return ""
},
sortMethod(a, b) {
return -1;
},
getTableData() { getTableData() {
this.listInterfaceData(this.getRequestParams()); this.listInterfaceData(this.getRequestParams());
return this.tableData; return this.tableData;
@ -732,14 +744,33 @@
this.resetForm("queryForm"); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
}, },
/** 获取Dicts值 */ /** 初始化 Options */
initDictsOptions() { initOptions() {
let Promises = []
this.fields.map(value => { this.fields.map(value => {
if (value.option_key) { if (value.option_key) {
this.getDicts(value.option_key).then(response => { Promises.push(this.getDicts(value.option_key).then(response => {
this.DictsOptions[value.option_key] = response.data this.DictsOptions[value.option_key] = response.data
}) }))
} }
if (value.type === "model_select" && value.select_data) {
Promises.push(this.getModelSelect(value.prop, value.select_data.label_name, value.select_data.listApi).then(response => {
this.modelSelect[value.prop] = response
}))
}
if (value.type === "users") {
Promises.push(this.getModelSelect(value.prop, "name", listUser,{_fields:"id,name"}).then(response => {
this.modelSelect[value.prop] = response
}))
}
if (value.type === "depts") {
Promises.push(this.getModelSelect(value.prop, "label", treeselect).then(response => {
this.modelSelect[value.prop] = response
}))
}
})
Promise.all(Promises).then(() => {
this.getTableData()
}) })
}, },
// 处理修改多选的值 // 处理修改多选的值
@ -784,74 +815,77 @@
this.$emit('header-click', column, event); this.$emit('header-click', column, event);
}, },
/**新增按钮*/ /**新增按钮*/
handleAdd(api) { handleAdd(func) {
this.dateRange = []; this.dateRange = [];
this.queryParams = {} this.queryParams = {}
this.resetForm("queryForm"); this.resetForm("queryForm");
this.open = true; this.open = true;
this.title = "新增"; this.title = func.label;
this.submitFormApi = api this.submitFormApi = func.api
}, },
/**修改按钮*/ /**修改按钮*/
handleUpdate(api, row) { handleUpdate(func, row) {
this.dateRange = []; this.dateRange = [];
this.queryParams = {} this.queryParams = {}
this.resetForm("queryForm"); this.resetForm("queryForm");
this.submitFormApi = api this.submitFormApi = func.api
const id = row.id || this.multipleSelection.map(item => item.id); const id = row.id || this.multipleSelection.map(item => item.id);
if (this.selectApi) { if (this.selectApi) {
this.selectApi(id).then(response => { this.selectApi(id).then(response => {
this.form = response.data; let data = response.data
if (data && typeof data === "object") {
this.form = data[Object.keys(data)[0]]
}
this.open = true; this.open = true;
this.title = "修改";
}); });
} else { } else {
this.open = true; this.open = true;
this.title = "修改";
} }
this.title = func.label;
}, },
/**修改按钮*/ /**详情按钮*/
handleSelect(api, row) { handleSelect(func, row) {
this.dateRange = []; this.dateRange = [];
this.queryParams = {} this.queryParams = {}
this.resetForm("queryForm"); this.resetForm("queryForm");
this.submitFormApi = api this.submitFormApi = func.api
const id = row.id || this.multipleSelection.map(item => item.id); const id = row.id || this.multipleSelection.map(item => item.id);
if (this.selectApi) { if (this.selectApi) {
this.selectApi(id).then(response => { this.selectApi(id).then(response => {
this.form = response.data; let data = response.data
if (data && typeof data === "object") {
this.form = data[Object.keys(data)[0]]
}
this.open = true; this.open = true;
this.title = "详情";
}); });
} else { } else {
this.open = true; this.open = true;
this.title = "详情";
} }
this.title = func.label;
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(api, row) { handleDelete(func, row) {
const ids = row.id || this.multipleSelection.map(item => item.id); const ids = row.id || this.multipleSelection.map(item => item.id);
this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', "警告", { this.$confirm('是否确认' + func.label + '编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(function () { }).then(function () {
return api(ids); return func.api(ids);
}).then(() => { }).then(() => {
this.getTableData(); this.getTableData();
this.msgSuccess("删除成功"); this.msgSuccess("删除成功");
}) })
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport(api) { handleExport(func) {
const queryParams = this.queryParams; const queryParams = this.queryParams;
this.$confirm('是否确认导出所有符合条件的数据项?', "警告", { this.$confirm('是否确认导出所有符合条件的数据项?', "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(function () { }).then(function () {
return api(queryParams); return func.api(queryParams);
}).then(response => { }).then(response => {
this.download(response.data.file_url, response.data.name); this.download(response.data.file_url, response.data.name);
}) })
@ -865,28 +899,35 @@
let dict = {} let dict = {}
this.fields.map(value => { this.fields.map(value => {
if (value.form) { if (value.form) {
if (value.required) {
dict[value.prop] = [{ dict[value.prop] = [{
required: value.required, required: value.required,
message: value.rules_message || value.label + "不能为空", message: value.rules_message || value.label + "不能为空",
trigger: value.trigger || "blur" trigger: value.trigger || "change"
}] }]
if (value.validator) {
dict[value.prop][1] = {
validator: value.validator,
trigger: value.trigger || "change"
}
}
}
} }
}) })
console.log(2, dict)
return dict return dict
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
this.$refs["form"].validate(valid => { this.$refs["ruleForm"].validate(valid => {
if (valid) { if (valid) {
if (this.form.id !== undefined) { if (this.form.id !== undefined) {
this.submitFormApi(this.form).then(response => { this.submitFormApi(this.form).then(() => {
this.msgSuccess("修改成功"); this.msgSuccess("修改成功");
this.open = false; this.open = false;
this.getTableData(); this.getTableData();
}); });
} else { } else {
this.submitFormApi(this.form).then(response => { this.submitFormApi(this.form).then(() => {
this.msgSuccess("新增成功"); this.msgSuccess("新增成功");
this.open = false; this.open = false;
this.getTableData(); this.getTableData();
@ -899,6 +940,10 @@
cancel() { cancel() {
this.open = false; this.open = false;
}, },
close(){
this.$refs["ruleForm"].resetFields()
this.form = {}
},
// 获取操作的权限列表 // 获取操作的权限列表
getOperationPermis() { getOperationPermis() {
let Permis = [] let Permis = []

35
dvadmin-ui/src/components/ModelSelect/index.vue
View File

@ -1,20 +1,19 @@
<!-- 通用选择器 --> <!-- 通用选择器 -->
<template> <template>
<div>
<treeselect v-model="select_value" :options="selectOptions" :multiple="multiple" :show-count="true" <treeselect v-model="select_value" :options="selectOptions" :multiple="multiple" :show-count="true"
:placeholder="placeholder" :disable-branch-nodes="disable_branch_nodes"/> :placeholder="placeholder" :disable-branch-nodes="disable_branch_nodes" style="line-height:20px"/>
</div>
</template> </template>
<script> <script>
import Treeselect from '@riophae/vue-treeselect' import Treeselect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default { export default {
name: "ModelSelect", name: "ModelSelect",
props: { props: {
/* 选择器的内容 */ /* 选择器的内容 */
value: {type: Number | Array,}, value: {type: Number || Array,},
prop: {type: String,},
/* 用于显示选项 */ /* 用于显示选项 */
placeholder: {type: String, default: "请选择",}, placeholder: {type: String, default: "请选择",},
/* 是否多选 */ /* 是否多选 */
@ -25,6 +24,8 @@
label_name: {type: String, default: 'name',}, label_name: {type: String, default: 'name',},
/* 选择器信息 api 对象 */ /* 选择器信息 api 对象 */
listApi: {type: Function, default: null}, listApi: {type: Function, default: null},
/* 选择器信息 selectOptions 对象 */
select_options: {type: Array, default: null}
}, },
components: {Treeselect}, components: {Treeselect},
data() { data() {
@ -42,6 +43,14 @@
this.select_value = newValue this.select_value = newValue
}, },
immediate: true immediate: true
},
select_options: {
handler: function (newValue) {
if (newValue) {
this.selectOptions = this.handleTree(newValue, 'id', 'parentId')
}
},
immediate: true
} }
}, },
created() { created() {
@ -50,18 +59,16 @@
methods: { methods: {
/** 查询所有选择器信息 **/ /** 查询所有选择器信息 **/
getData() { getData() {
this.listApi({pageNum: "all", _fields: "id," + this.label_name}).then(response => { if (this.select_options) return
response.data.map(val => { this.getModelSelect(this.prop, this.label_name, this.listApi).then(response => {
val["label"] = val[this.label_name] this.selectOptions = response
})
this.selectOptions = this.handleTree(response.data, 'id', 'parentId')
}) })
}, },
} }
} }
</script> </script>
<style scoped> <style>
</style> </style>

2
dvadmin-ui/src/main.js
View File

@ -36,10 +36,12 @@ import ModelDisplay from '@/components/ModelDisplay';
import CommonIcon from '@/components/CommonIcon'; import CommonIcon from '@/components/CommonIcon';
import CommonStaticTable from '@/components/CommonStaticTable'; import CommonStaticTable from '@/components/CommonStaticTable';
import {getCrontabData, getIntervalData} from "./utils/validate"; // 通用图标组件 import {getCrontabData, getIntervalData} from "./utils/validate"; // 通用图标组件
import {getModelSelect} from "@/utils/modelSelect";
// 全局方法挂载 // 全局方法挂载
Vue.prototype.getDicts = getDicts Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.getModelSelect = getModelSelect
Vue.prototype.parseTime = parseTime Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange Vue.prototype.addDateRange = addDateRange

4
dvadmin-ui/src/store/index.js
View File

@ -5,6 +5,7 @@ import user from './modules/user'
import tagsView from './modules/tagsView' import tagsView from './modules/tagsView'
import permission from './modules/permission' import permission from './modules/permission'
import settings from './modules/settings' import settings from './modules/settings'
import modelSelect from './modules/modelSelect'
import getters from './getters' import getters from './getters'
Vue.use(Vuex) Vue.use(Vuex)
@ -15,7 +16,8 @@ const store = new Vuex.Store({
user, user,
tagsView, tagsView,
permission, permission,
settings settings,
modelSelect
}, },
getters getters
}) })

49
dvadmin-ui/src/store/modules/modelSelect.js Normal file
View File

@ -0,0 +1,49 @@
const modelSelect = {
namespaced: true,
state: {
modelSelectMap: {},
},
mutations: {
setModelSelectMap(state, modelSelectMap) {
state.modelSelectMap = {...state.modelSelectMap, ...modelSelectMap}
},
},
actions: {
// 从后台获取需要 select 选择数据
// modelName : 模型 name
// labelName : 后端接口返回时，配置下拉选择时显示的名字字段，如：name/title/nickName
// listApi : 查询列表的api
async getModelSelect({commit, state}, paramsMap) {
let modelName = paramsMap["modelName"]
let labelName = paramsMap["labelName"]
let listApi = paramsMap["listApi"]
let params = paramsMap["params"]
if (state.modelSelectMap[modelName]) {
return state.modelSelectMap[modelName]
} else {
const res = await listApi({pageNum: "all", ...params})
if (res.code === 200) {
const modelSelectMap = {}
const dict = []
res.data && res.data.map(item => {
dict.push({
label: item[labelName],
value: item.id,
id: item.id,
parentId: item.parentId
})
})
modelSelectMap[modelName] = dict
commit("setModelSelectMap", modelSelectMap)
return state.modelSelectMap[modelName]
}
}
}
},
getters: {
getModelSelect(state) {
return state.modelSelectMap
}
}
}
export default modelSelect

7
dvadmin-ui/src/utils/modelSelect.js Normal file
View File

@ -0,0 +1,7 @@
import store from '@/store'
// 获取字典方法 使用示例 this.getModelSelect(this.prop, this.label_name, this.listApi).then(res)
// 或者 async函数下 const res = await this.getModelSelect(this.prop, this.label_name, this.listApi)
export const getModelSelect = async (modelName, labelName, listApi,params) => {
await store.dispatch("modelSelect/getModelSelect", {modelName, labelName, listApi,params})
return store.getters["modelSelect/getModelSelect"][modelName]
}