|
|
@@ -1,131 +1,261 @@
|
|
|
<template>
|
|
|
- <el-form :model="form" label-width="auto" style="max-width: 600px">
|
|
|
- <el-form-item label="标题">
|
|
|
- <el-input v-model="form.name" />
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.title"
|
|
|
+ placeholder="请输入标题"
|
|
|
+ clearable
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleQuery">搜索</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"
|
|
|
+ @click="handleAdd"
|
|
|
+ v-hasPermi="['basicData:release:add']"
|
|
|
+ >新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ plain
|
|
|
+ icon="Edit"
|
|
|
+ :disabled="single"
|
|
|
+ @click="handleUpdate"
|
|
|
+ v-hasPermi="['basicData:release:edit']"
|
|
|
+ >修改</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ icon="Delete"
|
|
|
+ :disabled="multiple"
|
|
|
+ @click="handleDelete"
|
|
|
+ v-hasPermi="['basicData:release:remove']"
|
|
|
+ >删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table v-loading="loading" :data="releaseList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+<!-- <el-table-column label="主键" align="center" prop="id" />-->
|
|
|
+ <el-table-column label="标题" align="center" prop="title" />
|
|
|
+ <el-table-column label="专栏" align="center" prop="specialColumn" />
|
|
|
+ <el-table-column label="发布时间" align="center" prop="date" width="180">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="内容" align="center" prop="content" />
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="Edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ v-hasPermi="['basicData:release:edit']"
|
|
|
+ >修改</el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="Delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['basicData:release:remove']"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ v-model:page="queryParams.pageNum"
|
|
|
+ v-model:limit="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 添加或修改新闻发布对话框 -->
|
|
|
+ <el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
|
|
+ <el-form ref="releaseRef" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input v-model="form.title" placeholder="请输入标题" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="专栏">
|
|
|
- <el-select v-model="form.region" placeholder="请选择发布类型">
|
|
|
- <el-option label=" one" value="shanghai" />
|
|
|
- <el-option label=" two" value="beijing" />
|
|
|
- </el-select>
|
|
|
+ <el-form-item label="专栏" prop="specialColumn">
|
|
|
+ <el-input v-model="form.specialColumn" placeholder="请输入专栏" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="发布时间">
|
|
|
- <el-col :span="11">
|
|
|
- <el-date-picker v-model="form.date1" type="date" placeholder="选择发布时间"
|
|
|
- :default-value="new Date(2010, 9, 1)" />
|
|
|
- </el-col>
|
|
|
+ <el-form-item label="发布时间" prop="date">
|
|
|
+ <el-date-picker clearable
|
|
|
+ v-model="form.date"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="请选择发布时间">
|
|
|
+ </el-date-picker>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="内容">
|
|
|
- <el-input v-model="form.desc" type="textarea" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="添加图片">
|
|
|
-
|
|
|
- <el-upload action="#" list-type="picture-card" :auto-upload="false">
|
|
|
- <el-icon>
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
-
|
|
|
- <template #file="{ file }">
|
|
|
- <div>
|
|
|
- <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
|
|
- <span class="el-upload-list__item-actions">
|
|
|
- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
|
|
- <el-icon><zoom-in /></el-icon>
|
|
|
- </span>
|
|
|
- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
|
|
|
- <el-icon>
|
|
|
- <Download />
|
|
|
- </el-icon>
|
|
|
- </span>
|
|
|
- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
|
- <el-icon>
|
|
|
- <Delete />
|
|
|
- </el-icon>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-upload>
|
|
|
-
|
|
|
- <el-dialog v-model="dialogVisible">
|
|
|
- <img w-full :src="dialogImageUrl" alt="Preview Image" />
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="onSubmit">发布</el-button>
|
|
|
- <el-button>清楚内容</el-button>
|
|
|
+ <editor v-model="form.content" :min-height="192"/>
|
|
|
</el-form-item>
|
|
|
- </el-form>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-
|
|
|
-<script lang="ts" setup>
|
|
|
-import { ref } from 'vue'
|
|
|
-import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
|
|
|
|
|
|
-import type { UploadFile } from 'element-plus'
|
|
|
+<script setup name="Release">
|
|
|
+import { listRelease, getRelease, delRelease, addRelease, updateRelease } from "@/api/basicData/release";
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+
|
|
|
+const releaseList = ref([]);
|
|
|
+const open = ref(false);
|
|
|
+const loading = ref(true);
|
|
|
+const showSearch = ref(true);
|
|
|
+const ids = ref([]);
|
|
|
+const single = ref(true);
|
|
|
+const multiple = ref(true);
|
|
|
+const total = ref(0);
|
|
|
+const title = ref("");
|
|
|
+
|
|
|
+const data = reactive({
|
|
|
+ form: {},
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ title: null,
|
|
|
+ specialColumn: null,
|
|
|
+ date: null,
|
|
|
+ content: null,
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
-const dialogImageUrl = ref('')
|
|
|
-const dialogVisible = ref(false)
|
|
|
-const disabled = ref(false)
|
|
|
+const { queryParams, form, rules } = toRefs(data);
|
|
|
|
|
|
-const handleRemove = (file: UploadFile) => {
|
|
|
- console.log(file)
|
|
|
+/** 查询新闻发布列表 */
|
|
|
+function getList() {
|
|
|
+ loading.value = true;
|
|
|
+ listRelease(queryParams.value).then(response => {
|
|
|
+ releaseList.value = response.rows;
|
|
|
+ total.value = response.total;
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
-const handlePictureCardPreview = (file: UploadFile) => {
|
|
|
- dialogImageUrl.value = file.url!
|
|
|
- dialogVisible.value = true
|
|
|
+// 取消按钮
|
|
|
+function cancel() {
|
|
|
+ open.value = false;
|
|
|
+ reset();
|
|
|
}
|
|
|
|
|
|
-const handleDownload = (file: UploadFile) => {
|
|
|
- console.log(file)
|
|
|
+// 表单重置
|
|
|
+function reset() {
|
|
|
+ form.value = {
|
|
|
+ id: null,
|
|
|
+ title: null,
|
|
|
+ specialColumn: null,
|
|
|
+ date: null,
|
|
|
+ content: null,
|
|
|
+ createBy: null,
|
|
|
+ createTime: null,
|
|
|
+ updateBy: null,
|
|
|
+ updateTime: null
|
|
|
+ };
|
|
|
+ proxy.resetForm("releaseRef");
|
|
|
}
|
|
|
|
|
|
-// do not use same name with ref
|
|
|
-import { reactive } from 'vue'
|
|
|
-const form = reactive({
|
|
|
- name: '',
|
|
|
- region: '',
|
|
|
- date1: '',
|
|
|
- date2: '',
|
|
|
- delivery: false,
|
|
|
- type: [],
|
|
|
- resource: '',
|
|
|
- desc: '',
|
|
|
-})
|
|
|
-
|
|
|
-const onSubmit = () => {
|
|
|
- console.log('submit!')
|
|
|
+/** 搜索按钮操作 */
|
|
|
+function handleQuery() {
|
|
|
+ queryParams.value.pageNum = 1;
|
|
|
+ getList();
|
|
|
}
|
|
|
-</script>
|
|
|
-<style scoped>
|
|
|
-.avatar-uploader .avatar {
|
|
|
- width: 178px;
|
|
|
- height: 178px;
|
|
|
- display: block;
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+function resetQuery() {
|
|
|
+ proxy.resetForm("queryRef");
|
|
|
+ handleQuery();
|
|
|
+}
|
|
|
+
|
|
|
+// 多选框选中数据
|
|
|
+function handleSelectionChange(selection) {
|
|
|
+ ids.value = selection.map(item => item.id);
|
|
|
+ single.value = selection.length != 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+}
|
|
|
+
|
|
|
+/** 新增按钮操作 */
|
|
|
+function handleAdd() {
|
|
|
+ reset();
|
|
|
+ open.value = true;
|
|
|
+ title.value = "添加新闻发布";
|
|
|
}
|
|
|
-</style>
|
|
|
-
|
|
|
-<style>
|
|
|
-.avatar-uploader .el-upload {
|
|
|
- border: 1px dashed var(--el-border-color);
|
|
|
- border-radius: 6px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- transition: var(--el-transition-duration-fast);
|
|
|
+
|
|
|
+/** 修改按钮操作 */
|
|
|
+function handleUpdate(row) {
|
|
|
+ reset();
|
|
|
+ const id = row.id || ids.value
|
|
|
+ getRelease(id).then(response => {
|
|
|
+ form.value = response.data;
|
|
|
+ open.value = true;
|
|
|
+ title.value = "修改新闻发布";
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 提交按钮 */
|
|
|
+function submitForm() {
|
|
|
+ proxy.$refs["releaseRef"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (form.value.id != null) {
|
|
|
+ updateRelease(form.value).then(response => {
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ open.value = false;
|
|
|
+ getList();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log(123);
|
|
|
+ addRelease(form.value).then(response => {
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ open.value = false;
|
|
|
+ getList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
-.avatar-uploader .el-upload:hover {
|
|
|
- border-color: var(--el-color-primary);
|
|
|
+/** 删除按钮操作 */
|
|
|
+function handleDelete(row) {
|
|
|
+ const ids = row.id || ids.value;
|
|
|
+ proxy.$modal.confirm('是否确认删除新闻发布编号为"' + ids + '"的数据项?').then(function() {
|
|
|
+ return delRelease(ids);
|
|
|
+ }).then(() => {
|
|
|
+ getList();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
}
|
|
|
|
|
|
-.el-icon.avatar-uploader-icon {
|
|
|
- font-size: 28px;
|
|
|
- color: #8c939d;
|
|
|
- width: 178px;
|
|
|
- height: 178px;
|
|
|
- text-align: center;
|
|
|
+/** 导出按钮操作 */
|
|
|
+function handleExport() {
|
|
|
+ proxy.download('basicData/release/export', {
|
|
|
+ ...queryParams.value
|
|
|
+ }, `release_${new Date().getTime()}.xlsx`)
|
|
|
}
|
|
|
-</style>
|
|
|
+
|
|
|
+getList();
|
|
|
+</script>
|
|
|
+
|