init 删除多余的
This commit is contained in:
parent
13b4d9bfff
commit
c3eae73c8e
@ -1,205 +0,0 @@
|
||||
<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="12">
|
||||
<el-form-item :label-width="labelWidth" label="新闻类型" prop="news_type">
|
||||
<el-select v-model="formData.news_type" clearable placeholder="请选择">
|
||||
<el-option v-for="item in news_type" :key="item.dictionary_guid" :label="item.dictionary_name"
|
||||
:value="item.dictionary_value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="新闻标题" prop="news_title">
|
||||
<el-input v-model='formData.news_title' type="text" placeholder='请输入新闻标题'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='24'>
|
||||
<el-form-item :label-width='labelWidth' label='新闻封面' prop='news_cover'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.news_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="news_intro">
|
||||
<el-input v-model='formData.news_intro' type="textarea" :rows="5" placeholder='请输入新闻简介'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="文章来源" prop="news_source">
|
||||
<el-input v-model='formData.news_source' type="text" placeholder='请输入文章来源'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="跳转链接" prop="news_link">
|
||||
<el-input v-model='formData.news_link' type="text" placeholder='请输入跳转链接'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="发布日期" prop="news_issue_date">
|
||||
<el-date-picker v-model="formData.news_issue_date" type="date" value-format="YYYY-MM-DD" placeholder="发布日期" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="浏览次数" prop="news_views_num">
|
||||
<el-input-number v-model='formData.news_views_num' controls-position='right' :min='0'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="新闻排序" prop="news_sort">
|
||||
<el-input-number v-model='formData.news_sort' controls-position='right' :min='1'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="新闻内容" prop="news_content">
|
||||
<div class="copy-btn-box">
|
||||
<el-button @click="handleCopyRichText" class="copy-btn">获取富文本内容</el-button>
|
||||
</div>
|
||||
<RichText v-model='formData.news_content' :min-height='196'></RichText>
|
||||
</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 { addNews, getDictionary } from "~/service/news";
|
||||
import { useLoginStore } from "~/store";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
// --业务参数
|
||||
|
||||
|
||||
|
||||
// --业务方法
|
||||
|
||||
// 字典获取
|
||||
const news_type = ref([]);
|
||||
async function get_news_type() {
|
||||
await getDictionary({ dictionary_value: 'news_type' }).then((res) => {
|
||||
news_type.value = res
|
||||
})
|
||||
}
|
||||
|
||||
// 复制富文本内容
|
||||
async function handleCopyRichText() {
|
||||
let text = await navigator.clipboard.writeText(formData.news_content);
|
||||
ElMessage.success("富文本内容复制成功")
|
||||
}
|
||||
|
||||
|
||||
|
||||
// --基础参数
|
||||
const store = useLoginStore();
|
||||
const headers = {
|
||||
Accept: "application/json",
|
||||
...store.headers,
|
||||
};
|
||||
|
||||
const isBtnLod = ref(false);
|
||||
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: "News"
|
||||
})
|
||||
|
||||
watch(props, (v) => {
|
||||
dialogVisible.value = v.modelValue;
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
news_type: [
|
||||
{
|
||||
required: true,
|
||||
message: '新闻类型不能为空'
|
||||
}
|
||||
],
|
||||
news_title: [
|
||||
{
|
||||
required: true,
|
||||
message: '新闻标题不能为空'
|
||||
}
|
||||
],
|
||||
news_cover: [
|
||||
{
|
||||
required: true,
|
||||
message: '新闻封面不能为空'
|
||||
}
|
||||
],
|
||||
news_sort: [
|
||||
{
|
||||
required: true,
|
||||
message: '新闻排序不能为空'
|
||||
}
|
||||
],
|
||||
|
||||
});
|
||||
|
||||
|
||||
// --基础方法
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {
|
||||
get_news_type()
|
||||
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
handleResetClick(formRef.value);
|
||||
dialogVisible.value = false;
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const handleAddClick = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
isBtnLod.value = true;
|
||||
|
||||
|
||||
const { code } = await addNews(formData);
|
||||
if (code == 0) {
|
||||
closeDialog();
|
||||
props.done();
|
||||
}
|
||||
isBtnLod.value = flase;
|
||||
});
|
||||
};
|
||||
|
||||
const handleResetClick = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.copy-btn-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,134 +0,0 @@
|
||||
<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="12">
|
||||
<el-form-item :label-width="labelWidth" label="新闻类型" prop="news_type">
|
||||
<el-select v-model="formData.news_type" clearable>
|
||||
<el-option v-for="item in news_type" :key="item.dictionary_guid" :label="item.dictionary_name"
|
||||
:value="item.dictionary_value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="新闻标题" prop="news_title">
|
||||
<el-input v-model='formData.news_title' type="text"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='24'>
|
||||
<el-form-item :label-width='labelWidth' label='新闻封面' prop='news_cover'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.news_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="news_intro">
|
||||
<el-input v-model='formData.news_intro' type="textarea" :rows="5"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="文章来源" prop="news_source">
|
||||
<el-input v-model='formData.news_source' type="text"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="跳转链接" prop="news_link">
|
||||
<el-input v-model='formData.news_link' type="text"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="发布日期" prop="news_issue_date">
|
||||
<el-date-picker v-model="formData.news_issue_date" type="date" value-format="YYYY-MM-DD" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="浏览次数" prop="news_views_num">
|
||||
<el-input-number v-model='formData.news_views_num' controls-position='right' :min='0'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="新闻排序" prop="news_sort">
|
||||
<el-input-number v-model='formData.news_sort' controls-position='right' :min='1'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="新闻内容" prop="news_content">
|
||||
<!-- <div class="copy-btn-box">
|
||||
<el-button @click="handleCopyRichText" class="copy-btn" >获取富文本内容</el-button>
|
||||
</div> -->
|
||||
<RichText v-model='formData.news_content' :min-height='196'></RichText>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { getDictionary } from '~/service/news';
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = async () => {
|
||||
|
||||
await get_news_type()
|
||||
|
||||
};
|
||||
|
||||
// --业务参数
|
||||
|
||||
|
||||
|
||||
// --业务方法
|
||||
|
||||
// 字典获取
|
||||
const news_type = ref([]);
|
||||
async function get_news_type() {
|
||||
await getDictionary({ dictionary_value: 'news_type' }).then((res) => {
|
||||
news_type.value = res
|
||||
})
|
||||
}
|
||||
|
||||
// 复制富文本内容
|
||||
async function handleCopyRichText() {
|
||||
let text = await navigator.clipboard.writeText(formData.news_content);
|
||||
ElMessage.success("富文本内容复制成功")
|
||||
}
|
||||
|
||||
// --基础参数
|
||||
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 closeDialog = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.copy-btn-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,202 +0,0 @@
|
||||
<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="12">
|
||||
<el-form-item :label-width="labelWidth" label="新闻类型" prop="news_type">
|
||||
<el-select v-model="formData.news_type" clearable placeholder="请选择">
|
||||
<el-option v-for="item in news_type" :key="item.dictionary_guid" :label="item.dictionary_name"
|
||||
:value="item.dictionary_value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="新闻标题" prop="news_title">
|
||||
<el-input v-model='formData.news_title' type="text" placeholder='请输入新闻标题'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='24'>
|
||||
<el-form-item :label-width='labelWidth' label='新闻封面' prop='news_cover'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.news_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="news_intro">
|
||||
<el-input v-model='formData.news_intro' type="textarea" :rows="5" placeholder='请输入新闻简介'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="文章来源" prop="news_source">
|
||||
<el-input v-model='formData.news_source' type="text" placeholder='请输入文章来源'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="跳转链接" prop="news_link">
|
||||
<el-input v-model='formData.news_link' type="text" placeholder='请输入跳转链接'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="发布日期" prop="news_issue_date">
|
||||
<el-date-picker v-model="formData.news_issue_date" type="date" value-format="YYYY-MM-DD" placeholder="发布日期" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="浏览次数" prop="news_views_num">
|
||||
<el-input-number v-model='formData.news_views_num' controls-position='right' :min='0'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="新闻排序" prop="news_sort">
|
||||
<el-input-number v-model='formData.news_sort' controls-position='right' :min='1'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="新闻内容" prop="news_content">
|
||||
<div class="copy-btn-box">
|
||||
<el-button @click="handleCopyRichText" class="copy-btn">获取富文本内容</el-button>
|
||||
</div>
|
||||
<RichText v-model='formData.news_content' :min-height='196'></RichText>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleEditClick(formRef)" :loading="isBtnLod">编辑</el-button>
|
||||
<el-button @click="handleResetClick(formRef)">重置</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { editNews, getDictionary } from "~/service/news";
|
||||
import { useLoginStore } from "~/store";
|
||||
|
||||
// --业务参数
|
||||
|
||||
|
||||
|
||||
// --业务方法
|
||||
|
||||
// 字典获取
|
||||
const news_type = ref([]);
|
||||
async function get_news_type() {
|
||||
await getDictionary({ dictionary_value: 'news_type' }).then((res) => {
|
||||
news_type.value = res
|
||||
})
|
||||
}
|
||||
|
||||
// 复制富文本内容
|
||||
async function handleCopyRichText() {
|
||||
let text = await navigator.clipboard.writeText(formData.news_content);
|
||||
ElMessage.success("富文本内容复制成功")
|
||||
}
|
||||
|
||||
|
||||
// --基础参数
|
||||
const store = useLoginStore();
|
||||
const headers = {
|
||||
Accept: "application/json",
|
||||
...store.headers,
|
||||
};
|
||||
const isBtnLod = ref(false);
|
||||
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: "News"
|
||||
})
|
||||
|
||||
|
||||
// --基础方法
|
||||
watch(props, (v) => {
|
||||
formData.value = v.data;
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {
|
||||
get_news_type()
|
||||
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
props.done();
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const rules = reactive({
|
||||
news_type: [
|
||||
{
|
||||
required: true,
|
||||
message: '新闻类型不能为空'
|
||||
}
|
||||
],
|
||||
news_title: [
|
||||
{
|
||||
required: true,
|
||||
message: '新闻标题不能为空'
|
||||
}
|
||||
],
|
||||
news_cover: [
|
||||
{
|
||||
required: true,
|
||||
message: '新闻封面不能为空'
|
||||
}
|
||||
],
|
||||
news_sort: [
|
||||
{
|
||||
required: true,
|
||||
message: '新闻排序不能为空'
|
||||
}
|
||||
],
|
||||
|
||||
});
|
||||
|
||||
const handleEditClick = async (formEl) => {
|
||||
console.log(formData.value);
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
isBtnLod.value = true;
|
||||
|
||||
|
||||
const { code } = await editNews(formData.value);
|
||||
if (code == 0) {
|
||||
closeDialog();
|
||||
props.done();
|
||||
}
|
||||
isBtnLod.value = false;
|
||||
});
|
||||
};
|
||||
const handleResetClick = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.copy-btn-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,281 +0,0 @@
|
||||
<template>
|
||||
<!-- 面包屑 -->
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>新闻管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item to="/news/list">新闻列表</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<!-- 搜索 -->
|
||||
<el-form inline :model="params">
|
||||
|
||||
|
||||
<el-form-item label="新闻类型">
|
||||
<el-select v-model="params.news_type" clearable placeholder="请选择">
|
||||
<el-option v-for="item in news_type" :key="item.dictionary_guid" :label="item.dictionary_name"
|
||||
:value="item.dictionary_value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="新闻标题">
|
||||
<el-input v-model='params.news_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="addNewsDialogVisible = 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="ElIconDocument" @click="exportExcel(params)">导出</el-button>
|
||||
|
||||
<!-- 下载导入模板 -->
|
||||
<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 => getNewsList(params)">
|
||||
|
||||
|
||||
<template #news_type='scope'>
|
||||
<dict-tag :options='news_type' :value='scope.row.news_type' />
|
||||
</template>
|
||||
|
||||
<template #news_cover="scope">
|
||||
<el-image v-if="scope.row.news_cover" :src="scope.row.news_cover.split(',')[0]" lazy
|
||||
:preview-src-list="scope.row.news_cover.split(',')" :preview-teleported="true" :hide-on-click-modal="true"
|
||||
fit="contain" class="el-avatar"></el-image>
|
||||
<template v-else>暂无图片</template>
|
||||
</template>
|
||||
|
||||
<!-- 排序 -->
|
||||
<template #news_sort='scope'>
|
||||
<el-input-number :disabled='loading' v-model='scope.row.news_sort' :min='1' controls-position='right'
|
||||
@change='handleEditOrder(scope.row)'></el-input-number>
|
||||
</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>
|
||||
|
||||
<!-- 添加新闻 -->
|
||||
<AddNewsDialog v-model="addNewsDialogVisible" :done="() => tableRef.reload()"></AddNewsDialog>
|
||||
<!-- 编辑新闻 -->
|
||||
<EditNewsDialog v-model="EditNewsDialogVisible" :data="EditNewsDialogRow" :done="() => tableRef.reload()">
|
||||
</EditNewsDialog>
|
||||
<!-- 新闻详情 -->
|
||||
<DetailNewsDialog v-model="DetailNewsDialogVisible" :data="DetailNewsDialogRow"></DetailNewsDialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ArrowDown } from '@element-plus/icons-vue';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { useLoginStore } from "~/store";
|
||||
import { getNewsList, editNews, deleteNews, getDictionary, exportExcel, downloadTemplate, importExcel } from '~/service/news';
|
||||
import AddNewsDialog from './components/AddNewsDialog.vue';
|
||||
import EditNewsDialog from './components/EditNewsDialog.vue';
|
||||
import DetailNewsDialog from './components/DetailNewsDialog.vue';
|
||||
|
||||
const tableRef = ref();
|
||||
const selectionData = ref([]);
|
||||
const store = useLoginStore();
|
||||
|
||||
const addNewsDialogVisible = ref(false);
|
||||
const EditNewsDialogVisible = ref(false);
|
||||
const EditNewsDialogRow = ref({});
|
||||
const DetailNewsDialogVisible = ref(false);
|
||||
const DetailNewsDialogRow = ref({});
|
||||
|
||||
const headers = {
|
||||
Accept: "application/json",
|
||||
...store.headers,
|
||||
};
|
||||
|
||||
// 查询参数
|
||||
const params = reactive({
|
||||
news_type: "",
|
||||
news_title: "",
|
||||
|
||||
});
|
||||
const column = [
|
||||
|
||||
{
|
||||
fixed: true,
|
||||
type: 'selection'
|
||||
},
|
||||
{
|
||||
prop: "news_type",
|
||||
label: '新闻类型',
|
||||
},
|
||||
{
|
||||
prop: "news_cover",
|
||||
label: '新闻封面',
|
||||
width: "200",
|
||||
},
|
||||
{
|
||||
prop: "news_title",
|
||||
label: '新闻标题',
|
||||
showOverflowTooltip: true,
|
||||
width: "500",
|
||||
},
|
||||
// {
|
||||
// prop: "news_intro",
|
||||
// label: '新闻简介',
|
||||
// showOverflowTooltip: true,
|
||||
// width: "400",
|
||||
// },
|
||||
{
|
||||
prop: "news_issue_date",
|
||||
label: '发布日期',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
prop: "news_views_num",
|
||||
label: '浏览次数',
|
||||
sortable: true,
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
prop: "news_sort",
|
||||
label: '新闻排序',
|
||||
width: "180",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
prop: 'chaoz',
|
||||
width: '250',
|
||||
fixed: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
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 deleteNews({
|
||||
news_guid: data.map(v => v.news_guid).join()
|
||||
});
|
||||
if (res) {
|
||||
tableRef.value.reload();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 修改
|
||||
function handleUpdate(row) {
|
||||
EditNewsDialogVisible.value = true
|
||||
EditNewsDialogRow.value = row
|
||||
}
|
||||
|
||||
// 详情
|
||||
function handleDetail(row) {
|
||||
DetailNewsDialogVisible.value = true
|
||||
DetailNewsDialogRow.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();
|
||||
};
|
||||
|
||||
|
||||
|
||||
//排序
|
||||
const loading = ref(false)
|
||||
async function handleEditOrder(data) {
|
||||
loading.value = true
|
||||
const { code } = await editNews(data);
|
||||
if (code == 0) {
|
||||
loading.value = false
|
||||
tableRef.value.reload()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 字典获取
|
||||
const news_type = ref([]);
|
||||
async function get_news_type() {
|
||||
await getDictionary({ dictionary_value: 'news_type' }).then((res) => {
|
||||
news_type.value = res
|
||||
})
|
||||
}
|
||||
get_news_type()
|
||||
</script>
|
||||
@ -1,181 +0,0 @@
|
||||
<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 :lg="24">
|
||||
<el-form-item :label-width="labelWidth" label="产品类目" prop="product_type_guid">
|
||||
<el-cascader class="w100" filterable :options="dataList"
|
||||
:props="{ checkStrictly: false, value: 'product_type_guid', label: 'product_type_name', emitPath: false }"
|
||||
placeholder="请选择产品类目" clearable v-model="formData.product_type_guid">
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.product_type_name }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="产品名称" prop="product_name">
|
||||
<el-input v-model='formData.product_name' type="text" placeholder='请输入产品名称'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='24'>
|
||||
<el-form-item :label-width='labelWidth' label='产品图片' prop='product_img'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.product_img' :data=uoloadData :limit='5' :fileSize='5'
|
||||
:drag='true' :isShowTip='false' />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="产品排序" prop="product_sort">
|
||||
<el-input-number v-model='formData.product_sort' controls-position='right' :min='1'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="跳转链接" prop="product_link">
|
||||
<el-input v-model='formData.product_link' type="text" placeholder='请输入跳转链接'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="产品描述" prop="product_description">
|
||||
<el-input v-model='formData.product_description' type="textarea" :rows="5" placeholder='请输入产品描述'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="产品详情" prop="product_details">
|
||||
<RichText v-model='formData.product_details' :min-height='196'></RichText>
|
||||
</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 { addProduct } from "~/service/product";
|
||||
import { getProductTypeTree } from "~/service/product_type";
|
||||
import { useLoginStore } from "~/store";
|
||||
|
||||
// --业务参数
|
||||
|
||||
|
||||
|
||||
// --业务方法
|
||||
const dataList = ref();
|
||||
async function getList() {
|
||||
getProductTypeTree().then((res) => {
|
||||
if (res.code == 0) {
|
||||
dataList.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// --基础参数
|
||||
const store = useLoginStore();
|
||||
const headers = {
|
||||
Accept: "application/json",
|
||||
...store.headers,
|
||||
};
|
||||
|
||||
const isBtnLod = ref(false);
|
||||
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: "Product"
|
||||
})
|
||||
|
||||
watch(props, (v) => {
|
||||
dialogVisible.value = v.modelValue;
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
product_type_guid: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品类目不能为空'
|
||||
}
|
||||
],
|
||||
product_name: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品名称不能为空'
|
||||
}
|
||||
],
|
||||
product_img: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品图片不能为空'
|
||||
}
|
||||
],
|
||||
product_sort: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品排序不能为空'
|
||||
}
|
||||
],
|
||||
|
||||
});
|
||||
|
||||
|
||||
// --基础方法
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = async () => {
|
||||
await getList()
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
handleResetClick(formRef.value);
|
||||
dialogVisible.value = false;
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const handleAddClick = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
isBtnLod.value = true;
|
||||
|
||||
|
||||
const { code } = await addProduct(formData);
|
||||
if (code == 0) {
|
||||
closeDialog();
|
||||
props.done();
|
||||
}
|
||||
isBtnLod.value = flase;
|
||||
});
|
||||
};
|
||||
|
||||
const handleResetClick = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-model="props.modelValue" title="产品详情" width="900px" @closed="closeDialog" @open="openDialog">
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" :disabled="true">
|
||||
<el-row>
|
||||
<el-col :lg="24">
|
||||
<el-form-item :label-width="labelWidth" label="产品类目" prop="product_type_guid">
|
||||
<el-cascader class="w100" filterable :options="dataList"
|
||||
:props="{ checkStrictly: false, value: 'product_type_guid', label: 'product_type_name', emitPath: false }"
|
||||
clearable v-model="formData.product_type_guid">
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.product_type_name }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="产品名称" prop="product_name">
|
||||
<el-input v-model='formData.product_name' type="text"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='24'>
|
||||
<el-form-item :label-width='labelWidth' label='产品图片' prop='product_img'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.product_img' :data=uoloadData :limit='5' :fileSize='5'
|
||||
:drag='true' :isDisabled="true" :isShowTip='false' />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="产品排序" prop="product_sort">
|
||||
<el-input-number v-model='formData.product_sort' controls-position='right' :min='1'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="跳转链接" prop="product_link">
|
||||
<el-input v-model='formData.product_link' type="text"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="产品描述" prop="product_description">
|
||||
<el-input v-model='formData.product_description' type="textarea" :rows="5"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="产品详情" prop="product_details">
|
||||
<RichText v-model='formData.product_details' :min-height='196'></RichText>
|
||||
</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";
|
||||
import { getProductTypeTree } from "~/service/product_type";
|
||||
|
||||
|
||||
// --业务参数
|
||||
|
||||
|
||||
|
||||
// --业务方法
|
||||
const dataList = ref();
|
||||
async function getList() {
|
||||
getProductTypeTree().then((res) => {
|
||||
if (res.code == 0) {
|
||||
dataList.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// --基础参数
|
||||
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 = async () => {
|
||||
|
||||
await getList()
|
||||
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -1,181 +0,0 @@
|
||||
<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 :lg="24">
|
||||
<el-form-item :label-width="labelWidth" label="产品类目" prop="product_type_guid">
|
||||
<el-cascader class="w100" filterable :options="dataList"
|
||||
:props="{ checkStrictly: false, value: 'product_type_guid', label: 'product_type_name', emitPath: false }"
|
||||
placeholder="请选择产品类目" clearable v-model="formData.product_type_guid">
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.product_type_name }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="产品名称" prop="product_name">
|
||||
<el-input v-model='formData.product_name' type="text" placeholder='请输入产品名称'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='24'>
|
||||
<el-form-item :label-width='labelWidth' label='产品图片' prop='product_img'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.product_img' :data=uoloadData :limit='5' :fileSize='5'
|
||||
:drag='true' :isShowTip='false' />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="产品排序" prop="product_sort">
|
||||
<el-input-number v-model='formData.product_sort' controls-position='right' :min='1'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="跳转链接" prop="product_link">
|
||||
<el-input v-model='formData.product_link' type="text" placeholder='请输入跳转链接'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="产品描述" prop="product_description">
|
||||
<el-input v-model='formData.product_description' type="textarea" :rows="5" placeholder='请输入产品描述'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="产品详情" prop="product_details">
|
||||
<RichText v-model='formData.product_details' :min-height='196'></RichText>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleEditClick(formRef)" :loading="isBtnLod">编辑</el-button>
|
||||
<el-button @click="handleResetClick(formRef)">重置</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { editProduct } from "~/service/product";
|
||||
import { getProductTypeTree } from "~/service/product_type";
|
||||
import { useLoginStore } from "~/store";
|
||||
|
||||
// --业务参数
|
||||
|
||||
|
||||
|
||||
// --业务方法
|
||||
const dataList = ref();
|
||||
async function getList() {
|
||||
getProductTypeTree().then((res) => {
|
||||
if (res.code == 0) {
|
||||
dataList.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// --基础参数
|
||||
const store = useLoginStore();
|
||||
const headers = {
|
||||
Accept: "application/json",
|
||||
...store.headers,
|
||||
};
|
||||
const isBtnLod = ref(false);
|
||||
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: "Product"
|
||||
})
|
||||
|
||||
|
||||
// --基础方法
|
||||
watch(props, (v) => {
|
||||
formData.value = v.data;
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = async () => {
|
||||
await getList()
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
props.done();
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const rules = reactive({
|
||||
product_type_guid: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品类目不能为空'
|
||||
}
|
||||
],
|
||||
product_name: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品名称不能为空'
|
||||
}
|
||||
],
|
||||
product_img: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品图片不能为空'
|
||||
}
|
||||
],
|
||||
product_sort: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品排序不能为空'
|
||||
}
|
||||
],
|
||||
|
||||
});
|
||||
|
||||
const handleEditClick = async (formEl) => {
|
||||
console.log(formData.value);
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
isBtnLod.value = true;
|
||||
|
||||
|
||||
const { code } = await editProduct(formData.value);
|
||||
if (code == 0) {
|
||||
closeDialog();
|
||||
props.done();
|
||||
}
|
||||
isBtnLod.value = false;
|
||||
});
|
||||
};
|
||||
const handleResetClick = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -1,270 +0,0 @@
|
||||
<template>
|
||||
<!-- 面包屑 -->
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>产品管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item to="/product/list">产品列表</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<!-- 搜索 -->
|
||||
<el-form inline :model="params">
|
||||
|
||||
|
||||
<el-form-item :label-width="labelWidth" label="商品类目" prop="product_type_parent_guid">
|
||||
<el-cascader class="w100" filterable :options="dataList"
|
||||
:props="{ checkStrictly: false, value: 'product_type_guid', label: 'product_type_name', emitPath: false }"
|
||||
placeholder="请选择商品类目" clearable v-model="params.product_type_guid">
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.product_type_name }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称">
|
||||
<el-input v-model='params.product_name' 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="addProductDialogVisible = 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="ElIconDocument" @click="exportExcel(params)">导出</el-button>
|
||||
|
||||
<!-- 下载导入模板 -->
|
||||
<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 => getProductList(params)">
|
||||
|
||||
<template #product_img="scope">
|
||||
<el-image v-if="scope.row.product_img" :src="scope.row.product_img.split(',')[0]" lazy
|
||||
:preview-src-list="scope.row.product_img.split(',')" :preview-teleported="true" :hide-on-click-modal="true"
|
||||
fit="contain" class="el-avatar"></el-image>
|
||||
<template v-else>暂无图片</template>
|
||||
</template>
|
||||
|
||||
<template #product_sort="scope">
|
||||
<el-input-number v-model='scope.row.product_sort' controls-position="right"
|
||||
@change="handleEditProduct(scope.row)"></el-input-number>
|
||||
</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>
|
||||
|
||||
<!-- 添加产品 -->
|
||||
<AddProductDialog v-model="addProductDialogVisible" :done="() => tableRef.reload()"></AddProductDialog>
|
||||
<!-- 编辑产品 -->
|
||||
<EditProductDialog v-model="EditProductDialogVisible" :data="EditProductDialogRow" :done="() => tableRef.reload()">
|
||||
</EditProductDialog>
|
||||
<!-- 产品详情 -->
|
||||
<DetailProductDialog v-model="DetailProductDialogVisible" :data="DetailProductDialogRow"></DetailProductDialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ArrowDown } from '@element-plus/icons-vue';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { useLoginStore } from "~/store";
|
||||
import { getProductList, editProduct, deleteProduct, exportExcel, downloadTemplate, importExcel } from '~/service/product';
|
||||
import { getProductTypeTree } from "~/service/product_type";
|
||||
import AddProductDialog from './components/AddProductDialog.vue';
|
||||
import EditProductDialog from './components/EditProductDialog.vue';
|
||||
import DetailProductDialog from './components/DetailProductDialog.vue';
|
||||
|
||||
const tableRef = ref();
|
||||
const selectionData = ref([]);
|
||||
const store = useLoginStore();
|
||||
|
||||
const addProductDialogVisible = ref(false);
|
||||
const EditProductDialogVisible = ref(false);
|
||||
const EditProductDialogRow = ref({});
|
||||
const DetailProductDialogVisible = ref(false);
|
||||
const DetailProductDialogRow = ref({});
|
||||
|
||||
const headers = {
|
||||
Accept: "application/json",
|
||||
...store.headers,
|
||||
};
|
||||
|
||||
// 查询参数
|
||||
const params = reactive({
|
||||
product_type_guid: "",
|
||||
product_name: "",
|
||||
|
||||
});
|
||||
const column = [
|
||||
|
||||
{
|
||||
fixed: true,
|
||||
type: 'selection'
|
||||
},
|
||||
{
|
||||
prop: "product_id",
|
||||
label: '产品ID',
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
prop: "product_type_name",
|
||||
label: '产品类目',
|
||||
width: "150",
|
||||
},
|
||||
{
|
||||
prop: "product_name",
|
||||
label: '产品名称',
|
||||
width: "400",
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
prop: "product_img",
|
||||
label: '产品图片',
|
||||
width: "200"
|
||||
},
|
||||
{
|
||||
prop: "product_description",
|
||||
label: '产品描述',
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
prop: "product_sort",
|
||||
label: '产品排序',
|
||||
width: "200",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
prop: 'chaoz',
|
||||
width: '250',
|
||||
fixed: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
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 deleteProduct({
|
||||
product_guid: data.map(v => v.product_guid).join()
|
||||
});
|
||||
if (res) {
|
||||
tableRef.value.reload();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 修改
|
||||
function handleUpdate(row) {
|
||||
EditProductDialogVisible.value = true
|
||||
EditProductDialogRow.value = row
|
||||
}
|
||||
|
||||
// 详情
|
||||
function handleDetail(row) {
|
||||
DetailProductDialogVisible.value = true
|
||||
DetailProductDialogRow.value = row
|
||||
}
|
||||
|
||||
//排序
|
||||
async function handleEditProduct(data) {
|
||||
await editProduct(data);
|
||||
tableRef.value.reload();
|
||||
}
|
||||
|
||||
// 获取产品类目树形列表
|
||||
const dataList = ref();
|
||||
async function getList() {
|
||||
getProductTypeTree().then((res) => {
|
||||
if (res.code == 0) {
|
||||
dataList.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
|
||||
// 导入方法
|
||||
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>
|
||||
@ -1,167 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="添加产品类目" width="600px" @closed="closeDialog" @open="openDialog">
|
||||
<el-form ref="formRef" :model="formData" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :lg="24">
|
||||
<el-form-item :label-width="labelWidth" label="上级菜单" prop="product_type_parent_guid">
|
||||
<el-cascader class="w100" filterable :options="dataList"
|
||||
:props="{ checkStrictly: true, value: 'product_type_guid', label: 'product_type_name', emitPath: false }"
|
||||
placeholder="请选择上级菜单" clearable v-model="formData.product_type_parent_guid">
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.product_type_name }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="类目名称" prop="product_type_name">
|
||||
<el-input v-model='formData.product_type_name' placeholder='请输入类目名称'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="类目标题" prop="">
|
||||
<el-input v-model='formData.product_type_title' placeholder='请输入类目标题'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="类目链接" prop="">
|
||||
<el-input v-model='formData.product_type_link' placeholder='请输入类目链接'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="排序" prop="product_type_order">
|
||||
<el-input-number v-model='formData.product_type_order' controls-position='right'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item :label-width='labelWidth' label='类目图标' prop='product_type_icon'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.product_type_icon' :data=uoloadData :limit='1' :fileSize='5'
|
||||
:drag='true' :isShowTip='false' />
|
||||
</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 { addProductType, getProductTypeTree } from "~/service/product_type";
|
||||
import { useLoginStore } from "~/store";
|
||||
|
||||
// --业务参数
|
||||
|
||||
|
||||
|
||||
// --业务方法
|
||||
const dataList = ref();
|
||||
async function getList() {
|
||||
getProductTypeTree().then((res) => {
|
||||
if (res.code == 0) {
|
||||
dataList.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// --基础参数
|
||||
const store = useLoginStore();
|
||||
const headers = {
|
||||
Accept: "application/json",
|
||||
...store.headers,
|
||||
};
|
||||
|
||||
const formRef = ref();
|
||||
const labelWidth = 90;
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
data: Object,
|
||||
done: Function,
|
||||
});
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const dialogVisible = ref(props.modelValue);
|
||||
const formData = reactive({
|
||||
product_type_parent_guid: '0',
|
||||
product_type_order: 100,
|
||||
});
|
||||
|
||||
const uoloadData = ref({
|
||||
dirName: "ProductType"
|
||||
})
|
||||
|
||||
watch(props, (v) => {
|
||||
dialogVisible.value = v.modelValue;
|
||||
formData.product_type_parent_guid = v.data.product_type_guid
|
||||
});
|
||||
|
||||
const rules = reactive({
|
||||
product_type_name: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品类目名称不能为空'
|
||||
}
|
||||
],
|
||||
|
||||
});
|
||||
|
||||
|
||||
// --基础方法
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {
|
||||
getList();
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
handleResetClick(formRef.value);
|
||||
dialogVisible.value = false;
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const handleAddClick = async (formEl) => {
|
||||
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { code } = await addProductType(formData);
|
||||
if (code == 0) {
|
||||
closeDialog();
|
||||
props.done();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleResetClick = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -1,79 +0,0 @@
|
||||
<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="12">
|
||||
<el-form-item :label-width="labelWidth" label="系列标题" prop="product_type_name">
|
||||
<el-input v-model='formData.product_type_name' type="text" placeholder='请输入系列标题'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item :label-width='labelWidth' label='系列图标' prop='product_type_icon'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.product_type_icon' :data=uoloadData :limit='1' :fileSize='5'
|
||||
:drag='true' :isShowTip='false' />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span='12'>
|
||||
<el-form-item :label-width='labelWidth' label='系列封面' prop='product_type_cover'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.product_type_cover' :data=uoloadData :limit='1' :fileSize='5'
|
||||
:drag='true' :isShowTip='false' />
|
||||
</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>
|
||||
@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-model="props.modelValue" title="编辑产品系列" width="600px" @closed="closeDialog" @open="openDialog">
|
||||
<el-form ref="formRef" :model="formData" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :lg="24">
|
||||
<el-form-item :label-width="labelWidth" label="上级菜单" prop="product_type_parent_guid">
|
||||
<el-cascader class="w100" filterable :options="dataList"
|
||||
:props="{ checkStrictly: true, value: 'product_type_guid', label: 'product_type_name', emitPath: false }"
|
||||
placeholder="请选择上级菜单" clearable v-model="formData.product_type_parent_guid">
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.product_type_name }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="类目名称" prop="product_type_name">
|
||||
<el-input v-model='formData.product_type_name' placeholder='请输入类目名称'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="类目标题" prop="">
|
||||
<el-input v-model='formData.product_type_title' placeholder='请输入类目标题'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label-width="labelWidth" label="类目链接" prop="">
|
||||
<el-input v-model='formData.product_type_link' placeholder='请输入类目链接'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="排序" prop="product_type_order">
|
||||
<el-input-number v-model='formData.product_type_order' controls-position='right'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item :label-width='labelWidth' label='类目图标' prop='product_type_icon'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.product_type_icon' :data=uoloadData :limit='1' :fileSize='5'
|
||||
:drag='true' :isShowTip='false' />
|
||||
</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 { editProductType, getProductTypeTree } from "~/service/product_type";
|
||||
import { useLoginStore } from "~/store";
|
||||
|
||||
// --业务参数
|
||||
|
||||
|
||||
|
||||
// --业务方法
|
||||
const dataList = ref();
|
||||
async function getList() {
|
||||
getProductTypeTree().then((res) => {
|
||||
if (res.code == 0) {
|
||||
dataList.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// --基础参数
|
||||
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: "ProductType"
|
||||
})
|
||||
|
||||
|
||||
// --基础方法
|
||||
watch(props, (v) => {
|
||||
formData.value = v.data;
|
||||
|
||||
});
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {
|
||||
getList();
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
props.done();
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const rules = reactive({
|
||||
product_type_name: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品系列标题不能为空'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const handleEditClick = async (formEl) => {
|
||||
console.log(formData.value);
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { code } = await editProductType(formData.value);
|
||||
if (code == 0) {
|
||||
closeDialog();
|
||||
props.done();
|
||||
}
|
||||
});
|
||||
};
|
||||
const handleResetClick = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -1,244 +0,0 @@
|
||||
<template>
|
||||
<!-- 面包屑 -->
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>产品类目管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item to="/product_type/list">产品类目列表</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<!-- 搜索 -->
|
||||
<el-form inline :model="params">
|
||||
|
||||
|
||||
<el-form-item label="产品类目标题">
|
||||
<el-input v-model='params.product_type_name' placeholder='请输入产品类目标题'></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList()" icon="ElIconSearch">
|
||||
搜索
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-space style="margin-bottom: 10px;">
|
||||
<!-- 添加产品类目 -->
|
||||
<el-col :span="1">
|
||||
<el-button type="primary" @click="addProductTypeDialogVisible = 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="ElIconDocument" @click="exportExcel(params)">导出</el-button>
|
||||
|
||||
<!-- 下载导入模板 -->
|
||||
<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>
|
||||
<!-- 数据表格 -->
|
||||
<el-table v-loading="loading" :data="dataList" ref="tableRef" highlight-current-row
|
||||
:onSelectionChange="data => (selectionData = data)" :default-expand-all="tableExpandAll" row-key="product_type_guid"
|
||||
:tree-props="{ children: 'children' }">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column prop="product_type_name" width="200" label="产品类目名称" :show-overflow-tooltip="true"> </el-table-column>
|
||||
<el-table-column prop="product_type_title" width="200" label="产品类目标题" :show-overflow-tooltip="true">
|
||||
</el-table-column>
|
||||
<el-table-column prop="product_type_icon" width="200" label="产品类目图标" :show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
<el-image :src="scope.row.product_type_icon" :preview-src-list="[scope.row.product_type_icon]"
|
||||
:preview-teleported="true"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="product_type_order" width="200" label="排序" sort>
|
||||
<template #default="scope">
|
||||
<el-input-number v-model='scope.row.product_type_order' controls-position="right"
|
||||
@change="handleEditProductType(scope.row)"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" width="250" fixed='right'>
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary" @click="handleAdd(scope.row)">添加</el-button>
|
||||
<el-button size="small" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete([scope.row])">删除</el-button>
|
||||
<!-- <el-button size="small" type="info" @click="handleDetail(scope.row)">查看</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加产品类目 -->
|
||||
<AddProductTypeDialog v-model="addProductTypeDialogVisible" :data="AddProductTypeDialogRow" :done="() => getList()">
|
||||
</AddProductTypeDialog>
|
||||
<!-- 编辑产品类目 -->
|
||||
<EditProductTypeDialog v-model="EditProductTypeDialogVisible" :data="EditProductTypeDialogRow" :done="() => getList()">
|
||||
</EditProductTypeDialog>
|
||||
<!-- 产品类目详情 -->
|
||||
<DetailProductTypeDialog v-model="DetailProductTypeDialogVisible" :data="DetailProductTypeDialogRow">
|
||||
</DetailProductTypeDialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ArrowDown } from '@element-plus/icons-vue';
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { useLoginStore } from "~/store";
|
||||
import { getProductTypeTree, editProductType, deleteProductType, exportExcel, downloadTemplate, importExcel } from '~/service/product_type';
|
||||
import AddProductTypeDialog from './components/AddProductTypeDialog.vue';
|
||||
import EditProductTypeDialog from './components/EditProductTypeDialog.vue';
|
||||
import DetailProductTypeDialog from './components/DetailProductTypeDialog.vue';
|
||||
import createDraw from 'hyw-drag'
|
||||
|
||||
|
||||
const tableRef = ref();
|
||||
const tableKey = ref(0);
|
||||
const selectionData = ref([]);
|
||||
const store = useLoginStore();
|
||||
|
||||
const addProductTypeDialogVisible = ref(false);
|
||||
const AddProductTypeDialogRow = ref({});
|
||||
const EditProductTypeDialogVisible = ref(false);
|
||||
const EditProductTypeDialogRow = ref({});
|
||||
const DetailProductTypeDialogVisible = ref(false);
|
||||
const DetailProductTypeDialogRow = ref({});
|
||||
|
||||
const tableExpandAll = ref(false)
|
||||
|
||||
const headers = {
|
||||
Accept: "application/json",
|
||||
...store.headers,
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 查询参数
|
||||
const params = reactive({
|
||||
product_type_name: "",
|
||||
});
|
||||
|
||||
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 deleteProductType({
|
||||
product_type_guid: data.map(v => v.product_type_guid).join()
|
||||
});
|
||||
if (res) {
|
||||
getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 添加
|
||||
function handleAdd(row) {
|
||||
addProductTypeDialogVisible.value = true
|
||||
AddProductTypeDialogRow.value = row
|
||||
}
|
||||
|
||||
// 修改
|
||||
function handleUpdate(row) {
|
||||
EditProductTypeDialogVisible.value = true
|
||||
EditProductTypeDialogRow.value = row
|
||||
}
|
||||
|
||||
// 详情
|
||||
function handleDetail(row) {
|
||||
DetailProductTypeDialogVisible.value = true
|
||||
DetailProductTypeDialogRow.value = row
|
||||
}
|
||||
|
||||
//排序
|
||||
async function handleEditProductType(data) {
|
||||
loading.value = true
|
||||
await editProductType(data);
|
||||
getList();
|
||||
}
|
||||
|
||||
|
||||
// 导入方法
|
||||
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();
|
||||
};
|
||||
|
||||
const loading = ref(false)
|
||||
const dataList = ref([])
|
||||
//排序
|
||||
let drag = ref(false)
|
||||
// 查询数据
|
||||
function getList() {
|
||||
loading.value = true
|
||||
getProductTypeTree(params).then((res) => {
|
||||
if (res.code == 0) {
|
||||
dataList.value = res.data
|
||||
setTimeout(() => {
|
||||
[...document.getElementsByClassName('el-table__row')].map(item => { item.classList.add('row1') });
|
||||
[...document.getElementsByClassName('el-table__row--level-1')].map(item => { item.classList.remove('row1') })
|
||||
drag.value === false && (drag.value = createDraw(document.getElementsByClassName('el-table__row')[0].parentElement))
|
||||
})
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// watch(drag, () => {
|
||||
// drag.value.start(() => {
|
||||
// dataList.value.map(item => {
|
||||
// tableRef.value.toggleRowExpansion(item, false)
|
||||
// })
|
||||
// tableExpandAll.value = false
|
||||
// })
|
||||
// drag.value.drop((info) => {
|
||||
// // console.log(info)
|
||||
// let targetIdx = [...document.getElementsByClassName('row1')].indexOf(info.el)
|
||||
// let sourceIdx = [...document.getElementsByClassName('row1')].indexOf(info.info.source.el)
|
||||
// let orderIdx = dataList.value[sourceIdx]['product_type_order']
|
||||
// dataList.value[targetIdx]['product_type_order'] = orderIdx
|
||||
// handleEditProductType(dataList.value[targetIdx])
|
||||
// })
|
||||
// })
|
||||
getList()
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user