cjy-Web
/
cjy_web
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source 
# Conflicts:
#	src/views/cjy/columninfo/ColumnInfoForm.vue
#	src/views/components/v-header/index.vue
main
han 9 months ago
parent d6e75ca0b2 b896cdf208
commit b1d160afe1
3 changed files with 279 additions and 166 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 112
      src/components/ImageUpload/index.vue
  2. 251
      src/views/cjy/columninfo/ColumnInfoForm.vue
  3. 82
      src/views/components/v-header/index.vue

112
src/components/ImageUpload/index.vue
Unescape View File

@ -29,7 +29,31 @@
</div>
<el-dialog
:visible.sync="dialogVisible"
title="输入图片位置"
:visible.sync="positionDialogVisible"
width="400"
@close="resetPosition"
:modal="false"
append-to-body
>
<div>
<el-form :model="position" :rules="rules" ref="positionForm">
<el-form-item label="X 坐标" prop="x">
<el-input v-model="position.x" type="number"></el-input>
</el-form-item>
<el-form-item label="Y 坐标" prop="y">
<el-input v-model="position.y" type="number"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="positionDialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmPosition">确定</el-button>
</span>
</el-dialog>
<el-dialog
:visible.sync="previewDialogVisible"
title="预览"
width="800"
append-to-body
@ -67,6 +91,11 @@ export default {
isShowTip: {
type: Boolean,
default: true
},
// 是否显示位置信息输入框
showPositionInput: {
type: Boolean,
default: false
}
},
data() {
@ -74,11 +103,22 @@ export default {
number: 0,
uploadList: [],
dialogImageUrl: "",
dialogVisible: false,
positionDialogVisible: false, // 控制位置输入弹窗的显示
previewDialogVisible: false, // 控制预览弹窗的显示
hideUpload: false,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
fileList: []
fileList: [],
currentFile: null, // 当前上传的文件
position: { x: '', y: '' }, // 新增位置数据
rules: {
x: [
{ required: true, message: 'X 坐标为必填项', trigger: 'blur' }
],
y: [
{ required: true, message: 'Y 坐标为必填项', trigger: 'blur' }
]
}
};
},
watch: {
@ -114,19 +154,71 @@ export default {
// 删除图片
handleRemove(file, fileList) {
const findex = this.fileList.map(f => f.name).indexOf(file.name);
if(findex > -1) {
if (findex > -1) {
this.fileList.splice(findex, 1);
this.$emit("input", this.listToString(this.fileList));
}
},
// 取消上传的图片
cancelUpload() {
if (this.currentFile) {
// 调用 handleRemove 方法删除当前文件
this.handleRemove(this.currentFile, this.fileList);
}
this.currentFile = null; // 清空当前文件信息
this.positionDialogVisible = false; // 关闭位置输入弹窗
this.$modal.closeLoading(); // 关闭加载框
},
resetPosition() {
this.position.x = '';
this.position.y = '';
this.cancelUpload(); // 取消上传的图片
},
// 上传成功回调
handleUploadSuccess(res) {
// edit by 芋道源码
this.uploadList.push({ name: res.data, url: res.data });
if (this.uploadList.length === this.number) {
er
this.currentFile = { name: res.data, url: res.data };
// 检查当前文件是否已经存在于 fileList 中
const exists = this.fileList.some(file => file.name === this.currentFile.name);
if (!exists) {
this.fileList.push(this.currentFile); // 确保将当前文件添加到 fileList
}
if (this.showPositionInput) {
this.positionDialogVisible = true; // 显示位置输入弹窗
} else {
// 只在 uploadList 中添加当前文件
this.uploadList.push(this.currentFile);
this.updateFileList(); // 更新文件列表
this.$modal.closeLoading(); // 关闭加载框
}
},
confirmPosition() {
this.$refs.positionForm.validate((valid) => {
if (valid) {
const positionUrl = `${this.currentFile.url}?x=${this.position.x}&y=${this.position.y}`;
this.uploadList.push({ name: this.currentFile.name, url: positionUrl });
this.updateFileList1();
this.positionDialogVisible = false; // 关闭位置输入弹窗
} else {
// this.$message.error('请填写必填项');
}
});
},
// 更新文件列表
updateFileList() {
if (this.uploadList.length > 0) {
// this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = []; // 清空 uploadList
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
}
},
updateFileList1() {
if (this.uploadList.length > 0) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.uploadList = []; // 清空 uploadList
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
}
@ -173,7 +265,7 @@ export default {
// 预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
this.previewDialogVisible = true; // 显示预览弹窗
},
// 对象转成指定字符串分隔
listToString(list, separator) {

251
src/views/cjy/columninfo/ColumnInfoForm.vue
Unescape View File

@ -3,41 +3,41 @@
<!-- 对话框(添加 / 修改) -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
<el-form-item label="模块类型" prop="type">
<el-select v-model="formData.type" placeholder="请选择模块类型">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COLUMN_TYPE)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="资讯类型" prop="infoType">
<el-select v-model="formData.infoType" placeholder="请选择资讯类型">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFO_TYPE)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入标题"/>
</el-form-item>
<el-form-item label="副标题" prop="subtitle">
<el-input v-model="formData.subtitle" placeholder="请输入副标题"/>
</el-form-item>
<el-form-item label="跳转链接" prop="url">
<el-input v-model="formData.url" placeholder="请输入跳转链接"/>
</el-form-item>
<el-form-item label="简介">
<Editor v-model="formData.introduction" :min-height="192"/>
</el-form-item>
<el-form-item label="logo">
<ImageUpload v-model="formData.logo"/>
</el-form-item>
<el-form-item label="图库">
<ImageUpload v-model="formData.image"/>
</el-form-item>
<el-form-item label="内容">
<Editor v-model="formData.content" :min-height="192"/>
</el-form-item>
<el-form-item label="模块类型" prop="type">
<el-select v-model="formData.type" placeholder="请选择模块类型">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COLUMN_TYPE)"
:key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item v-if="formData.type==7" label="资讯类型" prop="infoType">
<el-select v-model="formData.infoType" placeholder="请选择资讯类型">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFO_TYPE)"
:key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item label="副标题" prop="subtitle">
<el-input v-model="formData.subtitle" placeholder="请输入副标题" />
</el-form-item>
<el-form-item label="跳转链接" prop="url">
<el-input v-model="formData.url" placeholder="请输入跳转链接" />
</el-form-item>
<el-form-item label="简介">
<Editor v-model="formData.introduction" :min-height="192"/>
</el-form-item>
<el-form-item label="logo">
<ImageUpload :limit="1" v-model="formData.logo"/>
</el-form-item>
<el-form-item label="图库">
<ImageUpload :showPositionInput="formData.type==6" v-model="formData.image"/>
</el-form-item>
<el-form-item label="内容">
<Editor v-model="formData.content" :min-height="192"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</div>
@ -46,102 +46,101 @@
</template>
<script>
import * as ColumnInfoApi from '@/api/cjy/columninfo';
import ImageUpload from '@/components/ImageUpload';
import Editor from '@/components/Editor';
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
export default {
name: "ColumnInfoForm",
components: {
ImageUpload,
Editor,
},
data() {
return {
// 弹出层标题
dialogTitle: "",
// 是否显示弹出层
dialogVisible: false,
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
formLoading: false,
// 表单参数
formData: {
id: undefined,
type: undefined,
infoType: undefined,
title: undefined,
subtitle: undefined,
url: undefined,
introduction: undefined,
logo: undefined,
image: undefined,
content: undefined,
},
// 表单校验
formRules: {
type: [{required: true, message: '模块类型不能为空', trigger: 'change'}],
},
};
},
methods: {
/** 打开弹窗 */
async open(id) {
this.dialogVisible = true;
this.reset();
// 修改时，设置数据
if (id) {
this.formLoading = true;
try {
const res = await ColumnInfoApi.getColumnInfo(id);
this.formData = res.data;
this.title = "修改栏目管理";
} finally {
this.formLoading = false;
}
}
this.title = "新增栏目管理";
import * as ColumnInfoApi from '@/api/cjy/columninfo';
import ImageUpload from '@/components/ImageUpload';
import Editor from '@/components/Editor';
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
export default {
name: "ColumnInfoForm",
components: {
ImageUpload,
Editor,
},
data() {
return {
// 弹出层标题
dialogTitle: "",
// 是否显示弹出层
dialogVisible: false,
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
formLoading: false,
// 表单参数
formData: {
id: undefined,
type: undefined,
infoType: undefined,
title: undefined,
subtitle: undefined,
url: undefined,
introduction: undefined,
logo: undefined,
image: undefined,
content: undefined,
},
// 表单校验
formRules: {
type: [{ required: true, message: '模块类型不能为空', trigger: 'change' }],
},
};
},
/** 提交按钮 */
async submitForm() {
// 校验主表
await this.$refs["formRef"].validate();
this.formLoading = true;
try {
const data = this.formData;
// 修改的提交
if (data.id) {
await ColumnInfoApi.updateColumnInfo(data);
this.$modal.msgSuccess("修改成功");
methods: {
/** 打开弹窗 */
async open(id) {
this.dialogVisible = true;
this.reset();
// 修改时，设置数据
if (id) {
this.formLoading = true;
try {
const res = await ColumnInfoApi.getColumnInfo(id);
this.formData = res.data;
this.title = "修改栏目管理";
} finally {
this.formLoading = false;
}
}
this.title = "新增栏目管理";
},
/** 提交按钮 */
async submitForm() {
// 校验主表
await this.$refs["formRef"].validate();
this.formLoading = true;
try {
const data = this.formData;
// 修改的提交
if (data.id) {
await ColumnInfoApi.updateColumnInfo(data);
this.$modal.msgSuccess("修改成功");
this.dialogVisible = false;
this.$emit('success');
return;
}
// 添加的提交
await ColumnInfoApi.createColumnInfo(data);
this.$modal.msgSuccess("新增成功");
this.dialogVisible = false;
this.$emit('success');
return;
} finally {
this.formLoading = false;
}
// 添加的提交
await ColumnInfoApi.createColumnInfo(data);
this.$modal.msgSuccess("新增成功");
this.dialogVisible = false;
this.$emit('success');
} finally {
this.formLoading = false;
},
/** 表单重置 */
reset() {
this.formData = {
id: undefined,
type: undefined,
infoType: undefined,
title: undefined,
subtitle: undefined,
url: undefined,
introduction: undefined,
logo: undefined,
image: undefined,
content: undefined,
};
this.resetForm("formRef");
}
},
/** 表单重置 */
reset() {
this.formData = {
id: undefined,
type: undefined,
infoType: undefined,
title: undefined,
subtitle: undefined,
url: undefined,
introduction: undefined,
logo: undefined,
image: undefined,
content: undefined,
};
this.resetForm("formRef");
}
}
};
};
</script>

82
src/views/components/v-header/index.vue
Unescape View File

@ -3,39 +3,40 @@
<div class="v-container cjy-header-box row flex-align-center">
<div class="cjy-header-logo"><img src="@/assets/images/logo-red.png" class="img" /></div>
<div class="cjy-header-nav row">
<div class="nav-item" v-for="(item,index) in nav_list" :key="index" @click="gotoPages(item.url)">{{ item.title }}</div>
<div class="nav-item" v-for="(item, index) in nav_list" :key="index" @click="gotoPages(item.url)">{{ item.title
}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
nav_list: []
}
},
mounted() {
this.getNavList()
},
methods: {
getNavList() {
this.nav_list = [
{title: "首页", url: ""},
{title: "解决方案", url: ""},
{title: "经典案例", url: "/case-list"},
{title: "新闻资讯", url: "/news-list"},
{title: "关于我们 ", url: "/about-us"}
]
export default {
name: "index",
data() {
return {
nav_list: []
}
},
mounted() {
this.getNavList()
},
// 跳转页面 函数
gotoPages(val) {
this.$router.push(val)
methods: {
getNavList() {
this.nav_list = [
{ title: "首页", url: "" },
{ title: "解决方案", url: "" },
{ title: "经典案例", url: "/case-list" },
{ title: "新闻资讯", url: "/news-list" },
{ title: "关于我们 ", url: "/about-us" }
]
},
// 跳转页面 函数
gotoPages(val) {
this.$router.push(val)
}
}
}
}
</script>
<style scoped lang="scss">
@ -48,12 +49,33 @@ export default {
.cjy-header-nav {
margin-left: 40px;
.nav-item {
margin: 0 30px;
color: #2A333D;
font-size: 16px;
cursor: pointer;
.nav-item {
margin: 0 30px;
color: #2A333D;
font-size: 16px;
cursor: pointer;
}
.nav-item {
position: relative;
}
.nav-item::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 100%;
height: 2px;
background-color: #0B59B3;
transform-origin: center;
transform: translate(-50%, 0) scaleX(0);
transition: transform 0.3s ease-in-out;
}
.nav-item:hover::before {
transform: translate(-50%, 0) scaleX(1);
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save