<!doctype html>
|
<html>
|
<head>
|
<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
|
<title>商业首页</title>
|
|
<script type="text/javascript">
|
var pageVue = null;
|
function loadJsCss(callback) {
|
var jscss_urls = [];
|
window.top.initJsCss(document, jscss_urls, callback);
|
};
|
|
function initVue() {
|
new BasicsVue({
|
el: "#vbody",
|
data: {
|
title: "商业首页",
|
tableData: [],
|
dataRequest: [
|
// {
|
// name: "modulelist",//首页模块
|
// dataname: "",
|
// isnotoption: true, //true:不是选项
|
// },
|
|
{
|
name: "implant_alter_date",//植入上报
|
url: "root/data/getEntitySet",
|
paramsobj: {dataname: "md_calendar", filter: "year=" + new Date().getFullYear() + " and is_implant_open='T'"},
|
isnotoption: true, //true:不是选项
|
},
|
{
|
name: "implant_alter_date_day",//植入上报
|
url: "root/data/getEntitySet",
|
paramsobj: {dataname: "md_calendar", filter: "doc_date='" + dateFormat(new Date(), "yyyy-MM-dd") + "'"},
|
isnotoption: true, //true:不是选项
|
},
|
// {
|
// name: "sys_notify_message",// 近效期提醒
|
// url: "root/data/getEntitySet",
|
// paramsobj: {dataname: "sys_notify_message", filter: "notify_id='Customer.Licence'"},
|
// isnotoption: true, //true:不是选项
|
// },
|
|
{
|
name: "sys_notify_message", // 证照有效期
|
url: "root/data/getEntitySet",
|
paramsobj: {dataname: "md_org", filter: "id='" + window.top.vue.userinfo.org.id + "'"},
|
isnotoption: true, //true:不是选项
|
},
|
],
|
|
// 首页模板列表
|
modulelist: [
|
{isshow: "T", code: "M001", title: "我的通知", layout: "left", width: "100%", height: "100%", order_no: 1},
|
// {isshow: "T", code: "M002", title: "我的申请", layout: "left", width: "50%", height: "30%", order_no: 2},
|
// {isshow: "T", code: "M003", title: "我的指标", layout: "left", width: "100%", height: "35%", order_no: 3},
|
// {isshow: "T", code: "M004", title: "我的客户", layout: "left", width: "100%", height: "35%", order_no: 4},
|
{isshow: "T", code: "M007", title: "证照有效期", layout: "right", width: "100%", height: "20%", order_no: 2},
|
{isshow: "T", code: "M005", title: "植入日历", layout: "right", width: "100%", height: "50%", order_no: 5},
|
{isshow: "T", code: "M006", title: "快捷入口", layout: "right", width: "100%", height: "30%", order_no: 6},
|
],
|
moduleLayout: {
|
// left: [
|
// {isshow: "T", code: "001", title: "我的通知", layout: "left", width: "50%", height: "30%", order_no: 1},
|
// {isshow: "T", code: "002", title: "我的申请", layout: "left", width: "50%", height: "30%", order_no: 2},
|
// {isshow: "T", code: "003", title: "我的指标", layout: "left", width: "100%", height: "30%", order_no: 3},
|
// {isshow: "T", code: "004", title: "我的客户", layout: "left", width: "100%", height: "30%", order_no: 4},
|
// ],
|
// right: [
|
// {isshow: "T", code: "005", title: "植入日历", layout: "right", width: "100%", height: "50%", order_no: 5},
|
// {isshow: "T", code: "006", title: "快捷入口", layout: "right", width: "100%", height: "50%", order_no: 6},
|
// ],
|
},
|
|
dataobj: {
|
M001: [ // "2024-01-18 09:49:22"
|
// {create_time: createDatetime(), type_name: "", title: "欢迎新用户", remark: "欢迎【"+window.top.vue.userinfo.org.name+"】使用远大器械经销商管理系统",
|
// //files: [{fileid: "", filename: "", dataname: ""}],
|
// },
|
{id: "111", title: "《客户DMS操作手册-简版-1.1》", create_time: "2024-03-20 15:48:04",
|
files: [
|
{filename: "客户DMS操作手册-简版-1.1.pdf", fileid: "11111", dataname: "sys_notify_message"},
|
]},
|
],
|
M002: [
|
|
],
|
M003: {
|
year: {year:"2023", quarter: "3", month:"7", amt_target: 600, amt_sale: 300, rate_completion: 50},
|
quarter: {year:"2023", quarter: "3", month:"7", amt_target: 150, amt_sale: 100, rate_completion: 66},
|
month: {year:"2023", quarter: "3", month:"7", amt_target: 50, amt_sale: 40, rate_completion: 80},
|
},
|
M004: {
|
Customer: [
|
{type:"Customer", actor: "一级经销商", cnt: 6},
|
{type:"Customer", actor: "平台", cnt: 1},
|
{type:"Customer", actor: "二级经销商", cnt: 5},
|
{type:"Customer", actor: "配送商", cnt: 8},
|
],
|
Hospital: [
|
{type:"hospital", actor: "三级医院", cnt: 62},
|
{type:"hospital", actor: "其它医院", cnt: 12},
|
]
|
},
|
M007: [
|
// {name: "营业执照", todate: "2053-10-12", isalert: true},
|
// {name: "经营许可证", todate: "2053-10-12"},
|
// {name: "采购授权书", todate: "2053-10-12"},
|
],
|
},
|
|
implantDates: [],
|
implantAlterCancelDates: [],
|
calendar_day: {}, // 当天的日历设置，含是否允许植入，是否允许订单
|
p_height: 0,
|
|
//植入上报
|
openDate: "",
|
currentDate: "",
|
cancelDate: "",
|
isConnected: false, // 是否关联经销商
|
salesreport_button_open: true,
|
|
iscustomer: false,
|
iscustomerfreeze: false,//是否经销商冻结
|
},
|
created() {
|
if (window.top.vue.userinfo && window.top.vue.userinfo.currentactor && window.top.vue.userinfo.currentactor.code == "Capacity-Connected") { // 如果是关联经销
|
// org_id_ = window.top.vue.userinfo.org.relationid
|
this.isConnected = true;
|
}
|
this.iscustomer = window.top.vue.isCustomer;
|
if (this.iscustomer) { //
|
let welcome_ = {
|
create_time: createDatetime(),
|
type_name: "",
|
title: "欢迎新用户", remark: "欢迎【"+window.top.vue.userinfo.org.name+"】使用远大器械经销商管理系统",
|
}
|
this.dataobj.M001.push(welcome_);
|
}
|
else {
|
let welcome_ = {
|
create_time: createDatetime(),
|
type_name: "",
|
title: "欢迎新用户", remark: "欢迎【"+ (window.top.vue.userinfo.employee ? window.top.vue.userinfo.employee.name : window.top.vue.userinfo.name) +"】使用远大器械经销商管理系统",
|
}
|
this.dataobj.M001.push(welcome_);
|
}
|
|
// this.p_height = document.documentElement.clientHeight - 61;
|
this.p_height = document.documentElement.clientHeight - 10;
|
},
|
|
mounted() {
|
var me = this;
|
//预加载数据
|
if (this.dataRequest.length) {
|
var result = {};
|
this.loadRequestData(this.dataRequest, result, function(data) {
|
me.dataRequestObj = data;
|
//预加载数据后给哪些字段设置options或formatterjson
|
|
if(me.dataRequestObj.modulelist) {
|
me.modulelist = me.dataRequestObj.modulelist;
|
me.onModuleLayout();
|
}
|
else {
|
me.onModuleLayout();
|
}
|
|
me.implantDates = []
|
me.implantAlterCancelDates = []
|
|
if (me.dataRequestObj.implant_alter_date) {
|
var implantDates_ = []
|
me.dataRequestObj.implant_alter_date.data.entityset.map(r=>{
|
var date_ = dateFormat(new Date(r.doc_date), "yyyy-MM-dd")
|
implantDates_.push(date_)
|
})
|
me.implantDates = implantDates_
|
}
|
if (me.dataRequestObj.implant_alter_date_day) {
|
var calendar_day_ = {}
|
calendar_day_ = clone(me.dataRequestObj.implant_alter_date_day.data.entityset[0]);
|
me.calendar_day = calendar_day_
|
}
|
|
if(me.dataRequestObj.status && me.dataRequestObj.status.data) {
|
if(me.dataRequestObj.status.data.is_implant_open != "") {
|
me.openDate = me.dataRequestObj.status.data.is_implant_open;
|
}
|
|
if(me.dataRequestObj.status.data.currentdate != "") {
|
me.currentDate = me.dataRequestObj.status.data.currentdate;
|
}
|
|
if(me.dataRequestObj.status.data.is_implant_cancel_open != "") {
|
me.cancelDate = me.dataRequestObj.status.data.is_implant_cancel_open;
|
}
|
}
|
if(me.dataRequestObj.status && me.dataRequestObj.status.data && me.dataRequestObj.status.data.is_salesreport_open) {
|
if(me.dataRequestObj.status.data.is_salesreport_open =="F") {
|
me.salesreport_button_open = false;
|
}
|
}
|
|
// 近效期提醒
|
if (me.dataRequestObj.sys_notify_message && me.dataRequestObj.sys_notify_message.data && me.dataRequestObj.sys_notify_message.data.entityset && me.dataRequestObj.sys_notify_message.data.entityset.length) {
|
var message_list_ = [];
|
var today = new Date(); // 获取当前日期
|
var day90_ = new Date(today.getTime() + 90 * (24 * 60 * 60 * 1000)); // 获取90天后的日期
|
me.dataRequestObj.sys_notify_message.data.entityset.map(r=>{
|
// `license_device_date_to` varchar(10) DEFAULT NULL COMMENT '器械许可证-截止日期',
|
// `license_business_date_to` varchar(10) DEFAULT NULL COMMENT '营业执照-截止日期',
|
if (r.license_business_date_to) { // 营业执照-截止日期
|
var message_ = {
|
name: "营业执照到期日期",
|
todate: r.license_business_date_to
|
}
|
if (message_.todate && new Date(message_.todate) < day90_) {
|
message_.isalert = true
|
}
|
message_list_.push(message_)
|
}
|
if (r.license_device_date_to) { // 器械许可证-截止日期
|
var message_ = {
|
name: "器械许可证到期日期",
|
todate: r.license_device_date_to
|
}
|
if (message_.todate && new Date(message_.todate) < day90_) {
|
message_.isalert = true
|
}
|
message_list_.push(message_)
|
}
|
|
})
|
|
me.dataobj.M007 = message_list_
|
}
|
|
me.initData();
|
});
|
}
|
else {
|
me.onModuleLayout();
|
this.initData();
|
}
|
|
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
|
hideLoading();
|
});
|
},
|
|
methods:{
|
// 模板布局分组
|
onModuleLayout() {
|
var moduleLayout_ = {};
|
this.modulelist.map(m=>{
|
if (!moduleLayout_[m.layout]) {
|
moduleLayout_[m.layout] = [];
|
}
|
moduleLayout_[m.layout].push(m);
|
})
|
this.moduleLayout = clone(moduleLayout_);
|
},
|
initData() {
|
let me = this;
|
// this.getNotice();
|
},
|
|
getNotice() {
|
var me = this;
|
var param_ = {
|
dataname: "md_notice",
|
filter: "(to_capacity='sale' or to_capacity='all') and is_active='T'",
|
orderby: "create_time desc"
|
}
|
|
Server.call("root/data/getEntitySet", param_, function(result) {
|
var tableData_ = [];
|
if (result && result.data) {
|
console.log(result);
|
tableData_ = result.data.entityset;
|
tableData_.map(r=>{
|
if (r.isfile && r.isfile == "T") {
|
//获取附件
|
r.files = [];
|
me.getFileById(r);
|
}
|
if (r.remark && r.remark.indexOf(";") > 0) {
|
var remark_ = clone(r.remark);
|
var remarklist_ = remark_.split(";");
|
r.remarklist = remarklist_;
|
r.remark = "";
|
}
|
|
|
})
|
|
}
|
me.tableData = tableData_;
|
});
|
},
|
getFileById(row) {
|
var me = this;
|
var param_ = {
|
dataname: "file_index",
|
filter: "sender_id='"+ row.id +"' and sender_data_name='md_notice'"
|
}
|
|
Server.call("root/data/getEntitySet", param_, function(result) {
|
var tableData_ = [];
|
if (result && result.data) {
|
console.log(result);
|
tableData_ = result.data.entityset;
|
tableData_.map(r=>{
|
r.filename = r.file_name
|
r.fileid = r.id
|
})
|
row.files = clone(tableData_);
|
}
|
//me.tableData = tableData_;
|
});
|
},
|
|
showFileImgByFileId(file_id, file_name, dataname){
|
let me = this;
|
if(file_id) {
|
var fileid = file_id;
|
let fileName = clone(file_name);
|
let index1 = fileName.lastIndexOf(".");
|
let index2 = fileName.length;
|
let suffix = fileName.substring(index1, index2).toLowerCase(); //后缀名
|
if (suffix == ".png" || suffix == ".jpg" || suffix == ".pdf") {
|
var row = {
|
fileid: fileid,
|
filename: fileName,
|
dataname: dataname
|
}
|
|
var config = {
|
totab: false,
|
width: "1200px",
|
height: 800,
|
icon: "icon-product",
|
text: "附件预览",
|
id: "pdf_" + fileid,
|
url: "module/tool/page/popup_file_pdf.html",
|
data: row,
|
delta: {},
|
callback: function(obj, callback) {
|
if (callback) {
|
callback();
|
}
|
}
|
};
|
this.doPopupByPublic(config);
|
}
|
else {//只可下载，不可预览
|
// handleDownloadUrl(fileid,false);
|
handleDownload(fileid, dataname);
|
}
|
}
|
},
|
|
setDateClass(slotDate, slotData) {
|
var class_ = "";
|
if ((this.implantDates).includes(slotData.day)) {
|
class_ = "implant";
|
}
|
else if ((this.implantAlterCancelDates).includes(slotData.day)) {
|
class_ = "implantAlterCancel";
|
}
|
|
return class_;
|
},
|
|
setDateTooltip(slotDate, slotData) {
|
var tooltip_ = "";
|
if ((this.implantDates).includes(slotData.day)) {
|
tooltip_ = "允许植入上报";
|
}
|
else if ((this.implantAlterCancelDates).includes(slotData.day)) {
|
tooltip_ = "允许植入调整撤销";
|
}
|
return tooltip_;
|
},
|
|
// 快捷入口
|
arriveAddOrder() {
|
console.log("Order");
|
|
var me = this;
|
var config = {
|
totab: true, //true: 以Tab导航的方式打开
|
width: "900px",
|
height: "900px",
|
icon: "icon-product",
|
text: "直销订单信息",
|
id: "direct_order_list_info" + "add",//totab: true时需设置，用于判断是否已打开此页面
|
url: "module/order/page/direct_order_list_info.html",
|
data: {},
|
delta: {},
|
sceneCode: "add",//"refuseedit",//"approval", //"add"//"browse",
|
callback: function(obj, callback) {
|
// me.onQuery();
|
if (callback) {
|
callback();
|
}
|
}
|
};
|
me.doPopupByPublic(config);
|
},
|
|
//新增订单button
|
onAddOrderData() {
|
var me = this;
|
// if (me.calendar_day.is_order_close) {
|
// Root.message({
|
// type: 'warning',
|
// message: '关账期间不允许下订单'
|
// });
|
// return
|
// }
|
//如果是冻结状态的需要获取一下=最新的状态
|
if (this.iscustomerfreeze) {
|
let param_ = {
|
dataname: "md_org",
|
id: window.top.vue.userinfo.org.id
|
}
|
|
Server.call("root/data/getEntity", param_, function(result) {
|
console.log(result);
|
//冻结状态
|
if (result && result.data && result.data.md_org && result.data.md_org.is_frozen) {
|
Root.message({
|
type: "warning",
|
message: "冻结状态不可下订单",
|
});
|
}
|
else {//已解冻
|
//刷新经销商信息
|
window.top.vue.userinfo.org.isfreeze = result.data.md_org.is_frozen;
|
me.onDoAddData();
|
}
|
});
|
}
|
else {
|
me.onDoAddData();
|
}
|
},
|
|
onDoAddData() {
|
var me = this;
|
var config = {
|
totab: true, //true: 以Tab导航的方式打开
|
width: "900px",
|
height: "900px",
|
icon: "icon-product",
|
text: "标准订单信息",
|
id: "porder_list_edit" + "add",//totab: true时需设置，用于判断是否已打开此页面
|
url: "module/order/page/porder_list_edit.html",
|
data: {},
|
delta: {scene: "standard"},
|
sceneCode: "add",//"refuseedit",//"approval", //"add"//"browse",
|
callback: function(obj, callback) {
|
if (callback) {
|
callback();
|
}
|
}
|
};
|
me.doPopupByPublic(config);
|
},
|
|
//新增/编辑植入
|
onAddImplantedData() {
|
var me = this;
|
if (!me.calendar_day.is_implant_open) {
|
Root.message({
|
type: 'warning',
|
message: '今天不允许植入上报'
|
});
|
return
|
}
|
if (me.calendar_day.is_order_close) {
|
Root.message({
|
type: 'warning',
|
message: '关账期间不允许植入上报'
|
});
|
return
|
}
|
var sceneCode = "add"
|
//3. popup
|
var config = {
|
totab: true, //true: 以Tab导航的方式打开
|
width: "500px",
|
height: "290px",
|
icon: "icon-product",
|
text: "植入单编辑",
|
id: "implanted_report_info" + sceneCode,//totab: true时需设置，用于判断是否已打开此页面
|
url: "module/order/page/implanted_report_info.html",
|
data: {},
|
delta: null,
|
sceneCode: sceneCode,//"refuseedit",//"approval", //"add"//"browse"//"edit",
|
callback: function(obj, callback) {
|
if (callback) {
|
callback();
|
}
|
}
|
};
|
me.doPopupByPublic(config);
|
},
|
|
|
arriveAddImplanted() {
|
console.log("Implanted");
|
if (!this.salesreport_button_open) {
|
this.$message({
|
type: 'warning',
|
message: '本月销量上报已截止'
|
});
|
return
|
}
|
|
var me = this;
|
var config = {
|
totab: true, //true: 以Tab导航的方式打开
|
width: "900px",
|
height: "900px",
|
icon: "icon-product",
|
text: "销量上报",
|
|
id: "batch_report_info" + "add",//totab: true时需设置，用于判断是否已打开此页面
|
url: "module/order/page/batch_report_info.html",
|
data: {},
|
delta: {},
|
sceneCode: "add",//"refuseedit",//"approval", //"add"//"browse",
|
callback: function(obj, callback) {
|
me.onQuery();
|
if (callback) {
|
callback();
|
}
|
}
|
};
|
me.doPopupByPublic(config);
|
},
|
|
confirmReceived() {
|
console.log("Received");
|
|
//还没想好怎么打开这个页面
|
var me = this;
|
var config = {
|
totab: true, //true: 以Tab导航的方式打开
|
width: "900px",
|
height: "900px",
|
icon: "icon-product",
|
text: "订单收货",
|
id: "A1-04",//totab: true时需设置，用于判断是否已打开此页面
|
page_id: "A1-04",
|
url: "module/order/page/receiving_list.html",
|
data: {},
|
delta: {},
|
// sceneCode: "browse",//"refuseedit",//"approval", //"add"//"browse",
|
callback: function(obj, callback) {
|
// me.onQuery();
|
if (callback) {
|
callback();
|
}
|
}
|
};
|
me.doPopupByPublic(config);
|
},
|
}
|
});
|
};
|
|
loadJsCss(function () {
|
initVue();
|
});
|
</script>
|
<style>
|
/* 在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的 */
|
[v-cloak] {
|
display: none !important;
|
}
|
html {
|
overflow: hidden;
|
}
|
.h_card {
|
width: 100%;
|
height: 100%;
|
}
|
.h_card .el-card__body {
|
padding: 0px;
|
}
|
.h_card .h_card_title {
|
background-color: #fff;
|
border-top: 3px solid #0270c1;
|
border-bottom: 1px solid #e7e7e7;
|
padding: 5px 8px;
|
font-size: 14px;
|
}
|
.h_card .h_card_body {
|
box-sizing: border-box;
|
position: absolute;
|
top: 40px;
|
left: 10px;
|
right: 10px;
|
bottom: 10px;
|
overflow: auto;
|
}
|
.h_card .h_card_body .el-card__body, .el-main{
|
padding: 20px;
|
}
|
|
.h_card .h_card_body .note .el-card__body {
|
background-color: #edf3f8;
|
}
|
|
.h_card .h_card_body .note_new .el-card__body {
|
background-color: #af9457;
|
color: #fff;
|
}
|
.h_card .h_card_body .note_new .el-form-item__label {
|
color: #fff;
|
}
|
|
.h_card .h_card_row {
|
padding: 3px 5px;
|
box-sizing: border-box;
|
border-bottom: 1px solid #e7e7e7;
|
font-size: 12px;
|
}
|
|
.h_div_flex {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
padding: 0 10%;
|
box-sizing: border-box;
|
}
|
.h_title_fontsize {
|
text-align: center;
|
height: 42px;
|
line-height: 42px;
|
}
|
.h_cnt_fontsize {
|
font-size: 20px;
|
font-weight: bold;
|
}
|
.h_cnt20_fontsize {
|
font-size: 28px;
|
font-weight: bold;
|
}
|
|
/* 日历 */
|
.h_card .el-calendar {
|
background-color: #edf3f8;
|
}
|
|
.h_card .el-calendar__body {
|
padding: 5px 2px;
|
}
|
|
.h_card .el-calendar__title {
|
font-size: 12px;
|
/* width: 50%; */
|
text-align: left;
|
margin-left: 10px;
|
}
|
|
.h_card .el-calendar__header {
|
padding: 1px;
|
}
|
|
.h_card .el-calendar-table thead th {
|
padding: 2px 0;
|
color: #606266;
|
font-weight: 400;
|
font-size: small;
|
}
|
|
.h_card .el-calendar-table td {
|
min-height: 100px;
|
min-width: 100px;
|
border-right: 0px;
|
}
|
|
.h_card .el-button-group>.el-button {
|
padding: 5px;
|
background-color: #f3f3f6d5;
|
}
|
|
.h_card .el-calendar-table .el-calendar-day {
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
padding: 1px !important;
|
margin: 2px 10px;
|
height: 26px !important;
|
line-height: 26px !important;
|
text-align: center;
|
font-size: 12px;
|
}
|
|
.el-tooltip__popper.is-dark {
|
background: #e3e3e3 !important;
|
color: #0a0a0a !important;
|
}
|
|
.h_card .el-calendar-table .el-calendar-day .item:hover {
|
cursor:default;
|
background-color: #b9d3ef;
|
border-radius: 5px;
|
}
|
|
.h_card .el-calendar-table tr td:first-child {
|
border-left: 0px;
|
}
|
|
.h_card .nulldate {
|
border: 1px solid #00000000;
|
}
|
.h_card .implant {
|
/* background-color: #6495ed; */
|
border: 1px solid #92baed;
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
|
/* 快捷键 */
|
.button-wrap {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
padding: 0 15%;
|
box-sizing: border-box;
|
}
|
|
.button-wrap .button {
|
width: 30%;
|
height: 0;
|
padding-top: 1%;
|
padding-bottom: 27%;
|
margin-bottom: 0%;
|
margin-top: 10%;
|
margin-left: 5%;
|
margin-right: 5%;
|
background-color: #1861ae;
|
color: #fff;
|
border: 4px solid #fff;
|
border-radius: 16px;
|
position: relative;
|
display: block;
|
text-decoration: none;
|
letter-spacing: 2px;
|
text-align: center;
|
border-radius: 20px;
|
box-shadow: -2px -2px 8px rgb(161, 156, 156),
|
-2px -2px 12px rgba(255, 255, 255, 0.5),
|
inset 2px 2px 4px rgba(255, 255, 255, 0.1),
|
2px 2px 8px rgba(0, 0, 0, 0.15);
|
}
|
|
.button-wrap .click_button:hover {
|
cursor: pointer;
|
border: 0px solid #1861ae;
|
box-shadow: -2px -2px 14px rgb(161, 156, 156),
|
-2px -2px 12px rgba(255, 255, 255, 0.5),
|
inset 2px 2px 4px rgba(255, 255, 255, 0.1),
|
2px 2px 8px rgba(0, 0, 0, 0.15);
|
}
|
|
.button-wrap .button span {
|
position: relative;
|
color: #d6d5d3;
|
font-weight: 400;
|
font-size: 14px;
|
}
|
|
.icon-button {
|
display: block;
|
width: 35%;
|
margin: 0 auto;
|
margin-top: 10%;
|
}
|
.h_validity {
|
font-size: 12px;
|
}
|
.errorspan {
|
color: red;
|
}
|
</style>
|
|
</head>
|
|
<body style="margin: 0px; height:100vh;" class = "test">
|
<div v-cloak id="vbody">
|
<div id="page_root">
|
<div style="padding: 0px;">
|
<div :style="{height: p_height + 'px'} ">
|
<!-- 左侧模块组 --> <!-- moduleLayout.left -->
|
<div class="h_layout_left" :style="{float: 'left', width: '70%', height: p_height - 20 + 'px', 'overflow-y': 'auto', padding: '10px 0px'}">
|
<template v-for="(module_l, key_l) in moduleLayout.left">
|
<div :style="{float: 'left', width: module_l.width, height: module_l.height, padding: '8px', 'box-sizing': 'border-box'}">
|
<el-card class="h_card" :body-style="{width: '100%', height: '100%', 'overflow-y': 'auto', position: 'relative'}" shadow="always">
|
<div class="h_card_title">
|
<span>{{module_l.title}}</span>
|
</div>
|
|
<!-- 我的通知 -->
|
<div v-if="module_l.code == 'M001'" class="h_card_body">
|
<!-- <el-row v-for="(data_1, key1) in dataobj[module_l.code]" class="h_card_row" :key="'k1_' + key1">
|
<el-col :span="6">{{key1 + 1}}、{{data_1.createtime}}</el-col>
|
<el-col :span="5">{{data_1.code}}</el-col>
|
<el-col :span="13">{{data_1.name}}</el-col>
|
</el-row> -->
|
<el-timeline>
|
<!--
|
{create_time: "2024-01-18 09:49:22", type_name: "", title: "", remark: "", files: [{fileid: "", filename: "", dataname: ""}]}
|
-->
|
<el-timeline-item v-for="(row, k) in dataobj[module_l.code]" :key="k" :timestamp="row.create_time" placement="top">
|
<el-card :class="[k==0 ? 'note_new' : 'note']">
|
<el-form size="mini">
|
<el-form-item label="主题：">
|
<i v-if="row.type_code && row.type_code == 'important_notice'" class="el-icon-warning" style="color: #b82139; font-size: 20px;"></i>
|
|
<span v-if="row.type_name">{{row.type_name}}</span>
|
<span v-if="row.type_name && row.title">-</span>
|
<span v-if="row.title">{{row.title}}</span>
|
</el-form-item>
|
<el-form-item v-if="row.remark || row.remarklist" label="内容：">
|
<div v-if="row.remark">{{row.remark}}</div>
|
|
<template v-if="row.remarklist">
|
<div style="padding-left: 50px;">
|
<div v-for="(remark, k) in row.remarklist" :key="row.id + '_' + k">{{remark}}</div>
|
</div>
|
</template>
|
</el-form-item>
|
|
<el-form-item label="附件：" v-if="row.files || row.fileid" >
|
<div style="margin-left: 55px;">
|
<template v-if="row.files">
|
<template v-for="(file, key) in row.files">
|
<span class="h_cellclick" @click="showFileImgByFileId(file.fileid, file.filename, file.dataname)">{{file.filename}}</span>
|
<br />
|
</template>
|
</template>
|
<span v-else-if="!row.files" class="h_cellclick" @click="showFileImgByFileId(row.fileid, row.filename, file.dataname)">{{row.filename}}</span>
|
</div>
|
</el-form-item>
|
|
|
</el-form>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
<!-- 我的申请 -->
|
<div v-else-if="module_l.code == 'M002'" class="h_card_body">
|
<el-row v-for="(data_1, key1) in dataobj[module_l.code]" class="h_card_row" :key="'k2_' + key1">
|
<el-col :span="6">{{key1 + 1}}、{{data_1.createtime}}</el-col>
|
<el-col :span="5">{{data_1.code}}</el-col>
|
<el-col :span="13">{{data_1.name}}</el-col>
|
</el-row>
|
</div>
|
|
<!-- 我的指标 -->
|
<div v-else-if="module_l.code == 'M003'" class="h_card_body">
|
<el-row >
|
<el-col :span="8">
|
<div style="font-size: 14px;">
|
<div class="h_title_fontsize">
|
<span style="border-bottom: 1px solid #0270c1;">商采指标 {{dataobj[module_l.code].year.year}}年度</span>
|
</div>
|
<div style="text-align: center;">
|
<el-col :span="15">
|
<div><span>指标金额：</span><span class="h_cnt_fontsize"> ￥{{dataobj[module_l.code].year.amt_target}}</span></div>
|
<div><span>达成金额：</span><span class="h_cnt_fontsize"> ￥{{dataobj[module_l.code].year.amt_sale}}</span></div>
|
</el-col>
|
<el-col :span="9">
|
<div><span class="h_cnt20_fontsize">{{dataobj[module_l.code].year.rate_completion}}%</span></div>
|
<div>达成率</div>
|
</el-col>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div style="font-size: 14px;">
|
<div class="h_title_fontsize">
|
<span style="border-bottom: 1px solid #0270c1;">商采指标 {{dataobj[module_l.code].year.year}} - {{dataobj[module_l.code].quarter.quarter}}季度</span>
|
</div>
|
<div style="text-align: center;">
|
<el-col :span="15" style="border-left: 1px solid #0270c1;">
|
<div><span>指标金额：</span><span class="h_cnt_fontsize"> ￥{{dataobj[module_l.code].quarter.amt_target}}</span></div>
|
<div><span>达成金额：</span><span class="h_cnt_fontsize"> ￥{{dataobj[module_l.code].quarter.amt_sale}}</span></div>
|
</el-col>
|
<el-col :span="9">
|
<div><span class="h_cnt20_fontsize">{{dataobj[module_l.code].quarter.rate_completion}}%</span></div>
|
<div>达成率</div>
|
</el-col>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div style="font-size: 14px;">
|
<div class="h_title_fontsize">
|
<span style="border-bottom: 1px solid #0270c1;">商采指标 {{dataobj[module_l.code].year.year}} - {{dataobj[module_l.code].month.month}}月度</span>
|
</div>
|
<div style="text-align: center;">
|
<el-col :span="15" style="border-left: 1px solid #0270c1;">
|
<div><span>指标金额：</span><span class="h_cnt_fontsize"> ￥{{dataobj[module_l.code].month.amt_target}}</span></div>
|
<div><span>达成金额：</span><span class="h_cnt_fontsize"> ￥{{dataobj[module_l.code].month.amt_sale}}</span></div>
|
</el-col>
|
<el-col :span="9">
|
<div><span class="h_cnt20_fontsize">{{dataobj[module_l.code].month.rate_completion}}%</span></div>
|
<div>达成率</div>
|
</el-col>
|
</div>
|
</div>
|
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 我的客户 -->
|
<div v-else-if="module_l.code == 'M004'" class="h_card_body">
|
<el-row >
|
<el-col :span="16">
|
<div style="font-size: 14px;">
|
<div class="h_title_fontsize">
|
<i class="iconfont icon-gongwenbao" style="color: #ff5500;"></i>
|
<span style="border-bottom: 1px solid #0270c1;">经销商</span>
|
</div>
|
<div class="h_div_flex">
|
<div v-for="(data_1, key1) in dataobj[module_l.code].Customer" style="display: block;">
|
<div><span class="h_cnt20_fontsize">{{data_1.cnt}}</span>家</div>
|
<div>{{data_1.actor}}</div>
|
</div>
|
</div>
|
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div style="font-size: 14px;">
|
<div class="h_title_fontsize">
|
<i class="iconfont icon-yiyuan" style="color: #ff5500;"></i>
|
<span style="border-bottom: 1px solid #0270c1;">医院</span>
|
</div>
|
<div class="h_div_flex" style="border-left: 1px solid #0270c1;">
|
<div v-for="(data_1, key1) in dataobj[module_l.code].Hospital" style="display: block;">
|
<div><span class="h_cnt20_fontsize">{{data_1.cnt}}</span>家</div>
|
<div>{{data_1.actor}}</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
</el-card>
|
</div>
|
|
</template>
|
</div>
|
|
<!-- 右侧模块组 -->
|
<div class="h_layout_right" :style="{float: 'right', width: '30%', height: p_height - 20 + 'px', 'overflow-y': 'auto', padding: '10px 0px'}">
|
<template v-for="(module_r, key_r) in moduleLayout.right">
|
<div :style="{float: 'left', width: module_r.width, height: module_r.height, padding: '8px', 'box-sizing': 'border-box'}">
|
<el-card class="h_card" :body-style="{width: '100%', height: '100%', 'overflow-y': 'auto', 'background-color': '#edf3f8', position: 'relative'}" shadow="always">
|
<div class="h_card_title">
|
<span>{{module_r.title}}</span>
|
</div>
|
<!-- 证照有效期 -->
|
<div v-if="module_r.code == 'M007'" class="h_card_body">
|
<div v-for="(dataTodate, key) in dataobj[module_r.code]" :key="key" class="h_validity">
|
<i :class="dataTodate.isalert ? 'errorspan' : ''">{{dataTodate.name}}</i>
|
<i :class="dataTodate.isalert ? 'errorspan' : ''">{{dataTodate.todate}}</i>
|
</div>
|
</div>
|
<!-- 植入日历 -->
|
<div v-if="module_r.code == 'M005'" class="h_card_body">
|
<el-calendar ref="ref_calendar">
|
<template slot="dateCell" slot-scope="{date, data}">
|
<el-tooltip :disabled="setDateTooltip(date, data) == ''" class="item" effect="dark" :content="setDateTooltip(date, data)" placement="top">
|
<div :class="setDateClass(date, data)">
|
{{ data.day.split('-').slice(2).join('-')}}
|
</div>
|
</el-tooltip>
|
</template>
|
</el-calendar>
|
</div>
|
<!-- 快捷入口 -->
|
<div v-else-if="module_r.code == 'M006'" class="h_card_body">
|
<div class="button-wrap">
|
<!-- <div class="button order click_button" @click = "arriveAddOrder">
|
<img class="icon-button" src="cart.png" alt="cart">
|
<span>备 案</span>
|
</div>
|
<div class="button implanted click_button" @click = "arriveAddImplanted">
|
<img class="icon-button" src="implanted.png" alt="cart">
|
<span>协 议</span>
|
</div> -->
|
<div class="button receive click_button" @click = "onAddOrderData">
|
<img class="icon-button" src="cart.png" alt="cart">
|
<span>订 单</span>
|
</div>
|
<div class="button receive click_button" @click = "onAddImplantedData">
|
<img class="icon-button" src="implanted.png" alt="cart">
|
<span>植 入</span>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
</div>
|
|
<!-- <div class="h_right" style="float: right; width: 27%; height: 100%; padding: 10px 0px">
|
<div style="width: 100%; height: 47%; display: flex; opacity: 1;">
|
<el-card class="card-box" shadow="always">
|
<el-calendar ref="ref_calendar">
|
<template slot="dateCell" slot-scope="{date, data}">
|
<el-tooltip :disabled="setDateTooltip(date, data) == ''" class="item" effect="dark" :content="setDateTooltip(date, data)" placement="top">
|
<div :class="setDateClass(date, data)">
|
{{ data.day.split('-').slice(2).join('-')}}
|
</div>
|
</el-tooltip>
|
</template>
|
</el-calendar>
|
</el-card>
|
</div>
|
<div class="button-wrap" style="width: 100%; margin-top: 30px;">
|
<div class="button order click_button" @click = "arriveAddOrder">
|
<span>直销订单</span>
|
<img class="icon-button" src="cart.png" alt="cart">
|
</div>
|
<div class="button implanted click_button" @click = "arriveAddImplanted">
|
<span>销量上报</span>
|
<img class="icon-button" src="implanted.png" alt="cart">
|
</div>
|
<div class="button receive click_button" @click = "arriveAddOrder_zk">
|
<span>特殊订单</span>
|
<img class="icon-button" src="received.png" alt="cart">
|
</div>
|
<div class="button"></div>
|
</div>
|
</div> -->
|
|
</div>
|
|
</div>
|
</div>
|
|
<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
|
<div class="spinner">
|
<div class="cube1"></div>
|
<div class="cube2"></div>
|
</div>
|
</div>
|
</div>
|
|
</body>
|
</html>
|
