Skip to content

Z
zj-manage
Commit 7a04889e by swl
Options

gx

parent 9836fd16
Showing with 568 additions and 99 deletions
src/api/livingCircle.js
import { api, formatParams } from "@/utils/axios";
// 生活地图--商家、居民申请列表
export function applyList(params) {
return api(
......@@ -125,6 +126,19 @@ export function iconUpload(params) {
})
);
}
// 上传-图片
export function uploadImg(params) {
let header = {
"Content-Type": "multipart/form-data",
};
let formData = new FormData();
formData.append("file", params);
return api(
Object.assign(formatParams("POST", formData, header), {
url: `/admin-api/file/uploadImg`,
})
);
}
// 关键词列表
export function getKeyword(params) {
return api(
......@@ -166,3 +180,11 @@ export function delKeyword(params) {
})
);
}
// 店铺-编辑
export function editShop(params) {
return api(
Object.assign(formatParams("POST", params), {
url: "/admin-api/living-circle/edit?id=" + params.id,
})
);
}
src/components/FileUpload.vue 0 → 100644
<template>
<div>
<el-upload
:disabled="disable"
ref="upload"
:http-request="upload"
class="upload-demo"
:file-list="value"
list-type="picture-card"
:on-remove="removeFile"
:on-exceed="fileExceed"
:before-upload="fileLimitFn"
:limit="limit"
:on-success="fileSuccess"
:on-error="fileError"
:on-preview="handlePreview"
action="#"
multiple
>
<!-- <el-button size="small" type="primary" icon="el-icon-upload"
>点击上传</el-button
> -->
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__tip" slot="tip">
<!-- <gaopaiyi @input="baseFileData"></gaopaiyi> -->
{{ tip }}
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<el-image
fit="contain"
:src="url"
style="width: 100%; margin: 20px auto"
/>
</el-dialog>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import axios from "axios";
//import gaopaiyi from "./gaopaiyi.vue";
import { config } from "@/utils/request";
export default {
name: "FileUpload",
components: {},
props: {
data: {
type: Array,
require: true,
default: () => {
return [];
},
},
fileType: {
type: String,
default: () => {
return "img";
},
},
fileSize: {
type: Number,
default: () => {
return 50;
},
},
limit: {
type: Number,
default: () => {
return 10;
},
},
disable: {
type: Boolean,
default: () => {
return false;
},
},
needValid: {
type: Boolean,
default: () => {
return false;
},
},
},
data() {
return {
progressFlag: true,
dialogImageUrl: "",
dialogVisible: false,
imgType: ["jpg", "jpeg", "png", "gif"],
fileList: [],
url: "",
};
},
computed: {
tip() {
return `支持上传${
this.fileType == "all"
? "任意格式"
: this.fileType == "img"
? "图片类型"
: "非图片类型"
}文件，且单个文件不能超过${this.fileSize}MB，最多上传${this.limit}个文件`;
},
value: {
get() {
return this.data;
},
set(val) {
this.$emit("update:data", val);
},
},
},
methods: {
// 文件上传操作
upload(file) {
let formData = new FormData();
formData.append("file", file.file);
axios
.post(`${config.proxy}/admin-api/file/uploadImg`, formData, {
headers: {
"Content-Type": "multipart/form-data",
Authorization: getToken() ? "Bearer " + getToken() : "",
},
onUploadProgress: (progressEvent) => {
let percent =
((progressEvent.loaded / progressEvent.total) * 100) | 0;
//调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
file.onProgress({ percent: percent });
},
})
.then((res) => {
if (res.data.code == 200) {
file.onSuccess(res.data);
} else {
file.onError(res.data);
}
})
.catch((error) => {
file.onError(error);
});
},
// 文件移除操作
removeFile(file, fileList) {
this.value = fileList;
this.needValid ? this.$emit("fileValid") : "";
},
chargeImg(name) {
let type = name
? name.substring(name.lastIndexOf(".") + 1).toLowerCase()
: "";
return this.imgType.includes(type);
},
// 上传前的限制
fileLimitFn(file) {
const fileSize = file.size / 1024 / 1024;
// 类型限制
if (this.fileType == "img" && !this.chargeImg(file.name)) {
this.$notify.warning(`非图片类型的文件不支持上传`);
return false;
} else if (this.fileType == "file" && this.chargeImg(file.name)) {
this.$notify.warning(`图片类型的文件不支持上传`);
return false;
}
// 大小限制
if (fileSize > this.fileSize) {
this.$notify.warning(`${file.name}文件大小不得超过${this.fileSize}MB`);
return false;
}
},
// 文件超出个数限制
fileExceed() {
this.$notify.warning(`允许上传的最大个数${this.limit}个`);
},
// 文件上传成功
fileSuccess(responese, file, fileList) {
console.log(responese, file, fileList, "fileSuccess");
// if (file.uid) {
// this.$fileReady[file.uid] = "success";
// this.$store.commit("utils/SET_FILEREADY", this.$fileReady);
// }
file.url = responese.data;
delete file.raw;
delete file.percentage;
delete file.response;
delete file.size;
this.value = fileList;
},
// 文件上传失败
fileError(res, file) {
if (file.uid) {
delete this.$fileReady[file.uid];
// this.$store.commit("utils/SET_FILEREADY", this.$fileReady);
}
this.$notify.warning("上传文件失败");
},
// 文件预览
handlePreview(file) {
this.url = file.url;
this.dialogVisible = true;
},
},
};
</script>
<style>
.upload-demo .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.upload-demo .el-upload:hover {
border-color: #409eff;
}
.upload-demo .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100% !important;
height: 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
</style>
src/views/livingCircle/category.vue
......@@ -134,7 +134,6 @@
:show-file-list="false"
action="#"
:http-request="upload"
:before-upload="beforeUpload"
>
<img
v-if="dataForm.iconUrl"
......@@ -253,7 +252,6 @@ export default {
this.menuList = res.data;
});
},
beforeUpload() {},
upload(file) {
this.dataForm.iconUrl = URL.createObjectURL(file.file);
......@@ -318,7 +316,7 @@ export default {
id: this.dataForm.id,
name: this.dataForm.name,
sort: this.dataForm.sort,
iconUrl: this.dataForm.iconUrl,
iconUrl: this.dataForm.iconUrl1,
menuId: this.dataForm.menuId,
};
editCategory(params).then((res) => {
......
src/views/livingCircle/enter.vue
......@@ -83,7 +83,12 @@
:pagination="pagination"
@Jump="jumpPage"
>
<el-table-column slot="type" label="入驻类型" align="center">
<el-table-column
slot="type"
label="入驻类型"
align="center"
width="120px"
>
<template slot-scope="scope">
<el-tag
v-if="
......@@ -110,7 +115,12 @@
>
</template>
</el-table-column>
<el-table-column slot="state" label="审核状态" align="center">
<el-table-column
slot="state"
label="审核状态"
align="center"
width="120px"
>
<template slot-scope="scope">
<el-tag
v-if="
......@@ -129,7 +139,12 @@
>
</template>
</el-table-column>
<el-table-column slot="delFlag" label="启用状态" align="center">
<el-table-column
slot="delFlag"
label="启用状态"
align="center"
width="120px"
>
<template slot-scope="scope">
<el-tag
v-if="scope.row.delFlag == 0 || scope.row.delFlag == 1"
......@@ -162,6 +177,9 @@
<el-button type="primary" size="mini" round @click="view(scope.row)"
>查看</el-button
>
<el-button type="success" size="mini" round @click="edit(scope.row)"
>编辑</el-button
>
<el-button
@click="delFlagHandle(scope.row)"
:type="scope.row.delFlag == 0 ? 'warning' : 'success'"
......@@ -170,62 +188,107 @@
slot="reference"
>{{ scope.row.delFlag == 0 ? "禁用" : "启用" }}
</el-button>
<!-- <el-button type="danger" size="mini" round @click="del(scope.row)"
>删除</el-button
> -->
</template>
</el-table-column>
</table-template>
</div>
<el-dialog
title="详情"
:title="type == 'view' ? '详情' : '编辑'"
:visible.sync="dialogVisible"
width="30%"
width="40%"
destroy-on-close
>
<div class="cell">
<p class="label">名称</p>
<p class="value">{{ detail.name }}</p>
</div>
<div class="cell">
<p class="label">入驻类型</p>
<p class="value">
<el-tag
v-if="detail.type == 0 || detail.type == 1"
:type="detail.type == 1 ? 'success' : ''"
<el-form
:model="detail"
:rules="rules"
ref="ruleForm"
label-width="120px"
class="demo-ruleForm formData"
>
{{ detail.type == 0 ? "商家入驻" : "上报网红墙" }}</el-tag
<el-form-item label="名称" prop="name">
<el-input
v-model="detail.name"
clearable
placeholder="请输入名称"
:disabled="type == 'view'"
></el-input>
</el-form-item>
<el-form-item label="入驻类型" prop="type">
<el-radio-group v-model="detail.type" disabled>
<el-radio :label="0">商家入驻</el-radio>
<el-radio :label="1">上报地点</el-radio>
<el-radio :label="2">上报网红墙</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="类型" prop="categoryIds">
<el-cascader
:disabled="type == 'view'"
style="width: 100%"
:options="menuOptions"
clearable
filterable
v-model="detail.categoryIds"
@change="categoryChange"
placeholder="请选择类型"
></el-cascader>
</el-form-item>
<el-form-item
label="经营范围和内容"
prop="otherInfo"
v-if="detail.otherInfo"
>
</p>
</div>
<div class="cell">
<p class="label">类型</p>
<p class="value">{{ detail.category }}</p>
</div>
<div class="cell" v-if="detail.otherInfo">
<p class="label">经营范围和内容</p>
<p class="value">{{ detail.otherInfo }}</p>
</div>
<div class="cell">
<p class="label">详细地址</p>
<p class="value">{{ detail.address }}</p>
</div>
<div class="cell">
<p class="label">区</p>
<p class="value">{{ detail.district }}</p>
</div>
<div class="cell">
<p class="label">电话</p>
<p class="value">{{ detail.phone }}</p>
</div>
<div class="cell">
<p class="label">营业时间</p>
<p class="value">{{ detail.businessHours }}</p>
</div>
<div class="cell">
<p class="label">创建时间</p>
<p class="value">{{ detail.createTime }}</p>
</div>
<div class="cell">
<p class="label">审核状态</p>
<p class="value">
<el-input
v-model="detail.otherInfo"
clearable
placeholder="请输入经营范围和内容"
:disabled="type == 'view'"
></el-input>
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input
v-model="detail.address"
clearable
placeholder="请输入详细地址"
:disabled="type == 'view'"
></el-input>
</el-form-item>
<el-form-item label="区" prop="district">
<el-input
v-model="detail.district"
placeholder="请输入区"
clearable
disabled
></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input
v-model="detail.phone"
placeholder="请输入电话"
clearable
:disabled="type == 'view'"
></el-input>
</el-form-item>
<el-form-item label="营业时间" prop="businessHours">
<el-input
v-model="detail.businessHours"
clearable
placeholder="例如：周一至周五 9:00-23:00"
:disabled="type == 'view'"
></el-input>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-input v-model="detail.createTime" clearable disabled></el-input>
</el-form-item>
<el-form-item label="启用状态" prop="delFlag">
<el-radio-group v-model="detail.delFlag" disabled>
<el-radio :label="1">禁用</el-radio>
<el-radio :label="0">启用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="审核状态" prop="state">
<el-tag
v-if="detail.state == 0 || detail.state == 1 || detail.state == 4"
:type="
......@@ -239,34 +302,26 @@
: "未审核"
}}</el-tag
>
</p>
</div>
<div class="cell">
<p class="label">启用状态</p>
<p class="value">
<el-tag
v-if="detail.delFlag == 0 || detail.delFlag == 1"
:type="detail.delFlag == 1 ? 'danger' : 'success'"
>{{ detail.delFlag == 1 ? "禁用" : "启用" }}</el-tag
>
</p>
</div>
<div class="cell">
<p class="label">照片</p>
<p class="value">
<el-image
v-for="(item, index) in detail.pictureList"
:key="index"
style="width: 100px; height: 100px; margin-right: 10px"
:src="item.url"
:z-index="7777777"
:preview-src-list="[item.url]"
>
</el-image>
</p>
</div>
</el-form-item>
<el-form-item label="门面照片">
<file-upload
:data.sync="shopImg"
:limit="1"
:disable="type == 'view'"
></file-upload>
</el-form-item>
<span slot="footer" class="dialog-footer">
<el-form-item label="左右店铺">
<file-upload
:data.sync="besideImg"
:limit="2"
:disable="type == 'view'"
></file-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer" v-if="type == 'view'">
<el-button
type="success"
round
......@@ -292,22 +347,33 @@
>确 定</el-button
> -->
</span>
<span slot="footer" class="dialog-footer" v-else>
<el-button type="primary" round @click="dialogVisible = false"
>取 消</el-button
>
<el-button type="success" round @click="editConfirm">确 定</el-button>
</span>
</el-dialog>
<el-dialog :visible.sync="visible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
import tableTemplate from "@/components/Table";
import FileUpload from "@/components/FileUpload.vue";
import {
applyList,
applyReview,
applyDetail,
shopEnable,
shopMenu,
editShop,
} from "@/api/livingCircle";
export default {
name: "enter",
components: { tableTemplate },
components: { tableTemplate, FileUpload },
data() {
return {
dialogVisible: false,
......@@ -320,13 +386,15 @@ export default {
categoryId: "",
},
menuOptions: [],
visible: false,
dialogImageUrl: "",
loading: false,
tableData: [],
tableColumns: [
{
key: "name",
label: "名称",
width: 180,
},
{
key: "type",
......@@ -336,6 +404,7 @@ export default {
{
key: "category",
label: "类型",
width: 120,
},
{
key: "district",
......@@ -354,15 +423,12 @@ export default {
{
key: "phone",
label: "联系电话",
width: 150,
},
{
key: "businessHours",
label: "营业时间",
},
{
key: "createTime",
label: "创建时间",
width: 180,
width: 150,
},
{
......@@ -375,16 +441,16 @@ export default {
label: "启用状态",
type: "slot",
},
// {
// key: "url",
// label: "营业执照",
// type: "slot",
// },
// {
// key: "url1",
// label: "身份证",
// type: "slot",
// },
{
key: "userName",
label: "创建人",
width: 120,
},
{
key: "createTime",
label: "创建时间",
width: 170,
},
],
pagination: {
total: 0,
......@@ -392,10 +458,20 @@ export default {
currentPage: 1,
},
rules: {
name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
address: [
{ required: true, message: "请输入详细地址", trigger: "blur" },
],
categoryIds: [
{ required: true, message: "请选择类型", trigger: "blur" },
],
},
userName: "",
typeList: [],
type: "view",
categoryName: "",
shopImg: [],
besideImg: [],
};
},
mounted() {
......@@ -404,7 +480,53 @@ export default {
this.init();
this.getShopMenu();
},
computed: {
fileType() {
return ["jpeg", "png", "jpg"];
},
},
methods: {
editConfirm() {
let arr = [];
let arr1 = [];
this.shopImg.forEach((item) => {
arr.push({
url: item.url,
urlType: 0,
});
});
this.besideImg.forEach((item) => {
arr1.push({
url: item.url,
urlType: 1,
});
});
console.log(arr, arr1);
let params = {
address: this.detail.address,
businessHours: this.detail.businessHours,
categoryId: this.detail.categoryIds[1],
name: this.detail.name,
phone: this.detail.phone,
pictureList: [...arr, ...arr1],
id: this.detail.id,
};
editShop(params).then((res) => {
if (res.code == 200) {
this.$message.success(res.msg || "编辑成功");
this.dialogVisible = false;
this.init();
} else {
this.$message.warning(res.msg || "编辑失败");
}
});
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.visible = true;
},
getShopMenu() {
shopMenu().then((res) => {
if (res.code == 200) {
......@@ -436,8 +558,11 @@ export default {
this.init();
// console.log("menuChange--->", val, this.searchForm.categoryId);
},
categoryChange(val) {
console.log(val);
},
init() {
this.loading = true;
applyList({
name: this.searchForm.name,
state: this.searchForm.state,
......@@ -448,6 +573,8 @@ export default {
categoryId: this.searchForm.categoryId,
}).then((res) => {
if (res.code == 200) {
this.loading = false;
this.tableData =
res.data.list && res.data.list.length > 0
? res.data.list.map((item) => {
......@@ -480,6 +607,7 @@ export default {
this.pagination.total = res.data.total;
} else {
this.$message.warning(res.msg || "查询列表失败");
this.loading = false;
}
});
},
......@@ -551,11 +679,74 @@ export default {
// });
// this.dialogVisible = false;
},
filterTree(val) {
let arr = [];
this.menuOptions.forEach((item) => {
item.children.forEach((it) => {
if (it.value == val) {
this.categoryName = `${item.label}-${it.label}`;
arr = [item.value, it.value];
return;
}
});
});
return arr;
},
view(row) {
this.type = "view";
applyDetail(row.id).then((res) => {
if (res.code == 200) {
this.detail = res.data;
this.detail.categoryIds = this.filterTree(res.data.categoryId);
let arr = [];
let arr1 = [];
res.data.pictureList?.forEach((item) => {
if (item.urlType == 0) {
arr.push({
url: item.url,
urlType: item.urlType,
});
} else {
arr1.push({
url: item.url,
urlType: item.urlType,
});
}
});
this.shopImg = arr;
this.besideImg = arr1;
this.dialogVisible = true;
} else {
this.$message.warning(res.msg || "获取详情失败");
}
});
},
edit(row) {
this.type = "edit";
applyDetail(row.id).then((res) => {
if (res.code == 200) {
this.detail = res.data;
this.detail.categoryIds = this.filterTree(res.data.categoryId);
let arr = [];
let arr1 = [];
res.data.pictureList?.forEach((item) => {
if (item.urlType == 0) {
arr.push({
url: item.url,
urlType: item.urlType,
});
} else {
arr1.push({
url: item.url,
urlType: item.urlType,
});
}
});
this.shopImg = arr;
this.besideImg = arr1;
this.dialogVisible = true;
} else {
this.$message.warning(res.msg || "获取详情失败");
......@@ -646,4 +837,33 @@ export default {
}
}
}
.formData{
height 600px
overflow auto
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment