file:新增艺考资讯模块
This commit is contained in:
ll
parent
74d86fdcd1
commit
aebe97891a
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="添加资讯文章"
|
||||
width="900px"
|
||||
@closed="closeDialog"
|
||||
@open="openDialog"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章标题"
|
||||
prop="info_article_title"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.info_article_title"
|
||||
type="text"
|
||||
placeholder="请输入文章标题"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章封面"
|
||||
prop="info_article_cover"
|
||||
>
|
||||
<UploadImage
|
||||
ref="uploadRef"
|
||||
v-model="formData.info_article_cover"
|
||||
:data="uoloadData"
|
||||
:limit="1"
|
||||
:fileSize="5"
|
||||
:drag="true"
|
||||
:isShowTip="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章内容"
|
||||
prop="info_article_content"
|
||||
>
|
||||
<RichText
|
||||
v-model="formData.info_article_content"
|
||||
:min-height="196"
|
||||
></RichText>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章排序"
|
||||
prop="info_article_order"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.info_article_order"
|
||||
controls-position="right"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleAddClick(formRef)"
|
||||
>添加</el-button
|
||||
>
|
||||
<el-button @click="handleResetClick(formRef)">重置</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { addinfoArticle } from '~/service/info_article';
|
||||
import { useLoginStore } from '~/store';
|
||||
|
||||
// --业务参数
|
||||
|
||||
// --业务方法
|
||||
|
||||
// --基础参数
|
||||
const store = useLoginStore();
|
||||
const headers = {
|
||||
Accept: 'application/json',
|
||||
...store.headers
|
||||
};
|
||||
|
||||
const formRef = ref();
|
||||
const labelWidth = 90;
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
done: Function
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
const dialogVisible = ref(props.modelValue);
|
||||
const formData = reactive({});
|
||||
|
||||
const uoloadData = ref({
|
||||
dirName: 'infoArticle'
|
||||
});
|
||||
|
||||
watch(props, v => {
|
||||
dialogVisible.value = v.modelValue;
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
info_article_title: [
|
||||
{
|
||||
required: true,
|
||||
message: '文章标题不能为空'
|
||||
}
|
||||
],
|
||||
info_article_cover: [
|
||||
{
|
||||
required: true,
|
||||
message: '文章封面不能为空'
|
||||
}
|
||||
],
|
||||
info_article_content: [
|
||||
{
|
||||
required: true,
|
||||
message: '文章内容不能为空'
|
||||
}
|
||||
],
|
||||
info_article_order: [
|
||||
{
|
||||
required: true,
|
||||
message: '文章排序不能为空'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// --基础方法
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {};
|
||||
|
||||
const closeDialog = () => {
|
||||
handleResetClick(formRef.value);
|
||||
dialogVisible.value = false;
|
||||
emits('update:modelValue', false);
|
||||
};
|
||||
|
||||
const handleAddClick = async formEl => {
|
||||
console.log(formData);
|
||||
if (!formEl) return;
|
||||
formEl.validate(async valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { code } = await addinfoArticle(formData);
|
||||
if (code == 0) {
|
||||
closeDialog();
|
||||
props.done();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleResetClick = async formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="props.modelValue"
|
||||
title="资讯文章详情"
|
||||
width="900px"
|
||||
@closed="closeDialog"
|
||||
@open="openDialog"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :disabled="true">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章标题"
|
||||
prop="info_article_title"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.info_article_title"
|
||||
type="text"
|
||||
placeholder="请输入文章标题"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章封面"
|
||||
prop="info_article_cover"
|
||||
>
|
||||
<UploadImage
|
||||
ref="uploadRef"
|
||||
v-model="formData.info_article_cover"
|
||||
:data="uoloadData"
|
||||
:limit="1"
|
||||
:fileSize="5"
|
||||
:drag="true"
|
||||
:isShowTip="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章内容"
|
||||
prop="info_article_content"
|
||||
>
|
||||
<RichText
|
||||
v-model="formData.info_article_content"
|
||||
:min-height="196"
|
||||
></RichText>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章排序"
|
||||
prop="info_article_order"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.info_article_order"
|
||||
controls-position="right"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { isEmptyObject } from '~/utils/index';
|
||||
|
||||
// --业务参数
|
||||
|
||||
// --业务方法
|
||||
|
||||
// --基础参数
|
||||
const formRef = ref();
|
||||
const labelWidth = 100;
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
data: Object,
|
||||
done: Function
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
const formData = ref({
|
||||
...props.data
|
||||
});
|
||||
|
||||
// --基础方法
|
||||
watch(props, v => {
|
||||
formData.value = v.data;
|
||||
});
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {};
|
||||
|
||||
const closeDialog = () => {
|
||||
emits('update:modelValue', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="props.modelValue"
|
||||
title="编辑资讯文章"
|
||||
width="900px"
|
||||
@closed="closeDialog"
|
||||
@open="openDialog"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章标题"
|
||||
prop="info_article_title"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.info_article_title"
|
||||
type="text"
|
||||
placeholder="请输入文章标题"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章封面"
|
||||
prop="info_article_cover"
|
||||
>
|
||||
<UploadImage
|
||||
ref="uploadRef"
|
||||
v-model="formData.info_article_cover"
|
||||
:data="uoloadData"
|
||||
:limit="1"
|
||||
:fileSize="5"
|
||||
:drag="true"
|
||||
:isShowTip="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章内容"
|
||||
prop="info_article_content"
|
||||
>
|
||||
<RichText
|
||||
v-model="formData.info_article_content"
|
||||
:min-height="196"
|
||||
></RichText>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="文章排序"
|
||||
prop="info_article_order"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.info_article_order"
|
||||
controls-position="right"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleEditClick(formRef)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button @click="handleResetClick(formRef)">重置</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { editinfoArticle } from '~/service/info_article';
|
||||
import { useLoginStore } from '~/store';
|
||||
|
||||
// --业务参数
|
||||
|
||||
// --业务方法
|
||||
|
||||
// --基础参数
|
||||
const store = useLoginStore();
|
||||
const headers = {
|
||||
Accept: 'application/json',
|
||||
...store.headers
|
||||
};
|
||||
const formRef = ref();
|
||||
const labelWidth = 100;
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
data: Object,
|
||||
done: Function
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
const formData = ref({
|
||||
...props.data
|
||||
});
|
||||
const uoloadData = ref({
|
||||
dirName: 'infoArticle'
|
||||
});
|
||||
|
||||
// --基础方法
|
||||
watch(props, v => {
|
||||
formData.value = v.data;
|
||||
});
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {};
|
||||
|
||||
const closeDialog = () => {
|
||||
props.done();
|
||||
emits('update:modelValue', false);
|
||||
};
|
||||
|
||||
const rules = reactive({
|
||||
info_article_title: [
|
||||
{
|
||||
required: true,
|
||||
message: '文章标题不能为空'
|
||||
}
|
||||
],
|
||||
info_article_cover: [
|
||||
{
|
||||
required: true,
|
||||
message: '文章封面不能为空'
|
||||
}
|
||||
],
|
||||
info_article_content: [
|
||||
{
|
||||
required: true,
|
||||
message: '文章内容不能为空'
|
||||
}
|
||||
],
|
||||
info_article_order: [
|
||||
{
|
||||
required: true,
|
||||
message: '文章排序不能为空'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const handleEditClick = async formEl => {
|
||||
console.log(formData.value);
|
||||
if (!formEl) return;
|
||||
formEl.validate(async valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { code } = await editinfoArticle(formData.value);
|
||||
if (code == 0) {
|
||||
closeDialog();
|
||||
props.done();
|
||||
}
|
||||
});
|
||||
};
|
||||
const handleResetClick = async formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
257
src/pages/index/examination_information/info_article/index.vue
Normal file
257
src/pages/index/examination_information/info_article/index.vue
Normal file
@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<!-- 面包屑 -->
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>艺考资讯</el-breadcrumb-item>
|
||||
<el-breadcrumb-item to="/info_article/list"
|
||||
>资讯文章</el-breadcrumb-item
|
||||
>
|
||||
</el-breadcrumb>
|
||||
<!-- 搜索 -->
|
||||
<el-form inline :model="params">
|
||||
<el-form-item label="文章标题">
|
||||
<el-input
|
||||
v-model="params.info_article_title"
|
||||
placeholder="请输入文章标题"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
|
||||
搜索
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-space style="margin-bottom: 10px">
|
||||
<!-- 添加资讯文章 -->
|
||||
<el-col :span="1">
|
||||
<el-button type="primary" @click="addinfoArticleDialogVisible = true">
|
||||
添加
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<!-- 导入 -->
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="importExcel"
|
||||
:headers="headers"
|
||||
:on-success="handleExcelSuccess"
|
||||
:on-progress="uploadLoading"
|
||||
:on-error="closeUploadLoading"
|
||||
style="margin-left: 10px"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-button type="primary">导入</el-button>
|
||||
</el-upload>
|
||||
|
||||
<!-- 下载导入模板 -->
|
||||
<el-button icon="ElIconDownload" @click="downloadTemplate()"
|
||||
>下载导入模板</el-button
|
||||
>
|
||||
|
||||
<!-- 导出 -->
|
||||
<el-button icon="ElIconDocument" @click="exportExcel(params)"
|
||||
>导出</el-button
|
||||
>
|
||||
|
||||
<!-- 下拉操作 -->
|
||||
<el-dropdown v-if="selectionData.length">
|
||||
<el-button type="primary">
|
||||
批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="handleDelete(selectionData)">
|
||||
批量删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-space>
|
||||
<!-- 数据表格 -->
|
||||
<DataTable
|
||||
ref="tableRef"
|
||||
style="width: 100%"
|
||||
:onSelectionChange="data => (selectionData = data)"
|
||||
:column="column"
|
||||
:params="params"
|
||||
:request="params => getinfoArticleList(params)"
|
||||
>
|
||||
<template #info_article_cover="scope">
|
||||
<el-image
|
||||
v-if="scope.row.info_article_cover"
|
||||
:src="scope.row.info_article_cover.split(',')[0]"
|
||||
lazy
|
||||
:preview-src-list="scope.row.info_article_cover.split(',')"
|
||||
:preview-teleported="true"
|
||||
:hide-on-click-modal="true"
|
||||
fit="contain"
|
||||
class="el-avatar"
|
||||
></el-image>
|
||||
<template v-else>暂无图片</template>
|
||||
</template>
|
||||
|
||||
<template #chaoz="scope">
|
||||
<el-space>
|
||||
<el-button size="small" @click="handleUpdate(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<el-button type="primary" size="small">
|
||||
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :command="{ type: 'detail', row: scope.row }">
|
||||
详情
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="{ type: 'delete', row: scope.row }">
|
||||
删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-space>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<!-- 添加资讯文章 -->
|
||||
<AddinfoArticleDialog
|
||||
v-model="addinfoArticleDialogVisible"
|
||||
:done="() => tableRef.reload()"
|
||||
></AddinfoArticleDialog>
|
||||
<!-- 编辑资讯文章 -->
|
||||
<EditinfoArticleDialog
|
||||
v-model="EditinfoArticleDialogVisible"
|
||||
:data="EditinfoArticleDialogRow"
|
||||
:done="() => tableRef.reload()"
|
||||
></EditinfoArticleDialog>
|
||||
<!-- 资讯文章详情 -->
|
||||
<DetailinfoArticleDialog
|
||||
v-model="DetailinfoArticleDialogVisible"
|
||||
:data="DetailinfoArticleDialogRow"
|
||||
></DetailinfoArticleDialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ArrowDown } from '@element-plus/icons-vue';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useLoginStore } from '~/store';
|
||||
import {
|
||||
getinfoArticleList,
|
||||
deleteinfoArticle,
|
||||
downloadTemplate,
|
||||
importExcel,
|
||||
exportExcel
|
||||
} from '~/service/info_article';
|
||||
import AddinfoArticleDialog from './components/AddinfoArticleDialog.vue';
|
||||
import EditinfoArticleDialog from './components/EditinfoArticleDialog.vue';
|
||||
import DetailinfoArticleDialog from './components/DetailinfoArticleDialog.vue';
|
||||
|
||||
const tableRef = ref();
|
||||
const selectionData = ref([]);
|
||||
const store = useLoginStore();
|
||||
|
||||
const addinfoArticleDialogVisible = ref(false);
|
||||
const EditinfoArticleDialogVisible = ref(false);
|
||||
const EditinfoArticleDialogRow = ref({});
|
||||
const DetailinfoArticleDialogVisible = ref(false);
|
||||
const DetailinfoArticleDialogRow = ref({});
|
||||
|
||||
const headers = {
|
||||
Accept: 'application/json',
|
||||
...store.headers
|
||||
};
|
||||
|
||||
// 查询参数
|
||||
const params = reactive({
|
||||
info_article_title: ''
|
||||
});
|
||||
const column = [
|
||||
{
|
||||
fixed: true,
|
||||
type: 'selection'
|
||||
},
|
||||
{
|
||||
prop: 'info_article_order',
|
||||
label: '文章排序',
|
||||
width: '150'
|
||||
},
|
||||
{
|
||||
prop: 'info_article_title',
|
||||
label: '文章标题',
|
||||
width: '150'
|
||||
},
|
||||
{
|
||||
prop: 'info_article_cover',
|
||||
label: '文章封面',
|
||||
width: '150'
|
||||
},
|
||||
{
|
||||
prop: 'info_article_content',
|
||||
label: '文章内容',
|
||||
width: '150'
|
||||
},
|
||||
|
||||
{
|
||||
label: '操作',
|
||||
prop: 'chaoz',
|
||||
width: '250'
|
||||
}
|
||||
];
|
||||
|
||||
const handleCommand = ({ type, row }) => {
|
||||
switch (type) {
|
||||
case 'detail':
|
||||
handleDetail(row);
|
||||
break;
|
||||
case 'delete':
|
||||
handleDelete([row]);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 删除数据
|
||||
const handleDelete = data => {
|
||||
ElMessageBox.confirm(`您确定要删除该资讯文章吗？`).then(async () => {
|
||||
const res = await deleteinfoArticle({
|
||||
info_article_guid: data.map(v => v.info_article_guid).join()
|
||||
});
|
||||
if (res) {
|
||||
tableRef.value.reload();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 修改
|
||||
function handleUpdate(row) {
|
||||
EditinfoArticleDialogVisible.value = true;
|
||||
EditinfoArticleDialogRow.value = row;
|
||||
}
|
||||
|
||||
// 详情
|
||||
function handleDetail(row) {
|
||||
DetailinfoArticleDialogVisible.value = true;
|
||||
DetailinfoArticleDialogRow.value = row;
|
||||
}
|
||||
|
||||
// 导入方法
|
||||
let loadingImoprt = null;
|
||||
const uploadLoading = () => {
|
||||
loadingImoprt = ElLoading.service({
|
||||
lock: true,
|
||||
text: '正在导入中...',
|
||||
background: 'rgba(255, 255, 255, 0.7)'
|
||||
});
|
||||
};
|
||||
const closeUploadLoading = () => loadingImoprt.close();
|
||||
const handleExcelSuccess = value => {
|
||||
if (value.code == 0) {
|
||||
ElMessageBox.alert(value.msg, '导入信息', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
confirmButtonText: '确定'
|
||||
});
|
||||
} else {
|
||||
ElMessage.error(value.msg);
|
||||
}
|
||||
closeUploadLoading();
|
||||
tableRef.value.reload();
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="添加资讯文章类型"
|
||||
width="900px"
|
||||
@closed="closeDialog"
|
||||
@open="openDialog"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="资讯类型名称"
|
||||
prop="info_article_type_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.info_article_type_name"
|
||||
type="text"
|
||||
placeholder="请输入资讯类型名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="资讯类型排序"
|
||||
prop="info_article_type_sort"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.info_article_type_sort"
|
||||
controls-position="right"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleAddClick(formRef)"
|
||||
>添加</el-button
|
||||
>
|
||||
<el-button @click="handleResetClick(formRef)">重置</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { addinfoArticleType } from '~/service/info_article_type';
|
||||
import { useLoginStore } from '~/store';
|
||||
|
||||
// --业务参数
|
||||
|
||||
// --业务方法
|
||||
|
||||
// --基础参数
|
||||
const store = useLoginStore();
|
||||
const headers = {
|
||||
Accept: 'application/json',
|
||||
...store.headers
|
||||
};
|
||||
|
||||
const formRef = ref();
|
||||
const labelWidth = 90;
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
done: Function
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
const dialogVisible = ref(props.modelValue);
|
||||
const formData = reactive({});
|
||||
|
||||
const uoloadData = ref({
|
||||
dirName: 'infoArticleType'
|
||||
});
|
||||
|
||||
watch(props, v => {
|
||||
dialogVisible.value = v.modelValue;
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
info_article_type_name: [
|
||||
{
|
||||
required: true,
|
||||
message: '资讯类型名称不能为空'
|
||||
}
|
||||
],
|
||||
info_article_type_sort: [
|
||||
{
|
||||
required: true,
|
||||
message: '资讯类型排序不能为空'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// --基础方法
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {};
|
||||
|
||||
const closeDialog = () => {
|
||||
handleResetClick(formRef.value);
|
||||
dialogVisible.value = false;
|
||||
emits('update:modelValue', false);
|
||||
};
|
||||
|
||||
const handleAddClick = async formEl => {
|
||||
console.log(formData);
|
||||
if (!formEl) return;
|
||||
formEl.validate(async valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { code } = await addinfoArticleType(formData);
|
||||
if (code == 0) {
|
||||
closeDialog();
|
||||
props.done();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleResetClick = async formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="props.modelValue"
|
||||
title="资讯文章类型详情"
|
||||
width="900px"
|
||||
@closed="closeDialog"
|
||||
@open="openDialog"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :disabled="true">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="资讯类型名称"
|
||||
prop="info_article_type_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.info_article_type_name"
|
||||
type="text"
|
||||
placeholder="请输入资讯类型名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="资讯类型排序"
|
||||
prop="info_article_type_sort"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.info_article_type_sort"
|
||||
controls-position="right"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { isEmptyObject } from '~/utils/index';
|
||||
|
||||
// --业务参数
|
||||
|
||||
// --业务方法
|
||||
|
||||
// --基础参数
|
||||
const formRef = ref();
|
||||
const labelWidth = 100;
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
data: Object,
|
||||
done: Function
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
const formData = ref({
|
||||
...props.data
|
||||
});
|
||||
|
||||
// --基础方法
|
||||
watch(props, v => {
|
||||
formData.value = v.data;
|
||||
});
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {};
|
||||
|
||||
const closeDialog = () => {
|
||||
emits('update:modelValue', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="props.modelValue"
|
||||
title="编辑资讯文章类型"
|
||||
width="900px"
|
||||
@closed="closeDialog"
|
||||
@open="openDialog"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="资讯类型名称"
|
||||
prop="info_article_type_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.info_article_type_name"
|
||||
type="text"
|
||||
placeholder="请输入资讯类型名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label-width="labelWidth"
|
||||
label="资讯类型排序"
|
||||
prop="info_article_type_sort"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.info_article_type_sort"
|
||||
controls-position="right"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleEditClick(formRef)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button @click="handleResetClick(formRef)">重置</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { editinfoArticleType } from '~/service/info_article_type';
|
||||
import { useLoginStore } from '~/store';
|
||||
|
||||
// --业务参数
|
||||
|
||||
// --业务方法
|
||||
|
||||
// --基础参数
|
||||
const store = useLoginStore();
|
||||
const headers = {
|
||||
Accept: 'application/json',
|
||||
...store.headers
|
||||
};
|
||||
const formRef = ref();
|
||||
const labelWidth = 100;
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
data: Object,
|
||||
done: Function
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
const formData = ref({
|
||||
...props.data
|
||||
});
|
||||
const uoloadData = ref({
|
||||
dirName: 'infoArticleType'
|
||||
});
|
||||
|
||||
// --基础方法
|
||||
watch(props, v => {
|
||||
formData.value = v.data;
|
||||
});
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {};
|
||||
|
||||
const closeDialog = () => {
|
||||
props.done();
|
||||
emits('update:modelValue', false);
|
||||
};
|
||||
|
||||
const rules = reactive({
|
||||
info_article_type_name: [
|
||||
{
|
||||
required: true,
|
||||
message: '资讯类型名称不能为空'
|
||||
}
|
||||
],
|
||||
info_article_type_sort: [
|
||||
{
|
||||
required: true,
|
||||
message: '资讯类型排序不能为空'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const handleEditClick = async formEl => {
|
||||
console.log(formData.value);
|
||||
if (!formEl) return;
|
||||
formEl.validate(async valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { code } = await editinfoArticleType(formData.value);
|
||||
if (code == 0) {
|
||||
closeDialog();
|
||||
props.done();
|
||||
}
|
||||
});
|
||||
};
|
||||
const handleResetClick = async formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<!-- 面包屑 -->
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>艺考资讯</el-breadcrumb-item>
|
||||
<el-breadcrumb-item to="/info_article_type/list"
|
||||
>资讯文章类型</el-breadcrumb-item
|
||||
>
|
||||
</el-breadcrumb>
|
||||
<!-- 搜索 -->
|
||||
|
||||
<el-space style="margin-bottom: 10px">
|
||||
<!-- 添加资讯文章类型 -->
|
||||
<el-col :span="1">
|
||||
<el-button type="primary" @click="addinfoArticleTypeDialogVisible = true">
|
||||
添加
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<!-- 导出 -->
|
||||
<el-button icon="ElIconDocument" @click="exportExcel(params)"
|
||||
>导出</el-button
|
||||
>
|
||||
|
||||
<!-- 导入 -->
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="importExcel"
|
||||
:headers="headers"
|
||||
:on-success="handleExcelSuccess"
|
||||
:on-progress="uploadLoading"
|
||||
:on-error="closeUploadLoading"
|
||||
style="margin-left: 10px"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-button type="primary">导入</el-button>
|
||||
</el-upload>
|
||||
|
||||
<!-- 下载导入模板 -->
|
||||
<el-button icon="ElIconDownload" @click="downloadTemplate()"
|
||||
>下载导入模板</el-button
|
||||
>
|
||||
|
||||
<!-- 下拉操作 -->
|
||||
<el-dropdown v-if="selectionData.length">
|
||||
<el-button type="primary">
|
||||
批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="handleDelete(selectionData)">
|
||||
批量删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-space>
|
||||
<!-- 数据表格 -->
|
||||
<DataTable
|
||||
ref="tableRef"
|
||||
style="width: 100%"
|
||||
:onSelectionChange="data => (selectionData = data)"
|
||||
:column="column"
|
||||
:params="params"
|
||||
:request="params => getinfoArticleTypeList(params)"
|
||||
>
|
||||
<template #chaoz="scope">
|
||||
<el-space>
|
||||
<el-button size="small" @click="handleUpdate(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<el-button type="primary" size="small">
|
||||
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item :command="{ type: 'detail', row: scope.row }">
|
||||
详情
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="{ type: 'delete', row: scope.row }">
|
||||
删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-space>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<!-- 添加资讯文章类型 -->
|
||||
<AddinfoArticleTypeDialog
|
||||
v-model="addinfoArticleTypeDialogVisible"
|
||||
:done="() => tableRef.reload()"
|
||||
></AddinfoArticleTypeDialog>
|
||||
<!-- 编辑资讯文章类型 -->
|
||||
<EditinfoArticleTypeDialog
|
||||
v-model="EditinfoArticleTypeDialogVisible"
|
||||
:data="EditinfoArticleTypeDialogRow"
|
||||
:done="() => tableRef.reload()"
|
||||
></EditinfoArticleTypeDialog>
|
||||
<!-- 资讯文章类型详情 -->
|
||||
<DetailinfoArticleTypeDialog
|
||||
v-model="DetailinfoArticleTypeDialogVisible"
|
||||
:data="DetailinfoArticleTypeDialogRow"
|
||||
></DetailinfoArticleTypeDialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ArrowDown } from '@element-plus/icons-vue';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useLoginStore } from '~/store';
|
||||
import {
|
||||
getinfoArticleTypeList,
|
||||
deleteinfoArticleType,
|
||||
exportExcel,
|
||||
downloadTemplate,
|
||||
importExcel
|
||||
} from '~/service/info_article_type';
|
||||
import AddinfoArticleTypeDialog from './components/AddinfoArticleTypeDialog.vue';
|
||||
import EditinfoArticleTypeDialog from './components/EditinfoArticleTypeDialog.vue';
|
||||
import DetailinfoArticleTypeDialog from './components/DetailinfoArticleTypeDialog.vue';
|
||||
|
||||
const tableRef = ref();
|
||||
const selectionData = ref([]);
|
||||
const store = useLoginStore();
|
||||
|
||||
const addinfoArticleTypeDialogVisible = ref(false);
|
||||
const EditinfoArticleTypeDialogVisible = ref(false);
|
||||
const EditinfoArticleTypeDialogRow = ref({});
|
||||
const DetailinfoArticleTypeDialogVisible = ref(false);
|
||||
const DetailinfoArticleTypeDialogRow = ref({});
|
||||
|
||||
const headers = {
|
||||
Accept: 'application/json',
|
||||
...store.headers
|
||||
};
|
||||
|
||||
// 查询参数
|
||||
const params = reactive({});
|
||||
const column = [
|
||||
{
|
||||
fixed: true,
|
||||
type: 'selection'
|
||||
},
|
||||
{
|
||||
prop: 'info_article_type_sort',
|
||||
label: '资讯类型排序',
|
||||
width: '150'
|
||||
},
|
||||
{
|
||||
prop: 'info_article_type_name',
|
||||
label: '资讯类型名称',
|
||||
width: '150'
|
||||
},
|
||||
|
||||
{
|
||||
label: '操作',
|
||||
prop: 'chaoz',
|
||||
width: '250'
|
||||
}
|
||||
];
|
||||
|
||||
const handleCommand = ({ type, row }) => {
|
||||
switch (type) {
|
||||
case 'detail':
|
||||
handleDetail(row);
|
||||
break;
|
||||
case 'delete':
|
||||
handleDelete([row]);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 删除数据
|
||||
const handleDelete = data => {
|
||||
ElMessageBox.confirm(`您确定要删除该资讯文章类型吗？`).then(async () => {
|
||||
const res = await deleteinfoArticleType({
|
||||
info_article_type_guid: data.map(v => v.info_article_type_guid).join()
|
||||
});
|
||||
if (res) {
|
||||
tableRef.value.reload();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 修改
|
||||
function handleUpdate(row) {
|
||||
EditinfoArticleTypeDialogVisible.value = true;
|
||||
EditinfoArticleTypeDialogRow.value = row;
|
||||
}
|
||||
|
||||
// 详情
|
||||
function handleDetail(row) {
|
||||
DetailinfoArticleTypeDialogVisible.value = true;
|
||||
DetailinfoArticleTypeDialogRow.value = row;
|
||||
}
|
||||
|
||||
// 导入方法
|
||||
let loadingImoprt = null;
|
||||
const uploadLoading = () => {
|
||||
loadingImoprt = ElLoading.service({
|
||||
lock: true,
|
||||
text: '正在导入中...',
|
||||
background: 'rgba(255, 255, 255, 0.7)'
|
||||
});
|
||||
};
|
||||
const closeUploadLoading = () => loadingImoprt.close();
|
||||
const handleExcelSuccess = value => {
|
||||
if (value.code == 0) {
|
||||
ElMessageBox.alert(value.msg, '导入信息', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
confirmButtonText: '确定'
|
||||
});
|
||||
} else {
|
||||
ElMessage.error(value.msg);
|
||||
}
|
||||
closeUploadLoading();
|
||||
tableRef.value.reload();
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user