wo123/gushidianzibao-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加适配input

Browse Source
This commit is contained in:
王创世 2025-04-14 15:22:40 +08:00
parent 831113f82e
commit 504fd4010a
6 changed files with 75 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -6,7 +6,7 @@ VITE_LOGIN_TITLE = '今日固始电子版 管理平台'
VITE_LOGIN_EN_TITLE = 'GuShi Platform'
VITE_WEB_BASE_API = '/api'
# 本地Mock地址
VITE_SERVER = 'https://jinrigushi.gushitv.com/'
VITE_SERVER = 'http://democs.gushitv.com/'
# 路由模式[哈希模式 AND WEB模式 [hash | history, 这两个模式是固定死的，不能乱改值]
VITE_ROUTER_MODE = hash
# 是否使用全部去除console和debugger

2
.env.production
View File

@ -6,7 +6,7 @@ VITE_LOGIN_TITLE = '今日固始电子版 管理平台'
VITE_LOGIN_EN_TITLE = 'GuShi Platform'
VITE_WEB_BASE_API = ''
# 后端接口地址
VITE_SERVER = 'https://jinrigushi.gushitv.com/'
VITE_SERVER = 'http://democs.gushitv.com/'
# 路由模式[哈希模式 AND WEB模式 [hash | history, 这两个模式是固定死的，不能乱改值]
VITE_ROUTER_MODE = hash
# 是否使用全部去除console和debugger

83
src/views/paper/article/index.vue
View File

