模板名称
区域设置
:disabled="isDis"
:multiple="true"
v-model="aModel.areaCodeArr"
filterable
clearable
:linline="false"
>
v-for="(o, i)in regionOptions"
:key="i"
:value="o.businessCityId"
:label="o.businessCityName"
/>
模板字段
v-for="oin templateFields"
:key="o.code"
:disabled="isDis || o.isMust"
@on-change="itemArrChange(o.code)"
:label="o.code"
:value="o.isMust">
{{ o.name }}
已选字段
:class="['dragItem', o.code ===dragEnter ?'dragEnter' :'']"
v-for="(o, i)in aModel.itemModelList"
:key="i +1"
:label="o.code"
:disabled="o.isMust">
{{ o.name }}
v-else
class="dragLabel"
draggable="true"
@dragstart="dragstart(o)"
@dragenter="dragenter(o)"
@dragend="dragend(o)">
{{ o.name }}
预览模板
stripe
:loading="tableLoading"
:columns="columns"
:data="tableData"
/>
import sortSvgfrom '@/assets/images/sort.png'
import resetPagefrom '@/mixins/resetPage'
import {save, read }from '@/storage'
import combinTablefrom '@/mixins/combinTable'
import {mapActions }from 'vuex'
import {customerCategorys, templateTypes }from '@/constants/rulesConfig'
export default {
name:'EditTemplate',
mixins: [combinTable, resetPage],
props: {},
data () {
return {
sortSvg,
subLoad:false,
aModel: {
id:'',
areaCode:'',
areaCodeArr: [],
areaName:'',
itemModelList: [],
itemName:'',
itemCode:'',
itemArr: [],
name:'',
typeCode:''
},
templateTypes,
customerCategorys,
btnModel: {
outputBtu: {
btuName:'导出',
postion:'right',
icon:'iconexport',
fontFamily:'business_ui',
type:'icon',
disabled:false
},
settingBtu: {
slot:true,
btuName:'表格设置', // 按钮名称
postion:'right', // 位置区域
icon:'iconconfiguration-form',
fontFamily:'business_ui',
hide:false,
type:'icon' // 按钮等级
}
},
columns: [],
tableData: [],
templateFields: [],
typeLoading:false,
tableLoading:false,
regionOptions: [],
templatetypeList: [],
queryModel: {
typeCode:''
},
records: {},
templateId:'',
templatePageType:'',
isDis:false,
dragItem: {
oldItem: {},
newItem: {},
isActive:undefined
},
dragEnter:''
}
},
activated () {
this.templateId =read('templateId')
this.templatePageType =read('templatePageType')
this.isDis =this.templatePageType ==='SEE'
this.getDefaultConfig()
},
deactivated () {
// this.setDefault()
},
watch: {
'aModel.itemArr': {
handler (list) {
if (this.templateFields.length) {
this.tableLoading =true
// 表头
this.columns = list.map((li, index) => {
let obj =this.templateFields.find(a => a.code === li)
if (obj) {
return {
title: obj.name,
key: obj.code,
tooltip:true,
width: obj.name.length *30,
fixed: (index ===0 ?'left' :'')
}
}else {
return {}
}
})
// 已选数据
this.aModel.itemModelList =this.columns
.map(a => {
return {name: a.title, code: a.key }
})
this.columns &&this.columns.length &&
this.formatTableColumns(this.columns, document.querySelector('.previewTitle').offsetWidth)
let obj = {}
// 填充表格
list.forEach(co => {
Object.defineProperty(obj, co, {
value:'',
writable:false
})
return obj
})
this.tableData =Array.from({length:8 },
(v, i) => {
obj.id = i
return obj
})
this.tableLoading =false
}
},
immediate:true
},
'aModel.name' (name) {
this.aModel.name = name.trim()
}
},
methods: {
...mapActions([
'billTemplateItemList', // 全量模板字段
'getUserAreaInfo',
'updateBillTemplate',
'addBillTemplate',
'getTemplateInfo'
]),
async getDefaultConfig () {
const {
templateId,
templatePageType,
getUserAreaInfo,
getTemplateInfo,
billTemplateItemList
} =this
// 模板字段
this.tableLoading =true
let bType =await billTemplateItemList({typeCode:read('typeCode') })
if (bType.data && bType.data.length) {
// 默认的全量字段
this.templateFields = bType.data
// 必选字段需要保存
let tempItemArr = [...this.aModel.itemArr]
bType.data
.filter(a => {
return a.isMust && !this.aModel.itemArr.some(c => c === a.code)
})
.forEach(a => {
tempItemArr.push(a.code)
})
this.aModel.itemArr = [...tempItemArr]
this.tableLoading =false
}
// 新建、编辑、复制、查看
if (templatePageType !=='ADD') {
if (templateId) {
let info =await getTemplateInfo(templateId)
Object.assign(this.aModel, this.$utils.pick(
info.data,
'id',
'areaCode',
'areaName',
'name',
'itemModelList',
'typeCode'
))
const { itemModelList, areaCode } = info.data
this.aModel.areaCodeArr = areaCode.split(',')
// 模板字段中存在该字段才加入到用户已选数据
this.aModel.itemArr = itemModelList
.filter(t =>this.templateFields.some(s => s.code === t.code))
.map(a => a.code)
// 复制当前模板则去掉id
if (templatePageType ==='COPY') {
this.aModel.name =this.aModel.name +'(1)'
delete this.aModel.id
}
}
}else {
for (let iin this.$data.aModel) {
i !=='itemArr' && (this.$data.aModel[i] =this.$options.data.call(this).aModel[i])
}
}
// 新建需要加typeCode
this.aModel.typeCode =read('typeCode')
// 区域
let res =await getUserAreaInfo()
if (res.data) {
let regionArr =Array.isArray(res.data) ? res.data : []
this.regionOptions = regionArr
this.typeLoading =false
}
},
throttleSave () {
this.$utils.throttle(this.saveForm, 450)
},
async saveForm () {
const {
aModel,
addBillTemplate,
updateBillTemplate,
regionOptions,
$utils
} =this
// 校验
if (!aModel.name) {
this.$message({type:'warning', message:`请填写模板名称` })
return
}
if (!aModel.areaCodeArr || !aModel.areaCodeArr.length) {
this.$message({type:'warning', message:`请选择区域设置` })
return
}
let params = $utils.pick(
aModel,
'id',
'areaCode',
'areaName',
'itemModelList',
'itemName',
'itemCode',
'name',
'typeCode'
)
params.areaCode = aModel.areaCodeArr.join(',')
params.areaName = regionOptions
.filter(r => aModel.areaCodeArr.some(a => a === r.businessCityId))
.map(r => r.businessCityName).join(',')
// 处理成后台需要的数据
for (let iin params.itemModelList) {
params.itemName =`${params.itemName}${i !=='0' ?',' :''}${params.itemModelList[i].name}`
params.itemCode =`${params.itemCode}${i !=='0' ?',' :''}${params.itemModelList[i].code}`
}
this.subLoad =true
try {
let res = params.id
?await updateBillTemplate(params)
:await addBillTemplate(params)
if (res.status ===200) {
// 新建或复制的则存一下id保证刷新后页面变为编辑页面
if (!params.id) {
this.aModel.id = res.data
save('templateId', res.data)
save('templatePageType', 'EDIT')
}
this.$message({type:'success', message:`${params.id ?'修改成功' :'新建成功'}` })
}
this.subLoad =false
}catch (err) {
this.subLoad =false
}
},
dragstart (val) {
this.oldItem = val
this.isActive = val
},
dragend (val) {
if (this.oldItem !==this.newItem) {
let oldIndex =this.aModel.itemModelList.indexOf(this.oldItem)
let newIndex =this.aModel.itemModelList.indexOf(this.newItem)
let newItems = [...this.aModel.itemModelList]
newItems.splice(oldIndex, 1)
newItems.splice(newIndex, 0, this.oldItem)
this.aModel.itemArr = [...newItems].map(a => a.code)
this.$message({type:'warning', message:'点击【保存模板】按钮后顺序才会保存' })
this.isActive = -1
}
this.dragEnter =''
},
// 记录移动过程中信息
dragenter (val) {
this.dragEnter = val.code
this.newItem = val
},
itemArrChange (code) {
this.aModel.itemArr.push(code)
},
setDefault () {
save('templateId', '')
save('templatePageType', 'SEE')
},
findName (dicts, code) {
if (this[dicts]) {
if (code) {
let obj =this[dicts].find(s => s.value === code ?0 :1)
if (obj) {
return obj.label
}
}else return '-'
}else return '-'
},
goBack () {
this.jumpTo('/spm/templateManage/templateList', '对账单模板管理', {}, `/spm/templateManage/editTemplate`)
}
}
}