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