🎉 模型管理批量删除

This commit is contained in:
32189 2023-03-03 19:56:33 +08:00
parent f88bc832af
commit 86b9a84a09
3 changed files with 203 additions and 169 deletions

View File

@ -8,10 +8,11 @@ export function fetchList(query) {
}) })
} }
export function delObj(id) { export function delObj(ids:Object) {
return request({ return request({
url: '/admin/model/' + id, url: '/admin/model',
method: 'delete' method: 'delete',
data: ids
}) })
} }
@ -22,7 +23,7 @@ export function deploy(id) {
}) })
} }
export function addObj(obj) { export function addObj(obj?: Object) {
return request({ return request({
url: '/admin/model/insert', url: '/admin/model/insert',
method: 'post', method: 'post',

View File

@ -1,105 +1,134 @@
<template> <template>
<el-dialog :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" :close-on-click-modal="false" <el-dialog :close-on-click-modal="false" :title="form.id ? $t('common.editBtn') : $t('common.addBtn')"
draggable> draggable
<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="90px"> v-model="visible">
<el-row :gutter="35"> <el-form :model="form" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
<el-col :span="24" class="mb20"> <el-row :gutter="35">
<el-form-item :label="$t('model.name')" prop="name"> <el-col :span="24" class="mb20">
<el-input v-model="form.name" :placeholder="$t('model.inputNameTip')" clearable></el-input> <el-form-item :label="$t('model.name')" prop="name">
</el-form-item> <el-input :placeholder="$t('model.inputNameTip')" clearable v-model="form.name"></el-input>
</el-col> </el-form-item>
<el-col :span="24" class="mb20"> </el-col>
<el-form-item :label="$t('model.key')" prop="key"> <el-col :span="24" class="mb20">
<el-input v-model="form.key" :placeholder="$t('model.inputKeyTip')" clearable /> <el-form-item :label="$t('model.key')" prop="key">
</el-form-item> <el-input :placeholder="$t('model.inputKeyTip')" clearable v-model="form.key"/>
</el-col> </el-form-item>
<el-col :span="24" class="mb20"> </el-col>
<el-form-item :label="$t('model.category')" prop="category"> <el-col :span="24" class="mb20">
<el-input v-model="form.category" :placeholder="$t('model.inputCategoryTip')" clearable /> <el-form-item :label="$t('model.category')" prop="category">
</el-form-item> <el-input :placeholder="$t('model.inputCategoryTip')" clearable v-model="form.category"/>
</el-col> </el-form-item>
</el-row> </el-col>
</el-form> </el-row>
<template #footer> </el-form>
<template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button> <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
<el-button type="primary" @click="onSubmit">{{ $t('common.confirmButtonText') }}</el-button> <el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts" name="systemRoleDialog"> <script lang="ts" name="systemRoleDialog" setup>
import { useMessage } from "/@/hooks/message" import {useMessage} from "/@/hooks/message"
import { addObj } from "/@/api/oa/model"; import {useI18n} from "vue-i18n"
import { useI18n } from "vue-i18n" import {addObj, getObj, putObj} from "/@/api/oa/model";
const emit = defineEmits(['refresh']); const emit = defineEmits(['refresh']);
const { t } = useI18n(); const {t} = useI18n();
// //
const dataFormRef = ref(); const dataFormRef = ref();
const visible = ref(false) const visible = ref(false)
const loading = ref(false)
// //
const form = reactive({ const form = reactive({
id: '', id: '',
key: '', key: '',
name: '', name: '',
category: '' category: '',
}); desc: 'vvv',
});
// //
const dataRules = ref( const dataRules = ref(
{ {
key: [ key: [
{ required: true, message: '模型表示不能为空', trigger: 'blur' }, {required: true, message: '模型表示不能为空', trigger: 'blur'},
], ],
name: [ name: [
{ required: true, message: '模型名称不能为空', trigger: 'blur' } {required: true, message: '模型名称不能为空', trigger: 'blur'}
], ],
category: [ category: [
{ required: true, message: '模型分类不能为空', trigger: 'blur' } {required: true, message: '模型分类不能为空', trigger: 'blur'}
] ]
} }
) )
// //
const openDialog = (id: string) => { const openDialog = (id: string) => {
visible.value = true visible.value = true
form.id = '' form.id = ''
// //
if (dataFormRef.value) { if (dataFormRef.value) {
dataFormRef.value.resetFields() dataFormRef.value.resetFields()
} }
if (id) { if (id) {
form.id = id form.id = id
} getModelData(id);
}; }
};
// const getModelData = (id: string) => {
const onSubmit = () => { //
dataFormRef.value.validate((valid: boolean) => { loading.value = true
if (!valid) { getObj(id).then((res: any) => {
return false Object.assign(form, res.data)
}).finally(() => {
loading.value = false
})
} }
addObj(form).then(() => { //
useMessage().success(t('common.addSuccessText')) const onSubmit = () => {
visible.value = false // dataFormRef.value.validate((valid: boolean) => {
emit('refresh') if (!valid) {
}).catch((err: any) => { return false
useMessage().error(err.msg) }
}) //
}) if (form.id) {
}; loading.value = true
putObj(form).then(() => {
useMessage().success(t('common.editSuccessText'))
visible.value = false //
emit('refresh')
}).catch((err: any) => {
useMessage().error(err.msg)
}).finally(() => {
loading.value = false
})
} else {
loading.value = true
addObj(form).then(() => {
useMessage().success(t('common.addSuccessText'))
visible.value = false //
emit('refresh')
}).catch((err: any) => {
useMessage().error(err.msg)
}).finally(() => {
loading.value = false
})
}
})
};
// //
defineExpose({ defineExpose({
openDialog, openDialog,
}); });
</script> </script>

View File

@ -5,7 +5,7 @@
<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef"> <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
<el-form-item :label="$t('model.category')" prop="category"> <el-form-item :label="$t('model.category')" prop="category">
<el-input :placeholder="$t('model.inputCategoryTip')" style="max-width: 180px" <el-input :placeholder="$t('model.inputCategoryTip')" style="max-width: 180px"
v-model="state.queryForm.category" /> v-model="state.queryForm.category"/>
</el-form-item> </el-form-item>
<el-form-item class="ml2"> <el-form-item class="ml2">
<el-button @click="getDataList" icon="search" type="primary"> <el-button @click="getDataList" icon="search" type="primary">
@ -18,125 +18,129 @@
<el-row> <el-row>
<div class="mb8" style="width: 100%"> <div class="mb8" style="width: 100%">
<el-button @click="formDialogRef.openDialog()" class="ml10" icon="folder-add" type="primary" <el-button @click="formDialogRef.openDialog()" class="ml10" icon="folder-add" type="primary"
v-auth="'app_approle_add'"> v-auth="'oa_model_add'">
{{ $t('common.addBtn') }} {{ $t('common.addBtn') }}
</el-button> </el-button>
<el-button :disabled="multiple" @click="handleDelete(selectObjs)" class="ml10" icon="Delete" <el-button :disabled="multiple" @click="handleDelete(selectObjs)" class="ml10" icon="Delete"
type="primary" v-auth="'app_approle_del'"> type="primary" v-auth="'oa_model_del'">
{{ $t('common.delBtn') }} {{ $t('common.delBtn') }}
</el-button> </el-button>
<right-toolbar @queryTable="getDataList" class="ml10" style="float: right;margin-right: 20px" <right-toolbar @queryTable="getDataList" class="ml10" style="float: right;margin-right: 20px"
v-model:showSearch="showSearch"></right-toolbar> v-model:showSearch="showSearch"></right-toolbar>
</div> </div>
</el-row> </el-row>
<el-table :data="state.dataList" @selection-change="handleSelectionChange" style="width: 100%" <el-table :data="state.dataList" @selection-change="handleSelectionChange" style="width: 100%"
v-loading="state.loading"> v-loading="state.loading">
<el-table-column align="center" type="selection" width="50" /> <el-table-column align="center" type="selection" width="50"/>
<el-table-column :label="$t('model.index')" type="index" width="80" /> <el-table-column :label="$t('model.index')" type="index" width="80"/>
<el-table-column :label="$t('model.name')" prop="name" show-overflow-tooltip></el-table-column> <el-table-column :label="$t('model.name')" prop="name" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('model.key')" prop="key" show-overflow-tooltip></el-table-column> <el-table-column :label="$t('model.key')" prop="key" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('model.category')" prop="category" show-overflow-tooltip></el-table-column> <el-table-column :label="$t('model.category')" prop="category" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('model.version')" prop="version" show-overflow-tooltip></el-table-column> <el-table-column :label="$t('model.version')" prop="version" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('model.createTime')" prop="createTime" show-overflow-tooltip></el-table-column> <el-table-column :label="$t('model.createTime')" prop="createTime"
show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('model.lastUpdateTime')" prop="lastUpdateTime" <el-table-column :label="$t('model.lastUpdateTime')" prop="lastUpdateTime"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('common.action')" width="200"> <el-table-column :label="$t('common.action')" width="200">
<template #default="scope"> <template #default="scope">
<el-button @click="handleView(scope.row.id)" text type="primary" v-auth="'app_approle_edit'">模型图 <el-button @click="handleView(scope.row.id)" text type="primary" v-auth="'app_approle_edit'">模型图
</el-button> </el-button>
<el-button @click="handleDeploy(scope.row.id)" text type="primary" v-auth="'app_approle_edit'">部署 <el-button @click="handleDeploy(scope.row.id)" text type="primary" v-auth="'app_approle_edit'">
部署
</el-button> </el-button>
<el-button @click="handleDelete([scope.row.roleId])" text type="primary" <el-button @click="handleDelete([scope.row.roleId])" text type="primary"
v-auth="'app_approle_del'">{{ v-auth="'app_approle_del'">{{
$t('common.delBtn') $t('common.delBtn')
}} }}
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" /> <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle"
v-bind="state.pagination"/>
</el-card> </el-card>
<form-dialog @refresh="getDataList()" ref="formDialogRef" /> <form-dialog @refresh="getDataList()" ref="formDialogRef"/>
</div> </div>
</template> </template>
<script lang="ts" name="model" setup> <script lang="ts" name="model" setup>
import { BasicTableProps, useTable } from "/@/hooks/table"; import {BasicTableProps, useTable} from "/@/hooks/table";
import { delObj, deploy, fetchList } from "/@/api/oa/model"; import {delObj, deploy, fetchList} from "/@/api/oa/model";
import { useMessage, useMessageBox } from "/@/hooks/message"; import {useMessage, useMessageBox} from "/@/hooks/message";
import { useI18n } from "vue-i18n"; import {useI18n} from "vue-i18n";
// //
const FormDialog = defineAsyncComponent(() => import('./form.vue')); const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const { t } = useI18n() const {t} = useI18n()
const router = useRouter() const router = useRouter()
// //
const formDialogRef = ref() const formDialogRef = ref()
const queryRef = ref() const queryRef = ref()
const showSearch = ref(true) const showSearch = ref(true)
// rows // rows
const selectObjs = ref([]) as any const selectObjs = ref([]) as any
// //
const multiple = ref(true) const multiple = ref(true)
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: { queryForm: {
category: '' category: ''
}, },
pageList: fetchList // H pageList: fetchList // H
});
// table hook
const {
getDataList,
currentChangeHandle,
sizeChangeHandle,
} = useTable(state)
//
const resetQuery = () => {
queryRef.value.resetFields()
getDataList()
}
//
const handleSelectionChange = (objs: any) => {
selectObjs.value = []
objs.forEach((val: any) => {
selectObjs.value.push(val.roleId)
}); });
multiple.value = !objs.length
}
// // table hook
const handleDelete = (ids: string[]) => { const {
useMessageBox().confirm(t('common.delConfirmText')) getDataList,
.then(() => { currentChangeHandle,
delObj(ids).then(() => { sizeChangeHandle,
getDataList(); } = useTable(state)
useMessage().success(t('common.delSuccessText'));
}).catch((err: any) => { //
useMessage().error(err.msg) const resetQuery = () => {
queryRef.value.resetFields()
getDataList()
}
//
const handleSelectionChange = (objs: any) => {
selectObjs.value = []
console.log(objs)
objs.forEach((val: any) => {
selectObjs.value.push(val.id)
});
multiple.value = !objs.length
}
//
const handleDelete = (ids: string[]) => {
useMessageBox().confirm(t('common.delConfirmText'))
.then(() => {
delObj(ids).then(() => {
getDataList();
useMessage().success(t('common.delSuccessText'));
}).catch((err: any) => {
useMessage().error(err.msg)
})
}) })
};
const handleDeploy = (id: string) => {
deploy(id).then(() => {
useMessage().success(t('common.optSuccessText'));
}) })
}; }
const handleDeploy = (id: string) => {
deploy(id).then(() => {
useMessage().success(t('common.optSuccessText'));
})
}
const handleView = (id: string) => { const handleView = (id: string) => {
router.push({ router.push({
path: "/oa/model/detail", path: "/oa/model/detail",
query: { id: id }, query: {id: id},
}); });
} }
</script> </script>