Commit c6d6a13a authored by 姬鋆屾's avatar 姬鋆屾

pref:添加企业轮播图和视频上传,浏览和分享点击后展示弹窗内容

parent 234af950
export const timestampToTime = (timestamp, transLength) => {
// 时间戳为10位需*1000,时间戳为13位不需乘1000
let date = null;
if (timestamp) {
if (timestamp.length < 13) {
date = new Date(timestamp * 1000);
} else {
date = new Date(timestamp);
}
let Y = date.getFullYear() + "-";
let M =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1;
let D =
date.getDate() < 10 ? "-" + "0" + date.getDate() : "-" + date.getDate();
let h =
" " +
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
":";
let m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
let s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
switch (transLength) {
case 2:
return Y + M;
case 3:
return Y + M + D;
case 6:
return Y + M + D + h + m + s;
}
} else {
return "";
}
};
// 小时:分钟 ==》 转分钟
export const transFormMinut = (String) => {
if (typeof String === "number") {
return;
}
if (!String) {
return 0;
}
let arr = String.split(":");
let hour =
arr[0].indexOf("0") === 0 ? arr[0].substring(1, arr[0].length) : arr[0];
let minu =
arr[1].indexOf("0") === 0 ? arr[1].substring(1, arr[1].length) : arr[1];
return hour * 60 + minu * 1;
// return JSON.stringify(hour * 60 + minu * 1);
};
// // 分钟 ==》 小时
export const transFormTime = (num) => {
if (typeof num != "string" && num !== 0) {
return Math.floor(num / 60).toString() + ":" + (num % 60).toString();
} else {
return "0:00";
}
};
//当前月第一天
export const getFirstDay = () => {
let y = new Date().getFullYear(); //获取年份
let m = new Date().getMonth() + 1; //获取月份
let d = "01";
m = m < 10 ? "0" + m : m; //月份补 0
return [y, m, d].join("-");
};
//当前月最后一天
export const getLastDay = () => {
let y = new Date().getFullYear(); //获取年份
let m = new Date().getMonth() + 1; //获取月份
let d = new Date(y, m, 0).getDate(); //获取当月最后一日
m = m < 10 ? "0" + m : m; //月份补 0
d = d < 10 ? "0" + d : d; //日数补 0
return [y, m, d].join("-");
};
//获取两日期之间日期列表函数
export const getdiffdate = (stime, etime) => {
//初始化日期列表,数组
let diffdate = new Array();
let i = 0;
//开始日期小于等于结束日期,并循环
while (stime <= etime) {
diffdate[i] = stime;
//获取开始日期时间戳
let stime_ts = new Date(stime).getTime();
//增加一天时间戳后的日期
let next_date = stime_ts + 24 * 60 * 60 * 1000;
//拼接年月日,这里的月份会返回(0-11),所以要+1
let next_dates_y = new Date(next_date).getFullYear() + "-";
let next_dates_m =
new Date(next_date).getMonth() + 1 < 10
? "0" + (new Date(next_date).getMonth() + 1) + "-"
: new Date(next_date).getMonth() + 1 + "-";
let next_dates_d =
new Date(next_date).getDate() < 10
? "0" + new Date(next_date).getDate()
: new Date(next_date).getDate();
stime = next_dates_y + next_dates_m + next_dates_d;
//增加数组key
i++;
}
return diffdate;
};
// 获取某个日期是周几
export const getMyDay = (date) => {
let week;
if (date.getDay() == 0) week = "周日";
if (date.getDay() == 1) week = "周一";
if (date.getDay() == 2) week = "周二";
if (date.getDay() == 3) week = "周三";
if (date.getDay() == 4) week = "周四";
if (date.getDay() == 5) week = "周五";
if (date.getDay() == 6) week = "周六";
return week;
};
// 求两个日期的 分钟差
export const getMinu = (s1, s2) => {
var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
s1 = new Date((reDate.test(s1) ? s1 : "2023-01-01 " + s1).replace(/-/g, "/"));
s2 = new Date((reDate.test(s2) ? s2 : "2023-01-01 " + s2).replace(/-/g, "/"));
var ms = s2.getTime() - s1.getTime();
if (ms < 0) return 0;
return Math.floor(ms / 1000 / 60); //分钟
};
// 求两个日期的 秒差
export const getSec = (s1, s2) => {
var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
s1 = new Date((reDate.test(s1) ? s1 : "2023-01-01 " + s1).replace(/-/g, "/"));
s2 = new Date((reDate.test(s2) ? s2 : "2023-01-01 " + s2).replace(/-/g, "/"));
var ms = s2.getTime() - s1.getTime();
if (ms < 0) return 0;
return Math.floor(ms / 1000); //秒
};
......@@ -21,23 +21,26 @@
v-model="form.companyName"
placeholder="请输入企业名称"
/>
</el-row>
<el-row>
<Field
label="联系电话"
prop="contactPhone"
v-model="form.contactPhone"
placeholder="请输入联系电话"
/>
<!-- <Field label="公司编码" prop="companyCode" v-model="form.companyCode" placeholder="请输入公司编码"/>
</el-row>
<!-- <Field label="公司编码" prop="companyCode" v-model="form.companyCode" placeholder="请输入公司编码"/>
<Field label="注册号" prop="registrationNumber" v-model="form.registrationNumber" placeholder="请输入注册号"/>
<Field label="法定代表人" prop="legalRepresentative" v-model="form.legalRepresentative" placeholder="请输入法定代表人"/>
<Field label="注册资本" prop="registeredCapital" v-model="form.registeredCapital" placeholder="请输入注册资本"/>
<Field label="公司类型" prop="companyType" v-model="form.companyType" placeholder="请输入公司类型"/>
<Field :span="24" label="经营范围" prop="businessScope" v-model="form.businessScope" placeholder="请输入经营范围"/>-->
<!-- <Field :span="24" label="经营地址" prop="businessAdress" v-model="form.businessAdress" placeholder="请输入经营地址">
<!-- <Field :span="24" label="经营地址" prop="businessAdress" v-model="form.businessAdress" placeholder="请输入经营地址">
<p>当前选中的行政区划编码为: {{regionCodeList}}</p>
<el-cascader v-model="regionCodeList" :props="areaprops"></el-cascader>
</Field>-->
<el-row>
<Field
:span="24"
label="经营地址"
......@@ -50,14 +53,16 @@
@addressSelect="addressSelect"
></area-select>
</Field>
</el-row>
<el-row>
<!-- <Field label="所在地" prop="location" v-model="form.location" placeholder="请输入所在地"/> -->
<Field
prop="location"
v-model="form.location"
placeholder="请输入详细地址"
/>
<!-- <Field label="电子邮件地址" prop="email" v-model="form.email" placeholder="请输入电子邮件地址"/>
</el-row>
<!-- <Field label="电子邮件地址" prop="email" v-model="form.email" placeholder="请输入电子邮件地址"/>
<Field label="公司网站" prop="website" v-model="form.website" placeholder="请输入公司网站"/>
<Field label="税务登记号" prop="taxRegistrationNumber" v-model="form.taxRegistrationNumber" placeholder="请输入税务登记号"/>
<Field label="社会信用代码" prop="socialCreditCode" v-model="form.socialCreditCode" placeholder="请输入社会信用代码"/>
......@@ -69,13 +74,30 @@
<Field label="历史发展" prop="hisDevelop" v-model="form.hisDevelop" type="textarea" placeholder="请输入历史发展"/>
<Field label="经度" prop="lon" v-model="form.lon" placeholder="请输入经度"/>
<Field label="纬度" prop="lati" v-model="form.lati" placeholder="请输入纬度"/>-->
<!-- <Field label="公司文化" prop="companyCulture" v-model="form.companyCulture" type="textarea" placeholder="请输入公司文化"/>
<!-- <Field label="公司文化" prop="companyCulture" v-model="form.companyCulture" type="textarea" placeholder="请输入公司文化"/>
<Field label="排序" prop="sort" v-model="form.sort" type="num" placeholder="请输入排序"/>
<Field label="成立日期" prop="establishDate" v-model="form.establishDate" type="date" />-->
<el-row>
<Field :span="24" label="企业logo">
<imageUpload v-model="form.logoPath" prePath="/file/preview" />
</Field>
</el-row>
<el-row>
<Field :span="24" label="企业背景图">
<imageUpload v-model="form.background" prePath="/file/preview" />
</Field>
</el-row>
<el-row>
<!-- <Field
:span="24"
label="企业标签"
prop="companyLabelsList"
type="select"
:multiple="true"
:enumData="dict.labels"
v-model="form.companyLabelsList"
placeholder="请选择产品分类"
/> -->
<Field :span="24" label="企业标签">
<el-select
v-model="companyLabelsList"
......@@ -91,6 +113,26 @@
></el-option>
</el-select>
</Field>
</el-row>
<el-row>
<Field label="轮播图">
<imageUpload
v-model="form.companyPicPath"
prePath="/file/preview"
:isList="true"
ref="imgList"
/>
</Field>
</el-row>
<el-row>
<Field label="短视频"
><fileUpload
v-model="form.companyVideoPath"
:fileType="['mp4', 'avi']"
prePath="/file/fileupload"
/></Field>
</el-row>
<el-row>
<Field label="公司介绍">
<editor v-model="form.companyIntroduction" :min-height="150" />
</Field>
......@@ -285,7 +327,6 @@ export default {
],
logoPath: [
{ required: true, message: "请输入企业logo", trigger: "blur" },
{ max: 128, message: "最多只能录入128个字符", trigger: "blur" },
],
establishDate: [{ required: true, message: "请选择成立日期" }],
createTime: [{ required: true, message: "请选择创建时间" }],
......@@ -414,6 +455,15 @@ export default {
cancel() {
this.open = false;
},
beforeSubmit(data) {
// data.companyLabelsList = data.companyLabelsList.join(",");
let arr = [];
arr = this.$refs.imgList.imgList.map((v) => {
return v.response ? v.response.url : v.url.substr(v.url.indexOf("f"));
});
data.companyPicPath = arr.join(",");
return data;
},
/**获取数据后弹框 */
afterRender(data) {
this.open = true;
......@@ -452,6 +502,7 @@ export default {
lon: "",
lati: "",
logoPath: "",
background: "",
companyVideoPath: "",
companyPicPath: "",
companyIntroduction: "",
......
<template>
<div class="page">
<LayoutTable :data="tableData" :config="tableConfig" notDel>
</LayoutTable>
<drawer-show ref="drawerform" @ok="getData" />
<drawer-view ref="drawerview" @handletop="handleTop" @del="toDel"/>
</div>
<div class="page">
<LayoutTable :data="tableData" :config="tableConfig" notDel> </LayoutTable>
<drawer-show ref="drawerform" @ok="getData" />
<share-drawershow
ref="shareDrawershow"
:drawerTableData="drawerTableData"
/>
<drawer-view ref="drawerview" @handletop="handleTop" @del="toDel" />
</div>
</template>
<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import drawerView from "./drawerview";
import table from "@/assets/mixins/table";
export default {
name: "NewsList",
components: {
drawerShow,
drawerView
},
mixins: [table],
created() {
},
methods: {
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row,isopen) {
// this.$refs.drawerform.view(row);
// 这里查看不再和编辑共用界面,多写一个抽屉,但调用view方法接口
// this.$refs.drawerform.reset()
this.$refs.drawerform.query = { id: row.id };
this.$refs.drawerform.urls.currUrl ="news/view";
this.$refs.drawerform.$get('news/view', this.$refs.drawerform.query)
.then(({ data }) => {
if(!isopen){
this.$refs.drawerview.open = true
}
this.$refs.drawerview.form = data.entity
})
.catch(error => {
this.$refs.drawerview.form = {}
this.$message.error(error.message)
throw error
})
},
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import drawerView from "./drawerview";
import table from "@/assets/mixins/table";
import ShareDrawershow from "./shareDrawershow.vue";
export default {
name: "NewsList",
components: {
drawerShow,
drawerView,
ShareDrawershow,
},
mixins: [table],
created() {},
methods: {
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row, isopen) {
// this.$refs.drawerform.view(row);
// 这里查看不再和编辑共用界面,多写一个抽屉,但调用view方法接口
// this.$refs.drawerform.reset()
this.$refs.drawerform.query = { id: row.id };
this.$refs.drawerform.urls.currUrl = "news/view";
this.$refs.drawerform
.$get("news/view", this.$refs.drawerform.query)
.then(({ data }) => {
if (!isopen) {
this.$refs.drawerview.open = true;
}
this.$refs.drawerview.form = data.entity;
})
.catch((error) => {
this.$refs.drawerview.form = {};
this.$message.error(error.message);
throw error;
});
},
handleTop(row, top) {
this.$post("/news/save", { id: row.id, top: top })
.then((res) => {
if (res.code == 1) {
if (top == 0) {
this.$message.success("取消置顶成功!");
} else {
this.$message.success("置顶成功!");
}
this.toView({ id: row.id }, true);
this.getData();
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
handleViews(row) {
//查询详细
this.$post("/news/record/list", { newsId: row.id })
.then((res) => {
if (res.code == 1) {
console.log("views-data", res);
// this.getData();
this.drawerTableData = res.data;
this.drawerTableData.row = row;
this.drawerTableData.title = "浏览";
this.$refs.shareDrawershow.open = true;
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
handleShares(row) {
//分享详细
this.$post("/news/share/list", { newsId: row.id })
.then((res) => {
if (res.code == 1) {
this.drawerTableData = res.data;
this.drawerTableData.row = row;
this.drawerTableData.title = "分享";
this.$refs.shareDrawershow.open = true;
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
},
data() {
return {
drawerTableData: [],
config: {
search: [
{
name: "categoryId",
type: "select",
placeholder: "请选择新闻类型",
label: "新闻类型",
},
{
name: "title",
type: "text",
label: "新闻标题",
fuzzy: true,
},
],
columns: [
// {type: "selection", width: 60},
{ type: "index", label: "序号", width: 50 },
handleTop(row,top) {
{ label: "新闻标题", prop: "title" },
this.$post("/news/save",{id:row.id,top:top}).then((res) => {
if (res.code == 1) {
if(top==0){
this.$message.success("取消置顶成功!");
}else{
this.$message.success("置顶成功!");
}
this.toView({id:row.id},true)
this.getData();
}
})
.catch((error) => {
this.$message.error(error.message);
});
{ label: "新闻类型", prop: "categoryId", formatter: this.formatter },
{
label: "创建时间",
prop: "createDateTime",
formatter: this.formatterDate,
},
handleViews(row) {
//查询详细
this.$post("/news/record/list",{newsId:row.id}).then((res) => {
if (res.code == 1) {
console.log("views-data",res)
this.getData();
}
}).catch((error) => {
this.$message.error(error.message);
});
{
label: "数据",
formatter: (row) => {
let bool = false;
return (
<div>
<el-link
underline={bool}
onClick={() => {
this.handleViews(row);
}}
type="primary"
>
浏览({row.viewNums})
</el-link>
<br />
<el-link
underline={bool}
onClick={() => {
this.handleShares(row);
}}
type="primary"
>
分享({row.shareNums})
</el-link>
</div>
);
},
},
handleShares(row) {
//分享详细
this.$post("/news/share/list",{newsId:row.id}).then((res) => {
if (res.code == 1) {
console.log("shares-data",res)
this.getData();
}
}).catch((error) => {
this.$message.error(error.message);
});
{
label: "创建用户",
prop: "createUserId",
formatter: this.formatter,
},
},
data() {
return {
config: {
search: [
{
name: "categoryId",
type: "select",
placeholder:"请选择新闻类型",
label: "新闻类型"
},
{
name: "title",
type: "text",
label: "新闻标题",
fuzzy: true,
},
],
columns: [
// {type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "新闻标题", prop: "title"},
{label: "新闻类型", prop: "categoryId",formatter: this.formatter},
{label: "创建时间", prop: "createDateTime", formatter: this.formatterDate},
{label: "数据",formatter: row => {
let bool=false;
return (
<div>
<el-link underline={bool} onClick={() => {
this.handleViews(row);
}} type="primary">浏览({row.viewNums})</el-link><br/>
<el-link underline={bool} onClick={() => {
this.handleShares(row);
}} type="primary">分享({row.shareNums})</el-link>
</div>
);}},
{label: "创建用户", prop: "createUserId", formatter: this.formatter},
{
label: "操作",
width: 240,
formatter: row => {
return (
<div>
{row.top === 0 ? (
<el-button
size="mini"
type="text"
icon="el-icon-open"
onClick={() => {
this.handleTop(row,1);
}}
>
置顶
</el-button>
) : (
<el-button
size="mini"
type="text"
icon="el-icon-open"
onClick={() => {
this.handleTop(row,0);
}}
>
取消置顶
</el-button>
)}
<span> </span>
<table-buttons
noAdd
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
</div>
);
}
}
]
}
};
}
{
label: "操作",
width: 240,
formatter: (row) => {
return (
<div>
{row.top === 0 ? (
<el-button
size="mini"
type="text"
icon="el-icon-open"
onClick={() => {
this.handleTop(row, 1);
}}
>
置顶
</el-button>
) : (
<el-button
size="mini"
type="text"
icon="el-icon-open"
onClick={() => {
this.handleTop(row, 0);
}}
>
取消置顶
</el-button>
)}
<span> </span>
<table-buttons
noAdd
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
</div>
);
},
},
],
},
};
},
};
</script>
<template>
<!-- 弹出框表单 -->
<el-drawer
:visible.sync="open"
:direction="direction"
:destroy-on-close="true"
size="40%"
>
<div slot="title" class="title">
<h4
:class="activeTitle == 0 ? 'title_text active' : 'title_text'"
@click="handleTitle(0)"
>
浏览({{ drawerTableData.row ? drawerTableData.row.viewNums : 0 }}
</h4>
<h4
:class="activeTitle == 1 ? 'title_text active' : 'title_text'"
@click="handleTitle(1)"
>
分享({{ drawerTableData.row ? drawerTableData.row.shareNums : 0 }}
</h4>
</div>
<div class="form">
<el-table :data="tableData.data" border style="width: 100%">
<el-table-column type="index" width="50" label="序号">
</el-table-column>
<el-table-column prop="viewName" label="浏览人员"> </el-table-column>
<el-table-column prop="sumViews" label="浏览次数"> </el-table-column>
<el-table-column prop="viewTime" label="最近浏览时间">
<template slot-scope="scope">
<span>{{ timeFix(scope.row.viewTime) }}</span>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="tableData.current_page"
:page-size="10"
layout="total, prev, pager, next"
:total="tableData.total"
>
</el-pagination>
</div>
</div>
</el-drawer>
</template>
<script>
import form from "@/assets/mixins/formdialog";
import { timestampToTime } from "@/assets/utils/dateFormat.js";
export default {
name: "NewsDetail",
props: {
drawerTableData: {
type: Object,
default: {},
},
},
mixins: [form],
components: {},
computed: {
timeFix(val) {
console.log(val);
return (val) => {
let time = timestampToTime(val, 6);
return time;
};
},
},
data() {
return {
// 遮罩层
loading: false,
// 弹出层标题
title: "新闻",
// 是否显示弹出层
open: false,
tableData: [],
activeTitle: 0,
};
},
methods: {
// 标题切换操作
handleTitle(i) {
this.activeTitle = i;
this.activeTitle == 0 ? this.handleView() : this.handleShare();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.activeTitle == 0 ? this.handleView(val) : this.handleShare(val);
},
//查询详细
handleView(val = 1) {
this.$post("/news/record/list", {
newsId: this.drawerTableData.row.id,
page: val,
})
.then((res) => {
if (res.code == 1) {
this.tableData = res.data;
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
//分享详细
handleShare(val = 1) {
this.$post("/news/share/list", {
newsId: this.drawerTableData.row.id,
page: val,
})
.then((res) => {
if (res.code == 1) {
console.log("shares-data", res);
this.tableData = res.data;
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
/** 编辑 */
edit(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "news/edit";
this.getData();
this.pageInfo.type = "edit";
this.title = "修改新闻";
},
/** 新增 */
add(row) {
this.reset();
this.urls.currUrl = "news/add";
this.getData();
this.pageInfo.type = "add";
this.title = "新增新闻";
},
/** 查看*/
view(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "news/view";
this.getData();
this.pageInfo.type = "view";
this.title = "新闻详细";
},
/**取消按钮 */
cancel() {
this.open = false;
},
/**获取数据后弹框 */
afterRender(data) {
this.open = true;
},
},
watch: {
open: {
handler(val) {
if (val) {
this.tableData = this.drawerTableData;
console.log(this.drawerTableData);
this.drawerTableData.title == "浏览"
? (this.activeTitle = 0)
: (this.activeTitle = 1);
}
},
},
},
};
</script>
<style lang="less" scoped>
.footerbtns {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid gainsboro;
display: flex;
justify-content: center;
align-content: center;
}
.form {
width: 100%;
padding: 20px;
}
.title {
width: 100%;
display: flex;
align-items: center;
.title_text {
width: 20%;
color: #333;
opacity: 0.5;
cursor: pointer;
}
.active {
opacity: 1;
color: #333;
}
}
.block {
width: 100%;
text-align: end;
}
</style>
\ No newline at end of file
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