dev-zcx
qsh
2 weeks ago
parent
95a198eab1
commit
99ed1be271
@ -0,0 +1,122 @@ |
||||
<template> |
||||
<Dialog v-model="dialogVisible" :title="dialogTitle"> |
||||
<el-form |
||||
ref="formRef" |
||||
v-loading="formLoading" |
||||
:model="formData" |
||||
:rules="formRules" |
||||
label-width="80px" |
||||
> |
||||
<el-form-item label="字典名称" prop="name"> |
||||
<el-input v-model="formData.name" placeholder="请输入字典名称" /> |
||||
</el-form-item> |
||||
<el-form-item label="字典类型" prop="type"> |
||||
<el-input |
||||
v-model="formData.type" |
||||
:disabled="typeof formData.id !== 'undefined'" |
||||
placeholder="请输入参数名称" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="状态" prop="status"> |
||||
<el-radio-group v-model="formData.status"> |
||||
<el-radio |
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" |
||||
:key="dict.value" |
||||
:label="dict.value" |
||||
> |
||||
{{ dict.label }} |
||||
</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="备注" prop="remark"> |
||||
<el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
</template> |
||||
</Dialog> |
||||
</template> |
||||
<script lang="ts" name="SystemDictTypeForm" setup> |
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
import * as DictTypeApi from '@/api/system/dict/dict.type' |
||||
import { CommonStatusEnum } from '@/utils/constants' |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
const dialogTitle = ref('') // 弹窗的标题 |
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
const formData = ref({ |
||||
id: undefined, |
||||
name: '', |
||||
type: '', |
||||
status: CommonStatusEnum.ENABLE, |
||||
remark: '' |
||||
}) |
||||
const formRules = reactive({ |
||||
name: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }], |
||||
type: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }], |
||||
status: [{ required: true, message: '状态不能为空', trigger: 'change' }] |
||||
}) |
||||
const formRef = ref() // 表单 Ref |
||||
|
||||
/** 打开弹窗 */ |
||||
const open = async (type: string, id?: number) => { |
||||
dialogVisible.value = true |
||||
dialogTitle.value = t('action.' + type) |
||||
formType.value = type |
||||
resetForm() |
||||
// 修改时，设置数据 |
||||
if (id) { |
||||
formLoading.value = true |
||||
try { |
||||
formData.value = await DictTypeApi.getDictType(id) |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
} |
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
||||
/** 提交表单 */ |
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
const submitForm = async () => { |
||||
// 校验表单 |
||||
if (!formRef.value) return |
||||
const valid = await formRef.value.validate() |
||||
if (!valid) return |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
const data = formData.value as DictTypeApi.DictTypeVO |
||||
if (formType.value === 'create') { |
||||
await DictTypeApi.createDictType(data) |
||||
message.success(t('common.createSuccess')) |
||||
} else { |
||||
await DictTypeApi.updateDictType(data) |
||||
message.success(t('common.updateSuccess')) |
||||
} |
||||
dialogVisible.value = false |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 重置表单 */ |
||||
const resetForm = () => { |
||||
formData.value = { |
||||
id: undefined, |
||||
type: '', |
||||
name: '', |
||||
status: CommonStatusEnum.ENABLE, |
||||
remark: '' |
||||
} |
||||
formRef.value?.resetFields() |
||||
} |
||||
</script> |
||||
@ -0,0 +1,181 @@ |
||||
<template> |
||||
<Dialog v-model="dialogVisible" :title="dialogTitle"> |
||||
<el-form |
||||
ref="formRef" |
||||
v-loading="formLoading" |
||||
:model="formData" |
||||
:rules="formRules" |
||||
label-width="80px" |
||||
> |
||||
<el-form-item label="字典类型" prop="type"> |
||||
<el-input |
||||
v-model="formData.dictType" |
||||
:disabled="typeof formData.id !== 'undefined'" |
||||
placeholder="请输入参数名称" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="数据标签" prop="label"> |
||||
<el-input v-model="formData.label" placeholder="请输入数据标签" /> |
||||
</el-form-item> |
||||
<el-form-item label="数据键值" prop="value"> |
||||
<el-input v-model="formData.value" placeholder="请输入数据键值" /> |
||||
</el-form-item> |
||||
<el-form-item label="显示排序" prop="sort"> |
||||
<el-input-number v-model="formData.sort" :min="0" controls-position="right" /> |
||||
</el-form-item> |
||||
<el-form-item label="状态" prop="status"> |
||||
<el-radio-group v-model="formData.status"> |
||||
<el-radio |
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" |
||||
:key="dict.value" |
||||
:label="dict.value" |
||||
> |
||||
{{ dict.label }} |
||||
</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="颜色类型" prop="colorType"> |
||||
<el-select v-model="formData.colorType"> |
||||
<el-option |
||||
v-for="item in colorTypeOptions" |
||||
:key="item.value" |
||||
:label="item.label + '(' + item.value + ')'" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="CSS Class" prop="cssClass"> |
||||
<el-input v-model="formData.cssClass" placeholder="请输入 CSS Class" /> |
||||
</el-form-item> |
||||
<el-form-item label="备注" prop="remark"> |
||||
<el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
</template> |
||||
</Dialog> |
||||
</template> |
||||
<script lang="ts" name="SystemDictDataForm" setup> |
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
import * as DictDataApi from '@/api/system/dict/dict.data' |
||||
import { CommonStatusEnum } from '@/utils/constants' |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
const dialogTitle = ref('') // 弹窗的标题 |
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
const formData = ref({ |
||||
id: undefined, |
||||
sort: undefined, |
||||
label: '', |
||||
value: '', |
||||
dictType: '', |
||||
status: CommonStatusEnum.ENABLE, |
||||
colorType: '', |
||||
cssClass: '', |
||||
remark: '' |
||||
}) |
||||
const formRules = reactive({ |
||||
label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }], |
||||
value: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }], |
||||
sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }], |
||||
status: [{ required: true, message: '状态不能为空', trigger: 'change' }] |
||||
}) |
||||
const formRef = ref() // 表单 Ref |
||||
|
||||
// 数据标签回显样式 |
||||
const colorTypeOptions = readonly([ |
||||
{ |
||||
value: 'default', |
||||
label: '默认' |
||||
}, |
||||
{ |
||||
value: 'primary', |
||||
label: '主要' |
||||
}, |
||||
{ |
||||
value: 'success', |
||||
label: '成功' |
||||
}, |
||||
{ |
||||
value: 'info', |
||||
label: '信息' |
||||
}, |
||||
{ |
||||
value: 'warning', |
||||
label: '警告' |
||||
}, |
||||
{ |
||||
value: 'danger', |
||||
label: '危险' |
||||
} |
||||
]) |
||||
|
||||
/** 打开弹窗 */ |
||||
const open = async (type: string, id?: number, dictType?: string) => { |
||||
dialogVisible.value = true |
||||
dialogTitle.value = t('action.' + type) |
||||
formType.value = type |
||||
resetForm() |
||||
if (dictType) { |
||||
formData.value.dictType = dictType |
||||
} |
||||
// 修改时，设置数据 |
||||
if (id) { |
||||
formLoading.value = true |
||||
try { |
||||
formData.value = await DictDataApi.getDictData(id) |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
} |
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
||||
/** 提交表单 */ |
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
const submitForm = async () => { |
||||
// 校验表单 |
||||
if (!formRef.value) return |
||||
const valid = await formRef.value.validate() |
||||
if (!valid) return |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
const data = formData.value as DictDataApi.DictDataVO |
||||
if (formType.value === 'create') { |
||||
await DictDataApi.createDictData(data) |
||||
message.success(t('common.createSuccess')) |
||||
} else { |
||||
await DictDataApi.updateDictData(data) |
||||
message.success(t('common.updateSuccess')) |
||||
} |
||||
dialogVisible.value = false |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 重置表单 */ |
||||
const resetForm = () => { |
||||
formData.value = { |
||||
id: undefined, |
||||
sort: undefined, |
||||
label: '', |
||||
value: '', |
||||
dictType: '', |
||||
status: CommonStatusEnum.ENABLE, |
||||
colorType: '', |
||||
cssClass: '', |
||||
remark: '' |
||||
} |
||||
formRef.value?.resetFields() |
||||
} |
||||
</script> |
||||
@ -0,0 +1,207 @@ |
||||
<template> |
||||
<ContentWrap> |
||||
<el-form |
||||
class="-mb-15px" |
||||
:model="queryParams" |
||||
ref="queryFormRef" |
||||
:inline="true" |
||||
label-width="68px" |
||||
> |
||||
<el-form-item label="字典名称" prop="dictType"> |
||||
<el-select v-model="queryParams.dictType" class="!w-240px"> |
||||
<el-option |
||||
v-for="item in dictTypeList" |
||||
:key="item.type" |
||||
:label="item.name" |
||||
:value="item.type" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="字典标签" prop="label"> |
||||
<el-input |
||||
v-model="queryParams.label" |
||||
placeholder="请输入字典标签" |
||||
clearable |
||||
@keyup.enter="handleQuery" |
||||
class="!w-240px" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="状态" prop="status"> |
||||
<el-select v-model="queryParams.status" placeholder="数据状态" clearable class="!w-240px"> |
||||
<el-option |
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
||||
<el-button |
||||
type="primary" |
||||
plain |
||||
@click="openForm('create')" |
||||
v-hasPermi="['system:dict:create']" |
||||
> |
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增 |
||||
</el-button> |
||||
<el-button |
||||
type="success" |
||||
plain |
||||
@click="handleExport" |
||||
:loading="exportLoading" |
||||
v-hasPermi="['system:dict:export']" |
||||
> |
||||
<Icon icon="ep:download" class="mr-5px" /> 导出 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</ContentWrap> |
||||
|
||||
<!-- 列表 --> |
||||
<ContentWrap> |
||||
<el-table v-loading="loading" :data="list"> |
||||
<el-table-column label="字典编码" align="center" prop="id" /> |
||||
<el-table-column label="字典标签" align="center" prop="label" /> |
||||
<el-table-column label="字典键值" align="center" prop="value" /> |
||||
<el-table-column label="字典排序" align="center" prop="sort" /> |
||||
<el-table-column label="状态" align="center" prop="status"> |
||||
<template #default="scope"> |
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="颜色类型" align="center" prop="colorType" /> |
||||
<el-table-column label="CSS Class" align="center" prop="cssClass" /> |
||||
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip /> |
||||
<el-table-column |
||||
label="创建时间" |
||||
align="center" |
||||
prop="createTime" |
||||
width="180" |
||||
:formatter="dateFormatter" |
||||
/> |
||||
<el-table-column label="操作" align="center"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
link |
||||
type="primary" |
||||
@click="openForm('update', scope.row.id)" |
||||
v-hasPermi="['system:dict:update']" |
||||
> |
||||
修改 |
||||
</el-button> |
||||
<el-button |
||||
link |
||||
type="danger" |
||||
@click="handleDelete(scope.row.id)" |
||||
v-hasPermi="['system:dict:delete']" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!-- 分页 --> |
||||
<Pagination |
||||
:total="total" |
||||
v-model:page="queryParams.pageNo" |
||||
v-model:limit="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
</ContentWrap> |
||||
|
||||
<!-- 表单弹窗：添加/修改 --> |
||||
<DictDataForm ref="formRef" @success="getList" /> |
||||
</template> |
||||
<script setup lang="ts" name="SystemDictData"> |
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' |
||||
import { dateFormatter } from '@/utils/formatTime' |
||||
import download from '@/utils/download' |
||||
import * as DictDataApi from '@/api/system/dict/dict.data' |
||||
import * as DictTypeApi from '@/api/system/dict/dict.type' |
||||
import DictDataForm from './DictDataForm.vue' |
||||
const message = useMessage() // 消息弹窗 |
||||
const { t } = useI18n() // 国际化 |
||||
const route = useRoute() // 路由 |
||||
|
||||
const loading = ref(true) // 列表的加载中 |
||||
const total = ref(0) // 列表的总页数 |
||||
const list = ref([]) // 列表的数据 |
||||
const queryParams = reactive({ |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
label: '', |
||||
status: undefined, |
||||
dictType: route.params.dictType |
||||
}) |
||||
const queryFormRef = ref() // 搜索的表单 |
||||
const exportLoading = ref(false) // 导出的加载中 |
||||
const dictTypeList = ref<DictTypeApi.DictTypeVO[]>() // 字典类型的列表 |
||||
|
||||
/** 查询列表 */ |
||||
const getList = async () => { |
||||
loading.value = true |
||||
try { |
||||
const data = await DictDataApi.getDictDataPage(queryParams) |
||||
list.value = data.list |
||||
total.value = data.total |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 搜索按钮操作 */ |
||||
const handleQuery = () => { |
||||
queryParams.pageNo = 1 |
||||
getList() |
||||
} |
||||
|
||||
/** 重置按钮操作 */ |
||||
const resetQuery = () => { |
||||
queryFormRef.value.resetFields() |
||||
handleQuery() |
||||
} |
||||
|
||||
/** 添加/修改操作 */ |
||||
const formRef = ref() |
||||
const openForm = (type: string, id?: number) => { |
||||
formRef.value.open(type, id, queryParams.dictType) |
||||
} |
||||
|
||||
/** 删除按钮操作 */ |
||||
const handleDelete = async (id: number) => { |
||||
try { |
||||
// 删除的二次确认 |
||||
await message.delConfirm() |
||||
// 发起删除 |
||||
await DictDataApi.deleteDictData(id) |
||||
message.success(t('common.delSuccess')) |
||||
// 刷新列表 |
||||
await getList() |
||||
} catch {} |
||||
} |
||||
|
||||
/** 导出按钮操作 */ |
||||
const handleExport = async () => { |
||||
try { |
||||
// 导出的二次确认 |
||||
await message.exportConfirm() |
||||
// 发起导出 |
||||
exportLoading.value = true |
||||
const data = await DictDataApi.exportDictData(queryParams) |
||||
download.excel(data, '字典数据.xls') |
||||
} catch { |
||||
} finally { |
||||
exportLoading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 初始化 **/ |
||||
onMounted(async () => { |
||||
await getList() |
||||
// 查询字典（精简)列表 |
||||
dictTypeList.value = await DictTypeApi.getSimpleDictTypeList() |
||||
}) |
||||
</script> |
||||
@ -0,0 +1,229 @@ |
||||
<template> |
||||
<!-- 搜索工作栏 --> |
||||
<ContentWrap> |
||||
<el-form |
||||
ref="queryFormRef" |
||||
:inline="true" |
||||
:model="queryParams" |
||||
class="-mb-15px" |
||||
label-width="68px" |
||||
> |
||||
<el-form-item label="字典名称" prop="name"> |
||||
<el-input |
||||
v-model="queryParams.name" |
||||
class="!w-240px" |
||||
clearable |
||||
placeholder="请输入字典名称" |
||||
@keyup.enter="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="字典类型" prop="type"> |
||||
<el-input |
||||
v-model="queryParams.type" |
||||
class="!w-240px" |
||||
clearable |
||||
placeholder="请输入字典类型" |
||||
@keyup.enter="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="状态" prop="status"> |
||||
<el-select |
||||
v-model="queryParams.status" |
||||
class="!w-240px" |
||||
clearable |
||||
placeholder="请选择字典状态" |
||||
> |
||||
<el-option |
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="创建时间" prop="createTime"> |
||||
<el-date-picker |
||||
v-model="queryParams.createTime" |
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" |
||||
class="!w-240px" |
||||
end-placeholder="结束日期" |
||||
start-placeholder="开始日期" |
||||
type="daterange" |
||||
value-format="yyyy-MM-dd HH:mm:ss" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleQuery"> |
||||
<Icon class="mr-5px" icon="ep:search" /> |
||||
搜索 |
||||
</el-button> |
||||
<el-button @click="resetQuery"> |
||||
<Icon class="mr-5px" icon="ep:refresh" /> |
||||
重置 |
||||
</el-button> |
||||
<el-button |
||||
v-hasPermi="['system:dict:create']" |
||||
plain |
||||
type="primary" |
||||
@click="openForm('create')" |
||||
> |
||||
<Icon class="mr-5px" icon="ep:plus" /> |
||||
新增 |
||||
</el-button> |
||||
<el-button |
||||
v-hasPermi="['system:dict:export']" |
||||
:loading="exportLoading" |
||||
plain |
||||
type="success" |
||||
@click="handleExport" |
||||
> |
||||
<Icon class="mr-5px" icon="ep:download" /> |
||||
导出 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</ContentWrap> |
||||
|
||||
<!-- 列表 --> |
||||
<ContentWrap> |
||||
<el-table v-loading="loading" :data="list"> |
||||
<el-table-column align="center" label="字典编号" prop="id" /> |
||||
<el-table-column align="center" label="字典名称" prop="name" show-overflow-tooltip /> |
||||
<el-table-column align="center" label="字典类型" prop="type" width="300" /> |
||||
<el-table-column align="center" label="状态" prop="status"> |
||||
<template #default="scope"> |
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column align="center" label="备注" prop="remark" /> |
||||
<el-table-column |
||||
:formatter="dateFormatter" |
||||
align="center" |
||||
label="创建时间" |
||||
prop="createTime" |
||||
width="180" |
||||
/> |
||||
<el-table-column align="center" label="操作"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
v-hasPermi="['system:dict:update']" |
||||
link |
||||
type="primary" |
||||
@click="openForm('update', scope.row.id)" |
||||
> |
||||
修改 |
||||
</el-button> |
||||
<router-link :to="'/dict/type/data/' + scope.row.type"> |
||||
<el-button link type="primary">数据</el-button> |
||||
</router-link> |
||||
<el-button |
||||
v-hasPermi="['system:dict:delete']" |
||||
link |
||||
type="danger" |
||||
@click="handleDelete(scope.row.id)" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!-- 分页 --> |
||||
<Pagination |
||||
v-model:limit="queryParams.pageSize" |
||||
v-model:page="queryParams.pageNo" |
||||
:total="total" |
||||
@pagination="getList" |
||||
/> |
||||
</ContentWrap> |
||||
|
||||
<!-- 表单弹窗：添加/修改 --> |
||||
<DictTypeForm ref="formRef" @success="getList" /> |
||||
</template> |
||||
|
||||
<script lang="ts" name="SystemDictType" setup> |
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
import { dateFormatter } from '@/utils/formatTime' |
||||
import * as DictTypeApi from '@/api/system/dict/dict.type' |
||||
import DictTypeForm from './DictTypeForm.vue' |
||||
import download from '@/utils/download' |
||||
|
||||
const message = useMessage() // 消息弹窗 |
||||
const { t } = useI18n() // 国际化 |
||||
|
||||
const loading = ref(true) // 列表的加载中 |
||||
const total = ref(0) // 列表的总页数 |
||||
const list = ref([]) // 字典表格数据 |
||||
const queryParams = reactive({ |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
name: '', |
||||
type: '', |
||||
status: undefined, |
||||
createTime: [] |
||||
}) |
||||
const queryFormRef = ref() // 搜索的表单 |
||||
const exportLoading = ref(false) // 导出的加载中 |
||||
|
||||
/** 查询字典类型列表 */ |
||||
const getList = async () => { |
||||
loading.value = true |
||||
try { |
||||
const data = await DictTypeApi.getDictTypePage(queryParams) |
||||
list.value = data.list |
||||
total.value = data.total |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 搜索按钮操作 */ |
||||
const handleQuery = () => { |
||||
queryParams.pageNo = 1 |
||||
getList() |
||||
} |
||||
|
||||
/** 重置按钮操作 */ |
||||
const resetQuery = () => { |
||||
queryFormRef.value.resetFields() |
||||
handleQuery() |
||||
} |
||||
|
||||
/** 添加/修改操作 */ |
||||
const formRef = ref() |
||||
const openForm = (type: string, id?: number) => { |
||||
formRef.value.open(type, id) |
||||
} |
||||
|
||||
/** 删除按钮操作 */ |
||||
const handleDelete = async (id: number) => { |
||||
try { |
||||
// 删除的二次确认 |
||||
await message.delConfirm() |
||||
// 发起删除 |
||||
await DictTypeApi.deleteDictType(id) |
||||
message.success(t('common.delSuccess')) |
||||
// 刷新列表 |
||||
await getList() |
||||
} catch {} |
||||
} |
||||
|
||||
/** 导出按钮操作 */ |
||||
const handleExport = async () => { |
||||
try { |
||||
// 导出的二次确认 |
||||
await message.exportConfirm() |
||||
// 发起导出 |
||||
exportLoading.value = true |
||||
const data = await DictTypeApi.exportDictType(queryParams) |
||||
download.excel(data, '字典类型.xls') |
||||
} catch { |
||||
} finally { |
||||
exportLoading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 初始化 **/ |
||||
onMounted(() => { |
||||
getList() |
||||
}) |
||||
</script> |
||||
@ -0,0 +1,83 @@ |
||||
<template> |
||||
<div> |
||||
<el-table v-loading="loading" :data="tableList" border> |
||||
<el-table-column type="index" width="50" /> |
||||
<el-table-column |
||||
v-for="col in columns" |
||||
:prop="col.prop" |
||||
:key="col.prop" |
||||
:label="col.label" |
||||
:width="col.width" |
||||
/> |
||||
<el-table-column label="状态" key="status"> |
||||
<template #default="scope"> |
||||
<el-switch |
||||
v-model="scope.row.status" |
||||
:active-value="0" |
||||
active-text="在职" |
||||
inactive-text="离职" |
||||
:inactive-value="1" |
||||
disabled |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<Pagination |
||||
v-model:limit="pageSize" |
||||
v-model:page="currentPage" |
||||
:total="total" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="RoleEmployee"> |
||||
import { getRoleUsers } from '@/api/system/role' |
||||
|
||||
const props = defineProps({ |
||||
roleId: { |
||||
type: Number |
||||
} |
||||
}) |
||||
|
||||
watch( |
||||
() => props.roleId, |
||||
(newValue) => { |
||||
getList(newValue) |
||||
} |
||||
) |
||||
|
||||
const loading = ref(false) |
||||
const tableList = ref([]) |
||||
const total = ref(0) |
||||
const pageSize = ref(20) |
||||
const currentPage = ref(1) |
||||
|
||||
const columns = ref([ |
||||
{ prop: 'name', label: '姓名', width: '200px' }, |
||||
{ prop: 'mobile', label: '手机号', width: '150px' }, |
||||
{ prop: 'deptName', label: '部门' }, |
||||
{ prop: 'roles', label: '角色' } |
||||
]) |
||||
|
||||
async function getList() { |
||||
loading.value = true |
||||
try { |
||||
const data = await getRoleUsers({ |
||||
pageNo: currentPage.value, |
||||
pageSize: pageSize.value, |
||||
id: props.roleId |
||||
}) |
||||
tableList.value = data.list |
||||
total.value = data.total |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
onMounted(() => { |
||||
getList() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,99 @@ |
||||
<template> |
||||
<div> |
||||
<el-form ref="formRef" v-loading="formLoading" label-width="0px"> |
||||
<el-form-item> |
||||
<el-tree |
||||
ref="treeRef" |
||||
:data="menuOptions" |
||||
:props="defaultProps" |
||||
empty-text="加载中，请稍候" |
||||
node-key="id" |
||||
show-checkbox |
||||
style="width: 100%" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button |
||||
:disabled="formLoading" |
||||
type="primary" |
||||
@click="submitForm" |
||||
v-hasPermi="['basic:role:update-menu']" |
||||
>保存权限</el-button |
||||
> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" name="RoleAssignMenuForm" setup> |
||||
import { defaultProps, handleTree } from '@/utils/tree' |
||||
import * as MenuApi from '@/api/system/menu' |
||||
import * as PermissionApi from '@/api/system/permission' |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const props = defineProps({ |
||||
roleId: { |
||||
type: Number |
||||
} |
||||
}) |
||||
|
||||
watch( |
||||
() => props.roleId, |
||||
(newValue) => { |
||||
getCheckedMenu(newValue) |
||||
} |
||||
) |
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
const formRef = ref() // 表单 Ref |
||||
const menuOptions = ref<any[]>([]) // 菜单树形结构 |
||||
const treeRef = ref() // 菜单树组件 Ref |
||||
|
||||
/** 提交表单 */ |
||||
const submitForm = async () => { |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
const data = { |
||||
roleId: props.roleId, |
||||
menuIds: [ |
||||
...(treeRef.value.getCheckedKeys(false) as unknown as Array<number>), // 获得当前选中节点 |
||||
...(treeRef.value.getHalfCheckedKeys() as unknown as Array<number>) // 获得半选中的父节点 |
||||
] |
||||
} |
||||
await PermissionApi.assignRoleMenu(data) |
||||
message.success(t('common.updateSuccess')) |
||||
dialogVisible.value = false |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
const checkedMenuIds = ref([]) |
||||
|
||||
async function init() { |
||||
menuOptions.value = handleTree(await MenuApi.getSimpleMenusList()) |
||||
getCheckedMenu(props.roleId) |
||||
} |
||||
|
||||
async function getCheckedMenu(id) { |
||||
formLoading.value = true |
||||
try { |
||||
checkedMenuIds.value = await PermissionApi.getRoleMenuList(id) |
||||
treeRef.value.setCheckedKeys([], false) |
||||
// 设置选中 |
||||
checkedMenuIds.value.forEach((menuId: number) => { |
||||
treeRef.value.setChecked(menuId, true, false) |
||||
}) |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
onMounted(() => { |
||||
init() |
||||
}) |
||||
</script> |
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,166 @@ |
||||
<template> |
||||
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px"> |
||||
<el-form-item label="权限范围"> |
||||
<el-select v-model="formData.dataScope"> |
||||
<el-option |
||||
v-for="item in dataScopeOptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item |
||||
v-if="formData.dataScope === SystemDataScopeEnum.DEPT_CUSTOM" |
||||
label="权限范围" |
||||
style="display: flex" |
||||
> |
||||
<el-card class="card" shadow="never"> |
||||
<template #header> |
||||
全选/全不选: |
||||
<el-switch |
||||
v-model="treeNodeAll" |
||||
active-text="是" |
||||
inactive-text="否" |
||||
inline-prompt |
||||
@change="handleCheckedTreeNodeAll()" |
||||
/> |
||||
全部展开/折叠: |
||||
<el-switch |
||||
v-model="deptExpand" |
||||
active-text="展开" |
||||
inactive-text="折叠" |
||||
inline-prompt |
||||
@change="handleCheckedTreeExpand" |
||||
/> |
||||
父子联动(选中父节点，自动选择子节点): |
||||
<el-switch v-model="checkStrictly" active-text="是" inactive-text="否" inline-prompt /> |
||||
</template> |
||||
<el-tree |
||||
ref="treeRef" |
||||
:check-strictly="!checkStrictly" |
||||
:data="deptOptions" |
||||
:props="defaultProps" |
||||
default-expand-all |
||||
empty-text="加载中，请稍后" |
||||
node-key="id" |
||||
show-checkbox |
||||
/> |
||||
</el-card> |
||||
</el-form-item> |
||||
<el-form-item label-width="0"> |
||||
<el-button |
||||
:disabled="formLoading" |
||||
type="primary" |
||||
@click="submitForm" |
||||
v-hasPermi="['basic:role:update-data']" |
||||
>保存权限</el-button |
||||
> |
||||
</el-form-item> |
||||
</el-form> |
||||
</template> |
||||
<script lang="ts" name="RoleDataPermissionForm" setup> |
||||
import { defaultProps, handleTree } from '@/utils/tree' |
||||
import { SystemDataScopeEnum } from '@/utils/constants' |
||||
|
||||
import * as DeptApi from '@/api/system/dept' |
||||
import * as PermissionApi from '@/api/system/permission' |
||||
import * as RoleApi from '@/api/system/role' |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const props = defineProps({ |
||||
roleId: { |
||||
type: Number |
||||
} |
||||
}) |
||||
|
||||
watch( |
||||
() => props.roleId, |
||||
(newValue) => { |
||||
getRoleInfo(newValue) |
||||
} |
||||
) |
||||
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
const formData = ref({ |
||||
id: 0, |
||||
name: '', |
||||
dataScope: undefined, |
||||
dataScopeDeptIds: [] |
||||
}) |
||||
const formRef = ref() // 表单 Ref |
||||
const deptOptions = ref<any[]>([]) // 部门树形结构 |
||||
const deptExpand = ref(false) // 展开/折叠 |
||||
const treeRef = ref() // 菜单树组件 Ref |
||||
const treeNodeAll = ref(false) // 全选/全不选 |
||||
const checkStrictly = ref(true) // 是否严格模式，即父子不关联 |
||||
|
||||
// const dataScopeOptions = getIntDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE) |
||||
const dataScopeOptions = [ |
||||
{ label: '全部数据权限', value: 1 }, |
||||
{ label: '指定部门数据权限', value: 2 }, |
||||
{ label: '部门数据权限', value: 3 }, |
||||
{ label: '部门及以下数据权限', value: 4 }, |
||||
{ label: '仅本人数据权限', value: 5 } |
||||
] |
||||
|
||||
async function getRoleInfo(id) { |
||||
try { |
||||
formData.value = await RoleApi.getRole(id) |
||||
nextTick(() => { |
||||
treeRef.value.setCheckedKeys(formData.value.dataScopeDeptIds) |
||||
}) |
||||
} catch (error) { |
||||
console.log(error) |
||||
} |
||||
} |
||||
|
||||
/** 提交表单 */ |
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
const submitForm = async () => { |
||||
formLoading.value = true |
||||
try { |
||||
const data = { |
||||
roleId: formData.value.id, |
||||
dataScope: formData.value.dataScope, |
||||
dataScopeDeptIds: |
||||
formData.value.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM |
||||
? [] |
||||
: treeRef.value.getCheckedKeys(false) |
||||
} |
||||
await PermissionApi.assignRoleDataScope(data) |
||||
message.success(t('common.updateSuccess')) |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 全选/全不选 */ |
||||
const handleCheckedTreeNodeAll = () => { |
||||
treeRef.value.setCheckedNodes(treeNodeAll.value ? deptOptions.value : []) |
||||
} |
||||
|
||||
/** 展开/折叠全部 */ |
||||
const handleCheckedTreeExpand = () => { |
||||
const nodes = treeRef.value?.store.nodesMap |
||||
for (let node in nodes) { |
||||
if (nodes[node].expanded === deptExpand.value) { |
||||
continue |
||||
} |
||||
nodes[node].expanded = deptExpand.value |
||||
} |
||||
} |
||||
|
||||
async function init() { |
||||
getRoleInfo(props.roleId) |
||||
deptOptions.value = handleTree(await DeptApi.getSimpleDeptList()) |
||||
} |
||||
|
||||
onMounted(() => { |
||||
init() |
||||
}) |
||||
</script> |
||||
@ -0,0 +1,96 @@ |
||||
<template> |
||||
<Dialog v-model="dialogVisible" :title="dialogTitle" width="400px"> |
||||
<el-form |
||||
ref="formRef" |
||||
v-loading="formLoading" |
||||
:model="formData" |
||||
:rules="formRules" |
||||
label-width="80px" |
||||
> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="24" :offset="0"> |
||||
<el-form-item label="角色名称" prop="name"> |
||||
<el-input v-model="formData.name" placeholder="请输入角色名称" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
</template> |
||||
</Dialog> |
||||
</template> |
||||
<script lang="ts" name="SystemRoleForm" setup> |
||||
// import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
||||
import * as RoleApi from '@/api/system/role' |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
const dialogTitle = ref('') // 弹窗的标题 |
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
const formData = ref({ |
||||
id: undefined, |
||||
name: '' |
||||
}) |
||||
const formRules = reactive({ |
||||
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }] |
||||
}) |
||||
const formRef = ref() // 表单 Ref |
||||
|
||||
/** 打开弹窗 */ |
||||
const open = async (type: string, id?: number) => { |
||||
dialogVisible.value = true |
||||
dialogTitle.value = t('action.' + type) |
||||
formType.value = type |
||||
resetForm() |
||||
// 修改时，设置数据 |
||||
if (id) { |
||||
formLoading.value = true |
||||
try { |
||||
formData.value = await RoleApi.getRole(id) |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
} |
||||
|
||||
/** 重置表单 */ |
||||
const resetForm = () => { |
||||
formData.value = { |
||||
id: undefined, |
||||
name: '' |
||||
} |
||||
formRef.value?.resetFields() |
||||
} |
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
||||
/** 提交表单 */ |
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
const submitForm = async () => { |
||||
// 校验表单 |
||||
if (!formRef.value) return |
||||
const valid = await formRef.value.validate() |
||||
if (!valid) return |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
const data = formData.value as unknown as RoleApi.RoleVO |
||||
if (formType.value === 'create') { |
||||
await RoleApi.createRole(data) |
||||
message.success(t('common.createSuccess')) |
||||
} else { |
||||
await RoleApi.updateRole(data) |
||||
message.success(t('common.updateSuccess')) |
||||
} |
||||
dialogVisible.value = false |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,147 @@ |
||||
<template> |
||||
<div class="flex"> |
||||
<el-card shadow="always" :body-style="{ padding: '10px' }"> |
||||
<div class="flex justify-between items-center" style="width: 300px"> |
||||
<div class="text-16px font-bold">角色列表</div> |
||||
<el-button |
||||
type="primary" |
||||
style="padding: 0px" |
||||
text |
||||
@click="openForm('create')" |
||||
v-hasPermi="['basic:role:add']" |
||||
> |
||||
新增 |
||||
</el-button> |
||||
</div> |
||||
<div class="border-top-1px mt-10px pt-10px"> |
||||
<div |
||||
class="flex justify-between items-center pl-10px pr-10px cursor-pointer pt-5px pb-5px" |
||||
v-for="(item, index) in list" |
||||
:key="index" |
||||
:class="{ actived: libraryIndex == index }" |
||||
@click="libraryIndex = index" |
||||
> |
||||
<div class="flex-1 text-14px">{{ item.name }}</div> |
||||
<div class="ml-10px"> |
||||
<el-button |
||||
type="primary" |
||||
style="padding: 0px" |
||||
text |
||||
v-hasPermi="['basic:role:update']" |
||||
@click="openForm('update', item.id)" |
||||
> |
||||
修改 |
||||
</el-button> |
||||
<el-button |
||||
type="primary" |
||||
class="ml-10px" |
||||
style="padding: 0px" |
||||
text |
||||
v-hasPermi="['basic:role:delete']" |
||||
@click="handleDelete(item.id)" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
<Pagination |
||||
v-model:limit="queryParams.pageSize" |
||||
v-model:page="queryParams.pageNo" |
||||
layout="total, prev, pager, next" |
||||
small |
||||
:total="total" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</el-card> |
||||
<el-card class="ml-20px" style="flex: 1" shadow="always" :body-style="{ padding: '10px' }"> |
||||
<el-tabs v-if="list && list.length" v-model="roleOperateIndex" type="card"> |
||||
<el-tab-pane label="角色用户" :name="1"> |
||||
<RoleEmployee v-if="roleOperateIndex == 1" :roleId="list[libraryIndex].id" /> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="菜单权限" :name="2"> |
||||
<RoleAssignMenuForm |
||||
v-if="roleOperateIndex == 2" |
||||
ref="assignMenuFormRef" |
||||
:roleId="list[libraryIndex].id" |
||||
@success="getList" |
||||
/> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="数据权限" :name="3"> |
||||
<RoleDataPermissionForm |
||||
v-if="roleOperateIndex == 3" |
||||
ref="dataPermissionFormRef" |
||||
:roleId="list[libraryIndex].id" |
||||
@success="getList" |
||||
/> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</el-card> |
||||
<!-- 表单弹窗：添加/修改 --> |
||||
<RoleForm ref="formRef" @success="getList" /> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" name="SystemRole" setup> |
||||
import RoleForm from './RoleForm.vue' |
||||
import RoleEmployee from './Comp/RoleEmployee.vue' |
||||
import RoleAssignMenuForm from './RoleAssignMenuForm.vue' |
||||
import RoleDataPermissionForm from './RoleDataPermissionForm.vue' |
||||
import * as RoleApi from '@/api/system/role' |
||||
|
||||
const message = useMessage() // 消息弹窗 |
||||
const { t } = useI18n() // 国际化 |
||||
|
||||
const total = ref(0) // 列表的总页数 |
||||
const list = ref<any>([]) // 列表的数据 |
||||
|
||||
const libraryIndex = ref(0) |
||||
const queryParams = reactive({ |
||||
pageNo: 1, |
||||
pageSize: 20 |
||||
}) |
||||
|
||||
/** 查询角色列表 */ |
||||
const getList = async () => { |
||||
const data = await RoleApi.getRolePage(queryParams) |
||||
list.value = data.list |
||||
total.value = data.total |
||||
} |
||||
|
||||
/** 添加/修改操作 */ |
||||
const formRef = ref() |
||||
const openForm = (type: string, id?: number) => { |
||||
formRef.value.open(type, id) |
||||
} |
||||
|
||||
/** 数据权限操作 */ |
||||
const dataPermissionFormRef = ref() |
||||
|
||||
/** 菜单权限操作 */ |
||||
const assignMenuFormRef = ref() |
||||
|
||||
/** 删除按钮操作 */ |
||||
const handleDelete = async (id: number) => { |
||||
try { |
||||
// 删除的二次确认 |
||||
await message.delConfirm() |
||||
// 发起删除 |
||||
await RoleApi.deleteRole(id) |
||||
message.success(t('common.delSuccess')) |
||||
// 刷新列表 |
||||
await getList() |
||||
} catch {} |
||||
} |
||||
|
||||
const roleOperateIndex = ref(1) |
||||
|
||||
/** 初始化 **/ |
||||
onMounted(() => { |
||||
getList() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.actived { |
||||
background-color: var(--el-color-primary-light-9); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,56 @@ |
||||
<template> |
||||
<div class="head-container"> |
||||
<el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称"> |
||||
<template #prefix> |
||||
<Icon icon="ep:search" /> |
||||
</template> |
||||
</el-input> |
||||
</div> |
||||
<div class="head-container"> |
||||
<el-tree |
||||
ref="treeRef" |
||||
:data="deptList" |
||||
:expand-on-click-node="false" |
||||
:filter-node-method="filterNode" |
||||
:props="defaultProps" |
||||
default-expand-all |
||||
highlight-current |
||||
node-key="id" |
||||
@node-click="handleNodeClick" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" name="SystemUserDeptTree" setup> |
||||
import { ElTree } from 'element-plus' |
||||
import * as DeptApi from '@/api/system/dept' |
||||
import { defaultProps, handleTree } from '@/utils/tree' |
||||
|
||||
const deptName = ref('') |
||||
const deptList = ref<Tree[]>([]) // 树形结构 |
||||
const treeRef = ref<InstanceType<typeof ElTree>>() |
||||
|
||||
/** 获得部门树 */ |
||||
const getTree = async () => { |
||||
const res = await DeptApi.getSimpleDeptList() |
||||
deptList.value = [] |
||||
deptList.value.push(...handleTree(res)) |
||||
} |
||||
|
||||
/** 基于名字过滤 */ |
||||
const filterNode = (name: string, data: Tree) => { |
||||
if (!name) return true |
||||
return data.name.includes(name) |
||||
} |
||||
|
||||
/** 处理部门被点击 */ |
||||
const handleNodeClick = async (row: { [key: string]: any }) => { |
||||
emits('node-click', row) |
||||
} |
||||
const emits = defineEmits(['node-click']) |
||||
|
||||
/** 初始化 */ |
||||
onMounted(async () => { |
||||
await getTree() |
||||
}) |
||||
</script> |
||||
@ -0,0 +1,228 @@ |
||||
<template> |
||||
<Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 800px"> |
||||
<el-form |
||||
ref="formRef" |
||||
v-loading="formLoading" |
||||
:model="formData" |
||||
:rules="formRules" |
||||
label-width="80px" |
||||
> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="用户姓名" prop="nickname"> |
||||
<el-input v-model="formData.nickname" placeholder="请输入用户姓名" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<!-- <el-col :span="12"> |
||||
<el-form-item label="用户性别"> |
||||
<el-radio-group v-model="formData.sex"> |
||||
<el-radio :value="1"> 男 </el-radio> |
||||
<el-radio :value="2"> 女 </el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="归属部门" prop="deptId"> |
||||
<el-tree-select |
||||
v-model="formData.deptId" |
||||
:data="deptList" |
||||
:props="defaultProps" |
||||
check-strictly |
||||
node-key="id" |
||||
placeholder="请选择归属部门" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> --> |
||||
<el-col :span="12"> |
||||
<el-form-item label="角色" prop="role"> |
||||
<el-select |
||||
v-model="formData.roleIds" |
||||
multiple |
||||
collapse-tags |
||||
collapse-tags-tooltip |
||||
:max-collapse-tags="2" |
||||
placeholder="请选择角色" |
||||
> |
||||
<el-option |
||||
v-for="item in roleOptions" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="手机号码" prop="mobile"> |
||||
<el-input v-model="formData.mobile" maxlength="11" placeholder="请输入手机号码" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="邮箱" prop="email"> |
||||
<el-input v-model="formData.email" maxlength="50" placeholder="请输入邮箱" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item v-if="formData.id === undefined" label="登录账号" prop="username"> |
||||
<el-input v-model="formData.username" placeholder="请输入登录账号" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item v-if="formData.id === undefined" label="用户密码" prop="password"> |
||||
<el-input |
||||
v-model="formData.password" |
||||
placeholder="请输入用户密码" |
||||
show-password |
||||
type="password" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<!-- <el-row :gutter="20"> |
||||
<el-col :span="12" :offset="0"> |
||||
<el-form-item label="入职日期" prop="hireDate"> |
||||
<el-date-picker |
||||
v-model="formData.hireDate" |
||||
type="date" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
placeholder="选择日期时间" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> --> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="24"> |
||||
<el-form-item label="备注"> |
||||
<el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
</template> |
||||
</Dialog> |
||||
</template> |
||||
<script lang="ts" name="SystemUserForm" setup> |
||||
import { CommonStatusEnum } from '@/utils/constants' |
||||
// import { defaultProps, handleTree } from '@/utils/tree' |
||||
import { handleTree } from '@/utils/tree' |
||||
import { formatDate } from '@/utils/formatTime' |
||||
|
||||
import * as RoleApi from '@/api/system/role' |
||||
import * as DeptApi from '@/api/system/dept' |
||||
import * as UserApi from '@/api/system/user' |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
const dialogTitle = ref('') // 弹窗的标题 |
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
const formData = ref({ |
||||
nickname: '', |
||||
deptId: '', |
||||
mobile: '', |
||||
email: '', |
||||
id: undefined, |
||||
username: '', |
||||
password: '', |
||||
sex: 1, |
||||
remark: '', |
||||
status: CommonStatusEnum.ENABLE, |
||||
roleIds: [], |
||||
hireDate: '' |
||||
}) |
||||
const formRules = ref<any>({ |
||||
username: [{ required: true, message: '登录账号不能为空', trigger: 'blur' }], |
||||
nickname: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }], |
||||
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }], |
||||
email: [ |
||||
{ |
||||
type: 'email', |
||||
message: '请输入正确的邮箱地址', |
||||
trigger: ['blur', 'change'] |
||||
} |
||||
], |
||||
mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }] |
||||
}) |
||||
const formRef = ref() // 表单 Ref |
||||
const deptList = ref<Tree[]>([]) // 树形结构 |
||||
const roleOptions = ref<any>([]) |
||||
|
||||
/** 打开弹窗 */ |
||||
const open = async (type: string, id?: number) => { |
||||
dialogVisible.value = true |
||||
dialogTitle.value = t('action.' + type) |
||||
formType.value = type |
||||
resetForm() |
||||
// 修改时，设置数据 |
||||
if (id) { |
||||
formLoading.value = true |
||||
try { |
||||
formData.value = await UserApi.getUser(id) |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
// 加载部门树 |
||||
deptList.value = handleTree(await DeptApi.getSimpleDeptList({ allFlag: false })) |
||||
// 加载岗位列表 |
||||
roleOptions.value = await RoleApi.getSimpleRoleList() |
||||
} |
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
||||
/** 提交表单 */ |
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
const submitForm = async () => { |
||||
// 校验表单 |
||||
if (!formRef.value) return |
||||
const valid = await formRef.value.validate() |
||||
if (!valid) return |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
const data = formData.value as unknown as UserApi.UserVO |
||||
if (formType.value === 'create') { |
||||
await UserApi.createUser(data) |
||||
message.success(t('common.createSuccess')) |
||||
} else { |
||||
await UserApi.updateUser(data) |
||||
message.success(t('common.updateSuccess')) |
||||
} |
||||
dialogVisible.value = false |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 重置表单 */ |
||||
const resetForm = () => { |
||||
formData.value = { |
||||
nickname: '', |
||||
deptId: '', |
||||
mobile: '', |
||||
email: '', |
||||
id: undefined, |
||||
username: '', |
||||
password: '', |
||||
sex: 1, |
||||
remark: '', |
||||
status: CommonStatusEnum.ENABLE, |
||||
roleIds: [], |
||||
hireDate: formatDate(new Date(), 'YYYY-MM-DD') |
||||
} |
||||
formRef.value?.resetFields() |
||||
} |
||||
</script> |
||||
@ -0,0 +1,209 @@ |
||||
<template> |
||||
<!-- <el-row :gutter="20"> --> |
||||
<!-- 左侧部门树 --> |
||||
<!-- <el-col :span="4" :xs="24"> |
||||
<DeptTree @node-click="handleDeptNodeClick" /> |
||||
</el-col> |
||||
<el-col :span="20" :xs="24"> --> |
||||
<!-- 搜索 --> |
||||
<el-form :model="queryParams" ref="queryFormRef" inline label-width="0"> |
||||
<el-form-item prop="nickname"> |
||||
<el-input |
||||
v-model="queryParams.nickname" |
||||
placeholder="请输入姓名" |
||||
clearable |
||||
@keyup.enter="handleQuery" |
||||
class="!w-240px" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item prop="mobile"> |
||||
<el-input |
||||
v-model="queryParams.mobile" |
||||
placeholder="请输入手机号码" |
||||
clearable |
||||
@keyup.enter="handleQuery" |
||||
class="!w-240px" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleQuery" v-hasPermi="['basic:employee:search']">搜索</el-button> |
||||
<el-button @click="resetQuery" v-hasPermi="['basic:employee:reset']">重置</el-button> |
||||
<el-button |
||||
type="primary" |
||||
plain |
||||
@click="openForm('create')" |
||||
v-hasPermi="['basic:employee:add']" |
||||
> |
||||
新增 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-table v-loading="loading" :data="list"> |
||||
<el-table-column label="用户编号" key="id" prop="id" /> |
||||
<el-table-column label="登录账号" prop="username" /> |
||||
<el-table-column label="用户姓名" prop="nickname" /> |
||||
<!-- <el-table-column label="部门" key="deptName" prop="deptName" /> --> |
||||
<el-table-column label="手机号码" prop="mobile" width="120" /> |
||||
<el-table-column label="状态" key="status"> |
||||
<template #default="scope"> |
||||
<el-switch |
||||
v-model="scope.row.status" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
active-text="在职" |
||||
inactive-text="离职" |
||||
v-hasPermi="['basic:employee:update']" |
||||
@change="handleStatusChange(scope.row)" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="创建时间" prop="createTime" width="180" :formatter="dateFormatter" /> |
||||
<el-table-column label="操作" width="260"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="openForm('update', scope.row.id)" |
||||
v-hasPermi="['basic:employee:update']" |
||||
> |
||||
修改 |
||||
</el-button> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="handleDelete(scope.row.id)" |
||||
v-hasPermi="['basic:employee:delete']" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="handleResetPwd(scope.row)" |
||||
v-hasPermi="['basic:employee:password']" |
||||
> |
||||
重置密码 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<Pagination |
||||
:total="total" |
||||
v-model:page="queryParams.pageNo" |
||||
v-model:limit="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
<!-- </el-col> --> |
||||
<!-- </el-row> --> |
||||
|
||||
<!-- 添加或修改用户对话框 --> |
||||
<UserForm ref="formRef" @success="getList" /> |
||||
</template> |
||||
<script setup lang="ts" name="SystemUser"> |
||||
import { CommonStatusEnum } from '@/utils/constants' |
||||
import { dateFormatter } from '@/utils/formatTime' |
||||
import * as UserApi from '@/api/system/user' |
||||
import UserForm from './UserForm.vue' |
||||
// import DeptTree from './DeptTree.vue' |
||||
const message = useMessage() // 消息弹窗 |
||||
const { t } = useI18n() // 国际化 |
||||
|
||||
const loading = ref(true) // 列表的加载中 |
||||
const total = ref(0) // 列表的总页数 |
||||
const list = ref([]) // 列表的数 |
||||
const queryParams = reactive({ |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
username: undefined, |
||||
nickname: undefined, |
||||
mobile: undefined, |
||||
deptId: undefined |
||||
}) |
||||
const queryFormRef = ref() // 搜索的表单 |
||||
|
||||
/** 查询列表 */ |
||||
const getList = async () => { |
||||
loading.value = true |
||||
try { |
||||
const data = await UserApi.getUserPage(queryParams) |
||||
list.value = data.list |
||||
total.value = data.total |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 搜索按钮操作 */ |
||||
const handleQuery = () => { |
||||
queryParams.pageNo = 1 |
||||
getList() |
||||
} |
||||
|
||||
/** 重置按钮操作 */ |
||||
const resetQuery = () => { |
||||
queryFormRef.value?.resetFields() |
||||
handleQuery() |
||||
} |
||||
|
||||
// /** 处理部门被点击 */ |
||||
// const handleDeptNodeClick = async (row) => { |
||||
// queryParams.deptId = row.id |
||||
// await getList() |
||||
// } |
||||
|
||||
/** 添加/修改操作 */ |
||||
const formRef = ref() |
||||
const openForm = (type: string, id?: number) => { |
||||
formRef.value.open(type, id) |
||||
} |
||||
|
||||
/** 修改用户状态 */ |
||||
const handleStatusChange = async (row: UserApi.UserVO) => { |
||||
try { |
||||
// 修改状态的二次确认 |
||||
const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用' |
||||
await message.confirm('确认要"' + text + '""' + row.username + '"用户吗?') |
||||
// 发起修改状态 |
||||
await UserApi.updateUserStatus(row.id, row.status) |
||||
// 刷新列表 |
||||
await getList() |
||||
} catch { |
||||
// 取消后，进行恢复按钮 |
||||
row.status = |
||||
row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE |
||||
} |
||||
} |
||||
|
||||
/** 删除按钮操作 */ |
||||
const handleDelete = async (id: number) => { |
||||
try { |
||||
// 删除的二次确认 |
||||
await message.delConfirm() |
||||
// 发起删除 |
||||
await UserApi.deleteUser(id) |
||||
message.success(t('common.delSuccess')) |
||||
// 刷新列表 |
||||
await getList() |
||||
} catch {} |
||||
} |
||||
|
||||
/** 重置密码 */ |
||||
const handleResetPwd = async (row: UserApi.UserVO) => { |
||||
try { |
||||
// 重置的二次确认 |
||||
const result = await message.prompt( |
||||
'请输入"' + row.username + '"的新密码', |
||||
t('common.reminder') |
||||
) |
||||
const password = result.value |
||||
// 发起重置 |
||||
await UserApi.resetUserPwd(row.id, password) |
||||
message.success('修改成功，新密码是：' + password) |
||||
} catch {} |
||||
} |
||||
|
||||
/** 初始化 */ |
||||
onMounted(() => { |
||||
getList() |
||||
}) |
||||
</script> |
||||
@ -0,0 +1,344 @@ |
||||
<template> |
||||
<el-dialog |
||||
title="试题" |
||||
:close-on-click-modal="false" |
||||
append-to-body |
||||
v-model="visible" |
||||
width="900px" |
||||
> |
||||
<div> |
||||
<el-form |
||||
ref="dialogFormRef" |
||||
:model="dialogForm" |
||||
:rules="dataRule" |
||||
label-width="auto" |
||||
label-position="right" |
||||
@keyup.enter="dialogFormSubmit()" |
||||
> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="题目" prop="question"> |
||||
<el-input |
||||
v-model="dialogForm.question" |
||||
maxlength="200" |
||||
placeholder="请输入题目" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="题目关键字" prop="titleWords"> |
||||
<el-input |
||||
v-model="dialogForm.titleWords" |
||||
maxlength="1000" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="专项" prop="categoryTitle"> |
||||
<el-input |
||||
v-model="dialogForm.categoryTitle" |
||||
maxlength="1000" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="章节" prop="chapter"> |
||||
<el-select v-model="dialogForm.chapter" style="width: 100%"> |
||||
<el-option |
||||
v-for="dict in chapterOptions" |
||||
:key="dict.chapterId" |
||||
:label="dict.chapterName" |
||||
:value="dict.chapterId" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="题型" prop="type"> |
||||
<el-radio-group v-model="dialogForm.type"> |
||||
<el-radio label="1" value="1">判断题</el-radio> |
||||
<el-radio label="2" value="2">单选题</el-radio> |
||||
<el-radio label="3" value="3">多选题</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-col> |
||||
|
||||
<el-col :span="12"> |
||||
<el-form-item label="排序" prop="showOrder"> |
||||
<el-input |
||||
v-model="dialogForm.showOrder" |
||||
maxlength="20" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="选项A" prop="chooseA"> |
||||
<el-input |
||||
v-model="dialogForm.chooseA" |
||||
maxlength="200" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="选项B" prop="chooseB"> |
||||
<el-input |
||||
v-model="dialogForm.chooseB" |
||||
maxlength="200" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="选项C" prop="chooseC"> |
||||
<el-input |
||||
v-model="dialogForm.chooseC" |
||||
maxlength="200" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="选项D" prop="chooseD"> |
||||
<el-input |
||||
v-model="dialogForm.chooseD" |
||||
maxlength="200" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="答案" prop="trueAnswer"> |
||||
<el-input |
||||
v-model="dialogForm.trueAnswer" |
||||
maxlength="200" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="难点分析" prop="bestAnswer"> |
||||
<el-input |
||||
v-model="dialogForm.bestAnswer" |
||||
maxlength="1000" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="答题技巧" prop="skillInfo"> |
||||
<el-input |
||||
v-model="dialogForm.skillInfo" |
||||
maxlength="1000" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="技巧关键字" prop="skillWords"> |
||||
<el-input |
||||
v-model="dialogForm.skillWords" |
||||
maxlength="1000" |
||||
placeholder="请输入" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="车型" prop="carTypeId"> |
||||
<span v-if="dialogForm.carTypeId == '1001'">小车</span> |
||||
<span v-if="dialogForm.carTypeId == '1002'">摩托车</span> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="科目" prop="subject"> |
||||
<span v-if="dialogForm.subject == '1'">科一</span> |
||||
<span v-if="dialogForm.subject == '4'">科四</span> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-form-item label="题目图片" prop="imageUrl"> |
||||
<el-upload |
||||
action="#" |
||||
accept=".png,.jpg,.jpeg,.gif" |
||||
:limit="1" |
||||
:http-request="handleImport" |
||||
:on-exceed="handleExceed" |
||||
:show-file-list="false" |
||||
> |
||||
<img v-if="imgUrl" :src="imgUrl" style="width: 200px" /> |
||||
<i v-else class="el-icon-plus"></i> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</el-row> |
||||
</el-form> |
||||
</div> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button plain @click="visible = false">取消</el-button> |
||||
<el-button type="primary" :disabled="!canSubmit" @click="dialogFormSubmit()"> |
||||
确定 |
||||
</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup name="QuesAddForm"> |
||||
import { addQuestion, updateQuestion, uploadFile } from '@/api/xjapplet/xjdatabase' |
||||
|
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const emit = defineEmits(['update']) |
||||
|
||||
const visible = ref(false) |
||||
const canSubmit = ref(true) |
||||
const imgUrl = ref(undefined) |
||||
const chapterOptions = ref([]) |
||||
const dialogForm = ref({ |
||||
id: undefined, |
||||
showOrder: 0, |
||||
categoryTitle: undefined, |
||||
question: undefined, |
||||
bestAnswer: undefined, |
||||
chooseA: undefined, |
||||
chooseB: undefined, |
||||
chooseC: undefined, |
||||
chooseD: undefined, |
||||
imageUrl: undefined, |
||||
type: undefined, |
||||
trueAnswer: undefined, |
||||
carTypeId: undefined, |
||||
skillInfoPic: undefined, |
||||
source: undefined |
||||
}) |
||||
|
||||
const dataRule = { |
||||
schoolName: [{ required: true, message: '驾校名称不能为空', trigger: 'blur' }], |
||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }] |
||||
} |
||||
|
||||
const open = (info = undefined, opts) => { |
||||
visible.value = true |
||||
chapterOptions.value = opts |
||||
resetDialogForm() |
||||
if (info) { |
||||
dialogForm.value = { ...info, chapter: parseInt(info.chapter) } |
||||
if (dialogForm.value.imageUrl) { |
||||
imgUrl.value = 'https://ss-cloud.ahduima.com/xjxc/pic/' + dialogForm.value.imageUrl |
||||
} |
||||
} |
||||
info.source = info.source |
||||
} |
||||
|
||||
defineExpose({ |
||||
open |
||||
}) |
||||
|
||||
const resetDialogForm = () => { |
||||
dialogForm.value = { |
||||
id: undefined, |
||||
showOrder: 0, |
||||
question: undefined, |
||||
bestAnswer: undefined, |
||||
chooseA: undefined, |
||||
chooseB: undefined, |
||||
chooseC: undefined, |
||||
chooseD: undefined, |
||||
imageUrl: undefined, |
||||
type: undefined, |
||||
trueAnswer: undefined, |
||||
carTypeId: undefined, |
||||
skillInfoPic: undefined, |
||||
skillInfo: undefined, |
||||
jqtp: undefined, |
||||
biaoji: undefined, |
||||
titleWords: undefined, |
||||
skillWords: undefined, |
||||
optaWords: undefined, |
||||
optbWords: undefined, |
||||
optcWords: undefined, |
||||
optdWords: undefined, |
||||
carTypeId: undefined, |
||||
source: undefined |
||||
} |
||||
} |
||||
const dialogFormRef = ref(null) |
||||
// 表单提交 |
||||
const dialogFormSubmit = async () => { |
||||
if (!dialogFormRef.value) return |
||||
const valid = await dialogFormRef.value.validate() |
||||
if (!valid) return |
||||
|
||||
if (dialogForm.value.questionId) { |
||||
updateQuestion(dialogForm.value).then((response) => { |
||||
if (response) { |
||||
message.success('修改成功') |
||||
emit('update') |
||||
visible.value = false |
||||
} |
||||
}) |
||||
} else { |
||||
addQuestion(dialogForm.value).then((response) => { |
||||
if (response) { |
||||
message.success('新增成功') |
||||
visible.value = false |
||||
emit('update') |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
const handleImport = (opt) => { |
||||
const data = new FormData() |
||||
data.append('file', opt.file) |
||||
uploadFile(data).then((resp) => { |
||||
if (resp.code == 200) { |
||||
message.success('文件上传成功') |
||||
dialogForm.value.imageUrl = resp.data |
||||
imgUrl.value = 'https://ss-cloud.ahduima.com/xjxc/pic/' + dialogForm.value.imageUrl |
||||
} |
||||
}) |
||||
} |
||||
const handleExceed = (files) => { |
||||
handleImport({ file: files[0] }) |
||||
} |
||||
</script> |
||||
@ -0,0 +1,228 @@ |
||||
<template> |
||||
<div class="app-container" style="text-align: center"> |
||||
<el-tabs v-model="queryParams.source" @tab-click="handleChangeSource"> |
||||
<el-tab-pane |
||||
v-for="item in sourceOptions" |
||||
:key="item.key" |
||||
:label="item.label" |
||||
:name="item.key" |
||||
> |
||||
<el-form :inline="true" label-width="68px" @submit.prevent> |
||||
<el-row :gutter="20"> |
||||
<el-form-item label="车型"> |
||||
<el-radio-group v-model="queryParams.carTypeId" @change="getQuestionChapter"> |
||||
<el-radio label="1001" value="1001">小车</el-radio> |
||||
<el-radio label="1002" value="1002">摩托车</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="科目"> |
||||
<el-radio-group v-model="queryParams.subject" @change="getQuestionChapter"> |
||||
<el-radio label="1" value="1">科一</el-radio> |
||||
<el-radio label="4" value="4">科四</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="有图片"> |
||||
<el-radio-group v-model="queryParams.isPic"> |
||||
<el-radio :label="true" :value="true">有</el-radio> |
||||
<el-radio :label="false" :value="false">无</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-form-item label="题目"> |
||||
<el-input |
||||
v-model="queryParams.question" |
||||
placeholder="请输入题目" |
||||
clearable |
||||
style="width: 400px" |
||||
@keyup.enter="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button |
||||
type="primary" |
||||
@click="handleQuery" |
||||
v-hasPermi="['question:database:search']" |
||||
> |
||||
搜索 |
||||
</el-button> |
||||
<el-button type="primary" @click="handleAdd" v-hasPermi="['question:database:add']"> |
||||
新增 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-row> |
||||
</el-form> |
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="tableList" |
||||
highlight-current-row |
||||
max-height="calc(100vh - 260px)" |
||||
> |
||||
<el-table-column type="index" width="55" align="center" /> |
||||
<el-table-column label="题目" align="left" prop="question" min-width="140" /> |
||||
<el-table-column label="选项" align="left" min-width="140"> |
||||
<template #default="{ row }"> |
||||
<p v-if="row.chooseA">A:{{ row.chooseA }}</p> |
||||
<p v-if="row.chooseB">B:{{ row.chooseB }}</p> |
||||
<p v-if="row.chooseC">C:{{ row.chooseC }}</p> |
||||
<p v-if="row.chooseD">D:{{ row.chooseD }}</p> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="答案" align="center" prop="trueAnswer" width="100" /> |
||||
<el-table-column label="科目" align="center" prop="subject" width="100"> |
||||
<template #default="{ row }"> |
||||
<span v-if="row.subject == '1'">科一</span> |
||||
<span v-if="row.subject == '4'">科四</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="章节" align="center" prop="chapterName" min-width="100" /> |
||||
<el-table-column label="图片" align="center" width="100"> |
||||
<template #default="{ row }"> |
||||
<el-image |
||||
v-if="row.imageUrl" |
||||
:src="`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`" |
||||
:preview-src-list="[`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`]" |
||||
:lazy="true" |
||||
style="width: 80px" |
||||
preview-teleported |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="状态" width="100"> |
||||
<template #default="{ row }"> |
||||
<el-tag v-if="row.isActive == 0" type="success">使用中</el-tag> |
||||
<el-tag v-else type="danger">已删除</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column label="操作" align="center" width="140"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="handleEdit(scope.row)" |
||||
v-hasPermi="['question:database:edit']" |
||||
> |
||||
修改 |
||||
</el-button> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="handleDelete(scope.row.id)" |
||||
v-hasPermi="['question:database:remove']" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
v-model:page="queryParams.pageNo" |
||||
v-model:limit="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
|
||||
<QuestionAddForm ref="dialogAddForm" @update="getList" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="XjDatabase"> |
||||
import { searchQuestion, deleteQuestion, getQuestionSort } from '@/api/xjapplet/xjdatabase' |
||||
import QuestionAddForm from './components/QuestionAddForm.vue' |
||||
|
||||
const loading = ref(false) |
||||
const total = ref(0) |
||||
const tableList = ref([]) |
||||
const queryParams = ref({ |
||||
source: '1', |
||||
question: '', |
||||
carTypeId: '1001', |
||||
subject: '1', |
||||
isPic: undefined, |
||||
pageNo: 1, |
||||
pageSize: 100 |
||||
}) |
||||
|
||||
const sourceOptions = [ |
||||
{ |
||||
key: '1', |
||||
label: '驾考精灵' |
||||
}, |
||||
{ |
||||
key: '2', |
||||
label: '驾校一点通' |
||||
} |
||||
] |
||||
|
||||
onMounted(() => { |
||||
getQuestionChapter() |
||||
}) |
||||
|
||||
const chapterOptions = ref([]) |
||||
const getQuestionChapter = () => { |
||||
getQuestionSort({ |
||||
carTypeId: queryParams.value.carTypeId, |
||||
subject: queryParams.value.subject, |
||||
source: queryParams.value.source |
||||
}).then((data) => { |
||||
chapterOptions.value = data |
||||
}) |
||||
} |
||||
|
||||
function getList() { |
||||
loading.value = true |
||||
searchQuestion(queryParams.value).then((response) => { |
||||
tableList.value = response.list |
||||
total.value = response.total |
||||
loading.value = false |
||||
}) |
||||
} |
||||
|
||||
function handleQuery() { |
||||
getList() |
||||
} |
||||
|
||||
const dialogAddForm = ref(null) |
||||
function handleEdit(item) { |
||||
dialogAddForm.value.open(item, chapterOptions.value) |
||||
} |
||||
|
||||
function handleAdd() { |
||||
dialogAddForm.value.open( |
||||
{ |
||||
subject: queryParams.value.subject, |
||||
carTypeId: queryParams.value.carTypeId, |
||||
source: queryParams.value.source |
||||
}, |
||||
chapterOptions.value |
||||
) |
||||
} |
||||
|
||||
function handleDelete(id) { |
||||
deleteQuestion(id).then(() => { |
||||
getList() |
||||
}) |
||||
} |
||||
|
||||
function handleChangeSource() { |
||||
const obj = { |
||||
question: '', |
||||
carTypeId: '1001', |
||||
subject: '1', |
||||
isPic: undefined, |
||||
pageNo: 1 |
||||
} |
||||
queryParams.value = { ...obj, source: queryParams.value.source } |
||||
getQuestionChapter() |
||||
getList() |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,7 @@ |
||||
<template> |
||||
<div> 基础设置 </div> |
||||
</template> |
||||
|
||||
<script setup name="QuestionSetting"></script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,7 @@ |
||||
<template> |
||||
<div> 无人机题库 </div> |
||||
</template> |
||||
|
||||
<script setup name="UAV"></script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,7 @@ |
||||
<template> |
||||
<div> 无人机VIP </div> |
||||
</template> |
||||
|
||||
<script setup name="UAVVip"></script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,310 @@ |
||||
<template> |
||||
<div> |
||||
<el-form inline label-width="68px" @submit.prevent> |
||||
<el-row :gutter="20"> |
||||
<el-form-item label="车型" @change="searchMj"> |
||||
<el-radio-group v-model="queryParams.carTypeId"> |
||||
<el-radio label="1001" value="1001">小车</el-radio> |
||||
<el-radio label="1002" value="1002">摩托车</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="科目"> |
||||
<el-radio-group v-model="queryParams.subject" @change="searchMj"> |
||||
<el-radio label="1" value="1">科一</el-radio> |
||||
<el-radio label="4" value="4">科四</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-row> |
||||
</el-form> |
||||
<div style="display: flex; padding: 10px; border: 1px solid #eee; height: calc(100vh - 80px)"> |
||||
<div style="width: 300px; border-right: 1px solid #eee"> |
||||
<div style="display: flex; justify-content: space-between; padding-right: 20px"> |
||||
<div style="font-size: 18px; font-weight: bold">密卷</div> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="addMjItem" |
||||
v-hasPermi="['questiont:vip-data:mj:add']" |
||||
>新增</el-button |
||||
> |
||||
</div> |
||||
<el-radio-group |
||||
v-model="mjIndex" |
||||
style="width: 100%; display: block; margin-top: 20px" |
||||
@change="getQuestionList" |
||||
> |
||||
<el-radio v-for="(item, index) in mjList" :key="index" :label="index" class="flex-radio"> |
||||
<div style="flex: 1; width: 100px">{{ getMjTitle(index) }}</div> |
||||
<div style="padding-right: 15px"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="removeMj(item)" |
||||
v-hasPermi="['questiont:vip-data:mj:remove']" |
||||
>删除</el-button |
||||
> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="clearMjDetail(item)" |
||||
v-hasPermi="['questiont:vip-data:mj:clear']" |
||||
>清空</el-button |
||||
> |
||||
</div> |
||||
</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
<div style="flex: 1; padding-left: 20px; padding-right: 20px"> |
||||
<div |
||||
v-if="mjList.length > 0" |
||||
style="display: flex; justify-content: space-between; align-items: center" |
||||
> |
||||
<div style="font-size: 20px; font-weight: bold"> |
||||
当前密卷：{{ getMjTitle(mjIndex) }} |
||||
</div> |
||||
<div style="margin-left: 10px; margin-right: 10px"> 题目数：{{ tableList.length }} </div> |
||||
<el-button |
||||
type="primary" |
||||
@click="addMjDetail" |
||||
v-hasPermi="['questiont:vip-data:mj:add-question']" |
||||
>新增密卷试题</el-button |
||||
> |
||||
</div> |
||||
<el-table |
||||
v-loading="loading" |
||||
:data="tableList" |
||||
style="margin-top: 10px" |
||||
max-height="calc(100vh - 280px)" |
||||
> |
||||
<el-table-column type="index" width="55" align="center" /> |
||||
<el-table-column label="题目" align="left" prop="question" min-width="140" /> |
||||
<el-table-column label="选项" align="left" min-width="140"> |
||||
<template #default="{ row }"> |
||||
<p v-if="row.chooseA">A:{{ row.chooseA }}</p> |
||||
<p v-if="row.chooseB">B:{{ row.chooseB }}</p> |
||||
<p v-if="row.chooseC">C:{{ row.chooseC }}</p> |
||||
<p v-if="row.chooseD">D:{{ row.chooseD }}</p> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="答案" align="center" prop="trueAnswer" width="100" /> |
||||
<el-table-column label="科目" align="center" prop="subject" width="100"> |
||||
<template #default="{ row }"> |
||||
<span v-if="row.subject == '1'">科一</span> |
||||
<span v-if="row.subject == '4'">科四</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="章节" align="center" prop="chapterName" min-width="100" /> |
||||
<el-table-column label="图片" align="center" width="100"> |
||||
<template #default="{ row }"> |
||||
<el-image |
||||
v-if="row.imageUrl" |
||||
:src="`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`" |
||||
:preview-src-list="[`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`]" |
||||
:lazy="true" |
||||
style="width: 80px" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column label="操作" align="center" width="100px"> |
||||
<template #default="{ row }"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="takeoutMj(row)" |
||||
v-hasPermi="['questiont:vip-data:mj:remove-question']" |
||||
>移出密卷</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-dialog v-model="showDialog" title="新增试题" width="80%"> |
||||
<div style="display: flex; align-items: center; margin-bottom: 20px"> |
||||
<el-input v-model="quesName" placeholder="请输入题目" clearable @keyup.enter="searchQues" /> |
||||
<el-button style="margin-left: 20px" type="primary" @click="searchQues">搜索</el-button> |
||||
</div> |
||||
<el-table :data="quesLit" highlight-current-row height="calc(100vh - 260px)"> |
||||
<el-table-column label="题目" align="left" prop="question" min-width="140" /> |
||||
<el-table-column label="选项" align="left" min-width="140"> |
||||
<template #default="{ row }"> |
||||
<p v-if="row.chooseA">A:{{ row.chooseA }}</p> |
||||
<p v-if="row.chooseB">B:{{ row.chooseB }}</p> |
||||
<p v-if="row.chooseC">C:{{ row.chooseC }}</p> |
||||
<p v-if="row.chooseD">D:{{ row.chooseD }}</p> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="答案" align="center" prop="trueAnswer" width="100" /> |
||||
<el-table-column label="章节" align="center" prop="chapterName" min-width="100" /> |
||||
<el-table-column label="图片" align="center" width="100"> |
||||
<template #default="{ row }"> |
||||
<el-image |
||||
v-if="row.imageUrl" |
||||
:src="`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`" |
||||
:preview-src-list="[`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`]" |
||||
:lazy="true" |
||||
style="width: 80px" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="100px"> |
||||
<template #default="{ row }"> |
||||
<el-button type="primary" link @click="sureAddQues(row)">加入密卷</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="SimpleData"> |
||||
import { |
||||
getMjList, |
||||
addMj, |
||||
delMj, |
||||
clearMj, |
||||
getMjQuestionList, |
||||
addMjQuestion, |
||||
delMjQuestion |
||||
} from '@/api/xjapplet/vipdatabase.js' |
||||
import { searchQuestion } from '@/api/xjapplet/xjdatabase.js' |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const props = defineProps({ |
||||
source: { |
||||
type: String, |
||||
default: '1' |
||||
} |
||||
}) |
||||
|
||||
watch( |
||||
() => props.source, |
||||
(newValue) => { |
||||
queryParams.value.source = newValue |
||||
searchMj() |
||||
} |
||||
) |
||||
|
||||
const queryParams = ref({ |
||||
carTypeId: '1001', |
||||
subject: '1' |
||||
}) |
||||
const mjIndex = ref(0) |
||||
const mjList = ref([]) |
||||
const loading = ref(false) |
||||
const tableList = ref([]) |
||||
const showDialog = ref(false) |
||||
const quesName = ref('') |
||||
const quesLit = ref([]) |
||||
|
||||
onMounted(() => { |
||||
searchMj() |
||||
}) |
||||
|
||||
function addMjItem() { |
||||
addMj(queryParams.value).then((res) => { |
||||
if (res) { |
||||
searchMj() |
||||
message.success('添加成功') |
||||
} else { |
||||
message.error('添加失败') |
||||
} |
||||
}) |
||||
} |
||||
function getMjTitle(idx) { |
||||
// const cjObj = { |
||||
// 1001: '小车', |
||||
// 1002: '摩托车' |
||||
// } |
||||
// const kmObj = { |
||||
// 1: '科一', |
||||
// 4: '科四' |
||||
// } |
||||
// return `${cjObj[queryParams.value.carTypeId]}${kmObj[queryParams.value.subject]}考前密卷 第${ |
||||
// idx + 1 |
||||
// }套` |
||||
return `考前密卷 第${idx + 1}套` |
||||
} |
||||
function removeMj(item) { |
||||
message |
||||
.confirm('是否确认删除密卷？') |
||||
.then(function () { |
||||
return delMj(item.secretId) |
||||
}) |
||||
.then(() => { |
||||
searchMj() |
||||
message.success('删除成功') |
||||
}) |
||||
.catch(() => {}) |
||||
} |
||||
function clearMjDetail(item) { |
||||
message |
||||
.confirm('是否确认清空密卷题目？') |
||||
.then(function () { |
||||
return clearMj(item.secretId) |
||||
}) |
||||
.then(() => { |
||||
getQuestionList() |
||||
message.success('清空题目成功') |
||||
}) |
||||
.catch(() => {}) |
||||
} |
||||
function searchMj() { |
||||
getMjList(queryParams.value).then((resp) => { |
||||
mjList.value = resp || [] |
||||
if (mjList.value.length > 0) { |
||||
mjIndex.value = 0 |
||||
getQuestionList() |
||||
} |
||||
}) |
||||
} |
||||
function addMjDetail() { |
||||
showDialog.value = true |
||||
} |
||||
function searchQues() { |
||||
searchQuestion({ |
||||
...queryParams.value, |
||||
pageNo: 1, |
||||
pageSize: 1000, |
||||
question: quesName.value |
||||
}).then((response) => { |
||||
quesLit.value = response.list |
||||
}) |
||||
} |
||||
function takeoutMj(row) { |
||||
message |
||||
.confirm('是否确认将该题移出密卷？') |
||||
.then(function () { |
||||
return delMjQuestion(row.id) |
||||
}) |
||||
.then(() => { |
||||
getQuestionList() |
||||
message.success('清空题目成功') |
||||
}) |
||||
.catch(() => {}) |
||||
} |
||||
function getQuestionList() { |
||||
getMjQuestionList({ |
||||
secretId: mjList.value[mjIndex.value].secretId |
||||
}).then((resp) => { |
||||
tableList.value = resp |
||||
}) |
||||
} |
||||
function sureAddQues(row) { |
||||
addMjQuestion({ |
||||
secretId: mjList.value[mjIndex.value].secretId, |
||||
subId: row.subId |
||||
}) |
||||
.then((resp) => { |
||||
if (resp) { |
||||
message.success('添加成功') |
||||
getQuestionList() |
||||
} |
||||
}) |
||||
.catch(() => {}) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,211 @@ |
||||
<template> |
||||
<div> |
||||
<el-form inline label-width="68px" @submit.prevent> |
||||
<el-row :gutter="20"> |
||||
<el-form-item label="车型"> |
||||
<el-radio-group v-model="queryParams.carTypeId"> |
||||
<el-radio label="1001" value="1001">小车</el-radio> |
||||
<el-radio label="1002" value="1002">摩托车</el-radio> |
||||
<!-- <el-radio label="B2">货车</el-radio> --> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="科目"> |
||||
<el-radio-group v-model="queryParams.subject"> |
||||
<el-radio label="1" value="1">科一</el-radio> |
||||
<el-radio label="4" value="4">科四</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button |
||||
type="primary" |
||||
v-hasPermi="['question:vip-data:jx:search']" |
||||
@click=" |
||||
() => { |
||||
queryParams.pageNo = 1 |
||||
getQuestionList() |
||||
} |
||||
" |
||||
> |
||||
查询 |
||||
</el-button> |
||||
<el-button type="primary" @click="addMjDetail" v-hasPermi="['question:vip-data:jx:add']"> |
||||
新增精选试题 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-row> |
||||
</el-form> |
||||
<el-table v-loading="loading" :data="tableList" height="calc(100vh - 250px)"> |
||||
<el-table-column type="index" width="55" align="center" /> |
||||
<el-table-column label="题目" align="left" prop="question" min-width="140" /> |
||||
<el-table-column label="选项" align="left" min-width="140"> |
||||
<template #default="{ row }"> |
||||
<p v-if="row.chooseA">A:{{ row.chooseA }}</p> |
||||
<p v-if="row.chooseB">B:{{ row.chooseB }}</p> |
||||
<p v-if="row.chooseC">C:{{ row.chooseC }}</p> |
||||
<p v-if="row.chooseD">D:{{ row.chooseD }}</p> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="答案" align="center" prop="trueAnswer" width="100" /> |
||||
<el-table-column label="科目" align="center" prop="subject" width="100"> |
||||
<template #default="{ row }"> |
||||
<span v-if="row.subject == '1'">科一</span> |
||||
<span v-if="row.subject == '4'">科四</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="图片" align="center" width="100"> |
||||
<template #default="{ row }"> |
||||
<el-image |
||||
v-if="row.imageUrl" |
||||
:src="`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`" |
||||
:preview-src-list="[`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`]" |
||||
:lazy="true" |
||||
style="width: 80px" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="100px"> |
||||
<template #default="{ row }"> |
||||
<el-button |
||||
size="small" |
||||
type="primary" |
||||
link |
||||
@click="takeoutMj(row)" |
||||
v-hasPermi="['question:vip-data:jx:remove']" |
||||
> |
||||
移出精选 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
v-model:page="queryParams.pageNo" |
||||
v-model:limit="queryParams.pageSize" |
||||
@pagination="getQuestionList" |
||||
/> |
||||
|
||||
<el-dialog v-model="showDialog" title="新增试题" width="80%"> |
||||
<div style="display: flex; align-items: center; margin-bottom: 20px"> |
||||
<el-input v-model="quesName" placeholder="请输入题目" clearable @keyup.enter="searchQues" /> |
||||
<el-button style="margin-left: 20px" type="primary" @click="searchQues">搜索</el-button> |
||||
</div> |
||||
<el-table :data="quesLit" highlight-current-row height="calc(100vh - 260px)"> |
||||
<el-table-column label="题目" align="left" prop="question" min-width="140" /> |
||||
<el-table-column label="选项" align="left" min-width="140"> |
||||
<template #default="{ row }"> |
||||
<p v-if="row.chooseA">A:{{ row.chooseA }}</p> |
||||
<p v-if="row.chooseB">B:{{ row.chooseB }}</p> |
||||
<p v-if="row.chooseC">C:{{ row.chooseC }}</p> |
||||
<p v-if="row.chooseD">D:{{ row.chooseD }}</p> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="答案" align="center" prop="trueAnswer" width="100" /> |
||||
<el-table-column label="章节" align="center" prop="chapterName" min-width="100" /> |
||||
<el-table-column label="图片" align="center" width="100"> |
||||
<template #default="{ row }"> |
||||
<el-image |
||||
v-if="row.imageUrl" |
||||
:src="`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`" |
||||
:preview-src-list="[`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`]" |
||||
:lazy="true" |
||||
style="width: 80px" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="100px"> |
||||
<template #default="{ row }"> |
||||
<el-button type="primary" link @click="sureAddQues(row)">加入精选</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="SimpleData"> |
||||
import { getJxQuestionList, addJx, delJxData } from '@/api/xjapplet/vipdatabase.js' |
||||
import { searchQuestion } from '@/api/xjapplet/xjdatabase.js' |
||||
|
||||
const props = defineProps({ |
||||
source: { |
||||
type: String, |
||||
default: '1' |
||||
} |
||||
}) |
||||
watch( |
||||
() => props.source, |
||||
(newValue) => { |
||||
queryParams.value.source = newValue |
||||
getQuestionList() |
||||
} |
||||
) |
||||
|
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const queryParams = ref({ |
||||
carTypeId: '1001', |
||||
subject: '1', |
||||
pageNo: 1, |
||||
pageSize: 100 |
||||
}) |
||||
|
||||
const total = ref(0) |
||||
|
||||
const loading = ref(false) |
||||
const tableList = ref([]) |
||||
const showDialog = ref(false) |
||||
const quesName = ref('') |
||||
const quesLit = ref([]) |
||||
|
||||
onMounted(() => { |
||||
getQuestionList() |
||||
}) |
||||
function addMjDetail() { |
||||
showDialog.value = true |
||||
} |
||||
function searchQues() { |
||||
searchQuestion({ |
||||
...queryParams.value, |
||||
pageNo: 1, |
||||
pageSize: 1000, |
||||
question: quesName.value |
||||
}).then((response) => { |
||||
quesLit.value = response.list |
||||
}) |
||||
} |
||||
function takeoutMj(row) { |
||||
message |
||||
.confirm('是否确认将该题移出精选？') |
||||
.then(function () { |
||||
return delJxData(row.id) |
||||
}) |
||||
.then(() => { |
||||
getQuestionList() |
||||
message.success('清空题目成功') |
||||
}) |
||||
.catch(() => {}) |
||||
} |
||||
function getQuestionList() { |
||||
getJxQuestionList(queryParams.value).then((resp) => { |
||||
tableList.value = resp.list |
||||
total.value = resp.total |
||||
}) |
||||
} |
||||
function sureAddQues(row) { |
||||
addJx({ |
||||
questionId: row.questionId, |
||||
carTypeId: queryParams.value.carTypeId, |
||||
subject: queryParams.value.subject |
||||
}) |
||||
.then((resp) => { |
||||
if (resp) { |
||||
message.success('添加成功') |
||||
getQuestionList() |
||||
} |
||||
}) |
||||
.catch(() => {}) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,30 @@ |
||||
<template> |
||||
<el-tabs v-model="source" @tab-click="handleChangeSource"> |
||||
<el-tab-pane v-for="item in sourceOptions" :key="item.key" :label="item.label" :name="item.key"> |
||||
<el-tabs v-model="tabIndex" tab-position="left" style="height: 400px" class="profile-tabs"> |
||||
<el-tab-pane label="精选题" :name="1" v-if="checkPermi(['question:vip-data:jx'])"> |
||||
<SimpleData v-if="tabIndex == 1" :source="source" /> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="密卷" :name="2" v-if="checkPermi(['question:vip-data:mj'])"> |
||||
<SecretData v-if="tabIndex == 2" :source="source" /> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</template> |
||||
|
||||
<script setup name="VipData"> |
||||
import { checkPermi } from '@/utils/permission' |
||||
import SimpleData from './conponents/SimpleData.vue' |
||||
import SecretData from './conponents/SecretData.vue' |
||||
|
||||
const tabIndex = ref(1) |
||||
const source = ref('1') |
||||
const sourceOptions = [ |
||||
{ key: '1', label: '驾考精灵' }, |
||||
{ key: '2', label: '驾校一点通' } |
||||
] |
||||
const handleChangeSource = () => {} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue