2021-10-26 vue 拖拽

? <Layout class="router-inner">

? ? ? <a @click="goBack" style="position:absolute;right:20px;">返回

? ? ? <Button :disabled="isDis" type="primary" :loading="subLoad" @click="throttleSave">保存模板

? ? ? <Article class="" :isLoading="typeLoading">

? ? ? ? <div class="leftMenu">

? ? ? ? ? <p>模板名稱

? ? ? ? ? <div class="menuItem">

? ? ? ? ? ? <Input :disabled="isDis" v-model="aModel.name" :maxlength="30" />

? ? ? ? ? <p>區(qū)域設(shè)置

? ? ? ? ? <div class="menuItem">

? ? ? ? ? ? ? :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"

? ? ? ? ? ? ? />

? ? ? ? ? <p>模板字段

? ? ? ? ? <div class="menuItem items">

? ? ? ? ? ? <CheckboxGroup v-model="aModel.itemArr">

? ? ? ? ? ? ? ? v-for="oin templateFields"

? ? ? ? ? ? ? ? :key="o.code"

? ? ? ? ? ? ? ? :disabled="isDis || o.isMust"

? ? ? ? ? ? ? ? @on-change="itemArrChange(o.code)"

? ? ? ? ? ? ? ? :label="o.code"

? ? ? ? ? ? ? ? :value="o.isMust">

? ? ? ? ? ? ? ? {{ o.name }}

? ? ? ? <Layout class="contentLay">

? ? ? ? ? <Article class="router-inner" :isLoading="typeLoading">

? ? ? ? ? ? <div class="leftMenu">

? ? ? ? ? ? ? <p>已選字段

? ? ? ? ? ? ? <div class="dragWrapper">

? ? ? ? ? ? ? ? <transition-group name="flip-list">

? ? ? ? ? ? ? ? ? ? :class="['dragItem', o.code ===dragEnter ?'dragEnter' :'']"

? ? ? ? ? ? ? ? ? ? v-for="(o, i)in aModel.itemModelList"

? ? ? ? ? ? ? ? ? ? :key="i +1"

? ? ? ? ? ? ? ? ? ? :label="o.code"

? ? ? ? ? ? ? ? ? ? :disabled="o.isMust">

? ? ? ? ? ? ? ? ? ? <div class="sortNum">{{ i + 1 }}

? ? ? ? ? ? ? ? ? ? <div v-if="isDis" class="dragLabel">

? ? ? ? ? ? ? ? ? ? ? <span>{{ o.name }}

? ? ? ? ? ? ? ? ? ? ? v-else

? ? ? ? ? ? ? ? ? ? ? class="dragLabel"

? ? ? ? ? ? ? ? ? ? ? draggable="true"

? ? ? ? ? ? ? ? ? ? ? @dragstart="dragstart(o)"

? ? ? ? ? ? ? ? ? ? ? @dragenter="dragenter(o)"

? ? ? ? ? ? ? ? ? ? ? @dragend="dragend(o)">

? ? ? ? ? ? ? ? ? ? ? <span>{{ o.name }}

? ? ? ? ? ? ? ? ? ? ? <img class="sortImage" :src="sortSvg" />

? ? ? ? ? ? <h3 class="previewTitle">預(yù)覽模板

? ? ? ? ? ? ? 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:'導(dǎo)出',

? ? ? ? ? postion:'right',

? ? ? ? ? icon:'iconexport',

? ? ? ? ? fontFamily:'business_ui',

? ? ? ? ? type:'icon',

? ? ? ? ? disabled:false

? ? ? ? },

? ? ? ? settingBtu: {

slot:true,

? ? ? ? ? btuName:'表格設(shè)置', // 按鈕名稱

? ? ? ? ? postion:'right', // 位置區(qū)域

? ? ? ? ? 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 {}

}

})

// 已選數(shù)據(jù)

? ? ? ? ? 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) {

// 默認(rèn)的全量字段

? ? ? ? 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

? ? ? }

// 新建、編輯、復(fù)制糖声、查看

? ? ? 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(',')

// 模板字段中存在該字段才加入到用戶已選數(shù)據(jù)

? ? ? ? ? this.aModel.itemArr = itemModelList

.filter(t =>this.templateFields.some(s => s.code === t.code))

.map(a => a.code)

// 復(fù)制當(dāng)前模板則去掉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')

// 區(qū)域

? ? ? 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:`請?zhí)顚懩０迕Q` })

return

? ? ? }

