<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="100px">
|
<el-form-item label="状态" prop="useState">
|
<el-select v-model="queryParams.useState" placeholder="状态" clearable style="width: 240px">
|
<el-option :key="0" label="全部" value="" />
|
<el-option :key="1" label="正常" :value="1" />
|
<el-option :key="2" label="禁用" :value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button type="primary" plain icon="Plus" :disabled="power.add" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="danger" plain icon="Delete" :disabled="power.multiple" @click="handleDelete()" v-hasPermi="['system:role:remove']">删除</el-button>
|
</el-col>
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
|
</el-row>
|
<el-table v-loading="tableOption.loading" :data="dataTable" @selection-change="handleSelectionChange" @cell-dblclick="handleInfo">
|
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column label="缩略图" align="center" width="120">
|
<template #default="scope"
|
><div class="custom-img">
|
<el-image :src="baseUrl + scope.row.bannerImg" fit="contain"> </el-image>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="跳转路径" align="center" key="path" prop="path" :show-overflow-tooltip="true" />
|
<el-table-column label="路由" align="center" key="route" prop="route" />
|
<el-table-column label="排序" align="center" key="bannerSort" prop="bannerSort" />
|
<el-table-column label="状态" align="center" key="useState" width="100">
|
<template #default="scope">
|
<span>{{ scope.row.useState == 1 ? "正常" : "禁用" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建人" align="center" key="createName" prop="createName" width="120" />
|
<el-table-column label="创建时间" align="center" key="createTime" prop="createTime" width="170" />
|
<el-table-column label="操作" align="center" width="120">
|
<template #default="scope">
|
<el-tooltip content="修改" placement="top" v-if="!power.single">
|
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
|
</el-tooltip>
|
<el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
|
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getDataList" />
|
|
<el-dialog :title="dialogTitle" v-model="isOpenFormData" width="500px" draggable :close-on-click-modal="false">
|
<el-form ref="formRef" :model="data" :rules="formData.rules" label-width="100px">
|
<el-form-item label="图片" prop="bannerImg">
|
<ImageUpload v-model="data.bannerImg" :limit="1"></ImageUpload>
|
</el-form-item>
|
<el-form-item label="跳转路径" prop="path">
|
<el-input v-model="data.path" placeholder="请输入页面跳转路径" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="路由" prop="route">
|
<el-input v-model="data.route" placeholder="请输入页面路由" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="data.remark" placeholder="备注" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="状态" prop="useState">
|
<el-switch v-model="data.useState" :active-value="1" :inactive-value="2" active-text="启用"></el-switch>
|
</el-form-item>
|
</el-form>
|
|
<template #footer>
|
<el-button @click="formData.isOpenFormData = false">取消</el-button>
|
<el-button type="primary" @click="submitDataScope"> 提交 </el-button>
|
</template>
|
</el-dialog>
|
<!--详情-->
|
<el-dialog title="轮播详情" :close-on-click-modal="false" v-model="state.isOpenInfo" width="800px" top="20vh" draggable>
|
<div class="custom-img">
|
<el-image :src="baseUrl + data.bannerImg" fit="cover"></el-image>
|
</div>
|
<el-descriptions>
|
<el-descriptions-item label="跳转路径" width="260">{{ data.path }}</el-descriptions-item>
|
<el-descriptions-item label="路由" width="260">{{ data.route }}</el-descriptions-item>
|
<el-descriptions-item label="排序" width="260">{{ data.bannerSort }}</el-descriptions-item>
|
<el-descriptions-item label="状态" width="260">{{ data.useState == 1 ? "正常" : "禁用" }}</el-descriptions-item>
|
<el-descriptions-item label="创建人" width="260">{{ data.createName }}</el-descriptions-item>
|
<el-descriptions-item label="创建时间" width="260">{{ data.createTime }}</el-descriptions-item>
|
<el-descriptions-item label="备注" width="260">{{ data.remark }}</el-descriptions-item>
|
</el-descriptions>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { reactive, onMounted, toRefs, getCurrentInstance, ref } from "vue";
|
import { saveBanner, getBannerList, updateBanner, deleteBanner, getBannerInfo } from "@/api/app/banner";
|
import { bannerDTO, TypeBannerDTO } from "@/types/DTO/appBannerDTO";
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const ids = ref<number[]>([]);
|
const state = reactive({
|
dataTable: [] as TypeBannerDTO[], //数据列表
|
total: 0, //总条数
|
tableOption: {
|
//表格配置
|
loading: false,
|
},
|
power: {
|
//操作权限
|
add: false,
|
single: false, //
|
multiple: true, //
|
},
|
showSearch: true, //是否显示搜索
|
showAddGoods: false, //是否显示新增
|
isOpenSeletGoods: false, //是否显示选择商品
|
isOpenInfo: false, //是否显示优惠券详情
|
});
|
const { dataTable, total, tableOption, power, showSearch } = toRefs(state);
|
|
onMounted(() => {
|
getDataList();
|
});
|
|
//#region commonDisp
|
|
//#endregion
|
|
//#region 查询
|
const queryRef = ref<Omit<Common.formDataType, "formRef">>();
|
const queryParams = reactive({
|
//查询配置参数
|
pageNum: 1,
|
pageSize: 10,
|
useState: "",
|
});
|
|
/**
|
* 获取数据列表
|
*/
|
const getDataList = async () => {
|
await getBannerList(queryParams).then((res) => {
|
if (res.code == 200) {
|
state.dataTable = res.rows;
|
state.tableOption.loading = false;
|
state.total = res.total;
|
}
|
});
|
};
|
/**
|
* 重置
|
*/
|
const resetQuery = () => {
|
queryRef.value!.resetFields();
|
};
|
//#endregion
|
|
//#region 新增
|
|
/**
|
* 新增
|
*/
|
const handleAdd = () => {
|
formData.dialogTitle = "新增轮播图";
|
formData.handleStatus = 1;
|
formData.data = { ...bannerDTO };
|
formData.isOpenFormData = true;
|
};
|
|
const validatePass = (rule: any, value: any, callback: any) => {
|
if (Number.isInteger(Number(value)) && Number(value) > 0) {
|
callback();
|
} else {
|
callback(new Error(rule.message));
|
}
|
};
|
|
interface formA extends Common.formDataType<TypeBannerDTO> {}
|
|
const formData = reactive<formA>({
|
data: {} as TypeBannerDTO,
|
isOpenFormData: false, //是否展开新增对话框
|
dialogTitle: "", //弹窗标题
|
handleStatus: 0,
|
formRef: null,
|
rules: {
|
bannerImg: [{ required: true, message: "请上传图片", trigger: "change" }],
|
},
|
});
|
|
const { data, isOpenFormData, dialogTitle, formRef } = toRefs(formData);
|
|
/**
|
* 提交表单检验
|
*/
|
const submitDataScope = () => {
|
formData.formRef!.validate((valid) => {
|
if (valid) {
|
if (formData.data.id) {
|
editData();
|
} else {
|
SaveData();
|
}
|
}
|
});
|
};
|
|
/**
|
* 保存
|
*/
|
const SaveData = async () => {
|
await saveBanner(formData.data).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("新增成功");
|
state.isOpenSeletGoods = false;
|
getDataList();
|
formData.isOpenFormData = false;
|
} else {
|
proxy.$modal.msgError(res.msg);
|
}
|
});
|
};
|
|
/**
|
* 修改
|
*/
|
const editData = async () => {
|
await updateBanner(formData.data).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("操作成功");
|
state.isOpenSeletGoods = false;
|
getDataList();
|
formData.isOpenFormData = false;
|
} else {
|
proxy.$modal.msgError(res.msg);
|
}
|
});
|
};
|
|
//#endregion
|
|
//#region 删除
|
/**
|
* 选择时
|
* @param {} row
|
*/
|
const handleSelectionChange = (row: TypeBannerDTO[]) => {
|
ids.value = row.map((item: TypeBannerDTO) => item.id);
|
state.power.multiple = !ids.value.length;
|
};
|
|
/**
|
* 删除
|
*/
|
const handleDelete = (row?: TypeBannerDTO) => {
|
const roleIds = (row && row.id) || ids.value;
|
proxy.$modal
|
.confirm("是否确认删除选中的轮播图片?")
|
.then(function () {
|
return deleteBanner(roleIds);
|
})
|
.then(() => {
|
getDataList();
|
proxy.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
};
|
|
//#endregion
|
|
//#region 修改
|
|
/**
|
* 修改
|
*/
|
const handleUpdate = (e: TypeBannerDTO) => {
|
getDataInfo(e.id, () => {
|
formData.dialogTitle = "修改轮播图";
|
formData.handleStatus = 2;
|
formData.isOpenFormData = true;
|
});
|
};
|
|
//#endregion
|
|
//#region 详情
|
|
/**
|
* 展开详情
|
*/
|
const handleInfo = (e: TypeBannerDTO) => {
|
getDataInfo(e.id, () => {
|
state.isOpenInfo = true;
|
});
|
};
|
|
/**
|
* 获取详情
|
* @param {} e
|
*/
|
const getDataInfo = async (e: number, fnc: () => void) => {
|
await getBannerInfo(e).then((res) => {
|
if (res.code == 200) {
|
let data = res.data;
|
formData.data = { ...data };
|
if (fnc != null) {
|
fnc();
|
}
|
}
|
});
|
};
|
|
//#endregion
|
|
/**
|
* 导出
|
*/
|
const handleExport = () => {};
|
</script>
|
|
<style scoped lang="scss">
|
._el-row {
|
padding: 5px 0px;
|
border-bottom: 1px solid var(--el-border-color);
|
margin-left: 20px;
|
align-items: center;
|
}
|
.actImage {
|
max-width: 250px;
|
}
|
</style>
|
