|
@@ -122,6 +122,13 @@
|
|
|
slot="suffix">
|
|
slot="suffix">
|
|
|
</i>
|
|
</i>
|
|
|
</el-input>
|
|
</el-input>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ class="sort-btn"
|
|
|
|
|
+ icon="el-icon-sort"
|
|
|
|
|
+ title="票种排序"
|
|
|
|
|
+ @click="openSortDialog">
|
|
|
|
|
+ </el-button>
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
:class="['ticket-list', category === 'batch' && 'list-batch']"
|
|
:class="['ticket-list', category === 'batch' && 'list-batch']"
|
|
@@ -176,14 +183,50 @@
|
|
|
v-model="ticketInfoVisible">
|
|
v-model="ticketInfoVisible">
|
|
|
<TicketInfo :data="ticketDetail"></TicketInfo>
|
|
<TicketInfo :data="ticketDetail"></TicketInfo>
|
|
|
</ElDialog>
|
|
</ElDialog>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 票种排序弹框 -->
|
|
|
|
|
+ <native-dialog
|
|
|
|
|
+ title="票种排序"
|
|
|
|
|
+ :visible.sync="sortDialogVisible"
|
|
|
|
|
+ width="600px"
|
|
|
|
|
+ :close-on-click-modal="false">
|
|
|
|
|
+ <div v-loading="sortLoading">
|
|
|
|
|
+ <draggable
|
|
|
|
|
+ v-model="sortList"
|
|
|
|
|
+ handle=".sort-item"
|
|
|
|
|
+ animation="200">
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="sort-item"
|
|
|
|
|
+ v-for="item in sortList"
|
|
|
|
|
+ :key="item.ticketTypeId">
|
|
|
|
|
+ <span class="sort-name">{{ item.name }}</span>
|
|
|
|
|
+ <el-tag
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ :type="item.isSale !== 0 ? 'success' : 'info'">
|
|
|
|
|
+ {{ item.isSale !== 0 ? '已激活' : '已禁用' }}
|
|
|
|
|
+ </el-tag>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </draggable>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <span
|
|
|
|
|
+ slot="footer"
|
|
|
|
|
+ class="dialog-footer">
|
|
|
|
|
+ <el-button @click="sortDialogVisible = false">取 消</el-button>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ @click="saveSortList">确 定</el-button>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </native-dialog>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-import { getTicketTypeList, getTicketTypeByDate } from '@/api/ticketType'
|
|
|
|
|
|
|
+import { getTicketTypeList, getTicketTypeByDate, getTicketTypeSort, saveTicketTypeSort } from '@/api/ticketType'
|
|
|
|
|
+import draggable from 'vuedraggable'
|
|
|
import { getBatchList } from '@/api/batch'
|
|
import { getBatchList } from '@/api/batch'
|
|
|
import moment from 'moment'
|
|
import moment from 'moment'
|
|
|
import ElDialog from '@/components/Dialog'
|
|
import ElDialog from '@/components/Dialog'
|
|
|
|
|
+import { Dialog as NativeDialog } from 'element-ui'
|
|
|
import TicketInfo from './TicketInfo'
|
|
import TicketInfo from './TicketInfo'
|
|
|
import { EventBus } from '@/utils/eventBus'
|
|
import { EventBus } from '@/utils/eventBus'
|
|
|
// import TagSelector from './TagSelector.vue'
|
|
// import TagSelector from './TagSelector.vue'
|
|
@@ -203,7 +246,9 @@ export default {
|
|
|
},
|
|
},
|
|
|
components: {
|
|
components: {
|
|
|
ElDialog,
|
|
ElDialog,
|
|
|
- TicketInfo
|
|
|
|
|
|
|
+ NativeDialog,
|
|
|
|
|
+ TicketInfo,
|
|
|
|
|
+ draggable
|
|
|
},
|
|
},
|
|
|
data () {
|
|
data () {
|
|
|
return {
|
|
return {
|
|
@@ -233,7 +278,10 @@ export default {
|
|
|
{ label: '后天', value: moment().add(2, 'days').format('YYYY-MM-DD') }
|
|
{ label: '后天', value: moment().add(2, 'days').format('YYYY-MM-DD') }
|
|
|
],
|
|
],
|
|
|
allBatchList: [],
|
|
allBatchList: [],
|
|
|
- currentBatch: {}
|
|
|
|
|
|
|
+ currentBatch: {},
|
|
|
|
|
+ sortDialogVisible: false,
|
|
|
|
|
+ sortLoading: false,
|
|
|
|
|
+ sortList: []
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -561,6 +609,53 @@ export default {
|
|
|
},
|
|
},
|
|
|
getLeftNums (item) {
|
|
getLeftNums (item) {
|
|
|
return item.leftNums <= -1 ? '不限' : item.leftNums
|
|
return item.leftNums <= -1 ? '不限' : item.leftNums
|
|
|
|
|
+ },
|
|
|
|
|
+ // 打开票种排序弹框
|
|
|
|
|
+ async openSortDialog () {
|
|
|
|
|
+ this.sortDialogVisible = true
|
|
|
|
|
+ this.sortLoading = true
|
|
|
|
|
+ try {
|
|
|
|
|
+ const sortRes = await getTicketTypeSort()
|
|
|
|
|
+ const sortData = sortRes?.data || []
|
|
|
|
|
+ // 用排序接口的顺序排列 tableData
|
|
|
|
|
+ const sortMap = new Map(sortData.map(s => [s.ticketTypeId, s.sort]))
|
|
|
|
|
+ this.sortList = [...this.tableData]
|
|
|
|
|
+ .map(item => ({
|
|
|
|
|
+ ticketTypeId: item.id,
|
|
|
|
|
+ name: item.name,
|
|
|
|
|
+ isSale: item.isSale,
|
|
|
|
|
+ sort: sortMap.has(item.id) ? sortMap.get(item.id) : 9999
|
|
|
|
|
+ }))
|
|
|
|
|
+ .sort((a, b) => a.sort - b.sort)
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ this.sortList = this.tableData.map((item, index) => ({
|
|
|
|
|
+ ticketTypeId: item.id,
|
|
|
|
|
+ name: item.name,
|
|
|
|
|
+ isSale: item.isSale,
|
|
|
|
|
+ sort: index
|
|
|
|
|
+ }))
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ this.sortLoading = false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 保存票种排序
|
|
|
|
|
+ async saveSortList () {
|
|
|
|
|
+ const data = this.sortList.map((item, index) => ({
|
|
|
|
|
+ ticketTypeId: item.ticketTypeId,
|
|
|
|
|
+ sort: index + 1
|
|
|
|
|
+ }))
|
|
|
|
|
+ try {
|
|
|
|
|
+ await saveTicketTypeSort(data)
|
|
|
|
|
+ this.$message.success('排序保存成功')
|
|
|
|
|
+ this.sortDialogVisible = false
|
|
|
|
|
+ // 按新排序更新 tableData
|
|
|
|
|
+ const sortMap = new Map(data.map(s => [s.ticketTypeId, s.sort]))
|
|
|
|
|
+ this.tableData.sort((a, b) => {
|
|
|
|
|
+ return (sortMap.get(a.id) || 9999) - (sortMap.get(b.id) || 9999)
|
|
|
|
|
+ })
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ this.$message.error('排序保存失败')
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
beforeDestroy () {
|
|
beforeDestroy () {
|
|
@@ -654,7 +749,11 @@ export default {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
|
|
.search-input {
|
|
.search-input {
|
|
|
- width: calc(100% - 120px);
|
|
|
|
|
|
|
+ width: calc(100% - 130px);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sort-btn {
|
|
|
|
|
+ margin-left: 2px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.ticket-list {
|
|
.ticket-list {
|
|
@@ -892,4 +991,28 @@ export default {
|
|
|
max-height: calc(100vh - 400px);
|
|
max-height: calc(100vh - 400px);
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.sort-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ padding: 12px 16px;
|
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
|
|
+ cursor: grab;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ transition: background 0.2s;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: #f5f7fa;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ cursor: grabbing;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sort-name {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|