@ -4,40 +4,44 @@
<el-row :gutter="20">
<el-col :span="8">
<div style="padding: 0px 20px 20px 0px;font-weight: 600">请在图片边框内选定区域</div>
<el-card :body-style="{padding:'0'}" style="padding: 0;position:relative;">
<div @mousedown="startDrag" @mousemove="onDrag" @mouseup="endDrag" @mouseleave="endDrag" style="width: 100%">
<el-card :body-style="{ padding: '0' }" style="padding: 0;position:relative;">
<div @mousedown="startDrag" @mousemove="onDrag" @mouseup="endDrag" @mouseleave="endDrag"
style="width: 100%">
<!-- 图片 -->
<img draggable="false" id="image-selector" :src="bmInfoData.bm_img" ref="image" alt="image"
@click="handleClick"
style="cursor: crosshair; position: relative; user-select: none; width: 100%; height: auto;"
@load="onImageLoad"/>
@click="handleClick"
style="cursor: crosshair; position: relative; user-select: none; width: 100%; height: auto;"
@load="onImageLoad" />
<!-- 画布用于绘制矩形路径 -->
<canvas id="myCanvas" ref="canvas" :width="imageWidth" :height="imageHeight"
style="position: absolute; top: 0; left: 0; pointer-events: none;">
style="position: absolute; top: 0; left: 0; pointer-events: none;">
</canvas>
</div>
</el-card>
</el-col>
<el-col :span="16">
<el-form :model="form" label-width="auto">
<el-form-item label="新闻标题">
<el-input v-model="form.new_name" size="large"/>
<el-form-item label="新闻标题" required>
<el-input v-model="form.new_name" placeholder="请输入新闻标题" size="large" />
</el-form-item>
<el-form-item label="新闻副标题">
<el-input v-model="form.subtitle" size="large"/>
<el-input v-model="form.subtitle" placeholder="请输入新闻副标题" size="large" />
</el-form-item>
<el-form-item label="新闻记者">
<el-input v-model="form.reporter" size="large"/>
<el-form-item label="新闻记者" required>
<el-input v-model="form.reporter" placeholder="请输入新闻记者" size="large" />
</el-form-item>
<el-form-item label="新闻坐标">
<el-input disabled v-model="coordinate" size="large"/>
<el-button class="mt-2" @click="allowClickTrue()">重新选择</el-button>
<el-form-item label="新闻坐标" required>
<el-input disabled v-model="coordinate" placeholder="请选择新闻坐标" size="large" />
<el-button type="danger" class="mt-2" @click="allowClickTrue()">重新选择</el-button>
</el-form-item>
<el-form-item label="新闻详情">
<el-form-item label="新闻视频">
<el-input v-model="form.video" placeholder="请输入新闻视频" size="large"/>
</el-form-item>
<el-form-item label="新闻详情" required>
<el-card shadow="hover">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
<Editor style="height: 300px; overflow-y: hidden;" v-model="form.content" :defaultConfig="editorConfig"
@onCreated="handleCreated"/>
@onCreated="handleCreated" />
</el-card>
</el-form-item>
<el-form-item label=" ">
@ -53,12 +57,12 @@
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {getAssets} from "@/utils/index.ts";
import {onBeforeUnmount, ref, shallowRef, onMounted, reactive, nextTick} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {bmInfo, newsAdd} from "@/api/system/post";
import {koiNoticeError, koiNoticeSuccess} from "@/utils/koi.ts";
import {useRoute, useRouter} from 'vue-router';
import { getAssets } from "@/utils/index.ts";
import { onBeforeUnmount, ref, shallowRef, onMounted, reactive, nextTick } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { bmInfo, newsAdd } from "@/api/system/post";
import { koiNoticeError, koiNoticeSuccess } from "@/utils/koi.ts";
import { useRoute, useRouter } from 'vue-router';
import useTabsStore from "@/stores/modules/tabs.ts"; // 导入 useRoute
const router = useRouter();
const tabsStore = useTabsStore();
@ -68,7 +72,8 @@ const form = reactive({
subtitle: '',
reporter: '',
content: '',
coordinate_show:'',
coordinate_show: '',
video: '',
});
/*新闻坐标*/
const coordinate = ref();
@ -82,7 +87,7 @@ onMounted(() => {
})
const getBmInfo = async () => {
try {
const res: any = await bmInfo({id: id.value});
const res: any = await bmInfo({ id: id.value });
console.log("菜单数据表格数据->", res.data);
bmInfoData.value = res.data;
// koiNoticeSuccess("修改成功!");
@ -98,23 +103,23 @@ const onSubmit = async () => {
form.bm_id = id.value;
console.log(form);
if(form.new_name==''){
if (form.new_name == '') {
koiNoticeError("新闻标题不能为空！");
return;
}
if(form.reporter==''){
if (form.reporter == '') {
koiNoticeError("新闻记者不能为空！");
return;
}
if(form.coordinate=='' || typeof (form.coordinate)=='undefined'){
if (form.coordinate == '' || typeof (form.coordinate) == 'undefined') {
koiNoticeError("新闻坐标不能为空！");
return;
}
if(form.content==''){
if (form.content == '') {
koiNoticeError("新闻内容不能为空！");
return;
}
form.coordinate_show=`${rectCoordinates.value.x1},${rectCoordinates.value.y1},${rectCoordinates.value.x2},${rectCoordinates.value.y2}`;
form.coordinate_show = `${rectCoordinates.value.x1},${rectCoordinates.value.y1},${rectCoordinates.value.x2},${rectCoordinates.value.y2}`;
try {
const res: any = await newsAdd(form);
console.log("菜单数据表格数据->", res.data);
@ -158,8 +163,8 @@ const editorConfig = {
console.log(res);
// 从 res 中找到 url alt href ，然后插入图片
insertFn(res.data.fullurl, '', '')
}, onError:(file, err, res)=>{
if(err.message.indexOf('exceeds maximum allowed size') !== -1){
}, onError: (file, err, res) => {
if (err.message.indexOf('exceeds maximum allowed size') !== -1) {
koiNoticeError('图片限制为1M，请调整好再上传！');
}
},
@ -190,7 +195,7 @@ const imageWidth = ref(0); // 图片宽度
const imageHeight = ref(0); // 图片高度
const imageLoaded = ref(false); // 确保图片加载完成
const isDragging = ref(false); // 是否正在拖动
const dragStart = ref({x: 0, y: 0}); // 拖动开始的坐标
const dragStart = ref({ x: 0, y: 0 }); // 拖动开始的坐标
const allowClick = ref(true); // 是否允许点击
const allowClickTrue = () => {
@ -226,8 +231,8 @@ const handleClick = (event) => {
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
// 保存点击的坐标
points.value.push({x, y});
showPoints.value.push({xx, yy});
points.value.push({ x, y });
showPoints.value.push({ xx, yy });
console.log(`Clicked at: (${x}, ${y})`); // 调试信息
console.log(`Clicked at: (${xx}, ${yy})`); // 调试信息
// 确保 canvas 元素存在后再绘制
@ -285,7 +290,7 @@ const showCalculateRectangle = () => {
const y1 = Math.min(p1.yy, p2.yy, p3.yy, p4.yy);
const x2 = Math.max(p1.xx, p2.xx, p3.xx, p4.xx);
const y2 = Math.max(p1.yy, p2.yy, p3.yy, p4.yy);
s.value = {x1, y1, x2, y2};
s.value = { x1, y1, x2, y2 };
coordinate.value = `${x1},${y1},${x2},${y2}`;
};
// 计算矩形坐标
@ -297,7 +302,7 @@ const calculateRectangle = () => {
const x2 = Math.max(p1.x, p2.x, p3.x, p4.x);
const y2 = Math.max(p1.y, p2.y, p3.y, p4.y);
rectCoordinates.value = {x1, y1, x2, y2};
rectCoordinates.value = { x1, y1, x2, y2 };
// 显示矩形（用于视觉反馈）
rect.value = {
@ -347,7 +352,7 @@ const startDrag = (event: MouseEvent) => {
if (rectCoordinates.value) { // 确保矩形已绘制
isDragging.value = true;
allowClick.value = false; // 禁止点击
dragStart.value = {x: event.clientX, y: event.clientY};
dragStart.value = { x: event.clientX, y: event.clientY };
}
};
@ -369,7 +374,7 @@ const onDrag = (event) => {
s.value.y2 += dy;
coordinate.value = `${s.value.x1},${s.value.x2},${s.value.y1},${s.value.y2}`;
// 更新拖动起始点
dragStart.value = {x: event.clientX, y: event.clientY};
dragStart.value = { x: event.clientX, y: event.clientY };
// 重新绘制矩形
drawRectanglePath(rectCoordinates.value.x1, rectCoordinates.value.y1, rectCoordinates.value.x2, rectCoordinates.value.y2);
}

21
src/views/paper/article/update.vue
View File

@ -20,20 +20,23 @@
</el-col>
<el-col :span="16">
<el-form :model="form" label-width="auto">
<el-form-item label="新闻标题">
<el-input v-model="form.new_name" size="large"/>
<el-form-item label="新闻标题" required>
<el-input v-model="form.new_name" placeholder="请输入新闻标题" size="large"/>
</el-form-item>
<el-form-item label="新闻副标题">
<el-input v-model="form.subtitle" size="large"/>
<el-input v-model="form.subtitle" placeholder="请输入新闻副标题" size="large"/>
</el-form-item>
<el-form-item label="新闻记者">
<el-input v-model="form.reporter" size="large"/>
<el-form-item label="新闻记者" required>
<el-input v-model="form.reporter" placeholder="请输入新闻记者" size="large"/>
</el-form-item>
<el-form-item label="新闻坐标">
<el-input disabled v-model="coordinate" size="large"/>
<el-form-item label="新闻坐标" required>
<el-input disabled v-model="coordinate" placeholder="请选择新闻坐标" size="large"/>
<el-button class="mt-2" @click="allowClickTrue()">重新选择</el-button>
</el-form-item>
<el-form-item label="新闻详情">
<el-form-item label="新闻视频">
<el-input v-model="form.video" placeholder="请输入新闻视频" size="large"/>
</el-form-item>
<el-form-item label="新闻详情" required>
<el-card shadow="hover">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
<Editor style="height: 300px; overflow-y: hidden;" v-model="form.content" :defaultConfig="editorConfig"
@ -69,6 +72,7 @@ const form = reactive({
subtitle: '',
reporter: '',
content: '',
video: '',
});
/*新闻坐标 真实的*/
const coordinate = ref();
@ -95,6 +99,7 @@ const getNewsInfo = async () => {
form.bm_id = res.data.bm_id;
form.coordinate = res.data.coordinate;
form.coordinate_show=res.data.coordinate_show;
form.video = res.data.video;
coordinate.value = res.data.coordinate;
coordinateShow.value = res.data.coordinate_show;
await getBmInfo(res.data.bm_id);

17
src/views/paper/list/index.vue
View File

@ -58,6 +58,13 @@
</el-table-column>
<el-table-column label="操作" align="center" width="450px" fixed="right">
<template #default="{ row }">
<el-button v-if="row.level==1"
type="info"
@click="openA(row)"
>预览
</el-button>
<el-button v-if="row.level==1 && row.status==1"
type="primary"
@click="statusUpdate(row,0)"
@ -276,6 +283,14 @@ const Mp3Check = async (row) => {
}
}
const openA = (item) => {
console.log(item);
var url="https://jinrigushi.gushitv.com/#/?date="+item.datetime;
if(item.status==0){
url="https://jinrigushi.gushitv.com/#/?date="+item.datetime+"&status=1";
}
window.open(url);
}
/*PDF上传*/
const getFileList = (d) => {
console.log(d);
@ -480,7 +495,7 @@ const rowClick = (row, column, e) => {
// 重新渲染表格状态
const refreshTreeTable = ref(true);
// 是否展开[默认折叠]
const isExpandAll = ref(false);
const isExpandAll = ref(true);
/** 添加 */
const handleAdd = () => {

148
vite.config.ts.timestamp-1739755972639-96bbe1e519bc.mjs
View File

File diff suppressed because one or more lines are too long