You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
557 lines
15 KiB
557 lines
15 KiB
<template>
|
|
<div>
|
|
<div class="dialog-h-content scroll-h">
|
|
<el-form
|
|
ref="ref_form"
|
|
:inline="true"
|
|
:model="formData"
|
|
:rules="dataRule"
|
|
class="form"
|
|
>
|
|
<el-form-item label="企业名称" prop="name" label-width="150px">
|
|
<el-input
|
|
class="item_width_1"
|
|
placeholder="请输入"
|
|
v-model="formData.name"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="企业类型" prop="type" label-width="150px">
|
|
<el-select
|
|
class="item_width_1"
|
|
placeholder="请选择"
|
|
v-model="formData.type"
|
|
>
|
|
<el-option
|
|
v-for="item in types"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="联系人" prop="contacts" label-width="150px">
|
|
<el-input
|
|
class="item_width_1"
|
|
placeholder="请输入"
|
|
v-model="formData.contacts"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="电话" prop="phone" label-width="150px">
|
|
<el-input
|
|
class="item_width_1"
|
|
placeholder="请输入"
|
|
v-model="formData.phone"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="地址" prop="address" label-width="150px">
|
|
<el-input
|
|
class="item_width_1"
|
|
placeholder="请输入"
|
|
v-model="formData.address"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="网址" prop="url" label-width="150px">
|
|
<el-input
|
|
class="item_width_1"
|
|
placeholder="请输入"
|
|
v-model="formData.url"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="mailbox" label-width="150px">
|
|
<el-input
|
|
class="item_width_1"
|
|
placeholder="请输入"
|
|
v-model="formData.mailbox"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="总结" prop="summary" label-width="150px">
|
|
<el-input
|
|
class="item_width_1"
|
|
type="textarea"
|
|
placeholder="请输入"
|
|
v-model="formData.summary"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="介绍" prop="introduction" label-width="150px">
|
|
<el-input
|
|
class="item_width_1"
|
|
type="textarea"
|
|
placeholder="请输入"
|
|
v-model="formData.introduction"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="荣誉资质" prop="honor" label-width="150px">
|
|
<!-- <Tinymce
|
|
class="tinymce_view"
|
|
v-model="formData.honor"
|
|
:height="300"
|
|
placeholder="在这里输入文字"
|
|
/> -->
|
|
<div class="imgs-list">
|
|
<div class="imgs-item" v-for="item in formData.honor" :key="item">
|
|
<el-image
|
|
style="width: 100px; height: 100px"
|
|
:src="item"
|
|
fit="fill"
|
|
></el-image>
|
|
<i class="el-icon-delete" @click="deleteImgs(item, 'honor')"></i>
|
|
</div>
|
|
<el-upload
|
|
:headers="$getElUploadHeaders()"
|
|
class="avatar-uploader"
|
|
:action="uploadUlr"
|
|
:data="{ customerId: customerId }"
|
|
:show-file-list="false"
|
|
:on-progress="handleProgress"
|
|
:on-success="handleImgSuccess1"
|
|
:before-upload="beforeImgUpload"
|
|
>
|
|
<el-progress
|
|
v-if="uploading"
|
|
:width="100"
|
|
type="circle"
|
|
:percentage="unloadPencent"
|
|
></el-progress>
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="企业展示" prop="display" label-width="150px">
|
|
<div class="imgs-list">
|
|
<div class="imgs-item" v-for="item in formData.display" :key="item">
|
|
<el-image
|
|
style="width: 100px; height: 100px"
|
|
:src="item"
|
|
fit="fill"
|
|
></el-image>
|
|
<i
|
|
class="el-icon-delete"
|
|
@click="deleteImgs(item, 'display')"
|
|
></i>
|
|
</div>
|
|
<el-upload
|
|
:headers="$getElUploadHeaders()"
|
|
class="avatar-uploader"
|
|
:action="uploadUlr"
|
|
:data="{ customerId: customerId }"
|
|
:show-file-list="false"
|
|
:on-progress="handleProgress"
|
|
:on-success="handleImgSuccess2"
|
|
:before-upload="beforeImgUpload"
|
|
>
|
|
<el-progress
|
|
v-if="uploading"
|
|
:width="100"
|
|
type="circle"
|
|
:percentage="unloadPencent"
|
|
></el-progress>
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</div>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="公司产品" prop="product" label-width="150px">
|
|
<Tinymce
|
|
class="tinymce_view"
|
|
v-model="formData.product"
|
|
:height="300"
|
|
placeholder="在这里输入文字"
|
|
/>
|
|
</el-form-item> -->
|
|
<el-form-item label="产业监控" prop="monitor" label-width="150px">
|
|
<div class="imgs-list">
|
|
<div class="imgs-item" v-for="item in formData.monitor" :key="item">
|
|
<el-image
|
|
style="width: 100px; height: 100px"
|
|
:src="item"
|
|
fit="fill"
|
|
></el-image>
|
|
<i
|
|
class="el-icon-delete"
|
|
@click="deleteImgs(item, 'monitor')"
|
|
></i>
|
|
</div>
|
|
<el-upload
|
|
:headers="$getElUploadHeaders()"
|
|
class="avatar-uploader"
|
|
:action="uploadUlr"
|
|
:data="{ customerId: customerId }"
|
|
:show-file-list="false"
|
|
:on-progress="handleProgress"
|
|
:on-success="handleImgSuccess3"
|
|
:before-upload="beforeImgUpload"
|
|
>
|
|
<el-progress
|
|
v-if="uploading"
|
|
:width="100"
|
|
type="circle"
|
|
:percentage="unloadPencent"
|
|
></el-progress>
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="排序"
|
|
prop="sort"
|
|
label-width="150px"
|
|
style="display: block"
|
|
>
|
|
<el-input-number
|
|
class="item_width_1"
|
|
placeholder="请输入"
|
|
v-model="formData.sort"
|
|
>
|
|
</el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="封面" prop="cover" label-width="150px">
|
|
<div class="imgs-list">
|
|
<div class="imgs-item" v-if="formData.cover">
|
|
<el-image
|
|
style="width: 100px; height: 100px"
|
|
:src="formData.cover"
|
|
fit="fill"
|
|
></el-image>
|
|
<i class="el-icon-delete" @click="formData.cover = null"></i>
|
|
</div>
|
|
<el-upload
|
|
:headers="$getElUploadHeaders()"
|
|
class="avatar-uploader"
|
|
:action="uploadUlr"
|
|
:data="{ customerId: customerId }"
|
|
:show-file-list="false"
|
|
:on-progress="handleProgress"
|
|
:on-success="handleImgSuccess"
|
|
:before-upload="beforeImgUpload"
|
|
>
|
|
<el-progress
|
|
v-if="uploading"
|
|
:width="100"
|
|
type="circle"
|
|
:percentage="unloadPencent"
|
|
></el-progress>
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="div_btn">
|
|
<el-button size="small" @click="handleCancle">取 消</el-button>
|
|
<el-button size="small" type="primary" @click="handleComfirm">
|
|
确 定
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Loading } from "element-ui"; // 引入Loading服务
|
|
import { requestPost, requestGet } from "@/js/dai/request";
|
|
import Tinymce from "@c/tinymce2/index.vue";
|
|
|
|
let loading; // 加载动画
|
|
export default {
|
|
data() {
|
|
return {
|
|
formType: "add", //表单操作类型 add新增，edit编辑，detail详情
|
|
loading: false,
|
|
formData: {
|
|
name: null,
|
|
content: null,
|
|
cover: "",
|
|
monitor: [],
|
|
display: [],
|
|
honor: [],
|
|
},
|
|
types: [
|
|
{
|
|
label: "高端科技人才",
|
|
value: "1",
|
|
},
|
|
{
|
|
label: "土秀才田专家",
|
|
value: "2",
|
|
},
|
|
],
|
|
unloadPencent: 0,
|
|
customerId: "",
|
|
uploading: false,
|
|
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
|
|
};
|
|
},
|
|
components: { Tinymce },
|
|
mounted() {
|
|
// this.initMap()
|
|
},
|
|
created() {
|
|
this.customerId = localStorage.getItem("customerId");
|
|
},
|
|
methods: {
|
|
async initForm(type, id) {
|
|
this.startLoading();
|
|
this.formType = type;
|
|
this.resetData();
|
|
if (id) {
|
|
const { data, code, msg } = await requestGet(
|
|
`/resi/partymember/icseedcompany/${id}`
|
|
);
|
|
if (code === 0) {
|
|
this.formData = {
|
|
...data,
|
|
monitor: data.monitor ? JSON.parse(data.monitor) : [],
|
|
display: data.display ? JSON.parse(data.display) : [],
|
|
honor: data.honor ? JSON.parse(data.honor) : [],
|
|
};
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
}
|
|
//获取服务事项
|
|
this.endLoading();
|
|
},
|
|
async handleComfirm() {
|
|
this.btnDisable = true;
|
|
setTimeout(() => {
|
|
this.btnDisable = false;
|
|
}, 10000);
|
|
this.$refs["ref_form"].validate((valid, messageObj) => {
|
|
if (!valid) {
|
|
app.util.validateRule(messageObj);
|
|
this.btnDisable = false;
|
|
} else {
|
|
this.addActivity();
|
|
}
|
|
});
|
|
},
|
|
async addActivity() {
|
|
let url = "/resi/partymember/icseedcompany";
|
|
const params = {
|
|
...this.formData,
|
|
monitor: JSON.stringify(this.formData.monitor),
|
|
display: JSON.stringify(this.formData.display),
|
|
honor: JSON.stringify(this.formData.honor),
|
|
};
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "操作成功",
|
|
});
|
|
this.resetData();
|
|
this.$emit("dialogOk");
|
|
this.btnDisable = false;
|
|
} else {
|
|
this.btnDisable = false;
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
deleteImgs(url, type) {
|
|
this.formData[type] = this.formData[type].filter((item) => item != url);
|
|
},
|
|
handleCancle() {
|
|
this.resetData();
|
|
this.$emit("dialogCancle");
|
|
},
|
|
|
|
beforeImgUpload(file) {
|
|
const isPNG = file.type === "image/png" || file.type === "image/jpeg";
|
|
const isLt1M = file.size / 1024 / 1024 < 10;
|
|
if (!isPNG) {
|
|
this.$message.error("上传图片只能是 PNG 或 JPEG 格式!");
|
|
}
|
|
if (!isLt1M) {
|
|
this.$message.error("上传图片大小不能超过 10MB!");
|
|
}
|
|
return isPNG && isLt1M;
|
|
},
|
|
handleImgSuccess(res, file) {
|
|
if (res.code === 0 && res.msg === "success") {
|
|
this.uploading = false;
|
|
this.unloadPencent = 0;
|
|
this.formData.cover = res.data.url;
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
},
|
|
handleImgSuccess1(res, file) {
|
|
if (res.code === 0 && res.msg === "success") {
|
|
this.uploading = false;
|
|
this.unloadPencent = 0;
|
|
if (this.formData.honor) {
|
|
this.formData.honor = [...this.formData.honor, res.data.url];
|
|
} else {
|
|
this.formData.honor = [res.data.url];
|
|
}
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
},
|
|
handleImgSuccess2(res, file) {
|
|
if (res.code === 0 && res.msg === "success") {
|
|
this.uploading = false;
|
|
this.unloadPencent = 0;
|
|
if (this.formData.display) {
|
|
this.formData.display = [...this.formData.display, res.data.url];
|
|
} else {
|
|
this.formData.display = [res.data.url];
|
|
}
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
},
|
|
handleImgSuccess3(res, file) {
|
|
if (res.code === 0 && res.msg === "success") {
|
|
this.uploading = false;
|
|
this.unloadPencent = 0;
|
|
if (this.formData.monitor) {
|
|
this.formData.monitor = [...this.formData.monitor, res.data.url];
|
|
} else {
|
|
this.formData.monitor = [res.data.url];
|
|
}
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
},
|
|
handleProgress(event, file, fileList) {
|
|
this.uploading = true;
|
|
this.unloadPencent = Number(file.percentage.toFixed(0));
|
|
},
|
|
resetData() {
|
|
this.formData = {
|
|
name: null,
|
|
type: null,
|
|
};
|
|
},
|
|
// 开启加载动画
|
|
startLoading() {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: "正在加载……", // 加载中需要显示的文字
|
|
background: "rgba(0,0,0,.7)", // 背景颜色
|
|
});
|
|
},
|
|
// 结束加载动画
|
|
endLoading() {
|
|
// clearTimeout(timer);
|
|
loading.close();
|
|
},
|
|
},
|
|
computed: {
|
|
dataRule() {
|
|
return {
|
|
name: [
|
|
{ required: true, message: "企业名称不能为空", trigger: "blur" },
|
|
],
|
|
type: [
|
|
{ required: true, message: "企业类型不能为空", trigger: "blur" },
|
|
],
|
|
};
|
|
},
|
|
},
|
|
props: {
|
|
types: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/modules/visual/communityManageForm.scss";
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.item_width_1 {
|
|
width: 560px;
|
|
|
|
/deep/.tox .tox-dialog {
|
|
z-index: 20000;
|
|
}
|
|
}
|
|
.tinymce_view {
|
|
::v-deep .tox .tox-dialog {
|
|
z-index: 2000000000;
|
|
}
|
|
}
|
|
|
|
.imgs-list {
|
|
width: 700px;
|
|
display: flex;
|
|
align-items: center;
|
|
.imgs-item {
|
|
position: relative;
|
|
margin-right: 10px;
|
|
.el-icon-delete {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
font-size: 18px;
|
|
color: red;
|
|
z-index: 3;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.div_map {
|
|
position: relative;
|
|
}
|
|
|
|
.div_searchmap {
|
|
z-index: 5000;
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
|
|
.tinymce_view {
|
|
height: 400px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.text_p {
|
|
margin: 0;
|
|
padding: 0 10px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 5px;
|
|
> p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.avatar-uploader {
|
|
::v-deep .el-upload {
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.el-upload:hover {
|
|
border-color: #409eff;
|
|
}
|
|
.avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
display: block;
|
|
}
|
|
.avatar-uploader-icon {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 100px;
|
|
height: 100px;
|
|
line-height: 100px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
|