yu.wu
3 years ago
38 changed files with 16622 additions and 4 deletions
@ -0,0 +1,83 @@ |
|||||
|
/** 派格fis路由 */ |
||||
|
//import Layout from '@/layout/firstLayout'
|
||||
|
import Layout from '@/layout' |
||||
|
|
||||
|
const pgfis = { |
||||
|
path: '/pg-fis', |
||||
|
component: Layout, |
||||
|
redirect: 'fis', |
||||
|
name: 'pgfis', |
||||
|
meta: { |
||||
|
//requiresAuth: true,
|
||||
|
title: '派格fis', |
||||
|
index: 0, |
||||
|
type: 'crm', |
||||
|
icon: '业务', |
||||
|
keepAlive: false, |
||||
|
}, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: '/customerPartCfg', |
||||
|
component: () => import('@/views/pg-fis/basedate/customerPartCfg'), |
||||
|
name: 'customerPartCfg',//命名路由
|
||||
|
meta: { |
||||
|
title: '客户零件管理', |
||||
|
roles: ['SettleAccount.Reports'], |
||||
|
icon: '发货' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
path: '/pg-assemblyCfg', |
||||
|
component: () => import('@/views/pg-fis/basedate/assemblyCfg'), |
||||
|
name: 'pg-assemblyCfg',//命名路由
|
||||
|
meta: { |
||||
|
title: '总成模块管理', |
||||
|
roles: ['SettleAccount.Reports'], |
||||
|
icon: '发货' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
path: '/pg-workLine', |
||||
|
component: () => import('@/views/pg-fis/basedate/workLine'), |
||||
|
name: 'pg-workLine', |
||||
|
meta: { |
||||
|
title: '生产线权限', |
||||
|
roles: ['SettleAccount.Reports'], |
||||
|
icon: '供货' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
path: '/pg-M100BIll', |
||||
|
component: () => import('@/views/pg-fis/basedate/m100BIll'), |
||||
|
name: 'pg-M100BIll',//命名路由
|
||||
|
meta: { |
||||
|
title: 'M100单据信息维护', |
||||
|
roles: ['SettleAccount.Reports'], |
||||
|
icon: '客户零件' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
path: '/pg-M100Online', |
||||
|
component: () => import('@/views/pg-fis/basedate/m100Online'), |
||||
|
name: 'pg-M100Online',//命名路由
|
||||
|
meta: { |
||||
|
title: 'M100上线信息', |
||||
|
roles: ['SettleAccount.Reports'], |
||||
|
icon: '客户零件' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
path: '/pg-R100Online', |
||||
|
component: () => import('@/views/pg-fis/basedate/r100Online'), |
||||
|
name: 'pg-M100Online',//命名路由
|
||||
|
meta: { |
||||
|
title: 'R100上线信息', |
||||
|
roles: ['SettleAccount.Reports'], |
||||
|
icon: '客户零件' |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
export default pgfis |
||||
|
|
||||
@ -0,0 +1,312 @@ |
|||||
|
<!--FIS发运数据对比输出表-明细数据--> |
||||
|
<template> |
||||
|
<div class="cr-body-content"> |
||||
|
<flexbox class="content-header"> |
||||
|
<!-- <el-button |
||||
|
class="filter-item" |
||||
|
size="mini" |
||||
|
type="info" |
||||
|
icon="el-icon-download" |
||||
|
@click="handleDownload()" |
||||
|
>导出全部 |
||||
|
</el-button> |
||||
|
<el-input |
||||
|
v-model="searchContent" |
||||
|
clearable |
||||
|
size="small" |
||||
|
placeholder="支持模糊搜索..." |
||||
|
style="width: 230px" |
||||
|
class="search-container" |
||||
|
@keyup.enter.native="handleFilter" |
||||
|
/> |
||||
|
<el-button |
||||
|
size="mini" |
||||
|
type="success" |
||||
|
icon="el-icon-search" |
||||
|
@click="handleFilter" |
||||
|
>搜索 |
||||
|
</el-button> --> |
||||
|
</flexbox> |
||||
|
<!--表格渲染--> |
||||
|
<el-table |
||||
|
ref="multipleTable" |
||||
|
v-loading="listLoading" |
||||
|
element-loading-text="拼命加载中..." |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
class="cr-table" |
||||
|
:data="list" |
||||
|
:height="tableHeight" |
||||
|
:cell-style="cellStyle" |
||||
|
:header-cell-style="headerRowStyle" |
||||
|
size="small" |
||||
|
stripe |
||||
|
border |
||||
|
highlight-current-row |
||||
|
style="width: 100%" |
||||
|
@sort-change="sortChange" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
@row-click="handleRowClick" |
||||
|
> |
||||
|
<!-- <el-table-column type="selection" width="44px"></el-table-column> --> |
||||
|
<el-table-column prop="partCode" label="客户零件代码"> </el-table-column> |
||||
|
<el-table-column prop="description" label="客户零件名称"> </el-table-column> |
||||
|
<el-table-column prop="partNum" label="客户零件数量"> </el-table-column> |
||||
|
<el-table-column prop="isKey" label="是否Key件"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.isKey == true"> |
||||
|
<span style="color: #00b46d">是</span> |
||||
|
</span> |
||||
|
<span v-else> |
||||
|
<span style="color: #d75c89">否</span> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="table-footer"> |
||||
|
<!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"--> |
||||
|
<pagination |
||||
|
v-show="totalCount > 0" |
||||
|
:total="totalCount" |
||||
|
:page.sync="page" |
||||
|
:limit.sync="listQuery.MaxResultCount" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination |
||||
|
import permission from "@/directive/permission/index.js"; |
||||
|
import CRMTableHead from "../../components/CRMTableHead"; |
||||
|
import { downloadFile } from "@/utils/crmindex.js"; |
||||
|
import Detail from "./detail"; |
||||
|
|
||||
|
export default { |
||||
|
name: "sendUnsettledDiffReport", |
||||
|
components: { Pagination, CRMTableHead, Detail }, |
||||
|
directives: { permission }, |
||||
|
filters: { |
||||
|
IsCustomerSignFilter(status) { |
||||
|
//翻译是否签字 |
||||
|
const statusMap = { |
||||
|
true: "是", |
||||
|
false: "否", |
||||
|
}; |
||||
|
return statusMap[status]; |
||||
|
}, |
||||
|
}, |
||||
|
props: { |
||||
|
customerInfos: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
crmType: "stockFisDiffReport", |
||||
|
rules: { |
||||
|
//前端定义的规则，后端也有验证 |
||||
|
erpMaterialCode: [ |
||||
|
{ required: true, message: "必须输入！", trigger: "blur" }, |
||||
|
], |
||||
|
}, |
||||
|
searchContent: "", // 输入内容 |
||||
|
customerInfo: { |
||||
|
parentId: "", |
||||
|
}, |
||||
|
form: { |
||||
|
dicDetailID: "", |
||||
|
customerId: "", |
||||
|
projectId: "", |
||||
|
}, |
||||
|
list: null, |
||||
|
totalCount: 0, |
||||
|
listLoading: true, |
||||
|
formLoading: false, |
||||
|
// 高级搜索 |
||||
|
filterObj: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
listQuery: { |
||||
|
Filters: [ |
||||
|
{ |
||||
|
logic: 0, |
||||
|
column: "Enabled", |
||||
|
action: 0, |
||||
|
value: "true", |
||||
|
}, //默认查询可用的 |
||||
|
], |
||||
|
//OrgID:"", |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 15, |
||||
|
assemblyProductID: "", |
||||
|
}, |
||||
|
page: 1, |
||||
|
dialogFormVisible: false, |
||||
|
multipleSelection: [], |
||||
|
formTitle: "", |
||||
|
drawer: false, |
||||
|
showExcelImport: false, |
||||
|
tableHeight: document.documentElement.clientHeight - 260, |
||||
|
isEdit: false, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
var self = this; |
||||
|
window.onresize = function () { |
||||
|
var offsetHei = document.documentElement.clientHeight; |
||||
|
self.tableHeight = offsetHei - 190; |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
watch: { |
||||
|
customerInfos: { |
||||
|
handler(newVal) { |
||||
|
if (newVal == "" || newVal == "undefined") { |
||||
|
//TODO |
||||
|
} else { |
||||
|
newVal.forEach((element) => { |
||||
|
this.customerInfo.parentId = element.ParentId; |
||||
|
}); |
||||
|
if (this.customerInfo.parentId != "") { |
||||
|
this.getList(this.searchContent); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
immediate: true, |
||||
|
}, |
||||
|
}, |
||||
|
computed: { |
||||
|
/** 列表字段 */ |
||||
|
getDefaultField() { |
||||
|
var tempsTabs = []; |
||||
|
tempsTabs.push({ label: "客户零件代码", prop: "partCode ", width: 120 }); |
||||
|
tempsTabs.push({ label: "客户零件数量", prop: "partNum", width: 160 }); |
||||
|
tempsTabs.push({ label: "是否Key件", prop: "isKey", width: 95 }); |
||||
|
tempsTabs.push({ label: "描述", prop: "description", width: 280 }); |
||||
|
return tempsTabs; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
/** 刷新列表 */ |
||||
|
handleHandle(data) { |
||||
|
if (data.type !== "edit") { |
||||
|
this.getList(); |
||||
|
} |
||||
|
}, |
||||
|
/** 格式化字段 */ |
||||
|
fieldFormatter(row, column) { |
||||
|
if (column.property === "isKey") { |
||||
|
return { 0: "未生效", 1: "已生效" }[row[column.property]]; |
||||
|
} |
||||
|
return row[column.property] || "--"; |
||||
|
}, |
||||
|
importExcelData() { |
||||
|
//关闭导入窗体时调用 |
||||
|
this.showExcelImport = false; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
getList(partCode) { |
||||
|
this.listLoading = true; |
||||
|
console.log("详表条件：" + JSON.stringify(this.customerInfo.parentId)); |
||||
|
this.$axios |
||||
|
.gets("/api/newjit/assembly-cfg-erp/" + this.customerInfo.parentId) |
||||
|
.then((response) => { |
||||
|
console.log(partCode) |
||||
|
if(partCode !== "" && partCode !== undefined) |
||||
|
{ |
||||
|
//console.log(partCode) |
||||
|
this.list = response.item.details.filter(u => u.partCode === partCode); |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
this.list = response.item.details; |
||||
|
} |
||||
|
//alert(JSON.stringify(response.Items)) |
||||
|
//this.totalCount = response.totalCount; |
||||
|
setTimeout(() => { |
||||
|
//大数据量加载时 |
||||
|
this.listLoading = false; |
||||
|
}, 500); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
/** 筛选操作 */ |
||||
|
handleFilter() { |
||||
|
this.page = 1; |
||||
|
this.getList(); |
||||
|
this.listQuery.Filters = []; |
||||
|
if (this.searchContent != "") { |
||||
|
var column = "partCode"; |
||||
|
let filter = { |
||||
|
logic: 0, |
||||
|
column: column, |
||||
|
action: 6, |
||||
|
value: this.searchContent, |
||||
|
}; |
||||
|
this.listQuery.Filters.push(filter); |
||||
|
} |
||||
|
//console.log(this.searchContent) |
||||
|
this.getList(this.searchContent); |
||||
|
}, |
||||
|
resetQuery() {}, |
||||
|
|
||||
|
sortChange(data) { |
||||
|
const { prop, order } = data; |
||||
|
if (!prop || !order) { |
||||
|
this.handleFilter(); |
||||
|
return; |
||||
|
} |
||||
|
this.listQuery.Sorting = prop + " " + order; |
||||
|
this.handleFilter(); |
||||
|
}, |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
/** 通过回调控制style */ |
||||
|
cellStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if ( |
||||
|
column.property === "fisQty" || |
||||
|
column.property === "diffQty" || |
||||
|
column.property === "stockQty" |
||||
|
) { |
||||
|
return { textAlign: "right" }; |
||||
|
} else { |
||||
|
return { textAlign: "left" }; |
||||
|
} |
||||
|
}, |
||||
|
/** 通过回调控制表头style */ |
||||
|
headerRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if ( |
||||
|
column.property === "fisQty" || |
||||
|
column.property === "diffQty" || |
||||
|
column.property === "stockQty" |
||||
|
) { |
||||
|
return { textAlign: "right", background: "#FAFAFA" }; |
||||
|
} else { |
||||
|
return { textAlign: "left", background: "#FAFAFA" }; |
||||
|
} |
||||
|
}, |
||||
|
handleRowClick(row, column, event) { |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
this.$refs.multipleTable.toggleRowSelection(row); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "../../styles/crmtable.scss"; |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,844 @@ |
|||||
|
<!--总成模块信息管理页--> |
||||
|
<template> |
||||
|
<div class="cr-body-content"> |
||||
|
<div ref="box"> |
||||
|
<flexbox class="content-header"> |
||||
|
<el-form |
||||
|
:model="listQuery" |
||||
|
ref="queryForm" |
||||
|
v-show="showSearch" |
||||
|
:inline="true" |
||||
|
> |
||||
|
|
||||
|
<el-form-item label="总成编码" prop="ErpAssemblyCode " class="forimitem"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyCode" |
||||
|
placeholder="请输入总成编码" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="总成名称" prop="ErpAssemblyName " class="forimitem"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="请输入总成名称" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="车型：" prop="vehicleModelCode" class="forimitem"> |
||||
|
<el-select |
||||
|
v-model="listQuery.vehicleModelCode" |
||||
|
clearable |
||||
|
placeholder="请选择" |
||||
|
size="medium" |
||||
|
style="margin-right: 15px" |
||||
|
@change="valueselectChange" |
||||
|
> |
||||
|
<el-option label="结算" value="R0003"></el-option> |
||||
|
<el-option label="二配" value="R0001"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item class="forimitem"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-search" |
||||
|
size="mini" |
||||
|
@click="handleFilter" |
||||
|
>搜索</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
icon="el-icon-refresh" |
||||
|
size="mini" |
||||
|
@click="resetQuery('queryForm')" |
||||
|
>重置</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
type="warning" |
||||
|
plain |
||||
|
icon="el-icon-download" |
||||
|
size="mini" |
||||
|
style="margin-left: 15px" |
||||
|
@click="handleDownload()" |
||||
|
>导出(Excel) |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
<el-divider class="divider1" ></el-divider> |
||||
|
<el-form-item style="margin-bottom: 0px;margin-top: 10px"> |
||||
|
<el-button |
||||
|
class="filter-item" |
||||
|
size="mini" |
||||
|
type="primary" |
||||
|
icon="el-icon-plus" |
||||
|
@click="handleCreate" |
||||
|
>新增 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
class="filter-item" |
||||
|
size="mini" |
||||
|
type="primary" |
||||
|
icon="el-icon-edit" |
||||
|
@click="handleUpdate" |
||||
|
>修改 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
class="filter-item" |
||||
|
size="mini" |
||||
|
type="primary" |
||||
|
icon="el-icon-delete" |
||||
|
@click="handleDelete" |
||||
|
>删除 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
class="filter-item" |
||||
|
size="mini" |
||||
|
type="primary" |
||||
|
icon="el-icon-plus" |
||||
|
@click="handleImportSAP" |
||||
|
>导入（SAP对接） |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
<div class="l-table"> |
||||
|
<!--表格渲染--> |
||||
|
<el-table |
||||
|
ref="multipleTable" |
||||
|
v-loading="listLoading" |
||||
|
element-loading-text="拼命加载中..." |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
class="cr-table" |
||||
|
:data="list" |
||||
|
:height="tableHeight" |
||||
|
:cell-style="cellStyle" |
||||
|
:header-cell-style="headerRowStyle" |
||||
|
size="small" |
||||
|
stripe |
||||
|
border |
||||
|
highlight-current-row |
||||
|
style="width: 100%" |
||||
|
@sort-change="sortChange" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
@row-click="handleRowClick" |
||||
|
> |
||||
|
<el-table-column type="selection" width="44px"></el-table-column> |
||||
|
<el-table-column |
||||
|
label="ERP总成编码" |
||||
|
prop="erpAssemblyCode" |
||||
|
sortable="custom" |
||||
|
align="center" |
||||
|
width="420px" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span class="link-type" @click="handleDrawerOpen(scope.row)">{{ |
||||
|
scope.row.erpAssemblyCode |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="ERP总成名称" |
||||
|
prop="erpAssemblyName " |
||||
|
sortable="custom" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ scope.row.erpAssemblyName }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="ERP总成版本" |
||||
|
prop="erpAssemblyVersion " |
||||
|
sortable="custom" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ scope.row.erpAssemblyVersion }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
label="车型" |
||||
|
prop="vehicleModel " |
||||
|
sortable="custom" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ scope.row.model }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!--表单渲染--> |
||||
|
<el-dialog |
||||
|
:visible.sync="dialogFormVisible" |
||||
|
:close-on-click-modal="false" |
||||
|
:title="formTitle" |
||||
|
width="700px" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="form" |
||||
|
:inline="true" |
||||
|
:model="form" |
||||
|
:rules="rules" |
||||
|
size="small" |
||||
|
label-width="120px" |
||||
|
> |
||||
|
<el-row> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="总成编码：" required /> |
||||
|
</el-col> |
||||
|
<el-col :span="20"> |
||||
|
<el-form-item prop="erpAssemblyCode "> |
||||
|
<el-input |
||||
|
style="width: 400px" |
||||
|
v-model="form.erpAssemblyCode" |
||||
|
:disabled="isEdit" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="总成名称：" required /> |
||||
|
</el-col> |
||||
|
<el-col :span="20"> |
||||
|
<el-form-item prop="erpAssemblyName "> |
||||
|
<el-input |
||||
|
style="width: 400px" |
||||
|
v-model="form.erpAssemblyName" |
||||
|
:disabled="isEdit" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="总成类型：" required /> |
||||
|
</el-col> |
||||
|
<el-col :span="20"> |
||||
|
<el-form-item prop="erpAssemblyType "> |
||||
|
<el-input |
||||
|
style="width: 200px" |
||||
|
v-model="form.erpAssemblyType" |
||||
|
:disabled="isEdit" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="车型：" required /> |
||||
|
</el-col> |
||||
|
<el-col :span="20"> |
||||
|
<el-form-item prop="vehicleModel "> |
||||
|
<el-input |
||||
|
style="width: 200px" |
||||
|
v-model="form.model" |
||||
|
:disabled="isEdit" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-table |
||||
|
ref="DetialTable" |
||||
|
v-loading="listLoading" |
||||
|
element-loading-text="拼命加载中..." |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
class="cr-table" |
||||
|
:data="form.details" |
||||
|
:height="detailTableHeight" |
||||
|
:cell-style="cellStyle" |
||||
|
:header-cell-style="headerRowStyle" |
||||
|
size="small" |
||||
|
stripe |
||||
|
border |
||||
|
highlight-current-row |
||||
|
style="width: 100%" |
||||
|
@row-click="handleRowClick" |
||||
|
> |
||||
|
<!-- <el-table-column type="selection" width="44px"></el-table-column> --> |
||||
|
<el-table-column prop="partCode" label="客户零件代码" width="150px" > |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.partCode" size="mini" style="width:135px"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="description" label="客户零件名称"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.description" size="mini"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="partNum" label="客户零件数量" width="120px" > |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input-number v-model="scope.row.partNum" :min="1" size="mini" style="width:100px"></el-input-number> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="isKey" label="是否Key件" align="center" width="80px" > <!-- label-class-name="DisabledSelection" 去除列头全选--> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-checkbox v-model="scope.row.isKey"></el-checkbox> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column prop="description" label="描述"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.disdescriptionKey"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
<el-table-column prop="description" width="35px"> |
||||
|
<template slot="header"> |
||||
|
<el-button @click="handleAddDetails" icon="el-icon-plus" type="text"></el-button> |
||||
|
</template> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button @click="handleDeleteDetails(scope.$index, scope.row)" icon="el-icon-minus" type="text"></el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<!--表格渲染--> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="dialogFormVisible = false" |
||||
|
>取消</el-button |
||||
|
> |
||||
|
<el-button v-loading="formLoading" type="primary" @click="save" |
||||
|
>确认</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
|
||||
|
<div class="table-footer"> |
||||
|
<!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"--> |
||||
|
<pagination |
||||
|
v-show="totalCount > 0" |
||||
|
:total="totalCount" |
||||
|
:page.sync="page" |
||||
|
:limit.sync="listQuery.MaxResultCount" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</div> |
||||
|
<!-- 抽屉控件 --> |
||||
|
<el-drawer |
||||
|
title="信息详细页" |
||||
|
size="75%" |
||||
|
direction="rtl" |
||||
|
:visible.sync="drawer" |
||||
|
:before-close="handleDrawerClose" |
||||
|
> |
||||
|
<div> |
||||
|
<Detail |
||||
|
v-bind:customerInfos="customerInfos" |
||||
|
style="margin-top: -35px" |
||||
|
></Detail> |
||||
|
</div> |
||||
|
</el-drawer> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Pagination from "@/components/Pagination"; |
||||
|
import permission from "@/directive/permission/index.js"; |
||||
|
import CRMTableHead from "../../components/CRMTableHead"; |
||||
|
import importExcel from "@/components/ImportExcel-vw"; |
||||
|
import Lockr from "lockr"; |
||||
|
import moment from "moment"; |
||||
|
import Detail from "./detail.vue"; |
||||
|
import { downloadFile } from "@/utils/crmindex.js"; |
||||
|
|
||||
|
//组件计量单位 |
||||
|
const bomUnit = [ |
||||
|
{ key: 0, display_name: "PC" }, |
||||
|
{ key: 1, display_name: "TON" }, |
||||
|
{ key: 2, display_name: "Other" }, |
||||
|
]; |
||||
|
const projectTypeKeyValue = bomUnit.reduce((acc, cur) => { |
||||
|
acc[cur.key] = cur.display_name; |
||||
|
return acc; |
||||
|
}, {}); |
||||
|
|
||||
|
export default { |
||||
|
name: "AssemblyCfgERP", |
||||
|
components: { Pagination, CRMTableHead, importExcel, Detail }, |
||||
|
directives: { permission }, |
||||
|
filters: { |
||||
|
IsCustomerSignFilter(status) { |
||||
|
//翻译是否签字 |
||||
|
const statusMap = { |
||||
|
true: "是", |
||||
|
false: "否", |
||||
|
}; |
||||
|
return statusMap[status]; |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
const validVersion = (rule, value, callback) => { |
||||
|
let numberReg = /^\d{6}$/; |
||||
|
if (!numberReg.test(value)) { |
||||
|
callback(new Error("只能为6位数字！")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}; |
||||
|
return { |
||||
|
crmType: "AssemblyCfgERP", |
||||
|
rules: { |
||||
|
erpAssemblyName: [ |
||||
|
{ required: true, message: "必须输入！", trigger: "blur" }, |
||||
|
], |
||||
|
}, |
||||
|
valueSelect: "", |
||||
|
customerInfos: [], |
||||
|
dialogOptions: [], |
||||
|
versionValue: "", |
||||
|
searchContent: "", // 输入内容 |
||||
|
showExcelImport: false, |
||||
|
form: {}, |
||||
|
drawer: false, |
||||
|
list: null, |
||||
|
totalCount: 0, |
||||
|
listLoading: true, |
||||
|
customerInfo: { |
||||
|
bomId: "", |
||||
|
}, |
||||
|
// 高级搜索 |
||||
|
filterObj: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
listQuery: { |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 15, |
||||
|
ErpAssemblyName: undefined, |
||||
|
ErpAssemblyCode: undefined, |
||||
|
vehicleModel:undefined, |
||||
|
}, |
||||
|
listExportQuery: { |
||||
|
erpAssemblyCode: undefined, |
||||
|
erpAssemblyName: undefined, |
||||
|
}, |
||||
|
form:{ |
||||
|
details:[] |
||||
|
}, |
||||
|
page: 1, |
||||
|
// 显示搜索条件 |
||||
|
showSearch: true, |
||||
|
bomUnit, |
||||
|
multipleSelection: [], |
||||
|
drawer: false, |
||||
|
dialogFormVisible: false, |
||||
|
formTitle: "", |
||||
|
isEdit: false, |
||||
|
formLoading: false, |
||||
|
dialogFormVisible: false, |
||||
|
tableHeight: document.documentElement.clientHeight - 280, |
||||
|
detailTableHeight:250, |
||||
|
details:[] //修改子表数据源 |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
var offsetHei = document.documentElement.clientHeight; |
||||
|
//console.log(offsetHei); |
||||
|
let boxH = this.$refs.box.offsetHeight; |
||||
|
this.tableHeight = offsetHei - boxH - 57 - 79;//57为footer高度，79为页面上部标签高度 |
||||
|
//console.log(boxH); |
||||
|
//console.log(this.tableHeight); |
||||
|
}); |
||||
|
}, |
||||
|
created() { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
computed: { |
||||
|
getDefaultField() { |
||||
|
var tempsTabs = []; |
||||
|
// tempsTabs.push({ |
||||
|
// label: "ERP总成名称", |
||||
|
// prop: "erpAssemblyName ", |
||||
|
// width: 220, |
||||
|
// }); |
||||
|
tempsTabs.push({ |
||||
|
label: "ERP总成版本", |
||||
|
prop: "erpAssemblyVersion ", |
||||
|
width: 100, |
||||
|
}); |
||||
|
return tempsTabs; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
//抽屉 |
||||
|
handleDrawerOpen(param) { |
||||
|
this.drawer = true; |
||||
|
var parentId = param.id; //主键id |
||||
|
this.customerInfos = [ |
||||
|
{ |
||||
|
ParentId: parentId, |
||||
|
}, |
||||
|
]; |
||||
|
}, |
||||
|
handleDrawerClose(done) { |
||||
|
done(); |
||||
|
}, |
||||
|
save() { |
||||
|
this.$refs.form.validate((valid) => { |
||||
|
if (valid) { |
||||
|
console.log("保存参数:" + JSON.stringify(this.form)); |
||||
|
this.formLoading = true; |
||||
|
if (this.isEdit) { |
||||
|
//修改 |
||||
|
this.$axios |
||||
|
.puts("/api/newjit/assembly-cfg-erp/" + this.form.id, this.form) |
||||
|
.then((response) => { |
||||
|
this.formLoading = false; |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "更新成功", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
this.dialogFormVisible = false; |
||||
|
this.getList(); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.formLoading = false; |
||||
|
}); |
||||
|
} else { |
||||
|
//insert添加 |
||||
|
console.log(JSON.stringify(this.form)); |
||||
|
this.$axios |
||||
|
.posts("/api/newjit/assembly-cfg-erp", this.form) |
||||
|
.then((response) => { |
||||
|
this.formLoading = false; |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "新增成功", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
this.dialogFormVisible = false; |
||||
|
this.getList(); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.formLoading = false; |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
/** 新增 */ |
||||
|
handleCreate() { |
||||
|
if (this.$refs["form"] !== undefined) { |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs["form"].resetFields(); |
||||
|
}); |
||||
|
} |
||||
|
this.formTitle = "新增"; |
||||
|
this.isEdit = false; |
||||
|
this.form = {}; |
||||
|
this.details = []; |
||||
|
this.dialogFormVisible = true; |
||||
|
}, |
||||
|
/** 修改 */ |
||||
|
handleUpdate(row) { |
||||
|
this.formTitle = "修改"; |
||||
|
this.isEdit = true; |
||||
|
this.details = []; |
||||
|
if (this.multipleSelection.length != 1) { |
||||
|
this.$message({ |
||||
|
message: "编辑必须选择单行", |
||||
|
type: "warning", |
||||
|
}); |
||||
|
return; |
||||
|
} else { |
||||
|
this.fetchData(this.multipleSelection[0].id); |
||||
|
this.dialogFormVisible = true; |
||||
|
} |
||||
|
}, |
||||
|
/** 删除 */ |
||||
|
handleDelete(row) { |
||||
|
if (this.multipleSelection.length != 1) { |
||||
|
this.$message({ |
||||
|
message: "编辑必须选择单行", |
||||
|
type: "warning", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
// this.$alert("暂时不支持批量删除", "提示", { |
||||
|
// confirmButtonText: "确定", |
||||
|
// callback: (action) => { |
||||
|
// // |
||||
|
// }, |
||||
|
// }); |
||||
|
this.$confirm("是否删除总成" + this.multipleSelection[0].erpAssemblyCode + "?", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning", |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.$axios |
||||
|
.deletes("/api/newjit/assembly-cfg-erp/"+ this.multipleSelection[0].id) |
||||
|
.then((response) => { |
||||
|
const index = this.list.indexOf(this.multipleSelection[0]); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "删除成功", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
this.getList(); |
||||
|
}); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.$message({ |
||||
|
type: "info", |
||||
|
message: "已取消删除", |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
fetchData(id) { |
||||
|
//循环动态 |
||||
|
this.$axios |
||||
|
.gets("/api/newjit/assembly-cfg-erp/" + id) |
||||
|
.then((response) => { |
||||
|
this.form = response.item; |
||||
|
//this.details = response.item.details; |
||||
|
//console.log(this.details); |
||||
|
}); |
||||
|
}, |
||||
|
/** 导出功能 */ |
||||
|
handleDownload() { |
||||
|
this.listLoading = true; |
||||
|
this.listExportQuery.erpAssemblyCode = this.listQuery.ErpAssemblyCode; |
||||
|
this.listExportQuery.erpAssemblyName = this.listQuery.ErpAssemblyName; |
||||
|
console.log(JSON.stringify(this.listExportQuery)); |
||||
|
this.$axios |
||||
|
.posts("/api/newjit/assembly-cfg-erp/export", this.listExportQuery) |
||||
|
.then((res) => { |
||||
|
let filename = res.item; |
||||
|
this.$axios |
||||
|
.BolbGets("/api/newjit/exclude-part-cfg/download/" + filename) |
||||
|
.then((response) => { |
||||
|
if (filename.indexOf("_") != -1) { |
||||
|
let downName = |
||||
|
filename.slice(0, filename.lastIndexOf("_")) + |
||||
|
filename.slice(filename.lastIndexOf(".")); |
||||
|
downloadFile(response, downName); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据-导出成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} else { |
||||
|
downloadFile(response, filename); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据-导出成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}); |
||||
|
this.listLoading = false; |
||||
|
}, |
||||
|
/** 重置按钮操作 */ |
||||
|
resetQuery(refName) { |
||||
|
//this.$refs[refName].resetFields(); |
||||
|
this.listQuery.ErpAssemblyName = ""; |
||||
|
this.listQuery.ErpAssemblyCode = ""; |
||||
|
this.listQuery.vehicleModelCode = ""; |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
/** 搜索按钮操作 */ |
||||
|
handleQuery() { |
||||
|
this.listQuery.SkipCount = 1; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
selectValue(params) { |
||||
|
//版本下拉选择 |
||||
|
this.versionValue = params.value; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
|
||||
|
selectOptionsChange(item) { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
importExcelData() { |
||||
|
//关闭导入窗体时调用 |
||||
|
this.showExcelImport = false; |
||||
|
//this.getList(); |
||||
|
}, |
||||
|
|
||||
|
/** 刷新列表 */ |
||||
|
handleHandle(data) { |
||||
|
if (data.type !== "edit") { |
||||
|
this.getList(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleAddDetails() { |
||||
|
if (this.form.details === undefined) { |
||||
|
this.form.details = []; |
||||
|
//console.log(679); |
||||
|
} |
||||
|
let obj = {}; |
||||
|
obj.partCode = ""; |
||||
|
obj.description = ""; |
||||
|
obj.partNum = ""; |
||||
|
obj.isKey = false; |
||||
|
obj.description = ""; |
||||
|
|
||||
|
//console.log(this.form.details); |
||||
|
this.form.details.push(obj); |
||||
|
//console.log(688); |
||||
|
}, |
||||
|
handleDeleteDetails(index){ |
||||
|
this.form.details.splice(index, 1); |
||||
|
//console.log(693); |
||||
|
}, |
||||
|
|
||||
|
/** 格式化字段 */ |
||||
|
fieldFormatter(row, column) { |
||||
|
if (column.property === "billStatus") { |
||||
|
return { 0: "未生效", 2: "已生效", 3: "已发布" }[row[column.property]]; |
||||
|
} |
||||
|
if (column.property == "onlineTime" || column.property == "receiveTime") { |
||||
|
var date = row[column.property]; |
||||
|
if (date == undefined) { |
||||
|
return ""; |
||||
|
} |
||||
|
return moment(date).format("YYYY-MM-DD HH:mm:ss"); |
||||
|
} |
||||
|
return row[column.property] || "--"; |
||||
|
}, |
||||
|
roleFilter(type) { |
||||
|
return projectTypeKeyValue[type]; |
||||
|
}, |
||||
|
getList() { |
||||
|
this.listLoading = true; |
||||
|
this.listQuery.SkipCount = (this.page - 1) * 10; |
||||
|
this.$axios |
||||
|
.gets("/api/newjit/assembly-cfg-erp/list", this.listQuery) |
||||
|
.then((response) => { |
||||
|
this.list = response.items; |
||||
|
this.totalCount = response.totalCount; |
||||
|
setTimeout(() => { |
||||
|
//大数据量加载时 |
||||
|
this.listLoading = false; |
||||
|
}, 500); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
getDetialList(partCode) { |
||||
|
this.listLoading = true; |
||||
|
console.log("详表条件：" + JSON.stringify(this.customerInfo.parentId)); |
||||
|
this.$axios |
||||
|
.gets("/api/newjit/assembly-cfg-erp/" + this.customerInfo.parentId) |
||||
|
.then((response) => { |
||||
|
console.log(partCode) |
||||
|
if(partCode !== "" && partCode !== undefined) |
||||
|
{ |
||||
|
//console.log(partCode) |
||||
|
this.list = response.item.details.filter(u => u.partCode === partCode); |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
this.list = response.item.details; |
||||
|
} |
||||
|
//alert(JSON.stringify(response.Items)) |
||||
|
//this.totalCount = response.totalCount; |
||||
|
setTimeout(() => { |
||||
|
//大数据量加载时 |
||||
|
this.listLoading = false; |
||||
|
}, 500); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
valueselectChange(){}, |
||||
|
handleImportSAP(){}, |
||||
|
|
||||
|
handleFilter() { |
||||
|
this.page = 1; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
|
||||
|
sortChange(data) { |
||||
|
const { prop, order } = data; |
||||
|
if (!prop || !order) { |
||||
|
this.handleFilter(); |
||||
|
return; |
||||
|
} |
||||
|
this.listQuery.Sorting = prop + " " + order; |
||||
|
this.handleFilter(); |
||||
|
}, |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
/** 通过回调控制style */ |
||||
|
cellStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right" }; |
||||
|
} else { |
||||
|
return { textAlign: "left" }; |
||||
|
} |
||||
|
}, |
||||
|
/** 通过回调控制表头style */ |
||||
|
headerRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right", background: "#FAFAFA" }; |
||||
|
} else { |
||||
|
return { textAlign: "left", background: "#FAFAFA" }; |
||||
|
} |
||||
|
}, |
||||
|
handleRowClick(row, column, event) { |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
this.$refs.multipleTable.toggleRowSelection(row); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "../../../ux/styles/crmtable.scss"; |
||||
|
|
||||
|
// /*表格全选框去除空框*/ |
||||
|
// .el-table >>> .DisabledSelection .cell .el-checkbox__inner { |
||||
|
// display: none; |
||||
|
// position: relative; |
||||
|
// } |
||||
|
// /*表格全选框改为：选择*/ |
||||
|
// .el-table >>> .DisabledSelection .cell:before { |
||||
|
// content: "是否Key件"; |
||||
|
// position: absolute; |
||||
|
// left: 7px; |
||||
|
// } |
||||
|
.divider1{ |
||||
|
margin: 0 ; |
||||
|
width: 118%; |
||||
|
} |
||||
|
.formitem{ |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,740 @@ |
|||||
|
<!--零件匹配关系页--> |
||||
|
<template> |
||||
|
<div class="cr-body-content"> |
||||
|
<div ref="box"> |
||||
|
<flexbox class="content-header"> |
||||
|
|
||||
|
<el-form |
||||
|
:model="listQuery" |
||||
|
ref="queryForm" |
||||
|
v-show="showSearch" |
||||
|
:inline="true" |
||||
|
> |
||||
|
<!-- <span>版本:</span> |
||||
|
|
||||
|
<XhJSSelect |
||||
|
:options="versionList" |
||||
|
style="width: 200px" |
||||
|
class="search-container" |
||||
|
@value-change="selectValue" |
||||
|
></XhJSSelect> --> |
||||
|
|
||||
|
|
||||
|
<el-form-item label="零件代码：" prop="partCode"> |
||||
|
<el-input |
||||
|
v-model="partCode" |
||||
|
clearable |
||||
|
size="small" |
||||
|
placeholder="" |
||||
|
style="width: 200px" |
||||
|
class="search-container" |
||||
|
@keyup.enter.native="handleFilter" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="零件名称：" prop="partName"> |
||||
|
<el-input |
||||
|
v-model="partName" |
||||
|
clearable |
||||
|
size="small" |
||||
|
placeholder="" |
||||
|
style="width: 200px" |
||||
|
class="search-container" |
||||
|
@keyup.enter.native="handleFilter" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="零件类型：" prop="partType"> |
||||
|
<el-select |
||||
|
v-model="partType" |
||||
|
clearable |
||||
|
placeholder="请选择" |
||||
|
size="medium" |
||||
|
style="margin-right: 15px" |
||||
|
@change="valueselectChange" |
||||
|
> |
||||
|
<el-option label="结算" value="R0003"></el-option> |
||||
|
<el-option label="二配" value="R0001"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="零件子类型：" prop="partChildType"> |
||||
|
<el-select |
||||
|
v-model="partChildType" |
||||
|
clearable |
||||
|
placeholder="请选择" |
||||
|
size="medium" |
||||
|
style="margin-right: 15px" |
||||
|
@change="valueselectChange" |
||||
|
> |
||||
|
<el-option label="结算" value="R0003"></el-option> |
||||
|
<el-option label="二配" value="R0001"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<!-- <el-input |
||||
|
v-model="searchContent" |
||||
|
clearable |
||||
|
size="small" |
||||
|
placeholder="按照结算件基本信息搜索..." |
||||
|
style="width: 200px" |
||||
|
class="search-container" |
||||
|
@keyup.enter.native="handleFilter" |
||||
|
/> --> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
size="mini" |
||||
|
type="success" |
||||
|
icon="el-icon-search" |
||||
|
@click="handleFilter" |
||||
|
>搜索 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
icon="el-icon-refresh" |
||||
|
size="mini" |
||||
|
@click="resetQuery('queryForm')" |
||||
|
>重置 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
class="filter-item" |
||||
|
plain |
||||
|
size="mini" |
||||
|
type="warning" |
||||
|
icon="el-icon-bottom" |
||||
|
@click="handleDownload()" |
||||
|
>导出Excel |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
<!--表格头组件，filter查询--> |
||||
|
<!-- <c-r-m-table-head |
||||
|
ref="crmTableHead" |
||||
|
:crm-type="crmType" |
||||
|
@handle="handleHandle" |
||||
|
@filter="handleFilters" |
||||
|
> |
||||
|
</c-r-m-table-head> --> |
||||
|
</el-form> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
<!--表格渲染--> |
||||
|
<el-table |
||||
|
ref="multipleTable" |
||||
|
v-loading.fullscreen.lock="listLoading" |
||||
|
element-loading-text="拼命加载中..." |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
class="cr-table" |
||||
|
:data="list" |
||||
|
:height="tableHeight" |
||||
|
:cell-style="cellStyle" |
||||
|
:header-cell-style="headerRowStyle" |
||||
|
size="small" |
||||
|
stripe |
||||
|
border |
||||
|
highlight-current-row |
||||
|
style="width: 100%" |
||||
|
@sort-change="sortChange" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
@row-click="handleRowClick" |
||||
|
> |
||||
|
<!-- <el-table-column type="selection" width="44px"></el-table-column> --> |
||||
|
<!-- <el-table-column |
||||
|
label="版本" |
||||
|
prop="version" |
||||
|
sortable="custom" |
||||
|
align="center" |
||||
|
width="100px" |
||||
|
>fixed 默认固定在左边 |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tooltip :content="scope.row.version" placement="top"> |
||||
|
<span class="link-type">{{ scope.row.version }}</span> |
||||
|
</el-tooltip> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
<el-table-column |
||||
|
v-for="(item, index) in getDefaultField" |
||||
|
:key="index" |
||||
|
:prop="item.prop" |
||||
|
:label="item.label" |
||||
|
:min-width="item.width" |
||||
|
:formatter="fieldFormatter" |
||||
|
sortable="custom" |
||||
|
show-overflow-tooltip |
||||
|
:gutter="0" |
||||
|
> |
||||
|
<template slot="header" slot-scope="scope"> |
||||
|
{{ scope.column.label }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div class="table-footer"> |
||||
|
<!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"--> |
||||
|
<pagination |
||||
|
v-show="totalCount > 0" |
||||
|
:total="totalCount" |
||||
|
:page.sync="page" |
||||
|
:limit.sync="listQuery.MaxResultCount" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
<!-- 导入Excel组件 --> |
||||
|
<importExcel |
||||
|
ref="importexcel" |
||||
|
:show="showExcelImport" |
||||
|
:crmType="crmType" |
||||
|
@close="importExcelData" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination |
||||
|
import permission from "@/directive/permission/index.js"; |
||||
|
import importExcel from "@/components/ImportExcel-invoice"; |
||||
|
import CRMTableHead from "../../components/CRMTableHead"; |
||||
|
import moment from "moment"; |
||||
|
import Lockr from "lockr"; |
||||
|
import { downloadFile } from "@/utils/crmindex.js"; |
||||
|
import XhJSSelect from "@/components/CreateCom/Xh-JS-Select-Label.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "CustomerPartCfg", |
||||
|
components: { Pagination, CRMTableHead, importExcel, XhJSSelect }, |
||||
|
directives: { permission }, |
||||
|
filters: { |
||||
|
IsCustomerSignFilter(status) { |
||||
|
//翻译是否签字 |
||||
|
const statusMap = { |
||||
|
true: "是", |
||||
|
false: "否", |
||||
|
}; |
||||
|
return statusMap[status]; |
||||
|
}, |
||||
|
}, |
||||
|
props: { |
||||
|
customerInfos: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
crmType: "customerPartCfg", |
||||
|
versionValue: "", |
||||
|
//valueSelect: "R0003", |
||||
|
versionList: [], //版本列表 |
||||
|
rules: { |
||||
|
//前端定义的规则，后端也有验证 |
||||
|
erpMaterialCode: [ |
||||
|
{ required: true, message: "必须输入！", trigger: "blur" }, |
||||
|
], |
||||
|
}, |
||||
|
searchContent: "", // 输入内容 |
||||
|
customerInfo: { |
||||
|
settleAccountId: "", |
||||
|
}, |
||||
|
form: { |
||||
|
dicDetailID: "", |
||||
|
customerId: "", |
||||
|
projectId: "", |
||||
|
}, |
||||
|
list: null, |
||||
|
totalCount: 0, |
||||
|
listLoading: true, |
||||
|
formLoading: false, |
||||
|
// 高级搜索 |
||||
|
filterObj: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
listVersionQuery: { |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 15, |
||||
|
}, |
||||
|
listQuery: { |
||||
|
Filters: [ |
||||
|
{ |
||||
|
logic: 0, |
||||
|
column: "Enabled", |
||||
|
action: 0, |
||||
|
value: "true", |
||||
|
}, //默认查询可用的 |
||||
|
], |
||||
|
//OrgID:"", |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 15, |
||||
|
version: "", |
||||
|
//site: "TH", |
||||
|
customerCode: "", |
||||
|
//userId: "00000000-0000-0000-0000-000000000000", |
||||
|
partCode:"",//零件编码 |
||||
|
partName:"",//零件名称 |
||||
|
partType:"",//零件类型 |
||||
|
partChildType:"",//零件子类型 |
||||
|
}, |
||||
|
listExportQuery: { |
||||
|
Filters: [ |
||||
|
{ |
||||
|
logic: 0, |
||||
|
column: "Enabled", |
||||
|
action: 0, |
||||
|
value: "true", |
||||
|
}, //默认查询可用的 |
||||
|
], |
||||
|
//OrgID:"", |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 15, |
||||
|
version: "", |
||||
|
fileType: 0, |
||||
|
userId: "", |
||||
|
}, |
||||
|
showSearch: true, |
||||
|
page: 1, |
||||
|
dialogFormVisible: false, |
||||
|
multipleSelection: [], |
||||
|
formTitle: "", |
||||
|
drawer: false, |
||||
|
showExcelImport: false, |
||||
|
tableHeight: document.documentElement.clientHeight - 260, |
||||
|
isEdit: false, |
||||
|
sortState:false, //标记刷新是否是排序调用 |
||||
|
|
||||
|
partCode:'', |
||||
|
partName:'', |
||||
|
partType:'', |
||||
|
partChildType:'', |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
var offsetHei = document.documentElement.clientHeight; |
||||
|
console.log(offsetHei); |
||||
|
let boxH = this.$refs.box.offsetHeight; |
||||
|
this.tableHeight = offsetHei - boxH - 57 - 79;//57为footer高度，79为页面上部标签高度 |
||||
|
console.log(this.$refs.box.offsetHeight); |
||||
|
console.log(this.tableHeight); |
||||
|
}); |
||||
|
}, |
||||
|
created() { |
||||
|
//this.getVersionInfo(); |
||||
|
//if (this.versionList == []) { |
||||
|
this.getList(); |
||||
|
//} |
||||
|
}, |
||||
|
computed: { |
||||
|
/** 列表字段 */ |
||||
|
getDefaultField() { |
||||
|
var tempsTabs = []; |
||||
|
|
||||
|
tempsTabs.push({ |
||||
|
label: "零件代码", |
||||
|
prop: "partCode", |
||||
|
width: 100, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "零件名称", |
||||
|
prop: "partName", |
||||
|
width: 150, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "零件类型", |
||||
|
prop: "partType", |
||||
|
width: 120 |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "零件子类型", |
||||
|
prop: "partChildType", |
||||
|
width: 120, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "零件描述", |
||||
|
prop: "Description", |
||||
|
width: 150, |
||||
|
}); |
||||
|
return tempsTabs; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
selectValue(params) { |
||||
|
//版本下拉选择 |
||||
|
this.versionValue = params.value; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
valueselectChange(data) { |
||||
|
//alert(data); |
||||
|
//版本下拉选择 |
||||
|
this.valueSelect = data; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
handleTypeDrop(command, params = {}) { |
||||
|
if (command == "updateFis") { |
||||
|
this.listLoading = true; |
||||
|
//this.listQuery.SkipCount = (this.page - 1) * 10000; |
||||
|
this.$axios |
||||
|
.posts("/api/settleaccount/SettlementPart/updateFis") |
||||
|
.then((res) => { |
||||
|
if (res == true) { |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "FIS数据-更新成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: "warning", |
||||
|
message: "FIS数据-更新失败！", |
||||
|
}); |
||||
|
} |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
} else if (command == "enter") { |
||||
|
} |
||||
|
}, |
||||
|
selectOptionsChange(item) { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
getVersionInfo() { |
||||
|
//取版本列表信息 |
||||
|
//this.listLoading = true; |
||||
|
this.listVersionQuery.SkipCount = (this.page - 1) * 1000; |
||||
|
this.$axios |
||||
|
.posts( |
||||
|
"/api/settleaccount/SettlementPart/versionlist", |
||||
|
this.listVersionQuery |
||||
|
) |
||||
|
.then((response) => { |
||||
|
this.versionList = []; |
||||
|
response.items.forEach((element) => { |
||||
|
let options = {}; |
||||
|
options.value = element.id; |
||||
|
options.label = element.version; |
||||
|
this.versionList.push(options); |
||||
|
}); |
||||
|
const res = new Map() |
||||
|
this.versionList = this.versionList.filter((item) => !res.has(item.label) && res.set(item.label, 1)) |
||||
|
if (JSON.stringify(this.versionList) != "[]") { |
||||
|
//因版本下拉有默认值，所以详表要自动绑定子表数据 |
||||
|
this.versionValue = this.versionList[0].label; |
||||
|
this.getList(); |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
//this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
/** 刷新列表 */ |
||||
|
handleHandle(data) { |
||||
|
if (data.type !== "edit") { |
||||
|
this.getList(); |
||||
|
} |
||||
|
}, |
||||
|
/** 格式化字段 */ |
||||
|
fieldFormatter(row, column) { |
||||
|
/* if (column.property === "state") { |
||||
|
return { 0: "其他", 2: "已结" }[row[column.property]]; |
||||
|
} |
||||
|
if (column.property == "accountDate" || column.property == "date") { |
||||
|
var date = row[column.property]; |
||||
|
if (date == undefined) { |
||||
|
return ""; |
||||
|
} |
||||
|
//return moment(date).format("YYYY-MM-DD HH:mm:ss"); |
||||
|
return moment(date).format("YYYY-MM-DD"); |
||||
|
} */ |
||||
|
if(column.property === 'customerCode') |
||||
|
{ |
||||
|
if(row[column.property] === 'R0001') |
||||
|
{ |
||||
|
var vname = '二配'; |
||||
|
return vname; |
||||
|
} |
||||
|
else if(row[column.property] === 'R0003') |
||||
|
{ |
||||
|
var vname = '结算'; |
||||
|
return vname; |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
return row[column.property]; |
||||
|
} |
||||
|
} |
||||
|
return row[column.property] || "--"; |
||||
|
}, |
||||
|
importExcelData() { |
||||
|
this.getVersionInfo(); |
||||
|
this.listLoading = false; |
||||
|
//关闭导入窗体时调用 |
||||
|
this.showExcelImport = false; |
||||
|
}, |
||||
|
//导出功能 |
||||
|
async handleDownload() { |
||||
|
this.listLoading = true; |
||||
|
if (this.versionValue === "") { |
||||
|
this.$message.error("必需选择版本！"); |
||||
|
this.listLoading = false; |
||||
|
return; |
||||
|
} |
||||
|
if (this.versionValue != "") { |
||||
|
this.listQuery.version = this.versionValue; |
||||
|
} |
||||
|
console.log("发票导出：" + JSON.stringify(this.listQuery)); |
||||
|
this.$axios |
||||
|
.posts( |
||||
|
"/api/settleaccount/SettlementPart/Export", |
||||
|
this.listQuery |
||||
|
) |
||||
|
.then((res) => { |
||||
|
let fileNameOfProject = res; |
||||
|
this.$axios |
||||
|
.BolbGets( |
||||
|
"/api/settleaccount/getblobfile/download/" + fileNameOfProject |
||||
|
) |
||||
|
.then((response) => { |
||||
|
if (fileNameOfProject.indexOf("_") != -1) { |
||||
|
let downName = |
||||
|
fileNameOfProject.slice( |
||||
|
0, |
||||
|
fileNameOfProject.lastIndexOf("_") |
||||
|
) + |
||||
|
fileNameOfProject.slice(fileNameOfProject.lastIndexOf(".")); |
||||
|
downloadFile(response, downName); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据-导出成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} else { |
||||
|
downloadFile(response, fileNameOfProject); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据-导出成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
getList() { |
||||
|
this.listLoading = true; |
||||
|
this.listQuery.SkipCount = (this.page - 1) * 10; |
||||
|
if (this.versionValue != "") { |
||||
|
this.listQuery.version = this.versionValue; |
||||
|
} |
||||
|
if (this.valueSelect != "") { |
||||
|
this.listQuery.customerCode = this.valueSelect; |
||||
|
} else { |
||||
|
this.listQuery.customerCode = ""; |
||||
|
} |
||||
|
console.log("列表查询条件：" + JSON.stringify(this.listQuery)); |
||||
|
this.$axios |
||||
|
.posts( |
||||
|
"/api/newjit/part-cfg/list", |
||||
|
this.listQuery |
||||
|
) |
||||
|
.then((response) => { |
||||
|
this.list = response.items; |
||||
|
this.list.forEach(item => { |
||||
|
if(item.customerCode === 'R0001') |
||||
|
{ |
||||
|
item.customerCode = '二配'; |
||||
|
} |
||||
|
else if(item.customerCode === 'R0003') |
||||
|
{ |
||||
|
item.customerCode = '结算'; |
||||
|
} |
||||
|
}); |
||||
|
this.totalCount = response.totalCount; |
||||
|
setTimeout(() => { |
||||
|
//大数据量加载时 |
||||
|
this.listLoading = false; |
||||
|
}, 500); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
fetchData(id) { |
||||
|
//循环动态 |
||||
|
this.$axios |
||||
|
.gets("/api/settleaccount/SettlementPart/" + id) |
||||
|
.then((response) => { |
||||
|
this.form = response; |
||||
|
}); |
||||
|
}, |
||||
|
/** 筛选操作 */ |
||||
|
handleFilter() { |
||||
|
this.page = 1; |
||||
|
//#region |
||||
|
/* |
||||
|
this.listQuery.Filters = []; |
||||
|
if (this.partCode != "") { |
||||
|
var column = "partCode"; |
||||
|
let filter = { |
||||
|
logic: 0, |
||||
|
column: column, |
||||
|
action: 0, |
||||
|
value: this.partCode, |
||||
|
}; |
||||
|
this.listQuery.Filters = this.listQuery.Filters.filter(u => u.column !== "partCode") |
||||
|
this.listQuery.Filters.push(filter); |
||||
|
} |
||||
|
|
||||
|
if (this.partName != "") { |
||||
|
var column = "partName"; |
||||
|
let filter = { |
||||
|
logic: 0, |
||||
|
column: column, |
||||
|
action: 0, |
||||
|
value: this.partName, |
||||
|
}; |
||||
|
this.listQuery.Filters = this.listQuery.Filters.filter(u => u.column !== "partName") |
||||
|
this.listQuery.Filters.push(filter); |
||||
|
} |
||||
|
|
||||
|
if (this.partType != "") { |
||||
|
var column = "partType"; |
||||
|
let filter = { |
||||
|
logic: 0, |
||||
|
column: column, |
||||
|
action: 0, |
||||
|
value: this.partType, |
||||
|
}; |
||||
|
this.listQuery.Filters = this.listQuery.Filters.filter(u => u.column !== "partType") |
||||
|
this.listQuery.Filters.push(filter); |
||||
|
} |
||||
|
|
||||
|
if (this.partChildType != "") { |
||||
|
var column = "partChildType"; |
||||
|
let filter = { |
||||
|
logic: 0, |
||||
|
column: column, |
||||
|
action: 0, |
||||
|
value: this.partChildType, |
||||
|
}; |
||||
|
this.listQuery.Filters = this.listQuery.Filters.filter(u => u.column !== "partChildType") |
||||
|
this.listQuery.Filters.push(filter); |
||||
|
} |
||||
|
*/ |
||||
|
//#endregion |
||||
|
this.getList(); |
||||
|
}, |
||||
|
/** 多项筛选操作 */ |
||||
|
/** 筛选操作 */ |
||||
|
handleFilters(data) { |
||||
|
if (data === null) { |
||||
|
this.listQuery.Filters = []; |
||||
|
this.getList(); //查询所有 |
||||
|
} else { |
||||
|
console.log(data) |
||||
|
this.filterObj = data; |
||||
|
console.log("筛选" + JSON.stringify(data)); |
||||
|
var offsetHei = document.documentElement.clientHeight; |
||||
|
var removeHeight = Object.keys(this.filterObj).length > 0 ? 310 : 240; |
||||
|
this.tableHeight = offsetHei - removeHeight; |
||||
|
this.currentPage = 1; |
||||
|
let Filter = []; |
||||
|
data.forEach((item) => { |
||||
|
let filter = {}; |
||||
|
if (item.formType === "datetime" || item.formType === "datetime") { |
||||
|
//日期类型的过滤条件是 (datetime >= a and datetime <=b) |
||||
|
filter["Column"] = item.fieldName; |
||||
|
filter["Logic"] = 0; |
||||
|
filter["Value"] = item.value[0]; |
||||
|
filter["Action"] = item.action; |
||||
|
Filter.push(filter); |
||||
|
|
||||
|
if (item.value[1] != null) { |
||||
|
filter["Value"] = item.value[1]; |
||||
|
filter["Action"] = 5; |
||||
|
Filter.push(filter); |
||||
|
} |
||||
|
} else { |
||||
|
filter["Column"] = item.fieldName; |
||||
|
filter["Value"] = item.value; |
||||
|
filter["Logic"] = 0; |
||||
|
filter["Action"] = item.action; |
||||
|
Filter.push(filter); |
||||
|
} |
||||
|
}); |
||||
|
console.log("筛选条件" + JSON.stringify(Filter)); |
||||
|
this.listQuery.Filters = Filter; |
||||
|
this.getList(); |
||||
|
} |
||||
|
}, |
||||
|
/** 重置按钮操作 */ |
||||
|
resetQuery(refName) { |
||||
|
this.OnlineTimeVale = []; |
||||
|
this.ReceiveTimeVale = []; |
||||
|
this.$refs[refName].resetFields(); |
||||
|
this.handleFilter(); |
||||
|
}, |
||||
|
sortChange(data) { |
||||
|
const { prop, order } = data; |
||||
|
if (!prop || !order) { |
||||
|
this.handleFilter(); |
||||
|
return; |
||||
|
} |
||||
|
this.listQuery.Sorting = prop + " " + order; |
||||
|
console.log(this.listQuery.Sorting); |
||||
|
if(this.listQuery.Filters.length>0 && this.listQuery.Filters[0].column === "Enabled") |
||||
|
{ |
||||
|
this.sortState = false; |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
this.sortState = true; |
||||
|
} |
||||
|
this.handleFilter(); |
||||
|
}, |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
/** 通过回调控制style */ |
||||
|
cellStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right" }; |
||||
|
} else { |
||||
|
return { textAlign: "left" }; |
||||
|
} |
||||
|
}, |
||||
|
/** 通过回调控制表头style */ |
||||
|
headerRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right", background: "#FAFAFA" }; |
||||
|
} else { |
||||
|
return { textAlign: "left", background: "#FAFAFA" }; |
||||
|
} |
||||
|
}, |
||||
|
handleRowClick(row, column, event) { |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
this.$refs.multipleTable.toggleRowSelection(row); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "../../styles/crmtable.scss"; |
||||
|
</style> |
||||
|
<style lang="scss"> |
||||
|
.el-table .cell.el-tooltip { |
||||
|
white-space: pre-wrap; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
File diff suppressed because it is too large
@ -0,0 +1,730 @@ |
|||||
|
<!--总成模块信息管理页--> |
||||
|
<template> |
||||
|
<div class="cr-body-content"> |
||||
|
<div ref="box"> |
||||
|
<flexbox class="content-header" > |
||||
|
<el-form |
||||
|
:model="listQuery" |
||||
|
ref="queryForm" |
||||
|
v-show="showSearch" |
||||
|
:inline="true" |
||||
|
> |
||||
|
<!-- <el-row> --> |
||||
|
<el-form-item label="生产线:" prop="workLine"> |
||||
|
<el-select |
||||
|
v-model="listQuery.workLine" |
||||
|
clearable |
||||
|
placeholder="请选择" |
||||
|
size="medium" |
||||
|
style="margin-right: 15px" |
||||
|
@change="valueselectChange" |
||||
|
> |
||||
|
<el-option label="门板" value="R0003"></el-option> |
||||
|
<el-option label="二配" value="R0001"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="" prop="workLineCode"> |
||||
|
<el-select |
||||
|
v-model="listQuery.workLineCode" |
||||
|
clearable |
||||
|
placeholder="请选择" |
||||
|
size="medium" |
||||
|
style="margin-right: 15px" |
||||
|
@change="valueselectChange" |
||||
|
> |
||||
|
<el-option label="01-C8" value="01-C8"></el-option> |
||||
|
<el-option label="01-C9" value="01-C9"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="版本:" prop="Version"> |
||||
|
<el-input |
||||
|
v-model="listQuery.Version" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<!-- </el-row> --> |
||||
|
<el-form-item label="流水号:" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="-" prop="ErpAssemblyName "> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<!-- <el-row> --> |
||||
|
<el-form-item label="大众顺序号:" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="-" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="KNR:" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="-" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<!-- </el-row> --> |
||||
|
<!-- <el-row> --> |
||||
|
<el-form-item label="底盘号:" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="-" prop="ErpAssemblyName "> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="上线日期"> |
||||
|
<el-date-picker |
||||
|
v-model="listQuery.OnlineTimeVale" |
||||
|
size="small" |
||||
|
style="width: 380px" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
type="datetimerange" |
||||
|
range-separator="-" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
<!-- </el-row> --> |
||||
|
<!-- <el-row> --> |
||||
|
<el-form-item label="接收日期"> |
||||
|
<el-date-picker |
||||
|
v-model="listQuery.ReceiveTimeVale" |
||||
|
size="small" |
||||
|
style="width: 380px" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
type="datetimerange" |
||||
|
range-separator="-" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单据状态" prop="State"> |
||||
|
<el-checkbox-group v-model="listQuery.state" > |
||||
|
<el-checkbox v-for="item in billState" :key="item.id" :label="item.id"> |
||||
|
{{ item.name }} |
||||
|
</el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item style="margin: 0px"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-search" |
||||
|
size="mini" |
||||
|
@click="handleFilter" |
||||
|
>搜索</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
icon="el-icon-refresh" |
||||
|
size="mini" |
||||
|
@click="resetQuery('queryForm')" |
||||
|
>重置</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
type="warning" |
||||
|
plain |
||||
|
icon="el-icon-download" |
||||
|
size="mini" |
||||
|
style="margin-left: 15px" |
||||
|
@click="handleDownload()" |
||||
|
>导出(Excel) |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
style="margin-left: 15px" |
||||
|
@click="print()" |
||||
|
>打印发货排序单 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
style="margin-left: 15px" |
||||
|
@click="rePrint()" |
||||
|
>重新打印发货排序单 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
style="margin-left: 15px" |
||||
|
@click="makeUpPrint()" |
||||
|
>补打发货排序单 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
<!-- </el-row> --> |
||||
|
</el-form> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
<div class="l-table"> |
||||
|
<!--表格渲染--> |
||||
|
<el-table |
||||
|
ref="multipleTable" |
||||
|
v-loading="listLoading" |
||||
|
element-loading-text="拼命加载中..." |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
class="cr-table" |
||||
|
:data="list" |
||||
|
:height="tableHeight" |
||||
|
:cell-style="cellStyle" |
||||
|
:header-cell-style="headerRowStyle" |
||||
|
size="small" |
||||
|
stripe |
||||
|
border |
||||
|
highlight-current-row |
||||
|
style="width: 100%" |
||||
|
@sort-change="sortChange" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
@row-click="handleRowClick" |
||||
|
> |
||||
|
|
||||
|
<el-table-column |
||||
|
label="底盘号" |
||||
|
prop="vin " |
||||
|
sortable="custom" |
||||
|
align="center" |
||||
|
|
||||
|
width="180px" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span class="link-type" @click="handleDrawerOpen(scope.row)">{{ |
||||
|
scope.row.vin |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
v-for="(item, index) in getDefaultField" |
||||
|
:key="index" |
||||
|
:prop="item.prop" |
||||
|
:label="item.label" |
||||
|
:min-width="item.width" |
||||
|
:formatter="fieldFormatter" |
||||
|
sortable="custom" |
||||
|
show-overflow-tooltip |
||||
|
:gutter="0" |
||||
|
> |
||||
|
<template slot="header" slot-scope="scope"> |
||||
|
{{ scope.column.label }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="table-footer"> |
||||
|
<!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"--> |
||||
|
<pagination |
||||
|
v-show="totalCount > 0" |
||||
|
:total="totalCount" |
||||
|
:page.sync="page" |
||||
|
:limit.sync="listQuery.MaxResultCount" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
<!-- 抽屉控件 --> |
||||
|
<el-drawer |
||||
|
title="信息详细页" |
||||
|
size="75%" |
||||
|
direction="rtl" |
||||
|
:visible.sync="drawer" |
||||
|
:before-close="handleDrawerClose" |
||||
|
> |
||||
|
</el-drawer> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Pagination from "@/components/Pagination"; |
||||
|
import permission from "@/directive/permission/index.js"; |
||||
|
import CRMTableHead from "../../components/CRMTableHead"; |
||||
|
import importExcel from "@/components/ImportExcel-vw"; |
||||
|
import Lockr from "lockr"; |
||||
|
import moment from "moment"; |
||||
|
import { downloadFile } from "@/utils/crmindex.js"; |
||||
|
|
||||
|
//组件计量单位 |
||||
|
const bomUnit = [ |
||||
|
{ key: 0, display_name: "PC" }, |
||||
|
{ key: 1, display_name: "TON" }, |
||||
|
{ key: 2, display_name: "Other" }, |
||||
|
]; |
||||
|
|
||||
|
|
||||
|
const projectTypeKeyValue = bomUnit.reduce((acc, cur) => { |
||||
|
acc[cur.key] = cur.display_name; |
||||
|
return acc; |
||||
|
}, {}); |
||||
|
|
||||
|
export default { |
||||
|
name: "M100Online", |
||||
|
components: { Pagination, CRMTableHead, importExcel }, |
||||
|
directives: { permission }, |
||||
|
filters: { |
||||
|
IsCustomerSignFilter(status) { |
||||
|
//翻译是否签字 |
||||
|
const statusMap = { |
||||
|
true: "是", |
||||
|
false: "否", |
||||
|
}; |
||||
|
return statusMap[status]; |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
const validVersion = (rule, value, callback) => { |
||||
|
let numberReg = /^\d{6}$/; |
||||
|
if (!numberReg.test(value)) { |
||||
|
callback(new Error("只能为6位数字！")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}; |
||||
|
return { |
||||
|
crmType: "M100Online", |
||||
|
rules: { |
||||
|
erpAssemblyName: [ |
||||
|
{ required: true, message: "必须输入！", trigger: "blur" }, |
||||
|
], |
||||
|
}, |
||||
|
billState:[ |
||||
|
{id:0,name:"已匹配"}, |
||||
|
{id:1,name:"已导出"} |
||||
|
], |
||||
|
valueSelect: "", |
||||
|
customerInfos: [], |
||||
|
dialogOptions: [], |
||||
|
versionValue: "", |
||||
|
searchContent: "", // 输入内容 |
||||
|
showExcelImport: false, |
||||
|
form: {}, |
||||
|
drawer: false, |
||||
|
list: null, |
||||
|
totalCount: 0, |
||||
|
listLoading: true, |
||||
|
customerInfo: { |
||||
|
bomId: "", |
||||
|
}, |
||||
|
// 高级搜索 |
||||
|
filterObj: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
listQuery: { |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 15, |
||||
|
ErpAssemblyName: undefined, |
||||
|
ErpAssemblyCode: undefined, |
||||
|
carType:undefined, |
||||
|
OnlineTimeVale:undefined, |
||||
|
ReceiveTimeVale:undefined, |
||||
|
state:[], |
||||
|
|
||||
|
}, |
||||
|
listExportQuery: { |
||||
|
erpAssemblyCode: undefined, |
||||
|
erpAssemblyName: undefined, |
||||
|
}, |
||||
|
form:{ |
||||
|
details:[] |
||||
|
}, |
||||
|
page: 1, |
||||
|
// 显示搜索条件 |
||||
|
showSearch: true, |
||||
|
bomUnit, |
||||
|
multipleSelection: [], |
||||
|
drawer: false, |
||||
|
dialogFormVisible: false, |
||||
|
formTitle: "", |
||||
|
isEdit: false, |
||||
|
formLoading: false, |
||||
|
tableHeight: document.documentElement.clientHeight - 335, |
||||
|
detailTableHeight:250, |
||||
|
details:[], //修改子表数据源 |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
var offsetHei = document.documentElement.clientHeight; |
||||
|
//console.log(offsetHei); |
||||
|
let boxH = this.$refs.box.offsetHeight; |
||||
|
this.tableHeight = offsetHei - boxH - 57 - 79;//57为footer高度，79为页面上部标签高度 |
||||
|
//console.log(this.$refs.box.offsetHeight); |
||||
|
//console.log(this.tableHeight); |
||||
|
}); |
||||
|
}, |
||||
|
created() { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
computed: { |
||||
|
getDefaultField() { |
||||
|
|
||||
|
var tempsTabs = []; |
||||
|
tempsTabs.push({ label: "流水号", prop: "serialNum", width: 100 }); |
||||
|
tempsTabs.push({ label: "大众顺序号", prop: "hostSN", width: 120 }); |
||||
|
tempsTabs.push({ |
||||
|
label: "KNR", |
||||
|
prop: "knr", |
||||
|
width: 120, |
||||
|
}); |
||||
|
// tempsTabs.push({ |
||||
|
// label: "底盘号", |
||||
|
// prop: "vin", |
||||
|
// width: 130, |
||||
|
// }); |
||||
|
tempsTabs.push({ |
||||
|
label: "KNR", |
||||
|
prop: "knr", |
||||
|
width: 150, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "M100上线时间", |
||||
|
prop: "m100OnlineTime", |
||||
|
width: 150, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "M100接收时间", |
||||
|
prop: "m100ReceiveTime", |
||||
|
width: 180, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "车型代码", |
||||
|
prop: "vehicleModelCode", |
||||
|
width: 120, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "版本", |
||||
|
prop: "version", |
||||
|
width: 150, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "R100上线时间", |
||||
|
prop: "r100OnlineTime", |
||||
|
width: 150, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "R100接收时间", |
||||
|
prop: "r100ReceiveTime", |
||||
|
width: 180, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "备注", |
||||
|
prop: "remark", |
||||
|
width: 120, |
||||
|
}); |
||||
|
return tempsTabs; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
//抽屉 |
||||
|
handleDrawerOpen(param) { |
||||
|
this.drawer = true; |
||||
|
var parentId = param.id; //主键id |
||||
|
this.customerInfos = [ |
||||
|
{ |
||||
|
ParentId: parentId, |
||||
|
}, |
||||
|
]; |
||||
|
}, |
||||
|
handleDrawerClose(done) { |
||||
|
done(); |
||||
|
}, |
||||
|
fetchData(id) { |
||||
|
//循环动态 |
||||
|
this.$axios |
||||
|
.gets("/api/newjit/assembly-cfg-erp/" + id) |
||||
|
.then((response) => { |
||||
|
this.form = response.item; |
||||
|
//this.details = response.item.details; |
||||
|
//console.log(this.details); |
||||
|
}); |
||||
|
}, |
||||
|
/** 导出功能 */ |
||||
|
handleDownload() { |
||||
|
this.listLoading = true; |
||||
|
this.listExportQuery.erpAssemblyCode = this.listQuery.ErpAssemblyCode; |
||||
|
this.listExportQuery.erpAssemblyName = this.listQuery.ErpAssemblyName; |
||||
|
console.log(JSON.stringify(this.listExportQuery)); |
||||
|
this.$axios |
||||
|
.posts("/api/newjit/assembly-cfg-erp/export", this.listExportQuery) |
||||
|
.then((res) => { |
||||
|
let filename = res.item; |
||||
|
this.$axios |
||||
|
.BolbGets("/api/newjit/exclude-part-cfg/download/" + filename) |
||||
|
.then((response) => { |
||||
|
if (filename.indexOf("_") != -1) { |
||||
|
let downName = |
||||
|
filename.slice(0, filename.lastIndexOf("_")) + |
||||
|
filename.slice(filename.lastIndexOf(".")); |
||||
|
downloadFile(response, downName); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据-导出成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} else { |
||||
|
downloadFile(response, filename); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据-导出成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}); |
||||
|
this.listLoading = false; |
||||
|
}, |
||||
|
/** 重置按钮操作 */ |
||||
|
resetQuery(refName) { |
||||
|
//this.$refs[refName].resetFields(); |
||||
|
this.listQuery.ErpAssemblyName = ""; |
||||
|
this.listQuery.ErpAssemblyCode = ""; |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
/** 搜索按钮操作 */ |
||||
|
handleQuery() { |
||||
|
this.listQuery.SkipCount = 1; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
selectValue(params) { |
||||
|
//版本下拉选择 |
||||
|
this.versionValue = params.value; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
|
||||
|
selectOptionsChange(item) { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
importExcelData() { |
||||
|
//关闭导入窗体时调用 |
||||
|
this.showExcelImport = false; |
||||
|
//this.getList(); |
||||
|
}, |
||||
|
|
||||
|
/** 刷新列表 */ |
||||
|
handleHandle(data) { |
||||
|
if (data.type !== "edit") { |
||||
|
this.getList(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleAddDetails() { |
||||
|
if (this.form.details === undefined) { |
||||
|
this.form.details = []; |
||||
|
//console.log(679); |
||||
|
} |
||||
|
let obj = {}; |
||||
|
obj.partCode = ""; |
||||
|
obj.partName = ""; |
||||
|
obj.partNum = ""; |
||||
|
obj.isKey = false; |
||||
|
obj.description = ""; |
||||
|
|
||||
|
console.log(this.form.details); |
||||
|
this.form.details.push(obj); |
||||
|
//console.log(688); |
||||
|
}, |
||||
|
handleDeleteDetails(index){ |
||||
|
this.form.details.splice(index, 1); |
||||
|
//console.log(693); |
||||
|
}, |
||||
|
|
||||
|
/** 格式化字段 */ |
||||
|
fieldFormatter(row, column) { |
||||
|
if (column.property === "billStatus") { |
||||
|
return { 0: "未生效", 2: "已生效", 3: "已发布" }[row[column.property]]; |
||||
|
} |
||||
|
if (column.property == "onlineTime" || column.property == "receiveTime") { |
||||
|
var date = row[column.property]; |
||||
|
if (date == undefined) { |
||||
|
return ""; |
||||
|
} |
||||
|
return moment(date).format("YYYY-MM-DD HH:mm:ss"); |
||||
|
} |
||||
|
return row[column.property] || "--"; |
||||
|
}, |
||||
|
roleFilter(type) { |
||||
|
return projectTypeKeyValue[type]; |
||||
|
}, |
||||
|
getList() { |
||||
|
this.listLoading = true; |
||||
|
this.listQuery.SkipCount = (this.page - 1) * 10; |
||||
|
this.$axios |
||||
|
.gets("/api/newjit/assembly-cfg-erp/list", this.listQuery) |
||||
|
.then((response) => { |
||||
|
this.list = response.items; |
||||
|
this.totalCount = response.totalCount; |
||||
|
setTimeout(() => { |
||||
|
//大数据量加载时 |
||||
|
this.listLoading = false; |
||||
|
}, 500); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
getDetialList(partCode) { |
||||
|
this.listLoading = true; |
||||
|
console.log("详表条件：" + JSON.stringify(this.customerInfo.parentId)); |
||||
|
this.$axios |
||||
|
.gets("/api/newjit/assembly-cfg-erp/" + this.customerInfo.parentId) |
||||
|
.then((response) => { |
||||
|
console.log(partCode) |
||||
|
if(partCode !== "" && partCode !== undefined) |
||||
|
{ |
||||
|
//console.log(partCode) |
||||
|
this.list = response.item.details.filter(u => u.partCode === partCode); |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
this.list = response.item.details; |
||||
|
} |
||||
|
//alert(JSON.stringify(response.Items)) |
||||
|
//this.totalCount = response.totalCount; |
||||
|
setTimeout(() => { |
||||
|
//大数据量加载时 |
||||
|
this.listLoading = false; |
||||
|
}, 500); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
valueselectChange(){}, |
||||
|
handleImportSAP(){}, |
||||
|
|
||||
|
handleFilter() { |
||||
|
this.page = 1; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
|
||||
|
sortChange(data) { |
||||
|
const { prop, order } = data; |
||||
|
if (!prop || !order) { |
||||
|
this.handleFilter(); |
||||
|
return; |
||||
|
} |
||||
|
this.listQuery.Sorting = prop + " " + order; |
||||
|
this.handleFilter(); |
||||
|
}, |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
/** 通过回调控制style */ |
||||
|
cellStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right" }; |
||||
|
} else { |
||||
|
return { textAlign: "left" }; |
||||
|
} |
||||
|
}, |
||||
|
/** 通过回调控制表头style */ |
||||
|
headerRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right", background: "#FAFAFA" }; |
||||
|
} else { |
||||
|
return { textAlign: "left", background: "#FAFAFA" }; |
||||
|
} |
||||
|
}, |
||||
|
handleRowClick(row, column, event) { |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
this.$refs.multipleTable.toggleRowSelection(row); |
||||
|
}, |
||||
|
print(){}, |
||||
|
rePrint(){}, |
||||
|
makeUpPrint(){}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "../../../ux/styles/crmtable.scss"; |
||||
|
|
||||
|
// /*表格全选框去除空框*/ |
||||
|
// .el-table >>> .DisabledSelection .cell .el-checkbox__inner { |
||||
|
// display: none; |
||||
|
// position: relative; |
||||
|
// } |
||||
|
// /*表格全选框改为：选择*/ |
||||
|
// .el-table >>> .DisabledSelection .cell:before { |
||||
|
// content: "是否Key件"; |
||||
|
// position: absolute; |
||||
|
// left: 7px; |
||||
|
// } |
||||
|
.divider1{ |
||||
|
margin: 0 ; |
||||
|
} |
||||
|
.divider2{ |
||||
|
margin: 10px; |
||||
|
margin-bottom: 20px ; |
||||
|
width: 95%; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,688 @@ |
|||||
|
<!--总成模块信息管理页--> |
||||
|
<template> |
||||
|
<div class="cr-body-content"> |
||||
|
<div ref="box"> |
||||
|
<flexbox class="content-header" > |
||||
|
<el-form |
||||
|
:model="listQuery" |
||||
|
ref="queryForm" |
||||
|
v-show="showSearch" |
||||
|
:inline="true" |
||||
|
> |
||||
|
<!-- <el-row> --> |
||||
|
<el-form-item label="生产线:" prop="workLine"> |
||||
|
<el-select |
||||
|
v-model="listQuery.workLine" |
||||
|
clearable |
||||
|
placeholder="请选择" |
||||
|
size="medium" |
||||
|
style="margin-right: 15px" |
||||
|
@change="valueselectChange" |
||||
|
> |
||||
|
<el-option label="门板" value="R0003"></el-option> |
||||
|
<el-option label="二配" value="R0001"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="" prop="workLineCode"> |
||||
|
<el-select |
||||
|
v-model="listQuery.workLineCode" |
||||
|
clearable |
||||
|
placeholder="请选择" |
||||
|
size="medium" |
||||
|
style="margin-right: 15px" |
||||
|
@change="valueselectChange" |
||||
|
> |
||||
|
<el-option label="01-C8" value="01-C8"></el-option> |
||||
|
<el-option label="01-C9" value="01-C9"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="版本:" prop="Version"> |
||||
|
<el-input |
||||
|
v-model="listQuery.Version" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<!-- </el-row> --> |
||||
|
<!-- <el-row> --> |
||||
|
<el-form-item label="大众顺序号:" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="-" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="KNR:" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="-" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<!-- </el-row> --> |
||||
|
<!-- <el-row> --> |
||||
|
<el-form-item label="底盘号:" prop="ErpAssemblyName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="-" prop="ErpAssemblyName "> |
||||
|
<el-input |
||||
|
v-model="listQuery.ErpAssemblyName" |
||||
|
placeholder="" |
||||
|
clearable |
||||
|
size="small" |
||||
|
style="width: 240px" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="上线日期"> |
||||
|
<el-date-picker |
||||
|
v-model="listQuery.OnlineTimeVale" |
||||
|
size="small" |
||||
|
style="width: 380px" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
type="datetimerange" |
||||
|
range-separator="-" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
<!-- </el-row> --> |
||||
|
<!-- <el-row> --> |
||||
|
<el-form-item label="接收日期"> |
||||
|
<el-date-picker |
||||
|
v-model="listQuery.ReceiveTimeVale" |
||||
|
size="small" |
||||
|
style="width: 380px" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
type="datetimerange" |
||||
|
range-separator="-" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单据状态" prop="State"> |
||||
|
<el-checkbox-group v-model="listQuery.state" > |
||||
|
<el-checkbox v-for="item in billState" :key="item.id" :label="item.id"> |
||||
|
{{ item.name }} |
||||
|
</el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item style="margin: 0px"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-search" |
||||
|
size="mini" |
||||
|
@click="handleFilter" |
||||
|
>搜索</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
icon="el-icon-refresh" |
||||
|
size="mini" |
||||
|
@click="resetQuery('queryForm')" |
||||
|
>重置</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
type="warning" |
||||
|
plain |
||||
|
icon="el-icon-download" |
||||
|
size="mini" |
||||
|
style="margin-left: 15px" |
||||
|
@click="handleDownload()" |
||||
|
>导出(Excel) |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
style="margin-left: 15px" |
||||
|
@click="SAPExport()" |
||||
|
>导出Excel（用于SAP导入） |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
<!-- </el-row> --> |
||||
|
</el-form> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
<div class="l-table"> |
||||
|
<!--表格渲染--> |
||||
|
<el-table |
||||
|
ref="multipleTable" |
||||
|
v-loading="listLoading" |
||||
|
element-loading-text="拼命加载中..." |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
class="cr-table" |
||||
|
:data="list" |
||||
|
:height="tableHeight" |
||||
|
:cell-style="cellStyle" |
||||
|
:header-cell-style="headerRowStyle" |
||||
|
size="small" |
||||
|
stripe |
||||
|
border |
||||
|
highlight-current-row |
||||
|
style="width: 100%" |
||||
|
@sort-change="sortChange" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
@row-click="handleRowClick" |
||||
|
> |
||||
|
|
||||
|
<!-- <el-table-column |
||||
|
label="底盘号" |
||||
|
prop="vin " |
||||
|
sortable="custom" |
||||
|
align="center" |
||||
|
|
||||
|
width="180px" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span class="link-type" @click="handleDrawerOpen(scope.row)">{{ |
||||
|
scope.row.vin |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
<el-table-column |
||||
|
v-for="(item, index) in getDefaultField" |
||||
|
:key="index" |
||||
|
:prop="item.prop" |
||||
|
:label="item.label" |
||||
|
:min-width="item.width" |
||||
|
:formatter="fieldFormatter" |
||||
|
sortable="custom" |
||||
|
show-overflow-tooltip |
||||
|
:gutter="0" |
||||
|
> |
||||
|
<template slot="header" slot-scope="scope"> |
||||
|
{{ scope.column.label }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="table-footer"> |
||||
|
<!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"--> |
||||
|
<pagination |
||||
|
v-show="totalCount > 0" |
||||
|
:total="totalCount" |
||||
|
:page.sync="page" |
||||
|
:limit.sync="listQuery.MaxResultCount" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
<!-- 抽屉控件 --> |
||||
|
<el-drawer |
||||
|
title="信息详细页" |
||||
|
size="75%" |
||||
|
direction="rtl" |
||||
|
:visible.sync="drawer" |
||||
|
:before-close="handleDrawerClose" |
||||
|
> |
||||
|
</el-drawer> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Pagination from "@/components/Pagination"; |
||||
|
import permission from "@/directive/permission/index.js"; |
||||
|
import CRMTableHead from "../../components/CRMTableHead"; |
||||
|
import importExcel from "@/components/ImportExcel-vw"; |
||||
|
import Lockr from "lockr"; |
||||
|
import moment from "moment"; |
||||
|
import { downloadFile } from "@/utils/crmindex.js"; |
||||
|
|
||||
|
//组件计量单位 |
||||
|
const bomUnit = [ |
||||
|
{ key: 0, display_name: "PC" }, |
||||
|
{ key: 1, display_name: "TON" }, |
||||
|
{ key: 2, display_name: "Other" }, |
||||
|
]; |
||||
|
|
||||
|
|
||||
|
const projectTypeKeyValue = bomUnit.reduce((acc, cur) => { |
||||
|
acc[cur.key] = cur.display_name; |
||||
|
return acc; |
||||
|
}, {}); |
||||
|
|
||||
|
export default { |
||||
|
name: "M100Online", |
||||
|
components: { Pagination, CRMTableHead, importExcel }, |
||||
|
directives: { permission }, |
||||
|
filters: { |
||||
|
IsCustomerSignFilter(status) { |
||||
|
//翻译是否签字 |
||||
|
const statusMap = { |
||||
|
true: "是", |
||||
|
false: "否", |
||||
|
}; |
||||
|
return statusMap[status]; |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
const validVersion = (rule, value, callback) => { |
||||
|
let numberReg = /^\d{6}$/; |
||||
|
if (!numberReg.test(value)) { |
||||
|
callback(new Error("只能为6位数字！")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}; |
||||
|
return { |
||||
|
crmType: "M100Online", |
||||
|
rules: { |
||||
|
erpAssemblyName: [ |
||||
|
{ required: true, message: "必须输入！", trigger: "blur" }, |
||||
|
], |
||||
|
}, |
||||
|
billState:[ |
||||
|
{id:0,name:"已匹配"}, |
||||
|
{id:1,name:"已导出"} |
||||
|
], |
||||
|
valueSelect: "", |
||||
|
customerInfos: [], |
||||
|
dialogOptions: [], |
||||
|
versionValue: "", |
||||
|
searchContent: "", // 输入内容 |
||||
|
showExcelImport: false, |
||||
|
form: {}, |
||||
|
drawer: false, |
||||
|
list: null, |
||||
|
totalCount: 0, |
||||
|
listLoading: true, |
||||
|
customerInfo: { |
||||
|
bomId: "", |
||||
|
}, |
||||
|
// 高级搜索 |
||||
|
filterObj: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
listQuery: { |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 15, |
||||
|
ErpAssemblyName: undefined, |
||||
|
ErpAssemblyCode: undefined, |
||||
|
carType:undefined, |
||||
|
OnlineTimeVale:undefined, |
||||
|
ReceiveTimeVale:undefined, |
||||
|
state:[], |
||||
|
|
||||
|
}, |
||||
|
listExportQuery: { |
||||
|
erpAssemblyCode: undefined, |
||||
|
erpAssemblyName: undefined, |
||||
|
}, |
||||
|
form:{ |
||||
|
details:[] |
||||
|
}, |
||||
|
page: 1, |
||||
|
// 显示搜索条件 |
||||
|
showSearch: true, |
||||
|
bomUnit, |
||||
|
multipleSelection: [], |
||||
|
drawer: false, |
||||
|
dialogFormVisible: false, |
||||
|
formTitle: "", |
||||
|
isEdit: false, |
||||
|
formLoading: false, |
||||
|
tableHeight: document.documentElement.clientHeight - 335, |
||||
|
detailTableHeight:250, |
||||
|
details:[], //修改子表数据源 |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
var offsetHei = document.documentElement.clientHeight; |
||||
|
//console.log(offsetHei); |
||||
|
let boxH = this.$refs.box.offsetHeight; |
||||
|
this.tableHeight = offsetHei - boxH - 57 - 79;//57为footer高度，79为页面上部标签高度 |
||||
|
//console.log(this.$refs.box.offsetHeight); |
||||
|
//console.log(this.tableHeight); |
||||
|
}); |
||||
|
}, |
||||
|
created() { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
computed: { |
||||
|
getDefaultField() { |
||||
|
|
||||
|
var tempsTabs = []; |
||||
|
tempsTabs.push({ label: "大众顺序号", prop: "hostSN", width: 120 }); |
||||
|
tempsTabs.push({ |
||||
|
label: "KNR", |
||||
|
prop: "knr", |
||||
|
width: 120, |
||||
|
}); |
||||
|
// tempsTabs.push({ |
||||
|
// label: "底盘号", |
||||
|
// prop: "vin", |
||||
|
// width: 130, |
||||
|
// }); |
||||
|
tempsTabs.push({ |
||||
|
label: "KNR", |
||||
|
prop: "knr", |
||||
|
width: 150, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "单据状态", |
||||
|
prop: "billState", |
||||
|
width: 150, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "上线时间", |
||||
|
prop: "onlineTime", |
||||
|
width: 150, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "接收时间", |
||||
|
prop: "receiveTime", |
||||
|
width: 180, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "车型代码", |
||||
|
prop: "vehicleModelCode", |
||||
|
width: 120, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "版本", |
||||
|
prop: "version", |
||||
|
width: 150, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "总成编号", |
||||
|
prop: "erpAssemblyCode", |
||||
|
width: 150, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "总成名称", |
||||
|
prop: "erpAssemblyName", |
||||
|
width: 180, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "备注", |
||||
|
prop: "remark", |
||||
|
width: 120, |
||||
|
}); |
||||
|
return tempsTabs; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
//抽屉 |
||||
|
handleDrawerOpen(param) { |
||||
|
this.drawer = true; |
||||
|
var parentId = param.id; //主键id |
||||
|
this.customerInfos = [ |
||||
|
{ |
||||
|
ParentId: parentId, |
||||
|
}, |
||||
|
]; |
||||
|
}, |
||||
|
handleDrawerClose(done) { |
||||
|
done(); |
||||
|
}, |
||||
|
/** 导出功能 */ |
||||
|
handleDownload() { |
||||
|
this.listLoading = true; |
||||
|
this.listExportQuery.erpAssemblyCode = this.listQuery.ErpAssemblyCode; |
||||
|
this.listExportQuery.erpAssemblyName = this.listQuery.ErpAssemblyName; |
||||
|
console.log(JSON.stringify(this.listExportQuery)); |
||||
|
this.$axios |
||||
|
.posts("/api/newjit/assembly-cfg-erp/export", this.listExportQuery) |
||||
|
.then((res) => { |
||||
|
let filename = res.item; |
||||
|
this.$axios |
||||
|
.BolbGets("/api/newjit/exclude-part-cfg/download/" + filename) |
||||
|
.then((response) => { |
||||
|
if (filename.indexOf("_") != -1) { |
||||
|
let downName = |
||||
|
filename.slice(0, filename.lastIndexOf("_")) + |
||||
|
filename.slice(filename.lastIndexOf(".")); |
||||
|
downloadFile(response, downName); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据-导出成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} else { |
||||
|
downloadFile(response, filename); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据-导出成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}); |
||||
|
this.listLoading = false; |
||||
|
}, |
||||
|
/** 重置按钮操作 */ |
||||
|
resetQuery(refName) { |
||||
|
//this.$refs[refName].resetFields(); |
||||
|
this.listQuery.ErpAssemblyName = ""; |
||||
|
this.listQuery.ErpAssemblyCode = ""; |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
/** 搜索按钮操作 */ |
||||
|
handleQuery() { |
||||
|
this.listQuery.SkipCount = 1; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
selectValue(params) { |
||||
|
//版本下拉选择 |
||||
|
this.versionValue = params.value; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
|
||||
|
selectOptionsChange(item) { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
importExcelData() { |
||||
|
//关闭导入窗体时调用 |
||||
|
this.showExcelImport = false; |
||||
|
//this.getList(); |
||||
|
}, |
||||
|
|
||||
|
/** 刷新列表 */ |
||||
|
handleHandle(data) { |
||||
|
if (data.type !== "edit") { |
||||
|
this.getList(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleAddDetails() { |
||||
|
if (this.form.details === undefined) { |
||||
|
this.form.details = []; |
||||
|
//console.log(679); |
||||
|
} |
||||
|
let obj = {}; |
||||
|
obj.partCode = ""; |
||||
|
obj.partName = ""; |
||||
|
obj.partNum = ""; |
||||
|
obj.isKey = false; |
||||
|
obj.description = ""; |
||||
|
|
||||
|
console.log(this.form.details); |
||||
|
this.form.details.push(obj); |
||||
|
//console.log(688); |
||||
|
}, |
||||
|
handleDeleteDetails(index){ |
||||
|
this.form.details.splice(index, 1); |
||||
|
//console.log(693); |
||||
|
}, |
||||
|
|
||||
|
/** 格式化字段 */ |
||||
|
fieldFormatter(row, column) { |
||||
|
if (column.property === "billStatus") { |
||||
|
return { 0: "未生效", 2: "已生效", 3: "已发布" }[row[column.property]]; |
||||
|
} |
||||
|
if (column.property == "onlineTime" || column.property == "receiveTime") { |
||||
|
var date = row[column.property]; |
||||
|
if (date == undefined) { |
||||
|
return ""; |
||||
|
} |
||||
|
return moment(date).format("YYYY-MM-DD HH:mm:ss"); |
||||
|
} |
||||
|
return row[column.property] || "--"; |
||||
|
}, |
||||
|
roleFilter(type) { |
||||
|
return projectTypeKeyValue[type]; |
||||
|
}, |
||||
|
getList() { |
||||
|
this.listLoading = true; |
||||
|
this.listQuery.SkipCount = (this.page - 1) * 10; |
||||
|
this.$axios |
||||
|
.gets("/api/newjit/assembly-cfg-erp/list", this.listQuery) |
||||
|
.then((response) => { |
||||
|
this.list = response.items; |
||||
|
this.totalCount = response.totalCount; |
||||
|
setTimeout(() => { |
||||
|
//大数据量加载时 |
||||
|
this.listLoading = false; |
||||
|
}, 500); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
getDetialList(partCode) { |
||||
|
this.listLoading = true; |
||||
|
console.log("详表条件：" + JSON.stringify(this.customerInfo.parentId)); |
||||
|
this.$axios |
||||
|
.gets("/api/newjit/assembly-cfg-erp/" + this.customerInfo.parentId) |
||||
|
.then((response) => { |
||||
|
console.log(partCode) |
||||
|
if(partCode !== "" && partCode !== undefined) |
||||
|
{ |
||||
|
//console.log(partCode) |
||||
|
this.list = response.item.details.filter(u => u.partCode === partCode); |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
this.list = response.item.details; |
||||
|
} |
||||
|
//alert(JSON.stringify(response.Items)) |
||||
|
//this.totalCount = response.totalCount; |
||||
|
setTimeout(() => { |
||||
|
//大数据量加载时 |
||||
|
this.listLoading = false; |
||||
|
}, 500); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
valueselectChange(){}, |
||||
|
handleImportSAP(){}, |
||||
|
|
||||
|
handleFilter() { |
||||
|
this.page = 1; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
|
||||
|
sortChange(data) { |
||||
|
const { prop, order } = data; |
||||
|
if (!prop || !order) { |
||||
|
this.handleFilter(); |
||||
|
return; |
||||
|
} |
||||
|
this.listQuery.Sorting = prop + " " + order; |
||||
|
this.handleFilter(); |
||||
|
}, |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
/** 通过回调控制style */ |
||||
|
cellStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right" }; |
||||
|
} else { |
||||
|
return { textAlign: "left" }; |
||||
|
} |
||||
|
}, |
||||
|
/** 通过回调控制表头style */ |
||||
|
headerRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right", background: "#FAFAFA" }; |
||||
|
} else { |
||||
|
return { textAlign: "left", background: "#FAFAFA" }; |
||||
|
} |
||||
|
}, |
||||
|
handleRowClick(row, column, event) { |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
this.$refs.multipleTable.toggleRowSelection(row); |
||||
|
}, |
||||
|
SAPExport(){}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "../../../ux/styles/crmtable.scss"; |
||||
|
|
||||
|
// /*表格全选框去除空框*/ |
||||
|
// .el-table >>> .DisabledSelection .cell .el-checkbox__inner { |
||||
|
// display: none; |
||||
|
// position: relative; |
||||
|
// } |
||||
|
// /*表格全选框改为：选择*/ |
||||
|
// .el-table >>> .DisabledSelection .cell:before { |
||||
|
// content: "是否Key件"; |
||||
|
// position: absolute; |
||||
|
// left: 7px; |
||||
|
// } |
||||
|
.divider1{ |
||||
|
margin: 0 ; |
||||
|
} |
||||
|
.divider2{ |
||||
|
margin: 10px; |
||||
|
margin-bottom: 20px ; |
||||
|
width: 95%; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,952 @@ |
|||||
|
<!--零件匹配关系页--> |
||||
|
<template> |
||||
|
<div class="cr-body-content"> |
||||
|
<div ref="box"> |
||||
|
<flexbox class="content-header"> |
||||
|
|
||||
|
<el-form |
||||
|
:model="listQuery" |
||||
|
ref="queryForm" |
||||
|
v-show="showSearch" |
||||
|
:inline="true" |
||||
|
> |
||||
|
<!-- <span>版本:</span> |
||||
|
|
||||
|
<XhJSSelect |
||||
|
:options="versionList" |
||||
|
style="width: 200px" |
||||
|
class="search-container" |
||||
|
@value-change="selectValue" |
||||
|
></XhJSSelect> --> |
||||
|
|
||||
|
|
||||
|
<el-form-item label="操作员登录名:" prop="userName"> |
||||
|
<el-input |
||||
|
v-model="listQuery.userName" |
||||
|
clearable |
||||
|
size="small" |
||||
|
placeholder="" |
||||
|
style="width: 200px" |
||||
|
class="search-container" |
||||
|
@keyup.enter.native="handleFilter" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="操作员真实名称:" prop="name"> |
||||
|
<el-input |
||||
|
v-model="listQuery.name" |
||||
|
clearable |
||||
|
size="small" |
||||
|
placeholder="" |
||||
|
style="width: 200px" |
||||
|
class="search-container" |
||||
|
@keyup.enter.native="handleFilter" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="部门:" prop="dep"> |
||||
|
<el-select |
||||
|
v-model="listQuery.dep" |
||||
|
clearable |
||||
|
placeholder="请选择" |
||||
|
size="medium" |
||||
|
style="margin-right: 15px" |
||||
|
@change="valueselectChange" |
||||
|
> |
||||
|
<el-option label="结算" value="R0003"></el-option> |
||||
|
<el-option label="二配" value="R0001"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="生产线:" prop="productLineCode"> |
||||
|
<el-select |
||||
|
v-model="listQuery.productLineCode" |
||||
|
clearable |
||||
|
placeholder="请选择" |
||||
|
size="medium" |
||||
|
style="margin-right: 15px" |
||||
|
@change="valueselectChange" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in PLList" |
||||
|
:key="item.productLineCode" |
||||
|
:label="item.productLineName" |
||||
|
:value="item.productLineCode"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<!-- <el-input |
||||
|
v-model="searchContent" |
||||
|
clearable |
||||
|
size="small" |
||||
|
placeholder="按照结算件基本信息搜索..." |
||||
|
style="width: 200px" |
||||
|
class="search-container" |
||||
|
@keyup.enter.native="handleFilter" |
||||
|
/> --> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
size="mini" |
||||
|
type="primary" |
||||
|
icon="el-icon-search" |
||||
|
@click="handleFilter" |
||||
|
>搜索 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
icon="el-icon-refresh" |
||||
|
size="mini" |
||||
|
@click="resetQuery('queryForm')" |
||||
|
>重置 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
class="filter-item" |
||||
|
plain |
||||
|
size="mini" |
||||
|
type="warning" |
||||
|
icon="el-icon-bottom" |
||||
|
@click="handleDownload()" |
||||
|
>导出Excel |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
class="filter-item" |
||||
|
plain |
||||
|
size="mini" |
||||
|
type="primary" |
||||
|
@click="permissionConfig()" |
||||
|
>权限配置 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
<!--表格头组件，filter查询--> |
||||
|
<!-- <c-r-m-table-head |
||||
|
ref="crmTableHead" |
||||
|
:crm-type="crmType" |
||||
|
@handle="handleHandle" |
||||
|
@filter="handleFilters" |
||||
|
> |
||||
|
</c-r-m-table-head> --> |
||||
|
</el-form> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
<!--表格渲染--> |
||||
|
<el-row> |
||||
|
<!--主表--> |
||||
|
<el-col :span="14"> |
||||
|
<el-table |
||||
|
ref="multipleTable" |
||||
|
v-loading.fullscreen.lock="listLoading" |
||||
|
element-loading-text="拼命加载中..." |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
class="cr-table" |
||||
|
:data="list" |
||||
|
:height="tableHeight" |
||||
|
:cell-style="cellStyle" |
||||
|
:header-cell-style="headerRowStyle" |
||||
|
size="small" |
||||
|
stripe |
||||
|
border |
||||
|
highlight-current-row |
||||
|
style="width: 100%" |
||||
|
@sort-change="sortChange" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
@row-click="handleRowClick" |
||||
|
> |
||||
|
<!-- <el-table-column type="selection" width="44px"></el-table-column> --> |
||||
|
<el-table-column |
||||
|
type="index" label="序号" |
||||
|
:index="1"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
v-for="(item, index) in getDefaultField" |
||||
|
:key="index" |
||||
|
:prop="item.prop" |
||||
|
:label="item.label" |
||||
|
:min-width="item.width" |
||||
|
:formatter="fieldFormatter" |
||||
|
sortable="custom" |
||||
|
show-overflow-tooltip |
||||
|
:gutter="0" |
||||
|
> |
||||
|
<template slot="header" slot-scope="scope"> |
||||
|
{{ scope.column.label }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-col> |
||||
|
<!--子表--> |
||||
|
<el-col :span="10"> |
||||
|
<el-table |
||||
|
ref="detailTable" |
||||
|
v-loading.fullscreen.lock="listDetailLoading" |
||||
|
element-loading-text="拼命加载中..." |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
class="cr-table" |
||||
|
:data="detaillist" |
||||
|
:height="tableHeight" |
||||
|
:cell-style="cellDetailStyle" |
||||
|
:header-cell-style="headerDetailRowStyle" |
||||
|
size="small" |
||||
|
stripe |
||||
|
border |
||||
|
highlight-current-row |
||||
|
style="width: 100%" |
||||
|
@sort-change="sortDetailChange" |
||||
|
@selection-change="handleDetailSelectionChange" |
||||
|
@row-click="handleDetailRowClick" |
||||
|
> |
||||
|
<!-- <el-table-column type="selection" width="44px"></el-table-column> --> |
||||
|
<!-- <el-table-column |
||||
|
label="版本" |
||||
|
prop="version" |
||||
|
sortable="custom" |
||||
|
align="center" |
||||
|
width="100px" |
||||
|
>fixed 默认固定在左边 |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tooltip :content="scope.row.version" placement="top"> |
||||
|
<span class="link-type">{{ scope.row.version }}</span> |
||||
|
</el-tooltip> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
<el-table-column |
||||
|
type="index" label="序号" |
||||
|
:index="1"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
v-for="(item, index) in getChildDefaultField" |
||||
|
:key="index" |
||||
|
:prop="item.prop" |
||||
|
:label="item.label" |
||||
|
:min-width="item.width" |
||||
|
:formatter="fieldFormatter" |
||||
|
sortable="custom" |
||||
|
show-overflow-tooltip |
||||
|
:gutter="0" |
||||
|
> |
||||
|
<template slot="header" slot-scope="scope"> |
||||
|
{{ scope.column.label }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<!--表单渲染--> |
||||
|
<el-dialog |
||||
|
:visible.sync="dialogFormVisible" |
||||
|
:close-on-click-modal="false" |
||||
|
:title="formTitle" |
||||
|
width="700px" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="form" |
||||
|
:inline="true" |
||||
|
:model="form" |
||||
|
:rules="rules" |
||||
|
size="small" |
||||
|
label-width="120px" |
||||
|
> |
||||
|
<el-row> |
||||
|
<el-col :span="4"> |
||||
|
<el-form-item label="操作员" required /> |
||||
|
</el-col> |
||||
|
<el-col :span="20"> |
||||
|
<el-input |
||||
|
style="width: 400px" |
||||
|
v-model="form.userName" |
||||
|
:disabled="isEdit" |
||||
|
/> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
|
||||
|
<el-row> |
||||
|
<el-transfer |
||||
|
v-model="form.worklines" |
||||
|
:titles="['可操作的生产线', '全部生产线']" |
||||
|
filterable |
||||
|
:data="UsePLList"> |
||||
|
</el-transfer> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
|
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="dialogFormVisible = false" |
||||
|
>取消</el-button |
||||
|
> |
||||
|
<el-button v-loading="formLoading" type="primary" @click="save" |
||||
|
>确认</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<div class="table-footer"> |
||||
|
<!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"--> |
||||
|
<pagination |
||||
|
v-show="totalCount > 0" |
||||
|
:total="totalCount" |
||||
|
:page.sync="page" |
||||
|
:limit.sync="listQuery.MaxResultCount" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
<!-- 导入Excel组件 --> |
||||
|
<importExcel |
||||
|
ref="importexcel" |
||||
|
:show="showExcelImport" |
||||
|
:crmType="crmType" |
||||
|
@close="importExcelData" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination |
||||
|
import permission from "@/directive/permission/index.js"; |
||||
|
import importExcel from "@/components/ImportExcel-invoice"; |
||||
|
import CRMTableHead from "../../components/CRMTableHead"; |
||||
|
import moment from "moment"; |
||||
|
import Lockr from "lockr"; |
||||
|
import { downloadFile } from "@/utils/crmindex.js"; |
||||
|
import XhJSSelect from "@/components/CreateCom/Xh-JS-Select-Label.vue"; |
||||
|
import { filter } from 'jszip/lib/object'; |
||||
|
|
||||
|
export default { |
||||
|
name: "CustomerPartCfg", |
||||
|
components: { Pagination, CRMTableHead, importExcel, XhJSSelect }, |
||||
|
directives: { permission }, |
||||
|
filters: { |
||||
|
IsCustomerSignFilter(status) { |
||||
|
//翻译是否签字 |
||||
|
const statusMap = { |
||||
|
true: "是", |
||||
|
false: "否", |
||||
|
}; |
||||
|
return statusMap[status]; |
||||
|
}, |
||||
|
}, |
||||
|
props: { |
||||
|
customerInfos: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
crmType: "customerPartCfg", |
||||
|
versionValue: "", |
||||
|
//valueSelect: "R0003", |
||||
|
versionList: [], //版本列表 |
||||
|
rules: { |
||||
|
//前端定义的规则，后端也有验证 |
||||
|
erpMaterialCode: [ |
||||
|
{ required: true, message: "必须输入！", trigger: "blur" }, |
||||
|
], |
||||
|
}, |
||||
|
searchContent: "", // 输入内容 |
||||
|
customerInfo: { |
||||
|
settleAccountId: "", |
||||
|
}, |
||||
|
form: { |
||||
|
worklines:[] |
||||
|
}, |
||||
|
list: null, |
||||
|
totalCount: 0, |
||||
|
listLoading: true, |
||||
|
listDetailLoading: false, |
||||
|
formLoading: false, |
||||
|
// 高级搜索 |
||||
|
filterObj: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
listVersionQuery: { |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 15, |
||||
|
}, |
||||
|
listQuery: { |
||||
|
Filters: [ |
||||
|
{ |
||||
|
logic: 0, |
||||
|
column: "Enabled", |
||||
|
action: 0, |
||||
|
value: "true", |
||||
|
}, //默认查询可用的 |
||||
|
], |
||||
|
//OrgID:"", |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 15, |
||||
|
version: "", |
||||
|
customerCode: "", |
||||
|
//userId: "00000000-0000-0000-0000-000000000000", |
||||
|
userName:"",//用户名称 |
||||
|
name:"",//真实姓名 |
||||
|
productLineCode:"",//生产线 |
||||
|
}, |
||||
|
listExportQuery: { |
||||
|
Filters: [ |
||||
|
{ |
||||
|
logic: 0, |
||||
|
column: "Enabled", |
||||
|
action: 0, |
||||
|
value: "true", |
||||
|
}, //默认查询可用的 |
||||
|
], |
||||
|
//OrgID:"", |
||||
|
SkipCount: 0, |
||||
|
MaxResultCount: 15, |
||||
|
version: "", |
||||
|
fileType: 0, |
||||
|
userId: "", |
||||
|
}, |
||||
|
listPLQuery:{ |
||||
|
BillType: 1, |
||||
|
//UserId: "00000000-0000-0000-0000-000000000000", |
||||
|
}, |
||||
|
saveQuery:{ |
||||
|
userId: 1, |
||||
|
productLineIdList:[], |
||||
|
}, |
||||
|
showSearch: true, |
||||
|
page: 1, |
||||
|
multipleSelection: [], |
||||
|
formTitle: "人员产线权限变更", |
||||
|
drawer: false, |
||||
|
showExcelImport: false, |
||||
|
tableHeight: document.documentElement.clientHeight - 260, |
||||
|
isEdit: false, |
||||
|
sortState:false, //标记刷新是否是排序调用 |
||||
|
detaillist:[], |
||||
|
PLList:[], |
||||
|
UsePLList : [], |
||||
|
|
||||
|
dialogFormVisible:false,//窗口显隐 |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
var offsetHei = document.documentElement.clientHeight; |
||||
|
//console.log(offsetHei); |
||||
|
let boxH = this.$refs.box.offsetHeight; |
||||
|
this.tableHeight = offsetHei - boxH - 57 - 79;//57为footer高度，79为页面上部标签高度 |
||||
|
//console.log(this.$refs.box.offsetHeight); |
||||
|
//console.log(this.tableHeight); |
||||
|
}); |
||||
|
}, |
||||
|
created() { |
||||
|
this.getList(); |
||||
|
this.getProductLine(); |
||||
|
}, |
||||
|
computed: { |
||||
|
/** 列表字段 */ |
||||
|
getDefaultField() { |
||||
|
var tempsTabs = []; |
||||
|
|
||||
|
// tempsTabs.push({ |
||||
|
// label: "序号", |
||||
|
// prop: "seq", |
||||
|
// width: 50, |
||||
|
// }); |
||||
|
tempsTabs.push({ |
||||
|
label: "操作员登录名", |
||||
|
prop: "userName", |
||||
|
width: 140, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "操作员真实名称", |
||||
|
prop: "name", |
||||
|
width: 140 |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "部门", |
||||
|
prop: "dep", |
||||
|
width: 120, |
||||
|
}); |
||||
|
return tempsTabs; |
||||
|
}, |
||||
|
/** 列表字段 */ |
||||
|
getChildDefaultField() { |
||||
|
var tempsTabs = []; |
||||
|
|
||||
|
tempsTabs.push({ |
||||
|
label: "序号", |
||||
|
prop: "seq", |
||||
|
width: 50, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "生产线编码", |
||||
|
prop: "workLineCode", |
||||
|
width: 100, |
||||
|
}); |
||||
|
tempsTabs.push({ |
||||
|
label: "生产线名称", |
||||
|
prop: "workLineName", |
||||
|
width: 170 |
||||
|
}); |
||||
|
return tempsTabs; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
selectValue(params) { |
||||
|
//版本下拉选择 |
||||
|
this.versionValue = params.value; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
valueselectChange(data) { |
||||
|
//alert(data); |
||||
|
//版本下拉选择 |
||||
|
this.valueSelect = data; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
handleTypeDrop(command, params = {}) { |
||||
|
if (command == "updateFis") { |
||||
|
this.listLoading = true; |
||||
|
//this.listQuery.SkipCount = (this.page - 1) * 10000; |
||||
|
this.$axios |
||||
|
.posts("/api/settleaccount/SettlementPart/updateFis") |
||||
|
.then((res) => { |
||||
|
if (res == true) { |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "FIS数据-更新成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: "warning", |
||||
|
message: "FIS数据-更新失败！", |
||||
|
}); |
||||
|
} |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
} else if (command == "enter") { |
||||
|
} |
||||
|
}, |
||||
|
selectOptionsChange(item) { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
getVersionInfo() { |
||||
|
//取版本列表信息 |
||||
|
//this.listLoading = true; |
||||
|
this.listVersionQuery.SkipCount = (this.page - 1) * 1000; |
||||
|
this.$axios |
||||
|
.posts( |
||||
|
"/api/settleaccount/SettlementPart/versionlist", |
||||
|
this.listVersionQuery |
||||
|
) |
||||
|
.then((response) => { |
||||
|
this.versionList = []; |
||||
|
response.items.forEach((element) => { |
||||
|
let options = {}; |
||||
|
options.value = element.id; |
||||
|
options.label = element.version; |
||||
|
this.versionList.push(options); |
||||
|
}); |
||||
|
const res = new Map() |
||||
|
this.versionList = this.versionList.filter((item) => !res.has(item.label) && res.set(item.label, 1)) |
||||
|
if (JSON.stringify(this.versionList) != "[]") { |
||||
|
//因版本下拉有默认值，所以详表要自动绑定子表数据 |
||||
|
this.versionValue = this.versionList[0].label; |
||||
|
this.getList(); |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
//this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
/** 刷新列表 */ |
||||
|
handleHandle(data) { |
||||
|
if (data.type !== "edit") { |
||||
|
this.getList(); |
||||
|
} |
||||
|
}, |
||||
|
/** 格式化字段 */ |
||||
|
fieldFormatter(row, column) { |
||||
|
/* if (column.property === "state") { |
||||
|
return { 0: "其他", 2: "已结" }[row[column.property]]; |
||||
|
} |
||||
|
if (column.property == "accountDate" || column.property == "date") { |
||||
|
var date = row[column.property]; |
||||
|
if (date == undefined) { |
||||
|
return ""; |
||||
|
} |
||||
|
//return moment(date).format("YYYY-MM-DD HH:mm:ss"); |
||||
|
return moment(date).format("YYYY-MM-DD"); |
||||
|
} */ |
||||
|
if(column.property === 'customerCode') |
||||
|
{ |
||||
|
if(row[column.property] === 'R0001') |
||||
|
{ |
||||
|
var vname = '二配'; |
||||
|
return vname; |
||||
|
} |
||||
|
else if(row[column.property] === 'R0003') |
||||
|
{ |
||||
|
var vname = '结算'; |
||||
|
return vname; |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
return row[column.property]; |
||||
|
} |
||||
|
} |
||||
|
return row[column.property] || "--"; |
||||
|
}, |
||||
|
importExcelData() { |
||||
|
//this.getVersionInfo(); |
||||
|
this.listLoading = false; |
||||
|
//关闭导入窗体时调用 |
||||
|
this.showExcelImport = false; |
||||
|
}, |
||||
|
//导出功能 |
||||
|
async handleDownload() { |
||||
|
this.listLoading = true; |
||||
|
// if (this.versionValue === "") { |
||||
|
// this.$message.error("必需选择版本！"); |
||||
|
// this.listLoading = false; |
||||
|
// return; |
||||
|
// } |
||||
|
// if (this.versionValue != "") { |
||||
|
// this.listQuery.version = this.versionValue; |
||||
|
// } |
||||
|
console.log("发票导出:" + JSON.stringify(this.listQuery)); |
||||
|
this.$axios |
||||
|
.posts( |
||||
|
"/api/newjit/product-line-authority/export", |
||||
|
this.listQuery |
||||
|
) |
||||
|
.then((res) => { |
||||
|
let filename = res.item; |
||||
|
this.$axios |
||||
|
.BolbGets("/api/newjit/exclude-part-cfg/download/" + filename) |
||||
|
.then((response) => { |
||||
|
if (filename.indexOf("_") != -1) { |
||||
|
let downName = |
||||
|
filename.slice(0, filename.lastIndexOf("_")) + |
||||
|
filename.slice(filename.lastIndexOf(".")); |
||||
|
downloadFile(response, downName); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据-导出成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} else { |
||||
|
downloadFile(response, filename); |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据-导出成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
getList() { |
||||
|
this.listLoading = true; |
||||
|
this.listQuery.SkipCount = (this.page - 1) * 10; |
||||
|
console.log("列表查询条件:" + JSON.stringify(this.listQuery)); |
||||
|
this.$axios |
||||
|
.gets( |
||||
|
"/api/newjit/product-line-authority/list", |
||||
|
this.listQuery |
||||
|
) |
||||
|
.then((response) => { |
||||
|
this.list = response.item; |
||||
|
this.totalCount = response.item.length; |
||||
|
setTimeout(() => { |
||||
|
//大数据量加载时 |
||||
|
this.listLoading = false; |
||||
|
}, 500); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.listLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
fetchData(id) { |
||||
|
//循环动态 |
||||
|
this.$axios |
||||
|
.gets("/api/settleaccount/SettlementPart/" + id) |
||||
|
.then((response) => { |
||||
|
this.form = response; |
||||
|
}); |
||||
|
}, |
||||
|
/** 筛选操作 */ |
||||
|
handleFilter() { |
||||
|
this.page = 1; |
||||
|
//#region |
||||
|
/* |
||||
|
this.listQuery.Filters = []; |
||||
|
if (this.partCode != "") { |
||||
|
var column = "partCode"; |
||||
|
let filter = { |
||||
|
logic: 0, |
||||
|
column: column, |
||||
|
action: 0, |
||||
|
value: this.partCode, |
||||
|
}; |
||||
|
this.listQuery.Filters = this.listQuery.Filters.filter(u => u.column !== "partCode") |
||||
|
this.listQuery.Filters.push(filter); |
||||
|
} |
||||
|
|
||||
|
if (this.partName != "") { |
||||
|
var column = "partName"; |
||||
|
let filter = { |
||||
|
logic: 0, |
||||
|
column: column, |
||||
|
action: 0, |
||||
|
value: this.partName, |
||||
|
}; |
||||
|
this.listQuery.Filters = this.listQuery.Filters.filter(u => u.column !== "partName") |
||||
|
this.listQuery.Filters.push(filter); |
||||
|
} |
||||
|
|
||||
|
if (this.partType != "") { |
||||
|
var column = "partType"; |
||||
|
let filter = { |
||||
|
logic: 0, |
||||
|
column: column, |
||||
|
action: 0, |
||||
|
value: this.partType, |
||||
|
}; |
||||
|
this.listQuery.Filters = this.listQuery.Filters.filter(u => u.column !== "partType") |
||||
|
this.listQuery.Filters.push(filter); |
||||
|
} |
||||
|
|
||||
|
if (this.partChildType != "") { |
||||
|
var column = "partChildType"; |
||||
|
let filter = { |
||||
|
logic: 0, |
||||
|
column: column, |
||||
|
action: 0, |
||||
|
value: this.partChildType, |
||||
|
}; |
||||
|
this.listQuery.Filters = this.listQuery.Filters.filter(u => u.column !== "partChildType") |
||||
|
this.listQuery.Filters.push(filter); |
||||
|
} |
||||
|
*/ |
||||
|
//#endregion |
||||
|
this.getList(); |
||||
|
}, |
||||
|
/** 多项筛选操作 */ |
||||
|
/** 筛选操作 */ |
||||
|
handleFilters(data) { |
||||
|
if (data === null) { |
||||
|
this.listQuery.Filters = []; |
||||
|
this.getList(); //查询所有 |
||||
|
} else { |
||||
|
console.log(data) |
||||
|
this.filterObj = data; |
||||
|
console.log("筛选" + JSON.stringify(data)); |
||||
|
var offsetHei = document.documentElement.clientHeight; |
||||
|
var removeHeight = Object.keys(this.filterObj).length > 0 ? 310 : 240; |
||||
|
this.tableHeight = offsetHei - removeHeight; |
||||
|
this.currentPage = 1; |
||||
|
let Filter = []; |
||||
|
data.forEach((item) => { |
||||
|
let filter = {}; |
||||
|
if (item.formType === "datetime" || item.formType === "datetime") { |
||||
|
//日期类型的过滤条件是 (datetime >= a and datetime <=b) |
||||
|
filter["Column"] = item.fieldName; |
||||
|
filter["Logic"] = 0; |
||||
|
filter["Value"] = item.value[0]; |
||||
|
filter["Action"] = item.action; |
||||
|
Filter.push(filter); |
||||
|
|
||||
|
if (item.value[1] != null) { |
||||
|
filter["Value"] = item.value[1]; |
||||
|
filter["Action"] = 5; |
||||
|
Filter.push(filter); |
||||
|
} |
||||
|
} else { |
||||
|
filter["Column"] = item.fieldName; |
||||
|
filter["Value"] = item.value; |
||||
|
filter["Logic"] = 0; |
||||
|
filter["Action"] = item.action; |
||||
|
Filter.push(filter); |
||||
|
} |
||||
|
}); |
||||
|
console.log("筛选条件" + JSON.stringify(Filter)); |
||||
|
this.listQuery.Filters = Filter; |
||||
|
this.getList(); |
||||
|
} |
||||
|
}, |
||||
|
/** 重置按钮操作 */ |
||||
|
resetQuery(refName) { |
||||
|
this.listQuery.userName = ""; |
||||
|
this.listQuery.name = ""; |
||||
|
this.listQuery.dep = ""; |
||||
|
this.listQuery.productLineCode = ""; |
||||
|
//this.$refs[refName].resetFields(); |
||||
|
this.handleFilter(); |
||||
|
this.getProductLine(); |
||||
|
}, |
||||
|
sortChange(data) { |
||||
|
const { prop, order } = data; |
||||
|
if (!prop || !order) { |
||||
|
this.handleFilter(); |
||||
|
return; |
||||
|
} |
||||
|
this.listQuery.Sorting = prop + " " + order; |
||||
|
console.log(this.listQuery.Sorting); |
||||
|
if(this.listQuery.Filters.length>0 && this.listQuery.Filters[0].column === "Enabled") |
||||
|
{ |
||||
|
this.sortState = false; |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
this.sortState = true; |
||||
|
} |
||||
|
this.handleFilter(); |
||||
|
}, |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
/** 通过回调控制style */ |
||||
|
cellStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right" }; |
||||
|
} else { |
||||
|
return { textAlign: "left" }; |
||||
|
} |
||||
|
}, |
||||
|
/** 通过回调控制表头style */ |
||||
|
headerRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right", background: "#FAFAFA" }; |
||||
|
} else { |
||||
|
return { textAlign: "left", background: "#FAFAFA" }; |
||||
|
} |
||||
|
}, |
||||
|
handleRowClick(row, column, event) { |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
this.$refs.multipleTable.toggleRowSelection(row); |
||||
|
this.detaillist = row.productLineList; |
||||
|
//console.log(this.detaillist) |
||||
|
}, |
||||
|
/** 通过回调控制style */ |
||||
|
cellDetailStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right" }; |
||||
|
} else { |
||||
|
return { textAlign: "left" }; |
||||
|
} |
||||
|
}, |
||||
|
/** 通过回调控制表头style */ |
||||
|
headerDetailRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
|
if (column.property === "qty") { |
||||
|
return { textAlign: "right", background: "#FAFAFA" }; |
||||
|
} else { |
||||
|
return { textAlign: "left", background: "#FAFAFA" }; |
||||
|
} |
||||
|
}, |
||||
|
handleDetailRowClick(row, column, event) { |
||||
|
this.$refs.detailTable.clearSelection(); |
||||
|
this.$refs.detailTable.toggleRowSelection(row); |
||||
|
}, |
||||
|
handleDetailSelectionChange(){}, |
||||
|
sortDetailChange(){}, |
||||
|
getProductLine() |
||||
|
{ |
||||
|
this.$axios |
||||
|
.gets( |
||||
|
"/api/newjit/product-line/list",this.listPLQuery |
||||
|
) |
||||
|
.then((response) => { |
||||
|
console.log(response); |
||||
|
this.PLList = response.item; |
||||
|
//console.log() |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
//权限配置 |
||||
|
permissionConfig() |
||||
|
{ |
||||
|
if(this.multipleSelection.length != 1) |
||||
|
{ |
||||
|
this.$message({ |
||||
|
message: "必须选择单行", |
||||
|
type: "warning", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
this.UsePLList = []; |
||||
|
this.dialogFormVisible = true; |
||||
|
this.form.worklines = []; |
||||
|
var templist = this.PLList; |
||||
|
this.multipleSelection[0].productLineList.forEach(element => { |
||||
|
templist = this.templist.filter(u => u.productLineCode !== element.productLineCode); |
||||
|
|
||||
|
}); |
||||
|
templist.forEach(element => { |
||||
|
this.form.worklines.push( |
||||
|
parseInt(element.productLineCode)); |
||||
|
}); |
||||
|
//console.log(this.form.worklines) |
||||
|
this.PLList.forEach(element => { |
||||
|
this.UsePLList.push( |
||||
|
{ |
||||
|
key:parseInt(element.productLineCode), |
||||
|
label:element.productLineName, |
||||
|
id:"", |
||||
|
disabled:false, |
||||
|
} |
||||
|
); |
||||
|
}); |
||||
|
this.form.userName = this.multipleSelection[0].userName; |
||||
|
}, |
||||
|
|
||||
|
//窗口确认 |
||||
|
save() |
||||
|
{ |
||||
|
console.log(this.form.worklines); |
||||
|
console.log(this.UsePLList); |
||||
|
var templist = this.UsePLList; |
||||
|
this.form.worklines.forEach(element => { |
||||
|
templist = templist.filter(u => u.key !== element); |
||||
|
}); |
||||
|
console.log(918); |
||||
|
console.log(templist); |
||||
|
|
||||
|
this.$axios |
||||
|
.gets( |
||||
|
"/api/newjit/product-line-authority/do-authority",this.listPLQuery |
||||
|
) |
||||
|
.then((response) => { |
||||
|
console.log(response); |
||||
|
this.PLList = response.item; |
||||
|
//console.log() |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "../../styles/crmtable.scss"; |
||||
|
</style> |
||||
|
<style lang="scss"> |
||||
|
.el-table .cell.el-tooltip { |
||||
|
white-space: pre-wrap; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
File diff suppressed because it is too large
@ -0,0 +1,337 @@ |
|||||
|
<template> |
||||
|
<div style="position: relative;"> |
||||
|
<flexbox class="t-section"> |
||||
|
<img |
||||
|
:src="crmIcon" |
||||
|
class="t-img" > |
||||
|
<div class="t-name">{{ name }}</div> |
||||
|
<el-button |
||||
|
class="head-handle-button" |
||||
|
type="primary" |
||||
|
@click.native="handleTypeClick('edit')">编辑</el-button> |
||||
|
<!-- <img--> |
||||
|
<!-- class="t-close"--> |
||||
|
<!-- src="@/assets/img/task_close.png"--> |
||||
|
<!-- @click="hideView" >--> |
||||
|
</flexbox> |
||||
|
<flexbox |
||||
|
class="h-section" |
||||
|
align="stretch"> |
||||
|
<flexbox-item |
||||
|
v-for="(item, index) in headDetails" |
||||
|
:key="index" |
||||
|
class="h-item" |
||||
|
span="200"> |
||||
|
<div class="h-title">{{ item.name }}</div> |
||||
|
<div class="h-value text-one-line">{{ item.value}}</div> |
||||
|
</flexbox-item> |
||||
|
</flexbox> |
||||
|
<slot/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script type="text/javascript"> |
||||
|
import tableFields from "../../../../static/tableField"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'CRMDetailHead', |
||||
|
components: { |
||||
|
// TransferHandle, |
||||
|
// AllocHandle, |
||||
|
// DealStatusHandle |
||||
|
}, |
||||
|
props: { |
||||
|
/** 模块ID */ |
||||
|
id: [String, Number], |
||||
|
/** 没有值就是全部类型 有值就是当个类型 */ |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 辅助 使用 |
||||
|
isSeas: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
/** 详细信息 */ |
||||
|
detail: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
moreTypes: [], // 更多操作 |
||||
|
fieldInfoList: [], |
||||
|
headDetails: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// ...mapGetters(['crm', 'CRMConfig']), |
||||
|
crmIcon() { |
||||
|
if (this.crmType === 'transaction') { |
||||
|
return require('@/assets/img/customer_detail.png') |
||||
|
} else if (this.crmType === 'leads') { |
||||
|
return require('@/assets/img/clue_detail.png') |
||||
|
} else if (this.crmType === 'strategy') { |
||||
|
return require('@/assets/img/business_detail.png') |
||||
|
} else if (this.crmType === 'rule') { |
||||
|
return require('@/assets/img/contacts_detail.png') |
||||
|
} else if (this.crmType === 'customer') { |
||||
|
return require('@/assets/img/contract_detail.png') |
||||
|
} else if (this.crmType === 'slgItem') { |
||||
|
return require('@/assets/img/money_detail.png') |
||||
|
} else if (this.crmType === 'dicts') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
} else if (this.crmType === 'bom') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
} else if (this.crmType === 'uomGroup') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'uom') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'area') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'areaItem') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'currency') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'currencyExchange') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'customerBom') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'customerItem') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'eqptType') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'eqptTypeItem') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'item') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'itemTransTypeInventoryRoute') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'itemTransTypeOpStrategy') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'loc') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'machine') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'param') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'port') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'prodLine') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'prodLineItem') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'project') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'shift') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'slg') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'supplier') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'supplierItem') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'team') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'uomConversion') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'wlg') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'wlgItem') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'workCalendar') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'workCenter') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
} else if (this.crmType === 'inventoryRoute') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'inventoryRouteDetail') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'purchasePriceDetail') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'purchasePriceSheet') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'route') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'routeDetail') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'salePriceDetail') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'salePriceSheet') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'stdCostPriceDetail') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else if (this.crmType === 'stdCostPriceSheet') { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
}else { |
||||
|
return require('@/assets/img/product_detail.png') |
||||
|
} |
||||
|
return '' |
||||
|
}, |
||||
|
name() { |
||||
|
return this.detail.name |
||||
|
}, |
||||
|
showEdit() { |
||||
|
return this.crm[this.crmType].update |
||||
|
}, |
||||
|
}, |
||||
|
watch: { |
||||
|
detail:function(val) |
||||
|
{ |
||||
|
this. GetBaseInfoValue(val); |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
//this.moreTypes = this.getSelectionHandleItemsInfo() |
||||
|
}, |
||||
|
methods: { |
||||
|
GetBaseInfoValue(res) |
||||
|
{ |
||||
|
this.headDetails=[]; |
||||
|
this.list=[] |
||||
|
let filedList = tableFields[this.crmType].data; |
||||
|
let resKeys= Object.keys(res); |
||||
|
filedList.map((item) => { |
||||
|
let key= resKeys.find(r=>{return r == item.fieldName && r!='Description'}); //不显示描述 |
||||
|
if(key!=null) |
||||
|
{ |
||||
|
let resValue=this.valueConverter(res[key],item); |
||||
|
let filedJSON={ |
||||
|
"formType": key.includes('TIME')?"datetime":"text", |
||||
|
"name":item.name, |
||||
|
"value":resValue, |
||||
|
"data":item |
||||
|
} |
||||
|
this.headDetails.push(filedJSON); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
// Object.keys(res).forEach((key)=>{ |
||||
|
// if (key == item.fieldName && key!='Description') //不显示描述 |
||||
|
// { |
||||
|
// let resValue=this.valueConverter(res[key],item); |
||||
|
// let filedJSON={ |
||||
|
// "formType": key.includes('TIME')?"datetime":"text", |
||||
|
// "name":item.name, |
||||
|
// "value":resValue, |
||||
|
// "data":item |
||||
|
// } |
||||
|
// this.headDetails.push(filedJSON); |
||||
|
// } |
||||
|
// }); |
||||
|
// }); |
||||
|
}, |
||||
|
|
||||
|
valueConverter(value,item) { |
||||
|
|
||||
|
if(item.formType==='switch') |
||||
|
{ |
||||
|
if(value===true) |
||||
|
{ |
||||
|
return '是' |
||||
|
} |
||||
|
else if(value===false) |
||||
|
{ |
||||
|
return '否' |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
return '' |
||||
|
} |
||||
|
} |
||||
|
else if(item.formType==='select') |
||||
|
{ |
||||
|
//取select的值 |
||||
|
return value |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
return value |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** 更多操作 */ |
||||
|
handleTypeClick(type) { |
||||
|
if (type == 'edit') { |
||||
|
// 编辑 |
||||
|
this.$emit('handle', { type: 'edit' }) |
||||
|
} |
||||
|
}, |
||||
|
hideView() { |
||||
|
this.$emit('close') |
||||
|
}, |
||||
|
// 子组件 回调的 结果 |
||||
|
handleCallBack(data) { |
||||
|
this.$emit('handle', { type: data.type }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.t-section { |
||||
|
position: relative; |
||||
|
padding: 10px 17px; |
||||
|
min-height: 60px; |
||||
|
.t-img { |
||||
|
display: block; |
||||
|
width: 35px; |
||||
|
height: 35px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.t-name { |
||||
|
font-size: 14px; |
||||
|
color: #333333; |
||||
|
flex: 1; |
||||
|
} |
||||
|
.t-more { |
||||
|
border: 1px solid #dcdfe6; |
||||
|
font-size: 12px; |
||||
|
color: #606266; |
||||
|
padding: 0 10px 0 12px; |
||||
|
border-radius: 2px; |
||||
|
font-weight: 500; |
||||
|
height: 25px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.t-close { |
||||
|
display: block; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
margin-left: 20px; |
||||
|
padding: 10px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.h-section { |
||||
|
position: relative; |
||||
|
padding: 8px 17px 15px 17px; |
||||
|
min-height: 58px; |
||||
|
overflow-x: auto; |
||||
|
.h-item { |
||||
|
.h-title { |
||||
|
font-size: 12px; |
||||
|
color: #777; |
||||
|
} |
||||
|
.h-value { |
||||
|
min-height: 14px; |
||||
|
margin-top: 8px; |
||||
|
font-size: 13px; |
||||
|
color: #333333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.head-handle-button { |
||||
|
padding: 5px 15px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,327 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:visible.sync="showDialog" |
||||
|
:title="'导出'+crmTypeName" |
||||
|
:append-to-body="true" |
||||
|
:close-on-click-modal="false" |
||||
|
:before-close="beforeClose" |
||||
|
:close-on-press-escape="false" |
||||
|
width="550px" |
||||
|
@close="closeView" |
||||
|
> |
||||
|
<div class="dialog-body"> |
||||
|
<p |
||||
|
v-if="error" |
||||
|
class="error" |
||||
|
v-text="error" /> |
||||
|
<p |
||||
|
v-if="done" |
||||
|
class="done"> |
||||
|
<i class="el-icon-success"/> |
||||
|
导出已完成 |
||||
|
</p> |
||||
|
<p |
||||
|
v-else-if="cancel" |
||||
|
class="cancel"> |
||||
|
<i class="el-icon-warning"/> |
||||
|
导出已取消 |
||||
|
</p> |
||||
|
<div v-else> |
||||
|
<i class="el-icon-loading" /> |
||||
|
导出中... |
||||
|
{{ progress }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer" /> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from 'vuex' |
||||
|
// import { |
||||
|
// crmCustomerExcelExport, |
||||
|
// crmCustomerExcelAllExport, |
||||
|
// crmCustomerPoolExcelExportAPI |
||||
|
// } from '@/api/customermanagement/customer' |
||||
|
// import { crmLeadsExcelExport, crmLeadsExcelAllExport } from '@/api/customermanagement/clue' |
||||
|
// import { crmContactsExcelExport, crmContactsExcelAllExport } from '@/api/customermanagement/contacts' |
||||
|
// import { crmProductExcelExport, crmProductExcelAllExport } from '@/api/customermanagement/product' |
||||
|
// import { crmBusinessExcelExport, crmBusinessExcelAllExport } from '@/api/customermanagement/business' |
||||
|
// import { crmContractExcelExport, crmContractExcelAllExport } from '@/api/customermanagement/contract' |
||||
|
// import { crmReceivablesExcelExport, crmReceivablesExcelAllExport } from '@/api/customermanagement/money' |
||||
|
|
||||
|
export default { |
||||
|
name: 'CRMExport', // 文件导出 |
||||
|
components: {}, |
||||
|
|
||||
|
props: { |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// CRM类型 |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
/** 是公海 */ |
||||
|
isSeas: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 搜索条件 |
||||
|
search: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 场景 |
||||
|
scene_id: { |
||||
|
type: [Number, String], |
||||
|
default: '' |
||||
|
}, |
||||
|
// 高级搜索 |
||||
|
filterObj: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
exportParams: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
showDialog: false, |
||||
|
progress: '', |
||||
|
error: '', |
||||
|
// 导出已完成 |
||||
|
done: false, |
||||
|
// 取消导出 |
||||
|
cancel: false, |
||||
|
// 队列标识 |
||||
|
exportQueueIndex: '', |
||||
|
// 临时数据 |
||||
|
tempData: { |
||||
|
temp_file: '' |
||||
|
}, |
||||
|
// 排序 |
||||
|
sortData: {} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters(['userInfo']), |
||||
|
crmTypeName() { |
||||
|
return ( |
||||
|
{ |
||||
|
customer: '客户', |
||||
|
leads: '线索', |
||||
|
contacts: '联系人', |
||||
|
product: '产品' |
||||
|
}[this.crmType] || '' |
||||
|
) |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
show(val) { |
||||
|
this.showDialog = val |
||||
|
if (val) { |
||||
|
this.cancel = false |
||||
|
this.exportInfos() |
||||
|
window.onbeforeunload = (event) => { |
||||
|
this.exportInfos({ |
||||
|
page: -1, |
||||
|
temp_file: this.tempData.temp_file |
||||
|
}) |
||||
|
return event |
||||
|
} |
||||
|
} else { |
||||
|
window.onbeforeunload = null |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$bus.off('getSortData') |
||||
|
this.$bus.on('getSortData', (sortData) => { |
||||
|
this.sortData = sortData |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 关闭操作 |
||||
|
closeView() { |
||||
|
this.error = '' |
||||
|
this.done = false |
||||
|
this.exportQueueIndex = '' |
||||
|
this.progress = '' |
||||
|
this.$emit('close') |
||||
|
}, |
||||
|
// 点叉 |
||||
|
beforeClose(done) { |
||||
|
if (this.error || this.done) { |
||||
|
done() |
||||
|
return |
||||
|
} |
||||
|
this.$confirm('此操作将终止导出, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.cancel = true |
||||
|
done() |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
// 导出操作 |
||||
|
exportInfos(data = {}) { |
||||
|
var params = { |
||||
|
export_queue_index: this.exportQueueIndex, |
||||
|
search: this.search, |
||||
|
...this.exportParams, |
||||
|
...this.sortData, |
||||
|
...data |
||||
|
} |
||||
|
if (this.scene_id) { |
||||
|
params.scene_id = this.scene_id |
||||
|
} |
||||
|
for (var key in this.filterObj) { |
||||
|
params[key] = this.filterObj[key] |
||||
|
} |
||||
|
|
||||
|
let exportAll = 'All' |
||||
|
if (params['ids']) { |
||||
|
exportAll = '' |
||||
|
} |
||||
|
|
||||
|
let request |
||||
|
// 公海的请求 |
||||
|
if (this.isSeas) { |
||||
|
request = crmCustomerPoolExcelExportAPI |
||||
|
} else { |
||||
|
request = { |
||||
|
customer: crmCustomerExcelExport, |
||||
|
customerAll: crmCustomerExcelAllExport, |
||||
|
leads: crmLeadsExcelExport, |
||||
|
leadsAll: crmLeadsExcelAllExport, |
||||
|
contacts: crmContactsExcelExport, |
||||
|
contactsAll: crmContactsExcelAllExport, |
||||
|
product: crmProductExcelExport, |
||||
|
productAll: crmProductExcelAllExport, |
||||
|
business: crmBusinessExcelExport, |
||||
|
businessAll: crmBusinessExcelAllExport, |
||||
|
contract: crmContractExcelExport, |
||||
|
contractAll: crmContractExcelAllExport, |
||||
|
receivables: crmReceivablesExcelExport, |
||||
|
receivablesAll: crmReceivablesExcelAllExport |
||||
|
}[this.crmType + exportAll] |
||||
|
} |
||||
|
request(params) |
||||
|
.then(res => { |
||||
|
if (res.data.type.indexOf('json') !== -1) { |
||||
|
var blob = new Blob([res.data], { |
||||
|
type: 'application/json' |
||||
|
}) |
||||
|
var reader = new FileReader() |
||||
|
reader.readAsText(blob, 'utf-8') |
||||
|
reader.onload = () => { |
||||
|
var temp = JSON.parse(reader.result) |
||||
|
this.tempData = temp.data |
||||
|
if (temp.error) { |
||||
|
this.error = temp.error |
||||
|
return |
||||
|
} |
||||
|
this.exportQueueIndex = temp.data.export_queue_index |
||||
|
if (this.cancel) { |
||||
|
if (temp.data.page !== -1) { |
||||
|
this.exportInfos({ |
||||
|
page: -1, |
||||
|
temp_file: temp.data.temp_file |
||||
|
}) |
||||
|
} |
||||
|
} else if (temp.data.page === -2) { |
||||
|
setTimeout(() => { |
||||
|
this.exportInfos({ |
||||
|
page: 1, |
||||
|
temp_file: temp.data.temp_file |
||||
|
}) |
||||
|
}, 1000) |
||||
|
} else if (temp.data.page > 0) { |
||||
|
this.exportInfos({ |
||||
|
page: temp.data.page, |
||||
|
temp_file: temp.data.temp_file |
||||
|
}) |
||||
|
this.progress = String(temp.data.done) + ' / ' + String(temp.data.total) |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
this.exportQueueIndex = '' |
||||
|
this.done = true |
||||
|
var blob = new Blob([res.data], { |
||||
|
type: 'application/vnd.ms-excel;charset=utf-8' |
||||
|
}) |
||||
|
var downloadElement = document.createElement('a') |
||||
|
var href = window.URL.createObjectURL(blob) // 创建下载的链接 |
||||
|
downloadElement.href = href |
||||
|
downloadElement.download = |
||||
|
decodeURI( |
||||
|
res.headers['content-disposition'].split('filename=')[1] |
||||
|
) || '' // 下载后文件名 |
||||
|
document.body.appendChild(downloadElement) |
||||
|
downloadElement.click() // 点击下载 |
||||
|
document.body.removeChild(downloadElement) // 下载完成移除元素 |
||||
|
window.URL.revokeObjectURL(href) // 释放掉blob对象 |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
.dialog-body { |
||||
|
height: 150px; |
||||
|
text-align: center; |
||||
|
padding-top: 40px; |
||||
|
color: #659DED; |
||||
|
.el-icon-loading { |
||||
|
margin-bottom: 10px; |
||||
|
display: block; |
||||
|
} |
||||
|
p.error { |
||||
|
color: #E6A23C; |
||||
|
} |
||||
|
p.done { |
||||
|
color: #67C23A; |
||||
|
.el-icon-success { |
||||
|
font-size: 30px; |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cancel { |
||||
|
color: #E6A23C; |
||||
|
.el-icon-warning { |
||||
|
font-size: 30px; |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-dialog__wrapper { |
||||
|
/deep/ .el-icon-loading { |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-loading-text { |
||||
|
font-size: 18px; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,257 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:visible.sync="showDialog" |
||||
|
:title="'导出'+crmTypeName" |
||||
|
:append-to-body="true" |
||||
|
:close-on-click-modal="false" |
||||
|
:before-close="beforeClose" |
||||
|
:close-on-press-escape="false" |
||||
|
width="550px" |
||||
|
@close="closeView" |
||||
|
> |
||||
|
<div class="dialog-body"> |
||||
|
<p |
||||
|
v-if="error" |
||||
|
class="error" |
||||
|
v-text="error" /> |
||||
|
<p |
||||
|
v-if="done" |
||||
|
class="done"> |
||||
|
<i class="el-icon-success"/> |
||||
|
导出已完成 |
||||
|
</p> |
||||
|
<p |
||||
|
v-else-if="cancel" |
||||
|
class="cancel"> |
||||
|
<i class="el-icon-warning"/> |
||||
|
导出已取消 |
||||
|
</p> |
||||
|
<div v-else> |
||||
|
<i class="el-icon-loading" /> |
||||
|
导出中... |
||||
|
{{ progress }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer" /> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { winUomGroupExcelAllExport } from '@/api/uomGroup/uomGroup' |
||||
|
import { downloadFile } from '@/utils/crmindex.js' |
||||
|
|
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'CRMExport', // 文件导出 |
||||
|
components: {}, |
||||
|
|
||||
|
props: { |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// CRM类型 |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
/** 是公海 */ |
||||
|
isSeas: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 搜索条件 |
||||
|
search: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 高级搜索 |
||||
|
filterObj: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
exportParams: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
showDialog: false, |
||||
|
progress: '', |
||||
|
error: '', |
||||
|
// 导出已完成 |
||||
|
done: false, |
||||
|
// 取消导出 |
||||
|
cancel: false, |
||||
|
// 队列标识 |
||||
|
exportQueueIndex: '', |
||||
|
// 临时数据 |
||||
|
tempData: { |
||||
|
temp_file: '' |
||||
|
}, |
||||
|
// 排序 |
||||
|
sortData: {} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
crmTypeName() { |
||||
|
return ( |
||||
|
{ |
||||
|
uomGroup: '计量单位组' |
||||
|
}[this.crmType] || '' |
||||
|
) |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
show(val) { |
||||
|
this.showDialog = val |
||||
|
if (val) { |
||||
|
this.cancel = false |
||||
|
this.exportInfos() |
||||
|
window.onbeforeunload = (event) => { |
||||
|
this.exportInfos({ |
||||
|
page: -1, |
||||
|
temp_file: this.tempData.temp_file |
||||
|
}) |
||||
|
return event |
||||
|
} |
||||
|
} else { |
||||
|
window.onbeforeunload = null |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$bus.off('getSortData') |
||||
|
this.$bus.on('getSortData', (sortData) => { |
||||
|
this.sortData = sortData |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 关闭操作 |
||||
|
closeView() { |
||||
|
this.error = '' |
||||
|
this.done = false |
||||
|
this.exportQueueIndex = '' |
||||
|
this.progress = '' |
||||
|
this.$emit('close') |
||||
|
}, |
||||
|
// 点叉 |
||||
|
beforeClose(done) { |
||||
|
if (this.error || this.done) { |
||||
|
done() |
||||
|
return |
||||
|
} |
||||
|
this.$confirm('此操作将终止导出, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.cancel = true |
||||
|
done() |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
// 导出操作 |
||||
|
exportInfos(data = {}) { |
||||
|
// var params = { |
||||
|
// export_queue_index: this.exportQueueIndex, |
||||
|
// search: this.search, |
||||
|
// ...this.exportParams, |
||||
|
// ...this.sortData, |
||||
|
// ...data |
||||
|
// } |
||||
|
var params = { |
||||
|
//有组织ID传入 |
||||
|
} |
||||
|
// for (var key in this.filterObj) { |
||||
|
// params[key] = this.filterObj[key] |
||||
|
// } |
||||
|
|
||||
|
let exportAll = 'All' |
||||
|
if (params['ids']) { |
||||
|
exportAll = '' |
||||
|
} |
||||
|
|
||||
|
// let request = { |
||||
|
// uomGroup: crmReceivablesExcelAllExport |
||||
|
// }[this.crmType + exportAll] |
||||
|
let request = { |
||||
|
uomGroup: winUomGroupExcelAllExport |
||||
|
}[this.crmType] |
||||
|
request(params) |
||||
|
.then(res => { |
||||
|
var downExportExcelName=res;//获取生成到服务器上的导出excel文件名称 |
||||
|
this.$axios |
||||
|
.BolbGets('/api/basedataservice/exceltemplate/downloadExcelFiles/' + downExportExcelName) |
||||
|
.then((response) => { |
||||
|
downloadFile(response, this.crmTypeName+'导出数据.xlsx') |
||||
|
this.error = '' |
||||
|
this.done = false |
||||
|
this.exportQueueIndex = '' |
||||
|
this.progress = '' |
||||
|
this.$emit('close') |
||||
|
this.$notify({ |
||||
|
title: '成功', |
||||
|
message: '数据导出成功！', |
||||
|
type: 'success', |
||||
|
duration: 2000 |
||||
|
}) |
||||
|
}) |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
.dialog-body { |
||||
|
height: 150px; |
||||
|
text-align: center; |
||||
|
padding-top: 40px; |
||||
|
color: #659DED; |
||||
|
.el-icon-loading { |
||||
|
margin-bottom: 10px; |
||||
|
display: block; |
||||
|
} |
||||
|
p.error { |
||||
|
color: #E6A23C; |
||||
|
} |
||||
|
p.done { |
||||
|
color: #67C23A; |
||||
|
.el-icon-success { |
||||
|
font-size: 30px; |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cancel { |
||||
|
color: #E6A23C; |
||||
|
.el-icon-warning { |
||||
|
font-size: 30px; |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-dialog__wrapper { |
||||
|
/deep/ .el-icon-loading { |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-loading-text { |
||||
|
font-size: 18px; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,668 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:visible="show" |
||||
|
:title="'导入'+crmTypeName" |
||||
|
:append-to-body="true" |
||||
|
:close-on-click-modal="false" |
||||
|
width="600px" |
||||
|
@close="closeView"> |
||||
|
<div class="dialog-body"> |
||||
|
<!-- <el-steps |
||||
|
:active="stepsActive" |
||||
|
simple> |
||||
|
<el-step |
||||
|
v-for="(item, index) in stepList" |
||||
|
:key="index" |
||||
|
:title="item.title" |
||||
|
:icon="item.icon" |
||||
|
:status="item.status" /> |
||||
|
</el-steps> --> |
||||
|
|
||||
|
<div v-if="stepsActive == 1" class="step-section"> |
||||
|
<div class="sections"> |
||||
|
<div class="sections__title">一、请按照数据模板的格式准备要导入的数据。<span |
||||
|
class="download" |
||||
|
@click="download">点击下载《{{ crmTypeName }}导入模板》</span></div> |
||||
|
<div class="sections__tips">导入文件请勿超过2MB（约10,000条数据）</div> |
||||
|
</div> |
||||
|
<div class="sections"> |
||||
|
<div class="sections__title">二、请选择数据重复时的处理方式（查重规则：【{{ fieldUniqueInfo }}】）</div> |
||||
|
<div class="sections__tips">查重规则为：添加{{ crmTypeName }}时所需填写的所有唯一字段，当前设置唯一字段为：{{ fieldUniqueInfo }}</div> |
||||
|
<div class="content"> |
||||
|
<el-select |
||||
|
v-model="config" |
||||
|
placeholder="请选择"> |
||||
|
<el-option |
||||
|
v-for="(item, index) in [{name: '覆盖系统原有数据',value: 1},{name: '跳过',value: 2}]" |
||||
|
:key="index" |
||||
|
:label="item.name" |
||||
|
:value="item.value"/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="sections"> |
||||
|
<div class="sections__title">三、请选择需要导入的文件</div> |
||||
|
<div class="content"> |
||||
|
<flexbox class="file-select"> |
||||
|
<el-input |
||||
|
v-model="file.name" |
||||
|
:disabled="true"/> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
@click="selectFile">选择文件</el-button> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="sections"> |
||||
|
<div class="sections__title">四、请选择负责人（{{ crmType == 'customer' ? '如不选择，导入的客户将进入公海' : '必选' }}）</div> |
||||
|
<div class="content"> |
||||
|
<div class="user-cell"> |
||||
|
<xh-user-cell |
||||
|
:value="user" |
||||
|
@value-change="userSelect"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
v-loading="loading" |
||||
|
v-else-if="stepsActive == 2" |
||||
|
element-loading-text="数据导入中" |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
class="step-section" /> |
||||
|
|
||||
|
<div |
||||
|
v-loading="loading" |
||||
|
v-else-if="stepsActive == 3" |
||||
|
class="step-section"> |
||||
|
<div class="result-info"> |
||||
|
<i class="wk wk-success result-info__icon" /> |
||||
|
<p class="result-info__des">数据导入完成</p> |
||||
|
<p class="result-info__detail">导入总数据<span class="result-info__detail--all">{{ resultData.totalSize }}</span>条，导入成功<span class="result-info__detail--suc">{{ resultData.totalSize - resultData.errSize }}</span>条，导入失败<span class="result-info__detail--err">{{ resultData.errSize }}</span>条</p> |
||||
|
<el-button |
||||
|
v-if="resultData && resultData.errSize > 0" |
||||
|
class="result-info__btn--err" |
||||
|
type="text" |
||||
|
@click="downloadErrData">下载错误数据</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<input |
||||
|
id="importInputFile" |
||||
|
type="file" |
||||
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" |
||||
|
@change="uploadFile"> |
||||
|
</div> |
||||
|
<span |
||||
|
slot="footer" |
||||
|
class="dialog-footer"> |
||||
|
<el-popover |
||||
|
v-model="historyPopoverShow" |
||||
|
placement="top" |
||||
|
width="800" |
||||
|
popper-class="no-padding-popover" |
||||
|
trigger="click"> |
||||
|
<!-- <c-r-m-import-history |
||||
|
:show="historyPopoverShow" |
||||
|
:crm-type="crmType" |
||||
|
@close="historyPopoverShow = false" /> |
||||
|
<el-button |
||||
|
slot="reference" |
||||
|
class="history-btn" |
||||
|
type="text">查看历史导入记录</el-button> --> |
||||
|
</el-popover> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<el-button |
||||
|
:class="{ 'is-hidden': !showCancel }" |
||||
|
@click="closeView">取消</el-button> |
||||
|
<el-button |
||||
|
v-if="sureTitle" |
||||
|
type="primary" |
||||
|
@click="sureClick">{{ sureTitle }}</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import { |
||||
|
// crmQueryImportNumAPI, |
||||
|
// crmQueryImportInfoAPI, |
||||
|
// crmDownImportErrorAPI, |
||||
|
// filedGetField |
||||
|
// } from '@/api/customermanagement/common' |
||||
|
// import { |
||||
|
// crmCustomerExcelImport, |
||||
|
// crmCustomerDownloadExcelAPI |
||||
|
// } from '@/api/customermanagement/customer' |
||||
|
// import { |
||||
|
// crmLeadsExcelImport, |
||||
|
// crmLeadsDownloadExcelAPI |
||||
|
// } from '@/api/customermanagement/clue' |
||||
|
// import { |
||||
|
// crmContactsExcelImport, |
||||
|
// crmContactsDownloadExcelAPI |
||||
|
// } from '@/api/customermanagement/contacts' |
||||
|
// import { |
||||
|
// crmProductExcelImport, |
||||
|
// crmProductDownloadExcelAPI |
||||
|
// } from '@/api/customermanagement/product' |
||||
|
|
||||
|
import { XhUserCell } from '@/components/CreateCom' |
||||
|
// import CRMImportHistory from './CRMImportHistory' |
||||
|
|
||||
|
import { mapGetters } from 'vuex' |
||||
|
import crmTypeModel from '@/views/ux/model/crmTypeModel' |
||||
|
import { downloadExcelWithResData } from '@/utils/index' |
||||
|
|
||||
|
export default { |
||||
|
name: 'CRMImport', // 文件导入 |
||||
|
components: { |
||||
|
XhUserCell |
||||
|
}, |
||||
|
props: { |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// CRM类型 |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
fieldList: [], |
||||
|
config: 1, // 1 覆盖，2跳过 |
||||
|
file: { name: '' }, |
||||
|
user: [], |
||||
|
|
||||
|
stepsActive: 1, |
||||
|
stepList: [ |
||||
|
{ |
||||
|
icon: 'wk wk-upload', |
||||
|
title: '上传文件', |
||||
|
status: 'wait' |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'wk wk-data-import', |
||||
|
title: '导入数据', |
||||
|
status: 'wait' |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'wk wk-success', |
||||
|
title: '导入完成', |
||||
|
status: 'wait' |
||||
|
} |
||||
|
], |
||||
|
resultData: null, |
||||
|
processData: { |
||||
|
count: 0, |
||||
|
status: '' |
||||
|
}, |
||||
|
messageId: null, |
||||
|
intervalTimer: null, |
||||
|
|
||||
|
historyPopoverShow: false |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters(['userInfo']), |
||||
|
|
||||
|
crmTypeName() { |
||||
|
return ( |
||||
|
{ |
||||
|
customer: '客户', |
||||
|
leads: '线索', |
||||
|
contacts: '联系人', |
||||
|
product: '产品' |
||||
|
}[this.crmType] || '' |
||||
|
) |
||||
|
}, |
||||
|
|
||||
|
sureTitle() { |
||||
|
return { |
||||
|
1: '立即导入', |
||||
|
2: '最小化', |
||||
|
3: '确定' |
||||
|
}[this.stepsActive] |
||||
|
}, |
||||
|
|
||||
|
showCancel() { |
||||
|
return this.stepsActive != 2 |
||||
|
}, |
||||
|
|
||||
|
fieldUniqueInfo() { |
||||
|
const uniqueList = this.fieldList.filter(item => { |
||||
|
return item.isUnique == 1 |
||||
|
}) |
||||
|
|
||||
|
return uniqueList.map(item => { |
||||
|
return item.name |
||||
|
}).join('/') || '无' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
show: function(val) { |
||||
|
if (val) { |
||||
|
if (this.stepsActive == 1) { |
||||
|
if (this.userInfo) { |
||||
|
this.user = [this.userInfo] |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.getField() |
||||
|
} else { |
||||
|
if (this.stepsActive == 3) { |
||||
|
this.resetData() |
||||
|
} |
||||
|
|
||||
|
this.fieldList = [] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
stepsActive() { |
||||
|
this.$emit('status', { |
||||
|
1: 'wait', |
||||
|
2: 'process', |
||||
|
3: 'finish' |
||||
|
}[this.stepsActive]) |
||||
|
} |
||||
|
|
||||
|
// file() { |
||||
|
// this.getFirstStepStatus() |
||||
|
// }, |
||||
|
|
||||
|
// user() { |
||||
|
// this.getFirstStepStatus() |
||||
|
// } |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
sureClick() { |
||||
|
if (this.stepsActive == 1) { |
||||
|
if (this.stepList[0].status == 'finish') { |
||||
|
this.stepList[1].status = 'process' |
||||
|
this.stepsActive = 2 |
||||
|
this.firstUpdateFile(res => { |
||||
|
this.messageId = res.data |
||||
|
this.secondQueryNum() |
||||
|
this.intervalTimer = setInterval(() => { |
||||
|
if (this.processData.status == 'end') { |
||||
|
clearInterval(this.intervalTimer) |
||||
|
this.intervalTimer = null |
||||
|
this.thirdQueryResult() |
||||
|
} else { |
||||
|
this.secondQueryNum() |
||||
|
} |
||||
|
}, 2000) |
||||
|
}) |
||||
|
} else { |
||||
|
if (!this.file.name) { |
||||
|
this.$message.error('请选择导入文件') |
||||
|
} else if ( |
||||
|
this.crmType != 'customer' && |
||||
|
(!this.user || this.user.length == 0) |
||||
|
) { |
||||
|
this.$message.error('请选择负责人') |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
this.closeView() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 第一步上传 |
||||
|
*/ |
||||
|
firstUpdateFile(result) { |
||||
|
var params = {} |
||||
|
params.repeatHandling = this.config |
||||
|
params.file = this.file |
||||
|
params.ownerUserId = this.user.length > 0 ? this.user[0].userId : '' |
||||
|
var request = { |
||||
|
customer: crmCustomerExcelImport, |
||||
|
leads: crmLeadsExcelImport, |
||||
|
contacts: crmContactsExcelImport, |
||||
|
product: crmProductExcelImport |
||||
|
}[this.crmType] |
||||
|
this.loading = true |
||||
|
request(params) |
||||
|
.then(res => { |
||||
|
if (result) { |
||||
|
result(res) |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
if (result) { |
||||
|
result(false) |
||||
|
} |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 第二步查询数量 |
||||
|
*/ |
||||
|
secondQueryNum() { |
||||
|
crmQueryImportNumAPI({ messageId: this.messageId }) |
||||
|
.then(res => { |
||||
|
if (res.data === null) { |
||||
|
this.processData.status = 'end' |
||||
|
} else { |
||||
|
this.processData.status = '' |
||||
|
this.processData.count = res.data |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
// this.processData.status = 'err' |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 第三部 查询结果 |
||||
|
*/ |
||||
|
thirdQueryResult() { |
||||
|
crmQueryImportInfoAPI({ messageId: this.messageId }) |
||||
|
.then(res => { |
||||
|
this.loading = false |
||||
|
this.stepList[1].status = 'finish' |
||||
|
this.stepsActive = 3 |
||||
|
this.$emit('status', 'finish') |
||||
|
if (res) { |
||||
|
this.resultData = res |
||||
|
if (res.errSize > 0) { |
||||
|
this.stepList[2].status = 'error' |
||||
|
} else { |
||||
|
this.stepList[2].status = 'finish' |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 下载错误模板 |
||||
|
*/ |
||||
|
downloadErrData() { |
||||
|
this.loading = true |
||||
|
crmDownImportErrorAPI({ messageId: this.messageId }) |
||||
|
.then(res => { |
||||
|
downloadExcelWithResData(res) |
||||
|
this.loading = false |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 下载模板操作 |
||||
|
download() { |
||||
|
const request = { |
||||
|
customer: crmCustomerDownloadExcelAPI, |
||||
|
leads: crmLeadsDownloadExcelAPI, |
||||
|
contacts: crmContactsDownloadExcelAPI, |
||||
|
product: crmProductDownloadExcelAPI |
||||
|
}[this.crmType] |
||||
|
request() |
||||
|
.then(res => { |
||||
|
var blob = new Blob([res.data], { |
||||
|
type: 'application/vnd.ms-excel;charset=utf-8' |
||||
|
}) |
||||
|
var downloadElement = document.createElement('a') |
||||
|
var href = window.URL.createObjectURL(blob) // 创建下载的链接 |
||||
|
downloadElement.href = href |
||||
|
downloadElement.download = |
||||
|
decodeURI( |
||||
|
res.headers['content-disposition'].split('filename=')[1] |
||||
|
) || '' // 下载后文件名 |
||||
|
document.body.appendChild(downloadElement) |
||||
|
downloadElement.click() // 点击下载 |
||||
|
document.body.removeChild(downloadElement) // 下载完成移除元素 |
||||
|
window.URL.revokeObjectURL(href) // 释放掉blob对象 |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
}, |
||||
|
// 选择文件 |
||||
|
selectFile() { |
||||
|
document.getElementById('importInputFile').click() |
||||
|
}, |
||||
|
/** 图片选择出发 */ |
||||
|
uploadFile(event) { |
||||
|
var files = event.target.files |
||||
|
const file = files[0] |
||||
|
this.file = file |
||||
|
event.target.value = '' |
||||
|
|
||||
|
// 阶段一状态 |
||||
|
this.getFirstStepStatus() |
||||
|
}, |
||||
|
// 用户选择 |
||||
|
userSelect(data) { |
||||
|
if (data.value && data.value.length > 0) { |
||||
|
this.user = data.value |
||||
|
} else { |
||||
|
this.user = [] |
||||
|
} |
||||
|
|
||||
|
// 阶段一状态 |
||||
|
this.getFirstStepStatus() |
||||
|
}, |
||||
|
|
||||
|
getFirstStepStatus() { |
||||
|
// 阶段一状态 |
||||
|
const hasFile = this.file && this.file.size |
||||
|
const hasUser = this.user && this.user.length > 0 |
||||
|
|
||||
|
if (this.crmType === 'customer') { |
||||
|
this.stepList[0].status = hasFile ? 'finish' : 'wait' |
||||
|
} else { |
||||
|
this.stepList[0].status = hasFile && hasUser ? 'finish' : 'wait' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 关闭操作 |
||||
|
closeView() { |
||||
|
this.$emit('update:show', false) |
||||
|
this.$emit('close', this.stepsActive == 3 ? 'finish' : '') |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 重置页面数据 |
||||
|
*/ |
||||
|
resetData() { |
||||
|
this.config = 1 |
||||
|
this.file = { name: '' } |
||||
|
this.user = [] |
||||
|
|
||||
|
this.stepsActive = 1 |
||||
|
this.stepList = [ |
||||
|
{ |
||||
|
icon: 'wk wk-upload', |
||||
|
title: '上传文件', |
||||
|
status: 'wait' |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'wk wk-data-import', |
||||
|
title: '导入数据', |
||||
|
status: 'wait' |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'wk wk-success', |
||||
|
title: '导入完成', |
||||
|
status: 'wait' |
||||
|
} |
||||
|
] |
||||
|
this.resultData = null |
||||
|
this.processData = { |
||||
|
count: 0, |
||||
|
status: '' |
||||
|
} |
||||
|
this.messageId = null |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 获取验证字段 |
||||
|
*/ |
||||
|
getField() { |
||||
|
var params = { |
||||
|
label: crmTypeModel[this.crmType] |
||||
|
} |
||||
|
|
||||
|
filedGetField(params) |
||||
|
.then(res => { |
||||
|
this.fieldList = res.data |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.el-steps { |
||||
|
margin-bottom: 15px; |
||||
|
|
||||
|
/deep/ .el-step__title { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-step.is-simple .el-step__arrow::before, |
||||
|
/deep/ .el-step.is-simple .el-step__arrow::after { |
||||
|
height: 10px; |
||||
|
width: 2px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-step.is-simple .el-step__arrow::after { |
||||
|
transform: rotate(45deg) translateY(3px); |
||||
|
} |
||||
|
/deep/ .el-step.is-simple .el-step__arrow::before { |
||||
|
transform: rotate(-45deg) translateY(-2px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.step-section { |
||||
|
min-height: 300px; |
||||
|
|
||||
|
/deep/ .el-loading-spinner { |
||||
|
top: 45%; |
||||
|
.el-icon-loading { |
||||
|
font-size: 40px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.el-loading-text { |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sections { |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
|
||||
|
&__title { |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
&__tips { |
||||
|
padding-left: 30px; |
||||
|
margin: 8px 0 15px; |
||||
|
color: #999; |
||||
|
font-size: 12px; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.download { |
||||
|
cursor: pointer; |
||||
|
color: #2362FB; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.sections__tips + .content { |
||||
|
padding-top: 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding: 10px 10px 10px 30px; |
||||
|
.el-select { |
||||
|
width: 400px; |
||||
|
} |
||||
|
.user-cell { |
||||
|
width: 400px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
#importInputFile { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.file-select { |
||||
|
.el-input { |
||||
|
width: 400px; |
||||
|
} |
||||
|
button { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.is-hidden { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.history-btn { |
||||
|
float: left; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// 结果信息 |
||||
|
.result-info { |
||||
|
text-align: center; |
||||
|
padding-top: 80px; |
||||
|
|
||||
|
&__icon { |
||||
|
font-size: 40px; |
||||
|
color: #3E84E9; |
||||
|
} |
||||
|
|
||||
|
&__des { |
||||
|
margin-top: 15px; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
&__detail { |
||||
|
margin-top: 15px; |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
&--all { |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
&--suc { |
||||
|
color: #3E84E9; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
&--err { |
||||
|
color: #f94e4e; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__btn--err { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,591 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:visible="show" |
||||
|
:title="'导入'+crmTypeName" |
||||
|
:append-to-body="true" |
||||
|
:close-on-click-modal="false" |
||||
|
width="600px" |
||||
|
@close="closeView"> |
||||
|
<div class="dialog-body"> |
||||
|
<div v-if="stepsActive == 1" class="step-section"> |
||||
|
|
||||
|
<div class="sections"> |
||||
|
<div class="sections__title" v-loading="loading"> |
||||
|
一、初始生成模板： |
||||
|
<span class="download" @click="createTemplate">点击生成《{{ crmTypeName }}导入模板》</span> |
||||
|
<div class="sections__tips">通过值映射，可保持生成的模板最新，例如自动生成下拉列表项！</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="sections"> |
||||
|
<div class="sections__title"> |
||||
|
二、请按照数据模板的格式准备要导入的数据。 |
||||
|
<span class="download" @click="download">点击下载《{{ crmTypeName }}导入模板》</span> |
||||
|
</div> |
||||
|
<div class="sections__tips">1、模板名称可以进行修改，但不要删除模板中设置的字段！</div> |
||||
|
<div class="sections__tips" style="margin-top:-10px;">2、必填项列头会标红标*！</div> |
||||
|
<div class="sections__tips" style="margin-top:-10px;">3、导入文件请勿超过2MB！且只能上传Excel，但不支持“.xls”文件，即不支持Excel97-2003!</div> |
||||
|
</div> |
||||
|
<div class="sections"> |
||||
|
<div class="sections__title">三、请选择需要导入的文件</div> |
||||
|
<div class="content"> |
||||
|
<flexbox class="file-select"> |
||||
|
<el-upload |
||||
|
ref="upload" |
||||
|
class="avatar-uploader" |
||||
|
drag |
||||
|
action="#" |
||||
|
:http-request="httpRequestfiles" |
||||
|
:headers="httpHeader" |
||||
|
:file-list="fileuploadList" |
||||
|
:before-upload="beforeAvatarUpload" |
||||
|
:before-remove="beforeRemove" |
||||
|
:on-remove="handleRemove" |
||||
|
multiple |
||||
|
:limit="1"> |
||||
|
<i class="el-icon-upload" ></i> |
||||
|
<div class="el-upload__text"> |
||||
|
将文件拖到此处，或 |
||||
|
<em>点击上传</em> |
||||
|
</div> |
||||
|
</el-upload> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
v-loading="loading" |
||||
|
v-else-if="stepsActive == 2" |
||||
|
element-loading-text="数据导入中,请耐心等待..." |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
class="step-section" |
||||
|
/> |
||||
|
|
||||
|
<div |
||||
|
v-loading="loading" |
||||
|
v-else-if="stepsActive == 3" |
||||
|
class="step-section"> |
||||
|
<div class="result-info"> |
||||
|
<el-card style="height:300px;margin-top:-20px" shadow="always"> |
||||
|
<i class="wk wk-success result-info__icon" /> |
||||
|
<p class="result-info__des">数据导入结果：</p> |
||||
|
<!-- <p class="result-info__detail">导入总数据<span class="result-info__detail--all">{{ this.resultData.totalSize }}</span>条，导入成功<span class="result-info__detail--suc">{{ this.resultData.totalSize - this.resultData.errSize }}</span>条，导入失败<span class="result-info__detail--err">{{ this.resultData.errSize }}</span>条</p> --> |
||||
|
<p class="result-info__detail">导入总数据<span class="result-info__detail--all">{{ this.resultData.totalSize }}</span>条，导入成功<span class="result-info__detail--suc">{{ this.resultData.succeessSize }}</span>条，导入失败<span class="result-info__detail--err">{{ this.resultData.errSize }}</span>条</p> |
||||
|
<el-button |
||||
|
v-if="this.resultData && this.resultData.errSize > 0" |
||||
|
class="result-info__btn--err" |
||||
|
type="text" |
||||
|
@click="downloadErrData">下载错误数据</el-button> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
v-loading="loading" |
||||
|
v-else-if="stepsActive ==4" |
||||
|
class="step-section"> |
||||
|
<div class="result-info"> |
||||
|
<el-card style="height:300px" shadow="always"> |
||||
|
<i class="wk wk-success result-info__icon" /> |
||||
|
<p class="result-info__des">数据导入结果：</p> |
||||
|
<!-- <p class="result-info__detail">导入总数据<span class="result-info__detail--all">{{ this.resultData.totalSize }}</span>条，导入成功<span class="result-info__detail--suc">{{ this.resultData.totalSize - this.resultData.errSize }}</span>条，导入失败<span class="result-info__detail--err">{{ this.resultData.errSize }}</span>条</p> --> |
||||
|
<p class="result-info__detail">导入总数据<span class="result-info__detail--all">{{ this.resultData.totalSize }}</span>条，导入成功<span class="result-info__detail--suc">{{ this.resultData.succeessSize }}</span>条，当前失败<span class="result-info__detail--err">{{ this.resultData.errSize }}</span>条</p> |
||||
|
<p class="result-info__detail--err" >数据错误信息：</p> |
||||
|
<p class="result-info__detail">{{this.resultData.errMessage}}</p> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-popover |
||||
|
v-model="historyPopoverShow" |
||||
|
placement="top" |
||||
|
width="800" |
||||
|
popper-class="no-padding-popover" |
||||
|
trigger="click" |
||||
|
> |
||||
|
|
||||
|
</el-popover> |
||||
|
|
||||
|
<!-- <el-button @click="closeView">取消</el-button> --> |
||||
|
<el-button |
||||
|
:class="{ 'is-hidden': !showCancel }" |
||||
|
@click="closeView">取消</el-button> |
||||
|
<el-button |
||||
|
v-if="sureTitle" |
||||
|
type="primary" |
||||
|
@click="sureClick">{{ sureTitle }}</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import {downloadFile} from '@/utils/crmindex.js' |
||||
|
import { getToken } from '@/utils/auth' // get token from cookie |
||||
|
//业务--生成模板接口 |
||||
|
import { winUomGroupExcelImportTemplate,winUomGroupExcelImport} from '@/api/uomGroup/uomGroup' |
||||
|
|
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: "CRMImport", // 文件导入 |
||||
|
props: { |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// CRM类型 |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
fieldList: [], |
||||
|
config: 1, // 1 覆盖，2跳过 |
||||
|
//file: { name: "" }, |
||||
|
user: [], |
||||
|
|
||||
|
stepsActive: 1, |
||||
|
stepList: [ |
||||
|
{ |
||||
|
icon: "wk wk-upload", |
||||
|
title: "上传文件", |
||||
|
status: "wait", |
||||
|
}, |
||||
|
{ |
||||
|
icon: "wk wk-data-import", |
||||
|
title: "导入数据", |
||||
|
status: "wait", |
||||
|
}, |
||||
|
{ |
||||
|
icon: "wk wk-success", |
||||
|
title: "导入完成", |
||||
|
status: "wait", |
||||
|
}, |
||||
|
], |
||||
|
//resultData: null, |
||||
|
resultData:{ |
||||
|
totalSize:0, |
||||
|
errSize:0, |
||||
|
errTemplate:"", |
||||
|
errMessage:"" |
||||
|
}, |
||||
|
processData: { |
||||
|
count: 0, |
||||
|
status: "", |
||||
|
}, |
||||
|
messageId: null, |
||||
|
intervalTimer: null, |
||||
|
fileuploadList:[], |
||||
|
isLt2M:"", |
||||
|
isFileType:"", |
||||
|
historyPopoverShow: false, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
sureTitle() { |
||||
|
return { |
||||
|
1: '立即导入', |
||||
|
2: '最小化', |
||||
|
3: '确定' |
||||
|
}[this.stepsActive] |
||||
|
}, |
||||
|
showCancel() { |
||||
|
return this.stepsActive != 2 |
||||
|
}, |
||||
|
crmTypeName() {//根据传入的crmType进行翻译 |
||||
|
return ( |
||||
|
{ |
||||
|
uomGroup: "计量单位组", |
||||
|
}[this.crmType] || "" |
||||
|
); |
||||
|
}, |
||||
|
getImportTemplate() {//模板名称 |
||||
|
return ( |
||||
|
{ |
||||
|
uomGroup: '计量单位组信息导入模板.xlsx', |
||||
|
}[this.crmType] || "" |
||||
|
); |
||||
|
}, |
||||
|
httpHeader() { |
||||
|
return { |
||||
|
'Authorization':'Bearer ' + getToken() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
show: function (val) { |
||||
|
if (val) { |
||||
|
this.stepsActive = 1 |
||||
|
} else { |
||||
|
if (this.stepsActive == 3) { |
||||
|
//以下是重置数据 |
||||
|
this.stepsActive = 1 |
||||
|
this.stepList = [ |
||||
|
{ |
||||
|
icon: 'wk wk-upload', |
||||
|
title: '上传文件', |
||||
|
status: 'wait' |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'wk wk-data-import', |
||||
|
title: '导入数据', |
||||
|
status: 'wait' |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'wk wk-success', |
||||
|
title: '导入完成', |
||||
|
status: 'wait' |
||||
|
} |
||||
|
] |
||||
|
this.resultData = null |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
stepsActive() { |
||||
|
this.$emit( |
||||
|
"status", |
||||
|
{ |
||||
|
1: "wait", |
||||
|
2: "process", |
||||
|
3: "finish", |
||||
|
}[this.stepsActive] |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
mounted() {}, |
||||
|
methods: { |
||||
|
handleImportExcelClick() {//父组件中，初始化此子组件时调用 |
||||
|
this.fileuploadList = []; |
||||
|
//this.$refs.upload.clearFiles(); |
||||
|
}, |
||||
|
httpRequestfiles(data) { |
||||
|
let _this = this; |
||||
|
let rd = new FileReader(); // 创建文件读取对象 |
||||
|
let file = data.file; |
||||
|
this.fileuploadList.push(file); |
||||
|
rd.readAsDataURL(file); // 文件读取装换为base64类型 |
||||
|
}, |
||||
|
beforeAvatarUpload(file) { |
||||
|
var FileExt = file.name.replace(/.+\./, ""); |
||||
|
if (['xlsx'].indexOf(FileExt.toLowerCase()) === -1){ |
||||
|
this.$message({ |
||||
|
type: 'warning', |
||||
|
message: '只支持xlsx类型文件！' |
||||
|
}); |
||||
|
this.isFileType="0" |
||||
|
return false; |
||||
|
} |
||||
|
else{ |
||||
|
this.isFileType="1" |
||||
|
} |
||||
|
this.isLt2M = file.size / 1024 / 1024 < 2?'1':'0'; |
||||
|
if (this.isLt2M==="0") { |
||||
|
this.$message.error("上传文件大小不能超过 2MB!"); |
||||
|
} |
||||
|
return this.isLt2M==='1'?true: false; |
||||
|
}, |
||||
|
beforeRemove(file, fileList) { |
||||
|
if (this.isLt2M==="1" && this.isFileType==="1") { |
||||
|
return this.$confirm(`确定移除 ${ file.name }？`); |
||||
|
} |
||||
|
}, |
||||
|
handleRemove(file, fileList) {//附件列表删除操作 |
||||
|
const index=this.fileuploadList.indexOf(file.originFileObj) |
||||
|
const newFileList=this.fileuploadList.slice() |
||||
|
newFileList.splice(index,1) |
||||
|
this.fileuploadList = newFileList; |
||||
|
}, |
||||
|
//执行按钮 |
||||
|
sureClick() { |
||||
|
if (this.fileuploadList===[] || JSON.stringify(this.fileuploadList) === "[]") { |
||||
|
this.$message.error("请选择导入文件"); |
||||
|
return false; |
||||
|
} |
||||
|
if (this.stepsActive == 1) { |
||||
|
if (this.stepList[0].status == "wait") { |
||||
|
this.stepsActive = 2; |
||||
|
this.loading = true; |
||||
|
setTimeout(() => { |
||||
|
this.saveTemplateData(); |
||||
|
}, 2000) |
||||
|
if( this.stepList[1].status == 'finish') |
||||
|
{ |
||||
|
|
||||
|
} |
||||
|
} else { |
||||
|
if (this.fileuploadList === "[]") { |
||||
|
this.$message.error("请选择导入文件"); |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
this.closeView(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
saveTemplateData() {//保存项目、合同管理、客户等信息的共用方法 |
||||
|
//--上传附件，批量或拖拽 |
||||
|
if (JSON.stringify(this.fileuploadList) != "[]") { |
||||
|
let fd = new FormData(); |
||||
|
const{fileuploadList}=this; |
||||
|
fileuploadList.forEach(file=>{ |
||||
|
fd.append("files", file); // 添加文件 |
||||
|
}) |
||||
|
console.log("fd:"+JSON.stringify(fd)) |
||||
|
var request = { |
||||
|
uomGroup: winUomGroupExcelImport |
||||
|
}[this.crmType] |
||||
|
request(fd) |
||||
|
.then((res) => {//此处，导出模板上设置的错误 |
||||
|
this.loading = false; |
||||
|
this.resultData = res; |
||||
|
if(res.errSize>0 && res.errMessage==="RowErrors"){//上传有错误数据 && res.errMessage.length <= 0 |
||||
|
this.stepList[0].status = 'wait'; |
||||
|
this.resultData.errSize=res.errSize;//错误数据个数 |
||||
|
this.resultData.errTemplate=res.errTemplate;//指定错误模板名称，作为参数，用于错误模板下载 |
||||
|
this.stepsActive = 3; |
||||
|
} |
||||
|
else{ |
||||
|
if(res.errMessage.length > 0 && res.errMessage !="SccessData"){//此处，是判断数据库中是否匹配 |
||||
|
this.stepsActive = 4; |
||||
|
} |
||||
|
else { |
||||
|
this.stepList[1].status = 'finish' |
||||
|
this.resultData.totalSize=res.totalSize;//返回导入成功的数据总数 |
||||
|
if (this.isLt2M==="1" |
||||
|
&& this.isFileType==="1" |
||||
|
&& res.errMessage ==="SccessData" |
||||
|
&& res.totalSize>0) { |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "数据导入成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
} |
||||
|
this.stepsActive = 3; |
||||
|
} |
||||
|
} |
||||
|
this.$emit("save-success", { |
||||
|
type: this.crmType |
||||
|
}); |
||||
|
this.$emit('status', 'finish'); |
||||
|
}) |
||||
|
.catch(() => {this.loading = false;}); |
||||
|
} else { |
||||
|
this.loading = false; |
||||
|
this.$message({ |
||||
|
message: "未上传任何附件，请查检！", |
||||
|
type: "warning", |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 下载错误模板数据等（统一接口） |
||||
|
*/ |
||||
|
downloadErrData() { |
||||
|
var fileName=this.getImportTemplate; |
||||
|
this.$axios |
||||
|
.BolbGets("/api/basedataservice/exceltemplate/downloadExcelFiles/" + this.resultData.errTemplate) |
||||
|
.then((response) => { |
||||
|
downloadFile(response,fileName); |
||||
|
}); |
||||
|
}, |
||||
|
/** |
||||
|
* 生成模板，引入相关业务接口 |
||||
|
*/ |
||||
|
createTemplate(){ |
||||
|
var request = { |
||||
|
uomGroup: winUomGroupExcelImportTemplate |
||||
|
}[this.crmType] |
||||
|
//this.loading = true |
||||
|
request() |
||||
|
.then(res => { |
||||
|
result(res) |
||||
|
this.loading = false |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "模板生成成功！", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 下载模板操作)(统一接口) |
||||
|
download() { |
||||
|
var fileName=this.getImportTemplate; |
||||
|
this.loading = true |
||||
|
this.$axios |
||||
|
.BolbGets("/api/basedataservice/exceltemplate/downloadExcelTemplate/" + fileName) |
||||
|
.then((response) => { |
||||
|
downloadFile(response,fileName); |
||||
|
this.loading = false |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.loading = false |
||||
|
}); |
||||
|
}, |
||||
|
// 关闭操作 |
||||
|
closeView() { |
||||
|
this.$emit("update:show", false); |
||||
|
this.$emit("close", this.stepsActive == 3 ? "finish" : ""); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
@import '@/styles/xr-theme.scss'; |
||||
|
.el-steps { |
||||
|
margin-bottom: 15px; |
||||
|
|
||||
|
/deep/ .el-step__title { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-step.is-simple .el-step__arrow::before, |
||||
|
/deep/ .el-step.is-simple .el-step__arrow::after { |
||||
|
height: 10px; |
||||
|
width: 2px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-step.is-simple .el-step__arrow::after { |
||||
|
transform: rotate(45deg) translateY(3px); |
||||
|
} |
||||
|
/deep/ .el-step.is-simple .el-step__arrow::before { |
||||
|
transform: rotate(-45deg) translateY(-2px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.step-section { |
||||
|
min-height: 300px; |
||||
|
|
||||
|
/deep/ .el-loading-spinner { |
||||
|
top: 45%; |
||||
|
.el-icon-loading { |
||||
|
font-size: 40px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.el-loading-text { |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sections { |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
|
||||
|
&__title { |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
&__tips { |
||||
|
padding-left: 30px; |
||||
|
margin: 8px 0 15px; |
||||
|
color: #999; |
||||
|
font-size: 12px; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.download { |
||||
|
cursor: pointer; |
||||
|
color: #2362fb; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sections__tips + .content { |
||||
|
padding-top: 0; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding: 10px 10px 10px 30px; |
||||
|
.el-select { |
||||
|
width: 400px; |
||||
|
} |
||||
|
.user-cell { |
||||
|
width: 400px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
#importInputFile { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.file-select { |
||||
|
.el-input { |
||||
|
width: 400px; |
||||
|
} |
||||
|
button { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.is-hidden { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.history-btn { |
||||
|
float: left; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
|
||||
|
// 结果信息 |
||||
|
.result-info { |
||||
|
text-align: center; |
||||
|
padding-top: 50px; |
||||
|
|
||||
|
&__icon { |
||||
|
font-size: 40px; |
||||
|
color: $xr-color-primary; |
||||
|
} |
||||
|
|
||||
|
&__des { |
||||
|
margin-top: -15px; |
||||
|
color: #333; |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
|
||||
|
&__detail { |
||||
|
margin-top: 35px; |
||||
|
font-size: 20px; |
||||
|
color: #666; |
||||
|
&--all { |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
&--suc { |
||||
|
color: $xr-color-primary; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
&--err { |
||||
|
margin-top: 25px; |
||||
|
color: #f94e4e; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__btn--err { |
||||
|
margin-top: 10px; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,266 @@ |
|||||
|
<template> |
||||
|
<div class="c-container"> |
||||
|
<div class="title">{{ title }}</div> |
||||
|
<!-- <el-input |
||||
|
:placeholder="placeholder" |
||||
|
v-model="inputContent" |
||||
|
class="sc-container" |
||||
|
@input="inputChange" |
||||
|
@keyup.enter.native="searchInput" v-show="showSearch"> |
||||
|
<el-button |
||||
|
slot="append" |
||||
|
icon="el-icon-search" |
||||
|
@click.native="searchInput"/> |
||||
|
</el-input> --> |
||||
|
<div class="right-container"> |
||||
|
<el-button |
||||
|
size="small" |
||||
|
type="primary" |
||||
|
@click="createClick">{{ createTitle }}</el-button> |
||||
|
<el-dropdown |
||||
|
v-if="moreTypes.length > 0" |
||||
|
trigger="click" |
||||
|
@command="handleTypeDrop"> |
||||
|
<flexbox class="right-more-item"> |
||||
|
<div>更多</div> |
||||
|
<i |
||||
|
class="el-icon-arrow-down el-icon--right" |
||||
|
style="color:#777;"/> |
||||
|
</flexbox> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item |
||||
|
v-for="(item, index) in moreTypes" |
||||
|
:key="index" |
||||
|
:command="item.type">{{ item.name }}</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
<c-r-m-create-view |
||||
|
v-if="isCreate" |
||||
|
:crm-type="createCRMType" |
||||
|
:action="createActionInfo" |
||||
|
@save-success="createSaveSuccess" |
||||
|
@hiden-view="hideView" |
||||
|
width='700px' |
||||
|
/> |
||||
|
<c-r-m-import |
||||
|
:show="showCRMImport" |
||||
|
:crm-type="crmType" |
||||
|
@save-success="createSaveSuccess" |
||||
|
@close="showCRMImport=false"/> |
||||
|
<c-r-m-export |
||||
|
:show="showCRMExport" |
||||
|
:crm-type="crmType" |
||||
|
:search="search" |
||||
|
:scene_id="scene_id" |
||||
|
:filter-obj="filterObj" |
||||
|
:export-params="exportParams" |
||||
|
@close="showCRMExport=false"/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import CRMCreateView from './CRMCreateView' |
||||
|
import CRMImport from './CRMImport' |
||||
|
import CRMExport from './CRMExport' |
||||
|
import crmTypes from "../../../../static/crmTypes"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'CRMListHead', // 客户管理下 重要提醒 回款计划提醒 |
||||
|
components: { |
||||
|
CRMCreateView, |
||||
|
CRMImport, |
||||
|
CRMExport |
||||
|
}, |
||||
|
props: { |
||||
|
showSearch:{ |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
|
||||
|
// CRM类型 |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
search: String, |
||||
|
scene_id: { |
||||
|
type: [Number, String], |
||||
|
default: '' |
||||
|
}, |
||||
|
filterObj: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
placeholder: { |
||||
|
type: String, |
||||
|
default: '请输入内容' |
||||
|
}, |
||||
|
createTitle: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
inputContent: '', |
||||
|
/** 更多操作 */ |
||||
|
moreTypes: [], |
||||
|
// 创建的相关信息 |
||||
|
createActionInfo: { type: 'create' }, |
||||
|
createCRMType: '', |
||||
|
isCreate: false, // 是创建 |
||||
|
// 导入 |
||||
|
showCRMImport: false, |
||||
|
// 导出 |
||||
|
showCRMExport: false, |
||||
|
// 导出选中参数 |
||||
|
exportParams: {} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// ...mapGetters(['crm']), |
||||
|
// canSave() { |
||||
|
// if (this.isSeas) { |
||||
|
// return false |
||||
|
// } |
||||
|
// return this.crm[this.crmType].save |
||||
|
// } |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 线索和客户判断更多操作 |
||||
|
|
||||
|
this.getTitle(); |
||||
|
if (!this.isSeas) { |
||||
|
//if (this.crm[this.crmType].excelimport) { |
||||
|
this.moreTypes.push({ type: 'enter', name: '导入' }) |
||||
|
//} |
||||
|
//if (this.crm[this.crmType].excelexport) { |
||||
|
this.moreTypes.push({ type: 'out', name: '导出全部' }) |
||||
|
// } |
||||
|
} else { |
||||
|
// 客户池的导出关键字不同 |
||||
|
//if (this.crm.pool.excelexport) { |
||||
|
this.moreTypes.push({ type: 'out', name: '导出全部' }) |
||||
|
// } |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getTitle() { |
||||
|
let type=crmTypes[this.crmType]; |
||||
|
if(type===undefined) |
||||
|
{ |
||||
|
this.title=this.crmType+'管理'; |
||||
|
this.createTitle='新增'+this.crmType; |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
this.title= type.name+'管理' |
||||
|
this.createTitle='新增'+type.name; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleTypeDrop(command, params = {}) { |
||||
|
if (command == 'out') { |
||||
|
let paramsData = {} |
||||
|
if (params.__export) { |
||||
|
paramsData = params |
||||
|
delete paramsData.__export |
||||
|
} else { |
||||
|
paramsData = {} |
||||
|
} |
||||
|
this.exportParams = paramsData |
||||
|
this.showCRMExport = true |
||||
|
} else if (command == 'enter') { |
||||
|
this.showCRMImport = true |
||||
|
} |
||||
|
}, |
||||
|
createClick() { |
||||
|
|
||||
|
this.createCRMType = this.crmType |
||||
|
this.createActionInfo = { type: 'save' } |
||||
|
this.isCreate = !this.isCreate |
||||
|
}, |
||||
|
inputChange() { |
||||
|
this.$emit('update:search', this.inputContent) |
||||
|
}, |
||||
|
// 进行搜索操作 |
||||
|
searchInput() { |
||||
|
this.$emit('on-search', this.inputContent) |
||||
|
}, |
||||
|
// 创建数据页面 保存成功 |
||||
|
createSaveSuccess(data) { |
||||
|
if (data && data.saveAndCreate) { |
||||
|
if (data.type == 'customer') { |
||||
|
this.createCRMType = 'contacts' |
||||
|
this.createActionInfo = { |
||||
|
type: 'relative', |
||||
|
crmType: 'customer', |
||||
|
data: {} |
||||
|
} |
||||
|
this.createActionInfo.data['customer'] = data.data |
||||
|
this.isCreate = true |
||||
|
} |
||||
|
} else { |
||||
|
// 回到保存成功 |
||||
|
this.$emit('on-handle', { type: 'save-success' }) |
||||
|
} |
||||
|
}, |
||||
|
hideView() { |
||||
|
this.isCreate = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.c-container { |
||||
|
height: 60px; |
||||
|
position: relative; |
||||
|
z-index: 100; |
||||
|
.title { |
||||
|
float: left; |
||||
|
padding: 0 20px; |
||||
|
font-size: 18px; |
||||
|
line-height: 60px; |
||||
|
} |
||||
|
.sc-container { |
||||
|
width: 300px; |
||||
|
margin: -18px 0 0 -150px; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
} |
||||
|
|
||||
|
.right-container { |
||||
|
margin-right: -10px; |
||||
|
float: right; |
||||
|
margin: 12px 20px 0 0; |
||||
|
position: relative; |
||||
|
.right-item { |
||||
|
float: left; |
||||
|
margin-right: 10px; |
||||
|
padding: 8px 10px; |
||||
|
font-size: 13px; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
|
||||
|
.right-more-item { |
||||
|
cursor: pointer; |
||||
|
border: 1px solid #dcdfe6; |
||||
|
background-color: white; |
||||
|
font-size: 13px; |
||||
|
color: #777; |
||||
|
padding: 0 12px; |
||||
|
border-radius: 2px; |
||||
|
height: 31px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,399 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<flexbox v-show="selectionList.length == 0" class="th-container"> |
||||
|
<!-- <div v-if="!isSeas">场景：</div> |
||||
|
<div @click="getAllClick" class="condition_title"> |
||||
|
{{ sceneData.name || getDefaultSceneName() }} |
||||
|
</div> --> |
||||
|
<img |
||||
|
:style="{ 'margin-left': isSeas ? 0 : '30px' }" |
||||
|
class="c-filtrate" |
||||
|
src="@/assets/img/c_filtrate.png" |
||||
|
@click="showFilterClick" |
||||
|
/> |
||||
|
<div class="condition_title" @click="showFilterClick">高级筛选</div> |
||||
|
<filter-form |
||||
|
:field-list="fieldList" |
||||
|
:dialog-visible.sync="showFilter" |
||||
|
:obj="filterObj" |
||||
|
:crm-type="crmType" |
||||
|
:is-seas="isSeas" |
||||
|
@filter="handleFilter" |
||||
|
/> |
||||
|
</flexbox> |
||||
|
|
||||
|
<scene-set |
||||
|
:dialog-visible.sync="showSceneSet" |
||||
|
:crm-type="crmType" |
||||
|
@save-success="updateSceneList" |
||||
|
/> |
||||
|
<scene-create |
||||
|
:field-list="fieldList" |
||||
|
:crm-type="crmType" |
||||
|
:dialog-visible.sync="showSceneCreate" |
||||
|
:obj="sceneFilterObj" |
||||
|
@saveSuccess="updateSceneList" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import crmTypeModel from "@/views/ux/model/crmTypeModel"; |
||||
|
//获取表格列 |
||||
|
import { |
||||
|
filterIndexfields, |
||||
|
// crmSceneSave |
||||
|
} from "@/api/ux/common"; |
||||
|
|
||||
|
import filterForm from "./filterForm"; |
||||
|
import filterContent from "./filterForm/filterContent"; |
||||
|
import SceneSet from "./sceneForm/SceneSet"; // 场景设置 |
||||
|
import SceneCreate from "./sceneForm/SceneCreate"; |
||||
|
import data from "../../../../static/tableFieldForSearch"; |
||||
|
import crmtypes from "../../../../static/crmTypes"; |
||||
|
|
||||
|
export default { |
||||
|
name: "CRMTableHead", // 客户管理下 重要提醒 回款计划提醒 |
||||
|
components: { |
||||
|
filterForm, |
||||
|
filterContent, |
||||
|
SceneCreate, |
||||
|
SceneSet, |
||||
|
}, |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
/** 没有值就是全部类型 有值就是当个类型 */ |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
// 辅助 使用 公海没有场景 |
||||
|
isSeas: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
//父ID,主要用于批量删除 |
||||
|
parentID: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
sceneTypes: [ |
||||
|
{ type: "enter", name: "我负责的" }, |
||||
|
{ type: "out", name: "我" }, |
||||
|
], |
||||
|
sceneType: null, |
||||
|
showScene: false, // 场景操作 |
||||
|
showFilter: false, // 控制筛选框 |
||||
|
fieldList: [], |
||||
|
filterObj: { form: [] }, // 筛选确定数据 |
||||
|
|
||||
|
sceneData: { id: "", bydata: "", name: "" }, |
||||
|
showSceneSet: false, // 展示场景设置 |
||||
|
showSceneCreate: false, // 展示场景添加 |
||||
|
sceneFilterObj: { form: [] }, // 筛选确定数据 |
||||
|
|
||||
|
/** 勾选操作数据 */ |
||||
|
selectionList: [], |
||||
|
transferDialogShow: false, |
||||
|
teamsDialogShow: false, // 团队操作提示框 |
||||
|
teamsTitle: "", // 团队操作标题名 |
||||
|
allocDialogShow: false, // 公海分配操作提示框 |
||||
|
dealStatusShow: false, // 成交状态修改框 |
||||
|
crmTypes: {}, |
||||
|
}; |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: {}, |
||||
|
mounted() {}, |
||||
|
methods: { |
||||
|
/** 发布 时候的类型选择 */ |
||||
|
handleTypeDrop(command) { |
||||
|
this.sceneType = command; |
||||
|
}, |
||||
|
/** 搜索全部 */ |
||||
|
getAllClick() { |
||||
|
//清空搜索条件 |
||||
|
this.filterObj = { form: [] }; |
||||
|
this.$emit("filter", null); |
||||
|
}, |
||||
|
/** 展示高级筛选 */ |
||||
|
showFilterClick() { |
||||
|
this.getFilterFieldInfo(); |
||||
|
}, |
||||
|
// 获取高级筛选字段数据 |
||||
|
getFilterFieldInfo() { |
||||
|
this.fieldList = data[this.crmType].data; |
||||
|
this.showFilter = true; |
||||
|
}, |
||||
|
handleFilter(form) { |
||||
|
this.showFilter = false; |
||||
|
if (form === null) { |
||||
|
this.$emit("filter", null); |
||||
|
} else { |
||||
|
this.filterObj = form; |
||||
|
this.showFilter = false; |
||||
|
if (form.saveChecked) { |
||||
|
crmSceneSave({ |
||||
|
type: crmTypeModel[this.crmType], |
||||
|
isDefault: form.saveDefault ? 1 : 0, |
||||
|
name: form.saveName, |
||||
|
data: JSON.stringify(form.obj), |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
this.updateSceneList(); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
} |
||||
|
this.$emit("filter", form.obj); |
||||
|
//this.$emit('filter', form.form) |
||||
|
} |
||||
|
}, |
||||
|
//清空条件 |
||||
|
handleClearField() { |
||||
|
this.filterObj = data.obj; |
||||
|
}, |
||||
|
// 场景操作 |
||||
|
/** 选择了场景 */ |
||||
|
sceneSelect(data) { |
||||
|
this.sceneData = data; |
||||
|
this.$emit("scene", data); |
||||
|
}, |
||||
|
sceneHandle(data) { |
||||
|
if (data.type == "set") { |
||||
|
this.showSceneSet = true; |
||||
|
} else if (data.type == "add") { |
||||
|
filterIndexfields({ |
||||
|
label: crmTypeModel[this.crmType], |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
this.fieldList = res.data; |
||||
|
this.showSceneCreate = true; |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
} |
||||
|
}, |
||||
|
/** 创建保存成功 */ |
||||
|
updateSceneList() { |
||||
|
this.$refs.sceneList.getSceneList(); |
||||
|
}, |
||||
|
/** 勾选后的表头操作 */ |
||||
|
headSelectionChange(array) { |
||||
|
this.selectionList = array; |
||||
|
}, |
||||
|
/** 操作 */ |
||||
|
selectionBarClick(type) { |
||||
|
var message = ""; |
||||
|
if (type == "export") { |
||||
|
message = "确定要导出这些数据嘛?"; |
||||
|
} else if (type == "delete") { |
||||
|
message = "确定要删除这些数据嘛?"; |
||||
|
} |
||||
|
this.$confirm(message, "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning", |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.confirmHandle(type); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.$message({ |
||||
|
type: "info", |
||||
|
message: "已取消操作", |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
confirmHandle(type) { |
||||
|
if (type === "export") { |
||||
|
this.handleExport(); |
||||
|
} |
||||
|
}, |
||||
|
handleExport() { |
||||
|
const params = {}; |
||||
|
params["ids"] = this.selectionList |
||||
|
.map((item) => { |
||||
|
return item[this.crmType + "Id"]; |
||||
|
}) |
||||
|
.join(","); |
||||
|
params.__export = true; |
||||
|
this.$emit("exportData", params); |
||||
|
}, |
||||
|
|
||||
|
deleteItemsCallBack() { |
||||
|
this.$message({ |
||||
|
type: "success", |
||||
|
message: "删除成功", |
||||
|
}); |
||||
|
this.$emit("handle", { type: "delete" }); |
||||
|
}, |
||||
|
/** 获取展示items */ |
||||
|
getSelectionHandleItemsInfo() { |
||||
|
const handleInfos = { |
||||
|
export: { |
||||
|
name: "导出选中", |
||||
|
type: "export", |
||||
|
icon: require("@/assets/img/selection_export.png"), |
||||
|
}, |
||||
|
delete: { |
||||
|
name: "批量删除", |
||||
|
type: "delete", |
||||
|
icon: require("@/assets/img/selection_delete.png"), |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
return this.forSelectionHandleItems(handleInfos, ["export", "delete"]); |
||||
|
}, |
||||
|
forSelectionHandleItems(handleInfos, array) { |
||||
|
var tempsHandles = []; |
||||
|
for (let index = 0; index < array.length; index++) { |
||||
|
tempsHandles.push(handleInfos[array[index]]); |
||||
|
} |
||||
|
return tempsHandles; |
||||
|
}, |
||||
|
// 判断是否展示 |
||||
|
whetherTypeShowByPermision: function (type) { |
||||
|
if (type == "transfer") { |
||||
|
return this.sceneData.bydata == "transform" |
||||
|
? false |
||||
|
: this.crm[this.crmType].transfer; |
||||
|
} else if (type == "transform") { |
||||
|
return this.sceneData.bydata == "transform" |
||||
|
? false |
||||
|
: this.crm[this.crmType].transform; |
||||
|
} else if (type == "export") { |
||||
|
if (this.isSeas) { |
||||
|
return this.crm.pool.excelexport; |
||||
|
} |
||||
|
return this.crm[this.crmType].excelexport; |
||||
|
} else if (type == "delete") { |
||||
|
return this.crm[this.crmType].delete; |
||||
|
} else if (type == "put_seas") { |
||||
|
// 放入公海(客户) |
||||
|
return this.crm[this.crmType].putinpool; |
||||
|
} else if (type == "lock" || type == "unlock") { |
||||
|
// 锁定解锁(客户) |
||||
|
return ( |
||||
|
this.crm[this.crmType].lock && this.CRMConfig.customerConfig == 1 |
||||
|
); |
||||
|
} else if (type == "add_user" || type == "delete_user") { |
||||
|
// 添加 移除团队成员 |
||||
|
return this.crm[this.crmType].teamsave; |
||||
|
} else if (type == "alloc") { |
||||
|
// 分配(公海) |
||||
|
return this.crm.pool.distribute; |
||||
|
} else if (type == "get") { |
||||
|
// 领取(公海) |
||||
|
return this.crm.pool.receive; |
||||
|
} else if (type == "start") { |
||||
|
// 上架 下架(产品) |
||||
|
for (let index = 0; index < this.selectionList.length; index++) { |
||||
|
const element = this.selectionList[index]; |
||||
|
if (element.是否上下架 == "上架") { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
return this.crm[this.crmType].status; |
||||
|
} else if (type == "disable") { |
||||
|
// 上架 下架(产品) |
||||
|
for (let index = 0; index < this.selectionList.length; index++) { |
||||
|
const element = this.selectionList[index]; |
||||
|
if (element.是否上下架 == "下架") { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
return this.crm[this.crmType].status; |
||||
|
} else if (type == "deal_status") { |
||||
|
// 客户状态修改 |
||||
|
return this.crm[this.crmType].dealStatus; |
||||
|
} |
||||
|
return true; |
||||
|
}, |
||||
|
// 子组件 回调的 结果 |
||||
|
handleCallBack(data) { |
||||
|
this.$emit("handle", { type: data.type }); |
||||
|
}, |
||||
|
// 获取默认场景名字 |
||||
|
getDefaultSceneName() { |
||||
|
//add-场景 |
||||
|
this.crmTypes = crmtypes; |
||||
|
let type = this.crmTypes[this.crmType]; |
||||
|
if (type === undefined) { |
||||
|
return "全部" + this.crmType; |
||||
|
} else { |
||||
|
return "全部" + type.name; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "../../../styles/xr-theme"; |
||||
|
.th-container { |
||||
|
font-size: 13px; |
||||
|
height: 50px; |
||||
|
padding: 0 20px; |
||||
|
} |
||||
|
/** 场景和筛选 */ |
||||
|
.condition_title { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.condition_title:hover { |
||||
|
color: $xr-color-primary; |
||||
|
} |
||||
|
|
||||
|
.m-arrow { |
||||
|
margin: 0 8px; |
||||
|
} |
||||
|
.c-filtrate { |
||||
|
margin: 0 10px 0 30px; |
||||
|
width: 12px; |
||||
|
} |
||||
|
|
||||
|
/** 勾选操作 */ |
||||
|
.selection-bar { |
||||
|
font-size: 12px; |
||||
|
height: 50px; |
||||
|
padding: 0 20px; |
||||
|
color: #777; |
||||
|
|
||||
|
.selected—title { |
||||
|
flex-shrink: 0; |
||||
|
padding-right: 20px; |
||||
|
border-right: 1px solid $--table-border-color; |
||||
|
.selected—count { |
||||
|
color: $xr-color-primary; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.selection-items-box { |
||||
|
overflow-x: auto; |
||||
|
overflow-y: hidden; |
||||
|
.selection-item { |
||||
|
width: auto; |
||||
|
padding: 15px; |
||||
|
flex-shrink: 0; |
||||
|
.selection-item-icon { |
||||
|
display: block; |
||||
|
margin-right: 5px; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
} |
||||
|
.selection-item-name { |
||||
|
cursor: pointer; |
||||
|
color: #777; |
||||
|
} |
||||
|
.selection-item-name:hover { |
||||
|
color: $xr-color-primary; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,601 @@ |
|||||
|
<template> |
||||
|
<div class="mix-container"> |
||||
|
<div class="i-cont"> |
||||
|
<el-input |
||||
|
ref="textarea" |
||||
|
v-model="content" |
||||
|
:autosize="inputAutosize" |
||||
|
type="textarea" |
||||
|
clearable |
||||
|
resize="none" |
||||
|
placeholder="请输入内容" |
||||
|
@focus="inputFocus"/> |
||||
|
</div> |
||||
|
<section |
||||
|
v-if="imgFiles.length > 0" |
||||
|
class="img-cont"> |
||||
|
<flexbox wrap="wrap"> |
||||
|
<div |
||||
|
v-for="(item, index) in imgFiles" |
||||
|
:key="index" |
||||
|
:style="{ 'background-image': 'url('+item.url+')' }" |
||||
|
class="img-item" |
||||
|
@mouseover="mouseImgOver(item, index)" |
||||
|
@mouseleave="mouseImgLeave(item, index)"> |
||||
|
<div |
||||
|
v-if="item.showDelete" |
||||
|
class="img-delete" |
||||
|
@click="deleteImgOrFile('image', item, index)">×</div> |
||||
|
</div> |
||||
|
<div class="img-item-add"> |
||||
|
<input |
||||
|
type="file" |
||||
|
class="img-item-iput" |
||||
|
accept="image/*" |
||||
|
multiple |
||||
|
@change="uploadFile"> |
||||
|
</div> |
||||
|
</flexbox> |
||||
|
<div |
||||
|
class="img-bar" |
||||
|
@click="deleteAllImg">全部删除</div> |
||||
|
</section> |
||||
|
<section |
||||
|
v-if="files.length > 0" |
||||
|
class="file-cont"> |
||||
|
<flexbox class="f-header"> |
||||
|
<img |
||||
|
class="f-logo" |
||||
|
src="@/assets/img/send_file.png"> |
||||
|
<div class="f-name">附件</div> |
||||
|
</flexbox> |
||||
|
<div class="f-body"> |
||||
|
<flexbox |
||||
|
v-for="(item, index) in files" |
||||
|
:key="index" |
||||
|
class="f-item"> |
||||
|
<img |
||||
|
:src="item.icon" |
||||
|
class="f-img"> |
||||
|
<div class="f-name">{{ item.name+'('+item.size+')' }}</div> |
||||
|
<div |
||||
|
class="close-button" |
||||
|
@click="deleteImgOrFile('file', item, index)">×</div> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
<div |
||||
|
class="img-bar" |
||||
|
@click="files=[]">全部删除</div> |
||||
|
</section> |
||||
|
<section |
||||
|
v-if="business.length > 0" |
||||
|
class="c-cont"> |
||||
|
<flexbox class="c-header"> |
||||
|
<img |
||||
|
class="c-logo" |
||||
|
src="@/assets/img/send_business.png"> |
||||
|
<div class="c-name">商机</div> |
||||
|
</flexbox> |
||||
|
<div class="c-body"> |
||||
|
<flexbox wrap="wrap"> |
||||
|
<flexbox |
||||
|
v-for="(item, index) in business" |
||||
|
:key="index" |
||||
|
class="c-item"> |
||||
|
<div class="c-item-name">{{ item.businessName }}</div> |
||||
|
<div |
||||
|
class="c-item-close" |
||||
|
@click="business.splice(index, 1)">×</div> |
||||
|
</flexbox> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
</section> |
||||
|
<section |
||||
|
v-if="contacts.length > 0" |
||||
|
class="c-cont"> |
||||
|
<flexbox class="c-header"> |
||||
|
<img |
||||
|
class="c-logo" |
||||
|
src="@/assets/img/send_contacts.png"> |
||||
|
<div class="c-name">联系人</div> |
||||
|
</flexbox> |
||||
|
<div class="c-body"> |
||||
|
<flexbox wrap="wrap"> |
||||
|
<flexbox |
||||
|
v-for="(item, index) in contacts" |
||||
|
:key="index" |
||||
|
class="c-item"> |
||||
|
<div class="c-item-name">{{ item.name }}</div> |
||||
|
<div |
||||
|
class="c-item-close" |
||||
|
@click="contacts.splice(index, 1)">×</div> |
||||
|
</flexbox> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
</section> |
||||
|
<flexbox class="bar-cont"> |
||||
|
<template v-for="(item, index) in barItems"> |
||||
|
<flexbox |
||||
|
v-if="item.type=='img'||item.type=='file'" |
||||
|
:key="index" |
||||
|
class="bar-item" |
||||
|
@click.native="barClick(item)"> |
||||
|
<input |
||||
|
:accept="item.data" |
||||
|
type="file" |
||||
|
class="bar-input" |
||||
|
multiple |
||||
|
@change="uploadFile"> |
||||
|
<img |
||||
|
:src="item.img" |
||||
|
class="bar-img"> |
||||
|
<div class="bar-title">{{ item.title }}</div> |
||||
|
</flexbox> |
||||
|
<el-popover |
||||
|
v-else |
||||
|
:key="index" |
||||
|
v-model="item.show" |
||||
|
placement="bottom" |
||||
|
width="700" |
||||
|
popper-class="no-padding-popover" |
||||
|
trigger="click"> |
||||
|
<!-- <crm-relative--> |
||||
|
<!-- ref="crmrelative"--> |
||||
|
<!-- :show="item.show"--> |
||||
|
<!-- :radio="false"--> |
||||
|
<!-- :action="{ type: 'condition', data: { moduleType: crmType, customerId: id } }"--> |
||||
|
<!-- :selected-data="item.type == 'business' ? { 'business': business } : { 'contacts': contacts }"--> |
||||
|
<!-- :crm-type="item.type"--> |
||||
|
<!-- @close="item.show=false"--> |
||||
|
<!-- @changeCheckout="checkRelativeInfos"/>--> |
||||
|
<flexbox |
||||
|
slot="reference" |
||||
|
class="bar-item" |
||||
|
@click.native="barClick(item)"> |
||||
|
<img |
||||
|
:src="item.img" |
||||
|
class="bar-img"> |
||||
|
<div class="bar-title">{{ item.title }}</div> |
||||
|
</flexbox> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import { fileSize, getFileTypeIcon } from '@/utils/index' |
||||
|
// import { crmFileSave, crmFileDelete } from '@/api/common' |
||||
|
// import CrmRelative from '@/components/CreateCom/CrmRelative' |
||||
|
|
||||
|
export default { |
||||
|
/** 跟进记录 下的 添加 有添加框的都需要*/ |
||||
|
name: 'MixAdd', |
||||
|
components: { |
||||
|
// CrmRelative |
||||
|
}, |
||||
|
props: { |
||||
|
/** 展示相关商机关联 */ |
||||
|
showRelativeBusiness: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
/** 展示相关商机关联 */ |
||||
|
showRelativeContacts: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
/** 模块ID */ |
||||
|
id: [String, Number], |
||||
|
/** 没有值就是全部类型 有值就是当个类型 */ |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
/** 输入法 */ |
||||
|
content: '', |
||||
|
inputAutosize: { minRows: 1, maxRows: 6 }, // 默认1 聚焦是 变成3 |
||||
|
/** 快捷添加 */ |
||||
|
barItems: [ |
||||
|
{ |
||||
|
img: require('@/assets/img/send_img.png'), |
||||
|
title: '图片', |
||||
|
type: 'img', |
||||
|
data: 'image/*' |
||||
|
}, |
||||
|
{ |
||||
|
img: require('@/assets/img/send_file.png'), |
||||
|
title: '附件', |
||||
|
type: 'file', |
||||
|
data: '*.*' |
||||
|
} |
||||
|
], |
||||
|
/** 图片信息 */ |
||||
|
imgFiles: [], |
||||
|
/** 图片信息 */ |
||||
|
files: [], |
||||
|
/** 关联商机信息 */ |
||||
|
business: [], |
||||
|
/** 关联联系人信息 */ |
||||
|
contacts: [], |
||||
|
/** 展示关联弹窗 */ |
||||
|
showRelativeType: '', |
||||
|
batchId: '' // 批次ID |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
mounted() { |
||||
|
/** 控制展示关联商机 和 联系人 */ |
||||
|
if (this.showRelativeBusiness) { |
||||
|
this.barItems.push({ |
||||
|
img: require('@/assets/img/send_business.png'), |
||||
|
title: '关联商机', |
||||
|
type: 'business', |
||||
|
show: false |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
if (this.showRelativeContacts) { |
||||
|
this.barItems.push({ |
||||
|
img: require('@/assets/img/send_contacts.png'), |
||||
|
title: '关联联系人', |
||||
|
type: 'contacts', |
||||
|
show: false |
||||
|
}) |
||||
|
} |
||||
|
/** 父组件通知子组件提交数据 */ |
||||
|
/** 将拼接好的数据回调父组件 this.$refs.child.$emit('submit-info'); 调用*/ |
||||
|
this.$on('submit-info', function() { |
||||
|
this.$emit('mixadd-info', { |
||||
|
content: this.content, |
||||
|
files: this.files, |
||||
|
images: this.imgFiles, |
||||
|
business: this.business, |
||||
|
contacts: this.contacts, |
||||
|
batchId: this.batchId |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
beforeDestroy() { |
||||
|
this.$off('submit-info') |
||||
|
}, |
||||
|
methods: { |
||||
|
resetInfo() { |
||||
|
/** 输入法 */ |
||||
|
this.content = '' |
||||
|
/** 图片信息 */ |
||||
|
this.imgFiles = [] |
||||
|
/** 图片信息 */ |
||||
|
this.files = [] |
||||
|
/** 关联商机信息 */ |
||||
|
this.business = [] |
||||
|
/** 关联联系人信息 */ |
||||
|
this.contacts = [] |
||||
|
/** 展示关联弹窗 */ |
||||
|
this.showRelativeType = '' |
||||
|
this.batchId = '' |
||||
|
}, |
||||
|
/** 快捷添加按钮 */ |
||||
|
checkRelativeInfos(data) { |
||||
|
if (this.showRelativeType == 'business') { |
||||
|
this.business = data.data |
||||
|
} else if (this.showRelativeType == 'contacts') { |
||||
|
this.contacts = data.data |
||||
|
} |
||||
|
}, |
||||
|
barClick(item) { |
||||
|
this.showRelativeType = item.type |
||||
|
if (item.type == 'business') { |
||||
|
item.show = true |
||||
|
} else if (item.type == 'contacts') { |
||||
|
item.show = true |
||||
|
} |
||||
|
}, |
||||
|
/** 图片选择出发 */ |
||||
|
uploadFile(event) { |
||||
|
var files = event.target.files |
||||
|
if (files.length) { |
||||
|
for (let index = 0; index < files.length; index++) { |
||||
|
const file = files[index] |
||||
|
if ( |
||||
|
file.type.indexOf('image') == -1 && |
||||
|
this.showRelativeType == 'img' |
||||
|
) { |
||||
|
this.$message.error('请上传正确的文件类型') |
||||
|
return |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
var type = event.target.accept == 'image/*' ? 'img' : 'file' |
||||
|
var firstFile = files[0] |
||||
|
this.sendFileRequest(firstFile, type, () => { |
||||
|
for (let index = 1; index < files.length; index++) { |
||||
|
const file = files[index] |
||||
|
this.sendFileRequest(file, type) |
||||
|
} |
||||
|
event.target.value = '' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 发送请求 |
||||
|
sendFileRequest(file, type, result) { |
||||
|
var params = { file: file, type: type } |
||||
|
if (this.batchId) { |
||||
|
params.batchId = this.batchId |
||||
|
} |
||||
|
crmFileSave(params) |
||||
|
.then(res => { |
||||
|
if (this.batchId == '') { |
||||
|
this.batchId = res.batchId |
||||
|
} |
||||
|
res.size = fileSize(file.size) |
||||
|
if (type == 'img') { |
||||
|
this.imgFiles.push(res) |
||||
|
} else { |
||||
|
res['icon'] = getFileTypeIcon(file) |
||||
|
this.files.push(res) |
||||
|
} |
||||
|
if (result) { |
||||
|
result() |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
}, |
||||
|
/** 删除全部图片 */ |
||||
|
deleteAllImg() { |
||||
|
this.imgFiles = [] |
||||
|
}, |
||||
|
deleteImgOrFile(type, item, index) { |
||||
|
crmFileDelete({ |
||||
|
id: item.fileId |
||||
|
}) |
||||
|
.then(res => { |
||||
|
if (type == 'image') { |
||||
|
this.imgFiles.splice(index, 1) |
||||
|
} else { |
||||
|
this.files.splice(index, 1) |
||||
|
} |
||||
|
this.$message.success('操作成功') |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
}, |
||||
|
/** 鼠标移入和移除 图片区域 */ |
||||
|
mouseImgOver(item, index) { |
||||
|
item.showDelete = true |
||||
|
this.$set(this.imgFiles, index, item) |
||||
|
}, |
||||
|
mouseImgLeave(item, index) { |
||||
|
item.showDelete = false |
||||
|
this.$set(this.imgFiles, index, item) |
||||
|
}, |
||||
|
inputFocus() { |
||||
|
this.inputAutosize = { minRows: 3, maxRows: 6 } |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.textarea.resizeTextarea() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.mix-container { |
||||
|
position: relative; |
||||
|
border: 1px solid #e6e6e6; |
||||
|
border-radius: 3px; |
||||
|
.i-cont { |
||||
|
padding: 8px 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.i-cont /deep/ .el-textarea__inner { |
||||
|
border: none; |
||||
|
padding: 0; |
||||
|
} |
||||
|
/** 图片 */ |
||||
|
.img-cont { |
||||
|
padding: 0 10px; |
||||
|
margin-bottom: 15px; |
||||
|
.img-item { |
||||
|
width: 98px; |
||||
|
height: 98px; |
||||
|
border: 1px solid #ccc; |
||||
|
display: inline-block; |
||||
|
margin: 0 4px 4px 0; |
||||
|
background-size: contain; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
position: relative; |
||||
|
.img-delete { |
||||
|
position: absolute; |
||||
|
cursor: pointer; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
line-height: 20px; |
||||
|
text-align: center; |
||||
|
font-size: 17px; |
||||
|
background-color: #666; |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
.img-item-add { |
||||
|
width: 98px; |
||||
|
height: 98px; |
||||
|
line-height: 98px; |
||||
|
font-size: 60px; |
||||
|
color: #ccc; |
||||
|
text-align: center; |
||||
|
margin: 0 4px 4px 0; |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
border-width: 1px; |
||||
|
border-style: dashed; |
||||
|
border-color: #ddd; |
||||
|
position: relative; |
||||
|
font-weight: 100; |
||||
|
.img-item-iput { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
height: 98px; |
||||
|
width: 98px; |
||||
|
opacity: 0; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
.img-item-add:before { |
||||
|
width: 2px; |
||||
|
height: 39.5px; |
||||
|
content: ' '; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
background-color: #2888e4; |
||||
|
} |
||||
|
.img-item-add:after { |
||||
|
width: 39.5px; |
||||
|
height: 2px; |
||||
|
content: ' '; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
background-color: #2888e4; |
||||
|
} |
||||
|
.img-bar { |
||||
|
color: #5a8ae2; |
||||
|
font-size: 12px; |
||||
|
padding: 5px 0; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
/** 附件 */ |
||||
|
.file-cont { |
||||
|
padding: 0 10px; |
||||
|
margin: 0 10px 15px; |
||||
|
border: 1px dashed #dfdfdf; |
||||
|
.f-header { |
||||
|
padding: 8px 0 15px; |
||||
|
.f-logo { |
||||
|
position: block; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.f-name { |
||||
|
color: #777; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.f-body { |
||||
|
.f-item { |
||||
|
padding: 3px 0; |
||||
|
height: 25px; |
||||
|
.f-img { |
||||
|
position: block; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.f-name { |
||||
|
color: #666; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.img-bar { |
||||
|
color: #5a8ae2; |
||||
|
font-size: 12px; |
||||
|
padding: 5px 0; |
||||
|
} |
||||
|
} |
||||
|
/** CRM */ |
||||
|
.c-cont { |
||||
|
padding: 0 10px; |
||||
|
margin: 0 10px 15px; |
||||
|
border: 1px dashed #dfdfdf; |
||||
|
.c-header { |
||||
|
padding: 8px 0 15px; |
||||
|
.c-logo { |
||||
|
position: block; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.c-name { |
||||
|
color: #777; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.c-body { |
||||
|
margin-bottom: 10px; |
||||
|
.c-item { |
||||
|
height: 24px; |
||||
|
border-radius: 12px; |
||||
|
padding: 0 8px; |
||||
|
margin: 0 5px 5px 0; |
||||
|
background-color: #3487e2; |
||||
|
color: white; |
||||
|
width: auto; |
||||
|
.c-item-name { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.c-item-close { |
||||
|
padding-left: 5px; |
||||
|
font-size: 17px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
/** 底部bar */ |
||||
|
.bar-cont { |
||||
|
background-color: #f9f9f9; |
||||
|
padding: 8px 15px; |
||||
|
.bar-item { |
||||
|
width: auto; |
||||
|
padding-right: 20px; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
.bar-input { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
height: 15px; |
||||
|
width: 68px; |
||||
|
opacity: 0; |
||||
|
font-size: 0; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.bar-img { |
||||
|
display: block; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.bar-title { |
||||
|
color: #777; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
/** 关闭按钮 */ |
||||
|
.close-button { |
||||
|
width: 30px; |
||||
|
line-height: 16px; |
||||
|
cursor: pointer; |
||||
|
color: #ccc; |
||||
|
height: 16px; |
||||
|
font-size: 17px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,144 @@ |
|||||
|
<template> |
||||
|
<div class="section"> |
||||
|
<div |
||||
|
v-if="title && title.length > 0" |
||||
|
class="section-header"> |
||||
|
<div |
||||
|
:style="{ 'border-left-color': mColor }" |
||||
|
class="section-mark"/> |
||||
|
<div class="section-title">{{ title }}</div> |
||||
|
<flexbox |
||||
|
v-if="showF" |
||||
|
class="f-container"> |
||||
|
<div |
||||
|
v-for="(item, index) in fItems" |
||||
|
:key="index" |
||||
|
:class="{ 'f-item-select':fIndex==item.type }" |
||||
|
class="f-item" |
||||
|
@click="fClick(item)">{{ item.title }}</div> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
<div |
||||
|
:style="{ 'height': contentHeight }" |
||||
|
class="content"> |
||||
|
<div |
||||
|
v-if="showNoData" |
||||
|
class="no-data-container"> |
||||
|
<img |
||||
|
class="no-data" |
||||
|
src="@/assets/img/no_data.png" > |
||||
|
<div class="no-data-name">暂无数据</div> |
||||
|
</div> |
||||
|
<slot/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script type="text/javascript"> |
||||
|
export default { |
||||
|
name: 'Sections', |
||||
|
components: {}, |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
mColor: { |
||||
|
type: String, |
||||
|
default: '#FF6767' |
||||
|
}, |
||||
|
/** 内容区域固定高度 */ |
||||
|
contentHeight: { |
||||
|
type: String, |
||||
|
default: '327px' |
||||
|
}, |
||||
|
/** 展示客户工作台 重要提醒 时间筛选 */ |
||||
|
showF: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
fItems: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
/** 展示无数据 */ |
||||
|
showNoData: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
fIndex: -1 |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
mounted() {}, |
||||
|
methods: { |
||||
|
fClick(item) { |
||||
|
this.fIndex = item.type |
||||
|
this.$emit('f-click', 'val') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.section { |
||||
|
position: relative; |
||||
|
background-color: white; |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
.section:first-child { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
|
||||
|
.section-mark { |
||||
|
border-left-width: 3px; |
||||
|
border-left-style: solid; |
||||
|
height: 10px; |
||||
|
} |
||||
|
|
||||
|
.section-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 5px 15px; |
||||
|
} |
||||
|
.section-title { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
margin-left: 8px; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.f-container { |
||||
|
width: auto; |
||||
|
margin-left: 40px; |
||||
|
.f-item { |
||||
|
padding: 2px 4px; |
||||
|
font-size: 12px; |
||||
|
margin-right: 10px; |
||||
|
color: #666; |
||||
|
} |
||||
|
.f-item-select { |
||||
|
border-radius: 2px; |
||||
|
background-color: #ff6767; |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
overflow: auto; |
||||
|
.no-data-container { |
||||
|
text-align: center; |
||||
|
.no-data { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
.no-data-name { |
||||
|
font-size: 12px; |
||||
|
margin-top: 8px; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,177 @@ |
|||||
|
<template> |
||||
|
<div class="wrapper"> |
||||
|
<ul class="list"> |
||||
|
<li |
||||
|
v-for="(item, index) in showObj.form" |
||||
|
:key="index" |
||||
|
class="list-item"> |
||||
|
<span v-if="item.formType == 'date'">{{ item.name +' “' + item.value[0] + '-' + item.value[1] + '”' }}</span> |
||||
|
<span v-else-if="item.formType === 'datetime'">{{ item.name +' “' + item.value[0] + '-' + item.value[1] + '”' }}</span> |
||||
|
<!-- <span v-else-if="item.formType === 'business_type'">{{ item.name +' “' + getTypesName(item) + getStatusName(item) + '”' }}</span> |
||||
|
<span v-else-if="item.formType === 'map_address'">{{ `${item.name} ${item.address.state} ${item.address.city} ${item.address.area}` }}</span> |
||||
|
<span v-else-if="item.formType === 'checkStatus'">{{ item.name +' “' + optionsNames[item.condition]+ '”'+' '+ getCheckName(item) }}</span> |
||||
|
<span v-else-if="item.formType === 'user'">{{ item.name +' ' + optionsNames[item.condition] + '“' + item.value[0].realname + '”' }}</span> |
||||
|
<span v-else-if="item.formType === 'category' && item.value.length > 0">{{ item.name +' “' + item.valueContent + '”' }}</span> --> |
||||
|
<span v-else-if="item.formType === 'select' && item.value.length > 0">{{ item.name + ' ' + optionsNames[item.condition] + '“' + getSelectName(item) + '”' }}</span> |
||||
|
<span v-else-if="item.formType === 'switch'">{{ item.name + ' ' + optionsNames[item.condition] + '“' + getSwitchName(item) + '”' }}</span> |
||||
|
<span v-else-if="item.formType != 'text' && item.fieldName.endsWith('ID')">{{ item.name + ' ' + optionsNames[item.condition] + '“' + getRelativeName(item) + '”' }}</span> |
||||
|
<span v-else>{{ item.name + ' ' + optionsNames[item.condition] + '“' + item.value + '”' }}</span> |
||||
|
<i |
||||
|
class="el-icon-close icon" |
||||
|
@click="handleDelete(item, index)"/> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'FilterContent', |
||||
|
props: { |
||||
|
obj: { |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 获取条件名称 |
||||
|
optionsNames: { |
||||
|
is: '等于', |
||||
|
isNot: '不等于', |
||||
|
contains: '包含', |
||||
|
notContains: '不包含', |
||||
|
startWith: '开始于', |
||||
|
endWith: '结束于', |
||||
|
isNull: '为空', |
||||
|
isNotNull: '不为空', |
||||
|
eq: '等于', |
||||
|
neq: '不等于', |
||||
|
gt: '大于', |
||||
|
egt: '大于等于', |
||||
|
lt: '小于', |
||||
|
elt: '小于等于' |
||||
|
}, |
||||
|
// 展示信息 |
||||
|
showObj: {} |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
obj: function(val) { |
||||
|
this.showObj = val |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.showObj = this.obj |
||||
|
}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 删除高级筛选条件 |
||||
|
* @param index |
||||
|
*/ |
||||
|
handleDelete(item, index) { |
||||
|
this.$delete(this.showObj.obj, item.fieldName) |
||||
|
this.showObj.form.splice(index, 1) |
||||
|
this.$emit('delete', { item: item, index: index, obj: this.showObj }) |
||||
|
}, |
||||
|
// 商机组展示名称 |
||||
|
getTypesName(data) { |
||||
|
if (data.typeId) { |
||||
|
const obj = data.typeOption.find(item => { |
||||
|
return item.typeId === data.typeId |
||||
|
}) |
||||
|
return obj.name || '' |
||||
|
} |
||||
|
return '' |
||||
|
}, |
||||
|
getCheckName(data) { |
||||
|
let value = '' |
||||
|
data.setting.forEach(item => { |
||||
|
if (item.value === data.value) { |
||||
|
value = item.name |
||||
|
return |
||||
|
} |
||||
|
}) |
||||
|
return value |
||||
|
}, |
||||
|
// 商机阶段展示名称 |
||||
|
getStatusName(data) { |
||||
|
if (data.statusId) { |
||||
|
const obj = data.statusOption.find(item => { |
||||
|
return item.statusId === data.statusId |
||||
|
}) |
||||
|
if (obj.name) { |
||||
|
return '-' + obj.name |
||||
|
} |
||||
|
return '' |
||||
|
} |
||||
|
return '' |
||||
|
}, |
||||
|
getSelectName(data) { |
||||
|
let value = '' |
||||
|
data.setting.forEach(item => { |
||||
|
if (item.split(",")[1] === data.value) { |
||||
|
value = item.split(",")[0] |
||||
|
return |
||||
|
} |
||||
|
}) |
||||
|
return value |
||||
|
}, |
||||
|
getSwitchName(data) { |
||||
|
return data.value===false? '否':'是'; |
||||
|
} , |
||||
|
getRelativeName(data) |
||||
|
{ |
||||
|
return data.displadValue; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
@mixin left() { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
} |
||||
|
@mixin center() { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.wrapper { |
||||
|
width: 100%; |
||||
|
min-height: 50px; |
||||
|
background: white; |
||||
|
border-top: 1px solid #e1e1e1; |
||||
|
font-size: 13px; |
||||
|
overflow-x: scroll; |
||||
|
color: #aaa; |
||||
|
@include left; |
||||
|
.list { |
||||
|
width: 100%; |
||||
|
padding: 0 20px; |
||||
|
margin-bottom: 10px; |
||||
|
flex-shrink: 0; |
||||
|
@include left; |
||||
|
.list-item { |
||||
|
height: 30px; |
||||
|
padding: 0 10px; |
||||
|
margin: 10px 15px 0 0; |
||||
|
border: 1px solid #e1e1e1; |
||||
|
border-radius: 3px; |
||||
|
flex-shrink: 0; |
||||
|
@include center; |
||||
|
.icon { |
||||
|
margin-left: 20px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,156 @@ |
|||||
|
<template> |
||||
|
<div v-loading="loading"> |
||||
|
<div v-empty="list.length === 0"> |
||||
|
<div class="log-items"> |
||||
|
<follow-record-cell |
||||
|
v-for="(item, index) in list" |
||||
|
:item="item" |
||||
|
:index="index" |
||||
|
:crm-type="crmType" |
||||
|
:key="index" |
||||
|
@on-handle="cellHandle"/> |
||||
|
<div class="load"> |
||||
|
<el-button |
||||
|
:loading="loadMoreLoading" |
||||
|
type="text">{{ loadMoreLoading ? '加载更多' : '没有更多了' }}</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import FollowRecordCell from './components/FollowRecordCell' // 跟进记录 |
||||
|
import { crmLeadsRecordIndex } from '@/api/ux/clue' |
||||
|
// import { crmCustomerRecordIndex } from '@/api/customermanagement/customer' |
||||
|
// import { crmContactsRecordIndex } from '@/api/customermanagement/contacts' |
||||
|
// import { crmBusinessRecordIndex } from '@/api/customermanagement/business' |
||||
|
// import { crmContractRecordIndex } from '@/api/customermanagement/contract' |
||||
|
|
||||
|
export default { |
||||
|
/** 线索管理 的 线索详情 的 跟进记录*/ |
||||
|
name: 'RecordLog', |
||||
|
components: { |
||||
|
FollowRecordCell |
||||
|
}, |
||||
|
props: { |
||||
|
/** 模块ID */ |
||||
|
id: [String, Number], |
||||
|
/** 没有值就是全部类型 有值就是当个类型 */ |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
loadMoreLoading: true, |
||||
|
isPost: false, |
||||
|
page: 1, |
||||
|
list: [] // 跟进记录列表 |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
id: function(val) { |
||||
|
this.refreshList() |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$bus.on('follow-log-refresh', data => { |
||||
|
if (data.type == 'record-log') { |
||||
|
this.refreshList() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 分批次加载 |
||||
|
const dom = document.getElementById('follow-log-content') |
||||
|
dom.onscroll = () => { |
||||
|
const scrollOff = dom.scrollTop + dom.clientHeight - dom.scrollHeight |
||||
|
// 滚动条到底部的条件 |
||||
|
if (Math.abs(scrollOff) < 10 && this.loadMoreLoading == true) { |
||||
|
if (!this.isPost) { |
||||
|
this.isPost = true |
||||
|
this.page++ |
||||
|
this.getList() |
||||
|
} else { |
||||
|
this.loadMoreLoading = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.getList() |
||||
|
}, |
||||
|
activated: function() {}, |
||||
|
deactivated: function() {}, |
||||
|
|
||||
|
beforeDestroy() { |
||||
|
this.$bus.off('follow-log-refresh') |
||||
|
}, |
||||
|
methods: { |
||||
|
getList() { |
||||
|
this.loading = true |
||||
|
const request = { |
||||
|
// customer: crmCustomerRecordIndex, |
||||
|
leads: crmLeadsRecordIndex, |
||||
|
// contacts: crmContactsRecordIndex, |
||||
|
// business: crmBusinessRecordIndex, |
||||
|
// contract: crmContractRecordIndex |
||||
|
}[this.crmType] |
||||
|
const params = { |
||||
|
page: this.page, |
||||
|
limit: 10 |
||||
|
} |
||||
|
params[this.crmType + 'Id'] = this.id |
||||
|
request(params) |
||||
|
.then(res => { |
||||
|
this.list = this.list.concat(res.data) |
||||
|
if (res.data.length < 10) { |
||||
|
this.loadMoreLoading = false |
||||
|
} else { |
||||
|
this.loadMoreLoading = true |
||||
|
} |
||||
|
this.loading = false |
||||
|
this.isPost = false |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.isPost = false |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
refreshList() { |
||||
|
this.page = 1 |
||||
|
this.list = [] |
||||
|
this.getList() |
||||
|
}, |
||||
|
/** |
||||
|
* 行布局删除 |
||||
|
*/ |
||||
|
cellHandle(data) { |
||||
|
if (data.type == 'delete') { |
||||
|
this.list.splice(data.data.index, 1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.log-items { |
||||
|
min-height: 400px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.load { |
||||
|
color: #999; |
||||
|
font-size: 13px; |
||||
|
margin: 0 auto 15px; |
||||
|
text-align: center; |
||||
|
.el-button, |
||||
|
.el-button:focus { |
||||
|
color: #ccc; |
||||
|
cursor: auto; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,223 @@ |
|||||
|
<template> |
||||
|
<div class="fl-c"> |
||||
|
<flexbox class="fl-h"> |
||||
|
<div |
||||
|
v-photo="{img: item.userImg, realname: item.realname}" |
||||
|
v-lazy:background-image="$options.filters.filterUserLazyImg(item.userImg)" |
||||
|
class="div-photo fl-h-img"/> |
||||
|
<div class="fl-h-b"> |
||||
|
<div class="fl-h-name">{{ item.realname }}</div> |
||||
|
<div class="fl-h-time">{{ item.createTime }}</div> |
||||
|
</div> |
||||
|
<flexbox class="fl-h-mark"> |
||||
|
<img |
||||
|
class="fl-h-mark-img" |
||||
|
src="@/assets/img/follow_record.png" > |
||||
|
<div class="fl-h-mark-name">跟进记录</div> |
||||
|
</flexbox> |
||||
|
<el-dropdown |
||||
|
trigger="click" |
||||
|
@command="handleCommand"> |
||||
|
<i |
||||
|
style="color:#CDCDCD;margin-left: 8px;" |
||||
|
class="el-icon-arrow-down el-icon-more"/> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item command="delete">删除</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</flexbox> |
||||
|
<div class="fl-b"> |
||||
|
<div class="fl-b-content">{{ item.content }}</div> |
||||
|
<flexbox |
||||
|
v-if="item.img && item.img.length > 0" |
||||
|
class="fl-b-images" |
||||
|
wrap="wrap"> |
||||
|
<div |
||||
|
v-lazy:background-image="file.filePath" |
||||
|
v-for="(file, index) in item.img" |
||||
|
:key="file.filePath" |
||||
|
class="fl-b-img-item" |
||||
|
@click="previewImg(item.img, index)"/> |
||||
|
</flexbox> |
||||
|
<div |
||||
|
v-if="item.file && item.file.length > 0" |
||||
|
class="fl-b-files"> |
||||
|
<flexbox |
||||
|
v-for="(file, index) in item.file" |
||||
|
:key="index" |
||||
|
class="cell"> |
||||
|
<img |
||||
|
class="cell-head" |
||||
|
src="@/assets/img/relevance_file.png" > |
||||
|
<div class="cell-body">{{ file.name }}<span style="color: #ccc;">（{{ file.size }}）</span></div> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-download" |
||||
|
@click="downloadFile(file)">下载</el-button> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
<div |
||||
|
v-if="item.category || item.nextTime" |
||||
|
class="follow"> |
||||
|
<span |
||||
|
v-if="item.category" |
||||
|
class="follow-info">{{ item.category }}</span> |
||||
|
<span |
||||
|
v-if="item.nextTime" |
||||
|
class="follow-info">{{ item.nextTime }}</span> |
||||
|
</div> |
||||
|
<div |
||||
|
v-if="item.contactsList && item.contactsList.length > 0" |
||||
|
class="fl-b-other"> |
||||
|
<div class="fl-b-other-name">关联联系人</div> |
||||
|
<div> |
||||
|
<flexbox |
||||
|
v-for="(item, index) in item.contactsList" |
||||
|
:key="index" |
||||
|
class="cell" |
||||
|
@click.native="checkRelationDetail('contacts', item.contactsId)"> |
||||
|
<i |
||||
|
:style="{'opacity': index == 0 ? 1 : 0}" |
||||
|
class="wukong wukong-contacts cell-head crm-type"/> |
||||
|
<div |
||||
|
class="cell-body" |
||||
|
style="color: #6394E5;cursor: pointer;">{{ item.name }}</div> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div |
||||
|
v-if="item.businessList && item.businessList.length > 0" |
||||
|
class="fl-b-other"> |
||||
|
<div class="fl-b-other-name">关联商机</div> |
||||
|
<div> |
||||
|
<flexbox |
||||
|
v-for="(item, index) in item.businessList" |
||||
|
:key="index" |
||||
|
class="cell" |
||||
|
@click.native="checkRelationDetail('business', item.businessId)"> |
||||
|
<i |
||||
|
:style="{'opacity': index == 0 ? 1 : 0}" |
||||
|
class="wukong wukong-business cell-head crm-type"/> |
||||
|
<div |
||||
|
class="cell-body" |
||||
|
style="color: #6394E5;cursor: pointer;">{{ item.businessName }}</div> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
</div> |
||||
|
<slot/> |
||||
|
</div> |
||||
|
<!-- <c-r-m-full-screen-detail--> |
||||
|
<!-- :visible.sync="showFullDetail"--> |
||||
|
<!-- :crm-type="relationCrmType"--> |
||||
|
<!-- :id="relationID"/>--> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import { downloadFile } from '@/utils' |
||||
|
// import { crmRecordDelete } from '@/api/customermanagement/common' |
||||
|
|
||||
|
export default { |
||||
|
/** 客户管理 的 客户详情 的 跟进记录cell*/ |
||||
|
name: 'FollowRecordCell', |
||||
|
components: { |
||||
|
// CRMFullScreenDetail: () => |
||||
|
// import('@/views/customermanagement/components/CRMFullScreenDetail.vue') |
||||
|
}, |
||||
|
props: { |
||||
|
item: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
/** 没有值就是全部类型 有值就是当个类型 */ |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
index: [String, Number] |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
showFullDetail: false, // 查看相关客户管理详情 |
||||
|
relationID: '', // 相关ID参数 |
||||
|
relationCrmType: '' // 相关类型 |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
mounted() {}, |
||||
|
methods: { |
||||
|
previewImg(list, index) { |
||||
|
this.$bus.emit('preview-image-bus', { |
||||
|
index: index, |
||||
|
data: list.map(function(item, index, array) { |
||||
|
item.url = item.filePath |
||||
|
return item |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
downloadFile(file) { |
||||
|
// downloadFile({ path: file.filePath, name: file.name }) |
||||
|
}, |
||||
|
/** |
||||
|
* 删除跟进记录 |
||||
|
*/ |
||||
|
handleCommand(command) { |
||||
|
// this.$confirm('确定删除?', '提示', { |
||||
|
// confirmButtonText: '确定', |
||||
|
// cancelButtonText: '取消', |
||||
|
// type: 'warning' |
||||
|
// }) |
||||
|
// .then(() => { |
||||
|
// crmRecordDelete({ |
||||
|
// recordId: this.item.recordId |
||||
|
// }) |
||||
|
// .then(res => { |
||||
|
// this.$emit('on-handle', { |
||||
|
// type: command, |
||||
|
// data: { item: this.item, index: this.index } |
||||
|
// }) |
||||
|
// this.$message.success('操作成功') |
||||
|
// }) |
||||
|
// .catch(() => {}) |
||||
|
// }) |
||||
|
// .catch(() => { |
||||
|
// this.$message({ |
||||
|
// type: 'info', |
||||
|
// message: '已取消操作' |
||||
|
// }) |
||||
|
// }) |
||||
|
}, |
||||
|
/** |
||||
|
* 查看相关客户管理详情 |
||||
|
*/ |
||||
|
checkRelationDetail(type, id) { |
||||
|
this.relationID = id |
||||
|
this.relationCrmType = type |
||||
|
this.showFullDetail = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '../styles/followcell.scss'; |
||||
|
.follow { |
||||
|
.follow-info { |
||||
|
padding: 5px 10px; |
||||
|
background-color: #f5f7fa; |
||||
|
color: #999; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
border-radius: 28px; |
||||
|
font-size: 12px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.crm-type { |
||||
|
color: rgb(99, 148, 229); |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,174 @@ |
|||||
|
/** 跟进记录相关的 日志 审批任务 日程 项目 公共css */ |
||||
|
.fl-c { |
||||
|
background-color: white; |
||||
|
padding: 10px 20px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
/** 头部布局 名字 头像 */ |
||||
|
.fl-h { |
||||
|
.fl-h-img { |
||||
|
display: block; |
||||
|
width: 34px; |
||||
|
height: 34px; |
||||
|
border-radius: 17px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.fl-h-b { |
||||
|
flex: 1; |
||||
|
|
||||
|
.fl-h-name { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.fl-h-time { |
||||
|
font-size: 12px; |
||||
|
color: #999; |
||||
|
margin-top: 3px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 头部 右侧 布局*/ |
||||
|
.fl-h-handle { |
||||
|
width: auto; |
||||
|
|
||||
|
.fl-h-handle-name { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fl-h-mark { |
||||
|
width: auto; |
||||
|
|
||||
|
.fl-h-mark-img { |
||||
|
display: block; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.fl-h-mark-name { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 内容区域 */ |
||||
|
.fl-b { |
||||
|
margin: 20px 0 0 40px; |
||||
|
|
||||
|
.fl-b-content { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
margin-bottom: 10px; |
||||
|
white-space: pre-wrap; |
||||
|
word-wrap: break-word; |
||||
|
letter-spacing: 0.5px; |
||||
|
line-height: 18px; |
||||
|
} |
||||
|
|
||||
|
.fl-b-images { |
||||
|
margin-top: 5px; |
||||
|
width: 310px; |
||||
|
|
||||
|
.fl-b-img-item { |
||||
|
width: 98px; |
||||
|
height: 98px; |
||||
|
display: inline-block; |
||||
|
margin: 0 4px 4px 0; |
||||
|
background-size: contain; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fl-b-other { |
||||
|
margin: 8px 0; |
||||
|
|
||||
|
.fl-b-other-name { |
||||
|
margin: 10px 0; |
||||
|
color: #666; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fl-c:before { |
||||
|
content: " "; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
height: 1px; |
||||
|
border-top: 1px solid #e5e5e5; |
||||
|
color: #e5e5e5; |
||||
|
-webkit-transform-origin: 0 0; |
||||
|
transform-origin: 0 0; |
||||
|
-webkit-transform: scaleY(0.5); |
||||
|
transform: scaleY(0.5); |
||||
|
left: 15px; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.fl-c:first-child:before { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/** 附件 */ |
||||
|
.fl-b-files { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
/** 关联附件 联系人 客户 行布局 */ |
||||
|
.cell { |
||||
|
padding: 8px; |
||||
|
background-color: #F5F7FA; |
||||
|
border-radius: 2px; |
||||
|
position: relative; |
||||
|
|
||||
|
.cell-head { |
||||
|
display: block; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.cell-body { |
||||
|
flex: 1; |
||||
|
color: #333; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.cell-foot { |
||||
|
display: block; |
||||
|
width: 20px; |
||||
|
padding: 0 4px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cell:before { |
||||
|
content: " "; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
height: 1px; |
||||
|
border-top: 1px solid #e5e5e5; |
||||
|
color: #e5e5e5; |
||||
|
-webkit-transform-origin: 0 0; |
||||
|
transform-origin: 0 0; |
||||
|
-webkit-transform: scaleY(0.5); |
||||
|
transform: scaleY(0.5); |
||||
|
left: 30px; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.cell:first-child:before { |
||||
|
display: none; |
||||
|
} |
||||
@ -0,0 +1,640 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:title="edit_id ? '编辑场景' : '新建场景'" |
||||
|
:visible.sync="visible" |
||||
|
:append-to-body="true" |
||||
|
width="800px" |
||||
|
@close="handleCancel"> |
||||
|
<div class="scene-name-container"> |
||||
|
<div class="scene-name">场景名称</div> |
||||
|
<el-input |
||||
|
v-model.trim="saveName" |
||||
|
:maxlength="10" |
||||
|
class="scene-input" |
||||
|
placeholder="请输入场景名称，最多10个字符"/> |
||||
|
</div> |
||||
|
<div class="scene-name">筛选条件</div> |
||||
|
<el-form |
||||
|
id="scene-filter-container" |
||||
|
class="filter-container"> |
||||
|
<el-form-item> |
||||
|
<template v-for="(formItem, index) in form"> |
||||
|
<el-row :key="index"> |
||||
|
<el-col :span="8"> |
||||
|
<el-select |
||||
|
v-model="formItem.fieldName" |
||||
|
placeholder="请选择要筛选的字段名" |
||||
|
@change="fieldChange(formItem)"> |
||||
|
<el-option |
||||
|
v-for="item in fieldList" |
||||
|
:key="item.fieldName" |
||||
|
:label="item.name" |
||||
|
:value="item.fieldName"/> |
||||
|
</el-select> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col |
||||
|
v-if="formItem.formType !== 'date' && formItem.formType !== 'datetime' && formItem.formType !== 'business_type'" |
||||
|
:span="1"> </el-col> |
||||
|
<el-col |
||||
|
v-if="formItem.formType !== 'date' && formItem.formType !== 'datetime' && formItem.formType !== 'business_type'" |
||||
|
:span="4"> |
||||
|
<el-select |
||||
|
v-model="formItem.condition" |
||||
|
placeholder="请选择范围"> |
||||
|
<el-option |
||||
|
v-for="item in calConditionOptions(formItem.formType, formItem)" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"/> |
||||
|
</el-select> |
||||
|
</el-col> |
||||
|
|
||||
|
<!-- 商机组 --> |
||||
|
<el-col |
||||
|
v-if="formItem.formType == 'business_type'" |
||||
|
:span="1"> </el-col> |
||||
|
<el-col |
||||
|
v-if="formItem.formType == 'business_type'" |
||||
|
:span="4"> |
||||
|
<el-select |
||||
|
v-model="formItem.typeId" |
||||
|
placeholder="请选择" |
||||
|
@change="typeOptionsChange(formItem)"> |
||||
|
<el-option |
||||
|
v-for="item in formItem.typeOption" |
||||
|
:key="item.typeId" |
||||
|
:label="item.name" |
||||
|
:value="item.typeId"/> |
||||
|
</el-select> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="1"> </el-col> |
||||
|
<el-col :span="formItem.formType === 'datetime' || formItem.formType === 'date' ? 13 : 8"> |
||||
|
<el-select |
||||
|
v-if="formItem.formType === 'select'" |
||||
|
v-model="formItem.value" |
||||
|
placeholder="请选择筛选条件"> |
||||
|
<el-option |
||||
|
v-for="item in formItem.setting" |
||||
|
:key="item" |
||||
|
:label="item" |
||||
|
:value="item"/> |
||||
|
</el-select> |
||||
|
<el-select |
||||
|
v-else-if="formItem.formType === 'checkStatus'" |
||||
|
v-model="formItem.value" |
||||
|
placeholder="请选择筛选条件"> |
||||
|
<el-option |
||||
|
v-for="item in formItem.setting" |
||||
|
:key="item.value" |
||||
|
:label="item.name" |
||||
|
:value="item.value"/> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
v-else-if="formItem.formType === 'date' || formItem.formType === 'datetime'" |
||||
|
v-model="formItem.value" |
||||
|
:value-format="formItem.formType === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'" |
||||
|
:type="formItem.formType === 'date' ? 'daterange' : 'datetimerange'" |
||||
|
style="padding: 0px 10px;" |
||||
|
range-separator="-" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期"/> |
||||
|
<el-select |
||||
|
v-else-if="formItem.formType === 'business_type'" |
||||
|
v-model="formItem.statusId" |
||||
|
placeholder="请选择"> |
||||
|
<el-option |
||||
|
v-for="item in formItem.statusOption" |
||||
|
:key="item.statusId" |
||||
|
:label="item.name" |
||||
|
:value="item.statusId"/> |
||||
|
</el-select> |
||||
|
<!-- <xh-user-cell--> |
||||
|
<!-- v-else-if="formItem.formType === 'user'"--> |
||||
|
<!-- :item="formItem"--> |
||||
|
<!-- :value="formItem.value"--> |
||||
|
<!-- @value-change="userValueChange"/>--> |
||||
|
<el-input |
||||
|
v-else |
||||
|
v-model="formItem.value" |
||||
|
placeholder="请输入筛选条件"/> |
||||
|
</el-col> |
||||
|
<el-col |
||||
|
:span="1" |
||||
|
class="delete"> |
||||
|
<i |
||||
|
class="el-icon-error delete-btn" |
||||
|
@click="handleDelete(index)"/> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<p |
||||
|
v-show="showErrors" |
||||
|
class="el-icon-warning warning-info"> |
||||
|
<span class="desc">筛选条件中有重复项！</span> |
||||
|
</p> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleAdd">+ 添加筛选条件</el-button> |
||||
|
<div class="save"> |
||||
|
<div class="save-setting"> |
||||
|
<el-checkbox v-model="saveDefault">设置为默认</el-checkbox> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div |
||||
|
slot="footer" |
||||
|
class="dialog-footer"> |
||||
|
<el-button @click="handleCancel">取 消</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
@click="handleConfirm">确 定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import crmTypeModel from '@/views/ux/model/crmTypeModel' |
||||
|
// import { crmSceneSave, crmSceneUpdate } from '@/api/customermanagement/common' |
||||
|
import { |
||||
|
objDeepCopy |
||||
|
} from '@/utils' |
||||
|
// import { XhUserCell } from '@/components/CreateCom' |
||||
|
|
||||
|
/** |
||||
|
* fieldList: 高级筛选的字段 |
||||
|
* type: date || datetime || select || 其他 input |
||||
|
*/ |
||||
|
export default { |
||||
|
name: 'SceneCreate', // 新建场景 |
||||
|
components: { |
||||
|
// XhUserCell |
||||
|
}, |
||||
|
props: { |
||||
|
dialogVisible: { |
||||
|
type: Boolean, |
||||
|
required: true, |
||||
|
default: false |
||||
|
}, |
||||
|
fieldList: { |
||||
|
type: Array, |
||||
|
required: true, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
obj: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
}, |
||||
|
required: true |
||||
|
}, |
||||
|
/** 没有值就是全部类型 有值就是当个类型 */ |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
/** 名字和 默认 id 编辑的时候需要 */ |
||||
|
name: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
isDefault: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
edit_id: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
form: [], |
||||
|
visible: false, // 控制展示 |
||||
|
showErrors: false, |
||||
|
saveDefault: false, // 设置为默认场景 |
||||
|
saveName: null // 场景名称 |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
dialogVisible: { |
||||
|
handler(val) { |
||||
|
if (val) { |
||||
|
// 处理编辑数据 |
||||
|
if (this.edit_id) { |
||||
|
this.form = [] |
||||
|
for (const field in this.obj.obj) { |
||||
|
const element = this.obj.obj[field] |
||||
|
const item = this.getItem() |
||||
|
item.fieldName = element.name |
||||
|
item.condition = element.condition |
||||
|
item.formType = element.formType |
||||
|
if (element.formType == 'date') { |
||||
|
item.value = [element.start_date, element.end_date] |
||||
|
} else if (element.formType == 'datetime') { |
||||
|
item.value = [element.start, element.end] |
||||
|
} else if (element.formType == 'business_type') { |
||||
|
item.typeId = element.typeId |
||||
|
item.statusId = element.statusId |
||||
|
item.typeOption = element.setting |
||||
|
if (element.typeId) { |
||||
|
const obj = element.setting.find(typeItem => { |
||||
|
return typeItem.typeId === element.typeId |
||||
|
}) |
||||
|
if (obj) { |
||||
|
item.statusOption = obj.statusList |
||||
|
} else { |
||||
|
item.statusOption = [] |
||||
|
} |
||||
|
} |
||||
|
} else if (element.formType == 'user') { |
||||
|
item.value = element.setting ? [element.setting] : [] |
||||
|
} else { |
||||
|
item.setting = element.setting |
||||
|
item.value = element.value |
||||
|
} |
||||
|
this.form.push(item) |
||||
|
} |
||||
|
} else { |
||||
|
this.form = objDeepCopy(this.obj.form) |
||||
|
if (this.form.length == 0) { |
||||
|
this.form.push(this.getItem()) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 只有编辑会牵扯到这两个字段赋值 */ |
||||
|
if (this.name) { |
||||
|
this.saveName = this.name |
||||
|
} else { |
||||
|
this.saveName = '' |
||||
|
} |
||||
|
if (this.isDefault) { |
||||
|
this.saveDefault = this.isDefault |
||||
|
} else { |
||||
|
this.saveDefault = false |
||||
|
} |
||||
|
} |
||||
|
this.visible = this.dialogVisible |
||||
|
}, |
||||
|
deep: true, |
||||
|
immediate: true |
||||
|
}, |
||||
|
|
||||
|
form() { |
||||
|
this.$nextTick(() => { |
||||
|
var container = document.getElementById('scene-filter-container') |
||||
|
container.scrollTop = container.scrollHeight |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getItem() { |
||||
|
return { |
||||
|
fieldName: '', |
||||
|
name: '', |
||||
|
formType: '', |
||||
|
condition: 'is', |
||||
|
value: '', |
||||
|
typeOption: [], |
||||
|
statusOption: [], |
||||
|
typeId: '', |
||||
|
statusId: '' |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 商机组状态 |
||||
|
*/ |
||||
|
typeOptionsChange(formItem) { |
||||
|
if (formItem.typeId) { |
||||
|
const obj = formItem.typeOption.find(item => { |
||||
|
return item.typeId === formItem.typeId |
||||
|
}) |
||||
|
formItem.statusOption = obj.statusList || [] |
||||
|
} else { |
||||
|
formItem.statusOption = [] |
||||
|
} |
||||
|
formItem.statusId = '' |
||||
|
}, |
||||
|
/** |
||||
|
* 用户创建人 |
||||
|
*/ |
||||
|
userValueChange(data) { |
||||
|
if (data.value.length > 0) { |
||||
|
data.item.value = data.value |
||||
|
} else { |
||||
|
data.item.value = [] |
||||
|
} |
||||
|
}, |
||||
|
/** 条件数据源 */ |
||||
|
calConditionOptions(formType, item) { |
||||
|
if ( |
||||
|
formType == 'select' || |
||||
|
formType == 'checkbox' || |
||||
|
formType == 'user' || |
||||
|
formType == 'checkStatus' |
||||
|
) { |
||||
|
return [ |
||||
|
{ value: 'is', label: '等于', disabled: false }, |
||||
|
{ value: 'isNot', label: '不等于', disabled: false } |
||||
|
] |
||||
|
} else if ( |
||||
|
formType == 'module' || |
||||
|
formType == 'text' || |
||||
|
formType == 'textarea' |
||||
|
) { |
||||
|
return [ |
||||
|
{ value: 'is', label: '等于', disabled: false }, |
||||
|
{ value: 'isNot', label: '不等于', disabled: false }, |
||||
|
{ value: 'contains', label: '包含', disabled: false }, |
||||
|
{ value: 'notContains', label: '不包含', disabled: false } |
||||
|
] |
||||
|
} else if (formType == 'floatnumber' || formType == 'number') { |
||||
|
return [ |
||||
|
{ value: 'is', label: '等于', disabled: false }, |
||||
|
{ value: 'isNot', label: '不等于', disabled: false }, |
||||
|
{ value: 'contains', label: '包含', disabled: false }, |
||||
|
{ value: 'notContains', label: '不包含', disabled: false }, |
||||
|
{ value: 'isNull', label: '为空', disabled: false }, |
||||
|
{ value: 'isNotNull', label: '不为空', disabled: false }, |
||||
|
{ value: 'gt', label: '大于', disabled: false }, |
||||
|
{ value: 'egt', label: '大于等于', disabled: false }, |
||||
|
{ value: 'lt', label: '小于', disabled: false }, |
||||
|
{ value: 'elt', label: '小于等于', disabled: false } |
||||
|
] |
||||
|
} else { |
||||
|
return [ |
||||
|
{ value: 'is', label: '等于', disabled: false }, |
||||
|
{ value: 'isNot', label: '不等于', disabled: false }, |
||||
|
{ value: 'contains', label: '包含', disabled: false }, |
||||
|
{ value: 'notContains', label: '不包含', disabled: false }, |
||||
|
{ value: 'startWith', label: '开始于', disabled: false }, |
||||
|
{ value: 'endWith', label: '结束于', disabled: false }, |
||||
|
{ value: 'isNull', label: '为空', disabled: false }, |
||||
|
{ value: 'isNotNull', label: '不为空', disabled: false }, |
||||
|
{ value: 'gt', label: '大于', disabled: false }, |
||||
|
{ value: 'egt', label: '大于等于', disabled: false }, |
||||
|
{ value: 'lt', label: '小于', disabled: false }, |
||||
|
{ value: 'elt', label: '小于等于', disabled: false } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 当前选择的字段名改变，判断是否有重复 |
||||
|
* @param formItem |
||||
|
*/ |
||||
|
fieldChange(formItem) { |
||||
|
const obj = this.fieldList.find(item => { |
||||
|
return item.fieldName === formItem.fieldName |
||||
|
}) |
||||
|
if (obj) { |
||||
|
formItem.formType = obj.formType |
||||
|
formItem.name = obj.name |
||||
|
if (formItem.formType == 'business_type') { |
||||
|
formItem.typeOption = obj.setting |
||||
|
formItem.statusOption = [] |
||||
|
formItem.typeId = '' |
||||
|
formItem.statusId = '' |
||||
|
} else if ( |
||||
|
formItem.formType == 'select' || |
||||
|
formItem.formType == 'checkStatus' |
||||
|
) { |
||||
|
formItem.setting = obj.setting || [] |
||||
|
} else if ( |
||||
|
formItem.formType === 'date' || |
||||
|
formItem.formType === 'datetime' || |
||||
|
formItem.formType === 'user' |
||||
|
) { |
||||
|
formItem.value = [] |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const arr = this.form.filter(item => { |
||||
|
return item.fieldName === formItem.fieldName |
||||
|
}) |
||||
|
if (arr.length > 1) this.showErrors = true |
||||
|
else this.showErrors = false |
||||
|
}, |
||||
|
/** |
||||
|
* 取消选择 |
||||
|
*/ |
||||
|
handleCancel() { |
||||
|
this.visible = false |
||||
|
this.$emit('update:dialogVisible', false) |
||||
|
}, |
||||
|
/** |
||||
|
* 确定选择 |
||||
|
*/ |
||||
|
handleConfirm() { |
||||
|
if (this.showErrors) { |
||||
|
this.$message.error('筛选条件中有重复项！') |
||||
|
return |
||||
|
} |
||||
|
if (!this.saveName || this.saveName === '') { |
||||
|
this.$message.error('场景名称不能为空！') |
||||
|
return |
||||
|
} |
||||
|
for (let i = 0; i < this.form.length; i++) { |
||||
|
const o = this.form[i] |
||||
|
if (!o.fieldName || o.fieldName === '') { |
||||
|
this.$message.error('要筛选的字段名称不能为空！') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
if (o.formType == 'business_type') { |
||||
|
if (!o.typeId && !o.statusId) { |
||||
|
this.$message.error('请输入筛选条件的值！') |
||||
|
return |
||||
|
} |
||||
|
} else if ( |
||||
|
o.formType == 'date' || |
||||
|
o.formType == 'datetime' || |
||||
|
o.formType == 'user' |
||||
|
) { |
||||
|
if (!o.value || o.value.length === 0) { |
||||
|
this.$message.error('请输入筛选条件的值！') |
||||
|
return |
||||
|
} |
||||
|
} else if (!o.value) { |
||||
|
this.$message.error('请输入筛选条件的值！') |
||||
|
return |
||||
|
} |
||||
|
} |
||||
|
const obj = {} |
||||
|
this.form.forEach(o => { |
||||
|
if (o.formType == 'datetime' || o.formType == 'date') { |
||||
|
obj[o.fieldName] = { |
||||
|
start: o.value[0], |
||||
|
end: o.value[1], |
||||
|
formType: o.formType, |
||||
|
name: o.fieldName |
||||
|
} |
||||
|
} else if (o.formType == 'business_type') { |
||||
|
obj[o.fieldName] = { |
||||
|
typeId: o.typeId, |
||||
|
statusId: o.statusId, |
||||
|
formType: o.formType, |
||||
|
name: o.fieldName |
||||
|
} |
||||
|
} else if (o.formType == 'user') { |
||||
|
obj[o.fieldName] = { |
||||
|
condition: o.condition, |
||||
|
value: o.value[0].userId, |
||||
|
formType: o.formType, |
||||
|
setting: o.value[0], |
||||
|
name: o.fieldName |
||||
|
} |
||||
|
} else { |
||||
|
obj[o.fieldName] = { |
||||
|
condition: o.condition, |
||||
|
value: o.value, |
||||
|
formType: o.formType, |
||||
|
name: o.fieldName |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
const data = { |
||||
|
obj: obj, |
||||
|
form: this.form, |
||||
|
saveDefault: this.saveDefault, |
||||
|
saveName: this.saveName |
||||
|
} |
||||
|
this.requestCreateScene(data) |
||||
|
}, |
||||
|
// 创建场景 |
||||
|
requestCreateScene(data) { |
||||
|
/** 编辑操作 */ |
||||
|
if (this.edit_id) { |
||||
|
// crmSceneUpdate({ |
||||
|
// isDefault: data.saveDefault ? 1 : 0, |
||||
|
// name: data.saveName, |
||||
|
// sceneId: this.edit_id, |
||||
|
// data: JSON.stringify(data.obj) |
||||
|
// }) |
||||
|
// .then(res => { |
||||
|
// this.$message({ |
||||
|
// type: 'success', |
||||
|
// message: '编辑成功' |
||||
|
// }) |
||||
|
// // 新建成功 |
||||
|
// this.$emit('saveSuccess') |
||||
|
// this.handleCancel() |
||||
|
// }) |
||||
|
// .catch(() => {}) |
||||
|
} else { |
||||
|
// crmSceneSave({ |
||||
|
// type: crmTypeModel[this.crmType], |
||||
|
// isDefault: data.saveDefault ? 1 : 0, |
||||
|
// name: data.saveName, |
||||
|
// data: JSON.stringify(data.obj) |
||||
|
// }) |
||||
|
// .then(res => { |
||||
|
// this.$message({ |
||||
|
// type: 'success', |
||||
|
// message: '创建成功' |
||||
|
// }) |
||||
|
// // 新建成功 |
||||
|
// this.$emit('saveSuccess') |
||||
|
// this.handleCancel() |
||||
|
// }) |
||||
|
// .catch(() => {}) |
||||
|
} |
||||
|
}, |
||||
|
/** |
||||
|
* 添加筛选条件 |
||||
|
*/ |
||||
|
handleAdd() { |
||||
|
this.form.push(this.getItem()) |
||||
|
}, |
||||
|
/** |
||||
|
* 删除筛选条件 |
||||
|
* @param index |
||||
|
*/ |
||||
|
handleDelete(index) { |
||||
|
this.$confirm('您确定要删除这一条数据吗?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.form.splice(index, 1) |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.$message({ |
||||
|
type: 'info', |
||||
|
message: '已取消删除' |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
/deep/ .el-dialog__body { |
||||
|
padding: 10px 20px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-form-item__label { |
||||
|
width: 100%; |
||||
|
text-align: left; |
||||
|
} |
||||
|
.filter-container { |
||||
|
max-height: 200px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.save { |
||||
|
margin-top: 10px; |
||||
|
.name { |
||||
|
width: 300px; |
||||
|
margin-left: 10px; |
||||
|
/deep/ .el-input__inner { |
||||
|
height: 32px; |
||||
|
} |
||||
|
} |
||||
|
.save-setting { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-form-item { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.el-row { |
||||
|
margin-bottom: 20px; |
||||
|
.delete-btn { |
||||
|
margin-left: 15px; |
||||
|
color: #bbb; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.el-select, |
||||
|
.el-date-editor { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.warning-info { |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
color: #f56c6c; |
||||
|
margin-top: 10px; |
||||
|
.desc { |
||||
|
padding-left: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.scene-name-container { |
||||
|
padding-bottom: 15px; |
||||
|
.scene-input { |
||||
|
width: 300px; |
||||
|
} |
||||
|
} |
||||
|
.scene-name { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,156 @@ |
|||||
|
<template> |
||||
|
<div class="scene-container"> |
||||
|
<div class="scene-list"> |
||||
|
<div |
||||
|
v-for="(item, index) in sceneList" |
||||
|
:key="index" |
||||
|
:class="{'scene-list-item-select':item.sceneId == sceneSelectId}" |
||||
|
class="scene-list-item" |
||||
|
@click="selectScene(item, index)"> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<flexbox |
||||
|
class="handle-button" |
||||
|
@click.native="addScene"> |
||||
|
<img |
||||
|
class="handle-button-icon" |
||||
|
src="@/assets/img/scene_add.png" > |
||||
|
<div class="handle-button-name">新建场景</div> |
||||
|
</flexbox> |
||||
|
<flexbox |
||||
|
class="handle-button" |
||||
|
@click.native="setScene"> |
||||
|
<img |
||||
|
class="handle-button-icon" |
||||
|
src="@/assets/img/scene_set.png" > |
||||
|
<div class="handle-button-name">管理</div> |
||||
|
</flexbox> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
// import crmTypeModel from '@/views/ux/model/crmTypeModel' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { crmSceneIndex } from '@/api/ux/common' |
||||
|
|
||||
|
export default { |
||||
|
name: 'SceneList', // 客户管理下 重要提醒 回款计划提醒 |
||||
|
components: {}, |
||||
|
props: { |
||||
|
/** 没有值就是全部类型 有值就是当个类型 */ |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 场景列表 |
||||
|
sceneSelectId: -1, |
||||
|
sceneList: [] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// ...mapGetters(['crm']) |
||||
|
}, |
||||
|
watch: {}, |
||||
|
mounted() { |
||||
|
this.getSceneList() |
||||
|
}, |
||||
|
methods: { |
||||
|
getSceneList() { |
||||
|
crmSceneIndex() |
||||
|
.then(res => { |
||||
|
const defaultScenes = res.data.filter(function(item, index) { |
||||
|
return item.isDefault === 1 |
||||
|
}) |
||||
|
|
||||
|
if (defaultScenes && defaultScenes.length > 0) { |
||||
|
const defaultScene = defaultScenes[0] |
||||
|
this.sceneSelectId = defaultScene.sceneId |
||||
|
this.$emit('scene', { |
||||
|
id: defaultScene.sceneId, |
||||
|
name: defaultScene.name, |
||||
|
bydata: defaultScene.bydata || '' |
||||
|
}) |
||||
|
} else { |
||||
|
this.sceneSelectId = '' |
||||
|
this.$emit('scene', { id: '', name: '', bydata: '' }) |
||||
|
} |
||||
|
|
||||
|
this.sceneList = res.data |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.$emit('scene', { id: '', name: '', bydata: '' }) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 选择场景、 |
||||
|
selectScene(item, index) { |
||||
|
this.sceneSelectId = item.sceneId |
||||
|
this.$emit('scene', { |
||||
|
id: item.sceneId, |
||||
|
name: item.name, |
||||
|
bydata: item.bydata |
||||
|
}) |
||||
|
this.$emit('hidden-scene') |
||||
|
}, |
||||
|
// 添加场景 |
||||
|
addScene() { |
||||
|
this.$emit('scene-handle', { type: 'add' }) |
||||
|
}, |
||||
|
// 设置场景 |
||||
|
setScene() { |
||||
|
this.$emit('scene-handle', { type: 'set' }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.scene-container { |
||||
|
position: relative; |
||||
|
width: 150px; |
||||
|
} |
||||
|
|
||||
|
.scene-list { |
||||
|
max-height: 240px; |
||||
|
overflow-y: auto; |
||||
|
font-size: 12px; |
||||
|
.scene-list-item { |
||||
|
color: #333; |
||||
|
padding: 10px 15px; |
||||
|
cursor: pointer; |
||||
|
background-color: white; |
||||
|
} |
||||
|
.scene-list-item:hover { |
||||
|
background-color: #1682e6; |
||||
|
color:#f7f8fa; |
||||
|
} |
||||
|
|
||||
|
.scene-list-item-select { |
||||
|
color: #f7f8fa; |
||||
|
background-color: #1682e6; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.handle-button { |
||||
|
padding: 10px 20px; |
||||
|
cursor: pointer; |
||||
|
.handle-button-icon { |
||||
|
display: block; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.handle-button-name { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
.handle-button:hover { |
||||
|
color: #3E84E9; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,648 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:visible.sync="visible" |
||||
|
:append-to-body="true" |
||||
|
title="场景管理" |
||||
|
width="700px" |
||||
|
@close="handleCancel"> |
||||
|
<div class="scene-name">您可通过拖拽管理标签</div> |
||||
|
<flexbox class="scene-list"> |
||||
|
<div class="scene-list-box"> |
||||
|
<flexbox class="scene-list-head"> |
||||
|
<el-checkbox |
||||
|
:indeterminate="isleftIndeterminate" |
||||
|
v-model="checkleftAll" |
||||
|
@change="handleleftCheckAllChange"/> |
||||
|
<div class="scene-list-head-name">显示的标签</div> |
||||
|
<div class="scene-list-head-detail">{{ leftCheckItems.length + '/' + checkedLeftData.length }}</div> |
||||
|
</flexbox> |
||||
|
<div class="scene-list-body"> |
||||
|
<flexbox |
||||
|
v-for="(item, index) in checkedLeftData" |
||||
|
v-if="item.isSystem == 1" |
||||
|
:key="index" |
||||
|
class="list-item"> |
||||
|
<div |
||||
|
:class="{'default-mark-active': item.sceneId == defaultId}" |
||||
|
class="default-mark"/> |
||||
|
<el-checkbox |
||||
|
v-model="item.check" |
||||
|
:disabled="true" |
||||
|
class="list-item-check" |
||||
|
@change="leftCheckItemChange"/> |
||||
|
<div class="list-item-name">{{ item.name }}</div> |
||||
|
<div class="list-item-handle"> |
||||
|
<el-dropdown |
||||
|
trigger="click" |
||||
|
@command="defaultHandle"> |
||||
|
<i |
||||
|
class="el-icon-arrow-down" |
||||
|
@click="itemHandle('default', item, index)"/> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item>设置为默认标签</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
</flexbox> |
||||
|
<draggable |
||||
|
v-model="checkedLeftData" |
||||
|
:move="leftMove" |
||||
|
:options="{group: 'list',forceFallback:false, fallbackClass:'draggingStyle'}" |
||||
|
style="min-height: 100px;" |
||||
|
@end="leftMoveEnd"> |
||||
|
<flexbox |
||||
|
v-for="(item, index) in checkedLeftData" |
||||
|
v-if="item.isSystem != 1" |
||||
|
:key="index" |
||||
|
class="list-item"> |
||||
|
<div |
||||
|
:class="{'default-mark-active': item.sceneId == defaultId}" |
||||
|
class="default-mark"/> |
||||
|
<el-checkbox |
||||
|
v-model="item.check" |
||||
|
class="list-item-check" |
||||
|
@change="leftCheckItemChange"/> |
||||
|
<div class="list-item-name">{{ item.name }}</div> |
||||
|
<div class="list-item-handle"> |
||||
|
<i |
||||
|
class="el-icon-edit" |
||||
|
@click="itemHandle('edit', item, index)"/> |
||||
|
<i |
||||
|
class="el-icon-delete" |
||||
|
@click="itemHandle('delete', item, index)"/> |
||||
|
<el-dropdown @command="defaultHandle"> |
||||
|
<i |
||||
|
class="el-icon-arrow-down" |
||||
|
@click="itemHandle('default', item, index)"/> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item>设置为默认标签</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
</flexbox> |
||||
|
</draggable> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="scene-middle-list"> |
||||
|
<el-button |
||||
|
:class="{'scene-middle-button-select':rightCheckItems.length > 0}" |
||||
|
:disabled="rightCheckItems.length == 0" |
||||
|
class="scene-middle-left-button" |
||||
|
@click="changePositon('left')"> |
||||
|
<i class="el-icon-arrow-left scene-middle-icon"/> |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
:class="{'scene-middle-button-select':leftCheckItems.length > 0}" |
||||
|
:disabled="leftCheckItems.length == 0" |
||||
|
class="scene-middle-right-button" |
||||
|
@click="changePositon('right')"> |
||||
|
<i class="el-icon-arrow-right scene-middle-icon"/> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<div class="scene-list-box"> |
||||
|
<flexbox class="scene-list-head"> |
||||
|
<el-checkbox |
||||
|
:indeterminate="isrightIndeterminate" |
||||
|
v-model="checkrightAll" |
||||
|
@change="handlerightCheckAllChange"/> |
||||
|
<div class="scene-list-head-name">隐藏的标签</div> |
||||
|
<div class="scene-list-head-detail">{{ rightCheckItems.length + '/' + checkedRightData.length }}</div> |
||||
|
</flexbox> |
||||
|
<div class="scene-list-body"> |
||||
|
<draggable |
||||
|
v-model="checkedRightData" |
||||
|
:move="rightMove" |
||||
|
:options="{group: 'list',forceFallback:false, fallbackClass:'draggingStyle'}" |
||||
|
style="min-height: 100px;" |
||||
|
@end="rightMoveEnd"> |
||||
|
<flexbox |
||||
|
v-for="(item, index) in checkedRightData" |
||||
|
:key="index" |
||||
|
class="list-item"> |
||||
|
<el-checkbox |
||||
|
v-model="item.check" |
||||
|
style="margin-left:9px;" |
||||
|
class="list-item-check" |
||||
|
@change="rightCheckItemChange"/> |
||||
|
<div class="list-item-name">{{ item.name }}</div> |
||||
|
</flexbox> |
||||
|
</draggable> |
||||
|
</div> |
||||
|
</div> |
||||
|
</flexbox> |
||||
|
<div class="handle-bar"> |
||||
|
<div |
||||
|
class="handle-bar-add" |
||||
|
@click="addAndEditScene('add',{})">+ 新建场景</div> |
||||
|
<div class="handle-bar-save"> |
||||
|
<el-button @click.native="handleCancel">取消</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
@click.native="handleConfirm">保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<scene-create |
||||
|
:field-list="fieldList" |
||||
|
:crm-type="crmType" |
||||
|
:dialog-visible.sync="showCreateScene" |
||||
|
:obj="filterObj" |
||||
|
:name="filterName" |
||||
|
:edit_id="filterEditId" |
||||
|
:is-default="filterDefault" |
||||
|
@saveSuccess="getSceneList"/> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
// import crmTypeModel from '@/views/ux/model/crmTypeModel' |
||||
|
// import { |
||||
|
// crmSceneSetIndex, |
||||
|
// crmSceneSort, |
||||
|
// crmSceneDefaults, |
||||
|
// crmSceneDelete, |
||||
|
// filterIndexfields |
||||
|
// } from '@/api/customermanagement/common' |
||||
|
import draggable from 'vuedraggable' |
||||
|
import SceneCreate from './SceneCreate' // 新建编辑场景 |
||||
|
|
||||
|
export default { |
||||
|
name: 'SceneSet', // 场景 设置 |
||||
|
components: { |
||||
|
draggable, |
||||
|
SceneCreate |
||||
|
}, |
||||
|
props: { |
||||
|
dialogVisible: { |
||||
|
type: Boolean, |
||||
|
required: true, |
||||
|
default: false |
||||
|
}, |
||||
|
/** 没有值就是全部类型 有值就是当个类型 */ |
||||
|
crmType: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
defaultId: '', // 默认场景id |
||||
|
visible: false, // 控制展示 |
||||
|
isleftIndeterminate: false, // 标注头部是多选框效果 |
||||
|
checkleftAll: false, // 关联全选操作多选框 |
||||
|
|
||||
|
checkedLeftData: [], // 数据源 |
||||
|
leftCheckItems: [], // 选择的数据源 |
||||
|
|
||||
|
isrightIndeterminate: false, |
||||
|
checkrightAll: false, |
||||
|
|
||||
|
checkedRightData: [], |
||||
|
rightCheckItems: [], |
||||
|
|
||||
|
moveItem: {}, // 移动中的item |
||||
|
handlDefaultItem: {}, // 设置默认的中间item |
||||
|
|
||||
|
/** 添加 编辑 场景 */ |
||||
|
showCreateScene: false, // 展示场景添加 |
||||
|
fieldList: [], |
||||
|
filterObj: { form: [] }, // 筛选确定数据 |
||||
|
filterName: '', |
||||
|
filterDefault: false, |
||||
|
filterEditId: '' // 编辑id |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
dialogVisible: { |
||||
|
handler(val) { |
||||
|
this.visible = val |
||||
|
if (val) { |
||||
|
this.getSceneList() |
||||
|
} |
||||
|
}, |
||||
|
deep: true, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
mounted() {}, |
||||
|
methods: { |
||||
|
getSceneList() { |
||||
|
// crmSceneSetIndex({ |
||||
|
// type: crmTypeModel[this.crmType] |
||||
|
// }) |
||||
|
// .then(res => { |
||||
|
// this.checkedLeftData = res.data.value.map(function(item, index) { |
||||
|
// item.check = false |
||||
|
// return item |
||||
|
// }) |
||||
|
// this.checkedRightData = res.data.hide_value.map(function( |
||||
|
// item, |
||||
|
// index |
||||
|
// ) { |
||||
|
// item.check = false |
||||
|
// return item |
||||
|
// }) |
||||
|
// var defaultScene = this.checkedLeftData.filter(function(item, index) { |
||||
|
// return item.isDefault == 1 |
||||
|
// }) |
||||
|
// // 如果有默认场景 |
||||
|
// if (defaultScene && defaultScene.length > 0) { |
||||
|
// this.defaultId = defaultScene[0].sceneId |
||||
|
// } else { |
||||
|
// this.defaultId = '' |
||||
|
// } |
||||
|
// }) |
||||
|
// .catch(() => {}) |
||||
|
}, |
||||
|
/** |
||||
|
* 确定选择 |
||||
|
*/ |
||||
|
handleConfirm() { |
||||
|
// 如果选择默认的 不包含在左侧列表 重置为没有默认 |
||||
|
var self = this |
||||
|
var leftTemps = this.checkedLeftData.filter(function(item, index) { |
||||
|
return item.sceneId == self.defaultId |
||||
|
}) |
||||
|
if (leftTemps.length == 0) { |
||||
|
this.defaultId = '' |
||||
|
} |
||||
|
// crmSceneSort({ |
||||
|
// type: crmTypeModel[this.crmType], |
||||
|
// noHideIds: this.checkedLeftData |
||||
|
// .map(function(item, index, array) { |
||||
|
// return item.sceneId |
||||
|
// }) |
||||
|
// .join(','), |
||||
|
// hideIds: this.checkedRightData |
||||
|
// .map(function(item, index, array) { |
||||
|
// return item.sceneId |
||||
|
// }) |
||||
|
// .join(',') |
||||
|
// }) |
||||
|
// .then(res => { |
||||
|
// this.$message({ |
||||
|
// type: 'success', |
||||
|
// message: '操作成功' |
||||
|
// }) |
||||
|
// this.handleCancel() |
||||
|
// this.$emit('save-success') |
||||
|
// }) |
||||
|
// .catch(() => {}) |
||||
|
}, |
||||
|
/** 事项操作 */ |
||||
|
itemHandle(type, item, index) { |
||||
|
if (type == 'edit') { |
||||
|
this.addAndEditScene('edit', item) |
||||
|
} else if (type == 'delete') { |
||||
|
this.$confirm('您确定要删除这一条数据吗?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
.then(() => { |
||||
|
crmSceneDelete({ |
||||
|
sceneId: item.sceneId |
||||
|
}) |
||||
|
.then(res => { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功' |
||||
|
}) |
||||
|
this.checkedLeftData.splice(index, 1) |
||||
|
this.leftCheckItemChange() |
||||
|
this.$emit('save-success') |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.$message({ |
||||
|
type: 'info', |
||||
|
message: '已取消删除' |
||||
|
}) |
||||
|
}) |
||||
|
} else if (type == 'default') { |
||||
|
this.handlDefaultItem = item |
||||
|
} |
||||
|
}, |
||||
|
/** 操作默认 */ |
||||
|
defaultHandle() { |
||||
|
crmSceneDefaults({ |
||||
|
sceneId: this.handlDefaultItem.sceneId |
||||
|
}) |
||||
|
.then(res => { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '操作成功' |
||||
|
}) |
||||
|
this.defaultId = this.handlDefaultItem.sceneId |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
}, |
||||
|
/** 添加编辑场景 */ |
||||
|
addAndEditScene(type, data) { |
||||
|
// filterIndexfields({ |
||||
|
// label: crmTypeModel[this.crmType] |
||||
|
// }) |
||||
|
// .then(res => { |
||||
|
// this.fieldList = res.data |
||||
|
// if (type == 'edit') { |
||||
|
// this.filterObj = { form: [], obj: data.data } |
||||
|
// this.filterName = data.name |
||||
|
// this.filterDefault = data.isDefault == 1 |
||||
|
// this.filterEditId = data.sceneId.toString() |
||||
|
// } else { |
||||
|
// this.filterObj = { form: [] } |
||||
|
// this.filterEditId = '' |
||||
|
// this.filterName = '' |
||||
|
// this.filterDefault = false |
||||
|
// } |
||||
|
// this.showCreateScene = true |
||||
|
// }) |
||||
|
// .catch(() => {}) |
||||
|
}, |
||||
|
/** |
||||
|
* 取消选择 |
||||
|
*/ |
||||
|
handleCancel() { |
||||
|
this.visible = false |
||||
|
this.$emit('update:dialogVisible', false) |
||||
|
}, |
||||
|
/** 拖拽操作 */ |
||||
|
rightMoveEnd(evt) { |
||||
|
this.moveItem.check = false |
||||
|
this.leftCheckItemChange() |
||||
|
this.rightCheckItemChange() |
||||
|
}, |
||||
|
rightMove(obj) { |
||||
|
this.moveItem = obj.draggedContext.element |
||||
|
}, |
||||
|
leftMoveEnd(evt) { |
||||
|
this.moveItem.check = false |
||||
|
this.leftCheckItemChange() |
||||
|
this.rightCheckItemChange() |
||||
|
}, |
||||
|
leftMove(obj) { |
||||
|
this.moveItem = obj.draggedContext.element |
||||
|
}, |
||||
|
// 选择全部 |
||||
|
handleleftCheckAllChange(value) { |
||||
|
if (value) { |
||||
|
this.isleftIndeterminate = false |
||||
|
} |
||||
|
this.checkedLeftData = this.checkedLeftData.filter(function( |
||||
|
item, |
||||
|
index, |
||||
|
array |
||||
|
) { |
||||
|
item.check = value |
||||
|
return item |
||||
|
}) |
||||
|
this.leftCheckItems = value ? this.checkedLeftData : [] |
||||
|
}, |
||||
|
leftCheckItemChange() { |
||||
|
this.leftCheckItems = this.checkedLeftData.filter(function( |
||||
|
item, |
||||
|
index, |
||||
|
array |
||||
|
) { |
||||
|
return item.check == true |
||||
|
}) |
||||
|
if (this.leftCheckItems.length > 0) { |
||||
|
if (this.leftCheckItems.length == this.checkedLeftData.length) { |
||||
|
this.checkleftAll = true |
||||
|
this.isleftIndeterminate = false |
||||
|
} else { |
||||
|
this.checkleftAll = false |
||||
|
this.isleftIndeterminate = true |
||||
|
} |
||||
|
} else { |
||||
|
this.checkleftAll = false |
||||
|
this.isleftIndeterminate = false |
||||
|
} |
||||
|
}, |
||||
|
// 选择全部 |
||||
|
handlerightCheckAllChange(value) { |
||||
|
if (value) { |
||||
|
this.isrightIndeterminate = false |
||||
|
} |
||||
|
this.checkedRightData = this.checkedRightData.filter(function( |
||||
|
item, |
||||
|
index, |
||||
|
array |
||||
|
) { |
||||
|
item.check = value |
||||
|
return item |
||||
|
}) |
||||
|
this.rightCheckItems = value ? this.checkedRightData : [] |
||||
|
}, |
||||
|
rightCheckItemChange() { |
||||
|
this.rightCheckItems = this.checkedRightData.filter(function( |
||||
|
item, |
||||
|
index, |
||||
|
array |
||||
|
) { |
||||
|
return item.check == true |
||||
|
}) |
||||
|
if (this.rightCheckItems.length > 0) { |
||||
|
if (this.rightCheckItems.length == this.checkedRightData.length) { |
||||
|
this.checkrightAll = true |
||||
|
this.isrightIndeterminate = false |
||||
|
} else { |
||||
|
this.checkrightAll = false |
||||
|
this.isrightIndeterminate = true |
||||
|
} |
||||
|
} else { |
||||
|
this.checkrightAll = false |
||||
|
this.isrightIndeterminate = false |
||||
|
} |
||||
|
}, |
||||
|
// 按钮操作 |
||||
|
changePositon(type) { |
||||
|
var self = this |
||||
|
// 从右往左 |
||||
|
if (type == 'left') { |
||||
|
this.checkedRightData = this.checkedRightData.filter(function( |
||||
|
item, |
||||
|
index, |
||||
|
array |
||||
|
) { |
||||
|
var remove = false |
||||
|
self.rightCheckItems.forEach(function(element, index) { |
||||
|
if (item.sceneId == element.sceneId) { |
||||
|
remove = true |
||||
|
} |
||||
|
}) |
||||
|
return !remove |
||||
|
}) |
||||
|
|
||||
|
this.rightCheckItems.forEach(function(element, index) { |
||||
|
element.check = false |
||||
|
self.checkedLeftData.push(element) |
||||
|
}) |
||||
|
|
||||
|
this.rightCheckItems = [] |
||||
|
this.isrightIndeterminate = false |
||||
|
this.checkrightAll = false |
||||
|
|
||||
|
// 刷新左侧效果 |
||||
|
this.leftCheckItemChange() |
||||
|
this.rightCheckItemChange() |
||||
|
} else { |
||||
|
this.checkedLeftData = this.checkedLeftData.filter(function( |
||||
|
item, |
||||
|
index, |
||||
|
array |
||||
|
) { |
||||
|
var remove = false |
||||
|
self.leftCheckItems.forEach(function(element, index) { |
||||
|
if (item.sceneId == element.sceneId) { |
||||
|
remove = true |
||||
|
} |
||||
|
}) |
||||
|
return !remove |
||||
|
}) |
||||
|
|
||||
|
this.leftCheckItems.forEach(function(element, index) { |
||||
|
element.check = false |
||||
|
self.checkedRightData.push(element) |
||||
|
}) |
||||
|
|
||||
|
this.leftCheckItems = [] |
||||
|
this.isleftIndeterminate = false |
||||
|
this.checkleftAll = false |
||||
|
|
||||
|
// 刷新右侧效果 |
||||
|
this.leftCheckItemChange() |
||||
|
this.rightCheckItemChange() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.scene-name { |
||||
|
font-size: 12px; |
||||
|
padding-bottom: 5px; |
||||
|
color: #aaa; |
||||
|
} |
||||
|
|
||||
|
.default-mark { |
||||
|
width: 4px; |
||||
|
height: 4px; |
||||
|
border-radius: 2px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
.default-mark-active { |
||||
|
background-color:#3E84E9; |
||||
|
} |
||||
|
|
||||
|
.scene-list { |
||||
|
.scene-list-box { |
||||
|
flex: 1; |
||||
|
border: 1px solid #3E84E9; |
||||
|
border-radius: 2px; |
||||
|
height: 300px; |
||||
|
position: relative; |
||||
|
padding: 15px; |
||||
|
} |
||||
|
.scene-middle-list { |
||||
|
width: 50px; |
||||
|
text-align: center; |
||||
|
button { |
||||
|
border: 1px solid #cccccc; |
||||
|
width: 34px; |
||||
|
height: 34px; |
||||
|
border-radius: 17px; |
||||
|
background-color: #f5f7fa; |
||||
|
} |
||||
|
.scene-middle-icon { |
||||
|
color: #cccccc; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.scene-middle-left-button { |
||||
|
} |
||||
|
.scene-middle-right-button { |
||||
|
margin-top: 15px; |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
|
||||
|
.scene-middle-button-select { |
||||
|
border: 1px solid #3E84E9 !important; |
||||
|
background-color: #3E84E9 !important; |
||||
|
.scene-middle-icon { |
||||
|
color: white !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.scene-list-head { |
||||
|
padding-bottom: 15px; |
||||
|
padding-left: 9px; |
||||
|
border-bottom: 1px dashed #3E84E9; |
||||
|
font-size: 13px; |
||||
|
.scene-list-head-name { |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
margin: 0 8px; |
||||
|
} |
||||
|
|
||||
|
.scene-list-head-detail { |
||||
|
color: #aaa; |
||||
|
} |
||||
|
} |
||||
|
.scene-list-body { |
||||
|
padding: 5px 0; |
||||
|
height: 240px; |
||||
|
position: relative; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.list-item { |
||||
|
padding: 5px 0; |
||||
|
cursor: pointer; |
||||
|
.list-item-check { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.list-item-name { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
} |
||||
|
.list-item-handle { |
||||
|
flex-shrink: 0; |
||||
|
display: none; |
||||
|
i { |
||||
|
color: #aaa; |
||||
|
font-size: 12px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
i:hover { |
||||
|
color: #3E84E9; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.list-item:hover { |
||||
|
.list-item-handle { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.handle-bar { |
||||
|
font-size: 12px; |
||||
|
.handle-bar-add { |
||||
|
cursor: pointer; |
||||
|
color: #3e84e9; |
||||
|
padding: 20px 10px; |
||||
|
} |
||||
|
.handle-bar-save { |
||||
|
position: relative; |
||||
|
height: 30px; |
||||
|
button { |
||||
|
float: right; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,73 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-dialogDrag |
||||
|
:visible.sync="visible" |
||||
|
:close-on-click-modal="false" |
||||
|
title="详细信息" |
||||
|
width="900px" |
||||
|
height="300px" |
||||
|
:append-to-body="true"> |
||||
|
<div |
||||
|
slot="footer" |
||||
|
class="dialog-footer"> |
||||
|
<crm-base-info |
||||
|
:is="tabName" |
||||
|
:detail="data" |
||||
|
:id="id" |
||||
|
:crm-type="crmType"> |
||||
|
</crm-base-info> |
||||
|
<el-button >取 消</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
>确 定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CRMBaseInfo from '../CRMBaseInfo' // 基本信息 |
||||
|
|
||||
|
export default { |
||||
|
name: 'Index', |
||||
|
components: { |
||||
|
CRMBaseInfo |
||||
|
}, |
||||
|
props: { |
||||
|
dialogVisible: { |
||||
|
type: Boolean, |
||||
|
required: true, |
||||
|
default: false |
||||
|
}, |
||||
|
detailData: {}, |
||||
|
}, |
||||
|
data() { |
||||
|
return{ |
||||
|
visible: false, |
||||
|
data:{}, |
||||
|
tabName:'', |
||||
|
id: [String, Number], |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
dialogVisible: { |
||||
|
handler(val) { |
||||
|
if (val) { |
||||
|
|
||||
|
} |
||||
|
this.visible = this.dialogVisible |
||||
|
}, |
||||
|
}, |
||||
|
detailData:{ |
||||
|
handler(val) { |
||||
|
this.data=this.detailData; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,39 @@ |
|||||
|
//客户相关详情 头部类似布局 |
||||
|
.el-tabs /deep/ .el-tabs__nav-wrap::after { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
.el-tabs /deep/ .el-tabs__header { |
||||
|
background-color: #F5F6F9; |
||||
|
padding: 0 17px; |
||||
|
margin: 0 0 15px !important; |
||||
|
} |
||||
|
|
||||
|
.el-tabs /deep/ .el-tabs__item { |
||||
|
font-size: 13px !important; |
||||
|
height: 40px !important; |
||||
|
line-height: 40px !important; |
||||
|
} |
||||
|
|
||||
|
.d-container { |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
/** 让element 查询到的标签 */ |
||||
|
.t-loading-content { |
||||
|
position: relative; |
||||
|
overflow-y: scroll; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
/** 审核信息 */ |
||||
|
.examine-info { |
||||
|
padding: 0 17px 17px 17px; |
||||
|
|
||||
|
.examine-info-border { |
||||
|
border: 1px solid #e6e6e6; |
||||
|
border-radius: 3px; |
||||
|
padding: 17px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,111 @@ |
|||||
|
.cr-body-content { |
||||
|
margin: 2px ; |
||||
|
position: relative; |
||||
|
background-color: white; |
||||
|
overflow-x: auto; |
||||
|
//border-bottom: 1px solid $xr-border-line-color; |
||||
|
} |
||||
|
.el-table .cell { |
||||
|
white-space: pre-wrap; |
||||
|
word-wrap: break-word; |
||||
|
} |
||||
|
.content-header { |
||||
|
position: relative; |
||||
|
padding: 10px 20px; |
||||
|
.search-container { |
||||
|
margin: 0 20px; |
||||
|
width: 200px; |
||||
|
} |
||||
|
.create-button { |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
top: 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right-container { |
||||
|
margin-right: -10px; |
||||
|
float: right; |
||||
|
margin: 2px; |
||||
|
position: relative; |
||||
|
.right-item { |
||||
|
float: left; |
||||
|
margin-right: 10px; |
||||
|
padding: 8px 10px; |
||||
|
font-size: 13px; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
|
||||
|
.right-more-item { |
||||
|
cursor: pointer; |
||||
|
border: 1px solid #dcdfe6; |
||||
|
background-color: white; |
||||
|
font-size: 13px; |
||||
|
color: #777; |
||||
|
padding: 0 12px; |
||||
|
border-radius: 2px; |
||||
|
height: 31px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-input { |
||||
|
display: inline-block; |
||||
|
|
||||
|
width: 50%; |
||||
|
|
||||
|
input { |
||||
|
background: transparent; |
||||
|
border: 0px; |
||||
|
-webkit-appearance: none; |
||||
|
border-radius: 0px; |
||||
|
padding: 12px; |
||||
|
height: 47px; |
||||
|
caret-color: #1a1818; |
||||
|
|
||||
|
&:-webkit-autofill { |
||||
|
box-shadow: 0 0 0px 1000px #e5e5e5 inset !important; |
||||
|
-webkit-text-fill-color: #454545 !important; |
||||
|
color:#454545 !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//表尾 上一页按钮 |
||||
|
.table-footer { |
||||
|
padding: 1px 20px; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ thead th { |
||||
|
font-weight: 400; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ tbody tr td { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ thead .el-checkbox { |
||||
|
display: inline; |
||||
|
} |
||||
|
|
||||
|
body .el-table th.gutter { |
||||
|
display: table-cell !important; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ .el-table__body-wrapper { |
||||
|
height: calc(100% - 58px) !important; |
||||
|
} |
||||
|
|
||||
|
.el-dropdown-link { |
||||
|
cursor: pointer; |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
.el-icon-arrow-down { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.demonstration { |
||||
|
display: block; |
||||
|
color: #8492a6; |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
@ -0,0 +1,9 @@ |
|||||
|
|
||||
|
/** 客户管理详情页面的 css 侧滑进入的详情 */ |
||||
|
.d-view { |
||||
|
position: fixed; |
||||
|
width: 60%; |
||||
|
top: 45px; |
||||
|
bottom: 0px; |
||||
|
right: 0px; |
||||
|
} |
||||
@ -0,0 +1,131 @@ |
|||||
|
/** 附件 */ |
||||
|
.f-container { |
||||
|
padding: 0 17px; |
||||
|
} |
||||
|
.f-item { |
||||
|
padding: 3px 0; |
||||
|
height: 35px; |
||||
|
.f-img { |
||||
|
position: block; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
padding: 0 1px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.f-name { |
||||
|
color: #666; |
||||
|
font-size: 12px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
.xh-files-cont { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
border-radius: 3px; |
||||
|
width: 100%; |
||||
|
border: 1px solid #ddd; |
||||
|
padding: 3.5px 5px; |
||||
|
margin: 3px; |
||||
|
line-height: 15px; |
||||
|
} |
||||
|
|
||||
|
.xh-files-cont.is_disabled { |
||||
|
background-color: #f5f7fa; |
||||
|
border-color: #e4e7ed; |
||||
|
cursor: not-allowed; |
||||
|
.f-name { |
||||
|
background-color: #f0f4f8ea; |
||||
|
color: #c0c4cc; |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.xh-files-cont.is_valid:hover { |
||||
|
border-color: #c0c4cc; |
||||
|
} |
||||
|
|
||||
|
.f-header { |
||||
|
cursor: pointer; |
||||
|
padding: 5px 0 5px; |
||||
|
.f-logo { |
||||
|
position: block; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.f-name { |
||||
|
color: #3e84e9; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
.f-header.is_disabled { |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.f-body { |
||||
|
.f-item { |
||||
|
padding: 3px 0; |
||||
|
height: 25px; |
||||
|
.f-img { |
||||
|
position: block; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
padding: 0 1px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.f-name { |
||||
|
color: #666; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.close-button { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bar-iput { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
height: 0; |
||||
|
width: 0; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.b-cont { |
||||
|
position: relative; |
||||
|
padding: 0 50px 20px 20px; |
||||
|
} |
||||
|
|
||||
|
.b-cells { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
.b-cell { |
||||
|
padding: 0 10px; |
||||
|
.b-cell-b { |
||||
|
width: auto; |
||||
|
padding: 8px; |
||||
|
.b-cell-name { |
||||
|
width: 100px; |
||||
|
margin-top: 13px; |
||||
|
margin-right: -5px; |
||||
|
font-size: 13px; |
||||
|
flex-shrink: 0; |
||||
|
color: #777; |
||||
|
} |
||||
|
.b-cell-value { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
white-space: pre-wrap; |
||||
|
word-wrap: break-word; |
||||
|
} |
||||
|
.b-cell-foot { |
||||
|
flex-shrink: 0; |
||||
|
display: block; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,170 @@ |
|||||
|
/** 跟进记录相关的 日志 审批任务 日程 项目 公共css */ |
||||
|
.fl-c { |
||||
|
background-color: white; |
||||
|
padding: 10px 20px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
/** 头部布局 名字 头像 */ |
||||
|
.fl-h { |
||||
|
.fl-h-img { |
||||
|
display: block; |
||||
|
width: 34px; |
||||
|
height: 34px; |
||||
|
border-radius: 17px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.fl-h-b { |
||||
|
flex: 1; |
||||
|
|
||||
|
.fl-h-name { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.fl-h-time { |
||||
|
font-size: 12px; |
||||
|
color: #999; |
||||
|
margin-top: 3px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 头部 右侧 布局*/ |
||||
|
.fl-h-handle { |
||||
|
width: auto; |
||||
|
|
||||
|
.fl-h-handle-name { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fl-h-mark { |
||||
|
width: auto; |
||||
|
|
||||
|
.fl-h-mark-img { |
||||
|
display: block; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.fl-h-mark-name { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 内容区域 */ |
||||
|
.fl-b { |
||||
|
margin: 20px 0 0 40px; |
||||
|
|
||||
|
.fl-b-content { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.fl-b-images { |
||||
|
margin-top: 5px; |
||||
|
width: 310px; |
||||
|
|
||||
|
.fl-b-img-item { |
||||
|
width: 98px; |
||||
|
height: 98px; |
||||
|
display: inline-block; |
||||
|
margin: 0 4px 4px 0; |
||||
|
background-size: contain; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fl-b-other { |
||||
|
margin: 8px 0; |
||||
|
|
||||
|
.fl-b-other-name { |
||||
|
margin: 10px 0; |
||||
|
color: #666; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fl-c:before { |
||||
|
content: " "; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
height: 1px; |
||||
|
border-top: 1px solid #e5e5e5; |
||||
|
color: #e5e5e5; |
||||
|
-webkit-transform-origin: 0 0; |
||||
|
transform-origin: 0 0; |
||||
|
-webkit-transform: scaleY(0.5); |
||||
|
transform: scaleY(0.5); |
||||
|
left: 15px; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.fl-c:first-child:before { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/** 附件 */ |
||||
|
.fl-b-files { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
/** 关联附件 联系人 客户 行布局 */ |
||||
|
.cell { |
||||
|
padding: 8px; |
||||
|
background-color: #F5F7FA; |
||||
|
border-radius: 2px; |
||||
|
position: relative; |
||||
|
|
||||
|
.cell-head { |
||||
|
display: block; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.cell-body { |
||||
|
flex: 1; |
||||
|
color: #333; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.cell-foot { |
||||
|
display: block; |
||||
|
width: 20px; |
||||
|
padding: 0 4px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cell:before { |
||||
|
content: " "; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
height: 1px; |
||||
|
border-top: 1px solid #e5e5e5; |
||||
|
color: #e5e5e5; |
||||
|
-webkit-transform-origin: 0 0; |
||||
|
transform-origin: 0 0; |
||||
|
-webkit-transform: scaleY(0.5); |
||||
|
transform: scaleY(0.5); |
||||
|
left: 30px; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.cell:first-child:before { |
||||
|
display: none; |
||||
|
} |
||||
@ -0,0 +1,86 @@ |
|||||
|
// 跟进记录效果 |
||||
|
.f-container { |
||||
|
padding: 0 17px; |
||||
|
} |
||||
|
|
||||
|
/** 发布行css */ |
||||
|
.se-section { |
||||
|
position: relative; |
||||
|
margin: 5px 0; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
|
||||
|
.se-name { |
||||
|
font-size: 12px; |
||||
|
color: #333333; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.se-select { |
||||
|
border: 1px solid #dcdfe6; |
||||
|
font-size: 12px; |
||||
|
color: #606266; |
||||
|
padding: 0 8px; |
||||
|
border-radius: 2px; |
||||
|
font-weight: 500; |
||||
|
height: 25px; |
||||
|
|
||||
|
.se-select-name { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.se-datepicker { |
||||
|
font-size: 12px; |
||||
|
width: 200px; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.se-send { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
padding: 5px 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-date-editor /deep/ .el-input__inner { |
||||
|
height: 25px; |
||||
|
line-height: 25px; |
||||
|
} |
||||
|
|
||||
|
.el-date-editor /deep/ .el-input__icon { |
||||
|
height: 25px; |
||||
|
line-height: 25px; |
||||
|
} |
||||
|
|
||||
|
.el-checkbox /deep/ .el-checkbox__label { |
||||
|
font-size: 12px; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.log-cont { |
||||
|
margin: 0px 0; |
||||
|
border: 1px solid #e6e6e6; |
||||
|
border-radius: 2px; |
||||
|
|
||||
|
.log-tabs-item { |
||||
|
font-size: 13px; |
||||
|
padding: 8px 15px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.log-tabs-item:hover { |
||||
|
color: #F18C70 !important; |
||||
|
} |
||||
|
|
||||
|
.log-tabs-line { |
||||
|
height: 10px; |
||||
|
background-color: #e6e6e6; |
||||
|
width: 2px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.log-items { |
||||
|
min-height: 400px; |
||||
|
position: relative; |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
/**客户下相关信息 table 效果 */ |
||||
|
.rc-cont { |
||||
|
position: relative; |
||||
|
padding: 0 20px 20px 20px; |
||||
|
.rc-head { |
||||
|
margin-bottom: 15px; |
||||
|
position: relative; |
||||
|
.rc-head-item { |
||||
|
font-size: 12px; |
||||
|
padding: 8px 5px; |
||||
|
border-radius: 2px; |
||||
|
margin-right: 20px; |
||||
|
margin-left: 0px; |
||||
|
} |
||||
|
.rc-head-item:first-child { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ thead th{ |
||||
|
background-color: #F5F5F5; |
||||
|
font-weight: 400; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ tbody{ |
||||
|
font-size: 13px; |
||||
|
} |
||||
@ -0,0 +1,129 @@ |
|||||
|
@import './detailview.scss'; |
||||
|
|
||||
|
.crm-container { |
||||
|
background-color: white; |
||||
|
border: 1px solid #E6E6E6; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
.el-table /deep/ thead th { |
||||
|
border-right: 1px solid #ebeef5; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ tbody tr td:nth-child(2){ |
||||
|
border-right: 1px solid #ebeef5; |
||||
|
} |
||||
|
|
||||
|
.b-bottom { |
||||
|
border-bottom: 1px solid #ebeef5; |
||||
|
} |
||||
|
*/ |
||||
|
|
||||
|
.el-table /deep/ thead th { |
||||
|
//background-color: #fafdff; |
||||
|
//font-weight: 400; |
||||
|
//border-color: #E6E6E6; |
||||
|
//color: #475059; |
||||
|
background-color: #61687a; |
||||
|
font-weight: 400; |
||||
|
border-color: #fff; |
||||
|
color: #fff; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.table-set { |
||||
|
width: 15px; |
||||
|
margin-top: 5px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.table-head-name { |
||||
|
font-size: 14px; |
||||
|
color: #475059; |
||||
|
line-height: 23px; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ thead .cell { |
||||
|
height: 23px; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ .el-table__row.current-row { |
||||
|
td:first-child::before { |
||||
|
content: ' '; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 2px; |
||||
|
background-color: #5383ED; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ tbody tr td { |
||||
|
border-top-color: transparent; |
||||
|
border-left-color: transparent; |
||||
|
border-right-color: transparent; |
||||
|
border-bottom-color: #E6E6E6; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ tbody tr td:nth-child(2) { |
||||
|
border-right: 1px solid #E6E6E6; |
||||
|
} |
||||
|
|
||||
|
.n-table--border { |
||||
|
border-color: #E6E6E6; |
||||
|
border-left-color: transparent; |
||||
|
border-right-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.n-table--border::after { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.p-contianer { |
||||
|
position: relative; |
||||
|
background-color: white; |
||||
|
height: 44px; |
||||
|
|
||||
|
.p-bar { |
||||
|
float: right; |
||||
|
margin: 5px 100px 0 0; |
||||
|
font-size: 14px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 列表状态 |
||||
|
.status_button { |
||||
|
padding: 1px 6px; |
||||
|
border: 1px solid #e6e6e6; |
||||
|
border-radius: 4px; |
||||
|
display: inline-block; |
||||
|
font-size: 12px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ .sort-caret.ascending { |
||||
|
top: 0px; |
||||
|
} |
||||
|
.el-table /deep/ .sort-caret.descending{ |
||||
|
bottom: 2px; |
||||
|
} |
||||
|
.el-table /deep/ .caret-wrapper { |
||||
|
height: 24px; |
||||
|
} |
||||
|
|
||||
|
.el-table /deep/ .warning-row { |
||||
|
background: #e3ecf3; |
||||
|
} |
||||
|
.el-table /deep/ .success-row { |
||||
|
background: #f4f8fd; |
||||
|
} |
||||
|
.el-table /deep/ thead { |
||||
|
background: #61687a; |
||||
|
} |
||||
|
.el-table /deep/ th.gutter { |
||||
|
display: table-cell!important; |
||||
|
} |
||||
Loading…
Reference in new issue