if (!aModel.areaCodeArr || !aModel.areaCodeArr.length) {

this.$message({type:'warning', message:`請選擇區(qū)域設(shè)置` })

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(',')

// 處理成后臺需要的數(shù)據(jù)

? ? ? 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) {

// 新建或復(fù)制的則存一下id保證刷新后頁面變?yōu)榫庉嬳撁?/p>

? ? ? ? ? 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`)

}

@deep: ~'>>>';

.sh-header {

position:relative;

? border-bottom:1px solid #DCDCDC;

? display:flex;

? align-items:center;

? margin-bottom:20px;

}

.sh-content {

width: ~'calc(100% - 240px)';

}

.leftMenu {

color:#262626;

? border:1px solid #DCDCDC;

? min-height:500px;

? p {

padding:10px;

? ? font-size:14px;

? ? text-align:left;

? ? border-bottom:1px solid #EEEEEE;

? }

.menuItem {

padding:10px;

? ? font-size:14px;

? ? cursor:pointer;

? ? border-bottom:1px solid #EEEEEE;

? }

.menuItemActive {

color:#3377FF;

? }

.items {

display:flex;

? ? flex-direction:column;

? ? @{deep}.sh-checkbox-wrapper {

display:flex;

? ? ? margin:0;

? ? ? padding:7px 5px;

? ? }

}

.dragWrapper {

.dragItem {

font-size:12px;

? ? ? display:flex;

? ? ? padding:7px 0 0 5px;

? ? ? align-items:center;

? ? ? cursor:pointer;

? ? ? -webkit-touch-callout:none;

? ? ? -webkit-user-select:none;

? ? ? -khtml-user-select:none;

? ? ? -moz-user-select:none;

? ? ? -ms-user-select:none;

? ? ? user-select:none;

? ? ? .sortNum {

color:#ABABAB;

? ? ? ? width:18px;

? ? ? ? height:100%;

? ? ? }

.dragLabel {

display:flex;

? ? ? ? padding:4px 10px 7px 4px;

? ? ? ? align-items:center;

? ? ? ? justify-content:space-between;

? ? ? ? flex:1;

? ? ? ? border-bottom:1px solid #EEE;

? ? ? }

.sortImage {

opacity:0.4;

? ? ? ? width:14px;

? ? ? ? height:14px;

? ? ? ? float:right;

? ? ? }

}

.dragItem:hover {

box-shadow:0px 0px 2px rgba(0, 0, 0, 0.2);

? ? ? border-bottom:1px dashed #EEE;

? ? }

.dragEnter {

box-shadow:0px 0px 5px rgba(0, 0, 0, 0.6);

? ? }

}

.previewTitle {

width:100%;

? text-align:center;

? padding-bottom:14px;

}

.contentLay .sh-article {

padding-top:0;

}

.flip-list-move {

transition:transform 0.3s ease-in;

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末昼汗，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子蹋肮，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 216,843評論 6贊 502
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件改抡，死亡現(xiàn)場離奇詭異，居然都是意外死亡欠拾，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,538評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來刹枉，“玉大人，你說我怎么就攤上這事芥吟。” “怎么了棺耍？”我有些...
開封第一講書人閱讀 163,187評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經(jīng)常有香客問我以现，道長邑遏，這世上最難降的妖魔是什么憎蛤？我笑而不...
開封第一講書人閱讀 58,264評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任彬碱，我火速辦了婚禮巷疼，結(jié)果婚禮上估盘，老公的妹妹穿的比我還像新娘。我一直安慰自己箫踩，他們只是感情好，可當(dāng)我...
茶點故事閱讀 67,289評論 6贊 390
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般玫芦。火紅的嫁衣襯著肌膚如雪蘸拔。梳的紋絲不亂的頭發(fā)上宝冕，一...
開封第一講書人閱讀 51,231評論 1贊 299
城市分裂傳說
那天，我揣著相機與錄音洁闰，去河邊找鬼。笑死，一個胖子當(dāng)著我的面吹牛弓千，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 40,116評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼摄闸，長吁一口氣：“原來是場噩夢啊……” “哼炫欺！你這毒婦竟也來了树姨？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,945評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤士飒，失蹤者是張志新（化名）和其女友劉穎扰藕，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,367評論 1贊 313
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡酷师，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,581評論 2贊 333
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瘫里。...
茶點故事閱讀 39,754評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡劳殖，死狀恐怖宣增，靈堂內(nèi)的尸體忽然破棺而出劳景，到底是詐尸還是另有隱情瓮钥，我是刑警寧澤碉熄，帶...
沈念sama閱讀 35,458評論 5贊 344
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布琼梆，位于F島的核電站错览，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏煌往。R本人自食惡果不足惜倾哺，卻給世界環(huán)境...
茶點故事閱讀 41,068評論 3贊 327
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望刽脖。院中可真熱鬧羞海，春花似錦、人聲如沸曾棕。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,692評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽翘地。三九已至申尤，卻和暖如春癌幕，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背昧穿。一陣腳步聲響...
開封第一講書人閱讀 32,842評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工勺远，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人时鸵。一個月前我還...
沈念sama閱讀 47,797評論 2贊 369
代替公主和親
正文我出身青樓胶逢，卻偏偏與公主長得像，于是被迫代替她去往敵國和親饰潜。傳聞我的和親對象是個殘疾皇子初坠，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,654評論 2贊 354

2021-10-26 vue 拖拽

推薦閱讀更多精彩內(nèi)容