Commit ea088866 by 林家欣

新增案例管理模块,联调50%

parent 1fd2d272
<template>
<el-dialog
:title="!dataForm.id ? '新增' : this.showInfo ? '详情' : '修改'"
:close-on-click-modal="false"
:visible.sync="visible"
>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="120px"
v-loading="loading"
>
<el-form-item label="标题" prop="firmname">
<el-input
v-model="dataForm.firmname"
placeholder="请输入标题"
v-show="!showInfo"
></el-input>
<p v-show="showInfo">{{ dataForm.firmname }}</p>
</el-form-item>
<el-form-item label="服务行业:" prop="service">
<el-select
v-model="dataForm.service"
placeholder="请选择服务行业"
v-show="!showInfo"
>
<el-option
v-for="item in serviceList"
:key="item.value"
:label="item.label"
:value="item.label"
>
</el-option>
</el-select>
<p v-show="showInfo">{{ dataForm.service }}</p>
</el-form-item>
<el-form-item label="网址:" prop="site">
<el-input
v-model="dataForm.site"
placeholder="请输入网址"
v-show="!showInfo"
></el-input>
<p v-show="showInfo">{{ dataForm.site }}</p>
</el-form-item>
<el-form-item label="联系人姓名:" prop="name">
<el-input
v-model="dataForm.name"
placeholder="请输入联系人姓名"
v-show="!showInfo"
></el-input>
<p v-show="showInfo">{{ dataForm.name }}</p>
</el-form-item>
<el-form-item label="联系电话:" prop="phone">
<el-input
v-model="dataForm.phone"
placeholder="请输入联系电话"
v-show="!showInfo"
></el-input>
<p v-show="showInfo">{{ dataForm.phone }}</p>
</el-form-item>
<el-form-item label="邮箱:" prop="email">
<el-input
v-model="dataForm.email"
placeholder="请输入邮箱"
v-show="!showInfo"
></el-input>
<p v-show="showInfo">{{ dataForm.email }}</p>
</el-form-item>
<el-form-item label="级别:" prop="levels">
<el-select
v-model="dataForm.levels"
placeholder="请选择级别"
v-show="!showInfo"
>
<el-option
v-for="item in piclevelList"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
<p v-show="showInfo">{{ dataForm.levels }}</p>
</el-form-item>
<el-form-item label="上传图片:" prop="pic">
<el-upload
v-show="!showInfo"
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="Upload"
:before-upload="beforeAvatarUpload"
>
<img v-if="dialogVisible" :src="imgUrlStr" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<p v-show="showInfo"><img :src="imgUrlStr" class="avatar" /></p>
</el-form-item>
<el-form-item label="企业简介:" prop="brief">
<Ueditor
@ready="editorReady"
:value="ueditor.value"
:config="ueditor.config"
ref="ue"
v-show="!showInfo"
></Ueditor>
<!-- <el-input v-model="dataForm.content" placeholder="请输入内容"></el-input> -->
<div v-show="showInfo" v-html="dataForm.brief"></div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer" v-show="!showInfo">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>
<script>
import Ueditor from "../temps/ueditor";
export default {
components: {
Ueditor,
},
data() {
return {
loading: false,
showInfo: false,
visible: false,
defaultProps: {
children: "children",
label: "label",
},
serviceList: [
{
value: "1",
label: "零售",
},
{
value: "2",
label: "电子商务",
},
{
value: "3",
label: "食品烟酒",
},
{
value: "4",
label: "医疗",
},
{
value: "5",
label: "物流",
},
{
value: "6",
label: "服装",
},
{
value: "7",
label: "快速消费品",
},
{
value: "8",
label: "消费电子产品",
},
{
value: "9",
label: "制造和零部件",
},
{
value: "10",
label: "建材",
},
{
value: "11",
label: "其他",
},
],
dataForm: {
id: 0,
firmname: "",
service: "",
site: "",
name: "",
phone: "",
email: "",
levels: "",
pic: "",
brief: "",
},
cclassidStr: undefined,
dataRule: {
firmname: [{ required: true, message: "标题不能为空", trigger: "blur" }],
service: [{ required: true, message: "服务行业不能为空", trigger: "blur" }],
site: [{ required: true, message: "网址不能为空", trigger: "blur" }],
name: [{ required: true, message: "联系人姓名不能为空", trigger: "blur" }],
phone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }],
email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
levels: [{ required: true, message: "级别不能为空", trigger: "blur" }],
pic: [{ required: true, message: "请上传图片", trigger: "blur" }],
brief: [{ required: true, message: "企业简介不能为空", trigger: "blur" }],
},
imgUrl: new FormData(),
imgUrlStr: "",
dialogVisible: false,
ueditor: {
value: "",
config: {},
},
piclevelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
};
},
methods: {
getSelectName(list, id) {
let arr = list.filter((item) => {
return item.id === id;
});
return arr[0].name;
},
init(id, showInfo) {
this.dataForm.id = id || 0;
this.visible = true;
this.showInfo = showInfo;
this.$nextTick(() => {
this.clearInp();
if (this.dataForm.id) {
this.loading = true;
this.$http({
url: this.$http.adornUrl(`/office/cases/info/${this.dataForm.id}`),
method: "get",
params: this.$http.adornParams(),
}).then(({ data }) => {
this.loading = false;
if (data && data.code === 0) {
this.dataForm = data.partners;
this.imgUrlStr = data.partners.pic;
this.dialogVisible = true;
this.ueditor.value = this.dataForm.brief;
}
});
}
});
},
// 表单提交
dataFormSubmit() {
this.$refs["dataForm"].validate((valid) => {
console.log(valid, '表单提交表单提交');
if (valid) {
this.loading = true;
this.$http({
url: this.$http.adornUrl(
`/office/cases/${!this.dataForm.id ? "save" : "update"}`
),
method: "post",
data: this.$http.adornData({
id: this.dataForm.id || undefined,
firmname: this.dataForm.firmname,
service: this.dataForm.service,
site: this.dataForm.site,
name: this.dataForm.name,
phone: this.dataForm.phone,
email: this.dataForm.email,
levels: this.dataForm.levels,
pic: this.dataForm.pic,
brief: this.dataForm.brief,
}),
}).then(({ data }) => {
this.loading = false;
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.visible = false;
this.$emit("refreshDataList");
},
});
} else {
this.$message.error(data.msg);
}
});
}
});
},
// 上传之前校验
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
if (!isPNG) {
this.$message.error("上传图片只能是 JPG, PNG 格式!");
}
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
if (file) {
var windowURL = window.URL || window.webkitURL;
this.imgUrlStr = windowURL.createObjectURL(file);
this.dialogVisible = true;
this.imgUrl.append("file", file);
}
},
Upload() {
this.$http({
url: this.$http.adornUrl("/office/file/uploadFile"),
method: "post",
data: this.imgUrl,
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) => {
console.log(res);
this.dataForm.pic = res.data.data;
})
.catch((err) => {
console.log(err);
});
},
// 选择栏目
handleChange(value) {
if (value.length === 1) {
this.classid = value[0];
} else if (value.length === 2) {
this.dataForm.classid = value[0];
this.dataForm.cclassid = value[1];
}
},
clearInp() {
this.$refs["dataForm"].resetFields();
this.imgUrlStr = "";
this.dialogVisible = false;
this.ueditor.value = "";
},
// 更新父子组件内容
editorReady(instance) {
instance.setContent(this.dataForm.brief);
instance.addListener("contentChange", () => {
this.dataForm.brief = instance.getContent();
});
},
},
};
</script>
<style scoped>
/* .form-list{
padding-left: 4%!important;
}
.el-form-item__content{
width: 50%;
}
.el-select,.el-input{
width: 241px!important;
}
.edui-editor{
width: 100%;
} */
</style>
\ No newline at end of file
<template>
<div class="mod-config mod-list-form">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
label-width="80px"
>
<el-form-item label="标题" prop="firmname">
<el-input
v-model="dataForm.firmname"
placeholder="请输入标题"
clearable
></el-input>
</el-form-item>
<el-form-item label="编辑人" prop="editor">
<el-input
v-model="dataForm.editor"
placeholder="请输入编辑人"
clearable
></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="dataForm.status" placeholder="请选择状态" clearable>
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="服务行业" prop="service">
<el-select
v-model="dataForm.service"
placeholder="请选择服务行业"
clearable
>
<el-option
v-for="item in serviceList"
:key="item.value"
:label="item.label"
:value="item.label"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="级别" prop="levels">
<el-select v-model="dataForm.levels" placeholder="请输入级别" clearable>
<el-option
v-for="item in piclevelList"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="发布日期" prop="releaseDate">
<el-date-picker
clearable
v-model="releaseDate"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item label="更新日期" prop="updateDate">
<el-date-picker
clearable
v-model="updateDate"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-button class="seach-btn" @click="getDataList()" type="primary"
>搜索</el-button
>
</el-form>
<div class="add-btn">
<el-button
v-if="isAuth('manage:news:save')"
type="primary"
@click="addOrUpdateHandle()"
>
+ 添加案例</el-button
>
</div>
<div class="table-list">
<el-table
:data="dataList"
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
border
style="width: 100%"
>
<el-table-column
prop="levels"
header-align="center"
align="center"
width="50px"
label="级别"
>
</el-table-column>
<el-table-column
prop="firmname"
header-align="center"
align="center"
label="标题"
>
</el-table-column>
<el-table-column
prop="service"
header-align="center"
align="center"
label="服务行业"
>
</el-table-column>
<el-table-column
prop="registerdate"
header-align="center"
align="center"
sortable
label="添加时间"
>
</el-table-column>
<el-table-column
prop="updatedate"
header-align="center"
align="center"
sortable
label="修改时间"
>
</el-table-column>
<el-table-column
prop="editor"
header-align="center"
align="center"
label="编辑人"
>
</el-table-column>
<el-table-column
prop="lasteditor"
header-align="center"
align="center"
label="最后编辑人"
>
</el-table-column>
<el-table-column
prop="auditor"
header-align="center"
align="center"
label="审核人"
>
</el-table-column>
<el-table-column
prop="checkDate"
header-align="center"
align="center"
sortable
label="审核时间"
>
</el-table-column>
<el-table-column
prop="status"
header-align="center"
align="center"
label="审核状态"
>
<template slot-scope="scope">
<div>
<span v-if="scope.row.status === 0">待审核</span>
<span v-if="scope.row.status === -1">失败</span>
<span v-if="scope.row.status === 1">成功</span>
</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作"
>
<template slot-scope="scope">
<el-button
v-if="isAuth('manage:news:check')"
type="text"
size="small"
@click="checkHandle(scope.row.id, 1)"
>[成功]</el-button
>
<el-button
v-if="isAuth('manage:news:check')"
type="text"
size="small"
@click="checkHandle(scope.row.id, -1)"
>[失败]</el-button
>
<br v-if="isAuth('manage:news:check')" />
<el-button
v-if="isAuth('manage:news:info')"
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id, true)"
>预览</el-button
>
<el-button
v-if="isAuth('manage:news:update')"
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>修改</el-button
>
<el-button
v-if="isAuth('manage:news:delete')"
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</div>
</div>
</template>
<script>
import AddOrUpdate from "./cases-add-or-update";
export default {
components: {
AddOrUpdate,
},
data() {
return {
addOrUpdateVisible: false,
dataForm: {
firmname: "",
editor: "",
status: "",
service: "",
levels: 0,
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
statusList: [
{
value: "0",
label: "待审核",
},
{
value: "-1",
label: "失败",
},
{
value: "1",
label: "成功",
},
],
serviceList: [
{
value: "1",
label: "零售",
},
{
value: "2",
label: "电子商务",
},
{
value: "3",
label: "食品烟酒",
},
{
value: "4",
label: "医疗",
},
{
value: "5",
label: "物流",
},
{
value: "6",
label: "服装",
},
{
value: "7",
label: "快速消费品",
},
{
value: "8",
label: "消费电子产品",
},
{
value: "9",
label: "制造和零部件",
},
{
value: "10",
label: "建材",
},
{
value: "11",
label: "其他",
},
],
piclevelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
updateDate: [],
releaseDate: [],
};
},
activated() {
this.getDataList();
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.$http({
url: this.$http.adornUrl("/office/cases/list"),
method: "post",
data: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
firmname: this.dataForm.firmname,
editor: this.dataForm.editor,
status: this.dataForm.status,
service: this.dataForm.service,
levels: this.dataForm.levels,
releaseTimeStart:
this.releaseDate === null ? "" : this.releaseDate[0],
releaseTimeEnd: this.releaseDate === null ? "" : this.releaseDate[1],
updateTimeStart: this.updateDate === null ? "" : this.updateDate[0],
updateTimeEnd: this.updateDate === null ? "" : this.updateDate[1],
auditor: this.dataForm.auditor,
}),
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.page.list;
this.totalPage = data.page.totalCount;
} else {
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList();
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val;
},
// 新增 / 修改
addOrUpdateHandle(id, showInfo) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id, showInfo);
});
},
// 删除
deleteHandle(id) {
var ids = id
? [id]
: this.dataListSelections.map((item) => {
return item.id;
});
this.$confirm(
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
this.$http({
url: this.$http.adornUrl("/office/cases/delete"),
method: "post",
data: this.$http.adornData(ids, false),
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
} else {
this.$message.error(data.msg);
}
});
})
.catch(() => {});
},
// 审核
checkHandle(id, status) {
let str = "";
if (status === 1) {
str = "成功";
} else {
str = "失败";
}
this.$confirm(`确定对[id=${id}]进行['审核${str}']操作?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$http({
url: this.$http.adornUrl("/office/cases/verifyNews"),
method: "post",
data: this.$http.adornData({
id: id,
status: status,
}),
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
} else {
this.$message.error(data.msg);
}
});
})
.catch(() => {});
},
},
};
</script>
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